rivet-design 0.10.6 → 0.10.8

package/dist/utils/devServerCommand.js

@@ -13,26 +13,35 @@ exports.FRAMEWORK_DEV_CONFIG = {
 };
 /**
  * Build the shell command to start a framework's dev server on a specific
- * port. Honors how each framework actually accepts a port:
- *   - CRA reads from the PORT env var (no CLI flag)
- *   - npm passes flags after `--` separator: `npm run dev -- --port N`
- *   - yarn / pnpm pass them inline: `yarn dev --port N`
+ * port. Carries the port over BOTH channels a dev server might honor:
+ *   - the `PORT` env var — respected by CRA, Next.js, and most custom
+ *     `node server.js` setups; and
+ *   - a CLI `--port` flag — respected by Vite/Next/etc.
+ *     (npm needs it after the `--` separator: `npm run dev -- --port N`;
+ *     yarn/pnpm pass it inline: `yarn dev --port N`).
+ *
+ * Passing PORT in the env (not just the flag) is what lets us reliably move a
+ * dev server off an occupied default: a project whose `dev` script doesn't
+ * forward the flag (a custom server, a wrapper script) still picks up PORT and
+ * binds where we told it, instead of falling back to 3000 and colliding.
  */
 function buildDevServerCommand(framework, packageManager, devCommand, port) {
+    const env = { PORT: String(port) };
     if (framework === 'cra') {
+        // CRA has no port flag — it reads PORT from the env exclusively.
         const args = packageManager === 'npm' ? ['run', devCommand] : [devCommand];
-        return { cmd: packageManager, args, env: { PORT: String(port) } };
+        return { cmd: packageManager, args, env };
     }
     if (packageManager === 'npm') {
         return {
             cmd: 'npm',
             args: ['run', devCommand, '--', '--port', String(port)],
-            env: {},
+            env,
         };
     }
     if (packageManager === 'yarn') {
-        return { cmd: 'yarn', args: [devCommand, '--port', String(port)], env: {} };
+        return { cmd: 'yarn', args: [devCommand, '--port', String(port)], env };
     }
-    return { cmd: 'pnpm', args: [devCommand, '--port', String(port)], env: {} };
+    return { cmd: 'pnpm', args: [devCommand, '--port', String(port)], env };
 }
 //# sourceMappingURL=devServerCommand.js.map

package/dist/utils/devServerCommand.js.map

@@ -1 +1 @@
-{"version":3,"file":"devServerCommand.js","sourceRoot":"","sources":["../../src/utils/devServerCommand.ts"],"names":[],"mappings":";;;AAsBA,sDAqBC;AAzCD,wEAAwE;AAC3D,QAAA,oBAAoB,GAG7B;IACF,MAAM,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE;IAChD,IAAI,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE;IAC9C,GAAG,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE;IAC/C,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE;IAC/C,MAAM,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE;IAChD,MAAM,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;CAC3C,CAAC;AAEF;;;;;;GAMG;AACH,SAAgB,qBAAqB,CACnC,SAAoB,EACpB,cAAsB,EACtB,UAAkB,EAClB,IAAY;IAEZ,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;QACxB,MAAM,IAAI,GAAG,cAAc,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;QAC3E,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;IACpE,CAAC;IACD,IAAI,cAAc,KAAK,KAAK,EAAE,CAAC;QAC7B,OAAO;YACL,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;YACvD,GAAG,EAAE,EAAE;SACR,CAAC;IACJ,CAAC;IACD,IAAI,cAAc,KAAK,MAAM,EAAE,CAAC;QAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC;IAC9E,CAAC;IACD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC;AAC9E,CAAC"}
+{"version":3,"file":"devServerCommand.js","sourceRoot":"","sources":["../../src/utils/devServerCommand.ts"],"names":[],"mappings":";;;AA6BA,sDAuBC;AAlDD,wEAAwE;AAC3D,QAAA,oBAAoB,GAG7B;IACF,MAAM,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE;IAChD,IAAI,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE;IAC9C,GAAG,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE;IAC/C,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE;IAC/C,MAAM,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE;IAChD,MAAM,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE;CAC3C,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,SAAgB,qBAAqB,CACnC,SAAoB,EACpB,cAAsB,EACtB,UAAkB,EAClB,IAAY;IAEZ,MAAM,GAAG,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC;IACnC,IAAI,SAAS,KAAK,KAAK,EAAE,CAAC;QACxB,iEAAiE;QACjE,MAAM,IAAI,GAAG,cAAc,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;QAC3E,OAAO,EAAE,GAAG,EAAE,cAAc,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC;IAC5C,CAAC;IACD,IAAI,cAAc,KAAK,KAAK,EAAE,CAAC;QAC7B,OAAO;YACL,GAAG,EAAE,KAAK;YACV,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;YACvD,GAAG;SACJ,CAAC;IACJ,CAAC;IACD,IAAI,cAAc,KAAK,MAAM,EAAE,CAAC;QAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;IAC1E,CAAC;IACD,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,UAAU,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC;AAC1E,CAAC"}

package/dist/utils/devServerError.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Error raised when a variant's preview dev server fails to come up. Carries
+ * enough structured detail for the orchestrator to (a) decide whether a retry
+ * on a fresh port could help and (b) emit actionable telemetry instead of an
+ * opaque `DEV_SERVER_START_FAILED`.
+ *
+ * Lives in its own dependency-light module so both WorktreeManager (which
+ * throws it) and WorktreeOrchestrator (which classifies it) can share the
+ * single class identity — `instanceof` works across both because they import
+ * the same module — without the orchestrator pulling in the concrete
+ * WorktreeManager it otherwise only depends on through an interface.
+ */
+export type DevServerFailureReason = 'spawn_error' | 'exited' | 'timeout';
+export declare function isPortInUseOutput(output: string): boolean;
+export declare class DevServerStartError extends Error {
+    /** Why the start failed: never spawned, exited early, or never became ready. */
+    readonly reason: DevServerFailureReason;
+    /** True when the captured output indicates the target port was already taken. */
+    readonly portInUse: boolean;
+    /** Trimmed tail of the child's stdout/stderr, for logs and telemetry. */
+    readonly detail: string;
+    readonly exitCode: number | null;
+    readonly signal: NodeJS.Signals | null;
+    constructor(opts: {
+        message: string;
+        reason: DevServerFailureReason;
+        portInUse: boolean;
+        detail: string;
+        exitCode?: number | null;
+        signal?: NodeJS.Signals | null;
+    });
+}
+export declare function isDevServerStartError(err: unknown): err is DevServerStartError;
+//# sourceMappingURL=devServerError.d.ts.map

