feat(binary-codec): Binary V3 codec + Invoice schema refactoring

package.json

@@ -42,6 +42,7 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^22.0.0",
+    "@types/pako": "^2.0.4",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.0.0",
     "@types/uuid": "^11.0.0",
@@ -78,6 +79,7 @@
     "lz-string": "^1.0.0",
     "next": "^15.5.8",
     "next-sitemap": "^4.2.3",
+    "pako": "^2.1.0",
     "pixi.js": "^8.14.3",
     "qrcode.react": "^4.2.0",
     "react": "^19.1.4",

src/app/create/page.tsx

@@ -7,20 +7,21 @@ import { generateAndTrackInvoice } from '@/features/generate-link'
 
 export default function CreateInvoicePage() {
   const activeDraft = useCreatorStore((s) => s.activeDraft)
+  const lineItems = useCreatorStore((s) => s.lineItems)
   const createNewDraft = useCreatorStore((s) => s.createNewDraft)
   const clearDraft = useCreatorStore((s) => s.clearDraft)
 
   const { autoSave, isPending } = useAutoSave()
 
   const [showNewDialog, setShowNewDialog] = useState(false)
   const [localInvoiceId, setLocalInvoiceId] = useState('')
-  const [localRecipientName, setLocalRecipientName] = useState('')
+  const [localClientName, setLocalClientName] = useState('')
 
   // Restore draft on page load
   useEffect(() => {
     if (activeDraft) {
-      setLocalInvoiceId(activeDraft.invoiceId)
-      setLocalRecipientName(activeDraft.recipient.name)
+      setLocalInvoiceId(activeDraft.data.invoiceId ?? '')
+      setLocalClientName(activeDraft.data.client?.name ?? '')
     }
   }, [activeDraft])
 
@@ -36,15 +37,15 @@ export default function CreateInvoicePage() {
     // Update local state immediately (optimistic UI)
     if (field === 'invoiceId') {
       setLocalInvoiceId(value)
-    } else if (field === 'recipientName') {
-      setLocalRecipientName(value)
+    } else if (field === 'clientName') {
+      setLocalClientName(value)
     }
 
     // Debounced save to store
     if (field === 'invoiceId') {
       autoSave({ invoiceId: value })
-    } else if (field === 'recipientName') {
-      autoSave({ recipient: { name: value } })
+    } else if (field === 'clientName') {
+      autoSave({ client: { name: value } })
     }
   }
 
@@ -55,7 +56,7 @@ export default function CreateInvoicePage() {
     }
 
     try {
-      const url = await generateAndTrackInvoice(activeDraft)
+      const url = await generateAndTrackInvoice(activeDraft, lineItems)
       alert(`Invoice generated! URL: ${url}\n\nCheck the History page to see the entry.`)
       clearDraft()
     } catch (error) {
@@ -74,7 +75,7 @@ export default function CreateInvoicePage() {
           <div className="flex items-center space-x-2">
             {activeDraft && (
               <span className="text-sm text-gray-500 dark:text-gray-400">
-                Draft ID: {activeDraft.draftId.slice(0, 8)}...
+                Draft ID: {activeDraft.meta.draftId.slice(0, 8)}...
               </span>
             )}
             {isPending() && (
@@ -107,24 +108,24 @@ export default function CreateInvoicePage() {
 
           <div>
             <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
-              Recipient Name
+              Client Name
             </label>
             <input
               type="text"
-              value={localRecipientName}
-              onChange={(e) => handleFieldChange('recipientName', e.target.value)}
+              value={localClientName}
+              onChange={(e) => handleFieldChange('clientName', e.target.value)}
               placeholder="Acme Corp"
               className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-900 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
             />
           </div>
 
           <div className="pt-4">
             <p className="text-sm text-gray-500 dark:text-gray-400">
-              💡 Your draft is automatically saved every 500ms
+              Your draft is automatically saved every 500ms
             </p>
             {activeDraft && (
               <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
-                Last modified: {new Date(activeDraft.lastModified).toLocaleString()}
+                Last modified: {new Date(activeDraft.meta.lastModified).toLocaleString()}
               </p>
             )}
           </div>
@@ -156,7 +157,7 @@ export default function CreateInvoicePage() {
           createNewDraft()
           setShowNewDialog(false)
           setLocalInvoiceId('')
-          setLocalRecipientName('')
+          setLocalClientName('')
         }}
       />
     </div>

src/entities/creator/model/types.ts

@@ -6,9 +6,11 @@
  */
 
 import type {
-  InvoiceDraft,
+  Invoice,
+  DraftState,
   InvoiceTemplate,
   CreationHistoryEntry,
+  LineItem,
 } from '@/entities/invoice'
 
 /**
@@ -37,8 +39,8 @@ export interface UserPreferences {
   /** Default currency symbol (e.g., "USDC") */
   defaultCurrency?: string
 
-  /** Default chain ID (e.g., 42161 for Arbitrum) */
-  defaultChainId?: number
+  /** Default network ID / chain ID (e.g., 42161 for Arbitrum) */
+  defaultNetworkId?: number
 
   // ========== Invoice Defaults ==========
 
@@ -77,7 +79,10 @@ export interface CreatorStoreV1 {
   version: 1
 
   /** Active draft (single in-progress invoice) */
-  activeDraft: InvoiceDraft | null
+  activeDraft: DraftState | null
+
+  /** UI-specific: Line items with IDs for React keys */
+  lineItems: LineItem[]
 
   /** Saved templates for reuse */
   templates: InvoiceTemplate[]
@@ -92,5 +97,5 @@ export interface CreatorStoreV1 {
   idCounter: InvoiceIDCounter
 }
 
-// Re-export invoice types for convenience
-export type { InvoiceDraft, InvoiceTemplate, CreationHistoryEntry }
+// Re-export types for convenience
+export type { Invoice, DraftState, InvoiceTemplate, CreationHistoryEntry, LineItem }