openplanr 2.2641.1 → 3.0.0

package/lib/host-packages/cursor/openplanr/rules/planr-sync/references/tracker-connections.md

@@ -0,0 +1,70 @@
+# GitHub and Linear connections
+
+These skills store and read no GitHub or Linear credentials. Remote steps run through a
+connection the host already has; the planning files stay the source of truth.
+
+## Use the host's connection
+
+- **Linear:** the host's Linear connection, whose tools read, create and update issues.
+- **GitHub:** the host's GitHub connection, or the GitHub CLI when
+  `gh auth status --hostname github.com` succeeds.
+
+Never ask the user for a token, read one from the environment or a file, or put one in a
+command, URL or file.
+
+## When a connection is missing
+
+Finish the local work first. Then report the remote step as not run and give the one
+line for the current host:
+
+| Host | Linear | GitHub |
+| --- | --- | --- |
+| Claude Code | Run `/plugin install linear@claude-plugins-official`, then sign in to Linear from `/mcp`. | Install the GitHub CLI (cli.github.com) and run `gh auth login`. |
+| Codex | Run `codex mcp add linear --url https://mcp.linear.app/mcp`, then `codex mcp login linear`. | Install the GitHub plugin from `/plugins`, or run `gh auth login`. |
+| Cursor | Add Linear from the Cursor Marketplace and sign in to Linear. | Install the GitHub CLI (cli.github.com) and run `gh auth login`. |
+
+Ask the user to try again once connected; never retry the remote step on your own.
+
+## Status mapping
+
+| Local status | Linear workflow state | GitHub issue |
+| --- | --- | --- |
+| `planning`, `pending` | Unstarted (for example Todo) | open |
+| `in-progress` | Started (for example In Progress) | open |
+| `done` | Completed (for example Done) | closed |
+| Backlog `open` | Backlog, else Unstarted | open |
+| Backlog `closed` | Completed | closed |
+| Backlog `promoted` | Leave as it is | Leave as it is |
+
+When reading state back, write only a status the item's type allows. A backlog item takes
+`open` or `closed` and keeps `promoted`.
+
+- Linear Completed or Canceled sets `done`, or `closed` for a backlog item. Started sets
+  `in-progress`, and Triage, Backlog or Unstarted sets `planning` for features and stories
+  and `pending` for quick tasks; a backlog item takes `open` from any of these. Epics and
+  task files keep their status.
+- A closed GitHub issue sets `done`, or `closed` for a backlog item. An open issue sets
+  `in-progress` for a `done` item and `open` for a `closed` backlog item; other statuses
+  stay as they are.
+
+## Links
+
+A linked item records its tracker identity in frontmatter. Update a linked item through
+that identity instead of creating another, and record the identity of everything you
+create.
+
+- **GitHub:** each item is one issue, recorded as `githubIssue`.
+- **Linear:** use the shapes the OpenPlanr CLI uses, so its later pushes reuse what you
+  create:
+  - An epic is a Linear project (`linearProjectId`, `linearProjectIdentifier`,
+    `linearProjectUrl`). When its `linearMappingStrategy` is `milestone-of` or `label-on`,
+    it is a milestone in an existing project (`linearMilestoneId`) or a team label
+    (`linearLabelId`) instead, and every issue under it carries that milestone
+    (`linearProjectMilestoneId`) or label (`linearLabelIds`).
+  - A feature, quick task or backlog item is one issue (`linearIssueId`,
+    `linearIssueIdentifier`, `linearIssueUrl`). A story is a sub-issue of its feature's
+    issue (`linearParentIssueId`).
+  - All task files of one feature share one task-list issue: a sub-issue of the feature's
+    issue whose checklist merges every task file, recorded in each task file. Its state is
+    Completed when every task file is `done`, Unstarted when every one is `pending`, and
+    Started otherwise.

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

