openplanr 2.2.2 → 2.4.0

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

@@ -29,6 +29,12 @@ question UI. Write one digestless Protocol 1.6 diagram draft from the bundled
 contract, then run the command below. The CLI validates it and adds the
 canonical digest; the skill must not calculate that digest itself.
 
+For "who does what, and when" between actors, use a lane grammar (`swimlane`
+or `process`): one lane per actor with its `members`, `left-right` so lanes
+read as rows, and relations for the handoffs. For a board (`kanban`,
+`story-map`), use `top-down` so lanes read as columns and leave `relations`
+empty; members stack in declared order.
+
 ```sh
 planr diagram render <file>.planr-diagram.json --json
 ```
@@ -50,6 +56,23 @@ 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
+
+Every manifest result carries a `quality` object — `status`, `failedChecks`,
+`warningChecks`. Treat anything other than `pass` as unfinished work. An
+`invalid` set returns no `nextAction`: restructure and render again rather than
+opening the studio. A missing `quality` object means the report could not be
+read, which `warnings` explains; that set is unverified, not verified.
+
+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-document.md

@@ -76,6 +76,10 @@ messages, and events as named phases. After participant IDs, interleave phase
 event IDs and message relation IDs in `accessibility.readingOrder`. That order
 is the canonical timeline used by the renderer and editable projections.
 
+For a lane grammar, add a `lanes` collection of `{ "id", "label", "members" }`
+entries whose `members` list node IDs. Every member must exist, and the
+renderer draws each lane as a titled band holding those nodes.
+
 Write the draft to `<slug>.planr-diagram.json`, then run:
 
 ```sh

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

@@ -17,6 +17,31 @@ 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.
+- Lanes are bands perpendicular to the flow: rows under `left-right`, columns
+  under `top-down`. Put every node in exactly one lane; a node outside all
+  lanes renders in an unbanded strip after the last lane. A step's position
+  along the flow is its relation rank, so a handoff lines up across lanes.
+
 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:db06727a290ba7f1c5cb2602e68de59d09132f72f92296b90b3c2c03dc7094d9"
+      "digest": "sha256:bbb9ecf8ec75bb69eaccf7f68d6e581eae08e7edb8e083501860970ad5bc0946"
     },
     {
       "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,11 +684,11 @@
     },
     {
       "path": "rules/planr-diagram.mdc",
-      "digest": "sha256:c448e280bfbdf5cac48097574118ab5e33e02ec3bdd3854499b85a5c8aba02a8"
+      "digest": "sha256:5524da92a8c920f8d1d81a78a366052b7cfa998c5489690ae40e643aa2e028d3"
     },
     {
       "path": "rules/planr-diagram/references/diagram-document.md",
-      "digest": "sha256:a7e83c660549bc3a37f27f952b1b2d160fb3b39d9952c6dc8bfec7ff73b7761d"
+      "digest": "sha256:4d303f1e333a0e278bbe4a5dcbefd8c578a6cfda27211f9b1f3b687938ff0248"
     },
     {
       "path": "rules/planr-diagram/references/diagram-fidelity.md",
@@ -696,7 +696,7 @@
     },
     {
       "path": "rules/planr-diagram/references/diagram-intent-to-ir.md",
-      "digest": "sha256:ce7d0107b02067c0d9fac6abe8e6a6ce8cb3f23aabcab801c6bb5a3824555c2e"
+      "digest": "sha256:8f29a9ca6cfa448dcd220228c697e6afa198881e5777df2c48899cab9aa8693d"
     },
     {
       "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:27c76a48f932a9b1468b3f9a9d96401f2ab49d927533baf0d83c35f10e792800"
+  "contentDigest": "sha256:1393039fc6a3d0949341a75c9ab94ab50c30e7145a06073648f978984db10efb"
 }

package/lib/host-packages/cursor/openplanr/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "openplanr",
-  "version": "2.2.2",
+  "version": "2.4.0",
   "ruleCount": 27,
   "rules": [
     "rules/planr-artifact.mdc",

package/lib/host-packages/cursor/openplanr/rules/planr-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/cursor/openplanr/rules/planr-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/cursor/openplanr/rules/planr-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/cursor/openplanr/rules/planr-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); }