{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "invoice",
  "title": "Invoice",
  "author": "AlgorizeTech",
  "description": "Ask the user to pick one of 3 invoice variants: https://avaraui.com/view/invoice. This item holds 3 of them as looks of one component (default, corporate, brutalist). Skip the question if the user already named one. A printable invoice with line items, tax and totals, in five presentation styles including asymmetric split and modern geometric fashion branding. Use it for billing summaries and receipt pages.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/Invoice.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n  Heart,\n  Plus,\n  Save,\n  Send,\n  Trash2,\n  CheckCircle2,\n  QrCode,\n  Building2,\n  Printer,\n  Download,\n  Edit3,\n  Phone,\n  MapPin,\n  Mail,\n  Globe,\n  CheckSquare,\n} from \"lucide-react\";\nimport { useState } from \"react\";\nimport { getThemeStyles } from \"./invoice-theme\";\n\n// ==========================================\n// VARIANT & COLOR CONFIGURATION\n// ==========================================\nexport type InvoiceVariant =\n  | \"default\"\n  | \"corporate\"\n  | \"brutalist\"\n  | \"geometric\"\n  | \"split\";\n\nexport type InvoiceColor =\n  | \"indigo\"\n  | \"rose\"\n  | \"emerald\"\n  | \"zinc\"\n  | (string & {});\n\nconst invoiceVariants: Record<InvoiceVariant, Record<string, string>> = {\n  default: {\n    wrapper: \"bg-transparent\",\n    invoicePanel: \"bg-card border border-border shadow-sm rounded-2xl p-4 sm:p-8 md:p-10\",\n    sidebarCard: \"bg-card border border-border shadow-sm rounded-2xl\",\n    tableHeader: \"bg-muted border-b border-border\",\n    tableRow: \"divide-border hover:bg-muted/50\",\n    inputBg: \"bg-muted border border-border\",\n    blockBg: \"bg-muted border border-border\",\n  },\n  corporate: {\n    wrapper: \"bg-transparent\",\n    invoicePanel:\n      \"bg-card border-2 border-foreground/80 dark:border-foreground/20 shadow-2xl rounded-2xl overflow-hidden p-0\",\n    sidebarCard:\n      \"bg-card border border-border shadow-sm rounded-2xl\",\n    tableHeader:\n      \"bg-foreground text-background dark:bg-muted dark:text-foreground font-semibold uppercase text-xs tracking-wider\",\n    tableRow:\n      \"divide-border hover:bg-muted\",\n    inputBg:\n      \"bg-muted border border-input\",\n    blockBg:\n      \"bg-muted border border-border rounded-xl\",\n  },\n  brutalist: {\n    wrapper: \"bg-transparent\",\n    invoicePanel:\n      \"bg-card border-4 border-foreground shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] sm:shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_0px_rgba(255,255,255,1)] rounded-none p-4 sm:p-8 md:p-10 font-mono\",\n    sidebarCard:\n      \"bg-card border-4 border-foreground shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] dark:shadow-[6px_6px_0px_0px_rgba(255,255,255,1)] rounded-none\",\n    tableHeader:\n      \"bg-foreground text-background font-bold uppercase border-b-4 border-foreground\",\n    tableRow:\n      \"divide-y-4 divide-foreground hover:bg-yellow-200 dark:hover:bg-muted font-mono\",\n    inputBg:\n      \"bg-card border-2 border-foreground font-mono\",\n    blockBg:\n      \"bg-yellow-100 dark:bg-muted border-4 border-foreground p-4\",\n  },\n  geometric: {\n    wrapper: \"bg-transparent\",\n    invoicePanel:\n      \"bg-card border border-border rounded-[var(--radius)] overflow-hidden font-sans w-full\",\n    sidebarCard:\n      \"bg-card border border-border shadow-sm rounded-2xl\",\n    tableHeader:\n      \"uppercase text-[11px] sm:text-xs font-bold tracking-wider\",\n    tableRow:\n      \"border-b border-border/60\",\n    inputBg:\n      \"bg-muted/60 border border-border\",\n    blockBg:\n      \"bg-muted/40\",\n  },\n  split: {\n    wrapper: \"bg-transparent\",\n    invoicePanel:\n      \"bg-card border border-border rounded-[var(--radius)] overflow-hidden font-sans w-full\",\n    sidebarCard:\n      \"bg-card border border-border shadow-sm rounded-2xl\",\n    tableHeader:\n      \"uppercase text-[11px] sm:text-xs font-bold tracking-wider\",\n    tableRow:\n      \"border-b border-border/40\",\n    inputBg:\n      \"bg-muted/60 border border-border\",\n    blockBg:\n      \"bg-[#23272f] text-neutral-200\",\n  },\n};\n\nexport type InvoiceItem = {\n  item: string;\n  description?: string;\n  hours?: number | string;\n  qty: number | string;\n  unitPrice?: string;\n  total: string;\n};\n\nexport type InvoiceData = {\n  invoiceNumber: string;\n  dateIssued: string;\n  dateDue?: string;\n  companyName?: string;\n  tagline?: string;\n  invoiceTo: {\n    name: string;\n    company?: string;\n    address?: string;\n    phone?: string;\n    email?: string;\n    description?: string;\n  };\n  invoiceFrom?: {\n    name?: string;\n    company?: string;\n    address?: string;\n    phone?: string;\n    email?: string;\n    title?: string;\n  };\n  paymentMethod?: {\n    method?: string;\n    accountNo?: string;\n    accountName?: string;\n    branchName?: string;\n  };\n  billTo?: {\n    totalDue?: string;\n    bankName?: string;\n    country?: string;\n    iban?: string;\n    swift?: string;\n  };\n  items: InvoiceItem[];\n  subtotal: string;\n  discount?: string;\n  tax?: string;\n  grandTotal: string;\n  salesPerson?: string;\n  note?: string;\n  terms?: string[];\n  signatory?: {\n    name: string;\n    title?: string;\n  };\n  companyContact?: {\n    phone?: string;\n    email?: string;\n    social?: string;\n    address?: string;\n    website?: string;\n  };\n};\n\ntype EditableInputProps = {\n  value?: string | number;\n  onChange: React.ChangeEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  className?: string;\n  align?: \"left\" | \"right\" | \"center\";\n  isEditing: boolean;\n  inputBg?: string;\n  focusRing?: string;\n};\n\nfunction EditableInput({\n  value,\n  onChange,\n  placeholder,\n  className = \"\",\n  align = \"left\",\n  isEditing,\n  inputBg = \"bg-muted border border-border\",\n  focusRing = \"focus:ring-primary/20\",\n}: EditableInputProps) {\n  if (!isEditing) {\n    return <span className={`block ${className}`}>{value}</span>;\n  }\n\n  return (\n    <input\n      value={value ?? \"\"}\n      onChange={onChange}\n      placeholder={placeholder}\n      className={cn(\n        `w-full rounded-md px-3 py-1.5 outline-none focus:ring-2 transition-all text-${align}`,\n        inputBg,\n        focusRing,\n        className,\n      )}\n    />\n  );\n}\n\nfunction GeometricTilePattern({\n  className = \"\",\n  themeBg = \"bg-primary\",\n  themeLight = \"bg-primary/30\",\n}: {\n  className?: string;\n  themeBg?: string;\n  themeLight?: string;\n}) {\n  return (\n    <div\n      className={cn(\n        \"grid grid-cols-3 grid-rows-2 gap-0.5 w-24 h-16 sm:w-28 sm:h-18 overflow-hidden select-none rounded-[2px]\",\n        className\n      )}\n      aria-hidden=\"true\"\n    >\n      {/* Tile 1: Quarter circle curve */}\n      <div className={cn(\"relative overflow-hidden\", themeLight)}>\n        <div className={cn(\"absolute top-0 left-0 w-full h-full rounded-br-full\", themeBg)} />\n        <div className=\"absolute top-1 left-1 size-2 rounded-full bg-background\" />\n      </div>\n      {/* Tile 2: Half moon / circle */}\n      <div className={cn(\"relative flex items-center justify-center\", themeBg)}>\n        <div className={cn(\"w-3.5 h-7 rounded-r-full\", themeLight)} />\n      </div>\n      {/* Tile 3: Top-Right quarter arc */}\n      <div className={cn(\"relative overflow-hidden\", themeLight)}>\n        <div className={cn(\"absolute bottom-0 right-0 w-full h-full rounded-tl-full\", themeBg)} />\n        <div className=\"absolute bottom-1 right-1 size-2 rounded-full bg-background\" />\n      </div>\n      {/* Tile 4: Half circle facing left */}\n      <div className={cn(\"relative flex items-center justify-start\", themeBg)}>\n        <div className=\"w-3 h-full bg-background/80 rounded-r-full\" />\n      </div>\n      {/* Tile 5: Quarter leaf */}\n      <div className={cn(\"relative overflow-hidden\", themeLight)}>\n        <div className={cn(\"absolute inset-0 rounded-tr-[80%] rounded-bl-[80%]\", themeBg)} />\n      </div>\n      {/* Tile 6: Half circle facing right */}\n      <div className={cn(\"relative flex items-center justify-center\", themeLight)}>\n        <div className=\"w-3.5 h-7 bg-background rounded-l-full\" />\n      </div>\n    </div>\n  );\n}\n\nfunction WatermarkArcs({\n  className = \"\",\n  strokeClassName = \"\",\n}: {\n  className?: string;\n  strokeClassName?: string;\n}) {\n  return (\n    <svg\n      viewBox=\"0 0 160 160\"\n      className={cn(\"pointer-events-none select-none overflow-visible\", className)}\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      aria-hidden=\"true\"\n    >\n      {[28, 50, 72, 94, 116, 138, 160].map((r) => (\n        <circle\n          key={r}\n          cx=\"0\"\n          cy=\"160\"\n          r={r}\n          stroke=\"currentColor\"\n          strokeWidth=\"1.5\"\n          className={cn(\"transition-colors\", strokeClassName)}\n        />\n      ))}\n    </svg>\n  );\n}\n\nexport default function Invoice({\n  invoiceData,\n  variant = \"default\",\n  color = \"primary\",\n}: {\n  invoiceData: InvoiceData;\n  variant?: InvoiceVariant;\n  color?: InvoiceColor;\n}) {\n  const [data, setData] = useState<InvoiceData>(invoiceData);\n  const [isEditing, setIsEditing] = useState(false);\n\n  const { theme, style } = getThemeStyles(color as string);\n\n  const handleMainChange = (field: string, value: string) =>\n    setData((prev) => ({ ...prev, [field]: value }));\n  const handleNestedChange = (\n    section:\n      | \"invoiceTo\"\n      | \"billTo\"\n      | \"invoiceFrom\"\n      | \"paymentMethod\"\n      | \"companyContact\",\n    field: string,\n    value: string,\n  ) =>\n    setData((prev) => ({\n      ...prev,\n      [section]: {\n        ...((prev[section] as Record<string, unknown>) || {}),\n        [field]: value,\n      },\n    }));\n  const handleItemChange = (\n    index: number,\n    field: keyof InvoiceItem,\n    value: string,\n  ) => {\n    const newItems = [...data.items];\n    newItems[index] = { ...newItems[index], [field]: value };\n    setData({ ...data, items: newItems });\n  };\n\n  const addItem = () =>\n    setData({\n      ...data,\n      items: [\n        ...data.items,\n        { item: \"New Item\", description: \"Item description\", hours: 0, qty: 1, total: \"$100\" },\n      ],\n    });\n  const removeItem = (index: number) =>\n    setData({ ...data, items: data.items.filter((_, i) => i !== index) });\n\n  const handlePrint = () => window.print();\n\n  const handleDownload = () => {\n    const blob = new Blob([JSON.stringify(data, null, 2)], {\n      type: \"application/json\",\n    });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement(\"a\");\n    link.href = url;\n    link.download = `Invoice_${data.invoiceNumber.replace(\"#\", \"\")}.json`;\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n  };\n\n  return (\n    <div style={style} className=\"w-full max-w-full font-sans transition-colors duration-300\">\n      {/* ========================================================================= */}\n      {/* 1. CORPORATE EXECUTIVE VARIANT */}\n      {/* ========================================================================= */}\n      {variant === \"corporate\" && (\n        <div className=\"bg-card border-2 border-foreground/80 dark:border-foreground/20 shadow-2xl rounded-2xl overflow-hidden w-full\">\n          {/* Action Toolbar */}\n          <div className=\"bg-foreground text-background dark:bg-muted dark:text-foreground p-3 sm:px-6 sm:py-2.5 border-b border-border flex items-center justify-end print:hidden\">\n            <div className=\"flex items-center gap-1.5 sm:gap-2\">\n              <button\n                onClick={() => setIsEditing(!isEditing)}\n                className={cn(\n                  \"px-3 py-1.5 sm:px-3.5 sm:py-1.5 rounded-xl font-semibold text-xs flex items-center justify-center gap-1.5 transition-all cursor-pointer shadow-sm\",\n                  theme.bg\n                )}\n                title={isEditing ? \"Save Statement\" : \"Edit Statement\"}\n              >\n                {isEditing ? <Save className=\"w-3.5 h-3.5\" /> : <Edit3 className=\"w-3.5 h-3.5\" />}\n                <span>{isEditing ? \"Save\" : \"Edit\"}</span>\n              </button>\n              <button\n                onClick={handlePrint}\n                className=\"px-2.5 py-1.5 sm:px-3 sm:py-1.5 rounded-xl bg-background/10 hover:bg-background/20 text-background/85 border-background/15 dark:bg-card dark:hover:bg-background dark:text-foreground dark:border-border font-semibold text-xs flex items-center justify-center gap-1.5 transition-all cursor-pointer border\"\n                title=\"Print PDF\"\n              >\n                <Printer className=\"w-3.5 h-3.5\" />\n                <span className=\"hidden sm:inline\">Print</span>\n              </button>\n              <button\n                onClick={handleDownload}\n                className=\"px-2.5 py-1.5 sm:px-3 sm:py-1.5 rounded-xl bg-background/10 hover:bg-background/20 text-background/85 border-background/15 dark:bg-card dark:hover:bg-background dark:text-foreground dark:border-border font-semibold text-xs flex items-center justify-center gap-1.5 transition-all cursor-pointer border\"\n                title=\"Export JSON\"\n              >\n                <Download className=\"w-3.5 h-3.5\" />\n                <span className=\"hidden sm:inline\">JSON</span>\n              </button>\n            </div>\n          </div>\n\n          {/* Top Corporate Banner */}\n          <div className={cn(\"p-6 sm:p-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-6\", theme.bg)}>\n            <div className=\"flex items-center gap-3.5 sm:gap-4\">\n              <div className={cn(\"w-11 h-11 sm:w-13 sm:h-13 rounded-2xl shadow-xl flex items-center justify-center shrink-0\", theme.inverse)}>\n                <Building2 className=\"w-6 h-6\" />\n              </div>\n              <div className=\"min-w-0 flex-1\">\n                <div className=\"flex items-center gap-2\">\n                  <h1 className={cn(\"text-xl sm:text-2xl font-bold tracking-tight\", theme.fg)}>AVARA_UI</h1>\n                  <CheckCircle2 className={cn(\"w-4 h-4 sm:hidden shrink-0\", theme.fg)} />\n                </div>\n                <p className={cn(\"text-[11px] sm:text-xs mt-0.5 break-words\", theme.fgMuted)}>450 South Brand Brooklyn, CA 91905</p>\n              </div>\n            </div>\n\n            <div className={cn(\"text-left sm:text-right w-full sm:w-auto pt-2 sm:pt-0 border-t sm:border-none\", theme.fgBorder)}>\n              <span className={cn(\"hidden sm:inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-semibold shadow-md mb-1.5\", theme.inverse)}>\n                <CheckCircle2 className=\"w-3.5 h-3.5\" /> VERIFIED STATEMENT\n              </span>\n              <EditableInput\n                isEditing={isEditing}\n                value={data.invoiceNumber}\n                onChange={(e) => handleMainChange(\"invoiceNumber\", e.target.value)}\n                align=\"right\"\n                inputBg={cn(\"border font-mono font-bold\", theme.fgSoft, theme.fg)}\n                className={cn(\"text-2xl sm:text-3xl font-bold font-mono break-all tracking-tight\", theme.fg)}\n              />\n            </div>\n          </div>\n\n          {/* Metadata Strip */}\n          <div className=\"p-4 sm:p-8 grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 bg-muted border-b border-border\">\n            <div className=\"p-4 rounded-xl bg-card border border-border shadow-sm space-y-1\">\n              <span className=\"text-[10px] font-semibold uppercase tracking-wider text-muted-foreground block mb-2\">Invoice To</span>\n              <EditableInput isEditing={isEditing} value={data.invoiceTo.name} onChange={(e) => handleNestedChange(\"invoiceTo\", \"name\", e.target.value)} className=\"font-semibold text-foreground text-sm\" />\n              <EditableInput isEditing={isEditing} value={data.invoiceTo.company} onChange={(e) => handleNestedChange(\"invoiceTo\", \"company\", e.target.value)} className=\"text-xs text-muted-foreground\" />\n              <EditableInput isEditing={isEditing} value={data.invoiceTo.email} onChange={(e) => handleNestedChange(\"invoiceTo\", \"email\", e.target.value)} className=\"text-xs text-muted-foreground break-all\" />\n            </div>\n            <div className=\"p-4 rounded-xl bg-card border border-border shadow-sm space-y-1\">\n              <span className=\"text-[10px] font-semibold uppercase tracking-wider text-muted-foreground block mb-2\">Schedule & Due</span>\n              <p className=\"text-xs text-muted-foreground flex items-center justify-between\">Issued: <EditableInput isEditing={isEditing} value={data.dateIssued} onChange={(e) => handleMainChange(\"dateIssued\", e.target.value)} className=\"font-semibold text-foreground\" /></p>\n              <p className=\"text-xs text-muted-foreground flex items-center justify-between\">Due Date: <EditableInput isEditing={isEditing} value={data.dateDue} onChange={(e) => handleMainChange(\"dateDue\", e.target.value)} className=\"font-semibold text-foreground\" /></p>\n              <p className=\"text-xs text-muted-foreground flex items-center justify-between\">Rep: <EditableInput isEditing={isEditing} value={data.salesPerson} onChange={(e) => handleMainChange(\"salesPerson\", e.target.value)} className=\"font-semibold text-foreground\" /></p>\n            </div>\n            <div className=\"p-4 rounded-xl bg-card border border-border shadow-sm space-y-1\">\n              <span className=\"text-[10px] font-semibold uppercase tracking-wider text-muted-foreground block mb-2\">Settlement Account</span>\n              <EditableInput isEditing={isEditing} value={data.billTo?.bankName} onChange={(e) => handleNestedChange(\"billTo\", \"bankName\", e.target.value)} className=\"text-xs text-muted-foreground font-semibold\" />\n              <EditableInput isEditing={isEditing} value={data.billTo?.iban} onChange={(e) => handleNestedChange(\"billTo\", \"iban\", e.target.value)} className=\"text-xs font-mono text-muted-foreground break-all\" />\n              <EditableInput isEditing={isEditing} value={data.billTo?.swift} onChange={(e) => handleNestedChange(\"billTo\", \"swift\", e.target.value)} className=\"text-xs font-mono text-muted-foreground break-all\" />\n            </div>\n          </div>\n\n          {/* Items Section: Mobile Executive Cards (< sm) & Desktop Table View (>= sm) */}\n          <div className=\"p-4 sm:p-8\">\n            {/* Mobile Executive Card View (< sm) */}\n            <div className=\"block sm:hidden space-y-3 mb-6\">\n              {data.items.map((item, idx) => (\n                <div\n                  key={idx}\n                  className=\"p-4 rounded-2xl bg-muted/60 border border-border space-y-3 shadow-sm\"\n                >\n                  <div className=\"flex items-center justify-between gap-2\">\n                    <span className={cn(\"text-[10px] font-mono font-semibold tracking-wider uppercase px-2.5 py-1 rounded-md shadow-sm\", theme.bg)}>\n                      SERVICE #{idx + 1}\n                    </span>\n                    {isEditing && (\n                      <button\n                        onClick={() => removeItem(idx)}\n                        className=\"p-1.5 rounded-lg text-rose-500 hover:text-rose-600 border border-rose-200 dark:border-rose-900/60 bg-rose-50 dark:bg-rose-950/40 cursor-pointer\"\n                        title=\"Remove service item\"\n                      >\n                        <Trash2 className=\"w-4 h-4\" />\n                      </button>\n                    )}\n                  </div>\n\n                  <div className=\"space-y-1\">\n                    <span className=\"text-[10px] font-semibold uppercase tracking-wider text-muted-foreground block\">Service Description</span>\n                    <EditableInput\n                      isEditing={isEditing}\n                      value={item.item}\n                      onChange={(e) => handleItemChange(idx, \"item\", e.target.value)}\n                      inputBg=\"bg-card text-foreground border border-border font-semibold text-xs\"\n                      className=\"font-semibold text-foreground text-sm\"\n                    />\n                    <EditableInput\n                      isEditing={isEditing}\n                      value={item.description}\n                      onChange={(e) => handleItemChange(idx, \"description\", e.target.value)}\n                      inputBg=\"bg-card text-foreground border border-border text-xs\"\n                      className=\"text-xs text-muted-foreground\"\n                    />\n                  </div>\n\n                  <div className=\"grid grid-cols-3 gap-2 pt-2 border-t border-border text-xs\">\n                    <div className=\"bg-card p-2.5 rounded-xl border border-border\">\n                      <span className=\"text-[9px] font-semibold text-muted-foreground block uppercase mb-0.5\">Hours</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        value={item.hours}\n                        onChange={(e) => handleItemChange(idx, \"hours\", e.target.value)}\n                        inputBg=\"bg-muted text-foreground border border-border text-xs\"\n                        className=\"font-semibold text-foreground text-xs\"\n                      />\n                    </div>\n                    <div className=\"bg-card p-2.5 rounded-xl border border-border\">\n                      <span className=\"text-[9px] font-semibold text-muted-foreground block uppercase mb-0.5\">Qty</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        value={item.qty}\n                        onChange={(e) => handleItemChange(idx, \"qty\", e.target.value)}\n                        inputBg=\"bg-muted text-foreground border border-border text-xs\"\n                        className=\"font-semibold text-foreground text-xs\"\n                      />\n                    </div>\n                    <div className=\"bg-card p-2.5 rounded-xl border border-border\">\n                      <span className=\"text-[9px] font-semibold text-muted-foreground block uppercase mb-0.5\">Amount</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        value={item.total}\n                        onChange={(e) => handleItemChange(idx, \"total\", e.target.value)}\n                        align=\"right\"\n                        inputBg=\"bg-muted text-foreground border border-border text-xs font-semibold\"\n                        className=\"font-semibold text-foreground text-xs\"\n                      />\n                    </div>\n                  </div>\n                </div>\n              ))}\n            </div>\n\n            {/* Desktop Table View (>= sm) */}\n            <div className=\"hidden sm:block rounded-xl border border-border mb-6 overflow-hidden\">\n              <table className=\"w-full text-left text-xs sm:text-sm border-collapse\">\n                <thead className=\"bg-foreground text-background dark:bg-muted dark:text-foreground text-xs uppercase tracking-wider font-semibold\">\n                  <tr>\n                    <th className=\"p-3.5 w-10\">#</th>\n                    <th className=\"p-3.5\">Service Description</th>\n                    <th className=\"p-3.5 text-right w-20\">Qty</th>\n                    <th className=\"p-3.5 text-right w-28\">Amount</th>\n                    {isEditing && <th className=\"p-3.5 text-center w-12\">Act</th>}\n                  </tr>\n                </thead>\n                <tbody className=\"divide-y divide-border\">\n                  {data.items.map((item, idx) => (\n                    <tr key={idx} className=\"hover:bg-muted\">\n                      <td className=\"p-3.5 font-mono text-xs text-muted-foreground\">{idx + 1}</td>\n                      <td className=\"p-3.5 space-y-1\">\n                        <EditableInput isEditing={isEditing} value={item.item} onChange={(e) => handleItemChange(idx, \"item\", e.target.value)} className=\"font-semibold text-foreground\" />\n                        <EditableInput isEditing={isEditing} value={item.description} onChange={(e) => handleItemChange(idx, \"description\", e.target.value)} className=\"text-xs text-muted-foreground\" />\n                      </td>\n                      <td className=\"p-3.5 text-right font-medium\">\n                        <EditableInput isEditing={isEditing} value={item.qty} onChange={(e) => handleItemChange(idx, \"qty\", e.target.value)} align=\"right\" />\n                      </td>\n                      <td className=\"p-3.5 text-right font-semibold text-foreground\">\n                        <EditableInput isEditing={isEditing} value={item.total} onChange={(e) => handleItemChange(idx, \"total\", e.target.value)} align=\"right\" />\n                      </td>\n                      {isEditing && (\n                        <td className=\"p-3.5 text-center\">\n                          <button onClick={() => removeItem(idx)} className=\"text-rose-500 hover:text-rose-700 p-1 cursor-pointer\"><Trash2 className=\"w-4 h-4\" /></button>\n                        </td>\n                      )}\n                    </tr>\n                  ))}\n                </tbody>\n              </table>\n            </div>\n\n            {isEditing && (\n              <button onClick={addItem} className={cn(\"flex items-center gap-2 text-xs font-semibold mb-6 px-3.5 py-2 rounded-xl border border-border bg-muted/60 hover:bg-muted transition-all cursor-pointer shadow-sm\", theme.text)}>\n                <Plus className=\"w-4 h-4\" /> Add Service Item\n              </button>\n            )}\n\n            {/* Footer Summary */}\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6 items-center pt-6 border-t border-border\">\n              <div className=\"p-4 rounded-xl bg-muted border border-border flex items-center gap-4\">\n                <QrCode className=\"w-10 h-10 text-foreground shrink-0\" />\n                <div>\n                  <p className=\"font-semibold text-xs text-foreground\">Mobile Bank Scan & Pay</p>\n                  <p className=\"text-[11px] text-muted-foreground\">Scan with corporate banking app to settle instantly.</p>\n                </div>\n              </div>\n              <div className=\"space-y-2 text-left md:text-right\">\n                <p className=\"text-xs text-muted-foreground flex justify-between md:justify-end gap-2\">Subtotal: <EditableInput isEditing={isEditing} value={data.subtotal} onChange={(e) => handleMainChange(\"subtotal\", e.target.value)} className=\"font-semibold text-foreground\" /></p>\n                <p className=\"text-xs text-muted-foreground flex justify-between md:justify-end gap-2\">Tax: <EditableInput isEditing={isEditing} value={data.tax} onChange={(e) => handleMainChange(\"tax\", e.target.value)} className=\"font-semibold text-foreground\" /></p>\n                <div className=\"pt-2 border-t border-border\">\n                  <span className=\"text-xs text-muted-foreground uppercase font-mono block\">Grand Total Due</span>\n                  <EditableInput isEditing={isEditing} value={data.grandTotal} onChange={(e) => handleMainChange(\"grandTotal\", e.target.value)} align=\"right\" className={cn(\"text-2xl sm:text-3xl font-bold\", theme.text)} />\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* ========================================================================= */}\n      {/* 2. NEO-BRUTALIST VARIANT */}\n      {/* ========================================================================= */}\n      {variant === \"brutalist\" && (\n        <div className=\"space-y-6 font-mono w-full\">\n          {/* Action Bar */}\n          <div className={cn(\"p-4 border-4 border-foreground shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] sm:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 print:hidden\", theme.bg)}>\n            <span className={cn(\"font-bold uppercase text-xs sm:text-sm\", theme.fg)}>[ACTION_PANEL // NEO_BRUTAL]</span>\n            <div className=\"flex flex-wrap items-center gap-2.5 w-full sm:w-auto\">\n              <button onClick={() => setIsEditing(!isEditing)} className=\"flex-1 sm:flex-initial px-3.5 py-2 bg-foreground text-background font-bold text-xs uppercase border-2 border-foreground shadow-[2px_2px_0px_0px_rgba(255,255,255,1)] hover:bg-foreground/85 cursor-pointer\">\n                {isEditing ? \"SAVE_DATA\" : \"EDIT_INVOICE\"}\n              </button>\n              <button onClick={handlePrint} className=\"flex-1 sm:flex-initial px-3.5 py-2 bg-background text-foreground font-bold text-xs uppercase border-2 border-foreground shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:bg-muted cursor-pointer\">PRINT_PDF</button>\n              <button onClick={handleDownload} className=\"flex-1 sm:flex-initial px-3.5 py-2 bg-background text-foreground font-bold text-xs uppercase border-2 border-foreground shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] hover:bg-muted cursor-pointer\">GET_JSON</button>\n            </div>\n          </div>\n\n          <div className=\"bg-card border-4 border-foreground shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] sm:shadow-[10px_10px_0px_0px_rgba(0,0,0,1)] p-4 sm:p-8 md:p-10 space-y-6 sm:space-y-8\">\n            <div className=\"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 pb-6 border-b-4 border-foreground\">\n              <div>\n                <span className={cn(\"border-2 border-foreground font-bold px-2.5 py-1 text-xs uppercase tracking-wider\", theme.bg)}>STATEMENT // OFFICIAL</span>\n                <h1 className=\"text-2xl sm:text-3xl font-bold uppercase text-foreground mt-3\">AVARA_UI</h1>\n              </div>\n              <div className=\"text-left sm:text-right\">\n                <EditableInput isEditing={isEditing} value={data.invoiceNumber} onChange={(e) => handleMainChange(\"invoiceNumber\", e.target.value)} align=\"right\" className={cn(\"text-2xl sm:text-3xl font-bold break-all\", theme.text)} />\n                <p className=\"text-xs text-muted-foreground\">DATE: {data.dateIssued}</p>\n              </div>\n            </div>\n\n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6\">\n              <div className=\"p-4 border-4 border-foreground shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] bg-card space-y-1\">\n                <span className=\"font-bold uppercase text-xs block mb-1\">BILL_TO:</span>\n                <EditableInput isEditing={isEditing} value={data.invoiceTo.name} onChange={(e) => handleNestedChange(\"invoiceTo\", \"name\", e.target.value)} className=\"font-semibold text-base sm:text-lg\" />\n                <EditableInput isEditing={isEditing} value={data.invoiceTo.company} onChange={(e) => handleNestedChange(\"invoiceTo\", \"company\", e.target.value)} className=\"text-xs\" />\n                <EditableInput isEditing={isEditing} value={data.invoiceTo.email} onChange={(e) => handleNestedChange(\"invoiceTo\", \"email\", e.target.value)} className=\"text-xs break-all\" />\n              </div>\n              <div className={cn(\"p-4 border-4 border-foreground shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] text-foreground space-y-1\", theme.lightBg)}>\n                <span className=\"font-bold uppercase text-xs block mb-1\">PAYMENT_TERMS:</span>\n                <p className=\"text-xs font-semibold\">DUE: <EditableInput isEditing={isEditing} value={data.dateDue} onChange={(e) => handleMainChange(\"dateDue\", e.target.value)} /></p>\n                <p className=\"text-xs\">BANK: <EditableInput isEditing={isEditing} value={data.billTo?.bankName} onChange={(e) => handleNestedChange(\"billTo\", \"bankName\", e.target.value)} /></p>\n                <p className=\"text-xs font-mono break-all\">IBAN: <EditableInput isEditing={isEditing} value={data.billTo?.iban} onChange={(e) => handleNestedChange(\"billTo\", \"iban\", e.target.value)} /></p>\n              </div>\n            </div>\n\n            {/* Brutalist Table */}\n            <div className=\"border-4 border-foreground overflow-hidden\">\n              <table className=\"w-full text-left text-xs sm:text-sm\">\n                <thead className=\"bg-foreground text-background font-bold uppercase text-xs\">\n                  <tr>\n                    <th className=\"p-3 border-r-2 border-foreground\">ITEM</th>\n                    <th className=\"p-3 text-right border-r-2 border-foreground w-16\">QTY</th>\n                    <th className=\"p-3 text-right w-28\">TOTAL</th>\n                    {isEditing && <th className=\"p-3 text-center w-12 border-l-2 border-foreground\">ACT</th>}\n                  </tr>\n                </thead>\n                <tbody className=\"divide-y-2 divide-foreground\">\n                  {data.items.map((item, idx) => (\n                    <tr key={idx} className=\"hover:bg-muted\">\n                      <td className=\"p-3 border-r-2 border-foreground font-semibold\">\n                        <EditableInput isEditing={isEditing} value={item.item} onChange={(e) => handleItemChange(idx, \"item\", e.target.value)} />\n                      </td>\n                      <td className=\"p-3 text-right border-r-2 border-foreground\">\n                        <EditableInput isEditing={isEditing} value={item.qty} onChange={(e) => handleItemChange(idx, \"qty\", e.target.value)} align=\"right\" />\n                      </td>\n                      <td className={cn(\"p-3 text-right font-bold\", theme.text)}>\n                        <EditableInput isEditing={isEditing} value={item.total} onChange={(e) => handleItemChange(idx, \"total\", e.target.value)} align=\"right\" />\n                      </td>\n                      {isEditing && (\n                        <td className=\"p-3 text-center border-l-2 border-foreground\">\n                          <button onClick={() => removeItem(idx)} className=\"text-rose-600 font-semibold p-1\"><Trash2 className=\"w-4 h-4\" /></button>\n                        </td>\n                      )}\n                    </tr>\n                  ))}\n                </tbody>\n              </table>\n            </div>\n\n            {isEditing && (\n              <button onClick={addItem} className=\"px-4 py-2 bg-foreground text-background font-bold text-xs uppercase border-2 border-foreground shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]\">\n                + ADD_ITEM\n              </button>\n            )}\n\n            <div className=\"flex justify-end pt-4\">\n              <div className={cn(\"p-4 sm:p-6 border-4 border-foreground shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] sm:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] text-right space-y-1 w-full sm:w-auto\", theme.bg)}>\n                <span className={cn(\"font-bold text-xs uppercase block\", theme.fg)}>AMOUNT DUE NOW</span>\n                <EditableInput\n                  isEditing={isEditing}\n                  value={data.grandTotal}\n                  onChange={(e) => handleMainChange(\"grandTotal\", e.target.value)}\n                  align=\"right\"\n                  inputBg={cn(\"border-2 font-mono font-bold\", theme.fgSoft, theme.fg)}\n                  className={cn(\"text-2xl sm:text-4xl font-bold tracking-tight\", theme.fg)}\n                />\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n\n      {/* ========================================================================= */}\n      {/* 3. DEFAULT VARIANT */}\n      {/* ========================================================================= */}\n      {variant === \"default\" && (\n        <div className=\"flex flex-col lg:flex-row items-start gap-6 w-full\">\n          <div className={cn(\"flex-1 min-w-0 w-full overflow-hidden\", invoiceVariants[variant].invoicePanel)}>\n            {/* Header */}\n            <header className=\"flex flex-col sm:flex-row justify-between items-start mb-8 sm:mb-12 gap-6 sm:gap-8\">\n              <div className=\"flex gap-3 sm:gap-4 items-start w-full sm:w-auto\">\n                <div className={cn(\"p-2.5 sm:p-3 rounded-xl shrink-0\", theme.lightBg)}>\n                  <Heart className={cn(\"w-6 h-6 sm:w-8 sm:h-8\", theme.text)} fill=\"currentColor\" fillOpacity={0.2} />\n                </div>\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"flex items-center gap-2\">\n                    <h1 className=\"text-xl sm:text-2xl font-semibold text-foreground tracking-tight\">AVARA_UI</h1>\n                  </div>\n                  <p className=\"text-xs sm:text-sm text-muted-foreground mt-1 max-w-[220px] leading-relaxed break-words\">\n                    Office 149, 450 South Brand Brooklyn San Diego County, CA 91905, USA\n                    <br />\n                    +1 (123) 456 7891\n                  </p>\n                </div>\n              </div>\n\n              <div className={cn(\"w-full sm:w-auto p-4 sm:p-5 rounded-xl\", invoiceVariants[variant].blockBg)}>\n                <div className=\"flex items-center justify-between sm:justify-end gap-3 mb-3 sm:mb-4\">\n                  <span className=\"text-base sm:text-xl font-medium text-muted-foreground uppercase tracking-widest\">\n                    INVOICE\n                  </span>\n                  <EditableInput isEditing={isEditing} value={data.invoiceNumber} onChange={(e) => handleMainChange(\"invoiceNumber\", e.target.value)} align=\"right\" className=\"font-semibold text-xl sm:text-2xl text-foreground\" />\n                </div>\n\n                <div className=\"grid grid-cols-[auto,1fr] gap-x-3 sm:gap-x-4 gap-y-2 text-xs sm:text-sm items-center sm:text-right text-left\">\n                  <span className=\"text-muted-foreground font-medium\">Date Issued:</span>\n                  <EditableInput isEditing={isEditing} inputBg={invoiceVariants[variant].inputBg} focusRing={theme.focusRing} value={data.dateIssued} onChange={(e) => handleMainChange(\"dateIssued\", e.target.value)} align=\"right\" className=\"text-foreground font-medium\" />\n                  <span className=\"text-muted-foreground font-medium\">Date Due:</span>\n                  <EditableInput isEditing={isEditing} inputBg={invoiceVariants[variant].inputBg} focusRing={theme.focusRing} value={data.dateDue} onChange={(e) => handleMainChange(\"dateDue\", e.target.value)} align=\"right\" className=\"text-foreground font-medium\" />\n                </div>\n              </div>\n            </header>\n\n            {/* Billing Info */}\n            <section className=\"grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-10 mb-8 sm:mb-12\">\n              <div>\n                <span className=\"text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-3 block\">Invoice To</span>\n                <div className=\"space-y-1.5 text-xs sm:text-sm break-words\">\n                  <EditableInput isEditing={isEditing} inputBg={invoiceVariants[variant].inputBg} focusRing={theme.focusRing} value={data.invoiceTo.name} onChange={(e) => handleNestedChange(\"invoiceTo\", \"name\", e.target.value)} placeholder=\"Name\" className=\"font-semibold text-sm sm:text-base text-foreground mb-2\" />\n                  <EditableInput isEditing={isEditing} inputBg={invoiceVariants[variant].inputBg} focusRing={theme.focusRing} value={data.invoiceTo.company} onChange={(e) => handleNestedChange(\"invoiceTo\", \"company\", e.target.value)} placeholder=\"Company\" className=\"text-muted-foreground\" />\n                  <EditableInput isEditing={isEditing} inputBg={invoiceVariants[variant].inputBg} focusRing={theme.focusRing} value={data.invoiceTo.email} onChange={(e) => handleNestedChange(\"invoiceTo\", \"email\", e.target.value)} placeholder=\"Email\" className=\"text-muted-foreground break-all\" />\n                </div>\n              </div>\n\n              <div>\n                <span className=\"text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-3 block\">Payment Details</span>\n                <div className={cn(\"p-3.5 sm:p-4 rounded-lg space-y-2.5 sm:space-y-3 text-xs sm:text-sm\", invoiceVariants[variant].blockBg)}>\n                  <div className=\"flex justify-between items-center pb-2.5 sm:pb-3 border-b border-border\">\n                    <span className=\"font-medium text-muted-foreground\">Total Due:</span>\n                    <EditableInput isEditing={isEditing} inputBg={invoiceVariants[variant].inputBg} focusRing={theme.focusRing} value={data.billTo?.totalDue} onChange={(e) => handleNestedChange(\"billTo\", \"totalDue\", e.target.value)} align=\"right\" className={cn(\"font-semibold text-base sm:text-lg\", theme.text)} />\n                  </div>\n                  <div className=\"grid grid-cols-[75px,1fr] gap-2 items-center\">\n                    <span className=\"text-muted-foreground\">Bank:</span>\n                    <EditableInput isEditing={isEditing} value={data.billTo?.bankName} onChange={(e) => handleNestedChange(\"billTo\", \"bankName\", e.target.value)} className=\"text-foreground font-medium\" />\n                    <span className=\"text-muted-foreground\">IBAN:</span>\n                    <EditableInput isEditing={isEditing} value={data.billTo?.iban} onChange={(e) => handleNestedChange(\"billTo\", \"iban\", e.target.value)} className=\"text-foreground font-mono text-xs break-all\" />\n                  </div>\n                </div>\n              </div>\n            </section>\n\n            {/* Table */}\n            <section className=\"mb-8 sm:mb-10 rounded-xl w-full overflow-hidden border border-border\">\n              <table className=\"w-full text-left text-xs sm:text-sm text-foreground border-collapse\">\n                <thead className={cn(\"text-muted-foreground uppercase tracking-wider text-[10px] font-semibold\", invoiceVariants[variant].tableHeader)}>\n                  <tr>\n                    <th className=\"px-4 py-4\">Item Details</th>\n                    <th className=\"px-4 py-4 text-right w-20\">Qty</th>\n                    <th className=\"px-4 py-4 text-right w-28\">Total</th>\n                    {isEditing && <th className=\"px-4 py-4 text-center w-12\">Act</th>}\n                  </tr>\n                </thead>\n                <tbody className={invoiceVariants[variant].tableRow}>\n                  {data.items.map((item, idx) => (\n                    <tr key={idx} className={invoiceVariants[variant].tableRow}>\n                      <td className=\"px-4 py-4 align-top space-y-1\">\n                        <EditableInput isEditing={isEditing} value={item.item} onChange={(e) => handleItemChange(idx, \"item\", e.target.value)} className=\"font-semibold text-foreground\" />\n                        <EditableInput isEditing={isEditing} value={item.description} onChange={(e) => handleItemChange(idx, \"description\", e.target.value)} className=\"text-xs text-muted-foreground\" />\n                      </td>\n                      <td className=\"px-4 py-4 align-top text-right font-medium\">\n                        <EditableInput isEditing={isEditing} value={item.qty} onChange={(e) => handleItemChange(idx, \"qty\", e.target.value)} align=\"right\" />\n                      </td>\n                      <td className=\"px-4 py-4 align-top text-right font-semibold\">\n                        <EditableInput isEditing={isEditing} value={item.total} onChange={(e) => handleItemChange(idx, \"total\", e.target.value)} align=\"right\" />\n                      </td>\n                      {isEditing && (\n                        <td className=\"px-4 py-4 text-center\">\n                          <button onClick={() => removeItem(idx)} className=\"text-rose-500 hover:text-rose-700 p-1\"><Trash2 className=\"w-4 h-4\" /></button>\n                        </td>\n                      )}\n                    </tr>\n                  ))}\n                </tbody>\n              </table>\n\n              {isEditing && (\n                <div className=\"p-3 border-t border-border\">\n                  <button onClick={addItem} className={cn(\"flex items-center gap-2 text-xs font-semibold\", theme.text)}>\n                    <Plus className=\"w-4 h-4\" /> Add Item\n                  </button>\n                </div>\n              )}\n            </section>\n\n            {/* Footer */}\n            <footer className=\"flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 pt-4 border-t border-border\">\n              {isEditing ? (\n                <textarea value={data.note} onChange={(e) => handleMainChange(\"note\", e.target.value)} className=\"w-full max-w-xs text-xs p-2 border border-border rounded-lg\" rows={2} />\n              ) : (\n                <p className=\"text-xs text-muted-foreground max-w-xs\">{data.note}</p>\n              )}\n              <div className=\"text-left sm:text-right w-full sm:w-auto\">\n                <span className=\"text-xs text-muted-foreground block uppercase font-mono\">Grand Total</span>\n                <EditableInput isEditing={isEditing} value={data.grandTotal} onChange={(e) => handleMainChange(\"grandTotal\", e.target.value)} align=\"right\" className={cn(\"text-2xl font-semibold\", theme.text)} />\n              </div>\n            </footer>\n          </div>\n\n          {/* Action Sidebar */}\n          <div className={cn(\"w-full lg:w-72 p-4 sm:p-6 rounded-2xl shrink-0 space-y-4 print:hidden transition-colors duration-300\", invoiceVariants[variant].sidebarCard)}>\n            <button\n              onClick={() => setIsEditing(!isEditing)}\n              className={cn(\n                \"w-full py-3 px-4 rounded-xl font-semibold text-sm transition-all flex items-center justify-center gap-2 cursor-pointer shadow-md\",\n                isEditing ? \"bg-emerald-600 hover:bg-emerald-700 text-white\" : theme.bg,\n              )}\n            >\n              {isEditing ? <Save className=\"w-4 h-4\" /> : <Send className=\"w-4 h-4\" />}\n              {isEditing ? \"Save Invoice\" : \"Edit Invoice\"}\n            </button>\n\n            <button\n              onClick={handlePrint}\n              className=\"w-full py-3 px-4 rounded-xl font-semibold text-sm transition-all flex items-center justify-center gap-2 cursor-pointer border border-border bg-background hover:bg-muted text-foreground\"\n            >\n              <Printer className=\"w-4 h-4\" /> Print Document\n            </button>\n\n            <button\n              onClick={handleDownload}\n              className=\"w-full py-3 px-4 rounded-xl font-semibold text-sm transition-all flex items-center justify-center gap-2 cursor-pointer border border-border bg-background hover:bg-muted text-foreground\"\n            >\n              <Download className=\"w-4 h-4\" /> Download JSON\n            </button>\n          </div>\n        </div>\n      )}\n\n      {/* ========================================================================= */}\n      {/* 4. MODERN GEOMETRIC VARIANT (FASHION & CREATIVE BRANDING INVOICE) */}\n      {/* ========================================================================= */}\n      {variant === \"geometric\" && (\n        <div className=\"w-full bg-card border border-border rounded-[var(--radius)] overflow-hidden font-sans\">\n          {/* Action Toolbar (hidden on print) */}\n          <div className=\"bg-muted text-foreground p-3 sm:px-6 sm:py-2.5 border-b border-border flex items-center justify-between print:hidden\">\n            <span className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n              Modern Geometric Invoice\n            </span>\n            <div className=\"flex items-center gap-1.5 sm:gap-2\">\n              <button\n                onClick={() => setIsEditing(!isEditing)}\n                className={cn(\n                  \"px-3 py-1.5 sm:px-3.5 sm:py-1.5 rounded-[var(--radius)] font-semibold text-xs flex items-center gap-1.5 transition-all cursor-pointer\",\n                  theme.bg\n                )}\n                title={isEditing ? \"Save Invoice\" : \"Edit Invoice\"}\n              >\n                {isEditing ? <Save className=\"w-3.5 h-3.5\" /> : <Edit3 className=\"w-3.5 h-3.5\" />}\n                <span>{isEditing ? \"Save\" : \"Edit\"}</span>\n              </button>\n              <button\n                onClick={handlePrint}\n                className=\"px-2.5 py-1.5 sm:px-3 sm:py-1.5 rounded-[var(--radius)] bg-background hover:bg-muted text-foreground border border-border font-semibold text-xs flex items-center gap-1.5 transition-all cursor-pointer\"\n                title=\"Print PDF\"\n              >\n                <Printer className=\"w-3.5 h-3.5\" />\n                <span className=\"hidden sm:inline\">Print</span>\n              </button>\n              <button\n                onClick={handleDownload}\n                className=\"px-2.5 py-1.5 sm:px-3 sm:py-1.5 rounded-[var(--radius)] bg-background hover:bg-muted text-foreground border border-border font-semibold text-xs flex items-center gap-1.5 transition-all cursor-pointer\"\n                title=\"Export JSON\"\n              >\n                <Download className=\"w-3.5 h-3.5\" />\n                <span className=\"hidden sm:inline\">JSON</span>\n              </button>\n            </div>\n          </div>\n\n          <div className=\"p-3.5 sm:p-8 md:p-12 space-y-5 sm:space-y-8\">\n            {/* Top Header */}\n            <header className=\"relative\">\n              <div className=\"flex flex-col sm:flex-row justify-between items-start gap-3 sm:gap-6\">\n                {/* Left: Tagline + Decorative Tile */}\n                <div className=\"space-y-2 sm:space-y-3\">\n                  <GeometricTilePattern themeBg={theme.bg} themeLight={theme.lightBg} />\n                  <p className={cn(\"text-[10px] sm:text-xs font-semibold uppercase tracking-wide max-w-[260px] leading-relaxed\", theme.text)}>\n                    {data.tagline || \"Crafting Next-Gen Interfaces: Where Code Meets Design Elegance!\"}\n                  </p>\n                </div>\n\n                {/* Right: Company Name & Logo */}\n                <div className=\"flex flex-col items-start sm:items-end gap-2 w-full sm:w-auto\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"font-extrabold uppercase tracking-wider text-xs sm:text-sm text-foreground\">\n                      {data.companyName || \"AVARA_UI\"}\n                    </span>\n                    <div className={cn(\"size-6 rounded-[var(--radius)] flex items-center justify-center p-1\", theme.bg)}>\n                      <svg viewBox=\"0 0 24 24\" className={cn(\"size-3.5 fill-current\", theme.fg)}>\n                        <path d=\"M12 2L2 19.5h5l5-9 5 9h5L12 2zm0 6l-2.5 4.5h5L12 8z\" />\n                      </svg>\n                    </div>\n                  </div>\n                  <div className=\"hidden sm:block\">\n                    <GeometricTilePattern themeBg={theme.bg} themeLight={theme.lightBg} />\n                  </div>\n                </div>\n              </div>\n\n              {/* Center / Big \"Invoice\" Title with underline */}\n              <div className=\"mt-4 sm:mt-8\">\n                <div className=\"flex items-center justify-between gap-3 sm:gap-4\">\n                  <h1 className=\"text-3xl sm:text-6xl md:text-7xl font-black tracking-tight text-foreground\">\n                    Invoice\n                  </h1>\n                  <div className=\"sm:hidden\">\n                    <GeometricTilePattern className=\"w-16 h-11\" themeBg={theme.bg} themeLight={theme.lightBg} />\n                  </div>\n                </div>\n                <div className={cn(\"h-[2px] sm:h-[3px] mt-1 sm:mt-2 w-full\", theme.bg)} />\n              </div>\n            </header>\n\n            {/* Recipient (\"Invoice To\") & Metadata */}\n            <section className=\"flex flex-col sm:flex-row justify-between items-start gap-4 sm:gap-8 pt-2\">\n              {/* Left Column: Recipient info */}\n              <div className=\"flex-1 w-full sm:w-auto min-w-0 space-y-2.5 sm:space-y-3\">\n                <div className=\"inline-block border-b-2 border-border pb-0.5\">\n                  <span className=\"text-xs sm:text-sm font-bold tracking-wider text-foreground\">\n                    Invoice To\n                  </span>\n                </div>\n\n                {/* Recipient Solid Theme Badge */}\n                <div>\n                  <div className={cn(\"px-3.5 py-1.5 sm:px-5 sm:py-2.5 rounded-[var(--radius)] inline-block max-w-full\", theme.bg)}>\n                    <EditableInput\n                      isEditing={isEditing}\n                      value={data.invoiceTo.name}\n                      onChange={(e) => handleNestedChange(\"invoiceTo\", \"name\", e.target.value)}\n                      placeholder=\"Client Name\"\n                      inputBg={cn(\"border font-bold\", theme.fgSoft, theme.fg)}\n                      className={cn(\"text-base sm:text-xl font-bold tracking-tight truncate\", theme.fg)}\n                    />\n                  </div>\n                </div>\n\n                {/* Description */}\n                <p className=\"text-xs sm:text-sm text-muted-foreground max-w-lg leading-relaxed\">\n                  {data.invoiceTo.description || \"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.\"}\n                </p>\n\n                {/* Contact Pills */}\n                <div className=\"flex flex-wrap items-center gap-2.5 sm:gap-6 pt-1 text-xs sm:text-sm font-medium text-foreground\">\n                  <div className=\"flex items-center gap-2 max-w-full\">\n                    <span className={cn(\"size-5 rounded-full keep-rounded grid place-items-center shrink-0\", theme.bg)}>\n                      <Phone className={cn(\"size-2.5\", theme.fg)} />\n                    </span>\n                    <EditableInput\n                      isEditing={isEditing}\n                      value={data.invoiceTo.phone || \"+123-456-7890\"}\n                      onChange={(e) => handleNestedChange(\"invoiceTo\", \"phone\", e.target.value)}\n                      className=\"text-xs sm:text-sm font-medium\"\n                    />\n                  </div>\n                  <div className=\"flex items-center gap-2 max-w-full\">\n                    <span className={cn(\"size-5 rounded-full keep-rounded grid place-items-center shrink-0\", theme.bg)}>\n                      <MapPin className={cn(\"size-2.5\", theme.fg)} />\n                    </span>\n                    <EditableInput\n                      isEditing={isEditing}\n                      value={data.invoiceTo.address || \"123 Your Address St., City Name,\"}\n                      onChange={(e) => handleNestedChange(\"invoiceTo\", \"address\", e.target.value)}\n                      className=\"text-xs sm:text-sm font-medium\"\n                    />\n                  </div>\n                </div>\n              </div>\n\n              {/* Right Column: Invoice Number & Date */}\n              <div className=\"w-full sm:w-auto shrink-0 flex sm:flex-col justify-between sm:justify-start items-start sm:items-end gap-2.5 sm:gap-3 text-left sm:text-right border-t border-border/40 pt-3 sm:border-0 sm:pt-0\">\n                <div>\n                  <span className=\"text-xs sm:text-sm font-bold text-foreground block\">\n                    No. Invoice:\n                  </span>\n                  <EditableInput\n                    isEditing={isEditing}\n                    value={data.invoiceNumber}\n                    onChange={(e) => handleMainChange(\"invoiceNumber\", e.target.value)}\n                    align=\"left\"\n                    className=\"text-xs sm:text-sm text-muted-foreground font-medium text-left sm:text-right\"\n                  />\n                </div>\n                <div className=\"text-right sm:text-right\">\n                  <span className=\"text-xs sm:text-sm font-bold text-foreground block\">\n                    Date:\n                  </span>\n                  <EditableInput\n                    isEditing={isEditing}\n                    value={data.dateIssued}\n                    onChange={(e) => handleMainChange(\"dateIssued\", e.target.value)}\n                    align=\"right\"\n                    className=\"text-xs sm:text-sm text-muted-foreground font-medium text-right\"\n                  />\n                </div>\n              </div>\n            </section>\n\n            {/* Items Table */}\n            <section className=\"relative z-0 rounded-[var(--radius)] overflow-hidden bg-card\">\n              <div className=\"w-full overflow-hidden\">\n                <table className=\"w-full text-left text-xs sm:text-sm border-collapse\">\n                  <thead className={cn(\"uppercase text-[10px] sm:text-xs font-bold tracking-wider\", theme.bg)}>\n                    <tr>\n                      <th className={cn(\"py-2.5 sm:py-3 px-2 sm:px-4 text-left\", theme.fg)}>ITEM DESCRIPTION</th>\n                      <th className={cn(\"py-2.5 sm:py-3 px-2 sm:px-4 text-right hidden sm:table-cell sm:w-28\", theme.fg)}>\n                        UNIT PRICE\n                      </th>\n                      <th className={cn(\"py-2.5 sm:py-3 px-1.5 sm:px-4 text-center w-12 sm:w-24\", theme.fg)}>\n                        <span className=\"hidden sm:inline\">QUANTITY</span>\n                        <span className=\"sm:hidden\">QTY</span>\n                      </th>\n                      <th className={cn(\"py-2.5 sm:py-3 px-2 sm:px-4 text-right w-20 sm:w-28\", theme.fg)}>\n                        <span className=\"hidden sm:inline\">AMOUNT</span>\n                        <span className=\"sm:hidden\">TOTAL</span>\n                      </th>\n                      {isEditing && <th className={cn(\"py-2.5 sm:py-3 px-1 text-center w-7 sm:w-12\", theme.fg)}>ACT</th>}\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {data.items.map((item, idx) => {\n                      const isEven = idx % 2 === 1;\n                      const unitPrice = item.unitPrice ?? item.total;\n                      return (\n                        <tr\n                          key={idx}\n                          className={cn(\n                            \"border-b border-border/50 transition-colors\",\n                            isEven ? \"bg-muted/40\" : \"bg-card\"\n                          )}\n                        >\n                          <td className=\"py-2.5 sm:py-3 px-2 sm:px-4 min-w-0\">\n                            <EditableInput\n                              isEditing={isEditing}\n                              value={item.item}\n                              onChange={(e) => handleItemChange(idx, \"item\", e.target.value)}\n                              className=\"font-bold text-xs sm:text-sm text-foreground break-words [overflow-wrap:anywhere]\"\n                            />\n                            {/* Mobile Unit Price info */}\n                            <div className=\"sm:hidden text-[10px] text-muted-foreground font-mono mt-0.5 flex items-center gap-1\">\n                              <span className=\"opacity-70\">Price:</span>\n                              {isEditing ? (\n                                <EditableInput\n                                  isEditing={isEditing}\n                                  value={unitPrice}\n                                  onChange={(e) => handleItemChange(idx, \"unitPrice\", e.target.value)}\n                                  className=\"text-[10px] w-20 py-0.5 px-1 font-mono\"\n                                />\n                              ) : (\n                                <span>{unitPrice}</span>\n                              )}\n                            </div>\n                            {item.description && (\n                              <EditableInput\n                                isEditing={isEditing}\n                                value={item.description}\n                                onChange={(e) => handleItemChange(idx, \"description\", e.target.value)}\n                                className=\"text-[10px] sm:text-[11px] text-muted-foreground break-words [overflow-wrap:anywhere] mt-0.5 line-clamp-2 sm:line-clamp-none\"\n                              />\n                            )}\n                          </td>\n                          <td className=\"py-2.5 sm:py-3 px-2 sm:px-4 text-right font-medium text-muted-foreground whitespace-nowrap hidden sm:table-cell\">\n                            <EditableInput\n                              isEditing={isEditing}\n                              value={unitPrice}\n                              onChange={(e) => handleItemChange(idx, \"unitPrice\", e.target.value)}\n                              align=\"right\"\n                            />\n                          </td>\n                          <td className=\"py-2.5 sm:py-3 px-1.5 sm:px-4 text-center font-mono font-medium text-muted-foreground whitespace-nowrap\">\n                            <EditableInput\n                              isEditing={isEditing}\n                              value={item.qty}\n                              onChange={(e) => handleItemChange(idx, \"qty\", e.target.value)}\n                              align=\"center\"\n                            />\n                          </td>\n                          <td className=\"py-2.5 sm:py-3 px-2 sm:px-4 text-right font-bold text-foreground whitespace-nowrap\">\n                            <EditableInput\n                              isEditing={isEditing}\n                              value={item.total}\n                              onChange={(e) => handleItemChange(idx, \"total\", e.target.value)}\n                              align=\"right\"\n                            />\n                          </td>\n                          {isEditing && (\n                            <td className=\"py-2.5 sm:py-3 px-1 text-center w-7 sm:w-12\">\n                              <button\n                                onClick={() => removeItem(idx)}\n                                className=\"text-rose-500 hover:text-rose-700 p-1 cursor-pointer\"\n                              >\n                                <Trash2 className=\"w-3.5 h-3.5 sm:w-4 sm:h-4\" />\n                              </button>\n                            </td>\n                          )}\n                        </tr>\n                      );\n                    })}\n                  </tbody>\n                </table>\n              </div>\n\n              {isEditing && (\n                <div className=\"p-3 bg-muted/40 border-t border-border flex justify-start\">\n                  <button\n                    onClick={addItem}\n                    className={cn(\n                      \"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-[var(--radius)] transition-all cursor-pointer\",\n                      theme.bg\n                    )}\n                  >\n                    <Plus className=\"w-3.5 h-3.5\" /> Add Product Item\n                  </button>\n                </div>\n              )}\n            </section>\n\n            {/* Calculations & Watermark Area */}\n            <section className=\"relative z-10 flex flex-col md:flex-row items-center justify-between gap-4 sm:gap-6 pt-3 sm:pt-4 pb-2\">\n              {/* Left: Watermark Arcs in Theme Color (z-10) */}\n              <div className=\"relative w-44 h-24 hidden sm:block pointer-events-none z-10\">\n                <WatermarkArcs\n                  className=\"absolute -bottom-4 left-0 w-44 h-44 z-10 pointer-events-none\"\n                  strokeClassName={theme.text}\n                />\n              </div>\n\n              {/* Right: Subtotal and Grand Total */}\n              <div className=\"w-full md:w-auto md:min-w-[280px] space-y-2 text-right\">\n                <div className=\"flex justify-between md:justify-end gap-6 text-xs sm:text-sm\">\n                  <span className=\"font-bold text-foreground uppercase tracking-wider\">\n                    SUB TOTAL\n                  </span>\n                  <EditableInput\n                    isEditing={isEditing}\n                    value={data.subtotal}\n                    onChange={(e) => handleMainChange(\"subtotal\", e.target.value)}\n                    align=\"right\"\n                    className=\"font-bold text-foreground\"\n                  />\n                </div>\n                <div className=\"h-px bg-border my-1\" />\n                <div className=\"flex justify-between md:justify-end items-baseline gap-6\">\n                  <span className=\"font-extrabold text-xs sm:text-sm text-foreground uppercase tracking-wider\">\n                    TOTAL\n                  </span>\n                  <EditableInput\n                    isEditing={isEditing}\n                    value={data.grandTotal}\n                    onChange={(e) => handleMainChange(\"grandTotal\", e.target.value)}\n                    align=\"right\"\n                    className={cn(\"text-2xl sm:text-4xl md:text-5xl font-black tracking-tight\", theme.text)}\n                  />\n                </div>\n              </div>\n            </section>\n\n            {/* Solid Theme Footer with Terms & Signatory */}\n            <footer className={cn(\"p-4 sm:p-7 md:p-8 rounded-[var(--radius)] relative z-10 overflow-hidden space-y-5 sm:space-y-6\", theme.bg)}>\n              {/* Decorative Geometric Block in top-right of footer */}\n              <div className=\"absolute top-0 right-0 opacity-40 sm:opacity-75 pointer-events-none\">\n                <GeometricTilePattern className=\"w-24 h-16 sm:w-28 sm:h-18\" themeBg={theme.bg} themeLight={theme.lightBg} />\n              </div>\n\n              {/* Terms Section Header */}\n              <div>\n                <span className={cn(\"text-xs sm:text-sm font-bold tracking-wider uppercase inline-block border-b pb-0.5\", theme.fg, theme.fgBorder)}>\n                  TERM & CONDITIONS\n                </span>\n              </div>\n\n              {/* Terms Boxes & Manager Signature */}\n              <div className=\"grid grid-cols-1 lg:grid-cols-[1fr,auto] gap-6 items-end relative z-10\">\n                {/* Terms Boxes */}\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4\">\n                  {(data.terms || [\n                    \"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.\",\n                    \"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore.\",\n                  ]).map((term, i) => (\n                    <div\n                      key={i}\n                      className={cn(\n                        \"flex items-start gap-2.5 p-3 sm:p-3.5 rounded-[var(--radius)] border text-[10px] sm:text-[11px] leading-relaxed\",\n                        theme.fgSoft,\n                        theme.fg\n                      )}\n                    >\n                      <CheckSquare className={cn(\"size-4 shrink-0 mt-0.5\", theme.fg)} />\n                      <span className={theme.fg}>{term}</span>\n                    </div>\n                  ))}\n                </div>\n\n                {/* Manager Signature */}\n                <div className=\"text-left sm:text-right lg:pl-6 pt-2 lg:pt-0\">\n                  <div className={cn(\"font-bold text-base sm:text-lg\", theme.fg)}>\n                    {data.signatory?.name || \"Tommy Shelby\"}\n                  </div>\n                  <div className={cn(\"text-[10px] sm:text-xs font-semibold tracking-widest uppercase\", theme.fgMuted)}>\n                    {data.signatory?.title || \"OPERATIONS DIRECTOR\"}\n                  </div>\n                </div>\n              </div>\n\n              {/* Bottom Contact Strip */}\n              <div className={cn(\"border-t pt-4 flex flex-wrap items-center justify-between gap-3 text-[11px] sm:text-xs\", theme.fgBorder, theme.fg)}>\n                <div className=\"flex items-center gap-1.5\">\n                  <span className={cn(\"size-4 rounded-full keep-rounded border grid place-items-center text-[9px]\", theme.fgBorder)}>\n                    <Phone className={cn(\"size-2.5\", theme.fg)} />\n                  </span>\n                  <span className={theme.fg}>{data.companyContact?.phone || \"+1 (123) 456 7891\"}</span>\n                </div>\n                <div className=\"flex items-center gap-1.5\">\n                  <span className={cn(\"size-4 rounded-full keep-rounded border grid place-items-center text-[9px]\", theme.fgBorder)}>\n                    <Mail className={cn(\"size-2.5\", theme.fg)} />\n                  </span>\n                  <span className={theme.fg}>{data.companyContact?.email || \"support@avaraui.com\"}</span>\n                </div>\n                <div className=\"flex items-center gap-1.5\">\n                  <span className={cn(\"size-4 rounded-full keep-rounded border grid place-items-center text-[9px]\", theme.fgBorder)}>\n                    <Globe className={cn(\"size-2.5\", theme.fg)} />\n                  </span>\n                  <span className={theme.fg}>{data.companyContact?.social || \"avaraui.com\"}</span>\n                </div>\n                <div className=\"flex items-center gap-1.5\">\n                  <span className={cn(\"size-4 rounded-full keep-rounded border grid place-items-center text-[9px]\", theme.fgBorder)}>\n                    <MapPin className={cn(\"size-2.5\", theme.fg)} />\n                  </span>\n                  <span className={theme.fg}>{data.companyContact?.address || \"450 South Brand Brooklyn, CA 91905, USA\"}</span>\n                </div>\n              </div>\n            </footer>\n          </div>\n        </div>\n      )}\n\n      {/* ========================================================================= */}\n      {/* 5. ASYMMETRIC SPLIT VARIANT */}\n      {/* ========================================================================= */}\n      {variant === \"split\" && (\n        <div className=\"w-full bg-card border border-border rounded-[var(--radius)] overflow-hidden font-sans relative\">\n          {/* Action Toolbar (hidden on print) */}\n          <div className=\"bg-muted text-foreground p-3 sm:px-6 sm:py-2.5 border-b border-border flex items-center justify-between print:hidden\">\n            <span className=\"text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n              Asymmetric Split Invoice\n            </span>\n            <div className=\"flex items-center gap-1.5 sm:gap-2\">\n              <button\n                onClick={() => setIsEditing(!isEditing)}\n                className={cn(\n                  \"px-3 py-1.5 sm:px-3.5 sm:py-1.5 rounded-[var(--radius)] font-semibold text-xs flex items-center gap-1.5 transition-all cursor-pointer\",\n                  theme.bg\n                )}\n                title={isEditing ? \"Save Invoice\" : \"Edit Invoice\"}\n              >\n                {isEditing ? <Save className=\"w-3.5 h-3.5\" /> : <Edit3 className=\"w-3.5 h-3.5\" />}\n                <span>{isEditing ? \"Save\" : \"Edit\"}</span>\n              </button>\n              <button\n                onClick={handlePrint}\n                className=\"px-2.5 py-1.5 sm:px-3 sm:py-1.5 rounded-[var(--radius)] bg-background hover:bg-muted text-foreground border border-border font-semibold text-xs flex items-center gap-1.5 transition-all cursor-pointer\"\n                title=\"Print PDF\"\n              >\n                <Printer className=\"w-3.5 h-3.5\" />\n                <span className=\"hidden sm:inline\">Print</span>\n              </button>\n              <button\n                onClick={handleDownload}\n                className=\"px-2.5 py-1.5 sm:px-3 sm:py-1.5 rounded-[var(--radius)] bg-background hover:bg-muted text-foreground border border-border font-semibold text-xs flex items-center gap-1.5 transition-all cursor-pointer\"\n                title=\"Export JSON\"\n              >\n                <Download className=\"w-3.5 h-3.5\" />\n                <span className=\"hidden sm:inline\">JSON</span>\n              </button>\n            </div>\n          </div>\n\n          {/* Invoice Document Body */}\n          <div className=\"relative\">\n            {/* Top Section: Left Sidebar Column & Right Content */}\n            <div className=\"flex flex-col md:flex-row items-stretch\">\n              {/* Top Left: Red Theme Logo Block + Dark Charcoal Invoice To */}\n              <div className=\"w-full md:w-[36%] lg:w-[35%] flex flex-col shrink-0\">\n                {/* Solid Theme Logo Block */}\n                <div className={cn(\"p-5 sm:p-7 relative\", theme.bg)}>\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"size-9 rounded-[var(--radius)] flex items-center justify-center p-1.5 bg-black/15 dark:bg-white/15 shrink-0\">\n                      <svg viewBox=\"0 0 24 24\" className={cn(\"size-5 fill-current\", theme.fg)}>\n                        <path d=\"M12 2L2 19.5h5l5-9 5 9h5L12 2zm0 6l-2.5 4.5h5L12 8z\" />\n                      </svg>\n                    </div>\n                    <div className=\"min-w-0\">\n                      <EditableInput\n                        isEditing={isEditing}\n                        value={data.companyName || \"COMPANY\"}\n                        onChange={(e) => handleMainChange(\"companyName\", e.target.value)}\n                        className={cn(\"font-black tracking-wider text-base sm:text-lg uppercase truncate\", theme.fg)}\n                      />\n                      <EditableInput\n                        isEditing={isEditing}\n                        value={data.tagline || \"COMPANY TAGLINE HERE\"}\n                        onChange={(e) => handleMainChange(\"tagline\", e.target.value)}\n                        className={cn(\"text-[9px] sm:text-[10px] tracking-widest uppercase opacity-80 block truncate\", theme.fg)}\n                      />\n                    </div>\n                  </div>\n                </div>\n\n                {/* Dark Charcoal Sidebar Top: Invoice To */}\n                <div className=\"flex-1 bg-[#23272f] text-neutral-200 p-5 sm:p-7 space-y-2 relative\">\n                  <span className=\"text-[11px] uppercase tracking-wider text-neutral-400 font-semibold block\">\n                    Invoice To:\n                  </span>\n                  <EditableInput\n                    isEditing={isEditing}\n                    inputBg=\"bg-neutral-800 text-white border-neutral-700\"\n                    value={data.invoiceTo.name}\n                    onChange={(e) => handleNestedChange(\"invoiceTo\", \"name\", e.target.value)}\n                    className=\"text-lg sm:text-xl font-serif font-bold text-white tracking-tight\"\n                  />\n                  <EditableInput\n                    isEditing={isEditing}\n                    inputBg=\"bg-neutral-800 text-white border-neutral-700\"\n                    value={data.invoiceTo.company || \"Managing Director, Company ltd.\"}\n                    onChange={(e) => handleNestedChange(\"invoiceTo\", \"company\", e.target.value)}\n                    className=\"text-xs text-neutral-400\"\n                  />\n                  <div className=\"pt-2 space-y-1.5 text-xs text-neutral-400\">\n                    <p className=\"flex items-center gap-1.5\">\n                      <span className=\"shrink-0 text-neutral-500\">Phone:</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        inputBg=\"bg-neutral-800 text-white border-neutral-700\"\n                        value={data.invoiceTo.phone || \"+123 4567 8910\"}\n                        onChange={(e) => handleNestedChange(\"invoiceTo\", \"phone\", e.target.value)}\n                        className=\"text-neutral-300\"\n                      />\n                    </p>\n                    <p className=\"flex items-center gap-1.5\">\n                      <span className=\"shrink-0 text-neutral-500\">Email:</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        inputBg=\"bg-neutral-800 text-white border-neutral-700\"\n                        value={data.invoiceTo.email || \"example@mail.com\"}\n                        onChange={(e) => handleNestedChange(\"invoiceTo\", \"email\", e.target.value)}\n                        className=\"text-neutral-300 break-all\"\n                      />\n                    </p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Top Right: INVOICE title & \"Invoice From:\" */}\n              <div className=\"flex-1 bg-card p-5 sm:p-8 flex flex-col justify-between gap-6\">\n                {/* Header block with red vertical line and title */}\n                <div className=\"flex flex-col sm:flex-row sm:items-start justify-between gap-4\">\n                  <div className={cn(\"border-l-4 pl-3.5 space-y-0.5\", theme.border)}>\n                    <h1 className={cn(\"text-3xl sm:text-4xl font-extrabold tracking-wider\", theme.text)}>\n                      INVOICE\n                    </h1>\n                    <div className=\"grid grid-cols-[auto,1fr] gap-x-2 text-[11px] sm:text-xs text-muted-foreground pt-1\">\n                      <span className=\"font-semibold text-foreground\">Invoice Number:</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        value={data.invoiceNumber}\n                        onChange={(e) => handleMainChange(\"invoiceNumber\", e.target.value)}\n                        className=\"font-medium text-foreground\"\n                      />\n                      <span className=\"font-semibold text-foreground\">Invoice Date:</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        value={data.dateIssued}\n                        onChange={(e) => handleMainChange(\"dateIssued\", e.target.value)}\n                        className=\"font-medium text-foreground\"\n                      />\n                    </div>\n                  </div>\n                </div>\n\n                {/* Invoice From */}\n                <div className=\"space-y-1 sm:pl-3.5\">\n                  <span className=\"text-[11px] uppercase tracking-wider text-muted-foreground font-semibold block\">\n                    Invoice From:\n                  </span>\n                  <EditableInput\n                    isEditing={isEditing}\n                    value={data.invoiceFrom?.name || data.salesPerson || \"Jhone Smith.\"}\n                    onChange={(e) => {\n                      if (data.invoiceFrom) {\n                        handleNestedChange(\"invoiceFrom\", \"name\", e.target.value);\n                      } else {\n                        handleMainChange(\"salesPerson\", e.target.value);\n                      }\n                    }}\n                    className=\"text-lg sm:text-xl font-serif font-bold text-foreground tracking-tight\"\n                  />\n                  <EditableInput\n                    isEditing={isEditing}\n                    value={data.invoiceFrom?.company || \"Managing Director, Company ltd.\"}\n                    onChange={(e) => handleNestedChange(\"invoiceFrom\", \"company\", e.target.value)}\n                    className=\"text-xs text-muted-foreground\"\n                  />\n                  <div className=\"pt-1.5 space-y-1 text-xs text-muted-foreground\">\n                    <p className=\"flex items-center gap-1.5\">\n                      <span className=\"shrink-0 text-muted-foreground/80\">Phone:</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        value={data.invoiceFrom?.phone || data.companyContact?.phone || \"+123 4567 8910\"}\n                        onChange={(e) => handleNestedChange(\"invoiceFrom\", \"phone\", e.target.value)}\n                      />\n                    </p>\n                    <p className=\"flex items-center gap-1.5\">\n                      <span className=\"shrink-0 text-muted-foreground/80\">Email:</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        value={data.invoiceFrom?.email || data.companyContact?.email || \"example@mail.com\"}\n                        onChange={(e) => handleNestedChange(\"invoiceFrom\", \"email\", e.target.value)}\n                        className=\"break-all\"\n                      />\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            {/* Middle Section: Table with Angled Split Header */}\n            <section className=\"relative w-full overflow-hidden my-3 sm:my-5\">\n              <div className=\"w-full overflow-hidden\">\n                <table className=\"w-full text-left text-xs sm:text-sm border-collapse\">\n                  {/* Thead with Left Theme Slant and Right Charcoal */}\n                  <thead>\n                    <tr className=\"h-10 sm:h-12 relative\">\n                      {/* NO. column (Theme BG) */}\n                      <th className={cn(\"py-2.5 sm:py-3 px-2 sm:px-4 text-center font-bold uppercase tracking-wider text-[10px] sm:text-xs w-10 sm:w-16\", theme.bg, theme.fg)}>\n                        NO.\n                      </th>\n                      {/* DESCRIPTION column (Theme BG with forward slant at right edge) */}\n                      <th className={cn(\"py-2.5 sm:py-3 px-2 sm:px-4 font-bold uppercase tracking-wider text-[10px] sm:text-xs relative pr-6 sm:pr-8\", theme.bg, theme.fg)}>\n                        DESCRIPTION\n                        {/* Angled forward slant connecting into dark background */}\n                        <div\n                          className={cn(\"absolute top-0 -right-6 bottom-0 w-6 z-10 pointer-events-none hidden sm:block\", theme.bg)}\n                          style={{ clipPath: \"polygon(0 0, 100% 0, 0 100%)\" }}\n                        />\n                      </th>\n                      {/* PRICE column (Dark Charcoal) */}\n                      <th className=\"py-2.5 sm:py-3 px-2 sm:px-4 text-right font-bold uppercase tracking-wider text-[10px] sm:text-xs bg-[#23272f] text-white hidden sm:table-cell sm:w-28\">\n                        PRICE\n                      </th>\n                      {/* QTY column (Dark Charcoal) */}\n                      <th className=\"py-2.5 sm:py-3 px-1.5 sm:px-4 text-center font-bold uppercase tracking-wider text-[10px] sm:text-xs bg-[#23272f] text-white w-12 sm:w-20\">\n                        QTY.\n                      </th>\n                      {/* TOTAL column (Dark Charcoal) */}\n                      <th className=\"py-2.5 sm:py-3 px-2 sm:px-4 text-right font-bold uppercase tracking-wider text-[10px] sm:text-xs bg-[#23272f] text-white w-16 sm:w-32\">\n                        TOTAL\n                      </th>\n                      {isEditing && (\n                        <th className=\"py-2.5 sm:py-3 px-1 text-center bg-[#23272f] text-white w-7 sm:w-12\">\n                          ACT\n                        </th>\n                      )}\n                    </tr>\n                  </thead>\n                  <tbody>\n                    {data.items.map((item, idx) => {\n                      const isEven = idx % 2 === 1;\n                      const unitPrice = item.unitPrice ?? item.total;\n                      return (\n                        <tr\n                          key={idx}\n                          className={cn(\n                            \"transition-colors border-b border-border/40\",\n                            isEven ? \"bg-muted/40\" : \"bg-card\"\n                          )}\n                        >\n                          <td className=\"py-2.5 sm:py-3 px-2 sm:px-4 text-center font-mono font-medium text-muted-foreground text-xs\">\n                            {String(idx + 1).padStart(2, \"0\")}\n                          </td>\n                          <td className=\"py-2.5 sm:py-3 px-2 sm:px-4 min-w-0\">\n                            <EditableInput\n                              isEditing={isEditing}\n                              value={item.item}\n                              onChange={(e) => handleItemChange(idx, \"item\", e.target.value)}\n                              className=\"font-semibold text-xs sm:text-sm text-foreground break-words [overflow-wrap:anywhere]\"\n                            />\n                            {/* Mobile Unit Price info */}\n                            <div className=\"sm:hidden text-[10px] text-muted-foreground font-mono mt-0.5 flex items-center gap-1\">\n                              <span className=\"opacity-70\">Price:</span>\n                              {isEditing ? (\n                                <EditableInput\n                                  isEditing={isEditing}\n                                  value={unitPrice}\n                                  onChange={(e) => handleItemChange(idx, \"unitPrice\", e.target.value)}\n                                  className=\"text-[10px] w-20 py-0.5 px-1 font-mono\"\n                                />\n                              ) : (\n                                <span>{unitPrice}</span>\n                              )}\n                            </div>\n                            {item.description && (\n                              <EditableInput\n                                isEditing={isEditing}\n                                value={item.description}\n                                onChange={(e) => handleItemChange(idx, \"description\", e.target.value)}\n                                className=\"text-[10px] sm:text-[11px] text-muted-foreground mt-0.5 break-words [overflow-wrap:anywhere] line-clamp-2 sm:line-clamp-none\"\n                              />\n                            )}\n                          </td>\n                          <td className=\"py-2.5 sm:py-3 px-2 sm:px-4 text-right font-medium text-muted-foreground whitespace-nowrap hidden sm:table-cell\">\n                            <EditableInput\n                              isEditing={isEditing}\n                              value={unitPrice}\n                              onChange={(e) => handleItemChange(idx, \"unitPrice\", e.target.value)}\n                              align=\"right\"\n                            />\n                          </td>\n                          <td className=\"py-2.5 sm:py-3 px-1.5 sm:px-4 text-center font-mono font-medium text-muted-foreground whitespace-nowrap\">\n                            <EditableInput\n                              isEditing={isEditing}\n                              value={item.qty}\n                              onChange={(e) => handleItemChange(idx, \"qty\", e.target.value)}\n                              align=\"center\"\n                            />\n                          </td>\n                          <td className=\"py-2.5 sm:py-3 px-2 sm:px-4 text-right font-semibold text-foreground whitespace-nowrap\">\n                            <EditableInput\n                              isEditing={isEditing}\n                              value={item.total}\n                              onChange={(e) => handleItemChange(idx, \"total\", e.target.value)}\n                              align=\"right\"\n                            />\n                          </td>\n                          {isEditing && (\n                            <td className=\"py-2.5 sm:py-3 px-1 text-center w-7 sm:w-12\">\n                              <button\n                                onClick={() => removeItem(idx)}\n                                className=\"text-rose-500 hover:text-rose-700 p-1 cursor-pointer\"\n                              >\n                                <Trash2 className=\"w-3.5 h-3.5 sm:w-4 sm:h-4\" />\n                              </button>\n                            </td>\n                          )}\n                        </tr>\n                      );\n                    })}\n                  </tbody>\n                </table>\n              </div>\n\n              {isEditing && (\n                <div className=\"p-3 bg-muted/40 border-t border-border flex justify-start\">\n                  <button\n                    onClick={addItem}\n                    className={cn(\n                      \"flex items-center gap-1.5 text-xs font-semibold px-3 py-1.5 rounded-[var(--radius)] transition-all cursor-pointer\",\n                      theme.bg\n                    )}\n                  >\n                    <Plus className=\"w-3.5 h-3.5\" /> Add Service Item\n                  </button>\n                </div>\n              )}\n            </section>\n\n            {/* Bottom Section: Split Left & Right */}\n            <div className=\"flex flex-col md:flex-row items-stretch\">\n              {/* Bottom Left: Dark Charcoal with Payment Method & Contact Information */}\n              <div className=\"w-full md:w-[36%] lg:w-[35%] bg-[#23272f] text-neutral-200 p-5 sm:p-7 space-y-6 shrink-0\">\n                {/* Payment Method */}\n                <div className=\"space-y-2.5\">\n                  <h3 className=\"text-xs sm:text-sm font-bold text-white tracking-wide\">\n                    Payment Method:\n                  </h3>\n                  <div className=\"space-y-1.5 text-xs text-neutral-300\">\n                    <div className=\"grid grid-cols-[90px,1fr] gap-1 items-center\">\n                      <span className=\"text-neutral-400\">Account No:</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        inputBg=\"bg-neutral-800 text-white border-neutral-700\"\n                        value={data.paymentMethod?.accountNo || data.billTo?.iban || \"1234 5678 910\"}\n                        onChange={(e) => handleNestedChange(\"paymentMethod\", \"accountNo\", e.target.value)}\n                        className=\"text-neutral-200 font-mono\"\n                      />\n                    </div>\n                    <div className=\"grid grid-cols-[90px,1fr] gap-1 items-center\">\n                      <span className=\"text-neutral-400\">Account Name:</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        inputBg=\"bg-neutral-800 text-white border-neutral-700\"\n                        value={data.paymentMethod?.accountName || data.invoiceTo.name || \"Jhone Doe.\"}\n                        onChange={(e) => handleNestedChange(\"paymentMethod\", \"accountName\", e.target.value)}\n                        className=\"text-neutral-200\"\n                      />\n                    </div>\n                    <div className=\"grid grid-cols-[90px,1fr] gap-1 items-center\">\n                      <span className=\"text-neutral-400\">Branch Name:</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        inputBg=\"bg-neutral-800 text-white border-neutral-700\"\n                        value={data.paymentMethod?.branchName || data.billTo?.bankName || \"XYZ\"}\n                        onChange={(e) => handleNestedChange(\"paymentMethod\", \"branchName\", e.target.value)}\n                        className=\"text-neutral-200\"\n                      />\n                    </div>\n                  </div>\n                </div>\n\n                {/* Contact Information */}\n                <div className=\"space-y-2.5 pt-2\">\n                  <h3 className=\"text-xs sm:text-sm font-bold text-white tracking-wide\">\n                    Contact Information\n                  </h3>\n                  <div className=\"space-y-1.5 text-xs text-neutral-300\">\n                    <p className=\"flex items-center gap-1.5\">\n                      <span className=\"shrink-0 text-neutral-400\">Phone:</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        inputBg=\"bg-neutral-800 text-white border-neutral-700\"\n                        value={data.companyContact?.phone || \"+123 4567 8910\"}\n                        onChange={(e) => handleNestedChange(\"companyContact\", \"phone\", e.target.value)}\n                        className=\"text-neutral-200\"\n                      />\n                    </p>\n                    <p className=\"flex items-center gap-1.5\">\n                      <span className=\"shrink-0 text-neutral-400\">Email:</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        inputBg=\"bg-neutral-800 text-white border-neutral-700\"\n                        value={data.companyContact?.email || \"example@mail.com\"}\n                        onChange={(e) => handleNestedChange(\"companyContact\", \"email\", e.target.value)}\n                        className=\"text-neutral-200 break-all\"\n                      />\n                    </p>\n                    <p className=\"flex items-center gap-1.5\">\n                      <span className=\"shrink-0 text-neutral-400\">Website:</span>\n                      <EditableInput\n                        isEditing={isEditing}\n                        inputBg=\"bg-neutral-800 text-white border-neutral-700\"\n                        value={data.companyContact?.website || data.companyContact?.social || \"www.sitename.com\"}\n                        onChange={(e) => handleNestedChange(\"companyContact\", \"website\", e.target.value)}\n                        className=\"text-neutral-200\"\n                      />\n                    </p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Bottom Right: Calculations, Signature, and Terms */}\n              <div className=\"flex-1 bg-card p-5 sm:p-8 space-y-6 flex flex-col justify-between\">\n                {/* Calculations Breakdown */}\n                <div className=\"space-y-2 text-right\">\n                  <div className=\"flex justify-between md:justify-end gap-6 text-xs sm:text-sm text-foreground\">\n                    <span className=\"font-bold uppercase tracking-wider text-muted-foreground\">SUBTOTAL:</span>\n                    <EditableInput\n                      isEditing={isEditing}\n                      value={data.subtotal}\n                      onChange={(e) => handleMainChange(\"subtotal\", e.target.value)}\n                      align=\"right\"\n                      className=\"font-bold text-foreground min-w-[80px]\"\n                    />\n                  </div>\n                  <div className=\"flex justify-between md:justify-end gap-6 text-xs sm:text-sm text-foreground\">\n                    <span className=\"font-bold uppercase tracking-wider text-muted-foreground\">TAX (10%):</span>\n                    <EditableInput\n                      isEditing={isEditing}\n                      value={data.tax || \"$100.00\"}\n                      onChange={(e) => handleMainChange(\"tax\", e.target.value)}\n                      align=\"right\"\n                      className=\"font-bold text-foreground min-w-[80px]\"\n                    />\n                  </div>\n                  <div className=\"flex justify-between md:justify-end gap-6 text-xs sm:text-sm text-foreground\">\n                    <span className=\"font-bold uppercase tracking-wider text-muted-foreground\">DISCOUNT:</span>\n                    <EditableInput\n                      isEditing={isEditing}\n                      value={data.discount || \"$0.00\"}\n                      onChange={(e) => handleMainChange(\"discount\", e.target.value)}\n                      align=\"right\"\n                      className=\"font-bold text-foreground min-w-[80px]\"\n                    />\n                  </div>\n                </div>\n\n                {/* Signature & Solid Theme TOTAL Badge Row */}\n                <div className=\"flex flex-col sm:flex-row items-center justify-between gap-4 pt-2\">\n                  {/* Signature Area */}\n                  <div className=\"text-center w-full sm:w-auto\">\n                    <div className=\"w-40 sm:w-44 border-t border-border mb-1.5 mx-auto sm:mx-0\" />\n                    <span className=\"text-[10px] sm:text-xs font-bold uppercase tracking-widest text-muted-foreground\">\n                      {data.signatory?.name || \"AUTHORISED SIGN\"}\n                    </span>\n                  </div>\n\n                  {/* Total Theme Badge */}\n                  <div\n                    className={cn(\n                      \"w-full sm:w-auto px-6 py-2.5 rounded-[var(--radius)] flex items-center justify-between sm:justify-center gap-6\",\n                      theme.bg\n                    )}\n                  >\n                    <span className={cn(\"text-xs sm:text-sm font-bold uppercase tracking-wider\", theme.fg)}>\n                      TOTAL:\n                    </span>\n                    <EditableInput\n                      isEditing={isEditing}\n                      inputBg={cn(\"border font-bold\", theme.fgSoft, theme.fg)}\n                      value={data.grandTotal}\n                      onChange={(e) => handleMainChange(\"grandTotal\", e.target.value)}\n                      align=\"right\"\n                      className={cn(\"text-base sm:text-lg font-black tracking-tight\", theme.fg)}\n                    />\n                  </div>\n                </div>\n\n                {/* Thank You and Terms & Conditions */}\n                <div className=\"space-y-2 pt-2 border-t border-border/40\">\n                  <h4 className=\"text-xs sm:text-sm font-bold text-foreground\">\n                    Thank You For Your Business\n                  </h4>\n                  <div className=\"space-y-1\">\n                    <span className=\"text-[11px] font-semibold text-foreground block\">\n                      Terms & Conditions:\n                    </span>\n                    <p className=\"text-[10px] sm:text-[11px] text-muted-foreground leading-relaxed max-w-xl\">\n                      {Array.isArray(data.terms)\n                        ? data.terms.join(\" \")\n                        : (data.terms || \"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida.\")}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            {/* Bottom Accent Strip with Angled Corner Triangle */}\n            <div className=\"relative\">\n              <div className={cn(\"h-2.5 sm:h-3 w-full\", theme.bg)} />\n              {/* Right Corner Slanted Wing/Triangle */}\n              <div\n                className={cn(\"absolute right-0 bottom-0 w-8 h-8 sm:w-10 sm:h-10 pointer-events-none\", theme.bg)}\n                style={{ clipPath: \"polygon(100% 0, 0 100%, 100% 100%)\" }}\n              />\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/custom/blocks/Invoice.tsx"
    },
    {
      "path": "src/components/custom/blocks/invoice-theme.ts",
      "content": "\"use client\";\n\n// Every theme carries its own foreground tokens so a variant never has to\n// hardcode `text-white` on top of `bg`. That matters for `primary` and `zinc`,\n// whose `bg` flips to near-white in dark mode, and for light custom hex colors\n// such as #ffffff — white-on-white text was unreadable in those cases.\n//\n//   text     – the accent used on the card surface (totals, links, icons)\n//   bg       – solid accent fill with its own readable text color\n//   fg       – text placed on top of `bg`\n//   fgMuted  – secondary text on top of `bg`\n//   fgSoft   – translucent overlay (inputs) on top of `bg`\n//   fgBorder – translucent divider on top of `bg`\n//   inverse  – a chip/box placed on top of `bg` (foreground fill, accent text)\nconst colorThemes: Record<string, Record<string, string>> = {\n  primary: {\n    text: \"text-primary\",\n    bg: \"bg-primary hover:bg-primary/90 text-primary-foreground shadow-primary/20\",\n    fg: \"text-primary-foreground\",\n    fgMuted: \"text-primary-foreground/80\",\n    fgSoft: \"bg-primary-foreground/15 border-primary-foreground/30\",\n    fgBorder: \"border-primary-foreground/25\",\n    inverse: \"bg-primary-foreground text-primary\",\n    lightBg: \"bg-primary/10 text-primary\",\n    border: \"border-primary/30\",\n    focusRing: \"focus:ring-primary/20 focus:border-primary/30\",\n  },\n  indigo: {\n    text: \"text-indigo-600 dark:text-indigo-400\",\n    bg: \"bg-indigo-600 hover:bg-indigo-700 text-white shadow-indigo-600/20\",\n    fg: \"text-white\",\n    fgMuted: \"text-white/80\",\n    fgSoft: \"bg-white/15 border-white/30\",\n    fgBorder: \"border-white/25\",\n    inverse: \"bg-white text-indigo-600\",\n    lightBg:\n      \"bg-indigo-50 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-300\",\n    border: \"border-indigo-200 dark:border-indigo-500/30\",\n    focusRing: \"focus:ring-indigo-500/20 focus:border-indigo-500\",\n  },\n  rose: {\n    text: \"text-rose-600 dark:text-rose-400\",\n    bg: \"bg-rose-600 hover:bg-rose-700 text-white shadow-rose-600/20\",\n    fg: \"text-white\",\n    fgMuted: \"text-white/80\",\n    fgSoft: \"bg-white/15 border-white/30\",\n    fgBorder: \"border-white/25\",\n    inverse: \"bg-white text-rose-600\",\n    lightBg: \"bg-rose-50 dark:bg-rose-500/10 text-rose-700 dark:text-rose-300\",\n    border: \"border-rose-200 dark:border-rose-500/30\",\n    focusRing: \"focus:ring-rose-500/20 focus:border-rose-500\",\n  },\n  emerald: {\n    text: \"text-emerald-600 dark:text-emerald-400\",\n    bg: \"bg-emerald-600 hover:bg-emerald-700 text-white shadow-emerald-600/20\",\n    fg: \"text-white\",\n    fgMuted: \"text-white/80\",\n    fgSoft: \"bg-white/15 border-white/30\",\n    fgBorder: \"border-white/25\",\n    inverse: \"bg-white text-emerald-600\",\n    lightBg:\n      \"bg-emerald-50 dark:bg-emerald-500/10 text-emerald-700 dark:text-emerald-300\",\n    border: \"border-emerald-200 dark:border-emerald-500/30\",\n    focusRing: \"focus:ring-emerald-500/20 focus:border-emerald-500\",\n  },\n  zinc: {\n    text: \"text-zinc-900 dark:text-zinc-100\",\n    bg: \"bg-zinc-900 hover:bg-zinc-800 dark:bg-zinc-100 dark:hover:bg-zinc-200 text-white dark:text-zinc-900 shadow-zinc-900/10\",\n    fg: \"text-white dark:text-zinc-900\",\n    fgMuted: \"text-white/80 dark:text-zinc-900/80\",\n    fgSoft: \"bg-white/15 border-white/30 dark:bg-zinc-900/15 dark:border-zinc-900/30\",\n    fgBorder: \"border-white/25 dark:border-zinc-900/25\",\n    inverse: \"bg-white text-zinc-900 dark:bg-zinc-900 dark:text-zinc-100\",\n    lightBg: \"bg-zinc-100 dark:bg-zinc-800/50 text-zinc-900 dark:text-zinc-100\",\n    border: \"border-zinc-300 dark:border-zinc-600\",\n    focusRing: \"focus:ring-zinc-500/20 focus:border-zinc-500\",\n  },\n};\n\nconst hexToRgb = (hex: string): [number, number, number] => {\n  let cleanHex = hex.replace(/^#/, \"\");\n  if (cleanHex.length === 3)\n    cleanHex = cleanHex\n      .split(\"\")\n      .map((x) => x + x)\n      .join(\"\");\n  const result = /^([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(cleanHex);\n  return result\n    ? [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)]\n    : [99, 102, 241];\n};\n\nconst rgbToCss = ([r, g, b]: [number, number, number]) => `${r}, ${g}, ${b}`;\n\n// WCAG relative luminance, 0 (black) → 1 (white).\nconst luminance = ([r, g, b]: [number, number, number]) => {\n  const [lr, lg, lb] = [r, g, b].map((c) => {\n    const s = c / 255;\n    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;\n  });\n  return 0.2126 * lr + 0.7152 * lg + 0.0722 * lb;\n};\n\n// Pull a color toward black (t < 0) or white (t > 0) by |t|.\nconst mix = (\n  [r, g, b]: [number, number, number],\n  t: number,\n): [number, number, number] => {\n  const target = t < 0 ? 0 : 255;\n  const amount = Math.abs(t);\n  return [r, g, b].map((c) => Math.round(c + (target - c) * amount)) as [\n    number,\n    number,\n    number,\n  ];\n};\n\nexport const getThemeStyles = (color: string) => {\n  if (color && color.startsWith(\"#\")) {\n    const rgb = hexToRgb(color);\n    const lum = luminance(rgb);\n\n    // Text placed ON the accent fill: dark on light colors, light on dark ones.\n    const fgRgb: [number, number, number] = lum > 0.45 ? [24, 24, 27] : [255, 255, 255];\n\n    // Accent text placed on the card surface. A very light color (e.g. white)\n    // vanishes on the light card, and a very dark one on the dark card, so\n    // shade each mode's copy just enough to stay readable.\n    const textLight = lum > 0.4 ? mix(rgb, -0.55) : rgb;\n    const textDark = lum < 0.15 ? mix(rgb, 0.55) : rgb;\n\n    return {\n      theme: {\n        text: \"text-[var(--theme-text)] dark:text-[var(--theme-text-dark)]\",\n        bg: \"bg-[var(--theme-color)] hover:opacity-90 text-[var(--theme-fg)] shadow-[0_4px_14px_0_rgba(var(--theme-color-rgb),0.2)]\",\n        fg: \"text-[var(--theme-fg)]\",\n        fgMuted: \"text-[rgba(var(--theme-fg-rgb),0.8)]\",\n        fgSoft:\n          \"bg-[rgba(var(--theme-fg-rgb),0.15)] border-[rgba(var(--theme-fg-rgb),0.3)]\",\n        fgBorder: \"border-[rgba(var(--theme-fg-rgb),0.25)]\",\n        inverse: \"bg-[var(--theme-fg)] text-[var(--theme-color)]\",\n        lightBg:\n          \"bg-[rgba(var(--theme-color-rgb),0.1)] text-[var(--theme-text)] dark:text-[var(--theme-text-dark)]\",\n        border: \"border-[rgba(var(--theme-color-rgb),0.3)]\",\n        focusRing:\n          \"focus:ring-[rgba(var(--theme-color-rgb),0.2)] focus:border-[var(--theme-color)]\",\n      },\n      style: {\n        \"--theme-color\": color,\n        \"--theme-color-rgb\": rgbToCss(rgb),\n        \"--theme-fg\": `rgb(${rgbToCss(fgRgb)})`,\n        \"--theme-fg-rgb\": rgbToCss(fgRgb),\n        \"--theme-text\": `rgb(${rgbToCss(textLight)})`,\n        \"--theme-text-dark\": `rgb(${rgbToCss(textDark)})`,\n      } as React.CSSProperties,\n    };\n  }\n  return { theme: colorThemes[color] || colorThemes.primary, style: {} };\n};\n",
      "type": "registry:component",
      "target": "components/custom/blocks/invoice-theme.ts"
    }
  ],
  "docs": "Named exports: Invoice, getThemeStyles (from invoice-theme.ts, which installs alongside). `InvoiceData` carries invoiceNumber, parties, dates and an `items` array of { item, description?, hours|qty, unitPrice?, total }. Totals are computed for you. Variants: default | corporate | brutalist | geometric | split.",
  "categories": [
    "commerce",
    "data-display"
  ],
  "type": "registry:component"
}