openplanr 2.2.1 → 2.3.0

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

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": ".claude-plugin/plugin.json",
-      "digest": "sha256:30e4d4323d3bd9e8645cf3884f3667781f92e7c792262a5881db0b745b4bdcf1"
+      "digest": "sha256:662e5a6574a6abfddb63bd4d861ee856988ad407c84c2eab04c0550f32100406"
     },
     {
       "path": "agents/planr-backend.md",
@@ -424,7 +424,7 @@
     },
     {
       "path": "skills/design-loop/scripts/design.mjs",
-      "digest": "sha256:c3973bd11ff96580c0e45dce24e10638f1a37590fdcfc618b21f3a4db813ec7d"
+      "digest": "sha256:159012cae538612641c4d142ec2fb5054278e5a17cdadf5decf33becf78533d1"
     },
     {
       "path": "skills/design-loop/scripts/runtime/notices/entities.txt",
@@ -456,7 +456,7 @@
     },
     {
       "path": "skills/design-loop/scripts/runtime/packages/design/templates/studio/studio.css",
-      "digest": "sha256:8310b73b821764f5b1fc0fc9e0eda86f461f14ac89c683209b50b85a83f004d5"
+      "digest": "sha256:c7c58b1602368d8a27872c7618714b9246a6bc24fb1cb513aa6ae917c2858d1e"
     },
     {
       "path": "skills/design-loop/scripts/runtime/packages/design/templates/studio/studio.js",
@@ -592,7 +592,7 @@
     },
     {
       "path": "skills/design-review/scripts/design.mjs",
-      "digest": "sha256:c3973bd11ff96580c0e45dce24e10638f1a37590fdcfc618b21f3a4db813ec7d"
+      "digest": "sha256:159012cae538612641c4d142ec2fb5054278e5a17cdadf5decf33becf78533d1"
     },
     {
       "path": "skills/design-review/scripts/runtime/notices/entities.txt",
@@ -624,7 +624,7 @@
     },
     {
       "path": "skills/design-review/scripts/runtime/packages/design/templates/studio/studio.css",
-      "digest": "sha256:8310b73b821764f5b1fc0fc9e0eda86f461f14ac89c683209b50b85a83f004d5"
+      "digest": "sha256:c7c58b1602368d8a27872c7618714b9246a6bc24fb1cb513aa6ae917c2858d1e"
     },
     {
       "path": "skills/design-review/scripts/runtime/packages/design/templates/studio/studio.js",
@@ -760,7 +760,7 @@
     },
     {
       "path": "skills/design/scripts/design.mjs",
-      "digest": "sha256:c3973bd11ff96580c0e45dce24e10638f1a37590fdcfc618b21f3a4db813ec7d"
+      "digest": "sha256:159012cae538612641c4d142ec2fb5054278e5a17cdadf5decf33becf78533d1"
     },
     {
       "path": "skills/design/scripts/runtime/notices/entities.txt",
@@ -792,7 +792,7 @@
     },
     {
       "path": "skills/design/scripts/runtime/packages/design/templates/studio/studio.css",
-      "digest": "sha256:8310b73b821764f5b1fc0fc9e0eda86f461f14ac89c683209b50b85a83f004d5"
+      "digest": "sha256:c7c58b1602368d8a27872c7618714b9246a6bc24fb1cb513aa6ae917c2858d1e"
     },
     {
       "path": "skills/design/scripts/runtime/packages/design/templates/studio/studio.js",
@@ -876,7 +876,7 @@
     },
     {
       "path": "skills/diagram/openplanr.skill.json",
-      "digest": "sha256:e66b2adbd7c1621d056fbd77ff24973eac57ffdc6aca04fbd6c013afc9c71b1c"
+      "digest": "sha256:1d8b8127914dd7a637ea475257c109a72544f860ddf5ec40c3a78563831a9906"
     },
     {
       "path": "skills/diagram/references/diagram-document.md",
@@ -888,11 +888,11 @@
     },
     {
       "path": "skills/diagram/references/diagram-intent-to-ir.md",
-      "digest": "sha256:ce7d0107b02067c0d9fac6abe8e6a6ce8cb3f23aabcab801c6bb5a3824555c2e"
+      "digest": "sha256:6452ff367ad67efa0d6344fe557d3f6b432fcce06326a3dda68fe192a781006c"
     },
     {
       "path": "skills/diagram/SKILL.md",
-      "digest": "sha256:61863f9cf08902953335355e48c7fbb18ff86e24ac0ef2693c8f697b6409db57"
+      "digest": "sha256:835246d34f87f0746ee927f461ebc32190679094793031a63e6fc29ddafa288d"
     },
     {
       "path": "skills/doctor/openplanr.skill.json",
@@ -984,7 +984,7 @@
     },
     {
       "path": "skills/plan/scripts/design.mjs",
-      "digest": "sha256:c3973bd11ff96580c0e45dce24e10638f1a37590fdcfc618b21f3a4db813ec7d"
+      "digest": "sha256:159012cae538612641c4d142ec2fb5054278e5a17cdadf5decf33becf78533d1"
     },
     {
       "path": "skills/plan/scripts/planning-ids.mjs",
@@ -1020,7 +1020,7 @@
     },
     {
       "path": "skills/plan/scripts/runtime/packages/design/templates/studio/studio.css",
-      "digest": "sha256:8310b73b821764f5b1fc0fc9e0eda86f461f14ac89c683209b50b85a83f004d5"
+      "digest": "sha256:c7c58b1602368d8a27872c7618714b9246a6bc24fb1cb513aa6ae917c2858d1e"
     },
     {
       "path": "skills/plan/scripts/runtime/packages/design/templates/studio/studio.js",
@@ -1203,5 +1203,5 @@
       "digest": "sha256:53698324b62f43b672ce8fe1654c526c96fb202e313442f09c6fc1e72268677e"
     }
   ],
