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

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 (36) hide show
  1. package/README.md +22 -9
  2. package/dist/chunks/shared-B2K3LoOU.js +1016 -0
  3. package/dist/chunks/shared-BqW3KAJ4.js +613 -0
  4. package/dist/chunks/shared-Byv6cc0r.js +2779 -0
  5. package/dist/chunks/{shared-CmM4cgd6.js → shared-CKG_SQh5.js} +1 -1
  6. package/dist/chunks/shared-CPAT0Cgk.js +29 -0
  7. package/dist/chunks/shared-CwbzACTe.js +1874 -0
  8. package/dist/chunks/shared-DBDgdVsd.js +1 -0
  9. package/dist/chunks/shared-DMlMTd3c.js +1018 -0
  10. package/dist/chunks/shared-DaoPCw6-.js +556 -0
  11. package/dist/chunks/shared-DqB_TR20.js +1599 -0
  12. package/dist/chunks/shared-DsVxrO_3.js +609 -0
  13. package/dist/chunks/shared-iQIywbRc.js +676 -0
  14. package/dist/chunks/shared-xrCdgpNS.js +1 -0
  15. package/dist/components.js +1 -1
  16. package/dist/index.js +1 -1
  17. package/dist/templates/event-storming.js +1 -1
  18. package/dist/templates/example-mapping.js +1 -1
  19. package/dist/templates/grill.js +1 -1
  20. package/dist/templates/plain.js +1 -1
  21. package/dist/templates/prototype.js +1 -1
  22. package/dist/templates/slides.js +1 -0
  23. package/dist/templates/task-board.js +1 -0
  24. package/dist/templates/usm.js +1 -1
  25. package/package.json +4 -2
  26. package/dist/chunks/shared-5C6fORCL.js +0 -1404
  27. package/dist/chunks/shared-B1lFGiYZ.js +0 -1
  28. package/dist/chunks/shared-BEjjbZ0X.js +0 -2543
  29. package/dist/chunks/shared-BFAVBf4I.js +0 -1
  30. package/dist/chunks/shared-BybvAQye.js +0 -579
  31. package/dist/chunks/shared-DKxAm7wL.js +0 -27
  32. package/dist/chunks/shared-DgusMFKr.js +0 -1
  33. package/dist/chunks/shared-Dx0MEuAf.js +0 -921
  34. package/dist/chunks/shared-RclF4vSf.js +0 -692
  35. package/dist/chunks/shared-ao1beBgL.js +0 -544
  36. package/dist/chunks/shared-eiZoh1aF.js +0 -521
