openplanr 2.2.2 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/lib/host-packages/adapter-registry.json +5 -5
  3. package/lib/host-packages/capability-map.json +1 -1
  4. package/lib/host-packages/claude/.claude-plugin/marketplace.json +2 -2
  5. package/lib/host-packages/claude/openplanr/.claude-plugin/plugin.json +1 -1
  6. package/lib/host-packages/claude/openplanr/.openplanr-content.json +13 -13
  7. package/lib/host-packages/claude/openplanr/skills/design/scripts/design.mjs +9 -26
  8. package/lib/host-packages/claude/openplanr/skills/design/scripts/runtime/packages/design/templates/studio/studio.css +2 -1
  9. package/lib/host-packages/claude/openplanr/skills/design-loop/scripts/design.mjs +9 -26
  10. package/lib/host-packages/claude/openplanr/skills/design-loop/scripts/runtime/packages/design/templates/studio/studio.css +2 -1
  11. package/lib/host-packages/claude/openplanr/skills/design-review/scripts/design.mjs +9 -26
  12. package/lib/host-packages/claude/openplanr/skills/design-review/scripts/runtime/packages/design/templates/studio/studio.css +2 -1
  13. package/lib/host-packages/claude/openplanr/skills/diagram/SKILL.md +11 -0
  14. package/lib/host-packages/claude/openplanr/skills/diagram/openplanr.skill.json +1 -1
  15. package/lib/host-packages/claude/openplanr/skills/diagram/references/diagram-intent-to-ir.md +21 -0
  16. package/lib/host-packages/claude/openplanr/skills/plan/scripts/design.mjs +9 -26
  17. package/lib/host-packages/claude/openplanr/skills/plan/scripts/runtime/packages/design/templates/studio/studio.css +2 -1
  18. package/lib/host-packages/cursor/openplanr/.openplanr-content.json +12 -12
  19. package/lib/host-packages/cursor/openplanr/manifest.json +1 -1
  20. package/lib/host-packages/cursor/openplanr/rules/planr-design/scripts/design.mjs +9 -26
  21. package/lib/host-packages/cursor/openplanr/rules/planr-design/scripts/runtime/packages/design/templates/studio/studio.css +2 -1
  22. package/lib/host-packages/cursor/openplanr/rules/planr-design-loop/scripts/design.mjs +9 -26
  23. package/lib/host-packages/cursor/openplanr/rules/planr-design-loop/scripts/runtime/packages/design/templates/studio/studio.css +2 -1
  24. package/lib/host-packages/cursor/openplanr/rules/planr-design-review/scripts/design.mjs +9 -26
  25. package/lib/host-packages/cursor/openplanr/rules/planr-design-review/scripts/runtime/packages/design/templates/studio/studio.css +2 -1
  26. package/lib/host-packages/cursor/openplanr/rules/planr-diagram/references/diagram-intent-to-ir.md +21 -0
  27. package/lib/host-packages/cursor/openplanr/rules/planr-diagram.mdc +11 -0
  28. package/lib/host-packages/cursor/openplanr/rules/planr-plan/scripts/design.mjs +9 -26
  29. package/lib/host-packages/cursor/openplanr/rules/planr-plan/scripts/runtime/packages/design/templates/studio/studio.css +2 -1
  30. package/lib/host-packages/openai/.claude-plugin/marketplace.json +2 -2
  31. package/lib/host-packages/openai/openplanr/.codex-plugin/plugin.json +1 -1
  32. package/lib/host-packages/openai/openplanr/.openplanr-content.json +13 -13
  33. package/lib/host-packages/openai/openplanr/skills/design/scripts/design.mjs +9 -26
  34. package/lib/host-packages/openai/openplanr/skills/design/scripts/runtime/packages/design/templates/studio/studio.css +2 -1
  35. package/lib/host-packages/openai/openplanr/skills/design-loop/scripts/design.mjs +9 -26
  36. package/lib/host-packages/openai/openplanr/skills/design-loop/scripts/runtime/packages/design/templates/studio/studio.css +2 -1
  37. package/lib/host-packages/openai/openplanr/skills/design-review/scripts/design.mjs +9 -26
  38. package/lib/host-packages/openai/openplanr/skills/design-review/scripts/runtime/packages/design/templates/studio/studio.css +2 -1
  39. package/lib/host-packages/openai/openplanr/skills/diagram/SKILL.md +11 -0
  40. package/lib/host-packages/openai/openplanr/skills/diagram/openplanr.skill.json +1 -1
  41. package/lib/host-packages/openai/openplanr/skills/diagram/references/diagram-intent-to-ir.md +21 -0
  42. package/lib/host-packages/openai/openplanr/skills/plan/scripts/design.mjs +9 -26
  43. package/lib/host-packages/openai/openplanr/skills/plan/scripts/runtime/packages/design/templates/studio/studio.css +2 -1
  44. package/package.json +2 -2
