{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "invoice-creator-wizard",
  "title": "Invoice Creator Wizard",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/invoice-creator-wizard/InvoiceCreatorWizard.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed, ref, watch } from 'vue'\nimport {\n  Building2,\n  Calendar,\n  Check,\n  CheckCircle2,\n  CreditCard,\n  DollarSign,\n  Eye,\n  FileText,\n  Percent,\n  Plus,\n  Printer,\n  Receipt,\n  Save,\n  Send,\n  Trash2,\n  User,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Separator } from '@/components/ui/separator'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { Textarea } from '@/components/ui/textarea'\n\nexport interface InvoiceLineItem {\n  id: string\n  description: string\n  quantity: number\n  unitPrice: number\n}\n\nexport interface ClientPreset {\n  id: string\n  name: string\n  company: string\n  email: string\n  address: string\n}\n\ninterface Props {\n  class?: HTMLAttributes['class']\n  initialInvoiceNumber?: string\n  initialIssuerName?: string\n  initialIssuerEmail?: string\n  initialIssuerAddress?: string\n  initialIssuerTaxId?: string\n  initialClientName?: string\n  initialClientCompany?: string\n  initialClientEmail?: string\n  initialClientAddress?: string\n  initialInvoiceDate?: string\n  initialDueDate?: string\n  initialPaymentTerms?: string\n  initialCurrency?: string\n  initialItems?: InvoiceLineItem[]\n  initialTaxRate?: number\n  initialDiscountType?: 'fixed' | 'percent'\n  initialDiscountValue?: number\n  initialNotes?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  initialInvoiceNumber: 'INV-2026-0042',\n  initialIssuerName: 'Acme Design & Engineering Studio',\n  initialIssuerEmail: 'billing@acmestudio.io',\n  initialIssuerAddress: '100 Montgomery St, Suite 1400, San Francisco, CA 94104',\n  initialIssuerTaxId: 'US-EIN-94-2819034',\n  initialClientName: 'Sarah Jenkins',\n  initialClientCompany: 'Apex Digital Inc.',\n  initialClientEmail: 'sarah.jenkins@apexdigital.com',\n  initialClientAddress: '742 Evergreen Terrace, Springfield, OR 97477',\n  initialInvoiceDate: '2026-08-21',\n  initialDueDate: '2026-09-20',\n  initialPaymentTerms: 'net30',\n  initialCurrency: 'USD',\n  initialTaxRate: 8.5,\n  initialDiscountType: 'fixed',\n  initialDiscountValue: 150,\n  initialNotes:\n    'Thank you for your partnership! Please remit payment via wire transfer or online payment link within 30 days. Contact billing@acmestudio.io for any questions.',\n})\n\nconst emits = defineEmits<{\n  (e: 'save-draft', payload: Record<string, any>): void\n  (e: 'send-invoice', payload: Record<string, any>): void\n  (e: 'preview-pdf'): void\n}>()\n\nconst CLIENT_PRESETS: ClientPreset[] = [\n  {\n    id: 'c1',\n    name: 'Sarah Jenkins',\n    company: 'Apex Digital Inc.',\n    email: 'sarah.jenkins@apexdigital.com',\n    address: '742 Evergreen Terrace, Springfield, OR 97477',\n  },\n  {\n    id: 'c2',\n    name: 'Marcus Vance',\n    company: 'Northwind Global Corp.',\n    email: 'marcus.vance@northwind.io',\n    address: '452 Broadway, 8th Floor, New York, NY 10013',\n  },\n  {\n    id: 'c3',\n    name: 'Elena Rostova',\n    company: 'Hyperion Robotics',\n    email: 'elena@hyperion-robotics.ai',\n    address: '10 Tech Parkway, Suite 300, Boston, MA 02115',\n  },\n]\n\nconst DEFAULT_LINE_ITEMS: InvoiceLineItem[] = [\n  {\n    id: 'item-1',\n    description: 'Design System Architecture & Component Registry',\n    quantity: 1,\n    unitPrice: 3200,\n  },\n  {\n    id: 'item-2',\n    description: 'Frontend Implementation (Vue 3 + React Mirror)',\n    quantity: 35,\n    unitPrice: 120,\n  },\n  {\n    id: 'item-3',\n    description: 'Accessibility & WCAG AA Compliance Audit',\n    quantity: 1,\n    unitPrice: 850,\n  },\n]\n\nconst PAYMENT_TERMS_MAP: Record<string, string> = {\n  receipt: 'Due on Receipt',\n  net15: 'Net 15 (Due in 15 days)',\n  net30: 'Net 30 (Due in 30 days)',\n  net60: 'Net 60 (Due in 60 days)',\n}\n\n// Form State\nconst invoiceNumber = ref(props.initialInvoiceNumber)\nconst issuerName = ref(props.initialIssuerName)\nconst issuerEmail = ref(props.initialIssuerEmail)\nconst issuerAddress = ref(props.initialIssuerAddress)\nconst issuerTaxId = ref(props.initialIssuerTaxId)\n\nconst selectedPreset = ref('c1')\nconst clientName = ref(props.initialClientName)\nconst clientCompany = ref(props.initialClientCompany)\nconst clientEmail = ref(props.initialClientEmail)\nconst clientAddress = ref(props.initialClientAddress)\n\nconst invoiceDate = ref(props.initialInvoiceDate)\nconst dueDate = ref(props.initialDueDate)\nconst paymentTerms = ref(props.initialPaymentTerms)\nconst currency = ref(props.initialCurrency)\n\nconst items = ref<InvoiceLineItem[]>(\n  props.initialItems && props.initialItems.length > 0\n    ? props.initialItems.map((i) => ({ ...i }))\n    : DEFAULT_LINE_ITEMS.map((i) => ({ ...i })),\n)\n\nconst taxRate = ref(props.initialTaxRate)\nconst discountType = ref<'fixed' | 'percent'>(props.initialDiscountType)\nconst discountValue = ref(props.initialDiscountValue)\nconst notes = ref(props.initialNotes)\n\n// Notification banner state\nconst notification = ref<{ type: 'success' | 'info'; message: string } | null>(null)\nlet notifTimeout: ReturnType<typeof setTimeout> | null = null\n\nfunction showNotification(message: string, type: 'success' | 'info' = 'success') {\n  if (notifTimeout) clearTimeout(notifTimeout)\n  notification.value = { message, type }\n  notifTimeout = setTimeout(() => {\n    notification.value = null\n  }, 4000)\n}\n\nfunction handlePresetChange(presetId: unknown) {\n  const id = String(presetId)\n  selectedPreset.value = id\n  if (id === 'custom') return\n\n  const preset = CLIENT_PRESETS.find((c) => c.id === id)\n  if (preset) {\n    clientName.value = preset.name\n    clientCompany.value = preset.company\n    clientEmail.value = preset.email\n    clientAddress.value = preset.address\n  }\n}\n\nfunction addLineItem() {\n  const newId = `item-${Date.now()}`\n  items.value.push({\n    id: newId,\n    description: '',\n    quantity: 1,\n    unitPrice: 0,\n  })\n}\n\nfunction removeLineItem(id: string) {\n  if (items.value.length > 1) {\n    items.value = items.value.filter((i) => i.id !== id)\n  }\n}\n\n// Computations\nconst subtotal = computed(() => {\n  return items.value.reduce((acc, item) => {\n    const qty = Number(item.quantity) || 0\n    const price = Number(item.unitPrice) || 0\n    return acc + qty * price\n  }, 0)\n})\n\nconst discountAmount = computed(() => {\n  const val = Number(discountValue.value) || 0\n  if (discountType.value === 'percent') {\n    return subtotal.value * (val / 100)\n  }\n  return val\n})\n\nconst effectiveDiscount = computed(() => {\n  return Math.min(subtotal.value, Math.max(0, discountAmount.value))\n})\n\nconst taxableAmount = computed(() => {\n  return Math.max(0, subtotal.value - effectiveDiscount.value)\n})\n\nconst taxAmount = computed(() => {\n  const rate = Number(taxRate.value) || 0\n  return taxableAmount.value * (rate / 100)\n})\n\nconst totalDue = computed(() => {\n  return taxableAmount.value + taxAmount.value\n})\n\nfunction formatCurrency(amount: number, curr: string = currency.value) {\n  try {\n    return new Intl.NumberFormat('en-US', {\n      style: 'currency',\n      currency: curr,\n      minimumFractionDigits: 2,\n      maximumFractionDigits: 2,\n    }).format(amount)\n  } catch {\n    const symbols: Record<string, string> = { USD: '$', EUR: '€', GBP: '£', CAD: 'CA$', AUD: 'AU$' }\n    const s = symbols[curr] || '$'\n    return `${s}${amount.toFixed(2)}`\n  }\n}\n\nfunction formatDate(dateStr: string) {\n  if (!dateStr) return '—'\n  try {\n    const [y, m, d] = dateStr.split('-').map(Number)\n    if (!y || !m || !d) return dateStr\n    const date = new Date(y, m - 1, d)\n    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })\n  } catch {\n    return dateStr\n  }\n}\n\nfunction getPayload() {\n  return {\n    invoiceNumber: invoiceNumber.value,\n    issuer: {\n      name: issuerName.value,\n      email: issuerEmail.value,\n      address: issuerAddress.value,\n      taxId: issuerTaxId.value,\n    },\n    client: {\n      name: clientName.value,\n      company: clientCompany.value,\n      email: clientEmail.value,\n      address: clientAddress.value,\n    },\n    dates: {\n      issued: invoiceDate.value,\n      due: dueDate.value,\n      terms: paymentTerms.value,\n    },\n    currency: currency.value,\n    items: items.value,\n    calculations: {\n      subtotal: subtotal.value,\n      discount: effectiveDiscount.value,\n      tax: taxAmount.value,\n      total: totalDue.value,\n    },\n    notes: notes.value,\n  }\n}\n\nfunction handleSaveDraft() {\n  const payload = getPayload()\n  emits('save-draft', payload)\n  showNotification(`Draft invoice ${invoiceNumber.value} saved successfully.`, 'info')\n}\n\nfunction handleSendInvoice() {\n  const payload = getPayload()\n  emits('send-invoice', payload)\n  showNotification(`Invoice ${invoiceNumber.value} sent to ${clientEmail.value || 'client'}.`, 'success')\n}\n\nfunction handlePreviewPdf() {\n  emits('preview-pdf')\n  showNotification(`Generating printable PDF preview for ${invoiceNumber.value}...`, 'info')\n}\n</script>\n\n<template>\n  <div data-slot=\"invoice-creator-wizard\" :class=\"cn('mx-auto w-full max-w-7xl space-y-6', props.class)\">\n    <!-- Top Action Header -->\n    <div class=\"border-border flex flex-col gap-4 border-b pb-5 sm:flex-row sm:items-center sm:justify-between\">\n      <div class=\"space-y-1\">\n        <div class=\"flex items-center gap-3\">\n          <h1 class=\"text-foreground text-xl font-bold tracking-tight sm:text-2xl\">Create New Invoice</h1>\n          <Badge wrap variant=\"outline\" class=\"px-2 py-0.5 font-mono text-xs font-semibold\">\n            {{ invoiceNumber }}\n          </Badge>\n          <Badge wrap variant=\"secondary\" class=\"text-xs\">Draft</Badge>\n        </div>\n        <p class=\"text-muted-foreground text-xs sm:text-sm\">\n          Build itemized invoices with live calculation, instant document preview, and client presets.\n        </p>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs\" @click=\"handlePreviewPdf\">\n          <FileText class=\"size-3.5\" aria-hidden=\"true\" />\n          Preview PDF\n        </Button>\n        <Button variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs\" @click=\"handleSaveDraft\">\n          <Save class=\"size-3.5\" aria-hidden=\"true\" />\n          Save Draft\n        </Button>\n        <Button size=\"sm\" class=\"gap-1.5 text-xs font-medium\" @click=\"handleSendInvoice\">\n          <Send class=\"size-3.5\" aria-hidden=\"true\" />\n          Send Invoice\n        </Button>\n      </div>\n    </div>\n\n    <!-- Notification Toast / Alert Banner -->\n    <div\n      v-if=\"notification\"\n      :class=\"\n        cn(\n          'flex flex-wrap items-center justify-between rounded-lg border px-4 py-2.5 text-xs transition-colors sm:text-sm',\n          notification.type === 'success'\n            ? 'border-success/30 bg-success/10 text-success'\n            : 'border-primary/30 bg-primary/10 text-primary',\n        )\n      \"\n      role=\"status\"\n    >\n      <div class=\"flex flex-wrap items-center gap-2\">\n        <CheckCircle2 class=\"size-4 shrink-0\" aria-hidden=\"true\" />\n        <span>{{ notification.message }}</span>\n      </div>\n      <button\n        type=\"button\"\n        class=\"min-h-6 text-xs font-semibold underline-offset-2 opacity-80 hover:underline hover:opacity-100\"\n        @click=\"notification = null\"\n      >\n        Dismiss\n      </button>\n    </div>\n\n    <!-- 2-Column Invoice Builder Layout -->\n    <div class=\"grid grid-cols-1 items-start gap-8 lg:grid-cols-12\">\n      <!-- Left Column: Form Builder -->\n      <div class=\"space-y-6 lg:col-span-7\">\n        <!-- Section 1: Business & Client Details -->\n        <Card>\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Building2 class=\"text-primary size-4\" aria-hidden=\"true\" />\n              <CardTitle class=\"text-base font-semibold\">Business & Client Details</CardTitle>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Configure your issuing entity information and bill-to client contact.\n            </CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-5\">\n            <!-- Issuer Details -->\n            <div class=\"space-y-3\">\n              <div class=\"flex flex-wrap items-center justify-between\">\n                <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">From (Issuer)</span>\n                <span class=\"text-muted-foreground font-mono text-xs\">ID: {{ invoiceNumber }}</span>\n              </div>\n              <div class=\"grid gap-3 sm:grid-cols-2\">\n                <div class=\"space-y-1.5 sm:col-span-2\">\n                  <label for=\"issuer-name\" class=\"text-foreground text-xs font-medium\"\n                    >Business / Organization Name</label\n                  >\n                  <Input id=\"issuer-name\" v-model=\"issuerName\" placeholder=\"Business name\" size=\"small\" />\n                </div>\n                <div class=\"space-y-1.5\">\n                  <label for=\"issuer-email\" class=\"text-foreground text-xs font-medium\">Billing Email</label>\n                  <Input\n                    id=\"issuer-email\"\n                    v-model=\"issuerEmail\"\n                    type=\"email\"\n                    placeholder=\"billing@company.com\"\n                    size=\"small\"\n                  />\n                </div>\n                <div class=\"space-y-1.5\">\n                  <label for=\"issuer-tax\" class=\"text-foreground text-xs font-medium\">Tax ID / VAT Registration</label>\n                  <Input id=\"issuer-tax\" v-model=\"issuerTaxId\" placeholder=\"Tax ID / EIN\" size=\"small\" />\n                </div>\n                <div class=\"space-y-1.5 sm:col-span-2\">\n                  <label for=\"issuer-address\" class=\"text-foreground text-xs font-medium\">Business Address</label>\n                  <Input\n                    id=\"issuer-address\"\n                    v-model=\"issuerAddress\"\n                    placeholder=\"Street, City, State, ZIP\"\n                    size=\"small\"\n                  />\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            <!-- Client Details -->\n            <div class=\"space-y-3\">\n              <div class=\"flex flex-wrap items-center justify-between\">\n                <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\"\n                  >Bill To (Client)</span\n                >\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <span class=\"text-muted-foreground text-xs\">Quick Preset:</span>\n                  <div class=\"w-48\">\n                    <Select :model-value=\"selectedPreset\" @update:model-value=\"handlePresetChange\">\n                      <SelectTrigger size=\"sm\" class=\"h-7 text-xs\">\n                        <SelectValue placeholder=\"Select client\" />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem v-for=\"preset in CLIENT_PRESETS\" :key=\"preset.id\" :value=\"preset.id\">\n                          {{ preset.company }}\n                        </SelectItem>\n                        <SelectItem value=\"custom\">Custom Client</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"grid gap-3 sm:grid-cols-2\">\n                <div class=\"space-y-1.5\">\n                  <label for=\"client-name\" class=\"text-foreground text-xs font-medium\">Contact Name</label>\n                  <Input id=\"client-name\" v-model=\"clientName\" placeholder=\"Client contact name\" size=\"small\" />\n                </div>\n                <div class=\"space-y-1.5\">\n                  <label for=\"client-company\" class=\"text-foreground text-xs font-medium\">Company Name</label>\n                  <Input id=\"client-company\" v-model=\"clientCompany\" placeholder=\"Client company name\" size=\"small\" />\n                </div>\n                <div class=\"space-y-1.5\">\n                  <label for=\"client-email\" class=\"text-foreground text-xs font-medium\">Client Email</label>\n                  <Input\n                    id=\"client-email\"\n                    v-model=\"clientEmail\"\n                    type=\"email\"\n                    placeholder=\"client@company.com\"\n                    size=\"small\"\n                  />\n                </div>\n                <div class=\"space-y-1.5\">\n                  <label for=\"client-address\" class=\"text-foreground text-xs font-medium\">Client Address</label>\n                  <Input\n                    id=\"client-address\"\n                    v-model=\"clientAddress\"\n                    placeholder=\"Street, City, Postal Code\"\n                    size=\"small\"\n                  />\n                </div>\n              </div>\n            </div>\n\n            <Separator />\n\n            <!-- Invoice Timing & Currency -->\n            <div class=\"grid gap-3 sm:grid-cols-4\">\n              <div class=\"space-y-1.5\">\n                <label for=\"invoice-date\" class=\"text-foreground text-xs font-medium\">Invoice Date</label>\n                <Input id=\"invoice-date\" v-model=\"invoiceDate\" type=\"date\" size=\"small\" />\n              </div>\n              <div class=\"space-y-1.5\">\n                <label for=\"due-date\" class=\"text-foreground text-xs font-medium\">Due Date</label>\n                <Input id=\"due-date\" v-model=\"dueDate\" type=\"date\" size=\"small\" />\n              </div>\n              <div class=\"space-y-1.5\">\n                <label for=\"payment-terms\" class=\"text-foreground text-xs font-medium\">Payment Terms</label>\n                <Select v-model=\"paymentTerms\">\n                  <SelectTrigger id=\"payment-terms\" size=\"sm\" class=\"h-8 text-xs\">\n                    <SelectValue placeholder=\"Terms\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"receipt\">Due on Receipt</SelectItem>\n                    <SelectItem value=\"net15\">Net 15</SelectItem>\n                    <SelectItem value=\"net30\">Net 30</SelectItem>\n                    <SelectItem value=\"net60\">Net 60</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"space-y-1.5\">\n                <label for=\"currency-select\" class=\"text-foreground text-xs font-medium\">Currency</label>\n                <Select v-model=\"currency\">\n                  <SelectTrigger id=\"currency-select\" size=\"sm\" class=\"h-8 text-xs\">\n                    <SelectValue placeholder=\"Currency\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"USD\">USD ($)</SelectItem>\n                    <SelectItem value=\"EUR\">EUR (€)</SelectItem>\n                    <SelectItem value=\"GBP\">GBP (£)</SelectItem>\n                    <SelectItem value=\"CAD\">CAD ($)</SelectItem>\n                    <SelectItem value=\"AUD\">AUD ($)</SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Section 2: Interactive Line Items -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center justify-between\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <Receipt class=\"text-primary size-4\" aria-hidden=\"true\" />\n                <CardTitle class=\"text-base font-semibold\">Line Items</CardTitle>\n              </div>\n              <Badge wrap variant=\"secondary\" class=\"font-mono text-xs tabular-nums\">\n                {{ items.length }} {{ items.length === 1 ? 'item' : 'items' }}\n              </Badge>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Itemize deliverables, billable hours, software licenses, or custom services.\n            </CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-4\">\n            <div class=\"overflow-x-auto\">\n              <table class=\"w-full text-left text-xs\">\n                <thead>\n                  <tr class=\"border-border text-muted-foreground border-b\">\n                    <th class=\"pb-2 font-medium\">Description</th>\n                    <th class=\"w-20 pb-2 text-right font-medium\">Qty</th>\n                    <th class=\"w-28 pb-2 text-right font-medium\">Unit Price</th>\n                    <th class=\"w-24 pb-2 text-right font-medium\">Line Total</th>\n                    <th class=\"w-10 pb-2 text-center font-medium\"></th>\n                  </tr>\n                </thead>\n                <tbody class=\"divide-border/60 divide-y\">\n                  <tr v-for=\"item in items\" :key=\"item.id\" class=\"group\">\n                    <td class=\"py-2.5 pr-2\">\n                      <Input\n                        v-model=\"item.description\"\n                        placeholder=\"Service or product description...\"\n                        size=\"small\"\n                        class=\"w-full\"\n                      />\n                    </td>\n                    <td class=\"px-2 py-2.5\">\n                      <Input\n                        v-model.number=\"item.quantity\"\n                        type=\"number\"\n                        min=\"1\"\n                        step=\"1\"\n                        size=\"small\"\n                        class=\"w-20 text-right tabular-nums\"\n                      />\n                    </td>\n                    <td class=\"px-2 py-2.5\">\n                      <Input\n                        v-model.number=\"item.unitPrice\"\n                        type=\"number\"\n                        min=\"0\"\n                        step=\"0.01\"\n                        size=\"small\"\n                        class=\"w-28 text-right tabular-nums\"\n                      />\n                    </td>\n                    <td class=\"text-foreground py-2.5 pl-2 text-right font-medium whitespace-nowrap tabular-nums\">\n                      {{ formatCurrency((Number(item.quantity) || 0) * (Number(item.unitPrice) || 0)) }}\n                    </td>\n                    <td class=\"py-2.5 pl-1 text-center\">\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"icon\"\n                        class=\"text-muted-foreground hover:text-destructive size-7 disabled:opacity-30\"\n                        :disabled=\"items.length <= 1\"\n                        aria-label=\"Remove item\"\n                        @click=\"removeLineItem(item.id)\"\n                      >\n                        <Trash2 class=\"size-3.5\" aria-hidden=\"true\" />\n                      </Button>\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n\n            <div class=\"flex flex-wrap items-center justify-between pt-2\">\n              <Button type=\"button\" variant=\"outline\" size=\"sm\" class=\"gap-1 text-xs\" @click=\"addLineItem\">\n                <Plus class=\"size-3.5\" aria-hidden=\"true\" />\n                Add Line Item\n              </Button>\n              <div class=\"text-muted-foreground text-xs\">\n                Subtotal: <span class=\"text-foreground font-semibold tabular-nums\">{{ formatCurrency(subtotal) }}</span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <!-- Section 3: Adjustments & Payment Terms -->\n        <Card>\n          <CardHeader class=\"pb-3\">\n            <div class=\"flex flex-wrap items-center gap-2\">\n              <Percent class=\"text-primary size-4\" aria-hidden=\"true\" />\n              <CardTitle class=\"text-base font-semibold\">Adjustments & Notes</CardTitle>\n            </div>\n            <CardDescription class=\"text-xs\">\n              Itemize tax rates, discount subtractions, and client payment instructions.\n            </CardDescription>\n          </CardHeader>\n          <CardContent class=\"space-y-4\">\n            <div class=\"grid gap-4 sm:grid-cols-2\">\n              <!-- Tax percentage -->\n              <div class=\"space-y-1.5\">\n                <div class=\"flex flex-wrap items-center justify-between\">\n                  <label for=\"tax-rate\" class=\"text-foreground text-xs font-medium\">Tax Rate (%)</label>\n                  <span class=\"text-muted-foreground text-xs tabular-nums\">+{{ formatCurrency(taxAmount) }}</span>\n                </div>\n                <Input\n                  id=\"tax-rate\"\n                  v-model.number=\"taxRate\"\n                  type=\"number\"\n                  min=\"0\"\n                  step=\"0.1\"\n                  placeholder=\"8.5\"\n                  size=\"small\"\n                />\n              </div>\n\n              <!-- Discount -->\n              <div class=\"space-y-1.5\">\n                <div class=\"flex flex-wrap items-center justify-between\">\n                  <label for=\"discount-val\" class=\"text-foreground text-xs font-medium\">Discount</label>\n                  <div class=\"flex items-center gap-1\">\n                    <button\n                      type=\"button\"\n                      :class=\"\n                        cn(\n                          'min-h-6 rounded px-1.5 py-0.5 text-xs font-medium transition-colors',\n                          discountType === 'fixed'\n                            ? 'bg-primary text-primary-foreground'\n                            : 'bg-muted text-muted-foreground hover:text-foreground',\n                        )\n                      \"\n                      @click=\"discountType = 'fixed'\"\n                    >\n                      Fixed ($)\n                    </button>\n                    <button\n                      type=\"button\"\n                      :class=\"\n                        cn(\n                          'min-h-6 rounded px-1.5 py-0.5 text-xs font-medium transition-colors',\n                          discountType === 'percent'\n                            ? 'bg-primary text-primary-foreground'\n                            : 'bg-muted text-muted-foreground hover:text-foreground',\n                        )\n                      \"\n                      @click=\"discountType = 'percent'\"\n                    >\n                      Percent (%)\n                    </button>\n                  </div>\n                </div>\n                <div class=\"flex flex-wrap items-center gap-2\">\n                  <Input\n                    id=\"discount-val\"\n                    v-model.number=\"discountValue\"\n                    type=\"number\"\n                    min=\"0\"\n                    step=\"1\"\n                    placeholder=\"0\"\n                    size=\"small\"\n                    class=\"w-full\"\n                  />\n                  <span class=\"text-success text-success text-xs font-medium whitespace-nowrap tabular-nums\">\n                    -{{ formatCurrency(effectiveDiscount) }}\n                  </span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Notes / Terms -->\n            <div class=\"space-y-1.5\">\n              <label for=\"invoice-notes\" class=\"text-foreground text-xs font-medium\">Notes & Terms for Client</label>\n              <Textarea\n                id=\"invoice-notes\"\n                v-model=\"notes\"\n                :rows=\"3\"\n                placeholder=\"Payment instructions, bank wire info, or a personal thank you note...\"\n                class=\"text-xs\"\n              />\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Right Column: Live Paper Document Preview -->\n      <div class=\"space-y-4 lg:sticky lg:top-6 lg:col-span-5\">\n        <div class=\"flex flex-wrap items-center justify-between px-1\">\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <span class=\"relative flex size-2\">\n              <span class=\"bg-success absolute inline-flex h-full w-full rounded-full opacity-75\"></span>\n              <span class=\"bg-success relative inline-flex size-2 rounded-full\"></span>\n            </span>\n            <span class=\"text-muted-foreground flex items-center gap-1 text-xs font-medium\">\n              <Eye class=\"size-3.5\" aria-hidden=\"true\" />\n              Live Document Preview\n            </span>\n          </div>\n          <span class=\"text-muted-foreground font-mono text-xs\">Printable A4</span>\n        </div>\n\n        <!-- Paper Invoice Card -->\n        <div\n          class=\"bg-card text-card-foreground border-border/80 relative space-y-6 overflow-hidden rounded-xl border p-6 shadow-md transition-colors sm:p-7\"\n        >\n          <!-- Document Header -->\n          <div class=\"flex items-start justify-between gap-4\">\n            <div class=\"space-y-1\">\n              <div class=\"flex flex-wrap items-center gap-2\">\n                <div\n                  class=\"bg-primary/10 text-primary border-primary/20 flex size-8 items-center justify-center rounded border text-xs font-bold\"\n                >\n                  AS\n                </div>\n                <div class=\"text-foreground text-sm leading-tight font-bold sm:text-base\">\n                  {{ issuerName || 'Business Name' }}\n                </div>\n              </div>\n              <p class=\"text-muted-foreground max-w-[200px] text-xs leading-relaxed\">\n                {{ issuerAddress || 'Address not set' }}\n              </p>\n              <p class=\"text-muted-foreground font-mono text-xs\">\n                {{ issuerEmail || 'billing@domain.com' }}\n              </p>\n              <p v-if=\"issuerTaxId\" class=\"text-muted-foreground/80 font-mono text-xs\">Tax: {{ issuerTaxId }}</p>\n            </div>\n\n            <div class=\"shrink-0 space-y-1 text-right\">\n              <span class=\"text-muted-foreground text-xs font-bold tracking-wider uppercase\">Invoice</span>\n              <div class=\"text-foreground font-mono text-xs font-bold sm:text-sm\">\n                {{ invoiceNumber }}\n              </div>\n              <Badge wrap variant=\"outline\" class=\"border-success/30 bg-success/10 text-success text-xs font-medium\">\n                Ready to Send\n              </Badge>\n            </div>\n          </div>\n\n          <Separator class=\"opacity-60\" />\n\n          <!-- Invoice Details: Bill To & Dates -->\n          <div class=\"grid grid-cols-2 gap-4 text-xs\">\n            <div class=\"space-y-1\">\n              <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Billed To</span>\n              <p class=\"text-foreground font-semibold\">{{ clientName || 'Client Name' }}</p>\n              <p v-if=\"clientCompany\" class=\"text-muted-foreground font-medium\">{{ clientCompany }}</p>\n              <p class=\"text-muted-foreground leading-relaxed\">{{ clientAddress || 'No address provided' }}</p>\n              <p class=\"text-muted-foreground font-mono\">{{ clientEmail || 'client@email.com' }}</p>\n            </div>\n\n            <div class=\"space-y-1 text-right\">\n              <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">Invoice Details</span>\n              <div class=\"space-y-0.5\">\n                <div class=\"text-muted-foreground flex justify-between gap-2 sm:justify-end\">\n                  <span>Issued:</span>\n                  <span class=\"text-foreground font-medium tabular-nums\">{{ formatDate(invoiceDate) }}</span>\n                </div>\n                <div class=\"text-muted-foreground flex justify-between gap-2 sm:justify-end\">\n                  <span>Due:</span>\n                  <span class=\"text-foreground font-medium tabular-nums\">{{ formatDate(dueDate) }}</span>\n                </div>\n                <div class=\"text-muted-foreground flex justify-between gap-2 sm:justify-end\">\n                  <span>Terms:</span>\n                  <span class=\"text-foreground font-medium\">{{ PAYMENT_TERMS_MAP[paymentTerms] || paymentTerms }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <Separator class=\"opacity-60\" />\n\n          <!-- Line Items Table -->\n          <div class=\"space-y-2\">\n            <div class=\"overflow-x-auto\">\n              <table class=\"w-full text-xs\">\n                <thead>\n                  <tr class=\"border-border/80 text-muted-foreground border-b font-medium\">\n                    <th class=\"pb-2 text-left\">Item & Description</th>\n                    <th class=\"w-12 pb-2 text-center\">Qty</th>\n                    <th class=\"w-16 pb-2 text-right\">Rate</th>\n                    <th class=\"w-20 pb-2 text-right\">Amount</th>\n                  </tr>\n                </thead>\n                <tbody class=\"divide-border/40 divide-y\">\n                  <tr v-for=\"item in items\" :key=\"item.id\" class=\"text-foreground\">\n                    <td class=\"py-2 pr-2\">\n                      <p class=\"leading-snug font-medium\">{{ item.description || 'Custom Deliverable' }}</p>\n                    </td>\n                    <td class=\"text-muted-foreground px-1 py-2 text-center tabular-nums\">\n                      {{ item.quantity }}\n                    </td>\n                    <td class=\"text-muted-foreground px-1 py-2 text-right tabular-nums\">\n                      {{ formatCurrency(Number(item.unitPrice) || 0) }}\n                    </td>\n                    <td class=\"py-2 pl-2 text-right font-medium tabular-nums\">\n                      {{ formatCurrency((Number(item.quantity) || 0) * (Number(item.unitPrice) || 0)) }}\n                    </td>\n                  </tr>\n                </tbody>\n              </table>\n            </div>\n          </div>\n\n          <Separator class=\"opacity-60\" />\n\n          <!-- Calculations Summary -->\n          <div class=\"space-y-2 text-xs\">\n            <div class=\"text-muted-foreground flex justify-between\">\n              <span>Subtotal</span>\n              <span class=\"text-foreground font-medium tabular-nums\">{{ formatCurrency(subtotal) }}</span>\n            </div>\n\n            <div v-if=\"effectiveDiscount > 0\" class=\"text-success flex justify-between font-medium\">\n              <span>\n                Discount\n                <template v-if=\"discountType === 'percent'\">({{ discountValue }}%)</template>\n              </span>\n              <span class=\"tabular-nums\">-{{ formatCurrency(effectiveDiscount) }}</span>\n            </div>\n\n            <div v-if=\"taxRate > 0\" class=\"text-muted-foreground flex justify-between\">\n              <span>Tax ({{ taxRate }}%)</span>\n              <span class=\"text-foreground font-medium tabular-nums\">+{{ formatCurrency(taxAmount) }}</span>\n            </div>\n\n            <Separator class=\"my-1.5 opacity-80\" />\n\n            <div class=\"flex flex-wrap items-baseline justify-between gap-x-2 gap-y-0.5 pt-1\">\n              <span class=\"text-foreground text-sm font-bold\">Total Due</span>\n              <span class=\"text-foreground text-lg font-bold tabular-nums\">{{ formatCurrency(totalDue) }}</span>\n            </div>\n          </div>\n\n          <!-- Notes / Payment Info Callout -->\n          <div class=\"bg-muted/50 border-border/70 space-y-2 rounded-lg border p-3.5 text-xs\">\n            <div class=\"text-foreground flex items-center gap-1.5 font-medium\">\n              <CreditCard class=\"text-primary size-3.5\" aria-hidden=\"true\" />\n              <span>Payment Instructions</span>\n            </div>\n            <p v-if=\"notes\" class=\"text-muted-foreground leading-relaxed\">\n              {{ notes }}\n            </p>\n            <div\n              class=\"border-border/50 text-muted-foreground flex flex-wrap items-center justify-between gap-2 border-t pt-1.5 font-mono text-xs\"\n            >\n              <span>ACH / Wire: **** 9104</span>\n              <span>Routing: **** 4892</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/InvoiceCreatorWizard.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/select.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/table.json",
    "https://uipkge.dev/r/vue/textarea.json"
  ],
  "description": "Square/Stripe-style interactive invoice builder with itemized tax, discount calculation, dynamic line items, client presets, and a real-time paper document preview.",
  "categories": [
    "finance",
    "app",
    "billing",
    "form"
  ]
}