openplanr 2.5.0 → 2.6.0

package/lib/host-packages/cursor/openplanr/.openplanr-content.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "manifest.json",
-      "digest": "sha256:d421dd3f039a7f74f572246e5c0a20ea7b3c92527b09f4f56552074c820c93ae"
+      "digest": "sha256:6522cb9c4125827f13984f1a0026907e9a2d60eee955a6981aeef62a6bc09ba9"
     },
     {
       "path": "rules/planr-artifact.mdc",
@@ -244,7 +244,7 @@
     },
     {
       "path": "rules/planr-design-loop/scripts/design.mjs",
-      "digest": "sha256:4374afc1003a4869cc423a093950b5d192a63df314329ee0e30ea423d163560b"
+      "digest": "sha256:3fec9a1d47bc41c0caf4909a2c4b9d00205da630c015a46f6921caf2a4d7a2d2"
     },
     {
       "path": "rules/planr-design-loop/scripts/runtime/notices/entities.txt",
@@ -264,7 +264,15 @@
     },
     {
       "path": "rules/planr-design-loop/scripts/runtime/packages/design/templates/studio/enhancements.js",
-      "digest": "sha256:8f2eea1ed15762799c999745ccfd8f340183ddb12c91fc8224e09ce7ca7e2c97"
+      "digest": "sha256:e967e9a622018a3bfdd52751ecfa6e842dbbf1922f573f3395a2bf29ca028589"
+    },
+    {
+      "path": "rules/planr-design-loop/scripts/runtime/packages/design/templates/studio/handoff-center.css",
+      "digest": "sha256:2f972f98d16723fd19989df349f6342e6eae951820e53ca84f310b433ef83b48"
+    },
+    {
+      "path": "rules/planr-design-loop/scripts/runtime/packages/design/templates/studio/handoff-center.js",
+      "digest": "sha256:012f648cf3936be649ac5f4935412a91489c8f90e076400dc19fbc6ebbf38b21"
     },
     {
       "path": "rules/planr-design-loop/scripts/runtime/packages/design/templates/studio/share.css",
@@ -420,7 +428,7 @@
     },
     {
       "path": "rules/planr-design-review/scripts/design.mjs",
-      "digest": "sha256:4374afc1003a4869cc423a093950b5d192a63df314329ee0e30ea423d163560b"
+      "digest": "sha256:3fec9a1d47bc41c0caf4909a2c4b9d00205da630c015a46f6921caf2a4d7a2d2"
     },
     {
       "path": "rules/planr-design-review/scripts/runtime/notices/entities.txt",
@@ -440,7 +448,15 @@
     },
     {
       "path": "rules/planr-design-review/scripts/runtime/packages/design/templates/studio/enhancements.js",
-      "digest": "sha256:8f2eea1ed15762799c999745ccfd8f340183ddb12c91fc8224e09ce7ca7e2c97"
+      "digest": "sha256:e967e9a622018a3bfdd52751ecfa6e842dbbf1922f573f3395a2bf29ca028589"
+    },
+    {
+      "path": "rules/planr-design-review/scripts/runtime/packages/design/templates/studio/handoff-center.css",
+      "digest": "sha256:2f972f98d16723fd19989df349f6342e6eae951820e53ca84f310b433ef83b48"
+    },
+    {
+      "path": "rules/planr-design-review/scripts/runtime/packages/design/templates/studio/handoff-center.js",
+      "digest": "sha256:012f648cf3936be649ac5f4935412a91489c8f90e076400dc19fbc6ebbf38b21"
     },
     {
       "path": "rules/planr-design-review/scripts/runtime/packages/design/templates/studio/share.css",
@@ -596,7 +612,7 @@
     },
     {
       "path": "rules/planr-design/scripts/design.mjs",
-      "digest": "sha256:4374afc1003a4869cc423a093950b5d192a63df314329ee0e30ea423d163560b"
+      "digest": "sha256:3fec9a1d47bc41c0caf4909a2c4b9d00205da630c015a46f6921caf2a4d7a2d2"
     },
     {
       "path": "rules/planr-design/scripts/runtime/notices/entities.txt",
@@ -616,7 +632,15 @@
     },
     {
       "path": "rules/planr-design/scripts/runtime/packages/design/templates/studio/enhancements.js",
-      "digest": "sha256:8f2eea1ed15762799c999745ccfd8f340183ddb12c91fc8224e09ce7ca7e2c97"
+      "digest": "sha256:e967e9a622018a3bfdd52751ecfa6e842dbbf1922f573f3395a2bf29ca028589"
+    },
+    {
+      "path": "rules/planr-design/scripts/runtime/packages/design/templates/studio/handoff-center.css",
+      "digest": "sha256:2f972f98d16723fd19989df349f6342e6eae951820e53ca84f310b433ef83b48"
+    },
+    {
+      "path": "rules/planr-design/scripts/runtime/packages/design/templates/studio/handoff-center.js",
+      "digest": "sha256:012f648cf3936be649ac5f4935412a91489c8f90e076400dc19fbc6ebbf38b21"
     },
     {
       "path": "rules/planr-design/scripts/runtime/packages/design/templates/studio/share.css",
@@ -804,7 +828,7 @@
     },
     {
       "path": "rules/planr-plan/scripts/design.mjs",
-      "digest": "sha256:4374afc1003a4869cc423a093950b5d192a63df314329ee0e30ea423d163560b"
+      "digest": "sha256:3fec9a1d47bc41c0caf4909a2c4b9d00205da630c015a46f6921caf2a4d7a2d2"
     },
     {
       "path": "rules/planr-plan/scripts/planning-ids.mjs",
@@ -828,7 +852,15 @@
     },
     {
       "path": "rules/planr-plan/scripts/runtime/packages/design/templates/studio/enhancements.js",
-      "digest": "sha256:8f2eea1ed15762799c999745ccfd8f340183ddb12c91fc8224e09ce7ca7e2c97"
+      "digest": "sha256:e967e9a622018a3bfdd52751ecfa6e842dbbf1922f573f3395a2bf29ca028589"
+    },
+    {
+      "path": "rules/planr-plan/scripts/runtime/packages/design/templates/studio/handoff-center.css",
+      "digest": "sha256:2f972f98d16723fd19989df349f6342e6eae951820e53ca84f310b433ef83b48"
+    },
+    {
+      "path": "rules/planr-plan/scripts/runtime/packages/design/templates/studio/handoff-center.js",
+      "digest": "sha256:012f648cf3936be649ac5f4935412a91489c8f90e076400dc19fbc6ebbf38b21"
     },
     {
       "path": "rules/planr-plan/scripts/runtime/packages/design/templates/studio/share.css",
@@ -1011,5 +1043,5 @@
       "digest": "sha256:6378ad3477e4be8b7e916c4249404c50cafecac1c70ffbf5a1a2fce195dfea16"
     }
   ],
