@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-RVOPZKRI.js

@@ -0,0 +1,471 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  needsSelection,
+  pageGo,
+  selectionIsPicture
+} from "./chunk-4MUCVABL.js";
+import {
+  external_exports
+} from "./chunk-EZVFNLBJ.js";
+import {
+  defineCommand
+} from "./chunk-XPLI2SES.js";
+import {
+  MODE_LIST
+} from "./chunk-LU6OMVWV.js";
+import {
+  registerCommand
+} from "./chunk-L3BAPZSJ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// lib/commands/app.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var none = external_exports.object({});
+var emit = (name, detail) => {
+  if (typeof window !== "undefined") window.dispatchEvent(new CustomEvent(name, { detail }));
+};
+var store = () => import("./editor-store-RYOXNOTI.js").then((m) => m.useEditorStore.getState());
+var MODE_IDS = MODE_LIST.map((m) => m.id);
+var MODE_ALIASES = { JAM: "POPCORN" };
+var modeSet = defineCommand({
+  id: "mode.set",
+  title: "Switch mode",
+  domain: "mode",
+  effect: "view",
+  permission: null,
+  params: external_exports.object({ mode: external_exports.enum([...MODE_IDS, "JAM"]) }),
+  expose: { ui: { label: "Switch mode", keywords: ["mode", "view"], variants: MODE_LIST.map((m) => ({ id: m.id.toLowerCase(), label: `${m.label} mode`, shortcut: m.shortcut, params: { mode: m.id } })) } },
+  run: async ({ mode }) => {
+    const id = MODE_ALIASES[mode] ?? mode;
+    (await store()).setMode(id);
+    return { summary: `${MODE_LIST.find((m) => m.id === id)?.label} mode` };
+  }
+});
+var modeEdit = defineCommand({
+  id: "mode.edit",
+  title: "Edit in place",
+  domain: "mode",
+  effect: "view",
+  permission: "write",
+  params: external_exports.object({ what: external_exports.enum(["pixels", "vector", "crop", "image"]) }),
+  expose: { ui: { label: "Edit in place", keywords: ["edit", "pixel", "vector", "points", "raster", "crop", "trim", "frame", "erase", "mask", "cut out"], variants: [
+    { id: "pixels", label: "Edit pixels", enabled: needsSelection(1), params: { what: "pixels" } },
+    { id: "vector", label: "Edit vector points", shortcut: "Enter", enabled: needsSelection(1), params: { what: "vector" } },
+    // Gated on the layer actually having a picture in it, not merely on something being selected: these
+    // two are offered from the canvas context menu now, and a row that lights up for a rectangle is a row
+    // that only ever fails.
+    { id: "crop", label: "Crop image", shortcut: "Shift+C", enabled: selectionIsPicture, params: { what: "crop" } },
+    { id: "image", label: "Erase parts of an image", enabled: selectionIsPicture, params: { what: "image" } }
+  ] } },
+  run: async ({ what }, ctx) => {
+    const s = await store();
+    const id = ctx.selection()[0];
+    if (what === "pixels") {
+      s.enterPixelEdit(id);
+      return { summary: "Editing pixels" };
+    }
+    if (what === "crop") {
+      s.enterCrop(id);
+      return { summary: "Cropping" };
+    }
+    if (what === "image") {
+      await s.enterImageEdit(id);
+      return { summary: "Editing image" };
+    }
+    s.convertToVectorAndEdit(id);
+    return { summary: "Editing points" };
+  }
+});
+var PANELS = [
+  // Pages and layers are one panel now, but both names still find it: they are what people type.
+  { id: "composition", side: "left", label: "Composition (pages & layers)" },
+  { id: "layers", side: "left", label: "Layers panel" },
+  { id: "pages", side: "left", label: "Pages panel" },
+  { id: "assets", side: "left", label: "Assets panel" },
+  { id: "shapes", side: "left", label: "Shapes panel" },
+  { id: "agent", side: "left", label: "AI agent panel", shortcut: "Mod+Shift+J" },
+  { id: "design", side: "right", label: "Design panel" },
+  { id: "prototype", side: "right", label: "Prototype panel" },
+  { id: "inspect", side: "right", label: "Inspect / Dev panel" },
+  { id: "comments", side: "right", label: "Comments" }
+];
+var panelOpen = defineCommand({
+  id: "panel.open",
+  title: "Open panel",
+  domain: "panel",
+  effect: "none",
+  permission: null,
+  params: external_exports.object({ side: external_exports.enum(["left", "right"]), tab: external_exports.string() }),
+  expose: { ui: { label: "Open panel", keywords: ["panel", "sidebar", "show", "open", "tab"], variants: PANELS.map((p) => ({ id: p.id, label: p.label, shortcut: p.shortcut, params: { side: p.side, tab: p.id } })) } },
+  run: ({ side, tab }) => {
+    emit("popcraft-open-panel", { side, tab });
+    return { summary: `Opened ${PANELS.find((p) => p.id === tab)?.label ?? tab}` };
+  }
+});
+var panelToggle = defineCommand({
+  id: "panel.toggle",
+  title: "Toggle chrome",
+  domain: "panel",
+  effect: "none",
+  permission: null,
+  params: external_exports.object({ what: external_exports.enum(["ui", "shortcuts", "sidebars", "history", "settings"]) }),
+  expose: { ui: { label: "Toggle", keywords: ["toggle", "hide", "show", "ui", "shortcuts", "history", "settings", "preferences", "accessibility", "motion", "contrast", "language"], variants: [
+    { id: "history", label: "Version history", params: { what: "history" } },
+    { id: "shortcuts", label: "Keyboard shortcuts", shortcut: "Mod+Shift+?", params: { what: "shortcuts" } },
+    // Settings (theme, motion, contrast, single-key shortcuts, language): components/editor/settings-dialog.tsx.
+    { id: "settings", label: "Settings", shortcut: "Mod+,", params: { what: "settings" } },
+    { id: "ui", label: "Show / hide UI", shortcut: "Ctrl+\\", params: { what: "ui" } },
+    { id: "sidebars", label: "Toggle side panels", shortcut: "Mod+\\", params: { what: "sidebars" } }
+  ] } },
+  run: async ({ what }) => {
+    if (what === "history") (await store()).toggleVersionHistoryMode();
+    else emit(`popcraft-toggle-${what}`);
+    return { summary: `Toggled ${what}` };
+  }
+});
+var dialogOpen = defineCommand({
+  id: "dialog.open",
+  title: "Open dialog",
+  domain: "panel",
+  effect: "none",
+  permission: null,
+  params: external_exports.object({ which: external_exports.enum(["share", "plugins", "theme-editor", "plan", "tokens", "variables", "print", "page-setup", "bulk-create", "publish", "integrations"]) }),
+  expose: { ui: { label: "Open", keywords: ["dialog", "settings", "share", "plugins", "theme", "plan", "team", "tokens", "variables", "publish", "website", "site", "online", "deploy", "host", "integrations", "connect", "github", "vercel", "neon", "supabase", "database", "bulk", "mail merge", "csv", "spreadsheet"], variants: [
+    { id: "share", label: "Share\u2026", params: { which: "share" } },
+    { id: "plugins", label: "Manage plugins\u2026", params: { which: "plugins" } },
+    { id: "theme-editor", label: "Edit theme\u2026", params: { which: "theme-editor" } },
+    { id: "variables", label: "Local variables\u2026", params: { which: "variables" } },
+    { id: "plan", label: "Subscription\u2026", params: { which: "plan" } },
+    { id: "tokens", label: "Personal access tokens\u2026", params: { which: "tokens" } },
+    { id: "print", label: "Print\u2026", shortcut: "Mod+P", params: { which: "print" } },
+    { id: "page-setup", label: "Page setup\u2026", params: { which: "page-setup" } },
+    // Mail merge: one page per CSV row (components/print/bulk-create-dialog.tsx, lib/print/merge.ts).
+    { id: "bulk-create", label: "Bulk create\u2026", params: { which: "bulk-create" } },
+    { id: "publish", label: "Publish website\u2026", params: { which: "publish" } },
+    { id: "integrations", label: "Integrations\u2026", params: { which: "integrations" } }
+  ] } },
+  run: async ({ which }) => {
+    switch (which) {
+      case "share":
+        (await import("./share-BJLGH63V.js")).openShareDialog();
+        break;
+      case "plugins":
+        (await import("./plugin-store-PN5M7ILJ.js")).usePluginStore.getState().setManagerOpen(true);
+        break;
+      case "theme-editor":
+        (await import("./theme-store-T6K3BK4F.js")).useThemeStore.getState().setEditorOpen(true);
+        break;
+      case "plan":
+        (await import("./plan-limit-M7ES7WUH.js")).openPlanDialog();
+        break;
+      case "tokens":
+        emit("popcraft-open-tokens");
+        break;
+      case "variables":
+        emit("popcraft-open-variables");
+        break;
+      case "print":
+        emit("popcraft-open-print");
+        break;
+      case "page-setup":
+        emit("popcraft-open-page-setup");
+        break;
+      case "bulk-create":
+        emit("popcraft-open-bulk-create");
+        break;
+      case "publish":
+        emit("popcraft-open-publish");
+        break;
+      case "integrations":
+        emit("popcraft-open-integrations");
+        break;
+    }
+    return { summary: `Opened ${which}` };
+  }
+});
+var aiOpen = defineCommand({
+  id: "ai.open",
+  title: "AI",
+  domain: "ai",
+  effect: "none",
+  permission: null,
+  params: external_exports.object({ dialog: external_exports.enum(["image", "video", "search", "models"]).optional(), skillId: external_exports.string().optional() }),
+  expose: { ui: { label: "AI", keywords: ["ai", "agent", "generate", "draft", "image", "video", "seedance", "model", "gpt", "claude"], variants: [
+    { id: "design", label: "AI: Generate a design from a brief", params: { skillId: "design-from-brief" } },
+    { id: "flow", label: "AI: First draft of a user flow", params: { skillId: "user-flow" } },
+    { id: "fill", label: "AI: Fill with content", enabled: needsSelection(1), params: { skillId: "fill-content" } },
+    { id: "layout", label: "AI: Suggest auto layout", enabled: needsSelection(1), params: { skillId: "auto-layout" } },
+    { id: "image", label: "AI: Generate image\u2026", params: { dialog: "image" } },
+    { id: "video", label: "AI: Generate video\u2026", params: { dialog: "video" } },
+    { id: "search", label: "AI: Search\u2026", params: { dialog: "search" } },
+    { id: "models", label: "AI: Model settings\u2026", params: { dialog: "models" } }
+  ] } },
+  run: async ({ dialog, skillId }) => {
+    if (dialog) (await import("./client-store-AFPAZKZE.js")).openAiDialog(dialog);
+    else (await import("./store-XSI3RJIX.js")).openAgentPanel({ skillId: skillId ?? null });
+    return { summary: dialog ? `Opened AI ${dialog}` : "Opened the agent" };
+  }
+});
+var docAction = defineCommand({
+  id: "document.action",
+  title: "File",
+  domain: "document",
+  effect: "none",
+  permission: null,
+  params: external_exports.object({ what: external_exports.enum(["home", "import", "save-local", "thumbnail"]) }),
+  expose: { ui: { label: "File", keywords: ["file", "open", "import", "save", "download", "new", "home", "thumbnail", "export"], variants: [
+    { id: "home", label: "All files (Home)", params: { what: "home" } },
+    { id: "import", label: "Import .popcraft\u2026", shortcut: "Mod+I", params: { what: "import" } },
+    { id: "save-local", label: "Save as .popcraft", params: { what: "save-local" } },
+    { id: "thumbnail", label: "Set as file thumbnail", enabled: needsSelection(1), params: { what: "thumbnail" } }
+  ] } },
+  run: async ({ what }, ctx) => {
+    if (what === "thumbnail") {
+      (await store()).setThumbnailNode(ctx.selection()[0]);
+      return { summary: "Thumbnail set" };
+    }
+    emit(`popcraft-file-${what}`);
+    return { summary: what === "home" ? "Opening Home" : "Done" };
+  }
+});
+var TOOLS = [
+  { id: "SELECT", label: "Move tool", shortcut: "V", keywords: ["select", "pointer", "arrow"] },
+  { id: "SCALE", label: "Scale tool", shortcut: "K" },
+  { id: "HAND", label: "Hand tool", shortcut: "H", keywords: ["pan"] },
+  { id: "FRAME", label: "Frame tool", shortcut: "F", keywords: ["artboard"] },
+  { id: "SECTION", label: "Section tool", shortcut: "Shift+S" },
+  { id: "SLICE", label: "Slice tool", shortcut: "S" },
+  { id: "RECTANGLE", label: "Rectangle tool", shortcut: "R" },
+  { id: "ELLIPSE", label: "Ellipse tool", shortcut: "O", keywords: ["circle"] },
+  { id: "POLYGON", label: "Polygon tool" },
+  { id: "STAR", label: "Star tool" },
+  { id: "LINE", label: "Line tool", shortcut: "L" },
+  { id: "ARROW", label: "Arrow tool", shortcut: "Shift+L" },
+  { id: "PEN", label: "Pen tool", shortcut: "P", keywords: ["bezier", "path"] },
+  { id: "PENCIL", label: "Pencil tool", shortcut: "Shift+P" },
+  { id: "BRUSH", label: "Brush tool", shortcut: "B", keywords: ["paint"] },
+  { id: "SMUDGE", label: "Smudge tool" },
+  { id: "ERASER", label: "Eraser tool", shortcut: "E" },
+  { id: "LASSO", label: "Lasso tool", shortcut: "Q" },
+  { id: "BUCKET", label: "Paint bucket tool", shortcut: "Shift+B", keywords: ["fill"] },
+  { id: "TEXT", label: "Text tool", shortcut: "T" },
+  { id: "STICKY", label: "Sticky note tool" },
+  { id: "IMAGE", label: "Image tool" },
+  { id: "COMMENT", label: "Comment tool", shortcut: "C" },
+  { id: "WASHI", label: "Washi tape tool (whiteboard)", shortcut: "W", keywords: ["tape", "jam"] }
+];
+var toolSet = defineCommand({
+  id: "tool.set",
+  title: "Tool",
+  domain: "tool",
+  effect: "none",
+  permission: null,
+  params: external_exports.object({ tool: external_exports.string() }),
+  expose: { ui: { label: "Tool", keywords: ["tool", "draw"], variants: TOOLS.map((t) => ({ id: t.id.toLowerCase(), label: t.label, shortcut: t.shortcut, params: { tool: t.id } })) } },
+  run: async ({ tool }) => {
+    (await store()).setActiveTool(tool);
+    return { summary: TOOLS.find((t) => t.id === tool)?.label ?? tool };
+  }
+});
+var toolPlace = defineCommand({
+  id: "tool.place",
+  title: "Place",
+  domain: "tool",
+  effect: "document",
+  permission: "write",
+  params: external_exports.object({ what: external_exports.enum(["media", "eyedropper"]) }),
+  expose: { ui: { label: "Place", keywords: ["place", "image", "video", "upload", "eyedropper", "pick color"], variants: [
+    { id: "media", label: "Place image or video\u2026", shortcut: "Mod+Shift+K", params: { what: "media" } },
+    { id: "eyedropper", label: "Eyedropper", shortcut: "I", enabled: needsSelection(1), params: { what: "eyedropper" } }
+  ] } },
+  run: async ({ what }) => {
+    if (what === "media") {
+      const s = await store();
+      const { placeMediaFromPicker } = await import("./media-tool-KKX2ZLBV.js");
+      await placeMediaFromPicker({ kind: "point", x: s.camera.x, y: s.camera.y });
+      return { summary: "Placing media" };
+    }
+    const { beginEyedrop } = await import("./eyedropper-XOS3CSL3.js");
+    void beginEyedrop();
+    return { summary: "Pick a color" };
+  }
+});
+var nodeRasterize = defineCommand({
+  id: "node.rasterize",
+  title: "Rasterize",
+  domain: "node",
+  effect: "document",
+  permission: "write",
+  params: none,
+  expose: { ui: {
+    label: "Rasterize into a paint layer",
+    enabled: needsSelection(1),
+    keywords: ["rasterize", "raster", "flatten", "pixels", "paint layer", "erase", "bitmap"]
+  } },
+  run: async () => {
+    const { flattenSelectionToPaintLayer } = await import("./raster-actions-TLKJZ4IK.js");
+    await flattenSelectionToPaintLayer();
+    return { summary: "Rasterized" };
+  }
+});
+var nodeOps = defineCommand({
+  id: "node.op",
+  title: "Layer operation",
+  domain: "node",
+  effect: "document",
+  permission: "write",
+  params: external_exports.object({ op: external_exports.enum(["selectAll", "selectSameType", "tidyUp", "createComponent", "createMultipleComponents", "combineAsVariants", "detachInstance", "joinPaths", "copyProperties", "pasteProperties"]) }),
+  expose: { ui: { label: "Layer operation", keywords: ["select", "component", "variants", "instance", "detach", "tidy", "join", "properties"], variants: [
+    { id: "selectAll", label: "Select all", shortcut: "Mod+A", params: { op: "selectAll" } },
+    { id: "selectSameType", label: "Select all with the same type", enabled: needsSelection(1), params: { op: "selectSameType" } },
+    { id: "tidyUp", label: "Tidy up", shortcut: "Mod+Alt+T", enabled: needsSelection(2), params: { op: "tidyUp" } },
+    { id: "createComponent", label: "Create component", shortcut: "Mod+Alt+K", enabled: needsSelection(1), params: { op: "createComponent" } },
+    { id: "createMultipleComponents", label: "Create multiple components", enabled: needsSelection(2), params: { op: "createMultipleComponents" } },
+    { id: "combineAsVariants", label: "Combine as variants", enabled: needsSelection(2), params: { op: "combineAsVariants" } },
+    { id: "detachInstance", label: "Detach instance", enabled: needsSelection(1), params: { op: "detachInstance" } },
+    { id: "joinPaths", label: "Join paths", enabled: needsSelection(2), params: { op: "joinPaths" } },
+    { id: "copyProperties", label: "Copy properties", shortcut: "Mod+Alt+C", enabled: needsSelection(1), params: { op: "copyProperties" } },
+    { id: "pasteProperties", label: "Paste properties", shortcut: "Mod+Alt+V", enabled: needsSelection(1), params: { op: "pasteProperties" } }
+  ] } },
+  run: async ({ op }) => {
+    const s = await store();
+    const action = { selectAll: s.selectAll, selectSameType: s.selectSameType, tidyUp: s.tidyUpSelection, createComponent: s.createComponentFromSelection, createMultipleComponents: s.createMultipleComponents, combineAsVariants: s.combineAsVariants, detachInstance: s.detachInstance, joinPaths: s.joinPaths, copyProperties: s.copyProperties, pasteProperties: s.pasteProperties }[op];
+    action();
+    return { summary: op.replace(/([A-Z])/g, " $1").toLowerCase().replace(/^./, (c) => c.toUpperCase()) };
+  }
+});
+var canvasToggle = defineCommand({
+  id: "canvas.toggle",
+  title: "Canvas",
+  domain: "view",
+  effect: "view",
+  permission: null,
+  params: external_exports.object({ what: external_exports.enum(["rulers", "minimap", "links", "preview", "snap", "guides", "ninja", "scroll", "enterGroup"]) }),
+  expose: { ui: { label: "Canvas", keywords: ["rulers", "web preview", "website", "browser", "live", "html", "minimap", "map", "overview", "navigator", "links", "prototype", "connections", "arrows", "flow", "snap", "grid", "guides", "ninja", "stealth", "presence", "scroll", "zoom", "pan", "double-click", "group"], variants: [
+    { id: "rulers", label: "Show / hide rulers", shortcut: "Shift+R", params: { what: "rulers" } },
+    { id: "minimap", label: "Show / hide minimap", params: { what: "minimap" } },
+    { id: "links", label: "Show / hide prototype links", params: { what: "links" } },
+    { id: "preview", label: "Show / hide web preview", params: { what: "preview" } },
+    { id: "snap", label: "Toggle snap to grid", shortcut: "Shift+'", params: { what: "snap" } },
+    { id: "guides", label: "Clear all guides", params: { what: "guides" } },
+    { id: "ninja", label: "Toggle Ninja mode (hide your presence)", params: { what: "ninja" } },
+    { id: "scroll", label: "Scroll to zoom / scroll to move", params: { what: "scroll" } },
+    { id: "enterGroup", label: "Double-click to enter a group", params: { what: "enterGroup" } }
+  ] } },
+  run: async ({ what }) => {
+    const s = await store();
+    if (what === "rulers") s.toggleRulers();
+    else if (what === "minimap") s.toggleViewFlag("minimap");
+    else if (what === "links") s.toggleViewFlag("prototypeLinks");
+    else if (what === "preview") s.toggleViewFlag("webPreview");
+    else if (what === "snap") s.setSnapToGrid(!s.snapToGrid);
+    else if (what === "guides") s.clearGuides();
+    else if (what === "scroll") s.setScrollAction(s.scrollAction === "pan" ? "zoom" : "pan");
+    else if (what === "enterGroup") s.setDoubleClickToEnterGroup(!s.doubleClickToEnterGroup);
+    else s.setStealthMode(!s.stealthMode);
+    return { summary: `Toggled ${what}` };
+  }
+});
+var popcornOpen = defineCommand({
+  id: "jam.open",
+  title: "Whiteboard",
+  domain: "jam",
+  effect: "none",
+  permission: null,
+  params: external_exports.object({ which: external_exports.enum(["templatesOpen", "timerOpen", "voteOpen"]) }),
+  expose: { ui: { label: "Whiteboard", keywords: ["jam", "whiteboard", "template", "timer", "vote", "voting"], variants: [
+    { id: "templates", label: "Whiteboard templates\u2026", params: { which: "templatesOpen" } },
+    { id: "timer", label: "Whiteboard timer", params: { which: "timerOpen" } },
+    { id: "vote", label: "Whiteboard voting", params: { which: "voteOpen" } }
+  ] } },
+  run: async ({ which }) => {
+    const s = await store();
+    if (s.mode !== "POPCORN") s.setMode("POPCORN");
+    (await import("./popcorn-ui-store-XF52VUWY.js")).usePopcornUI.getState().set({ [which]: true });
+    return { summary: "Opened" };
+  }
+});
+function themeCommand(themes) {
+  return defineCommand({
+    id: "theme.set",
+    title: "Theme",
+    domain: "theme",
+    effect: "none",
+    permission: null,
+    params: external_exports.object({ id: external_exports.string() }),
+    expose: { ui: { label: "Theme", keywords: ["theme", "dark", "light", "comic", "appearance", "colors"], variants: themes.map((t) => ({ id: t.id, label: `Theme: ${t.name}`, params: { id: t.id } })) } },
+    run: async ({ id }) => {
+      (await import("./theme-store-T6K3BK4F.js")).useThemeStore.getState().setActiveTheme(id);
+      return { summary: `Theme: ${themes.find((t) => t.id === id)?.name ?? id}` };
+    }
+  });
+}
+function pluginCommand(plugins) {
+  const variants = plugins.filter((p) => p.enabled && (p.manifest.commands?.length || true)).flatMap((p) => {
+    const commands = p.manifest.commands?.length ? p.manifest.commands : [{ id: "run", label: "Run" }];
+    return commands.map((c) => ({ id: `${p.manifest.id}:${c.id}`, label: `${p.manifest.name}: ${c.label}`, params: { pluginId: p.manifest.id, commandId: c.id } }));
+  });
+  return defineCommand({
+    id: "plugins.run",
+    title: "Run plugin",
+    domain: "plugins",
+    effect: "none",
+    permission: null,
+    params: external_exports.object({ pluginId: external_exports.string(), commandId: external_exports.string() }),
+    expose: { ui: { label: "Run plugin", keywords: ["plugin", "extension", "run"], variants, palette: variants.length ? void 0 : false } },
+    run: async ({ pluginId, commandId }) => {
+      await (await import("./host-7LDOGDYJ.js")).runPlugin(pluginId, commandId);
+      return { summary: "Plugin started" };
+    }
+  });
+}
+var viewSetBreakpoint = defineCommand({
+  id: "view.setBreakpoint",
+  title: "Show breakpoint",
+  domain: "view",
+  effect: "view",
+  permission: null,
+  params: external_exports.object({ breakpoint: external_exports.string().nullable().describe("A breakpoint id, or null (or the base's id) for the design itself.") }),
+  expose: { ui: { label: "Show breakpoint", keywords: ["responsive", "breakpoint", "desktop", "tablet", "phone", "mobile", "width"], variants: [
+    { id: "base", label: "Show the design (widest breakpoint)", params: { breakpoint: null } },
+    { id: "tablet", label: "Show the tablet breakpoint", params: { breakpoint: "tablet" } },
+    { id: "phone", label: "Show the phone breakpoint", params: { breakpoint: "phone" } }
+  ] } },
+  run: async ({ breakpoint }) => {
+    const s = await store();
+    s.setActiveBreakpoint(breakpoint);
+    const { breakpointsOf } = await import("../lib/document/breakpoints.js");
+    const shown = (await store()).activeBreakpoint;
+    const all = breakpointsOf(s.document);
+    return { summary: `Showing ${(all.find((b) => b.id === shown) ?? all[0]).name}`, data: { breakpoint: shown ?? all[0].id } };
+  }
+});
+var appCommands = [modeSet, modeEdit, nodeRasterize, panelOpen, panelToggle, dialogOpen, aiOpen, docAction, toolSet, toolPlace, nodeOps, canvasToggle, viewSetBreakpoint, popcornOpen, pageGo];
+var started = false;
+function registerAppCommands() {
+  registerCommand(...appCommands);
+  if (started || typeof window === "undefined") return;
+  started = true;
+  void import("./theme-store-T6K3BK4F.js").then(({ useThemeStore, pickableThemes }) => {
+    const sync = () => registerCommand(themeCommand(pickableThemes(useThemeStore.getState())));
+    sync();
+    useThemeStore.subscribe(sync);
+  });
+  void import("./plugin-store-PN5M7ILJ.js").then(({ usePluginStore }) => {
+    const sync = () => registerCommand(pluginCommand(usePluginStore.getState().installed));
+    sync();
+    usePluginStore.subscribe(sync);
+  });
+}
+
+export {
+  appCommands,
+  registerAppCommands
+};

