openplanr 2.2641.1 → 3.0.0

package/lib/host-packages/openai/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/openai/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/openai/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/openai/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/openai/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/openai/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/openai/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/openai/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/openai/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,

package/lib/host-packages/openai/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources.json

@@ -2,8 +2,8 @@
   "kind": "openplanr-runtime-asset-sources",
   "schemaVersion": "1.0.0",
   "asset": "studio.js",
-  "bytes": 1136703,
-  "sha256": "24745f5b2327275efa2cb904652c4451b16a6893d4284e375a3ce986d909f49e",
+  "bytes": 1142078,
+  "sha256": "b8688a3102c5028847fc9a1d4a257b096768de1db3b4bfd4656482d318013c71",
   "scopes": [
     {
       "id": "bundle",
@@ -143,8 +143,8 @@
         "packages/design/lib/design/ui/enhancements.mjs",
         "packages/design/lib/design/ui/handoff-center.mjs"
       ],
-      "bytes": 151613,
-      "sha256": "c40392e1328eb17f9d0a778d1f20e44118731d7c6a0a25f0aa731304a86994a0"
+      "bytes": 152776,
+      "sha256": "9e2ac3d6b99028c7335aacf548f9e04fdf709d15f889db3e35bbebc389631000"
     },
     {
       "path": "studio.js.sources/13-studio-shell.js",
@@ -238,8 +238,8 @@
         "packages/artifact/lib/artifact/ui/studio-shell-components.mjs",
         "packages/artifact/lib/artifact/ui/studio-shell-mount-impl.mjs"
       ],
-      "bytes": 19068,
-      "sha256": "a84049d6a41dd3f655e85a4a39e4874a4c7f6f2013ad9d8c192d22a7082bf407"
+      "bytes": 23280,
+      "sha256": "5306387b1f59d43e1cd0ed2c471b18b0b35d5cc8c573ffe5439ea9315494c01e"
     },
     {
       "path": "studio.js.sources/17-design-studio.js",

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

@@ -1,6 +1,6 @@
 {
   "name": "@openplanr/protocol",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "type": "module",
   "description": "Canonical OpenPlanr schemas, registries, typed errors, and portable contract validation",
   "license": "MIT",
@@ -132,7 +132,7 @@
     "test": "node --test ../../tests/protocol/*.test.mjs"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=22.13.0"
   },
   "repository": {
     "type": "git",

package/lib/host-packages/openai/openplanr/runtime/plan/scripts/design.mjs

@@ -2551,7 +2551,7 @@ ${current.document.id}`);
   const within = relative3(project, root);
   if ((!allowMissing || existsSync4(path)) && (within === "" || !within.startsWith(`..${process.platform === "win32" ? "\\" : "/"}`) && within !== ".." && !isAbsolute3(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) ? join7(realpathSync4(env.HOME || homedir3()), ".openplanr", "design-shares", `${key}.json`) : null;
   return { root, path, current, legacyPath };

package/lib/host-packages/openai/openplanr/runtime/plan/scripts/runtime/packages/protocol/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openplanr/protocol",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "type": "module",
   "description": "Canonical OpenPlanr schemas, registries, typed errors, and portable contract validation",
   "license": "MIT",
@@ -132,7 +132,7 @@
     "test": "node --test ../../tests/protocol/*.test.mjs"
   },
   "engines": {
-    "node": ">=20"
+    "node": ">=22.13.0"
   },
   "repository": {
     "type": "git",

package/lib/host-packages/openai/openplanr/skills/artifact/SKILL.md

@@ -30,7 +30,7 @@ relaunch the active coding agent from inside this skill.
    preserve existing guidance and never invent requirements. Render and inspect
    the updated context before sharing. For a design document this creates a permanent encrypted
    design review with a stable URL and a separately entered generated access
-   token. Owner credentials save privately outside the project; copy the reviewer
+   token. Owner keys save privately outside the project; copy the reviewer
    token through the studio's Share dialog, never put it in a URL or ordinary
    command output. Publish an explicitly requested update with
    `openplanr artifact publish <design-document.json>`; synchronize reviewer feedback
@@ -67,7 +67,7 @@ separate permissions and storage from encrypted token shares.
 
 Lead with what was opened, shared, imported or exported and the confirmed revision
 or session. Link the actual review URL or exported file; never print capability
-tokens or private owner credentials. Distinguish successful service operations
+tokens or private owner keys. Distinguish successful service operations
 from preparation and browser verification from validation alone. For partial or
 blocked work, name the remaining step and exact retry or recovery action, retaining
 the useful local result. Keep detailed diagnostics in their existing records;

package/lib/host-packages/openai/openplanr/skills/artifact/references/diagram-sharing.md

@@ -13,7 +13,7 @@ review. Preview the exact diagram title, source revision, elements, connections,
 destination and retention before creating it. Use `--yes` only when the user has
 already authorized that publication. The stable URL and generated access token
 are separate; copy the token through the local studio's **Share diagram** dialog,
-never into a URL, prompt, ordinary output or repository file. Owner credentials
+never into a URL, prompt, ordinary output or repository file. Owner keys
 are saved privately outside the project. The review remains available until the
 owner revokes or deletes it and works while the local studio is stopped.
 

package/lib/host-packages/openai/openplanr/skills/ceo-review/SKILL.md

@@ -2,7 +2,6 @@
 name: ceo-review
 description: "Produce a grounded strategy and finance review for an Operate cycle. Use when direction, runway, margin, investment, or cost of delay needs a CEO lens."
 license: MIT
-allowed-tools: "Read, Grep, Glob, Edit(./.planr/operate/**)"
 ---
 
 # OpenPlanr CEO Review