pmx-canvas 0.8.2 → 0.9.1

package/docs/design/HomeMap.dc.html

@@ -38,7 +38,11 @@ body{margin:0}
 </div>
 </header>
 
-<div style="position: absolute; left: 52px; top: 96px; width: 1388px; height: 864px; overflow: hidden; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.12) 1px, transparent 1.2px); background-size: 24px 24px">
+<!-- 2026-10-17: match Graph's bottom inspector visually, not its interactions.
+     Map retains tiles, saved board positions and connection Open actions.
+     The shared dock reserves space, resizes vertically and scrolls its list internally. -->
+<div style="position: absolute; left: 52px; top: 96px; width: 1108px; height: 554px; overflow: hidden; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.12) 1px, transparent 1.2px); background-size: 24px 24px">
+<div style="position: relative; width: 1388px; height: 864px; transform: scale(.64); transform-origin: top left">
 
 <div style="{{m.frame}} left: 40px; top: 130px; width: 560px; height: 520px; border-color: rgba(95,207,192,0.45); background: rgba(95,207,192,0.03)"></div>
 <span style="{{m.pill}} left: 56px; top: 120px; border-color: rgba(95,207,192,0.45)"><span style="{{m.hue}} background: #5FCFC0"></span>Tech Enabling<span style="{{m.n}}">12</span></span>
@@ -90,6 +94,23 @@ body{margin:0}
 <div style="{{m.ghost}} left: 510px; top: 730px">Untitled<span style="{{m.meta}}">1 card</span></div>
 <span style="position: absolute; left: 576px; top: 438px; font-size: 11px; color: #8ea3bd; background: #081524; padding: 0 4px">[[DORA dashboard]]</span>
 </div>
+</div>
+<aside aria-label="Map filters" style="position:absolute;right:0;top:96px;width:280px;height:554px;box-sizing:border-box;padding:18px;background:#0b1828;border-left:1px solid #1b2c44;color:#8ea3bd">
+<h2 style="font-size:12px;text-transform:uppercase">Filters</h2><p>Find boards and cards</p><p>Only in context</p><p>Folders · Unfiled</p><p>Portals · Wiki · Relations · Previous</p>
+</aside>
+<footer style="position:absolute;left:52px;right:0;top:650px;height:30px;box-sizing:border-box;border-top:1px solid #1b2c44;padding:6px 16px;font-size:11px;color:#8ea3bd">▣ Board · ⌖ In context · ━ Portal · ┄ Wiki · ━ Relation · Drag boards to save positions · drag background to pan · scroll to zoom</footer>
+<section aria-label="Selection details" style="position:absolute;left:52px;right:0;top:680px;height:280px;background:#0b1828;border-top:1px solid #1b2c44;display:flex;flex-direction:column;font-size:14px">
+<div role="separator" aria-label="Resize relation details" aria-orientation="horizontal" style="height:10px;flex-shrink:0;cursor:row-resize;text-align:center;color:#8ea3bd">━</div>
+<header style="display:flex;gap:16px;align-items:start;padding:8px 16px;flex-shrink:0">
+<div style="flex:1"><strong style="font-size:15px">Pricing research · 2 connections</strong><div style="font-size:13px;color:#8ea3bd">Research / Pricing</div><div style="display:flex;gap:8px;margin-top:8px"><button style="{{m.action}}">Open board</button><button style="{{m.action}}">Pin board</button><button style="{{m.action}}">Reset position</button></div></div>
+<button style="{{m.action}}">Collapse details</button><button style="{{m.action}}" aria-label="Close details">×</button>
+</header>
+<div style="overflow:auto;min-height:0;padding:0 16px;color:#8ea3bd;font-size:14px">
+<p>27 cards · 2 connected boards · Not in context</p><p>Connections</p>
+<div style="border-top:1px solid #1b2c44;padding:10px 0;display:flex;align-items:center;justify-content:space-between"><span>→ wiki · [[DORA dashboard]]</span><button style="{{m.action}}">DORA dashboard</button></div>
+<div style="border-top:1px solid #1b2c44;padding:10px 0;display:flex;align-items:center;justify-content:space-between"><span>← relation · supporting pricing research</span><button style="{{m.action}}">Competitor teardown</button></div>
+</div>
+</section>
 
 </div>
 </x-dc>
@@ -97,6 +118,7 @@ body{margin:0}
 class Component extends DCLogic {
   renderVals() {
     var m = {
+      action: 'border:1px solid #1b2c44;border-radius:6px;background:#0f1d31;color:#b9c6d6;padding:6px 10px;font:inherit;font-size:14px;min-height:36px;',
       frame: 'position:absolute;box-sizing:border-box;border-radius:14px;border:1.5px dashed;',
       pill: 'position:absolute;display:flex;align-items:center;gap:8px;height:22px;padding:0 10px;border-radius:999px;border:1px solid;background:#0f1d31;font-size:12px;font-weight:600;line-height:20px;',
       sub: 'position:absolute;height:18px;padding:0 8px;border-radius:999px;background:#081524;font-size:11px;font-weight:500;line-height:18px;color:#b9c6d6;',

package/docs/design/HomeTeam.dc.html

@@ -21,14 +21,14 @@ body{margin:0}
 <span aria-label="Signed in" style="width: 30px; height: 30px; border-radius: 999px; background: #2a4566; color: #e6eef7; font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-bottom: 6px">You</span>
 </nav>
 
-<aside aria-label="Library" style="position: absolute; left: 52px; top: 0; width: 280px; height: 1000px; box-sizing: border-box; padding: 16px 12px; background: #0b1828; border-right: 1px solid #1b2c44; display: flex; flex-direction: column; gap: 14px">
+<aside aria-label="Library" style="position: absolute; left: 52px; top: 0; width: 340px; height: 1000px; box-sizing: border-box; padding: 16px 12px; background: #0b1828; border-right: 1px solid #1b2c44; display: flex; flex-direction: column; gap: 14px">
 <button style="display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid #1b2c44; background: #0f1d31; color: #e6eef7; font-family: inherit; text-align: left">
 <svg width="16" height="16" viewBox="0 0 24 24" style="{{s.icon}}"><path d="{{i.team}}"></path></svg><span style="flex: 1; font-size: 13px; font-weight: 600">Tech Enabling team</span><span style="font-size: 11px; color: #6b7d94">12 members ▾</span></button>
 
 <div style="display: flex; flex-direction: column; gap: 2px">
 <span style="{{s.sec}}">Your pinned boards</span>
 <sc-for list="{{pinned}}" as="b" hint-placeholder-count="3">
-<div style="{{s.row}}"><span style="{{s.pinOn}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.pin}}"></path></svg></span><span style="{{s.name}}">{{b.name}}</span><span style="{{b.tag}}">{{b.scope}}</span></div>
+<div style="{{s.row}}"><span style="{{s.pinOn}}"><svg width="9" height="9" viewBox="0 0 24 24" style="{{s.ic2}}"><path d="{{i.pin}}"></path></svg></span><span style="{{s.name}}">{{b.name}}</span><sc-if value="{{b.hasDue}}" hint-placeholder-val="{{ false }}"><span style="{{s.due}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{i.glass}}"></path></svg>{{b.due}}</span></sc-if><span style="{{b.tag}}">{{b.scope}}</span></div>
 </sc-for>
 <span style="font-size: 11px; color: #6b7d94; padding: 2px 8px 0 32px">Only you see these pins · ≈ 19k tokens</span>
 </div>
@@ -36,19 +36,19 @@ body{margin:0}
 <div style="display: flex; flex-direction: column; gap: 2px">
 <div style="display: flex; align-items: center; gap: 8px; padding: 0 8px 4px"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.icon}}"><path d="{{i.team}}"></path></svg><span style="{{s.secInline}}">Workspace</span><span style="font-size: 11px; color: #6b7d94">shared</span></div>
 <sc-for list="{{workspace}}" as="f" hint-placeholder-count="5">
-<div style="{{f.style}}"><span style="width: {{f.indent}}px; flex-shrink: 0"></span><span style="width: 8px; height: 8px; border-radius: 3px; background: {{f.hue}}; flex-shrink: 0"></span><span style="{{s.name}}">{{f.name}}</span><span style="font-size: 11px; color: #6b7d94">{{f.role}}</span></div>
+<div style="{{f.style}}"><span style="width: {{f.indent}}px; flex-shrink: 0"></span><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icon}} flex-shrink: 0"><path d="{{i.folder}}"></path></svg><span style="{{s.name}}">{{f.name}}</span><span style="{{f.tagSt}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{f.catIcon}}"></path></svg>{{f.tag}}</span><sc-if value="{{f.hasDue}}" hint-placeholder-val="{{ false }}"><span style="{{s.due}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{i.glass}}"></path></svg>{{f.due}}</span></sc-if><span style="width: 50px; text-align: right; font-size: 11px; color: #6b7d94; flex-shrink: 0">{{f.role}}</span></div>
 </sc-for>
 </div>
 
 <div style="display: flex; flex-direction: column; gap: 2px">
 <div style="display: flex; align-items: center; gap: 8px; padding: 0 8px 4px"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.icon}}"><path d="{{i.person}}"></path></svg><span style="{{s.secInline}}">Personal</span><span style="font-size: 11px; color: #6b7d94">only you</span></div>
 <sc-for list="{{personal}}" as="f" hint-placeholder-count="4">