package/dist/utils/devServerError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devServerError.d.ts","sourceRoot":"","sources":["../../src/utils/devServerError.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,sBAAsB,GAAG,aAAa,GAAG,QAAQ,GAAG,SAAS,CAAC;AAW1E,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAEzD;AAED,qBAAa,mBAAoB,SAAQ,KAAK;IAC5C,gFAAgF;IAChF,QAAQ,CAAC,MAAM,EAAE,sBAAsB,CAAC;IACxC,iFAAiF;IACjF,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC;IAC5B,yEAAyE;IACzE,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;gBAE3B,IAAI,EAAE;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,sBAAsB,CAAC;QAC/B,SAAS,EAAE,OAAO,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACzB,MAAM,CAAC,EAAE,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC;KAChC;CASF;AAED,wBAAgB,qBAAqB,CACnC,GAAG,EAAE,OAAO,GACX,GAAG,IAAI,mBAAmB,CAE5B"}

package/dist/utils/devServerError.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DevServerStartError = void 0;
+exports.isPortInUseOutput = isPortInUseOutput;
+exports.isDevServerStartError = isDevServerStartError;
+/**
+ * Markers that mean "something is already bound to the port the dev server
+ * tried to use." Covers the raw OS error (EADDRINUSE), Node's human-readable
+ * form, and framework-specific guards (e.g. Next.js's "Another next dev server
+ * is already running").
+ */
+const PORT_IN_USE_RE = /EADDRINUSE|address already in use|already running|already in use/i;
+function isPortInUseOutput(output) {
+    return PORT_IN_USE_RE.test(output);
+}
+class DevServerStartError extends Error {
+    /** Why the start failed: never spawned, exited early, or never became ready. */
+    reason;
+    /** True when the captured output indicates the target port was already taken. */
+    portInUse;
+    /** Trimmed tail of the child's stdout/stderr, for logs and telemetry. */
+    detail;
+    exitCode;
+    signal;
+    constructor(opts) {
+        super(opts.message);
+        this.name = 'DevServerStartError';
+        this.reason = opts.reason;
+        this.portInUse = opts.portInUse;
+        this.detail = opts.detail;
+        this.exitCode = opts.exitCode ?? null;
+        this.signal = opts.signal ?? null;
+    }
+}
+exports.DevServerStartError = DevServerStartError;
+function isDevServerStartError(err) {
+    return err instanceof DevServerStartError;
+}
+//# sourceMappingURL=devServerError.js.map

package/dist/utils/devServerError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"devServerError.js","sourceRoot":"","sources":["../../src/utils/devServerError.ts"],"names":[],"mappings":";;;AAuBA,8CAEC;AA8BD,sDAIC;AA7CD;;;;;GAKG;AACH,MAAM,cAAc,GAClB,mEAAmE,CAAC;AAEtE,SAAgB,iBAAiB,CAAC,MAAc;IAC9C,OAAO,cAAc,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AACrC,CAAC;AAED,MAAa,mBAAoB,SAAQ,KAAK;IAC5C,gFAAgF;IACvE,MAAM,CAAyB;IACxC,iFAAiF;IACxE,SAAS,CAAU;IAC5B,yEAAyE;IAChE,MAAM,CAAS;IACf,QAAQ,CAAgB;IACxB,MAAM,CAAwB;IAEvC,YAAY,IAOX;QACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACpB,IAAI,CAAC,IAAI,GAAG,qBAAqB,CAAC;QAClC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;QAChC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC;QACtC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC;IACpC,CAAC;CACF;AA1BD,kDA0BC;AAED,SAAgB,qBAAqB,CACnC,GAAY;IAEZ,OAAO,GAAG,YAAY,mBAAmB,CAAC;AAC5C,CAAC"}

package/dist/utils/elementRefToContext.d.ts

@@ -0,0 +1,4 @@
+import type { ElementContext } from '../types/change-types';
+import type { ElementRef } from '../types/change-request-types';
+export declare const elementRefToContext: (element: ElementRef) => ElementContext;
+//# sourceMappingURL=elementRefToContext.d.ts.map

package/dist/utils/elementRefToContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementRefToContext.d.ts","sourceRoot":"","sources":["../../src/utils/elementRefToContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAmChE,eAAO,MAAM,mBAAmB,GAAI,SAAS,UAAU,KAAG,cA6BxD,CAAC"}

