dev-process-kit 0.0.2-beta.1 → 0.0.3

package/dist/chunks/shared-Dx0MEuAf.js

@@ -1,921 +0,0 @@
-import{a7 as ae,a8 as F,a9 as et,aa as nt,ar as N,ab as b,as as R,ac as W,ad as S,ae as I,q as $,al as T,v as ot,aq as ft,P as de,f as ce,V as U,R as w,$ as gt,a4 as le,k as pe,_ as xt,a0 as M,a1 as v,A as he,K as me,i as ue,at as fe,a3 as B,a2 as bt,au as ge,T as vt,m as C}from"./shared-5C6fORCL.js";import{P as kt,r as xe,p as be,a as ve}from"./shared-DKxAm7wL.js";import{o as ke}from"./shared-DgusMFKr.js";import{c as Et}from"./shared-ml5h7U5L.js";function Ee(e,t){let n=0;for(let i=0;i<e.length;i++)n+=t(e[i],i);return n}const j=["actor","command","aggregate","event","policy","readmodel","external","hotspot"],ye=F({id:R,name:S(b(),I(1)),description:N(b())}),we=F({id:R,type:W(j),name:S(b(),I(1)),description:N(b()),contextId:N(b())}),$e=F({id:R,from:S(b(),I(1)),to:S(b(),I(1)),label:N(b()),kind:N(W(["member","flow"]))}),yt=F({title:N(b()),contexts:et(nt(ye),[]),elements:et(nt(we),[]),links:et(nt($e),[])}),wt=e=>{const t=ae(yt,e),n=new Set(t.elements.map(o=>o.id)),i=new Set(t.contexts.map(o=>o.id));for(const o of t.elements)if(o.contextId!==void 0&&!i.has(o.contextId))throw new Error(`unknown context "${o.contextId}" for note "${o.id}"`);for(const o of t.links){if(!n.has(o.from))throw new Error(`unknown note "${o.from}" in link "${o.id}"`);if(!n.has(o.to))throw new Error(`unknown note "${o.to}" in link "${o.id}"`)}return t},$t=()=>({contexts:[],elements:[],links:[]}),z=(e,t)=>{if(t!==void 0)return e.elements.find(n=>n.id===t)},Y=(e,t)=>{if(t!==void 0)return e.contexts.find(n=>n.id===t)},it=(e,t)=>{if(t!==void 0)return e.links.find(n=>n.id===t)},H=e=>e.elements.map(t=>t.id),y={SET_ELEMENT_NAME:$("SET_ELEMENT_NAME","element",T({name:S(b(),I(1))})),SET_ELEMENT_DESCRIPTION:$("SET_ELEMENT_DESCRIPTION","element",T({description:b()})),SET_ELEMENT_TYPE:$("SET_ELEMENT_TYPE","element",T({type:W(j)})),SET_ELEMENT_CONTEXT:$("SET_ELEMENT_CONTEXT","element",T({contextId:ft(b())})),MOVE_ELEMENT:$("MOVE_ELEMENT","element",T({after:ft(b())}),{mode:"sequence"}),ADD_ELEMENT:$("ADD_ELEMENT","page",T({id:R,type:W(j),name:S(b(),I(1)),description:N(b()),contextId:N(b())}),{dedupeKey:ot}),DELETE_ELEMENT:$("DELETE_ELEMENT","element",T({})),LINK_ELEMENTS:$("LINK_ELEMENTS","page",T({id:R,from:S(b(),I(1)),to:S(b(),I(1)),label:N(b()),kind:N(W(["member","flow"]))}),{dedupeKey:ot}),SET_LINK_LABEL:$("SET_LINK_LABEL","link",T({label:b()})),UNLINK_ELEMENTS:$("UNLINK_ELEMENTS","page",T({from:S(b(),I(1)),to:S(b(),I(1))}),{mode:"sequence"}),ADD_CONTEXT:$("ADD_CONTEXT","page",T({id:R,name:S(b(),I(1)),description:N(b())}),{dedupeKey:ot}),SET_CONTEXT_NAME:$("SET_CONTEXT_NAME","context",T({name:S(b(),I(1))})),DELETE_CONTEXT:$("DELETE_CONTEXT","context",T({}))},E={setElementName:(e,t)=>({type:"SET_ELEMENT_NAME",target:{type:"element",id:e},payload:{name:t}}),setElementDescription:(e,t)=>({type:"SET_ELEMENT_DESCRIPTION",target:{type:"element",id:e},payload:{description:t}}),setElementType:(e,t)=>({type:"SET_ELEMENT_TYPE",target:{type:"element",id:e},payload:{type:t}}),setElementContext:(e,t)=>({type:"SET_ELEMENT_CONTEXT",target:{type:"element",id:e},payload:{contextId:t}}),moveElement:(e,t)=>({type:"MOVE_ELEMENT",target:{type:"element",id:e},payload:{after:t}}),addElement:(e,t,n)=>({type:"ADD_ELEMENT",target:{type:"page",id:"event-storming"},payload:{id:e,type:t,name:n}}),deleteElement:e=>({type:"DELETE_ELEMENT",target:{type:"element",id:e},payload:{}}),linkElements:(e,t,n,i)=>({type:"LINK_ELEMENTS",target:{type:"page",id:"event-storming"},payload:{id:e,from:t,to:n,...i?.label===void 0?{}:{label:i.label},...i?.kind===void 0?{}:{kind:i.kind}}}),setLinkLabel:(e,t)=>({type:"SET_LINK_LABEL",target:{type:"link",id:e},payload:{label:t}}),unlinkElements:(e,t)=>({type:"UNLINK_ELEMENTS",target:{type:"page",id:"event-storming"},payload:{from:e,to:t}}),addContext:(e,t)=>({type:"ADD_CONTEXT",target:{type:"page",id:"event-storming"},payload:{id:e,name:t}}),setContextName:(e,t)=>({type:"SET_CONTEXT_NAME",target:{type:"context",id:e},payload:{name:t}}),deleteContext:e=>({type:"DELETE_CONTEXT",target:{type:"context",id:e},payload:{}})},Tt=(e,t)=>{const n=de(y,t);if(n===null)return null;const i=n.target.id;switch(n.type){case"SET_ELEMENT_NAME":return G(e,i,o=>({...o,name:n.payload.name}));case"SET_ELEMENT_DESCRIPTION":return G(e,i,o=>({...o,description:n.payload.description}));case"SET_ELEMENT_TYPE":return G(e,i,o=>({...o,type:n.payload.type}));case"SET_ELEMENT_CONTEXT":{const{contextId:o}=n.payload;return o!==null&&!e.contexts.some(s=>s.id===o)?null:G(e,i,s=>o===null?St(s):{...s,contextId:o})}case"MOVE_ELEMENT":{const{after:o}=n.payload,s=Te(e.elements,i,o);return s===null?null:{...e,elements:s}}case"ADD_ELEMENT":{const o=n.payload;if(e.elements.some(r=>r.id===o.id))return e;if(o.contextId!==void 0&&!e.contexts.some(r=>r.id===o.contextId))return null;const s={id:o.id,type:o.type,name:o.name,...o.description===void 0?{}:{description:o.description},...o.contextId===void 0?{}:{contextId:o.contextId}};return{...e,elements:[...e.elements,s]}}case"DELETE_ELEMENT":return e.elements.some(o=>o.id===i)?{...e,elements:e.elements.filter(o=>o.id!==i),links:e.links.filter(o=>o.from!==i&&o.to!==i)}:null;case"LINK_ELEMENTS":{const o=n.payload;return e.links.some(s=>s.id===o.id)?e:!e.elements.some(s=>s.id===o.from)||!e.elements.some(s=>s.id===o.to)?null:{...e,links:[...e.links,{id:o.id,from:o.from,to:o.to,...o.label===void 0?{}:{label:o.label},...o.kind===void 0?{}:{kind:o.kind}}]}}case"SET_LINK_LABEL":return e.links.some(o=>o.id===i)?{...e,links:e.links.map(o=>o.id===i?{...o,label:n.payload.label}:o)}:null;case"UNLINK_ELEMENTS":{const o=n.payload;return e.links.some(s=>s.from===o.from&&s.to===o.to)?{...e,links:e.links.filter(s=>!(s.from===o.from&&s.to===o.to))}:null}case"ADD_CONTEXT":{const o=n.payload;if(e.contexts.some(r=>r.id===o.id))return e;const s={id:o.id,name:o.name,...o.description===void 0?{}:{description:o.description}};return{...e,contexts:[...e.contexts,s]}}case"SET_CONTEXT_NAME":return e.contexts.some(o=>o.id===i)?{...e,contexts:e.contexts.map(o=>o.id===i?{...o,name:n.payload.name}:o)}:null;case"DELETE_CONTEXT":return e.contexts.some(o=>o.id===i)?{...e,contexts:e.contexts.filter(o=>o.id!==i),elements:e.elements.map(o=>o.contextId===i?St(o):o)}:null;default:return ce(n)}},St=e=>{const t={...e};return delete t.contextId,t},G=(e,t,n)=>e.elements.some(i=>i.id===t)?{...e,elements:e.elements.map(i=>i.id===t?n(i):i)}:null,Te=(e,t,n)=>{const i=e.findIndex(a=>a.id===t);if(i<0||n!==null&&!e.some(a=>a.id===n))return null;const o=e[i];if(o===void 0)return null;const r=[...e.filter(a=>a.id!==t)];return r.splice(n===null?0:r.findIndex(a=>a.id===n)+1,0,o),r},Se=new Set(["actor>command","command>aggregate","aggregate>event","command>event","policy>command","external>event"]),Z=(e,t)=>Se.has(`${e}>${t}`),Ie=(e,t,n)=>e.kind!==void 0?e.kind==="member":Z(t,n),Me=["readmodel","actor","policy","command","aggregate","external","event","hotspot"],_e=(e,t)=>{const n=new Map;for(const i of e.links){const o=t.get(i.from),s=t.get(i.to);if(o===void 0||s===void 0||o==="hotspot"==(s==="hotspot")||i.kind!==void 0&&i.kind!=="member")continue;const r=o==="hotspot"?i.from:i.to;n.has(r)||n.set(r,o==="hotspot"?i.to:i.from)}return n},Ne=(e,t,n)=>{const i=new Map(e.map(a=>[a.id,a.id])),o=a=>{let c=a;for(;i.get(c)!==c;)c=i.get(c)??c;let d=a;for(;d!==c;){const p=i.get(d)??c;i.set(d,c),d=p}return c};for(const a of t){if(!i.has(a.from)||!i.has(a.to))continue;const c=n.get(a.from),d=n.get(a.to);c===void 0||d===void 0||Ie(a,c,d)&&i.set(o(a.from),o(a.to))}const s=new Map,r=new Map;for(const a of e){const c=o(a.id);r.set(a.id,c);const d=s.get(c);d?d.push(a):s.set(c,[a])}return{groups:s,rootOf:r}},A=e=>{const t=new Map(e.elements.map(d=>[d.id,d.type])),n=_e(e,t),i=e.elements.filter(d=>!n.has(d.id)),{groups:o,rootOf:s}=Ne(i,e.links,t),r=new Map;for(const[d,p]of n){const m=z(e,d),f=s.get(p);if(m===void 0||f===void 0)continue;const l=r.get(f);l?l.push({note:m,targetId:p}):r.set(f,[{note:m,targetId:p}])}const a=new Map(Me.map((d,p)=>[d,p])),c=new Map(e.elements.map((d,p)=>[d.id,p]));return[...o].map(([d,p])=>{const m=[...p].sort((f,l)=>(a.get(f.type)??0)-(a.get(l.type)??0)||(c.get(f.id)??0)-(c.get(l.id)??0));return{id:p[0]?.id??"",notes:m,pins:r.get(d)??[],contextId:p.find(f=>f.contextId!==void 0)?.contextId}})},Le=e=>{const t=A(e).flatMap(i=>[...i.notes,...i.pins.map(o=>o.note)]),n=new Set(t.map(i=>i.id));return{...e,elements:[...t,...e.elements.filter(i=>!n.has(i.id))]}},It=(e,t)=>{const n=[...e.notes,...e.pins.map(r=>r.note)],i=n.find(r=>Z(t,r.type));if(i!==void 0)return{anchorId:i.id,incoming:!0};const o=n.find(r=>Z(r.type,t));if(o!==void 0)return{anchorId:o.id,incoming:!1};const s=n[0];return s===void 0?void 0:{anchorId:s.id,incoming:!0}},Mt=(e,t)=>{const n=new Map(t.flatMap(i=>i.notes.map(o=>[o.id,i.id])));return e.links.flatMap(i=>{const o=n.get(i.from),s=n.get(i.to);return o===void 0||s===void 0||o===s?[]:[{id:i.id,from:o,to:s,...i.label!==void 0?{label:i.label}:{}}]})},st=(e,t)=>`${e}\0${t}`,_t=(e,t,n)=>{const{widthOf:i,gapX:o,padX:s,maxWidth:r}=n,a=new Map;for(const h of t)a.set(st(h.from,h.to),h),a.set(st(h.to,h.from),h);const c=(h,g)=>h===void 0||g===void 0?void 0:a.get(st(h,g)),d=h=>Ee(h,g=>i(g))+o*Math.max(0,h.length-1)+s*2<=r,p=[];let m=[],f;const l=()=>{m.length!==0&&(p.push({sliceIds:m,...f===void 0?{}:{cutFrom:f}}),m=[],f=void 0)};for(const h of e.map(g=>g.id)){if(m.length>0&&!d([...m,h])){let g=m.length;for(;c(m[g-1],g===m.length?h:m[g])!==void 0&&(g-=1,g!==0););const x=g===0?[]:m.splice(g),k=g===0?c(m.at(-1),h):c(m.at(-1),x[0]);l(),m=x,f=k}m.push(h)}return l(),p},V=e=>[...e.notes].reverse().find(t=>t.type==="event")??e.notes.at(-1),Nt=(e,t)=>{const n=V(e),i=t.notes[0];if(!(n===void 0||i===void 0))return{from:n.id,to:i.id}},Oe={SET_ELEMENT_NAME:(e,t)=>({title:"\u8981\u7D20\u540D\u3092\u5909\u66F4",tone:"update",body:`"${z(t,e.target.id)?.name??"?"}\u201C \u2192 "${w(y.SET_ELEMENT_NAME,e).name}"`}),SET_ELEMENT_DESCRIPTION:e=>({title:"\u8981\u7D20\u306E\u8AAC\u660E\u3092\u66F4\u65B0",tone:"update",body:`\u2192 "${w(y.SET_ELEMENT_DESCRIPTION,e).description.slice(0,60)}"`}),SET_ELEMENT_TYPE:e=>({title:"\u8981\u7D20\u306E\u7A2E\u5225\u3092\u5909\u66F4",tone:"update",body:`\u2192 ${w(y.SET_ELEMENT_TYPE,e).type}`}),SET_ELEMENT_CONTEXT:e=>({title:"\u6240\u5C5E\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u5909\u66F4",tone:"move",body:`\u2192 ${w(y.SET_ELEMENT_CONTEXT,e).contextId??"\u672A\u6240\u5C5E"}`}),MOVE_ELEMENT:e=>({title:"\u30BF\u30A4\u30E0\u30E9\u30A4\u30F3\u4F4D\u7F6E\u3092\u5909\u66F4",tone:"move",body:w(y.MOVE_ELEMENT,e).after===null?"\u2192 \u5148\u982D\u3078":`\u2192 "${w(y.MOVE_ELEMENT,e).after}" \u306E\u76F4\u5F8C\u3078`}),ADD_ELEMENT:e=>({title:"\u8981\u7D20\u3092\u8FFD\u52A0",tone:"create",body:`+ "${w(y.ADD_ELEMENT,e).name}"`}),DELETE_ELEMENT:(e,t)=>({title:"\u8981\u7D20\u3092\u524A\u9664",tone:"delete",body:`\u2212 "${z(t,e.target.id)?.name??e.target.id}"`}),LINK_ELEMENTS:e=>({title:"\u8981\u7D20\u3092\u9023\u7D50",tone:"create",body:`${w(y.LINK_ELEMENTS,e).from} \u2192 ${w(y.LINK_ELEMENTS,e).to}`}),SET_LINK_LABEL:e=>({title:"\u30EA\u30F3\u30AF\u540D\u3092\u5909\u66F4",tone:"update",body:`\u2192 "${w(y.SET_LINK_LABEL,e).label}"`}),UNLINK_ELEMENTS:e=>({title:"\u30EA\u30F3\u30AF\u3092\u524A\u9664",tone:"delete",body:`${w(y.UNLINK_ELEMENTS,e).from} \u2192 ${w(y.UNLINK_ELEMENTS,e).to}`}),ADD_CONTEXT:e=>({title:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u8FFD\u52A0",tone:"create",body:`+ "${w(y.ADD_CONTEXT,e).name}"`}),SET_CONTEXT_NAME:e=>({title:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u540D\u3092\u5909\u66F4",tone:"update",body:`\u2192 "${w(y.SET_CONTEXT_NAME,e).name}"`}),DELETE_CONTEXT:(e,t)=>({title:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u524A\u9664",tone:"delete",body:`\u2212 "${Y(t,e.target.id)?.name??e.target.id}"`})},Lt=(e,t,n)=>{const i=Oe[e.type],s=i?i(e,n??t):{title:e.type,tone:"meta"};return{title:s.title,targetLabel:Ct(t,e.target),tone:s.tone,...s.body===void 0?{}:{summary:s.body}}},Ot=e=>`${e.type} ${U(e.target)} ${JSON.stringify(e.payload)}`,Ct=(e,t)=>{switch(t.type){case"element":{const n=z(e,t.id);return n?`\u8981\u7D20 \xB7 ${n.name}`:`\u8981\u7D20 \xB7 ${t.id} (missing)`}case"context":{const n=Y(e,t.id);return n?`\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8 \xB7 ${n.name}`:`\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8 \xB7 ${t.id} (missing)`}case"link":{const n=it(e,t.id);return n?`\u30EA\u30F3\u30AF \xB7 ${n.from}\u2192${n.to}`:`\u30EA\u30F3\u30AF \xB7 ${t.id} (missing)`}case"page":return`\u30DA\u30FC\u30B8 \xB7 ${rt(e)}`;default:return`${t.type} \xB7 ${t.id}`}},Pt=e=>[...e.elements.map(t=>({value:U({type:"element",id:t.id}),label:t.name,group:"\u8981\u7D20"})),...e.contexts.map(t=>({value:U({type:"context",id:t.id}),label:t.name,group:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8"}))],Ce=(e,t)=>{const n=e.elements.find(i=>i.id===t.note);return n?{value:U({type:"element",id:n.id}),label:n.name,group:"\u8981\u7D20"}:null},rt=e=>e.title??"Event Storming",zt=(e,t)=>{const n={...t},i=z(e,t.note);t.note!==void 0&&!i&&delete n.note;const o=Y(e,t.context);return t.context!==void 0&&!o&&delete n.context,n},At=(e,t)=>{switch(t.type){case"element":return z(e,t.id)!==void 0;case"context":return Y(e,t.id)!==void 0;case"link":return it(e,t.id)!==void 0;case"page":return!0;default:return!1}},Dt={name:"event-storming",label:"Event Storming",parseBase:wt,emptyBase:$t,actions:y,apply:Tt,canonicalState:Le,hasTarget:At,describe:Lt,serialize:Ot,resolveNavigation:zt,commentTargets:(e,t)=>Pt(e),currentTarget:(e,t)=>Ce(e,t),title:rt},Pe={width:300,height:260},D={actor:"\u30A2\u30AF\u30BF\u30FC",command:"\u30B3\u30DE\u30F3\u30C9",aggregate:"\u96C6\u7D04",event:"\u30A4\u30D9\u30F3\u30C8",policy:"\u30DD\u30EA\u30B7\u30FC",readmodel:"\u30EA\u30FC\u30C9\u30E2\u30C7\u30EB",external:"\u5916\u90E8\u30B7\u30B9\u30C6\u30E0",hotspot:"\u30DB\u30C3\u30C8\u30B9\u30DD\u30C3\u30C8"},ze={event:{bg:"linear-gradient(178deg, #ffbc55, #f8a52e)",ink:"#402703"},command:{bg:"linear-gradient(178deg, #93c9f2, #74b4e8)",ink:"#0e2c4b"},aggregate:{bg:"linear-gradient(178deg, #fff3a6, #fdea7e)",ink:"#4a3a06"},actor:{bg:"linear-gradient(178deg, #ffdf63, #fdd23e)",ink:"#423204"},policy:{bg:"linear-gradient(178deg, #dcc2f7, #c9a6f0)",ink:"#32195c"},readmodel:{bg:"linear-gradient(178deg, #c0e788, #a8dc63)",ink:"#22380a"},external:{bg:"linear-gradient(178deg, #f9bcd3, #f4a0c0)",ink:"#4b1029"},hotspot:{bg:"linear-gradient(178deg, #d63550, #b81c33)",ink:"#ffffff"}},at=e=>{const{bg:t,ink:n}=ze[e];return`--es-note-bg:${t};--es-note-ink:${n}`},Ae=gt`
-  :host {
-    display: flex;
-    flex-direction: column;
-    /* Top-aligned: the name stays put when the editor takes its place. */
-    justify-content: flex-start;
-    position: relative;
-    box-sizing: border-box;
-    padding: 16px 9px 8px;
-    border-radius: 3px;
-    background: var(--es-note-bg, var(--dpk-paper-raised));
-    color: var(--es-note-ink, var(--dpk-ink));
-    box-shadow:
-      0 1px 2px rgba(30, 24, 10, 0.14),
-      0 5px 10px -4px rgba(30, 24, 10, 0.24);
-    cursor: pointer;
-    transform: rotate(var(--es-tilt, 0deg));
-    transition:
-      transform 180ms ease,
-      box-shadow 180ms ease;
-    overflow: visible;
-  }
-
-  :host(:hover) {
-    transform: rotate(0deg) translateY(-2px);
-    box-shadow:
-      0 2px 4px rgba(30, 24, 10, 0.16),
-      0 12px 22px -6px rgba(30, 24, 10, 0.3);
-    z-index: 6;
-  }
-
-  :host([focused]) {
-    outline: 2px solid var(--dpk-blue);
-    outline-offset: 2px;
-    transform: rotate(0deg);
-    z-index: 5;
-  }
-
-  :host([data-mode='editing']),
-  :host([data-mode='commenting']) {
-    z-index: 7;
-    transform: rotate(0deg);
-  }
-
-  /* --------------------------------------------------- sticky note palette */
-
-  /* Small, faint, top-left: readable when looked for, quiet when not. */
-  .note-type {
-    position: absolute;
-    top: 5px;
-    left: 7px;
-    font-family: var(--dpk-mono);
-    font-size: 8px;
-    font-weight: 600;
-    letter-spacing: 0.12em;
-    opacity: 0.5;
-  }
-
-  /* Pinned hotspots are small: the type label is off and the name is centered. */
-  :host([compact]) {
-    justify-content: center;
-    padding: 7px 9px 8px;
-  }
-
-  :host([compact]) .note-type {
-    display: none;
-  }
-
-  .note-name {
-    flex: 1 1 auto;
-    min-width: 0;
-    min-height: 0;
-    font-size: 13px;
-    font-weight: 680;
-    line-height: 1.32;
-    letter-spacing: -0.01em;
-    overflow-wrap: anywhere;
-  }
-
-  :host([compact]) .note-name {
-    flex: 0 1 auto;
-    font-size: 11.5px;
-    line-height: 1.3;
-  }
-
-  /* Comments already left: a passive corner flag, readable without hover. */
-  .note-flag {
-    position: absolute;
-    top: -7px;
-    right: -7px;
-    min-width: 17px;
-    height: 17px;
-    padding: 0 4px;
-    border-radius: 999px;
-    background: var(--dpk-accent);
-    color: var(--dpk-accent-ink);
-    font-family: var(--dpk-mono);
-    font-size: 9.5px;
-    font-weight: 650;
-    line-height: 17px;
-    text-align: center;
-    box-shadow: 0 1px 4px rgba(217, 73, 32, 0.35);
-  }
-
-  /* A side rail of round buttons that fades in on hover, like the hotspot chip:
-     nothing crosses the card's face, and it stays clear of the pins above. */
-  .note-tools {
-    position: absolute;
-    top: 9px;
-    right: -11px;
-    z-index: 8;
-    display: flex;
-    flex-direction: column;
-    gap: 3px;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 140ms ease;
-  }
-
-  /* Labelled, not a glyph: the hotspot affordance names itself on the card's
-     top-right corner. It stays above the pins, which hang above that corner. */
-  .note-hotspot {
-    position: absolute;
-    top: -9px;
-    right: -4px;
-    z-index: 9;
-    padding: 2px 7px;
-    border: 1px solid color-mix(in srgb, #e02c44 45%, transparent);
-    border-radius: 999px;
-    font-size: 9.5px;
-    font-weight: 620;
-    white-space: nowrap;
-    color: var(--dpk-danger);
-    background: color-mix(in srgb, var(--dpk-paper-raised) 94%, transparent);
-    box-shadow: var(--dpk-shadow-xs);
-    cursor: pointer;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 140ms ease;
-  }
-
-  :host(:hover) .note-hotspot,
-  :host([data-mode='editing']) .note-hotspot,
-  .note-hotspot:focus-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .note-hotspot:hover {
-    border-color: #e02c44;
-    background: var(--dpk-danger-soft);
-  }
-
-  :host(:hover) .note-tools,
-  :host([data-mode='commenting']) .note-tools,
-  .note-tools:focus-within {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .note-tools .dpk-icon-btn {
-    width: 22px;
-    height: 22px;
-    border: 1px solid var(--dpk-rule);
-    border-radius: 50%;
-    background: color-mix(in srgb, var(--dpk-paper-raised) 94%, transparent);
-    backdrop-filter: blur(2px);
-    box-shadow: var(--dpk-shadow-xs);
-  }
-`;class De extends le{static{this.styles=[pe,Ae,xt]}static{this.properties={note:{attribute:!1},notes:{attribute:!1},mode:{type:String,reflect:!0,attribute:"data-mode"},focused:{type:Boolean,reflect:!0},compact:{type:Boolean,reflect:!0},onIntent:{attribute:!1}}}#t="";#d=new kt(this);constructor(){super(),this.note=null,this.notes=[],this.mode="view",this.focused=!1,this.compact=!1,this.onIntent=null,this.addEventListener("click",()=>this.#n({kind:"select"}))}updated(t){if(t.has("note")&&this.note&&(this.setAttribute("data-type",this.note.type),this.note.description===void 0?this.removeAttribute("title"):this.setAttribute("title",this.note.description)),t.has("mode")&&(this.mode!=="commenting"&&(this.#t=""),this.mode==="editing"&&this.renderRoot.querySelector("dpk-component-inline-edit")?.startEditing()),this.mode!=="commenting")return;const n=this.renderRoot.querySelector(".comment-pop"),i=this.renderRoot.querySelector('[data-role="comment"]');n&&i&&this.#d.open(n,i,Pe)}render(){const t=this.note;return t?v`
-      <div class="note-type">${D[t.type]}</div>
-      <dpk-component-inline-edit
-        class="note-name"
-        ?wrap=${!0}
-        ?seamless=${!0}
-        .value=${t.name}
-        .label=${"\u4ED8\u7B8B\u540D"}
-        @dpk-commit=${ke(n=>this.#n({kind:"rename",name:n}))}
-      ></dpk-component-inline-edit>
-      ${this.notes.length>0?v`<span class="note-flag">${this.notes.length}</span>`:M}
-      ${t.type==="hotspot"?M:v`<button
-              class="note-hotspot"
-              type="button"
-              data-role="hotspot"
-              title="この付箋にホットスポットを立てる"
-              @click=${this.#s(()=>({kind:"add-hotspot"}))}
-            >
-              ＋ ホットスポット
-            </button>`}
-      <div class="note-tools">
-        <button
-          class="dpk-icon-btn"
-          type="button"
-          data-role="comment"
-          aria-label="コメント"
-          data-active=${String(this.mode==="commenting")}
-          @click=${this.#s(()=>({kind:"toggle-comment"}))}
-        >
-          ${he()}
-        </button>
-        <button
-          class="dpk-icon-btn"
-          type="button"
-          data-role="delete"
-          aria-label="削除"
-          @click=${this.#s(()=>({kind:"delete"}))}
-        >
-          ${me()}
-        </button>
-      </div>
-      ${this.mode==="commenting"?this.#c():M}
-    `:M}#c(){return xe(be(this.#t,this.notes.map(ue)),t=>{t.kind==="input"?(this.#t=t.body,this.requestUpdate()):this.#n(t)})}#s(t){return n=>{n.stopPropagation(),this.#n(t(n))}}#n(t){this.onIntent?.(t)}}const Xe=()=>{customElements.get("dpk-internal-event-storming-note")||customElements.define("dpk-internal-event-storming-note",De)},dt=.25,Xt=2,Rt=(e,t,n)=>({...e,panX:e.panX+t,panY:e.panY+n}),ct=(e,t,n,i)=>{const o=Et(e.zoom*i,dt,Xt),s=(t-e.panX)/e.zoom,r=(n-e.panY)/e.zoom;return{panX:t-s*o,panY:n-r*o,zoom:o}},Bt=(e,t,n)=>{const i=Math.max(1,t.width-n*2),o=Math.max(1,t.height-n*2),s=Math.max(dt,Math.min(1,i/Math.max(1,e.width),o/Math.max(1,e.height)));return{panX:(t.width-e.width*s)/2,panY:(t.height-e.height*s)/2,zoom:s}},Yt=(e,t,n,i)=>{const o=(s,r,a,c)=>{const d=a*e.zoom;return d<=c?(c-d)/2-r*e.zoom:Math.min(-r*e.zoom,Math.max(c-(r+a)*e.zoom,s))};return{zoom:e.zoom,panX:o(e.panX,-i,t.width+i*2,n.width),panY:o(e.panY,-i,t.height+i*2,n.height)}},Re=(e,t,n)=>t>=e.left&&t<=e.left+e.width&&n>=e.top&&n<=e.top+e.height,lt=(e,t,n)=>{for(let i=e.length-1;i>=0;i-=1){const o=e[i];if(o!==void 0&&Re(o.rect,t,n))return o.id}},Kt=(e,t)=>t<e.left+e.width/2?"before":"after",Wt=(e,t)=>e.filter(({rect:n})=>n.left<t.left+t.width&&t.left<n.left+n.width&&n.top<t.top+t.height&&t.top<n.top+n.height).map(({id:n})=>n),pt=(e,t,n,i)=>{const o=new Set(t);if(n.some(p=>o.has(p)))return[];const s=e.filter(p=>!o.has(p)),r=n.map(p=>s.indexOf(p)).filter(p=>p>=0);if(r.length===0)return[];const a=i==="before"?Math.min(...r):Math.max(...r)+1,c=[];let d=s[a-1]??null;for(const p of e)o.has(p)&&(c.push({id:p,after:d}),d=p);return c},Ht=(e,t,n,i)=>{const o=pt(e,t,n,i);if(o.length===0)return o;const s=[...e];for(const r of o){const a=s.indexOf(r.id),c=a<0?void 0:s[a];c!==void 0&&(s.splice(a,1),s.splice(r.after===null?0:s.indexOf(r.after)+1,0,c))}return fe(s,e)?[]:o},Vt=(e,t,n,i=4)=>{if(t.pointerId!==e.pointerId)return e;const{point:o}=t,s={pointerId:e.pointerId,start:e.start,current:o,moved:e.moved||Math.hypot(o.x-e.start.x,o.y-e.start.y)>i},r=lt(n,o.x,o.y);switch(e.kind){case"connect":return{...s,kind:"connect",fromSliceId:e.fromSliceId,...r!==void 0&&r!==e.fromSliceId?{targetSliceId:r}:{}};case"move-slice":{const a=n.find(c=>c.id===r)?.rect;return{...s,kind:"move-slice",sliceId:e.sliceId,...r!==void 0&&r!==e.sliceId&&a!==void 0?{drop:{sliceId:r,side:Kt(a,o.x)}}:{}}}case"select":return{...s,kind:"select"}}},L={kind:"idle"},qt=(e,t)=>e.kind==="editing"&&e.noteId===t?"editing":e.kind==="commenting"&&e.noteId===t?"commenting":"view",Ft=(e,t,n)=>{switch(n.kind){case"toggle-comment":return e.kind==="commenting"&&e.noteId===t?L:{kind:"commenting",noteId:t};case"comment":case"delete":case"dismiss":return L;case"select":case"add-hotspot":return e;case"rename":return e.kind==="editing"&&e.noteId===t?L:e}},q=132,Ut=96,ht=10,mt=24,J=12,P=Ut+J*2,Q=46,tt=16,jt=44,Gt=40,ut=16,Zt=13,K=8,Be=6,Jt=92,Qt=54,te=72,ee=Qt+4,Ye=e=>Math.max(jt,te+(e-1)*ee-J),Ke=["actor","command","aggregate","event","policy","readmodel","external"],ne=e=>mt*2+e*q+(e-1)*ht,We=e=>{if(e===void 0)return 0;const t=new Map;for(const n of e.pins)t.set(n.targetId,(t.get(n.targetId)??0)+1);return Math.max(0,...t.values())},He=(e,t,n)=>{const i=new Map(t.map(l=>[l.id,ne(l.notes.length)])),o=Mt(e,t),s=_t(t,o,{widthOf:l=>i.get(l)??0,gapX:Q,padX:tt,maxWidth:Math.max(n,ne(1))}),r=new Map,a=new Map,c=new Map,d=new Map(t.map(l=>[l.id,l]));let p=K;const m=s.map((l,h)=>{const g=l.cutFrom===void 0?void 0:a.get(l.cutFrom.from),x=g===void 0?0:Math.max(0,g-tt);let k=x+tt;const u=Ye(Math.max(1,...l.sliceIds.map(O=>We(d.get(O)))));for(const O of l.sliceIds)r.set(O,k-x),a.set(O,k),c.set(O,h),k+=(i.get(O)??0)+Q;const _=u+P+Gt,X={sliceIds:l.sliceIds,x,width:k-Q+tt-x,height:_,y:p,head:u,cutFrom:l.cutFrom};return p+=_+Be,X}),f=m.at(-1);return{slices:t,bands:m,xOf:r,absXOf:a,bandOf:c,widthOf:i,arrows:o,width:Math.max(0,...m.map(l=>l.x+l.width))+K*2,height:f===void 0?K*2:f.y+f.height+K}},Ve=e=>{const{context:t,maxRowWidth:n,viewport:i,handlers:o}=e,{state:s}=t,r=24*i.zoom,a=`background-size:${r}px ${r}px;background-position:${i.panX}px ${i.panY}px`;if(s.elements.length===0)return v`<div class="board-viewport board-viewport--empty" style=${a}>
-      <div class="empty">
-        <h2>付箋がまだありません</h2>
-        <p>イベントストーミングを開始しましょう。ドメインイベントを時系列に貼るところから始めます。</p>
-        <button class="dpk-btn dpk-btn--accent" type="button" @click=${()=>o.addFirst()}>
-          ＋ 最初のイベント
-        </button>
-      </div>
-    </div>`;const c=A(s),d=He(s,c,n);return v`
-    <div
-      class="board-viewport${e.gesture!==void 0?" board-viewport--gesturing":""}"
-      data-testid="es-viewport"
-      tabindex="0"
-      style=${a}
-      @pointerdown=${o.viewportPointerDown}
-      @pointermove=${o.viewportPointerMove}
-      @pointerup=${o.viewportPointerUp}
-      @pointercancel=${o.viewportPointerCancel}
-      @pointerleave=${o.viewportPointerLeave}
-      @wheel=${o.viewportWheel}
-      @keydown=${o.keyDown}
-    >
-      <div
-        class="board-content"
-        style=${`transform:translate(${i.panX}px, ${i.panY}px) scale(${i.zoom})`}
-      >
-        <div class="wall" data-testid="es-wall" style=${`width:${d.width}px;height:${d.height}px`}>
-          ${tn(e,d)}
-          ${d.bands.map((p,m)=>Fe(e,d,p,m))}
-        </div>
-      </div>
-      ${je(e.gesture)} ${Ge(s,c)} ${Ze(e)}
-      ${Je(e)}
-    </div>
-  `},qe=(e,t)=>{const n=["slice"];e.selectedSliceIds.includes(t.id)&&n.push("slice--selected");const i=e.gesture;return i?.kind==="connect"&&i.moved&&(i.fromSliceId!==t.id&&n.push("slice--candidate"),i.targetSliceId===t.id&&n.push("slice--target")),i?.kind==="move-slice"&&i.moved&&(i.sliceId===t.id&&n.push("slice--lifted"),i.drop?.sliceId===t.id&&n.push(i.drop.side==="before"?"slice--insert-before":"slice--insert-after")),n.join(" ")},Fe=(e,t,n,i)=>{const{context:o,mode:s,gesture:r,hoverSliceId:a,handlers:c}=e,{navigation:d}=o,p=n.sliceIds.flatMap(l=>t.slices.filter(h=>h.id===l)),m=l=>({x:t.xOf.get(l.id)??0,y:n.head,w:t.widthOf.get(l.id)??0}),f=(l,h,g=!1)=>v`<dpk-internal-event-storming-note
-      style=${h}
-      .note=${l}
-      .notes=${o.comments.filter(x=>x.target.type==="element"&&x.target.id===l.id)}
-      .mode=${qt(s,l.id)}
-      ?focused=${d.note===l.id}
-      ?compact=${g}
-      .onIntent=${x=>c.noteIntent(l.id,x)}
-    ></dpk-internal-event-storming-note>`;return v`
-    <section class="band" data-band=${i} style=${`left:${K+n.x}px;top:${n.y}px`}>
-      <div class="band-canvas" style=${`width:${n.width}px;height:${n.height}px`}>
-        ${Ue(e,t,i)}
-        ${p.map(l=>{const{x:h,y:g,w:x}=m(l);return v`<div
-            class=${qe(e,l)}
-            data-slice-id=${l.id}
-            style=${`left:${h}px;top:${g}px;width:${x}px;height:${P}px`}
-            @pointerdown=${k=>c.slicePointerDown(l.id,k)}
-          ></div>`})}
-        ${bt(p.flatMap(l=>l.notes.map((h,g)=>({slice:l,note:h,slot:g}))),({note:l})=>l.id,({slice:l,note:h,slot:g})=>{const{x,y:k}=m(l),u=x+mt+g*(q+ht);return f(h,`${at(h.type)};position:absolute;left:${u}px;top:${k+J}px;width:${q}px;height:${Ut}px;--es-tilt:${on(h.id)}deg;z-index:2`)})}
-        ${bt(p.flatMap(l=>{const h=m(l);return l.notes.flatMap((g,x)=>l.pins.filter(u=>u.targetId===g.id).map((u,_)=>({pin:u,slot:x,index:_,at:h})))}),({pin:l})=>l.note.id,({pin:l,slot:h,index:g,at:x})=>{const k=x.x+mt+h*(q+ht),u=x.y+J;return f(l.note,`${at(l.note.type)};position:absolute;left:${k+q-Jt-6-g*10}px;top:${u-te-g*ee}px;width:${Jt}px;height:${Qt}px;--es-tilt:-2.4deg;z-index:3`,!0)})}
-        ${p.map(l=>{const{x:h,y:g,w:x}=m(l),k=a===l.id||r?.kind==="connect"&&r.fromSliceId===l.id;return v`<button
-            class="slice-port${k?" slice-port--on":""}"
-            type="button"
-            style=${`left:${h+x-Zt}px;top:${g+P/2-Zt}px`}
-            aria-label="続きを追加（種類を選んで追加 / ドラッグで他のスライスへ接続）"
-            title="クリック: 続きの付箋を選んで追加 / ドラッグ: 他のスライスへ接続"
-            @pointerdown=${u=>c.portPointerDown(l.id,u)}
-          >
-            →
-          </button>`})}
-        ${p.map(l=>{if(a!==l.id||r!==void 0)return M;const{x:h,y:g}=m(l),x=new Set(l.notes.map(u=>u.type)),k=Ke.filter(u=>!x.has(u));return v`<div
-            class="slice-chips"
-            style=${`left:${h}px;top:${g+P+6}px`}
-            @pointerdown=${u=>u.stopPropagation()}
-          >
-            ${k.map(u=>v`<button class="slice-chip" type="button" @click=${()=>c.attachNote(l.id,u)}>
-                  ＋ ${D[u]}
-                </button>`)}
-          </div>`})}
-      </div>
-    </section>
-  `},Ue=(e,t,n)=>{const{context:i,handlers:o}=e,s=i.state.contexts.flatMap((r,a)=>{const d=t.slices.filter(u=>u.contextId===r.id).flatMap(u=>{const _=t.xOf.get(u.id),X=t.bandOf.get(u.id);return _===void 0||X===void 0?[]:[{x:_,band:X,width:t.widthOf.get(u.id)??0}]}),p=d.filter(u=>u.band===n);if(p.length===0)return[];const m=Math.min(...p.map(u=>u.x))-10,f=Math.max(...p.map(u=>u.x+u.width))+10,l=14,h=(t.bands[n]?.head??jt)+P+12,g=d.some(u=>u.band<n)?"\u2026 ":"",x=d.some(u=>u.band>n)?" \u2026":"",k=String(a%5);return[v`<div
-          class="context-region"
-          data-hue=${k}
-          style=${`left:${m}px;top:${l}px;width:${f-m}px;height:${h-l}px`}
-          title=${r.description??r.name}
-        ></div>
-        <div
-          class="context-label"
-          data-hue=${k}
-          style=${`left:${m+10}px;top:${l}px`}
-          @pointerdown=${u=>u.stopPropagation()}
-        >
-          <button
-            class="context-label-name"
-            type="button"
-            title="クリックして名前を変更"
-            @click=${u=>o.renameContext(r.id,{x:u.clientX,y:u.clientY})}
-          >
-            ${g}${r.name}${x}
-          </button>
-          <button
-            class="context-label-x"
-            type="button"
-            aria-label=${`\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u300C${r.name}\u300D\u3092\u89E3\u4F53`}
-            title="コンテキストを解体（付箋は残ります）"
-            @click=${()=>o.dissolveContext(r.id)}
-          >
-            ✕
-          </button>
-        </div>`]});return s.length>0?v`${s}`:M},je=e=>{if(e===void 0||!e.moved)return M;if(e.kind==="connect")return v`<svg class="gesture-layer" aria-hidden="true">
-      ${B`<path class="connect-line" d=${`M ${e.start.x} ${e.start.y} L ${e.current.x} ${e.current.y}`}></path>
-      <circle class="connect-tip" cx=${e.current.x} cy=${e.current.y} r="5"></circle>`}
-    </svg>`;if(e.kind==="select"){const t=Math.min(e.start.x,e.current.x),n=Math.min(e.start.y,e.current.y),i=Math.abs(e.current.x-e.start.x),o=Math.abs(e.current.y-e.start.y);return v`<div
-      class="select-rect"
-      style=${`left:${t}px;top:${n}px;width:${i}px;height:${o}px`}
-    ></div>`}return M},Ge=(e,t)=>v`<div class="board-hud">
-    <span>${e.elements.length} 付箋</span>
-    <span>${t.length} スライス</span>
-    <span>${e.contexts.length} コンテキスト</span>
-    <span class="board-hint">ホイール: 移動 · ピンチ: ズーム · 背景ドラッグ: 範囲選択</span>
-  </div>`,Ze=e=>{const{viewport:t,handlers:n}=e;return v`<div class="board-zoom" @pointerdown=${i=>i.stopPropagation()}>
-    <button type="button" aria-label="縮小" @click=${()=>n.zoomStep(-1)}>−</button>
-    <button type="button" class="board-zoom-pct" title="100% に戻す" @click=${()=>n.zoomReset()}>
-      ${Math.round(t.zoom*100)}%
-    </button>
-    <button type="button" aria-label="拡大" @click=${()=>n.zoomStep(1)}>＋</button>
-    <button type="button" aria-label="全体を表示" title="全体を表示" @click=${()=>n.zoomFit()}>⛶</button>
-  </div>`},Je=e=>{const{context:t,selectedSliceIds:n,selectedLinkIds:i,handlers:o}=e;if(i.length===0&&n.length===0)return M;const s=t.state.contexts;return i.length>0?v`<div class="board-selection" @pointerdown=${r=>r.stopPropagation()}>
-      <span class="board-selection-count">${i.length} 本のリンクを選択中</span>
-      <button class="dpk-btn dpk-btn--accent" type="button" @click=${()=>o.deleteSelection()}>
-        リンクを削除
-      </button>
-      <span class="board-selection-hint">Delete でも削除できます</span>
-      <button class="dpk-icon-btn" type="button" aria-label="選択解除" @click=${()=>o.clearSelection()}>
-        ✕
-      </button>
-    </div>`:v`<div class="board-selection" @pointerdown=${r=>r.stopPropagation()}>
-    <span class="board-selection-count">${n.length} スライスを選択中</span>
-    <button
-      class="dpk-btn dpk-btn--accent"
-      type="button"
-      @click=${r=>o.groupSelection({x:r.clientX,y:r.clientY})}
-    >
-      コンテキストにまとめる
-    </button>
-    ${s.length>0?v`<select
-            class="dpk-select"
-            aria-label="既存コンテキストへ追加"
-            @change=${r=>{const a=ge(r.target,HTMLSelectElement);a!==null&&(a.value!==""&&o.assignSelection(a.value),a.value="")}}
-          >
-            <option value="" selected>既存へ追加…</option>
-            ${s.map(r=>v`<option value=${r.id}>${r.name}</option>`)}
-          </select>`:M}
-    <button class="dpk-btn" type="button" @click=${()=>o.stripSelectionContext()}>コンテキスト解除</button>
-    <button class="dpk-btn" type="button" @click=${()=>o.deleteSelection()}>削除</button>
-    <button class="dpk-icon-btn" type="button" aria-label="選択解除" @click=${()=>o.clearSelection()}>
-      ✕
-    </button>
-  </div>`},oe=(e,t,n,i)=>({d:`M ${e.x} ${e.y} C ${t.x} ${t.y}, ${n.x} ${n.y}, ${i.x} ${i.y}`,mid:{x:(e.x+3*t.x+3*n.x+i.x)/8,y:(e.y+3*t.y+3*n.y+i.y)/8}}),Qe=()=>B`<marker id="es-arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
-    <path d="M0,0 L8,4 L0,8 z"></path>
-  </marker>`,tn=(e,t)=>{const n="url(#es-arrow)",i=[],o=a=>{const c=t.absXOf.get(a),d=t.bandOf.get(a),p=d===void 0?void 0:t.bands[d];if(!(c===void 0||d===void 0||p===void 0))return{x:K+c,y:p.y+p.head,w:t.widthOf.get(a)??0,band:d}},s=a=>{const c=t.bands[a];return c===void 0?0:c.y+c.height},r=(a,c,d,p)=>{i.push(B`<path class="link-hit" d=${c} @pointerdown=${l=>l.stopPropagation()} @click=${l=>e.handlers.linkClick(a.id,l.shiftKey||l.metaKey||l.ctrlKey)}></path>`);const m=e.selectedLinkIds.includes(a.id)?" is-selected":"";if(i.push(B`<path class="link-path${m}" d=${c} marker-end=${n}></path>`),a.label===void 0)return;const f={start:6,end:-6,middle:0}[p];i.push(B`<text class="link-label" x=${d.x+f} y=${d.y-6} text-anchor=${p}>${a.label}</text>`)};for(const a of t.arrows){const c=o(a.from),d=o(a.to);if(c===void 0||d===void 0)continue;if(c.band===d.band){const x=d.x>=c.x+c.w;if((x?d.x-(c.x+c.w):c.x-(d.x+d.w))<=Q+2){const _=c.y+P/2,X=x?c.x+c.w:c.x,O=x?d.x:d.x+d.w;r(a,`M ${X} ${_} L ${O} ${_}`,{x:(X+O)/2,y:_},"middle");continue}const u=en(c,d,s(c.band)-Gt/2);r(a,u.d,u.mid,"middle");continue}const p=c.y<d.y,m=c.x+ut,f=Et(m,d.x+ut,d.x+d.w-ut),l={x:m,y:p?c.y+P:c.y},h={x:f,y:p?d.y:d.y+P},g=p?(s(c.band)+(t.bands[d.band]?.y??0))/2:(s(d.band)+(t.bands[c.band]?.y??0))/2;r(a,nn([l,{x:l.x,y:g},{x:h.x,y:g},h]),{x:h.x-6,y:g},"end")}return B`<svg class="links-layer" width=${t.width} height=${t.height}>
-    <defs>${Qe()}</defs>
-    ${i}
-  </svg>`},en=(e,t,n)=>{const i=e.y+P;if(t.x>=e.x+e.w){const r={x:e.x+e.w-18,y:i},a={x:t.x+18,y:i};return oe(r,{x:r.x+48,y:n},{x:a.x-48,y:n},a)}const o={x:e.x+18,y:i},s={x:t.x+t.w-18,y:i};return oe(o,{x:o.x-48,y:n},{x:s.x+48,y:n},s)},nn=(e,t=10)=>{let n=`M ${e[0]?.x??0} ${e[0]?.y??0}`;for(let o=1;o<e.length-1;o+=1){const s=e[o-1],r=e[o],a=e[o+1];if(s===void 0||r===void 0||a===void 0)continue;const c=Math.sign(r.x-s.x),d=Math.sign(r.y-s.y),p=Math.sign(a.x-r.x),m=Math.sign(a.y-r.y),f=Math.hypot(r.x-s.x,r.y-s.y),l=Math.hypot(a.x-r.x,a.y-r.y),h=Math.max(0,Math.min(t,f/2,l/2));n+=` L ${r.x-c*h} ${r.y-d*h} Q ${r.x} ${r.y} ${r.x+p*h} ${r.y+m*h}`}const i=e.at(-1);return i===void 0?n:`${n} L ${i.x} ${i.y}`},on=e=>{let t=0;for(const n of e)t=(t*31+n.charCodeAt(0))%997;return(t%17-8)*.09},sn=gt`
-  /* The board owns the whole main area; the viewport clips, never the shell. */
-  .dpk-main {
-    overflow: hidden;
-  }
-
-  .dpk-main-body {
-    flex: 1 1 auto;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    gap: 0;
-  }
-
-  /* ------------------------------------------------------------- viewport */
-
-  /* An infinite pannable surface; the dot grid scrolls with the content
-     (background-position/-size are set inline from the viewport state). */
-  .board-viewport {
-    position: relative;
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: hidden;
-    touch-action: none;
-    background-color: var(--dpk-paper);
-    background-image: radial-gradient(circle, var(--dpk-rule) 1px, transparent 1px);
-  }
-
-  .board-viewport--gesturing,
-  .board-viewport--gesturing * {
-    user-select: none;
-  }
-
-  .board-viewport--empty {
-    display: grid;
-    place-items: center;
-    padding: 24px;
-  }
-
-  .board-viewport:focus-visible {
-    outline: none;
-    box-shadow: inset var(--dpk-focus);
-  }
-
-  .board-content {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: max-content;
-    transform-origin: 0 0;
-    will-change: transform;
-  }
-
-  /* The wall is a fixed-size canvas: bands and the arrow layer are placed inside
-     it at explicit coordinates, so an arrow may span several bands. */
-  .wall {
-    position: relative;
-  }
-
-  .band {
-    position: absolute;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .band-canvas {
-    position: relative;
-    flex: 0 0 auto;
-  }
-
-  /* ---------------------------------------------------------------- slices */
-
-  /* One causal slice: its notes framed together, read left to right.
-     The frame is also the drag handle for moving the whole slice. */
-  .slice {
-    position: absolute;
-    z-index: 1;
-    border: 1px solid var(--dpk-rule-strong);
-    border-radius: 12px;
-    background: color-mix(in srgb, var(--dpk-paper-raised) 78%, transparent);
-    box-shadow: var(--dpk-shadow-xs);
-    cursor: grab;
-  }
-
-  .slice--selected {
-    border-color: var(--dpk-blue);
-    box-shadow:
-      0 0 0 2px var(--dpk-blue-soft),
-      var(--dpk-shadow-xs);
-  }
-
-  /* While a connection drag is out: everywhere it may land lights up dashed… */
-  .slice--candidate {
-    border: 1.5px dashed color-mix(in srgb, var(--dpk-blue) 55%, transparent);
-  }
-
-  /* …and the slice under the cursor confirms the landing. */
-  .slice--target {
-    border: 1.5px solid var(--dpk-blue);
-    background: color-mix(in srgb, var(--dpk-blue-soft) 55%, transparent);
-    box-shadow:
-      0 0 0 3px var(--dpk-blue-soft),
-      var(--dpk-shadow-sm);
-  }
-
-  /* The slice being carried by a move drag. */
-  .slice--lifted {
-    opacity: 0.45;
-    border-style: dashed;
-    cursor: grabbing;
-  }
-
-  /* Insertion bar on the side of the drop target the slice will land on. */
-  .slice--insert-before::before,
-  .slice--insert-after::after {
-    content: '';
-    position: absolute;
-    top: -6px;
-    bottom: -6px;
-    width: 3px;
-    border-radius: 2px;
-    background: var(--dpk-blue);
-  }
-
-  .slice--insert-before::before {
-    left: -10px;
-  }
-
-  .slice--insert-after::after {
-    right: -10px;
-  }
-
-  /* Connection port on a slice's right edge: click continues, drag connects.
-     Shown only for the hovered slice (hover is hit-tested by the element,
-     with padding, so it stays up while the cursor crosses over to it). */
-  .slice-port {
-    position: absolute;
-    z-index: 5;
-    width: 26px;
-    height: 26px;
-    border: 1px solid var(--dpk-rule-strong);
-    border-radius: 50%;
-    background: var(--dpk-paper-raised);
-    color: var(--dpk-ink-soft);
-    font-size: 13px;
-    line-height: 1;
-    box-shadow: var(--dpk-shadow-xs);
-    cursor: crosshair;
-    opacity: 0;
-    pointer-events: none;
-    transition:
-      opacity 120ms ease,
-      border-color 120ms ease;
-  }
-
-  .slice-port--on,
-  .slice-port:focus-visible {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .slice-port:hover {
-    border-color: var(--dpk-blue);
-    color: var(--dpk-blue);
-  }
-
-  /* Add-note chips under the hovered slice: the roles it is still missing. */
-  .slice-chips {
-    position: absolute;
-    z-index: 6;
-    display: flex;
-    gap: 4px;
-    padding: 2px 0;
-  }
-
-  .slice-chip {
-    border: 1px dashed var(--dpk-rule-strong);
-    border-radius: 999px;
-    padding: 3px 9px;
-    font-size: 10.5px;
-    font-weight: 620;
-    white-space: nowrap;
-    color: var(--dpk-ink-soft);
-    background: color-mix(in srgb, var(--dpk-paper-raised) 88%, transparent);
-    cursor: pointer;
-    transition:
-      border-color 120ms ease,
-      color 120ms ease;
-  }
-
-  .slice-chip:hover {
-    border-color: var(--dpk-blue);
-    color: var(--dpk-blue);
-  }
-
-  /* ------------------------------------------------------ bounded contexts */
-
-  .context-region[data-hue='0'],
-  .context-label[data-hue='0'] {
-    --ctx-rgb: 51, 102, 204;
-  }
-  .context-region[data-hue='1'],
-  .context-label[data-hue='1'] {
-    --ctx-rgb: 13, 148, 136;
-  }
-  .context-region[data-hue='2'],
-  .context-label[data-hue='2'] {
-    --ctx-rgb: 174, 110, 6;
-  }
-  .context-region[data-hue='3'],
-  .context-label[data-hue='3'] {
-    --ctx-rgb: 124, 58, 237;
-  }
-  .context-region[data-hue='4'],
-  .context-label[data-hue='4'] {
-    --ctx-rgb: 190, 50, 100;
-  }
-
-  .context-region {
-    position: absolute;
-    z-index: 0;
-    border: 1.5px dashed rgba(var(--ctx-rgb), 0.33);
-    border-radius: 10px;
-    background: rgba(var(--ctx-rgb), 0.05);
-    pointer-events: none;
-  }
-
-  /* The label rides the region's top edge and carries the rename/dissolve UI. */
-  .context-label {
-    position: absolute;
-    z-index: 7;
-    transform: translateY(-55%);
-    display: flex;
-    align-items: center;
-    gap: 4px;
-  }
-
-  .context-label-name {
-    border: none;
-    border-radius: 999px;
-    padding: 3px 10px;
-    font-family: var(--dpk-mono);
-    font-size: 9.5px;
-    font-weight: 650;
-    letter-spacing: 0.13em;
-    text-transform: uppercase;
-    white-space: nowrap;
-    color: #fff;
-    background: rgba(var(--ctx-rgb), 0.9);
-    cursor: pointer;
-    box-shadow: var(--dpk-shadow-xs);
-  }
-
-  .context-label-name:hover {
-    background: rgba(var(--ctx-rgb), 1);
-  }
-
-  .context-label-x {
-    width: 18px;
-    height: 18px;
-    border: none;
-    border-radius: 50%;
-    font-size: 9px;
-    line-height: 1;
-    color: rgba(var(--ctx-rgb), 0.9);
-    background: color-mix(in srgb, var(--dpk-paper-raised) 92%, transparent);
-    box-shadow: var(--dpk-shadow-xs);
-    cursor: pointer;
-    opacity: 0;
-    transition: opacity 120ms ease;
-  }
-
-  .context-label:hover .context-label-x,
-  .context-label-x:focus-visible {
-    opacity: 1;
-  }
-
-  /* ---------------------------------------------------------------- arrows */
-
-  .links-layer {
-    position: absolute;
-    inset: 0;
-    /* Causality strokes are annotations drawn over the wall. */
-    z-index: 4;
-    pointer-events: none;
-    overflow: visible;
-  }
-
-  /* Stroke must come from a stylesheet, not a presentation attribute:
-     a var() inside stroke="..." is not substituted and the line stays invisible. */
-  .link-path {
-    fill: none;
-    stroke: var(--dpk-ink-soft);
-    stroke-width: 1.6;
-    stroke-linecap: round;
-    opacity: 0.6;
-  }
-
-  /* Invisible fat stroke on top of the line: a mistaken connection is easy to
-     pick, and picking it never starts a wall gesture. */
-  .link-hit {
-    fill: none;
-    stroke: transparent;
-    stroke-width: 14;
-    stroke-linecap: round;
-    pointer-events: stroke;
-    cursor: pointer;
-  }
-
-  .link-path.is-selected {
-    stroke: var(--dpk-blue);
-    stroke-width: 2.6;
-    opacity: 1;
-  }
-
-  .link-label {
-    font-family: var(--dpk-mono);
-    font-size: 9px;
-    letter-spacing: 0.06em;
-    fill: var(--dpk-ink-soft);
-    paint-order: stroke;
-    stroke: var(--dpk-paper-raised);
-    stroke-width: 3;
-    stroke-linejoin: round;
-  }
-
-  .links-layer marker path {
-    fill: var(--dpk-ink-soft);
-    opacity: 0.75;
-  }
-
-  /* --------------------------------------------------------------- gesture */
-
-  /* Overlays live in viewport space, above the transformed content. */
-  .gesture-layer {
-    position: absolute;
-    inset: 0;
-    z-index: 30;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    overflow: visible;
-  }
-
-  .connect-line {
-    fill: none;
-    stroke: var(--dpk-blue);
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-dasharray: 6 4;
-  }
-
-  .connect-tip {
-    fill: var(--dpk-blue);
-  }
-
-  .select-rect {
-    position: absolute;
-    z-index: 30;
-    border: 1px solid var(--dpk-blue);
-    background: color-mix(in srgb, var(--dpk-blue-soft) 40%, transparent);
-    pointer-events: none;
-  }
-
-  /* ------------------------------------------------------------ floating UI */
-
-  .board-hud {
-    position: absolute;
-    left: 12px;
-    bottom: 12px;
-    z-index: 40;
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    padding: 5px 12px;
-    border: 1px solid var(--dpk-rule);
-    border-radius: 999px;
-    font-family: var(--dpk-mono);
-    font-size: 10px;
-    letter-spacing: 0.05em;
-    color: var(--dpk-ink-faint);
-    background: color-mix(in srgb, var(--dpk-paper-raised) 82%, transparent);
-    backdrop-filter: blur(6px);
-    pointer-events: none;
-  }
-
-  .board-hint {
-    color: var(--dpk-ink-faint);
-    opacity: 0.8;
-  }
-
-  .board-zoom {
-    position: absolute;
-    right: 12px;
-    bottom: 12px;
-    z-index: 40;
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--dpk-rule);
-    border-radius: 8px;
-    background: color-mix(in srgb, var(--dpk-paper-raised) 88%, transparent);
-    backdrop-filter: blur(6px);
-    box-shadow: var(--dpk-shadow-xs);
-    overflow: hidden;
-  }
-
-  .board-zoom button {
-    border: none;
-    background: transparent;
-    padding: 6px 10px;
-    font-size: 12px;
-    line-height: 1;
-    color: var(--dpk-ink-soft);
-    cursor: pointer;
-  }
-
-  .board-zoom button:hover {
-    background: var(--dpk-blue-soft);
-    color: var(--dpk-blue);
-  }
-
-  .board-zoom .board-zoom-pct {
-    min-width: 48px;
-    font-family: var(--dpk-mono);
-    font-size: 10.5px;
-  }
-
-  .board-selection {
-    position: absolute;
-    left: 50%;
-    bottom: 14px;
-    transform: translateX(-50%);
-    z-index: 45;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    padding: 8px 12px;
-    border: 1px solid var(--dpk-rule-strong);
-    border-radius: 10px;
-    background: color-mix(in srgb, var(--dpk-paper-raised) 94%, transparent);
-    backdrop-filter: blur(6px);
-    box-shadow: var(--dpk-shadow);
-  }
-
-  .board-selection-count {
-    font-family: var(--dpk-mono);
-    font-size: 10.5px;
-    color: var(--dpk-ink-soft);
-    white-space: nowrap;
-  }
-
-  .board-selection-hint {
-    font-size: 10.5px;
-    color: var(--dpk-ink-faint);
-    white-space: nowrap;
-  }
-
-  /* ----------------------------------------------------------------- empty */
-
-  .empty {
-    border: 1px dashed var(--dpk-rule-strong);
-    border-radius: var(--dpk-radius-lg);
-    padding: 28px 24px;
-    background: var(--dpk-paper-raised);
-    max-width: 560px;
-    display: grid;
-    gap: 10px;
-    box-shadow: var(--dpk-shadow-sm);
-    justify-items: start;
-  }
-
-  /* --------------------------------------------------------------- pickers */
-
-  .context-pop {
-    min-width: 220px;
-  }
-
-  /* -------------------------------------------------------- append picker */
-
-  /* The palette travels in --es-note-bg/-ink, so a chip previews what it adds. */
-  .append-menu {
-    min-width: 220px;
-  }
-
-  .append-menu .type-options {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 4px;
-  }
-
-  .type-chip {
-    border: 1px solid var(--dpk-rule-strong);
-    border-radius: 4px;
-    padding: 6px 8px;
-    font-size: 11px;
-    font-weight: 620;
-    text-align: left;
-    background: var(--es-note-bg, var(--dpk-paper-raised));
-    color: var(--es-note-ink, var(--dpk-ink));
-    cursor: pointer;
-    transition: transform 120ms ease;
-  }
-
-  .type-chip:hover {
-    transform: translateY(-1px);
-    box-shadow: var(--dpk-shadow-sm);
-  }
-
-  .link-add .dpk-select {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-`,rn={width:260,height:150},an={width:236,height:210},dn=64,cn=["event","command","aggregate","actor","policy","readmodel","external"],ln=1200,ie=5,pn={x:20,top:46,bottom:40};class se extends vt{constructor(){super(),this.definition=Dt,this.#d=new kt(this),this.mode=L,this.boardWidth=ln,this.viewport={panX:24,panY:16,zoom:1},this.gesture=void 0,this.hoverSliceId=void 0,this.selectedSliceIds=[],this.selectedLinkIds=[],this.naming=void 0}static{this.styles=[vt.styles,sn,xt]}static{this.properties={mode:{state:!0},boardWidth:{state:!0},viewport:{state:!0},gesture:{state:!0},hoverSliceId:{state:!0},selectedSliceIds:{state:!0},selectedLinkIds:{state:!0},naming:{state:!0}}}#t;#d;disconnectedCallback(){super.disconnectedCallback(),this.#t?.disconnect(),this.#t=void 0}firstUpdated(){typeof ResizeObserver>"u"||(this.#t=new ResizeObserver(t=>{const n=t[0]?.contentRect.width;n!==void 0&&n>0&&(this.boardWidth=n)}),this.#t.observe(this))}updated(){super.updated(),this.#l(this.viewport),this.mode.kind==="append"&&this.#c("#append-menu",this.mode.point,an),this.naming!==void 0&&this.#c("#context-pop",this.naming.point,rn,"#context-name")}#c(t,n,i,o){const s=this.renderRoot.querySelector(t);if(!s||s.matches(":popover-open")||(this.#d.open(s,ve(n.x,n.y),i),o===void 0))return;const r=this.renderRoot.querySelector(o);r?.focus(),r instanceof HTMLInputElement&&r.select()}#s(){return Math.max(hn,this.boardWidth-96)}renderRegions(t){return{main:this.#n(t)}}#n(t){return v`
-      ${Ve({context:t,mode:this.mode,maxRowWidth:this.#s(),viewport:this.viewport,gesture:this.gesture,hoverSliceId:this.hoverSliceId,selectedSliceIds:this.selectedSliceIds,selectedLinkIds:this.selectedLinkIds,handlers:{noteIntent:(n,i)=>this.#T(n,i),addFirst:()=>this.#D(t),attachNote:(n,i)=>this.#L(t,n,i),viewportPointerDown:n=>this.#v(n),viewportPointerMove:n=>this.#k(n),viewportPointerUp:n=>this.#E(t,n),viewportPointerCancel:()=>this.gesture=void 0,viewportPointerLeave:()=>{this.gesture===void 0&&(this.hoverSliceId=void 0)},viewportWheel:n=>this.#y(n),portPointerDown:(n,i)=>this.#x(n,i),slicePointerDown:(n,i)=>this.#b(n,i),zoomStep:n=>this.#w(n),zoomFit:()=>this.#$(),zoomReset:()=>this.#h(1/this.viewport.zoom),groupSelection:n=>{this.selectedSliceIds.length>0&&(this.naming={kind:"create-context",sliceIds:this.selectedSliceIds,point:n})},assignSelection:n=>this.#f(t,n),stripSelectionContext:()=>this.#f(t,null),clearSelection:()=>{this.selectedSliceIds=[],this.selectedLinkIds=[]},linkClick:(n,i)=>this.#C(n,i),deleteSelection:()=>this.#u(t),keyDown:n=>this.#P(t,n),renameContext:(n,i)=>this.naming={kind:"rename-context",contextId:n,point:i},dissolveContext:n=>t.dispatch(E.deleteContext(n))}})}
-      ${this.mode.kind==="append"?this.#A(t,this.mode.sliceId):M}
-      ${this.naming!==void 0?this.#z(t,this.naming):M}
-    `}#e(){return this.renderRoot.querySelector(".board-viewport")}#o(t){const n=this.#e()?.getBoundingClientRect();return n===void 0?{x:t.clientX,y:t.clientY}:{x:t.clientX-n.left,y:t.clientY-n.top}}#r(t){const n=this.#e();if(n===null)return[];const i=n.getBoundingClientRect();return[...this.renderRoot.querySelectorAll("[data-slice-id]")].map(o=>{const s=o.getBoundingClientRect();return{id:o.dataset.sliceId??"",rect:{left:s.left-i.left-(t?.x??0),top:s.top-i.top-(t?.top??0),width:s.width+(t?.x??0)*2,height:s.height+(t?.top??0)+(t?.bottom??0)}}})}#p(t,n){const i=this.#e();i!==null&&(i.setPointerCapture(t.pointerId),this.gesture=n)}#x(t,n){if(n.button!==0)return;n.stopPropagation(),n.preventDefault();const i=this.#o(n);this.#p(n,{kind:"connect",pointerId:n.pointerId,fromSliceId:t,start:i,current:i,moved:!1})}#b(t,n){if(n.button!==0)return;n.stopPropagation(),n.preventDefault();const i=this.#o(n);this.#p(n,{kind:"move-slice",pointerId:n.pointerId,sliceId:t,start:i,current:i,moved:!1})}#v(t){if(t.button!==0||this.gesture!==void 0)return;for(const i of t.composedPath()){if(i===t.currentTarget)break;if(i instanceof Element&&(i.tagName.toLowerCase()==="dpk-internal-event-storming-note"||i.matches("button, select, textarea, input, a")))return}const n=this.#o(t);(this.mode.kind==="editing"||this.mode.kind==="append")&&(this.mode=L),this.selectedLinkIds=[],this.#p(t,{kind:"select",pointerId:t.pointerId,start:n,current:n,moved:!1})}#k(t){const n=this.gesture,i=this.#o(t);if(n===void 0){const o=lt(this.#r(pn),i.x,i.y);o!==this.hoverSliceId&&(this.hoverSliceId=o);return}this.gesture=Vt(n,{pointerId:t.pointerId,point:i},this.#r(),ie)}#E(t,n){const i=this.gesture;if(i===void 0||n.pointerId!==i.pointerId)return;const o=Vt(i,{pointerId:n.pointerId,point:this.#o(n)},this.#r(),ie);if(this.gesture=void 0,o.kind==="connect"){o.moved?o.targetSliceId!==void 0&&this.#S(t,o.fromSliceId,o.targetSliceId):this.#M(o.fromSliceId);return}if(o.kind==="move-slice"){if(!o.moved){this.selectedSliceIds=this.selectedSliceIds.includes(o.sliceId)?this.selectedSliceIds.filter(r=>r!==o.sliceId):[...this.selectedSliceIds,o.sliceId];return}o.drop!==void 0&&this.#O(t,o.sliceId,o.drop.sliceId,o.drop.side);return}if(!o.moved){this.selectedSliceIds=[];return}const s={left:Math.min(o.start.x,o.current.x),top:Math.min(o.start.y,o.current.y),width:Math.abs(o.current.x-o.start.x),height:Math.abs(o.current.y-o.start.y)};this.selectedSliceIds=[...Wt(this.#r(),s)]}#y(t){t.preventDefault();const n=this.#o(t);this.#l(t.ctrlKey||t.metaKey?ct(this.viewport,n.x,n.y,Math.exp(-t.deltaY*.01)):Rt(this.viewport,-t.deltaX,-t.deltaY))}#h(t){const n=this.#e()?.getBoundingClientRect();this.#l(ct(this.viewport,(n?.width??0)/2,(n?.height??0)/2,t))}#w(t){this.#h(t===1?1.2:1/1.2)}#$(){const t=this.#e()?.getBoundingClientRect(),n=this.#m();t===void 0||n===void 0||this.#l(Bt(n,{width:t.width,height:t.height},48))}#m(){const t=this.renderRoot.querySelector(".wall");return t===null?void 0:{width:t.offsetWidth,height:t.offsetHeight}}#l(t){const n=this.#e()?.getBoundingClientRect(),i=this.#m(),o=n===void 0||i===void 0||i.width===0||n.width===0?t:Yt(t,i,{width:n.width,height:n.height},dn),s=this.viewport;o.panX===s.panX&&o.panY===s.panY&&o.zoom===s.zoom||(this.viewport=o)}#T(t,n){const i=this.context();switch(n.kind){case"select":i.navigate({note:t});break;case"rename":i.dispatch(E.setElementName(t,n.name));break;case"comment":i.dispatch({type:"comment",target:`element:${t}`,payload:{body:n.body}});break;case"delete":i.dispatch(E.deleteElement(t)),i.navigation.note===t&&i.navigate({note:null});break;case"add-hotspot":this.#N(i,t);break}this.mode=Ft(this.mode,t,n)}#a(t,n){return A(t).find(i=>i.id===n)}#i(t){return t===void 0?[]:[...t.notes,...t.pins.map(n=>n.note)].map(n=>n.id)}#S(t,n,i){if(n===i)return;const o=A(t.state),s=o.find(f=>f.id===n),r=o.find(f=>f.id===i),a=s&&r?Nt(s,r):void 0;if(s===void 0||r===void 0||a===void 0||t.state.links.some(f=>f.from===a.from&&f.to===a.to))return;const c=t.state.links.map(f=>f.id),d=t.state.elements.map(f=>f.id),p=V(s)?.id,m=p!==void 0&&o.indexOf(r)>o.indexOf(s)?Ht(d,this.#i(r),[p],"after"):[];t.dispatchBatch([E.linkElements(C(`link-${a.from}`,c),a.from,a.to,{kind:"flow"}),...m.map(f=>E.moveElement(f.id,f.after))])}#I(t){const n=this.#e(),i=this.#r().find(s=>s.id===t)?.rect;if(n===null||i===void 0)return;const o=n.getBoundingClientRect();return{x:o.left+i.left+i.width,y:o.top+i.top+i.height/2}}#M(t){const n=this.#I(t);n!==void 0&&(this.mode={kind:"append",sliceId:t,point:n})}#_(t,n,i){const o=this.#a(t.state,n),s=o?V(o):void 0;if(s===void 0){this.mode=L;return}const r=C(`new-${i}`,H(t.state)),a=t.state.links.map(d=>d.id);if(!t.dispatchBatch([E.addElement(r,i,D[i]),E.linkElements(C(`link-${s.id}`,a),s.id,r,{kind:"flow"})]).ok){this.mode=L;return}t.navigate({note:r}),this.mode={kind:"editing",noteId:r}}#N(t,n){const i=C("new-hotspot",H(t.state)),o=t.state.links.map(r=>r.id);t.dispatchBatch([E.addElement(i,"hotspot",D.hotspot),E.linkElements(C(`link-${i}`,o),i,n,{kind:"member"})]).ok&&(t.navigate({note:i}),this.mode={kind:"editing",noteId:i})}#L(t,n,i){const o=this.#a(t.state,n),s=o===void 0?void 0:It(o,i);if(s===void 0)return;const r=C(`new-${i}`,H(t.state)),[a,c]=s.incoming?[r,s.anchorId]:[s.anchorId,r],d=t.state.links.map(m=>m.id);t.dispatchBatch([E.addElement(r,i,D[i]),E.linkElements(C(`link-${a}`,d),a,c,{kind:"member"})]).ok&&(t.navigate({note:r}),this.mode={kind:"editing",noteId:r})}#O(t,n,i,o){const s=t.state,r=pt(s.elements.map(a=>a.id),this.#i(this.#a(s,n)),this.#i(this.#a(s,i)),o);t.dispatchBatch(r.map(a=>E.moveElement(a.id,a.after)))}#C(t,n){this.mode.kind==="editing"&&(this.mode=L),this.selectedSliceIds=[],this.selectedLinkIds=n?this.selectedLinkIds.includes(t)?this.selectedLinkIds.filter(i=>i!==t):[...this.selectedLinkIds,t]:[t],this.#e()?.focus()}#u(t){if(this.selectedLinkIds.length>0){const o=t.state.links.filter(s=>this.selectedLinkIds.includes(s.id));t.dispatchBatch(o.map(s=>E.unlinkElements(s.from,s.to))),this.selectedLinkIds=[];return}if(this.selectedSliceIds.length===0)return;const n=A(t.state),i=this.selectedSliceIds.flatMap(o=>this.#i(n.find(s=>s.id===o)));t.dispatchBatch(i.map(o=>E.deleteElement(o))),this.selectedSliceIds=[]}#P(t,n){if(n.target!==n.currentTarget)return;if(n.key==="Escape"){this.selectedSliceIds=[],this.selectedLinkIds=[];return}if(n.key!=="Delete"&&n.key!=="Backspace"||this.mode.kind!=="idle"||this.naming!==void 0)return;if(n.preventDefault(),this.selectedLinkIds.length>0||this.selectedSliceIds.length>0){this.#u(t);return}const i=t.navigation.note;i===void 0||z(t.state,i)===void 0||(t.dispatch(E.deleteElement(i)),t.navigate({note:null}))}#f(t,n){const i=A(t.state),o=this.selectedSliceIds.flatMap(r=>this.#i(i.find(a=>a.id===r)));t.dispatchBatch(o.map(r=>E.setElementContext(r,n))).ok&&(this.selectedSliceIds=[])}#g(t,n){const o=this.renderRoot.querySelector("#context-name")?.value.trim()??"";if(o==="")return;if(n.kind==="rename-context"){t.dispatch(E.setContextName(n.contextId,o)).ok&&(this.naming=void 0);return}const s=C("context",t.state.contexts.map(d=>d.id)),r=A(t.state),a=n.sliceIds.flatMap(d=>this.#i(r.find(p=>p.id===d)));t.dispatchBatch([E.addContext(s,o),...a.map(d=>E.setElementContext(d,s))]).ok&&(this.selectedSliceIds=[],this.naming=void 0)}#z(t,n){const i=n.kind==="rename-context"?Y(t.state,n.contextId)?.name??"":"";return v`<div id="context-pop" class="comment-pop context-pop" popover="manual">
-      <span class="dpk-label">
-        ${n.kind==="create-context"?"\u65B0\u3057\u3044\u5883\u754C\u3065\u3051\u3089\u308C\u305F\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8":"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u540D\u3092\u5909\u66F4"}
-      </span>
-      <input
-        id="context-name"
-        class="dpk-input"
-        type="text"
-        placeholder="コンテキスト名"
-        .value=${i}
-        @keydown=${o=>{o.key==="Enter"&&this.#g(t,n),o.key==="Escape"&&(this.naming=void 0)}}
-      />
-      <div class="pop-actions">
-        <button class="dpk-btn" type="button" @click=${()=>this.naming=void 0}>キャンセル</button>
-        <button class="dpk-btn dpk-btn--accent" type="button" @click=${()=>this.#g(t,n)}>
-          ${n.kind==="create-context"?"\u4F5C\u6210":"\u4FDD\u5B58"}
-        </button>
-      </div>
-    </div>`}#A(t,n){const i=this.#a(t.state,n),o=i===void 0?void 0:V(i);return v`<div id="append-menu" class="comment-pop append-menu" popover="manual">
-      <span class="dpk-label">${o===void 0?"\u7D9A\u304D\u306B\u8FFD\u52A0\u3059\u308B\u4ED8\u7B8B":`\u300C${o.name}\u300D\u306E\u7D9A\u304D\u306B\u8FFD\u52A0`}</span>
-      <div class="type-options">
-        ${cn.map(s=>v`<button
-              class="type-chip"
-              type="button"
-              data-type=${s}
-              style=${at(s)}
-              @click=${()=>this.#_(t,n,s)}
-            >
-              ${D[s]}
-            </button>`)}
-      </div>
-      <div class="pop-actions">
-        <button class="dpk-btn" type="button" @click=${()=>this.mode=L}>キャンセル</button>
-      </div>
-    </div>`}#D(t){const n=C("new-event",H(t.state));if(!t.dispatch(E.addElement(n,"event",D.event)).ok){this.mode=L;return}t.navigate({note:n}),this.mode={kind:"editing",noteId:n}}}const hn=264,re=()=>{Xe(),customElements.get("dpk-template-event-storming")||customElements.define("dpk-template-event-storming",se)},mn=Object.freeze(Object.defineProperty({__proto__:null,DpkTemplateEventStorming:se,ES_IDLE:L,NOTE_TYPES:j,NOTE_TYPE_LABELS:D,ZOOM_MAX:Xt,ZOOM_MIN:dt,allNoteIds:H,applyEventStormingAction:Tt,attachAnchor:It,buildSlices:A,connectionEndpoints:Nt,constrainViewport:Yt,defineEventStormingElement:re,describeEventStormingAction:Lt,dropSide:Kt,emptyEventStormingBase:$t,eventStormingAction:E,eventStormingActions:y,eventStormingBaseSchema:yt,eventStormingCommentTargets:Pt,eventStormingDefinition:Dt,eventStormingHasTarget:At,eventStormingTargetLabel:Ct,eventStormingTitle:rt,findContext:Y,findLink:it,findNote:z,fitViewport:Bt,hitRect:lt,noteCardModeOf:qt,panBy:Rt,parseEventStormingBase:wt,planSliceBands:_t,rectsInBand:Wt,reduceNoteIntent:Ft,resolveEventStormingNavigation:zt,sameSlice:Z,serializeEventStormingAction:Ot,sliceArrows:Mt,sliceMovePlan:pt,sliceMoveSteps:Ht,sliceVoice:V,zoomAt:ct},Symbol.toStringTag,{value:"Module"}));export{re as d,mn as i};