@@ -8,7 +8,7 @@
8
8
  "files": [
9
9
  {
10
10
  "path": "manifest.json",
11
- "digest": "sha256:db06727a290ba7f1c5cb2602e68de59d09132f72f92296b90b3c2c03dc7094d9"
11
+ "digest": "sha256:2c28d0452fa8159e2e7c55d5e5e8a6df4f0b28a414b464001981941c2961acf7"
12
12
  },
13
13
  {
14
14
  "path": "rules/planr-artifact.mdc",
@@ -244,7 +244,7 @@
244
244
  },
245
245
  {
246
246
  "path": "rules/planr-design-loop/scripts/design.mjs",
247
- "digest": "sha256:c3973bd11ff96580c0e45dce24e10638f1a37590fdcfc618b21f3a4db813ec7d"
247
+ "digest": "sha256:159012cae538612641c4d142ec2fb5054278e5a17cdadf5decf33becf78533d1"
248
248
  },
249
249
  {
250
250
  "path": "rules/planr-design-loop/scripts/runtime/notices/entities.txt",
@@ -276,7 +276,7 @@
276
276
  },
277
277
  {
278
278
  "path": "rules/planr-design-loop/scripts/runtime/packages/design/templates/studio/studio.css",
279
- "digest": "sha256:8310b73b821764f5b1fc0fc9e0eda86f461f14ac89c683209b50b85a83f004d5"
279
+ "digest": "sha256:c7c58b1602368d8a27872c7618714b9246a6bc24fb1cb513aa6ae917c2858d1e"
280
280
  },
281
281
  {
282
282
  "path": "rules/planr-design-loop/scripts/runtime/packages/design/templates/studio/studio.js",
@@ -408,7 +408,7 @@
408
408
  },
409
409
  {
410
410
  "path": "rules/planr-design-review/scripts/design.mjs",
411
- "digest": "sha256:c3973bd11ff96580c0e45dce24e10638f1a37590fdcfc618b21f3a4db813ec7d"
411
+ "digest": "sha256:159012cae538612641c4d142ec2fb5054278e5a17cdadf5decf33becf78533d1"
412
412
  },
413
413
  {
414
414
  "path": "rules/planr-design-review/scripts/runtime/notices/entities.txt",
@@ -440,7 +440,7 @@
440
440
  },
441
441
  {
442
442
  "path": "rules/planr-design-review/scripts/runtime/packages/design/templates/studio/studio.css",
443
- "digest": "sha256:8310b73b821764f5b1fc0fc9e0eda86f461f14ac89c683209b50b85a83f004d5"
443
+ "digest": "sha256:c7c58b1602368d8a27872c7618714b9246a6bc24fb1cb513aa6ae917c2858d1e"
444
444
  },
445
445
  {
446
446
  "path": "rules/planr-design-review/scripts/runtime/packages/design/templates/studio/studio.js",
@@ -572,7 +572,7 @@
572
572
  },
573
573
  {
574
574
  "path": "rules/planr-design/scripts/design.mjs",
575
- "digest": "sha256:c3973bd11ff96580c0e45dce24e10638f1a37590fdcfc618b21f3a4db813ec7d"
575
+ "digest": "sha256:159012cae538612641c4d142ec2fb5054278e5a17cdadf5decf33becf78533d1"
576
576
  },
577
577
  {
578
578
  "path": "rules/planr-design/scripts/runtime/notices/entities.txt",
@@ -604,7 +604,7 @@
604
604
  },
605
605
  {
606
606
  "path": "rules/planr-design/scripts/runtime/packages/design/templates/studio/studio.css",
607
- "digest": "sha256:8310b73b821764f5b1fc0fc9e0eda86f461f14ac89c683209b50b85a83f004d5"
607
+ "digest": "sha256:c7c58b1602368d8a27872c7618714b9246a6bc24fb1cb513aa6ae917c2858d1e"
608
608
  },
609
609
  {
610
610
  "path": "rules/planr-design/scripts/runtime/packages/design/templates/studio/studio.js",
@@ -684,7 +684,7 @@
684
684
  },
685
685
  {
686
686
  "path": "rules/planr-diagram.mdc",
687
- "digest": "sha256:c448e280bfbdf5cac48097574118ab5e33e02ec3bdd3854499b85a5c8aba02a8"
687
+ "digest": "sha256:cf1df93175e37d2bbfd3bfd9dd514e76170c505f53fc1405445873d6e6dfa97a"
688
688
  },
689
689
  {
690
690
  "path": "rules/planr-diagram/references/diagram-document.md",
@@ -696,7 +696,7 @@
696
696
  },
697
697
  {
698
698
  "path": "rules/planr-diagram/references/diagram-intent-to-ir.md",
699
- "digest": "sha256:ce7d0107b02067c0d9fac6abe8e6a6ce8cb3f23aabcab801c6bb5a3824555c2e"
699
+ "digest": "sha256:6452ff367ad67efa0d6344fe557d3f6b432fcce06326a3dda68fe192a781006c"
700
700
  },
701
701
  {
702
702
  "path": "rules/planr-doctor.mdc",
@@ -764,7 +764,7 @@
764
764
  },
765
765
  {
766
766
  "path": "rules/planr-plan/scripts/design.mjs",
767
- "digest": "sha256:c3973bd11ff96580c0e45dce24e10638f1a37590fdcfc618b21f3a4db813ec7d"
767
+ "digest": "sha256:159012cae538612641c4d142ec2fb5054278e5a17cdadf5decf33becf78533d1"
768
768
  },
769
769
  {
770
770
  "path": "rules/planr-plan/scripts/planning-ids.mjs",
@@ -800,7 +800,7 @@
800
800
  },
801
801
  {
802
802
  "path": "rules/planr-plan/scripts/runtime/packages/design/templates/studio/studio.css",
803
- "digest": "sha256:8310b73b821764f5b1fc0fc9e0eda86f461f14ac89c683209b50b85a83f004d5"
803
+ "digest": "sha256:c7c58b1602368d8a27872c7618714b9246a6bc24fb1cb513aa6ae917c2858d1e"
804
804
  },
805
805
  {
806
806
  "path": "rules/planr-plan/scripts/runtime/packages/design/templates/studio/studio.js",
@@ -955,5 +955,5 @@
955
955
  "digest": "sha256:6378ad3477e4be8b7e916c4249404c50cafecac1c70ffbf5a1a2fce195dfea16"
956
956
  }
957
957
  ],
