openplanr 2.2.1 → 2.3.0

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

@@ -46,7 +46,8 @@
 }
 .design-toolbar-leading, .design-toolbar-trailing { display:flex; align-items:center; gap:10px; min-width:0; }
 .design-toolbar-trailing { justify-content:flex-end; }
-.design-toolbar .planr-brand { display:grid; gap:3px; }
+.design-toolbar .planr-brand { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; row-gap:1px; align-items:center; }
+.design-toolbar .planr-brand .planr-mark { grid-row:1 / span 2; }
 .design-wordmark { font: 800 18px/1 var(--planr-font-display); letter-spacing:-.045em; white-space:nowrap; }
 .design-wordmark > span { color:var(--planr-color-primary); }
 .design-toolbar .planr-title-block strong { max-width: min(22vw, 270px); color:var(--planr-color-text-muted); font:400 10px/1.3 var(--planr-font-body); }

package/lib/host-packages/openai/openplanr/skills/design-loop/scripts/design.mjs

@@ -11837,11 +11837,14 @@ function activeMetadata(model) {
   if (!artifact) return "HTML \xB7 1440\xD7900";
   return `${artifact.kind.toUpperCase()} \xB7 ${artifact.viewport.width}\xD7${artifact.viewport.height}`;
 }
+function renderPlanrMark() {
+  return '<span class="planr-mark" aria-hidden="true"><svg viewBox="0 0 160 160" focusable="false"><g transform="rotate(-45 80 80)"><path d="M125 50A52 52 0 1 0 125 110" fill="none" stroke="currentColor" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/><rect x="127" y="71" width="18" height="18" rx="3" fill="currentColor"/></g></svg></span>';
+}
 function renderArtifactToolbar(model) {
   const interact = model.reviewMode === "interact";
   const canvas = model.presentation === "canvas";
   return `<header class="planr-toolbar">
-  <div class="planr-brand" aria-label="OpenPlanr"><span class="planr-mark" aria-hidden="true"></span><span class="planr-title-block"><strong>${escapeHtml(model.title)}</strong>${canvas ? `<span>${escapeHtml(activeMetadata(model))}</span>` : ""}</span></div>
+  <div class="planr-brand" aria-label="OpenPlanr">${renderPlanrMark()}<span class="planr-title-block"><strong>${escapeHtml(model.title)}</strong>${canvas ? `<span>${escapeHtml(activeMetadata(model))}</span>` : ""}</span></div>
   <span class="planr-privacy" data-privacy="${escapeHtml(model.privacy)}">${escapeHtml(model.privacyLabel)}</span>
 ${canvas ? '  <span class="planr-domain-toolbar" data-planr-slot="domain-toolbar" aria-label="Artifact workflow controls"></span>\n' : ""}  <span class="planr-toolbar-spacer" aria-hidden="true"></span>
 ${canvas ? `  <div class="planr-segment" role="group" aria-label="Viewport controls"><button type="button" data-planr-action="zoom-out" aria-label="Zoom out">\u2212</button><button type="button" data-planr-action="zoom-reset" aria-label="Reset zoom">${model.zoom}%</button><button type="button" data-planr-action="zoom-in" aria-label="Zoom in">+</button></div>
@@ -11980,7 +11983,7 @@ function renderArtifactShareDialog() {
 }
 function renderHostedArtifactViewerSlot() {
   return `<section class="planr-hosted-viewer" data-planr-hosted-viewer data-planr-hosted-state="idle" role="status" aria-live="polite" aria-atomic="true" hidden>
-  <div><span class="planr-mark" aria-hidden="true"></span><strong data-planr-hosted-title></strong><p data-planr-hosted-detail></p><button type="button" data-planr-hosted-retry hidden></button></div>
+  <div>${renderPlanrMark()}<strong data-planr-hosted-title></strong><p data-planr-hosted-detail></p><button type="button" data-planr-hosted-retry hidden></button></div>
 </section>`;
 }
 function renderArtifactShellMarkup(model) {
@@ -12107,28 +12110,8 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
   background: color-mix(in srgb, var(--planr-color-chrome) 96%, transparent);
 }
 .planr-brand { min-width: 0; display: flex; align-items: center; gap: 9px; }
-.planr-mark {
-  position: relative;
-  width: 20px;
-  height: 20px;
-  flex: none;
-  rotate: 45deg;
-  border: 1px solid color-mix(in srgb, var(--planr-color-primary) 70%, var(--planr-color-rule));
-  border-radius: var(--planr-radius-small);
-}
-.planr-mark::before, .planr-mark::after {
-  content: "";
-  position: absolute;
-  border-radius: 2px;
-  background: var(--planr-color-primary);
-}
-.planr-mark::before {
-  width: 4px;
-  height: 4px;
-  inset: 3px auto auto 3px;
-  box-shadow: 8px 8px 0 var(--planr-color-warning);
-}
-.planr-mark::after { width: 8px; height: 2px; inset: 9px auto auto 6px; rotate: -45deg; }
+.planr-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--planr-color-primary); contain: paint; }
+.planr-mark svg { display: block; width: 100%; height: 100%; }
 .planr-title-block { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
 .planr-title-block strong {
   max-width: 260px;
@@ -12887,7 +12870,7 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
   text-align: center;
   box-shadow: 0 18px 60px color-mix(in srgb, var(--planr-color-background) 50%, transparent);
 }
-.planr-hosted-viewer .planr-mark { display: inline-block; margin-bottom: 20px; }
+.planr-hosted-viewer .planr-mark { width: 40px; height: 40px; margin-bottom: 20px; }
 .planr-hosted-viewer strong { display: block; margin-bottom: 7px; font: 650 19px/1.2 var(--planr-font-display); }
 .planr-hosted-viewer p { margin: 0; color: var(--planr-color-text-muted); }
 .planr-hosted-viewer button { margin-top: 16px; border-color: var(--planr-color-primary); color: var(--planr-color-primary); }
@@ -13161,7 +13144,7 @@ function toolbar(document2) {
   return `<header class="planr-toolbar design-toolbar">
   <div class="design-toolbar-leading">
     ${iconButton("Screens", "left", 'data-design-toggle-nav aria-controls="design-navigator" aria-expanded="true"', "planr-toolbar-action design-panel-toggle")}
-    <div class="planr-brand"><span class="design-wordmark" aria-label="OpenPlanr">Open<span>Planr</span></span><span class="planr-title-block"><strong title="${escapeHtml(document2.title)}">${escapeHtml(document2.title)}</strong></span></div>
+    <div class="planr-brand">${renderPlanrMark()}<span class="design-wordmark" aria-label="OpenPlanr">Open<span>Planr</span></span><span class="planr-title-block"><strong title="${escapeHtml(document2.title)}">${escapeHtml(document2.title)}</strong></span></div>
   </div>
   <div class="planr-segment design-view-picker" role="group" aria-label="Design view">${["canvas", "prototype", "walkthrough"].map((view) => iconButton(view[0].toUpperCase() + view.slice(1), view, `data-design-view="${view}" aria-pressed="${document2.defaultView === view}"`)).join("")}</div>
   <div class="design-toolbar-trailing">

package/lib/host-packages/openai/openplanr/skills/design-loop/scripts/runtime/packages/design/templates/studio/studio.css

@@ -46,7 +46,8 @@
 }
 .design-toolbar-leading, .design-toolbar-trailing { display:flex; align-items:center; gap:10px; min-width:0; }
 .design-toolbar-trailing { justify-content:flex-end; }
-.design-toolbar .planr-brand { display:grid; gap:3px; }
+.design-toolbar .planr-brand { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; row-gap:1px; align-items:center; }
+.design-toolbar .planr-brand .planr-mark { grid-row:1 / span 2; }
 .design-wordmark { font: 800 18px/1 var(--planr-font-display); letter-spacing:-.045em; white-space:nowrap; }
 .design-wordmark > span { color:var(--planr-color-primary); }
 .design-toolbar .planr-title-block strong { max-width: min(22vw, 270px); color:var(--planr-color-text-muted); font:400 10px/1.3 var(--planr-font-body); }

package/lib/host-packages/openai/openplanr/skills/design-review/scripts/design.mjs

@@ -11837,11 +11837,14 @@ function activeMetadata(model) {
   if (!artifact) return "HTML \xB7 1440\xD7900";
   return `${artifact.kind.toUpperCase()} \xB7 ${artifact.viewport.width}\xD7${artifact.viewport.height}`;
 }
+function renderPlanrMark() {
+  return '<span class="planr-mark" aria-hidden="true"><svg viewBox="0 0 160 160" focusable="false"><g transform="rotate(-45 80 80)"><path d="M125 50A52 52 0 1 0 125 110" fill="none" stroke="currentColor" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/><rect x="127" y="71" width="18" height="18" rx="3" fill="currentColor"/></g></svg></span>';
+}
 function renderArtifactToolbar(model) {
   const interact = model.reviewMode === "interact";
   const canvas = model.presentation === "canvas";
   return `<header class="planr-toolbar">
-  <div class="planr-brand" aria-label="OpenPlanr"><span class="planr-mark" aria-hidden="true"></span><span class="planr-title-block"><strong>${escapeHtml(model.title)}</strong>${canvas ? `<span>${escapeHtml(activeMetadata(model))}</span>` : ""}</span></div>
+  <div class="planr-brand" aria-label="OpenPlanr">${renderPlanrMark()}<span class="planr-title-block"><strong>${escapeHtml(model.title)}</strong>${canvas ? `<span>${escapeHtml(activeMetadata(model))}</span>` : ""}</span></div>
   <span class="planr-privacy" data-privacy="${escapeHtml(model.privacy)}">${escapeHtml(model.privacyLabel)}</span>
 ${canvas ? '  <span class="planr-domain-toolbar" data-planr-slot="domain-toolbar" aria-label="Artifact workflow controls"></span>\n' : ""}  <span class="planr-toolbar-spacer" aria-hidden="true"></span>
 ${canvas ? `  <div class="planr-segment" role="group" aria-label="Viewport controls"><button type="button" data-planr-action="zoom-out" aria-label="Zoom out">\u2212</button><button type="button" data-planr-action="zoom-reset" aria-label="Reset zoom">${model.zoom}%</button><button type="button" data-planr-action="zoom-in" aria-label="Zoom in">+</button></div>
@@ -11980,7 +11983,7 @@ function renderArtifactShareDialog() {
 }
 function renderHostedArtifactViewerSlot() {
   return `<section class="planr-hosted-viewer" data-planr-hosted-viewer data-planr-hosted-state="idle" role="status" aria-live="polite" aria-atomic="true" hidden>
-  <div><span class="planr-mark" aria-hidden="true"></span><strong data-planr-hosted-title></strong><p data-planr-hosted-detail></p><button type="button" data-planr-hosted-retry hidden></button></div>
+  <div>${renderPlanrMark()}<strong data-planr-hosted-title></strong><p data-planr-hosted-detail></p><button type="button" data-planr-hosted-retry hidden></button></div>
 </section>`;
 }
 function renderArtifactShellMarkup(model) {
@@ -12107,28 +12110,8 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
   background: color-mix(in srgb, var(--planr-color-chrome) 96%, transparent);
 }
 .planr-brand { min-width: 0; display: flex; align-items: center; gap: 9px; }
-.planr-mark {
-  position: relative;
-  width: 20px;
-  height: 20px;
-  flex: none;
-  rotate: 45deg;
-  border: 1px solid color-mix(in srgb, var(--planr-color-primary) 70%, var(--planr-color-rule));
-  border-radius: var(--planr-radius-small);
-}
-.planr-mark::before, .planr-mark::after {
-  content: "";
-  position: absolute;
-  border-radius: 2px;
-  background: var(--planr-color-primary);
-}
-.planr-mark::before {
-  width: 4px;
-  height: 4px;
-  inset: 3px auto auto 3px;
-  box-shadow: 8px 8px 0 var(--planr-color-warning);
-}
-.planr-mark::after { width: 8px; height: 2px; inset: 9px auto auto 6px; rotate: -45deg; }
+.planr-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--planr-color-primary); contain: paint; }
+.planr-mark svg { display: block; width: 100%; height: 100%; }
 .planr-title-block { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
 .planr-title-block strong {
   max-width: 260px;
@@ -12887,7 +12870,7 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
   text-align: center;
   box-shadow: 0 18px 60px color-mix(in srgb, var(--planr-color-background) 50%, transparent);
 }
-.planr-hosted-viewer .planr-mark { display: inline-block; margin-bottom: 20px; }
+.planr-hosted-viewer .planr-mark { width: 40px; height: 40px; margin-bottom: 20px; }
 .planr-hosted-viewer strong { display: block; margin-bottom: 7px; font: 650 19px/1.2 var(--planr-font-display); }
 .planr-hosted-viewer p { margin: 0; color: var(--planr-color-text-muted); }
 .planr-hosted-viewer button { margin-top: 16px; border-color: var(--planr-color-primary); color: var(--planr-color-primary); }
@@ -13161,7 +13144,7 @@ function toolbar(document2) {
   return `<header class="planr-toolbar design-toolbar">
   <div class="design-toolbar-leading">
     ${iconButton("Screens", "left", 'data-design-toggle-nav aria-controls="design-navigator" aria-expanded="true"', "planr-toolbar-action design-panel-toggle")}
-    <div class="planr-brand"><span class="design-wordmark" aria-label="OpenPlanr">Open<span>Planr</span></span><span class="planr-title-block"><strong title="${escapeHtml(document2.title)}">${escapeHtml(document2.title)}</strong></span></div>
+    <div class="planr-brand">${renderPlanrMark()}<span class="design-wordmark" aria-label="OpenPlanr">Open<span>Planr</span></span><span class="planr-title-block"><strong title="${escapeHtml(document2.title)}">${escapeHtml(document2.title)}</strong></span></div>
   </div>
   <div class="planr-segment design-view-picker" role="group" aria-label="Design view">${["canvas", "prototype", "walkthrough"].map((view) => iconButton(view[0].toUpperCase() + view.slice(1), view, `data-design-view="${view}" aria-pressed="${document2.defaultView === view}"`)).join("")}</div>
   <div class="design-toolbar-trailing">

package/lib/host-packages/openai/openplanr/skills/design-review/scripts/runtime/packages/design/templates/studio/studio.css

@@ -46,7 +46,8 @@
 }
 .design-toolbar-leading, .design-toolbar-trailing { display:flex; align-items:center; gap:10px; min-width:0; }
 .design-toolbar-trailing { justify-content:flex-end; }
-.design-toolbar .planr-brand { display:grid; gap:3px; }
+.design-toolbar .planr-brand { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; row-gap:1px; align-items:center; }
+.design-toolbar .planr-brand .planr-mark { grid-row:1 / span 2; }
 .design-wordmark { font: 800 18px/1 var(--planr-font-display); letter-spacing:-.045em; white-space:nowrap; }
 .design-wordmark > span { color:var(--planr-color-primary); }
 .design-toolbar .planr-title-block strong { max-width: min(22vw, 270px); color:var(--planr-color-text-muted); font:400 10px/1.3 var(--planr-font-body); }

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

@@ -50,6 +50,17 @@ a source branch of an existing generated set; rerender its manifest with
   [fidelity guide](references/diagram-fidelity.md) when choosing an editable
   projection or explaining an omitted one.
 
+## Look before you hand over
+
+A `pass` quality status is necessary, not sufficient. After every render, open
+the PNG or SVG the command lists and check four signatures: a label that reads as
+another node's caption, rectangles that overlap, a connector crossing the whole
+canvas, and a node drawn below a step it precedes. Any `warning` check, in
+particular `label-foreign-node`, names the first of these. When one appears,
+restructure using the [layout heuristics](references/diagram-intent-to-ir.md)
+(fewer relations per node, no back edge, no groups, shorter labels) and render
+again before starting the studio. Report which signatures you checked.
+
 After a successful render or rerender, run the returned `nextAction` to start
 the native diagram studio (one SVG canvas, outline, pan/zoom, comments, and
 exports). Keep that process alive, wait for its startup

package/lib/host-packages/openai/openplanr/skills/diagram/openplanr.skill.json

@@ -3,7 +3,7 @@
   "schemaVersion": "1.0.0",
   "protocolVersion": "1.8.0",
   "skillId": "planr-diagram",
-  "skillVersion": "1.0.0",
+  "skillVersion": "1.1.0",
   "entrypoint": "SKILL.md",
   "hosts": [
     "claude-code",

package/lib/host-packages/openai/openplanr/skills/diagram/references/diagram-intent-to-ir.md

@@ -17,6 +17,27 @@ Use this reference only when turning natural-language intent into a Protocol 1.6
 5. Provide a useful accessible title, description, and semantic reading order.
    Keep labels concise enough to scan at the target size.
 
+## Layout heuristics
+
+The renderer lays out deterministically; these choices decide whether the result
+reads at a glance.
+
+- Prefer `top-down` for graphs with relations. Use `left-right` for sequences
+  and timelines, where the flow axis is time.
+- Keep fan-out to four relations per source and fan-in to four per target. Above
+  that, introduce an intermediate node or split the diagram.
+- Keep a `balanced` render to twelve semantic nodes; use `faithful` only when the
+  reader needs every item and accepts a taller canvas.
+- Prefer labels of one or two words. Put the explanation in the item
+  `description`; the studio shows it on selection.
+- Use `flow` for the main path, `dependency` for "uses" or "reads", and
+  `transition` for a return or retry. Flow renders solid, dependency dashed.
+- Add a back edge (a relation to an earlier node) only when the grammar is a
+  cycle by nature, such as `state-machine` or `loop-flywheel`. In `architecture`
+  and `flowchart` a back edge pushes its target to the bottom of the canvas.
+- Use groups sparingly, at most one level, and never for the whole graph. Use
+  at most one annotation; more than that draws connectors across the canvas.
+
 Ask a question only if selecting a different answer would change the grammar,
 meaning, or audience. Infer presentation details from context and let the
 runtime validate them.

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

@@ -11837,11 +11837,14 @@ function activeMetadata(model) {
   if (!artifact) return "HTML \xB7 1440\xD7900";
   return `${artifact.kind.toUpperCase()} \xB7 ${artifact.viewport.width}\xD7${artifact.viewport.height}`;
 }
+function renderPlanrMark() {
+  return '<span class="planr-mark" aria-hidden="true"><svg viewBox="0 0 160 160" focusable="false"><g transform="rotate(-45 80 80)"><path d="M125 50A52 52 0 1 0 125 110" fill="none" stroke="currentColor" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/><rect x="127" y="71" width="18" height="18" rx="3" fill="currentColor"/></g></svg></span>';
+}
 function renderArtifactToolbar(model) {
   const interact = model.reviewMode === "interact";
   const canvas = model.presentation === "canvas";
   return `<header class="planr-toolbar">
-  <div class="planr-brand" aria-label="OpenPlanr"><span class="planr-mark" aria-hidden="true"></span><span class="planr-title-block"><strong>${escapeHtml(model.title)}</strong>${canvas ? `<span>${escapeHtml(activeMetadata(model))}</span>` : ""}</span></div>
+  <div class="planr-brand" aria-label="OpenPlanr">${renderPlanrMark()}<span class="planr-title-block"><strong>${escapeHtml(model.title)}</strong>${canvas ? `<span>${escapeHtml(activeMetadata(model))}</span>` : ""}</span></div>
   <span class="planr-privacy" data-privacy="${escapeHtml(model.privacy)}">${escapeHtml(model.privacyLabel)}</span>
 ${canvas ? '  <span class="planr-domain-toolbar" data-planr-slot="domain-toolbar" aria-label="Artifact workflow controls"></span>\n' : ""}  <span class="planr-toolbar-spacer" aria-hidden="true"></span>
 ${canvas ? `  <div class="planr-segment" role="group" aria-label="Viewport controls"><button type="button" data-planr-action="zoom-out" aria-label="Zoom out">\u2212</button><button type="button" data-planr-action="zoom-reset" aria-label="Reset zoom">${model.zoom}%</button><button type="button" data-planr-action="zoom-in" aria-label="Zoom in">+</button></div>
@@ -11980,7 +11983,7 @@ function renderArtifactShareDialog() {
 }
 function renderHostedArtifactViewerSlot() {
   return `<section class="planr-hosted-viewer" data-planr-hosted-viewer data-planr-hosted-state="idle" role="status" aria-live="polite" aria-atomic="true" hidden>
-  <div><span class="planr-mark" aria-hidden="true"></span><strong data-planr-hosted-title></strong><p data-planr-hosted-detail></p><button type="button" data-planr-hosted-retry hidden></button></div>
+  <div>${renderPlanrMark()}<strong data-planr-hosted-title></strong><p data-planr-hosted-detail></p><button type="button" data-planr-hosted-retry hidden></button></div>
 </section>`;
 }
 function renderArtifactShellMarkup(model) {
@@ -12107,28 +12110,8 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
   background: color-mix(in srgb, var(--planr-color-chrome) 96%, transparent);
 }
 .planr-brand { min-width: 0; display: flex; align-items: center; gap: 9px; }
-.planr-mark {
-  position: relative;
-  width: 20px;
-  height: 20px;
-  flex: none;
-  rotate: 45deg;
-  border: 1px solid color-mix(in srgb, var(--planr-color-primary) 70%, var(--planr-color-rule));
-  border-radius: var(--planr-radius-small);
-}
-.planr-mark::before, .planr-mark::after {
-  content: "";
-  position: absolute;
-  border-radius: 2px;
-  background: var(--planr-color-primary);
-}
-.planr-mark::before {
-  width: 4px;
-  height: 4px;
-  inset: 3px auto auto 3px;
-  box-shadow: 8px 8px 0 var(--planr-color-warning);
-}
-.planr-mark::after { width: 8px; height: 2px; inset: 9px auto auto 6px; rotate: -45deg; }
+.planr-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--planr-color-primary); contain: paint; }
+.planr-mark svg { display: block; width: 100%; height: 100%; }
 .planr-title-block { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
 .planr-title-block strong {
   max-width: 260px;
@@ -12887,7 +12870,7 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
   text-align: center;
   box-shadow: 0 18px 60px color-mix(in srgb, var(--planr-color-background) 50%, transparent);
 }
-.planr-hosted-viewer .planr-mark { display: inline-block; margin-bottom: 20px; }
+.planr-hosted-viewer .planr-mark { width: 40px; height: 40px; margin-bottom: 20px; }
 .planr-hosted-viewer strong { display: block; margin-bottom: 7px; font: 650 19px/1.2 var(--planr-font-display); }
 .planr-hosted-viewer p { margin: 0; color: var(--planr-color-text-muted); }
 .planr-hosted-viewer button { margin-top: 16px; border-color: var(--planr-color-primary); color: var(--planr-color-primary); }
@@ -13161,7 +13144,7 @@ function toolbar(document2) {
   return `<header class="planr-toolbar design-toolbar">
   <div class="design-toolbar-leading">
     ${iconButton("Screens", "left", 'data-design-toggle-nav aria-controls="design-navigator" aria-expanded="true"', "planr-toolbar-action design-panel-toggle")}
-    <div class="planr-brand"><span class="design-wordmark" aria-label="OpenPlanr">Open<span>Planr</span></span><span class="planr-title-block"><strong title="${escapeHtml(document2.title)}">${escapeHtml(document2.title)}</strong></span></div>
+    <div class="planr-brand">${renderPlanrMark()}<span class="design-wordmark" aria-label="OpenPlanr">Open<span>Planr</span></span><span class="planr-title-block"><strong title="${escapeHtml(document2.title)}">${escapeHtml(document2.title)}</strong></span></div>
   </div>
   <div class="planr-segment design-view-picker" role="group" aria-label="Design view">${["canvas", "prototype", "walkthrough"].map((view) => iconButton(view[0].toUpperCase() + view.slice(1), view, `data-design-view="${view}" aria-pressed="${document2.defaultView === view}"`)).join("")}</div>
   <div class="design-toolbar-trailing">

package/lib/host-packages/openai/openplanr/skills/plan/scripts/runtime/packages/design/templates/studio/studio.css

@@ -46,7 +46,8 @@
 }
 .design-toolbar-leading, .design-toolbar-trailing { display:flex; align-items:center; gap:10px; min-width:0; }
 .design-toolbar-trailing { justify-content:flex-end; }
-.design-toolbar .planr-brand { display:grid; gap:3px; }
+.design-toolbar .planr-brand { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-rows:auto auto; column-gap:8px; row-gap:1px; align-items:center; }
+.design-toolbar .planr-brand .planr-mark { grid-row:1 / span 2; }
 .design-wordmark { font: 800 18px/1 var(--planr-font-display); letter-spacing:-.045em; white-space:nowrap; }
 .design-wordmark > span { color:var(--planr-color-primary); }
 .design-toolbar .planr-title-block strong { max-width: min(22vw, 270px); color:var(--planr-color-text-muted); font:400 10px/1.3 var(--planr-font-body); }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openplanr",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Deterministic OpenPlanr utilities for planning storage, validation, rendering, setup, diagnostics, and GitHub/Linear synchronization",
   "type": "module",
   "main": "./dist/cli/index.js",
@@ -115,7 +115,7 @@
     "zod": "^4.3.6"
   },
   "optionalDependencies": {
-    "planr-pipeline": "0.45.3"
+    "planr-pipeline": "0.46.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.9",