fix(meme-generator): split into settings + preview panels with shared Zustand store

The meme generator had everything in one component crammed into the
narrow right sidebar. This splits it into the proper two-panel
architecture (like collage/qr-generate):

- meme-store.ts: shared Zustand store for all meme state and actions
- meme-generator-preview.tsx: ResultsPanel (main area) with gallery,
  layout picker, editor preview with CSS text overlay, and result view
- meme-generator-settings.tsx: Settings sidebar with text inputs, font
  picker, colors, alignment, and generate button
- tool-registry.tsx: adds ResultsPanel to the meme-generator entry

Also fixes text overlay sizing (reduced from 0.6cqi to 0.45cqi with
smaller stroke width) and moves font injection to a standalone function
callable from either component.

apps/web/src/lib/tool-registry.tsx

@@ -313,6 +313,11 @@ const MemeGeneratorSettings = lazy(() =>
     default: m.MemeGeneratorSettings,
   })),
 );
+const MemeGeneratorPreview = lazy(() =>
+  import("@/components/tools/meme-generator-preview").then((m) => ({
+    default: m.MemeGeneratorPreview,
+  })),
+);
 
 // ── Color tool wrapper ─────────────────────────────────────────────
 // Color tools share a single component but differ by toolId.
@@ -375,7 +380,14 @@ export const toolRegistry = new Map<string, ToolRegistryEntry>([
   ["watermark-image", { displayMode: "before-after", Settings: WatermarkImageSettings }],
   ["text-overlay", { displayMode: "before-after", Settings: TextOverlaySettings }],
   ["compose", { displayMode: "before-after", Settings: ComposeSettings }],
-  ["meme-generator", { displayMode: "no-dropzone", Settings: MemeGeneratorSettings }],
+  [
+    "meme-generator",
+    {
+      displayMode: "no-dropzone",
+      Settings: MemeGeneratorSettings,
+      ResultsPanel: MemeGeneratorPreview,
+    },
+  ],
 
   // Utilities
   ["info", { displayMode: "before-after", Settings: InfoSettings }],