958
- "contentDigest": "sha256:27c76a48f932a9b1468b3f9a9d96401f2ab49d927533baf0d83c35f10e792800"
958
+ "contentDigest": "sha256:3b93c609c36ad402446485de81a0e01a0d2fb14bde7816a4c223e1cae397924a"
959
959
  }
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "openplanr",
3
- "version": "2.2.2",
3
+ "version": "2.3.0",
4
4
  "ruleCount": 27,
5
5
  "rules": [
6
6
  "rules/planr-artifact.mdc",
@@ -11837,11 +11837,14 @@ function activeMetadata(model) {
11837
11837
  if (!artifact) return "HTML \xB7 1440\xD7900";
11838
11838
  return `${artifact.kind.toUpperCase()} \xB7 ${artifact.viewport.width}\xD7${artifact.viewport.height}`;
11839
11839
  }
11840
+ function renderPlanrMark() {
11841
+ 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>';
11842
+ }
11840
11843
  function renderArtifactToolbar(model) {
11841
11844
  const interact = model.reviewMode === "interact";
11842
11845
  const canvas = model.presentation === "canvas";
11843
11846
  return `<header class="planr-toolbar">
11844
- <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>
11847
+ <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>
11845
11848
  <span class="planr-privacy" data-privacy="${escapeHtml(model.privacy)}">${escapeHtml(model.privacyLabel)}</span>
11846
11849
  ${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>
11847
11850
  ${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() {
11980
11983
  }
11981
11984
  function renderHostedArtifactViewerSlot() {
11982
11985
  return `<section class="planr-hosted-viewer" data-planr-hosted-viewer data-planr-hosted-state="idle" role="status" aria-live="polite" aria-atomic="true" hidden>
11983
- <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>
11986
+ <div>${renderPlanrMark()}<strong data-planr-hosted-title></strong><p data-planr-hosted-detail></p><button type="button" data-planr-hosted-retry hidden></button></div>
11984
11987
  </section>`;
11985
11988
  }
11986
11989
  function renderArtifactShellMarkup(model) {
@@ -12107,28 +12110,8 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
12107
12110
  background: color-mix(in srgb, var(--planr-color-chrome) 96%, transparent);
12108
12111
  }
12109
12112
  .planr-brand { min-width: 0; display: flex; align-items: center; gap: 9px; }
12110
- .planr-mark {
12111
- position: relative;
12112
- width: 20px;
12113
- height: 20px;
12114
- flex: none;
12115
- rotate: 45deg;
12116
- border: 1px solid color-mix(in srgb, var(--planr-color-primary) 70%, var(--planr-color-rule));
12117
- border-radius: var(--planr-radius-small);
12118
- }
12119
- .planr-mark::before, .planr-mark::after {
12120
- content: "";
12121
- position: absolute;
12122
- border-radius: 2px;
12123
- background: var(--planr-color-primary);
12124
- }
12125
- .planr-mark::before {
12126
- width: 4px;
12127
- height: 4px;
12128
- inset: 3px auto auto 3px;
12129
- box-shadow: 8px 8px 0 var(--planr-color-warning);
12130
- }
12131
- .planr-mark::after { width: 8px; height: 2px; inset: 9px auto auto 6px; rotate: -45deg; }
12113
+ .planr-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--planr-color-primary); contain: paint; }
12114
+ .planr-mark svg { display: block; width: 100%; height: 100%; }
12132
12115
  .planr-title-block { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
12133
12116
  .planr-title-block strong {
12134
12117
  max-width: 260px;
@@ -12887,7 +12870,7 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
12887
12870
  text-align: center;
12888
12871
  box-shadow: 0 18px 60px color-mix(in srgb, var(--planr-color-background) 50%, transparent);
12889
12872
  }
12890
- .planr-hosted-viewer .planr-mark { display: inline-block; margin-bottom: 20px; }
12873
+ .planr-hosted-viewer .planr-mark { width: 40px; height: 40px; margin-bottom: 20px; }
12891
12874
  .planr-hosted-viewer strong { display: block; margin-bottom: 7px; font: 650 19px/1.2 var(--planr-font-display); }
12892
12875
  .planr-hosted-viewer p { margin: 0; color: var(--planr-color-text-muted); }
12893
12876
  .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) {
13161
13144
  return `<header class="planr-toolbar design-toolbar">
13162
13145
  <div class="design-toolbar-leading">
13163
13146
  ${iconButton("Screens", "left", 'data-design-toggle-nav aria-controls="design-navigator" aria-expanded="true"', "planr-toolbar-action design-panel-toggle")}
13164
- <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>
13147
+ <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>
13165
13148
  </div>
13166
13149
  <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>
13167
13150
  <div class="design-toolbar-trailing">
@@ -46,7 +46,8 @@
46
46
  }
47
47
  .design-toolbar-leading, .design-toolbar-trailing { display:flex; align-items:center; gap:10px; min-width:0; }
48
48
  .design-toolbar-trailing { justify-content:flex-end; }
49
- .design-toolbar .planr-brand { display:grid; gap:3px; }
49
+ .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; }
50
+ .design-toolbar .planr-brand .planr-mark { grid-row:1 / span 2; }
50
51
  .design-wordmark { font: 800 18px/1 var(--planr-font-display); letter-spacing:-.045em; white-space:nowrap; }