-<div style="{{f.style}}"><span style="width: {{f.indent}}px; flex-shrink: 0"></span><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icon}} flex-shrink: 0"><path d="{{f.icon}}"></path></svg><span style="{{s.name}}">{{f.name}}</span><span style="font-size: 11px; color: #6b7d94">{{f.n}}</span></div>
+<div style="{{f.style}}"><span style="width: {{f.indent}}px; flex-shrink: 0"></span><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icon}} flex-shrink: 0"><path d="{{f.icon}}"></path></svg><span style="{{s.name}}">{{f.name}}</span><span style="{{f.tagSt}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{f.catIcon}}"></path></svg>{{f.tag}}</span><sc-if value="{{f.hasDue}}" hint-placeholder-val="{{ false }}"><span style="{{s.due}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{i.glass}}"></path></svg>{{f.due}}</span></sc-if><span style="width: 20px; text-align: right; font-size: 11px; color: #6b7d94; flex-shrink: 0">{{f.n}}</span></div>
 </sc-for>
 </div>
 </aside>
 
-<main style="position: absolute; left: 332px; top: 0; width: 808px; height: 1000px; box-sizing: border-box; padding: 24px 32px; display: flex; flex-direction: column; gap: 18px">
+<main style="position: absolute; left: 392px; top: 0; width: 748px; height: 1000px; box-sizing: border-box; padding: 24px 32px; display: flex; flex-direction: column; gap: 18px">
 <div style="display: flex; align-items: flex-start; gap: 16px">
 <div style="flex: 1">
 <div style="font-size: 12px; color: #6b7d94">Personal <span style="color: #3d5170">/</span> <span style="color: #b9c6d6">Pricing drafts</span></div>
@@ -67,6 +67,7 @@ body{margin:0}
 <div style="padding: 10px 12px; display: flex; flex-direction: column; gap: 4px">
 <div style="font-size: 13px; font-weight: 600">{{bd.name}}</div>
 <div style="display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8ea3bd"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icon}}"><path d="{{bd.icon}}"></path></svg>{{bd.access}}</div>
+<div style="display: flex; align-items: center; gap: 6px; font-size: 11px; color: #8ea3bd"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icon}}"><path d="{{i.research}}"></path></svg><span style="flex: 1">↳ Research</span><sc-if value="{{bd.hasDue}}" hint-placeholder-val="{{ false }}"><span style="{{s.due}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{i.glass}}"></path></svg>{{bd.due}}</span></sc-if></div>
 </div>
 </article>
 </sc-for>
@@ -75,7 +76,7 @@ body{margin:0}
 <div style="display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 12px; border: 1px solid #2a4566; background: #0f1d31; box-shadow: 0 10px 30px rgba(0,0,0,0.5)">
 <div style="display: flex; align-items: baseline; gap: 10px"><span style="font-size: 15px; font-weight: 600; flex: 1">Move “Pricing research” to the workspace</span><span style="font-size: 11px; color: #6b7d94">from Personal / Pricing drafts</span></div>
 <label style="display: flex; flex-direction: column; gap: 4px"><span style="font-size: 12px; color: #8ea3bd">Workspace folder</span>
-<span style="display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid #2a4566; background: #13243b; font-size: 13px"><span style="width: 8px; height: 8px; border-radius: 3px; background: #7C9CFF"></span>Research / Pricing<span style="flex: 1"></span><span style="color: #6b7d94">▾</span></span></label>
+<span style="display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 6px; border: 1px solid #2a4566; background: #13243b; font-size: 13px"><svg width="13" height="13" viewBox="0 0 24 24" style="{{s.icon}}"><path d="{{i.folder}}"></path></svg>Research / Pricing<span style="flex: 1"></span><span style="{{s.inh}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{i.research}}"></path></svg>↳ Research</span><span style="color: #6b7d94">▾</span></span></label>
 <div style="display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 8px; background: #13243b; font-size: 12px">
 <span style="font-weight: 600">What changes</span>
 <sc-for list="{{effects}}" as="e" hint-placeholder-count="4"><div style="display: flex; gap: 8px; color: #b9c6d6"><span style="color: {{e.c}}; flex-shrink: 0">{{e.g}}</span><span>{{e.t}}</span></div></sc-for>
@@ -86,6 +87,7 @@ body{margin:0}
 
 <aside aria-label="Board details" style="position: absolute; left: 1140px; top: 0; width: 300px; height: 1000px; box-sizing: border-box; padding: 20px 18px; background: #0b1828; border-left: 1px solid #1b2c44; display: flex; flex-direction: column; gap: 14px">
 <div style="display: flex; flex-direction: column; gap: 2px"><span style="font-size: 11px; color: #6b7d94">Workspace · Decisions</span><span style="font-size: 15px; font-weight: 600">Q4 pricing decision</span><span style="font-size: 11px; color: #8ea3bd">You can read · 3 editors · 12 members can read</span></div>
+<div style="display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 8px; background: #0f1d31; border: 1px solid #1b2c44"><div style="display: flex; align-items: center; gap: 8px"><span style="{{s.inh}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{i.decision}}"></path></svg>↳ Decision</span><span style="font-size: 11px; color: #8ea3bd; flex: 1">durable</span><span style="{{s.due}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icChip}}"><path d="{{i.glass}}"></path></svg>1 due</span></div><span style="font-size: 11px; color: #b9c6d6">No passive expiry. One card is due because a newer decision on C4 2026 OKR planning supersedes it.</span><span style="font-size: 11px; color: #6b7d94">Last validated 9 d ago by Mia · reviews are shared; pins are not</span></div>
 <div style="display: flex; flex-direction: column; gap: 4px">
 <span style="{{s.secInline}} padding: 0">Links · 4</span>
 <sc-for list="{{links}}" as="lk" hint-placeholder-count="4">
