diff --git a/apps/og-generator/app/page.tsx b/apps/og-generator/app/page.tsx index ecc9c64d0c2..11a086609ed 100644 --- a/apps/og-generator/app/page.tsx +++ b/apps/og-generator/app/page.tsx @@ -531,6 +531,12 @@ export default function Page() { const [showSafeArea, setShowSafeArea] = useState(false) const [inContext, setInContext] = useState('none') const [exportOpen, setExportOpen] = useState(false) + // Canvas zoom (brief follow-up) — scales the rendered image cards + // themselves, not the surrounding UI/controls. + const [zoom, setZoom] = useState(100) + const ZOOM_MIN = 25 + const ZOOM_MAX = 200 + const ZOOM_STEP = 25 const [copied, setCopied] = useState(null) @@ -611,11 +617,14 @@ export default function Page() { the row centers within it. (flex-1 items don't shrink below their content, so this can't clip an overflowing row — it just grows.) */ -
+
100 ? 'items-start' : 'items-center' + }`} + >
{showOg && (
@@ -680,6 +689,46 @@ export default function Page() {
+ {/* Canvas zoom — bottom-left corner, independent of the centered + toolbar. Scales the image cards themselves (via the row's width + style above), not the surrounding controls. */} + {inContext === 'none' && ( +
+
+ + + +
+
+ )} + {/* Floating guides / view-in-context toolbar — bottom-aligned, centered on the same content box as the View toggle above, and likewise anchored outside main's scroll container. */} diff --git a/apps/www/.claude/launch.json b/apps/www/.claude/launch.json index 4b449e1c834..effc2f1aa7c 100644 --- a/apps/www/.claude/launch.json +++ b/apps/www/.claude/launch.json @@ -6,6 +6,13 @@ "runtimeExecutable": "pnpm", "runtimeArgs": ["--filter=supaimage", "dev"], "port": 3030 + }, + { + "name": "www", + "runtimeExecutable": "pnpm", + "runtimeArgs": ["dev", "--filter=www"], + "port": 3000, + "autoPort": false } ] }