51
52
  .design-wordmark > span { color:var(--planr-color-primary); }
52
53
  .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); }
@@ -11837,11 +11837,14 @@ function activeMetadata(model) {
11837
11837
  if (!artifact) return "HTML \xB7 1440\xD7900";
11838
11838
  return `${artifact.kind.toUpperCase()} \xB7 ${artifact.viewport.width}\xD7${artifact.viewport.height}`;
11839
11839
  }
11840
+ function renderPlanrMark() {
11841
+ 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>';
11842
+ }
11840
11843
  function renderArtifactToolbar(model) {
11841
11844
  const interact = model.reviewMode === "interact";
11842
11845
  const canvas = model.presentation === "canvas";
11843
11846
  return `<header class="planr-toolbar">
11844
- <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>
11847
+ <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>
11845
11848
  <span class="planr-privacy" data-privacy="${escapeHtml(model.privacy)}">${escapeHtml(model.privacyLabel)}</span>
11846
11849
  ${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>
11847
11850
  ${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() {
11980
11983
  }
11981
11984
  function renderHostedArtifactViewerSlot() {
11982
11985
  return `<section class="planr-hosted-viewer" data-planr-hosted-viewer data-planr-hosted-state="idle" role="status" aria-live="polite" aria-atomic="true" hidden>
11983
- <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>
11986
+ <div>${renderPlanrMark()}<strong data-planr-hosted-title></strong><p data-planr-hosted-detail></p><button type="button" data-planr-hosted-retry hidden></button></div>
11984
11987
  </section>`;
11985
11988
  }
11986
11989
  function renderArtifactShellMarkup(model) {
@@ -12107,28 +12110,8 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
12107
12110
  background: color-mix(in srgb, var(--planr-color-chrome) 96%, transparent);
12108
12111
  }
12109
12112
  .planr-brand { min-width: 0; display: flex; align-items: center; gap: 9px; }
12110
- .planr-mark {
12111
- position: relative;
12112
- width: 20px;
12113
- height: 20px;
12114
- flex: none;
12115
- rotate: 45deg;
12116
- border: 1px solid color-mix(in srgb, var(--planr-color-primary) 70%, var(--planr-color-rule));
12117
- border-radius: var(--planr-radius-small);
12118
- }
12119
- .planr-mark::before, .planr-mark::after {
12120
- content: "";
12121
- position: absolute;
12122
- border-radius: 2px;
12123
- background: var(--planr-color-primary);
12124
- }
12125
- .planr-mark::before {
12126
- width: 4px;
12127
- height: 4px;
12128
- inset: 3px auto auto 3px;
12129
- box-shadow: 8px 8px 0 var(--planr-color-warning);
12130
- }
12131
- .planr-mark::after { width: 8px; height: 2px; inset: 9px auto auto 6px; rotate: -45deg; }
12113
+ .planr-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--planr-color-primary); contain: paint; }
12114
+ .planr-mark svg { display: block; width: 100%; height: 100%; }
12132
12115
  .planr-title-block { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
12133
12116
  .planr-title-block strong {
12134
12117
  max-width: 260px;
@@ -12887,7 +12870,7 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
12887
12870
  text-align: center;
12888
12871
  box-shadow: 0 18px 60px color-mix(in srgb, var(--planr-color-background) 50%, transparent);
12889
12872
  }
12890
- .planr-hosted-viewer .planr-mark { display: inline-block; margin-bottom: 20px; }
12873
+ .planr-hosted-viewer .planr-mark { width: 40px; height: 40px; margin-bottom: 20px; }
12891
12874
  .planr-hosted-viewer strong { display: block; margin-bottom: 7px; font: 650 19px/1.2 var(--planr-font-display); }
12892
12875
  .planr-hosted-viewer p { margin: 0; color: var(--planr-color-text-muted); }
12893
12876
  .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) {
13161
13144
  return `<header class="planr-toolbar design-toolbar">
13162
13145
  <div class="design-toolbar-leading">
13163
13146
  ${iconButton("Screens", "left", 'data-design-toggle-nav aria-controls="design-navigator" aria-expanded="true"', "planr-toolbar-action design-panel-toggle")}
13164
- <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>
13147
+ <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>
13165
13148
  </div>
13166
13149
  <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>
13167
13150
  <div class="design-toolbar-trailing">
@@ -46,7 +46,8 @@
46
46
  }