@@ -113,7 +115,13 @@ class Component extends DCLogic {
       lock: 'M7 11h10v9H7zM9 11V8a3 3 0 0 1 6 0v3',
       folder: 'M4 7a1 1 0 0 1 1-1h4l2 2h8a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z',
       share: 'M8 12a2 2 0 1 0 0 .01M16 7a2 2 0 1 0 0 .01M16 17a2 2 0 1 0 0 .01M9.8 11l4.4-3M9.8 13l4.4 3',
-      arrow: 'M5 12h14M13 6l6 6-6 6'
+      arrow: 'M5 12h14M13 6l6 6-6 6',
+      strategy: 'M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18M15.5 8.5l-2 5-5 2 2-5z',
+      decision: 'M6 3v18M6 7h10l3 3-3 3H6',
+      research: 'M10.5 4a6.5 6.5 0 1 0 0 13a6.5 6.5 0 1 0 0-13M15.5 15.5L20 20',
+      notes: 'M4 20l4.2-1L19 8.2 15.8 5 5 15.8z',
+      unknown: 'M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.6.3-1 .8-1 1.5v.7M12 16.8v.4',
+      glass: 'M7 3h10M7 21h10M8 3v3l4 6-4 6v3M16 3v3l-4 6 4 6v3'
     };
     var rowBase = 'display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border-radius:6px;';
     var pinOn = 'width:16px;height:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#4BBCFF;color:#081524;';
@@ -128,24 +136,32 @@ class Component extends DCLogic {
       name: 'flex:1;min-width:0;font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;',
       icon: 'fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:#8ea3bd;',
       ic2: 'fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;',
+      icCat: 'fill:none;stroke:#8ea3bd;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;',
+      icChip: 'fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;',
+      due: 'display:inline-flex;align-items:center;gap:3px;height:18px;box-sizing:border-box;padding:0 6px;border-radius:999px;border:1px solid rgba(244,197,66,0.6);color:#f4c542;font-size:11px;font-weight:500;flex-shrink:0;',
+      set: 'display:inline-flex;align-items:center;gap:4px;height:20px;box-sizing:border-box;padding:0 6px;border-radius:6px;border:1px solid #2a4566;color:#e6eef7;font-size:11px;flex-shrink:0;',
+      inh: 'display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 2px;color:#8ea3bd;font-size:11px;flex-shrink:0;',
+      unk: 'display:inline-flex;align-items:center;gap:4px;height:20px;box-sizing:border-box;padding:0 6px;border-radius:6px;border:1px dashed #3d5170;color:#8ea3bd;font-size:11px;flex-shrink:0;',
       pinOn: pinOn,
       tab: 'height:28px;padding:0 12px;border:0;border-radius:6px;background:transparent;color:#8ea3bd;font-family:inherit;font-size:12px;font-weight:500;',
       tabOn: 'height:28px;padding:0 12px;border:0;border-radius:6px;background:#1b2c44;color:#e6eef7;font-family:inherit;font-size:12px;font-weight:500;'
     };
     var pinned = [
       { name: 'Q4 pricing decision', scope: 'workspace', tag: tagW },
-      { name: 'C4 2026 OKR planning', scope: 'workspace', tag: tagW },
+      { name: 'C4 2026 OKR planning', scope: 'workspace', tag: tagW, hasDue: true, due: '3 due' },
       { name: 'Pricing research', scope: 'personal', tag: tagP }
     ];
-    function w(name, role, depth, hue, sel) { return { name: name, role: role, indent: depth * 16, hue: hue, style: rowBase + (sel ? 'background:#13243b;' : '') }; }
+    var cn = { strategy: 'Strategy', decision: 'Decision', research: 'Research', notes: 'Notes' };
+    function cat(c, mode) { return { catIcon: mode === 'unk' ? i.unknown : i[c], tag: mode === 'unk' ? 'unknown' : (mode === 'inh' ? '↳ ' : '') + cn[c], tagSt: mode === 'set' ? s.set : mode === 'inh' ? s.inh : s.unk }; }
+    function w(name, role, depth, c, mode, d, sel) { var o = cat(c, mode); o.name = name; o.role = role; o.indent = depth * 16; o.hasDue = !!d; o.due = d ? d + ' due' : ''; o.style = rowBase + (sel ? 'background:#13243b;' : ''); return o; }
     var workspace = [
-      w('Tech Enabling', 'edit', 0, '#5FCFC0'), w('OKRs', 'edit', 1, '#5FCFC0'),
-      w('Research', 'edit', 0, '#7C9CFF'), w('Decisions', 'read', 0, '#E58FB0'), w('Workshops', 'comment', 0, '#E59B6B')
+      w('Tech Enabling', 'edit', 0, 'strategy', 'set', 0), w('OKRs', 'edit', 1, 'strategy', 'inh', 3),
+      w('Research', 'edit', 0, 'research', 'set', 1), w('Decisions', 'read', 0, 'decision', 'set', 1), w('Workshops', 'comment', 0, 'notes', 'set', 0)
     ];
-    function p(name, n, depth, sel, icon) { return { name: name, n: n, indent: depth * 16, icon: icon || i.folder, style: rowBase + (sel ? 'background:#13243b;' : '') }; }
-    var personal = [p('Pricing drafts', 3, 0, true), p('1:1 prep', 4, 0), p('Reading notes', 9, 0), p('Scratch', 2, 0)];
+    function p(name, n, depth, c, mode, d, sel) { var o = cat(c, mode); o.name = name; o.n = n; o.indent = depth * 16; o.icon = i.folder; o.hasDue = !!d; o.due = d ? d + ' due' : ''; o.style = rowBase + (sel ? 'background:#13243b;' : ''); return o; }
+    var personal = [p('Pricing drafts', 3, 0, 'research', 'set', 1, true), p('1:1 prep', 4, 0, 'notes', 'set', 0), p('Reading notes', 9, 0, 'notes', 'set', 0), p('Scratch', 2, 0, '', 'unk', 0)];
     var boards = [
-      { name: 'Pricing research', access: 'Only you', icon: i.lock, pinStyle: pinOn18, border: '1.5px solid #4BBCFF' },
+      { name: 'Pricing research', access: 'Only you', icon: i.lock, pinStyle: pinOn18, border: '1.5px solid #4BBCFF', hasDue: true, due: '1 due' },
       { name: 'Churn deep-dive', access: 'Shared with 2 people', icon: i.share, pinStyle: pinOff18, border: '1px solid #1b2c44' },
       { name: 'Price page copy', access: 'Only you', icon: i.lock, pinStyle: pinOff18, border: '1px solid #1b2c44' }
     ];