package/dist/utils/elementRefToContext.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.elementRefToContext = void 0;
+const DEFAULT_BOUNDING_RECT = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+};
+const COMPONENT_NODE_TYPES = new Set([
+    'function',
+    'class',
+    'memo',
+    'forwardRef',
+    'context',
+    'unknown',
+]);
+const toComponentNode = (node) => {
+    const type = COMPONENT_NODE_TYPES.has(node.type)
+        ? node.type
+        : 'unknown';
+    return {
+        name: node.name,
+        type,
+        depth: node.depth ?? 0,
+    };
+};
+const elementRefToContext = (element) => ({
+    xpath: element.xpath,
+    tagName: element.tagName,
+    className: element.className,
+    id: element.id,
+    textContent: element.textContent ?? '',
+    innerHTML: '',
+    attributes: element.attributes ?? {},
+    computedStyles: {},
+    boundingRect: DEFAULT_BOUNDING_RECT,
+    ...(element.rivetId ? { rivetId: element.rivetId } : {}),
+    ...(element.componentTree
+        ? { componentTree: element.componentTree.map(toComponentNode) }
+        : {}),
+    ...(element.filePaths.length > 0
+        ? {
+            filePaths: element.filePaths.map((filePath) => ({
+                filePath,
+            })),
+        }
+        : {}),
+    ...(element.parentElementSummary
+        ? {
+            parentElementSummary: {
+                ...element.parentElementSummary,
+                id: '',
+            },
+        }
+        : {}),
+});
+exports.elementRefToContext = elementRefToContext;
+//# sourceMappingURL=elementRefToContext.js.map

package/dist/utils/elementRefToContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elementRefToContext.js","sourceRoot":"","sources":["../../src/utils/elementRefToContext.ts"],"names":[],"mappings":";;;AAGA,MAAM,qBAAqB,GAAG;IAC5B,CAAC,EAAE,CAAC;IACJ,CAAC,EAAE,CAAC;IACJ,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;IACT,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,CAAC;CACV,CAAC;AAEF,MAAM,oBAAoB,GAAG,IAAI,GAAG,CAAwB;IAC1D,UAAU;IACV,OAAO;IACP,MAAM;IACN,YAAY;IACZ,SAAS;IACT,SAAS;CACV,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,CACtB,IAAsD,EACvC,EAAE;IACjB,MAAM,IAAI,GAAG,oBAAoB,CAAC,GAAG,CAAC,IAAI,CAAC,IAA6B,CAAC;QACvE,CAAC,CAAE,IAAI,CAAC,IAA8B;QACtC,CAAC,CAAC,SAAS,CAAC;IACd,OAAO;QACL,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,IAAI;QACJ,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;KACvB,CAAC;AACJ,CAAC,CAAC;AAEK,MAAM,mBAAmB,GAAG,CAAC,OAAmB,EAAkB,EAAE,CAAC,CAAC;IAC3E,KAAK,EAAE,OAAO,CAAC,KAAK;IACpB,OAAO,EAAE,OAAO,CAAC,OAAO;IACxB,SAAS,EAAE,OAAO,CAAC,SAAS;IAC5B,EAAE,EAAE,OAAO,CAAC,EAAE;IACd,WAAW,EAAE,OAAO,CAAC,WAAW,IAAI,EAAE;IACtC,SAAS,EAAE,EAAE;IACb,UAAU,EAAE,OAAO,CAAC,UAAU,IAAI,EAAE;IACpC,cAAc,EAAE,EAAE;IAClB,YAAY,EAAE,qBAAqB;IACnC,GAAG,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IACxD,GAAG,CAAC,OAAO,CAAC,aAAa;QACvB,CAAC,CAAC,EAAE,aAAa,EAAE,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,eAAe,CAAC,EAAE;QAC/D,CAAC,CAAC,EAAE,CAAC;IACP,GAAG,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC;QAC9B,CAAC,CAAC;YACE,SAAS,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;gBAC9C,QAAQ;aACT,CAAC,CAAC;SACJ;QACH,CAAC,CAAC,EAAE,CAAC;IACP,GAAG,CAAC,OAAO,CAAC,oBAAoB;QAC9B,CAAC,CAAC;YACE,oBAAoB,EAAE;gBACpB,GAAG,OAAO,CAAC,oBAAoB;gBAC/B,EAAE,EAAE,EAAE;aACP;SACF;QACH,CAAC,CAAC,EAAE,CAAC;CACR,CAAC,CAAC;AA7BU,QAAA,mBAAmB,uBA6B7B"}

package/dist/utils/skills/describe-motion-protocol.d.ts

@@ -7,5 +7,5 @@
  * the spec in a shape that drops cleanly into a `motionBrief`
  * sourceArtifact.
  */
