dev-process-kit 0.2.1 → 0.3.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/README.md +178 -60
  2. package/dist/boards.js +1 -0
  3. package/dist/chunks/shared-BX1EnRfr.js +1 -0
  4. package/dist/chunks/shared-C-M2Nfmu.js +686 -0
  5. package/dist/chunks/shared-Cas88qVh.js +2165 -0
  6. package/dist/chunks/{shared-DeXM1v86.js → shared-Cejw83eH.js} +21 -29
  7. package/dist/chunks/shared-CfVpKPRY.js +1844 -0
  8. package/dist/chunks/shared-CnPCm4bJ.js +31 -0
  9. package/dist/chunks/shared-D1iBuYZV.js +6208 -0
  10. package/dist/chunks/shared-D7VtCoY6.js +3586 -0
  11. package/dist/chunks/{shared-zZF1zU0o.js → shared-DHVDag3x.js} +25 -56
  12. package/dist/chunks/shared-DdpMqkAH.js +4928 -0
  13. package/dist/chunks/shared-EYOAbLSo.js +1 -0
  14. package/dist/chunks/shared-TrlnHjrJ.js +1 -0
  15. package/dist/chunks/shared-a9QCZpxj.js +574 -0
  16. package/dist/chunks/shared-df9XN7ns.js +904 -0
  17. package/dist/chunks/shared-dnY35u9q.js +2530 -0
  18. package/dist/chunks/shared-e9ia12Uz.js +1636 -0
  19. package/dist/chunks/shared-qk9TB_UM.js +705 -0
  20. package/dist/components.js +1 -1
  21. package/dist/index.js +1 -1
  22. package/dist/views/delegation-poker.js +1 -0
  23. package/dist/views/plain.js +1 -0
  24. package/dist/views/prototype.js +1 -0
  25. package/dist/views/slides.js +1 -0
  26. package/dist/views/task-board.js +1 -0
  27. package/dist/views/usm.js +1 -0
  28. package/package.json +8 -10
  29. package/dist/chunks/shared-B5lBiq5s.js +0 -1
  30. package/dist/chunks/shared-BjyoXjSO.js +0 -1
  31. package/dist/chunks/shared-C-d71uRP.js +0 -573
  32. package/dist/chunks/shared-C5n6LBUz.js +0 -1105
  33. package/dist/chunks/shared-CAWKGcWJ.js +0 -1053
  34. package/dist/chunks/shared-CdZhkPto.js +0 -1
  35. package/dist/chunks/shared-DB_C1Mdu.js +0 -1
  36. package/dist/chunks/shared-DDOpqbVL.js +0 -49
  37. package/dist/chunks/shared-DehzCTC2.js +0 -1616
  38. package/dist/chunks/shared-Dfj6O0K4.js +0 -2774
  39. package/dist/chunks/shared-DiFAX1_p.js +0 -3780
  40. package/dist/chunks/shared-DkPo0jX3.js +0 -4214
  41. package/dist/chunks/shared-GL2Z98Cz.js +0 -4206
  42. package/dist/chunks/shared-cMhjZGRs.js +0 -301
  43. package/dist/templates/delegation-poker.js +0 -1
  44. package/dist/templates/event-storming.js +0 -1
  45. package/dist/templates/example-mapping.js +0 -1
  46. package/dist/templates/plain.js +0 -1
  47. package/dist/templates/prototype.js +0 -1
  48. package/dist/templates/slides.js +0 -1
  49. package/dist/templates/task-board.js +0 -1
  50. package/dist/templates/usm.js +0 -1
  51. package/dist/templates/whiteboard.js +0 -1
