openplanr 2.2641.2 → 3.0.0

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,

package/lib/host-packages/cursor/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/cursor/openplanr/runtime/design/scripts/runtime/packages/protocol/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openplanr/protocol",
-  "version": "0.10.3",
+  "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/cursor/openplanr/runtime/plan/scripts/runtime/packages/protocol/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openplanr/protocol",
-  "version": "0.10.3",
+  "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/.claude-plugin/marketplace.json

@@ -4,14 +4,14 @@
     "name": "OpenPlanr"
   },
   "metadata": {
-    "version": "2.2641.2",
+    "version": "3.0.0",
     "description": "Generated local OpenPlanr package."
   },
   "plugins": [
     {
       "name": "planr",
       "source": "./openplanr",
-      "version": "2.2641.2",
+      "version": "3.0.0",
       "description": "Close the loop from intent to delivery. Plan, design, build, review, and operate from durable context in your repository.",
       "strict": true
     }

package/lib/host-packages/openai/openplanr/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "planr",
-  "version": "2.2641.2",
+  "version": "3.0.0",
   "description": "Close the loop from intent to delivery. Plan, design, build, review, and operate from durable context in your repository.",
   "author": {
     "name": "OpenPlanr",

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

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": ".codex-plugin/plugin.json",
-      "digest": "sha256:10f28fc04cc1d302086cde8f7f8d1b897a216754f98f6cc6c5b0e28889792287"
+      "digest": "sha256:9ade6fedd1832ecf7e35ab553a5c09c225a460ad93b90bb05bc4ba933b747044"
     },
     {
       "path": "LICENSE",
@@ -112,7 +112,7 @@
     },
     {
       "path": "runtime/design/scripts/runtime/packages/artifact/lib/artifact/ui/studio-shell.css",
-      "digest": "sha256:4449fbe06d25ae0ad9b2faf15a4558f1c6fc8506d357e785dfdbc8befe69df59"
+      "digest": "sha256:61e3736cd81f15162d877bb29481e96538d8a32f19cc4a6718026e549e193c48"
     },
     {
       "path": "runtime/design/scripts/runtime/packages/artifact/templates/artifact-review-stage.js.sources.json",
@@ -152,11 +152,11 @@
     },
     {
       "path": "runtime/design/scripts/runtime/packages/design/package.json",
-      "digest": "sha256:b3d397b4bb27c37799f143ee6a83c7000f3d1a38aba3e321778ed6cc8916d702"
+      "digest": "sha256:7c884f7d4b1e20ffcfe58514413f1a36e8c00e88866fb07492c912949e87782c"
     },
     {
       "path": "runtime/design/scripts/runtime/packages/design/templates/studio/enhancements.css",
-      "digest": "sha256:df58a7ee4ffcadac780d3170abbeb00cfecb1f42db692ba62eb6f66a251bd0ea"
+      "digest": "sha256:bdb55a9464e96fba112aad73354d54b6ccb8ac5d9bc100a90b51df4633ff11f7"
     },
     {
       "path": "runtime/design/scripts/runtime/packages/design/templates/studio/handoff-center.css",
@@ -172,11 +172,11 @@
     },
     {
       "path": "runtime/design/scripts/runtime/packages/design/templates/studio/studio.css",
-      "digest": "sha256:c9291e20366315b23c73e920ec5426d4c33d0880863d39650d4c535956984b1c"
+      "digest": "sha256:75ca0c3036d5c281e60a4155765ad8c2e9373bd39d34d4facebfe9bf26278c88"
     },
     {
       "path": "runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources.json",
-      "digest": "sha256:268b66e770a35e3f5606a4c7b44f6fb6bd5659c15d1813f7421781ef3e9bcf99"
+      "digest": "sha256:f517215a81d763cdc5aa903b0d6b2e679d10dc3592915e4f4c1f7062413cb6d3"
     },
     {
       "path": "runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/01-module-runtime.js",
@@ -224,7 +224,7 @@
     },
     {
       "path": "runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/12-design-review-experience.js",
-      "digest": "sha256:c40392e1328eb17f9d0a778d1f20e44118731d7c6a0a25f0aa731304a86994a0"
+      "digest": "sha256:9e2ac3d6b99028c7335aacf548f9e04fdf709d15f889db3e35bbebc389631000"
     },
     {
       "path": "runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/13-studio-shell.js",
@@ -240,7 +240,7 @@
     },
     {
       "path": "runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/16-studio-shell.js",
-      "digest": "sha256:a84049d6a41dd3f655e85a4a39e4874a4c7f6f2013ad9d8c192d22a7082bf407"
+      "digest": "sha256:5306387b1f59d43e1cd0ed2c471b18b0b35d5cc8c573ffe5439ea9315494c01e"
     },
     {
       "path": "runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/17-design-studio.js",
@@ -248,7 +248,7 @@
     },
     {
       "path": "runtime/design/scripts/runtime/packages/protocol/package.json",
-      "digest": "sha256:037b4f8f4fd2f1db03d5106ec974e250502d1a4ce39a018e668ab7e07d93de43"
+      "digest": "sha256:2ef4fe15be8e2037dda6786e075a02b94b3484f30465aab3565022ff7f0321e4"
     },
     {
       "path": "runtime/design/scripts/runtime/packages/protocol/registries/artifact-theme.json",
@@ -368,7 +368,7 @@
     },
     {
       "path": "runtime/plan/scripts/runtime/packages/protocol/package.json",
-      "digest": "sha256:037b4f8f4fd2f1db03d5106ec974e250502d1a4ce39a018e668ab7e07d93de43"
+      "digest": "sha256:2ef4fe15be8e2037dda6786e075a02b94b3484f30465aab3565022ff7f0321e4"
     },
     {
       "path": "runtime/plan/scripts/runtime/packages/protocol/schemas/v1.1.0/artifact-review.schema.json",
@@ -568,7 +568,7 @@
     },
     {
       "path": "skills/delegate/references/capsule-contract.md",
-      "digest": "sha256:9bd80db920018a43cecc02f4996d65d5eb54a121fce6caa3c9198cb0ca01bf6a"
+      "digest": "sha256:22e5daac9ad9cb0951222fef4d0f45ae35de4a6b7ee2b47d660cc6b672188fff"
     },
     {
       "path": "skills/delegate/references/integration-review.md",
@@ -672,7 +672,7 @@
     },
     {
       "path": "skills/delegate/scripts/run-preparation.mjs",
-      "digest": "sha256:dbc03621c77946ad77e97db84d826714d2fe75eccd15963756791b1439b46589"
+      "digest": "sha256:746630b00e1c252cae6dd7e78cde4b2d6c65e75f1ef19a092111e1e4de5152e3"
     },
     {
       "path": "skills/delegate/scripts/run-record.mjs",
@@ -684,7 +684,7 @@
     },
     {
       "path": "skills/delegate/SKILL.md",
-      "digest": "sha256:e3bc67ad5506a9d360344a4071e9cad1667e0481603789c5fb7b45ae0e39f826"
+      "digest": "sha256:344d272793e81025c73d2c62333e786f4a073dec30f1ac8eb8ed560bea2c8e4f"
     },
     {
       "path": "skills/design-loop/agents/openai.yaml",
@@ -728,7 +728,7 @@
     },
     {
       "path": "skills/design-loop/references/utilities.md",
-      "digest": "sha256:df4414af1974d8268af25cfb33ce27d967e0a7f0ca29e75de82b91f3dacf2543"
+      "digest": "sha256:cedeae549cda5434a768846dc3d83a1baddfa74940276485db6fba1c649301b5"
     },
     {
       "path": "skills/design-loop/schemas/design-document.schema.json",
@@ -792,7 +792,7 @@
     },
     {
       "path": "skills/design-review/references/utilities.md",
-      "digest": "sha256:df4414af1974d8268af25cfb33ce27d967e0a7f0ca29e75de82b91f3dacf2543"
+      "digest": "sha256:cedeae549cda5434a768846dc3d83a1baddfa74940276485db6fba1c649301b5"
     },
     {
       "path": "skills/design-review/schemas/design-document.schema.json",
@@ -856,7 +856,7 @@
     },
     {
       "path": "skills/design/references/utilities.md",
-      "digest": "sha256:df4414af1974d8268af25cfb33ce27d967e0a7f0ca29e75de82b91f3dacf2543"
+      "digest": "sha256:cedeae549cda5434a768846dc3d83a1baddfa74940276485db6fba1c649301b5"
     },
     {
       "path": "skills/design/schemas/design-document.schema.json",
@@ -916,11 +916,11 @@
     },
     {
       "path": "skills/doctor/references/upgrade.md",
-      "digest": "sha256:7370954450db1bac591d4f90b58df9022f6edac5b32d05051f93dbd35b0e35b9"
+      "digest": "sha256:b137e82d63ceeecef4e5c1cac72acbaaa2edbc29798214507ab9613d16088fde"
     },
     {
       "path": "skills/doctor/SKILL.md",
-      "digest": "sha256:417b1d1f860db1ccd59820c52cfd6873c7feed80a639537c43babea8d76ef3d3"
+      "digest": "sha256:ae1c90830273a51d54c60a846ea00e8c4412f50e43ad8172a2e112e2b51e6412"
     },
     {
       "path": "skills/investigate/agents/openai.yaml",
@@ -1024,7 +1024,7 @@
     },
     {
       "path": "skills/plan/SKILL.md",
-      "digest": "sha256:6cfa23c318f29fbd5c6f34541c43a84bf7681376563170cfd241d99b49951f16"
+      "digest": "sha256:a2e82ebfbc71ceff6186779a60ba1a3b47ec8a6c42444a6953abb0bebbfa8c54"
     },
     {
       "path": "skills/release/agents/openai.yaml",
@@ -1171,5 +1171,5 @@
       "digest": "sha256:a90f713ac4cda7fc0df0c2b40256ddba3cfa1ee8ea809705f1cf735324952022"
     }
   ],
-  "contentDigest": "sha256:13d8e15bcaf9a2e643db0c2b5b9c6c08da6565f5419ea7c6021756c5bdfce5fb"
+  "contentDigest": "sha256:8d626a89249e9d073403c72e835818f5b2abca332d94f6376e569ba44665461a"
 }

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.5",
+  "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.5",
-    "@openplanr/protocol": "0.10.3"
+    "@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/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); }