@popcraft/kit 0.26.1 → 0.28.0

package/dist/chunks/chunk-UAEYBIAS.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-ABZRPLQR.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-Y5JVOHB7.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-V6YXN7XC.js")).openAiDialog(dialog);
+    else (await import("./store-TKV7PCNN.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-ZFCGDRQT.js");
+      await placeMediaFromPicker({ kind: "point", x: s.camera.x, y: s.camera.y });
+      return { summary: "Placing media" };
+    }
+    const { beginEyedrop } = await import("./eyedropper-AQWXO46L.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-B7445DO4.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-BJ7UQSQD.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-UCDSCDOQ.js

@@ -0,0 +1,172 @@
+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 {
+  STENCIL,
+  assembly,
+  blueprintBrand,
+  callouts,
+  drawingSheet,
+  explode,
+  fitSheet,
+  lift,
+  revStamp,
+  runFlow
+} from "./chunk-MSNZ2GPI.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  appear,
+  drawOn
+} from "./chunk-API2DUG7.js";
+import {
+  board,
+  reboard
+} from "./chunk-QLV6445V.js";
+import {
+  outro,
+  pill,
+  postVariants
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-WBZ6O2YF.js";
+import {
+  Kit,
+  preset
+} from "./chunk-MTD3UAQT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/blueprint-parts-list-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 7600;
+var OUT = 6600;
+var PLANS = [
+  { no: "GDR-HOBBY", what: "One project \xB7 1M requests \xB7 3 regions", price: 0, from: 0 },
+  { no: "GDR-PROD", what: "Unlimited projects \xB7 50M requests \xB7 all 34 regions", price: 49, from: 10 },
+  { no: "GDR-FLEET", what: "1B requests \xB7 SSO and audit log \xB7 an engineer on call", price: 399, from: 100 }
+];
+var counts = PLANS.filter((p) => p.price).map((p, i) => ({ layer: `Price ${p.no}`, at: 1900 + i * 350, duration: 900, counter: { from: p.from, to: p.price, prefix: "$" } }));
+var cues = [
+  { layer: "Strip", preset: "fade-in", at: 0, params: { duration: 400 } },
+  // The plates fade in before they part, so the outro can take the drawing away whole and the loop starts bare.
+  { layer: "Board", preset: "fade-in", at: 0, params: { duration: 240 } },
+  { layer: ["Balloon 1", "Balloon 2", "Balloon 3"], preset: "pop-in", at: 1e3, params: { duration: 300 }, stagger: { delay: 180, order: "selection" } },
+  { layer: ["Label 1", "Label 2", "Label 3"], preset: "slide-in", at: 1080, params: { duration: 360, direction: "left", distance: 30 }, stagger: { delay: 180, order: "selection" } },
+  { layer: "Bill", preset: "rise-in", at: 900, params: { duration: 600 } },
+  { layer: "Plan row", preset: "fade-in", at: 1500, params: { duration: 350 }, stagger: { delay: 350 } },
+  { layer: "Bill notes", preset: "fade-in", at: 2900, params: { duration: 400 } },
+  { layer: "Stamp", preset: "pop-in", at: 3700, params: { duration: 260, amount: 0.5 } },
+  { layer: "Bill", preset: "shake", at: 3790, params: { duration: 360, distance: 8 } },
+  { layer: "Call", preset: "pulse", at: 4700, params: { duration: 700, amount: 0.06 } },
+  outro(["Strip", "Board", "Bill"], OUT, { gap: 90 })
+];
+var SIZE = { a: 120, t: 20, pitch: 98, left: 20, top: 38, bottom: 38 };
+var BOARD = { width: 440, height: SIZE.top + SIZE.a + 2 * SIZE.pitch + SIZE.t + SIZE.bottom };
+var blueprint_parts_list_post_default = defineTemplate({
+  id: "motion-blueprint-parts-list-post",
+  meta: {
+    name: "Blueprint parts list pricing post (animated)",
+    description: "Pricing as a bill of materials on an engineering blueprint: three plates slide apart into an exploded view with a numbered balloon for each plan, the plans rule in row by row on cream drafting paper (item, part number, description, unit price) while the prices count up, and an approval stamp lands, held and then lifted off so it loops. Seven and a half seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "blueprint", "engineering drawing", "cyanotype", "parts list", "bill of materials", "exploded view", "pricing", "plans", "counter", "api", "infrastructure", "saas", "post"],
+    platforms: ["x", "linkedin", "instagram", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["pricing", "announcement", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Blueprint parts list pricing post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    blueprintBrand(k, { hook: "Pricing, as a parts list." });
+    k.textStyle("Strip 20", { ...STENCIL, size: 20, fontWeight: 700, letterSpacing: 1.5, lineHeight: 26 });
+    k.textStyle("Hook 70", { ...STENCIL, size: 70, fontWeight: 800, letterSpacing: -2.8, lineHeight: 70 });
+    k.textStyle("Hook 56", { ...STENCIL, size: 56, fontWeight: 800, letterSpacing: -2.2, lineHeight: 58 });
+    k.textStyle("Lead 24", { size: 24, fontWeight: 500, lineHeight: 32 });
+    k.textStyle("Balloon 22", { ...MONO, size: 22, fontWeight: 800, lineHeight: 26 });
+    k.textStyle("Part 22", { ...STENCIL, size: 22, fontWeight: 800, lineHeight: 26 });
+    k.textStyle("Head 16", { ...STENCIL, size: 16, fontWeight: 700, letterSpacing: 1.6, lineHeight: 20 });
+    k.textStyle("Item 30", { ...MONO, size: 30, fontWeight: 800, lineHeight: 34 });
+    k.textStyle("Row 26", { ...STENCIL, size: 26, fontWeight: 800, lineHeight: 30 });
+    k.textStyle("Body 19", { size: 19, fontWeight: 500, lineHeight: 25 });
+    k.textStyle("Price 40", { ...MONO, size: 40, fontWeight: 800, letterSpacing: -1, lineHeight: 42 });
+    k.textStyle("Notes 16", { ...STENCIL, size: 16, fontWeight: 700, letterSpacing: 0.6, lineHeight: 22 });
+    k.textStyle("Stamp 30", { ...STENCIL, size: 30, fontWeight: 800, letterSpacing: 1.5, lineHeight: 32 });
+    k.textStyle("Stamp 16", { ...STENCIL, size: 16, fontWeight: 800, letterSpacing: 1.2, lineHeight: 20 });
+    k.textStyle("Button 20", { ...STENCIL, size: 20, fontWeight: 800, letterSpacing: 0.5, lineHeight: 26 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 20", label: "Start on Hobby", pad: [14, 20], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 20, 64, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    drawingSheet(k, sheet, 1080, 1080);
+    const top = k.stack(sheet, { direction: "HORIZONTAL", gap: 24, align: "CENTER", name: "Top" });
+    const copy = k.stack(top, { gap: 18, name: "Copy" });
+    k.text(copy, "{{brand.name}} \xB7 bill of materials", { style: "Strip 20", color: "onPaper", name: "Strip" });
+    k.text(copy, "{{brand.hook}}", { style: "Hook 70", color: "text", name: "Hook" });
+    k.text(copy, "Three parts. You pay for requests, never for seats.", { style: "Lead 24", color: "onPaper", name: "Lead" });
+    const bd = board(k, top, BOARD.width, BOARD.height, 1, "Board");
+    const asm = assembly(k, bd, { ...SIZE, right: BOARD.width - SIZE.left - 2 * SIZE.a, kinds: ["edge", "cache", "router"] });
+    callouts(k, asm, PLANS.map((p) => ({ name: p.no.slice(4) })), { r: 22, gap: 44, num: "Balloon 22", name: "Part 22", labelWidth: 96 });
+    const bill = k.stack(sheet, { gap: 0, fill: "card", padding: { top: 22, right: 30, bottom: 24, left: 30 }, effects: [lift(k, 44, 0.6, 20)], name: "Bill" });
+    const head = k.stack(bill, { direction: "HORIZONTAL", gap: 22, padding: { top: 0, right: 0, bottom: 10, left: 0 }, name: "Plan head" });
+    k.text(head, "Item", { style: "Head 16", color: "onCard", width: 56, name: "Head item" });
+    k.text(head, "Part no.", { style: "Head 16", color: "onCard", width: 190, name: "Head part" });
+    k.text(head, "Description", { style: "Head 16", color: "onCard", name: "Head what" });
+    k.text(head, "A month", { style: "Head 16", color: "onCard", width: 120, name: "Head price" });
+    k.rect(bill, "FILL", 3, "onCard", { name: "Bill rule heavy" });
+    PLANS.forEach((p, i) => {
+      const row = k.stack(bill, { direction: "HORIZONTAL", gap: 22, align: "CENTER", padding: { top: 16, right: 0, bottom: 16, left: 0 }, name: "Plan row" });
+      k.text(row, String(i + 1), { style: "Item 30", color: "onCard", width: 56, name: "Row item" });
+      k.text(row, p.no, { style: "Row 26", color: "onCard", width: 190, name: "Row part" });
+      k.text(row, p.what, { style: "Body 19", color: "onCard", name: "Row what" });
+      k.text(row, `$${p.price}`, { style: "Price 40", color: "onCard", width: 120, name: `Price ${p.no}` });
+      k.rect(bill, "FILL", i === PLANS.length - 1 ? 3 : 1, "onCard", { name: "Bill rule", ...i === PLANS.length - 1 ? {} : { opacity: 0.45 } });
+    });
+    const notes = k.stack(bill, { direction: "HORIZONTAL", gap: 20, align: "CENTER", padding: { top: 16, right: 0, bottom: 0, left: 0 }, name: "Bill notes" });
+    k.text(notes, "Notes: 1. No per-seat charges. 2. Overage $0.40 per million. 3. {{brand.site}}/pricing", { style: "Notes 16", color: "onCard", name: "Notes text" });
+    k.instance(notes, "Button", { Label: "Start on Hobby" }, { name: "Call" });
+    revStamp(k, bill, { big: "No seat tax", small: "Approved for production", bigStyle: "Stamp 30", smallStyle: "Stamp 16", turn: -5, absolute: { x: 600, y: -92 }, pad: [6, 14] });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    explode(k, asm, 250, 800, 0);
+    [0, 1, 2].forEach((i) => {
+      for (const id of k.named(asm.id, `Leader ${i + 1}`)) {
+        appear(k, id, 850 + i * 180, 60);
+        drawOn(k, id, 850 + i * 180, 220);
+      }
+    });
+    runFlow(k, asm, 1e3, 220);
+    const refit = (kit, id) => {
+      const f = kit.node(id);
+      fitSheet(kit, id, f.width, f.height);
+    };
+    k.variants(sheet, postVariants({ portrait: 72 }, {
+      portrait: (kit, id) => {
+        for (const n of kit.named(id, "Stamp")) kit.patch(n, { x: 590 });
+        refit(kit, id);
+      },
+      vertical: (kit, id) => {
+        for (const n of kit.named(id, "Hook")) kit.restyle(n, "Hook 56");
+        reboard(kit, id, "Board", 0.8);
+        for (const n of kit.named(id, "Stamp")) kit.patch(n, { x: 470 });
+        for (const n of kit.named(id, "Plan row")) kit.patch(n, { itemSpacing: 14 });
+        refit(kit, id);
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  blueprint_parts_list_post_default
+};