dev-process-kit 0.1.0 → 0.2.1

package/dist/chunks/shared-GL2Z98Cz.js

@@ -0,0 +1,4206 @@
+import{a0 as H,Z as Ze,j as Qe,a1 as et,a2 as G,a3 as b,a4 as u,a5 as Q,a6 as Vs,J as De,a7 as R,a8 as ve,a9 as tt,aa as Le,ab as st,B as at,ac as Ys,ad as Js,ae as K,af as T,ag as k,ah as D,ai as g,aj as _,ak as $,al as S,am as ie,an as nt,ao as it,ap as ee,aq as re,ar as rt,as as Xs,at as oe,au as de,av as te,aw as Zs,ax as Qs,ay as ea,az as ot,G as ta,aA as sa,I as aa,aB as na,aC as ia,l as dt,aD as ra,aE as oa,aF as da,aG as le,q as la,r as ca}from"./shared-DiFAX1_p.js";import{i as lt}from"./shared-DB_C1Mdu.js";import{p as ct,r as pt,c as ut}from"./shared-DDOpqbVL.js";const pa='script[type="application/json"]',ht=(a,e)=>{const t=a.querySelector(pa);if(!t)return null;const s=t.textContent??"";if(s.trim()==="")return{ok:!1,error:"JSON block is empty"};try{return{ok:!0,value:e(JSON.parse(s))}}catch(n){return{ok:!1,error:n instanceof Error?n.message:String(n)}}},mt=(a,e,t)=>{const s=ht(a,e);if(s)return t(s),()=>{};const n=new MutationObserver(()=>{const i=ht(a,e);i&&(n.disconnect(),t(i))});return n.observe(a,{childList:!0,subtree:!0}),()=>n.disconnect()},gt={nodeSpacing:34,layerSpacing:84,padding:28,sweeps:4,coordinatePasses:6},ye=a=>{const e=[...a].sort((s,n)=>s-n);if(e.length===0)return 0;const t=Math.floor(e.length/2);return e.length%2===1?e[t]??0:((e[t-1]??0)+(e[t]??0))/2},ua=(a,e)=>{const t=new Map;for(const r of a)t.set(r.id,[]);for(const r of e)t.get(r.from)?.push(r);const s=new Map,n=new Set,i=r=>{s.set(r,"open");for(const o of t.get(r)??[]){const d=s.get(o.to)??"new";d==="open"?n.add(o.id):d==="new"&&i(o.to)}s.set(r,"done")};for(const r of a)(s.get(r.id)??"new")==="new"&&i(r.id);return{reversed:n,forward:e.filter(r=>!n.has(r.id))}},ha=(a,e)=>{const t=new Map,s=new Map;for(const o of a)t.set(o.id,[]),s.set(o.id,[]);for(const o of e)s.get(o.from)?.push(o),t.get(o.to)?.push(o);const n=new Map(a.map(o=>[o.id,0])),i=new Map(a.map(o=>[o.id,(t.get(o.id)??[]).length])),r=a.filter(o=>(i.get(o.id)??0)===0).map(o=>o.id);for(const o of r)for(const d of s.get(o)??[]){const l=n.get(d.to)??0;n.set(d.to,Math.max(l,(n.get(o)??0)+1));const c=(i.get(d.to)??0)-1;i.set(d.to,c),c===0&&r.push(d.to)}return n},ma=(a,e,t,s)=>{const n=[...a.keys()].sort((i,r)=>i-r);for(let i=0;i<s;i++){const r=i%2===0;for(const o of r?n:[...n].reverse()){const d=a.get(o)??[],l=new Map(d.map((p,m)=>[p,m])),c=p=>{const m=l.get(p);return m===void 0?null:m},h=d.map(p=>{const m=(e.get(p)??[]).filter(v=>(t.get(v)??o)===o+(r?-1:1)).map(c).filter(v=>v!==null);return{id:p,want:m.length>0?ye(m):l.get(p)??0}});h.sort((p,m)=>p.want-m.want||(l.get(p.id)??0)-(l.get(m.id)??0)),a.set(o,h.map(p=>p.id))}}},ft=(a,e,t,s)=>{const n=a.map((r,o)=>({id:r,want:t.get(r)??o*100,index:o}));n.sort((r,o)=>r.want-o.want||r.index-o.index);let i=0;for(const r of n){const o=e.get(r.id);o&&(o.y=i,i+=o.spec.height+s)}return{height:Math.max(0,i-s)}},ga=(a,e,t,s,n)=>{const i=[...a.keys()].sort((l,c)=>l-c),r=new Map;for(const l of i)r.set(l,ft(a.get(l)??[],e,new Map,n.nodeSpacing).height);const o=Math.max(0,...r.values());for(const l of i){const c=(o-(r.get(l)??0))/2;for(const h of a.get(l)??[]){const p=e.get(h);p&&(p.y+=c)}}const d=(l,c)=>{const h=(t.get(l)??[]).filter(p=>s.get(p)===c).flatMap(p=>{const m=e.get(p);return m?[m.y+m.spec.height/2]:[]});return h.length>0?ye(h):null};for(let l=0;l<n.coordinatePasses;l++){const c=l%2===0;for(const h of c?i:[...i].reverse()){const p=a.get(h)??[],m=new Map;for(const y of p){const E=d(y,h+(c?-1:1)),O=e.get(y);O!==void 0&&m.set(y,E===null?O.y+O.spec.height/2:E)}const v=p.map(y=>e.get(y)?.y??0);ft(p,e,m,n.nodeSpacing);const x=p.map(y=>e.get(y)?.y??0),w=ye(v)-ye(x);for(const y of p){const E=e.get(y);E&&(E.y+=w)}}}},bt=(a,e,t)=>{const s=e===void 0?void 0:a.spec.ports?.[e];return s?{x:a.x+s.x,y:a.y+s.y}:t==="out"?{x:a.x+a.spec.width,y:a.y+a.spec.height/2}:{x:a.x,y:a.y+a.spec.height/2}},kt=(a,e,t)=>{let s=0;const n=[];for(const i of a){const r=t.byId.get(i.from),o=t.byId.get(i.to);if(!r||!o)continue;const d=bt(r,i.fromPort,"out"),l=bt(o,i.toPort,"in");if(i.from===i.to){const v=r.x+r.spec.width,x=r.y+r.spec.height,w=Math.max(t.padding/2,x+18);n.push({id:i.id,points:[d,{x:v+20,y:d.y},{x:v+20,y:w},{x:r.x-20,y:w},{x:r.x-20,y:l.y},l]});continue}if(!e.has(i.id)&&(r.layer<o.layer||r.layer===o.layer&&l.x>d.x+12)){if(Math.abs(d.y-l.y)<.5){n.push({id:i.id,points:[d,l]});continue}const x=r.layer<o.layer?Math.max(d.x+14,o.x-Math.max(12,t.layerSpacing/2)):(d.x+l.x)/2;n.push({id:i.id,points:[d,{x,y:d.y},{x,y:l.y},l]});continue}const c=i.fromPort===void 0?{x:r.x+r.spec.width/2,y:r.y+r.spec.height}:d,h=i.toPort===void 0?{x:o.x+o.spec.width/2,y:o.y+o.spec.height}:l,p=Math.max(c.y,h.y)+18+s*14;s+=1;const m=[d,c,{x:c.x,y:p},{x:h.x,y:p},h,l].filter((v,x,w)=>x===0||v.x!==w[x-1]?.x||v.y!==w[x-1]?.y);n.push({id:i.id,points:m})}return n},xt=(a,e,t)=>{const s=e.flatMap(p=>[...p.points]),n=[...a.map(p=>p.x),...a.map(p=>p.x+p.spec.width),...s.map(p=>p.x)],i=[...a.map(p=>p.y),...a.map(p=>p.y+p.spec.height),...s.map(p=>p.y)],r=Math.min(0,...n),o=Math.min(0,...i),d=Math.max(0,...n),l=Math.max(0,...i),c=t-r,h=t-o;return{width:d-r+t*2,height:l-o+t*2,nodes:a.map(p=>({id:p.spec.id,x:p.x+c,y:p.y+h,width:p.spec.width,height:p.spec.height,layer:p.layer,order:p.order})),routes:e.map(p=>({id:p.id,points:p.points.map(m=>({x:m.x+c,y:m.y+h}))}))}},vt=(a,e)=>{const t=new Map(a.map(s=>[s.id,[]]));for(const s of e)s.from!==s.to&&(t.get(s.from)?.push(s.to),t.get(s.to)?.push(s.from));return t},yt=(a,e,t,s)=>a.map(n=>({spec:n,layer:e.get(n.id)??0,order:t.get(n.id)??0,...s(n)})),fa=(a,e)=>{const t=new Map;for(const s of a){const n=e.get(s.id)??0,i=t.get(n);i?i.push(s.id):t.set(n,[s.id])}return t},ba=(a,e,t={})=>{const s={...gt,...t};if(a.length===0)return{width:0,height:0,nodes:[],routes:[]};const n=new Set(a.map(x=>x.id)),i=e.filter(x=>n.has(x.from)&&n.has(x.to)),{forward:r,reversed:o}=ua(a,i),d=ha(a,r),l=fa(a,d);ma(l,vt(a,i),d,s.sweeps);const c=new Map;for(const x of l.values())x.forEach((w,y)=>c.set(w,y));const h=yt(a,d,c,()=>({x:0,y:0})),p=new Map(h.map(x=>[x.spec.id,x]));ga(l,p,vt(a,i),d,s);const m=[...l.keys()].sort((x,w)=>x-w);let v=0;for(const x of m){const w=Math.max(...(l.get(x)??[]).map(y=>p.get(y)?.spec.width??0));for(const y of l.get(x)??[]){const E=p.get(y);E&&(E.x=v)}v+=w+s.layerSpacing}return xt(h,kt(i,o,{byId:p,layerSpacing:s.layerSpacing,padding:s.padding}),s.padding)},ka=(a,e,t={})=>{const s={...gt,...t};if(a.length===0)return{width:0,height:0,nodes:[],routes:[]};const n=new Set(a.map(d=>d.id)),i=e.filter(d=>n.has(d.from)&&n.has(d.to)),r=yt(a,new Map,new Map,d=>d.position??{x:0,y:0}),o=new Map(r.map(d=>[d.spec.id,d]));return xt(r,kt(i,new Set,{byId:o,layerSpacing:s.layerSpacing,padding:s.padding}),s.padding)},xa=H({en:{tagFilter:"Filter by tag",tagMatch:"Tag matching",clearTags:"Clear",zoomOut:"Zoom out",fit:"Fit to view",zoomIn:"Zoom in",sendFailed:"Could not send. Please try again.",commentOn:a=>`Comment on ${a}`,noMatches:"No matching elements.",maximize:"Maximize",restore:"Restore size",canvas:"Diagram. Arrow keys pan, plus and minus zoom, 0 fits the view.",dataError:"Could not load the diagram data.",nodes:"elements",edges:"relations",change:(a,e)=>`\u201C${a}\u201D \u2192 \u201C${e}\u201D`},ja:{tagFilter:"\u30BF\u30B0\u306E\u7D5E\u308A\u8FBC\u307F",tagMatch:"\u30BF\u30B0\u306E\u4E00\u81F4\u6761\u4EF6",clearTags:"\u89E3\u9664",zoomOut:"\u7E2E\u5C0F",fit:"\u5168\u4F53\u3092\u8868\u793A",zoomIn:"\u62E1\u5927",sendFailed:"\u9001\u4FE1\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002\u3082\u3046\u4E00\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002",commentOn:a=>`${a}\u306B\u30B3\u30E1\u30F3\u30C8`,noMatches:"\u8A72\u5F53\u3059\u308B\u8981\u7D20\u306F\u3042\u308A\u307E\u305B\u3093\u3002",maximize:"\u6700\u5927\u5316",restore:"\u5143\u306E\u30B5\u30A4\u30BA\u306B\u623B\u3059",canvas:"\u56F3\u3002\u77E2\u5370\u30AD\u30FC\u3067\u30D1\u30F3\u3001\u30D7\u30E9\u30B9\u30FB\u30DE\u30A4\u30CA\u30B9\u3067\u30BA\u30FC\u30E0\u30010\u3067\u5168\u4F53\u8868\u793A\u3002",dataError:"\u56F3\u306E\u30C7\u30FC\u30BF\u3092\u8AAD\u307F\u8FBC\u3081\u307E\u305B\u3093\u3067\u3057\u305F\u3002",nodes:"\u8981\u7D20",edges:"\u95A2\u9023",change:(a,e)=>`\u300C${a}\u300D\u2192\u300C${e}\u300D`}}),va={active:[],match:"single"},se=(a,e)=>e.active.length===0?!0:e.match==="all"?e.active.every(t=>a.includes(t)):e.active.some(t=>a.includes(t)),ya=(a,e)=>a.active.includes(e)?{...a,active:a.active.filter(t=>t!==e)}:a.match==="single"?{...a,active:[e]}:{...a,active:[...a.active,e]},wa=(a,e)=>({match:e,active:e==="single"&&a.active.length>1?a.active.slice(-1):a.active}),$a=a=>({...a,active:[]}),Sa=a=>{const e=new Map;for(const t of a)for(const s of new Set(t))e.set(s,(e.get(s)??0)+1);return[...e].map(([t,s])=>({tag:t,count:s}))},W={nodes:new Map,edges:new Set},j=(a,e,t,s)=>{const n=new Map,i=new Set,r=[{id:e,depth:0}],o=new Set([e]);for(const d of r)if(!(!s&&d.depth>=1))for(const l of a){const c=t==="outgoing"?l.from:l.to,h=t==="outgoing"?l.to:l.from;c===d.id&&(i.add(l.id),!o.has(h)&&(o.add(h),n.set(h,d.depth+1),r.push({id:h,depth:d.depth+1})))}return{nodes:n,edges:i}},Ma=(a,e)=>{const t=new Map(a.map(i=>[i,j(e,i,"outgoing",!0).nodes])),s=new Set,n=[];for(const i of a){if(s.has(i))continue;const r=a.filter(o=>o===i||t.get(i)?.has(o)===!0&&t.get(o)?.has(i)===!0);for(const o of r)s.add(o);(r.length>1||e.some(o=>o.from===i&&o.to===i))&&n.push(r)}return n},ze=a=>new Map(a.flatMap((e,t)=>e.map(s=>[s,t]))),wt=(a,e)=>e.get(a.from)===e.get(a.to)&&e.has(a.from),Ae=a=>{try{return a.split("/").map(e=>decodeURIComponent(e))}catch{return null}},$t=(a,e,t,s)=>{const n=e!==null&&e.kind===t&&e.id===a,i=t==="node"?s.nodes.has(a):s.edges.has(a),r=t==="node"?s.nodes.get(a)??null:null;return{selected:n,related:i&&!n,dimmed:e!==null&&!n&&!i,depth:r}},V=(...a)=>a.filter(e=>typeof e=="string"&&e!=="").join(" "),Ca=a=>{const e=a[0]??{x:0,y:0},t=a.at(-1)??e;if(a.length<=2)return{x:(e.x+t.x)/2,y:(e.y+t.y)/2};if(a.length===4){const i=a[1]??e,r=a[2]??t;return{x:i.x,y:(i.y+r.y)/2}}const s=a[2]??e,n=a[3]??t;return{x:(s.x+n.x)/2,y:s.y}},Ea=(a,e)=>Sa(a).map(t=>({tag:t.tag,count:t.count,selected:e.active.includes(t.tag)})),qa=(a,e,t)=>`${a} ${t.node} \xB7 ${e} ${t.edge}`,Y=[Ze,Qe,et,G`
+    :host {
+      display: block;
+      container-type: inline-size;
+    }
+
+    .diagram {
+      display: flex;
+      flex-direction: column;
+      /* The sizing knob: the shell may be resized vertically, and the canvas
+         takes whatever is left of it. */
+      height: var(--diagram-height, 560px);
+      min-height: 260px;
+      border: 1px solid var(--dpk-rule);
+      border-radius: var(--dpk-radius-lg);
+      background: var(--dpk-paper-raised);
+      box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+      overflow: hidden;
+      resize: vertical;
+    }
+
+    /*
+     * Maximized: the shell covers the viewport. It is also a manual popover in
+     * the top layer, so the UA popover box (fit-content, margin, border,
+     * padding) is reset here. A vertical resize leaves an inline height behind,
+     * which only !important overrides.
+     */
+    .diagram.is-maximized {
+      position: fixed;
+      inset: 0;
+      z-index: 2147483000;
+      width: auto !important;
+      height: auto !important;
+      max-width: none;
+      max-height: none;
+      margin: 0;
+      padding: 0;
+      border: 0;
+      border-radius: 0;
+      color: var(--dpk-ink);
+      background:
+        radial-gradient(
+          ellipse 900px 400px at 0% 0%,
+          color-mix(in srgb, var(--dpk-accent) 4%, transparent),
+          transparent 70%
+        ),
+        var(--dpk-paper-raised);
+      box-shadow: none;
+      resize: none;
+      /* Above the dock in the top layer, so nothing to clear. */
+      --dpk-dock-overlap: 0px;
+    }
+
+    .diagram-maximize {
+      flex-shrink: 0;
+    }
+
+    .diagram-toolbar {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      min-height: 44px;
+      padding: 8px 14px;
+      border-bottom: 1px solid var(--dpk-rule);
+      background: linear-gradient(180deg, var(--dpk-paper-raised), var(--dpk-paper));
+      box-shadow: 0 1px 0 var(--dpk-highlight) inset;
+      flex-shrink: 0;
+    }
+
+    .diagram-title {
+      font-family: var(--dpk-display);
+      font-size: 12.5px;
+      font-weight: 660;
+      letter-spacing: -0.015em;
+      color: var(--dpk-ink);
+    }
+
+    /* A long heading or subject elides (the full text is its tooltip) instead of pushing the actions off the toolbar. */
+    .diagram-title,
+    .diagram-subject {
+      min-width: 0;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .diagram-subject {
+      font-size: 10px;
+      color: var(--dpk-ink-faint);
+      padding-left: 10px;
+      border-left: 1px solid var(--dpk-rule-strong);
+    }
+
+    .diagram-toolbar-actions {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      margin-left: auto;
+      flex-wrap: wrap;
+    }
+
+    .diagram-stats {
+      font-family: var(--dpk-mono);
+      font-size: 10px;
+      font-weight: 550;
+      padding: 3px 9px;
+      border: 1px solid var(--dpk-rule);
+      border-radius: 999px;
+      background: var(--dpk-paper-sunken);
+      color: var(--dpk-ink-faint);
+      font-variant-numeric: tabular-nums;
+      white-space: nowrap;
+    }
+
+    .diagram-tags {
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      flex-wrap: wrap;
+      padding: 7px 12px;
+      border-bottom: 1px solid var(--dpk-rule);
+      background: var(--dpk-paper);
+      flex-shrink: 0;
+    }
+
+    .diagram-match {
+      display: flex;
+      gap: 2px;
+      padding: 3px;
+      margin-right: 6px;
+      border: 1px solid var(--dpk-rule);
+      border-radius: var(--dpk-radius-sm);
+      background: var(--dpk-paper-sunken);
+      box-shadow: inset 0 1px 2px var(--dpk-shade-1);
+    }
+
+    .diagram-match button {
+      border: 0;
+      border-radius: var(--dpk-radius-xs);
+      padding: 4px 8px;
+      background: transparent;
+      color: var(--dpk-ink-faint);
+      font-size: 9.5px;
+      font-weight: 600;
+      letter-spacing: 0.01em;
+      cursor: pointer;
+      transition:
+        background 160ms var(--dpk-ease),
+        color 160ms var(--dpk-ease),
+        box-shadow 160ms var(--dpk-ease);
+    }
+
+    .diagram-match button:hover[aria-pressed='false'] {
+      color: var(--dpk-ink-soft);
+    }
+
+    .diagram-match button[aria-pressed='true'] {
+      background: var(--dpk-paper-raised);
+      color: var(--dpk-ink);
+      font-weight: 650;
+      box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+    }
+
+    .dpk-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      max-width: 100%;
+      padding: 4px 9px;
+      border: 1px solid transparent;
+      border-radius: var(--dpk-radius-xs);
+      background: var(--dpk-paper-inset);
+      color: var(--dpk-ink-soft);
+      font-size: 10.5px;
+      cursor: pointer;
+      transition:
+        background 140ms var(--dpk-ease),
+        color 140ms var(--dpk-ease),
+        border-color 140ms var(--dpk-ease),
+        box-shadow 140ms var(--dpk-ease);
+    }
+
+    .dpk-tag:hover {
+      background: var(--dpk-paper-sunken);
+      color: var(--dpk-ink);
+    }
+
+    .dpk-tag[aria-pressed='true'] {
+      border-color: color-mix(in srgb, var(--dpk-blue) 45%, transparent);
+      background: var(--dpk-blue-soft);
+      color: var(--dpk-blue);
+      font-weight: 600;
+      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dpk-blue) 20%, transparent);
+    }
+
+    .dpk-tag-name {
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .dpk-tag-count {
+      flex: none;
+      font-family: var(--dpk-mono);
+      font-size: 9px;
+      opacity: 0.7;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .dpk-tag-clear {
+      border: 0;
+      background: none;
+      padding: 4px 6px;
+      color: var(--dpk-ink-faint);
+      font-size: 10px;
+      cursor: pointer;
+    }
+
+    .diagram-canvas {
+      position: relative;
+      flex: 1;
+      min-height: 220px;
+      overflow: hidden;
+      touch-action: none;
+      cursor: grab;
+      background: var(--dpk-dots), var(--dpk-paper-sunken);
+    }
+
+    .diagram-canvas:focus-visible {
+      outline: none;
+      box-shadow: inset var(--dpk-focus);
+    }
+
+    .diagram-canvas.is-panning {
+      cursor: grabbing;
+    }
+
+    .diagram-world {
+      position: absolute;
+      inset: 0 auto auto 0;
+      transform-origin: 0 0;
+    }
+
+    .diagram-edges {
+      position: absolute;
+      inset: 0;
+      overflow: visible;
+      pointer-events: none;
+    }
+
+    /*
+     * The controls along the bottom edge rise by \`--dpk-dock-overlap\`, set
+     * where the shell's hand-off dock floats over that edge, rather than the
+     * diagram giving up room to it.
+     */
+    .diagram-zoom {
+      position: absolute;
+      right: 12px;
+      bottom: calc(12px + var(--dpk-dock-overlap, 0px));
+      display: flex;
+      overflow: hidden;
+      border: 1px solid var(--dpk-rule-strong);
+      border-radius: var(--dpk-radius-sm);
+      background: var(--dpk-glass);
+      backdrop-filter: blur(12px);
+      box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+    }
+
+    .diagram-zoom button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      border: 0;
+      border-radius: 0;
+      padding: 6px 9px;
+      background: transparent;
+      color: var(--dpk-ink-soft);
+      font-size: 10.5px;
+      cursor: pointer;
+      transition:
+        background 140ms var(--dpk-ease),
+        color 140ms var(--dpk-ease);
+    }
+
+    .diagram-zoom button svg {
+      width: 12px;
+      height: 12px;
+    }
+
+    .diagram-zoom button + button {
+      border-left: 1px solid var(--dpk-rule);
+    }
+
+    .diagram-zoom button:hover {
+      background: var(--dpk-paper-inset);
+      color: var(--dpk-ink);
+    }
+
+    .diagram-zoom-value {
+      font-family: var(--dpk-mono);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .diagram-legend {
+      position: absolute;
+      left: 12px;
+      bottom: calc(14px + var(--dpk-dock-overlap, 0px));
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      max-width: calc(100% - 150px);
+      padding: 4px 8px;
+      border: 1px solid var(--dpk-rule);
+      border-radius: var(--dpk-radius-xs);
+      background: var(--dpk-glass);
+      backdrop-filter: blur(10px);
+      box-shadow: var(--dpk-shadow-xs);
+      font-size: 9.5px;
+      color: var(--dpk-ink-faint);
+    }
+
+    .diagram-legend span {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+    }
+
+    .diagram-legend i {
+      width: 16px;
+      border-top: 1.6px solid var(--dpk-rule-strong);
+    }
+
+    .diagram-empty,
+    .diagram-notice {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      margin: 0;
+      max-width: min(80%, 360px);
+      font-size: 12px;
+      color: var(--dpk-ink-faint);
+      text-align: center;
+      pointer-events: none;
+    }
+
+    .diagram-empty {
+      padding: 16px 26px;
+      border: 1.5px dashed var(--dpk-rule-strong);
+      border-radius: var(--dpk-radius);
+      background: color-mix(in srgb, var(--dpk-paper-raised) 55%, transparent);
+    }
+
+    .diagram-notice {
+      pointer-events: auto;
+      padding: 12px 16px 12px 19px;
+      border: 1px solid color-mix(in srgb, var(--dpk-danger) 35%, transparent);
+      border-radius: var(--dpk-radius);
+      background: linear-gradient(90deg, var(--dpk-danger) 0 3px, transparent 3px), var(--dpk-danger-soft);
+      box-shadow: var(--dpk-bevel), var(--dpk-shadow);
+      color: var(--dpk-ink-soft);
+      text-align: left;
+    }
+
+    .diagram-notice p {
+      margin: 0 0 9px;
+    }
+
+    /*
+     * Contextual comments: an icon per element, revealed while the element that
+     * contains it (or the element just before it) is hovered, focused or
+     * selected, and always on touch devices. It opens the composer beside it.
+     */
+    .diagram-comment-trigger {
+      display: grid;
+      place-items: center;
+      width: 28px;
+      height: 28px;
+      padding: 5px;
+      border: 1px solid var(--dpk-rule-strong);
+      border-radius: var(--dpk-radius-sm);
+      background: var(--dpk-paper-raised);
+      color: var(--dpk-ink-soft);
+      box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+      cursor: pointer;
+      opacity: 0;
+      pointer-events: none;
+      transition:
+        opacity 120ms ease,
+        background 160ms var(--dpk-ease),
+        color 160ms var(--dpk-ease),
+        border-color 160ms var(--dpk-ease),
+        box-shadow 160ms var(--dpk-ease),
+        transform 160ms var(--dpk-ease-spring);
+    }
+
+    .diagram-comment-trigger.is-placed {
+      position: absolute;
+      z-index: 2;
+    }
+
+    .diagram-comment-trigger svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    .diagram-edge-comment {
+      overflow: visible;
+    }
+
+    .diagram-edge-comment .diagram-comment-trigger {
+      margin: 2px;
+    }
+
+    :is(.d-node, .d-edge):is(:hover, :focus-within, .is-selected) .diagram-comment-trigger,
+    :is(:hover, :focus-visible, .is-selected) + .diagram-comment-trigger,
+    .diagram-comment-trigger:is(:hover, :focus-visible, [aria-expanded='true']) {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .diagram-comment-trigger:hover,
+    .diagram-comment-trigger:focus-visible {
+      color: var(--dpk-accent);
+      border-color: var(--dpk-accent);
+      background: var(--dpk-accent-soft);
+      box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+      transform: translateY(-1px);
+    }
+
+    .diagram-comment-trigger:focus-visible {
+      outline: none;
+      box-shadow: var(--dpk-focus);
+    }
+
+    @media (hover: none) {
+      .diagram-comment-trigger {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+
+    .comment-target {
+      font-size: 12px;
+      overflow-wrap: anywhere;
+    }
+
+    .comment-error {
+      margin: 0;
+      font-size: 11px;
+      color: var(--dpk-accent);
+    }
+
+    /* Element state, shared by every diagram so highlighting reads the same. */
+    .d-node {
+      position: absolute;
+      cursor: pointer;
+      transition:
+        opacity 150ms ease,
+        border-color 160ms var(--dpk-ease),
+        box-shadow 160ms var(--dpk-ease),
+        background 160ms var(--dpk-ease),
+        transform 160ms var(--dpk-ease);
+    }
+
+    .d-node.is-dimmed,
+    .d-edge.is-dimmed {
+      opacity: 0.26;
+    }
+
+    .d-edge {
+      outline: none;
+      cursor: pointer;
+    }
+
+    .d-edge-hit {
+      fill: none;
+      stroke: transparent;
+      stroke-width: 16;
+      pointer-events: stroke;
+      cursor: pointer;
+    }
+
+    .d-edge-path {
+      fill: none;
+      stroke: var(--dpk-rule-strong);
+      stroke-width: 1.5;
+      stroke-linejoin: round;
+      stroke-linecap: round;
+      transition:
+        stroke 160ms var(--dpk-ease),
+        stroke-width 160ms var(--dpk-ease);
+    }
+
+    .d-edge.is-selected .d-edge-path,
+    .d-edge:focus-visible .d-edge-path {
+      stroke: var(--dpk-ink);
+      stroke-width: 2.6;
+    }
+
+    .d-edge:focus-visible .d-edge-hit {
+      stroke: var(--dpk-blue-soft);
+    }
+
+    .d-edge-label {
+      font-size: 9.5px;
+      fill: var(--dpk-ink-faint);
+      paint-order: stroke;
+      stroke: var(--dpk-paper-raised);
+      stroke-width: 5px;
+      stroke-linejoin: round;
+    }
+
+    .d-edge-label.is-dimmed {
+      opacity: 0.3;
+    }
+
+    @media (max-width: 700px) {
+      .diagram-subject {
+        display: none;
+      }
+    }
+  `],we=a=>a.map((e,t)=>`${t===0?"M":"L"}${e.x} ${e.y}`).join(" "),St=a=>R`
+  <defs>
+    ${a.map(e=>R`
+        <marker
+          id=${e.id}
+          viewBox="0 0 10 10"
+          refX="9"
+          refY="5"
+          markerWidth="7"
+          markerHeight="7"
+          orient="auto-start-reverse"
+        >
+          <path
+            class="diagram-arrow"
+            d=${e.open===!0?"M1 1 L9 5 L1 9":"M1 1 L9 5 L1 9 Z"}
+            fill=${e.open===!0||e.color===void 0?b:e.color}
+            stroke=${e.color??b}
+            stroke-width="1.3"
+          ></path>
+        </marker>
+      `)}
+  </defs>
+`,Ta=(a,e,t,s)=>u`
+  <div class="diagram-tags" role="group" aria-label=${a.tagFilter}>
+    <div class="diagram-match" role="group" aria-label=${a.tagMatch}>
+      ${[["single","Single"],["all","AND"],["any","OR"]].map(([n,i])=>u`
+          <button
+            type="button"
+            data-match=${n}
+            aria-pressed=${t===n?"true":"false"}
+            @click=${()=>s({kind:"match",match:n})}
+          >
+            ${i}
+          </button>
+        `)}
+    </div>
+    ${Q(e,n=>n.tag,n=>u`
+        <button
+          type="button"
+          class="dpk-tag"
+          data-tag=${n.tag}
+          aria-pressed=${n.selected?"true":"false"}
+          @click=${()=>s({kind:"tag",tag:n.tag})}
+        >
+          <span class="dpk-tag-name" title=${n.tag}>${n.tag}</span><span class="dpk-tag-count">${n.count}</span>
+        </button>
+      `)}
+    ${e.some(n=>n.selected)?u`<button type="button" class="dpk-tag-clear" @click=${()=>s({kind:"clear-tags"})}>
+            ${a.clearTags}
+          </button>`:b}
+  </div>
+`,Da=(a,e)=>u`
+  <div class="diagram-zoom">
+    <button
+      type="button"
+      aria-label=${a.zoomOut}
+      @click=${t=>{t.stopPropagation(),e?.({kind:"zoom",factor:1/1.1})}}
+    >
+      ${Vs()}
+    </button>
+    <button
+      type="button"
+      class="diagram-zoom-value"
+      title=${a.fit}
+      aria-label=${a.fit}
+      @click=${()=>e?.({kind:"fit"})}
+    >
+      100%
+    </button>
+    <button
+      type="button"
+      aria-label=${a.zoomIn}
+      @click=${t=>{t.stopPropagation(),e?.({kind:"zoom",factor:1.1})}}
+    >
+      ${De()}
+    </button>
+  </div>
+`,Re=.08,La=1.8,za=a=>{if(a.length===0)return{x:0,y:0,width:0,height:0};const e=Math.min(...a.map(i=>i.x)),t=Math.min(...a.map(i=>i.y)),s=Math.max(...a.map(i=>i.x+i.width))-e,n=Math.max(...a.map(i=>i.y+i.height))-t;return{x:e-s*.1,y:t-n*.1,width:s*1.2,height:n*1.2}},Oe=(a,e)=>a+e/12,Aa=(a,e)=>{if(a.length===0)return null;const t=Math.min(...a.map(n=>n.y)),s=a.filter(n=>n.y<t+e);return{x:Math.min(...s.map(n=>n.x)),y:t}},Ie=16,Mt=(a,e,t,s,n="center")=>{if(e.width===0||e.height===0)return{...a,x:0,y:0};const i=(r,o,d,l)=>{const c=d*a.scale;return c<=l?n==="start"?Ie-Oe(o,d)*a.scale:(l-c)/2-o*a.scale:Math.min(-o*a.scale,Math.max(l-(o+d)*a.scale,r))};return{...a,x:i(a.x,e.x,e.width,t),y:i(a.y,e.y,e.height,s)}},Ra=(a,e,t,s,n,i,r="center")=>{const o=Mt({...a,x:a.x-n,y:a.y-i},e,t,s,r);return Math.abs(i)>Math.abs(n)&&o.y===a.y?null:o},Ct='button,[role="button"],a,input,textarea,select',Oa=a=>{const{canvas:e,world:t,onClearSelection:s,onView:n,align:i="center"}=a;let r={x:0,y:0,width:0,height:0},o={x:0,y:0,scale:1};const d=()=>({width:e.clientWidth||1e3,height:e.clientHeight||560}),l=()=>{const{width:f,height:C}=d();o=Mt(o,r,f,C,i),t.style.transform=`translate(${o.x}px, ${o.y}px) scale(${o.scale})`,n?.(o)},c=()=>{const{width:f,height:C}=d(),q=r.width/1.2||1,A=r.height/1.2||1;o={...o,scale:ve(Math.min((f-24)/q,(C-40)/A),Re,1)},o={...o,x:(f-r.width*o.scale)/2-r.x*o.scale,y:(C-r.height*o.scale)/2-r.y*o.scale},l()},h=()=>{const{width:f}=d(),C=r.width/1.2||1,q=ve((f-24)/C,Re,1);o={scale:q,x:(f-r.width*q)/2-r.x*q,y:16},l()},p=f=>{o={scale:1,x:Ie-(f?.x??Oe(r.x,r.width)),y:Ie-(f?.y??Oe(r.y,r.height))},l()},m=(f,C=d().width/2,q=d().height/2)=>{const A=o.scale,F=ve(A*f,Re,La);F!==A&&(o={scale:F,x:C-(C-o.x)*F/A,y:q-(q-o.y)*F/A},l())},v=f=>{if(f.target instanceof Element&&f.target.closest(".diagram-zoom"))return;const C=f.deltaMode===1?16:f.deltaMode===2?d().height:1;if(f.ctrlKey||f.metaKey){f.preventDefault();const Z=e.getBoundingClientRect();m(Math.exp(-ve(f.deltaY*C,-60,60)*.0012),f.clientX-Z.left,f.clientY-Z.top);return}const{width:q,height:A}=d(),F=Ra(o,r,q,A,f.deltaX*C,f.deltaY*C,i);F!==null&&(f.preventDefault(),o=F,l())},x=new Map;let w=null,y=!1;const E=()=>{const f=[...x.values()],C=f[0];if(!C)return null;const q=f[1];return q?{x:(C.x+q.x)/2,y:(C.y+q.y)/2,distance:Math.hypot(q.x-C.x,q.y-C.y)}:{...C,distance:0}},O=f=>{x.size===0&&(y=!1);const q=(f.target instanceof Element?f.target:null)?.closest(Ct)??null;f.button!==0||f.pointerType!=="touch"&&q!==null||(x.set(f.pointerId,{x:f.clientX,y:f.clientY}),w=E(),q===null&&e.setPointerCapture(f.pointerId),f.pointerType!=="touch"&&q===null&&(f.preventDefault(),e.focus({preventScroll:!0})))},I=f=>{if(!x.has(f.pointerId)||w===null)return;x.set(f.pointerId,{x:f.clientX,y:f.clientY});const C=E();if(C===null)return;const q=C.x-w.x,A=C.y-w.y;if((Math.abs(q)+Math.abs(A)>1||Math.abs(C.distance-w.distance)>1)&&(y=!0),C.distance>0&&w.distance>0){const F=e.getBoundingClientRect();m(Math.pow(C.distance/w.distance,.45),w.x-F.left,w.y-F.top)}o={...o,x:o.x+q,y:o.y+A},l(),w=C,e.classList.toggle("is-panning",y)},N=f=>{x.delete(f.pointerId),w=E(),!(x.size>0)&&(e.classList.remove("is-panning"),f.type==="pointercancel"&&(y=!1))},xe=f=>{y&&(f.preventDefault(),f.stopPropagation()),N(f)},M=f=>{if(y){f.preventDefault(),f.stopPropagation(),y=!1;return}const C=f.target instanceof Element?f.target:null;C===null||C.closest(Ct)!==null||s()},L=f=>{if(f.target!==e)return;const C=30;if(f.key==="+"||f.key==="=")m(1.1);else if(f.key==="-")m(1/1.1);else if(f.key==="0")c();else if(f.key==="Escape")s();else if(f.key==="ArrowLeft"||f.key==="ArrowRight"||f.key==="ArrowUp"||f.key==="ArrowDown")o={...o,x:o.x+(f.key==="ArrowLeft"?C:f.key==="ArrowRight"?-C:0),y:o.y+(f.key==="ArrowUp"?C:f.key==="ArrowDown"?-C:0)},l();else return;f.preventDefault()},z=f=>{const C=f.target instanceof HTMLElement?f.target:null;if(C===null||!t.contains(C))return;const q=C.getBoundingClientRect(),A=e.getBoundingClientRect();let F=0,Z=0;q.left<A.left+12?F=A.left+12-q.left:q.right>A.right-12&&(F=A.right-12-q.right),q.top<A.top+12?Z=A.top+12-q.top:q.bottom>A.bottom-40&&(Z=A.bottom-40-q.bottom),!(F===0&&Z===0)&&(o={...o,x:o.x+F,y:o.y+Z},l())};e.addEventListener("wheel",v,{passive:!1}),e.addEventListener("pointerdown",O),e.addEventListener("pointermove",I),e.addEventListener("pointerup",xe),e.addEventListener("pointercancel",N),e.addEventListener("lostpointercapture",N),e.addEventListener("click",M,!0),e.addEventListener("keydown",L),e.addEventListener("focusin",z);const U=typeof ResizeObserver>"u"?null:new ResizeObserver(()=>l());return U?.observe(e),{setContent(f){r=za(f.width===0&&f.height===0?[]:[f]),t.style.width=`${f.width}px`,t.style.height=`${f.height}px`,l()},apply:l,fit:c,fitWidth:h,reset:p,zoom:m,view:()=>({...o}),destroy(){U?.disconnect(),e.removeEventListener("wheel",v),e.removeEventListener("pointerdown",O),e.removeEventListener("pointermove",I),e.removeEventListener("pointerup",xe),e.removeEventListener("pointercancel",N),e.removeEventListener("lostpointercapture",N),e.removeEventListener("click",M,!0),e.removeEventListener("keydown",L),e.removeEventListener("focusin",z)}}};class Fe extends tt{static{this.styles=Y}static{this.properties={data:{attribute:!1},id:{type:String,reflect:!0},heading:{type:String},subject:{type:String}}}#t=null;#n=null;#e=[];#s=[];#i=null;#a=va;#r=null;#o=null;#c=null;#p=null;#l=-1;#u="";#h=null;#b=null;#d=new Map;#m=null;#g=new Map;#f=null;#x=new Le(this);#M=new st(this,()=>{this.#u=""});constructor(){super(),this.id=this.getAttribute("id")??"",this.data=null,this.heading=null,this.subject=null}connectedCallback(){super.connectedCallback(),this.#u="",this.requestUpdate(),this.#p=mt(this,e=>this.parseData(e),e=>{e.ok?this.#k(e.value):this.#z(e.error)})}disconnectedCallback(){super.disconnectedCallback(),this.#p?.(),this.#p=null,this.#o?.destroy(),this.#o=null,this.#c=null}willUpdate(e){e.has("data")&&this.data!==null&&this.#k(this.data)}updated(){this.#E(),this.#C(),this.#v(),this.#q()}#C(){const e=this.renderRoot.querySelector(".diagram");if(!(this.#f===null||!e||typeof e.showPopover!="function")&&!e.matches(":popover-open"))try{e.showPopover()}catch{}}#E(){const e=JSON.stringify([this.commentTargets,this.#s]);e!==this.#u&&(this.#u=e,this.dispatchEvent(new CustomEvent("dpk-comment-targets-change",{bubbles:!0,composed:!0})))}#v(){this.#c=this.renderRoot.querySelector(".diagram-zoom-value");const e=this.renderRoot.querySelector(".diagram-canvas"),t=this.renderRoot.querySelector(".diagram-world");if(!e||!t)return;this.#o??=Oa({canvas:e,world:t,align:this.viewAlign(),onClearSelection:()=>this.#S(null),onView:i=>{this.#c&&(this.#c.textContent=`${Math.round(i.scale*100)}%`),this.dispatchEvent(new CustomEvent("dpk-diagram-view",{detail:{view:i},bubbles:!0,composed:!0})),this.onViewChange(i)}});const s=this.contentSize();if(s===null){this.#o.apply();return}this.#o.setContent({x:0,y:0,width:s.width,height:s.height});const n=this.layoutVersion();n!==this.#l&&(this.#l=n,this.initialView())}#q(){const e=this.#b!==this.#h;this.#b=this.#h;const t=this.renderRoot.querySelector(".comment-pop"),s=this.#w();!t||!s||(this.#x.open(t,s,{width:300,height:280},{placement:"right-start",trackTransform:!0}),e&&t.querySelector("textarea")?.focus({preventScroll:!0}))}get commentTargets(){if(!this.id||this.#i!==null)return[];const e=`${this.subject??this.heading??this.defaultHeading()} \xB7 ${this.id}`;return this.commentItems().map(t=>({...t,group:e}))}commentItems(){return[]}commentRef(e,...t){return`element:${[this.id,e,...t].map(s=>encodeURIComponent(s)).join("/")}`}requestElementComment(e,...t){const s=this.commentRef(e,...t);this.commentTargets.some(n=>n.value===s)&&this.dispatchEvent(new CustomEvent("dpk-comment-request",{detail:{target:s},bubbles:!0,composed:!0}))}get elementActions(){return this.#e}set elementActions(e){this.#e=e,this.#y()}get elementActionResults(){return this.#s}reduceElementActions(e,t){return{data:e,results:t.map(s=>({id:s.id,title:s.type,stale:"unsupported-action-type"}))}}dispatchElementAction(e,t,s){const n=new CustomEvent("dpk-element-action",{detail:{type:e,target:this.commentRef(...t),payload:s},bubbles:!0,composed:!0,cancelable:!0});return this.dispatchEvent(n),n.defaultPrevented}get selection(){return this.#r}select(e){this.#S(e)}get tagFilter(){return this.#a}set tagFilter(e){this.#a=e,this.requestUpdate()}get dataError(){return this.#i}resetView(){this.fitViewport()}#T(e){if(e===(this.#f!==null))return;const t=this.renderRoot.querySelector(".diagram");this.#f=e?{height:t?.offsetHeight??0}:null,this.#h=null,this.requestUpdate()}#L={handleEvent:e=>e.preventDefault(),passive:!1};#D={handleEvent:e=>{e.key!=="Escape"||this.#r!==null||(e.preventDefault(),this.#T(!1))},capture:!0};get locale(){return this.#M.locale}get chromeMessages(){return xa(this.#M.locale)}renderSelection(){const e=this.#h,t=e===null?void 0:this.#g.get(e);if(e===null||t===void 0)return b;const s=ct(this.#d.get(e)??"",[],{label:t,key:e,...this.#m===e?{error:this.chromeMessages.sendFailed}:{}});return u`${lt(e,pt(ut(this.#M.locale),s,n=>this.#$(e,n)))}`}renderCommentTrigger(e,t,s){if(!this.id)return b;const n=this.commentRef(e.kind,e.id);return this.#g.set(n,t),u`<button
+      type="button"
+      class=${V("diagram-comment-trigger",s&&"is-placed")}
+      style=${s?`left:${s.x}px; top:${s.y}px`:b}
+      data-comment-kind=${e.kind}
+      data-comment-id=${e.id}
+      aria-label=${this.chromeMessages.commentOn(t)}
+      title=${this.chromeMessages.commentOn(t)}
+      aria-haspopup="dialog"
+      aria-expanded=${this.#h===n?"true":"false"}
+      @click=${()=>{this.#S(e),this.#h=n,this.requestUpdate()}}
+    >
+      ${at()}
+    </button>`}renderEdgeCommentTrigger(e,t,s){const n=Math.floor((s.length-1)/2),i=s[n],r=s[n+1]??i;return!this.id||!i||!r?b:R`<foreignObject
+      class="diagram-edge-comment"
+      x=${(i.x+r.x)/2-16}
+      y=${(i.y+r.y)/2-16}
+      width="32"
+      height="32"
+    >${this.renderCommentTrigger(e,t)}</foreignObject>`}layoutVersion(){return 0}fitViewport(){this.viewport?.fit()}initialView(){this.viewport?.reset()}viewAlign(){return"center"}questionsOf(e){const t=e.questions?.trim();return t===void 0||t===""?b:t}onViewChange(e){}statsText(){return""}tagItems(){return[]}isEmpty(){return this.contentSize()===null}shellClass(){return""}defaultHeading(){return""}defaultSubject(){return""}emptyMessage(){return this.chromeMessages.noMatches}renderToolbarActions(){return b}renderLegend(){return b}renderAboveCanvas(){return b}get viewport(){return this.#o}items(){return this.#n??this.emptyData()}authoredItems(){return this.#t??this.emptyData()}elementClass(e,...t){return V(...t,e.selected&&"is-selected",e.related&&"is-related",e.dimmed&&"is-dimmed")}#k(e){this.#i=null,this.#t=e,this.#y()}#y(){if(this.#t===null){this.#s=this.#e.map(t=>({id:t.id,title:t.type,stale:"target-missing"})),this.requestUpdate();return}const e=this.reduceElementActions(this.#t,this.#e);this.#n=e.data,this.#s=e.results,this.#r!==null&&(this.hasSelection(this.#r)||(this.#r=null,this.#h=null)),this.requestUpdate()}#w(){const e=this.#r;return e?[...this.renderRoot.querySelectorAll("[data-comment-kind]")].find(t=>t.dataset.commentKind===e.kind&&t.dataset.commentId===e.id)??null:null}#$(e,t){if(t.kind==="input"){this.#d=new Map(this.#d).set(e,t.body),this.#m=null,this.requestUpdate();return}if(t.kind==="comment"){if(!!this.dispatchEvent(new CustomEvent("dpk-comment-submit",{detail:{target:e,body:t.body},bubbles:!0,composed:!0,cancelable:!0}))){this.#m=e,this.requestUpdate();return}const i=new Map(this.#d);i.delete(e),this.#d=i}this.#m=null;const s=this.#w();this.#S(null),s?.focus({preventScroll:!0})}#z(e){this.#i=e,this.#t=null,this.#n=null,this.#y(),console.error("[dev-process-kit] invalid diagram data:",e),this.requestUpdate()}hasSelection(e){return!0}#S(e){(e===null?this.#r===null:this.#r!==null&&this.#r.kind===e.kind&&this.#r.id===e.id)||(this.#r=e,this.#h=null,this.dispatchEvent(new CustomEvent("dpk-diagram-select",{detail:{selection:e},bubbles:!0,composed:!0})),this.requestUpdate())}#A=e=>{switch(e.kind){case"tag":this.#a=ya(this.#a,e.tag),this.requestUpdate();return;case"match":this.#a=wa(this.#a,e.match),this.requestUpdate();return;case"clear-tags":this.#a=$a(this.#a),this.requestUpdate();return;case"select":this.#S(e.selection);return;case"zoom":this.#o?.zoom(e.factor);return;case"fit":this.fitViewport();return;default:return}};refreshContent(){}render(){this.#g=new Map,this.refreshContent();const e=Ea(this.tagItems(),this.#a),t=this.#f,s=this.chromeMessages,n=t===null?s.maximize:s.restore;return u`
+      ${t===null?b:u`<div class="diagram-placeholder" style="height:${t.height}px"></div>`}
+      <div
+        class=${V("diagram",this.shellClass(),t!==null&&"is-maximized")}
+        popover=${t===null?b:"manual"}
+        @wheel=${t===null?b:this.#L}
+        @keydown=${t===null?b:this.#D}
+      >
+        <div class="diagram-toolbar">
+          <span class="diagram-title" title=${this.heading??this.defaultHeading()}
+            >${this.heading??this.defaultHeading()}</span
+          >
+          ${(this.subject??this.defaultSubject())===""?b:u`<span class="diagram-subject" title=${this.subject??this.defaultSubject()}
+                  >${this.subject??this.defaultSubject()}</span
+                >`}
+          <div class="diagram-toolbar-actions">
+            ${this.renderToolbarActions()}
+            <span class="diagram-stats">${this.statsText()}</span>
+            <button
+              type="button"
+              class="dpk-icon-btn diagram-maximize"
+              aria-label=${n}
+              title=${n}
+              aria-pressed=${t===null?"false":"true"}
+              @click=${()=>this.#T(t===null)}
+            >
+              ${t===null?Ys():Js()}
+            </button>
+          </div>
+        </div>
+        ${Ta(s,e,this.#a.match,this.#A)} ${this.renderAboveCanvas()}
+        <div class="diagram-canvas" tabindex="0" aria-label=${s.canvas}>
+          <div class="diagram-world">${this.renderCanvas()}</div>
+          ${this.isEmpty()?u`<p class="diagram-empty">${this.emptyMessage()}</p>`:b}
+          ${this.#i===null?b:u`<p class="diagram-notice" role="alert">${s.dataError}<br />${this.#i}</p>`}
+          ${this.renderLegend()} ${Da(s,this.#A)}
+        </div>
+        ${this.renderSelection()}
+      </div>
+    `}}class ce extends Fe{#t=null;#n="";#e=0;#s=W;commentItems(){const e=this.items();return[...e.nodes.map(t=>({value:this.commentRef("node",t.id),label:t.id})),...e.edges.map(t=>({value:this.commentRef("edge",t.id),label:`${t.from} \u2192 ${t.to} (${t.id})`}))]}get visible(){const e=this.filtered();return{nodes:e.nodes,edges:e.edges}}get layout(){return this.#t}get layoutMode(){return"layered"}get tagDimension(){return"node"}layoutOptions(){return{}}matchesFilter(e){return!0}layoutSignature(){return""}statsLabels(){return{node:this.chromeMessages.nodes,edge:this.chromeMessages.edges}}statsText(){const e=this.filtered();return qa(e.nodes.length,e.edges.length,this.statsLabels())}tagItems(){const e=this.items();return(this.tagDimension==="edge"?e.edges:e.nodes).map(t=>t.tags)}contentSize(){const e=this.#t;return e===null||e.nodes.length===0?null:{width:e.width,height:e.height}}layoutVersion(){return this.#e}hasSelection(e){const t=this.items();return e.kind==="node"?t.nodes.some(s=>s.id===e.id):t.edges.some(s=>s.id===e.id)}placedNode(e){return this.#t?.nodes.find(t=>t.id===e)}routeOf(e){return this.#t?.routes.find(t=>t.id===e)?.points??[]}nodeState(e){return $t(e,this.selection,"node",this.#s)}edgeState(e){return $t(e,this.selection,"edge",this.#s)}renderEdges(e,t){const s=this.#t?.width??0,n=this.#t?.height??0;return u`<svg class="diagram-edges" width=${s} height=${n}>
+      ${St(t)}${e}
+    </svg>`}filtered(){const e=this.items();if(this.tagDimension==="edge"){const n=e.edges.filter(r=>se(r.tags,this.tagFilter)&&this.matchesFilter(r)),i=new Set(n.flatMap(r=>[r.from,r.to]));return{...e,edges:n,nodes:e.nodes.filter(r=>i.has(r.id))}}const t=e.nodes.filter(n=>se(n.tags,this.tagFilter)&&this.matchesFilter(n)),s=new Set(t.map(n=>n.id));return{...e,nodes:t,edges:e.edges.filter(n=>s.has(n.from)&&s.has(n.to))}}refreshContent(){const e=this.filtered(),t=[this.layoutMode,e.nodes.map(s=>`${s.id}:${s.width}x${s.height}`).join(","),e.edges.map(s=>`${s.id}:${s.from}>${s.to}`).join(","),this.layoutSignature()].join("|");t!==this.#n&&(this.#n=t,this.#e+=1,this.#t=this.computePlacement(e)),this.#s=this.relations(this.selection,e)}computePlacement(e){const t=e.nodes.map(i=>({id:i.id,width:i.width,height:i.height,...i.ports===void 0?{}:{ports:i.ports},...i.position===void 0?{}:{position:i.position}})),s=e.edges.map(i=>({id:i.id,from:i.from,to:i.to,...i.fromPort===void 0?{}:{fromPort:i.fromPort},...i.toPort===void 0?{}:{toPort:i.toPort}})),n=this.layoutOptions();return this.layoutMode==="fixed"?ka(t,s,n):ba(t,s,n)}}const $e=H({en:{heading:"State machine",node:"State",edge:"Transition",empty:"No matching transitions.",transitionLabel:(a,e,t)=>`${t} from ${a} to ${e}`},ja:{heading:"\u30B9\u30C6\u30FC\u30C8\u30DE\u30B7\u30F3",node:"\u72B6\u614B",edge:"\u9077\u79FB",empty:"\u8A72\u5F53\u3059\u308B\u9077\u79FB\u306F\u3042\u308A\u307E\u305B\u3093\u3002",transitionLabel:(a,e,t)=>`${a} \u304B\u3089 ${e} \u3078\u306E ${t}`}}),Ia=T({x:ie(),y:ie()}),Fa=T({id:$(g(),S(1)),name:$(g(),S(1)),code:k(g()),kind:k(_(["normal","initial","terminal","compensation"]),"normal"),description:k(g()),position:k(Ia),questions:k(g())}),Na=T({id:$(g(),S(1)),from:$(g(),S(1)),to:$(g(),S(1)),title:$(g(),S(1)),kind:k(_(["normal","exception"]),"normal"),tags:k(D(g()),[]),guard:k(g()),effect:k(g()),questions:k(g())}),Et={width:178,height:86},Pa=()=>({nodes:[],edges:[]}),ja=T({states:D(Fa),transitions:k(D(Na),[])}),qt=a=>{const e=K(ja,a),t=new Set;for(const r of e.states){if(t.has(r.id))throw new Error(`duplicate state id: ${r.id}`);t.add(r.id)}const s=new Set,n=e.transitions.map(r=>{if(s.has(r.id))throw new Error(`duplicate transition id: ${r.id}`);if(s.add(r.id),!t.has(r.from))throw new Error(`unknown transition source: ${r.from}`);if(!t.has(r.to))throw new Error(`unknown transition target: ${r.to}`);return{id:r.id,from:r.from,to:r.to,title:r.title,kind:r.kind,tags:r.tags,guard:r.guard??null,effect:r.effect??null,...r.questions===void 0?{}:{questions:r.questions}}});return{nodes:e.states.map(r=>({id:r.id,name:r.name,code:r.code??null,kind:r.kind,description:r.description??null,width:Et.width,height:Et.height,tags:[],...r.position===void 0?{}:{position:r.position},...r.questions===void 0?{}:{questions:r.questions}})),edges:n}},Ua=a=>a.length>0&&a.every(e=>e.position!==void 0),_a=G`
+  .state-node {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 6px;
+    padding: 0 15px;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius);
+    background: var(--dpk-paper-raised);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+    text-align: left;
+    overflow: hidden;
+    transition:
+      border-color 160ms var(--dpk-ease),
+      box-shadow 160ms var(--dpk-ease),
+      transform 160ms var(--dpk-ease);
+  }
+
+  .state-node:hover {
+    border-color: var(--dpk-blue);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+    transform: translateY(-1px);
+  }
+
+  .state-node.is-initial {
+    border-width: 2px;
+  }
+
+  .state-node.is-terminal {
+    border: 3px double var(--dpk-rule-strong);
+  }
+
+  .state-node.is-compensation {
+    border-color: color-mix(in srgb, var(--dpk-amber) 50%, transparent);
+    background: var(--dpk-amber-soft);
+  }
+
+  .state-node.is-selected {
+    border-color: var(--dpk-blue);
+    box-shadow:
+      var(--dpk-bevel),
+      var(--dpk-shadow-sm),
+      0 0 0 3px var(--dpk-blue-soft);
+  }
+
+  .state-node.is-related {
+    border-color: color-mix(in srgb, var(--dpk-green) 60%, transparent);
+  }
+
+  .state-code {
+    font-family: var(--dpk-mono);
+    font-size: 9px;
+    letter-spacing: 0.02em;
+    color: var(--dpk-ink-faint);
+  }
+
+  .state-name {
+    font-size: 13.5px;
+    font-weight: 640;
+    letter-spacing: -0.01em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  /* The slot centres a label on its route and carries the label's comment icon beside it. */
+  .state-label-slot {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    display: flex;
+  }
+
+  /* Overlaps the label by a hair so the pointer never crosses a gap that would hide it. */
+  .state-label-slot > .diagram-comment-trigger {
+    position: absolute;
+    left: calc(100% - 2px);
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .state-label {
+    max-width: 190px;
+    padding: 3px 7px;
+    border: 1px solid transparent;
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink-soft);
+    font-size: 10px;
+    line-height: 1.5;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer;
+    box-shadow: var(--dpk-shadow-xs);
+    transition:
+      border-color 160ms var(--dpk-ease),
+      background 160ms var(--dpk-ease),
+      color 160ms var(--dpk-ease),
+      box-shadow 160ms var(--dpk-ease);
+  }
+
+  .state-label:hover {
+    border-color: color-mix(in srgb, var(--dpk-blue) 40%, transparent);
+    color: var(--dpk-blue);
+    box-shadow: var(--dpk-shadow-sm);
+  }
+
+  .state-label.is-selected {
+    border-color: color-mix(in srgb, var(--dpk-blue) 55%, transparent);
+    background: var(--dpk-blue-soft);
+    color: var(--dpk-blue);
+    font-weight: 600;
+    box-shadow:
+      var(--dpk-shadow-xs),
+      inset 0 0 0 1px color-mix(in srgb, var(--dpk-blue) 20%, transparent);
+  }
+
+  .state-label.is-dimmed {
+    opacity: 0.35;
+  }
+
+  .state-edge.is-exception .d-edge-path {
+    stroke: color-mix(in srgb, var(--dpk-amber) 65%, var(--dpk-rule-strong));
+    stroke-dasharray: 5 4;
+  }
+
+  .state-edge.is-related .d-edge-path {
+    stroke: var(--dpk-green);
+  }
+
+  .state-edge.is-selected .d-edge-path {
+    stroke: var(--dpk-blue);
+  }
+
+  .state-initial-mark {
+    fill: var(--dpk-ink-faint);
+    stroke: var(--dpk-ink-faint);
+  }
+
+  .state-initial-mark.is-dimmed {
+    opacity: 0.26;
+  }
+
+  #state-arrow .diagram-arrow {
+    fill: var(--dpk-ink-faint);
+    stroke: var(--dpk-ink-faint);
+  }
+
+  #state-arrow-active .diagram-arrow {
+    fill: var(--dpk-blue);
+    stroke: var(--dpk-blue);
+  }
+
+  #state-arrow-exception .diagram-arrow {
+    fill: var(--dpk-amber);
+    stroke: var(--dpk-amber);
+  }
+`,Ba=[{id:"state-arrow"},{id:"state-arrow-active"},{id:"state-arrow-exception"}];class Tt extends ce{static{this.styles=[Y,_a]}parseData(e){return qt(e)}emptyData(){return Pa()}defaultHeading(){return $e(this.locale).heading}statsLabels(){const e=$e(this.locale);return{node:e.node,edge:e.edge}}emptyMessage(){return $e(this.locale).empty}get tagDimension(){return"edge"}get layoutMode(){return Ua(this.filtered().nodes)?"fixed":"layered"}layoutOptions(){return this.layoutMode==="fixed"?{padding:44}:{nodeSpacing:40,layerSpacing:110,padding:44}}relations(e,t){if(e===null||e.kind!=="node")return W;const s=j(t.edges,e.id,"outgoing",!1),n=j(t.edges,e.id,"incoming",!1);return{nodes:new Map([...s.nodes,...n.nodes]),edges:new Set([...s.edges,...n.edges])}}renderCanvas(){const e=this.visible.nodes,t=e.filter(s=>s.kind==="initial").map(s=>this.#e(s));return u`
+      ${this.renderEdges([...t,...this.visible.edges.map(s=>this.#s(s))],Ba)}
+      ${e.map(s=>this.#i(s))} ${this.visible.edges.map(s=>this.#a(s))}
+    `}#t(e){return this.filtered().nodes.find(t=>t.id===e)?.name??e}#n(e){return[e.guard,e.effect].filter(t=>t!==null).join(`
+`)||e.title}#e(e){const t=this.placedNode(e.id);if(!t)return b;const s=t.y+t.height/2,n=this.nodeState(e.id);return R`
+      <g class=${V("state-initial-mark",n.dimmed&&"is-dimmed")}>
+        <circle cx=${t.x-22} cy=${s} r="5"></circle>
+        <path
+          d=${we([{x:t.x-17,y:s},{x:t.x-1,y:s}])}
+          stroke-width="1.6"
+        ></path>
+      </g>
+    `}#s(e){const t=$e(this.locale),s=this.edgeState(e.id),n=this.routeOf(e.id),i=we(n),o=s.selected||s.related?"state-arrow-active":e.kind==="exception"?"state-arrow-exception":"state-arrow",d=()=>this.select({kind:"edge",id:e.id});return R`
+      <g
+        class=${this.elementClass(s,"d-edge","state-edge",e.kind==="exception"&&"is-exception")}
+        data-transition=${e.id}
+      >
+        <title>${this.#n(e)}</title>
+        <path class="d-edge-path" d=${i} marker-end=${`url(#${o})`}></path>
+        <path
+          class="d-edge-hit"
+          d=${i}
+          role="button"
+          tabindex="0"
+          aria-label=${t.transitionLabel(this.#t(e.from),this.#t(e.to),e.title)}
+          @click=${d}
+          @keydown=${l=>{l.key!=="Enter"&&l.key!==" "||(l.preventDefault(),d())}}
+        ></path>
+      </g>
+    `}#i(e){const t=this.placedNode(e.id);if(!t)return b;const s=this.nodeState(e.id);return u`
+      <button
+        type="button"
+        class=${this.elementClass(s,"d-node","state-node",`is-${e.kind}`)}
+        data-state=${e.id}
+        data-grill-questions=${this.questionsOf(e)}
+        style="left:${t.x}px; top:${t.y}px; width:${e.width}px; height:${e.height}px"
+        aria-pressed=${s.selected?"true":"false"}
+        title=${e.description??e.name}
+        @click=${()=>this.select({kind:"node",id:e.id})}
+      >
+        <span class="state-name">${e.name}</span>
+        ${e.code===null?b:u`<span class="state-code">${e.code}</span>`}
+      </button>
+      ${this.renderCommentTrigger({kind:"node",id:e.id},e.name,{x:t.x+e.width-20,y:t.y-14})}
+    `}#a(e){const t=this.edgeState(e.id),s=Ca(this.routeOf(e.id));return u`
+      <span class="state-label-slot" style="left:${s.x}px; top:${s.y}px">
+        <button
+          type="button"
+          class=${this.elementClass(t,"state-label")}
+          data-transition-label=${e.id}
+          data-grill-questions=${this.questionsOf(e)}
+          title=${this.#n(e)}
+          @click=${()=>this.select({kind:"edge",id:e.id})}
+        >
+          ${e.title}
+        </button>
+        ${this.renderCommentTrigger({kind:"edge",id:e.id},`${this.#t(e.from)} \u2192 ${this.#t(e.to)} \xB7 ${e.title}`)}
+      </span>
+    `}}const Dt=()=>{customElements.get("dpk-component-state-diagram")||customElements.define("dpk-component-state-diagram",Tt)},Lt=(a,e)=>e?{request:"Process / guarantee",response:"Response / guarantee",async:"Async / guarantee"}[a]:{request:"\u51E6\u7406 / \u4FDD\u8A3C",response:"\u5FDC\u7B54 / \u4FDD\u8A3C",async:"\u975E\u540C\u671F\u51E6\u7406 / \u4FDD\u8A3C"}[a],pe=H({en:{heading:"Sequence",empty:"No matching messages.",participants:"Participants",stats:(a,e)=>`${a} / ${e} messages`,detailLabel:a=>Lt(a,!0),selectMessage:a=>`Select ${a}`,frameHeaderLabel:(a,e,t)=>`${a} \xB7 ${t?`Expand ${e}`:`Collapse ${e}`}`,frameCount:a=>`${a} message${a===1?"":"s"}`},ja:{heading:"\u30B7\u30FC\u30B1\u30F3\u30B9\u56F3",empty:"\u8A72\u5F53\u3059\u308B\u30E1\u30C3\u30BB\u30FC\u30B8\u306F\u3042\u308A\u307E\u305B\u3093\u3002",participants:"\u53C2\u52A0\u8005",stats:(a,e)=>`${a} / ${e} \u30E1\u30C3\u30BB\u30FC\u30B8`,detailLabel:a=>Lt(a,!1),selectMessage:a=>`${a}\u3092\u9078\u629E`,frameHeaderLabel:(a,e,t)=>`${a} \xB7 ${e}\u3092${t?"\u5C55\u958B":"\u6298\u308A\u305F\u305F\u3080"}`,frameCount:a=>`${a} \u30E1\u30C3\u30BB\u30FC\u30B8`}}),Ha=T({kind:ee("message"),id:$(g(),S(1)),from:$(g(),S(1)),to:$(g(),S(1)),title:$(g(),S(1)),style:k(_(["request","response","async"]),"request"),tags:k(D(g()),[]),guard:k(g()),detail:k(g()),questions:k(g())}),Ga=T({label:$(g(),S(1)),items:D(it())}),Ka=T({kind:ee("fragment"),id:$(g(),S(1)),operator:_(["alt","opt","loop","par"]),title:$(g(),S(1)),collapsed:k(re(),!1),branches:$(D(Ga),S(1))}),Wa=nt("kind",[Ha,Ka]),Va=T({id:$(g(),S(1)),name:$(g(),S(1)),role:k(g()),symbol:k(g()),kind:k(_(["internal","external"]),"internal"),description:k(g()),questions:k(g())}),Ya=T({participants:$(D(Va),S(1)),items:k(D(it()),[])}),zt=240,Ne=(a,e,t)=>{if(a.has(e))throw new Error(`duplicate ${t} id: ${e}`);a.add(e)},At=(a,e,t)=>a.map(s=>{const n=K(Wa,s);if(n.kind==="message"){if(Ne(t,n.id,"message"),!e.has(n.from))throw new Error(`unknown sender: ${n.from}`);if(!e.has(n.to))throw new Error(`unknown receiver: ${n.to}`);return{kind:"message",id:n.id,from:n.from,to:n.to,title:n.title,style:n.style,tags:n.tags,guard:n.guard??null,detail:n.detail??null,questions:n.questions??null}}return Ne(t,n.id,"fragment"),{kind:"fragment",id:n.id,operator:n.operator,title:n.title,collapsed:n.collapsed,branches:n.branches.map(r=>({label:r.label,items:At(r.items,e,t)}))}}),Rt=a=>{const e=K(Ya,a),t=new Set;for(const s of e.participants)Ne(t,s.id,"participant");return{participants:e.participants.map(s=>({id:s.id,name:s.name,role:s.role??null,symbol:s.symbol??null,external:s.kind==="external",description:s.description??null,questions:s.questions??null})),items:At(e.items,t,new Set)}},Ja=()=>({participants:[],items:[]}),Ot=(a,e)=>{for(const t of a)if(t.kind==="message")e.push(t);else for(const s of t.branches)Ot(s.items,e)},J=a=>{const e=[];return Ot(a,e),e},Xa=a=>new Map(J(a.items).map((e,t)=>[e.id,String(t+1).padStart(2,"0")])),Za=a=>J(a).length,It=(a,e)=>{const t=[];for(const s of a){if(s.kind==="message"){e(s)&&t.push(s);continue}const n=s.branches.map(i=>({label:i.label,items:It(i.items,e)})).filter(i=>i.items.length>0);n.length>0&&t.push({...s,branches:n})}return t},Qa=64,en=86,tn=31,sn=32,an=40,nn=(a,e)=>{const t=It(a.items,e),s=new Set;for(const v of J(t))s.add(v.from),s.add(v.to);const n=a.participants.filter(v=>s.has(v.id)),i=new Map(n.map((v,x)=>[v.id,120+x*zt])),r=Math.max(360,n.length*zt),o=[],d=[],l=[],c=[],h=[];let p=25;const m=(v,x)=>{for(const w of v){if(w.kind==="message"){o.push({message:w,y:p+29,depth:x}),p+=w.from===w.to?en:Qa;continue}const y=22+x*13,E=p,O=r-44-x*26;p+=tn,w.collapsed?(h.push({fragment:w,x:y,y:p+6,width:O}),p+=an):w.branches.forEach((I,N)=>{N>0&&(c.push({x:y,y:p,width:O}),p+=8),l.push({label:I.label,x:y+12,y:p,width:O-24}),p+=sn,m(I.items,x+1),p+=8}),d.push({fragment:w,x:y,y:E,width:O,height:p-E,count:Za([w])}),p+=14}};return m(t,0),{width:r,height:p+24,participants:n,rows:o,frames:d,branches:l,dividers:c,folds:h,x:i}},rn=G`
+  .sequence .diagram-canvas {
+    background-image: none;
+  }
+
+  .sequence-rail {
+    position: relative;
+    height: 62px;
+    flex-shrink: 0;
+    overflow: hidden;
+    border-bottom: 1px solid var(--dpk-rule);
+    background: linear-gradient(180deg, var(--dpk-paper-raised), var(--dpk-paper));
+  }
+
+  .sequence-rail-world {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 62px;
+    transform-origin: 0 0;
+  }
+
+  .sequence-participant {
+    position: absolute;
+    top: 9px;
+    width: 190px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 6px 10px;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-raised);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+    text-align: left;
+    cursor: pointer;
+    transition:
+      border-color 160ms var(--dpk-ease),
+      box-shadow 160ms var(--dpk-ease),
+      transform 160ms var(--dpk-ease);
+  }
+
+  .sequence-participant.is-external {
+    border-style: dashed;
+  }
+
+  .sequence-participant:hover {
+    border-color: var(--dpk-blue);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+    transform: translateY(-1px);
+  }
+
+  .sequence-participant[aria-pressed='true'] {
+    border-color: var(--dpk-blue);
+    box-shadow:
+      var(--dpk-bevel),
+      var(--dpk-shadow-sm),
+      0 0 0 3px var(--dpk-blue-soft);
+  }
+
+  .sequence-participant.is-related {
+    border-color: color-mix(in srgb, var(--dpk-green) 60%, transparent);
+  }
+
+  .sequence-symbol {
+    flex-shrink: 0;
+    display: grid;
+    place-items: center;
+    width: 26px;
+    height: 26px;
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-paper-inset);
+    color: var(--dpk-ink-faint);
+    font-family: var(--dpk-mono);
+    font-size: 9.5px;
+  }
+
+  .sequence-participant.is-external .sequence-symbol {
+    background: var(--dpk-amber-soft);
+    color: var(--dpk-amber);
+  }
+
+  /* The lane is a fixed width: a long name or role elides inside it (the button's title has it whole). */
+  .sequence-names {
+    min-width: 0;
+  }
+
+  .sequence-name {
+    display: block;
+    font-size: 11.5px;
+    font-weight: 640;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .sequence-role {
+    display: block;
+    margin-top: 2px;
+    font-size: 9px;
+    color: var(--dpk-ink-faint);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .sequence-lifeline {
+    stroke: var(--dpk-rule-strong);
+    stroke-width: 1;
+    stroke-dasharray: 4 6;
+  }
+
+  .sequence-divider {
+    stroke: var(--dpk-rule-strong);
+    stroke-dasharray: 4 4;
+  }
+
+  .sequence-message {
+    fill: none;
+    stroke: var(--dpk-ink-faint);
+    stroke-width: 1.5;
+    stroke-linejoin: round;
+  }
+
+  .sequence-message.is-response {
+    stroke-dasharray: 5 4;
+  }
+
+  .sequence-message.is-async {
+    stroke: var(--dpk-blue);
+  }
+
+  .sequence-message-row.is-related .sequence-message {
+    stroke: var(--dpk-green);
+    stroke-width: 2;
+  }
+
+  .sequence-message-row.is-selected .sequence-message {
+    stroke: var(--dpk-ink);
+    stroke-width: 2.4;
+  }
+
+  .sequence-message-row.is-dimmed,
+  .sequence-label.is-dimmed {
+    opacity: 0.24;
+  }
+
+  .sequence-frame {
+    position: absolute;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-xs);
+    background: color-mix(in srgb, var(--dpk-blue-soft) 50%, transparent);
+    box-shadow: 0 1px 2px var(--dpk-shade-1);
+    pointer-events: none;
+  }
+
+  .sequence-frame-chevron {
+    display: inline-flex;
+  }
+
+  .sequence-frame-chevron svg {
+    width: 11px;
+    height: 11px;
+  }
+
+  .sequence-frame-header {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    gap: 9px;
+    padding: 5px 9px;
+    border: 1px solid var(--dpk-rule-strong);
+    border-bottom: 0;
+    border-radius: var(--dpk-radius-xs) var(--dpk-radius-xs) 0 0;
+    background: var(--dpk-paper-sunken);
+    color: var(--dpk-ink-soft);
+    font-size: 10px;
+    text-align: left;
+    cursor: pointer;
+    transition:
+      background 160ms var(--dpk-ease),
+      color 160ms var(--dpk-ease);
+  }
+
+  .sequence-frame-header:hover {
+    background: var(--dpk-paper-inset);
+    color: var(--dpk-ink);
+  }
+
+  .sequence-operator {
+    flex: none;
+    min-width: 26px;
+    font-family: var(--dpk-mono);
+    font-weight: 700;
+    color: var(--dpk-blue);
+  }
+
+  .sequence-frame-count {
+    flex: none;
+    margin-left: auto;
+    font-family: var(--dpk-mono);
+    font-size: 9px;
+    color: var(--dpk-ink-faint);
+  }
+
+  /* A branch or fold label is bounded by its frame (an inline max-width) and elides past it. */
+  :is(.sequence-branch, .sequence-fold) {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .sequence-branch {
+    position: absolute;
+    font-size: 9.5px;
+    color: var(--dpk-ink-faint);
+  }
+
+  .sequence-fold {
+    position: absolute;
+    font-size: 10px;
+    color: var(--dpk-ink-faint);
+  }
+
+  .sequence-label {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    max-height: 27px;
+    padding: 3px 5px;
+    border: 1px solid transparent;
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink-soft);
+    font-size: 10px;
+    text-align: left;
+    cursor: pointer;
+    box-shadow: var(--dpk-shadow-xs);
+    transition:
+      border-color 160ms var(--dpk-ease),
+      background 160ms var(--dpk-ease),
+      color 160ms var(--dpk-ease),
+      box-shadow 160ms var(--dpk-ease);
+  }
+
+  .sequence-label:hover {
+    border-color: color-mix(in srgb, var(--dpk-blue) 40%, transparent);
+    color: var(--dpk-blue);
+    box-shadow: var(--dpk-shadow-sm);
+  }
+
+  .sequence-label.is-selected {
+    border-color: color-mix(in srgb, var(--dpk-blue) 55%, transparent);
+    background: var(--dpk-blue-soft);
+    color: var(--dpk-blue);
+    box-shadow:
+      var(--dpk-shadow-xs),
+      inset 0 0 0 1px color-mix(in srgb, var(--dpk-blue) 20%, transparent);
+  }
+
+  .sequence-number {
+    flex-shrink: 0;
+    display: grid;
+    place-items: center;
+    width: 19px;
+    height: 17px;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: 3px;
+    font-family: var(--dpk-mono);
+    font-size: 8px;
+    font-variant-numeric: tabular-nums;
+    color: var(--dpk-ink-faint);
+  }
+
+  .sequence-text {
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  #seq-request .diagram-arrow,
+  #seq-response .diagram-arrow {
+    fill: var(--dpk-ink-faint);
+    stroke: var(--dpk-ink-faint);
+  }
+
+  #seq-async .diagram-arrow {
+    stroke: var(--dpk-blue);
+  }
+
+  #seq-related .diagram-arrow {
+    fill: var(--dpk-green);
+    stroke: var(--dpk-green);
+  }
+
+  #seq-selected .diagram-arrow {
+    fill: var(--dpk-ink);
+    stroke: var(--dpk-ink);
+  }
+`,on=[{id:"seq-request"},{id:"seq-response"},{id:"seq-async"},{id:"seq-related"},{id:"seq-selected"}];class Ft extends Fe{static{this.styles=[Y,rn]}#t=null;#n=new Map;#e=new Map;#s=new Set;#i=new Set;#a="";#r=0;commentItems(){const e=this.items();return[...e.participants.map(t=>({value:this.commentRef("participant",t.id),label:t.name})),...J(e.items).map(t=>({value:this.commentRef("message",t.id),label:t.title}))]}parseData(e){return this.#e.clear(),Rt(e)}emptyData(){return Ja()}defaultHeading(){return pe(this.locale).heading}shellClass(){return"sequence"}emptyMessage(){return pe(this.locale).empty}fitViewport(){this.viewport?.fitWidth()}onViewChange(e){const t=this.renderRoot.querySelector(".sequence-rail-world");t&&(t.style.transform=`translateX(${e.x}px) scale(${e.scale})`)}hasSelection(e){const t=this.items();return e.kind==="participant"?t.participants.some(s=>s.id===e.id):J(t.items).some(s=>s.id===e.id)}tagItems(){return J(this.items().items).map(e=>e.tags)}statsText(){const e=this.#t,t=J(this.items().items).length;return e===null?"":pe(this.locale).stats(e.rows.length,t)}contentSize(){const e=this.#t;return e===null||e.rows.length===0?null:{width:e.width,height:e.height}}isEmpty(){return this.contentSize()===null}layoutVersion(){return this.#r}refreshContent(){const e=this.#c(),t=this.tagFilter,s=[t.match,[...t.active].join(","),[...this.#e].map(([r,o])=>`${r}:${o}`).join(","),J(e.items).map(r=>r.id).join(",")].join("|");s!==this.#a&&(this.#a=s,this.#r+=1,this.#n=Xa(this.items()),this.#t=nn(e,r=>se(r.tags,t))),this.#s=new Set,this.#i=new Set;const n=this.selection,i=this.#t;if(n!==null&&i!==null)if(n.kind==="message"){const r=i.rows.find(o=>o.message.id===n.id);this.#s.add(n.id),r&&(this.#i.add(r.message.from),this.#i.add(r.message.to))}else for(const r of i.rows)r.message.from!==n.id&&r.message.to!==n.id||this.#s.add(r.message.id)}#o(e,t){const s=e.detail===null?null:`${t.detailLabel(e.style)}: ${e.detail}`;return[e.guard,s].filter(n=>n!==null).join(`
+`)||e.title}#c(){const e=this.items(),t=s=>s.map(n=>n.kind==="message"?n:{...n,collapsed:this.#e.get(n.id)??n.collapsed,branches:n.branches.map(i=>({label:i.label,items:t(i.items)}))});return{participants:e.participants,items:t(e.items)}}#p(e){return this.#t?.frames.find(t=>t.fragment.id===e.id)?.fragment.collapsed??e.collapsed}#l(e){this.#e.set(e.id,!this.#p(e)),this.requestUpdate()}#u(e){const t=this.selection?.kind==="message"&&this.selection.id===e,s=!t&&this.#s.has(e);return{selected:t,related:s,dimmed:this.selection!==null&&!t&&!s,depth:null}}#h(e){const t=this.selection?.kind==="participant"&&this.selection.id===e,s=!t&&this.#i.has(e);return{selected:t,related:s,dimmed:this.selection!==null&&!t&&!s,depth:null}}renderAboveCanvas(){const e=this.#t;if(e===null)return b;const t=pe(this.locale);return u`
+      <div class="sequence-rail" role="group" aria-label=${t.participants}>
+        <div class="sequence-rail-world">
+          ${e.participants.map(s=>this.#b(s,e))}
+        </div>
+      </div>
+    `}#b(e,t){const s=t.x.get(e.id)??0,n=this.#h(e.id);return u`
+      <button
+        type="button"
+        class=${this.elementClass(n,"sequence-participant",e.external&&"is-external")}
+        data-participant=${e.id}
+        data-grill-questions=${this.questionsOf(e)}
+        style="left:${s-95}px"
+        aria-pressed=${n.selected?"true":"false"}
+        title=${e.description??e.name}
+        @click=${()=>this.select({kind:"participant",id:e.id})}
+      >
+        <span class="sequence-symbol" aria-hidden="true">${e.symbol??e.name.slice(0,2)}</span>
+        <span class="sequence-names">
+          <span class="sequence-name">${e.name}</span>
+          ${e.role===null?b:u`<span class="sequence-role">${e.role}</span>`}
+        </span>
+      </button>
+      ${this.renderCommentTrigger({kind:"participant",id:e.id},e.name,{x:s+95-34,y:17})}
+    `}renderCanvas(){const e=this.#t;if(e===null)return u``;const t=pe(this.locale);return u`
+      ${this.#d(e,t)}
+      ${e.frames.map(s=>u`<div
+          class="sequence-frame"
+          style="left:${s.x}px; top:${s.y}px; width:${s.width}px; height:${s.height}px"
+        ></div>`)}
+      ${e.frames.map(s=>this.#m(s.fragment,s.x,s.y,s.width,s.count,t))}
+      ${e.branches.map(s=>u`<span
+          class="sequence-branch"
+          style="left:${s.x}px; top:${s.y}px; max-width:${s.width}px"
+          title=${s.label}
+          >[${s.label}]</span
+        >`)}
+      ${e.folds.map(s=>{const n=s.fragment.branches.map(i=>`[${i.label}]`).join(" / ");return u`<span
+          class="sequence-fold"
+          style="left:${s.x}px; top:${s.y}px; max-width:${s.width}px"
+          title=${n}
+          >${n}</span
+        >`})}
+      ${e.rows.map(s=>this.#g(s.y,s.message,e,t))}
+    `}#d(e,t){const s=e.participants.map(r=>R`<path
+          class="sequence-lifeline"
+          d=${`M${e.x.get(r.id)??0} 0 V${e.height}`}
+        ></path>`),n=e.dividers.map(r=>R`<path class="sequence-divider" d=${`M${r.x} ${r.y} h${r.width}`}></path>`),i=e.rows.map(r=>{const o=e.x.get(r.message.from)??0,d=e.x.get(r.message.to)??0,l=o===d?`M${o} ${r.y} h42 v25 H${o}`:`M${o} ${r.y} H${d}`,c=this.#u(r.message.id),h=c.selected?"seq-selected":c.related?"seq-related":r.message.style==="async"?"seq-async":r.message.style==="response"?"seq-response":"seq-request",p=()=>this.select({kind:"message",id:r.message.id});return R`
+        <g
+          class=${this.elementClass(c,"sequence-message-row","d-edge",`is-${r.message.style}`)}
+          data-message=${r.message.id}
+        >
+          <title>${this.#o(r.message,t)}</title>
+          <path class="d-edge-hit" d=${l} role="button" tabindex="0"
+            aria-label=${t.selectMessage(r.message.title)}
+            @click=${p}
+            @keydown=${m=>{m.key!=="Enter"&&m.key!==" "||(m.preventDefault(),p())}}></path>
+          <path class="sequence-message is-${r.message.style}" d=${l} marker-end=${`url(#${h})`}></path>
+        </g>
+      `});return u`<svg class="diagram-edges" width=${e.width} height=${e.height}>
+      ${St(on)} ${s} ${n} ${i}
+    </svg>`}#m(e,t,s,n,i,r){const o=this.#p(e);return u`
+      <button
+        type="button"
+        class="sequence-frame-header"
+        data-fragment=${e.id}
+        style="left:${t}px; top:${s}px; width:${n}px"
+        aria-expanded=${o?"false":"true"}
+        aria-label=${r.frameHeaderLabel(e.operator,e.title,o)}
+        @click=${()=>this.#l(e)}
+      >
+        <span class="sequence-frame-chevron">${o?rt():Xs()}</span>
+        <span class="sequence-operator">${e.operator}</span>
+        <span class="sequence-text">${e.title}</span>
+        <span class="sequence-frame-count">${r.frameCount(i)}</span>
+      </button>
+    `}#g(e,t,s,n){const i=s.x.get(t.from)??0,r=s.x.get(t.to)??0,o=i===r,d=this.#u(t.id),l=o?i+12:Math.min(i,r)+14,c=o?175:Math.abs(r-i)-28;return u`
+      <button
+        type="button"
+        class=${this.elementClass(d,"sequence-label")}
+        data-message-label=${t.id}
+        data-grill-questions=${this.questionsOf(t)}
+        style="left:${l}px; top:${e-28}px; width:${c}px"
+        title=${this.#o(t,n)}
+        @click=${()=>this.select({kind:"message",id:t.id})}
+      >
+        <span class="sequence-number">${this.#n.get(t.id)??""}</span>
+        <span class="sequence-text">${t.title}</span>
+      </button>
+      ${this.renderCommentTrigger({kind:"message",id:t.id},`${this.#n.get(t.id)??""} ${t.title}`.trim(),{x:l+c-30,y:e-31})}
+    `}}const Nt=()=>{customElements.get("dpk-component-sequence-diagram")||customElements.define("dpk-component-sequence-diagram",Ft)},ae=H({en:{heading:"Dependencies",node:"Module",edge:"Dependency",emptyCycles:"No matching cycles.",emptyModules:"No matching modules.",directionGroup:"Direction to follow from the selected module",directionOutgoing:"Depends on",directionIncoming:"Depended on by",directionBoth:"Both",transitive:"Include indirect",cyclesToggleLabel:a=>`Show only ${a} cycle group(s)`,cyclesCount:a=>`Cycles ${a}`,legendOutgoing:"Depends on",legendIncoming:"Depended on by",legendCycle:"Cycle",edgeLabel:(a,e)=>`${a} depends on ${e}`,cyclicSuffix:a=>`${a}, part of a cycle`,cycleBadge:"Cycle"},ja:{heading:"\u4F9D\u5B58\u95A2\u4FC2\u30B0\u30E9\u30D5",node:"\u30E2\u30B8\u30E5\u30FC\u30EB",edge:"\u4F9D\u5B58",emptyCycles:"\u8A72\u5F53\u3059\u308B\u5FAA\u74B0\u4F9D\u5B58\u306F\u3042\u308A\u307E\u305B\u3093\u3002",emptyModules:"\u8A72\u5F53\u3059\u308B\u30E2\u30B8\u30E5\u30FC\u30EB\u306F\u3042\u308A\u307E\u305B\u3093\u3002",directionGroup:"\u9078\u629E\u3057\u305F\u30E2\u30B8\u30E5\u30FC\u30EB\u304B\u3089\u8FFD\u3046\u65B9\u5411",directionOutgoing:"\u4F9D\u5B58\u5148",directionIncoming:"\u4F9D\u5B58\u5143",directionBoth:"\u4E21\u65B9",transitive:"\u9593\u63A5\u3082\u542B\u3080",cyclesToggleLabel:a=>`\u5FAA\u74B0\u4F9D\u5B58 ${a} \u30B0\u30EB\u30FC\u30D7\u3060\u3051\u8868\u793A`,cyclesCount:a=>`\u5FAA\u74B0 ${a}`,legendOutgoing:"\u4F9D\u5B58\u5148",legendIncoming:"\u4F9D\u5B58\u5143",legendCycle:"\u5FAA\u74B0",edgeLabel:(a,e)=>`${a} \u304C ${e} \u306B\u4F9D\u5B58`,cyclicSuffix:a=>`${a}\u30FB\u5FAA\u74B0\u4F9D\u5B58\u3042\u308A`,cycleBadge:"\u5FAA\u74B0"}}),Pt={width:176,height:84},dn=T({id:$(g(),S(1)),name:$(g(),S(1)),path:k(g()),layer:k(g()),tags:k(D(g()),[]),description:k(g()),questions:k(g())}),ln=T({id:$(g(),S(1)),from:$(g(),S(1)),to:$(g(),S(1)),contract:k(g()),description:k(g()),questions:k(g())}),cn=T({modules:D(dn),dependencies:k(D(ln),[])}),pn=()=>({nodes:[],edges:[]}),un=a=>{const e=K(cn,a),t=new Set;for(const r of e.modules){if(t.has(r.id))throw new Error(`duplicate module id: ${r.id}`);t.add(r.id)}const s=new Set,n=e.dependencies.map(r=>{if(s.has(r.id))throw new Error(`duplicate dependency id: ${r.id}`);if(s.add(r.id),!t.has(r.from))throw new Error(`unknown dependency source: ${r.from}`);if(!t.has(r.to))throw new Error(`unknown dependency target: ${r.to}`);return{id:r.id,from:r.from,to:r.to,tags:[],contract:r.contract??null,description:r.description??null}});return{nodes:e.modules.map(r=>({id:r.id,name:r.name,path:r.path??null,layer:r.layer??null,description:r.description??null,tags:r.tags,width:Pt.width,height:Pt.height,...r.questions===void 0?{}:{questions:r.questions}})),edges:n}},hn=G`
+  .dep-direction {
+    display: flex;
+    gap: 2px;
+    padding: 3px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-sunken);
+    box-shadow: inset 0 1px 2px var(--dpk-shade-1);
+  }
+
+  .dep-direction button {
+    border: 0;
+    border-radius: var(--dpk-radius-xs);
+    padding: 4px 8px;
+    background: transparent;
+    color: var(--dpk-ink-faint);
+    font-size: 9.5px;
+    font-weight: 600;
+    cursor: pointer;
+    transition:
+      background 160ms var(--dpk-ease),
+      color 160ms var(--dpk-ease),
+      box-shadow 160ms var(--dpk-ease);
+  }
+
+  .dep-direction button[aria-pressed='true'] {
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink);
+    font-weight: 650;
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+  }
+
+  .dep-toggle {
+    min-height: 26px;
+    padding: 0 8px;
+    font-size: 10.5px;
+  }
+
+  .dep-toggle[aria-pressed='true'] {
+    border-color: color-mix(in srgb, var(--dpk-blue) 40%, transparent);
+    background: var(--dpk-blue-soft);
+    color: var(--dpk-blue);
+  }
+
+  .dep-module {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding: 11px 12px;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-raised);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+    text-align: left;
+    overflow: hidden;
+    transition:
+      border-color 160ms var(--dpk-ease),
+      box-shadow 160ms var(--dpk-ease),
+      transform 160ms var(--dpk-ease);
+  }
+
+  .dep-module:hover {
+    border-color: var(--dpk-blue);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+    transform: translateY(-1px);
+  }
+
+  .dep-module.is-cyclic:not(.is-selected) {
+    border-color: color-mix(in srgb, var(--dpk-amber) 55%, transparent);
+  }
+
+  .dep-module.is-selected {
+    border-color: var(--dpk-blue);
+    background: var(--dpk-blue-soft);
+    box-shadow:
+      var(--dpk-bevel),
+      var(--dpk-shadow-sm),
+      0 0 0 3px var(--dpk-blue-soft);
+  }
+
+  .dep-module.is-related {
+    border-color: color-mix(in srgb, var(--dpk-green) 55%, transparent);
+    background: var(--dpk-green-soft);
+  }
+
+  .dep-module.is-dependency {
+    border-color: color-mix(in srgb, #6e9b61 60%, transparent);
+    background: color-mix(in srgb, #6e9b61 8%, transparent);
+  }
+
+  .dep-module.is-dependent {
+    border-color: color-mix(in srgb, #729aaa 60%, transparent);
+    background: color-mix(in srgb, #729aaa 8%, transparent);
+  }
+
+  .dep-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 6px;
+    min-height: 14px;
+  }
+
+  .dep-layer {
+    font-size: 9px;
+    color: var(--dpk-ink-faint);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .dep-cycle-badge {
+    flex-shrink: 0;
+    padding: 1px 4px;
+    border-radius: 3px;
+    background: var(--dpk-amber-soft);
+    color: var(--dpk-amber);
+    font-size: 8.5px;
+  }
+
+  .dep-name {
+    font-size: 13px;
+    font-weight: 640;
+    letter-spacing: -0.01em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .dep-path {
+    font-family: var(--dpk-mono);
+    font-size: 9px;
+    color: var(--dpk-ink-faint);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .dep-edge .d-edge-path {
+    stroke: var(--dpk-rule-strong);
+    stroke-width: 1.4;
+  }
+
+  .dep-edge.is-related .d-edge-path {
+    stroke: var(--dpk-green);
+    stroke-width: 2;
+  }
+
+  .dep-edge.is-selected .d-edge-path {
+    stroke: var(--dpk-blue);
+    stroke-width: 2.6;
+  }
+
+  .dep-edge:focus-visible .d-edge-path {
+    stroke: var(--dpk-blue);
+  }
+
+  .diagram-legend .dep-swatch-outgoing {
+    border-color: #6e9b61;
+  }
+
+  .diagram-legend .dep-swatch-incoming {
+    border-color: #729aaa;
+  }
+
+  .diagram-legend .dep-swatch-cycle {
+    border-color: var(--dpk-amber);
+  }
+
+  #dep-neutral .diagram-arrow {
+    fill: var(--dpk-rule-strong);
+    stroke: var(--dpk-rule-strong);
+  }
+
+  #dep-outgoing .diagram-arrow {
+    fill: #6e9b61;
+    stroke: #6e9b61;
+  }
+
+  #dep-incoming .diagram-arrow {
+    fill: #729aaa;
+    stroke: #729aaa;
+  }
+
+  #dep-cycle .diagram-arrow {
+    fill: var(--dpk-amber);
+    stroke: var(--dpk-amber);
+  }
+
+  #dep-selected .diagram-arrow {
+    fill: var(--dpk-blue);
+    stroke: var(--dpk-blue);
+  }
+`,mn=[{id:"dep-neutral"},{id:"dep-outgoing"},{id:"dep-incoming"},{id:"dep-cycle"},{id:"dep-selected"}];class jt extends ce{static{this.styles=[Y,hn]}#t="both";#n=!1;#e=!1;#s=[];#i=W;#a=W;parseData(e){return un(e)}emptyData(){return pn()}defaultHeading(){return ae(this.locale).heading}statsLabels(){const e=ae(this.locale);return{node:e.node,edge:e.edge}}emptyMessage(){const e=ae(this.locale);return this.#e?e.emptyCycles:e.emptyModules}layoutOptions(){return{nodeSpacing:40,layerSpacing:96,padding:32}}relations(e,t){return e===null||e.kind!=="node"?W:{nodes:new Map([...this.#i.nodes,...this.#a.nodes]),edges:new Set([...this.#i.edges,...this.#a.edges])}}refreshContent(){const e=this.items(),t=this.tagFilter,s=e.nodes.filter(o=>se(o.tags,t)),n=new Set(s.map(o=>o.id)),i=e.edges.filter(o=>n.has(o.from)&&n.has(o.to));this.#s=Ma(s.map(o=>o.id),i);const r=this.selection;this.#i=r!==null&&r.kind==="node"&&this.#t!=="incoming"?j(i,r.id,"outgoing",this.#n):W,this.#a=r!==null&&r.kind==="node"&&this.#t!=="outgoing"?j(i,r.id,"incoming",this.#n):W,super.refreshContent()}matchesFilter(e){return this.#e?ze(this.#s).has(e.id):!0}filtered(){const e=super.filtered();if(!this.#e)return e;const t=ze(this.#s),s=e.edges.filter(i=>wt(i,t)),n=new Set(s.flatMap(i=>[i.from,i.to]));return{nodes:e.nodes.filter(i=>n.has(i.id)),edges:s}}renderToolbarActions(){const e=ae(this.locale),t=this.#s.length;return u`
+      <div class="dep-direction" role="group" aria-label=${e.directionGroup}>
+        ${[["outgoing",e.directionOutgoing],["incoming",e.directionIncoming],["both",e.directionBoth]].map(([s,n])=>u`
+            <button
+              type="button"
+              data-direction=${s}
+              aria-pressed=${this.#t===s?"true":"false"}
+              @click=${()=>this.#r(s)}
+            >
+              ${n}
+            </button>
+          `)}
+      </div>
+      <button
+        type="button"
+        class="dpk-btn dpk-btn--ghost dep-toggle"
+        data-toggle="transitive"
+        aria-pressed=${this.#n?"true":"false"}
+        @click=${()=>{this.#n=!this.#n,this.requestUpdate()}}
+      >
+        ${e.transitive}
+      </button>
+      <button
+        type="button"
+        class="dpk-btn dpk-btn--ghost dep-toggle"
+        data-toggle="cycles"
+        aria-pressed=${this.#e?"true":"false"}
+        aria-label=${e.cyclesToggleLabel(t)}
+        ?disabled=${!this.#e&&t===0}
+        @click=${()=>{this.#e=!this.#e,this.requestUpdate()}}
+      >
+        ${e.cyclesCount(t)}
+      </button>
+    `}renderLegend(){const e=ae(this.locale);return u`<div class="diagram-legend">
+      <span><i class="dep-swatch-outgoing"></i>${e.legendOutgoing}</span>
+      <span><i class="dep-swatch-incoming"></i>${e.legendIncoming}</span>
+      <span><i class="dep-swatch-cycle"></i>${e.legendCycle}</span>
+    </div>`}#r(e){this.#t=e,this.requestUpdate()}#o(e,t){const s=this.selection;return s!==null&&s.kind==="edge"&&s.id===e.id?"dep-selected":wt(e,t)?"dep-cycle":this.#i.edges.has(e.id)?"dep-outgoing":this.#a.edges.has(e.id)?"dep-incoming":"dep-neutral"}renderCanvas(){const e=ae(this.locale),t=this.visible,s=ze(this.#s),n=o=>t.nodes.find(d=>d.id===o)?.name??o,i=t.edges.map(o=>{const d=this.edgeState(o.id),l=this.routeOf(o.id),c=we(l),h=()=>this.select({kind:"edge",id:o.id});return R`
+        <g class=${this.elementClass(d,"d-edge","dep-edge")} data-dependency=${o.id}>
+          <title>${[o.contract,o.description].filter(p=>p!==null).join(`
+`)||o.id}</title>
+          <path class="d-edge-path" d=${c} marker-end=${`url(#${this.#o(o,s)})`}></path>
+          <path
+            class="d-edge-hit"
+            d=${c}
+            role="button"
+            tabindex="0"
+            aria-label=${e.edgeLabel(n(o.from),n(o.to))}
+            @click=${h}
+            @keydown=${p=>{p.key!=="Enter"&&p.key!==" "||(p.preventDefault(),h())}}
+          ></path>
+          ${this.renderEdgeCommentTrigger({kind:"edge",id:o.id},`${n(o.from)} \u2192 ${n(o.to)}`,l)}
+        </g>
+      `}),r=t.nodes.map(o=>{const d=this.placedNode(o.id);if(!d)return b;const l=this.nodeState(o.id),c=s.has(o.id),h=this.#i.nodes.has(o.id),p=this.#a.nodes.has(o.id);return u`
+        <button
+          type="button"
+          class=${this.elementClass(l,"d-node","dep-module",c&&"is-cyclic",h&&"is-dependency",p&&"is-dependent")}
+          data-module=${o.id}
+          data-grill-questions=${this.questionsOf(o)}
+          style="left:${d.x}px; top:${d.y}px; width:${o.width}px; height:${o.height}px"
+          aria-pressed=${l.selected?"true":"false"}
+          aria-label=${c?e.cyclicSuffix(o.name):o.name}
+          title=${[o.path??o.name,o.description].filter(m=>m!==null).join(`
+`)}
+          @click=${()=>this.select({kind:"node",id:o.id})}
+        >
+          <span class="dep-head">
+            <span class="dep-layer">${o.layer??""}</span>
+            ${c?u`<span class="dep-cycle-badge">${e.cycleBadge}</span>`:b}
+          </span>
+          <span class="dep-name">${o.name}</span>
+          <span class="dep-path">${o.path??""}</span>
+        </button>
+        ${this.renderCommentTrigger({kind:"node",id:o.id},o.name,{x:d.x+o.width-20,y:d.y-14})}
+      `});return u`${this.renderEdges(i,mn)}${r}`}}const Ut=()=>{customElements.get("dpk-component-dependency-graph")||customElements.define("dpk-component-dependency-graph",jt)},_t=(a,e)=>e?{same:"Unchanged",added:"Added",removed:"Removed",changed:"Changed"}[a]:{same:"\u5909\u66F4\u306A\u3057",added:"\u8FFD\u52A0",removed:"\u524A\u9664",changed:"\u5909\u66F4"}[a],X=H({en:{heading:"ERD",node:"Table",edge:"Relation",empty:"No matching tables.",search:"Search",legendAdded:"Added",legendRemoved:"Removed",legendChanged:"Changed",legendCardinality:"Crow\u2019s foot: | one \xB7 \u25CB zero \xB7 fork many \u2014 each end counts that table\u2019s rows per row across the line",statusLabel:a=>_t(a,!0),edgeLabel:(a,e,t)=>`${a} and ${e}, related ${t}`,was:a=>`was ${a}`,nullable:"nullable",notNull:"not null",notRecorded:"Could not record it. Place this inside a dpk-template-* element.",addFieldButton:"Add column",addFieldTitle:"Add column",addFieldName:"Column name",addFieldType:"Type",columnNameLabel:"Name",columnNamePlaceholder:"column_name",columnTypePlaceholder:"e.g. text",columnTypeChoices:"Types in this schema",columnTypeNew:"New type",columnNullable:"Allow NULL",columnNameTaken:"This table already has a column with this name.",cancel:"Cancel",columnAdd:"Add",columnSave:"Save",columnKeys:"Enter to confirm \xB7 Esc to cancel",addFieldSummary:(a,e,t)=>`${a}.${e} (${t})`,editFieldButton:a=>`Edit ${a}`,editFieldTitle:"Edit column",editFieldSummary:(a,e,t)=>`${a}.${e} \u2192 ${t}`,columnRole:a=>({primary:"Primary key",foreign:"Foreign key","not-null":"NOT NULL",nullable:"Nullable"})[a],changesLabel:"Changes",attributeLabel:a=>({type:"type",keys:"keys",ref:"ref",nullable:"null",cardinality:"card.",label:"label"})[a]},ja:{heading:"ER\u56F3",node:"\u30C6\u30FC\u30D6\u30EB",edge:"\u95A2\u9023",empty:"\u8A72\u5F53\u3059\u308B\u30C6\u30FC\u30D6\u30EB\u306F\u3042\u308A\u307E\u305B\u3093\u3002",search:"\u691C\u7D22",legendAdded:"\u8FFD\u52A0",legendRemoved:"\u524A\u9664",legendChanged:"\u5909\u66F4",legendCardinality:"\u30AB\u30E9\u30B9\u306E\u8DB3\u8A18\u6CD5: | 1 \xB7 \u25CB 0 \xB7 \u4E09\u53C9 \u591A \u2014 \u5404\u7AEF\u306E\u8A18\u53F7\u3068\u6570\u5B57\u306F\u3001\u76F8\u624B\u5074 1 \u884C\u306B\u5BFE\u3059\u308B\u305D\u306E\u7AEF\u306E\u30C6\u30FC\u30D6\u30EB\u306E\u884C\u6570",statusLabel:a=>_t(a,!1),edgeLabel:(a,e,t)=>`${a} \u3068 ${e} \u306E\u95A2\u9023 (${t})`,was:a=>`\u5909\u66F4\u524D ${a}`,nullable:"NULL \u53EF",notNull:"NOT NULL",notRecorded:"\u8A18\u9332\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\uFF08dpk-template-* \u8981\u7D20\u306E\u4E2D\u306B\u7F6E\u3044\u3066\u304F\u3060\u3055\u3044\uFF09\u3002",addFieldButton:"\u30AB\u30E9\u30E0\u3092\u8FFD\u52A0",addFieldTitle:"\u30AB\u30E9\u30E0\u3092\u8FFD\u52A0",addFieldName:"\u30AB\u30E9\u30E0\u540D",addFieldType:"\u578B",columnNameLabel:"\u540D\u524D",columnNamePlaceholder:"column_name",columnTypePlaceholder:"\u4F8B: text",columnTypeChoices:"\u3053\u306E\u30B9\u30AD\u30FC\u30DE\u306E\u578B",columnTypeNew:"\u65B0\u3057\u3044\u578B",columnNullable:"NULL \u3092\u8A31\u53EF",columnNameTaken:"\u540C\u3058\u540D\u524D\u306E\u30AB\u30E9\u30E0\u304C\u3059\u3067\u306B\u3042\u308A\u307E\u3059\u3002",cancel:"\u30AD\u30E3\u30F3\u30BB\u30EB",columnAdd:"\u8FFD\u52A0",columnSave:"\u4FDD\u5B58",columnKeys:"Enter \u3067\u78BA\u5B9A \xB7 Esc \u3067\u9589\u3058\u308B",addFieldSummary:(a,e,t)=>`${a}.${e} (${t})`,editFieldButton:a=>`${a} \u3092\u7DE8\u96C6`,editFieldTitle:"\u30AB\u30E9\u30E0\u3092\u7DE8\u96C6",editFieldSummary:(a,e,t)=>`${a}.${e} \u2192 ${t}`,columnRole:a=>({primary:"\u4E3B\u30AD\u30FC",foreign:"\u5916\u90E8\u30AD\u30FC","not-null":"NOT NULL",nullable:"NULL \u53EF"})[a],changesLabel:"\u5909\u66F4\u70B9",attributeLabel:a=>({type:"\u578B",keys:"\u30AD\u30FC",ref:"\u53C2\u7167",nullable:"NULL",cardinality:"\u591A\u91CD\u5EA6",label:"\u30E9\u30D9\u30EB"})[a]}}),Bt=280,Pe=40,gn=32,fn=52,Ht=["1","0..1"],Gt=["1","0..1","1..N","0..N"],bn=Ht.flatMap(a=>Gt.map(e=>`${a}:${e}`)),Kt=_(["PK","FK","UQ"]),kn=T({id:$(g(),S(1)),type:$(g(),S(1)),key:k(Zs([Kt,$(D(Kt),S(1))])),ref:k(g()),nullable:k(re(),!1),cardinality:k(_(bn)),label:k($(g(),S(1))),questions:k(g())}),xn=T({id:$(g(),S(1)),name:$(g(),S(1)),tags:k(D(g()),[]),fields:D(kn),questions:k(g())}),Wt=T({tables:D(xn)}),vn=T({before:k(Wt),after:Wt}),yn=()=>({nodes:[],edges:[]}),je=a=>a.key===void 0?[]:[...new Set(typeof a.key=="string"?[a.key]:a.key)],Vt=a=>({id:a.id,type:a.type,keys:je(a),ref:a.ref??null,nullable:a.nullable,cardinality:a.cardinality??null,label:a.label??null,questions:a.questions??null}),Ue=(a,e)=>a.type===e.type&&a.keys.join()===e.keys.join()&&a.ref===e.ref&&a.nullable===e.nullable&&a.cardinality===e.cardinality&&a.label===e.label,Se=a=>`${a.parent} : ${a.child}`,wn=(a,e)=>Se(a.cardinality)===Se(e.cardinality)&&a.label===e.label,$n=(a,e)=>{const t=je(e);return t.includes("UQ")?!0:t.includes("PK")&&a.fields.filter(s=>je(s).includes("PK")).length===1},Sn=new Map(Ht.map(a=>[a,a])),Mn=new Map(Gt.map(a=>[a,a])),Cn=(a,e)=>{const t=$n(a,e),s={parent:e.nullable?"0..1":"1",child:t?"0..1":"0..N"};if(e.cardinality===void 0)return s;const[n="",i=""]=e.cardinality.split(":"),r=Sn.get(n),o=Mn.get(i),d=`${a.id}.${e.id}`;if(r===void 0||o===void 0)throw new Error(`invalid cardinality on ${d}`);if(r!==s.parent)throw new Error(`cardinality "${e.cardinality}" on ${d} needs the parent end ${s.parent}: the FK is ${e.nullable?"":"not "}nullable`);if(t&&(o==="1..N"||o==="0..N"))throw new Error(`cardinality "${e.cardinality}" on ${d} allows many rows, but the column is unique`);return{parent:r,child:o}},_e=a=>a.status==="changed"?fn:gn,Yt=a=>Pe+a.reduce((e,t)=>e+_e(t),0),Jt=(a,e)=>{let t=Pe;for(const s of a){if(s.id===e)return t+_e(s)/2;t+=_e(s)}return Pe/2},En=14,qn=(a,e)=>(a-(e-1)/2)*En,Be=a=>{const e=new Map;for(const t of a){const s=`${t.from}.${t.sourceField}`;e.set(s,[...e.get(s)??[],t.id])}return new Map([...e.values()].flatMap(t=>t.map((s,n)=>[s,qn(n,t.length)])))},Xt=a=>a.flatMap(e=>e.fields.flatMap(t=>{if(t.ref===void 0){if(t.cardinality!==void 0||t.label!==void 0)throw new Error(`cardinality and label on ${e.id}.${t.id} describe a relation; add its ref`);return[]}const[s,n]=t.ref.split(".");if(s===void 0||n===void 0)throw new Error(`invalid ref "${t.ref}" on ${e.id}.${t.id}; expected table.field`);return[{id:`${s}:${n}>${e.id}:${t.id}`,from:s,to:e.id,sourceField:n,targetField:t.id,cardinality:Cn(e,t),label:t.label??null}]})),Tn=(a,e)=>[...new Set([...a,...e].map(s=>s.id))].flatMap(s=>{const n=a.find(l=>l.id===s),i=e.find(l=>l.id===s),r=i??n;if(!r)return[];const o=Vt(r);if(!n)return[{...o,status:"added",before:null}];if(!i)return[{...o,status:"removed",before:null}];const d=Vt(n);return[{...o,status:Ue(d,o)?"same":"changed",before:Ue(d,o)?null:d}]}),Zt=(a,e)=>{const t=Be(e),s={};for(const n of e)n.from===a.id&&(s[`${n.id}:out`]={x:Bt,y:Jt(a.fields,n.sourceField)+(t.get(n.id)??0)}),n.to===a.id&&(s[`${n.id}:in`]={x:0,y:Jt(a.fields,n.targetField)});return{...a,ports:s}},Dn=a=>{const e=K(vn,a),t=e.before?.tables??e.after.tables,s=e.after.tables,n=[...new Set([...t,...s].map(p=>p.id))],i=new Map;for(const p of[...t,...s])i.set(p.id,p.tags);const r=n.flatMap(p=>{const m=t.find(E=>E.id===p),v=s.find(E=>E.id===p),x=v??m;if(!x)return[];const w=Tn(m?.fields??[],v?.fields??[]),y=m?v?w.some(E=>E.status!=="same")?"changed":"same":"removed":"added";return[{id:p,name:x.name,status:y,fields:w,tags:i.get(p)??[],width:Bt,height:Yt(w),...x.questions===void 0?{}:{questions:x.questions}}]}),o=new Map(r.map(p=>[p.id,p])),d=Xt(t),l=Xt(s),h=[...new Set([...d,...l].map(p=>p.id))].flatMap(p=>{const m=d.find(I=>I.id===p),v=l.find(I=>I.id===p),x=v??m;if(!x)return[];const w=o.get(x.from),y=o.get(x.to);if(!w||!y)return[];const E=m&&v&&!wn(m,v)?m:null,O=m?v?E?"changed":"same":"removed":"added";return[{id:p,from:x.from,to:x.to,sourceField:x.sourceField,targetField:x.targetField,cardinality:x.cardinality,label:x.label,before:E&&{cardinality:E.cardinality,label:E.label},status:O,tags:[],fromPort:`${p}:out`,toPort:`${p}:in`}]});return{nodes:r.map(p=>Zt(p,h)),edges:h}},Qt="ADD_FIELD",es="EDIT_FIELD",Ln=de({id:$(g(),te(),S(1)),type:$(g(),te(),S(1)),nullable:k(re(),!1)}),zn=de({field:$(g(),S(1)),type:$(g(),te(),S(1)),nullable:re()}),ts=a=>{const e=Ae(a);return e?.length===3&&e[1]==="node"?e[2]??null:null},ss=(a,e,t)=>{const s=a.nodes.map(n=>{if(n.id!==e)return n;const i=n.status==="added"||n.status==="removed"?n.status:t.some(r=>r.status!=="same")?"changed":"same";return Zt({...n,status:i,fields:t,height:Yt(t)},a.edges)});return{...a,nodes:s}},An=(a,e,t)=>{const s=a.addFieldTitle,n=e.nodes.find(o=>o.id===ts(t.target.id));if(n===void 0)return{data:e,result:{id:t.id,title:s,stale:"target-missing"}};const i=oe(Ln,t.payload);if(!i.success||n.fields.some(o=>o.id===i.output.id))return{data:e,result:{id:t.id,title:s,stale:"constraint-violated"}};const r={id:i.output.id,type:i.output.type,keys:[],ref:null,nullable:i.output.nullable,cardinality:null,label:null,questions:null,status:"added",before:null};return{data:ss(e,n.id,[...n.fields,r]),result:{id:t.id,title:s,summary:a.addFieldSummary(n.id,r.id,r.type),tone:"create"}}},Rn=(a,e,t)=>{const s=a.editFieldTitle,n=e.nodes.find(v=>v.id===ts(t.target.id)),i=oe(zn,t.payload),r=i.success?n?.fields.find(v=>v.id===i.output.field):void 0;if(n===void 0||i.success&&r===void 0)return{data:e,result:{id:t.id,title:s,stale:"target-missing"}};if(!i.success||r===void 0||r.ref!==null||r.status==="removed")return{data:e,result:{id:t.id,title:s,stale:"constraint-violated"}};const{before:o,status:d,...l}=r,c={...l,type:i.output.type,nullable:i.output.nullable},h=r.before??l,p=r.status==="added"?"added":Ue(h,c)?"same":"changed",m={...c,status:p,before:p==="changed"?h:null};return{data:ss(e,n.id,n.fields.map(v=>v.id===r.id?m:v)),result:{id:t.id,title:s,summary:a.editFieldSummary(n.id,r.id,c.type),tone:"update"}}},On=(a,e,t)=>{let s=e;const n=[];for(const i of t){const r=i.type===Qt?An(a,s,i):i.type===es?Rn(a,s,i):{data:s,result:{id:i.id,title:i.type,stale:"unsupported-action-type"}};s=r.data,n.push(r.result)}return{data:s,results:n}},In=a=>{switch(a){case"1":return{min:"one",max:"one"};case"0..1":return{min:"zero",max:"one"};case"1..N":return{min:"one",max:"many"};case"0..N":return{min:"zero",max:"many"}}},He=4,as=6,Fn=12,ns=7,Nn=7,Pn=14,jn=19,Un=6,_n=(a,e)=>{const t=e==="start"?a:[...a].reverse(),[s]=t,n=t.find(r=>s!==void 0&&(r.x!==s.x||r.y!==s.y));if(s===void 0||n===void 0)return{x:e==="start"?1:-1,y:0};const i=Math.hypot(n.x-s.x,n.y-s.y);return{x:(n.x-s.x)/i,y:(n.y-s.y)/i}},is=a=>Math.round(a*100)/100||0,Bn=(a,e,t)=>{const s=(e==="start"?a[0]:a.at(-1))??{x:0,y:0},n=_n(a,e),i={x:-n.y,y:n.x},r=(w,y=0)=>({x:is(s.x+n.x*w+i.x*y),y:is(s.y+n.y*w+i.y*y)}),o=w=>[r(w,-as),r(w,as)],d=In(t),l=d.max==="many"?[-ns,0,ns].map(w=>[r(Fn),r(0,w)]):[o(Nn)],c=d.max==="many"?jn:Pn,h=c+He-2,p=d.min==="one"?[...l,o(c)]:l,m=d.min==="zero"?r(h):null,v=(d.min==="zero"?h+He:c)+Un,x=r(v);return{segments:p,circle:m,label:{...x,anchor:n.x>=0?"start":"end"}}},Hn=G`
+  .er-search {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .er-search .dpk-input {
+    width: 150px;
+    min-height: 26px;
+    font-size: 11px;
+  }
+
+  /* ---- Table card ---- */
+
+  .er-table {
+    /* Where a row's name starts: the left padding plus the icon and its gap. */
+    --er-indent: 33px;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-paper-raised);
+    box-shadow: var(--dpk-shadow-sm);
+    overflow: hidden;
+    cursor: default;
+  }
+
+  .er-table.has-diff {
+    /* Plus the change mark's column. */
+    --er-indent: 50px;
+  }
+
+  .er-table.is-added {
+    border-color: color-mix(in srgb, var(--dpk-green) 60%, transparent);
+  }
+
+  .er-table.is-removed {
+    border-style: dashed;
+    border-color: color-mix(in srgb, var(--dpk-accent) 60%, transparent);
+  }
+
+  .er-table.is-changed {
+    border-color: color-mix(in srgb, var(--dpk-amber) 55%, transparent);
+  }
+
+  .er-table.is-lit {
+    border-color: var(--dpk-blue);
+    box-shadow:
+      var(--dpk-shadow-sm),
+      0 0 18px color-mix(in srgb, var(--dpk-blue) 30%, transparent);
+  }
+
+  .er-table.is-selected {
+    border-color: var(--dpk-blue);
+    box-shadow:
+      inset 0 0 0 1px var(--dpk-blue),
+      var(--dpk-shadow-sm),
+      0 0 22px color-mix(in srgb, var(--dpk-blue) 40%, transparent);
+  }
+
+  .er-head {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    min-height: 40px;
+    flex-shrink: 0;
+    padding-right: 6px;
+    border-bottom: 1px solid var(--dpk-rule);
+    background: color-mix(in srgb, var(--dpk-paper-inset) 60%, var(--dpk-paper-raised));
+  }
+
+  .er-head-select {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    flex: 1;
+    min-width: 0;
+    align-self: stretch;
+    padding: 8px 4px 8px 10px;
+    border: 0;
+    background: none;
+    color: var(--dpk-ink);
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .er-head-select:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 2px var(--dpk-blue);
+  }
+
+  .er-table-icon {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 16px;
+    color: var(--dpk-ink-faint);
+  }
+
+  .er-table-icon svg {
+    width: 15px;
+    height: 15px;
+  }
+
+  .er-table.is-lit .er-table-icon,
+  .er-table.is-selected .er-table-icon {
+    color: var(--dpk-blue);
+  }
+
+  .er-title {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0 7px;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .er-name {
+    /* The id is what the schema is read by: it wraps rather than being cut. */
+    min-width: 0;
+    overflow-wrap: anywhere;
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: -0.01em;
+  }
+
+  .er-table.is-removed .er-name {
+    text-decoration: line-through;
+    color: var(--dpk-ink-soft);
+  }
+
+  .er-label {
+    flex: 0 1 auto;
+    min-width: 0;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 11px;
+    color: var(--dpk-ink-faint);
+  }
+
+  .er-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    flex-shrink: 0;
+    padding: 1px 6px;
+    border-radius: 999px;
+    font-size: 10px;
+    font-weight: 560;
+    line-height: 1.5;
+  }
+
+  .er-status > span {
+    font-family: var(--dpk-mono);
+  }
+
+  .er-table.is-added .er-status {
+    background: var(--dpk-green-soft);
+    color: var(--dpk-green);
+  }
+
+  .er-table.is-removed .er-status {
+    background: var(--dpk-accent-soft);
+    color: var(--dpk-accent);
+  }
+
+  .er-table.is-changed .er-status {
+    background: var(--dpk-amber-soft);
+    color: var(--dpk-amber);
+  }
+
+  .er-head .diagram-comment-trigger {
+    flex-shrink: 0;
+    width: 24px;
+    height: 24px;
+    padding: 4px;
+    border-radius: var(--dpk-radius-xs);
+  }
+
+  .er-head .diagram-comment-trigger svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* ---- Column rows ---- */
+
+  .er-fields {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .er-field {
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--dpk-rule);
+    font-size: 12px;
+    transition: background 120ms ease;
+  }
+
+  .er-field:last-child {
+    border-bottom: 0;
+  }
+
+  .er-field:hover {
+    background: color-mix(in srgb, var(--dpk-paper-inset) 45%, transparent);
+  }
+
+  .er-field-line {
+    display: grid;
+    grid-template-columns: auto 16px minmax(0, 1fr) auto 20px;
+    align-items: center;
+    gap: 7px;
+    min-height: 31px;
+    padding: 4px 6px 4px 10px;
+  }
+
+  .er-field-mark {
+    width: 10px;
+    font-family: var(--dpk-mono);
+    font-size: 11px;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  /* Without a diff the mark's column goes away, and the name starts at the icon. */
+  .er-table:not(.has-diff) .er-field-mark {
+    display: none;
+  }
+
+  .er-table:not(.has-diff) .er-field-line {
+    grid-template-columns: 16px minmax(0, 1fr) auto 20px;
+  }
+
+  .er-icon {
+    display: grid;
+    place-items: center;
+    width: 16px;
+    color: var(--dpk-ink-faint);
+  }
+
+  .er-icon svg {
+    width: 13px;
+    height: 13px;
+  }
+
+  .er-icon:is([data-icon='primary'], [data-icon='foreign']) {
+    color: var(--dpk-blue);
+  }
+
+  .er-icon[data-icon='not-null'] {
+    color: var(--dpk-ink-soft);
+  }
+
+  .er-icon[data-icon='not-null'] svg {
+    fill: currentColor;
+  }
+
+  .er-field-name {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    color: var(--dpk-ink);
+  }
+
+  .er-key {
+    display: inline-block;
+    margin-left: 6px;
+    padding: 0 4px;
+    border-radius: 3px;
+    background: var(--dpk-paper-inset);
+    font-family: var(--dpk-mono);
+    font-size: 9px;
+    line-height: 1.6;
+    color: var(--dpk-ink-soft);
+    vertical-align: 1px;
+  }
+
+  /* A changed type breaks between its old and new value, never inside a word. */
+  .er-field-type {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: baseline;
+    gap: 0 5px;
+    max-width: 168px;
+    min-width: 0;
+    font-family: var(--dpk-mono);
+    font-size: 11px;
+    color: var(--dpk-ink-faint);
+    text-align: right;
+  }
+
+  .er-field-type > :is(del, ins) {
+    white-space: nowrap;
+  }
+
+  .er-field-action {
+    display: grid;
+    place-items: center;
+    width: 20px;
+  }
+
+  .er-field-edit {
+    width: 20px;
+    height: 20px;
+    padding: 3px;
+    opacity: 0;
+  }
+
+  .er-field-edit svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  .er-field:hover .er-field-edit,
+  .er-field:focus-within .er-field-edit {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    .er-field-edit {
+      opacity: 1;
+    }
+  }
+
+  /* A joined column: the row a lit relation lands on reads as the key it is. */
+  .er-field.is-lit {
+    background: color-mix(in srgb, var(--dpk-blue) 16%, var(--dpk-paper-raised));
+  }
+
+  .er-field.is-lit .er-field-name {
+    color: var(--dpk-blue);
+    font-weight: 600;
+  }
+
+  .er-field.is-lit .er-field-type {
+    color: var(--dpk-ink-soft);
+  }
+
+  .er-field.is-added {
+    background: color-mix(in srgb, var(--dpk-green) 9%, transparent);
+  }
+
+  .er-field.is-removed {
+    background: color-mix(in srgb, var(--dpk-accent) 8%, transparent);
+  }
+
+  .er-field.is-removed :is(.er-field-name, .er-field-type) {
+    text-decoration: line-through;
+    color: var(--dpk-ink-faint);
+  }
+
+  .er-field.is-changed {
+    background: color-mix(in srgb, var(--dpk-amber) 9%, transparent);
+  }
+
+  .er-field.is-added .er-field-mark {
+    color: var(--dpk-green);
+  }
+
+  .er-field.is-removed .er-field-mark {
+    color: var(--dpk-accent);
+  }
+
+  .er-field.is-changed .er-field-mark {
+    color: var(--dpk-amber);
+  }
+
+  .er-field.is-match {
+    box-shadow: inset 0 0 0 1px var(--dpk-blue);
+  }
+
+  /* Old and new values side by side: the type in its own cell, the rest under the row. */
+  .er-field del {
+    color: var(--dpk-accent);
+    text-decoration: line-through;
+  }
+
+  .er-field ins {
+    color: var(--dpk-green);
+    text-decoration: none;
+  }
+
+  .er-deltas {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2px 12px;
+    margin: -3px 0 0;
+    padding: 0 8px 6px var(--er-indent);
+    list-style: none;
+    font-family: var(--dpk-mono);
+    font-size: 10px;
+    line-height: 1.5;
+  }
+
+  .er-delta {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    color: var(--dpk-ink-faint);
+  }
+
+  .er-delta-name {
+    font-family: var(--dpk-body);
+    font-size: 9.5px;
+  }
+
+  /* ---- Relations ---- */
+
+  .er-edge {
+    --er-line: color-mix(in srgb, var(--dpk-ink-faint) 75%, transparent);
+  }
+
+  .er-edge.is-added {
+    --er-line: var(--dpk-green);
+  }
+
+  .er-edge.is-removed {
+    --er-line: var(--dpk-accent);
+  }
+
+  .er-edge.is-changed {
+    --er-line: var(--dpk-amber);
+  }
+
+  .er-edge.is-same:is(.is-lit, .is-selected) {
+    --er-line: var(--dpk-blue);
+  }
+
+  .er-edge .d-edge-path {
+    stroke: var(--er-line);
+    stroke-width: 1.25;
+  }
+
+  /* While something is lit, the relations it does not reach step back. */
+  .er-edge {
+    transition: opacity 160ms ease;
+  }
+
+  .er-edge.is-faded {
+    opacity: 0.28;
+  }
+
+  .er-edge.is-removed .d-edge-path {
+    stroke-dasharray: 5 4;
+  }
+
+  .er-edge:is(.is-lit, :hover, :focus-visible) .d-edge-path {
+    stroke: var(--er-line);
+    stroke-width: 1.75;
+  }
+
+  .er-edge.is-selected .d-edge-path {
+    stroke: var(--er-line);
+    stroke-width: 2.25;
+  }
+
+  /* Dots running from the referenced column to the FK column while lit. */
+  .er-edge-flow {
+    fill: none;
+    stroke: none;
+    pointer-events: none;
+  }
+
+  .er-edge:is(.is-lit, .is-selected) .er-edge-flow {
+    stroke: var(--er-line);
+    stroke-width: 3;
+    stroke-linecap: round;
+    stroke-dasharray: 0.1 13;
+    animation: er-flow 900ms linear infinite;
+  }
+
+  @keyframes er-flow {
+    to {
+      stroke-dashoffset: -13.1;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .er-edge:is(.is-lit, .is-selected) .er-edge-flow {
+      animation: none;
+    }
+  }
+
+  /* Crow's foot ends take the line's colour; the "zero" circle is hollow. */
+  .er-end {
+    pointer-events: none;
+    fill: var(--dpk-paper-sunken);
+    stroke: var(--er-line);
+    stroke-width: 1.25;
+    stroke-linecap: round;
+  }
+
+  .er-edge:is(.is-lit, .is-selected) .er-end {
+    stroke-width: 1.75;
+  }
+
+  /*
+   * Multiplicities and labels appear with the relation's highlight, as in
+   * Liam ERD, so the resting diagram stays quiet. A changed relation keeps
+   * them on: the change is in them.
+   */
+  .er-cardinality,
+  .er-relation-label {
+    paint-order: stroke;
+    stroke: var(--dpk-paper-sunken);
+    stroke-linejoin: round;
+    fill: var(--dpk-ink-soft);
+    opacity: 0;
+    transition: opacity 120ms ease;
+  }
+
+  .er-edge:is(.is-lit, .is-selected, .is-changed, :hover, :focus-within) :is(.er-cardinality, .er-relation-label) {
+    opacity: 1;
+  }
+
+  .er-cardinality {
+    font-family: var(--dpk-mono);
+    font-size: 10px;
+    stroke-width: 5px;
+  }
+
+  .er-relation-label {
+    font-size: 10px;
+    font-style: italic;
+    stroke-width: 4px;
+  }
+
+  .er-edge.is-same:is(.is-lit, .is-selected) :is(.er-cardinality, .er-relation-label) {
+    fill: var(--dpk-blue);
+  }
+
+  .er-cardinality.is-added,
+  .er-relation-label.is-added {
+    fill: var(--dpk-green);
+  }
+
+  .er-cardinality.is-removed,
+  .er-relation-label.is-removed {
+    fill: var(--dpk-accent);
+  }
+
+  .er-cardinality.is-changed,
+  .er-relation-label.is-changed {
+    fill: var(--dpk-amber);
+  }
+
+  .er-was {
+    fill: var(--dpk-accent);
+    text-decoration: line-through;
+  }
+
+  .diagram-legend .er-legend-cardinality {
+    font-family: var(--dpk-mono);
+    font-size: 9px;
+  }
+
+  .diagram-legend .er-swatch-added {
+    border-color: var(--dpk-green);
+  }
+
+  .diagram-legend .er-swatch-removed {
+    border-color: var(--dpk-accent);
+  }
+
+  .diagram-legend .er-swatch-changed {
+    border-color: var(--dpk-amber);
+  }
+
+  /* ---- Adding and editing columns ---- */
+
+  .er-add {
+    border-top: 1px solid var(--dpk-rule);
+  }
+
+  .er-add-button {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    width: 100%;
+    min-height: 30px;
+    padding: 4px 10px 4px calc(var(--er-indent) - 23px);
+    border: 0;
+    background: none;
+    color: var(--dpk-ink-faint);
+    font-family: var(--dpk-body);
+    font-size: 11.5px;
+    text-align: left;
+    cursor: pointer;
+    transition:
+      background 120ms ease,
+      color 120ms ease;
+  }
+
+  .er-add-button:hover {
+    background: color-mix(in srgb, var(--dpk-paper-inset) 45%, transparent);
+    color: var(--dpk-ink);
+  }
+
+  .er-add-button:focus-visible {
+    outline: none;
+    color: var(--dpk-ink);
+    box-shadow: inset 0 0 0 2px var(--dpk-blue);
+  }
+
+  .er-add-button.is-open {
+    background: color-mix(in srgb, var(--dpk-blue) 9%, transparent);
+    color: var(--dpk-ink);
+  }
+
+  /* The row being edited stays in place under the editor, ringed. */
+  .er-field.is-editing {
+    background: color-mix(in srgb, var(--dpk-blue) 9%, var(--dpk-paper-raised));
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dpk-blue) 65%, transparent);
+  }
+
+  .er-field.is-editing .er-field-edit {
+    opacity: 1;
+    color: var(--dpk-blue);
+  }
+
+  /* The editor: a small card in the top layer, like a tooltip, under its row. */
+  .er-editor {
+    box-sizing: border-box;
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    overflow: auto;
+    display: grid;
+    gap: 10px;
+    padding: 10px 12px 12px;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-raised);
+    box-shadow: var(--dpk-shadow);
+    color: var(--dpk-ink);
+    font-family: var(--dpk-body);
+    font-size: 12px;
+    animation: er-editor-in 140ms var(--dpk-ease);
+  }
+
+  @keyframes er-editor-in {
+    from {
+      opacity: 0;
+      transform: translateY(-3px);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .er-editor {
+      animation: none;
+    }
+  }
+
+  .er-editor-head {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    min-width: 0;
+    padding-bottom: 8px;
+    border-bottom: 1px solid var(--dpk-rule);
+  }
+
+  .er-editor-title {
+    flex-shrink: 0;
+    font-size: 11.5px;
+    font-weight: 600;
+  }
+
+  .er-editor-target {
+    min-width: 0;
+    margin-left: auto;
+    overflow: hidden;
+    font-family: var(--dpk-mono);
+    font-size: 11px;
+    color: var(--dpk-ink-faint);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .er-editor-fields {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: minmax(0, 1fr);
+    gap: 8px;
+  }
+
+  .er-editor-field {
+    display: grid;
+    gap: 4px;
+    min-width: 0;
+  }
+
+  .er-editor-field .dpk-input {
+    min-height: 28px;
+    padding: 3px 8px;
+    font-family: var(--dpk-mono);
+    font-size: 11.5px;
+  }
+
+  .er-editor-field .dpk-input[aria-invalid='true'] {
+    border-color: var(--dpk-accent);
+  }
+
+  .er-editor-combo {
+    min-width: 0;
+  }
+
+  /* A manual popover in the top layer, placed by the element; the UA popover box is reset. */
+  .er-type-options {
+    box-sizing: border-box;
+    position: fixed;
+    inset: auto;
+    align-content: start;
+    gap: 1px;
+    margin: 0;
+    padding: 4px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-raised);
+    box-shadow: var(--dpk-shadow);
+    color: var(--dpk-ink);
+    list-style: none;
+  }
+
+  .er-type-options:popover-open {
+    display: grid;
+  }
+
+  .er-type-options [role='option'] {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    padding: 4px 8px;
+    border-radius: var(--dpk-radius-xs);
+    color: var(--dpk-ink-soft);
+    font-size: 11.5px;
+    cursor: pointer;
+  }
+
+  .er-type-options [role='option']:hover,
+  .er-type-options [role='option'][aria-selected='true'] {
+    background: var(--dpk-paper-sunken);
+    color: var(--dpk-ink);
+  }
+
+  .er-type-options code {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: var(--dpk-mono);
+  }
+
+  .er-type-options [data-kind='new'] .er-icon {
+    color: var(--dpk-green);
+  }
+
+  .er-type-option-hint {
+    flex: none;
+    margin-left: auto;
+    padding-left: 8px;
+    color: var(--dpk-ink-faint);
+    font-size: 10.5px;
+  }
+
+  .er-editor-check {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    width: fit-content;
+    font-size: 11.5px;
+    color: var(--dpk-ink-soft);
+    cursor: pointer;
+  }
+
+  .er-editor-check input {
+    width: 13px;
+    height: 13px;
+    margin: 0;
+    accent-color: var(--dpk-blue);
+    cursor: pointer;
+  }
+
+  .er-editor-foot {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .er-editor-keys {
+    margin-right: auto;
+    font-size: 10px;
+    color: var(--dpk-ink-faint);
+  }
+
+  .er-editor-foot .dpk-btn {
+    min-height: 26px;
+    padding: 0 12px;
+    font-size: 11.5px;
+  }
+
+  .er-editor-note,
+  .er-error {
+    margin: 0;
+    font-size: 10.5px;
+    line-height: 1.45;
+  }
+
+  .er-editor-note {
+    color: var(--dpk-accent);
+  }
+
+  .er-error {
+    padding: 5px 8px;
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-accent-soft);
+    color: var(--dpk-accent);
+  }
+`,Gn=(a,e,t=!1)=>[[a.type,a.ref===null?null:`\u2192 ${a.ref}`].filter(Boolean).join(" "),t&&a.keys.length>0?a.keys.join("+"):null,a.cardinality,a.label===null?null:`\u201C${a.label}\u201D`,a.nullable?e.nullable:null].filter(Boolean).join(" \xB7 "),Me="\u2014",Kn=(a,e)=>{const t=a.before;return t===null?[]:[["type",n=>n.type],["keys",n=>n.keys.length===0?Me:n.keys.join("+")],["ref",n=>n.ref??Me],["nullable",n=>n.nullable?e.nullable:e.notNull],["cardinality",n=>n.cardinality??Me],["label",n=>n.label===null?Me:`\u201C${n.label}\u201D`]].flatMap(([n,i])=>i(t)===i(a)?[]:[{attribute:n,before:i(t),after:i(a)}])},Wn=(a,e)=>a!==void 0&&JSON.stringify(a.base)===JSON.stringify(e)?a.draft:e,rs=a=>[...new Set(a.nodes.flatMap(e=>e.fields.map(t=>t.type)))].sort(),os=(a,e,t)=>{const s=e.trim(),n=s.toLowerCase(),i=a.findIndex(d=>d.toLowerCase()===n),r=n===""||i!==-1?a.map(d=>({kind:"schema",type:d})):[...a.filter(d=>d.toLowerCase().startsWith(n)),...a.filter(d=>!d.toLowerCase().startsWith(n)&&d.toLowerCase().includes(n))].map(d=>({kind:"schema",type:d})).concat({kind:"new",type:s});if(r.length===0)return{options:r,active:-1};const o=t??Math.max(0,i);return{options:r,active:(o%r.length+r.length)%r.length}},ds=(a,e)=>{const t=a.type.trim();if(a.kind==="add"){const i=a.name.trim();return e.fields.some(r=>r.id===i)?{ready:!1,issue:"name-taken"}:{ready:i!==""&&t!=="",issue:null}}const s=e.fields.find(i=>i.id===a.field),n=s===void 0||t!==s.type||a.nullable!==s.nullable;return{ready:t!==""&&n,issue:null}},Vn=a=>a.keys.includes("PK")?"primary":a.keys.includes("FK")||a.ref!==null?"foreign":a.nullable?"nullable":"not-null",ls=(a,e)=>e.kind==="relation"?a.id===e.id:e.kind==="table"?a.from===e.id||a.to===e.id:a.from===e.table&&a.sourceField===e.field||a.to===e.table&&a.targetField===e.field,Yn=(a,e)=>{const t=e.map(r=>r.kind==="column"&&!a.some(o=>ls(o,r))?{kind:"table",id:r.table}:r),s=new Set(t.flatMap(r=>r.kind==="relation"?[]:[r.kind==="table"?r.id:r.table])),n=new Set,i=new Set;for(const r of a)t.some(o=>ls(r,o))&&(n.add(r.id),s.add(r.from).add(r.to),i.add(`${r.from}.${r.sourceField}`).add(`${r.to}.${r.targetField}`));return{tables:s,edges:n,columns:i}},Jn=(a,e,t,s)=>{const n=t.filter(c=>c.x>=a.x&&c.x+c.width<=e.x),i=[];for(const c of[...n].sort((h,p)=>h.x-p.x)){const h=i.find(p=>p.some(m=>c.x<m.x+m.width&&m.x<c.x+c.width));h?h.push(c):i.push([c])}const r=[a];let o=a.x,d=a.y;const l=(c,h)=>{h!==d&&(r.push({x:c,y:d},{x:c,y:h}),d=h)};for(const c of i){const h=Math.min(...c.map(y=>y.x)),p=Math.max(...c.map(y=>y.x+y.width)),m=y=>c.every(E=>y<=E.y-s||y>=E.y+E.height+s),v=[d,e.y,...c.flatMap(y=>[y.y-s,y.y+y.height+s])].filter(m),x=y=>Math.abs(y-d)+Math.abs(y-e.y),w=v.reduce((y,E)=>x(E)<x(y)?E:y,v[0]??d);l((o+h)/2,w),o=p}return l((o+e.x)/2,e.y),r.push(e),r},Xn=10,Zn=(a,e)=>{const t=a[0],s=a.at(-1);if(t===void 0||s===void 0||!cs(a))return Qn(a,Xn);const n=[`M${B(t)}`];let i=t;const r=o=>{(o.x!==i.x||o.y!==i.y)&&n.push(`L${B(o)}`),i=o};for(let o=1;o+1<a.length;o+=2){const d=a[o],l=a[o+1];if(d===void 0||l===void 0)continue;const c=(v,x)=>x?v/2:v,h=c(d.x-(a[o-1]?.x??d.x),o-1>0),p=c((a[o+2]?.x??l.x)-l.x,o+2<a.length-1),m=ne(Math.min(e,h,p));r({x:ne(d.x-m),y:d.y}),n.push(`C${B(d)} ${B(l)} ${ne(l.x+m)} ${l.y}`),i={x:ne(l.x+m),y:l.y}}return r(s),n.join(" ")},cs=a=>a.length>=2&&a.length%2===0&&a.every((e,t)=>{const s=a[t-1];return s===void 0?!0:t%2===1?e.y===s.y&&e.x>=s.x:e.x===s.x})&&(a.at(-1)?.x??0)>(a[0]?.x??0),B=a=>`${a.x} ${a.y}`,Qn=(a,e)=>{const[t,...s]=a;if(t===void 0)return"";const n=[`M${B(t)}`];return s.forEach((i,r)=>{const o=a[r]??i,d=s[r+1];if(d===void 0){n.push(`L${B(i)}`);return}const l=Math.hypot(i.x-o.x,i.y-o.y),c=Math.hypot(d.x-i.x,d.y-i.y),h=Math.min(e,l/2,c/2);if(h===0){n.push(`L${B(i)}`);return}const p=(m,v,x)=>({x:ne(m.x+(v.x-m.x)/x*h),y:ne(m.y+(v.y-m.y)/x*h)});n.push(`L${B(p(i,o,l))}`,`Q${B(i)} ${B(p(i,d,c))}`)}),n.join(" ")},ne=a=>Math.round(a*100)/100||0,Ge=7,Ke={nodeSpacing:40,layerSpacing:136,padding:32},ei=Ke.nodeSpacing/2,ti=Ke.layerSpacing/2,si='[data-action="add-field"], [data-action="edit-field"]',ps={same:"",added:"+",removed:"\u2212",changed:"~"},ai={primary:sa,foreign:ta,"not-null":ot,nullable:ot},ni=(a,e)=>a.keys.filter(t=>!(e==="primary"&&t==="PK")&&!(e==="foreign"&&t==="FK"));class us extends ce{static{this.styles=[Y,Hn]}#t="";#n=null;#e=null;#s=null;#i=new Map;#a=null;#r=new Map;#o=null;#c=new Le(this);constructor(){super(),new Qs(this,{open:()=>this.#e!==null,closesOn:e=>!e.some(t=>t instanceof Element&&t.matches(`.er-editor, ${si}`)),ownsEscape:()=>!1,dismiss:()=>this.#$(!1,!1)})}disconnectedCallback(){this.#o?.disconnect(),this.#o=null,super.disconnectedCallback()}willUpdate(e){super.willUpdate(e),this.#n!==null&&!this.#u(this.#n)&&(this.#n=null)}updated(){super.updated(),this.#C(),typeof ResizeObserver<"u"&&(this.#o??=new ResizeObserver(()=>this.#p())),this.#o?.disconnect();for(const e of this.renderRoot.querySelectorAll(".er-table")){this.#o?.observe(e);for(const t of e.querySelectorAll(".er-field"))this.#o?.observe(t)}this.#p()}#p(){let e=!1;for(const t of this.renderRoot.querySelectorAll(".er-table")){const s=t.dataset.erTable,n=t.getBoundingClientRect();if(s===void 0||n.width===0)continue;const i=n.width/t.offsetWidth,r=c=>Math.round(c*64)/64,o=c=>{const h=c?.getBoundingClientRect();return h===void 0?0:r((h.top+h.height/2-n.top)/i)},d={};for(const c of t.querySelectorAll(".er-field[data-field]")){const h=c.dataset.field;h!==void 0&&(d[h]=o(c.querySelector(".er-field-line")??c))}const l={height:r(n.height/i),head:o(t.querySelector(".er-head")),rows:d};JSON.stringify(this.#r.get(s))!==JSON.stringify(l)&&(this.#r.set(s,l),e=!0)}e&&this.requestUpdate()}layoutSignature(){return JSON.stringify([...this.#r])}filtered(){const e=super.filtered(),t=Be(e.edges);return{...e,nodes:e.nodes.map(s=>{const n=this.#r.get(s.id);if(!n)return s;const i={...s.ports};for(const r of e.edges){if(r.from===s.id&&r.fromPort!==void 0){const o=n.rows[r.sourceField]??n.head;i[r.fromPort]={x:s.width,y:o+(t.get(r.id)??0)}}r.to===s.id&&r.toPort!==void 0&&(i[r.toPort]={x:0,y:n.rows[r.targetField]??n.head})}return{...s,height:n.height,ports:i}})}}parseData(e){return Dn(e)}reduceElementActions(e,t){return On(X(this.locale),e,t)}emptyData(){return yn()}defaultHeading(){return X(this.locale).heading}statsLabels(){const e=X(this.locale);return{node:e.node,edge:e.edge}}emptyMessage(){return X(this.locale).empty}layoutOptions(){return Ke}matchesFilter(e){return this.#t===""?!0:[e.id,e.name,...e.fields.map(t=>t.id)].some(t=>t.toLowerCase().includes(this.#t))}relations(e,t){if(e===null||e.kind!=="node")return W;const s=j(t.edges,e.id,"outgoing",!1),n=j(t.edges,e.id,"incoming",!1);return{nodes:new Map([...s.nodes,...n.nodes]),edges:new Set([...s.edges,...n.edges])}}renderToolbarActions(){const e=X(this.locale);return u`
+      <label class="er-search">
+        <span class="dpk-label">${e.search}</span>
+        <input
+          class="dpk-input"
+          type="search"
+          placeholder="table / field"
+          .value=${this.#t}
+          @input=${t=>{const s=t.currentTarget;s instanceof HTMLInputElement&&(this.#t=s.value.trim().toLowerCase(),this.requestUpdate())}}
+        />
+      </label>
+    `}renderLegend(){const e=X(this.locale);return u`<div class="diagram-legend">
+      <span><i class="er-swatch-added"></i>${e.legendAdded}</span>
+      <span><i class="er-swatch-removed"></i>${e.legendRemoved}</span>
+      <span><i class="er-swatch-changed"></i>${e.legendChanged}</span>
+      <span class="er-legend-cardinality">${e.legendCardinality}</span>
+    </div>`}#l(e){const t=this.selection,s=t===null?null:t.kind==="node"?{kind:"table",id:t.id}:{kind:"relation",id:t.id};return Yn(e.edges,[this.#n,s].filter(n=>n!==null))}#u(e){const t=this.visible;if(e.kind==="relation")return t.edges.some(n=>n.id===e.id);const s=e.kind==="table"?e.id:e.table;return t.nodes.some(n=>n.id===s)}#h(e,t){const s=this.routeOf(e.id),n=s[0],i=s.at(-1);if(n===void 0||i===void 0||!cs(s))return s;const r=t.nodes.flatMap(o=>{const d=this.placedNode(o.id);return d===void 0?[]:[d]});return Jn(n,i,r,ei)}renderCanvas(){const e=X(this.locale),t=this.visible,s=this.#l(t),n=Be(t.edges),i=[...t.edges].sort((o,d)=>Number(s.edges.has(o.id))-Number(s.edges.has(d.id))),r=i.map(o=>{const d=this.edgeState(o.id),l=this.#h(o,t),c=Zn(l,ti),h=()=>this.select({kind:"edge",id:o.id}),p=[Se(o.cardinality),o.label].filter(Boolean).join(" \xB7 "),m=o.before===null?null:[Se(o.before.cardinality),o.before.label].filter(Boolean).join(" \xB7 ");return R`
+        <g
+          class=${this.elementClass({...d,dimmed:!1},"d-edge","er-edge",`is-${o.status}`,s.edges.has(o.id)&&"is-lit",s.edges.size>0&&!s.edges.has(o.id)&&"is-faded")}
+          data-relation=${o.id}
+          @pointerenter=${()=>this.#v({kind:"relation",id:o.id})}
+          @pointerleave=${()=>this.#v(null)}
+        >
+          <title>${[`${o.from}.${o.sourceField} \u2192 ${o.to}.${o.targetField}`,p,m===null?null:`(${e.was(m)})`].filter(Boolean).join(" \xB7 ")}</title>
+          <path class="d-edge-path" d=${c}></path>
+          <path class="er-edge-flow" d=${c}></path>
+          <path
+            class="d-edge-hit"
+            d=${c}
+            role="button"
+            tabindex="0"
+            aria-label=${e.edgeLabel(o.from,o.to,p)}
+            @click=${h}
+            @keydown=${v=>{v.key!=="Enter"&&v.key!==" "||(v.preventDefault(),h())}}
+          ></path>
+          ${l.length>0?this.#b(l,o,n.get(o.id)??0):b}
+          ${this.renderEdgeCommentTrigger({kind:"edge",id:o.id},`${o.from}.${o.sourceField} \u2192 ${o.to}.${o.targetField}`,l)}
+        </g>
+      `});return u`${this.renderEdges(Q(r,(o,d)=>i[d]?.id,o=>o),[])}${t.nodes.map(o=>this.#d(o,s,e))}`}#b(e,t,s){const n=t.before,i=(c,h)=>R`${h!=null&&h!==c?R`<tspan class="er-was">${h}</tspan> `:b}${c??b}`,r=c=>{const h=c==="start"?t.cardinality.parent:t.cardinality.child,p=n&&(c==="start"?n.cardinality.parent:n.cardinality.child),m=Bn(e,c,h);return{glyph:m,content:R`
+          <g class="er-end" data-end=${c} data-multiplicity=${h}>
+            ${m.segments.map(([v,x])=>R`<line x1=${v.x} y1=${v.y} x2=${x.x} y2=${x.y}></line>`)}
+            ${m.circle===null?b:R`<circle cx=${m.circle.x} cy=${m.circle.y} r=${He}></circle>`}
+          </g>
+          <text
+            class="er-cardinality is-${t.status}"
+            data-end=${c}
+            text-anchor=${m.label.anchor}
+            dominant-baseline="central"
+            x=${m.label.x}
+            y=${m.label.y+(c==="start"&&s>0?Ge:-Ge)}
+          >${i(h,p)}</text>
+        `}},o=r("start"),d=r("end"),l=t.label??n?.label??null;return R`
+      ${o.content}${d.content}
+      ${l===null?b:R`<text
+              class="er-relation-label is-${t.status}"
+              text-anchor=${d.glyph.label.anchor}
+              x=${d.glyph.label.x}
+              dominant-baseline="central"
+              y=${d.glyph.label.y+Ge}
+            >${i(t.label,n?.label)}</text>`}
+    `}#d(e,t,s){const n=this.placedNode(e.id);if(!n)return b;const i=this.nodeState(e.id),r=e.fields;return u`
+      <div
+        class=${this.elementClass({...i,dimmed:!1},"d-node","er-table",`is-${e.status}`,t.tables.has(e.id)&&"is-lit",e.fields.some(o=>o.status!=="same")&&"has-diff")}
+        data-er-table=${e.id}
+        data-grill-questions=${this.questionsOf(e)}
+        style="left:${n.x}px; top:${n.y}px; width:${e.width}px"
+        @pointerenter=${()=>this.#v({kind:"table",id:e.id})}
+        @pointerleave=${()=>this.#v(null)}
+      >
+        <div class="er-head">
+          <button
+            type="button"
+            class="er-head-select"
+            data-table=${e.id}
+            aria-pressed=${i.selected?"true":"false"}
+            title=${`${e.id} / ${e.name}`}
+            @click=${()=>this.select({kind:"node",id:e.id})}
+          >
+            <span class="er-table-icon" aria-hidden="true">${ea()}</span>
+            <span class="er-title">
+              <span class="er-name">${e.id}</span>
+              <span class="er-label">${e.name}</span>
+            </span>
+            ${e.status==="same"?b:u`<span class="er-status"
+                    ><span aria-hidden="true">${ps[e.status]}</span>${s.statusLabel(e.status)}</span
+                  >`}
+          </button>
+          ${this.renderCommentTrigger({kind:"node",id:e.id},`${e.id} \xB7 ${e.name}`)}
+        </div>
+        ${r.length===0?b:u`<div class="er-fields">${r.map(o=>this.#g(e,o,t,s))}</div>`}
+        ${this.#x(e,s)}
+      </div>
+    `}#m(e,t){return u`<span class="er-icon" data-icon=${e} role="img" aria-label=${t.columnRole(e)}
+      >${ai[e]()}</span
+    >`}#g(e,t,s,n){const i=this.#e,r=i?.kind==="edit"&&i.table===e.id&&i.field===t.id,o=this.#f&&t.status!=="removed"&&t.ref===null,d=this.#t!==""&&t.id.toLowerCase().includes(this.#t),l=Vn(t),c=Kn(t,n),h=c.find(m=>m.attribute==="type"),p=c.filter(m=>m.attribute!=="type");return u`
+      <div
+        class=${V("er-field",`is-${t.status}`,d&&"is-match",s.columns.has(`${e.id}.${t.id}`)&&"is-lit",r&&"is-editing")}
+        data-field=${t.id}
+        data-grill-questions=${this.questionsOf(t)}
+        title=${[n.statusLabel(t.status),t.id,Gn(t,n,!0)].join(" / ")}
+        @pointerenter=${()=>this.#v({kind:"column",table:e.id,field:t.id})}
+        @pointerleave=${()=>this.#v({kind:"table",id:e.id})}
+      >
+        <div class="er-field-line">
+          <span class="er-field-mark" aria-hidden="true">${ps[t.status]}</span>
+          ${this.#m(l,n)}
+          <span class="er-field-name"
+            >${t.id}${ni(t,l).map(m=>u`<span class="er-key">${m}</span>`)}</span
+          >
+          <span class="er-field-type">
+            ${h===void 0?t.type:u`<del>${h.before}</del><ins>${h.after}</ins>`}
+          </span>
+          <span class="er-field-action">
+            ${o?u`<button
+                    type="button"
+                    class="dpk-icon-btn er-field-edit"
+                    data-action="edit-field"
+                    data-field=${t.id}
+                    aria-label=${n.editFieldButton(t.id)}
+                    aria-haspopup="dialog"
+                    aria-expanded=${r?"true":"false"}
+                    title=${n.editFieldButton(t.id)}
+                    @click=${()=>this.#q({kind:"edit",table:e.id,field:t.id,type:t.type,nullable:t.nullable,failed:!1})}
+                  >
+                    ${aa()}
+                  </button>`:b}
+          </span>
+        </div>
+        ${p.length===0?b:u`<ul class="er-deltas" aria-label=${n.changesLabel}>
+                ${p.map(m=>u`<li class="er-delta" data-attribute=${m.attribute}>
+                      <span class="er-delta-name">${n.attributeLabel(m.attribute)}</span>
+                      <del>${m.before}</del><span aria-hidden="true">→</span><ins>${m.after}</ins>
+                    </li>`)}
+              </ul>`}
+      </div>
+    `}get#f(){return this.id!==""}#x(e,t){if(!this.#f||e.status==="removed")return b;const s=this.#e?.kind==="add"&&this.#e.table===e.id;return u`<div class="er-add">
+      <button
+        type="button"
+        class=${V("er-add-button",s&&"is-open")}
+        data-action="add-field"
+        aria-haspopup="dialog"
+        aria-expanded=${s?"true":"false"}
+        @click=${()=>this.#q({kind:"add",table:e.id,name:"",type:"",nullable:!1,failed:!1})}
+      >
+        <span class="er-icon" aria-hidden="true">${De()}</span><span>${t.addFieldButton}</span>
+      </button>
+    </div>`}renderSelection(){const e=this.#e,t=e===null?void 0:this.visible.nodes.find(n=>n.id===e.table),s=super.renderSelection();return e===null||t===void 0?s:u`${s}${this.#M(t,e,X(this.locale))}`}#M(e,t,s){const n=ds(t,e),i=t.kind==="edit"?e.fields.find(l=>l.id===t.field):void 0,r=i!==void 0&&i.keys.includes("PK")?"primary":t.nullable?"nullable":"not-null",o=t.kind==="add"?s.addFieldTitle:s.editFieldTitle,d=t.kind==="add"?e.id:`${e.id}.${t.field}`;return u`<div
+      class="er-editor"
+      popover="manual"
+      role="dialog"
+      data-kind=${t.kind}
+      aria-label=${`${o} ${d}`}
+      @keydown=${l=>this.#z(l)}
+    >
+      <div class="er-editor-head">
+        ${this.#m(r,s)}
+        <span class="er-editor-title">${o}</span>
+        <code class="er-editor-target">${d}</code>
+      </div>
+      <div class="er-editor-fields">
+        ${t.kind==="add"?u`<label class="er-editor-field">
+                <span class="dpk-label">${s.columnNameLabel}</span>
+                <input
+                  class="dpk-input"
+                  data-input="add-name"
+                  autocomplete="off"
+                  spellcheck="false"
+                  aria-invalid=${n.issue==="name-taken"?"true":"false"}
+                  placeholder=${s.columnNamePlaceholder}
+                  .value=${t.name}
+                  @input=${l=>{const c=l.currentTarget;this.#e?.kind==="add"&&c instanceof HTMLInputElement&&this.#w({...this.#e,name:c.value})}}
+                />
+              </label>`:b}
+        ${this.#L(t,s)}
+      </div>
+      ${n.issue==="name-taken"?u`<p class="er-editor-note" role="status">${s.columnNameTaken}</p>`:b}
+      ${t.failed?u`<p class="er-error" role="alert">${s.notRecorded}</p>`:b}
+      <label class="er-editor-check">
+        <input
+          type="checkbox"
+          data-input="nullable"
+          .checked=${t.nullable}
+          @change=${l=>{const c=l.currentTarget;this.#e!==null&&c instanceof HTMLInputElement&&this.#w({...this.#e,nullable:c.checked})}}
+        />
+        <span>${s.columnNullable}</span>
+      </label>
+      <div class="er-editor-foot">
+        <span class="er-editor-keys">${s.columnKeys}</span>
+        <button
+          type="button"
+          class="dpk-btn dpk-btn--ghost"
+          data-action="cancel-column"
+          data-dpk-text-discard
+          @click=${()=>this.#$(!0)}
+        >
+          ${s.cancel}
+        </button>
+        <button
+          type="button"
+          class="dpk-btn dpk-btn--accent"
+          data-action="submit-column"
+          ?disabled=${!n.ready}
+          @click=${()=>this.#S()}
+        >
+          ${t.kind==="add"?s.columnAdd:s.columnSave}
+        </button>
+      </div>
+    </div>`}#C(){const e=this.#e,t=this.renderRoot.querySelector(".er-editor");if(e===null||t===null)return;const s=this.renderRoot.querySelector(`[data-er-table="${CSS.escape(e.table)}"] ${hs(e)}`),n=e.kind==="edit"?s?.closest(".er-field"):s;if(!n)return;this.#c.open(t,n,{width:300,height:340},{placement:"bottom-start",trackTransform:!0});const i=t.querySelector(".er-type-options"),r=t.querySelector(".er-editor-type");i===null||r===null||this.#c.open(i,r,{width:Math.max(r.offsetWidth,200),height:220},{placement:"bottom-start",trackTransform:!0})}#E(){this.#e===null||this.#s===null||this.#i.set(ue(this.#e),{draft:this.#e,base:this.#s})}#v(e){JSON.stringify(this.#n)!==JSON.stringify(e)&&(this.#n=e,this.requestUpdate())}#q(e){if(this.#e!==null&&ue(this.#e)===ue(e)){this.#$(!1);return}this.#T(e)}#T(e){this.#E(),this.#e=Wn(this.#i.get(ue(e)),e),this.#s=e,this.#i.delete(ue(e)),this.#a=null,this.requestUpdate();const t=e.kind==="add"?"add-name":"edit-type";this.updateComplete.then(()=>{const s=this.renderRoot.querySelector(`.er-editor [data-input="${t}"]`);s?.focus({preventScroll:!0}),s?.select()})}#L(e,t){const s=this.#a,n=s===null?null:os(rs(this.items()),e.type,s.moved),i=n!==null&&n.options.length>0,r=d=>`er-type-option-${d}`,o=()=>{this.#a===null&&(this.#a={moved:null},this.requestUpdate())};return u`<div class="er-editor-combo">
+      <label class="er-editor-field">
+        <span class="dpk-label">${t.addFieldType}</span>
+        <input
+          class="dpk-input er-editor-type"
+          data-input=${e.kind==="add"?"add-type":"edit-type"}
+          role="combobox"
+          aria-autocomplete="list"
+          aria-controls="er-type-options"
+          aria-expanded=${String(i)}
+          aria-activedescendant=${i?r(n.active):b}
+          autocomplete="off"
+          spellcheck="false"
+          placeholder=${t.columnTypePlaceholder}
+          .value=${e.type}
+          @click=${o}
+          @blur=${()=>this.#y()}
+          @input=${d=>{const l=d.currentTarget;this.#e===null||!(l instanceof HTMLInputElement)||(this.#a={moved:null},this.#w({...this.#e,type:l.value}))}}
+          @keydown=${d=>this.#D(d)}
+        />
+      </label>
+      ${i?u`<ul
+              id="er-type-options"
+              class="er-type-options"
+              popover="manual"
+              role="listbox"
+              aria-label=${t.columnTypeChoices}
+            >
+              ${n.options.map((d,l)=>u`<li
+                    id=${r(l)}
+                    role="option"
+                    data-type=${d.type}
+                    data-kind=${d.kind}
+                    aria-selected=${String(l===n.active)}
+                    @pointerdown=${c=>c.preventDefault()}
+                    @click=${()=>this.#k(d.type)}
+                  >
+                    ${d.kind==="new"?u`<span class="er-icon" aria-hidden="true">${De()}</span>`:b}
+                    <code>${d.type}</code>
+                    ${d.kind==="new"?u`<span class="er-type-option-hint">${t.columnTypeNew}</span>`:b}
+                  </li>`)}
+            </ul>`:b}
+    </div>`}#D(e){const t=this.#e,s=this.#a;if(e.isComposing||t===null)return;const n=s===null?null:os(rs(this.items()),t.type,s.moved);switch(e.key){case"ArrowDown":case"ArrowUp":e.preventDefault(),this.#a=n===null||n.options.length===0?{moved:null}:{moved:n.active+(e.key==="ArrowDown"?1:-1)},this.requestUpdate(),this.updateComplete.then(()=>{const i=this.renderRoot.querySelector(".er-type-options"),r=i?.querySelector('[aria-selected="true"]');i&&r&&na(i,r)});return;case"Enter":{const i=n?.options[n.active];if(i===void 0||i.type===t.type.trim()){this.#y();return}e.preventDefault(),e.stopPropagation(),this.#k(i.type);return}case"Escape":if(s===null)return;e.preventDefault(),e.stopPropagation(),this.#y();return}}#k(e){this.#e!==null&&(this.#a=null,this.#w({...this.#e,type:e}))}#y(){this.#a!==null&&(this.#a=null,this.requestUpdate())}#w(e){this.#e={...e,failed:!1},this.requestUpdate()}#$(e,t=!0){const s=this.#e;s!==null&&(e||this.#E(),this.#e=null,this.#a=null,this.requestUpdate(),t&&this.updateComplete.then(()=>this.renderRoot.querySelector(`[data-er-table="${CSS.escape(s.table)}"] ${hs(s)}`)?.focus({preventScroll:!0})))}#z(e){if(e.isComposing)return;if(e.key==="Escape"){e.preventDefault(),e.stopPropagation(),this.#$(!1);return}if(e.key!=="Enter"||!(e.target instanceof HTMLInputElement)||e.target.type==="checkbox")return;e.preventDefault();const t=this.#e;if(t?.kind==="add"&&e.target.dataset.input==="add-name"&&t.type.trim()===""){e.target.closest(".er-editor")?.querySelector('[data-input="add-type"]')?.focus();return}this.#S()}#S(){const e=this.#e,t=e===null?void 0:this.visible.nodes.find(i=>i.id===e.table);if(e===null||t===void 0||!ds(e,t).ready)return;const s=e.type.trim();if(!(e.kind==="add"?this.dispatchElementAction(Qt,["node",e.table],{id:e.name.trim(),type:s,nullable:e.nullable}):this.dispatchElementAction(es,["node",e.table],{field:e.field,type:s,nullable:e.nullable}))){this.#e={...e,failed:!0},this.requestUpdate();return}this.#$(!0)}}const hs=a=>a.kind==="add"?'[data-action="add-field"]':`[data-action="edit-field"][data-field="${CSS.escape(a.field)}"]`,ue=a=>a.kind==="add"?`add:${a.table}`:`edit:${a.table}:${a.field}`,ms=()=>{customElements.get("dpk-component-er-diagram")||customElements.define("dpk-component-er-diagram",us)},he=H({en:{heading:"Architecture",node:"Service",edge:"Connection",empty:"No matching services.",boundaries:"Boundaries",edgeLabel:(a,e)=>`Connection from ${a} to ${e}`,artworkCredit:a=>`Icon credit: ${a}`},ja:{heading:"\u30A2\u30FC\u30AD\u30C6\u30AF\u30C1\u30E3\u56F3",node:"\u30B5\u30FC\u30D3\u30B9",edge:"\u63A5\u7D9A",empty:"\u8A72\u5F53\u3059\u308B\u30B5\u30FC\u30D3\u30B9\u306F\u3042\u308A\u307E\u305B\u3093\u3002",boundaries:"\u5883\u754C",edgeLabel:(a,e)=>`${a} \u304B\u3089 ${e} \u3078\u306E\u63A5\u7D9A`,artworkCredit:a=>`\u30A2\u30A4\u30B3\u30F3\u51FA\u5178: ${a}`}}),gs={width:220,height:112},Ce=26,ii=T({src:$(g(),S(1)),alt:$(g(),S(1)),license:k(g())}),ri=T({id:$(g(),S(1)),name:$(g(),S(1)),description:k(g()),boundary:k(g()),symbol:k(g()),tags:k(D(g()),[]),artwork:k(ii),position:T({x:ie(),y:ie()}),questions:k(g())}),oi=T({id:$(g(),S(1)),label:$(g(),S(1)),kind:k(_(["internal","external"]),"internal")}),di=T({id:$(g(),S(1)),from:$(g(),S(1)),to:$(g(),S(1)),label:k(g())}),li=T({boundaries:k(D(oi),[]),services:D(ri),links:k(D(di),[])}),ci=()=>({nodes:[],edges:[],boundaries:[]}),pi=a=>{const e=K(li,a),t=new Set;for(const o of e.boundaries){if(t.has(o.id))throw new Error(`duplicate boundary id: ${o.id}`);t.add(o.id)}const s=new Set,n=e.services.map(o=>{if(s.has(o.id))throw new Error(`duplicate service id: ${o.id}`);if(s.add(o.id),o.boundary!==void 0&&!t.has(o.boundary))throw new Error(`unknown boundary: ${o.boundary}`);return{id:o.id,name:o.name,description:o.description??null,boundary:o.boundary??null,symbol:o.symbol??null,artwork:o.artwork?{src:o.artwork.src,alt:o.artwork.alt,license:o.artwork.license??null}:null,tags:o.tags,width:gs.width,height:gs.height,position:o.position,...o.questions===void 0?{}:{questions:o.questions}}}),i=new Set,r=e.links.map(o=>{if(i.has(o.id))throw new Error(`duplicate link id: ${o.id}`);if(i.add(o.id),!s.has(o.from))throw new Error(`unknown link source: ${o.from}`);if(!s.has(o.to))throw new Error(`unknown link target: ${o.to}`);return{id:o.id,from:o.from,to:o.to,label:o.label??null,tags:[]}});return{nodes:n,edges:r,boundaries:e.boundaries.map(o=>({id:o.id,label:o.label,kind:o.kind}))}},We={left:Ce,top:Ce*1.6,right:Ce,bottom:Ce},ui={left:0,top:0,right:0,bottom:0},hi=12,fs=a=>({left:Math.min(...a.map(e=>e.position?.x??0)),top:Math.min(...a.map(e=>e.position?.y??0)),right:Math.max(...a.map(e=>(e.position?.x??0)+e.width)),bottom:Math.max(...a.map(e=>(e.position?.y??0)+e.height))}),mi=(a,e,t,s)=>{const n=a.left-e.left<t.right+s.right&&t.left-s.left<a.right+e.right,i=a.top-e.top<t.bottom+s.bottom&&t.top-s.top<a.bottom+e.bottom;if(!n||!i)return e;const r=Math.max(t.left-a.right,a.left-t.right),o=Math.max(t.top-a.bottom,a.top-t.bottom);if(r<0&&o<0)return e;const d=(l,c,h)=>l===0?0:Math.max(0,h-hi)*l/(l+c);return r>=o?t.left>=a.right?{...e,right:Math.min(e.right,d(e.right,s.left,r))}:{...e,left:Math.min(e.left,d(e.left,s.right,r))}:t.top>=a.bottom?{...e,bottom:Math.min(e.bottom,d(e.bottom,s.top,o))}:{...e,top:Math.min(e.top,d(e.top,s.bottom,o))}},gi=(a,e)=>{const t=e.flatMap(n=>{const i=a.filter(r=>r.boundary===n.id);return i.length===0?[]:[{boundary:n,bounds:fs(i)}]}),s=[...t.map(n=>({id:n.boundary.id,bounds:n.bounds,padding:We})),...a.filter(n=>n.boundary===null||!t.some(i=>i.boundary.id===n.boundary)).map(n=>({id:null,bounds:fs([n]),padding:ui}))];return t.map(({boundary:n,bounds:i})=>{const r=s.filter(l=>l.id!==n.id).map(l=>mi(i,We,l.bounds,l.padding)).reduce((l,c)=>({left:Math.min(l.left,c.left),top:Math.min(l.top,c.top),right:Math.min(l.right,c.right),bottom:Math.min(l.bottom,c.bottom)}),We),o=i.left-r.left,d=i.top-r.top;return{boundary:n,x:o,y:d,width:i.right+r.right-o,height:i.bottom+r.bottom-d}})},fi=(a,e)=>{const t=i=>i.y+i.height/2,s=i=>i.x+i.width/2,n=(i,r,o)=>{if(o?i.y===r.y:i.x===r.x)return[i,r];if(o){const l=(i.x+r.x)/2;return[i,{x:l,y:i.y},{x:l,y:r.y},r]}const d=(i.y+r.y)/2;return[i,{x:i.x,y:d},{x:r.x,y:d},r]};return e.x>=a.x+a.width?n({x:a.x+a.width,y:t(a)},{x:e.x,y:t(e)},!0):a.x>=e.x+e.width?n({x:a.x,y:t(a)},{x:e.x+e.width,y:t(e)},!0):e.y>=a.y+a.height?n({x:s(a),y:a.y+a.height},{x:s(e),y:e.y},!1):a.y>=e.y+e.height?n({x:s(a),y:a.y},{x:s(e),y:e.y+e.height},!1):null},bi=(a,e)=>{const t=new Map(a.nodes.map(n=>[n.id,n])),s=a.routes.map(n=>{const i=e.find(l=>l.id===n.id),r=i?t.get(i.from):void 0,o=i?t.get(i.to):void 0,d=r&&o&&r!==o?fi(r,o):null;return d===null?n:{id:n.id,points:d}});return{...a,routes:s}},ki=G`
+  .arch-toggle {
+    min-height: 26px;
+    padding: 0 9px;
+    font-size: 10.5px;
+  }
+
+  .arch-toggle[aria-pressed='true'] {
+    border-color: color-mix(in srgb, var(--dpk-blue) 40%, transparent);
+    background: var(--dpk-blue-soft);
+    color: var(--dpk-blue);
+  }
+
+  .arch-boundary {
+    position: absolute;
+    border: 1.5px dashed var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-lg);
+    background: color-mix(in srgb, var(--dpk-blue) 3%, transparent);
+    pointer-events: none;
+  }
+
+  .arch-boundary.is-external {
+    border-color: color-mix(in srgb, var(--dpk-amber) 45%, transparent);
+    background: color-mix(in srgb, var(--dpk-amber) 4%, transparent);
+  }
+
+  .arch-boundary span {
+    position: absolute;
+    top: 9px;
+    left: 14px;
+    /* Stays inside its own boundary, eliding a long label, rather than running over its neighbours. */
+    box-sizing: border-box;
+    max-width: calc(100% - 28px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding: 2px 7px;
+    border-radius: 999px;
+    background: var(--dpk-glass);
+    backdrop-filter: blur(8px);
+    font-family: var(--dpk-mono);
+    font-size: 9px;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: var(--dpk-ink-faint);
+  }
+
+  .arch-service {
+    display: grid;
+    grid-template-columns: 38px minmax(0, 1fr);
+    gap: 10px;
+    align-items: start;
+    padding: 14px 13px;
+    border: 1px solid var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-raised);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+    text-align: left;
+    overflow: hidden;
+    transition:
+      border-color 160ms var(--dpk-ease),
+      box-shadow 160ms var(--dpk-ease),
+      transform 160ms var(--dpk-ease);
+  }
+
+  .arch-service:hover {
+    border-color: var(--dpk-blue);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+    transform: translateY(-1px);
+  }
+
+  .arch-service.is-selected {
+    border-color: var(--dpk-blue);
+    box-shadow:
+      var(--dpk-bevel),
+      var(--dpk-shadow-sm),
+      0 0 0 3px var(--dpk-blue-soft);
+  }
+
+  .arch-service.is-related {
+    border-color: color-mix(in srgb, var(--dpk-green) 55%, transparent);
+    background: var(--dpk-green-soft);
+  }
+
+  .arch-artwork {
+    width: 38px;
+    height: 38px;
+    object-fit: contain;
+  }
+
+  .arch-symbol {
+    display: grid;
+    place-items: center;
+    width: 38px;
+    height: 38px;
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-paper-inset);
+    color: var(--dpk-ink-faint);
+    font-family: var(--dpk-mono);
+    font-size: 12px;
+    box-shadow: inset 0 1px 2px var(--dpk-shade-1);
+  }
+
+  .arch-body {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    min-width: 0;
+  }
+
+  .arch-name {
+    font-size: 13px;
+    font-weight: 640;
+    letter-spacing: -0.01em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .arch-description {
+    font-size: 10px;
+    line-height: 1.6;
+    color: var(--dpk-ink-faint);
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .arch-link .d-edge-path {
+    stroke: var(--dpk-rule-strong);
+    stroke-width: 1.5;
+  }
+
+  .arch-link.is-related .d-edge-path {
+    stroke: var(--dpk-green);
+    stroke-width: 2;
+  }
+
+  .arch-link.is-selected .d-edge-path {
+    stroke: var(--dpk-blue);
+    stroke-width: 2.4;
+  }
+
+  .arch-link-label {
+    font-size: 9.5px;
+    fill: var(--dpk-ink-faint);
+    paint-order: stroke;
+    stroke: var(--dpk-paper-raised);
+    stroke-width: 5px;
+    stroke-linejoin: round;
+  }
+
+  #arch-neutral .diagram-arrow {
+    fill: var(--dpk-rule-strong);
+    stroke: var(--dpk-rule-strong);
+  }
+
+  #arch-selected .diagram-arrow {
+    fill: var(--dpk-blue);
+    stroke: var(--dpk-blue);
+  }
+`,xi=[{id:"arch-neutral"},{id:"arch-selected"}];class bs extends ce{static{this.styles=[Y,ki]}#t=!0;parseData(e){return pi(e)}emptyData(){return ci()}defaultHeading(){return he(this.locale).heading}statsLabels(){const e=he(this.locale);return{node:e.node,edge:e.edge}}emptyMessage(){return he(this.locale).empty}get layoutMode(){return"fixed"}layoutOptions(){return{padding:40}}computePlacement(e){return bi(super.computePlacement(e),e.edges)}isEmpty(){return this.visible.nodes.length===0}contentSize(){const e=super.contentSize();if(e===null)return null;const t=this.#n();return t.length===0?e:{width:Math.max(e.width,...t.map(s=>s.x+s.width)),height:Math.max(e.height,...t.map(s=>s.y+s.height))}}initialView(){const e=this.visible.nodes.flatMap(n=>{const i=this.placedNode(n.id);return i?[i]:[]}),t=this.renderRoot.querySelector(".diagram-canvas"),s=Aa([...e,...this.#n()],t?.clientHeight??0);this.viewport?.reset(s??void 0)}relations(e,t){if(e===null||e.kind!=="node")return W;const s=j(t.edges,e.id,"outgoing",!1),n=j(t.edges,e.id,"incoming",!1);return{nodes:new Map([...s.nodes,...n.nodes]),edges:new Set([...s.edges,...n.edges])}}renderToolbarActions(){const e=he(this.locale);return u`
+      <button
+        type="button"
+        class="dpk-btn dpk-btn--ghost arch-toggle"
+        data-toggle="boundaries"
+        aria-pressed=${this.#t?"true":"false"}
+        @click=${()=>{this.#t=!this.#t,this.requestUpdate()}}
+      >
+        ${e.boundaries}
+      </button>
+    `}#n(){const e=this.visible.nodes.flatMap(t=>{const s=this.placedNode(t.id);return s?[{...t,position:{x:s.x,y:s.y}}]:[]});return gi(e,this.items().boundaries)}renderCanvas(){const e=he(this.locale),t=this.visible,s=i=>t.nodes.find(r=>r.id===i)?.name??i,n=t.edges.map(i=>{const r=this.edgeState(i.id),o=this.routeOf(i.id),d=we(o),l=()=>this.select({kind:"edge",id:i.id});return R`
+        <g class=${this.elementClass(r,"d-edge","arch-link")} data-link=${i.id}>
+          <title>${i.label??i.id}</title>
+          <path
+            class="d-edge-path"
+            d=${d}
+            marker-end=${`url(#${r.selected?"arch-selected":"arch-neutral"})`}
+          ></path>
+          <path
+            class="d-edge-hit"
+            d=${d}
+            role="button"
+            tabindex="0"
+            aria-label=${e.edgeLabel(s(i.from),s(i.to))}
+            @click=${l}
+            @keydown=${c=>{c.key!=="Enter"&&c.key!==" "||(c.preventDefault(),l())}}
+          ></path>
+          ${i.label===null||o.length===0?b:this.#e(i.label,o)}
+          ${this.renderEdgeCommentTrigger({kind:"edge",id:i.id},`${s(i.from)} \u2192 ${s(i.to)}${i.label===null?"":` \xB7 ${i.label}`}`,o)}
+        </g>
+      `});return u`
+      ${this.#t?this.#n().map(i=>u`<div
+                class=${`arch-boundary ${i.boundary.kind==="external"?"is-external":""}`}
+                data-boundary=${i.boundary.id}
+                style="left:${i.x}px; top:${i.y}px; width:${i.width}px; height:${i.height}px"
+              >
+                <span>${i.boundary.label}</span>
+              </div>`):b}
+      ${this.renderEdges(n,xi)} ${t.nodes.map(i=>this.#s(i,e))}
+    `}#e(e,t){const s=t[Math.floor(t.length/2)]??t[0];return s?R`<text class="arch-link-label" x=${s.x} y=${s.y-6}>${e}</text>`:u``}#s(e,t){const s=this.placedNode(e.id);if(!s)return b;const n=this.nodeState(e.id);return u`
+      <button
+        type="button"
+        class=${this.elementClass(n,"d-node","arch-service")}
+        data-service=${e.id}
+        data-grill-questions=${this.questionsOf(e)}
+        style="left:${s.x}px; top:${s.y}px; width:${e.width}px; height:${e.height}px"
+        aria-pressed=${n.selected?"true":"false"}
+        title=${e.description??e.name}
+        @click=${()=>this.select({kind:"node",id:e.id})}
+      >
+        ${e.artwork===null?u`<span class="arch-symbol" aria-hidden="true">${e.symbol??e.name.slice(0,2)}</span>`:u`<img
+                class="arch-artwork"
+                src=${e.artwork.src}
+                alt=${e.artwork.alt}
+                title=${e.artwork.license===null?b:t.artworkCredit(e.artwork.license)}
+              />`}
+        <span class="arch-body">
+          <span class="arch-name">${e.name}</span>
+          ${e.description===null?b:u`<span class="arch-description">${e.description}</span>`}
+        </span>
+      </button>
+      ${this.renderCommentTrigger({kind:"node",id:e.id},e.name,{x:s.x+e.width-20,y:s.y-14})}
+    `}}const ks=()=>{customElements.get("dpk-component-architecture-map")||customElements.define("dpk-component-architecture-map",bs)},xs=[72,52,40],vs=[0,22,10,8],vi=a=>xs[Math.min(a,xs.length-1)]??40,ys=a=>vs[Math.min(a,vs.length-1)]??8,yi=(a,e={})=>{const t=e.padding??40,s=a.nodes.find(M=>M.parent===null);if(s===void 0)return{width:0,height:0,nodes:[],routes:[]};const n=new Map(a.nodes.map(M=>[M.id,M])),i=M=>M.children.flatMap(L=>{const z=n.get(L);return z===void 0?[]:[z]}),r=new Map,o=M=>M.reduce((L,z,U)=>L+d(z)+(U===0?0:ys(z.depth)),0),d=M=>{const L=r.get(M.id);if(L!==void 0)return L;const z=Math.max(M.height,o(i(M)));return r.set(M.id,z),z},l=[],c=(M,L,z)=>{if(L.length===0)return;const U=vi(M.node.depth);let f=M.y+M.node.height/2-o(L)/2;for(const C of L){const q=d(C),F={x:z==="right"?M.x+M.node.width+U:M.x-U-C.width,y:f+q/2-C.height/2,node:C};l.push(F),c(F,i(C),z),f+=q+ys(C.depth)}},h={x:-s.width/2,y:-s.height/2,node:s};l.push(h);const p=i(s);c(h,p.filter(M=>M.side!=="left"),"right"),c(h,p.filter(M=>M.side==="left"),"left");const m=Math.min(...l.map(M=>M.x)),v=Math.min(...l.map(M=>M.y)),x=Math.max(...l.map(M=>M.x+M.node.width)),w=Math.max(...l.map(M=>M.y+M.node.height)),y=t-m,E=t-v,O=new Map,I=l.map(M=>{const L=O.get(M.node.depth)??0;return O.set(M.node.depth,L+1),{id:M.node.id,x:M.x+y,y:M.y+E,width:M.node.width,height:M.node.height,layer:M.node.depth,order:L}}),N=new Map(I.map(M=>[M.id,M])),xe=a.edges.flatMap(M=>{const L=N.get(M.from),z=N.get(M.to),U=n.get(M.to);if(L===void 0||z===void 0||U===void 0)return[];const f=U.side==="left",C={x:f?L.x:L.x+L.width,y:L.y+L.height/2},q={x:f?z.x+z.width:z.x,y:z.y+z.height/2};return[{id:M.id,points:[C,q]}]});return{width:x-m+t*2,height:w-v+t*2,nodes:I,routes:xe}},wi=a=>{const e=a[0],t=a.at(-1);if(e===void 0||t===void 0)return"";const s=(t.x-e.x)/2;return`M${e.x} ${e.y} C${e.x+s} ${e.y} ${t.x-s} ${t.y} ${t.x} ${t.y}`},me=H({en:{heading:"Mind map",empty:"No matching topics.",topics:"Topic",toggleOpen:(a,e)=>`Open ${e} subtopics of ${a}`,toggleClose:a=>`Collapse subtopics of ${a}`,addSubtopicButton:"+ Subtopic",commentButton:"Comment",addSubtopicAriaLabel:a=>`Subtopic of ${a}`,addSubtopicPlaceholder:"Subtopic title (Enter to add)",notRecorded:"Could not record it. Place this inside a dpk-template-* element.",addTopicTitle:"Add topic",addSummary:(a,e)=>`${a} \u203A ${e}`},ja:{heading:"\u30DE\u30A4\u30F3\u30C9\u30DE\u30C3\u30D7",empty:"\u8A72\u5F53\u3059\u308B\u30C8\u30D4\u30C3\u30AF\u306F\u3042\u308A\u307E\u305B\u3093\u3002",topics:"\u30C8\u30D4\u30C3\u30AF",toggleOpen:(a,e)=>`${a} \u306E\u30B5\u30D6\u30C8\u30D4\u30C3\u30AF ${e} \u4EF6\u3092\u3072\u3089\u304F`,toggleClose:a=>`${a} \u306E\u30B5\u30D6\u30C8\u30D4\u30C3\u30AF\u3092\u305F\u305F\u3080`,addSubtopicButton:"\uFF0B \u30B5\u30D6\u30C8\u30D4\u30C3\u30AF",commentButton:"\u30B3\u30E1\u30F3\u30C8",addSubtopicAriaLabel:a=>`${a} \u306E\u30B5\u30D6\u30C8\u30D4\u30C3\u30AF`,addSubtopicPlaceholder:"\u30B5\u30D6\u30C8\u30D4\u30C3\u30AF\u540D\uFF08Enter \u3067\u8FFD\u52A0\uFF09",notRecorded:"\u8A18\u9332\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\uFF08dpk-template-* \u8981\u7D20\u306E\u4E2D\u306B\u7F6E\u3044\u3066\u304F\u3060\u3055\u3044\uFF09\u3002",addTopicTitle:"\u30C8\u30D4\u30C3\u30AF\u3092\u8FFD\u52A0",addSummary:(a,e)=>`${a} \u203A ${e}`}}),ws=ia(()=>T({id:$(g(),S(1)),label:$(g(),S(1)),description:k(g()),tags:k(D(g())),questions:k(g()),collapsed:k(re()),side:k(_(["left","right"])),children:k(D(ws))})),$i=T({root:ws}),$s=()=>({root:null,nodes:[],edges:[]}),Ss=[{fontSize:16,padding:22,height:48,min:120,max:280},{fontSize:13.5,padding:15,height:34,min:80,max:240},{fontSize:12.5,padding:12,height:28,min:56,max:220}],Si=a=>Ss[Math.min(a,Ss.length-1)]??{fontSize:12.5,padding:12,height:28,min:56,max:220},Mi=(a,e)=>{let t=0;for(const s of a)t+=(s.codePointAt(0)??0)>=11904?e:e*.62;return t},Ci=(a,e)=>{const t=Si(e),s=Math.ceil(Mi(a,t.fontSize)+t.padding*2+4);return{width:Math.min(t.max,Math.max(t.min,s)),height:t.height}},Ve=a=>a.children===void 0||a.children.length===0?1:a.children.reduce((e,t)=>e+Ve(t),0),Ms=a=>{const e={left:0,right:0};for(const t of a)t.side!==void 0&&(e[t.side]+=Ve(t));return a.map(t=>{if(t.side!==void 0)return t.side;const s=e.right<=e.left?"right":"left";return e[s]+=Ve(t),s})},Cs=a=>Es(K($i,a).root),Es=(a,e=new Set)=>{const t=[],s=[],n=new Set,i=(r,o,d,l,c)=>{if(n.has(r.id))throw new Error(`duplicate topic id: ${r.id}`);if(n.add(r.id),r.side!==void 0&&d!==1)throw new Error(`side is only allowed on a main topic (a child of the root): ${r.id}`);const h=r.children??[];t.push({id:r.id,label:r.label,description:r.description??null,parent:o,depth:d,branch:l,side:c,children:h.map(m=>m.id),collapsed:r.collapsed??!1,added:e.has(r.id),tags:r.tags??[],...Ci(r.label,d),...r.questions===void 0?{}:{questions:r.questions}}),o!==null&&s.push({id:r.id,from:o,to:r.id,tags:[]});const p=d===0?Ms(h):[];h.forEach((m,v)=>i(m,r.id,d+1,d===0?v:l,d===0?p[v]??"right":c))};return i(a,null,0,-1,null),{root:a,nodes:t,edges:s}},qs="ADD_TOPIC",Ei=de({id:$(g(),S(1)),label:$(g(),te(),S(1))}),qi=a=>{const e=Ae(a);return e?.length===3&&e[1]==="node"?e[2]??null:null},Ts=(a,e,t)=>a.id===e?{...a,children:[...a.children??[],t]}:a.children===void 0?a:{...a,children:a.children.map(s=>Ts(s,e,t))},Ti=a=>{if(a.children===void 0)return a;const e=Ms(a.children);return{...a,children:a.children.map((t,s)=>({...t,side:e[s]??"right"}))}},Di=(a,e,t)=>{const s=a.addTopicTitle,n=new Map(e.nodes.map(d=>[d.id,d.label])),i=new Set,r=[];let o=e.root===null?null:Ti(e.root);for(const d of t){if(d.type!==qs){r.push({id:d.id,title:d.type,stale:"unsupported-action-type"});continue}const l=qi(d.target.id),c=l===null?void 0:n.get(l),h=oe(Ei,d.payload);if(o===null||l===null||c===void 0){r.push({id:d.id,title:s,stale:"target-missing"});continue}if(!h.success||n.has(h.output.id)){r.push({id:d.id,title:s,stale:"constraint-violated"});continue}const{id:p,label:m}=h.output;o=Ts(o,l,{id:p,label:m}),n.set(p,m),i.add(p),r.push({id:d.id,title:s,summary:a.addSummary(c,m),tone:"create"})}return{data:o===null||i.size===0?e:Es(o,i),results:r}},Ye=(a,e)=>{const t=new Map(a.nodes.map(i=>[i.id,i])),s=[];let n=t.get(e)?.parent??null;for(;n!==null&&!s.includes(n);)s.push(n),n=t.get(n)?.parent??null;return s},Li=(a,e)=>{const t=new Map(a.nodes.map(i=>[i.id,i]));let s=0;const n=[...t.get(e)?.children??[]];for(let i=n.pop();i!==void 0;i=n.pop())s+=1,n.push(...t.get(i)?.children??[]);return s},zi=(a,e,t)=>{let s=null;if(e!==null){const r=a.nodes.filter(e);if(r.length===0)return $s();const o=new Map(a.nodes.map(l=>[l.id,l])),d=new Set;for(const l of r){d.add(l.id);for(const h of Ye(a,l.id))d.add(h);const c=[...l.children];for(let h=c.pop();h!==void 0;h=c.pop())d.add(h),c.push(...o.get(h)?.children??[])}s=d}const n=a.nodes.filter(r=>(s===null||s.has(r.id))&&!Ye(a,r.id).some(o=>t.has(o))),i=new Set(n.map(r=>r.id));return{...a,nodes:n,edges:a.edges.filter(r=>i.has(r.from)&&i.has(r.to))}},Ai=G`
+  .branch-root {
+    --mind-color: var(--dpk-ink);
+    --mind-soft: var(--dpk-paper-sunken);
+  }
+  .branch-0 {
+    --mind-color: var(--dpk-blue);
+    --mind-soft: var(--dpk-blue-soft);
+  }
+  .branch-1 {
+    --mind-color: var(--dpk-green);
+    --mind-soft: var(--dpk-green-soft);
+  }
+  .branch-2 {
+    --mind-color: var(--dpk-violet);
+    --mind-soft: var(--dpk-violet-soft);
+  }
+  .branch-3 {
+    --mind-color: var(--dpk-amber);
+    --mind-soft: var(--dpk-amber-soft);
+  }
+  .branch-4 {
+    --mind-color: var(--dpk-accent);
+    --mind-soft: var(--dpk-accent-soft);
+  }
+
+  .mind-topic {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 12px;
+    border: 1px solid color-mix(in srgb, var(--mind-color) 45%, transparent);
+    border-radius: 999px;
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink);
+    font-family: var(--dpk-body);
+    font-size: 12.5px;
+    line-height: 1.3;
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+    transition:
+      border-color 160ms var(--dpk-ease),
+      box-shadow 160ms var(--dpk-ease),
+      transform 160ms var(--dpk-ease);
+  }
+
+  .mind-label {
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .mind-topic.depth-0 {
+    padding: 0 22px;
+    border: 0;
+    background: linear-gradient(155deg, color-mix(in srgb, var(--dpk-ink) 88%, transparent), var(--dpk-ink));
+    color: var(--dpk-paper-raised);
+    font-size: 16px;
+    font-weight: 680;
+    letter-spacing: -0.01em;
+    box-shadow:
+      inset 0 1px 0 var(--dpk-highlight),
+      var(--dpk-shadow-sm);
+  }
+
+  .mind-topic.depth-1 {
+    padding: 0 15px;
+    border-width: 1.5px;
+    border-color: var(--mind-color);
+    background: var(--mind-soft);
+    font-size: 13.5px;
+    font-weight: 620;
+  }
+
+  .mind-topic.depth-1 .mind-label {
+    color: color-mix(in srgb, var(--mind-color) 70%, var(--dpk-ink));
+  }
+
+  .mind-topic:hover {
+    border-color: var(--mind-color);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+    transform: translateY(-1px);
+  }
+
+  .mind-topic.is-selected {
+    border-color: var(--mind-color);
+    box-shadow:
+      var(--dpk-bevel),
+      var(--dpk-shadow-sm),
+      0 0 0 3px color-mix(in srgb, var(--mind-color) 22%, transparent);
+  }
+
+  .mind-topic.depth-0.is-selected {
+    box-shadow:
+      inset 0 1px 0 var(--dpk-highlight),
+      var(--dpk-shadow-sm),
+      0 0 0 3px var(--dpk-blue-soft);
+  }
+
+  .mind-topic.is-related {
+    border-color: var(--mind-color);
+  }
+
+  .mind-topic:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  /* Added on this page by a draft action: not authored yet. */
+  .mind-topic.is-added {
+    border-style: dashed;
+    border-color: var(--mind-color);
+  }
+
+  .mind-actions {
+    position: absolute;
+    z-index: 3;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    width: 220px;
+  }
+
+  .mind-actions .dpk-btn {
+    padding: 3px 9px;
+    font-size: 12px;
+    box-shadow: var(--dpk-shadow-xs);
+  }
+
+  .mind-actions .dpk-input {
+    width: 100%;
+    font-size: 12.5px;
+    box-shadow: var(--dpk-shadow-xs);
+  }
+
+  .mind-actions-error {
+    font-size: 11.5px;
+    line-height: 1.4;
+    color: var(--dpk-accent);
+  }
+
+  .mind-branch {
+    fill: none;
+    stroke: color-mix(in srgb, var(--mind-color) 55%, transparent);
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    cursor: default;
+    transition: opacity 150ms ease;
+  }
+
+  .mind-branch.depth-1 {
+    stroke-width: 3;
+  }
+
+  .mind-branch.depth-2 {
+    stroke-width: 2;
+  }
+
+  .mind-branch.is-related {
+    stroke: var(--mind-color);
+  }
+
+  .mind-toggle {
+    position: absolute;
+    z-index: 1;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 4px;
+    transform: translate(-50%, -50%);
+    border: 1.5px solid var(--mind-color);
+    border-radius: 999px;
+    background: var(--dpk-paper-raised);
+    color: var(--mind-color);
+    font-family: var(--dpk-mono);
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 1;
+    cursor: pointer;
+    opacity: 0;
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+    transition:
+      opacity 120ms ease,
+      box-shadow 160ms var(--dpk-ease);
+  }
+
+  .mind-toggle:hover,
+  .mind-toggle:focus-visible {
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+  }
+
+  /* Expanded toggles appear with their topic; folded ones always show the count. */
+  .mind-topic:hover + .mind-toggle,
+  .mind-toggle:hover,
+  .mind-toggle:focus-visible,
+  .mind-toggle.is-folded {
+    opacity: 1;
+  }
+
+  .mind-toggle.is-dimmed {
+    opacity: 0;
+  }
+
+  .mind-toggle.is-folded.is-dimmed {
+    opacity: 0.26;
+  }
+
+  .mind-toggle:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  @media (hover: none) {
+    .mind-toggle {
+      opacity: 1;
+    }
+  }
+`,Ri=5,Ds=.6;class Ls extends ce{static{this.styles=[Y,Ai]}#t=new Set;#n=null;#e=!1;#s=null;toggle(e,t){const s=this.items().nodes.find(i=>i.id===e);if(s===void 0||s.children.length===0)return;const n=t??!this.#t.has(e);if(n!==this.#t.has(e)){if(n){this.#t.add(e);const i=this.selection;i!==null&&Ye(this.items(),i.id).includes(e)&&this.select(null)}else this.#t.delete(e);this.requestUpdate()}}get collapsed(){return[...this.#t]}parseData(e){return Cs(e)}emptyData(){return $s()}reduceElementActions(e,t){return Di(me(this.locale),e,t)}defaultHeading(){return me(this.locale).heading}emptyMessage(){return me(this.locale).empty}statsText(){const e=me(this.locale),t=this.items().nodes.length,s=this.filtered().nodes.length;return s===t?`${t} ${e.topics}`:`${s} / ${t} ${e.topics}`}filtered(){const e=this.tagFilter,t=e.active.length===0?null:s=>se(s.tags,e);return zi(this.items(),t,this.#t)}layoutSignature(){return this.filtered().nodes.map(e=>`${e.id}<${e.parent??""}:${e.side??""}`).join(",")}computePlacement(e){return yi(e)}refreshContent(){const e=this.authoredItems();e!==this.#n&&(this.#n=e,this.#t=new Set(e.nodes.filter(t=>t.collapsed).map(t=>t.id)),this.#e=!1,this.#s=null),super.refreshContent()}initialView(){const e=this.viewport;if(e===null)return;if(this.#e){e.apply();return}this.#e=!0,e.fit();const{scale:t}=e.view();t<Ds&&e.zoom(Ds/t)}commentItems(){return this.items().nodes.map(e=>({value:this.commentRef("node",e.id),label:e.label}))}hasSelection(e){return e.kind==="node"&&this.items().nodes.some(t=>t.id===e.id)}relations(e,t){if(e===null||e.kind!=="node")return{nodes:new Map,edges:new Set};const s=j(t.edges,e.id,"outgoing",!0),n=j(t.edges,e.id,"incoming",!0);return{nodes:new Map([...s.nodes,...n.nodes]),edges:new Set([...s.edges,...n.edges])}}renderSelection(){return b}renderCanvas(){const e=this.filtered(),t=me(this.locale);return u`
+      ${this.renderEdges(e.edges.map(s=>this.#a(s)),[])}
+      ${e.nodes.map(s=>this.#r(s,t))} ${this.#c(t)}
+    `}#i(e){return e===void 0||e.branch<0?"branch-root":`branch-${e.branch%Ri}`}#a(e){const t=this.items().nodes.find(n=>n.id===e.to),s=this.edgeState(e.id);return R`
+      <path
+        class=${this.elementClass(s,"d-edge","mind-branch",this.#i(t),`depth-${Math.min(t?.depth??1,3)}`)}
+        data-branch=${e.id}
+        d=${wi(this.routeOf(e.id))}
+      ></path>
+    `}#r(e,t){const s=this.placedNode(e.id);if(!s)return b;const n=this.nodeState(e.id),i=this.#t.has(e.id),r=`depth-${Math.min(e.depth,3)}`;return u`
+      <button
+        type="button"
+        class=${this.elementClass(n,"d-node","mind-topic",r,this.#i(e),i&&"is-folded",e.added&&"is-added")}
+        data-topic=${e.id}
+        data-grill-questions=${this.questionsOf(e)}
+        style="left:${s.x}px; top:${s.y}px; width:${s.width}px; height:${s.height}px"
+        aria-pressed=${n.selected?"true":"false"}
+        title=${e.description??e.label}
+        @click=${()=>this.select({kind:"node",id:e.id})}
+      >
+        <span class="mind-label">${e.label}</span>
+      </button>
+      ${e.depth===0||e.children.length===0?b:this.#o(e,s,i,n.dimmed,t)}
+    `}#o(e,t,s,n,i){const r=s?Li(this.items(),e.id):0,o=e.side==="left"?t.x:t.x+t.width,d=s?i.toggleOpen(e.label,r):i.toggleClose(e.label);return u`
+      <button
+        type="button"
+        class=${this.elementClass({selected:!1,related:!1,dimmed:n,depth:null},"mind-toggle",this.#i(e),s&&"is-folded")}
+        data-toggle=${e.id}
+        style="left:${o}px; top:${t.y+t.height/2}px"
+        aria-expanded=${s?"false":"true"}
+        aria-label=${d}
+        title=${d}
+        @click=${l=>{l.stopPropagation(),this.toggle(e.id)}}
+      >
+        ${s?r:"\u2212"}
+      </button>
+    `}#c(e){const t=this.selection;if(t===null||t.kind!=="node")return b;const s=this.items().nodes.find(r=>r.id===t.id),n=this.placedNode(t.id);if(s===void 0||n===void 0)return b;const i=this.#s?.parent===s.id?this.#s:null;return u`
+      <div
+        class="mind-actions"
+        data-for=${s.id}
+        style="left:${this.#p(s,n)}px; top:${n.y+n.height+8}px"
+        @click=${r=>r.stopPropagation()}
+      >
+        ${i===null?u`
+                <button type="button" class="dpk-btn" data-action="add" @click=${()=>this.#l(s.id)}>
+                  ${e.addSubtopicButton}
+                </button>
+                <button
+                  type="button"
+                  class="dpk-btn"
+                  data-action="comment"
+                  @click=${()=>this.requestElementComment("node",s.id)}
+                >
+                  ${e.commentButton}
+                </button>
+              `:u`
+                <input
+                  class="dpk-input"
+                  aria-label="${e.addSubtopicAriaLabel(s.label)}"
+                  placeholder="${e.addSubtopicPlaceholder}"
+                  .value=${i.label}
+                  @input=${r=>{const o=r.currentTarget;o instanceof HTMLInputElement&&(this.#s={...i,label:o.value,failed:!1})}}
+                  @keydown=${r=>this.#u(r,s.id)}
+                />
+                ${i.failed?u`<span class="mind-actions-error" role="alert">${e.notRecorded}</span>`:b}
+              `}
+      </div>
+    `}#p(e,t){return e.side==="left"?t.x+t.width-220:t.x}#l(e){this.#s={parent:e,label:"",failed:!1},this.requestUpdate(),this.updateComplete.then(()=>this.renderRoot.querySelector(".mind-actions input")?.focus())}#u(e,t){if(e.isComposing)return;if(e.key==="Escape"){e.preventDefault(),this.#s=null,this.requestUpdate();return}if(e.key!=="Enter")return;e.preventDefault();const s=this.#s?.label.trim()??"";if(s.length===0)return;const n=dt(`topic ${s}`,this.items().nodes.map(r=>r.id));if(!this.dispatchElementAction(qs,["node",t],{id:n,label:s})){this.#s={parent:t,label:s,failed:!0},this.requestUpdate();return}this.#s=null,this.#t.delete(t),this.select({kind:"node",id:n}),this.requestUpdate()}}const zs=()=>{customElements.get("dpk-component-mind-map")||customElements.define("dpk-component-mind-map",Ls)},ge=H({en:{heading:"Kanban",empty:"No columns.",cards:"Card",notRecorded:"Could not record it. Place this inside a dpk-template-* element.",wipLimit:a=>`WIP limit ${a}`,addCardButton:"+ Card",addCardAriaLabel:a=>`Card to add to ${a}`,addCardPlaceholder:"Card title (Enter to add)",addCardTitle:"Add card",moveCardTitle:"Move card",addSummary:(a,e)=>`${a} \u203A ${e}`,moveSummarySame:(a,e)=>`${a}: reorder within ${e}`,moveSummaryAcross:(a,e,t)=>`${a}: ${e} \u2192 ${t}`},ja:{heading:"\u30AB\u30F3\u30D0\u30F3",empty:"\u5217\u304C\u3042\u308A\u307E\u305B\u3093\u3002",cards:"\u30AB\u30FC\u30C9",notRecorded:"\u8A18\u9332\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\uFF08dpk-template-* \u8981\u7D20\u306E\u4E2D\u306B\u7F6E\u3044\u3066\u304F\u3060\u3055\u3044\uFF09\u3002",wipLimit:a=>`WIP \u4E0A\u9650 ${a}`,addCardButton:"\uFF0B \u30AB\u30FC\u30C9",addCardAriaLabel:a=>`${a} \u306B\u8FFD\u52A0\u3059\u308B\u30AB\u30FC\u30C9`,addCardPlaceholder:"\u30AB\u30FC\u30C9\u540D\uFF08Enter \u3067\u8FFD\u52A0\uFF09",addCardTitle:"\u30AB\u30FC\u30C9\u3092\u8FFD\u52A0",moveCardTitle:"\u30AB\u30FC\u30C9\u3092\u79FB\u52D5",addSummary:(a,e)=>`${a} \u203A ${e}`,moveSummarySame:(a,e)=>`${a}: ${e} \u5185\u3067\u4E26\u3079\u66FF\u3048`,moveSummaryAcross:(a,e,t)=>`${a}: ${e} \u2192 ${t}`}}),Oi=T({id:$(g(),S(1)),title:$(g(),S(1)),description:k(g()),tags:k(D(g())),assignee:k(g()),questions:k(g())}),Ii=["gray","blue","green","amber","violet","red"],Fi=T({id:$(g(),S(1)),label:$(g(),S(1)),description:k(g()),color:k(_(Ii)),limit:k($(ie(),da(),oa(1))),cards:k(D(Oi))}),Ni=T({columns:D(Fi)}),Pi=()=>({columns:[]}),As=a=>{const e=K(Ni,a),t=new Set,s=new Set;return{columns:e.columns.map(i=>{if(t.has(i.id))throw new Error(`duplicate column id: ${i.id}`);return t.add(i.id),{id:i.id,label:i.label,description:i.description??null,color:i.color??null,limit:i.limit??null,cards:(i.cards??[]).map(r=>{if(s.has(r.id))throw new Error(`duplicate card id: ${r.id}`);return s.add(r.id),{id:r.id,title:r.title,description:r.description??null,tags:r.tags??[],assignee:r.assignee??null,...r.questions===void 0?{}:{questions:r.questions},column:i.id,change:null}})}})}},Ee=(a,e)=>a.columns.flatMap(t=>t.cards).find(t=>t.id===e),fe=a=>a.columns.flatMap(e=>e.cards),ji=(a,e)=>e===null?a:{columns:a.columns.map(t=>({...t,cards:t.cards.filter(e)}))},Ui=(a,e,t,s)=>{const n=Ee(a,e);if(n===void 0||n.column!==t)return!1;if(s===e)return!0;const i=a.columns.find(o=>o.id===t)?.cards??[],r=i.findIndex(o=>o.id===e);return(i[r+1]?.id??null)===s},Rs="ADD_CARD",Os="MOVE_CARD",_i=de({id:$(g(),S(1)),title:$(g(),te(),S(1))}),Bi=de({column:$(g(),S(1)),before:ra($(g(),S(1)))}),Is=(a,e)=>{const t=Ae(a);return t?.length===3&&t[1]===e?t[2]??null:null},Hi=(a,e)=>({columns:a.columns.map(t=>t.cards.some(s=>s.id===e)?{...t,cards:t.cards.filter(s=>s.id!==e)}:t)}),Fs=(a,e,t)=>({columns:a.columns.map(s=>{if(s.id!==t.column)return s;const n={...e,column:s.id},i=t.before===null?-1:s.cards.findIndex(r=>r.id===t.before);return{...s,cards:i<0?[...s.cards,n]:[...s.cards.slice(0,i),n,...s.cards.slice(i)]}})}),Gi=(a,e,t)=>{const s=a.addCardTitle,n=Is(t.target.id,"column"),i=e.columns.find(d=>d.id===n);if(i===void 0)return{data:e,result:{id:t.id,title:s,stale:"target-missing"}};const r=oe(_i,t.payload);if(!r.success||Ee(e,r.output.id)!==void 0)return{data:e,result:{id:t.id,title:s,stale:"constraint-violated"}};const o={id:r.output.id,title:r.output.title,description:null,tags:[],assignee:null,column:i.id,change:"added"};return{data:Fs(e,o,{column:i.id,before:null}),result:{id:t.id,title:s,summary:a.addSummary(i.label,o.title),tone:"create"}}},Ki=(a,e,t)=>{const s=a.moveCardTitle,n=Is(t.target.id,"card"),i=n===null?void 0:Ee(e,n);if(i===void 0)return{data:e,result:{id:t.id,title:s,stale:"target-missing"}};const r=oe(Bi,t.payload),o=e.columns.find(m=>m.id===i.column),d=r.success?e.columns.find(m=>m.id===r.output.column):void 0,l=r.success?r.output.before:null,c=l===null||l!==i.id&&d?.cards.some(m=>m.id===l)===!0;if(!r.success||o===void 0||d===void 0||!c)return{data:e,result:{id:t.id,title:s,stale:"constraint-violated"}};const h={...i,change:i.change??"moved"},p=o.id===d.id?a.moveSummarySame(i.title,d.label):a.moveSummaryAcross(i.title,o.label,d.label);return{data:Fs(Hi(e,i.id),h,{column:d.id,before:l}),result:{id:t.id,title:s,summary:p,tone:"move"}}},Wi=(a,e,t)=>{let s=e;const n=[];for(const i of t){const r=i.type===Rs?Gi(a,s,i):i.type===Os?Ki(a,s,i):{data:s,result:{id:i.id,title:i.type,stale:"unsupported-action-type"}};s=r.data,n.push(r.result)}return{data:s,results:n}},Vi=G`
+  .kanban-board {
+    display: flex;
+    align-items: flex-start;
+    gap: 14px;
+    width: max-content;
+    padding: 18px;
+  }
+
+  .kanban-column {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    width: 264px;
+    padding: 10px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-lg);
+    background: var(--dpk-paper-sunken);
+    box-shadow: inset 0 1px 3px var(--dpk-shade-1);
+    cursor: default;
+    transition:
+      border-color 150ms var(--dpk-ease),
+      box-shadow 150ms var(--dpk-ease);
+  }
+
+  .kanban-column.is-selected {
+    border-color: color-mix(in srgb, var(--dpk-blue) 55%, transparent);
+    box-shadow:
+      inset 0 1px 3px var(--dpk-shade-1),
+      inset 0 0 0 2px color-mix(in srgb, var(--dpk-blue) 40%, transparent);
+  }
+
+  .kanban-column.is-drop-target {
+    border-color: var(--dpk-blue);
+    background: color-mix(in srgb, var(--dpk-blue-soft) 60%, var(--dpk-paper-sunken));
+    box-shadow:
+      inset 0 1px 3px var(--dpk-shade-1),
+      inset 0 0 0 2px color-mix(in srgb, var(--dpk-blue) 30%, transparent);
+  }
+
+  .kanban-column-head {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .kanban-column-title {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    padding: 2px 34px 2px 2px;
+    border: 0;
+    border-radius: var(--dpk-radius-xs);
+    background: none;
+    color: var(--dpk-ink);
+    font-family: var(--dpk-body);
+    font-size: 13px;
+    font-weight: 650;
+    letter-spacing: -0.01em;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .kanban-column-title:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  .kanban-column-label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* An authored color marks the heading, not the cards: the status reads at a glance. */
+  .kanban-column[data-color='gray'] {
+    --kanban-tone: var(--dpk-ink-soft);
+  }
+
+  .kanban-column[data-color='blue'] {
+    --kanban-tone: var(--dpk-blue);
+  }
+
+  .kanban-column[data-color='green'] {
+    --kanban-tone: var(--dpk-green);
+  }
+
+  .kanban-column[data-color='amber'] {
+    --kanban-tone: var(--dpk-amber);
+  }
+
+  .kanban-column[data-color='violet'] {
+    --kanban-tone: var(--dpk-violet);
+  }
+
+  .kanban-column[data-color='red'] {
+    --kanban-tone: var(--dpk-accent);
+  }
+
+  .kanban-column[data-color] .kanban-column-label {
+    padding: 2px 9px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--kanban-tone) 14%, transparent);
+    color: var(--kanban-tone);
+  }
+
+  .kanban-count {
+    flex: none;
+    padding: 1px 7px;
+    border-radius: 999px;
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink-soft);
+    font-family: var(--dpk-mono);
+    font-size: 11px;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+  }
+
+  /* Over its WIP limit: the column asks for attention, not the cards. */
+  .kanban-column.is-over {
+    border-color: color-mix(in srgb, var(--dpk-accent) 55%, transparent);
+  }
+
+  .kanban-column.is-over .kanban-count {
+    background: var(--dpk-accent-soft);
+    color: var(--dpk-accent);
+  }
+
+  .kanban-column-head > .diagram-comment-trigger {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translateY(-50%);
+  }
+
+  .kanban-column-description {
+    margin: 0 2px;
+    color: var(--dpk-ink-soft);
+    font-size: 11.5px;
+    line-height: 1.45;
+  }
+
+  .kanban-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-height: 44px;
+  }
+
+  .kanban-card-slot {
+    position: relative;
+  }
+
+  .kanban-card {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+    padding: 9px 34px 9px 11px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: var(--dpk-radius-sm);
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink);
+    font-family: var(--dpk-body);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
+    cursor: grab;
+    transition:
+      border-color 150ms var(--dpk-ease),
+      box-shadow 150ms var(--dpk-ease),
+      opacity 150ms var(--dpk-ease),
+      transform 150ms var(--dpk-ease);
+  }
+
+  .kanban-card:hover {
+    border-color: var(--dpk-rule-hover);
+    box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+    transform: translateY(-1px);
+  }
+
+  .kanban-card.is-selected {
+    border-color: color-mix(in srgb, var(--dpk-blue) 55%, transparent);
+    box-shadow:
+      var(--dpk-bevel),
+      inset 0 0 0 2px color-mix(in srgb, var(--dpk-blue) 45%, transparent),
+      var(--dpk-shadow-xs);
+  }
+
+  .kanban-card:focus-visible {
+    outline: none;
+    box-shadow: var(--dpk-focus);
+  }
+
+  .kanban-card.is-dragging {
+    opacity: 0.45;
+    transform: rotate(-1.5deg) scale(0.98);
+    box-shadow: var(--dpk-shadow-sm);
+  }
+
+  /* Changed on this page by a draft action: not authored yet. */
+  .kanban-card.is-added {
+    border-style: dashed;
+    border-color: var(--dpk-green);
+    background: linear-gradient(var(--dpk-green-soft), var(--dpk-green-soft)), var(--dpk-paper-raised);
+  }
+
+  .kanban-card.is-moved {
+    border-color: var(--dpk-blue);
+    background: linear-gradient(var(--dpk-blue-soft), var(--dpk-blue-soft)), var(--dpk-paper-raised);
+  }
+
+  .kanban-card-title {
+    font-size: 13px;
+    font-weight: 600;
+    letter-spacing: -0.005em;
+    line-height: 1.45;
+    overflow-wrap: anywhere;
+  }
+
+  .kanban-card-description {
+    display: -webkit-box;
+    overflow: hidden;
+    color: var(--dpk-ink-soft);
+    font-size: 11.5px;
+    line-height: 1.45;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    overflow-wrap: anywhere;
+  }
+
+  .kanban-card-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .kanban-tag {
+    padding: 1px 7px;
+    border: 1px solid var(--dpk-rule);
+    border-radius: 999px;
+    background: var(--dpk-paper-sunken);
+    color: var(--dpk-ink-soft);
+    font-size: 10.5px;
+  }
+
+  .kanban-assignee {
+    margin-left: auto;
+    color: var(--dpk-ink-faint);
+    font-size: 11px;
+  }
+
+  .kanban-assignee::before {
+    content: '';
+    display: inline-block;
+    width: 5px;
+    height: 5px;
+    margin-right: 4px;
+    border-radius: 999px;
+    background: var(--dpk-ink-faint);
+    vertical-align: middle;
+  }
+
+  .kanban-card-slot > .diagram-comment-trigger {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 2;
+  }
+
+  .kanban-error {
+    margin: 6px 0 0;
+    padding: 4px 7px;
+    border-radius: var(--dpk-radius-xs);
+    background: var(--dpk-accent-soft);
+    color: var(--dpk-accent);
+    font-size: 11.5px;
+    line-height: 1.4;
+  }
+
+  /* Takes no room of its own, so the cards do not jump while dragging. */
+  .kanban-drop-marker {
+    height: 3px;
+    margin: -5.5px 0;
+    border-radius: 2px;
+    background: var(--dpk-blue);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dpk-blue) 22%, transparent);
+    animation: dpk-drop-in 140ms var(--dpk-ease-spring) backwards;
+  }
+
+  @keyframes dpk-drop-in {
+    from {
+      opacity: 0;
+      transform: scaleX(0.4);
+    }
+  }
+
+  .kanban-add {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .kanban-add-button {
+    padding: 6px 8px;
+    border: 1px dashed var(--dpk-rule-strong);
+    border-radius: var(--dpk-radius-sm);
+    background: none;
+    color: var(--dpk-ink-soft);
+    font-family: var(--dpk-body);
+    font-size: 12px;
+    text-align: left;
+    cursor: pointer;
+    transition:
+      border-color 140ms var(--dpk-ease),
+      background 140ms var(--dpk-ease),
+      color 140ms var(--dpk-ease);
+  }
+
+  .kanban-add-button:hover,
+  .kanban-add-button:focus-visible {
+    border-color: color-mix(in srgb, var(--dpk-blue) 45%, var(--dpk-rule-strong));
+    background: var(--dpk-paper-raised);
+    color: var(--dpk-ink);
+    outline: none;
+  }
+
+  .kanban-add .dpk-input {
+    width: 100%;
+    font-size: 12.5px;
+  }
+`;class Ns extends Fe{static{this.styles=[Y,Vi]}#t=null;#n=null;#e=null;#s=null;#i=null;parseData(e){return As(e)}emptyData(){return Pi()}reduceElementActions(e,t){return Wi(ge(this.locale),e,t)}defaultHeading(){return ge(this.locale).heading}shellClass(){return"kanban"}emptyMessage(){return ge(this.locale).empty}commentItems(){const e=this.items();return[...e.columns.map(t=>({value:this.commentRef("column",t.id),label:t.label})),...fe(e).map(t=>({value:this.commentRef("card",t.id),label:t.title}))]}hasSelection(e){const t=this.items();return e.kind==="column"?t.columns.some(s=>s.id===e.id):Ee(t,e.id)!==void 0}tagItems(){return fe(this.items()).map(e=>e.tags)}statsText(){const e=ge(this.locale),t=fe(this.items()).length,s=fe(this.#a()).length;return s===t?`${t} ${e.cards}`:`${s} / ${t} ${e.cards}`}isEmpty(){return this.items().columns.length===0}viewAlign(){return"start"}contentSize(){if(this.isEmpty())return null;const e=this.renderRoot.querySelector(".kanban-board");return{width:e?.offsetWidth??0,height:e?.offsetHeight??0}}refreshContent(){const e=this.authoredItems();e!==this.#t&&(this.#t=e,this.#n=null,this.#e=null)}renderCanvas(){const e=this.#a(),t=new Map(this.items().columns.map(s=>[s.id,s.cards.length]));return u`<div class="kanban-board">
+      ${Q(e.columns,s=>s.id,s=>this.#o(s,t.get(s.id)??0))}
+    </div>`}#a(){const e=this.tagFilter;return ji(this.items(),e.active.length===0?null:t=>se(t.tags,e))}#r(e,t){const s=this.selection;return s!==null&&s.kind===e&&s.id===t}#o(e,t){const s=ge(this.locale),n=e.limit!==null&&t>e.limit,i=this.#i?.column===e.id?this.#i:null;return u`
+      <section
+        class=${V("kanban-column",n&&"is-over",this.#r("column",e.id)&&"is-selected",i!==null&&"is-drop-target")}
+        data-column=${e.id}
+        data-color=${e.color??b}
+        aria-label=${e.label}
+      >
+        <div class="kanban-column-head">
+          <button
+            type="button"
+            class="kanban-column-title"
+            aria-pressed=${this.#r("column",e.id)?"true":"false"}
+            title=${e.description??e.label}
+            @click=${()=>this.select({kind:"column",id:e.id})}
+          >
+            <span class="kanban-column-label">${e.label}</span>
+            <span class="kanban-count" title=${e.limit===null?b:s.wipLimit(e.limit)}>
+              ${e.limit===null?t:`${t} / ${e.limit}`}
+            </span>
+          </button>
+          ${this.renderCommentTrigger({kind:"column",id:e.id},e.label)}
+        </div>
+        ${e.description===null?b:u`<p class="kanban-column-description">${e.description}</p>`}
+        <div
+          class="kanban-cards"
+          @dragover=${r=>this.#d(r,e.id)}
+          @dragleave=${r=>this.#m(r)}
+          @drop=${r=>this.#g(r,e.id)}
+        >
+          ${Q(e.cards,r=>r.id,r=>u`${i?.before===r.id?this.#c():b}${this.#p(r,s)}`)}
+          ${i!==null&&i.before===null?this.#c():b}
+        </div>
+        ${this.#l(e,s)}
+      </section>
+    `}#c(){return u`<div class="kanban-drop-marker" aria-hidden="true"></div>`}#p(e,t){const s=this.#r("card",e.id);return u`
+      <div class="kanban-card-slot">
+        <div
+          role="button"
+          tabindex="0"
+          draggable="true"
+          class=${V("kanban-card",s&&"is-selected",e.change==="added"&&"is-added",e.change==="moved"&&"is-moved",this.#s===e.id&&"is-dragging")}
+          data-card=${e.id}
+          data-grill-questions=${this.questionsOf(e)}
+          title=${e.description??e.title}
+          aria-pressed=${s?"true":"false"}
+          @click=${()=>this.select({kind:"card",id:e.id})}
+          @keydown=${n=>this.#u(n,e.id)}
+          @dragstart=${n=>this.#b(n,e.id)}
+          @dragend=${()=>this.#f()}
+        >
+          <span class="kanban-card-title">${e.title}</span>
+          ${e.description===null?b:u`<span class="kanban-card-description">${e.description}</span>`}
+          ${e.tags.length===0&&e.assignee===null?b:u`<span class="kanban-card-meta">
+                  ${e.tags.map(n=>u`<span class="kanban-tag">${n}</span>`)}
+                  ${e.assignee===null?b:u`<span class="kanban-assignee">${e.assignee}</span>`}
+                </span>`}
+        </div>
+        ${this.renderCommentTrigger({kind:"card",id:e.id},e.title)}
+        ${this.#e===e.id?u`<p class="kanban-error" role="alert">${t.notRecorded}</p>`:b}
+      </div>
+    `}#l(e,t){const s=this.#n?.column===e.id?this.#n:null;return u`<div class="kanban-add">
+      ${s===null?u`<button
+              type="button"
+              class="kanban-add-button"
+              data-action="add"
+              @click=${()=>this.#M(e.id)}
+            >
+              ${t.addCardButton}
+            </button>`:u`
+              <input
+                class="dpk-input"
+                aria-label="${t.addCardAriaLabel(e.label)}"
+                placeholder="${t.addCardPlaceholder}"
+                .value=${s.title}
+                @input=${n=>{const i=n.currentTarget;i instanceof HTMLInputElement&&(this.#n={...s,title:i.value,failed:!1})}}
+                @keydown=${n=>this.#C(n,e.id)}
+              />
+              ${s.failed?u`<span class="kanban-error" role="alert">${t.notRecorded}</span>`:b}
+            `}
+    </div>`}#u(e,t){e.target!==e.currentTarget||e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.select({kind:"card",id:t}))}#h(e,t){const s=this.dispatchElementAction(Os,["card",e],{column:t.column,before:t.before});this.#e=s?null:e,this.select({kind:"card",id:e}),this.requestUpdate()}#b(e,t){this.#s=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t)),this.requestUpdate()}#d(e,t){if(this.#s===null)return;e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move");const s=this.#x(e,t);this.#i?.column===s.column&&this.#i.before===s.before||(this.#i=s,this.requestUpdate())}#m(e){const t=e.currentTarget;!(t instanceof HTMLElement)||e.relatedTarget instanceof Node&&t.contains(e.relatedTarget)||(this.#i=null,this.requestUpdate())}#g(e,t){const s=this.#s;if(s===null)return;e.preventDefault();const n=this.#x(e,t);this.#f(),Ui(this.items(),s,n.column,n.before)||this.#h(s,n)}#f(){this.#s===null&&this.#i===null||(this.#s=null,this.#i=null,this.requestUpdate())}#x(e,t){const s=e.currentTarget,i=(s instanceof HTMLElement?[...s.querySelectorAll("[data-card]")]:[]).find(r=>{if(r.dataset.card===this.#s)return!1;const o=r.getBoundingClientRect();return o.top+o.height/2>e.clientY});return{column:t,before:i?.dataset.card??null}}#M(e){this.#n={column:e,title:"",failed:!1},this.requestUpdate(),this.updateComplete.then(()=>this.renderRoot.querySelector(`[data-column="${CSS.escape(e)}"] .kanban-add input`)?.focus({preventScroll:!0}))}#C(e,t){if(e.isComposing)return;if(e.key==="Escape"){e.preventDefault(),this.#n=null,this.requestUpdate();return}if(e.key!=="Enter")return;e.preventDefault();const s=this.#n?.title.trim()??"";if(s.length===0)return;const n=[...this.items().columns.map(r=>r.id),...fe(this.items()).map(r=>r.id)],i=dt(`card ${s}`,n);if(!this.dispatchElementAction(Rs,["column",t],{id:i,title:s})){this.#n={column:t,title:s,failed:!0},this.requestUpdate();return}this.#n=null,this.select({kind:"card",id:i}),this.requestUpdate()}}const Ps=()=>{customElements.get("dpk-component-kanban")||customElements.define("dpk-component-kanban",Ns)},Yi=H({en:{heading:"Formal spec",empty:"No claims.",dataError:"Could not load the specification data.",claims:a=>`${a} ${a===1?"claim":"claims"}`,subjects:"For",premises:"Given",conclusions:"Then",noPremises:"None \u2014 holds unconditionally",showDetails:"Show the details of this claim",hideDetails:"Hide the details of this claim",examples:"Examples",notClaimed:"Not claimed",usesTerms:"Terms",source:"Source",proved:"Proved",conditional:"Proved under assumptions",bounded:"Checked within bounds",incomplete:"Incomplete",provedDetail:"Machine-checked to hold in every case.",conditionalDetail:"Holds in every case, provided the assumptions are true.",boundedDetail:"Every case within the bound was checked; nothing outside it was.",incompleteDetail:"The proof is not finished. Nothing here is guaranteed yet.",planned:"Planned",plannedDetail:"Not proved yet: a property proposed to be proved, for agreement before the work starts.",target:"About",noClaims:"No claims yet.",assumptions:"Assumes",bound:"Checked within",gaps:"Unfinished",commentOn:a=>`Comment on ${a}`,sendFailed:"Could not send. Place this inside a dpk-template-* element."},ja:{heading:"\u5F62\u5F0F\u4ED5\u69D8",empty:"\u4E3B\u5F35\u304C\u3042\u308A\u307E\u305B\u3093\u3002",dataError:"\u4ED5\u69D8\u306E\u30C7\u30FC\u30BF\u3092\u8AAD\u307F\u8FBC\u3081\u307E\u305B\u3093\u3067\u3057\u305F\u3002",claims:a=>`${a} \u4EF6\u306E\u4E3B\u5F35`,subjects:"\u5165\u529B\u30FB\u72B6\u6CC1",premises:"\u524D\u63D0",conclusions:"\u7D50\u8AD6",noPremises:"\u306A\u3057 \u2014 \u7121\u6761\u4EF6\u306B\u6210\u308A\u7ACB\u3064",showDetails:"\u3053\u306E\u4E3B\u5F35\u306E\u8A73\u7D30\u3092\u958B\u304F",hideDetails:"\u3053\u306E\u4E3B\u5F35\u306E\u8A73\u7D30\u3092\u9589\u3058\u308B",examples:"\u5177\u4F53\u4F8B",notClaimed:"\u4E3B\u5F35\u3057\u3066\u3044\u306A\u3044\u3053\u3068",usesTerms:"\u4F7F\u3046\u7528\u8A9E",source:"\u51FA\u5178",proved:"\u8A3C\u660E\u6E08\u307F",conditional:"\u4EEE\u5B9A\u3064\u304D\u3067\u8A3C\u660E\u6E08\u307F",bounded:"\u7BC4\u56F2\u3092\u9650\u3063\u3066\u78BA\u8A8D",incomplete:"\u672A\u5B8C\u6210",provedDetail:"\u3059\u3079\u3066\u306E\u5834\u5408\u306B\u6210\u308A\u7ACB\u3064\u3053\u3068\u304C\u6A5F\u68B0\u7684\u306B\u78BA\u304B\u3081\u3089\u308C\u3066\u3044\u307E\u3059\u3002",conditionalDetail:"\u4EEE\u5B9A\u304C\u6B63\u3057\u3051\u308C\u3070\u3001\u3059\u3079\u3066\u306E\u5834\u5408\u306B\u6210\u308A\u7ACB\u3061\u307E\u3059\u3002",boundedDetail:"\u7BC4\u56F2\u5185\u306F\u3059\u3079\u3066\u306E\u5834\u5408\u3092\u78BA\u304B\u3081\u307E\u3057\u305F\u3002\u7BC4\u56F2\u306E\u5916\u306F\u78BA\u304B\u3081\u3066\u3044\u307E\u305B\u3093\u3002",incompleteDetail:"\u8A3C\u660E\u304C\u7D42\u308F\u3063\u3066\u3044\u307E\u305B\u3093\u3002\u3053\u306E\u4E3B\u5F35\u306F\u307E\u3060\u4FDD\u8A3C\u3055\u308C\u3066\u3044\u307E\u305B\u3093\u3002",planned:"\u8A3C\u660E\u4E88\u5B9A",plannedDetail:"\u307E\u3060\u8A3C\u660E\u3057\u3066\u3044\u307E\u305B\u3093\u3002\u3053\u308C\u304B\u3089\u8A3C\u660E\u3059\u308B\u6027\u8CEA\u3068\u3057\u3066\u3001\u5408\u610F\u3092\u3068\u308B\u305F\u3081\u306E\u6848\u3067\u3059\u3002",target:"\u5BFE\u8C61",noClaims:"\u307E\u3060\u4E3B\u5F35\u304C\u3042\u308A\u307E\u305B\u3093\u3002",assumptions:"\u4EEE\u5B9A",bound:"\u78BA\u8A8D\u3057\u305F\u7BC4\u56F2",gaps:"\u7D42\u308F\u3063\u3066\u3044\u306A\u3044\u90E8\u5206",commentOn:a=>`${a}\u306B\u30B3\u30E1\u30F3\u30C8`,sendFailed:"\u9001\u4FE1\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\uFF08dpk-template-* \u8981\u7D20\u306E\u4E2D\u306B\u7F6E\u3044\u3066\u304F\u3060\u3055\u3044\uFF09\u3002"}}),P=$(g(),te(),S(1)),be=T({id:le,text:P}),Ji=nt("kind",[T({kind:ee("proved"),assumptions:k(D(P))}),T({kind:ee("bounded"),bound:P}),T({kind:ee("incomplete"),gaps:k(D(P))}),T({kind:ee("planned")})]),Xi=T({id:le,target:k(le),statement:P,subjects:k(D(be)),premises:k(D(be)),conclusions:$(D(be),S(1,"a claim needs at least one conclusion")),examples:k(D(be)),notClaimed:k(D(be)),assurance:Ji,source:k(T({tool:k(P),ref:P}))}),Zi=T({id:le,name:P,meaning:P}),Qi=T({id:le,name:P,code:k(P),summary:k(P)}),er=T({targets:k(D(Qi)),terms:k(D(Zi)),claims:D(Xi)}),tr=()=>({targets:[],terms:[],claims:[]}),sr=/\[\[([^\]|]+)(?:\|([^\]]+))?\]\]/g,ar=(a,e)=>{const t=[];let s=0;for(const n of a.matchAll(sr)){const i=(n[1]??"").trim(),r=e.get(i);if(r===void 0)throw new Error(`unknown term reference: [[${i}]]`);n.index>s&&t.push({kind:"text",text:a.slice(s,n.index)}),t.push({kind:"term",id:i,label:n[2]?.trim()||r}),s=n.index+n[0].length}return s<a.length&&t.push({kind:"text",text:a.slice(s)}),t},Je=a=>a.map(e=>e.kind==="text"?e.text:e.label).join(""),nr=a=>[...new Set(a.flatMap(e=>e.flatMap(t=>t.kind==="term"?[t.id]:[])))],qe=(a,e)=>{const t=new Set;for(const s of a){if(t.has(s))throw new Error(`duplicate ${e} id: ${s}`);t.add(s)}},js=a=>{const e=K(er,a),t=e.targets??[],s=e.terms??[];qe(t.map(c=>c.id),"target"),qe(s.map(c=>c.id),"term"),qe(e.claims.map(c=>c.id),"claim");const n=new Map(s.map(c=>[c.id,c.name])),i=c=>ar(c,n),r=s.map(c=>({id:c.id,name:c.name,meaning:i(c.meaning)})),o=t.map(c=>({id:c.id,name:c.name,code:c.code??null,summary:c.summary===void 0?null:i(c.summary)})),d=new Set(o.map(c=>c.id)),l=e.claims.map(c=>{if(c.target!==void 0&&!d.has(c.target))throw new Error(`unknown target (in claim ${c.id}): ${c.target}`);const h=I=>(I??[]).map(N=>({id:N.id,text:i(N.text)})),p=h(c.subjects),m=h(c.premises),v=h(c.conclusions),x=h(c.examples),w=h(c.notClaimed),y=[...p,...m,...v,...x,...w];qe(y.map(I=>I.id),`clause (in claim ${c.id})`);const E=ir(c.assurance,i),O=i(c.statement);return{id:c.id,target:c.target??null,statement:O,subjects:p,premises:m,conclusions:v,examples:x,notClaimed:w,assurance:E,source:c.source===void 0?null:{tool:c.source.tool??null,ref:c.source.ref},terms:nr([O,...y.map(I=>I.text),...rr(E)])}});return{targets:o,terms:r,claims:l}},ir=(a,e)=>{switch(a.kind){case"proved":return{kind:"proved",assumptions:(a.assumptions??[]).map(e)};case"bounded":return{kind:"bounded",bound:e(a.bound)};case"incomplete":return{kind:"incomplete",gaps:(a.gaps??[]).map(e)};case"planned":return{kind:"planned"}}},rr=a=>{switch(a.kind){case"proved":return a.assumptions;case"bounded":return[a.bound];case"incomplete":return a.gaps;case"planned":return[]}},or=a=>{const e={proved:0,conditional:0,bounded:0,incomplete:0,planned:0};for(const t of a.claims)e[Us(t.assurance)?"conditional":t.assurance.kind]+=1;return e},Us=a=>a.kind==="proved"&&a.assumptions.length>0,_s=a=>{const e=new Map(a.targets.map(s=>[s.id,s])),t=new Map;for(const s of a.claims)t.set(s.target,[...t.get(s.target)??[],s]);for(const s of a.targets)t.has(s.id)||t.set(s.id,[]);return[...t].map(([s,n])=>({target:s===null?null:e.get(s)??null,claims:n}))},ke=(a,e)=>e.length===0?{itemsLabel:null,items:e}:{itemsLabel:a,items:e},Xe=(a,e)=>{switch(e.kind){case"proved":return Us(e)?{tone:"caveat",label:a.conditional,detail:a.conditionalDetail,...ke(a.assumptions,e.assumptions)}:{tone:"sound",label:a.proved,detail:a.provedDetail,...ke("",[])};case"bounded":return{tone:"caveat",label:a.bounded,detail:a.boundedDetail,...ke(a.bound,[e.bound])};case"incomplete":return{tone:"unsound",label:a.incomplete,detail:a.incompleteDetail,...ke(a.gaps,e.gaps)};case"planned":return{tone:"planned",label:a.planned,detail:a.plannedDetail,...ke("",[])}}},dr=a=>{switch(a.kind){case"target":return["target",a.target];case"claim":return["claim",a.claim];case"clause":return["clause",a.claim,a.clause]}},lr=a=>[...a.subjects,...a.premises,...a.conclusions,...a.examples,...a.notClaimed],Bs=32,Te=a=>{const e=Je(a.statement);return e.length<=Bs?e:`${e.slice(0,Bs).trimEnd()}\u2026`},cr=a=>[{target:{kind:"claim",claim:a.id},label:Te(a)},...lr(a).map(e=>({target:{kind:"clause",claim:a.id,clause:e.id},label:`${Te(a)} \u203A ${Je(e.text)}`}))],pr=a=>_s(a).flatMap(e=>[...e.target===null?[]:[{target:{kind:"target",target:e.target.id},label:e.target.name}],...e.claims.flatMap(cr)]),ur=[Ze,Qe,et,G`
+    :host {
+      display: block;
+      container-type: inline-size;
+      color: var(--dpk-ink);
+      font-family: var(--dpk-body);
+    }
+
+    .spec {
+      display: grid;
+      gap: 14px;
+    }
+
+    /* ----------------------------------------------------------- toolbar */
+
+    .spec-toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      gap: 4px 10px;
+      padding: 0 2px 10px;
+      border-bottom: 1px solid var(--dpk-rule);
+    }
+
+    .spec-title {
+      font-family: var(--dpk-display);
+      font-size: 14px;
+      font-weight: 650;
+    }
+
+    .spec-subject {
+      color: var(--dpk-ink-soft);
+      font-size: 12.5px;
+    }
+
+    .spec-stats {
+      display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px;
+      margin-left: auto;
+      color: var(--dpk-ink-faint);
+      font-size: 12px;
+    }
+
+    .spec-chip {
+      padding: 1px 8px;
+      border-radius: 999px;
+      font-weight: 600;
+    }
+
+    .spec-notice,
+    .spec-empty {
+      margin: 0;
+      padding: 14px;
+      border-radius: var(--dpk-radius);
+      font-size: 12.5px;
+    }
+
+    .spec-notice {
+      background: var(--dpk-danger-soft);
+      color: var(--dpk-danger);
+    }
+
+    .spec-empty {
+      color: var(--dpk-ink-faint);
+      text-align: center;
+    }
+
+    /* ------------------------------------------------------------ tones */
+
+    [data-tone='sound'] {
+      --tone: var(--dpk-green);
+      --tone-soft: var(--dpk-green-soft);
+    }
+
+    [data-tone='caveat'] {
+      --tone: var(--dpk-amber);
+      --tone-soft: var(--dpk-amber-soft);
+    }
+
+    [data-tone='unsound'] {
+      --tone: var(--dpk-danger);
+      --tone-soft: var(--dpk-danger-soft);
+    }
+
+    [data-tone='planned'] {
+      --tone: var(--dpk-blue);
+      --tone-soft: var(--dpk-blue-soft);
+    }
+
+    .spec-chip,
+    .assurance-badge {
+      background: var(--tone-soft);
+      color: var(--tone);
+    }
+
+    /* ----------------------------------------------------------- targets */
+
+    .spec-groups {
+      display: grid;
+      gap: 28px;
+    }
+
+    .target-group {
+      display: grid;
+      gap: 12px;
+    }
+
+    .target-head {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: baseline;
+      gap: 4px 10px;
+    }
+
+    .target-label {
+      color: var(--dpk-ink-faint);
+      font-size: 11.5px;
+      font-weight: 650;
+      letter-spacing: 0.04em;
+    }
+
+    .target-name {
+      margin: 0;
+      font-family: var(--dpk-display);
+      font-size: 17px;
+      font-weight: 700;
+    }
+
+    .target-code {
+      padding: 1px 7px;
+      border: 1px solid var(--dpk-rule);
+      border-radius: var(--dpk-radius-sm);
+      background: var(--dpk-paper-sunken);
+      color: var(--dpk-ink-soft);
+      font-family: var(--dpk-mono);
+      font-size: 12px;
+    }
+
+    .target-head .comment-trigger {
+      align-self: center;
+      margin-left: auto;
+    }
+
+    .target-summary {
+      margin: -4px 0 0;
+      color: var(--dpk-ink-soft);
+      font-size: 13.5px;
+      line-height: 1.7;
+    }
+
+    /* ------------------------------------------------------------ claims */
+
+    .spec-claims {
+      display: grid;
+      gap: 8px;
+    }
+
+    .claim {
+      padding: 10px 14px 10px 8px;
+      border: 1px solid var(--dpk-rule);
+      border-radius: var(--dpk-radius-lg);
+      background: var(--dpk-paper-raised);
+      box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
+    }
+
+    /* Folded, the head row is the whole card: the statement and how strongly it holds. */
+    .claim-head {
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    .claim-toggle {
+      display: grid;
+      flex: none;
+      place-items: center;
+      width: 24px;
+      height: 24px;
+      margin-top: 1px;
+      padding: 0;
+      border: none;
+      border-radius: var(--dpk-radius);
+      background: transparent;
+      color: var(--dpk-ink-faint);
+      cursor: pointer;
+    }
+
+    .claim-toggle svg {
+      width: 14px;
+      height: 14px;
+      transition: transform 120ms ease;
+    }
+
+    .claim-toggle[aria-expanded='true'] svg {
+      transform: rotate(90deg);
+    }
+
+    .claim-toggle:hover,
+    .claim-toggle:focus-visible {
+      background: var(--dpk-paper-sunken);
+      color: var(--dpk-ink);
+    }
+
+    .claim-body {
+      display: grid;
+      gap: 14px;
+      margin: 12px 0 6px 32px;
+    }
+
+    /* The badge explains itself in a tooltip, so it is a button that hover, focus or a tap opens. */
+    .assurance-badge {
+      flex: none;
+      margin-top: 2px;
+      padding: 2px 10px;
+      border: none;
+      border-radius: 999px;
+      font: inherit;
+      font-size: 11.5px;
+      font-weight: 650;
+      white-space: nowrap;
+      cursor: help;
+    }
+
+    .assurance-badge:focus-visible {
+      outline: 2px solid var(--tone);
+      outline-offset: 2px;
+    }
+
+    .claim-head .comment-trigger {
+      margin-left: auto;
+    }
+
+    .claim-statement {
+      flex: 1;
+      margin: 0;
+      font-size: 14.5px;
+      line-height: 1.65;
+      font-weight: 500;
+    }
+
+    /* Subjects / premises / conclusions: the structure of the claim, one row per part. */
+    .claim-parts {
+      display: grid;
+      grid-template-columns: max-content 1fr;
+      margin: 0;
+      border: 1px solid var(--dpk-rule);
+      border-radius: var(--dpk-radius);
+      background: var(--dpk-paper-sunken);
+      overflow: hidden;
+    }
+
+    .claim-part {
+      display: contents;
+    }
+
+    .claim-part > dt,
+    .claim-part > dd {
+      margin: 0;
+      padding: 9px 12px;
+      border-top: 1px solid var(--dpk-rule);
+    }
+
+    .claim-part:first-child > dt,
+    .claim-part:first-child > dd {
+      border-top: none;
+    }
+
+    .claim-part > dt {
+      color: var(--dpk-ink-soft);
+      font-size: 11.5px;
+      font-weight: 650;
+      letter-spacing: 0.04em;
+      padding-top: 11px;
+    }
+
+    /* The conclusion is what the claim asserts: its label reads strongest. */
+    .claim-part[data-part='conclusions'] > dt {
+      color: var(--dpk-ink);
+    }
+
+    .claim-none {
+      margin: 0;
+      color: var(--dpk-ink-faint);
+      font-size: 13px;
+    }
+
+    .clauses {
+      display: grid;
+      gap: 2px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+
+    .clause {
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      gap: 6px;
+      min-height: 28px;
+      padding: 2px 0 2px 14px;
+      font-size: 13.5px;
+      line-height: 1.7;
+    }
+
+    .clause::before {
+      content: '';
+      position: absolute;
+      left: 2px;
+      top: 0.95em;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: var(--dpk-ink-faint);
+    }
+
+    .clause-text {
+      flex: 1;
+      min-width: 0;
+      overflow-wrap: anywhere;
+    }
+
+    /* ---------------------------------------------------------- assurance */
+
+    .assurance {
+      padding: 10px 14px;
+      border-radius: var(--dpk-radius);
+      background: var(--tone-soft);
+      font-size: 12.5px;
+      line-height: 1.6;
+    }
+
+    .assurance-label {
+      margin: 0;
+      color: var(--tone);
+      font-weight: 650;
+    }
+
+    .assurance ul {
+      margin: 4px 0 0;
+      padding-left: 18px;
+      color: var(--dpk-ink);
+    }
+
+    /* ---------------------------------------------------- examples / not */
+
+    .claim-aside h5 {
+      margin: 0 0 2px;
+      color: var(--dpk-ink-soft);
+      font-size: 11.5px;
+      font-weight: 650;
+      letter-spacing: 0.04em;
+    }
+
+    .claim-aside[data-part='not-claimed'] {
+      padding: 10px 14px;
+      border: 1px dashed var(--dpk-rule-strong);
+      border-radius: var(--dpk-radius);
+    }
+
+    .claim-aside[data-part='not-claimed'] .clause::before {
+      content: '×';
+      left: 0;
+      top: 0;
+      width: auto;
+      height: auto;
+      border-radius: 0;
+      background: none;
+      color: var(--dpk-ink-faint);
+      font-weight: 700;
+    }
+
+    .claim-aside[data-part='not-claimed'] .clause-text {
+      color: var(--dpk-ink-soft);
+    }
+
+    /* ------------------------------------------------------------- footer */
+
+    .claim-foot {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 6px 8px;
+      padding-top: 10px;
+      border-top: 1px solid var(--dpk-rule);
+      color: var(--dpk-ink-faint);
+      font-size: 11.5px;
+    }
+
+    .claim-foot-label {
+      font-weight: 650;
+    }
+
+    .term-chip {
+      padding: 1px 9px;
+      border: 1px solid var(--dpk-rule-strong);
+      border-radius: 999px;
+      background: var(--dpk-paper);
+      color: var(--dpk-ink-soft);
+      font: inherit;
+      cursor: help;
+    }
+
+    .term-chip:is(:hover, :focus-visible) {
+      border-color: var(--dpk-violet);
+      color: var(--dpk-violet);
+    }
+
+    .claim-source {
+      margin-left: auto;
+    }
+
+    .claim-source code {
+      font-family: var(--dpk-mono);
+      font-size: 11px;
+    }
+
+    /* -------------------------------------------------------------- terms */
+
+    .term {
+      display: inline;
+      padding: 0 1px;
+      border: none;
+      border-bottom: 1.5px dotted var(--dpk-violet);
+      background: none;
+      color: inherit;
+      font: inherit;
+      font-weight: 600;
+      cursor: help;
+    }
+
+    .term:hover,
+    .term:focus-visible {
+      background: var(--dpk-violet-soft);
+      outline: none;
+    }
+
+    /* ----------------------------------------------------------- tooltip */
+
+    /* Sized to its text: the popover helper sets a fixed width, which only !important overrides. */
+    .spec-tip {
+      box-sizing: border-box;
+      position: fixed;
+      inset: auto;
+      width: max-content !important;
+      max-width: min(300px, calc(100vw - 16px));
+      margin: 0;
+      padding: 8px 11px;
+      border: 1px solid var(--dpk-rule-strong);
+      border-radius: var(--dpk-radius);
+      background: var(--dpk-paper-raised);
+      box-shadow: var(--dpk-bevel), var(--dpk-shadow-lg);
+      color: var(--dpk-ink);
+      font-size: 12.5px;
+      line-height: 1.6;
+      pointer-events: none;
+    }
+
+    .spec-tip p {
+      margin: 0;
+    }
+
+    .tip-title {
+      color: var(--dpk-violet);
+      font-weight: 650;
+    }
+
+    .spec-tip[data-tone] .tip-title {
+      color: var(--tone);
+    }
+
+    .term-static {
+      border-bottom: 1.5px dotted var(--dpk-violet);
+      font-weight: 600;
+    }
+
+    @container (max-width: 520px) {
+      .claim-parts {
+        grid-template-columns: 1fr;
+      }
+
+      .claim-part > dd {
+        border-top: none;
+        padding-top: 0;
+      }
+    }
+
+    /* ---------------------------------------------------------- comments */
+
+    .comment-trigger {
+      flex: none;
+      display: grid;
+      place-items: center;
+      width: 24px;
+      height: 24px;
+      padding: 4px;
+      border: 1px solid var(--dpk-rule-strong);
+      border-radius: var(--dpk-radius-sm);
+      background: var(--dpk-paper-raised);
+      color: var(--dpk-ink-soft);
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 120ms ease;
+    }
+
+    .comment-trigger svg {
+      width: 14px;
+      height: 14px;
+    }
+
+    :is(.target-head, .claim-head, .clause):is(:hover, :focus-within) > .comment-trigger,
+    .comment-trigger[aria-expanded='true'] {
+      opacity: 1;
+    }
+
+    .comment-trigger:hover,
+    .comment-trigger:focus-visible {
+      border-color: var(--dpk-accent);
+      background: var(--dpk-accent-soft);
+      color: var(--dpk-accent);
+      outline: none;
+    }
+
+    @media (hover: none) {
+      .comment-trigger {
+        opacity: 1;
+      }
+    }
+
+    .comment-target {
+      font-size: 12px;
+      overflow-wrap: anywhere;
+    }
+
+    .comment-error {
+      margin: 0;
+      font-size: 11px;
+      color: var(--dpk-accent);
+    }
+  `],Hs=a=>`claim-body-${a}`;class Gs extends tt{static{this.styles=ur}static{this.properties={data:{attribute:!1},id:{type:String,reflect:!0},heading:{type:String},subject:{type:String}}}#t=null;#n=new Map;#e=null;#s=null;#i="";#a=null;#r=null;#o=new Map;#c=null;#p=new Set;#l=null;#u=null;#h=new Le(this);#b=new st(this,()=>{this.#i=""});constructor(){super(),this.id=this.getAttribute("id")??"",this.data=null,this.heading=null,this.subject=null}connectedCallback(){super.connectedCallback(),this.#i="",document.addEventListener("keydown",this.#y),document.addEventListener("pointerdown",this.#w),this.#s=mt(this,js,e=>{e.ok?this.#g(e.value):this.#f(e.error)})}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("keydown",this.#y),document.removeEventListener("pointerdown",this.#w),this.#s?.(),this.#s=null}willUpdate(e){e.has("data")&&this.data!==null&&this.#g(this.data)}updated(){this.#M(),this.#C(),this.#L()}get commentTargets(){if(!this.id||this.#t===null)return[];const e=`${this.subject??this.heading??this.#d.heading} \xB7 ${this.id}`;return pr(this.#t).map(({target:t,label:s})=>({value:this.#x(t),label:s,group:e}))}get dataError(){return this.#e}get#d(){return Yi(this.#b.locale)}#m(){return this.#t??tr()}#g(e){this.#t=e,this.#n=new Map(e.terms.map(t=>[t.id,t])),this.#e=null,this.requestUpdate()}#f(e){this.#t=null,this.#n=new Map,this.#e=e,console.error("[dev-process-kit] invalid formal spec data:",e),this.requestUpdate()}#x(e){return`element:${[this.id,...dr(e)].map(t=>encodeURIComponent(t)).join("/")}`}#M(){const e=JSON.stringify(this.commentTargets);e!==this.#i&&(this.#i=e,this.dispatchEvent(new CustomEvent("dpk-comment-targets-change",{bubbles:!0,composed:!0})))}#C(){const e=this.#r!==this.#a;this.#r=this.#a;const t=this.renderRoot.querySelector(".comment-pop"),s=this.#E(this.#a);!t||!s||(this.#h.open(t,s,{width:300,height:280},{placement:"right-start"}),e&&t.querySelector("textarea")?.focus({preventScroll:!0}))}#E(e){return e===null?null:[...this.renderRoot.querySelectorAll("[data-comment-ref]")].find(t=>t.dataset.commentRef===e)??null}#v(e,t){if(t.kind==="input"){this.#o=new Map(this.#o).set(e,t.body),this.#c=null,this.requestUpdate();return}if(t.kind==="comment"){if(!!this.dispatchEvent(new CustomEvent("dpk-comment-submit",{detail:{target:e,body:t.body},bubbles:!0,composed:!0,cancelable:!0}))){this.#c=e,this.requestUpdate();return}const i=new Map(this.#o);i.delete(e),this.#o=i}this.#c=null;const s=this.#E(e);this.#a=null,this.requestUpdate(),s?.focus({preventScroll:!0})}#q(e){const t=new Set(this.#p);if(t.delete(e)||t.add(e),this.#p=t,!t.has(e)){const s=this.#x({kind:"clause",claim:e,clause:""});this.#a?.startsWith(s)&&(this.#a=null);const n=this.#l?.anchor;n?.closest(".claim-body")?.id===Hs(e)&&this.#k(n)}this.requestUpdate()}#T(e,t){const s=e.composedPath()[0];s instanceof Element&&s.closest("button, a")||(document.getSelection()?.toString()??"")===""&&this.#q(t)}#L(){const e=this.#l?.anchor??null,t=this.#u!==e;t&&(this.#u?.removeAttribute("aria-describedby"),e?.setAttribute("aria-describedby","spec-tip")),this.#u=e;const s=this.renderRoot.querySelector(".spec-tip");!s||!e||!t||this.#h.open(s,e,{width:300,height:240},{placement:"top-start"})}#D(e,t){this.#l?.anchor!==t&&(this.#l={tip:e,anchor:t},this.requestUpdate())}#k(e){this.#l===null||e!==void 0&&this.#l.anchor!==e||(this.#l=null,this.requestUpdate())}#y=e=>{e.key==="Escape"&&this.#k()};#w=e=>{this.#l!==null&&!e.composedPath().includes(this.#l.anchor)&&this.#k()};#$(e){const t=(n,i)=>{n.currentTarget instanceof HTMLElement&&i(n.currentTarget)},s=n=>n.pointerType!=="touch";return{enter:n=>s(n)&&t(n,i=>this.#D(e,i)),leave:n=>s(n)&&t(n,i=>this.#k(i)),show:n=>t(n,i=>this.#D(e,i)),hide:n=>t(n,i=>this.#k(i))}}render(){const e=this.#d,t=this.#m();return u`
+      <section class="spec">
+        <header class="spec-toolbar">
+          <span class="spec-title">${this.heading??e.heading}</span>
+          ${this.subject?u`<span class="spec-subject">${this.subject}</span>`:b}
+          <span class="spec-stats">${this.#z(t)}</span>
+        </header>
+        ${this.#e===null?b:u`<p class="spec-notice" role="alert">${e.dataError}<br />${this.#e}</p>`}
+        ${this.#e===null&&t.claims.length===0?u`<p class="spec-empty">${e.empty}</p>`:b}
+        <div class="spec-groups">
+          ${Q(_s(t),s=>s.target?.id??"",s=>this.#S(s))}
+        </div>
+      </section>
+      ${this.#_()} ${this.#H()}
+    `}#z(e){const t=this.#d,s=or(e),n=[{tone:"unsound",label:t.incomplete,count:s.incomplete},{tone:"caveat",label:t.bounded,count:s.bounded},{tone:"caveat",label:t.conditional,count:s.conditional},{tone:"planned",label:t.planned,count:s.planned}].filter(i=>i.count>0);return u`${t.claims(e.claims.length)}
+    ${n.map(i=>u`<span class="spec-chip" data-tone=${i.tone}>${i.label} ${i.count}</span>`)}`}#S(e){const t=u`<div class="spec-claims">
+      ${Q(e.claims,n=>n.id,n=>this.#A(n))}
+    </div>`,s=e.target;return s===null?t:u`<section class="target-group" data-target=${s.id}>
+      <header class="target-head">
+        <span class="target-label">${this.#d.target}</span>
+        <h3 class="target-name">${s.name}</h3>
+        ${s.code===null?b:u`<code class="target-code">${s.code}</code>`}
+        ${this.#F({kind:"target",target:s.id},s.name)}
+      </header>
+      ${s.summary===null?b:u`<p class="target-summary">${this.#R(s.summary)}</p>`}
+      ${e.claims.length===0?u`<p class="spec-empty">${this.#d.noClaims}</p>`:t}
+    </section>`}#A(e){const t=this.#d,s=Xe(t,e.assurance),n=this.#p.has(e.id),i=this.#$({kind:"assurance",claim:e.id}),r=Hs(e.id);return u`
+      <article class="claim" data-claim=${e.id} data-tone=${s.tone}>
+        <div class="claim-head" @click=${o=>this.#T(o,e.id)}>
+          <button
+            type="button"
+            class="claim-toggle"
+            aria-expanded=${n?"true":"false"}
+            aria-controls=${n?r:b}
+            aria-label=${n?t.hideDetails:t.showDetails}
+            @click=${()=>this.#q(e.id)}
+          >
+            ${rt()}
+          </button>
+          <h4 class="claim-statement">${this.#R(e.statement)}</h4>
+          <button
+            type="button"
+            class="assurance-badge"
+            data-tone=${s.tone}
+            @pointerenter=${i.enter}
+            @pointerleave=${i.leave}
+            @focus=${i.show}
+            @blur=${i.hide}
+            @click=${i.show}
+          >
+            ${s.label}
+          </button>
+          ${this.#F({kind:"claim",claim:e.id},Te(e))}
+        </div>
+        ${n?this.#P(e,r):b}
+      </article>
+    `}#P(e,t){const s=this.#d,n=Xe(s,e.assurance);return u`<div class="claim-body" id=${t}>
+      <dl class="claim-parts">
+        ${e.subjects.length===0?b:this.#O("subjects",s.subjects,e,e.subjects)}
+        ${e.premises.length===0?u`<div class="claim-part" data-part="premises">
+                <dt>${s.premises}</dt>
+                <dd><p class="claim-none">${s.noPremises}</p></dd>
+              </div>`:this.#O("premises",s.premises,e,e.premises)}
+        ${this.#O("conclusions",s.conclusions,e,e.conclusions)}
+      </dl>
+      ${n.itemsLabel===null?b:u`<div class="assurance" data-tone=${n.tone}>
+              <p class="assurance-label">${n.itemsLabel}</p>
+              <ul>
+                ${n.items.map(i=>u`<li>${this.#R(i)}</li>`)}
+              </ul>
+            </div>`}
+      ${e.examples.length===0?b:u`<section class="claim-aside" data-part="examples">
+              <h5>${s.examples}</h5>
+              ${this.#I(e,e.examples)}
+            </section>`}
+      ${e.notClaimed.length===0?b:u`<section class="claim-aside" data-part="not-claimed">
+              <h5>${s.notClaimed}</h5>
+              ${this.#I(e,e.notClaimed)}
+            </section>`}
+      ${this.#j(e)}
+    </div>`}#O(e,t,s,n){return u`<div class="claim-part" data-part=${e}>
+      <dt>${t}</dt>
+      <dd>${this.#I(s,n)}</dd>
+    </div>`}#I(e,t){return u`<ul class="clauses">
+      ${Q(t,s=>s.id,s=>u`<li class="clause" data-clause=${s.id}>
+            <span class="clause-text">${this.#R(s.text)}</span>
+            ${this.#F({kind:"clause",claim:e.id,clause:s.id},`${Te(e)} \u203A ${Je(s.text)}`)}
+          </li>`)}
+    </ul>`}#j(e){const t=this.#d,s=e.terms.flatMap(n=>this.#n.get(n)??[]);return s.length===0&&e.source===null?b:u`<footer class="claim-foot">
+      ${s.length===0?b:u`<span class="claim-foot-label">${t.usesTerms}</span> ${s.map(n=>this.#N("term-chip",n.id,n.name))}`}
+      ${e.source===null?b:u`<span class="claim-source"
+              >${t.source}: ${e.source.tool===null?b:u`${e.source.tool} · `}<code
+                >${e.source.ref}</code
+              ></span
+            >`}
+    </footer>`}#R(e){return u`${e.map(t=>t.kind==="text"?t.text:this.#N("term",t.id,t.label))}`}#U(e){return u`${e.map(t=>t.kind==="text"?t.text:u`<span class="term-static">${t.label}</span>`)}`}#N(e,t,s){const n=this.#$({kind:"term",term:t});return u`<button
+      type="button"
+      class=${e}
+      data-term=${t}
+      @pointerenter=${n.enter}
+      @pointerleave=${n.leave}
+      @focus=${n.show}
+      @blur=${n.hide}
+      @click=${n.show}
+    >
+      ${s}
+    </button>`}#_(){const e=this.#l?.tip;if(e===void 0)return b;const t=this.#B(e);return t===null?b:u`<div
+      id="spec-tip"
+      class="spec-tip"
+      role="tooltip"
+      popover="manual"
+      data-tone=${t.tone??b}
+    >
+      <p class="tip-title">${t.title}</p>
+      <p class="tip-body">${t.body}</p>
+    </div>`}#B(e){if(e.kind==="term"){const n=this.#n.get(e.term);return n===void 0?null:{title:n.name,body:this.#U(n.meaning)}}const t=this.#t?.claims.find(n=>n.id===e.claim);if(t===void 0)return null;const s=Xe(this.#d,t.assurance);return{title:s.label,body:s.detail,tone:s.tone}}#F(e,t){if(!this.id)return b;const s=this.#x(e),n=this.#d.commentOn(t);return u`<button
+      type="button"
+      class="comment-trigger"
+      data-comment-ref=${s}
+      aria-label=${n}
+      title=${n}
+      aria-haspopup="dialog"
+      aria-expanded=${this.#a===s?"true":"false"}
+      @click=${()=>{this.#a=this.#a===s?null:s,this.requestUpdate()}}
+    >
+      ${at()}
+    </button>`}#H(){const e=this.#a,t=e===null?void 0:this.commentTargets.find(n=>n.value===e)?.label;if(e===null||t===void 0)return b;const s=ct(this.#o.get(e)??"",[],{label:t,key:e,...this.#c===e?{error:this.#d.sendFailed}:{}});return u`${lt(e,pt(ut(this.#b.locale),s,n=>this.#v(e,n)))}`}}const Ks=()=>{customElements.get("dpk-component-formal-spec")||customElements.define("dpk-component-formal-spec",Gs)},Ws=()=>{Dt(),Nt(),Ut(),ms(),ks(),zs(),Ps()},hr=()=>{la(),ca(),Ws(),Ks()};export{bs as D,jt as a,us as b,Gs as c,Ns as d,Ls as e,Ft as f,Tt as g,ks as h,Ut as i,ms as j,Ks as k,Ps as l,zs as m,Nt as n,Dt as o,js as p,As as q,hr as r,Cs as s,Rt as t,qt as u,Ws as v};