@@ -1,1053 +0,0 @@
1
- import{ae as kt,af as V,ag as oe,ah as ie,aI as _,ai as v,aG as X,aj as K,ak as M,al as N,aH as Ee,p as I,au as L,w as se,aD as ye,P as Et,e as yt,a0 as wt,V as W,R as $,a2 as we,a9 as $t,j as Tt,a1 as $e,aa as Te,ab as St,a3 as T,aM as It,a4 as k,B as Lt,K as Mt,h as Nt,a8 as Se,aP as _t,a7 as F,a5 as Ie,aQ as Ct,aR as Le,T as Me,aS as Ot,aT as At,l as z}from"./shared-DiFAX1_p.js";import{c as zt,r as Dt,p as Pt}from"./shared-DDOpqbVL.js";import{o as Ne}from"./shared-BjyoXjSO.js";function Rt(t,e){let n=0;for(let o=0;o<t.length;o++)n+=e(t[o],o);return n}const j=["actor","command","aggregate","event","policy","readmodel","external","hotspot"],Bt=V({id:X,name:M(v(),N(1)),description:_(v()),questions:Ee}),Xt=V({id:X,type:K(j),name:M(v(),N(1)),description:_(v()),contextId:_(v()),questions:Ee}),Yt=V({id:X,from:M(v(),N(1)),to:M(v(),N(1)),label:_(v()),kind:_(K(["member","flow"]))}),_e=V({title:_(v()),contexts:oe(ie(Bt),[]),elements:oe(ie(Xt),[]),links:oe(ie(Yt),[])}),Ce=t=>{const e=kt(_e,t),n=new Set(e.elements.map(i=>i.id)),o=new Set(e.contexts.map(i=>i.id));for(const i of e.elements)if(i.contextId!==void 0&&!o.has(i.contextId))throw new Error(`unknown context "${i.contextId}" for note "${i.id}"`);for(const i of e.links){if(!n.has(i.from))throw new Error(`unknown note "${i.from}" in link "${i.id}"`);if(!n.has(i.to))throw new Error(`unknown note "${i.to}" in link "${i.id}"`)}return e},Oe=()=>({contexts:[],elements:[],links:[]}),D=(t,e)=>{if(e!==void 0)return t.elements.find(n=>n.id===e)},Y=(t,e)=>{if(e!==void 0)return t.contexts.find(n=>n.id===e)},re=(t,e)=>{if(e!==void 0)return t.links.find(n=>n.id===e)},q=t=>t.elements.map(e=>e.id),w={SET_ELEMENT_NAME:I("SET_ELEMENT_NAME","element",L({name:M(v(),N(1))})),SET_ELEMENT_DESCRIPTION:I("SET_ELEMENT_DESCRIPTION","element",L({description:v()})),SET_ELEMENT_TYPE:I("SET_ELEMENT_TYPE","element",L({type:K(j)})),SET_ELEMENT_CONTEXT:I("SET_ELEMENT_CONTEXT","element",L({contextId:ye(v())})),MOVE_ELEMENT:I("MOVE_ELEMENT","element",L({after:ye(v())}),{mode:"sequence"}),ADD_ELEMENT:I("ADD_ELEMENT","page",L({id:X,type:K(j),name:M(v(),N(1)),description:_(v()),contextId:_(v())}),{dedupeKey:se}),DELETE_ELEMENT:I("DELETE_ELEMENT","element",L({})),LINK_ELEMENTS:I("LINK_ELEMENTS","page",L({id:X,from:M(v(),N(1)),to:M(v(),N(1)),label:_(v()),kind:_(K(["member","flow"]))}),{dedupeKey:se}),SET_LINK_LABEL:I("SET_LINK_LABEL","link",L({label:v()})),UNLINK_ELEMENTS:I("UNLINK_ELEMENTS","page",L({from:M(v(),N(1)),to:M(v(),N(1))}),{mode:"sequence"}),ADD_CONTEXT:I("ADD_CONTEXT","page",L({id:X,name:M(v(),N(1)),description:_(v())}),{dedupeKey:se}),SET_CONTEXT_NAME:I("SET_CONTEXT_NAME","context",L({name:M(v(),N(1))})),DELETE_CONTEXT:I("DELETE_CONTEXT","context",L({}))},y={setElementName:(t,e)=>({type:"SET_ELEMENT_NAME",target:{type:"element",id:t},payload:{name:e}}),setElementDescription:(t,e)=>({type:"SET_ELEMENT_DESCRIPTION",target:{type:"element",id:t},payload:{description:e}}),setElementType:(t,e)=>({type:"SET_ELEMENT_TYPE",target:{type:"element",id:t},payload:{type:e}}),setElementContext:(t,e)=>({type:"SET_ELEMENT_CONTEXT",target:{type:"element",id:t},payload:{contextId:e}}),moveElement:(t,e)=>({type:"MOVE_ELEMENT",target:{type:"element",id:t},payload:{after:e}}),addElement:(t,e,n)=>({type:"ADD_ELEMENT",target:{type:"page",id:"event-storming"},payload:{id:t,type:e,name:n}}),deleteElement:t=>({type:"DELETE_ELEMENT",target:{type:"element",id:t},payload:{}}),linkElements:(t,e,n,o)=>({type:"LINK_ELEMENTS",target:{type:"page",id:"event-storming"},payload:{id:t,from:e,to:n,...o?.label===void 0?{}:{label:o.label},...o?.kind===void 0?{}:{kind:o.kind}}}),setLinkLabel:(t,e)=>({type:"SET_LINK_LABEL",target:{type:"link",id:t},payload:{label:e}}),unlinkElements:(t,e)=>({type:"UNLINK_ELEMENTS",target:{type:"page",id:"event-storming"},payload:{from:t,to:e}}),addContext:(t,e)=>({type:"ADD_CONTEXT",target:{type:"page",id:"event-storming"},payload:{id:t,name:e}}),setContextName:(t,e)=>({type:"SET_CONTEXT_NAME",target:{type:"context",id:t},payload:{name:e}}),deleteContext:t=>({type:"DELETE_CONTEXT",target:{type:"context",id:t},payload:{}})},Ae=(t,e)=>{const n=Et(w,e);if(n===null)return null;const o=n.target.id;switch(n.type){case"SET_ELEMENT_NAME":return Z(t,o,i=>({...i,name:n.payload.name}));case"SET_ELEMENT_DESCRIPTION":return Z(t,o,i=>({...i,description:n.payload.description}));case"SET_ELEMENT_TYPE":return Z(t,o,i=>({...i,type:n.payload.type}));case"SET_ELEMENT_CONTEXT":{const{contextId:i}=n.payload;return i!==null&&!t.contexts.some(s=>s.id===i)?null:Z(t,o,s=>i===null?ze(s):{...s,contextId:i})}case"MOVE_ELEMENT":{const{after:i}=n.payload,s=Ht(t.elements,o,i);return s===null?null:{...t,elements:s}}case"ADD_ELEMENT":{const i=n.payload;if(t.elements.some(r=>r.id===i.id))return t;if(i.contextId!==void 0&&!t.contexts.some(r=>r.id===i.contextId))return null;const s={id:i.id,type:i.type,name:i.name,...i.description===void 0?{}:{description:i.description},...i.contextId===void 0?{}:{contextId:i.contextId}};return{...t,elements:[...t.elements,s]}}case"DELETE_ELEMENT":return t.elements.some(i=>i.id===o)?{...t,elements:t.elements.filter(i=>i.id!==o),links:t.links.filter(i=>i.from!==o&&i.to!==o)}:null;case"LINK_ELEMENTS":{const i=n.payload;return t.links.some(s=>s.id===i.id)?t:!t.elements.some(s=>s.id===i.from)||!t.elements.some(s=>s.id===i.to)?null:{...t,links:[...t.links,{id:i.id,from:i.from,to:i.to,...i.label===void 0?{}:{label:i.label},...i.kind===void 0?{}:{kind:i.kind}}]}}case"SET_LINK_LABEL":return t.links.some(i=>i.id===o)?{...t,links:t.links.map(i=>i.id===o?{...i,label:n.payload.label}:i)}:null;case"UNLINK_ELEMENTS":{const i=n.payload;return t.links.some(s=>s.from===i.from&&s.to===i.to)?{...t,links:t.links.filter(s=>!(s.from===i.from&&s.to===i.to))}:null}case"ADD_CONTEXT":{const i=n.payload;if(t.contexts.some(r=>r.id===i.id))return t;const s={id:i.id,name:i.name,...i.description===void 0?{}:{description:i.description}};return{...t,contexts:[...t.contexts,s]}}case"SET_CONTEXT_NAME":return t.contexts.some(i=>i.id===o)?{...t,contexts:t.contexts.map(i=>i.id===o?{...i,name:n.payload.name}:i)}:null;case"DELETE_CONTEXT":return t.contexts.some(i=>i.id===o)?{...t,contexts:t.contexts.filter(i=>i.id!==o),elements:t.elements.map(i=>i.contextId===o?ze(i):i)}:null;default:return yt(n)}},ze=t=>{const e={...t};return delete e.contextId,e},Z=(t,e,n)=>t.elements.some(o=>o.id===e)?{...t,elements:t.elements.map(o=>o.id===e?n(o):o)}:null,Ht=(t,e,n)=>{const o=t.findIndex(a=>a.id===e);if(o<0||n!==null&&!t.some(a=>a.id===n))return null;const i=t[o];if(i===void 0)return null;const r=[...t.filter(a=>a.id!==e)];return r.splice(n===null?0:r.findIndex(a=>a.id===n)+1,0,i),r},Kt=new Set(["actor>command","command>aggregate","aggregate>event","command>event","policy>command","external>event"]),J=(t,e)=>Kt.has(`${t}>${e}`),Wt=(t,e,n)=>t.kind!==void 0?t.kind==="member":J(e,n),Ft=["readmodel","actor","policy","command","aggregate","external","event","hotspot"],qt=(t,e)=>{const n=new Map;for(const o of t.links){const i=e.get(o.from),s=e.get(o.to);if(i===void 0||s===void 0||i==="hotspot"==(s==="hotspot")||o.kind!==void 0&&o.kind!=="member")continue;const r=i==="hotspot"?o.from:o.to;n.has(r)||n.set(r,i==="hotspot"?o.to:o.from)}return n},Gt=(t,e,n)=>{const o=new Map(t.map(a=>[a.id,a.id])),i=a=>{let d=a;for(;o.get(d)!==d;)d=o.get(d)??d;let c=a;for(;c!==d;){const p=o.get(c)??d;o.set(c,d),c=p}return d};for(const a of e){if(!o.has(a.from)||!o.has(a.to))continue;const d=n.get(a.from),c=n.get(a.to);d===void 0||c===void 0||Wt(a,d,c)&&o.set(i(a.from),i(a.to))}const s=new Map,r=new Map;for(const a of t){const d=i(a.id);r.set(a.id,d);const c=s.get(d);c?c.push(a):s.set(d,[a])}return{groups:s,rootOf:r}},B=t=>{const e=new Map(t.elements.map(c=>[c.id,c.type])),n=qt(t,e),o=t.elements.filter(c=>!n.has(c.id)),{groups:i,rootOf:s}=Gt(o,t.links,e),r=new Map;for(const[c,p]of n){const m=D(t,c),u=s.get(p);if(m===void 0||u===void 0)continue;const b=r.get(u);b?b.push({note:m,targetId:p}):r.set(u,[{note:m,targetId:p}])}const a=new Map(Ft.map((c,p)=>[c,p])),d=new Map(t.elements.map((c,p)=>[c.id,p]));return[...i].map(([c,p])=>{const m=[...p].sort((u,b)=>(a.get(u.type)??0)-(a.get(b.type)??0)||(d.get(u.id)??0)-(d.get(b.id)??0));return{id:p[0]?.id??"",notes:m,pins:r.get(c)??[],contextId:p.find(u=>u.contextId!==void 0)?.contextId}})},Ut=t=>{const e=B(t).flatMap(o=>[...o.notes,...o.pins.map(i=>i.note)]),n=new Set(e.map(o=>o.id));return{...t,elements:[...e,...t.elements.filter(o=>!n.has(o.id))]}},De=(t,e)=>{const n=[...t.notes,...t.pins.map(r=>r.note)],o=n.find(r=>J(e,r.type));if(o!==void 0)return{anchorId:o.id,incoming:!0};const i=n.find(r=>J(r.type,e));if(i!==void 0)return{anchorId:i.id,incoming:!1};const s=n[0];return s===void 0?void 0:{anchorId:s.id,incoming:!0}},Pe=(t,e)=>{const n=new Map(e.flatMap(o=>o.notes.map(i=>[i.id,o.id])));return t.links.flatMap(o=>{const i=n.get(o.from),s=n.get(o.to);return i===void 0||s===void 0||i===s?[]:[{id:o.id,from:i,to:s,...o.label!==void 0?{label:o.label}:{}}]})},ae=(t,e)=>`${t}\0${e}`,Re=(t,e,n)=>{const{widthOf:o,gapX:i,padX:s,maxWidth:r}=n,a=new Map;for(const l of e)a.set(ae(l.from,l.to),l),a.set(ae(l.to,l.from),l);const d=(l,g)=>l===void 0||g===void 0?void 0:a.get(ae(l,g)),c=l=>Rt(l,g=>o(g))+i*Math.max(0,l.length-1)+s*2<=r,p=[];let m=[],u;const b=()=>{m.length!==0&&(p.push({sliceIds:m,...u===void 0?{}:{cutFrom:u}}),m=[],u=void 0)};for(const l of t.map(g=>g.id)){if(m.length>0&&!c([...m,l])){let g=m.length;for(;d(m[g-1],g===m.length?l:m[g])!==void 0&&(g-=1,g!==0););const f=g===0?[]:m.splice(g),x=g===0?d(m.at(-1),l):d(m.at(-1),f[0]);b(),m=f,u=x}m.push(l)}return b(),p},G=t=>[...t.notes].reverse().find(e=>e.type==="event")??t.notes.at(-1),Be=(t,e)=>{const n=G(t),o=e.notes[0];if(!(n===void 0||o===void 0))return{from:n.id,to:o.id}},Xe={actor:"Actor",command:"Command",aggregate:"Aggregate",event:"Domain Event",policy:"Policy",readmodel:"Read Model",external:"External System",hotspot:"Hotspot"},Ye={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"},O=wt({en:{renameElementTitle:"Rename element",updateDescriptionTitle:"Update element description",changeTypeTitle:"Change element type",changeContextTitle:"Change the element\u2019s context",moveTitle:"Change timeline position",addElementTitle:"Add element",deleteElementTitle:"Delete element",linkTitle:"Link elements",renameLinkTitle:"Change link label",unlinkTitle:"Remove link",addContextTitle:"Add bounded context",renameContextTitle:"Rename bounded context",deleteContextTitle:"Delete bounded context",renamed:(t,e)=>`"${t}" \u2192 "${e}"`,noContext:"No context",moveToFront:"\u2192 To the front",moveAfter:t=>`\u2192 Right after "${t}"`,elementLabel:t=>`Element \xB7 ${t}`,contextLabel:t=>`Bounded context \xB7 ${t}`,linkLabel:(t,e)=>`Link \xB7 ${t}\u2192${e}`,linkGroup:"Link",pageLabel:t=>`Page \xB7 ${t}`,elementGroup:"Element",contextGroup:"Bounded context",noteTypeLabel:t=>Xe[t],addTypeLabel:t=>`+ ${Xe[t]}`,addHotspot:"+ Hotspot",pinHotspotTitle:"Pin a hotspot on this note",deleteNote:"Delete",noteNameLabel:"Note name",newContextTitle:"New bounded context",contextNamePlaceholder:"Context name",cancel:"Cancel",create:"Create",save:"Save",appendMenuNext:"Note to add next",appendMenuAfter:t=>`Continue after \u201C${t}\u201D`,emptyTitle:"No notes yet",emptyBody:"Start Event Storming by placing domain events on the timeline.",addFirstEvent:"+ First event",portAriaLabel:"Add what comes next (pick a type, or drag to connect to another slice)",portTitle:"Click: pick a note to continue / Drag: connect to another slice",renameContextHint:"Click to rename",dissolveContextAria:t=>`Dissolve bounded context "${t}"`,dissolveContextTitle:"Dissolve the bounded context (notes stay)",noteCount:t=>`${t} notes`,sliceCount:t=>`${t} slices`,contextCount:t=>`${t} bounded contexts`,hudHint:"Wheel: pan \xB7 Pinch: zoom \xB7 Drag background: select area",zoomOut:"Zoom out",zoomReset:"Reset to 100%",zoomIn:"Zoom in",zoomFit:"Fit to view",selectedLinks:t=>`${t} links selected`,deleteLinks:"Delete links",deleteHint:"Delete works too",clearSelection:"Clear selection",selectedSlices:t=>`${t} slices selected`,groupIntoContext:"Group into a bounded context",addToExistingAria:"Add to an existing bounded context",addToExistingOption:"Add to existing\u2026",removeFromContext:"Remove from context",deleteButton:"Delete"},ja:{renameElementTitle:"\u8981\u7D20\u540D\u3092\u5909\u66F4",updateDescriptionTitle:"\u8981\u7D20\u306E\u8AAC\u660E\u3092\u66F4\u65B0",changeTypeTitle:"\u8981\u7D20\u306E\u7A2E\u5225\u3092\u5909\u66F4",changeContextTitle:"\u6240\u5C5E\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u5909\u66F4",moveTitle:"\u30BF\u30A4\u30E0\u30E9\u30A4\u30F3\u4F4D\u7F6E\u3092\u5909\u66F4",addElementTitle:"\u8981\u7D20\u3092\u8FFD\u52A0",deleteElementTitle:"\u8981\u7D20\u3092\u524A\u9664",linkTitle:"\u8981\u7D20\u3092\u9023\u7D50",renameLinkTitle:"\u30EA\u30F3\u30AF\u540D\u3092\u5909\u66F4",unlinkTitle:"\u30EA\u30F3\u30AF\u3092\u524A\u9664",addContextTitle:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u8FFD\u52A0",renameContextTitle:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u540D\u3092\u5909\u66F4",deleteContextTitle:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u524A\u9664",renamed:(t,e)=>`"${t}" \u2192 "${e}"`,noContext:"\u672A\u6240\u5C5E",moveToFront:"\u2192 \u5148\u982D\u3078",moveAfter:t=>`\u2192 "${t}" \u306E\u76F4\u5F8C\u3078`,elementLabel:t=>`\u8981\u7D20 \xB7 ${t}`,contextLabel:t=>`\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8 \xB7 ${t}`,linkLabel:(t,e)=>`\u30EA\u30F3\u30AF \xB7 ${t}\u2192${e}`,linkGroup:"\u30EA\u30F3\u30AF",pageLabel:t=>`\u30DA\u30FC\u30B8 \xB7 ${t}`,elementGroup:"\u8981\u7D20",contextGroup:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8",noteTypeLabel:t=>Ye[t],addTypeLabel:t=>`+ ${Ye[t]}`,addHotspot:"+ \u30DB\u30C3\u30C8\u30B9\u30DD\u30C3\u30C8",pinHotspotTitle:"\u3053\u306E\u4ED8\u7B8B\u306B\u30DB\u30C3\u30C8\u30B9\u30DD\u30C3\u30C8\u3092\u7ACB\u3066\u308B",deleteNote:"\u524A\u9664",noteNameLabel:"\u4ED8\u7B8B\u540D",newContextTitle:"\u65B0\u3057\u3044\u5883\u754C\u3065\u3051\u3089\u308C\u305F\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8",contextNamePlaceholder:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u540D",cancel:"\u30AD\u30E3\u30F3\u30BB\u30EB",create:"\u4F5C\u6210",save:"\u4FDD\u5B58",appendMenuNext:"\u7D9A\u304D\u306B\u8FFD\u52A0\u3059\u308B\u4ED8\u7B8B",appendMenuAfter:t=>`\u300C${t}\u300D\u306E\u7D9A\u304D\u306B\u8FFD\u52A0`,emptyTitle:"\u4ED8\u7B8B\u304C\u307E\u3060\u3042\u308A\u307E\u305B\u3093",emptyBody:"\u30A4\u30D9\u30F3\u30C8\u30B9\u30C8\u30FC\u30DF\u30F3\u30B0\u3092\u958B\u59CB\u3057\u307E\u3057\u3087\u3046\u3002\u30C9\u30E1\u30A4\u30F3\u30A4\u30D9\u30F3\u30C8\u3092\u6642\u7CFB\u5217\u306B\u8CBC\u308B\u3068\u3053\u308D\u304B\u3089\u59CB\u3081\u307E\u3059\u3002",addFirstEvent:"+ \u6700\u521D\u306E\u30A4\u30D9\u30F3\u30C8",portAriaLabel:"\u7D9A\u304D\u3092\u8FFD\u52A0\uFF08\u7A2E\u985E\u3092\u9078\u3093\u3067\u8FFD\u52A0 / \u30C9\u30E9\u30C3\u30B0\u3067\u4ED6\u306E\u30B9\u30E9\u30A4\u30B9\u3078\u63A5\u7D9A\uFF09",portTitle:"\u30AF\u30EA\u30C3\u30AF: \u7D9A\u304D\u306E\u4ED8\u7B8B\u3092\u9078\u3093\u3067\u8FFD\u52A0 / \u30C9\u30E9\u30C3\u30B0: \u4ED6\u306E\u30B9\u30E9\u30A4\u30B9\u3078\u63A5\u7D9A",renameContextHint:"\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u540D\u524D\u3092\u5909\u66F4",dissolveContextAria:t=>`\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u300C${t}\u300D\u3092\u89E3\u4F53`,dissolveContextTitle:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3092\u89E3\u4F53\uFF08\u4ED8\u7B8B\u306F\u6B8B\u308A\u307E\u3059\uFF09",noteCount:t=>`${t} \u4ED8\u7B8B`,sliceCount:t=>`${t} \u30B9\u30E9\u30A4\u30B9`,contextCount:t=>`${t} \u30B3\u30F3\u30C6\u30AD\u30B9\u30C8`,hudHint:"\u30DB\u30A4\u30FC\u30EB: \u79FB\u52D5 \xB7 \u30D4\u30F3\u30C1: \u30BA\u30FC\u30E0 \xB7 \u80CC\u666F\u30C9\u30E9\u30C3\u30B0: \u7BC4\u56F2\u9078\u629E",zoomOut:"\u7E2E\u5C0F",zoomReset:"100% \u306B\u623B\u3059",zoomIn:"\u62E1\u5927",zoomFit:"\u5168\u4F53\u3092\u8868\u793A",selectedLinks:t=>`${t} \u672C\u306E\u30EA\u30F3\u30AF\u3092\u9078\u629E\u4E2D`,deleteLinks:"\u30EA\u30F3\u30AF\u3092\u524A\u9664",deleteHint:"Delete \u3067\u3082\u524A\u9664\u3067\u304D\u307E\u3059",clearSelection:"\u9078\u629E\u89E3\u9664",selectedSlices:t=>`${t} \u30B9\u30E9\u30A4\u30B9\u3092\u9078\u629E\u4E2D`,groupIntoContext:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u306B\u307E\u3068\u3081\u308B",addToExistingAria:"\u65E2\u5B58\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u3078\u8FFD\u52A0",addToExistingOption:"\u65E2\u5B58\u3078\u8FFD\u52A0\u2026",removeFromContext:"\u30B3\u30F3\u30C6\u30AD\u30B9\u30C8\u89E3\u9664",deleteButton:"\u524A\u9664"}}),Vt={SET_ELEMENT_NAME:(t,e,n)=>({title:t.renameElementTitle,tone:"update",body:t.renamed(D(n,e.target.id)?.name??"?",$(w.SET_ELEMENT_NAME,e).name)}),SET_ELEMENT_DESCRIPTION:(t,e)=>({title:t.updateDescriptionTitle,tone:"update",body:`\u2192 "${$(w.SET_ELEMENT_DESCRIPTION,e).description.slice(0,60)}"`}),SET_ELEMENT_TYPE:(t,e)=>({title:t.changeTypeTitle,tone:"update",body:`\u2192 ${$(w.SET_ELEMENT_TYPE,e).type}`}),SET_ELEMENT_CONTEXT:(t,e)=>({title:t.changeContextTitle,tone:"move",body:`\u2192 ${$(w.SET_ELEMENT_CONTEXT,e).contextId??t.noContext}`}),MOVE_ELEMENT:(t,e)=>({title:t.moveTitle,tone:"move",body:$(w.MOVE_ELEMENT,e).after===null?t.moveToFront:t.moveAfter($(w.MOVE_ELEMENT,e).after??"")}),ADD_ELEMENT:(t,e)=>({title:t.addElementTitle,tone:"create",body:`+ "${$(w.ADD_ELEMENT,e).name}"`}),DELETE_ELEMENT:(t,e,n)=>({title:t.deleteElementTitle,tone:"delete",body:`\u2212 "${D(n,e.target.id)?.name??e.target.id}"`}),LINK_ELEMENTS:(t,e)=>({title:t.linkTitle,tone:"create",body:`${$(w.LINK_ELEMENTS,e).from} \u2192 ${$(w.LINK_ELEMENTS,e).to}`}),SET_LINK_LABEL:(t,e)=>({title:t.renameLinkTitle,tone:"update",body:`\u2192 "${$(w.SET_LINK_LABEL,e).label}"`}),UNLINK_ELEMENTS:(t,e)=>({title:t.unlinkTitle,tone:"delete",body:`${$(w.UNLINK_ELEMENTS,e).from} \u2192 ${$(w.UNLINK_ELEMENTS,e).to}`}),ADD_CONTEXT:(t,e)=>({title:t.addContextTitle,tone:"create",body:`+ "${$(w.ADD_CONTEXT,e).name}"`}),SET_CONTEXT_NAME:(t,e)=>({title:t.renameContextTitle,tone:"update",body:`\u2192 "${$(w.SET_CONTEXT_NAME,e).name}"`}),DELETE_CONTEXT:(t,e,n)=>({title:t.deleteContextTitle,tone:"delete",body:`\u2212 "${Y(n,e.target.id)?.name??e.target.id}"`})},He=(t,e,n,o)=>{const i=Vt[e.type],r=i?i(t,e,o??n):{title:e.type,tone:"meta"};return{title:r.title,targetLabel:We(t,n,e.target),tone:r.tone,...r.body===void 0?{}:{summary:r.body}}},Ke=t=>`${t.type} ${W(t.target)} ${JSON.stringify(t.payload)}`,We=(t,e,n)=>{switch(n.type){case"element":{const o=D(e,n.id);return o?t.elementLabel(o.name):`${t.elementLabel(n.id)} (missing)`}case"context":{const o=Y(e,n.id);return o?t.contextLabel(o.name):`${t.contextLabel(n.id)} (missing)`}case"link":{const o=re(e,n.id);return o?t.linkLabel(o.from,o.to):`${t.linkGroup} \xB7 ${n.id} (missing)`}case"page":return t.pageLabel(de(e));default:return`${n.type} \xB7 ${n.id}`}},Fe=(t,e)=>[...e.elements.map(n=>({value:W({type:"element",id:n.id}),label:n.name,group:t.elementGroup})),...e.contexts.map(n=>({value:W({type:"context",id:n.id}),label:n.name,group:t.contextGroup}))],jt=(t,e,n)=>{const o=e.elements.find(i=>i.id===n.note);return o?{value:W({type:"element",id:o.id}),label:o.name,group:t.elementGroup}:null},de=t=>t.title??"Event Storming",qe=(t,e)=>{const n={...e},o=D(t,e.note);e.note!==void 0&&!o&&delete n.note;const i=Y(t,e.context);return e.context!==void 0&&!i&&delete n.context,n},Ge=(t,e)=>{switch(e.type){case"element":return D(t,e.id)!==void 0;case"context":return Y(t,e.id)!==void 0;case"link":return re(t,e.id)!==void 0;case"page":return!0;default:return!1}},Ue=t=>{const e=O(t);return{name:"event-storming",label:"Event Storming",parseBase:Ce,emptyBase:Oe,actions:w,apply:Ae,canonicalState:Ut,hasTarget:Ge,describe:(n,o,i)=>He(e,n,o,i),serialize:Ke,resolveNavigation:qe,navigationFor:(n,o)=>o.type==="element"&&D(n,o.id)!==void 0?{note:o.id}:null,commentTargets:(n,o)=>Fe(e,n),currentTarget:(n,o)=>jt(e,n,o),title:de}},Zt={width:300,height:260},Jt={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"}},le=t=>{const{bg:e,ink:n}=Jt[t];return`--es-note-bg:${e};--es-note-ink:${n}`},Qt=we`
2
- :host {
3
- display: flex;
4
- flex-direction: column;
5
- /* Top-aligned: the name stays put when the editor takes its place. */
6
- justify-content: flex-start;
7
- position: relative;
8
- box-sizing: border-box;
9
- padding: 16px 9px 8px;
10
- border-radius: 3px;
11
- background:
12
- linear-gradient(165deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 40%),
13
- var(--es-note-bg, var(--dpk-paper-raised));
14
- color: var(--es-note-ink, var(--dpk-ink));
15
- box-shadow:
16
- inset 0 1px 0 rgba(255, 255, 255, 0.3),
17
- 0 1px 2px rgba(30, 24, 10, 0.14),
18
- 0 5px 10px -4px rgba(30, 24, 10, 0.24);
19
- cursor: pointer;
20
- transform: rotate(var(--es-tilt, 0deg));
21
- transition:
22
- transform 180ms var(--dpk-ease),
23
- box-shadow 180ms var(--dpk-ease);
24
- overflow: visible;
25
- }
26
-
27
- /* A dog-eared corner: a quiet cue that this is a paper note, not a flat chip. */
28
- :host::after {
29
- content: '';
30
- position: absolute;
31
- top: 0;
32
- right: 0;
33
- width: 13px;
34
- height: 13px;
35
- background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.16) 50%);
36
- border-bottom-left-radius: 3px;
37
- opacity: 0.6;
38
- pointer-events: none;
39
- }
40
-
41
- :host(:hover) {
42
- transform: rotate(0deg) translateY(-2px);
43
- box-shadow:
44
- inset 0 1px 0 rgba(255, 255, 255, 0.32),
45
- 0 2px 4px rgba(30, 24, 10, 0.16),
46
- 0 12px 22px -6px rgba(30, 24, 10, 0.3);
47
- z-index: 6;
48
- }
49
-
50
- :host([focused]) {
51
- outline: 2px solid var(--dpk-blue);
52
- outline-offset: 2px;
53
- transform: rotate(0deg);
54
- z-index: 5;
55
- }
56
-
57
- :host([data-mode='editing']),
58
- :host([data-mode='commenting']) {
59
- z-index: 7;
60
- transform: rotate(0deg);
61
- }
62
-
63
- /* --------------------------------------------------- sticky note palette */
64
-
65
- /* Small, faint, top-left: readable when looked for, quiet when not. */
66
- .note-type {
67
- position: absolute;
68
- top: 5px;
69
- left: 7px;
70
- font-family: var(--dpk-mono);
71
- font-size: 8px;
72
- font-weight: 600;
73
- letter-spacing: 0.12em;
74
- opacity: 0.5;
75
- }
76
-
77
- /* Pinned hotspots are small: the type label is off and the name is centered. */
78
- :host([compact]) {
79
- justify-content: center;
80
- padding: 7px 9px 8px;
81
- }
82
-
83
- :host([compact]) .note-type {
84
- display: none;
85
- }
86
-
87
- .note-name {
88
- flex: 1 1 auto;
89
- min-width: 0;
90
- min-height: 0;
91
- font-size: 13px;
92
- font-weight: 680;
93
- line-height: 1.32;
94
- letter-spacing: -0.01em;
95
- overflow-wrap: anywhere;
96
- /* As many lines as the fixed-size card holds; the rest ends in an ellipsis. */
97
- --dpk-inline-edit-lines: 4;
98
- }
99
-
100
- :host([compact]) .note-name {
101
- flex: 0 1 auto;
102
- font-size: 11.5px;
103
- line-height: 1.3;
104
- }
105
-
106
- /* Comments already left: a passive corner flag, readable without hover. */
107
- .note-flag {
108
- position: absolute;
109
- top: -7px;
110
- right: -7px;
111
- min-width: 17px;
112
- height: 17px;
113
- padding: 0 4px;
114
- border: 1.5px solid var(--dpk-paper-raised);
115
- border-radius: 999px;
116
- background: linear-gradient(180deg, var(--dpk-accent-bright), var(--dpk-accent));
117
- color: var(--dpk-accent-ink);
118
- font-family: var(--dpk-mono);
119
- font-size: 9.5px;
120
- font-weight: 650;
121
- line-height: 17px;
122
- text-align: center;
123
- box-shadow: 0 1px 4px rgba(217, 73, 32, 0.35);
124
- }
125
-
126
- /* A side rail of round buttons that fades in on hover, like the hotspot chip:
127
- nothing crosses the card's face, and it stays clear of the pins above. */
128
- .note-tools {
129
- position: absolute;
130
- top: 9px;
131
- right: -11px;
132
- z-index: 8;
133
- display: flex;
134
- flex-direction: column;
135
- gap: 3px;
136
- opacity: 0;
137
- pointer-events: none;
138
- transition: opacity 140ms ease;
139
- }
140
-
141
- /* Labelled, not a glyph: the hotspot affordance names itself on the card's
142
- top-right corner. It stays above the pins, which hang above that corner. */
143
- .note-hotspot {
144
- position: absolute;
145
- top: -9px;
146
- right: -4px;
147
- z-index: 9;
148
- padding: 2px 7px;
149
- border: 1px solid color-mix(in srgb, var(--dpk-danger) 45%, transparent);
150
- border-radius: 999px;
151
- font-size: 9.5px;
152
- font-weight: 620;
153
- white-space: nowrap;
154
- color: var(--dpk-danger);
155
- background: color-mix(in srgb, var(--dpk-paper-raised) 94%, transparent);
156
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
157
- cursor: pointer;
158
- opacity: 0;
159
- pointer-events: none;
160
- transition:
161
- opacity 140ms var(--dpk-ease),
162
- transform 140ms var(--dpk-ease-spring),
163
- background 140ms var(--dpk-ease),
164
- border-color 140ms var(--dpk-ease);
165
- }
166
-
167
- :host(:hover) .note-hotspot,
168
- :host([data-mode='editing']) .note-hotspot,
169
- .note-hotspot:focus-visible {
170
- opacity: 1;
171
- pointer-events: auto;
172
- }
173
-
174
- .note-hotspot:hover {
175
- border-color: var(--dpk-danger);
176
- background: var(--dpk-danger-soft);
177
- transform: translateY(-1px);
178
- }
179
-
180
- :host(:hover) .note-tools,
181
- :host([data-mode='commenting']) .note-tools,
182
- .note-tools:focus-within {
183
- opacity: 1;
184
- pointer-events: auto;
185
- }
186
-
187
- .note-tools .dpk-icon-btn {
188
- width: 22px;
189
- height: 22px;
190
- border: 1px solid var(--dpk-rule);
191
- border-radius: 50%;
192
- background: color-mix(in srgb, var(--dpk-paper-raised) 94%, transparent);
193
- backdrop-filter: blur(4px);
194
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
195
- }
196
- `;class en extends $t{static{this.styles=[Tt,Qt,$e]}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}}}#e="";#n=new Te(this);#o=new St(this);constructor(){super(),this.note=null,this.notes=[],this.mode="view",this.focused=!1,this.compact=!1,this.onIntent=null,this.addEventListener("click",()=>this.#r({kind:"select"}))}updated(e){if(e.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)),e.has("mode")&&(this.mode!=="commenting"&&(this.#e=""),this.mode==="editing"&&this.renderRoot.querySelector("dpk-component-inline-edit")?.startEditing()),this.mode!=="commenting")return;const n=this.renderRoot.querySelector(".comment-pop"),o=this.renderRoot.querySelector('[data-role="comment"]');n&&o&&this.#n.open(n,o,Zt)}render(){const e=this.note;if(!e)return T;const n=O(this.#o.locale),o=zt(this.#o.locale);return k`
197
- <div class="note-type">${n.noteTypeLabel(e.type)}</div>
198
- <dpk-component-inline-edit
199
- class="note-name"
200
- ?wrap=${!0}
201
- ?truncate=${!this.compact}
202
- ?seamless=${!0}
203
- .value=${e.name}
204
- .label=${n.noteNameLabel}
205
- @dpk-commit=${It(i=>this.#r({kind:"rename",name:i}))}
206
- ></dpk-component-inline-edit>
207
- ${this.notes.length>0?k`<span class="note-flag">${this.notes.length}</span>`:T}
208
- ${e.type==="hotspot"?T:k`<button
209
- class="note-hotspot"
210
- type="button"
211
- data-role="hotspot"
212
- title=${n.pinHotspotTitle}
213
- @click=${this.#s(()=>({kind:"add-hotspot"}))}
214
- >
215
- ${n.addHotspot}
216
- </button>`}
217
- <div class="note-tools">
218
- <button
219
- class="dpk-icon-btn"
220
- type="button"
221
- data-role="comment"
222
- aria-label=${o.comment}
223
- data-active=${String(this.mode==="commenting")}
224
- @click=${this.#s(()=>({kind:"toggle-comment"}))}
225
- >
226
- ${Lt()}
227
- </button>
228
- <button
229
- class="dpk-icon-btn"
230
- type="button"
231
- data-role="delete"
232
- aria-label=${n.deleteNote}
233
- @click=${this.#s(()=>({kind:"delete"}))}
234
- >
235
- ${Mt()}
236
- </button>
237
- </div>
238
- ${this.mode==="commenting"?this.#t(o):T}
239
- `}#t(e){return Dt(e,Pt(this.#e,this.notes.map(Nt),this.note?{key:`note:${this.note.id}`}:{}),n=>{n.kind==="input"?(this.#e=n.body,this.requestUpdate()):n.kind!=="choose"&&this.#r(n)})}#s(e){return n=>{n.stopPropagation(),this.#r(e(n))}}#r(e){this.onIntent?.(e)}}const tn=()=>{customElements.get("dpk-internal-event-storming-note")||customElements.define("dpk-internal-event-storming-note",en)},ce=.25,Ve=2,pe=(t,e,n)=>({...t,panX:t.panX+e,panY:t.panY+n}),je=(t,e,n,o)=>t>=o&&t+e<=n-o?0:t<o||e>n-2*o?o-t:n-o-(t+e),nn=(t,e,n,o)=>{const i=je(e.left,e.width,n.width,o),s=je(e.top,e.height,n.height,o);return i===0&&s===0?t:pe(t,i,s)},he=(t,e,n,o)=>{const i=Se(t.zoom*o,ce,Ve),s=(e-t.panX)/t.zoom,r=(n-t.panY)/t.zoom;return{panX:e-s*i,panY:n-r*i,zoom:i}},Ze=(t,e,n)=>{const o=Math.max(1,e.width-n*2),i=Math.max(1,e.height-n*2),s=Math.max(ce,Math.min(1,o/Math.max(1,t.width),i/Math.max(1,t.height)));return{panX:(e.width-t.width*s)/2,panY:(e.height-t.height*s)/2,zoom:s}},Je=(t,e,n,o)=>{const i=(s,r,a,d)=>{const c=a*t.zoom;return c<=d?(d-c)/2-r*t.zoom:Math.min(-r*t.zoom,Math.max(d-(r+a)*t.zoom,s))};return{zoom:t.zoom,panX:i(t.panX,-o,e.width+o*2,n.width),panY:i(t.panY,-o,e.height+o*2,n.height)}},on=(t,e,n)=>e>=t.left&&e<=t.left+t.width&&n>=t.top&&n<=t.top+t.height,me=(t,e,n)=>{for(let o=t.length-1;o>=0;o-=1){const i=t[o];if(i!==void 0&&on(i.rect,e,n))return i.id}},Qe=(t,e)=>e<t.left+t.width/2?"before":"after",et=(t,e)=>t.filter(({rect:n})=>n.left<e.left+e.width&&e.left<n.left+n.width&&n.top<e.top+e.height&&e.top<n.top+n.height).map(({id:n})=>n),ue=(t,e,n,o)=>{const i=new Set(e);if(n.some(p=>i.has(p)))return[];const s=t.filter(p=>!i.has(p)),r=n.map(p=>s.indexOf(p)).filter(p=>p>=0);if(r.length===0)return[];const a=o==="before"?Math.min(...r):Math.max(...r)+1,d=[];let c=s[a-1]??null;for(const p of t)i.has(p)&&(d.push({id:p,after:c}),c=p);return d},tt=(t,e,n,o)=>{const i=ue(t,e,n,o);if(i.length===0)return i;const s=[...t];for(const r of i){const a=s.indexOf(r.id),d=a<0?void 0:s[a];d!==void 0&&(s.splice(a,1),s.splice(r.after===null?0:s.indexOf(r.after)+1,0,d))}return _t(s,t)?[]:i},nt=(t,e,n,o=4)=>{if(e.pointerId!==t.pointerId)return t;const{point:i}=e,s={pointerId:t.pointerId,start:t.start,current:i,moved:t.moved||Math.hypot(i.x-t.start.x,i.y-t.start.y)>o},r=me(n,i.x,i.y);switch(t.kind){case"connect":return{...s,kind:"connect",fromSliceId:t.fromSliceId,...r!==void 0&&r!==t.fromSliceId?{targetSliceId:r}:{}};case"move-slice":{const a=n.find(d=>d.id===r)?.rect;return{...s,kind:"move-slice",sliceId:t.sliceId,...r!==void 0&&r!==t.sliceId&&a!==void 0?{drop:{sliceId:r,side:Qe(a,i.x)}}:{}}}case"select":return{...s,kind:"select"}}},fe="data-pin";class sn{#e;#n=new Set;#o;#t=new Map;constructor(e){this.#e=e,e.addController(this)}get heights(){return this.#t}hostConnected(){typeof ResizeObserver>"u"||(this.#o=new ResizeObserver(e=>this.#s(e)))}hostUpdated(){const e=this.#o;if(e===void 0)return;const n=new Set(this.#e.renderRoot.querySelectorAll(`[${fe}]`));for(const i of this.#n)n.has(i)||(e.unobserve(i),this.#n.delete(i));for(const i of n)this.#n.has(i)||(e.observe(i),this.#n.add(i));const o=new Set([...n].map(i=>i.getAttribute(fe)));[...this.#t.keys()].some(i=>!o.has(i))&&(this.#t=new Map([...this.#t].filter(([i])=>o.has(i))))}hostDisconnected(){this.#o?.disconnect(),this.#o=void 0,this.#n.clear()}#s(e){const n=new Map(this.#t);for(const o of e){const i=o.target.getAttribute(fe),s=o.borderBoxSize[0]?.blockSize;i===null||s===void 0||s===0||n.set(i,s)}[...n].every(([o,i])=>this.#t.get(o)===i)||(this.#t=n,this.#e.requestUpdate())}}const C={kind:"idle"},ot=(t,e)=>t.kind==="editing"&&t.noteId===e?"editing":t.kind==="commenting"&&t.noteId===e?"commenting":"view",it=(t,e,n)=>{switch(n.kind){case"toggle-comment":return t.kind==="commenting"&&t.noteId===e?C:{kind:"commenting",noteId:e};case"comment":case"delete":case"dismiss":return C;case"select":case"add-hotspot":return t;case"rename":return t.kind==="editing"&&t.noteId===e?C:t}},rn=6,an=10,st="\u2026",dn=[[4352,4447],[11904,42191],[44032,55203],[63744,64255],[65072,65103],[65280,65376],[65504,65510],[127744,129791],[131072,262141]],ge=t=>{const e=t.codePointAt(0)??0;return dn.some(([n,o])=>e>=n&&e<=o)?an:rn},ln=(t,e)=>{const n=Array.from(t);if(n.reduce((s,r)=>s+ge(r),0)<=e)return t;let o=ge(st),i="";for(const s of n){if(o+=ge(s),o>e)break;i+=s}return`${i}${st}`},rt=92,xe=54,cn=18,at=4,dt=t=>{const e=[];let n=cn;for(const o of t)e.push(n),n+=o+at;return{lifts:e,extent:t.length===0?0:n-at}},lt=240,U=132,ct=96,be=10,Q=24,ee=12,P=ct+ee*2,te=46,ne=16,pt=44,ht=40,ve=16,mt=13,H=8,pn=6,hn=26,mn=(t,e)=>Math.max(pt,t-ee+(e?hn:0)),un=dt([xe]).extent,fn=["actor","command","aggregate","event","policy","readmodel","external"],ut=t=>Q*2+t*U+(t-1)*be,gn=(t,e)=>{const n=new Map;let o=0;for(const i of t.notes){const s=t.pins.filter(a=>a.targetId===i.id),r=dt(s.map(a=>e(a.note.id)));s.forEach((a,d)=>n.set(a.note.id,r.lifts[d]??0)),o=Math.max(o,r.extent)}return{liftOf:n,extent:o}},xn=(t,e,n,o)=>{const i=new Map(e.map(f=>[f.id,ut(f.notes.length)])),s=Pe(t,e),r=Re(e,s,{widthOf:f=>i.get(f)??0,gapX:te,padX:ne,maxWidth:Math.max(n,ut(1))}),a=new Map,d=new Map,c=new Map,p=new Map,m=new Map,u=new Map(e.map(f=>[f.id,f.contextId]));for(const f of e){const x=gn(f,E=>o.get(E)??xe);for(const[E,h]of x.liftOf)p.set(E,h);m.set(f.id,x.extent)}let b=H;const l=r.map((f,x)=>{const E=f.cutFrom===void 0?void 0:d.get(f.cutFrom.from),h=E===void 0?0:Math.max(0,E-ne);let S=h+ne;const A=mn(Math.max(un,...f.sliceIds.map(R=>m.get(R)??0)),f.sliceIds.some(R=>u.get(R)!==void 0));for(const R of f.sliceIds)a.set(R,S-h),d.set(R,S),c.set(R,x),S+=(i.get(R)??0)+te;const ke=A+P+ht,vt={sliceIds:f.sliceIds,x:h,width:S-te+ne-h,height:ke,y:b,head:A,cutFrom:f.cutFrom};return b+=ke+pn,vt}),g=l.at(-1);return{slices:e,bands:l,xOf:a,absXOf:d,bandOf:c,widthOf:i,pinLiftOf:p,arrows:s,width:Math.max(0,...l.map(f=>f.x+f.width))+H*2,height:g===void 0?H*2:g.y+g.height+H}},bn=t=>{const{m:e,context:n,maxRowWidth:o,pinHeights:i,viewport:s,handlers:r}=t,{state:a}=n,d=24*s.zoom,c=`background-size:${d}px ${d}px;background-position:${s.panX}px ${s.panY}px`;if(a.elements.length===0)return k`<div class="board-viewport board-viewport--empty" style=${c}>
240
- <div class="empty">
241
- <h2>${e.emptyTitle}</h2>
242
- <p>${e.emptyBody}</p>
243
- <button class="dpk-btn dpk-btn--accent" type="button" @click=${()=>r.addFirst()}>
244
- ${e.addFirstEvent}
245
- </button>
246
- </div>
247
- </div>`;const p=B(a),m=xn(a,p,o,i);return k`
248
- <div
249
- class="board-viewport${t.gesture!==void 0?" board-viewport--gesturing":""}"
250
- data-testid="es-viewport"
251
- tabindex="0"
252
- style=${c}
253
- @pointerdown=${r.viewportPointerDown}
254
- @pointermove=${r.viewportPointerMove}
255
- @pointerup=${r.viewportPointerUp}
256
- @pointercancel=${r.viewportPointerCancel}
257
- @pointerleave=${r.viewportPointerLeave}
258
- @wheel=${r.viewportWheel}
259
- @keydown=${r.keyDown}
260
- >
261
- <div
262
- class="board-content"
263
- style=${`transform:translate(${s.panX}px, ${s.panY}px) scale(${s.zoom})`}
264
- >
265
- <div class="wall" data-testid="es-wall" style=${`width:${m.width}px;height:${m.height}px`}>
266
- ${In(t,m)}
267
- ${m.bands.map((u,b)=>kn(t,m,u,b))}
268
- </div>
269
- </div>
270
- ${yn(t.gesture)} ${wn(e,a,p)} ${$n(t)}
271
- ${Tn(t)}
272
- </div>
273
- `},vn=(t,e)=>{const n=["slice"];t.selectedSliceIds.includes(e.id)&&n.push("slice--selected");const o=t.gesture;return o?.kind==="connect"&&o.moved&&(o.fromSliceId!==e.id&&n.push("slice--candidate"),o.targetSliceId===e.id&&n.push("slice--target")),o?.kind==="move-slice"&&o.moved&&(o.sliceId===e.id&&n.push("slice--lifted"),o.drop?.sliceId===e.id&&n.push(o.drop.side==="before"?"slice--insert-before":"slice--insert-after")),n.join(" ")},kn=(t,e,n,o)=>{const{m:i,context:s,mode:r,gesture:a,hoverSliceId:d,handlers:c}=t,{navigation:p}=s,m=n.sliceIds.flatMap(l=>e.slices.filter(g=>g.id===l)),u=l=>({x:e.xOf.get(l.id)??0,y:n.head,w:e.widthOf.get(l.id)??0}),b=(l,g,f=!1)=>k`<dpk-internal-event-storming-note
274
- style=${g}
275
- .note=${l}
276
- .notes=${s.comments.filter(x=>x.target.type==="element"&&x.target.id===l.id)}
277
- .mode=${ot(r,l.id)}
278
- ?focused=${p.note===l.id}
279
- ?compact=${f}
280
- data-pin=${f?l.id:T}
281
- data-dpk-target=${`element:${l.id}`}
282
- data-grill-questions=${Ne(Le(l.questions))}
283
- .onIntent=${x=>c.noteIntent(l.id,x)}
284
- ></dpk-internal-event-storming-note>`;return k`
285
- <section class="band" data-band=${o} style=${`left:${H+n.x}px;top:${n.y}px`}>
286
- <div class="band-canvas" style=${`width:${n.width}px;height:${n.height}px`}>
287
- ${En(t,e,o)}
288
- ${m.map(l=>{const{x:g,y:f,w:x}=u(l);return k`<div
289
- class=${vn(t,l)}
290
- data-slice-id=${l.id}
291
- style=${`left:${g}px;top:${f}px;width:${x}px;height:${P}px`}
292
- @pointerdown=${E=>c.slicePointerDown(l.id,E)}
293
- ></div>`})}
294
- ${Ie(m.flatMap(l=>l.notes.map((g,f)=>({slice:l,note:g,slot:f}))),({note:l})=>l.id,({slice:l,note:g,slot:f})=>{const{x,y:E}=u(l),h=x+Q+f*(U+be);return b(g,`${le(g.type)};position:absolute;left:${h}px;top:${E+ee}px;width:${U}px;height:${ct}px;--es-tilt:${Nn(g.id)}deg;z-index:2`)})}
295
- ${Ie(m.flatMap(l=>{const g=u(l);return l.notes.flatMap((f,x)=>l.pins.filter(h=>h.targetId===f.id).map((h,S)=>({pin:h,slot:x,index:S,at:g})))}),({pin:l})=>l.note.id,({pin:l,slot:g,index:f,at:x})=>{const E=x.x+Q+g*(U+be),h=x.y+ee;return b(l.note,`${le(l.note.type)};position:absolute;left:${E+U-rt-6-f*10}px;bottom:${n.height-(h-(e.pinLiftOf.get(l.note.id)??0))}px;width:${rt}px;min-height:${xe}px;--es-tilt:-2.4deg;z-index:3`,!0)})}
296
- ${m.map(l=>{const{x:g,y:f,w:x}=u(l),E=d===l.id||a?.kind==="connect"&&a.fromSliceId===l.id;return k`<button
297
- class="slice-port${E?" slice-port--on":""}"
298
- type="button"
299
- style=${`left:${g+x-mt}px;top:${f+P/2-mt}px`}
300
- aria-label=${i.portAriaLabel}
301
- title=${i.portTitle}
302
- @pointerdown=${h=>c.portPointerDown(l.id,h)}
303
- >
304
- →
305
- </button>`})}
306
- ${m.map(l=>{if(d!==l.id||a!==void 0)return T;const{x:g,y:f}=u(l),x=new Set(l.notes.map(h=>h.type)),E=fn.filter(h=>!x.has(h));return k`<div
307
- class="slice-chips"
308
- style=${`left:${g}px;top:${f+P+6}px`}
309
- @pointerdown=${h=>h.stopPropagation()}
310
- >
311
- ${E.map(h=>k`<button class="slice-chip" type="button" @click=${()=>c.attachNote(l.id,h)}>
312
- ${i.addTypeLabel(h)}
313
- </button>`)}
314
- </div>`})}
315
- </div>
316
- </section>
317
- `},En=(t,e,n)=>{const{m:o,context:i,handlers:s}=t,r=i.state.contexts.flatMap((a,d)=>{const p=e.slices.filter(h=>h.contextId===a.id).flatMap(h=>{const S=e.xOf.get(h.id),A=e.bandOf.get(h.id);return S===void 0||A===void 0?[]:[{x:S,band:A,width:e.widthOf.get(h.id)??0}]}),m=p.filter(h=>h.band===n);if(m.length===0)return[];const u=Math.min(...m.map(h=>h.x))-10,b=Math.max(...m.map(h=>h.x+h.width))+10,l=14,g=(e.bands[n]?.head??pt)+P+12,f=p.some(h=>h.band<n)?"\u2026 ":"",x=p.some(h=>h.band>n)?" \u2026":"",E=String(d%5);return[k`<div
318
- class="context-region"
319
- data-hue=${E}
320
- data-dpk-target=${`context:${a.id}`}
321
- data-grill-questions=${Ne(Le(a.questions))}
322
- style=${`left:${u}px;top:${l}px;width:${b-u}px;height:${g-l}px`}
323
- title=${a.description??a.name}
324
- ></div>
325
- <div
326
- class="context-label"
327
- data-hue=${E}
328
- style=${`left:${u+10}px;top:${l}px;max-width:${b-u-20}px`}
329
- @pointerdown=${h=>h.stopPropagation()}
330
- >
331
- <button
332
- class="context-label-name"
333
- type="button"
334
- title=${`${a.name}
335
- ${o.renameContextHint}`}
336
- @click=${h=>s.renameContext(a.id,{x:h.clientX,y:h.clientY})}
337
- >
338
- ${f}${a.name}${x}
339
- </button>
340
- <button
341
- class="context-label-x"
342
- type="button"
343
- aria-label=${o.dissolveContextAria(a.name)}
344
- title=${o.dissolveContextTitle}
345
- @click=${()=>s.dissolveContext(a.id)}
346
- >
347
- ✕
348
- </button>
349
- </div>`]});return r.length>0?k`${r}`:T},yn=t=>{if(t===void 0||!t.moved)return T;if(t.kind==="connect")return k`<svg class="gesture-layer" aria-hidden="true">
350
- ${F`<path class="connect-line" d=${`M ${t.start.x} ${t.start.y} L ${t.current.x} ${t.current.y}`}></path>
351
- <circle class="connect-tip" cx=${t.current.x} cy=${t.current.y} r="5"></circle>`}
352
- </svg>`;if(t.kind==="select"){const e=Math.min(t.start.x,t.current.x),n=Math.min(t.start.y,t.current.y),o=Math.abs(t.current.x-t.start.x),i=Math.abs(t.current.y-t.start.y);return k`<div
353
- class="select-rect"
354
- style=${`left:${e}px;top:${n}px;width:${o}px;height:${i}px`}
355
- ></div>`}return T},wn=(t,e,n)=>k`<div class="board-hud">
356
- <span class="board-hud-stat">${t.noteCount(e.elements.length)}</span>
357
- <span class="board-hud-stat">${t.sliceCount(n.length)}</span>
358
- <span class="board-hud-stat">${t.contextCount(e.contexts.length)}</span>
359
- <span class="board-hint">${t.hudHint}</span>
360
- </div>`,$n=t=>{const{m:e,viewport:n,handlers:o}=t;return k`<div class="board-zoom" @pointerdown=${i=>i.stopPropagation()}>
361
- <button type="button" aria-label=${e.zoomOut} @click=${()=>o.zoomStep(-1)}>−</button>
362
- <button type="button" class="board-zoom-pct" title=${e.zoomReset} @click=${()=>o.zoomReset()}>
363
- ${Math.round(n.zoom*100)}%
364
- </button>
365
- <button type="button" aria-label=${e.zoomIn} @click=${()=>o.zoomStep(1)}>+</button>
366
- <button type="button" aria-label=${e.zoomFit} title=${e.zoomFit} @click=${()=>o.zoomFit()}>⛶</button>
367
- </div>`},Tn=t=>{const{m:e,context:n,selectedSliceIds:o,selectedLinkIds:i,handlers:s}=t;if(i.length===0&&o.length===0)return T;const r=n.state.contexts;return i.length>0?k`<div class="board-selection" @pointerdown=${a=>a.stopPropagation()}>
368
- <span class="board-selection-count">${e.selectedLinks(i.length)}</span>
369
- <button class="dpk-btn dpk-btn--accent" type="button" @click=${()=>s.deleteSelection()}>
370
- ${e.deleteLinks}
371
- </button>
372
- <span class="board-selection-hint">${e.deleteHint}</span>
373
- <button
374
- class="dpk-icon-btn"
375
- type="button"
376
- aria-label=${e.clearSelection}
377
- @click=${()=>s.clearSelection()}
378
- >
379
- ✕
380
- </button>
381
- </div>`:k`<div class="board-selection" @pointerdown=${a=>a.stopPropagation()}>
382
- <span class="board-selection-count">${e.selectedSlices(o.length)}</span>
383
- <button
384
- class="dpk-btn dpk-btn--accent"
385
- type="button"
386
- @click=${a=>s.groupSelection({x:a.clientX,y:a.clientY})}
387
- >
388
- ${e.groupIntoContext}
389
- </button>
390
- ${r.length>0?k`<select
391
- class="dpk-select"
392
- aria-label=${e.addToExistingAria}
393
- @change=${a=>{const d=Ct(a.target,HTMLSelectElement);d!==null&&(d.value!==""&&s.assignSelection(d.value),d.value="")}}
394
- >
395
- <option value="" selected>${e.addToExistingOption}</option>
396
- ${r.map(a=>k`<option value=${a.id}>${a.name}</option>`)}
397
- </select>`:T}
398
- <button class="dpk-btn" type="button" @click=${()=>s.stripSelectionContext()}>
399
- ${e.removeFromContext}
400
- </button>
401
- <button class="dpk-btn" type="button" @click=${()=>s.deleteSelection()}>${e.deleteButton}</button>
402
- <button class="dpk-icon-btn" type="button" aria-label=${e.clearSelection} @click=${()=>s.clearSelection()}>
403
- ✕
404
- </button>
405
- </div>`},ft=(t,e,n,o)=>({d:`M ${t.x} ${t.y} C ${e.x} ${e.y}, ${n.x} ${n.y}, ${o.x} ${o.y}`,mid:{x:(t.x+3*e.x+3*n.x+o.x)/8,y:(t.y+3*e.y+3*n.y+o.y)/8}}),Sn=()=>F`<marker id="es-arrow" viewBox="0 0 8 8" refX="7" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
406
- <path d="M0,0 L8,4 L0,8 z"></path>
407
- </marker>`,In=(t,e)=>{const n="url(#es-arrow)",o=[],i=a=>{const d=e.absXOf.get(a),c=e.bandOf.get(a),p=c===void 0?void 0:e.bands[c];if(!(d===void 0||c===void 0||p===void 0))return{x:H+d,y:p.y+p.head,w:e.widthOf.get(a)??0,band:c}},s=a=>{const d=e.bands[a];return d===void 0?0:d.y+d.height},r=(a,d,c,p,m)=>{const u=t.selectedLinkIds.includes(a.id)?" is-selected":"",b={start:6,end:-6,middle:0}[p];o.push(F`<g data-link-id=${a.id} data-dpk-target=${`link:${a.id}`}>
408
- <path class="link-hit" d=${d} @pointerdown=${l=>l.stopPropagation()} @click=${l=>t.handlers.linkClick(a.id,l.shiftKey||l.metaKey||l.ctrlKey)}></path>
409
- <path class=${`link-path${u}`} d=${d} marker-end=${n}></path>
410
- ${a.label===void 0?T:F`<text class="link-label" x=${c.x+b} y=${c.y-6} text-anchor=${p}><title>${a.label}</title>${ln(a.label,Math.min(m,lt))}</text>`}
411
- </g>`)};for(const a of e.arrows){const d=i(a.from),c=i(a.to);if(d===void 0||c===void 0)continue;if(d.band===c.band){const f=c.x>=d.x+d.w,x=f?c.x-(d.x+d.w):d.x-(c.x+c.w);if(x<=te+2){const h=d.y+P/2,S=f?d.x+d.w:d.x,A=f?c.x:c.x+c.w;r(a,`M ${S} ${h} L ${A} ${h}`,{x:(S+A)/2,y:h},"middle",Math.abs(A-S)-4);continue}const E=Ln(d,c,s(d.band)-ht/2);r(a,E.d,E.mid,"middle",x+2*Q);continue}const p=d.y<c.y,m=d.x+ve,u=Se(m,c.x+ve,c.x+c.w-ve),b={x:m,y:p?d.y+P:d.y},l={x:u,y:p?c.y:c.y+P},g=p?(s(d.band)+(e.bands[c.band]?.y??0))/2:(s(c.band)+(e.bands[d.band]?.y??0))/2;r(a,Mn([b,{x:b.x,y:g},{x:l.x,y:g},l]),{x:l.x-6,y:g},"end",lt)}return F`<svg class="links-layer" width=${e.width} height=${e.height}>
412
- <defs>${Sn()}</defs>
413
- ${o}
414
- </svg>`},Ln=(t,e,n)=>{const o=t.y+P;if(e.x>=t.x+t.w){const r={x:t.x+t.w-18,y:o},a={x:e.x+18,y:o};return ft(r,{x:r.x+48,y:n},{x:a.x-48,y:n},a)}const i={x:t.x+18,y:o},s={x:e.x+e.w-18,y:o};return ft(i,{x:i.x-48,y:n},{x:s.x+48,y:n},s)},Mn=(t,e=10)=>{let n=`M ${t[0]?.x??0} ${t[0]?.y??0}`;for(let i=1;i<t.length-1;i+=1){const s=t[i-1],r=t[i],a=t[i+1];if(s===void 0||r===void 0||a===void 0)continue;const d=Math.sign(r.x-s.x),c=Math.sign(r.y-s.y),p=Math.sign(a.x-r.x),m=Math.sign(a.y-r.y),u=Math.hypot(r.x-s.x,r.y-s.y),b=Math.hypot(a.x-r.x,a.y-r.y),l=Math.max(0,Math.min(e,u/2,b/2));n+=` L ${r.x-d*l} ${r.y-c*l} Q ${r.x} ${r.y} ${r.x+p*l} ${r.y+m*l}`}const o=t.at(-1);return o===void 0?n:`${n} L ${o.x} ${o.y}`},Nn=t=>{let e=0;for(const n of t)e=(e*31+n.charCodeAt(0))%997;return(e%17-8)*.09},_n=we`
415
- /* The board owns the whole main area; the viewport clips, never the shell. */
416
- .dpk-main {
417
- overflow: hidden;
418
- }
419
-
420
- .dpk-main-body {
421
- flex: 1 1 auto;
422
- min-height: 0;
423
- display: flex;
424
- flex-direction: column;
425
- padding: 0;
426
- gap: 0;
427
- }
428
-
429
- /* ------------------------------------------------------------- viewport */
430
-
431
- /* An infinite pannable surface; the dot grid scrolls with the content
432
- (background-position/-size are set inline from the viewport state). A
433
- quiet sunken tray reads as the working surface under the wall. */
434
- .board-viewport {
435
- position: relative;
436
- /* The board's own floating controls stack inside it, under the page's overlays (the review rail). */
437
- isolation: isolate;
438
- flex: 1 1 auto;
439
- min-height: 0;
440
- overflow: hidden;
441
- touch-action: none;
442
- background: var(--dpk-dots), var(--dpk-paper-sunken);
443
- }
444
-
445
- .board-viewport--gesturing,
446
- .board-viewport--gesturing * {
447
- user-select: none;
448
- }
449
-
450
- .board-viewport--empty {
451
- display: grid;
452
- place-items: center;
453
- padding: 24px;
454
- }
455
-
456
- .board-viewport:focus-visible {
457
- outline: none;
458
- box-shadow: inset var(--dpk-focus);
459
- }
460
-
461
- .board-content {
462
- position: absolute;
463
- left: 0;
464
- top: 0;
465
- width: max-content;
466
- transform-origin: 0 0;
467
- will-change: transform;
468
- }
469
-
470
- /* The wall is a fixed-size canvas: bands and the arrow layer are placed inside
471
- it at explicit coordinates, so an arrow may span several bands. */
472
- .wall {
473
- position: relative;
474
- }
475
-
476
- .band {
477
- position: absolute;
478
- display: flex;
479
- align-items: flex-start;
480
- }
481
-
482
- .band-canvas {
483
- position: relative;
484
- flex: 0 0 auto;
485
- }
486
-
487
- /* ---------------------------------------------------------------- slices */
488
-
489
- /* One causal slice: its notes framed together, read left to right.
490
- The frame is also the drag handle for moving the whole slice. */
491
- .slice {
492
- position: absolute;
493
- z-index: 1;
494
- border: 1px solid var(--dpk-rule-strong);
495
- border-radius: var(--dpk-radius-lg);
496
- background: color-mix(in srgb, var(--dpk-paper-raised) 82%, transparent);
497
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
498
- cursor: grab;
499
- transition:
500
- border-color 160ms var(--dpk-ease),
501
- background 160ms var(--dpk-ease),
502
- box-shadow 160ms var(--dpk-ease);
503
- }
504
-
505
- .slice:hover {
506
- border-color: var(--dpk-rule-hover);
507
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
508
- }
509
-
510
- .slice--selected {
511
- border-color: var(--dpk-blue);
512
- background: color-mix(in srgb, var(--dpk-blue-soft) 60%, var(--dpk-paper-raised));
513
- box-shadow:
514
- var(--dpk-bevel),
515
- 0 0 0 2px var(--dpk-blue-soft),
516
- var(--dpk-shadow-sm);
517
- }
518
-
519
- /* While a connection drag is out: everywhere it may land lights up dashed… */
520
- .slice--candidate {
521
- border: 1.5px dashed color-mix(in srgb, var(--dpk-blue) 55%, transparent);
522
- }
523
-
524
- /* …and the slice under the cursor confirms the landing. */
525
- .slice--target {
526
- border: 1.5px solid var(--dpk-blue);
527
- background: color-mix(in srgb, var(--dpk-blue-soft) 55%, transparent);
528
- box-shadow:
529
- 0 0 0 3px var(--dpk-blue-soft),
530
- var(--dpk-shadow-sm);
531
- }
532
-
533
- /* The slice being carried by a move drag. */
534
- .slice--lifted {
535
- opacity: 0.45;
536
- border-style: dashed;
537
- cursor: grabbing;
538
- }
539
-
540
- /* Insertion bar on the side of the drop target the slice will land on. */
541
- .slice--insert-before::before,
542
- .slice--insert-after::after {
543
- content: '';
544
- position: absolute;
545
- top: -6px;
546
- bottom: -6px;
547
- width: 3px;
548
- border-radius: 2px;
549
- background: var(--dpk-blue);
550
- }
551
-
552
- .slice--insert-before::before {
553
- left: -10px;
554
- }
555
-
556
- .slice--insert-after::after {
557
- right: -10px;
558
- }
559
-
560
- /* Connection port on a slice's right edge: click continues, drag connects.
561
- Shown only for the hovered slice (hover is hit-tested by the element,
562
- with padding, so it stays up while the cursor crosses over to it). */
563
- .slice-port {
564
- position: absolute;
565
- z-index: 5;
566
- width: 26px;
567
- height: 26px;
568
- border: 1px solid var(--dpk-rule-strong);
569
- border-radius: 50%;
570
- background: var(--dpk-paper-raised);
571
- color: var(--dpk-ink-soft);
572
- font-size: 13px;
573
- line-height: 1;
574
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
575
- cursor: crosshair;
576
- opacity: 0;
577
- pointer-events: none;
578
- transition:
579
- opacity 120ms var(--dpk-ease),
580
- border-color 120ms var(--dpk-ease),
581
- color 120ms var(--dpk-ease),
582
- background 120ms var(--dpk-ease),
583
- transform 160ms var(--dpk-ease-spring);
584
- }
585
-
586
- .slice-port--on,
587
- .slice-port:focus-visible {
588
- opacity: 1;
589
- pointer-events: auto;
590
- }
591
-
592
- .slice-port:hover {
593
- border-color: var(--dpk-blue);
594
- background: var(--dpk-blue-soft);
595
- color: var(--dpk-blue);
596
- transform: scale(1.08);
597
- }
598
-
599
- /* Add-note chips under the hovered slice: the roles it is still missing. */
600
- .slice-chips {
601
- position: absolute;
602
- z-index: 6;
603
- display: flex;
604
- gap: 4px;
605
- padding: 2px 0;
606
- }
607
-
608
- .slice-chip {
609
- border: 1px dashed var(--dpk-rule-strong);
610
- border-radius: 999px;
611
- padding: 3px 9px;
612
- font-size: 10.5px;
613
- font-weight: 620;
614
- white-space: nowrap;
615
- color: var(--dpk-ink-soft);
616
- background: color-mix(in srgb, var(--dpk-paper-raised) 90%, transparent);
617
- box-shadow: var(--dpk-shadow-xs);
618
- cursor: pointer;
619
- transition:
620
- border-color 120ms var(--dpk-ease),
621
- color 120ms var(--dpk-ease),
622
- background 120ms var(--dpk-ease),
623
- transform 140ms var(--dpk-ease-spring);
624
- }
625
-
626
- .slice-chip:hover {
627
- border-color: var(--dpk-blue);
628
- border-style: solid;
629
- color: var(--dpk-blue);
630
- background: var(--dpk-blue-soft);
631
- transform: translateY(-1px);
632
- }
633
-
634
- /* ------------------------------------------------------ bounded contexts */
635
-
636
- .context-region[data-hue='0'],
637
- .context-label[data-hue='0'] {
638
- --ctx-rgb: 51, 102, 204;
639
- }
640
- .context-region[data-hue='1'],
641
- .context-label[data-hue='1'] {
642
- --ctx-rgb: 13, 148, 136;
643
- }
644
- .context-region[data-hue='2'],
645
- .context-label[data-hue='2'] {
646
- --ctx-rgb: 174, 110, 6;
647
- }
648
- .context-region[data-hue='3'],
649
- .context-label[data-hue='3'] {
650
- --ctx-rgb: 124, 58, 237;
651
- }
652
- .context-region[data-hue='4'],
653
- .context-label[data-hue='4'] {
654
- --ctx-rgb: 190, 50, 100;
655
- }
656
-
657
- .context-region {
658
- position: absolute;
659
- z-index: 0;
660
- border: 1.5px dashed rgba(var(--ctx-rgb), 0.36);
661
- border-radius: var(--dpk-radius-lg);
662
- background: linear-gradient(180deg, rgba(var(--ctx-rgb), 0.07), rgba(var(--ctx-rgb), 0.025));
663
- box-shadow: inset 0 1px 0 rgba(var(--ctx-rgb), 0.14);
664
- pointer-events: none;
665
- }
666
-
667
- /* The label rides the region's top edge and carries the rename/dissolve UI. */
668
- .context-label {
669
- position: absolute;
670
- z-index: 7;
671
- transform: translateY(-55%);
672
- display: flex;
673
- align-items: center;
674
- gap: 4px;
675
- }
676
-
677
- /* No wider than its region (the element sets the label's max-width); a long name ends in an ellipsis. */
678
- .context-label-name {
679
- min-width: 0;
680
- overflow: hidden;
681
- text-overflow: ellipsis;
682
- border: none;
683
- border-radius: 999px;
684
- padding: 3px 10px;
685
- font-family: var(--dpk-mono);
686
- font-size: 9.5px;
687
- font-weight: 650;
688
- letter-spacing: 0.13em;
689
- text-transform: uppercase;
690
- white-space: nowrap;
691
- color: #fff;
692
- background: linear-gradient(180deg, rgba(var(--ctx-rgb), 0.98), rgba(var(--ctx-rgb), 0.84));
693
- cursor: pointer;
694
- box-shadow:
695
- inset 0 1px 0 rgba(255, 255, 255, 0.28),
696
- 0 1px 2px rgba(var(--ctx-rgb), 0.3),
697
- var(--dpk-shadow-xs);
698
- transition: transform 140ms var(--dpk-ease-spring);
699
- }
700
-
701
- .context-label-name:hover {
702
- background: linear-gradient(180deg, rgba(var(--ctx-rgb), 1), rgba(var(--ctx-rgb), 0.92));
703
- transform: translateY(-1px);
704
- }
705
-
706
- .context-label-x {
707
- flex: none;
708
- width: 18px;
709
- height: 18px;
710
- border: none;
711
- border-radius: 50%;
712
- font-size: 9px;
713
- line-height: 1;
714
- color: rgba(var(--ctx-rgb), 0.9);
715
- background: color-mix(in srgb, var(--dpk-paper-raised) 92%, transparent);
716
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-xs);
717
- cursor: pointer;
718
- opacity: 0;
719
- transition:
720
- opacity 120ms var(--dpk-ease),
721
- transform 140ms var(--dpk-ease-spring);
722
- }
723
-
724
- .context-label-x:hover {
725
- transform: scale(1.1);
726
- }
727
-
728
- .context-label:hover .context-label-x,
729
- .context-label-x:focus-visible {
730
- opacity: 1;
731
- }
732
-
733
- /* ---------------------------------------------------------------- arrows */
734
-
735
- .links-layer {
736
- position: absolute;
737
- inset: 0;
738
- /* Causality strokes are annotations drawn over the wall. */
739
- z-index: 4;
740
- pointer-events: none;
741
- overflow: visible;
742
- }
743
-
744
- /* Stroke must come from a stylesheet, not a presentation attribute:
745
- a var() inside stroke="..." is not substituted and the line stays invisible. */
746
- .link-path {
747
- fill: none;
748
- stroke: var(--dpk-ink-soft);
749
- stroke-width: 1.75;
750
- stroke-linecap: round;
751
- stroke-linejoin: round;
752
- opacity: 0.65;
753
- }
754
-
755
- /* Invisible fat stroke on top of the line: a mistaken connection is easy to
756
- pick, and picking it never starts a wall gesture. */
757
- .link-hit {
758
- fill: none;
759
- stroke: transparent;
760
- stroke-width: 14;
761
- stroke-linecap: round;
762
- pointer-events: stroke;
763
- cursor: pointer;
764
- }
765
-
766
- .link-path.is-selected {
767
- stroke: var(--dpk-blue);
768
- stroke-width: 2.6;
769
- opacity: 1;
770
- }
771
-
772
- .link-label {
773
- font-family: var(--dpk-mono);
774
- font-size: 9px;
775
- font-weight: 620;
776
- letter-spacing: 0.06em;
777
- fill: var(--dpk-ink-soft);
778
- paint-order: stroke;
779
- stroke: var(--dpk-paper-sunken);
780
- stroke-width: 4;
781
- stroke-linejoin: round;
782
- }
783
-
784
- .links-layer marker path {
785
- fill: var(--dpk-ink-soft);
786
- opacity: 0.8;
787
- }
788
-
789
- /* --------------------------------------------------------------- gesture */
790
-
791
- /* Overlays live in viewport space, above the transformed content. */
792
- .gesture-layer {
793
- position: absolute;
794
- inset: 0;
795
- z-index: 30;
796
- width: 100%;
797
- height: 100%;
798
- pointer-events: none;
799
- overflow: visible;
800
- }
801
-
802
- .connect-line {
803
- fill: none;
804
- stroke: var(--dpk-blue);
805
- stroke-width: 2;
806
- stroke-linecap: round;
807
- stroke-dasharray: 6 4;
808
- }
809
-
810
- .connect-tip {
811
- fill: var(--dpk-blue);
812
- }
813
-
814
- .select-rect {
815
- position: absolute;
816
- z-index: 30;
817
- border: 1px solid var(--dpk-blue);
818
- background: color-mix(in srgb, var(--dpk-blue-soft) 40%, transparent);
819
- pointer-events: none;
820
- }
821
-
822
- /* ------------------------------------------------------------ floating UI */
823
-
824
- /* Keeps clear of the zoom control on the right: the hint's ellipsis gives way first. */
825
- .board-hud {
826
- position: absolute;
827
- left: 12px;
828
- bottom: 12px;
829
- z-index: 40;
830
- max-width: calc(100% - 200px);
831
- overflow: hidden;
832
- white-space: nowrap;
833
- display: flex;
834
- gap: 10px;
835
- align-items: center;
836
- padding: 6px 8px 6px 14px;
837
- border: 1px solid var(--dpk-rule);
838
- border-radius: 999px;
839
- font-family: var(--dpk-mono);
840
- font-size: 10px;
841
- letter-spacing: 0.05em;
842
- color: var(--dpk-ink-faint);
843
- background: var(--dpk-glass);
844
- backdrop-filter: blur(12px);
845
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
846
- pointer-events: none;
847
- animation: dpk-hud-in 220ms var(--dpk-ease) backwards;
848
- }
849
-
850
- .board-hud-stat {
851
- padding-right: 10px;
852
- border-right: 1px solid var(--dpk-rule);
853
- font-variant-numeric: tabular-nums;
854
- }
855
-
856
- .board-hud-stat:last-of-type {
857
- padding-right: 0;
858
- border-right: 0;
859
- }
860
-
861
- .board-hint {
862
- overflow: hidden;
863
- text-overflow: ellipsis;
864
- color: var(--dpk-ink-faint);
865
- opacity: 0.8;
866
- letter-spacing: 0.02em;
867
- }
868
-
869
- /* A phone has no room beside the zoom control for the stats; the counts are in the review. */
870
- @media (max-width: 760px) {
871
- .board-hud {
872
- display: none;
873
- }
874
- }
875
-
876
- @keyframes dpk-hud-in {
877
- from {
878
- opacity: 0;
879
- transform: translateY(6px);
880
- }
881
- }
882
-
883
- /* Above the shell's hand-off dock while it floats in the same corner. */
884
- .board-zoom {
885
- position: absolute;
886
- right: 12px;
887
- /* Above the page's hand-off dock while it floats over this corner. */
888
- bottom: calc(12px + var(--dpk-dock-clearance, 0px));
889
- z-index: 40;
890
- display: flex;
891
- align-items: center;
892
- border: 1px solid var(--dpk-rule);
893
- border-radius: var(--dpk-radius);
894
- background: var(--dpk-glass);
895
- backdrop-filter: blur(12px);
896
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
897
- overflow: hidden;
898
- animation: dpk-hud-in 220ms var(--dpk-ease) backwards;
899
- }
900
-
901
- .board-zoom button {
902
- border: none;
903
- background: transparent;
904
- padding: 6px 10px;
905
- font-size: 12px;
906
- line-height: 1;
907
- color: var(--dpk-ink-soft);
908
- cursor: pointer;
909
- transition:
910
- background 140ms var(--dpk-ease),
911
- color 140ms var(--dpk-ease);
912
- }
913
-
914
- .board-zoom button:hover {
915
- background: var(--dpk-blue-soft);
916
- color: var(--dpk-blue);
917
- }
918
-
919
- .board-zoom .board-zoom-pct {
920
- min-width: 48px;
921
- font-family: var(--dpk-mono);
922
- font-size: 10.5px;
923
- }
924
-
925
- .board-selection {
926
- position: absolute;
927
- left: 50%;
928
- bottom: 14px;
929
- transform: translateX(-50%);
930
- z-index: 45;
931
- display: flex;
932
- gap: 8px;
933
- align-items: center;
934
- padding: 8px 12px;
935
- border: 1px solid var(--dpk-rule-strong);
936
- border-radius: var(--dpk-radius);
937
- background: var(--dpk-glass);
938
- backdrop-filter: blur(12px);
939
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-lg);
940
- animation: dpk-hud-in 200ms var(--dpk-ease-spring) backwards;
941
- }
942
-
943
- .board-selection-count {
944
- font-family: var(--dpk-mono);
945
- font-size: 10.5px;
946
- color: var(--dpk-ink-soft);
947
- white-space: nowrap;
948
- }
949
-
950
- .board-selection-hint {
951
- font-size: 10.5px;
952
- color: var(--dpk-ink-faint);
953
- white-space: nowrap;
954
- }
955
-
956
- /* ----------------------------------------------------------------- empty */
957
-
958
- .empty {
959
- border: 1.5px dashed var(--dpk-rule-strong);
960
- border-radius: var(--dpk-radius-xl);
961
- padding: 28px 24px;
962
- background: var(--dpk-paper-raised);
963
- max-width: 560px;
964
- display: grid;
965
- gap: 10px;
966
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
967
- justify-items: start;
968
- animation: dpk-hud-in 220ms var(--dpk-ease) backwards;
969
- }
970
-
971
- /* --------------------------------------------------------------- pickers */
972
-
973
- .context-pop {
974
- min-width: 220px;
975
- }
976
-
977
- /* -------------------------------------------------------- append picker */
978
-
979
- /* The palette travels in --es-note-bg/-ink, so a chip previews what it adds. */
980
- .append-menu {
981
- min-width: 220px;
982
- }
983
-
984
- .append-menu .type-options {
985
- display: grid;
986
- grid-template-columns: 1fr 1fr;
987
- gap: 4px;
988
- }
989
-
990
- .type-chip {
991
- border: 1px solid var(--dpk-rule-strong);
992
- border-radius: var(--dpk-radius-xs);
993
- padding: 6px 8px;
994
- font-size: 11px;
995
- font-weight: 620;
996
- text-align: left;
997
- background: var(--es-note-bg, var(--dpk-paper-raised));
998
- color: var(--es-note-ink, var(--dpk-ink));
999
- box-shadow: var(--dpk-shadow-xs);
1000
- cursor: pointer;
1001
- transition:
1002
- transform 140ms var(--dpk-ease-spring),
1003
- box-shadow 140ms var(--dpk-ease);
1004
- }
1005
-
1006
- .type-chip:hover {
1007
- transform: translateY(-1px);
1008
- box-shadow: var(--dpk-shadow-sm);
1009
- }
1010
-
1011
- .link-add .dpk-select {
1012
- flex: 1 1 auto;
1013
- min-width: 0;
1014
- }
1015
- `,Cn={width:260,height:150},On={width:236,height:210},An=64,zn=48,Dn=["event","command","aggregate","actor","policy","readmodel","external"],Pn=1200,gt=5,Rn={x:20,top:46,bottom:40};class xt extends Me{static{this.styles=[Me.styles,_n,$e]}definitionFor(e){return Ue(e)}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}}}#e;#n=new Te(this);#o=new sn(this);constructor(){super(),this.mode=C,this.boardWidth=Pn,this.viewport={panX:24,panY:16,zoom:1},this.gesture=void 0,this.hoverSliceId=void 0,this.selectedSliceIds=[],this.selectedLinkIds=[],this.naming=void 0}disconnectedCallback(){super.disconnectedCallback(),this.#e?.disconnect(),this.#e=void 0}firstUpdated(){typeof ResizeObserver>"u"||(this.#e=new ResizeObserver(e=>{const n=e[0]?.contentRect.width;n!==void 0&&n>0&&(this.boardWidth=n)}),this.#e.observe(this))}updated(){super.updated(),this.#c(this.viewport),this.mode.kind==="append"&&this.#t("#append-menu",this.mode.point,On),this.naming!==void 0&&this.#t("#context-pop",this.naming.point,Cn,"#context-name")}#t(e,n,o,i){const s=this.renderRoot.querySelector(e);if(!s||s.matches(":popover-open")||(this.#n.open(s,Ot(n.x,n.y),o),i===void 0))return;const r=this.renderRoot.querySelector(i);r?.focus(),r instanceof HTMLInputElement&&r.select()}#s(){return Math.max(Bn,this.boardWidth-96)}renderRegions(e){return{main:this.#r(e)}}#r(e){const n=O(this.locale);return k`
1016
- ${bn({m:n,context:e,mode:this.mode,maxRowWidth:this.#s(),pinHeights:this.#o.heights,viewport:this.viewport,gesture:this.gesture,hoverSliceId:this.hoverSliceId,selectedSliceIds:this.selectedSliceIds,selectedLinkIds:this.selectedLinkIds,handlers:{noteIntent:(o,i)=>this.#S(o,i),addFirst:()=>this.#R(e),attachNote:(o,i)=>this.#C(e,o,i),viewportPointerDown:o=>this.#k(o),viewportPointerMove:o=>this.#E(o),viewportPointerUp:o=>this.#y(e,o),viewportPointerCancel:()=>this.gesture=void 0,viewportPointerLeave:()=>{this.gesture===void 0&&(this.hoverSliceId=void 0)},viewportWheel:o=>this.#w(o),portPointerDown:(o,i)=>this.#b(o,i),slicePointerDown:(o,i)=>this.#v(o,i),zoomStep:o=>this.#$(o),zoomFit:()=>this.#T(),zoomReset:()=>this.#m(1/this.viewport.zoom),groupSelection:o=>{this.selectedSliceIds.length>0&&(this.naming={kind:"create-context",sliceIds:this.selectedSliceIds,point:o})},assignSelection:o=>this.#g(e,o),stripSelectionContext:()=>this.#g(e,null),clearSelection:()=>{this.selectedSliceIds=[],this.selectedLinkIds=[]},linkClick:(o,i)=>this.#A(o,i),deleteSelection:()=>this.#f(e),keyDown:o=>this.#z(e,o),renameContext:(o,i)=>this.naming={kind:"rename-context",contextId:o,point:i},dissolveContext:o=>e.dispatch(y.deleteContext(o))}})}
1017
- ${this.mode.kind==="append"?this.#P(e,this.mode.sliceId):T}
1018
- ${this.naming!==void 0?this.#D(e,this.naming):T}
1019
- `}#i(){return this.renderRoot.querySelector(".board-viewport")}#a(e){const n=this.#i()?.getBoundingClientRect();return n===void 0?{x:e.clientX,y:e.clientY}:{x:e.clientX-n.left,y:e.clientY-n.top}}#l(e){const n=this.#i();if(n===null)return[];const o=n.getBoundingClientRect();return[...this.renderRoot.querySelectorAll("[data-slice-id]")].map(i=>{const s=i.getBoundingClientRect();return{id:i.dataset.sliceId??"",rect:{left:s.left-o.left-(e?.x??0),top:s.top-o.top-(e?.top??0),width:s.width+(e?.x??0)*2,height:s.height+(e?.top??0)+(e?.bottom??0)}}})}#h(e,n){const o=this.#i();o!==null&&(o.setPointerCapture(e.pointerId),this.gesture=n)}#b(e,n){if(n.button!==0)return;n.stopPropagation(),n.preventDefault();const o=this.#a(n);this.#h(n,{kind:"connect",pointerId:n.pointerId,fromSliceId:e,start:o,current:o,moved:!1})}#v(e,n){if(n.button!==0)return;n.stopPropagation(),n.preventDefault();const o=this.#a(n);this.#h(n,{kind:"move-slice",pointerId:n.pointerId,sliceId:e,start:o,current:o,moved:!1})}#k(e){if(e.button!==0||this.gesture!==void 0)return;for(const o of e.composedPath()){if(o===e.currentTarget)break;if(o instanceof Element&&(o.tagName.toLowerCase()==="dpk-internal-event-storming-note"||o.matches("button, select, textarea, input, a")))return}const n=this.#a(e);(this.mode.kind==="editing"||this.mode.kind==="append")&&(this.mode=C),this.selectedLinkIds=[],this.#h(e,{kind:"select",pointerId:e.pointerId,start:n,current:n,moved:!1})}#E(e){const n=this.gesture,o=this.#a(e);if(n===void 0){const i=me(this.#l(Rn),o.x,o.y);i!==this.hoverSliceId&&(this.hoverSliceId=i);return}this.gesture=nt(n,{pointerId:e.pointerId,point:o},this.#l(),gt)}#y(e,n){const o=this.gesture;if(o===void 0||n.pointerId!==o.pointerId)return;const i=nt(o,{pointerId:n.pointerId,point:this.#a(n)},this.#l(),gt);if(this.gesture=void 0,i.kind==="connect"){i.moved?i.targetSliceId!==void 0&&this.#I(e,i.fromSliceId,i.targetSliceId):this.#M(i.fromSliceId);return}if(i.kind==="move-slice"){if(!i.moved){this.selectedSliceIds=this.selectedSliceIds.includes(i.sliceId)?this.selectedSliceIds.filter(r=>r!==i.sliceId):[...this.selectedSliceIds,i.sliceId];return}i.drop!==void 0&&this.#O(e,i.sliceId,i.drop.sliceId,i.drop.side);return}if(!i.moved){this.selectedSliceIds=[];return}const s={left:Math.min(i.start.x,i.current.x),top:Math.min(i.start.y,i.current.y),width:Math.abs(i.current.x-i.start.x),height:Math.abs(i.current.y-i.start.y)};this.selectedSliceIds=[...et(this.#l(),s)]}#w(e){e.preventDefault();const n=this.#a(e);this.#c(e.ctrlKey||e.metaKey?he(this.viewport,n.x,n.y,Math.exp(-e.deltaY*.01)):pe(this.viewport,-e.deltaX,-e.deltaY))}#m(e){const n=this.#i()?.getBoundingClientRect();this.#c(he(this.viewport,(n?.width??0)/2,(n?.height??0)/2,e))}#$(e){this.#m(e===1?1.2:1/1.2)}showTarget(e){this.updateComplete.then(()=>{const n=this.#i(),o=At(this,W(e));if(n===null||o===null)return;const i=n.getBoundingClientRect(),s=o.getBoundingClientRect();if(i.width===0||i.height===0)return;const r={left:s.left-i.left,top:s.top-i.top,width:s.width,height:s.height};this.#c(nn(this.viewport,r,i,zn))})}#T(){const e=this.#i()?.getBoundingClientRect(),n=this.#u();e===void 0||n===void 0||this.#c(Ze(n,{width:e.width,height:e.height},48))}#u(){const e=this.renderRoot.querySelector(".wall");return e===null?void 0:{width:e.offsetWidth,height:e.offsetHeight}}#c(e){const n=this.#i()?.getBoundingClientRect(),o=this.#u(),i=n===void 0||o===void 0||o.width===0||n.width===0?e:Je(e,o,{width:n.width,height:n.height},An),s=this.viewport;i.panX===s.panX&&i.panY===s.panY&&i.zoom===s.zoom||(this.viewport=i)}#S(e,n){const o=this.context();switch(n.kind){case"select":o.navigate({note:e});break;case"rename":o.dispatch(y.setElementName(e,n.name));break;case"comment":o.dispatch({type:"comment",target:`element:${e}`,payload:{body:n.body}});break;case"delete":o.dispatch(y.deleteElement(e)),o.navigation.note===e&&o.navigate({note:null});break;case"add-hotspot":this.#_(o,e);break}this.mode=it(this.mode,e,n)}#p(e,n){return B(e).find(o=>o.id===n)}#d(e){return e===void 0?[]:[...e.notes,...e.pins.map(n=>n.note)].map(n=>n.id)}#I(e,n,o){if(n===o)return;const i=B(e.state),s=i.find(u=>u.id===n),r=i.find(u=>u.id===o),a=s&&r?Be(s,r):void 0;if(s===void 0||r===void 0||a===void 0||e.state.links.some(u=>u.from===a.from&&u.to===a.to))return;const d=e.state.links.map(u=>u.id),c=e.state.elements.map(u=>u.id),p=G(s)?.id,m=p!==void 0&&i.indexOf(r)>i.indexOf(s)?tt(c,this.#d(r),[p],"after"):[];e.dispatchBatch([y.linkElements(z(`link-${a.from}`,d),a.from,a.to,{kind:"flow"}),...m.map(u=>y.moveElement(u.id,u.after))])}#L(e){const n=this.#i(),o=this.#l().find(s=>s.id===e)?.rect;if(n===null||o===void 0)return;const i=n.getBoundingClientRect();return{x:i.left+o.left+o.width,y:i.top+o.top+o.height/2}}#M(e){const n=this.#L(e);n!==void 0&&(this.mode={kind:"append",sliceId:e,point:n})}#N(e,n,o){const i=this.#p(e.state,n),s=i?G(i):void 0;if(s===void 0){this.mode=C;return}const r=z(`new-${o}`,q(e.state)),a=e.state.links.map(c=>c.id);if(!e.dispatchBatch([y.addElement(r,o,O(this.locale).noteTypeLabel(o)),y.linkElements(z(`link-${s.id}`,a),s.id,r,{kind:"flow"})]).ok){this.mode=C;return}e.navigate({note:r}),this.mode={kind:"editing",noteId:r}}#_(e,n){const o=z("new-hotspot",q(e.state)),i=e.state.links.map(r=>r.id);e.dispatchBatch([y.addElement(o,"hotspot",O(this.locale).noteTypeLabel("hotspot")),y.linkElements(z(`link-${o}`,i),o,n,{kind:"member"})]).ok&&(e.navigate({note:o}),this.mode={kind:"editing",noteId:o})}#C(e,n,o){const i=this.#p(e.state,n),s=i===void 0?void 0:De(i,o);if(s===void 0)return;const r=z(`new-${o}`,q(e.state)),[a,d]=s.incoming?[r,s.anchorId]:[s.anchorId,r],c=e.state.links.map(m=>m.id);e.dispatchBatch([y.addElement(r,o,O(this.locale).noteTypeLabel(o)),y.linkElements(z(`link-${a}`,c),a,d,{kind:"member"})]).ok&&(e.navigate({note:r}),this.mode={kind:"editing",noteId:r})}#O(e,n,o,i){const s=e.state,r=ue(s.elements.map(a=>a.id),this.#d(this.#p(s,n)),this.#d(this.#p(s,o)),i);e.dispatchBatch(r.map(a=>y.moveElement(a.id,a.after)))}#A(e,n){this.mode.kind==="editing"&&(this.mode=C),this.selectedSliceIds=[],this.selectedLinkIds=n?this.selectedLinkIds.includes(e)?this.selectedLinkIds.filter(o=>o!==e):[...this.selectedLinkIds,e]:[e],this.#i()?.focus()}#f(e){if(this.selectedLinkIds.length>0){const i=e.state.links.filter(s=>this.selectedLinkIds.includes(s.id));e.dispatchBatch(i.map(s=>y.unlinkElements(s.from,s.to))),this.selectedLinkIds=[];return}if(this.selectedSliceIds.length===0)return;const n=B(e.state),o=this.selectedSliceIds.flatMap(i=>this.#d(n.find(s=>s.id===i)));e.dispatchBatch(o.map(i=>y.deleteElement(i))),this.selectedSliceIds=[]}#z(e,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.#f(e);return}const o=e.navigation.note;o===void 0||D(e.state,o)===void 0||(e.dispatch(y.deleteElement(o)),e.navigate({note:null}))}#g(e,n){const o=B(e.state),i=this.selectedSliceIds.flatMap(r=>this.#d(o.find(a=>a.id===r)));e.dispatchBatch(i.map(r=>y.setElementContext(r,n))).ok&&(this.selectedSliceIds=[])}#x(e,n){const i=this.renderRoot.querySelector("#context-name")?.value.trim()??"";if(i==="")return;if(n.kind==="rename-context"){e.dispatch(y.setContextName(n.contextId,i)).ok&&(this.naming=void 0);return}const s=z("context",e.state.contexts.map(c=>c.id)),r=B(e.state),a=n.sliceIds.flatMap(c=>this.#d(r.find(p=>p.id===c)));e.dispatchBatch([y.addContext(s,i),...a.map(c=>y.setElementContext(c,s))]).ok&&(this.selectedSliceIds=[],this.naming=void 0)}#D(e,n){const o=O(this.locale),i=n.kind==="rename-context"?Y(e.state,n.contextId)?.name??"":"";return k`<div id="context-pop" class="comment-pop context-pop" popover="manual">
1020
- <span class="dpk-label"> ${n.kind==="create-context"?o.newContextTitle:o.renameContextTitle} </span>
1021
- <input
1022
- id="context-name"
1023
- class="dpk-input"
1024
- type="text"
1025
- placeholder=${o.contextNamePlaceholder}
1026
- .value=${i}
1027
- @keydown=${s=>{s.key==="Enter"&&this.#x(e,n),s.key==="Escape"&&(this.naming=void 0)}}
1028
- />
1029
- <div class="pop-actions">
1030
- <button class="dpk-btn" type="button" data-dpk-text-discard @click=${()=>this.naming=void 0}>
1031
- ${o.cancel}
1032
- </button>
1033
- <button class="dpk-btn dpk-btn--accent" type="button" @click=${()=>this.#x(e,n)}>
1034
- ${n.kind==="create-context"?o.create:o.save}
1035
- </button>
1036
- </div>
1037
- </div>`}#P(e,n){const o=O(this.locale),i=this.#p(e.state,n),s=i===void 0?void 0:G(i);return k`<div id="append-menu" class="comment-pop append-menu" popover="manual">
1038
- <span class="dpk-label">${s===void 0?o.appendMenuNext:o.appendMenuAfter(s.name)}</span>
1039
- <div class="type-options">
1040
- ${Dn.map(r=>k`<button
1041
- class="type-chip"
1042
- type="button"
1043
- data-type=${r}
1044
- style=${le(r)}
1045
- @click=${()=>this.#N(e,n,r)}
1046
- >
1047
- ${o.noteTypeLabel(r)}
1048
- </button>`)}
1049
- </div>
1050
- <div class="pop-actions">
1051
- <button class="dpk-btn" type="button" @click=${()=>this.mode=C}>${o.cancel}</button>
1052
- </div>
1053
- </div>`}#R(e){const n=z("new-event",q(e.state));if(!e.dispatch(y.addElement(n,"event",O(this.locale).noteTypeLabel("event"))).ok){this.mode=C;return}e.navigate({note:n}),this.mode={kind:"editing",noteId:n}}}const Bn=264,bt=()=>{tn(),customElements.get("dpk-template-event-storming")||customElements.define("dpk-template-event-storming",xt)},Xn=Object.freeze(Object.defineProperty({__proto__:null,DpkTemplateEventStorming:xt,ES_IDLE:C,NOTE_TYPES:j,ZOOM_MAX:Ve,ZOOM_MIN:ce,allNoteIds:q,applyEventStormingAction:Ae,attachAnchor:De,buildSlices:B,connectionEndpoints:Be,constrainViewport:Je,defineEventStormingElement:bt,describeEventStormingAction:He,dropSide:Qe,emptyEventStormingBase:Oe,eventStormingAction:y,eventStormingActions:w,eventStormingBaseSchema:_e,eventStormingCommentTargets:Fe,eventStormingDefinitionFor:Ue,eventStormingHasTarget:Ge,eventStormingMessages:O,eventStormingTargetLabel:We,eventStormingTitle:de,findContext:Y,findLink:re,findNote:D,fitViewport:Ze,hitRect:me,noteCardModeOf:ot,panBy:pe,parseEventStormingBase:Ce,planSliceBands:Re,rectsInBand:et,reduceNoteIntent:it,resolveEventStormingNavigation:qe,sameSlice:J,serializeEventStormingAction:Ke,sliceArrows:Pe,sliceMovePlan:ue,sliceMoveSteps:tt,sliceVoice:G,zoomAt:he},Symbol.toStringTag,{value:"Module"}));export{bt as d,Xn as i};