-export declare const DESCRIBE_MOTION_PROTOCOL = "### Describe Motion protocol (video / motion artifact -> motionBrief)\n\nUse this protocol when the user attaches a video, gif, screen recording, or\nframe sequence to a variants request. The output is a structured motion spec\nthe agent passes back to Rivet as a `sourceArtifacts` entry with\n`kind: 'motionBrief'`. Run this BEFORE `start_variants` so the spec is\navailable to per-variant briefs and codegen.\n\nIf the user provided ONLY a static image or a URL, this protocol is the wrong\ntool \u2014 describe the image as `visualBrief` / `screenshotNotes` instead.\n\n#### Step 1 \u2014 Get frames you can inspect\n\nGuessing from memory of a single playback is the most common failure mode.\nPull stills before describing anything.\n\n- **Video (.mov/.mp4/.webm):** `ffmpeg -i <input> -vf \"fps=30\" frames/%04d.png`\n  to step through, or `ffmpeg -i <input> -ss <timestamp> -frames:v 1 frame.png`\n  for a single frame around a state change.\n- **GIF:** `magick <input> -coalesce frames/%04d.png` (ImageMagick) for\n  per-frame stills.\n- **Unknown framerate:** assume 30 or 60fps. 33ms per frame at 30fps,\n  16ms per frame at 60fps. Multiply frame count between state-change\n  boundaries to get duration.\n- **Frame sequence already supplied:** read every frame. The middle frames\n  carry the easing.\n\nIf you cannot extract frames in the current environment, say so explicitly in\nthe spec and mark timing / easing fields with `~estimated`.\n\n#### Step 2 \u2014 Five-phase pass\n\nRun these in order. Later phases depend on earlier observations.\n\n1. **Elements & trigger.** Which DOM nodes change between frames, what\n   initiates the motion (`hover`, `click`, `focus`, `mount`, `unmount`,\n   `scroll`, `intersection`, `drag`, `route change`, `state change`,\n   `keypress`), and the direction (entrance / exit / hover / toggle / loop).\n2. **States.** Enumerate discrete states. Most interactions are A -> B\n   or A -> B -> A. Some have intermediates (idle -> loading -> success).\n   For each state, note every property that will animate.\n3. **Per-property motion.** For each animated property on each element:\n   - **Property** \u2014 prefer compositor-friendly (`transform`, `opacity`).\n   - **From -> to** \u2014 concrete values (`opacity: 0 -> 1`, `translateY: 8px -> 0`).\n   - **Duration** \u2014 milliseconds, measured from frame count. Round to common\n     UI durations when within 1 frame: 150, 200, 250, 300, 400, 500ms.\n   - **Easing** \u2014 identify by shape (see easing guide below), not by guessing\n     a cubic-bezier from memory.\n   - **Delay** \u2014 t=0 or later?\n4. **Choreography.** How per-property animations relate across elements:\n   parallel (default), sequence (B starts after A), stagger (siblings with a\n   fixed offset \u2014 note interval and direction), overlap (B starts before A\n   finishes \u2014 note overlap duration), anchor / transform origin if non-default.\n5. **Edge cases & quality.** Cover all of these, even if the answer is\n   \"not visible in artifact \u2014 recommend default\":\n   - **Reduced motion** \u2014 what `prefers-reduced-motion: reduce` should do.\n     Default: skip transforms, keep opacity, shorten to ~0ms.\n   - **Interrupt** \u2014 re-trigger mid-animation: snap, reverse from current,\n     or queue?\n   - **Exit symmetry** \u2014 is the exit the reverse of the entrance, or different?\n   - **Loop** \u2014 one-shot, loop, ping-pong, or on-demand?\n   - **Performance flags** \u2014 any property that would force layout\n     (`height`, `width`, `top`)? Flag and suggest a transform alternative\n     if visually equivalent.\n\n#### Easing identification guide\n\nWatch the speed across the animation, not just the endpoints.\n\n- **Linear** \u2014 constant speed. Mechanical-feeling. Rare in good UI.\n- **Ease-out** \u2014 fast start, slow end. Most common entrance.\n- **Ease-in** \u2014 slow start, fast end. Best for exits.\n- **Ease-in-out** \u2014 slow-fast-slow. For transitions between two non-home states.\n- **Spring** \u2014 overshoots, then settles. Look for any frame where the element\n  passes its final position. Springs cross the target; ease-out approaches\n  monotonically.\n- **Back-out / overshoot** \u2014 ease-out with a slight overshoot before settling.\n\n#### Library recommendation\n\nPick one based on what you observed; the downstream codegen may override.\n\n- **CSS transitions** \u2014 simple state change, single property, no interrupt\n  complexity.\n- **CSS keyframes** \u2014 loops, multi-step sequences with fixed timing.\n- **Framer Motion** \u2014 springs, gestures, layout animations, exit animations\n  via `AnimatePresence`, stagger via `staggerChildren`.\n- **React Spring** \u2014 physics-driven motion where spring feel matters more\n  than precise timing.\n- **GSAP** \u2014 complex sequences, timeline choreography, SVG morphing.\n- **Native View Transitions API** \u2014 page / route transitions where browser\n  support allows.\n\n#### Spec template (the motionBrief `content` payload)\n\nAlways produce this exact shape. If a field is not observable, write\n`not visible in artifact` \u2014 do not omit the field. The content string is\nwhat you pass as `sourceArtifacts[i].content`.\n\n```\n# Motion spec: <short name>\n\n## Source\n- Artifact: <filename or description>\n- Input type: video | gif | recording | frame-sequence\n- Frames inspected: <count or \"single playback only\">\n- Estimated framerate: <30 | 60 | unknown>\n\n## Trigger\n- Event: <hover | click | mount | scroll | intersection | ...>\n- Element receiving event: <selector or description>\n\n## Elements animated\n1. <element name> \u2014 role in interaction\n2. ...\n\n## States\n- A (initial): <description>\n- B (final): <description>\n- (intermediate states if any)\n\n## Per-property motion\n### <element 1>\n- \\`<property>\\`: <from> -> <to>, duration <ms>, easing <type>, delay <ms>\n- ...\n\n### <element 2>\n- ...\n\n## Choreography\n- <parallel | sequence | stagger | overlap with details>\n- Transform origin: <if non-default>\n\n## Edge cases\n- Reduced motion: <behavior>\n- Interrupt: <snap | reverse | queue>\n- Exit: <symmetric reverse | different \u2014 describe>\n- Loop: <one-shot | loop | ping-pong>\n- Performance flags: <any layout-thrashing properties>\n\n## Recommended implementation\n- Library: <css | framer-motion | gsap | react-spring | view-transitions>\n- Reason: <one line>\n\n## Confidence\n- High / Medium / Low on: <which fields>\n- Estimates flagged with ~ in the spec above\n```\n\n#### Working principles\n\n- **Numbers over adjectives.** \"Fast\" is useless; \"180ms\" is implementable.\n  If you cannot get a number, write `~estimated` and a range.\n- **Frame counting beats vibes.** Snappy ~ 150-250ms; deliberate ~ 300-500ms.\n  Measure when you can.\n- **Identify easing by shape, not by name.** Watch where the element sits\n  at 25%, 50%, 75% of the duration. Even spacing = linear. Compressed at\n  the end = ease-out.\n- **Distinguish observed from inferred.** Anything not seen in the artifact\n  is inference. Mark it.\n- **One spec per interaction.** If the video shows three interactions,\n  produce three motionBrief entries, not one merged blob.\n\n#### Handing the spec back to Rivet\n\nPass each finished spec as one entry in `sourceArtifacts`:\n\n```\nsourceArtifacts: [\n  {\n    kind: 'motionBrief',\n    label: '<short interaction name, <= 60 chars>',\n    content: '<the full spec from the template above>',\n  },\n  // ... one entry per distinct interaction in the video\n]\n```\n\n**Routing.** A request that carries any `sourceArtifacts` (motionBrief,\nvisualBrief, screenshotNotes, siteBrief, urlText) is source-grounded.\nSource-grounded fresh-project sessions go through\n`create_zero_to_one_project` \u2014 its tool description explicitly lists\n`motionBrief` alongside the other artifact kinds. Pass the artifacts under\n`sourceContext.sourceArtifacts` on that call.\n\nDo **NOT** call `start_variants({ mode: 'zero_to_one' })` directly with a\n`sourceContext` containing any `sourceArtifacts` \u2014 that handler rejects\nthe request with `INVALID_STAGE_ACTION` and instructs you to use\n`create_zero_to_one_project` instead, because the source-research\n(`source_plan`) and brief-approval hops are only wired into the\n`create_zero_to_one_project` path. `start_variants(mode='zero_to_one')`\nis for prompt-only fresh projects.\n\nIf the video is supplementary to an existing project (the user wants\nvariants of a specific element / file / route in their open project and\nattached a video for motion reference), use\n`start_variants({ mode: 'existing', target: ... })` instead and embed the\nmotion spec into each variant's `briefs[i].body` \u2014 `sourceArtifacts` are\nnot part of the existing-project flow.\n\nPer-variant briefs and codegen should treat the motionBrief as authoritative\ntiming / easing / choreography guidance \u2014 visual styling can diverge per\nvariant, motion fidelity should not.";
+export declare const DESCRIBE_MOTION_PROTOCOL = "### Describe Motion protocol (video / motion artifact -> motionBrief)\n\nUse this protocol when the user attaches a video, gif, screen recording, or\nframe sequence to a variants request. The output is a structured motion spec\nthe agent passes back to Rivet as a `sourceArtifacts` entry with\n`kind: 'motionBrief'`. Run this BEFORE `start_variants` so the spec is\navailable to per-variant briefs and codegen.\n\nIf the user provided ONLY a static image or a URL, this protocol is the wrong\ntool \u2014 describe the image as `visualBrief` / `screenshotNotes` instead.\n\n#### Step 1 \u2014 Get frames you can inspect\n\nGuessing from memory of a single playback is the most common failure mode.\nPull stills before describing anything.\n\n- **Video (.mov/.mp4/.webm):** `ffmpeg -i <input> -vf \"fps=30\" frames/%04d.png`\n  to step through, or `ffmpeg -i <input> -ss <timestamp> -frames:v 1 frame.png`\n  for a single frame around a state change.\n- **GIF:** `magick <input> -coalesce frames/%04d.png` (ImageMagick) for\n  per-frame stills.\n- **Unknown framerate:** assume 30 or 60fps. 33ms per frame at 30fps,\n  16ms per frame at 60fps. Multiply frame count between state-change\n  boundaries to get duration.\n- **Frame sequence already supplied:** read every frame. The middle frames\n  carry the easing.\n\nIf you cannot extract frames in the current environment, say so explicitly in\nthe spec and mark timing / easing fields with `~estimated`.\n\n#### Step 2 \u2014 Five-phase pass\n\nRun these in order. Later phases depend on earlier observations.\n\n1. **Elements & trigger.** Which DOM nodes change between frames, what\n   initiates the motion (`hover`, `click`, `focus`, `mount`, `unmount`,\n   `scroll`, `intersection`, `drag`, `route change`, `state change`,\n   `keypress`), and the direction (entrance / exit / hover / toggle / loop).\n2. **States.** Enumerate discrete states. Most interactions are A -> B\n   or A -> B -> A. Some have intermediates (idle -> loading -> success).\n   For each state, note every property that will animate.\n3. **Per-property motion.** For each animated property on each element:\n   - **Property** \u2014 prefer compositor-friendly (`transform`, `opacity`).\n   - **From -> to** \u2014 concrete values (`opacity: 0 -> 1`, `translateY: 8px -> 0`).\n   - **Duration** \u2014 milliseconds, measured from frame count. Round to common\n     UI durations when within 1 frame: 150, 200, 250, 300, 400, 500ms.\n   - **Easing** \u2014 identify by shape (see easing guide below), not by guessing\n     a cubic-bezier from memory.\n   - **Delay** \u2014 t=0 or later?\n4. **Choreography.** How per-property animations relate across elements:\n   parallel (default), sequence (B starts after A), stagger (siblings with a\n   fixed offset \u2014 note interval and direction), overlap (B starts before A\n   finishes \u2014 note overlap duration), anchor / transform origin if non-default.\n5. **Edge cases & quality.** Cover all of these, even if the answer is\n   \"not visible in artifact \u2014 recommend default\":\n   - **Reduced motion** \u2014 what `prefers-reduced-motion: reduce` should do.\n     Default: skip transforms, keep opacity, shorten to ~0ms.\n   - **Interrupt** \u2014 re-trigger mid-animation: snap, reverse from current,\n     or queue?\n   - **Exit symmetry** \u2014 is the exit the reverse of the entrance, or different?\n   - **Loop** \u2014 one-shot, loop, ping-pong, or on-demand?\n   - **Performance flags** \u2014 any property that would force layout\n     (`height`, `width`, `top`)? Flag and suggest a transform alternative\n     if visually equivalent.\n\n#### Easing identification guide\n\nWatch the speed across the animation, not just the endpoints.\n\n- **Linear** \u2014 constant speed. Mechanical-feeling. Rare in good UI.\n- **Ease-out** \u2014 fast start, slow end. Most common entrance.\n- **Ease-in** \u2014 slow start, fast end. Best for exits.\n- **Ease-in-out** \u2014 slow-fast-slow. For transitions between two non-home states.\n- **Spring** \u2014 overshoots, then settles. Look for any frame where the element\n  passes its final position. Springs cross the target; ease-out approaches\n  monotonically.\n- **Back-out / overshoot** \u2014 ease-out with a slight overshoot before settling.\n\n#### Library recommendation\n\nPick one based on what you observed; the downstream codegen may override.\n\n- **CSS transitions** \u2014 simple state change, single property, no interrupt\n  complexity.\n- **CSS keyframes** \u2014 loops, multi-step sequences with fixed timing.\n- **Framer Motion** \u2014 springs, gestures, layout animations, exit animations\n  via `AnimatePresence`, stagger via `staggerChildren`.\n- **React Spring** \u2014 physics-driven motion where spring feel matters more\n  than precise timing.\n- **GSAP** \u2014 complex sequences, timeline choreography, SVG morphing.\n- **Native View Transitions API** \u2014 page / route transitions where browser\n  support allows.\n\n#### Spec template (the motionBrief `content` payload)\n\nAlways produce this exact shape. If a field is not observable, write\n`not visible in artifact` \u2014 do not omit the field. The content string is\nwhat you pass as `sourceArtifacts[i].content`.\n\n```\n# Motion spec: <short name>\n\n## Source\n- Artifact: <filename or description>\n- Input type: video | gif | recording | frame-sequence\n- Frames inspected: <count or \"single playback only\">\n- Estimated framerate: <30 | 60 | unknown>\n\n## Trigger\n- Event: <hover | click | mount | scroll | intersection | ...>\n- Element receiving event: <selector or description>\n\n## Elements animated\n1. <element name> \u2014 role in interaction\n2. ...\n\n## States\n- A (initial): <description>\n- B (final): <description>\n- (intermediate states if any)\n\n## Per-property motion\n### <element 1>\n- \\`<property>\\`: <from> -> <to>, duration <ms>, easing <type>, delay <ms>\n- ...\n\n### <element 2>\n- ...\n\n## Choreography\n- <parallel | sequence | stagger | overlap with details>\n- Transform origin: <if non-default>\n\n## Edge cases\n- Reduced motion: <behavior>\n- Interrupt: <snap | reverse | queue>\n- Exit: <symmetric reverse | different \u2014 describe>\n- Loop: <one-shot | loop | ping-pong>\n- Performance flags: <any layout-thrashing properties>\n\n## Recommended implementation\n- Library: <css | framer-motion | gsap | react-spring | view-transitions>\n- Reason: <one line>\n\n## Confidence\n- High / Medium / Low on: <which fields>\n- Estimates flagged with ~ in the spec above\n```\n\n#### Working principles\n\n- **Numbers over adjectives.** \"Fast\" is useless; \"180ms\" is implementable.\n  If you cannot get a number, write `~estimated` and a range.\n- **Frame counting beats vibes.** Snappy ~ 150-250ms; deliberate ~ 300-500ms.\n  Measure when you can.\n- **Identify easing by shape, not by name.** Watch where the element sits\n  at 25%, 50%, 75% of the duration. Even spacing = linear. Compressed at\n  the end = ease-out.\n- **Distinguish observed from inferred.** Anything not seen in the artifact\n  is inference. Mark it.\n- **One spec per interaction.** If the video shows three interactions,\n  produce three motionBrief entries, not one merged blob.\n\n#### Handing the spec back to Rivet\n\nPass each finished spec as one entry in `sourceArtifacts`:\n\n```\nsourceArtifacts: [\n  {\n    kind: 'motionBrief',\n    label: '<short interaction name, <= 60 chars>',\n    content: '<the full spec from the template above>',\n  },\n  // ... one entry per distinct interaction in the video\n]\n```\n\n**Routing.** A request that carries any `sourceArtifacts` (motionBrief,\nvisualBrief, screenshotNotes, siteBrief, urlText) is source-grounded.\nSource-grounded fresh-project sessions go through\n`start_variants({ mode: 'zero_to_one' })` \u2014 pass the artifacts under\n`sourceContext.sourceArtifacts`. start_variants detects the source-grounded\ninput and runs the source-research (`source_plan`) flow automatically,\nreturning `stage: 'awaiting_source_plan'` (rather than the prompt-only\nsingle-call `work_items_ready`).\n\nstart_variants is the single fresh-project entry point \u2014 there is **no**\nseparate source-grounded kickoff tool. A prompt-only `start_variants({ mode:\n'zero_to_one' })` call (no `sourceContext`) takes the single-call path and\nreturns `work_items_ready` directly; adding any `sourceArtifacts` /\n`sourceUrls` switches it to the multi-step source-research flow.\n\nIf the video is supplementary to an existing project (the user wants\nvariants of a specific element / file / route in their open project and\nattached a video for motion reference), use\n`start_variants({ mode: 'existing', target: ... })` instead and embed the\nmotion spec into each variant's `briefs[i].body` \u2014 `sourceArtifacts` are\nnot part of the existing-project flow.\n\nPer-variant briefs and codegen should treat the motionBrief as authoritative\ntiming / easing / choreography guidance \u2014 visual styling can diverge per\nvariant, motion fidelity should not.";
 //# sourceMappingURL=describe-motion-protocol.d.ts.map