-  "contentDigest": "sha256:95c3df86ea40986930c9a82fa581dd65be182aca8d880553caa4b74eec62946d"
+  "contentDigest": "sha256:0fb160d8a2b85f93fe197e9eef7d5a5e54946534f7713d163d0e42b00e509b87"
 }

package/lib/host-packages/claude/openplanr/skills/design/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/claude/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/claude/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/claude/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/claude/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/claude/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/claude/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/claude/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/claude/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/claude/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/claude/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/lib/host-packages/cursor/openplanr/.openplanr-content.json

@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "manifest.json",
-      "digest": "sha256:8bb1d0f4ea8433818cc14a167b35b10949d1e32fc95f709e1774c881d3090c15"
+      "digest": "sha256:2c28d0452fa8159e2e7c55d5e5e8a6df4f0b28a414b464001981941c2961acf7"
     },
     {
       "path": "rules/planr-artifact.mdc",
@@ -244,7 +244,7 @@
     },
     {
       "path": "rules/planr-design-loop/scripts/design.mjs",
-      "digest": "sha256:c3973bd11ff96580c0e45dce24e10638f1a37590fdcfc618b21f3a4db813ec7d"
+      "digest": "sha256:159012cae538612641c4d142ec2fb5054278e5a17cdadf5decf33becf78533d1"
     },
     {
       "path": "rules/planr-design-loop/scripts/runtime/notices/entities.txt",
@@ -276,7 +276,7 @@
     },
     {
       "path": "rules/planr-design-loop/scripts/runtime/packages/design/templates/studio/studio.css",
-      "digest": "sha256:8310b73b821764f5b1fc0fc9e0eda86f461f14ac89c683209b50b85a83f004d5"
+      "digest": "sha256:c7c58b1602368d8a27872c7618714b9246a6bc24fb1cb513aa6ae917c2858d1e"
     },
     {
       "path": "rules/planr-design-loop/scripts/runtime/packages/design/templates/studio/studio.js",
@@ -408,7 +408,7 @@
     },
     {
       "path": "rules/planr-design-review/scripts/design.mjs",
-      "digest": "sha256:c3973bd11ff96580c0e45dce24e10638f1a37590fdcfc618b21f3a4db813ec7d"
+      "digest": "sha256:159012cae538612641c4d142ec2fb5054278e5a17cdadf5decf33becf78533d1"
     },
     {
       "path": "rules/planr-design-review/scripts/runtime/notices/entities.txt",
@@ -440,7 +440,7 @@
     },
     {
       "path": "rules/planr-design-review/scripts/runtime/packages/design/templates/studio/studio.css",
-      "digest": "sha256:8310b73b821764f5b1fc0fc9e0eda86f461f14ac89c683209b50b85a83f004d5"
+      "digest": "sha256:c7c58b1602368d8a27872c7618714b9246a6bc24fb1cb513aa6ae917c2858d1e"
     },
     {
       "path": "rules/planr-design-review/scripts/runtime/packages/design/templates/studio/studio.js",
@@ -572,7 +572,7 @@
     },
     {
       "path": "rules/planr-design/scripts/design.mjs",
-      "digest": "sha256:c3973bd11ff96580c0e45dce24e10638f1a37590fdcfc618b21f3a4db813ec7d"
+      "digest": "sha256:159012cae538612641c4d142ec2fb5054278e5a17cdadf5decf33becf78533d1"
     },
     {
       "path": "rules/planr-design/scripts/runtime/notices/entities.txt",
@@ -604,7 +604,7 @@
     },
     {
       "path": "rules/planr-design/scripts/runtime/packages/design/templates/studio/studio.css",
-      "digest": "sha256:8310b73b821764f5b1fc0fc9e0eda86f461f14ac89c683209b50b85a83f004d5"
+      "digest": "sha256:c7c58b1602368d8a27872c7618714b9246a6bc24fb1cb513aa6ae917c2858d1e"
     },
     {
       "path": "rules/planr-design/scripts/runtime/packages/design/templates/studio/studio.js",
@@ -684,7 +684,7 @@
     },
     {
       "path": "rules/planr-diagram.mdc",
-      "digest": "sha256:c448e280bfbdf5cac48097574118ab5e33e02ec3bdd3854499b85a5c8aba02a8"
+      "digest": "sha256:cf1df93175e37d2bbfd3bfd9dd514e76170c505f53fc1405445873d6e6dfa97a"
     },
     {
       "path": "rules/planr-diagram/references/diagram-document.md",
@@ -696,7 +696,7 @@
     },
     {
       "path": "rules/planr-diagram/references/diagram-intent-to-ir.md",
-      "digest": "sha256:ce7d0107b02067c0d9fac6abe8e6a6ce8cb3f23aabcab801c6bb5a3824555c2e"
+      "digest": "sha256:6452ff367ad67efa0d6344fe557d3f6b432fcce06326a3dda68fe192a781006c"
     },
     {
       "path": "rules/planr-doctor.mdc",
@@ -764,7 +764,7 @@
     },
     {
       "path": "rules/planr-plan/scripts/design.mjs",
-      "digest": "sha256:c3973bd11ff96580c0e45dce24e10638f1a37590fdcfc618b21f3a4db813ec7d"
+      "digest": "sha256:159012cae538612641c4d142ec2fb5054278e5a17cdadf5decf33becf78533d1"
     },
     {
       "path": "rules/planr-plan/scripts/planning-ids.mjs",
@@ -800,7 +800,7 @@
     },
     {
       "path": "rules/planr-plan/scripts/runtime/packages/design/templates/studio/studio.css",
-      "digest": "sha256:8310b73b821764f5b1fc0fc9e0eda86f461f14ac89c683209b50b85a83f004d5"
+      "digest": "sha256:c7c58b1602368d8a27872c7618714b9246a6bc24fb1cb513aa6ae917c2858d1e"
     },
     {
       "path": "rules/planr-plan/scripts/runtime/packages/design/templates/studio/studio.js",
@@ -955,5 +955,5 @@
       "digest": "sha256:6378ad3477e4be8b7e916c4249404c50cafecac1c70ffbf5a1a2fce195dfea16"
     }
   ],
-  "contentDigest": "sha256:de428e63964d84ff6685a36814823e85474f8593b0f7d7013135600a5b171ce0"
+  "contentDigest": "sha256:3b93c609c36ad402446485de81a0e01a0d2fb14bde7816a4c223e1cae397924a"
 }