-  "contentDigest": "sha256:503d63325361da770219c363855bc4070b690262d6af62a3c9f37704053743ec"
+  "contentDigest": "sha256:1d01c89fc1f8cfc87f27126936ae0b7b39707a4da2c1ee1ad439728ded8f58ee"
 }

package/lib/host-packages/cursor/openplanr/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "openplanr",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "ruleCount": 27,
   "rules": [
     "rules/planr-artifact.mdc",

package/lib/host-packages/cursor/openplanr/rules/planr-design/scripts/design.mjs

@@ -3,7 +3,7 @@
 // packages/design/lib/design/utility.mjs
 import { spawn } from "node:child_process";
 import { existsSync as existsSync12, mkdirSync as mkdirSync9, readFileSync as readFileSync17, realpathSync as realpathSync7, writeFileSync as writeFileSync9 } from "node:fs";
-import { dirname as dirname14, join as join13, resolve as resolve7 } from "node:path";
+import { dirname as dirname14, join as join13, resolve as resolve8 } from "node:path";
 import { fileURLToPath as fileURLToPath3 } from "node:url";
 
 // packages/design/lib/design/document.mjs
@@ -354,11 +354,11 @@ function createArtifactBridgeTools(document2, window2) {
         const outputWidth = Math.max(1, Math.round(width * scale)), outputHeight = Math.max(1, Math.round(height * scale));
         const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + outputWidth + '" height="' + outputHeight + '" viewBox="0 0 ' + width + " " + height + '"><foreignObject width="' + width + '" height="' + height + '">' + markup + "</foreignObject></svg>";
         image = new Image();
-        await new Promise((resolve8, reject) => {
+        await new Promise((resolve9, reject) => {
           const timer = setTimeout(() => reject(new Error("Thumbnail capture timed out.")), Math.max(1, deadline - Date.now()));
           image.onload = () => {
             clearTimeout(timer);
-            resolve8();
+            resolve9();
           };
           image.onerror = () => {
             clearTimeout(timer);
@@ -13081,12 +13081,14 @@ ${shellMarkup}
 }
 
 // packages/design/lib/design/studio-render.mjs
-var DESIGN_STUDIO_VERSION = "1.8.5";
+var DESIGN_STUDIO_VERSION = "1.9.0";
 var DESIGN_STUDIO_ASSETS = Object.freeze({
   style: "templates/studio/studio.css",
   runtime: "templates/studio/studio.js",
   enhancementsStyle: "templates/studio/enhancements.css",
-  enhancementsRuntime: "templates/studio/enhancements.js"
+  enhancementsRuntime: "templates/studio/enhancements.js",
+  handoffCenterStyle: "templates/studio/handoff-center.css",
+  handoffCenterRuntime: "templates/studio/handoff-center.js"
 });
 function applyDesignStudioTheme(preference) {
   if (!preference) {
@@ -13543,8 +13545,8 @@ function renderDesignStudio(input = {}, options = {}) {
   return renderDesignStudioMarkup({ ...input, entries: input.entries ?? createDesignStudioEntries(input.document, input.envelope) }, {
     ...options,
     renderShell: renderArtifactShellDocument,
-    style: ["studio.css", "enhancements.css"].map((file) => readFileSync7(new URL(file, templateRoot), "utf8")).join("\n"),
-    runtime: renderDesignReviewExportSource() + "\n" + ["studio.js", "enhancements.js"].map((file) => readFileSync7(new URL(file, templateRoot), "utf8")).join("\n")
+    style: ["studio.css", "enhancements.css", "handoff-center.css"].map((file) => readFileSync7(new URL(file, templateRoot), "utf8")).join("\n"),
+    runtime: renderDesignReviewExportSource() + "\n" + ["studio.js", "enhancements.js", "handoff-center.js"].map((file) => readFileSync7(new URL(file, templateRoot), "utf8")).join("\n")
   });
 }
 
@@ -13827,7 +13829,7 @@ function designRendererRevision() {
     json({
       version: DESIGN_RENDERER_VERSION,
       stage: hash(stageRuntimeBytes()),
-      assets: ["studio.css", "studio.js", "enhancements.css", "enhancements.js"].filter((name) => existsSync3(new URL(`../../templates/studio/${name}`, new URL("./runtime/packages/design/lib/design/document.mjs", import.meta.url).href))).map(
+      assets: ["studio.css", "studio.js", "enhancements.css", "enhancements.js", "handoff-center.css", "handoff-center.js"].filter((name) => existsSync3(new URL(`../../templates/studio/${name}`, new URL("./runtime/packages/design/lib/design/document.mjs", import.meta.url).href))).map(
         (name) => hash(
           readFileSync8(
             new URL(`../../templates/studio/${name}`, new URL("./runtime/packages/design/lib/design/document.mjs", import.meta.url).href)
@@ -13994,7 +13996,7 @@ ${errors.join("\n")}`);
 
 // packages/design/lib/design/review.mjs
 import { existsSync as existsSync11, readFileSync as readFileSync16 } from "node:fs";
-import { dirname as dirname13, join as join12 } from "node:path";
+import { dirname as dirname13, join as join12, relative as relative4, resolve as resolve7 } from "node:path";
 
 // packages/artifact/lib/artifact/import.mjs
 import {
@@ -18363,6 +18365,52 @@ function currentImplementationBasis(file, env) {
     }
   };
 }
+function proposeImplementationPackage(file, env) {
+  const current = currentDesign(file);
+  const basis = currentImplementationBasis(file, env);
+  const repository = projectRoot(current.root);
+  const paths = [.../* @__PURE__ */ new Set([
+    designSpecPath(current.root),
+    ...(current.sourceFiles ?? []).map((path) => resolve7(current.root, path))
+  ])].filter((path) => existsSync11(path));
+  const sources = paths.map((path, index) => {
+    const logicalPath2 = relative4(repository, path).replaceAll("\\", "/");
+    const extension = logicalPath2.split(".").pop()?.toLowerCase();
+    return {
+      id: `SRC-${String(index + 1).padStart(3, "0")}`,
+      kind: path === designSpecPath(current.root) ? "design-specification" : extension === "html" ? "screen" : ["css", "json"].includes(extension) ? "token" : "component",
+      path: logicalPath2,
+      revision: basis.sourceRevision,
+      digest: `sha256:${hash(readFileSync16(path))}`
+    };
+  });
+  const sourceByPath = new Map(sources.map((source) => [source.path, source.id]));
+  const sourceId = (path) => sourceByPath.get(relative4(repository, resolve7(current.root, path)).replaceAll("\\", "/"));
+  const selected = current.document.variants.find((variant) => variant.id === current.document.selectedVariant);
+  const requirements = current.document.screens.map((screen) => {
+    const authored = selected?.sources?.[screen.id] ?? screen.source;
+    const refs = [authored?.html, ...authored?.styles ?? [], ...authored?.scripts ?? []].map(sourceId).filter(Boolean);
+    return {
+      kind: "behavior",
+      statement: `${screen.title}: ${screen.description || "Implement the approved screen behavior and states."}`,
+      sourceRefs: refs.length ? refs : [sources[0].id],
+      verification: current.document.frames.map((frame) => `${screen.title} matches the approved ${frame.label} frame at ${frame.width} \xD7 ${frame.height}.`)
+    };
+  });
+  const allRefs = sources.map((source) => source.id);
+  requirements.push({
+    kind: "accessibility",
+    statement: "Preserve the approved interaction semantics, keyboard path, focus behavior and readable status communication.",
+    sourceRefs: allRefs,
+    verification: ["Keyboard-only use, visible focus, screen-reader labels and status announcements pass on every implemented screen."]
+  });
+  return {
+    id: `${current.document.id}-implementation`,
+    title: `${current.document.title} implementation package`,
+    sources,
+    requirements
+  };
+}
 async function persistDesignTaste(current, state) {
   const path = join12(
     projectRoot(current.root),
@@ -18585,7 +18633,12 @@ ${renderArtifactParentRuntime({ ...options, adapterRuntimeUrl: `${base}api/desig
           const unlock = await acquireStartLock(join12(design.root, ".design/render.lock"));
           try {
             const root = dirname13(designSpecPath(design.root));
-            respond(res, 200, { ok: true, draft: readImplementationHandoffDraft(root), ...readImplementationHandoffLifecycle(root), approvalPreview: previewImplementationHandoffApproval(root) });
+            let proposal = null;
+            try {
+              proposal = proposeImplementationPackage(file, env);
+            } catch {
+            }
+            respond(res, 200, { ok: true, draft: readImplementationHandoffDraft(root), ...readImplementationHandoffLifecycle(root), approvalPreview: previewImplementationHandoffApproval(root), proposal });
           } finally {
             unlock();
           }
@@ -19066,7 +19119,7 @@ function verifyDesignDocument(file, report) {
   const images = (Array.isArray(report.screenshots) ? report.screenshots : []).filter((item2) => {
     const path = typeof item2 === "string" ? item2 : item2?.path;
     try {
-      return typeof path === "string" && isPng(readFileSync17(resolve7(path)));
+      return typeof path === "string" && isPng(readFileSync17(resolve8(path)));
     } catch {
       return false;
     }
@@ -19095,14 +19148,14 @@ async function designUtility(argv, { stdout = (value) => process.stdout.write(`$
     flags[key] = ["json", "no-open"].includes(key) ? true : args[++i];
   }
   if (flags.view && !["canvas", "prototype", "walkthrough"].includes(flags.view)) throw new Error("View must be canvas, prototype, or walkthrough.");
-  const file = resolve7(input);
+  const file = resolve8(input);
   let result;
   if (command === "handoff") {
     const action3 = flags.action ?? "inspect";
     if (action3 === "inspect") result = readDesignHandoff(file);
     else {
       const snapshot2 = readDesignHandoff(file);
-      const input2 = flags.input ? readJson2(resolve7(flags.input)) : {};
+      const input2 = flags.input ? readJson2(resolve8(flags.input)) : {};
       result = await updateDesignHandoff(file, { ...input2, action: action3, revision: input2.revision ?? snapshot2.revision, version: input2.version ?? (snapshot2.draft?.version ?? 0) });
     }
   }
@@ -19137,7 +19190,7 @@ async function designUtility(argv, { stdout = (value) => process.stdout.write(`$
     const current = currentDesign(file), view = flags.view ?? current.document.defaultView;
     const state = readJson2(join13(current.root, ".design/studio-state.json"), { state: {} }).state;
     if (flags.format && flags.format !== "html") throw new Error("Portable export supports HTML. Use the studio PNG action for browser-rendered captures.");
-    const output = resolve7(flags.output ?? join13(current.root, `${view}-export.html`));
+    const output = resolve8(flags.output ?? join13(current.root, `${view}-export.html`));
     if (existsSync12(output)) throw new Error(`Export already exists: ${output}. Choose a new --output path.`);
     mkdirSync9(dirname14(output), { recursive: true });
     writeFileSync9(output, standaloneDesignHtml({ ...current, state }, view), { flag: "wx" });
@@ -19145,7 +19198,7 @@ async function designUtility(argv, { stdout = (value) => process.stdout.write(`$
   }
   if (command === "verify") {
     if (!flags.report) throw new Error("verify requires --report <browser-report.json>.");
-    result = verifyDesignDocument(file, readJson2(resolve7(flags.report)));
+    result = verifyDesignDocument(file, readJson2(resolve8(flags.report)));
   }
   if (command === "feedback") {
     await syncDesignShare(file, { env, fetchImpl });
@@ -19156,7 +19209,7 @@ async function designUtility(argv, { stdout = (value) => process.stdout.write(`$
       if (!["json", "markdown"].includes(format)) throw new Error("Feedback export format must be json or markdown.");
       if (!["current", "all"].includes(scope)) throw new Error("Feedback export scope must be current or all.");
       if (!flags.output) throw new Error("Feedback export requires --output <path>.");
-      const output = resolve7(flags.output);
+      const output = resolve8(flags.output);
       if (existsSync12(output)) throw new Error("Feedback export already exists. Choose a new --output path.");
       const snapshot2 = exportDesignReview(file, { scope, env });
       mkdirSync9(dirname14(output), { recursive: true });

package/lib/host-packages/cursor/openplanr/rules/planr-design/scripts/runtime/packages/design/templates/studio/enhancements.js

@@ -736,7 +736,7 @@
       await loadPair();
     } catch (error) { status.textContent = error.message; content.append(button('Retry comparison', () => compareRevisions(beforeId, afterId))); }
   }
-  async function handoff() {
+  async function reviewHandoff() {
     const { content, status } = modal('Review handoff', 'design-handoff'); status.textContent = 'Loading review decisions…'; let response;
     const render = () => {
       content.replaceChildren(); const draft = response.draft;
@@ -766,7 +766,11 @@
       catch (error) { status.textContent = error.message; for (const [value,disabled] of previousDisabled) if (value.isConnected) value.disabled = disabled; }
     };
     try { response = await request('loadHandoff', 'handoffUrl'); if (response.metadata) metadata = response.metadata; render(); status.textContent = ''; }
-    catch (error) { status.textContent = error.message; content.append(button('Retry', handoff)); }
+    catch (error) { status.textContent = error.message; content.append(button('Retry', reviewHandoff)); }
+  }
+  function handoff() {
+    if (window.__openPlanrDesignHandoffCenter?.open) return window.__openPlanrDesignHandoffCenter.open();
+    return reviewHandoff();
   }
   async function refreshExperience() {
     const previousContext = JSON.stringify(experience?.reviewContext || payload.reviewContext);
@@ -797,6 +801,19 @@
     on(document, 'openplanr:design-experience-changed', () => { void refreshExperience(); });
     const dispose = () => { disposed = true; activeDialog?.dismiss(); for (const remove of destroyers.splice(0)) remove(); clearTimeout(toastTimer); };
     on(window, 'pagehide', dispose); on(root, 'planr:design-destroy', dispose);
+    window.__openPlanrDesignHandoffBridge = Object.freeze({
+      owner,
+      revision,
+      announce,
+      openReviewHandoff: reviewHandoff,
+      loadReadiness: () => request('loadReadiness', 'readinessUrl'),
+      loadReviewHandoff: () => request('loadHandoff', 'handoffUrl'),
+      updateReviewHandoff: input => request('updateHandoff', 'handoffUrl', { ...input, revision: revision() }),
+      loadImplementationHandoff: () => request('loadImplementationHandoff', 'implementationHandoffUrl'),
+      updateImplementationHandoff: input => request('updateImplementationHandoff', 'implementationHandoffUrl', input),
+      continueToActiveHost: typeof options().continueToPlan === 'function' ? handoff => options().continueToPlan(handoff) : null,
+      context: () => ({ designId: design.id, title: design.title, revision: revision(), host: options().activeHost || options().host || '' }),
+    });
     window.__openPlanrDesignExperience = Object.freeze({ about, profile:editProfile, setTheme, history, compare: compareRevisions, handoff, refresh: refreshExperience, getState: () => ({ railTab, inspectorEnabled, profile:{...profile}, theme:themePreference, metadata: structuredClone(metadata) }) });
   }
   const started = Date.now();

package/lib/host-packages/cursor/openplanr/rules/planr-design/scripts/runtime/packages/design/templates/studio/handoff-center.css

@@ -0,0 +1,81 @@
+.design-handoff-center {
+  position:absolute; z-index:42; inset:var(--planr-toolbar-height) 0 0 auto;
+  display:grid; grid-template-rows:auto auto minmax(0,1fr) auto;
+  box-sizing:border-box; width:var(--planr-review-rail-width); max-width:calc(100% - 16px);
+  border-left:1px solid var(--planr-color-rule); background:var(--planr-color-chrome);
+  color:var(--planr-color-text); box-shadow:-12px 0 32px #0004;
+  font:400 var(--design-type-body,14px)/1.5 var(--planr-font-body);
+}
+.design-handoff-center > header { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; padding:12px 14px; border-bottom:1px solid var(--planr-color-rule); }
+.design-handoff-center h2,.design-handoff-center h3,.design-handoff-center h4 { margin:0; font-family:var(--planr-font-display); }
+.design-handoff-center h2 { font-size:18px; }
+.design-handoff-center h3 { font-size:20px; letter-spacing:-.02em; }
+.design-handoff-center h4 { font-size:14px; }
+.design-handoff-center p { margin:0; overflow-wrap:anywhere; }
+.design-handoff-eyebrow { display:block; color:var(--planr-color-primary); font-size:10px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; }
+.design-handoff-center button,.design-handoff-center input,.design-handoff-center textarea { box-sizing:border-box; font:inherit; }
+.design-handoff-center button { min-height:36px; border:1px solid var(--planr-color-rule); border-radius:6px; padding:8px 10px; color:var(--planr-color-text); background:var(--planr-color-panel); cursor:pointer; }
+.design-handoff-center button:disabled { cursor:wait; opacity:.55; }
+.design-handoff-center button:focus-visible,.design-handoff-center input:focus-visible,.design-handoff-center textarea:focus-visible,.design-handoff-center summary:focus-visible { outline:2px solid var(--planr-color-primary); outline-offset:2px; }
+.design-handoff-center .design-primary { width:100%; min-height:44px; color:var(--planr-color-background); background:var(--planr-color-primary); border-color:transparent; font-weight:650; }
+.design-handoff-center .design-danger { width:100%; color:var(--planr-color-danger); }
+.design-handoff-close { width:44px; height:44px; padding:0!important; background:transparent!important; font-size:22px!important; }
+.design-handoff-progress { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:8px; border-bottom:1px solid var(--planr-color-rule); overflow-x:auto; }
+.design-handoff-step { display:grid; justify-items:center; gap:3px; min-width:52px; min-height:58px!important; padding:6px 3px!important; border-color:transparent!important; background:transparent!important; color:var(--planr-color-text-muted)!important; font-size:9px!important; line-height:1.2!important; text-align:center; }
+.design-handoff-step > span:first-child { font:650 11px/1 var(--planr-font-body); }
+.design-handoff-step[aria-current="step"] { color:var(--planr-color-text)!important; background:var(--planr-color-raised)!important; border-color:var(--planr-color-rule)!important; }
+.design-handoff-badge { display:inline-flex; align-items:center; gap:4px; width:max-content; max-width:100%; border:1px solid var(--planr-color-rule); border-radius:999px; padding:2px 7px; color:var(--planr-color-text-muted); font-size:10px; font-weight:650; line-height:1.4; }
+.design-handoff-badge::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor; }
+.design-handoff-badge[data-status="ready"],.design-handoff-badge[data-status="pass"],.design-handoff-badge[data-status="approved"] { color:var(--planr-color-primary); }
+.design-handoff-badge[data-status="blocked"],.design-handoff-badge[data-status="revoked"] { color:var(--planr-color-danger); }
+.design-handoff-badge[data-status="attention"],.design-handoff-badge[data-status="stale"],.design-handoff-badge[data-status="superseded"] { color:#d89a39; }
+.design-handoff-step .design-handoff-badge { max-width:44px; overflow:hidden; padding:0; border:0; color:inherit; text-indent:-999px; }
+.design-handoff-step .design-handoff-badge::before { width:7px; height:7px; }
+.design-handoff-content { min-width:0; overflow:auto; overscroll-behavior:contain; padding:18px 14px 28px; }
+.design-handoff-step-header { display:grid; gap:6px; margin-bottom:18px; }
+.design-handoff-step-header p,.design-handoff-content .design-muted { color:var(--planr-color-text-muted); font-size:12px; }
+.design-handoff-summary { display:grid; gap:10px; margin-bottom:16px; padding:12px; border:1px solid var(--planr-color-rule); border-radius:8px; background:var(--planr-color-raised); }
+.design-handoff-summary strong { font-size:13px; line-height:1.45; }
+.design-handoff-empty { display:grid; gap:7px; margin:12px 0 18px; padding:18px 14px; border:1px dashed var(--planr-color-rule); border-radius:8px; }
+.design-handoff-empty p { color:var(--planr-color-text-muted); font-size:12px; }
+.design-handoff-checks,.design-handoff-requirement-list { display:grid; gap:8px; margin:0 0 18px; padding:0; list-style:none; }
+.design-handoff-checks li,.design-handoff-requirement-list li { display:grid; gap:8px; padding:10px; border:1px solid var(--planr-color-rule); border-radius:7px; }
+.design-handoff-checks li > div { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
+.design-handoff-checks strong,.design-handoff-requirement-list strong { font-size:12px; line-height:1.45; }
+.design-handoff-link { min-height:32px!important; padding:4px 0!important; border:0!important; background:transparent!important; color:var(--planr-color-primary)!important; text-align:left; }
+.design-handoff-review-groups { display:grid; gap:10px; margin-bottom:18px; }
+.design-handoff-review-group { display:grid; gap:7px; }
+.design-handoff-review-group article { display:grid; gap:4px; padding:9px 10px; border-left:2px solid var(--planr-color-rule); background:var(--planr-color-panel); font-size:12px; }
+.design-handoff-refinement { color:var(--planr-color-text-muted); }
+.design-handoff-package-editor,.design-handoff-requirements,.design-handoff-package-editor fieldset { display:grid; gap:12px; min-width:0; }
+.design-handoff-package-editor > label,.design-handoff-package-editor fieldset label,.design-handoff-content > label { display:grid; gap:6px; margin-bottom:14px; color:var(--planr-color-text-muted); font-size:12px; }
+.design-handoff-package-editor input,.design-handoff-package-editor textarea,.design-handoff-content > label input,.design-handoff-plan-result textarea { width:100%; min-height:44px; border:1px solid var(--planr-color-rule); border-radius:6px; padding:9px 10px; color:var(--planr-color-text); background:var(--planr-color-panel); }
+.design-handoff-package-editor textarea { min-height:82px; resize:vertical; }
+.design-handoff-package-editor fieldset { margin:0; border:1px solid var(--planr-color-rule); border-radius:7px; padding:10px; }
+.design-handoff-package-editor legend { padding:0 5px; color:var(--planr-color-text); font-size:11px; text-transform:capitalize; }
+.design-handoff-content details { margin:14px 0; border-top:1px solid var(--planr-color-rule); padding-top:12px; }
+.design-handoff-content summary { min-height:36px; cursor:pointer; color:var(--planr-color-text-muted); font-size:12px; }
+.design-handoff-approval-card { display:grid; gap:9px; margin-bottom:18px; padding:16px; border:1px solid var(--planr-color-rule); border-radius:8px; background:var(--planr-color-raised); }
+.design-handoff-plan-result { display:grid; gap:10px; margin-top:14px; }
+.design-handoff-plan-result code { display:block; overflow:auto; border:1px solid var(--planr-color-rule); border-radius:6px; padding:10px; background:var(--planr-color-background); font-size:11px; white-space:pre; }
+.design-handoff-copy { width:100%; }
+.design-handoff-center > footer { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:50px; padding:8px 12px; border-top:1px solid var(--planr-color-rule); background:var(--planr-color-chrome); }
+.design-handoff-center > footer p { flex:1; color:var(--planr-color-text-muted); font-size:10px; }
+.design-handoff-center > footer p[data-error="true"] { color:var(--planr-color-danger); }
+.design-handoff-center > footer button { flex:none; }
+.planr-shell[data-design-handoff-open="true"] .planr-review-rail { visibility:hidden; pointer-events:none; }
+@media (max-width:960px) {
+  .design-handoff-center { position:absolute; width:min(380px,calc(100% - 16px)); }
+}
+@media (max-width:680px) {
+  .design-handoff-center { inset:var(--planr-toolbar-height) 0 0; width:100%; max-width:none; border-left:0; }
+  .design-handoff-center button,.design-handoff-center input,.design-handoff-center textarea,.design-handoff-center summary { min-height:44px; }
+  .design-handoff-center input,.design-handoff-center textarea { font-size:16px; }
+  .design-handoff-progress { position:sticky; z-index:2; top:0; background:var(--planr-color-chrome); }
+  .design-handoff-content { padding-inline:16px; }
+}
+@media (prefers-reduced-motion:reduce) { .design-handoff-center * { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
+@media (forced-colors:active) {
+  .design-handoff-center,.design-handoff-summary,.design-handoff-empty,.design-handoff-checks li,.design-handoff-requirement-list li { border-color:CanvasText; }
+  .design-handoff-badge::before { forced-color-adjust:none; background:currentColor; }
+}