47
47
  .design-toolbar-leading, .design-toolbar-trailing { display:flex; align-items:center; gap:10px; min-width:0; }
48
48
  .design-toolbar-trailing { justify-content:flex-end; }
49
- .design-toolbar .planr-brand { display:grid; gap:3px; }
49
+ .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; }
50
+ .design-toolbar .planr-brand .planr-mark { grid-row:1 / span 2; }
50
51
  .design-wordmark { font: 800 18px/1 var(--planr-font-display); letter-spacing:-.045em; white-space:nowrap; }
51
52
  .design-wordmark > span { color:var(--planr-color-primary); }
52
53
  .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); }
@@ -11837,11 +11837,14 @@ function activeMetadata(model) {
11837
11837
  if (!artifact) return "HTML \xB7 1440\xD7900";
11838
11838
  return `${artifact.kind.toUpperCase()} \xB7 ${artifact.viewport.width}\xD7${artifact.viewport.height}`;
11839
11839
  }
11840
+ function renderPlanrMark() {
11841
+ 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>';
11842
+ }
11840
11843
  function renderArtifactToolbar(model) {
11841
11844
  const interact = model.reviewMode === "interact";
11842
11845
  const canvas = model.presentation === "canvas";
11843
11846
  return `<header class="planr-toolbar">
11844
- <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>
11847
+ <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>
11845
11848
  <span class="planr-privacy" data-privacy="${escapeHtml(model.privacy)}">${escapeHtml(model.privacyLabel)}</span>
11846
11849
  ${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>
11847
11850
  ${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() {
11980
11983
  }
11981
11984
  function renderHostedArtifactViewerSlot() {
11982
11985
  return `<section class="planr-hosted-viewer" data-planr-hosted-viewer data-planr-hosted-state="idle" role="status" aria-live="polite" aria-atomic="true" hidden>
11983
- <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>
11986
+ <div>${renderPlanrMark()}<strong data-planr-hosted-title></strong><p data-planr-hosted-detail></p><button type="button" data-planr-hosted-retry hidden></button></div>
11984
11987
  </section>`;
11985
11988
  }
11986
11989
  function renderArtifactShellMarkup(model) {
@@ -12107,28 +12110,8 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
12107
12110
  background: color-mix(in srgb, var(--planr-color-chrome) 96%, transparent);
12108
12111
  }
12109
12112
  .planr-brand { min-width: 0; display: flex; align-items: center; gap: 9px; }
12110
- .planr-mark {
12111
- position: relative;
12112
- width: 20px;
12113
- height: 20px;
12114
- flex: none;
12115
- rotate: 45deg;
12116
- border: 1px solid color-mix(in srgb, var(--planr-color-primary) 70%, var(--planr-color-rule));
12117
- border-radius: var(--planr-radius-small);
12118
- }
12119
- .planr-mark::before, .planr-mark::after {
12120
- content: "";
12121
- position: absolute;
12122
- border-radius: 2px;
12123
- background: var(--planr-color-primary);
12124
- }
12125
- .planr-mark::before {
12126
- width: 4px;
12127
- height: 4px;
12128
- inset: 3px auto auto 3px;
12129
- box-shadow: 8px 8px 0 var(--planr-color-warning);
12130
- }
12131
- .planr-mark::after { width: 8px; height: 2px; inset: 9px auto auto 6px; rotate: -45deg; }
12113
+ .planr-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--planr-color-primary); contain: paint; }
12114
+ .planr-mark svg { display: block; width: 100%; height: 100%; }
12132
12115
  .planr-title-block { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
12133
12116
  .planr-title-block strong {
12134
12117
  max-width: 260px;
@@ -12887,7 +12870,7 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
12887
12870
  text-align: center;
12888
12871
  box-shadow: 0 18px 60px color-mix(in srgb, var(--planr-color-background) 50%, transparent);
12889
12872
  }
12890
- .planr-hosted-viewer .planr-mark { display: inline-block; margin-bottom: 20px; }
12873
+ .planr-hosted-viewer .planr-mark { width: 40px; height: 40px; margin-bottom: 20px; }
12891
12874
  .planr-hosted-viewer strong { display: block; margin-bottom: 7px; font: 650 19px/1.2 var(--planr-font-display); }
12892
12875
  .planr-hosted-viewer p { margin: 0; color: var(--planr-color-text-muted); }
12893
12876
  .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) {
13161
13144
  return `<header class="planr-toolbar design-toolbar">
13162
13145
  <div class="design-toolbar-leading">
13163
13146
  ${iconButton("Screens", "left", 'data-design-toggle-nav aria-controls="design-navigator" aria-expanded="true"', "planr-toolbar-action design-panel-toggle")}
13164
- <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>
13147
+ <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>
13165
13148
  </div>
13166
13149
  <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>
13167
13150
  <div class="design-toolbar-trailing">
@@ -46,7 +46,8 @@
46
46
  }