@@ -153,6 +169,7 @@ class Component extends DCLogic {
       { g: '+', c: '#2fd07f', t: 'All 12 members of Tech Enabling team can read it; editors of Research can change it.' },
       { g: '+', c: '#2fd07f', t: 'It can appear in teammates’ search, Map and Graph — and in their agents’ briefs if they pin it.' },
       { g: '=', c: '#8ea3bd', t: 'Your pins stay yours. Its links to your other personal boards stay locked for everyone else.' },
+      { g: '=', c: '#8ea3bd', t: 'It takes the new folder’s category (Research, unchanged here). Cards that set their own lifecycle keep it; review history moves with the board.' },
       { g: '!', c: '#f4c542', t: 'Moving is the step that shares it. Nothing becomes shared through a link, a pin or an agent edit.' }
     ];
     var links = [
@@ -166,6 +183,7 @@ class Component extends DCLogic {
       { t: 'Crossing over is explicit:', d: 'share (per-board roles) or move into a workspace folder.' },
       { t: 'Pins are yours;', d: 'the board README is the shared default.' },
       { t: 'Agents act as you,', d: 'with your rights, never reading others’ personal boards.' },
+      { t: 'A category is not access:', d: 'it says what a folder holds, never who may read it.' },
       { t: 'Local installs', d: 'have one scope; this arrives with step 5.' }
     ];
     return { s: s, i: i, pinned: pinned, workspace: workspace, personal: personal, boards: boards, effects: effects, links: links, rules: rules };

package/docs/design/Lifecycle.dc.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+<head><meta charset="utf-8"><title>V2 · Docked card review</title><script src="./support.js"></script></head>
+<body><x-dc>
+<helmet>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap">
+<style>
+body{margin:0}.v2{width:1440px;height:1420px;box-sizing:border-box;padding:48px;background:#081524;color:#e6eef7;font:13px/1.5 'IBM Plex Sans',system-ui,sans-serif}.v2 h1{font-size:28px;margin:0}.v2 p,.v2 small{color:#8ea3bd}.v2 .workspace{display:flex;height:600px;border:1px solid #1b2c44;border-radius:10px;overflow:hidden;margin:28px 0}.v2 .canvas{flex:1;padding:24px;background-image:radial-gradient(#1b2c44 1px,transparent 1px);background-size:24px 24px}.v2 .card{margin:48px auto;width:560px;height:370px;border:1px solid #1b2c44;border-radius:10px;background:#0f1d31;box-sizing:border-box;padding:20px}.v2 .dock{width:380px;flex-shrink:0;box-sizing:border-box;padding:16px;background:#0f1d31;border-left:1px solid #1b2c44}.v2 header{display:flex;align-items:center;gap:8px;border-bottom:1px solid #1b2c44;padding-bottom:12px}.v2 header strong{flex:1;font-size:15px}.v2 button,.v2 textarea{font:inherit;color:inherit;border:1px solid #1b2c44;border-radius:6px;background:#081524;padding:7px 10px;box-sizing:border-box}.v2 .primary{background:#4BBCFF;color:#081524;border-color:transparent;font-weight:600}.v2 .warning{border:1px solid #f4c542;color:#f4c542;border-radius:6px;padding:6px 8px}.v2 .note{display:flex;flex-direction:column;gap:6px;margin:20px 0}.v2 textarea{width:100%;height:90px}.v2 .settings{border-top:1px solid #1b2c44;margin-top:20px;padding-top:12px;color:#8ea3bd}.v2 .states{display:grid;grid-template-columns:1fr 1fr;gap:20px}.v2 .states section{background:#0f1d31;border:1px solid #1b2c44;border-radius:10px;padding:20px}.v2 .clocks{display:grid;grid-template-columns:1fr 1fr;gap:12px}.v2 .clocks div{padding:12px;border-radius:10px;background:#13243b}.v2 .clocks strong{display:block}.v2 .source{color:#b9c6d6;text-decoration:underline}
+</style></helmet>
+<main class="v2"><h1>V2 · Review beside the real card</h1><p>Selected 2026-10-14 · local implementation, validation ongoing. More → Review / due footer / expanded Review opens the dock and focuses the actual renderer.</p>
+<div class="workspace">
+<section class="canvas"><strong>Product metrics · board canvas</strong><article class="card"><header><strong>Churn by month</strong><span>⋯</span></header><h2 style="font-size:20px">September churn: 4.2%</h2><p>Calculated from the billing dashboard. Compare the monthly report and source observations before relying on this figure.</p><p class="source">Billing dashboard →</p><div style="display:flex;align-items:end;gap:12px;height:100px;margin:24px 0"><span style="width:44px;height:52px;background:#2a4566"></span><span style="width:44px;height:70px;background:#2a4566"></span><span style="width:44px;height:62px;background:#2a4566"></span><span style="width:44px;height:84px;background:#2a4566"></span></div><span class="warning">⧗ review due · source refreshed</span></article><small>Actual rendered card remains on the canvas, not a replacement excerpt. Expanded content also keeps its renderer beside the dock.</small></section>
+<aside class="dock"><header><strong>Review card · Churn by month</strong><button>×</button></header><h3>Why review?</h3><p class="warning">⧗ Source needs a check: Billing dashboard</p><button>Open source →</button><p>Check the card and its sources before confirming.</p><label class="note">What did you check?<textarea>Compared September figure with the billing dashboard; 4.2% matches.</textarea></label><button class="primary">Checked, still correct</button> <button>Not now</button><div class="settings">▸ Settings and history</div><p>One check note; policy, clocks, other outcomes and history are secondary.</p></aside>
+</div>
+<div class="states">
+<section><strong>Settings and history · disclosed</strong><p>↳ Metric · from Projects / Metrics. Inherit policy or set a card lifecycle override; never change category here.</p><div class="clocks"><div><span style="color:#B388FF">Read by agent</span><strong>2 hours ago</strong><small>Delivery only</small></div><div>Content changed<strong>40 minutes ago</strong><small>Content revision 7</small></div><div>Last validated<strong>41 days ago</strong><small>Evidence-backed check</small></div><div>Task relevance<strong>Card pinned</strong><small>Curation, not truth</small></div></div><p>Retain / Revise / Externalize / Retire / Unresolved. Uses the same check note; applied validating outcomes require evidence. Revise/externalize record work already performed, not automatic edits.</p><p>History: outcome · evidence · who · when. Retire stays dimmed/searchable; Restore and Undo retirement are audited and never validate. Recipe requests send steering, not execution.</p></section>
+<section><strong>Guards and no-write dismissal</strong><p class="warning">⧗ Content or sources changed. Reload and recheck before applying.</p><button>Reload and recheck</button><p>Reload clears the old evidence draft. Never attach a fresh revision token to evidence for an older body or source.</p><p>Save dirty Markdown, reload and check again before validating. Missing evidence, failed load/save or stale revision blocks Checked, still correct.</p><p>Not now, × and Escape close without writing a review. Opening, reading, refreshing and restoration never validate.</p><p>At narrow widths the drawer becomes a lower dock; the card remains visible above (Lifecycle600). Needs review is not false. Review due stays amber outlined ⧗; changed since read is the separate filled △ header mark.</p></section>
+</div><p>Brief qualification preserves due reasons, source warnings and unknown policy. Healthy cards gain no lifecycle badge. All nine themes reuse their warning token; no category hue or relation ink carries review status.</p>
+</main></x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1420}}'>
+class Component extends DCLogic { renderVals() { return {}; } }
+</script></body></html>