package/dist/utils/skills/describe-motion-protocol.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"describe-motion-protocol.d.ts","sourceRoot":"","sources":["../../../src/utils/skills/describe-motion-protocol.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,wBAAwB,gzRA0MA,CAAC"}
+{"version":3,"file":"describe-motion-protocol.d.ts","sourceRoot":"","sources":["../../../src/utils/skills/describe-motion-protocol.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,eAAO,MAAM,wBAAwB,w1RA0MA,CAAC"}

package/dist/utils/skills/describe-motion-protocol.js

@@ -191,17 +191,17 @@ sourceArtifacts: [
 **Routing.** A request that carries any \`sourceArtifacts\` (motionBrief,
 visualBrief, screenshotNotes, siteBrief, urlText) is source-grounded.
 Source-grounded fresh-project sessions go through
-\`create_zero_to_one_project\` — its tool description explicitly lists
-\`motionBrief\` alongside the other artifact kinds. Pass the artifacts under
-\`sourceContext.sourceArtifacts\` on that call.
-
-Do **NOT** call \`start_variants({ mode: 'zero_to_one' })\` directly with a
-\`sourceContext\` containing any \`sourceArtifacts\` — that handler rejects
-the request with \`INVALID_STAGE_ACTION\` and instructs you to use
-\`create_zero_to_one_project\` instead, because the source-research
-(\`source_plan\`) and brief-approval hops are only wired into the
-\`create_zero_to_one_project\` path. \`start_variants(mode='zero_to_one')\`
-is for prompt-only fresh projects.
+\`start_variants({ mode: 'zero_to_one' })\` — pass the artifacts under
+\`sourceContext.sourceArtifacts\`. start_variants detects the source-grounded
+input and runs the source-research (\`source_plan\`) flow automatically,
+returning \`stage: 'awaiting_source_plan'\` (rather than the prompt-only
+single-call \`work_items_ready\`).
+
+start_variants is the single fresh-project entry point — there is **no**
+separate source-grounded kickoff tool. A prompt-only \`start_variants({ mode:
+'zero_to_one' })\` call (no \`sourceContext\`) takes the single-call path and
+returns \`work_items_ready\` directly; adding any \`sourceArtifacts\` /
+\`sourceUrls\` switches it to the multi-step source-research flow.
 
 If the video is supplementary to an existing project (the user wants
 variants of a specific element / file / route in their open project and

package/dist/utils/skills/shared-variants-protocol.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared-variants-protocol.d.ts","sourceRoot":"","sources":["../../../src/utils/skills/shared-variants-protocol.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,QAGgF,CAAC;AAEtH,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,mjCAQoK,CAAC;AAExM;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE;IAC9C,2DAA2D;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,YAAY,EAAE,MAAM,CAAC;IACrB,8FAA8F;IAC9F,cAAc,EAAE,MAAM,CAAC;CACxB,GAAG,MAAM,CA2GT"}
+{"version":3,"file":"shared-variants-protocol.d.ts","sourceRoot":"","sources":["../../../src/utils/skills/shared-variants-protocol.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,QAGgF,CAAC;AAEtH,0DAA0D;AAC1D,eAAO,MAAM,sBAAsB,mjCAQoK,CAAC;AAExM;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,IAAI,EAAE;IAC9C,2DAA2D;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,YAAY,EAAE,MAAM,CAAC;IACrB,8FAA8F;IAC9F,cAAc,EAAE,MAAM,CAAC;CACxB,GAAG,MAAM,CA6GT"}

package/dist/utils/skills/shared-variants-protocol.js

@@ -88,14 +88,15 @@ For brand-new projects the user describes from scratch ("build me a Vite todo ap
 
 ---
 
-### Sub-flow C: Fresh project (source-grounded) — \`create_zero_to_one_project\`
+### Sub-flow C: Fresh project (source-grounded) — \`start_variants\`
 
 **Trigger:** the user provided inspiration URLs ("like stripe.com"), attached an image in chat (pasted screenshot/mockup), attached a video/gif/screen recording ("match this animation", "build the hover from this clip"), referenced an image or video file path (e.g. \`~/Desktop/mockup.png\`, \`~/Desktop/hover.mov\`), or supplied written design context. Image-only and video-only requests with no URLs are valid and belong in this sub-flow — do not fall back to Sub-flow B.
 
-Use \`create_zero_to_one_project\` for this sub-flow. \`start_variants({ mode: 'zero_to_one' })\` rejects any request whose \`sourceContext\` carries \`sourceUrls\`, \`sourceArtifacts\`, or \`sourceIntent\` — that handler is prompt-only (Sub-flow B). The source-research hop is only wired into \`create_zero_to_one_project\`.
+Use the same \`start_variants({ mode: 'zero_to_one' })\` entry point as Sub-flow B, but pass a \`sourceContext\`. When \`sourceContext\` carries \`sourceUrls\`, \`sourceArtifacts\`, or \`sourceIntent\`, start_variants detects the source-grounded input and runs the source-research flow automatically — returning \`stage: 'awaiting_source_plan'\` instead of the prompt-only single-call \`work_items_ready\`. start_variants is the single fresh-project entry point — there is no separate source-grounded kickoff tool.
 
-1. **Call \`create_zero_to_one_project\`** with:
+1. **Call \`start_variants\`** with:
    - \`prompt\`: the user's request verbatim
+   - \`mode\`: \`'zero_to_one'\`
    - \`framework\` (optional, defaults to \`'vite'\`)
    - \`destinationParent\` (optional, absolute path)
    - \`sourceContext\`:
@@ -103,7 +104,7 @@ Use \`create_zero_to_one_project\` for this sub-flow. \`start_variants({ mode: '
      - \`preserveBrand\` (optional): true when the user wants brand colors/type/voice preserved exactly
      - \`sourceArtifacts\` (optional): pasted briefs, screenshot notes, written design context, **agent-described images**, OR **agent-described videos**. If the user attached one or more images in chat OR referenced an image file path: for path references, open the file with your \`Read\` tool first; then in both cases describe what you see — layout, colour palette, typography, component patterns, voice — and pass each image as a \`sourceArtifacts\` entry with \`kind: 'visualBrief'\` (overall design system) or \`kind: 'screenshotNotes'\` (specific screen). If the user attached a video, gif, screen recording, or frame sequence OR referenced a video file path: run the **Describe Motion protocol** (see section below) to extract a structured motion spec, and pass each spec as a \`sourceArtifacts\` entry with \`kind: 'motionBrief'\`. One \`motionBrief\` per distinct interaction in the video — do not merge multiple interactions into one entry. Do not invent a URL for an image or video. \`sourceArtifacts\` can fully replace \`sourceUrls\` — image-only and video-only calls (no URLs) are supported.
 
-   Response (source-grounded): \`{ sessionId, stage: 'awaiting_source_plan', sourcePlanWorkItem, nextAction: 'continue_variants', visualEditor? }\`. Share \`visualEditor.url\` with the user immediately.
+   Response (source-grounded): \`{ sessionId, stage: 'awaiting_source_plan', mode: 'zero_to_one', sourcePlanWorkItem, nextAction: 'continue_variants', destinationPath, visualEditor? }\`. Share \`visualEditor.url\` with the user immediately.
 
 2. **Process the source_plan work item.** Classify the inspiration sources, produce per-slot DESIGN.md, and choose \`executionPlan.mode\`:
    - DESIGN.md per slot matches the bundled catalog shape under \`src/services/templates/designmd/*.md\` (Visual Theme & Atmosphere → Color Palette & Roles → Typography Rules → Component Stylings → Layout Principles → Depth & Elevation → Do's & Don'ts → Responsive Behavior → Agent Prompt Guide). For sections you cannot determine from the source, write \`Not observed\` rather than inventing values.
@@ -131,6 +132,7 @@ ${describe_motion_protocol_1.DESCRIBE_MOTION_PROTOCOL}
 - Don't dump diffs in chat by default. The iframe chip is the primary review surface. If the user explicitly asks "show me the diffs", then print them.
 - Parallel code-gen is the only step where you fan out — every other step is one tool call.
 - **Per-variant cancel** is handled by the iframe — the UI calls \`cancel_variant({ sessionId, variantId })\` when the user clicks the cancel button on a card. You do not need to call this from the agent side. Use \`cancel_variants\` (plural) only to kill an entire session.
+- **Honor aborts mid-generation.** When the user removes or cancels a direction while it is still generating, the very next \`report_variant_complete\` for that work item returns \`{ aborted: true }\`. Treat that as a hard stop for that one direction: abandon it immediately, do NOT retry or re-report it, and keep going on the rest. For directions that take a while to build, send periodic \`status: 'running'\` heartbeats through \`report_variant_complete\` so an abort is caught early instead of after you have spent the work — a cleared lease surfacing as \`{ aborted: true }\` (rather than an error) is the signal to drop it.
 - Quality bar is mandatory: avoid generic hero-card pages; preserve source depth, realistic workflow detail, and responsive interaction states unless the user explicitly asks for a lighter build.`;
 }
 //# sourceMappingURL=shared-variants-protocol.js.map

package/dist/utils/skills/shared-variants-protocol.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared-variants-protocol.js","sourceRoot":"","sources":["../../../src/utils/skills/shared-variants-protocol.ts"],"names":[],"mappings":";;;AA2BA,8DAoHC;AA/ID,yEAAsE;AAEtE;;;;GAIG;AACU,QAAA,wBAAwB,GACnC,kGAAkG;IAClG,0FAA0F;IAC1F,mHAAmH,CAAC;AAEtH,0DAA0D;AAC7C,QAAA,sBAAsB,GAAG;;;;;;;;uMAQiK,CAAC;AAExM;;;GAGG;AACH,SAAgB,yBAAyB,CAAC,IASzC;IACC,OAAO;;oMAE2L,IAAI,CAAC,cAAc,uJAAuJ,IAAI,CAAC,cAAc;;;;;;;;;;;;;;uKAc1N,gCAAwB;;;;;;;KAO1L,IAAI,CAAC,KAAK;;;;;;;;;;;KAWV,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;;;uKAiBiJ,gCAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuC7L,mDAAwB;;;;;;0CAMgB,IAAI,CAAC,cAAc;;;;;;;;;oMASuI,CAAC;AACrM,CAAC"}
+{"version":3,"file":"shared-variants-protocol.js","sourceRoot":"","sources":["../../../src/utils/skills/shared-variants-protocol.ts"],"names":[],"mappings":";;;AA2BA,8DAsHC;AAjJD,yEAAsE;AAEtE;;;;GAIG;AACU,QAAA,wBAAwB,GACnC,kGAAkG;IAClG,0FAA0F;IAC1F,mHAAmH,CAAC;AAEtH,0DAA0D;AAC7C,QAAA,sBAAsB,GAAG;;;;;;;;uMAQiK,CAAC;AAExM;;;GAGG;AACH,SAAgB,yBAAyB,CAAC,IASzC;IACC,OAAO;;oMAE2L,IAAI,CAAC,cAAc,uJAAuJ,IAAI,CAAC,cAAc;;;;;;;;;;;;;;uKAc1N,gCAAwB;;;;;;;KAO1L,IAAI,CAAC,KAAK;;;;;;;;;;;KAWV,IAAI,CAAC,YAAY;;;;;;;;;;;;;;;;;uKAiBiJ,gCAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwC7L,mDAAwB;;;;;;0CAMgB,IAAI,CAAC,cAAc;;;;;;;;;;oMAUuI,CAAC;AACrM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rivet-design",
-  "version": "0.10.6",
+  "version": "0.10.8",
   "description": "Local visual web development tool with AI-powered code modification",
   "main": "dist/index.js",
   "workspaces": [
@@ -16,6 +16,8 @@
     "build": "tsc && npm run build:assets && npm run build:ui && npm run build:bin",
     "build:assets": "mkdir -p dist/services/templates/designmd && cp src/services/templates/designmd/*.md dist/services/templates/designmd/",
     "build:ui": "cd src/ui && vite build",
+    "storybook:ui": "yarn workspace @rivet/ui storybook",
+    "build-storybook:ui": "yarn workspace @rivet/ui build-storybook",
     "build:bin": "mkdir -p bin && cp src/bin-template.js bin/rivet.js && chmod +x bin/rivet.js",
     "dev": "tsc --watch",
     "clean": "rm -rf dist src/ui/dist bin",