@@ -5,7 +5,7 @@ import { access, readFile } from 'node:fs/promises';
 import { resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { promisify } from 'node:util';
-import { CLI_COMMAND, PLANNING_FOLDER } from './names.mjs';
+import { PLANNING_FOLDER } from './names.mjs';
 
 const execFileAsync = promisify(execFile);
 const LINEAR_UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/iu;
@@ -147,7 +147,7 @@ export async function runPortableSync(
   } else if (args.provider === 'linear') {
     throw new IntegrationError(
       'E_SYNC_USAGE',
-      `Linear synchronization runs through a Linear connector or the ${CLI_COMMAND} CLI (${CLI_COMMAND} linear push, ${CLI_COMMAND} linear sync).`,
+      "Linear synchronization runs through the host's Linear connection.",
     );
   } else {
     throw new IntegrationError(

package/lib/host-packages/cursor/openplanr/rules/planr-sync.mdc

@@ -6,31 +6,22 @@ alwaysApply: false
 # OpenPlanr Sync
 
 Reconcile local planning artifacts and, when requested, GitHub or Linear state.
-Reason about conflicts in this active session; deterministic mapping and GitHub
-transport may use a host connector or the packaged [sync helper](planr-sync/scripts/sync.mjs).
-Local and GitHub work never require the OpenPlanr CLI.
+Reason about conflicts in this active session. Local and GitHub work never require
+the OpenPlanr CLI.
 
-Resolution order:
+Remote steps run through the host's own connections, as described in
+[tracker connections](planr-sync/references/tracker-connections.md), which also holds the status
+mapping and what to tell the user when a connection is missing:
 
-1. use a host-native GitHub or Linear connector when available;
-2. otherwise, for GitHub, use the packaged deterministic helper;
-3. otherwise, for Linear, use the `openplanr linear` terminal utility when the user has
-   installed it; `openplanr github` and `openplanr sync` are optional equivalents for the rest.
-
-Linear through the CLI:
-
-- the user runs `openplanr linear init` in a terminal once; it prompts for a personal
-  access token, which the CLI stores;
-- audit with `openplanr linear sync --dry-run`, which reads Linear without writing;
-- before a real `openplanr linear sync`, ask how conflicts should resolve and pass
-  `--on-conflict local` or `--on-conflict linear`; without a prompt it favors Linear;
-- `openplanr linear push <artifact-id>` creates or updates Linear issues; preview with
-  `--dry-run`. Quick tasks and backlog items need `linear.standaloneProjectId` in the
-  project config when no terminal prompt is available.
+- GitHub: the host's GitHub connection, or, when the GitHub CLI is signed in, the
+  packaged [sync helper](planr-sync/scripts/sync.mjs), which creates and edits issues through `gh`;
+  close or reopen an issue with `gh issue close` or `gh issue reopen`. `openplanr github`
+  is an optional equivalent; `openplanr sync` only repairs local cross-references.
+- Linear: the host's Linear connection.
 
 Audit is read-only by default. Apply local changes only when the request asks for
 reconciliation, and push remote changes only when the request asks for external
-synchronization. If credentials are unavailable, complete local reconciliation
+synchronization. If a connection is unavailable, complete local reconciliation
 and report only the external step that could not run.
 
 ## Return

package/lib/host-packages/cursor/openplanr/runtime/design/scripts/design-review.mjs

@@ -424,8 +424,12 @@ import { dirname, isAbsolute, join, resolve } from "node:path";
 import { fileURLToPath } from "node:url";
 var here = dirname(fileURLToPath(new URL("./runtime/packages/artifact/lib/artifact/review-server.mjs", import.meta.url).href));
 var STAGE_RUNTIME_PATH = join(here, "..", "..", "templates", "artifact-review-stage.js");
-var ARTIFACT_REVIEW_SERVER_VERSION = 2;
+var ARTIFACT_REVIEW_SERVER_VERSION = 3;
 var ARTIFACT_REVIEW_SERVER_KIND = "artifact-review";
+var CONTROL_HEADER = "x-openplanr-control";
+var CONTROLLABLE_SERVER_VERSIONS = /* @__PURE__ */ new Set([2, ARTIFACT_REVIEW_SERVER_VERSION]);
+var EXPORT_ONLY_SERVER_VERSIONS = /* @__PURE__ */ new Set([1]);
+var AUTHORIZATION_CONTROL_VERSIONS = /* @__PURE__ */ new Set([1, 2]);
 var CONTROL_WINDOW_BYTES = 64 * 1024 * 1024;
 var ARTIFACT_REVIEW_MAX_CONTROL_BYTES = Math.ceil((MAX_ARTIFACT_HTML_BYTES * 2 + ARTIFACT_REVIEW_MAX_STATE_BYTES) / CONTROL_WINDOW_BYTES) * CONTROL_WINDOW_BYTES;
 var ARTIFACT_REVIEW_MAX_STATE_BYTES2 = ARTIFACT_REVIEW_MAX_STATE_BYTES;
@@ -481,6 +485,12 @@ var PERMISSIONS_POLICY = [
 function artifactError(code, message, fix = "", details) {
   return new PipelineError(code, message, fix, details);
 }
+function artifactReviewControlHeaders(controlToken) {
+  return { [CONTROL_HEADER]: controlToken };
+}
+function stateControlHeaders(state) {
+  return AUTHORIZATION_CONTROL_VERSIONS.has(state.serverVersion) ? { authorization: `Bearer ${state.controlToken}` } : artifactReviewControlHeaders(state.controlToken);
+}
 function reviewStateDir(env = process.env) {
   return join(planrHome(env), "artifact-daemon");
 }
@@ -563,9 +573,9 @@ function parseRequestPath(rawUrl) {
   });
   return { segments, trailingSlash };
 }
-function bearerToken(req) {
-  const value = req.headers?.authorization;
-  return typeof value === "string" && value.startsWith("Bearer ") ? value.slice(7) : "";
+function presentedControlToken(req) {
+  const value = req.headers?.[CONTROL_HEADER];
+  return typeof value === "string" ? value : "";
 }
 function cloneAndValidateEnvelope(envelope) {
   let cloned;
@@ -875,7 +885,7 @@ function createArtifactReviewServer({
         return;
       }
       if (internal) {
-        if (!timingSafeTokenEqual(bearerToken(req), controlToken)) {
+        if (!timingSafeTokenEqual(presentedControlToken(req), controlToken)) {
           sendJson(res, 403, { ok: false, error: "forbidden" });
           return;
         }
@@ -1449,7 +1459,7 @@ function createArtifactReviewServer({
   return controller;
 }
 function validState(value, requestedPort, { allowLegacy = false } = {}) {
-  return value?.schemaVersion === "1.0.0" && value.kind === ARTIFACT_REVIEW_SERVER_KIND && (value.serverVersion === ARTIFACT_REVIEW_SERVER_VERSION || allowLegacy && value.serverVersion === 1) && Number.isInteger(value.pid) && value.pid > 0 && Number.isInteger(value.port) && value.port > 0 && value.port <= 65535 && (requestedPort === 0 || value.port === requestedPort) && isCapabilityToken(value.instanceId, { bytes: SESSION_ID_BYTES }) && isCapabilityToken(value.controlToken, { bytes: CONTROL_TOKEN_BYTES });
+  return value?.schemaVersion === "1.0.0" && value.kind === ARTIFACT_REVIEW_SERVER_KIND && (CONTROLLABLE_SERVER_VERSIONS.has(value.serverVersion) || allowLegacy && EXPORT_ONLY_SERVER_VERSIONS.has(value.serverVersion)) && Number.isInteger(value.pid) && value.pid > 0 && Number.isInteger(value.port) && value.port > 0 && value.port <= 65535 && (requestedPort === 0 || value.port === requestedPort) && isCapabilityToken(value.instanceId, { bytes: SESSION_ID_BYTES }) && isCapabilityToken(value.controlToken, { bytes: CONTROL_TOKEN_BYTES });
 }
 function readReviewServerState(path) {
   try {
@@ -1473,7 +1483,7 @@ async function controlRequest(descriptor, path, { method, body, fetchImpl } = {}
   const response = await fetchImpl(`http://${LOOPBACK_HOST}:${descriptor.state.port}${path}`, {
     method,
     headers: {
-      authorization: `Bearer ${descriptor.state.controlToken}`,
+      ...stateControlHeaders(descriptor.state),
       ...body === void 0 ? {} : { "content-type": "application/json" }
     },
     ...body === void 0 ? {} : { body: JSON.stringify(body) },
@@ -2852,7 +2862,12 @@ async function startDesignReviewUnlocked(file, {
   server = createArtifactReviewServer({
     env,
     serverMetadata: { kind: "design", projectRoot: current.root },
-    prepareSource: (options) => prepareArtifactDocument({ ...options, allowLocalForms: true }),
+    prepareSource: (options) => prepareArtifactDocument({
+      ...options,
+      allowLocalForms: true,
+      prototypeState: true,
+      screenId: current.entries.find((entry) => entry.artifactId === options.artifactId)?.screenId ?? options.artifactId
+    }),
     async refreshSession(session) {
       current = currentDesign(file);
       if (session.designRevision === current.revision) return;
@@ -3214,7 +3229,7 @@ ${renderArtifactParentRuntime({ ...options, adapterRuntimeUrl: `${base}api/desig
     const registered = await fetchImpl(`${origin}/internal/v1/sessions`, {
       method: "POST",
       headers: {
-        authorization: `Bearer ${server.controlToken}`,
+        ...artifactReviewControlHeaders(server.controlToken),
         "content-type": "application/json"
       },
       body: JSON.stringify({

package/lib/host-packages/cursor/openplanr/runtime/design/scripts/design-share.mjs

@@ -92,7 +92,7 @@ ${current.document.id}`);
   const within = relative(project, root);
   if ((!allowMissing || existsSync(path)) && (within === "" || !within.startsWith(`..${process.platform === "win32" ? "\\" : "/"}`) && within !== ".." && !isAbsolute(within)))
     throw new Error(
-      "Design owner credentials must be stored outside the project. Set PLANR_HOME to a private user-level directory."
+      "Design owner keys must be stored outside the project. Set PLANR_HOME to a private user-level directory."
     );
   const legacyPath = !options.custodyRoot && !configuredPlanrHome(env) ? join(realpathSync(env.HOME || homedir()), ".openplanr", "design-shares", `${key}.json`) : null;
   return { root, path, current, legacyPath };
@@ -1785,10 +1785,10 @@ async function importDesignShareRecovery(file, { input, ...options } = {}) {
       throw new Error("Recovery belongs to a different design.");
     if (record && (record.custody.id !== custody.id || JSON.stringify(record.custody.ownerPublicKey) !== JSON.stringify(custody.ownerPublicKey)))
       throw new Error(
-        "This design already has different owner credentials. Recovery will not overwrite them."
+        "This design already has different owner keys. Recovery will not overwrite them."
       );
     if (record && record.custody.version > custody.version)
-      throw new Error("This recovery file is older than the locally saved owner credentials.");
+      throw new Error("This recovery file is older than the locally saved owner keys.");
     if (!custody.pendingCreate && !recovered.deleted && !recovered.revoked) {
       await getWorkspace(custody, { fetchImpl: options.fetchImpl });
       const bundle = await decryptWorkspaceRevision(custody, custody.currentRevision, {

package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/artifact/lib/artifact/ui/studio-shell.css

@@ -1,2 +1,2 @@
 /* generated by scripts/typescript/compile-sources.mjs from studio-shell.source.css */
-.studio-toolbar{min-width:0;min-height:54px;gap:12px;font:400 13px / 1.4 var(--planr-font-body, "DM Sans", sans-serif);box-sizing:border-box;display:flex;align-items:center;flex-wrap:nowrap;padding:0 16px;width:100%}.studio-toolbar .planr-brand{display:flex;align-items:center;gap:8px;min-width:0;flex:1}.studio-toolbar .planr-mark{display:inline-flex;flex:none;width:28px;height:28px;color:var(--planr-color-primary)}.studio-toolbar .planr-mark svg{display:block;width:100%;height:100%}.studio-toolbar .design-wordmark{font-weight:500;white-space:nowrap;font-size:13px;color:var(--planr-color-text)}.studio-toolbar .design-wordmark>span{font-weight:600;color:var(--planr-color-primary)}.studio-toolbar .planr-title-block{display:flex;align-items:center;gap:7px;min-width:0}.studio-chrome-mount,.studio-panel-mount{display:contents}.studio-toolbar-leading,.studio-toolbar-trailing{min-width:0;display:flex;align-items:center;gap:8px}.studio-toolbar-leading{flex:1}.studio-toolbar-trailing{justify-content:flex-end}.studio-identity{min-width:0}.studio-toolbar .planr-title-block strong{max-width:min(25vw,300px)}.studio-subtitle,.studio-hierarchy{display:block;overflow:hidden;color:var(--planr-color-text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.studio-hierarchy a{color:inherit}.studio-type-badge{display:inline-flex;flex:none;align-items:center;padding:2px 5px;border:1px solid var(--planr-color-rule);border-radius:var(--planr-radius-small, 5px);color:var(--planr-color-text-muted);font:500 10px / 1.2 var(--planr-font-body);white-space:nowrap}.studio-button,.studio-menu-content,.studio-tooltip,.studio-panel-dialog{border:1px solid var(--planr-color-rule);background:var(--planr-color-panel);color:var(--planr-color-text)}.studio-button{min-height:32px;display:inline-flex;justify-content:center;align-items:center;gap:6px;border-radius:var(--planr-radius-medium, 8px);padding:0 9px;font:500 13px / 1 var(--planr-font-body);cursor:pointer}.studio-button-ghost{background:transparent;border-color:transparent}.studio-button-primary{background:var(--planr-color-primary);border-color:var(--planr-color-primary);color:var(--planr-color-background)}.studio-button:not(:disabled):hover,.studio-button[aria-pressed=true],.studio-button[aria-expanded=true]{background:var(--planr-color-raised);color:var(--planr-color-primary)}.studio-button:disabled,.studio-menu-item[data-disabled]{opacity:0.45;cursor:not-allowed}.studio-button:focus-visible,.studio-menu-item:focus-visible{outline:2px solid var(--planr-color-primary);outline-offset:2px}.studio-menu{display:inline-flex}.studio-menu-content{min-width:180px;max-width:min(320px,calc(100vw - 16px));max-height:var(--radix-dropdown-menu-content-available-height);overflow-y:auto;padding:5px;z-index:160;border-radius:var(--planr-radius-medium, 8px);box-shadow:0 12px 30px color-mix(in srgb,var(--planr-color-background) 60%,transparent)}.studio-menu-item{width:100%;min-height:34px;padding:8px 10px;display:flex;align-items:center;text-align:left;border:0;border-radius:var(--planr-radius-small, 5px);background:transparent;color:inherit;font:500 13px / 1.3 var(--planr-font-body);cursor:pointer}.studio-menu-item[data-highlighted]{background:var(--planr-color-raised);outline:none;color:var(--planr-color-primary)}.studio-menu-group-start{border-top:1px solid var(--planr-color-rule);border-radius:0}.studio-tooltip{z-index:180;padding:6px 8px;border-radius:var(--planr-radius-small, 5px);font:12px / 1.4 var(--planr-font-body)}.studio-status{min-width:0;display:inline-flex;align-items:center;gap:4px;color:var(--planr-color-text-muted);font:10px / 1.3 var(--planr-font-body)}.studio-status[data-tone=error]{color:var(--planr-color-danger)}.studio-status .studio-button{width:24px;min-height:24px;padding:0}.studio-panel-overlay{position:absolute;inset:0;z-index:170;background:color-mix(in srgb,var(--planr-color-background) 72%,transparent)}.studio-panel-dialog{position:absolute;top:env(safe-area-inset-top,0px);bottom:env(safe-area-inset-bottom,0px);z-index:180;width:min(350px,calc(100% - 32px));box-shadow:0 8px 30px color-mix(in srgb,var(--planr-color-background) 50%,transparent)}.studio-panel-left{left:0}.studio-panel-right{right:0}.studio-panel-close{position:absolute;right:8px;top:8px;z-index:2;width:32px}.studio-panel-content{height:100%;min-height:0}.studio-panel-dialog .design-navigator,.studio-panel-dialog .planr-review-rail,.studio-panel-dialog .diagram-outline{position:static!important;width:100%!important;height:100%!important;max-height:100%!important;transform:none!important;overflow-y:auto;padding-top:42px;border:0}@media(max-width:680px){.studio-toolbar{gap:6px;padding-inline:8px}.studio-toolbar .planr-title-block strong{max-width:30vw}.studio-toolbar .design-wordmark{display:none}.studio-toolbar .design-button-label{display:none}.studio-toolbar .studio-status{max-width:90px}.studio-button{min-height:36px;padding-inline:8px}}.planr-shell[data-studio-framework=react]{--planr-toolbar-height: 60px;grid-template-rows:auto minmax(0,1fr)}.planr-shell[data-studio-framework=react] :is(.design-toolbar,.diagram-toolbar){display:flex;grid-template-columns:none;flex-wrap:wrap;min-height:var(--planr-toolbar-height);height:auto;padding-block:4px;overflow:visible}.planr-shell[data-studio-framework=react] .planr-brand{display:flex;gap:8px;max-width:none;min-width:min-content}.planr-shell[data-studio-framework=react] .studio-toolbar-leading{flex:1;min-width:min-content}.planr-shell[data-studio-framework=react] .studio-toolbar-trailing{flex:0 0 auto;flex-wrap:wrap;max-width:100%}.planr-shell[data-studio-framework=react] .design-toolbar .design-view-picker{display:inline-flex;width:auto;margin:0;border:0}.planr-shell[data-studio-framework=react] .design-export>button{display:inline-flex;width:auto;padding:0 9px}.planr-shell[data-studio-framework=react] .studio-menu-content{position:relative}.planr-shell[data-studio-framework=react] .planr-title-block{display:flex}.planr-shell[data-studio-framework=react]>.planr-workspace{position:relative}@media(max-width:680px){.planr-shell[data-studio-framework=react] .studio-toolbar.planr-toolbar{gap:2px;padding-inline:4px}.planr-shell[data-studio-framework=react] .studio-toolbar-leading,.planr-shell[data-studio-framework=react] .studio-toolbar-trailing{gap:2px}.planr-shell[data-studio-framework=react] .planr-brand{overflow:hidden}.planr-shell[data-studio-framework=react] .studio-identity{display:block;overflow:hidden}.planr-shell[data-studio-framework=react] .planr-mark{width:22px;height:22px}.planr-shell[data-studio-framework=react] .design-view-picker{height:44px;gap:0}.planr-shell[data-studio-framework=react] .design-view-picker button{width:44px;height:100%;padding:0}.planr-shell[data-studio-framework=react] .studio-button{min-width:44px;min-height:44px}.planr-shell[data-studio-framework=react] :is(.design-save-state,.design-preview-state){display:none}.planr-shell[data-studio-framework=react] :is(.design-export,.diagram-export)>button{font-size:0;width:44px;padding:0}.planr-shell[data-studio-framework=react] :is(.design-export,.diagram-export)>button span{font-size:16px}}@media(max-width:960px){.planr-shell[data-studio-framework=react] .design-wordmark{display:none}.planr-shell[data-studio-framework=react] .planr-workspace>:is(.design-navigator,.planr-review-rail){top:0;max-height:100%}}@media(max-width:1240px){.planr-shell[data-studio-framework=react] .planr-title-block{flex-direction:column;align-items:flex-start;gap:1px}.planr-shell[data-studio-framework=react] .planr-title-block strong{max-width:100%;line-height:1.1}.planr-shell[data-studio-framework=react] .design-preview-state{max-width:48px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.planr-diagram-editor[data-studio-framework=react]{--de-bar-height: 60px;grid-template-rows:auto minmax(0,1fr)}.planr-diagram-editor[data-studio-framework=react] .de-bar{display:block;padding:0;height:auto;overflow:visible;border-bottom:0}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar{min-height:60px;height:auto;flex-wrap:wrap;padding:4px 16px;border:0;border-bottom:1px solid var(--de-rule);background:var(--de-panel)}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar-leading{flex:1;min-width:min-content}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar :is(.de-command-group,.studio-toolbar-trailing){flex:none}.planr-diagram-editor[data-studio-framework=react] .planr-brand{min-width:min-content;overflow:hidden}.planr-diagram-editor[data-studio-framework=react] .de-title{max-width:25vw;line-height:1.35}.planr-diagram-editor[data-studio-framework=react] .studio-subtitle .de-subtitle{line-height:1.3}.planr-diagram-editor[data-studio-framework=react] .de-alert{grid-row:2;top:var(--de-space-3)}.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .design-wordmark,.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .studio-subtitle{display:none}.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .planr-title-block{flex-direction:column;align-items:flex-start;gap:1px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-toolbar{padding:4px 8px;gap:8px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-toolbar-trailing{gap:4px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-menu:has([data-studio-palette-menu]){display:none}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .de-more-menu{top:calc(100% + var(--de-space-2))}[data-studio-framework=react]{position:relative}[data-studio-framework=react] .studio-toolbar .studio-type-badge{display:inline-flex}[data-studio-framework=react] .studio-identity{flex:1;min-width:min-content}[data-studio-framework=react] .studio-toolbar .planr-title-block strong{contain:inline-size;display:block;align-self:stretch;width:auto;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-studio-framework=react] .studio-subtitle{contain:inline-size}[data-studio-framework=react]:has(.studio-panel-dialog) [data-planr-close-feedback],[data-studio-framework=react]:has(.studio-panel-dialog) .planr-review-rail [data-planr-close-feedback]{display:none}.studio-panel-dialog .design-nav-close,.studio-panel-dialog .studio-panel-content .planr-review-rail [data-planr-close-feedback]{display:none}.studio-preserved-control{display:contents}.studio-toolbar fieldset.planr-segment{margin:0;padding:0;min-inline-size:0}.diagram-shell[data-present=true] .studio-toolbar-trailing>:not([data-action=present]):not(.studio-menu){display:none}.diagram-shell[data-studio-framework=react] .diagram-presentation-nav button{color:var(--planr-color-text);background:var(--planr-color-panel)}.diagram-shell[data-studio-framework=react] .diagram-presentation-nav button:enabled:hover{background:var(--planr-color-raised)}@media(max-width:680px){.studio-panel-close{width:44px;min-height:44px}}@media(max-width:700px){.diagram-shell[data-present=true] .studio-toolbar-leading{flex:none}.diagram-shell[data-present=true] .diagram-presentation-nav{min-width:0;flex:1;gap:4px}.diagram-shell[data-present=true] .diagram-presentation-nav>div{min-width:0}}@media(min-width:681px)and (max-width:960px){.diagram-shell[data-studio-framework=react] .studio-toolbar-trailing{gap:4px}}@media(max-width:480px){.studio-toolbar .planr-mark{display:none}}
+.studio-toolbar{min-width:0;min-height:54px;gap:12px;font:400 13px / 1.4 var(--planr-font-body, "DM Sans", sans-serif);box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;flex-wrap:nowrap;padding:0 16px;width:100%}.studio-toolbar .planr-brand{display:flex;align-items:center;gap:8px;min-width:0;max-width:none;flex:1}.studio-toolbar .planr-mark{display:inline-flex;flex:none;width:28px;height:28px;color:var(--planr-color-primary)}.studio-toolbar .planr-mark svg{display:block;width:100%;height:100%}.studio-toolbar .design-wordmark{font-weight:500;white-space:nowrap;font-size:13px;color:var(--planr-color-text)}.studio-toolbar .design-wordmark>span{font-weight:600;color:var(--planr-color-primary)}.studio-toolbar .planr-title-block{display:flex;align-items:center;gap:7px;min-width:0}.studio-toolbar[data-studio-react-chrome=true]{display:grid;padding-inline:16px}.studio-chrome-mount,.studio-panel-mount{display:contents}.studio-toolbar-leading,.studio-toolbar-trailing{min-width:0;display:flex;align-items:center;gap:8px}.studio-toolbar-leading{min-width:0}.studio-toolbar-trailing{justify-content:flex-end;justify-self:end;width:max-content;max-width:100%}.studio-toolbar-center{min-width:0;width:max-content;max-width:100%;justify-self:center}.studio-toolbar[data-studio-react-chrome=true] .studio-toolbar-center .planr-segment{display:inline-flex}.studio-toolbar[data-studio-center=false] .studio-toolbar-center,.studio-toolbar-center:empty,.studio-toolbar-status:empty,.studio-toolbar-actions:empty{display:none}.studio-toolbar-status,.studio-toolbar-actions{display:flex;align-items:center;min-width:0;gap:8px}.studio-toolbar-status{max-width:128px}.studio-toolbar-status>:is(output,.studio-status){display:inline-flex;align-items:center;min-width:0;max-width:none;overflow-wrap:normal}.studio-identity{min-width:0;flex:1;overflow:hidden}.studio-toolbar .planr-title-block strong{max-width:min(25vw,300px);min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-toolbar[data-studio-react-chrome=true] .studio-type-badge{display:inline-flex}.studio-subtitle,.studio-hierarchy{display:block;overflow:hidden;color:var(--planr-color-text-muted);font-size:10px;text-overflow:ellipsis;white-space:nowrap}.studio-hierarchy a{color:inherit}.studio-type-badge{display:inline-flex;flex:none;align-items:center;padding:2px 5px;border:1px solid var(--planr-color-rule);border-radius:var(--planr-radius-small, 5px);color:var(--planr-color-text-muted);font:500 10px / 1.2 var(--planr-font-body);white-space:nowrap}.studio-button,.studio-menu-content,.studio-tooltip,.studio-panel-dialog,.studio-dialog{border:1px solid var(--planr-color-rule);background:var(--planr-color-panel);color:var(--planr-color-text)}.studio-button{min-height:32px;display:inline-flex;justify-content:center;align-items:center;gap:6px;border-radius:var(--planr-radius-medium, 8px);padding:0 9px;font:500 13px / 1.3 var(--planr-font-body);cursor:pointer}.studio-button-ghost{background:transparent;border-color:transparent}.studio-toolbar[data-studio-react-chrome=true] :is(.studio-button,.planr-toolbar-action){height:auto;min-height:32px;padding-block:4px;white-space:nowrap}.studio-button-primary{background:var(--planr-color-primary);border-color:var(--planr-color-primary);color:var(--planr-color-background)}.studio-button:not(:disabled):hover,.studio-button[aria-pressed=true],.studio-button[aria-expanded=true]{background:var(--planr-color-raised);color:var(--planr-color-primary)}.studio-button:disabled,.studio-menu-item[data-disabled]{opacity:0.45;cursor:not-allowed}.studio-button:focus-visible,.studio-menu-item:focus-visible{outline:2px solid var(--planr-color-primary);outline-offset:2px}.studio-menu{display:inline-flex}.studio-menu-content{min-width:180px;max-width:min(320px,calc(100vw - 16px));max-height:var(--radix-dropdown-menu-content-available-height);overflow-y:auto;padding:5px;z-index:160;border-radius:var(--planr-radius-medium, 8px);box-shadow:0 12px 30px color-mix(in srgb,var(--planr-color-background) 60%,transparent)}.studio-menu-item{width:100%;min-height:34px;padding:8px 10px;display:flex;align-items:center;text-align:left;border:0;border-radius:var(--planr-radius-small, 5px);background:transparent;color:inherit;font:500 13px / 1.3 var(--planr-font-body);cursor:pointer}.studio-menu-item[data-highlighted]{background:var(--planr-color-raised);outline:none;color:var(--planr-color-primary)}.studio-menu-group-start{border-top:1px solid var(--planr-color-rule);border-radius:0}.studio-tooltip{z-index:180;padding:6px 8px;border-radius:var(--planr-radius-small, 5px);font:12px / 1.4 var(--planr-font-body)}.studio-status{min-width:0;display:inline-flex;align-items:center;gap:4px;color:var(--planr-color-text-muted);font:10px / 1.3 var(--planr-font-body)}.studio-status[data-tone=error]{color:var(--planr-color-danger)}.studio-status .studio-button{width:24px;min-height:24px;padding:0}.studio-panel-overlay{position:absolute;inset:0;z-index:170;background:color-mix(in srgb,var(--planr-color-background) 72%,transparent)}.studio-panel-dialog{position:absolute;top:env(safe-area-inset-top,0px);bottom:env(safe-area-inset-bottom,0px);z-index:180;width:min(350px,calc(100% - 32px));box-shadow:0 8px 30px color-mix(in srgb,var(--planr-color-background) 50%,transparent)}.studio-panel-left{left:0}.studio-panel-right{right:0}.studio-panel-close{position:absolute;right:8px;top:8px;z-index:2;width:32px}.studio-dialog-overlay{position:fixed;inset:0;z-index:170;background:color-mix(in srgb,var(--planr-color-background) 72%,transparent)}.studio-dialog{position:fixed;z-index:180;inset:50% auto auto 50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:var(--planr-radius-large, 12px);box-shadow:0 8px 30px color-mix(in srgb,var(--planr-color-background) 50%,transparent);font:400 13px / 1.5 var(--planr-font-body)}.studio-dialog-title{margin:0 32px 12px 0;font:600 20px / 1.3 var(--planr-font-display)}.studio-dialog-description{color:var(--planr-color-text-muted)}.studio-panel-content{height:100%;min-height:0}.studio-panel-dialog .design-navigator,.studio-panel-dialog .planr-review-rail,.studio-panel-dialog .diagram-outline{position:static!important;width:100%!important;height:100%!important;max-height:100%!important;transform:none!important;overflow-y:auto;padding-top:42px;border:0}@media(max-width:680px){.studio-toolbar{gap:6px;padding-inline:8px}.studio-toolbar .planr-title-block strong{max-width:30vw}.studio-toolbar .design-wordmark{display:none}.studio-toolbar .design-button-label{display:none}.studio-toolbar .studio-status{max-width:90px}.studio-button{min-height:36px;padding-inline:8px}}.planr-shell[data-studio-framework=react]{--planr-toolbar-height: 60px;grid-template-rows:auto minmax(0,1fr)}.planr-shell[data-studio-framework=react] :is(.design-toolbar,.diagram-toolbar){display:grid;grid-template-columns:minmax(0,1fr) auto;min-height:var(--planr-toolbar-height);height:auto;padding-block:4px;overflow:visible}.planr-shell[data-studio-framework=react] .planr-brand{display:flex;gap:8px;max-width:none;min-width:0}.planr-shell[data-studio-framework=react] .studio-toolbar-leading{min-width:0}.planr-shell[data-studio-framework=react] .studio-toolbar-trailing{max-width:100%}.planr-shell[data-studio-framework=react] .design-toolbar .design-view-picker{display:inline-flex;width:auto;height:auto;min-height:32px;margin:0;border:0}.planr-shell[data-studio-framework=react] .design-export>button{display:inline-flex;width:auto;padding:0 9px}.planr-shell[data-studio-framework=react] .studio-menu-content{position:relative}.planr-shell[data-studio-framework=react] .planr-title-block{display:flex}.planr-shell[data-studio-framework=react]>.planr-workspace{position:relative}@media(max-width:680px){.planr-shell[data-studio-framework=react] .studio-toolbar.planr-toolbar{gap:2px;padding-inline:4px}.planr-shell[data-studio-framework=react] .studio-toolbar-leading,.planr-shell[data-studio-framework=react] .studio-toolbar-trailing{gap:2px}.planr-shell[data-studio-framework=react] .planr-brand{overflow:hidden}.planr-shell[data-studio-framework=react] .studio-identity{display:block;overflow:hidden}.planr-shell[data-studio-framework=react] .planr-mark{width:22px;height:22px}.planr-shell[data-studio-framework=react] .design-view-picker{height:auto;min-height:44px;gap:0}.planr-shell[data-studio-framework=react] .design-view-picker button{width:44px;height:auto;padding:0}.planr-shell[data-studio-framework=react] .studio-button{min-width:44px;min-height:44px}.planr-shell[data-studio-framework=react] :is(.design-export,.diagram-export)>button{font-size:0;width:44px;padding:0}.planr-shell[data-studio-framework=react] :is(.design-export,.diagram-export)>button span{font-size:16px}}@media(max-width:960px){.planr-shell[data-studio-framework=react] .design-wordmark{display:none}.planr-shell[data-studio-framework=react] .planr-workspace>:is(.design-navigator,.planr-review-rail){top:0;max-height:100%}}@media(max-width:1240px){.planr-shell[data-studio-framework=react] .planr-title-block{flex-direction:column;align-items:flex-start;gap:1px}.planr-shell[data-studio-framework=react] .planr-title-block strong{max-width:100%;line-height:1.1}.planr-shell[data-studio-framework=react] .design-preview-state{max-width:48px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.planr-diagram-editor[data-studio-framework=react]{--de-bar-height: 60px;grid-template-rows:auto minmax(0,1fr)}.planr-diagram-editor[data-studio-framework=react] .de-bar{display:block;padding:0;height:auto;overflow:visible;border-bottom:0}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar{min-height:60px;height:auto;padding:4px 16px;border:0;border-bottom:1px solid var(--de-rule);background:var(--de-panel)}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar-leading{min-width:0}.planr-diagram-editor[data-studio-framework=react] .studio-toolbar :is(.de-command-group,.studio-toolbar-trailing){flex:none}.planr-diagram-editor[data-studio-framework=react] .planr-brand{min-width:0;overflow:hidden}.planr-diagram-editor[data-studio-framework=react] .de-title{max-width:25vw;line-height:1.35}.planr-diagram-editor[data-studio-framework=react] .studio-subtitle .de-subtitle{line-height:1.3}.planr-diagram-editor[data-studio-framework=react] .de-alert{grid-row:2;top:var(--de-space-3)}.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .design-wordmark,.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .studio-subtitle{display:none}.planr-diagram-editor[data-studio-framework=react][data-layout~=drawer] .planr-title-block{flex-direction:column;align-items:flex-start;gap:1px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-toolbar{padding:4px 8px;gap:8px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-toolbar-trailing{gap:4px}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .studio-menu:has([data-studio-palette-menu]){display:none}.planr-diagram-editor[data-studio-framework=react][data-layout~=compact] .de-more-menu{top:calc(100% + var(--de-space-2))}[data-studio-framework=react]{position:relative}[data-studio-framework=react] .studio-toolbar .studio-type-badge{display:inline-flex}[data-studio-framework=react] .studio-identity{flex:1;min-width:0}[data-studio-framework=react] .studio-toolbar .planr-title-block strong{contain:inline-size;display:block;align-self:stretch;width:auto;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}[data-studio-framework=react] .studio-subtitle{contain:inline-size}[data-studio-framework=react]:has(.studio-panel-dialog) [data-planr-close-feedback],[data-studio-framework=react]:has(.studio-panel-dialog) .planr-review-rail [data-planr-close-feedback]{display:none}.studio-panel-dialog .design-nav-close,.studio-panel-dialog .studio-panel-content .planr-review-rail [data-planr-close-feedback]{display:none}.studio-preserved-control{display:contents}.studio-toolbar fieldset.planr-segment{margin:0;padding:0;min-inline-size:0}.diagram-shell[data-present=true] .studio-toolbar-actions>:not([data-action=present]):not(.studio-menu){display:none}.diagram-shell[data-studio-framework=react] .diagram-presentation-nav button{color:var(--planr-color-text);background:var(--planr-color-panel)}.diagram-shell[data-studio-framework=react] .diagram-presentation-nav button:enabled:hover{background:var(--planr-color-raised)}@media(max-width:680px){.studio-panel-close{width:44px;min-height:44px}}@media(max-width:700px){.diagram-shell[data-present=true] .studio-toolbar-leading{flex:none}.diagram-shell[data-present=true] .diagram-presentation-nav{min-width:0;flex:1;gap:4px}.diagram-shell[data-present=true] .diagram-presentation-nav>div{min-width:0}}@media(min-width:681px)and (max-width:960px){.diagram-shell[data-studio-framework=react] .studio-toolbar-trailing{gap:4px}}@media(max-width:480px){.studio-toolbar .planr-mark{display:none}}.studio-toolbar[data-studio-center=true],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-center=true]{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;row-gap:4px;padding-block:4px}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-leading{grid-column:1;grid-row:1;width:100%}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-trailing{grid-column:1;grid-row:2;width:100%;flex-wrap:wrap}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-actions{justify-content:flex-end;flex-wrap:wrap;max-width:100%}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-center{grid-column:1;grid-row:3}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-status{max-width:100%;width:100%;flex-basis:100%;flex-wrap:wrap;justify-content:flex-end}:is(.studio-toolbar[data-studio-layout=compact],.planr-shell[data-studio-framework=react] .studio-toolbar[data-studio-layout=compact]) .studio-toolbar-status>:is(output,.studio-status,.design-preview-state){max-width:100%;white-space:normal;overflow:visible;overflow-wrap:normal}.studio-toolbar[data-studio-density=narrow]{gap:4px;padding-inline:8px}.studio-toolbar[data-studio-density=narrow] .design-wordmark,.studio-toolbar[data-studio-density=narrow] .design-button-label,.studio-toolbar[data-studio-density=narrow] .planr-mark{display:none}.studio-toolbar[data-studio-density=narrow] .studio-button,.studio-toolbar[data-studio-density=narrow] .planr-toolbar-action,.studio-toolbar[data-studio-density=narrow] .design-view-picker button{min-height:44px;min-width:44px}.studio-toolbar[data-studio-density=narrow] .design-view-picker{height:auto;gap:0}.studio-toolbar[data-studio-density=narrow] .design-view-picker button{width:44px;height:auto;padding:0}.studio-toolbar[data-studio-density=narrow] .studio-toolbar-actions{gap:4px}.studio-toolbar[data-studio-density=narrow] .studio-toolbar-status{font-size:10px}.studio-toolbar[data-studio-density=narrow] :is(.design-export,.diagram-export)>button{font-size:0;width:44px;padding:0}.studio-toolbar[data-studio-density=narrow] :is(.design-export,.diagram-export)>button span{font-size:16px}@media(max-width:680px),(pointer:coarse){.studio-button,.studio-menu-item{min-width:44px;min-height:44px}}

package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/design/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openplanr/design",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "private": true,
   "type": "module",
   "description": "Canonical OpenPlanr design helpers and design-loop engine",
@@ -43,11 +43,11 @@
     "LICENSE"
   ],
   "engines": {
-    "node": ">=20.19.0"
+    "node": ">=22.13.0"
   },
   "dependencies": {
-    "@openplanr/artifact": "0.6.4",
-    "@openplanr/protocol": "0.10.2"
+    "@openplanr/artifact": "0.6.6",
+    "@openplanr/protocol": "0.11.0"
   },
   "scripts": {
     "test": "node --test --test-concurrency=2 tests/*.test.mjs",

package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/enhancements.css

@@ -267,8 +267,13 @@ html[data-design-theme="light"] .design-export > div { box-shadow:0 12px 30px #1
 
 /* A shared sizing contract keeps captions, tools and service status from
    overlapping. It belongs to the shell; iframe documents inherit none of it. */
-[data-design-studio] .design-stage-context { height:var(--design-stage-context-height); }
-[data-design-studio] .planr-shell:not([data-design-presentation="true"]) .planr-stage-scroll { inset-block-start:var(--design-stage-context-height); }
+[data-design-studio] .design-stage-context { height:auto; min-height:var(--design-stage-context-height); flex-wrap:wrap; }
+[data-design-studio] .design-stage-context > div:first-child { flex:1 1 220px; max-width:100%; }
+[data-design-studio] .design-stage-context > .design-stage-actions { flex:0 1 auto; flex-wrap:wrap; max-width:100%; }
+[data-design-studio] .design-frame-picker { min-width:0; max-width:100%; }
+[data-design-studio] .design-frame-picker select { min-width:0; flex:1 1 auto; appearance:none; line-height:1.3; min-height:32px; padding-inline-end:26px; background-image:linear-gradient(45deg,transparent 50%,var(--planr-color-text) 50%),linear-gradient(135deg,var(--planr-color-text) 50%,transparent 50%); background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%; background-size:4px 4px; background-repeat:no-repeat; }
+[data-design-studio] .design-guidance > summary { height:auto; min-height:30px; padding-block:4px; line-height:1.3; white-space:nowrap; }
+[data-design-studio] .planr-shell:not([data-design-presentation="true"]) .planr-stage-scroll { inset-block-start:var(--design-stage-context-measured-height,var(--design-stage-context-height)); }
 [data-design-studio] .planr-shell[data-design-view="prototype"]:not([data-design-presentation="true"]) .planr-stage-scroll { bottom:calc(var(--design-tools-space) + var(--design-status-space)); }
 [data-design-studio] .planr-shell[data-design-view="walkthrough"]:not([data-design-presentation="true"]) .planr-stage-scroll { bottom:calc(var(--design-tools-space) + var(--design-caption-height) + var(--design-status-space)); }
 [data-design-studio] .design-walkthrough-caption { height:var(--design-caption-height); min-height:var(--design-caption-height); max-height:var(--design-caption-height); bottom:var(--design-status-space); }
@@ -286,14 +291,14 @@ html[data-design-theme="light"] .design-export > div { box-shadow:0 12px 30px #1
     font-size:var(--design-type-control); line-height:1.4; min-height:var(--design-touch-target);
     min-width:0; max-width:100%; border-radius:8px; padding:10px 12px; scroll-margin-block:16px;
   }
-  :root[data-design-studio] body select { height:var(--design-touch-target); }
+  :root[data-design-studio] body select { height:auto; min-height:var(--design-touch-target); }
   :root[data-design-studio] body :is(button:not(.planr-pin):not(.design-minimap-close),.design-export > summary,.design-tools-menu > summary,.design-guidance > summary) {
     min-height:var(--design-touch-target); min-width:var(--design-touch-target); touch-action:manipulation;
   }
   :root[data-design-studio] body :is(.design-dialog-close,.design-nav-close,.planr-rail-close,.planr-composer-header button) {
     width:var(--design-touch-target); height:var(--design-touch-target); flex-basis:var(--design-touch-target);
   }
-  :root[data-design-studio] .design-canvas-tools button { height:var(--design-touch-target); white-space:nowrap; }
+  :root[data-design-studio] .design-canvas-tools button { height:auto; min-height:var(--design-touch-target); white-space:nowrap; }
   :root[data-design-studio] :is(.design-dialog-content,.design-inspector,.planr-thread-comment,.planr-reply) { font-size:var(--design-type-body); }
   :root[data-design-studio] :is(.design-profile-form > label,.planr-annotation-composer label,.planr-identity label,.design-profile-form legend) { font-size:var(--design-type-label); }
   :root[data-design-studio] :is(.design-muted,.design-profile-form > .design-muted,.design-dialog-status) { font-size:var(--design-type-label); }
@@ -365,6 +370,11 @@ html[data-design-theme="light"] .design-export > div { box-shadow:0 12px 30px #1
   :root[data-design-studio] .planr-shell { height:var(--design-frozen-shell-height,100%); }
   :root[data-design-studio] .design-toolbar { grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:52px; padding:0 max(8px,env(safe-area-inset-right,0px)) 0 max(8px,env(safe-area-inset-left,0px)); }
   :root[data-design-studio] .design-toolbar .planr-brand { display:none; }
+  :root[data-design-studio] .planr-shell[data-studio-framework="react"] .design-toolbar[data-studio-layout="compact"] { grid-template-columns:auto minmax(0,1fr); }
+  :root[data-design-studio] .planr-shell[data-studio-framework="react"] .design-toolbar[data-studio-layout="compact"] .studio-toolbar-leading { grid-column:1; grid-row:1; width:auto; }
+  :root[data-design-studio] .planr-shell[data-studio-framework="react"] .design-toolbar[data-studio-layout="compact"] .studio-toolbar-trailing { grid-column:2; grid-row:1; width:auto; flex-wrap:nowrap; }
+  :root[data-design-studio] .planr-shell[data-studio-framework="react"] .design-toolbar[data-studio-layout="compact"] .studio-toolbar-center { grid-column:1 / -1; grid-row:2; }
+  :root[data-design-studio] .planr-shell[data-studio-framework="react"] .design-toolbar[data-studio-layout="compact"] .studio-toolbar-status { width:auto; flex-basis:auto; max-width:128px; }
   :root[data-design-studio] .design-toolbar-trailing { grid-column:3; }
   :root[data-design-studio] .design-view-picker { grid-column:2; grid-row:1; }
   :root[data-design-studio] .design-stage-context { flex-wrap:nowrap; padding:4px 12px; }

package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/share.js

@@ -1,4 +1,4 @@
-/* Trusted local adapter. Owner credentials never enter this runtime. */
+/* Trusted local adapter. Owner keys never enter this runtime. */
 (() => {
   'use strict';
   const options = globalThis.__OPENPLANR_DESIGN_STUDIO_OPTIONS__ || {};

package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.css

@@ -506,6 +506,11 @@
 	transform: translateX(-50%);
 	display: flex;
 	align-items: center;
+	flex-wrap: wrap;
+	justify-content: center;
+	width: max-content;
+	max-width: calc(100% - 32px);
+	box-sizing: border-box;
 	gap: 2px;
 	padding: 4px;
 	border: 1px solid var(--planr-color-rule);
@@ -514,22 +519,26 @@
 	box-shadow: 0 8px 28px #0006;
 }
 .design-canvas-tools button {
-	height: 28px;
+	height: auto;
+	min-height: 28px;
 	min-width: 28px;
-	padding: 0 8px;
+	flex: none;
+	padding: 4px 8px;
 	border: 0;
 	border-radius: 4px;
 	background: transparent;
 	font-size: 11px;
+	line-height: 1.3;
+	white-space: nowrap;
 	cursor: pointer;
 }
 .design-canvas-tools [data-design-zoom="reset"] {
-	flex: 0 0 56px;
-	width: 56px;
+	flex: 0 0 auto;
+	width: auto;
 	min-width: 56px;
 	font-variant-numeric: tabular-nums;
 }
-.design-interaction-picker { height:30px; padding:0; border:0; background:transparent; }
+.design-interaction-picker { height:auto; min-height:30px; flex:none; padding:0; border:0; background:transparent; }
 .design-interaction-picker button { display:flex; align-items:center; gap:6px; }
 .design-interaction-picker .design-button-label { display:none; }
 .design-canvas-tools .design-interaction-picker button[aria-pressed="true"] { background:var(--planr-color-raised); color:var(--planr-color-primary); }

package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/12-design-review-experience.js

@@ -2307,6 +2307,33 @@ ${fence}`;
       );
       content.append(value, reason, save);
     }
+    function installStageContextGeometry() {
+      const context = q(".design-stage-context", root);
+      if (!context) return;
+      let frame = 0;
+      const measure = () => {
+        frame = 0;
+        if (disposed) return;
+        const height = Math.ceil(context.getBoundingClientRect().height);
+        const value = `${height}px`;
+        if (height && root.style.getPropertyValue("--design-stage-context-measured-height") !== value)
+          root.style.setProperty("--design-stage-context-measured-height", value);
+      };
+      const schedule = () => {
+        if (!frame && !disposed) frame = requestAnimationFrame(measure);
+      };
+      const observer = typeof ResizeObserver === "function" ? new ResizeObserver(schedule) : null;
+      observer?.observe(context);
+      on(window, "resize", schedule);
+      on(root, "planr:design-render", schedule);
+      void document.fonts?.ready.then(schedule);
+      measure();
+      destroyers.push(() => {
+        observer?.disconnect();
+        cancelAnimationFrame(frame);
+        root.style.removeProperty("--design-stage-context-measured-height");
+      });
+    }
     function installCanvas() {
       const tools = q(".design-canvas-tools");
       const more = node("details", "", { class: "design-tools-menu" });
@@ -3494,6 +3521,7 @@ ${fence}`;
       installComposerCategory();
       installInspector();
       installCanvas();
+      installStageContextGeometry();
       installThumbnails();
       installPersonalDrafts();
       about(true);

package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/16-studio-shell.js

@@ -46,36 +46,114 @@
     actions,
     className = ""
   }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(Tag, { className: `planr-toolbar studio-toolbar ${className}`, "data-studio-react-chrome": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "studio-toolbar-leading design-toolbar-leading", children: [
-        leading,
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "planr-brand", children: [
-          brand && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StudioMark, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "design-wordmark", children: [
-              "Open",
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Planr" })
+    const toolbar = (0, import_react3.useRef)(null);
+    (0, import_react3.useLayoutEffect)(() => {
+      const element = toolbar.current;
+      const window2 = element?.ownerDocument.defaultView;
+      if (!element || !window2) return;
+      const center = element.querySelector(".studio-toolbar-center");
+      const trailing = element.querySelector(".studio-toolbar-trailing");
+      const leading2 = element.querySelector(".studio-toolbar-leading");
+      if (!center || !trailing || !leading2) return;
+      const measure = () => {
+        const width = element.getBoundingClientRect().width;
+        if (!width) return;
+        element.dataset.studioDensity = width <= 680 ? "narrow" : "regular";
+        const style = window2.getComputedStyle(element);
+        const available = width - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight);
+        const gap = parseFloat(style.columnGap) || 0;
+        element.dataset.studioCenter = "true";
+        const centerWidth = center.scrollWidth;
+        element.dataset.studioCenter = String(centerWidth > 0);
+        const controlSelector = 'button,a,summary,input,select,output,[role="status"]';
+        const controls = [...trailing.querySelectorAll(controlSelector)].filter(
+          (control) => control.getClientRects().length && !control.closest('[role="menu"],.studio-tooltip,[role="dialog"]') && (!control.closest("details") || !!control.closest("summary")) && !control.parentElement?.closest(controlSelector)
+        );
+        const actionWidth = controls.reduce((total, control) => total + control.getBoundingClientRect().width, 0) + Math.max(0, controls.length - 1) * (parseFloat(window2.getComputedStyle(trailing).gap) || 8);
+        const leadingControl = leading2.firstElementChild;
+        const branding = [
+          ...leading2.querySelectorAll(".planr-mark,.design-wordmark")
+        ].filter((node) => node.getClientRects().length);
+        const brandingWidth = branding.reduce(
+          (total, node) => total + node.getBoundingClientRect().width + 8,
+          0
+        );
+        const leadingFloor = 128 + brandingWidth + (leadingControl instanceof window2.HTMLElement && !leadingControl.classList.contains("planr-brand") ? leadingControl.getBoundingClientRect().width + 8 : 0);
+        const outerWidth = Math.max(leadingFloor, actionWidth);
+        element.dataset.studioLayout = centerWidth > 0 ? width <= 680 || centerWidth + outerWidth * 2 + gap * 2 > available ? "compact" : "inline" : leadingFloor + actionWidth + gap > available ? "compact" : "inline";
+      };
+      measure();
+      let frame = 0;
+      const scheduleMeasure = () => {
+        if (frame) return;
+        frame = window2.requestAnimationFrame(() => {
+          frame = 0;
+          measure();
+        });
+      };
+      const resize = typeof window2.ResizeObserver === "function" ? new window2.ResizeObserver(scheduleMeasure) : null;
+      for (const node of [element, center, trailing]) resize?.observe(node);
+      const mutations = new window2.MutationObserver(scheduleMeasure);
+      mutations.observe(element, {
+        subtree: true,
+        childList: true,
+        characterData: true,
+        attributes: true,
+        attributeFilter: ["hidden"]
+      });
+      window2.addEventListener("resize", scheduleMeasure);
+      let active = true;
+      void element.ownerDocument.fonts?.ready.then(() => {
+        if (active) scheduleMeasure();
+      });
+      return () => {
+        active = false;
+        resize?.disconnect();
+        mutations.disconnect();
+        window2.cancelAnimationFrame(frame);
+        window2.removeEventListener("resize", scheduleMeasure);
+      };
+    }, [Tag]);
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      Tag,
+      {
+        ref: (node) => {
+          toolbar.current = node;
+        },
+        className: `planr-toolbar studio-toolbar ${className}`,
+        "data-studio-react-chrome": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "studio-toolbar-leading design-toolbar-leading", children: [
+            leading,
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "planr-brand", children: [
+              brand && /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StudioMark, {}),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "design-wordmark", children: [
+                  "Open",
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Planr" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "studio-identity", children: [
+                hierarchy.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("nav", { className: "studio-hierarchy", "aria-label": "Project path", children: hierarchy.map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
+                  index2 > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: " / " }),
+                  item.href ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { href: item.href, children: item.label }) : item.label
+                ] }, item.href ?? item.label)) }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "planr-title-block", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StudioBadge, { children: kind === "artifact" ? "Artifact" : kind === "diagram" ? "Diagram" : "Design" }),
+                  titleNode ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { title, children: title })
+                ] }),
+                subtitle && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "studio-subtitle", children: subtitle })
+              ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "studio-identity", children: [
-            hierarchy.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("nav", { className: "studio-hierarchy", "aria-label": "Project path", children: hierarchy.map((item, index2) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
-              index2 > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-hidden": "true", children: " / " }),
-              item.href ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { href: item.href, children: item.label }) : item.label
-            ] }, item.href ?? item.label)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "planr-title-block", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StudioBadge, { children: kind === "artifact" ? "Artifact" : kind === "diagram" ? "Diagram" : "Design" }),
-              titleNode ?? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { title, children: title })
-            ] }),
-            subtitle && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "studio-subtitle", children: subtitle })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "studio-toolbar-center", children: viewPicker }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "studio-toolbar-trailing design-toolbar-trailing", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "studio-toolbar-status", children: status }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "studio-toolbar-actions", children: actions })
           ] })
-        ] })
-      ] }),
-      viewPicker,
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "studio-toolbar-trailing design-toolbar-trailing", children: [
-        status,
-        actions
-      ] })
-    ] });
+        ]
+      }
+    );
   }
   function StudioMenu({
     label,