package/docs/design/Lifecycle600.dc.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head><meta charset="utf-8"><title>Selected review surfaces at 600 px</title><script src="./support.js"></script></head>
+<body><x-dc><helmet>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap">
+<style>
+body{margin:0}.narrow{width:600px;height:1470px;box-sizing:border-box;padding:24px 16px;background:#081524;color:#e6eef7;font:12px/1.5 'IBM Plex Sans',system-ui,sans-serif}.narrow h1{font-size:20px;margin:0}.narrow h2{font-size:15px;margin:0}.narrow p{color:#8ea3bd}.narrow section{border:1px solid #1b2c44;border-radius:10px;background:#0f1d31;padding:14px;margin:16px 0}.narrow button,.narrow input,.narrow select,.narrow textarea{font:inherit;color:inherit;background:#081524;border:1px solid #1b2c44;border-radius:6px;padding:6px 8px;box-sizing:border-box}.narrow .selected{border-color:#e6eef7;background:#13243b}.narrow .primary{background:#4BBCFF;color:#081524;border-color:transparent;font-weight:600}.narrow header{display:flex;justify-content:space-between;align-items:center}.narrow .warning{color:#f4c542;border:1px solid #f4c542;border-radius:6px;padding:4px 7px}.narrow .lower{margin:0;padding:14px;border:0;border-top:1px solid #1b2c44;border-radius:0}.narrow label{display:flex;flex-direction:column;gap:5px;margin:10px 0}.narrow .workspace{border:1px solid #1b2c44;border-radius:10px;overflow:hidden;background:#0f1d31;margin:16px 0}.narrow .canvas{height:210px;padding:16px;box-sizing:border-box;background:#081524;background-image:radial-gradient(#1b2c44 1px,transparent 1px);background-size:24px 24px}.narrow .card{padding:12px;background:#0f1d31;border:1px solid #1b2c44;border-radius:10px;margin:12px auto;width:420px}.narrow small{color:#8ea3bd}
+.narrow{height:1800px}
+</style></helmet>
+<main class="narrow"><h1>Selected directions · at 600 px</h1><p>C1 / H2 / V2 · selected 2026-10-14. Local implementation; validation ongoing.</p>
+<section><header><h2>C1 · Workspace categories</h2><button>×</button></header><details><summary>Add from template</summary></details><label>Search categories<input placeholder="Search categories"></label><div style="display:flex;gap:6px"><button class="selected">⌕ Research</button><button>⚑ Decision</button><button>+ Add</button></div><div style="display:flex;gap:6px;margin-top:12px"><button>Basics</button><button class="selected">Review policy</button><button>Usage</button></div><label>Review frequency<select><option>Medium · every 90 days</option></select></label><label>How to check<input value="Check sources and conflicting evidence"></label><details><summary>Additional review triggers</summary></details><div style="text-align:right;margin-top:12px"><button>Cancel</button> <button class="primary">Save category</button></div><small>Neutral list; dirty-leave guard and assigned-folder deletion protection remain.</small></section>
+<section><h2>H2 · Knowledge review</h2><p>Folders · Map · Graph · <strong style="color:#e6eef7">Review</strong></p><label>Review scope<select><option>Projects and descendants</option><option>Whole library</option></select></label><label>Find review cards<input type="search"></label><p>□ Source warnings only · Refresh queue</p><strong>Review needed: 2 cards · Showing 2</strong><div style="border:1px solid #1b2c44;border-radius:10px;padding:10px;margin:10px 0"><strong>Card: Churn by month</strong><p>Board: Product metrics<br>Why review: Billing dashboard changed<br>Last checked: 12 September</p><button>Open review</button></div><small>Second row: Launch assumptions · Launch plan · Scheduled check due · Never checked.</small><p>No review policy: 4 cards. Neutral, not overdue; explicit warnings still qualify.</p></section>
+<h2>V2 · Lower dock, not a covering modal</h2>
+<div class="workspace"><div class="canvas"><strong>Product metrics</strong><article class="card"><h2>Churn by month</h2><p>September churn: 4.2%. Calculated from the billing dashboard.</p><span class="warning">⧗ review due · source refreshed</span></article></div><section class="lower"><header><h2>Review card · Churn by month</h2><button>×</button></header><p class="warning">⧗ Source needs a check: Billing dashboard</p><button>Open source →</button><label>What did you check?<textarea rows="2" placeholder="A short note or source link"></textarea></label><button class="primary" style="opacity:0.5">Checked, still correct</button> <button>Not now</button><p>▸ Settings and history</p><small>Disabled until evidence and current saved content/source observations are checked. Close/Escape/Not now write nothing. Real card remains visible above.</small></section></div>
+</main></x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":600,"height":1800}}'>
+class Component extends DCLogic { renderVals() { return {}; } }
+</script></body></html>

package/docs/design/LifecycleVariants.dc.html

@@ -0,0 +1,157 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Lifecycle on the board or in a menu</title>
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap">
+<style>
+body{margin:0}
+</style>
+</helmet>
+<div style="width: 1440px; height: 1100px; box-sizing: border-box; padding: 40px 48px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 20px">
+
+<div>
+<h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">How much lifecycle shows on the board — A, decided 2026-10-07</h1>
+<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">Both move everything into the card’s ⋯ → Lifecycle: rate and decay type, inherited or set, the four clocks, outcome history. “Unknown” shows only on Home folders, never on a card. The one question is where “review due” lives.</p>
+</div>
+
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px">
+<sc-for list="{{variants}}" as="v" hint-placeholder-count="2">
+<section style="display: flex; flex-direction: column; gap: 10px; min-width: 0">
+<div style="display: flex; align-items: baseline; gap: 10px"><span style="{{s.letter}}">{{v.k}}</span><span style="font-size: 15px; font-weight: 600">{{v.name}}</span></div>
+<span style="font-size: 12px; color: #8ea3bd">{{v.sub}}</span>
+<div style="position: relative; height: 420px; border-radius: 10px; border: 1px solid #1b2c44; background-color: #081524; background-image: radial-gradient(rgba(142,163,189,0.14) 1px, transparent 1.2px); background-size: 24px 24px; overflow: hidden">
+<div style="position: absolute; left: 0; right: 0; top: 0; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #0f1d31; border-bottom: 1px solid #1b2c44">
+<span style="font-size: 13px; font-weight: 600; flex: 1">Pricing strategy 2027</span>
+<span style="{{s.ctxChip}}">3 cards in context</span>
+<span style="{{v.countSt}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.glass}}"></path></svg>2 to review</span>
+</div>
+<sc-for list="{{v.cards}}" as="c" hint-placeholder-count="4">
+<div style="{{c.node}}">
+<div style="{{c.head}}"><span style="{{s.title}}">{{c.title}}</span>
+<sc-if value="{{c.changed}}" hint-placeholder-val="{{ false }}"><span style="{{s.changedChip}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.warn}}"></path></svg>changed</span></sc-if>
+<sc-if value="{{c.pin}}" hint-placeholder-val="{{ false }}"><span style="{{s.pinOn}}"><svg width="10" height="10" viewBox="0 0 24 24" style="{{s.icPin}}"><path d="{{i.pin}}"></path></svg></span></sc-if>
+</div>
+<div style="{{s.body}}">{{c.body}}</div>
+<sc-if value="{{c.due}}" hint-placeholder-val="{{ false }}"><div style="{{s.dueLine}}"><span style="{{s.reviewChip}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.glass}}"></path></svg>review due</span><span style="font-size: 11px; color: #8ea3bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{c.dueWhy}}</span></div></sc-if>
+</div>
+</sc-for>
+<sc-if value="{{v.popover}}" hint-placeholder-val="{{ false }}">
+<div style="position: absolute; right: 12px; top: 50px; width: 290px; box-sizing: border-box; padding: 10px; border-radius: 10px; border: 1px solid #2a4566; background: #13243b; box-shadow: 0 10px 30px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 4px">
+<span style="font-size: 11px; color: #8ea3bd; padding: 0 4px 2px">To review on this board</span>
+<sc-for list="{{queue}}" as="q" hint-placeholder-count="2"><div style="display: flex; flex-direction: column; padding: 6px 8px; border-radius: 6px; background: #0f1d31"><span style="font-size: 12px; font-weight: 500">{{q.t}}</span><span style="font-size: 11px; color: #8ea3bd">{{q.why}}</span></div></sc-for>
+<span style="font-size: 11px; color: #8ea3bd; padding: 2px 4px 0">Click a row to jump to the card</span>
+</div>
+</sc-if>
+</div>
+<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px">
+<div style="{{s.panel}} padding: 12px 14px; gap: 4px"><span style="font-size: 12px; font-weight: 600; color: #e6eef7">Gains</span><sc-for list="{{v.pros}}" as="p" hint-placeholder-count="3"><span style="font-size: 11px; color: #b9c6d6">+ {{p}}</span></sc-for></div>
+<div style="{{s.panel}} padding: 12px 14px; gap: 4px"><span style="font-size: 12px; font-weight: 600; color: #e6eef7">Costs</span><sc-for list="{{v.cons}}" as="p" hint-placeholder-count="3"><span style="font-size: 11px; color: #b9c6d6">− {{p}}</span></sc-for></div>
+</div>
+</section>
+</sc-for>
+</div>
+
+<div style="display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 32px">
+<section style="display: flex; flex-direction: column; gap: 10px">
+<span style="{{s.label}}">Same in A and B — the card’s ⋯ menu</span>
+<div style="position: relative; height: 230px; border-radius: 10px; border: 1px solid #1b2c44; background: #081524">
+<div style="position: absolute; left: 16px; top: 16px; width: 300px; height: 40px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 12px; border-radius: 10px 10px 0 0; border: 1.5px solid #4BBCFF; border-bottom: 0; background: rgba(75,188,255,0.10)"><span style="{{s.title}}">Churn by month</span><span style="width: 24px; height: 24px; border-radius: 6px; background: #1b2c44; display: flex; align-items: center; justify-content: center">⋯</span></div>
+<div role="menu" style="position: absolute; left: 150px; top: 52px; width: 250px; box-sizing: border-box; padding: 6px; border-radius: 10px; border: 1px solid #2a4566; background: #13243b; box-shadow: 0 10px 30px rgba(0,0,0,0.6); display: flex; flex-direction: column; gap: 2px">
+<sc-for list="{{menu}}" as="m" hint-placeholder-count="6"><div style="{{m.st}}"><span style="flex: 1">{{m.n}}</span><span style="{{m.hintSt}}">{{m.h}}</span></div></sc-for>
+</div>
+</div>
+<span style="font-size: 11px; color: #8ea3bd">Lifecycle… opens the tab drawn on Lifecycle and Restore. Its row shows a one-word summary so the menu itself answers “anything to do here?”.</span>
+</section>
+
+<section style="display: flex; flex-direction: column; gap: 10px">
+<span style="{{s.label}}">Design session’s recommendation — A</span>
+<div style="{{s.panel}} padding: 16px 18px; gap: 10px; border-color: #2a4566">
+<span style="font-size: 15px; font-weight: 600">The human should see what the agent is told</span>
+<span style="font-size: 12px; color: #b9c6d6">The brief already carries “review due: check the source before relying on it” on Churn by month. In B that card looks clean on the board while the agent is told to doubt it, so the human and the agent are looking at two different boards. That is the same gap the pin and the “changed” mark were designed to close.</span>
+<span style="font-size: 12px; color: #b9c6d6">A costs one quiet line, on only the cards that are due — 2 of the 4 here, and on a real board usually a small share. Everything else (rates, clocks, history, inheritance, unknown) still goes into the menu, which keeps the maintainer’s “not on the board” for everything that isn’t a call to act.</span>
+<span style="font-size: 12px; color: #b9c6d6">If B is chosen, keep one tie to the card: the count popover lists the cards and jumps to them, and the brief panel names them, so the mismatch is at least one click away.</span>
+<span style="font-size: 11px; color: #8ea3bd">Either way the Lifecycle board’s at-rest card lines are replaced by the chosen variant once decided.</span>
+</div>
+</section>
+</div>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1100}}'>
+class Component extends DCLogic {
+  renderVals() {
+    var i = {
+      glass: 'M7 3h10M7 21h10M8 3v3l4 6-4 6v3M16 3v3l-4 6 4 6v3',
+      warn: 'M12 4l9 16H3zM12 10v4M12 17v.5',
+      pin: 'M9 4h6l-.8 5.5 2.8 3H7l2.8-3zM12 12.5V20'
+    };
+    var W = '#f4c542';
+    var chip = 'display:inline-flex;align-items:center;gap:4px;height:20px;box-sizing:border-box;padding:0 7px;border-radius:999px;font-size:11px;font-weight:500;flex-shrink:0;';
+    var s = {
+      label: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:#6b7d94;',
+      panel: 'display:flex;flex-direction:column;border-radius:10px;border:1px solid #1b2c44;background:#0f1d31;',
+      letter: 'width:26px;height:26px;border-radius:999px;background:#1b2c44;font-size:13px;font-weight:600;text-align:center;line-height:26px;flex-shrink:0;',
+      ic: 'fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;',
+      icPin: 'fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;',
+      ctxChip: 'display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;border:1px solid rgba(75,188,255,0.3);color:#4BBCFF;font-size:11px;font-weight:500;',
+      changedChip: chip + 'color:' + W + ';background:rgba(244,197,66,0.14);',
+      reviewChip: chip + 'color:' + W + ';border:1px solid rgba(244,197,66,0.6);',
+      pinOn: 'width:18px;height:18px;border-radius:999px;background:#4BBCFF;color:#081524;display:flex;align-items:center;justify-content:center;flex-shrink:0;',
+      title: 'flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:600;',
+      body: 'padding:8px 12px;font-size:12px;color:#b9c6d6;',
+      dueLine: 'position:absolute;left:0;right:0;bottom:0;height:32px;box-sizing:border-box;display:flex;align-items:center;gap:8px;padding:0 10px;border-top:1px solid #1b2c44;'
+    };
+    var countOn = chip + 'height:24px;color:' + W + ';border:1px solid rgba(244,197,66,0.6);';
+    var countOpen = countOn + 'background:rgba(244,197,66,0.14);';
+    var nodeBase = 'position:absolute;box-sizing:border-box;border-radius:10px;background:#0f1d31;box-shadow:0 1px 2px rgba(0,0,0,0.4),0 6px 20px rgba(0,0,0,0.24);overflow:hidden;';
+    var headBase = 'display:flex;align-items:center;gap:6px;height:34px;padding:0 8px 0 12px;border-bottom:1px solid #1b2c44;';
+    function cards(showDue) {
+      function c(o) {
+        return {
+          title: o.title, body: o.body, pin: !!o.pin, changed: !!o.changed, due: showDue && !!o.due, dueWhy: o.dueWhy || '',
+          node: nodeBase + 'left:' + o.x + 'px;top:' + o.y + 'px;width:300px;height:' + o.h + 'px;' + (o.pin ? 'border:1.5px solid #4BBCFF;' : 'border:1px solid #1b2c44;'),
+          head: headBase + (o.pin ? 'background:rgba(75,188,255,0.10);' : '')
+        };
+      }
+      return [
+        c({ x: 16, y: 64, h: 140, pin: true, title: 'Positioning: premium SMB', body: 'Lead with reliability and support; do not compete on price below $20.' }),
+        c({ x: 16, y: 220, h: 180, pin: true, changed: true, due: true, title: 'Churn by month', body: 'Pro plan, monthly logo churn, last 12 months.', dueWhy: 'source refreshed' }),
+        c({ x: 332, y: 64, h: 140, title: 'Competitor price list', body: 'Six competitors, list prices as of September.' }),
+        c({ x: 332, y: 220, h: 180, pin: true, due: true, title: 'Win rate vs. Competitor B', body: 'Q3 win rate by segment, from the CRM export.', dueWhy: 'contradicted by Q3 loss reasons' })
+      ];
+    }
+    var queue = [
+      { t: 'Churn by month', why: 'fast · source refreshed · validated 41 d ago' },
+      { t: 'Win rate vs. Competitor B', why: 'contradicted by “Q3 loss reasons”' }
+    ];
+    var variants = [
+      { k: 'A', name: 'Review due on the card, only while due', sub: 'Chosen by the maintainer, 2026-10-07. Recommended by the roadmap and design sessions. The line appears when a review is due and goes away when an outcome is recorded.',
+        countSt: countOn, popover: false, cards: cards(true),
+        pros: ['You see on the card what the agent’s brief says about it', 'No click needed to find which cards are due', 'Quiet: nothing on cards that are fine'],
+        cons: ['One line of chrome on due cards', 'A board with many due cards gets busier', 'Two amber marks can meet on one card'] },
+      { k: 'B', name: 'Review due only in the menu, a count on the board', sub: 'Not chosen. Cards stay clean apart from “changed”; the count (and the context chip) opens the list.',
+        countSt: countOpen, popover: true, cards: cards(false),
+        pros: ['Cards stay completely clean', 'One place to work the reviews from', 'Scales to boards with many due cards'],
+        cons: ['A due card looks the same as a fine one', 'The agent is told to doubt a card you see as clean', 'Finding a card means opening the count first'] }
+    ];
+    var mBase = 'display:flex;align-items:center;height:28px;padding:0 10px;border-radius:6px;font-size:12px;';
+    var hint = 'font-size:11px;color:#6b7d94;';
+    var menu = [
+      { n: 'Focus', h: '', st: mBase, hintSt: hint },
+      { n: 'Rename…', h: '', st: mBase, hintSt: hint },
+      { n: 'Lifecycle…', h: '⧗ review due', st: mBase + 'background:#1b2c44;', hintSt: 'font-size:11px;color:' + W + ';' },
+      { n: 'Open in new tab', h: '', st: mBase, hintSt: hint },
+      { n: 'Delete', h: '⌫', st: mBase, hintSt: hint }
+    ];
+    return { i: i, s: s, variants: variants, queue: queue, menu: menu };
+  }
+}
+</script>
+</body>
+</html>