47
47
  .design-toolbar-leading, .design-toolbar-trailing { display:flex; align-items:center; gap:10px; min-width:0; }
48
48
  .design-toolbar-trailing { justify-content:flex-end; }
49
- .design-toolbar .planr-brand { display:grid; gap:3px; }
49
+ .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; }
50
+ .design-toolbar .planr-brand .planr-mark { grid-row:1 / span 2; }
50
51
  .design-wordmark { font: 800 18px/1 var(--planr-font-display); letter-spacing:-.045em; white-space:nowrap; }
51
52
  .design-wordmark > span { color:var(--planr-color-primary); }
52
53
  .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); }
@@ -17,6 +17,27 @@ Use this reference only when turning natural-language intent into a Protocol 1.6
17
17
  5. Provide a useful accessible title, description, and semantic reading order.
18
18
  Keep labels concise enough to scan at the target size.
19
19
 
20
+ ## Layout heuristics
21
+
22
+ The renderer lays out deterministically; these choices decide whether the result
23
+ reads at a glance.
24
+
25
+ - Prefer `top-down` for graphs with relations. Use `left-right` for sequences
26
+ and timelines, where the flow axis is time.
27
+ - Keep fan-out to four relations per source and fan-in to four per target. Above
28
+ that, introduce an intermediate node or split the diagram.
29
+ - Keep a `balanced` render to twelve semantic nodes; use `faithful` only when the
30
+ reader needs every item and accepts a taller canvas.
31
+ - Prefer labels of one or two words. Put the explanation in the item
32
+ `description`; the studio shows it on selection.
33
+ - Use `flow` for the main path, `dependency` for "uses" or "reads", and
34
+ `transition` for a return or retry. Flow renders solid, dependency dashed.
35
+ - Add a back edge (a relation to an earlier node) only when the grammar is a
36
+ cycle by nature, such as `state-machine` or `loop-flywheel`. In `architecture`
37
+ and `flowchart` a back edge pushes its target to the bottom of the canvas.
38
+ - Use groups sparingly, at most one level, and never for the whole graph. Use
39
+ at most one annotation; more than that draws connectors across the canvas.
40
+
20
41
  Ask a question only if selecting a different answer would change the grammar,
