Add Rust logo pipeline: trim, metrics, knockout and Branding settings

Logos (PNG, JPEG, WebP) are decoded, trimmed to their ink box, downscaled
to 1200 px and re-encoded as a content-addressed print PNG plus a white
knockout variant when the logo has alpha; aspect, ink density, mean colour
and kind (wordmark, mark, tall) are stored with the settings and frozen in
the issue snapshot. Legacy logos are derived at startup. The Test Vendor logo
PDF shrinks from 334 KB to 92 KB. Settings gains a Branding section with
white and dark previews and a business-name toggle (migration M5).

src/views/NewInvoice.tsx

@@ -65,6 +65,7 @@ import { loadExportMode } from "../lib/exportMode";
 import type { ExportMode } from "../lib/filename";
 import { parsePrefs, type RenderPrefsV1 } from "../pdf/model/prefs";
 import { ImagePicker } from "../components/ImagePicker";
+import { loadLogoImages, type LogoImages } from "../lib/logo";
 
 // pdf.js is only needed once a preview exists, so it loads on demand.
 const PdfPreview = lazy(() => import("../components/PdfPreview"));
@@ -135,7 +136,7 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
   const [signaturePath, setSignaturePath] = useState<string | null>(settings.signaturePath);
   const [notes, setNotes] = useState("");
 
-  const [logoUri, setLogoUri] = useState<string | null>(null);
+  const [logoImages, setLogoImages] = useState<LogoImages | null>(null);
   const [signatureUri, setSignatureUri] = useState<string | null>(null);
 
   const [saving, setSaving] = useState(false);
@@ -196,14 +197,16 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
   useEffect(() => {
     let active = true;
     if (!settings.logoPath) {
-      setLogoUri(null);
+      setLogoImages(null);
       return;
     }
-    api.readAssetDataUri(settings.logoPath).then((uri) => active && setLogoUri(uri)).catch(() => {});
+    loadLogoImages(settings, api.readAssetDataUri)
+      .then((images) => active && setLogoImages(images))
+      .catch(() => {});
     return () => {
       active = false;
     };
-  }, [settings.logoPath]);
+  }, [settings.logoPath, settings.logoKnockoutPath]);
 
   useEffect(() => {
     let active = true;
@@ -365,8 +368,8 @@ export default function NewInvoice({ settings, onSettingsChange, active, onActiv
         settings,
         bank,
       );
-    return modelFromAssets(invoice, settings, bank, logoUri, signatureUri);
-  }, [active, issued, invoiceDate, dueDate, clientId, clientName, clientAddress, clientGstin, poNumber, placeOfSupply, discount, taxRate, reverseCharge, signaturePath, notes, items, number, settings, bank, logoUri, signatureUri]);
+    return modelFromAssets(invoice, settings, bank, logoImages, signatureUri);
+  }, [active, issued, invoiceDate, dueDate, clientId, clientName, clientAddress, clientGstin, poNumber, placeOfSupply, discount, taxRate, reverseCharge, signaturePath, notes, items, number, settings, bank, logoImages, signatureUri]);
   const updateItem = (index: number, patch: Partial<InvoiceItem>) =>
     setItems((prev) => prev.map((item, i) => (i === index ? { ...item, ...patch } : item)));