package/dist/chunks/chunk-RX7WZ37F.js

@@ -0,0 +1,137 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  disc,
+  draw,
+  dreidel,
+  gelt,
+  maze,
+  menorah,
+  printVariant,
+  rectPath,
+  sparkle,
+  starOfDavid,
+  wordSearch
+} from "./chunk-AISWLDDO.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/print/holidays-hanukkah-activity-sheet.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Hanukkah activity sheet for kids";
+var PAD = { top: 26, right: 48, bottom: 40, left: 48 };
+var WORDS = ["LATKES", "DREIDEL", "MENORAH", "CANDLES", "GELT", "SHAMASH", "MACCABEES", "OIL", "LIGHT", "JERUSALEM"];
+function header(w) {
+  const B = 12, s = w / 816, y = 140;
+  const scallops = [];
+  for (let x = -B, i = 0; x < w + B; x += 34 * s, i++) scallops.push(disc(x + 17 * s, y, 17 * s, 12 * s));
+  return [
+    { name: "Band", paths: [rectPath(-B, -B, w + 2 * B, y + B)], color: "band" },
+    { name: "Scallops", paths: scallops, color: "band" },
+    { name: "Band sparkles", paths: [[0.05, 0.3, 14], [0.12, 0.72, 9]].map(([x, yy, r]) => sparkle(w * x, 140 * yy, r * s)), color: "onBand" },
+    { name: "Band sparkles", paths: [[0.92, 0.22, 18], [0.85, 0.62, 9]].map(([x, yy, r]) => sparkle(w * x, 140 * yy, r * s)), color: "onBand" },
+    { name: "Band stars", paths: starOfDavid(w * 0.035, 112, 9 * s), color: "onBand", o: { strokeWidth: 1.6 * s } },
+    { name: "Band stars", paths: starOfDavid(w * 0.965, 104, 10 * s), color: "onBand", o: { strokeWidth: 1.6 * s } }
+  ];
+}
+var holidays_hanukkah_activity_sheet_default = defineTemplate({
+  id: "print-holidays-hanukkah-activity-sheet",
+  meta: {
+    name: NAME,
+    description: "A printable Hanukkah activity sheet for children: a maze to take the dreidel to the gelt, a word search of ten Hanukkah words, and a hanukkiah in outline to colour a candle each night. Blue and white with playful heavy type, and it prints well in black and white. US Letter with bleed, and an A4 copy",
+    category: "document",
+    tags: ["hanukkah", "chanukah", "kids", "children", "activity sheet", "colouring", "coloring page", "maze", "word search", "hebrew school", "synagogue", "printable", "jewish", "print"],
+    platforms: ["print"],
+    formats: ["document"],
+    useCases: ["education", "event"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit(NAME, preset("us-letter"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FFFFFF", text: "#14306B", onPaper: "#3F5C99", primary: "#2457C5", onPrimary: "#FFFFFF", line: "#B9CBEF", card: "#EAF0FC", onCard: "#14306B" },
+      { name: "Temple Beth Shalom Hebrew School" }
+    );
+    k.palette({ band: "#2457C5", onBand: "#FFFFFF", gold: "#E8B33C", goldDeep: "#A87A1E", soft: "#EAF0FC", outline: "#14306B", dreidel: "#7FA6EA", dreidelSide: "#4C78CF" });
+    k.textStyle("Title 50", { size: 50, fontWeight: 900, letterSpacing: -1.4, lineHeight: 54 });
+    k.textStyle("Band sub 15", { ...SERIF, size: 15, fontWeight: 400, fontStyle: "italic", lineHeight: 20 });
+    k.textStyle("Head 20", { size: 20, fontWeight: 800, letterSpacing: -0.2, lineHeight: 24 });
+    k.textStyle("Hint 12", { ...SERIF, size: 12, fontWeight: 400, lineHeight: 17 });
+    k.textStyle("Grid 17", { ...MONO, size: 15.5, fontWeight: 600, letterSpacing: 2.2, lineHeight: 22 });
+    k.textStyle("Words 11", { size: 11, fontWeight: 700, letterSpacing: 1.2, lineHeight: 17 });
+    k.textStyle("Name 12", { size: 12, fontWeight: 600, lineHeight: 18 });
+    k.textStyle("Foot 10", { size: 10, fontWeight: 500, lineHeight: 14 });
+    const sheet = k.sheet;
+    const { width: W } = k.node(sheet);
+    k.flowSheet(sheet, 14, PAD, "paper", "MIN", "MIN");
+    draw(k, sheet, header(W));
+    const head = k.stack(sheet, { width: "FILL", height: 112, gap: 2, justify: "CENTER", align: "CENTER", name: "Header" });
+    k.text(head, "Hanukkah Fun Page", { style: "Title 50", color: "onBand", autoWidth: true, name: "Title" });
+    k.text(head, "Eight nights of light, one page of puzzles", { style: "Band sub 15", color: "onBand", autoWidth: true, name: "Subtitle" });
+    k.stack(sheet, { height: 8, name: "Gap" });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", width: "FILL", justify: "SPACE_BETWEEN", align: "MAX", name: "Name row" });
+    k.text(top, "Name: ________________________", { style: "Name 12", color: "text", autoWidth: true, name: "Name" });
+    k.text(top, "Age: ______", { style: "Name 12", color: "text", autoWidth: true, name: "Age" });
+    const panel = (parent, title, hint, name) => {
+      const p = k.stack(parent, { width: "FILL", gap: 8, padding: 18, fill: "card", radius: 18, name });
+      k.instance(p, "Panel head", { Title: title, Hint: hint }, { name: "Panel head", width: "FILL" });
+      return p;
+    };
+    k.component("Panel head", { gap: 2, width: 320, props: { Title: "Puzzle", Hint: "What to do" } }, (id) => {
+      k.propText(id, "Title", { style: "Head 20", color: "onCard", width: "FILL", name: "Panel title" });
+      k.propText(id, "Hint", { style: "Hint 12", color: "onCard", width: "FILL", name: "Panel hint" });
+    });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, width: "FILL", name: "Puzzles" });
+    const mz = panel(row, "Spin to the gelt", "Help the dreidel find its way through the maze to the chocolate coins.", "Maze panel");
+    const mart = k.stack(mz, { width: 276, height: 300, name: "Maze art" });
+    const cell = 276 / 12;
+    const d = dreidel(cell * 0.5, 20, 30, -0.3), g = gelt(276 - cell * 0.5, 292, 8);
+    draw(k, mart, [
+      { name: "Maze walls", paths: maze(0, 34, 12, 11, cell, 2026), color: "outline", o: { strokeWidth: 3 } },
+      { name: "Dreidel", paths: d.body, color: "dreidel" },
+      { name: "Dreidel side", paths: d.side, color: "dreidelSide" },
+      { name: "Dreidel handle", paths: d.handle, color: "gold" },
+      { name: "Gelt", paths: [...g.coin, ...gelt(276 - cell * 0.5 - 14, 290, 7).coin], color: "gold" }
+    ]);
+    const ws = panel(row, "Word search", "Find the ten words. They run across, down and on the slant.", "Word panel");
+    k.text(ws, wordSearch(WORDS, 12, 5786).join("\n"), { style: "Grid 17", color: "onCard", align: "CENTER", width: "FILL", name: "Grid" });
+    k.text(ws, WORDS.join("   \xB7   "), { style: "Words 11", color: "onCard", align: "CENTER", width: "FILL", name: "Word list" });
+    const col = panel(sheet, "Colour a candle each night", "Each night add one more candle, filling from the right, and light the newest one first. Colour in tonight\u2019s candles, and the shamash in the middle, the helper that lights the others.", "Colouring panel");
+    const cart = k.stack(col, { width: "FILL", height: 196, name: "Colouring art", align: "CENTER" });
+    const m = menorah(342, 190, 520, 132, 8);
+    draw(k, cart, [
+      { name: "Outline stand", paths: [...m.stand], color: "outline", o: { strokeWidth: 3 } },
+      { name: "Outline foot", paths: m.foot, color: "outline", o: { strokeWidth: 3 } },
+      { name: "Outline cups", paths: m.cups, color: "outline", o: { strokeWidth: 2.4 } },
+      { name: "Outline candles", paths: m.candles, color: "outline", o: { strokeWidth: 2.4 } },
+      { name: "Outline flames", paths: m.flames, color: "outline", o: { strokeWidth: 2 } }
+    ]);
+    k.text(col, "Night 1 is the candle on the far right. Count them all: with the shamash, you light 44 candles in eight nights.", { style: "Hint 12", color: "onCard", align: "CENTER", width: "FILL", name: "Fact" });
+    k.text(sheet, "Chag sameach from {{brand.name}} \xB7 Answers on the back of the classroom door", { style: "Foot 10", color: "onPaper", align: "CENTER", width: "FILL", name: "Foot" });
+    k.variants(sheet, [printVariant("a4", { art: header, pad: PAD, masterWidth: W })]);
+    return k.finish();
+  }
+});
+
+export {
+  holidays_hanukkah_activity_sheet_default
+};