@@ -1,2543 +0,0 @@
1
- import{Z as Ot,k as It,_ as Pt,$ as N,a0 as w,a1 as h,a2 as ae,a3 as I,a4 as Ut,A as _t,a5 as jt,a6 as Ft,a7 as B,a8 as C,a9 as b,aa as z,ab as p,ac as F,ad as $,ae as S,af as X,ag as Ht,ah as ve,ai as ye,aj as oe,ak as de,al as le,am as Nt,an as we,m as $e,ao as Bt,ap as Vt,aq as Wt,r as Yt,s as Gt}from"./shared-5C6fORCL.js";import{i as Kt}from"./shared-CmM4cgd6.js";import{P as Xt,p as Jt,r as Zt}from"./shared-DKxAm7wL.js";import{c as te}from"./shared-ml5h7U5L.js";const Qt='script[type="application/json"]',Se=(i,e)=>{const t=i.querySelector(Qt);if(!t)return null;const s=t.textContent??"";if(s.trim()==="")return{ok:!1,error:"JSON block is empty"};try{return{ok:!0,value:e(JSON.parse(s))}}catch(n){return{ok:!1,error:n instanceof Error?n.message:String(n)}}},es=(i,e,t)=>{const s=Se(i,e);if(s)return t(s),()=>{};const n=new MutationObserver(()=>{const a=Se(i,e);a&&(n.disconnect(),t(a))});return n.observe(i,{childList:!0,subtree:!0}),()=>n.disconnect()},Me={nodeSpacing:34,layerSpacing:84,padding:28,sweeps:4,coordinatePasses:6},se=i=>{const e=[...i].sort((s,n)=>s-n);if(e.length===0)return 0;const t=Math.floor(e.length/2);return e.length%2===1?e[t]??0:((e[t-1]??0)+(e[t]??0))/2},ts=(i,e)=>{const t=new Map;for(const r of i)t.set(r.id,[]);for(const r of e)t.get(r.from)?.push(r);const s=new Map,n=new Set,a=r=>{s.set(r,"open");for(const o of t.get(r)??[]){const d=s.get(o.to)??"new";d==="open"?n.add(o.id):d==="new"&&a(o.to)}s.set(r,"done")};for(const r of i)(s.get(r.id)??"new")==="new"&&a(r.id);return{reversed:n,forward:e.filter(r=>!n.has(r.id))}},ss=(i,e)=>{const t=new Map,s=new Map;for(const o of i)t.set(o.id,[]),s.set(o.id,[]);for(const o of e)s.get(o.from)?.push(o),t.get(o.to)?.push(o);const n=new Map(i.map(o=>[o.id,0])),a=new Map(i.map(o=>[o.id,(t.get(o.id)??[]).length])),r=i.filter(o=>(a.get(o.id)??0)===0).map(o=>o.id);for(const o of r)for(const d of s.get(o)??[]){const l=n.get(d.to)??0;n.set(d.to,Math.max(l,(n.get(o)??0)+1));const f=(a.get(d.to)??0)-1;a.set(d.to,f),f===0&&r.push(d.to)}return n},ns=(i,e,t,s)=>{const n=[...i.keys()].sort((a,r)=>a-r);for(let a=0;a<s;a++){const r=a%2===0;for(const o of r?n:[...n].reverse()){const d=i.get(o)??[],l=new Map(d.map((c,m)=>[c,m])),f=c=>{const m=l.get(c);return m===void 0?null:m},g=d.map(c=>{const m=(e.get(c)??[]).filter(M=>(t.get(M)??o)===o+(r?-1:1)).map(f).filter(M=>M!==null);return{id:c,want:m.length>0?se(m):l.get(c)??0}});g.sort((c,m)=>c.want-m.want||(l.get(c.id)??0)-(l.get(m.id)??0)),i.set(o,g.map(c=>c.id))}}},qe=(i,e,t,s)=>{const n=i.map((r,o)=>({id:r,want:t.get(r)??o*100,index:o}));n.sort((r,o)=>r.want-o.want||r.index-o.index);let a=0;for(const r of n){const o=e.get(r.id);o&&(o.y=a,a+=o.spec.height+s)}return{height:Math.max(0,a-s)}},rs=(i,e,t,s,n)=>{const a=[...i.keys()].sort((l,f)=>l-f),r=new Map;for(const l of a)r.set(l,qe(i.get(l)??[],e,new Map,n.nodeSpacing).height);const o=Math.max(0,...r.values());for(const l of a){const f=(o-(r.get(l)??0))/2;for(const g of i.get(l)??[]){const c=e.get(g);c&&(c.y+=f)}}const d=(l,f)=>{const g=(t.get(l)??[]).filter(c=>s.get(c)===f).flatMap(c=>{const m=e.get(c);return m?[m.y+m.spec.height/2]:[]});return g.length>0?se(g):null};for(let l=0;l<n.coordinatePasses;l++){const f=l%2===0;for(const g of f?a:[...a].reverse()){const c=i.get(g)??[],m=new Map;for(const q of c){const A=d(q,g+(f?-1:1)),R=e.get(q);R!==void 0&&m.set(q,A===null?R.y+R.spec.height/2:A)}const M=c.map(q=>e.get(q)?.y??0);qe(c,e,m,n.nodeSpacing);const v=c.map(q=>e.get(q)?.y??0),k=se(M)-se(v);for(const q of c){const A=e.get(q);A&&(A.y+=k)}}}},Ee=(i,e,t)=>{const s=e===void 0?void 0:i.spec.ports?.[e];return s?{x:i.x+s.x,y:i.y+s.y}:t==="out"?{x:i.x+i.spec.width,y:i.y+i.spec.height/2}:{x:i.x,y:i.y+i.spec.height/2}},Ce=(i,e,t)=>{let s=0;const n=[];for(const a of i){const r=t.byId.get(a.from),o=t.byId.get(a.to);if(!r||!o)continue;const d=Ee(r,a.fromPort,"out"),l=Ee(o,a.toPort,"in");if(a.from===a.to){const M=r.x+r.spec.width,v=r.y+r.spec.height,k=Math.max(t.padding/2,v+18);n.push({id:a.id,points:[d,{x:M+20,y:d.y},{x:M+20,y:k},{x:r.x-20,y:k},{x:r.x-20,y:l.y},l]});continue}if(!e.has(a.id)&&(r.layer<o.layer||r.layer===o.layer&&l.x>d.x+12)){if(Math.abs(d.y-l.y)<.5){n.push({id:a.id,points:[d,l]});continue}const v=r.layer<o.layer?Math.max(d.x+14,o.x-Math.max(12,t.layerSpacing/2)):(d.x+l.x)/2;n.push({id:a.id,points:[d,{x:v,y:d.y},{x:v,y:l.y},l]});continue}const f=a.fromPort===void 0?{x:r.x+r.spec.width/2,y:r.y+r.spec.height}:d,g=a.toPort===void 0?{x:o.x+o.spec.width/2,y:o.y+o.spec.height}:l,c=Math.max(f.y,g.y)+18+s*14;s+=1;const m=[d,f,{x:f.x,y:c},{x:g.x,y:c},g,l].filter((M,v,k)=>v===0||M.x!==k[v-1]?.x||M.y!==k[v-1]?.y);n.push({id:a.id,points:m})}return n},De=(i,e,t)=>{const s=e.flatMap(c=>[...c.points]),n=[...i.map(c=>c.x),...i.map(c=>c.x+c.spec.width),...s.map(c=>c.x)],a=[...i.map(c=>c.y),...i.map(c=>c.y+c.spec.height),...s.map(c=>c.y)],r=Math.min(0,...n),o=Math.min(0,...a),d=Math.max(0,...n),l=Math.max(0,...a),f=t-r,g=t-o;return{width:d-r+t*2,height:l-o+t*2,nodes:i.map(c=>({id:c.spec.id,x:c.x+f,y:c.y+g,width:c.spec.width,height:c.spec.height,layer:c.layer,order:c.order})),routes:e.map(c=>({id:c.id,points:c.points.map(m=>({x:m.x+f,y:m.y+g}))}))}},ze=(i,e)=>{const t=new Map(i.map(s=>[s.id,[]]));for(const s of e)s.from!==s.to&&(t.get(s.from)?.push(s.to),t.get(s.to)?.push(s.from));return t},Ae=(i,e,t,s)=>i.map(n=>({spec:n,layer:e.get(n.id)??0,order:t.get(n.id)??0,...s(n)})),is=(i,e)=>{const t=new Map;for(const s of i){const n=e.get(s.id)??0,a=t.get(n);a?a.push(s.id):t.set(n,[s.id])}return t},as=(i,e,t={})=>{const s={...Me,...t};if(i.length===0)return{width:0,height:0,nodes:[],routes:[]};const n=new Set(i.map(v=>v.id)),a=e.filter(v=>n.has(v.from)&&n.has(v.to)),{forward:r,reversed:o}=ts(i,a),d=ss(i,r),l=is(i,d);ns(l,ze(i,a),d,s.sweeps);const f=new Map;for(const v of l.values())v.forEach((k,q)=>f.set(k,q));const g=Ae(i,d,f,()=>({x:0,y:0})),c=new Map(g.map(v=>[v.spec.id,v]));rs(l,c,ze(i,a),d,s);const m=[...l.keys()].sort((v,k)=>v-k);let M=0;for(const v of m){const k=Math.max(...(l.get(v)??[]).map(q=>c.get(q)?.spec.width??0));for(const q of l.get(v)??[]){const A=c.get(q);A&&(A.x=M)}M+=k+s.layerSpacing}return De(g,Ce(a,o,{byId:c,layerSpacing:s.layerSpacing,padding:s.padding}),s.padding)},os=(i,e,t={})=>{const s={...Me,...t};if(i.length===0)return{width:0,height:0,nodes:[],routes:[]};const n=new Set(i.map(d=>d.id)),a=e.filter(d=>n.has(d.from)&&n.has(d.to)),r=Ae(i,new Map,new Map,d=>d.position??{x:0,y:0}),o=new Map(r.map(d=>[d.spec.id,d]));return De(r,Ce(a,new Set,{byId:o,layerSpacing:s.layerSpacing,padding:s.padding}),s.padding)},ds={active:[],match:"single"},G=(i,e)=>e.active.length===0?!0:e.match==="all"?e.active.every(t=>i.includes(t)):e.active.some(t=>i.includes(t)),ls=(i,e)=>i.active.includes(e)?{...i,active:i.active.filter(t=>t!==e)}:i.match==="single"?{...i,active:[e]}:{...i,active:[...i.active,e]},cs=(i,e)=>({match:e,active:e==="single"&&i.active.length>1?i.active.slice(-1):i.active}),ps=i=>({...i,active:[]}),us=i=>{const e=new Map;for(const t of i)for(const s of new Set(t))e.set(s,(e.get(s)??0)+1);return[...e].map(([t,s])=>({tag:t,count:s}))},H={nodes:new Map,edges:new Set},U=(i,e,t,s)=>{const n=new Map,a=new Set,r=[{id:e,depth:0}],o=new Set([e]);for(const d of r)if(!(!s&&d.depth>=1))for(const l of i){const f=t==="outgoing"?l.from:l.to,g=t==="outgoing"?l.to:l.from;f===d.id&&(a.add(l.id),!o.has(g)&&(o.add(g),n.set(g,d.depth+1),r.push({id:g,depth:d.depth+1})))}return{nodes:n,edges:a}},hs=(i,e)=>{const t=new Map(i.map(a=>[a,U(e,a,"outgoing",!0).nodes])),s=new Set,n=[];for(const a of i){if(s.has(a))continue;const r=i.filter(o=>o===a||t.get(a)?.has(o)===!0&&t.get(o)?.has(a)===!0);for(const o of r)s.add(o);(r.length>1||e.some(o=>o.from===a&&o.to===a))&&n.push(r)}return n},ce=i=>new Map(i.flatMap((e,t)=>e.map(s=>[s,t]))),Te=(i,e)=>e.get(i.from)===e.get(i.to)&&e.has(i.from),Le=i=>{try{return i.split("/").map(e=>decodeURIComponent(e))}catch{return null}},Re=(i,e,t,s)=>{const n=e!==null&&e.kind===t&&e.id===i,a=t==="node"?s.nodes.has(i):s.edges.has(i),r=t==="node"?s.nodes.get(i)??null:null;return{selected:n,related:a&&!n,dimmed:e!==null&&!n&&!a,depth:r}},K=(...i)=>i.filter(e=>typeof e=="string"&&e!=="").join(" "),ms=i=>{const e=i[0]??{x:0,y:0},t=i.at(-1)??e;if(i.length<=2)return{x:(e.x+t.x)/2,y:(e.y+t.y)/2};if(i.length===4){const a=i[1]??e,r=i[2]??t;return{x:a.x,y:(a.y+r.y)/2}}const s=i[2]??e,n=i[3]??t;return{x:(s.x+n.x)/2,y:s.y}},gs=(i,e)=>us(i).map(t=>({tag:t.tag,count:t.count,selected:e.active.includes(t.tag)})),fs=(i,e,t)=>`${i} ${t.node} \xB7 ${e} ${t.edge}`,V=[Ot,It,Pt,N`
2
- :host {
3
- display: block;
4
- container-type: inline-size;
5
- }
6
-
7
- .diagram {
8
- display: flex;
9
- flex-direction: column;
10
- /* The sizing knob: the shell may be resized vertically, and the canvas
11
- takes whatever is left of it. */
12
- height: var(--diagram-height, 560px);
13
- min-height: 260px;
14
- border: 1px solid var(--dpk-rule);
15
- border-radius: var(--dpk-radius-lg);
16
- background: var(--dpk-paper-raised);
17
- overflow: hidden;
18
- resize: vertical;
19
- }
20
-
21
- /*
22
- * Maximized: the shell covers the viewport. It is also a manual popover in
23
- * the top layer, so the UA popover box (fit-content, margin, border,
24
- * padding) is reset here. A vertical resize leaves an inline height behind,
25
- * which only !important overrides.
26
- */
27
- .diagram.is-maximized {
28
- position: fixed;
29
- inset: 0;
30
- z-index: 2147483000;
31
- width: auto !important;
32
- height: auto !important;
33
- max-width: none;
34
- max-height: none;
35
- margin: 0;
36
- padding: 0;
37
- border: 0;
38
- border-radius: 0;
39
- color: var(--dpk-ink);
40
- resize: none;
41
- }
42
-
43
- .diagram-maximize {
44
- flex-shrink: 0;
45
- }
46
-
47
- .diagram-toolbar {
48
- display: flex;
49
- align-items: center;
50
- gap: 10px;
51
- flex-wrap: wrap;
52
- min-height: 42px;
53
- padding: 7px 12px;
54
- border-bottom: 1px solid var(--dpk-rule);
55
- background: linear-gradient(180deg, var(--dpk-paper-raised), var(--dpk-paper));
56
- flex-shrink: 0;
57
- }
58
-
59
- .diagram-title {
60
- font-size: 12.5px;
61
- font-weight: 620;
62
- letter-spacing: -0.01em;
63
- }
64
-
65
- .diagram-subject {
66
- font-size: 10px;
67
- color: var(--dpk-ink-faint);
68
- padding-left: 10px;
69
- border-left: 1px solid var(--dpk-rule-strong);
70
- }
71
-
72
- .diagram-toolbar-actions {
73
- display: flex;
74
- align-items: center;
75
- gap: 5px;
76
- margin-left: auto;
77
- flex-wrap: wrap;
78
- }
79
-
80
- .diagram-stats {
81
- font-family: var(--dpk-mono);
82
- font-size: 10px;
83
- color: var(--dpk-ink-faint);
84
- font-variant-numeric: tabular-nums;
85
- white-space: nowrap;
86
- }
87
-
88
- .diagram-tags {
89
- display: flex;
90
- align-items: center;
91
- gap: 4px;
92
- flex-wrap: wrap;
93
- padding: 6px 12px;
94
- border-bottom: 1px solid var(--dpk-rule);
95
- background: var(--dpk-paper);
96
- flex-shrink: 0;
97
- }
98
-
99
- .diagram-match {
100
- display: flex;
101
- gap: 1px;
102
- padding: 2px;
103
- margin-right: 5px;
104
- border: 1px solid var(--dpk-rule-strong);
105
- border-radius: var(--dpk-radius-xs);
106
- }
107
-
108
- .diagram-match button {
109
- border: 0;
110
- border-radius: 3px;
111
- padding: 3px 6px;
112
- background: transparent;
113
- color: var(--dpk-ink-faint);
114
- font-size: 9.5px;
115
- cursor: pointer;
116
- }
117
-
118
- .diagram-match button[aria-pressed='true'] {
119
- background: var(--dpk-blue-soft);
120
- color: var(--dpk-blue);
121
- font-weight: 650;
122
- }
123
-
124
- .dpk-tag {
125
- display: inline-flex;
126
- align-items: center;
127
- gap: 5px;
128
- padding: 4px 8px;
129
- border: 1px solid transparent;
130
- border-radius: var(--dpk-radius-xs);
131
- background: var(--dpk-paper-inset);
132
- color: var(--dpk-ink-soft);
133
- font-size: 10.5px;
134
- cursor: pointer;
135
- }
136
-
137
- .dpk-tag:hover {
138
- background: var(--dpk-paper-sunken);
139
- color: var(--dpk-ink);
140
- }
141
-
142
- .dpk-tag[aria-pressed='true'] {
143
- border-color: color-mix(in srgb, var(--dpk-blue) 40%, transparent);
144
- background: var(--dpk-blue-soft);
145
- color: var(--dpk-blue);
146
- font-weight: 600;
147
- }
148
-
149
- .dpk-tag-count {
150
- font-family: var(--dpk-mono);
151
- font-size: 9px;
152
- opacity: 0.7;
153
- font-variant-numeric: tabular-nums;
154
- }
155
-
156
- .dpk-tag-clear {
157
- border: 0;
158
- background: none;
159
- padding: 4px 6px;
160
- color: var(--dpk-ink-faint);
161
- font-size: 10px;
162
- cursor: pointer;
163
- }
164
-
165
- .diagram-canvas {
166
- position: relative;
167
- flex: 1;
168
- min-height: 220px;
169
- overflow: hidden;
170
- touch-action: none;
171
- cursor: grab;
172
- background-color: var(--dpk-paper-raised);
173
- background-image: radial-gradient(var(--dpk-rule-strong) 0.7px, transparent 0.7px);
174
- background-size: 22px 22px;
175
- }
176
-
177
- .diagram-canvas:focus-visible {
178
- outline: none;
179
- box-shadow: inset var(--dpk-focus);
180
- }
181
-
182
- .diagram-canvas.is-panning {
183
- cursor: grabbing;
184
- }
185
-
186
- .diagram-world {
187
- position: absolute;
188
- inset: 0 auto auto 0;
189
- transform-origin: 0 0;
190
- }
191
-
192
- .diagram-edges {
193
- position: absolute;
194
- inset: 0;
195
- overflow: visible;
196
- pointer-events: none;
197
- }
198
-
199
- .diagram-zoom {
200
- position: absolute;
201
- right: 12px;
202
- bottom: 12px;
203
- display: flex;
204
- overflow: hidden;
205
- border: 1px solid var(--dpk-rule-strong);
206
- border-radius: var(--dpk-radius-sm);
207
- background: var(--dpk-paper-raised);
208
- box-shadow: var(--dpk-shadow-sm);
209
- }
210
-
211
- .diagram-zoom button {
212
- border: 0;
213
- border-radius: 0;
214
- padding: 6px 9px;
215
- background: transparent;
216
- font-size: 10.5px;
217
- cursor: pointer;
218
- }
219
-
220
- .diagram-zoom button:hover {
221
- background: var(--dpk-paper-sunken);
222
- }
223
-
224
- .diagram-legend {
225
- position: absolute;
226
- left: 12px;
227
- bottom: 14px;
228
- display: flex;
229
- gap: 12px;
230
- flex-wrap: wrap;
231
- max-width: calc(100% - 150px);
232
- padding: 3px 6px;
233
- border-radius: var(--dpk-radius-xs);
234
- background: color-mix(in srgb, var(--dpk-paper-raised) 88%, transparent);
235
- font-size: 9.5px;
236
- color: var(--dpk-ink-faint);
237
- }
238
-
239
- .diagram-legend span {
240
- display: inline-flex;
241
- align-items: center;
242
- gap: 5px;
243
- }
244
-
245
- .diagram-legend i {
246
- width: 16px;
247
- border-top: 1.6px solid var(--dpk-rule-strong);
248
- }
249
-
250
- .diagram-empty,
251
- .diagram-notice {
252
- position: absolute;
253
- left: 50%;
254
- top: 50%;
255
- transform: translate(-50%, -50%);
256
- margin: 0;
257
- font-size: 12px;
258
- color: var(--dpk-ink-faint);
259
- text-align: center;
260
- pointer-events: none;
261
- }
262
-
263
- .diagram-notice {
264
- pointer-events: auto;
265
- padding: 12px 16px;
266
- border: 1px solid var(--dpk-rule-strong);
267
- border-radius: var(--dpk-radius);
268
- background: var(--dpk-paper-raised);
269
- box-shadow: var(--dpk-shadow-sm);
270
- color: var(--dpk-ink-soft);
271
- }
272
-
273
- .diagram-notice p {
274
- margin: 0 0 9px;
275
- }
276
-
277
- /*
278
- * Contextual comments: an icon per element, revealed while the element that
279
- * contains it (or the element just before it) is hovered, focused or
280
- * selected, and always on touch devices. It opens the composer beside it.
281
- */
282
- .diagram-comment-trigger {
283
- display: grid;
284
- place-items: center;
285
- width: 28px;
286
- height: 28px;
287
- padding: 5px;
288
- border: 1px solid var(--dpk-rule-strong);
289
- border-radius: var(--dpk-radius-sm);
290
- background: var(--dpk-paper-raised);
291
- color: var(--dpk-ink-soft);
292
- box-shadow: var(--dpk-shadow-xs);
293
- cursor: pointer;
294
- opacity: 0;
295
- pointer-events: none;
296
- transition: opacity 120ms ease;
297
- }
298
-
299
- .diagram-comment-trigger.is-placed {
300
- position: absolute;
301
- z-index: 2;
302
- }
303
-
304
- .diagram-comment-trigger svg {
305
- width: 16px;
306
- height: 16px;
307
- }
308
-
309
- .diagram-edge-comment {
310
- overflow: visible;
311
- }
312
-
313
- .diagram-edge-comment .diagram-comment-trigger {
314
- margin: 2px;
315
- }
316
-
317
- :is(.d-node, .d-edge):is(:hover, :focus-within, .is-selected) .diagram-comment-trigger,
318
- :is(:hover, :focus-visible, .is-selected) + .diagram-comment-trigger,
319
- .diagram-comment-trigger:is(:hover, :focus-visible, [aria-expanded='true']) {
320
- opacity: 1;
321
- pointer-events: auto;
322
- }
323
-
324
- .diagram-comment-trigger:hover,
325
- .diagram-comment-trigger:focus-visible {
326
- color: var(--dpk-accent);
327
- border-color: var(--dpk-accent);
328
- }
329
-
330
- @media (hover: none) {
331
- .diagram-comment-trigger {
332
- opacity: 1;
333
- pointer-events: auto;
334
- }
335
- }
336
-
337
- .comment-target {
338
- font-size: 12px;
339
- overflow-wrap: anywhere;
340
- }
341
-
342
- .comment-error {
343
- margin: 0;
344
- font-size: 11px;
345
- color: var(--dpk-accent);
346
- }
347
-
348
- /* Element state, shared by every diagram so highlighting reads the same. */
349
- .d-node {
350
- position: absolute;
351
- cursor: pointer;
352
- transition:
353
- opacity 150ms ease,
354
- border-color 150ms ease,
355
- box-shadow 150ms ease;
356
- }
357
-
358
- .d-node.is-dimmed,
359
- .d-edge.is-dimmed {
360
- opacity: 0.26;
361
- }
362
-
363
- .d-edge {
364
- outline: none;
365
- cursor: pointer;
366
- }
367
-
368
- .d-edge-hit {
369
- fill: none;
370
- stroke: transparent;
371
- stroke-width: 16;
372
- pointer-events: stroke;
373
- cursor: pointer;
374
- }
375
-
376
- .d-edge-path {
377
- fill: none;
378
- stroke: var(--dpk-rule-strong);
379
- stroke-width: 1.5;
380
- stroke-linejoin: round;
381
- }
382
-
383
- .d-edge.is-selected .d-edge-path,
384
- .d-edge:focus-visible .d-edge-path {
385
- stroke: var(--dpk-ink);
386
- stroke-width: 2.4;
387
- }
388
-
389
- .d-edge:focus-visible .d-edge-hit {
390
- stroke: var(--dpk-blue-soft);
391
- }
392
-
393
- .d-edge-label {
394
- font-size: 9.5px;
395
- fill: var(--dpk-ink-faint);
396
- paint-order: stroke;
397
- stroke: var(--dpk-paper-raised);
398
- stroke-width: 5px;
399
- stroke-linejoin: round;
400
- }
401
-
402
- .d-edge-label.is-dimmed {
403
- opacity: 0.3;
404
- }
405
-
406
- @media (max-width: 700px) {
407
- .diagram-subject {
408
- display: none;
409
- }
410
- }
411
- `],J=i=>i.map((e,t)=>`${t===0?"M":"L"}${e.x} ${e.y}`).join(" "),Oe=i=>I`
412
- <defs>
413
- ${i.map(e=>I`
414
- <marker
415
- id=${e.id}
416
- viewBox="0 0 10 10"
417
- refX="9"
418
- refY="5"
419
- markerWidth="7"
420
- markerHeight="7"
421
- orient="auto-start-reverse"
422
- >
423
- <path
424
- class="diagram-arrow"
425
- d=${e.open===!0?"M1 1 L9 5 L1 9":"M1 1 L9 5 L1 9 Z"}
426
- fill=${e.open===!0||e.color===void 0?w:e.color}
427
- stroke=${e.color??w}
428
- stroke-width="1.3"
429
- ></path>
430
- </marker>
431
- `)}
432
- </defs>
433
- `,bs=(i,e,t)=>h`
434
- <div class="diagram-tags" role="group" aria-label="タグの絞り込み">
435
- <div class="diagram-match" role="group" aria-label="タグの一致条件">
436
- ${[["single","Single"],["all","AND"],["any","OR"]].map(([s,n])=>h`
437
- <button
438
- type="button"
439
- data-match=${s}
440
- aria-pressed=${e===s?"true":"false"}
441
- @click=${()=>t({kind:"match",match:s})}
442
- >
443
- ${n}
444
- </button>
445
- `)}
446
- </div>
447
- ${ae(i,s=>s.tag,s=>h`
448
- <button
449
- type="button"
450
- class="dpk-tag"
451
- data-tag=${s.tag}
452
- aria-pressed=${s.selected?"true":"false"}
453
- @click=${()=>t({kind:"tag",tag:s.tag})}
454
- >
455
- ${s.tag}<span class="dpk-tag-count">${s.count}</span>
456
- </button>
457
- `)}
458
- ${i.some(s=>s.selected)?h`<button type="button" class="dpk-tag-clear" @click=${()=>t({kind:"clear-tags"})}>解除</button>`:w}
459
- </div>
460
- `,ks=i=>h`
461
- <div class="diagram-zoom">
462
- <button
463
- type="button"
464
- aria-label="縮小"
465
- @click=${e=>{e.stopPropagation(),i?.({kind:"zoom",factor:1/1.1})}}
466
- >
467
- −
468
- </button>
469
- <button
470
- type="button"
471
- class="diagram-zoom-value"
472
- title="全体を表示"
473
- aria-label="全体を表示"
474
- @click=${()=>i?.({kind:"fit"})}
475
- >
476
- 100%
477
- </button>
478
- <button
479
- type="button"
480
- aria-label="拡大"
481
- @click=${e=>{e.stopPropagation(),i?.({kind:"zoom",factor:1.1})}}
482
- >
483
- +
484
- </button>
485
- </div>
486
- `,pe=.08,xs=1.8,vs=i=>{if(i.length===0)return{x:0,y:0,width:0,height:0};const e=Math.min(...i.map(a=>a.x)),t=Math.min(...i.map(a=>a.y)),s=Math.max(...i.map(a=>a.x+a.width))-e,n=Math.max(...i.map(a=>a.y+a.height))-t;return{x:e-s*.1,y:t-n*.1,width:s*1.2,height:n*1.2}},ue=(i,e)=>i+e/12,he=16,Ie=(i,e,t,s,n="center")=>{if(e.width===0||e.height===0)return{...i,x:0,y:0};const a=(r,o,d,l)=>{const f=d*i.scale;return f<=l?n==="start"?he-ue(o,d)*i.scale:(l-f)/2-o*i.scale:Math.min(-o*i.scale,Math.max(l-(o+d)*i.scale,r))};return{...i,x:a(i.x,e.x,e.width,t),y:a(i.y,e.y,e.height,s)}},ys=(i,e,t,s,n,a,r="center")=>{const o=Ie({...i,x:i.x-n,y:i.y-a},e,t,s,r);return Math.abs(a)>Math.abs(n)&&o.y===i.y?null:o},Pe='button,[role="button"],a,input,textarea,select',ws=i=>{const{canvas:e,world:t,onClearSelection:s,onView:n,align:a="center"}=i;let r={x:0,y:0,width:0,height:0},o={x:0,y:0,scale:1};const d=()=>({width:e.clientWidth||1e3,height:e.clientHeight||560}),l=()=>{const{width:u,height:y}=d();o=Ie(o,r,u,y,a),t.style.transform=`translate(${o.x}px, ${o.y}px) scale(${o.scale})`,n?.(o)},f=()=>{const{width:u,height:y}=d(),E=r.width/1.2||1,L=r.height/1.2||1;o={...o,scale:te(Math.min((u-24)/E,(y-40)/L),pe,1)},o={...o,x:(u-r.width*o.scale)/2-r.x*o.scale,y:(y-r.height*o.scale)/2-r.y*o.scale},l()},g=()=>{const{width:u}=d(),y=r.width/1.2||1,E=te((u-24)/y,pe,1);o={scale:E,x:(u-r.width*E)/2-r.x*E,y:16},l()},c=()=>{o={scale:1,x:he-ue(r.x,r.width),y:he-ue(r.y,r.height)},l()},m=(u,y=d().width/2,E=d().height/2)=>{const L=o.scale,O=te(L*u,pe,xs);O!==L&&(o={scale:O,x:y-(y-o.x)*O/L,y:E-(E-o.y)*O/L},l())},M=u=>{if(u.target instanceof Element&&u.target.closest(".diagram-zoom"))return;const y=u.deltaMode===1?16:u.deltaMode===2?d().height:1;if(u.ctrlKey||u.metaKey){u.preventDefault();const Y=e.getBoundingClientRect();m(Math.exp(-te(u.deltaY*y,-60,60)*.0012),u.clientX-Y.left,u.clientY-Y.top);return}const{width:E,height:L}=d(),O=ys(o,r,E,L,u.deltaX*y,u.deltaY*y,a);O!==null&&(u.preventDefault(),o=O,l())},v=new Map;let k=null,q=!1;const A=()=>{const u=[...v.values()],y=u[0];if(!y)return null;const E=u[1];return E?{x:(y.x+E.x)/2,y:(y.y+E.y)/2,distance:Math.hypot(E.x-y.x,E.y-y.y)}:{...y,distance:0}},R=u=>{v.size===0&&(q=!1);const E=(u.target instanceof Element?u.target:null)?.closest(Pe)??null;u.button!==0||u.pointerType!=="touch"&&E!==null||(v.set(u.pointerId,{x:u.clientX,y:u.clientY}),k=A(),E===null&&e.setPointerCapture(u.pointerId))},P=u=>{if(!v.has(u.pointerId)||k===null)return;v.set(u.pointerId,{x:u.clientX,y:u.clientY});const y=A();if(y===null)return;const E=y.x-k.x,L=y.y-k.y;if((Math.abs(E)+Math.abs(L)>1||Math.abs(y.distance-k.distance)>1)&&(q=!0),y.distance>0&&k.distance>0){const O=e.getBoundingClientRect();m(Math.pow(y.distance/k.distance,.45),k.x-O.left,k.y-O.top)}o={...o,x:o.x+E,y:o.y+L},l(),k=y,e.classList.toggle("is-panning",q)},_=u=>{v.delete(u.pointerId),k=A(),!(v.size>0)&&(e.classList.remove("is-panning"),u.type==="pointercancel"&&(q=!1))},ee=u=>{q&&(u.preventDefault(),u.stopPropagation()),_(u)},x=u=>{if(q){u.preventDefault(),u.stopPropagation(),q=!1;return}const y=u.target instanceof Element?u.target:null;y===null||y.closest(Pe)!==null||s()},D=u=>{if(u.target!==e)return;const y=30;if(u.key==="+"||u.key==="=")m(1.1);else if(u.key==="-")m(1/1.1);else if(u.key==="0")f();else if(u.key==="Escape")s();else if(u.key==="ArrowLeft"||u.key==="ArrowRight"||u.key==="ArrowUp"||u.key==="ArrowDown")o={...o,x:o.x+(u.key==="ArrowLeft"?y:u.key==="ArrowRight"?-y:0),y:o.y+(u.key==="ArrowUp"?y:u.key==="ArrowDown"?-y:0)},l();else return;u.preventDefault()},T=u=>{const y=u.target instanceof HTMLElement?u.target:null;if(y===null||!t.contains(y))return;const E=y.getBoundingClientRect(),L=e.getBoundingClientRect();let O=0,Y=0;E.left<L.left+12?O=L.left+12-E.left:E.right>L.right-12&&(O=L.right-12-E.right),E.top<L.top+12?Y=L.top+12-E.top:E.bottom>L.bottom-40&&(Y=L.bottom-40-E.bottom),!(O===0&&Y===0)&&(o={...o,x:o.x+O,y:o.y+Y},l())};e.addEventListener("wheel",M,{passive:!1}),e.addEventListener("pointerdown",R),e.addEventListener("pointermove",P),e.addEventListener("pointerup",ee),e.addEventListener("pointercancel",_),e.addEventListener("lostpointercapture",_),e.addEventListener("click",x,!0),e.addEventListener("keydown",D),e.addEventListener("focusin",T);const j=typeof ResizeObserver>"u"?null:new ResizeObserver(()=>l());return j?.observe(e),{setContent(u){r=vs(u.width===0&&u.height===0?[]:[u]),t.style.width=`${u.width}px`,t.style.height=`${u.height}px`,l()},apply:l,fit:f,fitWidth:g,reset:c,zoom:m,view:()=>({...o}),destroy(){j?.disconnect(),e.removeEventListener("wheel",M),e.removeEventListener("pointerdown",R),e.removeEventListener("pointermove",P),e.removeEventListener("pointerup",ee),e.removeEventListener("pointercancel",_),e.removeEventListener("lostpointercapture",_),e.removeEventListener("click",x,!0),e.removeEventListener("keydown",D),e.removeEventListener("focusin",T)}}};class me extends Ut{static{this.styles=V}static{this.properties={data:{attribute:!1},id:{type:String,reflect:!0},heading:{type:String},subject:{type:String}}}#e=null;#s=null;#n=[];#t=[];#r=null;#i=ds;#a=null;#o=null;#l=null;#c=null;#h=-1;#p="";#d=null;#b=null;#u=new Map;#m=null;#g=new Map;#f=null;#x=new Xt(this);constructor(){super(),this.id=this.getAttribute("id")??"",this.data=null,this.heading=null,this.subject=null}connectedCallback(){super.connectedCallback(),this.#p="",this.requestUpdate(),this.#c=es(this,e=>this.parseData(e),e=>{e.ok?this.#S(e.value):this.#T(e.error)})}disconnectedCallback(){super.disconnectedCallback(),this.#c?.(),this.#c=null,this.#o?.destroy(),this.#o=null,this.#l=null}willUpdate(e){e.has("data")&&this.data!==null&&this.#S(this.data)}updated(){this.#y(),this.#v(),this.#E(),this.#C()}#v(){const e=this.renderRoot.querySelector(".diagram");if(!(this.#f===null||!e||typeof e.showPopover!="function")&&!e.matches(":popover-open"))try{e.showPopover()}catch{}}#y(){const e=JSON.stringify([this.commentTargets,this.#t]);e!==this.#p&&(this.#p=e,this.dispatchEvent(new CustomEvent("dpk-comment-targets-change",{bubbles:!0,composed:!0})))}#E(){this.#l=this.renderRoot.querySelector(".diagram-zoom-value");const e=this.renderRoot.querySelector(".diagram-canvas"),t=this.renderRoot.querySelector(".diagram-world");if(!e||!t)return;this.#o??=ws({canvas:e,world:t,align:this.viewAlign(),onClearSelection:()=>this.#k(null),onView:a=>{this.#l&&(this.#l.textContent=`${Math.round(a.scale*100)}%`),this.dispatchEvent(new CustomEvent("dpk-diagram-view",{detail:{view:a},bubbles:!0,composed:!0})),this.onViewChange(a)}});const s=this.contentSize();if(s===null){this.#o.apply();return}this.#o.setContent({x:0,y:0,width:s.width,height:s.height});const n=this.layoutVersion();n!==this.#h&&(this.#h=n,this.initialView())}#C(){const e=this.#b!==this.#d;this.#b=this.#d;const t=this.renderRoot.querySelector(".comment-pop"),s=this.#M();!t||!s||(this.#x.open(t,s,{width:300,height:280},{placement:"right-start",trackTransform:!0}),e&&t.querySelector("textarea")?.focus({preventScroll:!0}))}get commentTargets(){if(!this.id||this.#r!==null)return[];const e=`${this.subject??this.heading??this.defaultHeading()} \xB7 ${this.id}`;return this.commentItems().map(t=>({...t,group:e}))}commentItems(){return[]}commentRef(e,...t){return`element:${[this.id,e,...t].map(s=>encodeURIComponent(s)).join("/")}`}requestElementComment(e,...t){const s=this.commentRef(e,...t);this.commentTargets.some(n=>n.value===s)&&this.dispatchEvent(new CustomEvent("dpk-comment-request",{detail:{target:s},bubbles:!0,composed:!0}))}get elementActions(){return this.#n}set elementActions(e){this.#n=e,this.#w()}get elementActionResults(){return this.#t}reduceElementActions(e,t){return{data:e,results:t.map(s=>({id:s.id,title:s.type,stale:"unsupported-action-type"}))}}dispatchElementAction(e,t,s){const n=new CustomEvent("dpk-element-action",{detail:{type:e,target:this.commentRef(...t),payload:s},bubbles:!0,composed:!0,cancelable:!0});return this.dispatchEvent(n),n.defaultPrevented}get selection(){return this.#a}select(e){this.#k(e)}get tagFilter(){return this.#i}set tagFilter(e){this.#i=e,this.requestUpdate()}get dataError(){return this.#r}resetView(){this.fitViewport()}#$(e){if(e===(this.#f!==null))return;const t=this.renderRoot.querySelector(".diagram");this.#f=e?{height:t?.offsetHeight??0}:null,this.#d=null,this.requestUpdate()}#D={handleEvent:e=>e.preventDefault(),passive:!1};#z={handleEvent:e=>{e.key!=="Escape"||this.#a!==null||(e.preventDefault(),this.#$(!1))},capture:!0};renderSelection(){const e=this.#d,t=e===null?void 0:this.#g.get(e);if(e===null||t===void 0)return w;const s=Jt(this.#u.get(e)??"",[],{label:t,...this.#m===e?{error:"\u9001\u4FE1\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\u3002\u3082\u3046\u4E00\u5EA6\u304A\u8A66\u3057\u304F\u3060\u3055\u3044\u3002"}:{}});return h`${Kt(e,Zt(s,n=>this.#A(e,n)))}`}renderCommentTrigger(e,t,s){if(!this.id)return w;const n=this.commentRef(e.kind,e.id);return this.#g.set(n,t),h`<button
487
- type="button"
488
- class=${K("diagram-comment-trigger",s&&"is-placed")}
489
- style=${s?`left:${s.x}px; top:${s.y}px`:w}
490
- data-comment-kind=${e.kind}
491
- data-comment-id=${e.id}
492
- aria-label=${`${t}\u306B\u30B3\u30E1\u30F3\u30C8`}
493
- title=${`${t}\u306B\u30B3\u30E1\u30F3\u30C8`}
494
- aria-haspopup="dialog"
495
- aria-expanded=${this.#d===n?"true":"false"}
496
- @click=${()=>{this.#k(e),this.#d=n,this.requestUpdate()}}
497
- >
498
- ${_t()}
499
- </button>`}renderEdgeCommentTrigger(e,t,s){const n=Math.floor((s.length-1)/2),a=s[n],r=s[n+1]??a;return!this.id||!a||!r?w:I`<foreignObject
500
- class="diagram-edge-comment"
501
- x=${(a.x+r.x)/2-16}
502
- y=${(a.y+r.y)/2-16}
503
- width="32"
504
- height="32"
505
- >${this.renderCommentTrigger(e,t)}</foreignObject>`}layoutVersion(){return 0}fitViewport(){this.viewport?.fit()}initialView(){this.viewport?.reset()}viewAlign(){return"center"}questionsOf(e){const t=e.questions?.trim();return t===void 0||t===""?w:t}onViewChange(e){}statsText(){return""}tagItems(){return[]}isEmpty(){return this.contentSize()===null}shellClass(){return""}defaultHeading(){return""}defaultSubject(){return""}emptyMessage(){return"\u8A72\u5F53\u3059\u308B\u8981\u7D20\u306F\u3042\u308A\u307E\u305B\u3093\u3002"}renderToolbarActions(){return w}renderLegend(){return w}renderAboveCanvas(){return w}get viewport(){return this.#o}items(){return this.#s??this.emptyData()}authoredItems(){return this.#e??this.emptyData()}elementClass(e,...t){return K(...t,e.selected&&"is-selected",e.related&&"is-related",e.dimmed&&"is-dimmed")}#S(e){this.#r=null,this.#e=e,this.#w()}#w(){if(this.#e===null){this.#t=this.#n.map(t=>({id:t.id,title:t.type,stale:"target-missing"})),this.requestUpdate();return}const e=this.reduceElementActions(this.#e,this.#n);this.#s=e.data,this.#t=e.results,this.#a!==null&&(this.hasSelection(this.#a)||(this.#a=null,this.#d=null)),this.requestUpdate()}#M(){const e=this.#a;return e?[...this.renderRoot.querySelectorAll("[data-comment-kind]")].find(t=>t.dataset.commentKind===e.kind&&t.dataset.commentId===e.id)??null:null}#A(e,t){if(t.kind==="input"){this.#u=new Map(this.#u).set(e,t.body),this.#m=null,this.requestUpdate();return}if(t.kind==="comment"){if(!!this.dispatchEvent(new CustomEvent("dpk-comment-submit",{detail:{target:e,body:t.body},bubbles:!0,composed:!0,cancelable:!0}))){this.#m=e,this.requestUpdate();return}const a=new Map(this.#u);a.delete(e),this.#u=a}this.#m=null;const s=this.#M();this.#k(null),s?.focus({preventScroll:!0})}#T(e){this.#r=e,this.#e=null,this.#s=null,this.#w(),console.error("[dev-process-kit] invalid diagram data:",e),this.requestUpdate()}hasSelection(e){return!0}#k(e){(e===null?this.#a===null:this.#a!==null&&this.#a.kind===e.kind&&this.#a.id===e.id)||(this.#a=e,this.#d=null,this.dispatchEvent(new CustomEvent("dpk-diagram-select",{detail:{selection:e},bubbles:!0,composed:!0})),this.requestUpdate())}#q=e=>{switch(e.kind){case"tag":this.#i=ls(this.#i,e.tag),this.requestUpdate();return;case"match":this.#i=cs(this.#i,e.match),this.requestUpdate();return;case"clear-tags":this.#i=ps(this.#i),this.requestUpdate();return;case"select":this.#k(e.selection);return;case"zoom":this.#o?.zoom(e.factor);return;case"fit":this.fitViewport();return;default:return}};refreshContent(){}render(){this.#g=new Map,this.refreshContent();const e=gs(this.tagItems(),this.#i),t=this.#f,s=t===null?"\u6700\u5927\u5316":"\u5143\u306E\u30B5\u30A4\u30BA\u306B\u623B\u3059";return h`
506
- ${t===null?w:h`<div class="diagram-placeholder" style="height:${t.height}px"></div>`}
507
- <div
508
- class=${K("diagram",this.shellClass(),t!==null&&"is-maximized")}
509
- popover=${t===null?w:"manual"}
510
- @wheel=${t===null?w:this.#D}
511
- @keydown=${t===null?w:this.#z}
512
- >
513
- <div class="diagram-toolbar">
514
- <span class="diagram-title">${this.heading??this.defaultHeading()}</span>
515
- ${(this.subject??this.defaultSubject())===""?w:h`<span class="diagram-subject">${this.subject??this.defaultSubject()}</span>`}
516
- <div class="diagram-toolbar-actions">
517
- ${this.renderToolbarActions()}
518
- <span class="diagram-stats">${this.statsText()}</span>
519
- <button
520
- type="button"
521
- class="dpk-icon-btn diagram-maximize"
522
- aria-label=${s}
523
- title=${s}
524
- aria-pressed=${t===null?"false":"true"}
525
- @click=${()=>this.#$(t===null)}
526
- >
527
- ${t===null?jt():Ft()}
528
- </button>
529
- </div>
530
- </div>
531
- ${bs(e,this.#i.match,this.#q)} ${this.renderAboveCanvas()}
532
- <div
533
- class="diagram-canvas"
534
- tabindex="0"
535
- aria-label="図。矢印キーでパン、プラス・マイナスでズーム、0で全体表示。"
536
- >
537
- <div class="diagram-world">${this.renderCanvas()}</div>
538
- ${this.isEmpty()?h`<p class="diagram-empty">${this.emptyMessage()}</p>`:w}
539
- ${this.#r===null?w:h`<p class="diagram-notice" role="alert">
540
- 図のデータを読み込めませんでした。<br />${this.#r}
541
- </p>`}
542
- ${this.renderLegend()} ${ks(this.#q)}
543
- </div>
544
- ${this.renderSelection()}
545
- </div>
546
- `}}class Z extends me{#e=null;#s="";#n=0;#t=H;commentItems(){const e=this.items();return[...e.nodes.map(t=>({value:this.commentRef("node",t.id),label:t.id})),...e.edges.map(t=>({value:this.commentRef("edge",t.id),label:`${t.from} \u2192 ${t.to} (${t.id})`}))]}get visible(){const e=this.filtered();return{nodes:e.nodes,edges:e.edges}}get layout(){return this.#e}get layoutMode(){return"layered"}get tagDimension(){return"node"}layoutOptions(){return{}}matchesFilter(e){return!0}layoutSignature(){return""}statsLabels(){return{node:"\u8981\u7D20",edge:"\u95A2\u9023"}}statsText(){const e=this.filtered();return fs(e.nodes.length,e.edges.length,this.statsLabels())}tagItems(){const e=this.items();return(this.tagDimension==="edge"?e.edges:e.nodes).map(t=>t.tags)}contentSize(){const e=this.#e;return e===null||e.nodes.length===0?null:{width:e.width,height:e.height}}layoutVersion(){return this.#n}hasSelection(e){const t=this.items();return e.kind==="node"?t.nodes.some(s=>s.id===e.id):t.edges.some(s=>s.id===e.id)}placedNode(e){return this.#e?.nodes.find(t=>t.id===e)}routeOf(e){return this.#e?.routes.find(t=>t.id===e)?.points??[]}nodeState(e){return Re(e,this.selection,"node",this.#t)}edgeState(e){return Re(e,this.selection,"edge",this.#t)}renderEdges(e,t){const s=this.#e?.width??0,n=this.#e?.height??0;return h`<svg class="diagram-edges" width=${s} height=${n}>
547
- ${Oe(t)}${e}
548
- </svg>`}filtered(){const e=this.items();if(this.tagDimension==="edge"){const n=e.edges.filter(r=>G(r.tags,this.tagFilter)&&this.matchesFilter(r)),a=new Set(n.flatMap(r=>[r.from,r.to]));return{...e,edges:n,nodes:e.nodes.filter(r=>a.has(r.id))}}const t=e.nodes.filter(n=>G(n.tags,this.tagFilter)&&this.matchesFilter(n)),s=new Set(t.map(n=>n.id));return{...e,nodes:t,edges:e.edges.filter(n=>s.has(n.from)&&s.has(n.to))}}refreshContent(){const e=this.filtered(),t=[this.layoutMode,e.nodes.map(s=>`${s.id}:${s.width}x${s.height}`).join(","),e.edges.map(s=>`${s.id}:${s.from}>${s.to}`).join(","),this.layoutSignature()].join("|");t!==this.#s&&(this.#s=t,this.#n+=1,this.#e=this.computePlacement(e)),this.#t=this.relations(this.selection,e)}computePlacement(e){const t=e.nodes.map(a=>({id:a.id,width:a.width,height:a.height,...a.ports===void 0?{}:{ports:a.ports},...a.position===void 0?{}:{position:a.position}})),s=e.edges.map(a=>({id:a.id,from:a.from,to:a.to,...a.fromPort===void 0?{}:{fromPort:a.fromPort},...a.toPort===void 0?{}:{toPort:a.toPort}})),n=this.layoutOptions();return this.layoutMode==="fixed"?os(t,s,n):as(t,s,n)}}const $s=C({x:X(),y:X()}),Ss=C({id:$(p(),S(1)),name:$(p(),S(1)),code:b(p()),kind:b(F(["normal","initial","terminal","compensation"]),"normal"),description:b(p()),position:b($s),questions:b(p())}),Ms=C({id:$(p(),S(1)),from:$(p(),S(1)),to:$(p(),S(1)),title:$(p(),S(1)),kind:b(F(["normal","exception"]),"normal"),tags:b(z(p()),[]),guard:b(p()),effect:b(p()),questions:b(p())}),Ue={width:178,height:86},qs=()=>({nodes:[],edges:[]}),Es=C({states:z(Ss),transitions:b(z(Ms),[])}),_e=i=>{const e=B(Es,i),t=new Set;for(const r of e.states){if(t.has(r.id))throw new Error(`duplicate state id: ${r.id}`);t.add(r.id)}const s=new Set,n=e.transitions.map(r=>{if(s.has(r.id))throw new Error(`duplicate transition id: ${r.id}`);if(s.add(r.id),!t.has(r.from))throw new Error(`unknown transition source: ${r.from}`);if(!t.has(r.to))throw new Error(`unknown transition target: ${r.to}`);return{id:r.id,from:r.from,to:r.to,title:r.title,kind:r.kind,tags:r.tags,guard:r.guard??null,effect:r.effect??null,...r.questions===void 0?{}:{questions:r.questions}}});return{nodes:e.states.map(r=>({id:r.id,name:r.name,code:r.code??null,kind:r.kind,description:r.description??null,width:Ue.width,height:Ue.height,tags:[],...r.position===void 0?{}:{position:r.position},...r.questions===void 0?{}:{questions:r.questions}})),edges:n}},Cs=i=>i.length>0&&i.every(e=>e.position!==void 0),Ds=N`
549
- .state-node {
550
- display: flex;
551
- flex-direction: column;
552
- justify-content: center;
553
- gap: 6px;
554
- padding: 0 15px;
555
- border: 1px solid var(--dpk-rule-strong);
556
- border-radius: var(--dpk-radius);
557
- background: var(--dpk-paper-raised);
558
- box-shadow: var(--dpk-shadow-xs);
559
- text-align: left;
560
- overflow: hidden;
561
- }
562
-
563
- .state-node:hover {
564
- border-color: var(--dpk-blue);
565
- }
566
-
567
- .state-node.is-initial {
568
- border-left-width: 3px;
569
- }
570
-
571
- .state-node.is-terminal {
572
- border: 3px double var(--dpk-rule-strong);
573
- }
574
-
575
- .state-node.is-compensation {
576
- border-color: color-mix(in srgb, var(--dpk-amber) 50%, transparent);
577
- background: var(--dpk-amber-soft);
578
- }
579
-
580
- .state-node.is-selected {
581
- border-color: var(--dpk-blue);
582
- box-shadow: 0 0 0 3px var(--dpk-blue-soft);
583
- }
584
-
585
- .state-node.is-related {
586
- border-color: color-mix(in srgb, var(--dpk-green) 60%, transparent);
587
- }
588
-
589
- .state-code {
590
- font-family: var(--dpk-mono);
591
- font-size: 9px;
592
- letter-spacing: 0.02em;
593
- color: var(--dpk-ink-faint);
594
- }
595
-
596
- .state-name {
597
- font-size: 13.5px;
598
- font-weight: 640;
599
- letter-spacing: -0.01em;
600
- white-space: nowrap;
601
- overflow: hidden;
602
- text-overflow: ellipsis;
603
- }
604
-
605
- /* The slot centres a label on its route and carries the label's comment icon beside it. */
606
- .state-label-slot {
607
- position: absolute;
608
- transform: translate(-50%, -50%);
609
- display: flex;
610
- }
611
-
612
- /* Overlaps the label by a hair so the pointer never crosses a gap that would hide it. */
613
- .state-label-slot > .diagram-comment-trigger {
614
- position: absolute;
615
- left: calc(100% - 2px);
616
- top: 50%;
617
- transform: translateY(-50%);
618
- }
619
-
620
- .state-label {
621
- max-width: 190px;
622
- padding: 3px 7px;
623
- border: 1px solid transparent;
624
- border-radius: var(--dpk-radius-xs);
625
- background: var(--dpk-paper-raised);
626
- color: var(--dpk-ink-soft);
627
- font-size: 10px;
628
- line-height: 1.5;
629
- white-space: nowrap;
630
- overflow: hidden;
631
- text-overflow: ellipsis;
632
- cursor: pointer;
633
- }
634
-
635
- .state-label:hover {
636
- border-color: color-mix(in srgb, var(--dpk-blue) 40%, transparent);
637
- color: var(--dpk-blue);
638
- }
639
-
640
- .state-label.is-selected {
641
- border-color: color-mix(in srgb, var(--dpk-blue) 55%, transparent);
642
- background: var(--dpk-blue-soft);
643
- color: var(--dpk-blue);
644
- font-weight: 600;
645
- }
646
-
647
- .state-label.is-dimmed {
648
- opacity: 0.35;
649
- }
650
-
651
- .state-edge.is-exception .d-edge-path {
652
- stroke: color-mix(in srgb, var(--dpk-amber) 65%, var(--dpk-rule-strong));
653
- stroke-dasharray: 5 4;
654
- }
655
-
656
- .state-edge.is-related .d-edge-path {
657
- stroke: var(--dpk-green);
658
- }
659
-
660
- .state-edge.is-selected .d-edge-path {
661
- stroke: var(--dpk-blue);
662
- }
663
-
664
- .state-initial-mark {
665
- fill: var(--dpk-ink-faint);
666
- stroke: var(--dpk-ink-faint);
667
- }
668
-
669
- .state-initial-mark.is-dimmed {
670
- opacity: 0.26;
671
- }
672
-
673
- #state-arrow .diagram-arrow {
674
- fill: var(--dpk-ink-faint);
675
- stroke: var(--dpk-ink-faint);
676
- }
677
-
678
- #state-arrow-active .diagram-arrow {
679
- fill: var(--dpk-blue);
680
- stroke: var(--dpk-blue);
681
- }
682
-
683
- #state-arrow-exception .diagram-arrow {
684
- fill: var(--dpk-amber);
685
- stroke: var(--dpk-amber);
686
- }
687
- `,zs=[{id:"state-arrow"},{id:"state-arrow-active"},{id:"state-arrow-exception"}];class je extends Z{static{this.styles=[V,Ds]}parseData(e){return _e(e)}emptyData(){return qs()}defaultHeading(){return"State machine"}statsLabels(){return{node:"\u72B6\u614B",edge:"\u9077\u79FB"}}emptyMessage(){return"\u8A72\u5F53\u3059\u308B\u9077\u79FB\u306F\u3042\u308A\u307E\u305B\u3093\u3002"}get tagDimension(){return"edge"}get layoutMode(){return Cs(this.filtered().nodes)?"fixed":"layered"}layoutOptions(){return this.layoutMode==="fixed"?{padding:44}:{nodeSpacing:40,layerSpacing:110,padding:44}}relations(e,t){if(e===null||e.kind!=="node")return H;const s=U(t.edges,e.id,"outgoing",!1),n=U(t.edges,e.id,"incoming",!1);return{nodes:new Map([...s.nodes,...n.nodes]),edges:new Set([...s.edges,...n.edges])}}renderCanvas(){const e=this.visible.nodes,t=e.filter(s=>s.kind==="initial").map(s=>this.#n(s));return h`
688
- ${this.renderEdges([...t,...this.visible.edges.map(s=>this.#t(s))],zs)}
689
- ${e.map(s=>this.#r(s))} ${this.visible.edges.map(s=>this.#i(s))}
690
- `}#e(e){return this.filtered().nodes.find(t=>t.id===e)?.name??e}#s(e){return[e.guard,e.effect].filter(t=>t!==null).join(`
691
- `)||e.title}#n(e){const t=this.placedNode(e.id);if(!t)return w;const s=t.y+t.height/2,n=this.nodeState(e.id);return I`
692
- <g class=${K("state-initial-mark",n.dimmed&&"is-dimmed")}>
693
- <circle cx=${t.x-22} cy=${s} r="5"></circle>
694
- <path
695
- d=${J([{x:t.x-17,y:s},{x:t.x-1,y:s}])}
696
- stroke-width="1.6"
697
- ></path>
698
- </g>
699
- `}#t(e){const t=this.edgeState(e.id),s=this.routeOf(e.id),n=J(s),r=t.selected||t.related?"state-arrow-active":e.kind==="exception"?"state-arrow-exception":"state-arrow",o=()=>this.select({kind:"edge",id:e.id});return I`
700
- <g
701
- class=${this.elementClass(t,"d-edge","state-edge",e.kind==="exception"&&"is-exception")}
702
- data-transition=${e.id}
703
- >
704
- <title>${this.#s(e)}</title>
705
- <path class="d-edge-path" d=${n} marker-end=${`url(#${r})`}></path>
706
- <path
707
- class="d-edge-hit"
708
- d=${n}
709
- role="button"
710
- tabindex="0"
711
- aria-label=${`${this.#e(e.from)} \u304B\u3089 ${this.#e(e.to)} \u3078\u306E ${e.title}`}
712
- @click=${o}
713
- @keydown=${d=>{d.key!=="Enter"&&d.key!==" "||(d.preventDefault(),o())}}
714
- ></path>
715
- </g>
716
- `}#r(e){const t=this.placedNode(e.id);if(!t)return w;const s=this.nodeState(e.id);return h`
717
- <button
718
- type="button"
719
- class=${this.elementClass(s,"d-node","state-node",`is-${e.kind}`)}
720
- data-state=${e.id}
721
- data-grill-questions=${this.questionsOf(e)}
722
- style="left:${t.x}px; top:${t.y}px; width:${e.width}px; height:${e.height}px"
723
- aria-pressed=${s.selected?"true":"false"}
724
- title=${e.description??e.name}
725
- @click=${()=>this.select({kind:"node",id:e.id})}
726
- >
727
- <span class="state-name">${e.name}</span>
728
- ${e.code===null?w:h`<span class="state-code">${e.code}</span>`}
729
- </button>
730
- ${this.renderCommentTrigger({kind:"node",id:e.id},e.name,{x:t.x+e.width-20,y:t.y-14})}
731
- `}#i(e){const t=this.edgeState(e.id),s=ms(this.routeOf(e.id));return h`
732
- <span class="state-label-slot" style="left:${s.x}px; top:${s.y}px">
733
- <button
734
- type="button"
735
- class=${this.elementClass(t,"state-label")}
736
- data-transition-label=${e.id}
737
- data-grill-questions=${this.questionsOf(e)}
738
- title=${this.#s(e)}
739
- @click=${()=>this.select({kind:"edge",id:e.id})}
740
- >
741
- ${e.title}
742
- </button>
743
- ${this.renderCommentTrigger({kind:"edge",id:e.id},`${this.#e(e.from)} \u2192 ${this.#e(e.to)} \xB7 ${e.title}`)}
744
- </span>
745
- `}}const Fe=()=>{customElements.get("dpk-component-state-diagram")||customElements.define("dpk-component-state-diagram",je)},As=C({kind:ye("message"),id:$(p(),S(1)),from:$(p(),S(1)),to:$(p(),S(1)),title:$(p(),S(1)),style:b(F(["request","response","async"]),"request"),tags:b(z(p()),[]),guard:b(p()),detail:b(p()),questions:b(p())}),Ts=C({label:$(p(),S(1)),items:z(ve())}),Ls=C({kind:ye("fragment"),id:$(p(),S(1)),operator:F(["alt","opt","loop","par"]),title:$(p(),S(1)),collapsed:b(oe(),!1),branches:$(z(Ts),S(1))}),Rs=Ht("kind",[As,Ls]),Os=C({id:$(p(),S(1)),name:$(p(),S(1)),role:b(p()),symbol:b(p()),kind:b(F(["internal","external"]),"internal"),description:b(p()),questions:b(p())}),Is=C({participants:$(z(Os),S(1)),items:b(z(ve()),[])}),He=240,ge=(i,e,t)=>{if(i.has(e))throw new Error(`duplicate ${t} id: ${e}`);i.add(e)},Ne=(i,e,t)=>i.map(s=>{const n=B(Rs,s);if(n.kind==="message"){if(ge(t,n.id,"message"),!e.has(n.from))throw new Error(`unknown sender: ${n.from}`);if(!e.has(n.to))throw new Error(`unknown receiver: ${n.to}`);return{kind:"message",id:n.id,from:n.from,to:n.to,title:n.title,style:n.style,tags:n.tags,guard:n.guard??null,detail:n.detail??null,questions:n.questions??null}}return ge(t,n.id,"fragment"),{kind:"fragment",id:n.id,operator:n.operator,title:n.title,collapsed:n.collapsed,branches:n.branches.map(r=>({label:r.label,items:Ne(r.items,e,t)}))}}),Be=i=>{const e=B(Is,i),t=new Set;for(const s of e.participants)ge(t,s.id,"participant");return{participants:e.participants.map(s=>({id:s.id,name:s.name,role:s.role??null,symbol:s.symbol??null,external:s.kind==="external",description:s.description??null,questions:s.questions??null})),items:Ne(e.items,t,new Set)}},Ps=()=>({participants:[],items:[]}),Ve=(i,e)=>{for(const t of i)if(t.kind==="message")e.push(t);else for(const s of t.branches)Ve(s.items,e)},W=i=>{const e=[];return Ve(i,e),e},Us=i=>new Map(W(i.items).map((e,t)=>[e.id,String(t+1).padStart(2,"0")])),_s=i=>W(i).length,We=(i,e)=>{const t=[];for(const s of i){if(s.kind==="message"){e(s)&&t.push(s);continue}const n=s.branches.map(a=>({label:a.label,items:We(a.items,e)})).filter(a=>a.items.length>0);n.length>0&&t.push({...s,branches:n})}return t},js=64,Fs=86,Hs=31,Ns=32,Bs=40,Vs=(i,e)=>{const t=We(i.items,e),s=new Set;for(const M of W(t))s.add(M.from),s.add(M.to);const n=i.participants.filter(M=>s.has(M.id)),a=new Map(n.map((M,v)=>[M.id,120+v*He])),r=Math.max(360,n.length*He),o=[],d=[],l=[],f=[],g=[];let c=25;const m=(M,v)=>{for(const k of M){if(k.kind==="message"){o.push({message:k,y:c+29,depth:v}),c+=k.from===k.to?Fs:js;continue}const q=22+v*13,A=c,R=r-44-v*26;c+=Hs,k.collapsed?(g.push({fragment:k,x:q,y:c+6}),c+=Bs):k.branches.forEach((P,_)=>{_>0&&(f.push({x:q,y:c,width:R}),c+=8),l.push({label:P.label,x:q+12,y:c}),c+=Ns,m(P.items,v+1),c+=8}),d.push({fragment:k,x:q,y:A,width:R,height:c-A,count:_s([k])}),c+=14}};return m(t,0),{width:r,height:c+24,participants:n,rows:o,frames:d,branches:l,dividers:f,folds:g,x:a}},Ws=N`
746
- .sequence .diagram-canvas {
747
- background-image: none;
748
- }
749
-
750
- .sequence-rail {
751
- position: relative;
752
- height: 62px;
753
- flex-shrink: 0;
754
- overflow: hidden;
755
- border-bottom: 1px solid var(--dpk-rule);
756
- background: var(--dpk-paper);
757
- }
758
-
759
- .sequence-rail-world {
760
- position: absolute;
761
- top: 0;
762
- left: 0;
763
- height: 62px;
764
- transform-origin: 0 0;
765
- }
766
-
767
- .sequence-participant {
768
- position: absolute;
769
- top: 9px;
770
- width: 190px;
771
- height: 44px;
772
- display: flex;
773
- align-items: center;
774
- gap: 9px;
775
- padding: 6px 10px;
776
- border: 1px solid var(--dpk-rule-strong);
777
- border-radius: var(--dpk-radius-sm);
778
- background: var(--dpk-paper-raised);
779
- box-shadow: var(--dpk-shadow-xs);
780
- text-align: left;
781
- cursor: pointer;
782
- }
783
-
784
- .sequence-participant.is-external {
785
- border-style: dashed;
786
- }
787
-
788
- .sequence-participant[aria-pressed='true'] {
789
- border-color: var(--dpk-blue);
790
- box-shadow: 0 0 0 3px var(--dpk-blue-soft);
791
- }
792
-
793
- .sequence-participant.is-related {
794
- border-color: color-mix(in srgb, var(--dpk-green) 60%, transparent);
795
- }
796
-
797
- .sequence-symbol {
798
- flex-shrink: 0;
799
- display: grid;
800
- place-items: center;
801
- width: 26px;
802
- height: 26px;
803
- border-radius: var(--dpk-radius-xs);
804
- background: var(--dpk-paper-inset);
805
- color: var(--dpk-ink-faint);
806
- font-family: var(--dpk-mono);
807
- font-size: 9.5px;
808
- }
809
-
810
- .sequence-participant.is-external .sequence-symbol {
811
- background: var(--dpk-amber-soft);
812
- color: var(--dpk-amber);
813
- }
814
-
815
- .sequence-name {
816
- display: block;
817
- font-size: 11.5px;
818
- font-weight: 640;
819
- white-space: nowrap;
820
- overflow: hidden;
821
- text-overflow: ellipsis;
822
- }
823
-
824
- .sequence-role {
825
- display: block;
826
- margin-top: 2px;
827
- font-size: 9px;
828
- color: var(--dpk-ink-faint);
829
- }
830
-
831
- .sequence-lifeline {
832
- stroke: var(--dpk-rule-strong);
833
- stroke-width: 1;
834
- stroke-dasharray: 4 6;
835
- }
836
-
837
- .sequence-divider {
838
- stroke: var(--dpk-rule-strong);
839
- stroke-dasharray: 4 4;
840
- }
841
-
842
- .sequence-message {
843
- fill: none;
844
- stroke: var(--dpk-ink-faint);
845
- stroke-width: 1.5;
846
- stroke-linejoin: round;
847
- }
848
-
849
- .sequence-message.is-response {
850
- stroke-dasharray: 5 4;
851
- }
852
-
853
- .sequence-message.is-async {
854
- stroke: var(--dpk-blue);
855
- }
856
-
857
- .sequence-message-row.is-related .sequence-message {
858
- stroke: var(--dpk-green);
859
- stroke-width: 2;
860
- }
861
-
862
- .sequence-message-row.is-selected .sequence-message {
863
- stroke: var(--dpk-ink);
864
- stroke-width: 2.4;
865
- }
866
-
867
- .sequence-message-row.is-dimmed,
868
- .sequence-label.is-dimmed {
869
- opacity: 0.24;
870
- }
871
-
872
- .sequence-frame {
873
- position: absolute;
874
- border: 1px solid var(--dpk-rule-strong);
875
- border-radius: var(--dpk-radius-xs);
876
- background: color-mix(in srgb, var(--dpk-blue-soft) 50%, transparent);
877
- pointer-events: none;
878
- }
879
-
880
- .sequence-frame-header {
881
- position: absolute;
882
- display: flex;
883
- align-items: center;
884
- gap: 9px;
885
- padding: 5px 9px;
886
- border: 1px solid var(--dpk-rule-strong);
887
- border-bottom: 0;
888
- border-radius: var(--dpk-radius-xs) var(--dpk-radius-xs) 0 0;
889
- background: var(--dpk-paper-sunken);
890
- color: var(--dpk-ink-soft);
891
- font-size: 10px;
892
- text-align: left;
893
- cursor: pointer;
894
- }
895
-
896
- .sequence-frame-header:hover {
897
- background: var(--dpk-paper-inset);
898
- color: var(--dpk-ink);
899
- }
900
-
901
- .sequence-operator {
902
- min-width: 26px;
903
- font-family: var(--dpk-mono);
904
- font-weight: 700;
905
- color: var(--dpk-blue);
906
- }
907
-
908
- .sequence-frame-count {
909
- margin-left: auto;
910
- font-family: var(--dpk-mono);
911
- font-size: 9px;
912
- color: var(--dpk-ink-faint);
913
- }
914
-
915
- .sequence-branch {
916
- position: absolute;
917
- font-size: 9.5px;
918
- color: var(--dpk-ink-faint);
919
- }
920
-
921
- .sequence-fold {
922
- position: absolute;
923
- font-size: 10px;
924
- color: var(--dpk-ink-faint);
925
- }
926
-
927
- .sequence-label {
928
- position: absolute;
929
- display: flex;
930
- align-items: center;
931
- gap: 6px;
932
- max-height: 27px;
933
- padding: 3px 5px;
934
- border: 1px solid transparent;
935
- border-radius: var(--dpk-radius-xs);
936
- background: var(--dpk-paper-raised);
937
- color: var(--dpk-ink-soft);
938
- font-size: 10px;
939
- text-align: left;
940
- cursor: pointer;
941
- }
942
-
943
- .sequence-label:hover {
944
- border-color: color-mix(in srgb, var(--dpk-blue) 40%, transparent);
945
- color: var(--dpk-blue);
946
- }
947
-
948
- .sequence-label.is-selected {
949
- border-color: color-mix(in srgb, var(--dpk-blue) 55%, transparent);
950
- background: var(--dpk-blue-soft);
951
- color: var(--dpk-blue);
952
- }
953
-
954
- .sequence-number {
955
- flex-shrink: 0;
956
- display: grid;
957
- place-items: center;
958
- width: 19px;
959
- height: 17px;
960
- border: 1px solid var(--dpk-rule-strong);
961
- border-radius: 3px;
962
- font-family: var(--dpk-mono);
963
- font-size: 8px;
964
- font-variant-numeric: tabular-nums;
965
- color: var(--dpk-ink-faint);
966
- }
967
-
968
- .sequence-text {
969
- min-width: 0;
970
- white-space: nowrap;
971
- overflow: hidden;
972
- text-overflow: ellipsis;
973
- }
974
-
975
- #seq-request .diagram-arrow,
976
- #seq-response .diagram-arrow {
977
- fill: var(--dpk-ink-faint);
978
- stroke: var(--dpk-ink-faint);
979
- }
980
-
981
- #seq-async .diagram-arrow {
982
- stroke: var(--dpk-blue);
983
- }
984
-
985
- #seq-related .diagram-arrow {
986
- fill: var(--dpk-green);
987
- stroke: var(--dpk-green);
988
- }
989
-
990
- #seq-selected .diagram-arrow {
991
- fill: var(--dpk-ink);
992
- stroke: var(--dpk-ink);
993
- }
994
- `,Ys=[{id:"seq-request"},{id:"seq-response"},{id:"seq-async"},{id:"seq-related"},{id:"seq-selected"}],Gs={request:"\u51E6\u7406 / \u4FDD\u8A3C",response:"\u5FDC\u7B54 / \u4FDD\u8A3C",async:"\u975E\u540C\u671F\u51E6\u7406 / \u4FDD\u8A3C"};class Ye extends me{static{this.styles=[V,Ws]}#e=null;#s=new Map;#n=new Map;#t=new Set;#r=new Set;#i="";#a=0;commentItems(){const e=this.items();return[...e.participants.map(t=>({value:this.commentRef("participant",t.id),label:t.name})),...W(e.items).map(t=>({value:this.commentRef("message",t.id),label:t.title}))]}parseData(e){return this.#n.clear(),Be(e)}emptyData(){return Ps()}defaultHeading(){return"Sequence"}shellClass(){return"sequence"}emptyMessage(){return"\u8A72\u5F53\u3059\u308B\u30E1\u30C3\u30BB\u30FC\u30B8\u306F\u3042\u308A\u307E\u305B\u3093\u3002"}fitViewport(){this.viewport?.fitWidth()}onViewChange(e){const t=this.renderRoot.querySelector(".sequence-rail-world");t&&(t.style.transform=`translateX(${e.x}px) scale(${e.scale})`)}hasSelection(e){const t=this.items();return e.kind==="participant"?t.participants.some(s=>s.id===e.id):W(t.items).some(s=>s.id===e.id)}tagItems(){return W(this.items().items).map(e=>e.tags)}statsText(){const e=this.#e,t=W(this.items().items).length;return e===null?"":`${e.rows.length} / ${t} \u30E1\u30C3\u30BB\u30FC\u30B8`}contentSize(){const e=this.#e;return e===null||e.rows.length===0?null:{width:e.width,height:e.height}}isEmpty(){return this.contentSize()===null}layoutVersion(){return this.#a}refreshContent(){const e=this.#l(),t=this.tagFilter,s=[t.match,[...t.active].join(","),[...this.#n].map(([r,o])=>`${r}:${o}`).join(","),W(e.items).map(r=>r.id).join(",")].join("|");s!==this.#i&&(this.#i=s,this.#a+=1,this.#s=Us(this.items()),this.#e=Vs(e,r=>G(r.tags,t))),this.#t=new Set,this.#r=new Set;const n=this.selection,a=this.#e;if(n!==null&&a!==null)if(n.kind==="message"){const r=a.rows.find(o=>o.message.id===n.id);this.#t.add(n.id),r&&(this.#r.add(r.message.from),this.#r.add(r.message.to))}else for(const r of a.rows)r.message.from!==n.id&&r.message.to!==n.id||this.#t.add(r.message.id)}#o(e){const t=e.detail===null?null:`${Gs[e.style]}: ${e.detail}`;return[e.guard,t].filter(s=>s!==null).join(`
995
- `)||e.title}#l(){const e=this.items(),t=s=>s.map(n=>n.kind==="message"?n:{...n,collapsed:this.#n.get(n.id)??n.collapsed,branches:n.branches.map(a=>({label:a.label,items:t(a.items)}))});return{participants:e.participants,items:t(e.items)}}#c(e){return this.#e?.frames.find(t=>t.fragment.id===e.id)?.fragment.collapsed??e.collapsed}#h(e){this.#n.set(e.id,!this.#c(e)),this.requestUpdate()}#p(e){const t=this.selection?.kind==="message"&&this.selection.id===e,s=!t&&this.#t.has(e);return{selected:t,related:s,dimmed:this.selection!==null&&!t&&!s,depth:null}}#d(e){const t=this.selection?.kind==="participant"&&this.selection.id===e,s=!t&&this.#r.has(e);return{selected:t,related:s,dimmed:this.selection!==null&&!t&&!s,depth:null}}renderAboveCanvas(){const e=this.#e;return e===null?w:h`
996
- <div class="sequence-rail" role="group" aria-label="参加者">
997
- <div class="sequence-rail-world">
998
- ${e.participants.map(t=>this.#b(t,e))}
999
- </div>
1000
- </div>
1001
- `}#b(e,t){const s=t.x.get(e.id)??0,n=this.#d(e.id);return h`
1002
- <button
1003
- type="button"
1004
- class=${this.elementClass(n,"sequence-participant",e.external&&"is-external")}
1005
- data-participant=${e.id}
1006
- data-grill-questions=${this.questionsOf(e)}
1007
- style="left:${s-95}px"
1008
- aria-pressed=${n.selected?"true":"false"}
1009
- title=${e.description??e.name}
1010
- @click=${()=>this.select({kind:"participant",id:e.id})}
1011
- >
1012
- <span class="sequence-symbol" aria-hidden="true">${e.symbol??e.name.slice(0,2)}</span>
1013
- <span>
1014
- <span class="sequence-name">${e.name}</span>
1015
- ${e.role===null?w:h`<span class="sequence-role">${e.role}</span>`}
1016
- </span>
1017
- </button>
1018
- ${this.renderCommentTrigger({kind:"participant",id:e.id},e.name,{x:s+95-34,y:17})}
1019
- `}renderCanvas(){const e=this.#e;return e===null?h``:h`
1020
- ${this.#u(e)}
1021
- ${e.frames.map(t=>h`<div
1022
- class="sequence-frame"
1023
- style="left:${t.x}px; top:${t.y}px; width:${t.width}px; height:${t.height}px"
1024
- ></div>`)}
1025
- ${e.frames.map(t=>this.#m(t.fragment,t.x,t.y,t.width,t.count))}
1026
- ${e.branches.map(t=>h`<span class="sequence-branch" style="left:${t.x}px; top:${t.y}px"
1027
- >[${t.label}]</span
1028
- >`)}
1029
- ${e.folds.map(t=>h`<span class="sequence-fold" style="left:${t.x}px; top:${t.y}px"
1030
- >${t.fragment.branches.map(s=>`[${s.label}]`).join(" / ")}</span
1031
- >`)}
1032
- ${e.rows.map(t=>this.#g(t.y,t.message,e))}
1033
- `}#u(e){const t=e.participants.map(a=>I`<path
1034
- class="sequence-lifeline"
1035
- d=${`M${e.x.get(a.id)??0} 0 V${e.height}`}
1036
- ></path>`),s=e.dividers.map(a=>I`<path class="sequence-divider" d=${`M${a.x} ${a.y} h${a.width}`}></path>`),n=e.rows.map(a=>{const r=e.x.get(a.message.from)??0,o=e.x.get(a.message.to)??0,d=r===o?`M${r} ${a.y} h42 v25 H${r}`:`M${r} ${a.y} H${o}`,l=this.#p(a.message.id),f=l.selected?"seq-selected":l.related?"seq-related":a.message.style==="async"?"seq-async":a.message.style==="response"?"seq-response":"seq-request",g=()=>this.select({kind:"message",id:a.message.id});return I`
1037
- <g
1038
- class=${this.elementClass(l,"sequence-message-row","d-edge",`is-${a.message.style}`)}
1039
- data-message=${a.message.id}
1040
- >
1041
- <title>${this.#o(a.message)}</title>
1042
- <path class="d-edge-hit" d=${d} role="button" tabindex="0"
1043
- aria-label=${`${a.message.title}\u3092\u9078\u629E`}
1044
- @click=${g}
1045
- @keydown=${c=>{c.key!=="Enter"&&c.key!==" "||(c.preventDefault(),g())}}></path>
1046
- <path class="sequence-message is-${a.message.style}" d=${d} marker-end=${`url(#${f})`}></path>
1047
- </g>
1048
- `});return h`<svg class="diagram-edges" width=${e.width} height=${e.height}>
1049
- ${Oe(Ys)} ${t} ${s} ${n}
1050
- </svg>`}#m(e,t,s,n,a){const r=this.#c(e);return h`
1051
- <button
1052
- type="button"
1053
- class="sequence-frame-header"
1054
- data-fragment=${e.id}
1055
- style="left:${t}px; top:${s}px; width:${n}px"
1056
- aria-expanded=${r?"false":"true"}
1057
- aria-label=${`${e.operator} \xB7 ${e.title}\u3092${r?"\u5C55\u958B":"\u6298\u308A\u305F\u305F\u3080"}`}
1058
- @click=${()=>this.#h(e)}
1059
- >
1060
- <span aria-hidden="true">${r?"\u25B8":"\u25BE"}</span>
1061
- <span class="sequence-operator">${e.operator}</span>
1062
- <span class="sequence-text">${e.title}</span>
1063
- <span class="sequence-frame-count">${a} メッセージ</span>
1064
- </button>
1065
- `}#g(e,t,s){const n=s.x.get(t.from)??0,a=s.x.get(t.to)??0,r=n===a,o=this.#p(t.id),d=r?n+12:Math.min(n,a)+14,l=r?175:Math.abs(a-n)-28;return h`
1066
- <button
1067
- type="button"
1068
- class=${this.elementClass(o,"sequence-label")}
1069
- data-message-label=${t.id}
1070
- data-grill-questions=${this.questionsOf(t)}
1071
- style="left:${d}px; top:${e-28}px; width:${l}px"
1072
- title=${this.#o(t)}
1073
- @click=${()=>this.select({kind:"message",id:t.id})}
1074
- >
1075
- <span class="sequence-number">${this.#s.get(t.id)??""}</span>
1076
- <span class="sequence-text">${t.title}</span>
1077
- </button>
1078
- ${this.renderCommentTrigger({kind:"message",id:t.id},`${this.#s.get(t.id)??""} ${t.title}`.trim(),{x:d+l-30,y:e-31})}
1079
- `}}const Ge=()=>{customElements.get("dpk-component-sequence-diagram")||customElements.define("dpk-component-sequence-diagram",Ye)},Ke={width:176,height:84},Ks=C({id:$(p(),S(1)),name:$(p(),S(1)),path:b(p()),layer:b(p()),tags:b(z(p()),[]),description:b(p()),questions:b(p())}),Xs=C({id:$(p(),S(1)),from:$(p(),S(1)),to:$(p(),S(1)),contract:b(p()),description:b(p()),questions:b(p())}),Js=C({modules:z(Ks),dependencies:b(z(Xs),[])}),Zs=()=>({nodes:[],edges:[]}),Qs=i=>{const e=B(Js,i),t=new Set;for(const r of e.modules){if(t.has(r.id))throw new Error(`duplicate module id: ${r.id}`);t.add(r.id)}const s=new Set,n=e.dependencies.map(r=>{if(s.has(r.id))throw new Error(`duplicate dependency id: ${r.id}`);if(s.add(r.id),!t.has(r.from))throw new Error(`unknown dependency source: ${r.from}`);if(!t.has(r.to))throw new Error(`unknown dependency target: ${r.to}`);return{id:r.id,from:r.from,to:r.to,tags:[],contract:r.contract??null,description:r.description??null}});return{nodes:e.modules.map(r=>({id:r.id,name:r.name,path:r.path??null,layer:r.layer??null,description:r.description??null,tags:r.tags,width:Ke.width,height:Ke.height,...r.questions===void 0?{}:{questions:r.questions}})),edges:n}},en=N`
1080
- .dep-direction {
1081
- display: flex;
1082
- gap: 1px;
1083
- padding: 2px;
1084
- border: 1px solid var(--dpk-rule-strong);
1085
- border-radius: var(--dpk-radius-xs);
1086
- }
1087
-
1088
- .dep-direction button {
1089
- border: 0;
1090
- border-radius: 3px;
1091
- padding: 3px 7px;
1092
- background: transparent;
1093
- color: var(--dpk-ink-faint);
1094
- font-size: 9.5px;
1095
- cursor: pointer;
1096
- }
1097
-
1098
- .dep-direction button[aria-pressed='true'] {
1099
- background: var(--dpk-blue-soft);
1100
- color: var(--dpk-blue);
1101
- font-weight: 650;
1102
- }
1103
-
1104
- .dep-toggle {
1105
- min-height: 26px;
1106
- padding: 0 8px;
1107
- font-size: 10.5px;
1108
- }
1109
-
1110
- .dep-toggle[aria-pressed='true'] {
1111
- border-color: color-mix(in srgb, var(--dpk-blue) 40%, transparent);
1112
- background: var(--dpk-blue-soft);
1113
- color: var(--dpk-blue);
1114
- }
1115
-
1116
- .dep-module {
1117
- display: flex;
1118
- flex-direction: column;
1119
- gap: 5px;
1120
- padding: 11px 12px;
1121
- border: 1px solid var(--dpk-rule-strong);
1122
- border-radius: var(--dpk-radius-sm);
1123
- background: var(--dpk-paper-raised);
1124
- box-shadow: var(--dpk-shadow-xs);
1125
- text-align: left;
1126
- overflow: hidden;
1127
- }
1128
-
1129
- .dep-module:hover {
1130
- border-color: var(--dpk-blue);
1131
- }
1132
-
1133
- .dep-module.is-cyclic:not(.is-selected) {
1134
- border-color: color-mix(in srgb, var(--dpk-amber) 55%, transparent);
1135
- }
1136
-
1137
- .dep-module.is-selected {
1138
- border-color: var(--dpk-blue);
1139
- background: var(--dpk-blue-soft);
1140
- box-shadow: 0 0 0 3px var(--dpk-blue-soft);
1141
- }
1142
-
1143
- .dep-module.is-related {
1144
- border-color: color-mix(in srgb, var(--dpk-green) 55%, transparent);
1145
- background: var(--dpk-green-soft);
1146
- }
1147
-
1148
- .dep-module.is-dependency {
1149
- border-color: color-mix(in srgb, #6e9b61 60%, transparent);
1150
- background: color-mix(in srgb, #6e9b61 8%, transparent);
1151
- }
1152
-
1153
- .dep-module.is-dependent {
1154
- border-color: color-mix(in srgb, #729aaa 60%, transparent);
1155
- background: color-mix(in srgb, #729aaa 8%, transparent);
1156
- }
1157
-
1158
- .dep-head {
1159
- display: flex;
1160
- align-items: center;
1161
- justify-content: space-between;
1162
- gap: 6px;
1163
- min-height: 14px;
1164
- }
1165
-
1166
- .dep-layer {
1167
- font-size: 9px;
1168
- color: var(--dpk-ink-faint);
1169
- white-space: nowrap;
1170
- overflow: hidden;
1171
- text-overflow: ellipsis;
1172
- }
1173
-
1174
- .dep-cycle-badge {
1175
- flex-shrink: 0;
1176
- padding: 1px 4px;
1177
- border-radius: 3px;
1178
- background: var(--dpk-amber-soft);
1179
- color: var(--dpk-amber);
1180
- font-size: 8.5px;
1181
- }
1182
-
1183
- .dep-name {
1184
- font-size: 13px;
1185
- font-weight: 640;
1186
- letter-spacing: -0.01em;
1187
- white-space: nowrap;
1188
- overflow: hidden;
1189
- text-overflow: ellipsis;
1190
- }
1191
-
1192
- .dep-path {
1193
- font-family: var(--dpk-mono);
1194
- font-size: 9px;
1195
- color: var(--dpk-ink-faint);
1196
- white-space: nowrap;
1197
- overflow: hidden;
1198
- text-overflow: ellipsis;
1199
- }
1200
-
1201
- .dep-edge .d-edge-path {
1202
- stroke: var(--dpk-rule-strong);
1203
- stroke-width: 1.4;
1204
- }
1205
-
1206
- .dep-edge.is-related .d-edge-path {
1207
- stroke: var(--dpk-green);
1208
- stroke-width: 2;
1209
- }
1210
-
1211
- .dep-edge.is-selected .d-edge-path {
1212
- stroke: var(--dpk-blue);
1213
- stroke-width: 2.6;
1214
- }
1215
-
1216
- .dep-edge:focus-visible .d-edge-path {
1217
- stroke: var(--dpk-blue);
1218
- }
1219
-
1220
- .diagram-legend .dep-swatch-outgoing {
1221
- border-color: #6e9b61;
1222
- }
1223
-
1224
- .diagram-legend .dep-swatch-incoming {
1225
- border-color: #729aaa;
1226
- }
1227
-
1228
- .diagram-legend .dep-swatch-cycle {
1229
- border-color: var(--dpk-amber);
1230
- }
1231
-
1232
- #dep-neutral .diagram-arrow {
1233
- fill: var(--dpk-rule-strong);
1234
- stroke: var(--dpk-rule-strong);
1235
- }
1236
-
1237
- #dep-outgoing .diagram-arrow {
1238
- fill: #6e9b61;
1239
- stroke: #6e9b61;
1240
- }
1241
-
1242
- #dep-incoming .diagram-arrow {
1243
- fill: #729aaa;
1244
- stroke: #729aaa;
1245
- }
1246
-
1247
- #dep-cycle .diagram-arrow {
1248
- fill: var(--dpk-amber);
1249
- stroke: var(--dpk-amber);
1250
- }
1251
-
1252
- #dep-selected .diagram-arrow {
1253
- fill: var(--dpk-blue);
1254
- stroke: var(--dpk-blue);
1255
- }
1256
- `,tn=[{id:"dep-neutral"},{id:"dep-outgoing"},{id:"dep-incoming"},{id:"dep-cycle"},{id:"dep-selected"}];class Xe extends Z{static{this.styles=[V,en]}#e="both";#s=!1;#n=!1;#t=[];#r=H;#i=H;parseData(e){return Qs(e)}emptyData(){return Zs()}defaultHeading(){return"Dependencies"}statsLabels(){return{node:"\u30E2\u30B8\u30E5\u30FC\u30EB",edge:"\u4F9D\u5B58"}}emptyMessage(){return this.#n?"\u8A72\u5F53\u3059\u308B\u5FAA\u74B0\u4F9D\u5B58\u306F\u3042\u308A\u307E\u305B\u3093\u3002":"\u8A72\u5F53\u3059\u308B\u30E2\u30B8\u30E5\u30FC\u30EB\u306F\u3042\u308A\u307E\u305B\u3093\u3002"}layoutOptions(){return{nodeSpacing:40,layerSpacing:96,padding:32}}relations(e,t){return e===null||e.kind!=="node"?H:{nodes:new Map([...this.#r.nodes,...this.#i.nodes]),edges:new Set([...this.#r.edges,...this.#i.edges])}}refreshContent(){const e=this.items(),t=this.tagFilter,s=e.nodes.filter(o=>G(o.tags,t)),n=new Set(s.map(o=>o.id)),a=e.edges.filter(o=>n.has(o.from)&&n.has(o.to));this.#t=hs(s.map(o=>o.id),a);const r=this.selection;this.#r=r!==null&&r.kind==="node"&&this.#e!=="incoming"?U(a,r.id,"outgoing",this.#s):H,this.#i=r!==null&&r.kind==="node"&&this.#e!=="outgoing"?U(a,r.id,"incoming",this.#s):H,super.refreshContent()}matchesFilter(e){return this.#n?ce(this.#t).has(e.id):!0}filtered(){const e=super.filtered();if(!this.#n)return e;const t=ce(this.#t),s=e.edges.filter(a=>Te(a,t)),n=new Set(s.flatMap(a=>[a.from,a.to]));return{nodes:e.nodes.filter(a=>n.has(a.id)),edges:s}}renderToolbarActions(){const e=this.#t.length;return h`
1257
- <div class="dep-direction" role="group" aria-label="選択したモジュールから追う方向">
1258
- ${[["outgoing","\u4F9D\u5B58\u5148"],["incoming","\u4F9D\u5B58\u5143"],["both","\u4E21\u65B9"]].map(([t,s])=>h`
1259
- <button
1260
- type="button"
1261
- data-direction=${t}
1262
- aria-pressed=${this.#e===t?"true":"false"}
1263
- @click=${()=>this.#a(t)}
1264
- >
1265
- ${s}
1266
- </button>
1267
- `)}
1268
- </div>
1269
- <button
1270
- type="button"
1271
- class="dpk-btn dpk-btn--ghost dep-toggle"
1272
- data-toggle="transitive"
1273
- aria-pressed=${this.#s?"true":"false"}
1274
- @click=${()=>{this.#s=!this.#s,this.requestUpdate()}}
1275
- >
1276
- 間接も含む
1277
- </button>
1278
- <button
1279
- type="button"
1280
- class="dpk-btn dpk-btn--ghost dep-toggle"
1281
- data-toggle="cycles"
1282
- aria-pressed=${this.#n?"true":"false"}
1283
- aria-label=${`\u5FAA\u74B0\u4F9D\u5B58 ${e} \u30B0\u30EB\u30FC\u30D7\u3060\u3051\u8868\u793A`}
1284
- ?disabled=${!this.#n&&e===0}
1285
- @click=${()=>{this.#n=!this.#n,this.requestUpdate()}}
1286
- >
1287
- 循環 ${e}
1288
- </button>
1289
- `}renderLegend(){return h`<div class="diagram-legend">
1290
- <span><i class="dep-swatch-outgoing"></i>依存先</span>
1291
- <span><i class="dep-swatch-incoming"></i>依存元</span>
1292
- <span><i class="dep-swatch-cycle"></i>循環</span>
1293
- </div>`}#a(e){this.#e=e,this.requestUpdate()}#o(e,t){const s=this.selection;return s!==null&&s.kind==="edge"&&s.id===e.id?"dep-selected":Te(e,t)?"dep-cycle":this.#r.edges.has(e.id)?"dep-outgoing":this.#i.edges.has(e.id)?"dep-incoming":"dep-neutral"}renderCanvas(){const e=this.visible,t=ce(this.#t),s=r=>e.nodes.find(o=>o.id===r)?.name??r,n=e.edges.map(r=>{const o=this.edgeState(r.id),d=this.routeOf(r.id),l=J(d),f=()=>this.select({kind:"edge",id:r.id});return I`
1294
- <g class=${this.elementClass(o,"d-edge","dep-edge")} data-dependency=${r.id}>
1295
- <title>${[r.contract,r.description].filter(g=>g!==null).join(`
1296
- `)||r.id}</title>
1297
- <path class="d-edge-path" d=${l} marker-end=${`url(#${this.#o(r,t)})`}></path>
1298
- <path
1299
- class="d-edge-hit"
1300
- d=${l}
1301
- role="button"
1302
- tabindex="0"
1303
- aria-label=${`${s(r.from)} \u304C ${s(r.to)} \u306B\u4F9D\u5B58`}
1304
- @click=${f}
1305
- @keydown=${g=>{g.key!=="Enter"&&g.key!==" "||(g.preventDefault(),f())}}
1306
- ></path>
1307
- ${this.renderEdgeCommentTrigger({kind:"edge",id:r.id},`${s(r.from)} \u2192 ${s(r.to)}`,d)}
1308
- </g>
1309
- `}),a=e.nodes.map(r=>{const o=this.placedNode(r.id);if(!o)return w;const d=this.nodeState(r.id),l=t.has(r.id),f=this.#r.nodes.has(r.id),g=this.#i.nodes.has(r.id);return h`
1310
- <button
1311
- type="button"
1312
- class=${this.elementClass(d,"d-node","dep-module",l&&"is-cyclic",f&&"is-dependency",g&&"is-dependent")}
1313
- data-module=${r.id}
1314
- data-grill-questions=${this.questionsOf(r)}
1315
- style="left:${o.x}px; top:${o.y}px; width:${r.width}px; height:${r.height}px"
1316
- aria-pressed=${d.selected?"true":"false"}
1317
- aria-label=${`${r.name}${l?"\u30FB\u5FAA\u74B0\u4F9D\u5B58\u3042\u308A":""}`}
1318
- title=${[r.path??r.name,r.description].filter(c=>c!==null).join(`
1319
- `)}
1320
- @click=${()=>this.select({kind:"node",id:r.id})}
1321
- >
1322
- <span class="dep-head">
1323
- <span class="dep-layer">${r.layer??""}</span>
1324
- ${l?h`<span class="dep-cycle-badge">循環</span>`:w}
1325
- </span>
1326
- <span class="dep-name">${r.name}</span>
1327
- <span class="dep-path">${r.path??""}</span>
1328
- </button>
1329
- ${this.renderCommentTrigger({kind:"node",id:r.id},r.name,{x:o.x+r.width-20,y:o.y-14})}
1330
- `});return h`${this.renderEdges(n,tn)}${a}`}}const Je=()=>{customElements.get("dpk-component-dependency-graph")||customElements.define("dpk-component-dependency-graph",Xe)},Ze=276,fe=74,sn=28,nn=44,rn=C({id:$(p(),S(1)),type:$(p(),S(1)),key:b(F(["PK","FK","UQ"])),ref:b(p()),nullable:b(oe(),!1),questions:b(p())}),an=C({id:$(p(),S(1)),name:$(p(),S(1)),tags:b(z(p()),[]),fields:z(rn),questions:b(p())}),Qe=C({tables:z(an)}),on=C({before:b(Qe),after:Qe}),dn=()=>({nodes:[],edges:[]}),et=i=>({id:i.id,type:i.type,key:i.key??null,ref:i.ref??null,nullable:i.nullable,questions:i.questions??null}),tt=(i,e)=>i.type===e.type&&i.key===e.key&&i.ref===e.ref&&i.nullable===e.nullable,ne=i=>i.status==="changed"?nn:sn,st=i=>fe+i.reduce((e,t)=>e+ne(t),0),nt=(i,e)=>{let t=fe;for(const s of i){if(s.id===e)return t+ne(s)/2;t+=ne(s)}return fe/2},rt=i=>i.flatMap(e=>e.fields.flatMap(t=>{if(t.ref===void 0)return[];const[s,n]=t.ref.split(".");if(s===void 0||n===void 0)throw new Error(`invalid ref "${t.ref}" on ${e.id}.${t.id}; expected table.field`);return[{id:`${s}:${n}>${e.id}:${t.id}`,from:s,to:e.id,sourceField:n,targetField:t.id}]})),ln=(i,e)=>[...new Set([...i,...e].map(s=>s.id))].flatMap(s=>{const n=i.find(l=>l.id===s),a=e.find(l=>l.id===s),r=a??n;if(!r)return[];const o=et(r);if(!n)return[{...o,status:"added",before:null}];if(!a)return[{...o,status:"removed",before:null}];const d=et(n);return[{...o,status:tt(d,o)?"same":"changed",before:tt(d,o)?null:d}]}),cn=i=>{const e=B(on,i),t=e.before?.tables??e.after.tables,s=e.after.tables,n=[...new Set([...t,...s].map(m=>m.id))],a=new Map;for(const m of[...t,...s])a.set(m.id,m.tags);const r=n.flatMap(m=>{const M=t.find(R=>R.id===m),v=s.find(R=>R.id===m),k=v??M;if(!k)return[];const q=ln(M?.fields??[],v?.fields??[]),A=M?v?q.some(R=>R.status!=="same")?"changed":"same":"removed":"added";return[{id:m,name:k.name,status:A,fields:q,tags:a.get(m)??[],width:Ze,height:st(q),...k.questions===void 0?{}:{questions:k.questions}}]}),o=new Map(r.map(m=>[m.id,m])),d=rt(t),l=rt(s),g=[...new Set([...d,...l].map(m=>m.id))].flatMap(m=>{const M=d.find(P=>P.id===m),v=l.find(P=>P.id===m),k=v??M;if(!k)return[];const q=o.get(k.from),A=o.get(k.to);if(!q||!A)return[];const R=M?v?"same":"removed":"added";return[{id:m,from:k.from,to:k.to,sourceField:k.sourceField,targetField:k.targetField,status:R,tags:[],fromPort:`${m}:out`,toPort:`${m}:in`}]}),c=m=>{const M={},v={};for(const k of g)k.from===m.id&&(M[`${k.id}:out`]={x:Ze,y:nt(m.fields,k.sourceField)}),k.to===m.id&&(v[`${k.id}:in`]={x:0,y:nt(m.fields,k.targetField)});return{out:M,in:v}};return{nodes:r.map(m=>{const M=c(m);return{...m,ports:{...M.out,...M.in}}}),edges:g}},pn=N`
1331
- .er-search {
1332
- display: flex;
1333
- align-items: center;
1334
- gap: 6px;
1335
- }
1336
-
1337
- .er-search .dpk-input {
1338
- width: 150px;
1339
- min-height: 26px;
1340
- font-size: 11px;
1341
- }
1342
-
1343
- .er-table {
1344
- display: flex;
1345
- flex-direction: column;
1346
- border: 1px solid var(--dpk-rule-strong);
1347
- border-radius: var(--dpk-radius-sm);
1348
- background: var(--dpk-paper-raised);
1349
- box-shadow: var(--dpk-shadow-xs);
1350
- overflow: hidden;
1351
- cursor: default;
1352
- }
1353
-
1354
- .er-table.is-added {
1355
- border-color: color-mix(in srgb, var(--dpk-green) 55%, transparent);
1356
- }
1357
-
1358
- .er-table.is-removed {
1359
- border-color: color-mix(in srgb, var(--dpk-accent) 55%, transparent);
1360
- }
1361
-
1362
- .er-table.is-changed {
1363
- border-color: color-mix(in srgb, var(--dpk-amber) 55%, transparent);
1364
- }
1365
-
1366
- .er-table.is-selected {
1367
- border-color: var(--dpk-blue);
1368
- box-shadow: 0 0 0 3px var(--dpk-blue-soft);
1369
- }
1370
-
1371
- .er-table.is-related {
1372
- border-color: color-mix(in srgb, var(--dpk-green) 50%, transparent);
1373
- }
1374
-
1375
- .er-head {
1376
- display: grid;
1377
- grid-template-columns: auto minmax(0, 1fr) auto;
1378
- grid-template-areas:
1379
- 'mark name status'
1380
- 'mark label status';
1381
- align-items: center;
1382
- gap: 1px 8px;
1383
- width: 100%;
1384
- min-height: 42px;
1385
- padding: 7px 11px;
1386
- border: 0;
1387
- border-bottom: 1px solid var(--dpk-rule);
1388
- border-radius: 0;
1389
- background: var(--dpk-paper);
1390
- text-align: left;
1391
- cursor: pointer;
1392
- }
1393
-
1394
- .er-head:hover {
1395
- background: var(--dpk-paper-sunken);
1396
- }
1397
-
1398
- .er-table:has(> .diagram-comment-trigger) .er-head {
1399
- padding-right: 46px;
1400
- }
1401
-
1402
- .er-table > .diagram-comment-trigger {
1403
- position: absolute;
1404
- top: 8px;
1405
- right: 8px;
1406
- }
1407
-
1408
- .er-table:hover,
1409
- .er-table:focus-within,
1410
- .er-edge:hover,
1411
- .er-edge:focus-within {
1412
- opacity: 1;
1413
- }
1414
-
1415
- .er-mark {
1416
- grid-area: mark;
1417
- display: grid;
1418
- place-items: center;
1419
- width: 16px;
1420
- height: 16px;
1421
- border-radius: 3px;
1422
- font-family: var(--dpk-mono);
1423
- font-size: 10px;
1424
- }
1425
-
1426
- .er-table.is-added .er-mark {
1427
- background: var(--dpk-green-soft);
1428
- color: var(--dpk-green);
1429
- }
1430
-
1431
- .er-table.is-removed .er-mark {
1432
- background: var(--dpk-accent-soft);
1433
- color: var(--dpk-accent);
1434
- }
1435
-
1436
- .er-table.is-changed .er-mark {
1437
- background: var(--dpk-amber-soft);
1438
- color: var(--dpk-amber);
1439
- }
1440
-
1441
- .er-name {
1442
- grid-area: name;
1443
- font-family: var(--dpk-mono);
1444
- font-size: 12px;
1445
- font-weight: 640;
1446
- letter-spacing: -0.01em;
1447
- white-space: nowrap;
1448
- overflow: hidden;
1449
- text-overflow: ellipsis;
1450
- }
1451
-
1452
- .er-label {
1453
- grid-area: label;
1454
- font-size: 9.5px;
1455
- color: var(--dpk-ink-faint);
1456
- white-space: nowrap;
1457
- overflow: hidden;
1458
- text-overflow: ellipsis;
1459
- }
1460
-
1461
- .er-status {
1462
- grid-area: status;
1463
- font-size: 8.5px;
1464
- text-align: right;
1465
- }
1466
-
1467
- .er-fields {
1468
- display: flex;
1469
- flex-direction: column;
1470
- }
1471
-
1472
- .er-field {
1473
- display: grid;
1474
- grid-template-columns: 14px 26px minmax(0, 1fr) auto;
1475
- align-items: center;
1476
- gap: 6px;
1477
- padding: 0 10px;
1478
- border-bottom: 1px solid var(--dpk-rule);
1479
- font-size: 10.5px;
1480
- }
1481
-
1482
- .er-field:last-child {
1483
- border-bottom: 0;
1484
- }
1485
-
1486
- .er-field.is-added {
1487
- background: color-mix(in srgb, var(--dpk-green) 7%, transparent);
1488
- }
1489
-
1490
- .er-field.is-removed {
1491
- background: color-mix(in srgb, var(--dpk-accent) 7%, transparent);
1492
- text-decoration: line-through;
1493
- color: var(--dpk-ink-faint);
1494
- }
1495
-
1496
- .er-field.is-changed {
1497
- background: color-mix(in srgb, var(--dpk-amber) 7%, transparent);
1498
- }
1499
-
1500
- .er-field.is-match {
1501
- box-shadow: inset 2px 0 0 var(--dpk-blue);
1502
- }
1503
-
1504
- .er-field-mark {
1505
- font-family: var(--dpk-mono);
1506
- font-size: 10px;
1507
- text-align: center;
1508
- }
1509
-
1510
- .er-field.is-added .er-field-mark {
1511
- color: var(--dpk-green);
1512
- }
1513
-
1514
- .er-field.is-removed .er-field-mark {
1515
- color: var(--dpk-accent);
1516
- }
1517
-
1518
- .er-field.is-changed .er-field-mark {
1519
- color: var(--dpk-amber);
1520
- }
1521
-
1522
- .er-key {
1523
- display: grid;
1524
- place-items: center;
1525
- border-radius: 3px;
1526
- background: var(--dpk-paper-inset);
1527
- font-family: var(--dpk-mono);
1528
- font-size: 8.5px;
1529
- color: var(--dpk-ink-faint);
1530
- }
1531
-
1532
- .er-key[data-empty='true'] {
1533
- background: transparent;
1534
- }
1535
-
1536
- .er-field-name {
1537
- font-family: var(--dpk-mono);
1538
- white-space: nowrap;
1539
- overflow: hidden;
1540
- text-overflow: ellipsis;
1541
- }
1542
-
1543
- .er-field-type {
1544
- font-size: 9.5px;
1545
- color: var(--dpk-ink-faint);
1546
- white-space: nowrap;
1547
- }
1548
-
1549
- .er-change {
1550
- display: flex;
1551
- flex-direction: column;
1552
- align-items: flex-end;
1553
- font-size: 9px;
1554
- line-height: 1.6;
1555
- white-space: nowrap;
1556
- text-align: right;
1557
- }
1558
-
1559
- .er-change del {
1560
- color: var(--dpk-accent);
1561
- text-decoration: line-through;
1562
- }
1563
-
1564
- .er-change ins {
1565
- color: var(--dpk-green);
1566
- text-decoration: none;
1567
- }
1568
-
1569
- .er-edge .d-edge-path {
1570
- stroke-width: 1.5;
1571
- }
1572
-
1573
- .er-edge.is-added .d-edge-path {
1574
- stroke: var(--dpk-green);
1575
- }
1576
-
1577
- .er-edge.is-removed .d-edge-path {
1578
- stroke: var(--dpk-accent);
1579
- stroke-dasharray: 5 4;
1580
- }
1581
-
1582
- .er-edge.is-selected .d-edge-path {
1583
- stroke: var(--dpk-blue);
1584
- stroke-width: 2.6;
1585
- }
1586
-
1587
- .er-cardinality {
1588
- font-family: var(--dpk-mono);
1589
- font-size: 10px;
1590
- fill: var(--dpk-ink-faint);
1591
- paint-order: stroke;
1592
- stroke: var(--dpk-paper-raised);
1593
- stroke-width: 4px;
1594
- }
1595
-
1596
- .er-cardinality.is-added {
1597
- fill: var(--dpk-green);
1598
- }
1599
-
1600
- .er-cardinality.is-removed {
1601
- fill: var(--dpk-accent);
1602
- }
1603
-
1604
- .diagram-legend .er-swatch-added {
1605
- border-color: var(--dpk-green);
1606
- }
1607
-
1608
- .diagram-legend .er-swatch-removed {
1609
- border-color: var(--dpk-accent);
1610
- }
1611
-
1612
- .diagram-legend .er-swatch-changed {
1613
- border-color: var(--dpk-amber);
1614
- }
1615
-
1616
- #er-neutral .diagram-arrow {
1617
- fill: var(--dpk-rule-strong);
1618
- stroke: var(--dpk-rule-strong);
1619
- }
1620
-
1621
- #er-added .diagram-arrow {
1622
- fill: var(--dpk-green);
1623
- stroke: var(--dpk-green);
1624
- }
1625
-
1626
- #er-removed .diagram-arrow {
1627
- fill: var(--dpk-accent);
1628
- stroke: var(--dpk-accent);
1629
- }
1630
-
1631
- #er-selected .diagram-arrow {
1632
- fill: var(--dpk-blue);
1633
- stroke: var(--dpk-blue);
1634
- }
1635
- `,un=[{id:"er-neutral"},{id:"er-added"},{id:"er-removed"},{id:"er-selected"}],it={same:"\u5909\u66F4\u306A\u3057",added:"\u8FFD\u52A0",removed:"\u524A\u9664",changed:"\u5909\u66F4"},at={same:"",added:"+",removed:"\u2212",changed:"~"};class ot extends Z{static{this.styles=[V,pn]}#e="";parseData(e){return cn(e)}emptyData(){return dn()}defaultHeading(){return"ERD"}statsLabels(){return{node:"\u30C6\u30FC\u30D6\u30EB",edge:"\u95A2\u9023"}}emptyMessage(){return"\u8A72\u5F53\u3059\u308B\u30C6\u30FC\u30D6\u30EB\u306F\u3042\u308A\u307E\u305B\u3093\u3002"}layoutOptions(){return{nodeSpacing:38,layerSpacing:96,padding:32}}matchesFilter(e){return this.#e===""?!0:[e.id,e.name,...e.fields.map(t=>t.id)].some(t=>t.toLowerCase().includes(this.#e))}relations(e,t){if(e===null||e.kind!=="node")return H;const s=U(t.edges,e.id,"outgoing",!1),n=U(t.edges,e.id,"incoming",!1);return{nodes:new Map([...s.nodes,...n.nodes]),edges:new Set([...s.edges,...n.edges])}}renderToolbarActions(){return h`
1636
- <label class="er-search">
1637
- <span class="dpk-label">検索</span>
1638
- <input
1639
- class="dpk-input"
1640
- type="search"
1641
- placeholder="table / field"
1642
- .value=${this.#e}
1643
- @input=${e=>{const t=e.currentTarget;t instanceof HTMLInputElement&&(this.#e=t.value.trim().toLowerCase(),this.requestUpdate())}}
1644
- />
1645
- </label>
1646
- `}renderLegend(){return h`<div class="diagram-legend">
1647
- <span><i class="er-swatch-added"></i>追加</span>
1648
- <span><i class="er-swatch-removed"></i>削除</span>
1649
- <span><i class="er-swatch-changed"></i>変更</span>
1650
- </div>`}#s(e){const t=this.selection;return t!==null&&t.kind==="edge"?"er-selected":e==="added"?"er-added":e==="removed"?"er-removed":"er-neutral"}renderCanvas(){const e=this.visible,t=e.edges.map(s=>{const n=this.edgeState(s.id),a=this.routeOf(s.id),r=J(a),o=()=>this.select({kind:"edge",id:s.id});return I`
1651
- <g class=${this.elementClass(n,"d-edge","er-edge",`is-${s.status}`)} data-relation=${s.id}>
1652
- <title>${`${s.from}.${s.sourceField} \u2192 ${s.to}.${s.targetField}`}</title>
1653
- <path class="d-edge-path" d=${r} marker-end=${`url(#${this.#s(s.status)})`}></path>
1654
- <path
1655
- class="d-edge-hit"
1656
- d=${r}
1657
- role="button"
1658
- tabindex="0"
1659
- aria-label=${`${s.from} \u3068 ${s.to} \u306E\u95A2\u9023`}
1660
- @click=${o}
1661
- @keydown=${d=>{d.key!=="Enter"&&d.key!==" "||(d.preventDefault(),o())}}
1662
- ></path>
1663
- ${a.length>0?this.#n(a,s.status):w}
1664
- ${this.renderEdgeCommentTrigger({kind:"edge",id:s.id},`${s.from}.${s.sourceField} \u2192 ${s.to}.${s.targetField}`,a)}
1665
- </g>
1666
- `});return h`${this.renderEdges(t,un)}${e.nodes.map(s=>this.#t(s))}`}#n(e,t){const s=e[0],n=e.at(-1);return!s||!n?h``:I`
1667
- <text class="er-cardinality is-${t}" x=${s.x+9} y=${s.y-5}>1</text>
1668
- <text class="er-cardinality is-${t}" x=${n.x-13} y=${n.y-5}>N</text>
1669
- `}#t(e){const t=this.placedNode(e.id);if(!t)return w;const s=this.nodeState(e.id);return h`
1670
- <div
1671
- class=${this.elementClass(s,"d-node","er-table",`is-${e.status}`)}
1672
- data-er-table=${e.id}
1673
- data-grill-questions=${this.questionsOf(e)}
1674
- style="left:${t.x}px; top:${t.y}px; width:${e.width}px; height:${st(e.fields)}px"
1675
- >
1676
- <button
1677
- type="button"
1678
- class="er-head"
1679
- data-table=${e.id}
1680
- aria-pressed=${s.selected?"true":"false"}
1681
- title=${`${e.id} / ${e.name}`}
1682
- @click=${()=>this.select({kind:"node",id:e.id})}
1683
- >
1684
- ${e.status==="same"?w:h`<span class="er-mark" aria-hidden="true">${at[e.status]}</span>`}
1685
- <span class="er-name">${e.id}</span>
1686
- <span class="er-label">${e.name}</span>
1687
- <span class="dpk-label er-status">${it[e.status]}</span>
1688
- </button>
1689
- ${this.renderCommentTrigger({kind:"node",id:e.id},`${e.id} \xB7 ${e.name}`)}
1690
- <div class="er-fields">${e.fields.map(n=>this.#r(n))}</div>
1691
- </div>
1692
- `}#r(e){const t=n=>[n.type,n.key??"\u2014",n.ref??null,n.nullable?"null\u53EF":null].filter(Boolean).join(" \xB7 "),s=this.#e!==""&&e.id.toLowerCase().includes(this.#e);return h`
1693
- <div
1694
- class="er-field is-${e.status} ${s?"is-match":""}"
1695
- style="height:${ne(e)}px"
1696
- data-grill-questions=${this.questionsOf(e)}
1697
- title=${[it[e.status],e.id,t(e)].filter(Boolean).join(" / ")}
1698
- >
1699
- <span class="er-field-mark" aria-hidden="true">${at[e.status]}</span>
1700
- <span class="er-key" data-empty=${e.key===null?"true":"false"}>${e.key??"\xB7"}</span>
1701
- <span class="er-field-name">${e.id}</span>
1702
- ${e.status==="changed"&&e.before!==null?h`<span class="er-change">
1703
- <del>− ${t(e.before)}</del>
1704
- <ins>+ ${t(e)}</ins>
1705
- </span>`:h`<span class="er-field-type">${t(e)}</span>`}
1706
- </div>
1707
- `}}const dt=()=>{customElements.get("dpk-component-er-diagram")||customElements.define("dpk-component-er-diagram",ot)},lt={width:220,height:112},re=26,hn=C({src:$(p(),S(1)),alt:$(p(),S(1)),license:b(p())}),mn=C({id:$(p(),S(1)),name:$(p(),S(1)),description:b(p()),boundary:b(p()),symbol:b(p()),tags:b(z(p()),[]),artwork:b(hn),position:C({x:X(),y:X()}),questions:b(p())}),gn=C({id:$(p(),S(1)),label:$(p(),S(1)),kind:b(F(["internal","external"]),"internal")}),fn=C({id:$(p(),S(1)),from:$(p(),S(1)),to:$(p(),S(1)),label:b(p())}),bn=C({boundaries:b(z(gn),[]),services:z(mn),links:b(z(fn),[])}),kn=()=>({nodes:[],edges:[],boundaries:[]}),xn=i=>{const e=B(bn,i),t=new Set;for(const o of e.boundaries){if(t.has(o.id))throw new Error(`duplicate boundary id: ${o.id}`);t.add(o.id)}const s=new Set,n=e.services.map(o=>{if(s.has(o.id))throw new Error(`duplicate service id: ${o.id}`);if(s.add(o.id),o.boundary!==void 0&&!t.has(o.boundary))throw new Error(`unknown boundary: ${o.boundary}`);return{id:o.id,name:o.name,description:o.description??null,boundary:o.boundary??null,symbol:o.symbol??null,artwork:o.artwork?{src:o.artwork.src,alt:o.artwork.alt,license:o.artwork.license??null}:null,tags:o.tags,width:lt.width,height:lt.height,position:o.position,...o.questions===void 0?{}:{questions:o.questions}}}),a=new Set,r=e.links.map(o=>{if(a.has(o.id))throw new Error(`duplicate link id: ${o.id}`);if(a.add(o.id),!s.has(o.from))throw new Error(`unknown link source: ${o.from}`);if(!s.has(o.to))throw new Error(`unknown link target: ${o.to}`);return{id:o.id,from:o.from,to:o.to,label:o.label??null,tags:[]}});return{nodes:n,edges:r,boundaries:e.boundaries.map(o=>({id:o.id,label:o.label,kind:o.kind}))}},be={left:re,top:re*1.6,right:re,bottom:re},vn={left:0,top:0,right:0,bottom:0},yn=12,ct=i=>({left:Math.min(...i.map(e=>e.position?.x??0)),top:Math.min(...i.map(e=>e.position?.y??0)),right:Math.max(...i.map(e=>(e.position?.x??0)+e.width)),bottom:Math.max(...i.map(e=>(e.position?.y??0)+e.height))}),wn=(i,e,t,s)=>{const n=i.left-e.left<t.right+s.right&&t.left-s.left<i.right+e.right,a=i.top-e.top<t.bottom+s.bottom&&t.top-s.top<i.bottom+e.bottom;if(!n||!a)return e;const r=Math.max(t.left-i.right,i.left-t.right),o=Math.max(t.top-i.bottom,i.top-t.bottom);if(r<0&&o<0)return e;const d=(l,f,g)=>l===0?0:Math.max(0,g-yn)*l/(l+f);return r>=o?t.left>=i.right?{...e,right:Math.min(e.right,d(e.right,s.left,r))}:{...e,left:Math.min(e.left,d(e.left,s.right,r))}:t.top>=i.bottom?{...e,bottom:Math.min(e.bottom,d(e.bottom,s.top,o))}:{...e,top:Math.min(e.top,d(e.top,s.bottom,o))}},$n=(i,e)=>{const t=e.flatMap(n=>{const a=i.filter(r=>r.boundary===n.id);return a.length===0?[]:[{boundary:n,bounds:ct(a)}]}),s=[...t.map(n=>({id:n.boundary.id,bounds:n.bounds,padding:be})),...i.filter(n=>n.boundary===null||!t.some(a=>a.boundary.id===n.boundary)).map(n=>({id:null,bounds:ct([n]),padding:vn}))];return t.map(({boundary:n,bounds:a})=>{const r=s.filter(l=>l.id!==n.id).map(l=>wn(a,be,l.bounds,l.padding)).reduce((l,f)=>({left:Math.min(l.left,f.left),top:Math.min(l.top,f.top),right:Math.min(l.right,f.right),bottom:Math.min(l.bottom,f.bottom)}),be),o=a.left-r.left,d=a.top-r.top;return{boundary:n,x:o,y:d,width:a.right+r.right-o,height:a.bottom+r.bottom-d}})},Sn=(i,e)=>{const t=a=>a.y+a.height/2,s=a=>a.x+a.width/2,n=(a,r,o)=>{if(o?a.y===r.y:a.x===r.x)return[a,r];if(o){const l=(a.x+r.x)/2;return[a,{x:l,y:a.y},{x:l,y:r.y},r]}const d=(a.y+r.y)/2;return[a,{x:a.x,y:d},{x:r.x,y:d},r]};return e.x>=i.x+i.width?n({x:i.x+i.width,y:t(i)},{x:e.x,y:t(e)},!0):i.x>=e.x+e.width?n({x:i.x,y:t(i)},{x:e.x+e.width,y:t(e)},!0):e.y>=i.y+i.height?n({x:s(i),y:i.y+i.height},{x:s(e),y:e.y},!1):i.y>=e.y+e.height?n({x:s(i),y:i.y},{x:s(e),y:e.y+e.height},!1):null},Mn=(i,e)=>{const t=new Map(i.nodes.map(n=>[n.id,n])),s=i.routes.map(n=>{const a=e.find(l=>l.id===n.id),r=a?t.get(a.from):void 0,o=a?t.get(a.to):void 0,d=r&&o&&r!==o?Sn(r,o):null;return d===null?n:{id:n.id,points:d}});return{...i,routes:s}},qn=N`
1708
- .arch-toggle {
1709
- min-height: 26px;
1710
- padding: 0 9px;
1711
- font-size: 10.5px;
1712
- }
1713
-
1714
- .arch-toggle[aria-pressed='true'] {
1715
- border-color: color-mix(in srgb, var(--dpk-blue) 40%, transparent);
1716
- background: var(--dpk-blue-soft);
1717
- color: var(--dpk-blue);
1718
- }
1719
-
1720
- .arch-boundary {
1721
- position: absolute;
1722
- border: 1px dashed var(--dpk-rule-strong);
1723
- border-radius: var(--dpk-radius-lg);
1724
- background: color-mix(in srgb, var(--dpk-blue) 3%, transparent);
1725
- pointer-events: none;
1726
- }
1727
-
1728
- .arch-boundary.is-external {
1729
- border-color: color-mix(in srgb, var(--dpk-amber) 45%, transparent);
1730
- background: color-mix(in srgb, var(--dpk-amber) 4%, transparent);
1731
- }
1732
-
1733
- .arch-boundary span {
1734
- position: absolute;
1735
- top: 9px;
1736
- left: 14px;
1737
- font-family: var(--dpk-mono);
1738
- font-size: 9px;
1739
- letter-spacing: 0.1em;
1740
- text-transform: uppercase;
1741
- color: var(--dpk-ink-faint);
1742
- }
1743
-
1744
- .arch-service {
1745
- display: grid;
1746
- grid-template-columns: 38px minmax(0, 1fr);
1747
- gap: 10px;
1748
- align-items: start;
1749
- padding: 14px 13px;
1750
- border: 1px solid var(--dpk-rule-strong);
1751
- border-radius: var(--dpk-radius-sm);
1752
- background: var(--dpk-paper-raised);
1753
- box-shadow: var(--dpk-shadow-xs);
1754
- text-align: left;
1755
- overflow: hidden;
1756
- }
1757
-
1758
- .arch-service:hover {
1759
- border-color: var(--dpk-blue);
1760
- }
1761
-
1762
- .arch-service.is-selected {
1763
- border-color: var(--dpk-blue);
1764
- box-shadow: 0 0 0 3px var(--dpk-blue-soft);
1765
- }
1766
-
1767
- .arch-service.is-related {
1768
- border-color: color-mix(in srgb, var(--dpk-green) 55%, transparent);
1769
- background: var(--dpk-green-soft);
1770
- }
1771
-
1772
- .arch-artwork {
1773
- width: 38px;
1774
- height: 38px;
1775
- object-fit: contain;
1776
- }
1777
-
1778
- .arch-symbol {
1779
- display: grid;
1780
- place-items: center;
1781
- width: 38px;
1782
- height: 38px;
1783
- border-radius: var(--dpk-radius-xs);
1784
- background: var(--dpk-paper-inset);
1785
- color: var(--dpk-ink-faint);
1786
- font-family: var(--dpk-mono);
1787
- font-size: 12px;
1788
- }
1789
-
1790
- .arch-body {
1791
- display: flex;
1792
- flex-direction: column;
1793
- gap: 6px;
1794
- min-width: 0;
1795
- }
1796
-
1797
- .arch-name {
1798
- font-size: 13px;
1799
- font-weight: 640;
1800
- letter-spacing: -0.01em;
1801
- white-space: nowrap;
1802
- overflow: hidden;
1803
- text-overflow: ellipsis;
1804
- }
1805
-
1806
- .arch-description {
1807
- font-size: 10px;
1808
- line-height: 1.6;
1809
- color: var(--dpk-ink-faint);
1810
- display: -webkit-box;
1811
- -webkit-line-clamp: 3;
1812
- -webkit-box-orient: vertical;
1813
- overflow: hidden;
1814
- }
1815
-
1816
- .arch-link .d-edge-path {
1817
- stroke: var(--dpk-rule-strong);
1818
- stroke-width: 1.5;
1819
- }
1820
-
1821
- .arch-link.is-related .d-edge-path {
1822
- stroke: var(--dpk-green);
1823
- stroke-width: 2;
1824
- }
1825
-
1826
- .arch-link.is-selected .d-edge-path {
1827
- stroke: var(--dpk-blue);
1828
- stroke-width: 2.4;
1829
- }
1830
-
1831
- .arch-link-label {
1832
- font-size: 9.5px;
1833
- fill: var(--dpk-ink-faint);
1834
- paint-order: stroke;
1835
- stroke: var(--dpk-paper-raised);
1836
- stroke-width: 5px;
1837
- stroke-linejoin: round;
1838
- }
1839
-
1840
- #arch-neutral .diagram-arrow {
1841
- fill: var(--dpk-rule-strong);
1842
- stroke: var(--dpk-rule-strong);
1843
- }
1844
-
1845
- #arch-selected .diagram-arrow {
1846
- fill: var(--dpk-blue);
1847
- stroke: var(--dpk-blue);
1848
- }
1849
- `,En=[{id:"arch-neutral"},{id:"arch-selected"}];class pt extends Z{static{this.styles=[V,qn]}#e=!0;parseData(e){return xn(e)}emptyData(){return kn()}defaultHeading(){return"Architecture"}statsLabels(){return{node:"\u30B5\u30FC\u30D3\u30B9",edge:"\u63A5\u7D9A"}}emptyMessage(){return"\u8A72\u5F53\u3059\u308B\u30B5\u30FC\u30D3\u30B9\u306F\u3042\u308A\u307E\u305B\u3093\u3002"}get layoutMode(){return"fixed"}layoutOptions(){return{padding:40}}computePlacement(e){return Mn(super.computePlacement(e),e.edges)}isEmpty(){return this.visible.nodes.length===0}contentSize(){const e=super.contentSize();if(e===null)return null;const t=this.#s();return t.length===0?e:{width:Math.max(e.width,...t.map(s=>s.x+s.width)),height:Math.max(e.height,...t.map(s=>s.y+s.height))}}relations(e,t){if(e===null||e.kind!=="node")return H;const s=U(t.edges,e.id,"outgoing",!1),n=U(t.edges,e.id,"incoming",!1);return{nodes:new Map([...s.nodes,...n.nodes]),edges:new Set([...s.edges,...n.edges])}}renderToolbarActions(){return h`
1850
- <button
1851
- type="button"
1852
- class="dpk-btn dpk-btn--ghost arch-toggle"
1853
- data-toggle="boundaries"
1854
- aria-pressed=${this.#e?"true":"false"}
1855
- @click=${()=>{this.#e=!this.#e,this.requestUpdate()}}
1856
- >
1857
- 境界
1858
- </button>
1859
- `}#s(){const e=this.visible.nodes.flatMap(t=>{const s=this.placedNode(t.id);return s?[{...t,position:{x:s.x,y:s.y}}]:[]});return $n(e,this.items().boundaries)}renderCanvas(){const e=this.visible,t=n=>e.nodes.find(a=>a.id===n)?.name??n,s=e.edges.map(n=>{const a=this.edgeState(n.id),r=this.routeOf(n.id),o=J(r),d=()=>this.select({kind:"edge",id:n.id});return I`
1860
- <g class=${this.elementClass(a,"d-edge","arch-link")} data-link=${n.id}>
1861
- <title>${n.label??n.id}</title>
1862
- <path
1863
- class="d-edge-path"
1864
- d=${o}
1865
- marker-end=${`url(#${a.selected?"arch-selected":"arch-neutral"})`}
1866
- ></path>
1867
- <path
1868
- class="d-edge-hit"
1869
- d=${o}
1870
- role="button"
1871
- tabindex="0"
1872
- aria-label=${`${t(n.from)} \u304B\u3089 ${t(n.to)} \u3078\u306E\u63A5\u7D9A`}
1873
- @click=${d}
1874
- @keydown=${l=>{l.key!=="Enter"&&l.key!==" "||(l.preventDefault(),d())}}
1875
- ></path>
1876
- ${n.label===null||r.length===0?w:this.#n(n.label,r)}
1877
- ${this.renderEdgeCommentTrigger({kind:"edge",id:n.id},`${t(n.from)} \u2192 ${t(n.to)}${n.label===null?"":` \xB7 ${n.label}`}`,r)}
1878
- </g>
1879
- `});return h`
1880
- ${this.#e?this.#s().map(n=>h`<div
1881
- class=${`arch-boundary ${n.boundary.kind==="external"?"is-external":""}`}
1882
- data-boundary=${n.boundary.id}
1883
- style="left:${n.x}px; top:${n.y}px; width:${n.width}px; height:${n.height}px"
1884
- >
1885
- <span>${n.boundary.label}</span>
1886
- </div>`):w}
1887
- ${this.renderEdges(s,En)} ${e.nodes.map(n=>this.#t(n))}
1888
- `}#n(e,t){const s=t[Math.floor(t.length/2)]??t[0];return s?I`<text class="arch-link-label" x=${s.x} y=${s.y-6}>${e}</text>`:h``}#t(e){const t=this.placedNode(e.id);if(!t)return w;const s=this.nodeState(e.id);return h`
1889
- <button
1890
- type="button"
1891
- class=${this.elementClass(s,"d-node","arch-service")}
1892
- data-service=${e.id}
1893
- data-grill-questions=${this.questionsOf(e)}
1894
- style="left:${t.x}px; top:${t.y}px; width:${e.width}px; height:${e.height}px"
1895
- aria-pressed=${s.selected?"true":"false"}
1896
- title=${e.description??e.name}
1897
- @click=${()=>this.select({kind:"node",id:e.id})}
1898
- >
1899
- ${e.artwork===null?h`<span class="arch-symbol" aria-hidden="true">${e.symbol??e.name.slice(0,2)}</span>`:h`<img
1900
- class="arch-artwork"
1901
- src=${e.artwork.src}
1902
- alt=${e.artwork.alt}
1903
- title=${e.artwork.license===null?w:`\u30A2\u30A4\u30B3\u30F3\u51FA\u5178: ${e.artwork.license}`}
1904
- />`}
1905
- <span class="arch-body">
1906
- <span class="arch-name">${e.name}</span>
1907
- ${e.description===null?w:h`<span class="arch-description">${e.description}</span>`}
1908
- </span>
1909
- </button>
1910
- ${this.renderCommentTrigger({kind:"node",id:e.id},e.name,{x:t.x+e.width-20,y:t.y-14})}
1911
- `}}const ut=()=>{customElements.get("dpk-component-architecture-map")||customElements.define("dpk-component-architecture-map",pt)},ht=[72,52,40],mt=[0,22,10,8],Cn=i=>ht[Math.min(i,ht.length-1)]??40,gt=i=>mt[Math.min(i,mt.length-1)]??8,Dn=(i,e={})=>{const t=e.padding??40,s=i.nodes.find(x=>x.parent===null);if(s===void 0)return{width:0,height:0,nodes:[],routes:[]};const n=new Map(i.nodes.map(x=>[x.id,x])),a=x=>x.children.flatMap(D=>{const T=n.get(D);return T===void 0?[]:[T]}),r=new Map,o=x=>x.reduce((D,T,j)=>D+d(T)+(j===0?0:gt(T.depth)),0),d=x=>{const D=r.get(x.id);if(D!==void 0)return D;const T=Math.max(x.height,o(a(x)));return r.set(x.id,T),T},l=[],f=(x,D,T)=>{if(D.length===0)return;const j=Cn(x.node.depth);let u=x.y+x.node.height/2-o(D)/2;for(const y of D){const E=d(y),O={x:T==="right"?x.x+x.node.width+j:x.x-j-y.width,y:u+E/2-y.height/2,node:y};l.push(O),f(O,a(y),T),u+=E+gt(y.depth)}},g={x:-s.width/2,y:-s.height/2,node:s};l.push(g);const c=a(s);f(g,c.filter(x=>x.side!=="left"),"right"),f(g,c.filter(x=>x.side==="left"),"left");const m=Math.min(...l.map(x=>x.x)),M=Math.min(...l.map(x=>x.y)),v=Math.max(...l.map(x=>x.x+x.node.width)),k=Math.max(...l.map(x=>x.y+x.node.height)),q=t-m,A=t-M,R=new Map,P=l.map(x=>{const D=R.get(x.node.depth)??0;return R.set(x.node.depth,D+1),{id:x.node.id,x:x.x+q,y:x.y+A,width:x.node.width,height:x.node.height,layer:x.node.depth,order:D}}),_=new Map(P.map(x=>[x.id,x])),ee=i.edges.flatMap(x=>{const D=_.get(x.from),T=_.get(x.to),j=n.get(x.to);if(D===void 0||T===void 0||j===void 0)return[];const u=j.side==="left",y={x:u?D.x:D.x+D.width,y:D.y+D.height/2},E={x:u?T.x+T.width:T.x,y:T.y+T.height/2};return[{id:x.id,points:[y,E]}]});return{width:v-m+t*2,height:k-M+t*2,nodes:P,routes:ee}},zn=i=>{const e=i[0],t=i.at(-1);if(e===void 0||t===void 0)return"";const s=(t.x-e.x)/2;return`M${e.x} ${e.y} C${e.x+s} ${e.y} ${t.x-s} ${t.y} ${t.x} ${t.y}`},ft=Nt(()=>C({id:$(p(),S(1)),label:$(p(),S(1)),description:b(p()),tags:b(z(p())),questions:b(p()),collapsed:b(oe()),side:b(F(["left","right"])),children:b(z(ft))})),An=C({root:ft}),bt=()=>({root:null,nodes:[],edges:[]}),kt=[{fontSize:16,padding:22,height:48,min:120,max:280},{fontSize:13.5,padding:15,height:34,min:80,max:240},{fontSize:12.5,padding:12,height:28,min:56,max:220}],Tn=i=>kt[Math.min(i,kt.length-1)]??{fontSize:12.5,padding:12,height:28,min:56,max:220},Ln=(i,e)=>{let t=0;for(const s of i)t+=(s.codePointAt(0)??0)>=11904?e:e*.62;return t},Rn=(i,e)=>{const t=Tn(e),s=Math.ceil(Ln(i,t.fontSize)+t.padding*2+4);return{width:Math.min(t.max,Math.max(t.min,s)),height:t.height}},ke=i=>i.children===void 0||i.children.length===0?1:i.children.reduce((e,t)=>e+ke(t),0),xt=i=>{const e={left:0,right:0};for(const t of i)t.side!==void 0&&(e[t.side]+=ke(t));return i.map(t=>{if(t.side!==void 0)return t.side;const s=e.right<=e.left?"right":"left";return e[s]+=ke(t),s})},vt=i=>yt(B(An,i).root),yt=(i,e=new Set)=>{const t=[],s=[],n=new Set,a=(r,o,d,l,f)=>{if(n.has(r.id))throw new Error(`duplicate topic id: ${r.id}`);if(n.add(r.id),r.side!==void 0&&d!==1)throw new Error(`side is only allowed on a main topic (a child of the root): ${r.id}`);const g=r.children??[];t.push({id:r.id,label:r.label,description:r.description??null,parent:o,depth:d,branch:l,side:f,children:g.map(m=>m.id),collapsed:r.collapsed??!1,added:e.has(r.id),tags:r.tags??[],...Rn(r.label,d),...r.questions===void 0?{}:{questions:r.questions}}),o!==null&&s.push({id:r.id,from:o,to:r.id,tags:[]});const c=d===0?xt(g):[];g.forEach((m,M)=>a(m,r.id,d+1,d===0?M:l,d===0?c[M]??"right":f))};return a(i,null,0,-1,null),{root:i,nodes:t,edges:s}},wt="ADD_TOPIC",On=le({id:$(p(),S(1)),label:$(p(),we(),S(1))}),In=i=>{const e=Le(i);return e?.length===3&&e[1]==="node"?e[2]??null:null},$t=(i,e,t)=>i.id===e?{...i,children:[...i.children??[],t]}:i.children===void 0?i:{...i,children:i.children.map(s=>$t(s,e,t))},Pn=i=>{if(i.children===void 0)return i;const e=xt(i.children);return{...i,children:i.children.map((t,s)=>({...t,side:e[s]??"right"}))}},Un=(i,e)=>{const t="\u30C8\u30D4\u30C3\u30AF\u3092\u8FFD\u52A0",s=new Map(i.nodes.map(o=>[o.id,o.label])),n=new Set,a=[];let r=i.root===null?null:Pn(i.root);for(const o of e){if(o.type!==wt){a.push({id:o.id,title:o.type,stale:"unsupported-action-type"});continue}const d=In(o.target.id),l=d===null?void 0:s.get(d),f=de(On,o.payload);if(r===null||d===null||l===void 0){a.push({id:o.id,title:t,stale:"target-missing"});continue}if(!f.success||s.has(f.output.id)){a.push({id:o.id,title:t,stale:"constraint-violated"});continue}const{id:g,label:c}=f.output;r=$t(r,d,{id:g,label:c}),s.set(g,c),n.add(g),a.push({id:o.id,title:t,summary:`${l} \u203A ${c}`,tone:"create"})}return{data:r===null||n.size===0?i:yt(r,n),results:a}},xe=(i,e)=>{const t=new Map(i.nodes.map(a=>[a.id,a])),s=[];let n=t.get(e)?.parent??null;for(;n!==null&&!s.includes(n);)s.push(n),n=t.get(n)?.parent??null;return s},_n=(i,e)=>{const t=new Map(i.nodes.map(a=>[a.id,a]));let s=0;const n=[...t.get(e)?.children??[]];for(let a=n.pop();a!==void 0;a=n.pop())s+=1,n.push(...t.get(a)?.children??[]);return s},jn=(i,e,t)=>{let s=null;if(e!==null){const r=i.nodes.filter(e);if(r.length===0)return bt();const o=new Map(i.nodes.map(l=>[l.id,l])),d=new Set;for(const l of r){d.add(l.id);for(const g of xe(i,l.id))d.add(g);const f=[...l.children];for(let g=f.pop();g!==void 0;g=f.pop())d.add(g),f.push(...o.get(g)?.children??[])}s=d}const n=i.nodes.filter(r=>(s===null||s.has(r.id))&&!xe(i,r.id).some(o=>t.has(o))),a=new Set(n.map(r=>r.id));return{...i,nodes:n,edges:i.edges.filter(r=>a.has(r.from)&&a.has(r.to))}},Fn=N`
1912
- .branch-root {
1913
- --mind-color: var(--dpk-ink);
1914
- --mind-soft: var(--dpk-paper-sunken);
1915
- }
1916
- .branch-0 {
1917
- --mind-color: var(--dpk-blue);
1918
- --mind-soft: var(--dpk-blue-soft);
1919
- }
1920
- .branch-1 {
1921
- --mind-color: var(--dpk-green);
1922
- --mind-soft: var(--dpk-green-soft);
1923
- }
1924
- .branch-2 {
1925
- --mind-color: var(--dpk-violet);
1926
- --mind-soft: var(--dpk-violet-soft);
1927
- }
1928
- .branch-3 {
1929
- --mind-color: var(--dpk-amber);
1930
- --mind-soft: var(--dpk-amber-soft);
1931
- }
1932
- .branch-4 {
1933
- --mind-color: var(--dpk-accent);
1934
- --mind-soft: var(--dpk-accent-soft);
1935
- }
1936
-
1937
- .mind-topic {
1938
- display: flex;
1939
- align-items: center;
1940
- justify-content: center;
1941
- padding: 0 12px;
1942
- border: 1px solid color-mix(in srgb, var(--mind-color) 45%, transparent);
1943
- border-radius: 999px;
1944
- background: var(--dpk-paper-raised);
1945
- color: var(--dpk-ink);
1946
- font-family: var(--dpk-body);
1947
- font-size: 12.5px;
1948
- line-height: 1.3;
1949
- box-shadow: var(--dpk-shadow-xs);
1950
- }
1951
-
1952
- .mind-label {
1953
- min-width: 0;
1954
- white-space: nowrap;
1955
- overflow: hidden;
1956
- text-overflow: ellipsis;
1957
- }
1958
-
1959
- .mind-topic.depth-0 {
1960
- padding: 0 22px;
1961
- border: 0;
1962
- background: var(--dpk-ink);
1963
- color: var(--dpk-paper-raised);
1964
- font-size: 16px;
1965
- font-weight: 680;
1966
- letter-spacing: -0.01em;
1967
- box-shadow: var(--dpk-shadow-sm);
1968
- }
1969
-
1970
- .mind-topic.depth-1 {
1971
- padding: 0 15px;
1972
- border-width: 1.5px;
1973
- border-color: var(--mind-color);
1974
- background: var(--mind-soft);
1975
- font-size: 13.5px;
1976
- font-weight: 620;
1977
- }
1978
-
1979
- .mind-topic.depth-1 .mind-label {
1980
- color: color-mix(in srgb, var(--mind-color) 70%, var(--dpk-ink));
1981
- }
1982
-
1983
- .mind-topic:hover {
1984
- border-color: var(--mind-color);
1985
- }
1986
-
1987
- .mind-topic.is-selected {
1988
- border-color: var(--mind-color);
1989
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--mind-color) 22%, transparent);
1990
- }
1991
-
1992
- .mind-topic.depth-0.is-selected {
1993
- box-shadow: 0 0 0 3px var(--dpk-blue-soft);
1994
- }
1995
-
1996
- .mind-topic.is-related {
1997
- border-color: var(--mind-color);
1998
- }
1999
-
2000
- .mind-topic:focus-visible {
2001
- outline: none;
2002
- box-shadow: var(--dpk-focus);
2003
- }
2004
-
2005
- /* Added on this page by a draft action: not authored yet. */
2006
- .mind-topic.is-added {
2007
- border-style: dashed;
2008
- border-color: var(--mind-color);
2009
- }
2010
-
2011
- .mind-actions {
2012
- position: absolute;
2013
- z-index: 3;
2014
- display: flex;
2015
- flex-wrap: wrap;
2016
- align-items: center;
2017
- gap: 6px;
2018
- width: 220px;
2019
- }
2020
-
2021
- .mind-actions .dpk-btn {
2022
- padding: 3px 9px;
2023
- font-size: 12px;
2024
- box-shadow: var(--dpk-shadow-xs);
2025
- }
2026
-
2027
- .mind-actions .dpk-input {
2028
- width: 100%;
2029
- font-size: 12.5px;
2030
- box-shadow: var(--dpk-shadow-xs);
2031
- }
2032
-
2033
- .mind-actions-error {
2034
- font-size: 11.5px;
2035
- line-height: 1.4;
2036
- color: var(--dpk-accent);
2037
- }
2038
-
2039
- .mind-branch {
2040
- fill: none;
2041
- stroke: color-mix(in srgb, var(--mind-color) 55%, transparent);
2042
- stroke-width: 1.5;
2043
- stroke-linecap: round;
2044
- cursor: default;
2045
- transition: opacity 150ms ease;
2046
- }
2047
-
2048
- .mind-branch.depth-1 {
2049
- stroke-width: 3;
2050
- }
2051
-
2052
- .mind-branch.depth-2 {
2053
- stroke-width: 2;
2054
- }
2055
-
2056
- .mind-branch.is-related {
2057
- stroke: var(--mind-color);
2058
- }
2059
-
2060
- .mind-toggle {
2061
- position: absolute;
2062
- z-index: 1;
2063
- min-width: 18px;
2064
- height: 18px;
2065
- padding: 0 4px;
2066
- transform: translate(-50%, -50%);
2067
- border: 1.5px solid var(--mind-color);
2068
- border-radius: 999px;
2069
- background: var(--dpk-paper-raised);
2070
- color: var(--mind-color);
2071
- font-family: var(--dpk-mono);
2072
- font-size: 10px;
2073
- font-weight: 700;
2074
- line-height: 1;
2075
- cursor: pointer;
2076
- opacity: 0;
2077
- transition: opacity 120ms ease;
2078
- }
2079
-
2080
- /* Expanded toggles appear with their topic; folded ones always show the count. */
2081
- .mind-topic:hover + .mind-toggle,
2082
- .mind-toggle:hover,
2083
- .mind-toggle:focus-visible,
2084
- .mind-toggle.is-folded {
2085
- opacity: 1;
2086
- }
2087
-
2088
- .mind-toggle.is-dimmed {
2089
- opacity: 0;
2090
- }
2091
-
2092
- .mind-toggle.is-folded.is-dimmed {
2093
- opacity: 0.26;
2094
- }
2095
-
2096
- .mind-toggle:focus-visible {
2097
- outline: none;
2098
- box-shadow: var(--dpk-focus);
2099
- }
2100
-
2101
- @media (hover: none) {
2102
- .mind-toggle {
2103
- opacity: 1;
2104
- }
2105
- }
2106
- `,Hn=5;class St extends Z{static{this.styles=[V,Fn]}#e=new Set;#s=null;#n=!1;#t=null;toggle(e,t){const s=this.items().nodes.find(a=>a.id===e);if(s===void 0||s.children.length===0)return;const n=t??!this.#e.has(e);if(n!==this.#e.has(e)){if(n){this.#e.add(e);const a=this.selection;a!==null&&xe(this.items(),a.id).includes(e)&&this.select(null)}else this.#e.delete(e);this.requestUpdate()}}get collapsed(){return[...this.#e]}parseData(e){return vt(e)}emptyData(){return bt()}reduceElementActions(e,t){return Un(e,t)}defaultHeading(){return"Mind map"}emptyMessage(){return"\u8A72\u5F53\u3059\u308B\u30C8\u30D4\u30C3\u30AF\u306F\u3042\u308A\u307E\u305B\u3093\u3002"}statsText(){const e=this.items().nodes.length,t=this.filtered().nodes.length;return t===e?`${e} \u30C8\u30D4\u30C3\u30AF`:`${t} / ${e} \u30C8\u30D4\u30C3\u30AF`}filtered(){const e=this.tagFilter,t=e.active.length===0?null:s=>G(s.tags,e);return jn(this.items(),t,this.#e)}layoutSignature(){return this.filtered().nodes.map(e=>`${e.id}<${e.parent??""}:${e.side??""}`).join(",")}computePlacement(e){return Dn(e)}refreshContent(){const e=this.authoredItems();e!==this.#s&&(this.#s=e,this.#e=new Set(e.nodes.filter(t=>t.collapsed).map(t=>t.id)),this.#n=!1,this.#t=null),super.refreshContent()}initialView(){if(this.#n){this.viewport?.apply();return}this.#n=!0,this.viewport?.fit()}commentItems(){return this.items().nodes.map(e=>({value:this.commentRef("node",e.id),label:e.label}))}hasSelection(e){return e.kind==="node"&&this.items().nodes.some(t=>t.id===e.id)}relations(e,t){if(e===null||e.kind!=="node")return{nodes:new Map,edges:new Set};const s=U(t.edges,e.id,"outgoing",!0),n=U(t.edges,e.id,"incoming",!0);return{nodes:new Map([...s.nodes,...n.nodes]),edges:new Set([...s.edges,...n.edges])}}renderSelection(){return w}renderCanvas(){const e=this.filtered();return h`
2107
- ${this.renderEdges(e.edges.map(t=>this.#i(t)),[])}
2108
- ${e.nodes.map(t=>this.#a(t))} ${this.#l()}
2109
- `}#r(e){return e===void 0||e.branch<0?"branch-root":`branch-${e.branch%Hn}`}#i(e){const t=this.items().nodes.find(n=>n.id===e.to),s=this.edgeState(e.id);return I`
2110
- <path
2111
- class=${this.elementClass(s,"d-edge","mind-branch",this.#r(t),`depth-${Math.min(t?.depth??1,3)}`)}
2112
- data-branch=${e.id}
2113
- d=${zn(this.routeOf(e.id))}
2114
- ></path>
2115
- `}#a(e){const t=this.placedNode(e.id);if(!t)return w;const s=this.nodeState(e.id),n=this.#e.has(e.id),a=`depth-${Math.min(e.depth,3)}`;return h`
2116
- <button
2117
- type="button"
2118
- class=${this.elementClass(s,"d-node","mind-topic",a,this.#r(e),n&&"is-folded",e.added&&"is-added")}
2119
- data-topic=${e.id}
2120
- data-grill-questions=${this.questionsOf(e)}
2121
- style="left:${t.x}px; top:${t.y}px; width:${t.width}px; height:${t.height}px"
2122
- aria-pressed=${s.selected?"true":"false"}
2123
- title=${e.description??e.label}
2124
- @click=${()=>this.select({kind:"node",id:e.id})}
2125
- >
2126
- <span class="mind-label">${e.label}</span>
2127
- </button>
2128
- ${e.depth===0||e.children.length===0?w:this.#o(e,t,n,s.dimmed)}
2129
- `}#o(e,t,s,n){const a=s?_n(this.items(),e.id):0,r=e.side==="left"?t.x:t.x+t.width,o=s?`${e.label} \u306E\u30B5\u30D6\u30C8\u30D4\u30C3\u30AF ${a} \u4EF6\u3092\u3072\u3089\u304F`:`${e.label} \u306E\u30B5\u30D6\u30C8\u30D4\u30C3\u30AF\u3092\u305F\u305F\u3080`;return h`
2130
- <button
2131
- type="button"
2132
- class=${this.elementClass({selected:!1,related:!1,dimmed:n,depth:null},"mind-toggle",this.#r(e),s&&"is-folded")}
2133
- data-toggle=${e.id}
2134
- style="left:${r}px; top:${t.y+t.height/2}px"
2135
- aria-expanded=${s?"false":"true"}
2136
- aria-label=${o}
2137
- title=${o}
2138
- @click=${d=>{d.stopPropagation(),this.toggle(e.id)}}
2139
- >
2140
- ${s?a:"\u2212"}
2141
- </button>
2142
- `}#l(){const e=this.selection;if(e===null||e.kind!=="node")return w;const t=this.items().nodes.find(a=>a.id===e.id),s=this.placedNode(e.id);if(t===void 0||s===void 0)return w;const n=this.#t?.parent===t.id?this.#t:null;return h`
2143
- <div
2144
- class="mind-actions"
2145
- data-for=${t.id}
2146
- style="left:${this.#c(t,s)}px; top:${s.y+s.height+8}px"
2147
- @click=${a=>a.stopPropagation()}
2148
- >
2149
- ${n===null?h`
2150
- <button type="button" class="dpk-btn" data-action="add" @click=${()=>this.#h(t.id)}>
2151
- + サブトピック
2152
- </button>
2153
- <button
2154
- type="button"
2155
- class="dpk-btn"
2156
- data-action="comment"
2157
- @click=${()=>this.requestElementComment("node",t.id)}
2158
- >
2159
- コメント
2160
- </button>
2161
- `:h`
2162
- <input
2163
- class="dpk-input"
2164
- aria-label="${t.label} のサブトピック"
2165
- placeholder="サブトピック名(Enter で追加)"
2166
- .value=${n.label}
2167
- @input=${a=>{const r=a.currentTarget;r instanceof HTMLInputElement&&(this.#t={...n,label:r.value,failed:!1})}}
2168
- @keydown=${a=>this.#p(a,t.id)}
2169
- />
2170
- ${n.failed?h`<span class="mind-actions-error" role="alert"
2171
- >記録できませんでした(dpk-template-* 要素の中に置いてください)。</span
2172
- >`:w}
2173
- `}
2174
- </div>
2175
- `}#c(e,t){return e.side==="left"?t.x+t.width-220:t.x}#h(e){this.#t={parent:e,label:"",failed:!1},this.requestUpdate(),this.updateComplete.then(()=>this.renderRoot.querySelector(".mind-actions input")?.focus())}#p(e,t){if(e.isComposing)return;if(e.key==="Escape"){e.preventDefault(),this.#t=null,this.requestUpdate();return}if(e.key!=="Enter")return;e.preventDefault();const s=this.#t?.label.trim()??"";if(s.length===0)return;const n=$e(`topic ${s}`,this.items().nodes.map(r=>r.id));if(!this.dispatchElementAction(wt,["node",t],{id:n,label:s})){this.#t={parent:t,label:s,failed:!0},this.requestUpdate();return}this.#t=null,this.#e.delete(t),this.select({kind:"node",id:n}),this.requestUpdate()}}const Mt=()=>{customElements.get("dpk-component-mind-map")||customElements.define("dpk-component-mind-map",St)},Nn=C({id:$(p(),S(1)),title:$(p(),S(1)),description:b(p()),tags:b(z(p())),assignee:b(p()),questions:b(p())}),Bn=["gray","blue","green","amber","violet","red"],Vn=C({id:$(p(),S(1)),label:$(p(),S(1)),description:b(p()),color:b(F(Bn)),limit:b($(X(),Vt(),Bt(1))),cards:b(z(Nn))}),Wn=C({columns:z(Vn)}),Yn=()=>({columns:[]}),qt=i=>{const e=B(Wn,i),t=new Set,s=new Set;return{columns:e.columns.map(a=>{if(t.has(a.id))throw new Error(`duplicate column id: ${a.id}`);return t.add(a.id),{id:a.id,label:a.label,description:a.description??null,color:a.color??null,limit:a.limit??null,cards:(a.cards??[]).map(r=>{if(s.has(r.id))throw new Error(`duplicate card id: ${r.id}`);return s.add(r.id),{id:r.id,title:r.title,description:r.description??null,tags:r.tags??[],assignee:r.assignee??null,...r.questions===void 0?{}:{questions:r.questions},column:a.id,change:null}})}})}},ie=(i,e)=>i.columns.flatMap(t=>t.cards).find(t=>t.id===e),Q=i=>i.columns.flatMap(e=>e.cards),Gn=(i,e)=>e===null?i:{columns:i.columns.map(t=>({...t,cards:t.cards.filter(e)}))},Kn=(i,e,t,s)=>{const n=ie(i,e);if(n===void 0||n.column!==t)return!1;if(s===e)return!0;const a=i.columns.find(o=>o.id===t)?.cards??[],r=a.findIndex(o=>o.id===e);return(a[r+1]?.id??null)===s},Et="ADD_CARD",Ct="MOVE_CARD",Xn=le({id:$(p(),S(1)),title:$(p(),we(),S(1))}),Jn=le({column:$(p(),S(1)),before:Wt($(p(),S(1)))}),Dt=(i,e)=>{const t=Le(i);return t?.length===3&&t[1]===e?t[2]??null:null},Zn=(i,e)=>({columns:i.columns.map(t=>t.cards.some(s=>s.id===e)?{...t,cards:t.cards.filter(s=>s.id!==e)}:t)}),zt=(i,e,t)=>({columns:i.columns.map(s=>{if(s.id!==t.column)return s;const n={...e,column:s.id},a=t.before===null?-1:s.cards.findIndex(r=>r.id===t.before);return{...s,cards:a<0?[...s.cards,n]:[...s.cards.slice(0,a),n,...s.cards.slice(a)]}})}),Qn=(i,e)=>{const t="\u30AB\u30FC\u30C9\u3092\u8FFD\u52A0",s=Dt(e.target.id,"column"),n=i.columns.find(o=>o.id===s);if(n===void 0)return{data:i,result:{id:e.id,title:t,stale:"target-missing"}};const a=de(Xn,e.payload);if(!a.success||ie(i,a.output.id)!==void 0)return{data:i,result:{id:e.id,title:t,stale:"constraint-violated"}};const r={id:a.output.id,title:a.output.title,description:null,tags:[],assignee:null,column:n.id,change:"added"};return{data:zt(i,r,{column:n.id,before:null}),result:{id:e.id,title:t,summary:`${n.label} \u203A ${r.title}`,tone:"create"}}},er=(i,e)=>{const t="\u30AB\u30FC\u30C9\u3092\u79FB\u52D5",s=Dt(e.target.id,"card"),n=s===null?void 0:ie(i,s);if(n===void 0)return{data:i,result:{id:e.id,title:t,stale:"target-missing"}};const a=de(Jn,e.payload),r=i.columns.find(c=>c.id===n.column),o=a.success?i.columns.find(c=>c.id===a.output.column):void 0,d=a.success?a.output.before:null,l=d===null||d!==n.id&&o?.cards.some(c=>c.id===d)===!0;if(!a.success||r===void 0||o===void 0||!l)return{data:i,result:{id:e.id,title:t,stale:"constraint-violated"}};const f={...n,change:n.change??"moved"},g=r.id===o.id?`${n.title}: ${o.label} \u5185\u3067\u4E26\u3079\u66FF\u3048`:`${n.title}: ${r.label} \u2192 ${o.label}`;return{data:zt(Zn(i,n.id),f,{column:o.id,before:d}),result:{id:e.id,title:t,summary:g,tone:"move"}}},tr=(i,e)=>{let t=i;const s=[];for(const n of e){const a=n.type===Et?Qn(t,n):n.type===Ct?er(t,n):{data:t,result:{id:n.id,title:n.type,stale:"unsupported-action-type"}};t=a.data,s.push(a.result)}return{data:t,results:s}},sr=N`
2176
- .kanban-board {
2177
- display: flex;
2178
- align-items: flex-start;
2179
- gap: 14px;
2180
- width: max-content;
2181
- padding: 18px;
2182
- }
2183
-
2184
- .kanban-column {
2185
- display: flex;
2186
- flex-direction: column;
2187
- gap: 8px;
2188
- width: 264px;
2189
- padding: 10px;
2190
- border: 1px solid var(--dpk-rule);
2191
- border-radius: var(--dpk-radius);
2192
- background: var(--dpk-paper-sunken);
2193
- cursor: default;
2194
- transition:
2195
- border-color 150ms ease,
2196
- box-shadow 150ms ease;
2197
- }
2198
-
2199
- .kanban-column.is-selected {
2200
- border-color: var(--dpk-ink-soft);
2201
- box-shadow: 0 0 0 3px var(--dpk-blue-soft);
2202
- }
2203
-
2204
- .kanban-column.is-drop-target {
2205
- border-color: var(--dpk-blue);
2206
- }
2207
-
2208
- .kanban-column-head {
2209
- position: relative;
2210
- display: flex;
2211
- align-items: center;
2212
- }
2213
-
2214
- .kanban-column-title {
2215
- display: flex;
2216
- flex: 1;
2217
- align-items: center;
2218
- gap: 8px;
2219
- min-width: 0;
2220
- padding: 2px 34px 2px 2px;
2221
- border: 0;
2222
- border-radius: var(--dpk-radius-xs);
2223
- background: none;
2224
- color: var(--dpk-ink);
2225
- font-family: var(--dpk-body);
2226
- font-size: 13px;
2227
- font-weight: 650;
2228
- text-align: left;
2229
- cursor: pointer;
2230
- }
2231
-
2232
- .kanban-column-title:focus-visible {
2233
- outline: none;
2234
- box-shadow: var(--dpk-focus);
2235
- }
2236
-
2237
- .kanban-column-label {
2238
- min-width: 0;
2239
- overflow: hidden;
2240
- text-overflow: ellipsis;
2241
- white-space: nowrap;
2242
- }
2243
-
2244
- /* An authored color marks the heading, not the cards: the status reads at a glance. */
2245
- .kanban-column[data-color='gray'] {
2246
- --kanban-tone: var(--dpk-ink-soft);
2247
- }
2248
-
2249
- .kanban-column[data-color='blue'] {
2250
- --kanban-tone: var(--dpk-blue);
2251
- }
2252
-
2253
- .kanban-column[data-color='green'] {
2254
- --kanban-tone: var(--dpk-green);
2255
- }
2256
-
2257
- .kanban-column[data-color='amber'] {
2258
- --kanban-tone: var(--dpk-amber);
2259
- }
2260
-
2261
- .kanban-column[data-color='violet'] {
2262
- --kanban-tone: var(--dpk-violet);
2263
- }
2264
-
2265
- .kanban-column[data-color='red'] {
2266
- --kanban-tone: var(--dpk-accent);
2267
- }
2268
-
2269
- .kanban-column[data-color] .kanban-column-label {
2270
- padding: 2px 9px;
2271
- border-radius: 999px;
2272
- background: color-mix(in srgb, var(--kanban-tone) 14%, transparent);
2273
- color: var(--kanban-tone);
2274
- }
2275
-
2276
- .kanban-count {
2277
- flex: none;
2278
- padding: 1px 7px;
2279
- border-radius: 999px;
2280
- background: var(--dpk-paper-raised);
2281
- color: var(--dpk-ink-soft);
2282
- font-family: var(--dpk-mono);
2283
- font-size: 11px;
2284
- font-weight: 600;
2285
- }
2286
-
2287
- /* Over its WIP limit: the column asks for attention, not the cards. */
2288
- .kanban-column.is-over {
2289
- border-color: color-mix(in srgb, var(--dpk-accent) 55%, transparent);
2290
- }
2291
-
2292
- .kanban-column.is-over .kanban-count {
2293
- background: var(--dpk-accent-soft);
2294
- color: var(--dpk-accent);
2295
- }
2296
-
2297
- .kanban-column-head > .diagram-comment-trigger {
2298
- position: absolute;
2299
- top: 50%;
2300
- right: 0;
2301
- transform: translateY(-50%);
2302
- }
2303
-
2304
- .kanban-column-description {
2305
- margin: 0 2px;
2306
- color: var(--dpk-ink-soft);
2307
- font-size: 11.5px;
2308
- line-height: 1.45;
2309
- }
2310
-
2311
- .kanban-cards {
2312
- display: flex;
2313
- flex-direction: column;
2314
- gap: 8px;
2315
- min-height: 44px;
2316
- }
2317
-
2318
- .kanban-card-slot {
2319
- position: relative;
2320
- }
2321
-
2322
- .kanban-card {
2323
- display: flex;
2324
- flex-direction: column;
2325
- gap: 5px;
2326
- padding: 9px 34px 9px 11px;
2327
- border: 1px solid var(--dpk-rule);
2328
- border-radius: var(--dpk-radius-sm);
2329
- background: var(--dpk-paper-raised);
2330
- color: var(--dpk-ink);
2331
- font-family: var(--dpk-body);
2332
- box-shadow: var(--dpk-shadow-xs);
2333
- cursor: grab;
2334
- transition:
2335
- border-color 150ms ease,
2336
- box-shadow 150ms ease,
2337
- opacity 150ms ease;
2338
- }
2339
-
2340
- .kanban-card:hover {
2341
- border-color: var(--dpk-rule-strong);
2342
- }
2343
-
2344
- .kanban-card.is-selected {
2345
- border-color: var(--dpk-ink-soft);
2346
- box-shadow: 0 0 0 3px var(--dpk-blue-soft);
2347
- }
2348
-
2349
- .kanban-card:focus-visible {
2350
- outline: none;
2351
- box-shadow: var(--dpk-focus);
2352
- }
2353
-
2354
- .kanban-card.is-dragging {
2355
- opacity: 0.4;
2356
- }
2357
-
2358
- /* Changed on this page by a draft action: not authored yet. */
2359
- .kanban-card.is-added {
2360
- border-style: dashed;
2361
- border-color: var(--dpk-green);
2362
- }
2363
-
2364
- .kanban-card.is-moved {
2365
- border-left: 3px solid var(--dpk-blue);
2366
- }
2367
-
2368
- .kanban-card-title {
2369
- font-size: 13px;
2370
- font-weight: 560;
2371
- line-height: 1.45;
2372
- overflow-wrap: anywhere;
2373
- }
2374
-
2375
- .kanban-card-description {
2376
- display: -webkit-box;
2377
- overflow: hidden;
2378
- color: var(--dpk-ink-soft);
2379
- font-size: 11.5px;
2380
- line-height: 1.45;
2381
- -webkit-box-orient: vertical;
2382
- -webkit-line-clamp: 3;
2383
- line-clamp: 3;
2384
- overflow-wrap: anywhere;
2385
- }
2386
-
2387
- .kanban-card-meta {
2388
- display: flex;
2389
- flex-wrap: wrap;
2390
- align-items: center;
2391
- gap: 4px;
2392
- }
2393
-
2394
- .kanban-tag {
2395
- padding: 1px 6px;
2396
- border-radius: var(--dpk-radius-xs);
2397
- background: var(--dpk-paper-sunken);
2398
- color: var(--dpk-ink-soft);
2399
- font-size: 10.5px;
2400
- }
2401
-
2402
- .kanban-assignee {
2403
- margin-left: auto;
2404
- color: var(--dpk-ink-faint);
2405
- font-size: 11px;
2406
- }
2407
-
2408
- .kanban-card-slot > .diagram-comment-trigger {
2409
- position: absolute;
2410
- top: 5px;
2411
- right: 5px;
2412
- z-index: 2;
2413
- }
2414
-
2415
- .kanban-error {
2416
- margin: 6px 0 0;
2417
- padding: 4px 6px;
2418
- border-radius: var(--dpk-radius-xs);
2419
- background: var(--dpk-paper-raised);
2420
- color: var(--dpk-accent);
2421
- font-size: 11.5px;
2422
- line-height: 1.4;
2423
- }
2424
-
2425
- /* Takes no room of its own, so the cards do not jump while dragging. */
2426
- .kanban-drop-marker {
2427
- height: 3px;
2428
- margin: -5.5px 0;
2429
- border-radius: 2px;
2430
- background: var(--dpk-blue);
2431
- }
2432
-
2433
- .kanban-add {
2434
- display: flex;
2435
- flex-direction: column;
2436
- gap: 6px;
2437
- }
2438
-
2439
- .kanban-add-button {
2440
- padding: 6px 8px;
2441
- border: 1px dashed var(--dpk-rule-strong);
2442
- border-radius: var(--dpk-radius-sm);
2443
- background: none;
2444
- color: var(--dpk-ink-soft);
2445
- font-family: var(--dpk-body);
2446
- font-size: 12px;
2447
- text-align: left;
2448
- cursor: pointer;
2449
- }
2450
-
2451
- .kanban-add-button:hover,
2452
- .kanban-add-button:focus-visible {
2453
- border-color: var(--dpk-ink-soft);
2454
- color: var(--dpk-ink);
2455
- outline: none;
2456
- }
2457
-
2458
- .kanban-add .dpk-input {
2459
- width: 100%;
2460
- font-size: 12.5px;
2461
- }
2462
- `,At="\u8A18\u9332\u3067\u304D\u307E\u305B\u3093\u3067\u3057\u305F\uFF08dpk-template-* \u8981\u7D20\u306E\u4E2D\u306B\u7F6E\u3044\u3066\u304F\u3060\u3055\u3044\uFF09\u3002";class Tt extends me{static{this.styles=[V,sr]}#e=null;#s=null;#n=null;#t=null;#r=null;parseData(e){return qt(e)}emptyData(){return Yn()}reduceElementActions(e,t){return tr(e,t)}defaultHeading(){return"Kanban"}shellClass(){return"kanban"}emptyMessage(){return"\u5217\u304C\u3042\u308A\u307E\u305B\u3093\u3002"}commentItems(){const e=this.items();return[...e.columns.map(t=>({value:this.commentRef("column",t.id),label:t.label})),...Q(e).map(t=>({value:this.commentRef("card",t.id),label:t.title}))]}hasSelection(e){const t=this.items();return e.kind==="column"?t.columns.some(s=>s.id===e.id):ie(t,e.id)!==void 0}tagItems(){return Q(this.items()).map(e=>e.tags)}statsText(){const e=Q(this.items()).length,t=Q(this.#i()).length;return t===e?`${e} \u30AB\u30FC\u30C9`:`${t} / ${e} \u30AB\u30FC\u30C9`}isEmpty(){return this.items().columns.length===0}viewAlign(){return"start"}contentSize(){if(this.isEmpty())return null;const e=this.renderRoot.querySelector(".kanban-board");return{width:e?.offsetWidth??0,height:e?.offsetHeight??0}}refreshContent(){const e=this.authoredItems();e!==this.#e&&(this.#e=e,this.#s=null,this.#n=null)}renderCanvas(){const e=this.#i(),t=new Map(this.items().columns.map(s=>[s.id,s.cards.length]));return h`<div class="kanban-board">
2463
- ${ae(e.columns,s=>s.id,s=>this.#o(s,t.get(s.id)??0))}
2464
- </div>`}#i(){const e=this.tagFilter;return Gn(this.items(),e.active.length===0?null:t=>G(t.tags,e))}#a(e,t){const s=this.selection;return s!==null&&s.kind===e&&s.id===t}#o(e,t){const s=e.limit!==null&&t>e.limit,n=this.#r?.column===e.id?this.#r:null;return h`
2465
- <section
2466
- class=${K("kanban-column",s&&"is-over",this.#a("column",e.id)&&"is-selected",n!==null&&"is-drop-target")}
2467
- data-column=${e.id}
2468
- data-color=${e.color??w}
2469
- aria-label=${e.label}
2470
- >
2471
- <div class="kanban-column-head">
2472
- <button
2473
- type="button"
2474
- class="kanban-column-title"
2475
- aria-pressed=${this.#a("column",e.id)?"true":"false"}
2476
- title=${e.description??e.label}
2477
- @click=${()=>this.select({kind:"column",id:e.id})}
2478
- >
2479
- <span class="kanban-column-label">${e.label}</span>
2480
- <span class="kanban-count" title=${e.limit===null?w:`WIP \u4E0A\u9650 ${e.limit}`}>
2481
- ${e.limit===null?t:`${t} / ${e.limit}`}
2482
- </span>
2483
- </button>
2484
- ${this.renderCommentTrigger({kind:"column",id:e.id},e.label)}
2485
- </div>
2486
- ${e.description===null?w:h`<p class="kanban-column-description">${e.description}</p>`}
2487
- <div
2488
- class="kanban-cards"
2489
- @dragover=${a=>this.#u(a,e.id)}
2490
- @dragleave=${a=>this.#m(a)}
2491
- @drop=${a=>this.#g(a,e.id)}
2492
- >
2493
- ${ae(e.cards,a=>a.id,a=>h`${n?.before===a.id?this.#l():w}${this.#c(a)}`)}
2494
- ${n!==null&&n.before===null?this.#l():w}
2495
- </div>
2496
- ${this.#h(e)}
2497
- </section>
2498
- `}#l(){return h`<div class="kanban-drop-marker" aria-hidden="true"></div>`}#c(e){const t=this.#a("card",e.id);return h`
2499
- <div class="kanban-card-slot">
2500
- <div
2501
- role="button"
2502
- tabindex="0"
2503
- draggable="true"
2504
- class=${K("kanban-card",t&&"is-selected",e.change==="added"&&"is-added",e.change==="moved"&&"is-moved",this.#t===e.id&&"is-dragging")}
2505
- data-card=${e.id}
2506
- data-grill-questions=${this.questionsOf(e)}
2507
- title=${e.description??e.title}
2508
- aria-pressed=${t?"true":"false"}
2509
- @click=${()=>this.select({kind:"card",id:e.id})}
2510
- @keydown=${s=>this.#p(s,e.id)}
2511
- @dragstart=${s=>this.#b(s,e.id)}
2512
- @dragend=${()=>this.#f()}
2513
- >
2514
- <span class="kanban-card-title">${e.title}</span>
2515
- ${e.description===null?w:h`<span class="kanban-card-description">${e.description}</span>`}
2516
- ${e.tags.length===0&&e.assignee===null?w:h`<span class="kanban-card-meta">
2517
- ${e.tags.map(s=>h`<span class="kanban-tag">${s}</span>`)}
2518
- ${e.assignee===null?w:h`<span class="kanban-assignee">${e.assignee}</span>`}
2519
- </span>`}
2520
- </div>
2521
- ${this.renderCommentTrigger({kind:"card",id:e.id},e.title)}
2522
- ${this.#n===e.id?h`<p class="kanban-error" role="alert">${At}</p>`:w}
2523
- </div>
2524
- `}#h(e){const t=this.#s?.column===e.id?this.#s:null;return h`<div class="kanban-add">
2525
- ${t===null?h`<button
2526
- type="button"
2527
- class="kanban-add-button"
2528
- data-action="add"
2529
- @click=${()=>this.#v(e.id)}
2530
- >
2531
- + カード
2532
- </button>`:h`
2533
- <input
2534
- class="dpk-input"
2535
- aria-label="${e.label} に追加するカード"
2536
- placeholder="カード名(Enter で追加)"
2537
- .value=${t.title}
2538
- @input=${s=>{const n=s.currentTarget;n instanceof HTMLInputElement&&(this.#s={...t,title:n.value,failed:!1})}}
2539
- @keydown=${s=>this.#y(s,e.id)}
2540
- />
2541
- ${t.failed?h`<span class="kanban-error" role="alert">${At}</span>`:w}
2542
- `}
2543
- </div>`}#p(e,t){e.target!==e.currentTarget||e.key!=="Enter"&&e.key!==" "||(e.preventDefault(),this.select({kind:"card",id:t}))}#d(e,t){const s=this.dispatchElementAction(Ct,["card",e],{column:t.column,before:t.before});this.#n=s?null:e,this.select({kind:"card",id:e}),this.requestUpdate()}#b(e,t){this.#t=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",t)),this.requestUpdate()}#u(e,t){if(this.#t===null)return;e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move");const s=this.#x(e,t);this.#r?.column===s.column&&this.#r.before===s.before||(this.#r=s,this.requestUpdate())}#m(e){const t=e.currentTarget;!(t instanceof HTMLElement)||e.relatedTarget instanceof Node&&t.contains(e.relatedTarget)||(this.#r=null,this.requestUpdate())}#g(e,t){const s=this.#t;if(s===null)return;e.preventDefault();const n=this.#x(e,t);this.#f(),Kn(this.items(),s,n.column,n.before)||this.#d(s,n)}#f(){this.#t===null&&this.#r===null||(this.#t=null,this.#r=null,this.requestUpdate())}#x(e,t){const s=e.currentTarget,a=(s instanceof HTMLElement?[...s.querySelectorAll("[data-card]")]:[]).find(r=>{if(r.dataset.card===this.#t)return!1;const o=r.getBoundingClientRect();return o.top+o.height/2>e.clientY});return{column:t,before:a?.dataset.card??null}}#v(e){this.#s={column:e,title:"",failed:!1},this.requestUpdate(),this.updateComplete.then(()=>this.renderRoot.querySelector(`[data-column="${CSS.escape(e)}"] .kanban-add input`)?.focus({preventScroll:!0}))}#y(e,t){if(e.isComposing)return;if(e.key==="Escape"){e.preventDefault(),this.#s=null,this.requestUpdate();return}if(e.key!=="Enter")return;e.preventDefault();const s=this.#s?.title.trim()??"";if(s.length===0)return;const n=[...this.items().columns.map(r=>r.id),...Q(this.items()).map(r=>r.id)],a=$e(`card ${s}`,n);if(!this.dispatchElementAction(Et,["column",t],{id:a,title:s})){this.#s={column:t,title:s,failed:!0},this.requestUpdate();return}this.#s=null,this.select({kind:"card",id:a}),this.requestUpdate()}}const Lt=()=>{customElements.get("dpk-component-kanban")||customElements.define("dpk-component-kanban",Tt)},Rt=()=>{Fe(),Ge(),Je(),dt(),ut(),Mt(),Lt()},nr=()=>{Yt(),Gt(),Rt()};export{pt as D,Xe as a,ot as b,Tt as c,St as d,Ye as e,je as f,ut as g,Je as h,dt as i,Lt as j,Mt as k,Ge as l,Fe as m,vt as n,Be as o,qt as p,_e as q,nr as r,Rt as s};