21
42
  meaning, or audience. Infer presentation details from context and let the
22
43
  runtime validate them.
@@ -49,6 +49,17 @@ a source branch of an existing generated set; rerender its manifest with
49
49
  [fidelity guide](references/diagram-fidelity.md) when choosing an editable
50
50
  projection or explaining an omitted one.
51
51
 
52
+ ## Look before you hand over
53
+
54
+ A `pass` quality status is necessary, not sufficient. After every render, open
55
+ the PNG or SVG the command lists and check four signatures: a label that reads as
56
+ another node's caption, rectangles that overlap, a connector crossing the whole
57
+ canvas, and a node drawn below a step it precedes. Any `warning` check, in
58
+ particular `label-foreign-node`, names the first of these. When one appears,
59
+ restructure using the [layout heuristics](references/diagram-intent-to-ir.md)
60
+ (fewer relations per node, no back edge, no groups, shorter labels) and render
61
+ again before starting the studio. Report which signatures you checked.
62
+
52
63
  After a successful render or rerender, run the returned `nextAction` to start
53
64
  the native diagram studio (one SVG canvas, outline, pan/zoom, comments, and
54
65
  exports). Keep that process alive, wait for its startup
@@ -11837,11 +11837,14 @@ function activeMetadata(model) {
11837
11837
  if (!artifact) return "HTML \xB7 1440\xD7900";
11838
11838
  return `${artifact.kind.toUpperCase()} \xB7 ${artifact.viewport.width}\xD7${artifact.viewport.height}`;
11839
11839
  }