package/docs/design/LinkAuthorship.dc.html

@@ -0,0 +1,139 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Who drew a link</title>
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&amp;family=IBM+Plex+Sans:wght@400;500;600&amp;display=swap">
+<style>
+body{margin:0}
+</style>
+</helmet>
+<div style="width: 1440px; height: 1550px; box-sizing: border-box; padding: 40px 48px; background: #081524; color: #e6eef7; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 13px; line-height: 1.5; display: flex; flex-direction: column; gap: 22px">
+
+<div>
+<h1 style="margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.015em">Who drew a link</h1>
+<p style="margin: 4px 0 0; font-size: 13px; color: #8ea3bd">Decided with the maintainer 2026-10-08. Authorship on a link works like a card’s: it stays until a person edits, retypes or relabels the link, and a later read does not clear it. On the pill it is a glyph — ✦ for an agent, an initial for another person on a shared board — and the words are in the pill’s hint. “Not seen by &lt;agent&gt;” is a different thing: a temporary, worded state on a person’s new link that the agent’s next read clears.</p>
+</div>
+
+<sc-for list="{{themes}}" as="th" hint-placeholder-count="2">
+<section style="{{th.section}}">
+<span style="{{th.label}}">{{th.name}}</span>
+<div style="display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 16px">
+<sc-for list="{{th.scenes}}" as="sc" hint-placeholder-count="12">
+<div style="display: flex; flex-direction: column; gap: 6px; min-width: 0">
+<div style="display: flex; flex-direction: column"><span style="{{th.caseName}}">{{sc.name}}</span><span style="{{th.caseNote}}">{{sc.note}}</span></div>
+<div style="{{sc.frame}}">
+<svg width="300" height="96" viewBox="0 0 300 96" style="position: absolute; left: 0; top: 0; fill: none; stroke-linecap: round"><path d="M70 48 L 226 48" style="{{sc.line}}"></path><path d="M230 48 l-9 -4.5 v9 z" style="{{sc.head}}"></path></svg>
+<div style="{{sc.stubL}}"></div><div style="{{sc.stubR}}"></div>
+<sc-if value="{{sc.hasPill}}" hint-placeholder-val="{{ true }}"><span style="{{sc.pill}}">
+<sc-if value="{{sc.agent}}" hint-placeholder-val="{{ false }}"><svg width="12" height="12" viewBox="0 0 24 24" style="{{sc.sparkSt}}"><path d="{{i.spark}}"></path></svg></sc-if>
+<sc-if value="{{sc.person}}" hint-placeholder-val="{{ false }}"><span style="{{sc.initialSt}}">M</span></sc-if>
+<sc-if value="{{sc.hasLabel}}" hint-placeholder-val="{{ true }}"><span>{{sc.label}}</span></sc-if>
+<sc-if value="{{sc.notSeen}}" hint-placeholder-val="{{ false }}"><span style="{{sc.nsSt}}"><svg width="11" height="11" viewBox="0 0 24 24" style="{{s.ic}}"><path d="{{i.eyeOff}}"></path></svg>{{sc.nsWord}}</span></sc-if>
+</span></sc-if>
+<sc-if value="{{sc.hasHint}}" hint-placeholder-val="{{ false }}"><span style="{{sc.hintSt}}">{{sc.hint}}</span></sc-if>
+</div>
+</div>
+</sc-for>
+</div>
+</section>
+</sc-for>
+
+<section style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px">
+<div style="{{s.panel}} padding: 16px 18px; gap: 8px">
+<span style="font-size: 13px; font-weight: 600">The rule</span>
+<sc-for list="{{rules}}" as="r" hint-placeholder-count="6"><span style="font-size: 12px; color: #b9c6d6">{{r}}</span></sc-for>
+</div>
+<div style="{{s.panel}} padding: 16px 18px; gap: 8px">
+<span style="font-size: 13px; font-weight: 600">Hints — styled BarHints, never a title attribute</span>
+<sc-for list="{{hints}}" as="h" hint-placeholder-count="4"><div style="display: flex; align-items: center; gap: 10px"><span style="{{h.st}}">{{h.t}}</span><span style="font-size: 11px; color: #8ea3bd">{{h.when}}</span></div></sc-for>
+</div>
+</section>
+
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props='{"$preview":{"width":1440,"height":1550}}'>
+class Component extends DCLogic {
+  renderVals() {
+    var i = {
+      spark: 'M12 2l2.2 6.6L21 11l-6.8 2.4L12 20l-2.2-6.6L3 11l6.8-2.4z',
+      eyeOff: 'M3 3l18 18M10.6 6.1A10 10 0 0 1 12 6c6.5 0 10 6 10 6a17 17 0 0 1-3 3.6M6.6 6.6C3.8 8.3 2 12 2 12s3.5 6 10 6a9.6 9.6 0 0 0 4.4-1'
+    };
+    var s = {
+      panel: 'display:flex;flex-direction:column;border-radius:10px;border:1px solid #1b2c44;background:#0f1d31;',
+      ic: 'fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;'
+    };
+    function hexA(h, a) { var n = parseInt(h.slice(1), 16); return 'rgba(' + (n >> 16 & 255) + ',' + (n >> 8 & 255) + ',' + (n & 255) + ',' + a + ')'; }
+    var H = { name: 'Harbor', bg: '#081524', panel: '#0f1d31', soft: '#13243b', line: '#1b2c44', line2: '#2a4566', text: '#e6eef7', textSoft: '#b9c6d6', muted: '#8ea3bd', dim: '#6b7d94', agent: '#B388FF', sup: '#5FCFC0', rel: '#8ea3bd', shadow: '0 10px 30px rgba(0,0,0,0.6)' };
+    var D = { name: 'Daylight', bg: '#F6F7F9', panel: '#FFFFFF', soft: '#F2F4F7', line: '#DDE2E9', line2: '#C9D1DC', text: '#0B1726', textSoft: '#3a4a5e', muted: '#55657a', dim: '#7a8899', agent: '#7C4DDB', sup: '#1E8C80', rel: '#55657a', shadow: '0 10px 30px rgba(8,21,36,0.18)' };
+    var cases = [
+      { name: 'An agent drew it', note: 'labelled · ✦ stays until a person edits it', label: 'supports', author: 'agent' },
+      { name: 'An agent drew it, no label', note: 'the pill is just the mark', label: '', author: 'agent' },
+      { name: 'You drew it, alone on the board', note: 'today’s normal case: no mark', label: 'supports', author: null },
+      { name: 'You drew it, no label', note: 'no pill at all', label: '', author: null },
+      { name: 'Mia drew it — shared board', note: 'Part 3: another person, her initial', label: 'supports', author: 'person' },
+      { name: 'Mia drew it, no label', note: 'the initial alone', label: '', author: 'person' },
+      { name: 'Your new link, not seen yet', note: 'temporary: the next read clears it', label: 'supports', author: null, notSeen: 'word' },
+      { name: 'Mia’s new link, not seen yet', note: 'who drew it and the state together', label: 'supports', author: 'person', notSeen: 'word' },
+      { name: 'Short line or zoom below 60%', note: 'the state folds to its glyph; words in the hint', label: 'supports', author: 'person', notSeen: 'glyph' },
+      { name: 'Zoom below 35%', note: 'only the marks stay, no label', label: '', author: 'agent', zoomedOut: true },
+      { name: 'You relabel the agent’s link', note: 'it is yours now: ✦ goes', label: 'informs', author: null, relabelled: true },
+      { name: 'Hover the pill', note: 'the hint names who drew it and when', label: 'supports', author: 'agent', hint: '✦ Drawn by Codex · 14:06' }
+    ];
+    function scene(c, k) {
+      var ink = k.relabelled ? (c === H ? '#E58FB0' : '#B8467A') : k.label ? c.sup : c.rel;
+      var hasMark = !!k.author;
+      var hasPill = !!k.label || hasMark || !!k.notSeen;
+      var stub = 'position:absolute;top:28px;width:62px;height:40px;box-sizing:border-box;border-radius:8px;border:1px solid ' + c.line2 + ';background:' + c.panel + ';';
+      return {
+        name: k.name, note: k.note, label: k.label, hasLabel: !!k.label, hasPill: hasPill,
+        agent: k.author === 'agent', person: k.author === 'person',
+        notSeen: !!k.notSeen, nsWord: k.notSeen === 'word' ? 'not seen by Codex' : '',
+        hasHint: !!k.hint, hint: k.hint || '',
+        frame: 'position:relative;height:96px;border-radius:8px;border:1px solid ' + c.line + ';background:' + c.bg + ';overflow:visible;',
+        line: 'stroke:' + ink + ';stroke-width:1.5;' + (k.label ? '' : 'stroke-dasharray:2 4;'),
+        head: 'fill:' + ink + ';stroke:none;',
+        stubL: stub + 'left:8px;', stubR: stub + 'left:230px;',
+        pill: 'position:absolute;left:150px;top:48px;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:5px;height:22px;box-sizing:border-box;padding:0 ' + (k.label ? '9px' : '5px') + ';border-radius:999px;border:1px solid ' + hexA(ink, 0.5) + ';background:' + c.panel + ';color:' + ink + ';font-size:11px;font-weight:600;white-space:nowrap;' + (k.zoomedOut ? 'transform:translate(-50%,-50%) scale(0.85);' : ''),
+        sparkSt: 'fill:' + c.agent + ';stroke:none;flex-shrink:0;',
+        initialSt: 'width:15px;height:15px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:' + c.soft + ';box-shadow:inset 0 0 0 1px ' + c.line2 + ';color:' + c.textSoft + ';font-size:9px;font-weight:600;',
+        nsSt: 'display:inline-flex;align-items:center;gap:3px;color:' + c.muted + ';font-weight:500;' + (k.label || hasMark ? 'padding-left:6px;border-left:1px solid ' + c.line2 + ';' : '') + (k.notSeen === 'glyph' ? 'padding-left:5px;' : ''),
+        hintSt: 'position:absolute;left:150px;top:64px;transform:translateX(-50%);padding:6px 9px;border-radius:8px;border:1px solid ' + c.line2 + ';background:' + c.soft + ';box-shadow:' + c.shadow + ';font-size:11px;color:' + c.text + ';white-space:nowrap;z-index:2;'
+      };
+    }
+    var themes = [H, D].map(function (c) {
+      return {
+        name: c.name,
+        section: 'display:flex;flex-direction:column;gap:12px;padding:18px 20px;border-radius:12px;background:' + c.bg + ';border:1px solid ' + c.line + ';',
+        label: 'font-size:11px;font-weight:500;letter-spacing:0.06em;text-transform:uppercase;color:' + c.dim + ';',
+        caseName: 'font-size:12px;font-weight:600;color:' + c.text + ';',
+        caseNote: 'font-size:11px;color:' + c.muted + ';',
+        scenes: cases.map(function (k) { return scene(c, k); })
+      };
+    });
+    var rules = [
+      '1 · Who drew it: an agent → violet ✦ before the label; another person on a shared board (Part 3) → their initial, neutral; the board’s only person → no mark.',
+      '2 · It stays until a person edits, retypes or relabels the link; then the link is theirs (no mark for the only person, their initial on a shared board). A read never clears it.',
+      '3 · Not seen by <agent>: a person’s new or edited link only, muted eye-off and words, after the authorship mark; cleared by the agent’s next read that carries either end. Agent links are never “not seen”.',
+      '4 · Folding: on a short line or below 60% zoom the state keeps only its eye-off glyph; below 35% labels go and only the marks stay. Authorship never folds — it is already a glyph.',
+      '5 · An unlabelled link gets a pill only when it carries a mark; otherwise it stays a bare line.',
+      '6 · The agent name is whichever agent drew it or is attached (Claude, Codex, Copilot…).'
+    ];
+    var hint = 'display:inline-flex;align-items:center;padding:6px 9px;border-radius:8px;border:1px solid #2a4566;background:#13243b;font-size:11px;color:#e6eef7;white-space:nowrap;';
+    var hints = [
+      { t: '✦ Drawn by Codex · 14:06', st: hint, when: 'an agent’s link' },
+      { t: 'Drawn by Mia Jensen · 14:06', st: hint, when: 'another person on a shared board' },
+      { t: 'Drawn by Mia Jensen · 14:06 · not seen by Codex yet', st: hint, when: 'both, when the state is folded to its glyph' },
+      { t: 'You relabelled it · 14:20 (drawn by Codex · 14:06)', st: hint, when: 'after a person takes it over' }
+    ];
+    return { i: i, s: s, themes: themes, rules: rules, hints: hints };
+  }
+}
+</script>
+</body>
+</html>