fix(quoteforge[studio]): make custom size usable and match deck preview to active slide

Author: lordvins226

src/__tests__/preview-route.test.ts

@@ -31,6 +31,16 @@ describe("previewRoute", () => {
     expect(res.status).toBe(400);
   });
 
+  test("returns 400 for a custom-size card with width 0", async () => {
+    const req = makeRequest({
+      card: makeCard({ width: 0, height: 600 }),
+      theme: "brutal-white",
+      size: "custom",
+    });
+    const res = await previewRoute(req, new URL("http://localhost/api/preview"));
+    expect(res.status).toBe(400);
+  });
+
   test("resolves custom width/height instead of the 0x0 sentinel", async () => {
     const req = makeRequest({
       card: makeCard({ width: 800, height: 600 }),

src/renderer/dimensions.ts

@@ -17,6 +17,12 @@ export function resolveDimensions(input: SizedContent): Dimensions {
     if (input.width === undefined || input.height === undefined) {
       throw new Error('size "custom" requires both "width" and "height"');
     }
+    if (!Number.isInteger(input.width) || input.width < 1 || input.width > 8000) {
+      throw new Error('size "custom" requires "width" to be an integer between 1 and 8000');
+    }
+    if (!Number.isInteger(input.height) || input.height < 1 || input.height > 8000) {
+      throw new Error('size "custom" requires "height" to be an integer between 1 and 8000');
+    }
     return { w: input.width, h: input.height };
   }
 

studio/src/App.tsx

@@ -167,6 +167,9 @@ function StudioApp() {
         fitContent={fitContent}
         onThemeChange={mode === "card" ? cardStore.setTheme : deckStore.setDeckTheme}
         onSizeChange={mode === "card" ? cardStore.setSize : deckStore.setDeckSize}
+        width={mode === "card" ? cardStore.card.width : deckStore.deck.defaults.width}
+        height={mode === "card" ? cardStore.card.height : deckStore.deck.defaults.height}
+        onDimensionsChange={mode === "card" ? cardStore.setDimensions : deckStore.setDeckDimensions}
         onAlignChange={mode === "card" ? cardStore.setAlign : deckStore.setDeckAlign}
         onFitContentChange={setFitContent}
         onExportPng={handleExportPng}
@@ -212,7 +215,7 @@ function StudioApp() {
           <PreviewPane
             card={previewCard}
             theme={currentTheme}
-            size={currentSize}
+            size={previewCard.size}
             slideIndex={mode === "deck" ? deckStore.activeSlideIndex : 0}
             slideTotal={mode === "deck" ? deckStore.deck.slides.length : 1}
             showCounter={mode === "deck" ? deckStore.showCounter : false}

studio/src/components/Editor/Toolbar.tsx

@@ -9,10 +9,13 @@ interface ToolbarProps {
   mode: ContentMode;
   theme: string;
   size: SizeName;
+  width?: number;
+  height?: number;
   align: Align | undefined;
   fitContent: boolean;
   onThemeChange: (name: string) => void;
   onSizeChange: (size: SizeName) => void;
+  onDimensionsChange: (width: number, height: number) => void;
   onAlignChange: (align: Align) => void;
   onFitContentChange: (fitContent: boolean) => void;
   onExportPng: () => void;
@@ -25,8 +28,8 @@ interface ToolbarProps {
 }
 
 export function Toolbar({
-  mode, theme, size, align, fitContent,
-  onThemeChange, onSizeChange, onAlignChange, onFitContentChange,
+  mode, theme, size, width, height, align, fitContent,
+  onThemeChange, onSizeChange, onDimensionsChange, onAlignChange, onFitContentChange,
   onExportPng, onExportDeck,
   onUndo, onRedo, canUndo, canRedo,
   isDirty,
@@ -40,6 +43,31 @@ export function Toolbar({
 
       <ThemePicker current={theme} onChange={onThemeChange} />
       <SizePicker current={size} onChange={onSizeChange} mode={mode} />
+      {size === "custom" && (
+        <div className="flex items-center gap-1">
+          <input
+            type="number"
+            className="w-16 px-1.5 py-1 text-xs bg-neutral-800 border border-neutral-700 rounded text-neutral-200"
+            value={width ?? ""}
+            onChange={(e) => {
+              const w = Number(e.target.value);
+              if (e.target.value !== "" && Number.isFinite(w) && w > 0) onDimensionsChange(w, height ?? 0);
+            }}
+            title="Width"
+          />
+          <span className="text-neutral-600 text-xs">×</span>
+          <input
+            type="number"
+            className="w-16 px-1.5 py-1 text-xs bg-neutral-800 border border-neutral-700 rounded text-neutral-200"
+            value={height ?? ""}
+            onChange={(e) => {
+              const h = Number(e.target.value);
+              if (e.target.value !== "" && Number.isFinite(h) && h > 0) onDimensionsChange(width ?? 0, h);
+            }}
+            title="Height"
+          />
+        </div>
+      )}
       <AlignPicker current={align} onChange={onAlignChange} />
 
       <div className="w-px h-5 bg-neutral-700" />

studio/src/components/Preview/PreviewPane.tsx

@@ -20,8 +20,8 @@ export function PreviewPane({ card, theme, size, slideIndex = 0, slideTotal = 1,
   const [scale, setScale] = useState(0.5);
 
   const sizeInfo = SIZES[size];
-  const cardW = sizeInfo?.w || 1200;
-  const cardH = sizeInfo?.h || 675;
+  const cardW = size === "custom" ? card.width || 1200 : sizeInfo?.w || 1200;
+  const cardH = size === "custom" ? card.height || 675 : sizeInfo?.h || 675;
 
   useEffect(() => {
     function updateScale() {

studio/src/store/cardStore.ts

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import type { CardContent, Block, BlockType, SizeName, Align } from "../types";
+import { SIZES } from "../types";
 
 interface CardStore {
   card: CardContent;
@@ -19,6 +20,7 @@ interface CardStore {
   selectBlock: (id: string | null) => void;
   setTheme: (name: string) => void;
   setSize: (size: SizeName) => void;
+  setDimensions: (width: number, height: number) => void;
   setAlign: (align: Align) => void;
   setZoom: (zoom: number) => void;
   undo: () => void;
@@ -125,8 +127,29 @@ export const useCardStore = create<CardStore>((set) => ({
     })),
 
   setSize: (size) =>
+    set((s) => {
+      let card: CardContent = { ...s.card, size };
+      if (size === "custom") {
+        if (card.width === undefined || card.height === undefined) {
+          const dims = SIZES[s.card.size];
+          card.width = dims.w || 1200;
+          card.height = dims.h || 675;
+        }
+      } else {
+        delete card.width;
+        delete card.height;
+      }
+      return {
+        card,
+        isDirty: true,
+        past: [...s.past.slice(-49), s.card],
+        future: [],
+      };
+    }),
+
+  setDimensions: (width, height) =>
     set((s) => ({
-      card: { ...s.card, size },
+      card: { ...s.card, width, height },
       isDirty: true,
       past: [...s.past.slice(-49), s.card],
       future: [],

studio/src/store/deckStore.ts

@@ -1,5 +1,6 @@
 import { create } from "zustand";
 import type { DeckContent, Block, BlockType, SizeName, Slide, Align } from "../types";
+import { SIZES } from "../types";
 
 interface DeckStore {
   deck: DeckContent;
@@ -27,6 +28,7 @@ interface DeckStore {
   selectBlock: (id: string | null) => void;
   setDeckTheme: (name: string) => void;
   setDeckSize: (size: SizeName) => void;
+  setDeckDimensions: (width: number, height: number) => void;
   setDeckAlign: (align: Align) => void;
   toggleCounter: () => void;
   setZoom: (zoom: number) => void;
@@ -241,8 +243,29 @@ export const useDeckStore = create<DeckStore>((set) => ({
     })),
 
   setDeckSize: (size) =>
+    set((s) => {
+      const defaults = { ...s.deck.defaults, size };
+      if (size === "custom") {
+        if (defaults.width === undefined || defaults.height === undefined) {
+          const dims = SIZES[s.deck.defaults.size];
+          defaults.width = dims.w || 1200;
+          defaults.height = dims.h || 675;
+        }
+      } else {
+        delete defaults.width;
+        delete defaults.height;
+      }
+      return {
+        deck: { ...s.deck, defaults },
+        isDirty: true,
+        past: snapshot(s.past, s.deck),
+        future: [],
+      };
+    }),
+
+  setDeckDimensions: (width, height) =>
     set((s) => ({
-      deck: { ...s.deck, defaults: { ...s.deck.defaults, size } },
+      deck: { ...s.deck, defaults: { ...s.deck.defaults, width, height } },
       isDirty: true,
       past: snapshot(s.past, s.deck),
       future: [],