11840
+ function renderPlanrMark() {
11841
+ 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>';
11842
+ }
11840
11843
  function renderArtifactToolbar(model) {
11841
11844
  const interact = model.reviewMode === "interact";
11842
11845
  const canvas = model.presentation === "canvas";
11843
11846
  return `<header class="planr-toolbar">
11844
- <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>
11847
+ <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>
11845
11848
  <span class="planr-privacy" data-privacy="${escapeHtml(model.privacy)}">${escapeHtml(model.privacyLabel)}</span>
11846
11849
  ${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>
11847
11850
  ${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() {
11980
11983
  }
11981
11984
  function renderHostedArtifactViewerSlot() {
11982
11985
  return `<section class="planr-hosted-viewer" data-planr-hosted-viewer data-planr-hosted-state="idle" role="status" aria-live="polite" aria-atomic="true" hidden>
11983
- <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>
11986
+ <div>${renderPlanrMark()}<strong data-planr-hosted-title></strong><p data-planr-hosted-detail></p><button type="button" data-planr-hosted-retry hidden></button></div>
11984
11987
  </section>`;
11985
11988
  }
11986
11989
  function renderArtifactShellMarkup(model) {
@@ -12107,28 +12110,8 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
12107
12110
  background: color-mix(in srgb, var(--planr-color-chrome) 96%, transparent);
12108
12111
  }
12109
12112
  .planr-brand { min-width: 0; display: flex; align-items: center; gap: 9px; }
12110
- .planr-mark {
12111
- position: relative;
12112
- width: 20px;
12113
- height: 20px;
12114
- flex: none;
12115
- rotate: 45deg;
12116
- border: 1px solid color-mix(in srgb, var(--planr-color-primary) 70%, var(--planr-color-rule));
12117
- border-radius: var(--planr-radius-small);
12118
- }
12119
- .planr-mark::before, .planr-mark::after {
12120
- content: "";
12121
- position: absolute;
12122
- border-radius: 2px;
12123
- background: var(--planr-color-primary);
12124
- }
12125
- .planr-mark::before {
12126
- width: 4px;
12127
- height: 4px;
12128
- inset: 3px auto auto 3px;
12129
- box-shadow: 8px 8px 0 var(--planr-color-warning);
12130
- }
12131
- .planr-mark::after { width: 8px; height: 2px; inset: 9px auto auto 6px; rotate: -45deg; }
12113
+ .planr-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; color: var(--planr-color-primary); contain: paint; }
12114
+ .planr-mark svg { display: block; width: 100%; height: 100%; }
12132
12115
  .planr-title-block { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
12133
12116
  .planr-title-block strong {
12134
12117
  max-width: 260px;
@@ -12887,7 +12870,7 @@ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-
12887
12870
  text-align: center;
12888
12871
  box-shadow: 0 18px 60px color-mix(in srgb, var(--planr-color-background) 50%, transparent);
12889
12872
  }
12890
- .planr-hosted-viewer .planr-mark { display: inline-block; margin-bottom: 20px; }
12873
+ .planr-hosted-viewer .planr-mark { width: 40px; height: 40px; margin-bottom: 20px; }
12891
12874
  .planr-hosted-viewer strong { display: block; margin-bottom: 7px; font: 650 19px/1.2 var(--planr-font-display); }
12892
12875
  .planr-hosted-viewer p { margin: 0; color: var(--planr-color-text-muted); }
12893
12876
  .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) {
13161
13144
  return `<header class="planr-toolbar design-toolbar">
13162
13145
  <div class="design-toolbar-leading">
13163
13146
  ${iconButton("Screens", "left", 'data-design-toggle-nav aria-controls="design-navigator" aria-expanded="true"', "planr-toolbar-action design-panel-toggle")}
13164
- <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>
13147
+ <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>
13165
13148
  </div>
13166
13149
  <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>
13167
13150
  <div class="design-toolbar-trailing">
@@ -46,7 +46,8 @@
46
46
  }
47
47
  .design-toolbar-leading, .design-toolbar-trailing { display:flex; align-items:center; gap:10px; min-width:0; }
48
48
  .design-toolbar-trailing { justify-content:flex-end; }
49
- .design-toolbar .planr-brand { display:grid; gap:3px; }
49
+ .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; }
50
+ .design-toolbar .planr-brand .planr-mark { grid-row:1 / span 2; }
50
51
  .design-wordmark { font: 800 18px/1 var(--planr-font-display); letter-spacing:-.045em; white-space:nowrap; }
51
52
  .design-wordmark > span { color:var(--planr-color-primary); }
52
53
  .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); }
@@ -4,14 +4,14 @@
4
4
  "name": "AsemDevs"
5
5
  },
6
6
  "metadata": {
7
- "version": "2.2.2",
7
+ "version": "2.3.0",
8
8
  "description": "Generated local OpenPlanr package."
9
9
  },
10
10
  "plugins": [
11
11
  {
12
12
  "name": "planr",
13
13
  "source": "./openplanr",
14
- "version": "2.2.2",
14
+ "version": "2.3.0",
15
15
  "description": "Host-native OpenPlanr skills for OpenAI coding agents.",
16
16
  "strict": true
17
17
  }
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "planr",
3
- "version": "2.2.2",
3
+ "version": "2.3.0",
4
4
  "description": "Host-native OpenPlanr planning, delivery, review, design, and operating skills.",
5
5
  "author": {
6
6
  "name": "AsemDevs"