dev-process-kit 0.0.12 → 0.0.14

package/dist/chunks/shared-DhwK_dh_.js

@@ -1,1093 +0,0 @@
-import{al as Bt,ad as F,az as we,ae as f,ag as m,an as ee,ah as T,ai as S,aj as B,a$ as te,ak as oe,aw as Pe,ac as Ht,af as Fe,aA as q,p as g,at as $,v as Be,ay as Wt,P as He,e as Kt,a0 as qt,V as I,l as We,aP as _,b0 as Ut,b1 as Zt,a3 as b,a5 as Xt,a4 as h,a7 as xe,a6 as Vt,J as Gt,A as Yt,K as jt,aD as Jt,aq as Qt,a2 as eo,T as Ke,a1 as to,h as oo}from"./shared-BC5MlWBY.js";import{r as no,p as io,c as ro}from"./shared-CcrRNZCH.js";import{P as ao}from"./shared-aDPp8Vry.js";import{c as ye}from"./shared-ml5h7U5L.js";const so=[["rect",{x:"8",y:"8",width:"8",height:"8",rx:"2"}],["path",{d:"M4 10a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2"}],["path",{d:"M14 20a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2"}]],co=[["path",{d:"M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"}],["path",{d:"M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12"}],["path",{d:"M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17"}]],lo=[["path",{d:"M3 7V5a2 2 0 0 1 2-2h2"}],["path",{d:"M17 3h2a2 2 0 0 1 2 2v2"}],["path",{d:"M21 17v2a2 2 0 0 1-2 2h-2"}],["path",{d:"M7 21H5a2 2 0 0 1-2-2v-2"}]],ho=[["rect",{x:"14",y:"14",width:"8",height:"8",rx:"2"}],["rect",{x:"2",y:"2",width:"8",height:"8",rx:"2"}],["path",{d:"M7 14v1a2 2 0 0 0 2 2h1"}],["path",{d:"M14 7h1a2 2 0 0 1 2 2v1"}]],po=[["circle",{cx:"19",cy:"5",r:"2"}],["circle",{cx:"5",cy:"19",r:"2"}],["path",{d:"M5 17A12 12 0 0 1 17 5"}]],ne=["yellow","orange","pink","purple","blue","green","gray"],qe=["rect","ellipse"],uo=["sticky","text","shape","frame"],ie=["small","medium","large","xlarge"],re="medium",Ue=["arrow","line"],U=["straight","elbow","curve"],Z=24,C={sticky:{w:160,h:160},text:{w:240,h:48},shape:{w:180,h:110},frame:{w:640,h:420}},H={sticky:"yellow",shape:"blue",frame:"gray"},Ze=S(oe(),te()),R=S(oe(),te(),Pe(Z)),ke=T(ne),ge=f(T(ie),re),ae={id:we,x:Ze,y:Ze},bo=F({...ae,kind:ee("sticky"),w:f(R,C.sticky.w),h:f(R,C.sticky.h),text:f(m(),""),color:f(ke,H.sticky),fontSize:ge}),fo=F({...ae,kind:ee("text"),w:f(R,C.text.w),h:f(R,C.text.h),text:f(m(),""),fontSize:ge}),mo=F({...ae,kind:ee("shape"),shape:f(T(qe),"rect"),w:f(R,C.shape.w),h:f(R,C.shape.h),text:f(m(),""),color:f(ke,H.shape),fontSize:ge}),wo=F({...ae,kind:ee("frame"),w:R,h:R,title:S(m(),B(1)),color:f(ke,H.frame)}),Xe=Bt("kind",[bo,fo,mo,wo]),xo=F({id:we,from:S(m(),B(1)),to:S(m(),B(1)),label:q(m()),style:f(T(Ue),"arrow"),route:f(T(U),"straight")}),Ve=F({title:q(m()),items:f(Fe(Xe),[]),connectors:f(Fe(xo),[])}),Ge=t=>{const e=Ht(Ve,t),o=new Set;for(const{id:i}of[...e.items,...e.connectors]){if(o.has(i))throw new Error(`duplicate id "${i}" (items and connectors share one id space)`);o.add(i)}const n=new Set(e.items.map(i=>i.id));for(const i of e.connectors){if(!n.has(i.from))throw new Error(`unknown item "${i.from}" in connector "${i.id}"`);if(!n.has(i.to))throw new Error(`unknown item "${i.to}" in connector "${i.id}"`);if(i.from===i.to)throw new Error(`connector "${i.id}" connects an item to itself`)}return e},Ye=()=>({items:[],connectors:[]}),p=(t,e)=>{if(e!==void 0)return t.items.find(o=>o.id===e)},k=(t,e)=>{if(e!==void 0)return t.connectors.find(o=>o.id===e)},je=t=>[...t.items.map(e=>e.id),...t.connectors.map(e=>e.id)],L=t=>t.kind==="frame"?t.title:t.text,ve=t=>t.kind!=="text",X=t=>t.kind!=="frame",se=t=>t.w*t.h,yo=(t,e,o)=>e>=t.x&&e<=t.x+t.w&&o>=t.y&&o<=t.y+t.h,D=(t,e)=>{const o=e.x+e.w/2,n=e.y+e.h/2;let i;for(const r of t.items)r.kind!=="frame"||r.id===e.id||e.kind==="frame"&&se(r)<=se(e)||yo(r,o,n)&&(i===void 0||se(r)<se(i))&&(i=r);return i},$e=(t,e)=>{const o=[],n=i=>{let r=D(t,i);for(;r!==void 0;){if(r.id===e.id)return!0;r=D(t,r)}return!1};for(const i of t.items)i.id!==e.id&&n(i)&&o.push(i);return o},Je=S(oe(),te()),Qe=S(oe(),te(),Pe(Z)),Ee={type:"page",id:"whiteboard"},de={ADD_ITEM:g("ADD_ITEM","page",Xe,{dedupeKey:Be}),SET_ITEM_TEXT:g("SET_ITEM_TEXT","item",$({text:m()})),MOVE_ITEM:g("MOVE_ITEM","item",$({x:Je,y:Je})),RESIZE_ITEM:g("RESIZE_ITEM","item",$({w:Qe,h:Qe})),SET_ITEM_COLOR:g("SET_ITEM_COLOR","item",$({color:T(ne)})),SET_ITEM_FONT_SIZE:g("SET_ITEM_FONT_SIZE","item",$({fontSize:T(ie)})),REORDER_ITEM:g("REORDER_ITEM","item",$({after:Wt(S(m(),B(1)))})),DELETE_ITEM:g("DELETE_ITEM","item",$({})),CONNECT_ITEMS:g("CONNECT_ITEMS","page",$({id:we,from:S(m(),B(1)),to:S(m(),B(1)),label:q(m()),style:q(T(Ue)),route:q(T(U))}),{dedupeKey:Be}),SET_CONNECTOR_LABEL:g("SET_CONNECTOR_LABEL","connector",$({label:m()})),SET_CONNECTOR_ROUTE:g("SET_CONNECTOR_ROUTE","connector",$({route:T(U)})),DELETE_CONNECTOR:g("DELETE_CONNECTOR","connector",$({}))},P=t=>({type:"item",id:t}),w={addItem:t=>({type:"ADD_ITEM",target:Ee,payload:t}),setText:(t,e)=>({type:"SET_ITEM_TEXT",target:P(t),payload:{text:e}}),move:(t,e,o)=>({type:"MOVE_ITEM",target:P(t),payload:{x:e,y:o}}),resize:(t,e,o)=>({type:"RESIZE_ITEM",target:P(t),payload:{w:e,h:o}}),setColor:(t,e)=>({type:"SET_ITEM_COLOR",target:P(t),payload:{color:e}}),setFontSize:(t,e)=>({type:"SET_ITEM_FONT_SIZE",target:P(t),payload:{fontSize:e}}),reorder:(t,e)=>({type:"REORDER_ITEM",target:P(t),payload:{after:e}}),deleteItem:t=>({type:"DELETE_ITEM",target:P(t),payload:{}}),connect:(t,e,o,n)=>({type:"CONNECT_ITEMS",target:Ee,payload:{id:t,from:e,to:o,...n===void 0?{}:{label:n}}}),setConnectorLabel:(t,e)=>({type:"SET_CONNECTOR_LABEL",target:{type:"connector",id:t},payload:{label:e}}),setConnectorRoute:(t,e)=>({type:"SET_CONNECTOR_ROUTE",target:{type:"connector",id:t},payload:{route:e}}),deleteConnector:t=>({type:"DELETE_CONNECTOR",target:{type:"connector",id:t},payload:{}})},et=(t,e)=>{const o=He(de,e);if(o===null)return null;const n=o.target.id;switch(o.type){case"ADD_ITEM":{const i=o.payload,r=t.items.find(a=>a.id===i.id);return r!==void 0?r.kind===i.kind?t:null:t.connectors.some(a=>a.id===i.id)?null:{...t,items:[...t.items,i]}}case"SET_ITEM_TEXT":return V(t,n,i=>i.kind==="frame"?o.payload.text.trim()===""?null:{...i,title:o.payload.text}:{...i,text:o.payload.text});case"MOVE_ITEM":return V(t,n,i=>({...i,x:o.payload.x,y:o.payload.y}));case"RESIZE_ITEM":return V(t,n,i=>({...i,w:o.payload.w,h:o.payload.h}));case"SET_ITEM_COLOR":return V(t,n,i=>i.kind==="text"?null:{...i,color:o.payload.color});case"SET_ITEM_FONT_SIZE":return V(t,n,i=>i.kind==="frame"?null:{...i,fontSize:o.payload.fontSize});case"REORDER_ITEM":return ko(t,n,o.payload.after);case"DELETE_ITEM":return t.items.some(i=>i.id===n)?{...t,items:t.items.filter(i=>i.id!==n),connectors:t.connectors.filter(i=>i.from!==n&&i.to!==n)}:null;case"CONNECT_ITEMS":{const i=o.payload;if(t.connectors.some(a=>a.id===i.id))return t;if(t.items.some(a=>a.id===i.id)||i.from===i.to||!t.items.some(a=>a.id===i.from)||!t.items.some(a=>a.id===i.to))return null;const r={id:i.id,from:i.from,to:i.to,style:i.style??"arrow",route:i.route??"straight",...i.label===void 0||i.label===""?{}:{label:i.label}};return{...t,connectors:[...t.connectors,r]}}case"SET_CONNECTOR_LABEL":return tt(t,n,i=>{const{label:r,...a}=i;return o.payload.label===""?a:{...a,label:o.payload.label}});case"SET_CONNECTOR_ROUTE":return tt(t,n,i=>({...i,route:o.payload.route}));case"DELETE_CONNECTOR":return t.connectors.some(i=>i.id===n)?{...t,connectors:t.connectors.filter(i=>i.id!==n)}:null;default:return Kt(o)}},V=(t,e,o)=>{const n=t.items.find(r=>r.id===e);if(n===void 0)return null;const i=o(n);return i===null?null:{...t,items:t.items.map(r=>r.id===e?i:r)}},ko=(t,e,o)=>{const n=t.items.find(a=>a.id===e);if(n===void 0||o===e)return null;const i=t.items.filter(a=>a.id!==e),r=o===null?0:i.findIndex(a=>a.id===o)+1;return r===0&&o!==null?null:{...t,items:[...i.slice(0,r),n,...i.slice(r)]}},tt=(t,e,o)=>{const n=t.connectors.find(r=>r.id===e);if(n===void 0)return null;const i=o(n);return{...t,connectors:t.connectors.map(r=>r.id===e?i:r)}},G=t=>{if(t.length===0)return null;const e=Math.min(...t.map(r=>r.x)),o=Math.min(...t.map(r=>r.y)),n=Math.max(...t.map(r=>r.x+r.w)),i=Math.max(...t.map(r=>r.y+r.h));return{x:e,y:o,w:n-e,h:i-o}},Te=t=>[...t.items.filter(e=>e.kind==="frame"),...t.items.filter(e=>e.kind!=="frame")],go=t=>t.kind==="shape"&&t.shape==="ellipse",Y=(t,e)=>{const o=t.x+t.w/2,n=t.y+t.h/2,i=e.x-o,r=e.y-n;if(i===0&&r===0)return{x:o,y:n};const a=t.w/2,d=t.h/2,s=go(t)?1/Math.sqrt((i/a)**2+(r/d)**2):Math.min(i===0?1/0:a/Math.abs(i),r===0?1/0:d/Math.abs(r));return{x:o+i*s,y:n+r*s}},W=t=>({x:t.x+t.w/2,y:t.y+t.h/2}),ot=(t,e)=>{const o=Y(t,W(e)),n=Y(e,W(t));return{start:o,end:n,mid:{x:(o.x+n.x)/2,y:(o.y+n.y)/2}}},z=t=>`${t.x} ${t.y}`,ce=(t,e,o)=>{if(o==="straight"){const{start:M,end:J,mid:Q}=ot(t,e);return{d:`M ${z(M)} L ${z(J)}`,mid:Q}}const n=W(t),i=W(e),r=Math.abs(i.x-n.x)>=Math.abs(i.y-n.y),a=r?i.x>=n.x:i.y>=n.y,d=(M,J)=>{const Q=W(M);return r?{x:J?M.x+M.w:M.x,y:Q.y}:{x:Q.x,y:J?M.y+M.h:M.y}},s=d(t,a),c=d(e,!a),l={x:(s.x+c.x)/2,y:(s.y+c.y)/2},x=r?{x:l.x,y:s.y}:{x:s.x,y:l.y},u=r?{x:l.x,y:c.y}:{x:c.x,y:l.y};return{d:o==="elbow"?`M ${z(s)} L ${z(x)} L ${z(u)} L ${z(c)}`:`M ${z(s)} C ${z(x)} ${z(u)} ${z(c)}`,mid:l}},Se=(t,e)=>e.x>=t.x&&e.x<=t.x+t.w&&e.y>=t.y&&e.y<=t.y+t.h,vo=(t,e)=>e>.5?{w:t.w,h:Math.ceil(t.h+e)}:void 0,$o=(t,e)=>t.items.filter(o=>o.kind==="frame"&&Se(o,e)).sort((o,n)=>o.w*o.h-n.w*n.h),ze=(t,e,o)=>{const n=Te(t);for(let r=n.length-1;r>=0;r-=1){const a=n[r];if(!(a===void 0||a.id===o||a.kind==="frame")&&Se(a,e))return a}let i;for(const r of n)r.kind!=="frame"||r.id===o||!Se(r,e)||(i===void 0||r.w*r.h<i.w*i.h)&&(i=r);return i},Eo=(t,e)=>({x:Math.min(t.x,e.x),y:Math.min(t.y,e.y),w:Math.abs(t.x-e.x),h:Math.abs(t.y-e.y)}),To=(t,e)=>e.x>=t.x&&e.y>=t.y&&e.x+e.w<=t.x+t.w&&e.y+e.h<=t.y+t.h,So=(t,e)=>t.items.filter(o=>o.kind==="frame"?To(e,o):le(e,o,0)),le=(t,e,o)=>t.x<e.x+e.w+o&&e.x<t.x+t.w+o&&t.y<e.y+e.h+o&&e.y<t.y+t.h+o,zo=(t,e,o=!1,n=16,i=6)=>{const r=o?t.items:t.items.filter(c=>c.kind!=="frame"),a=c=>!r.some(l=>le(c,l,n));if(a(e))return{x:e.x,y:e.y};const d=e.w+n,s=e.h+n;for(let c=1;c<=i;c+=1){const l=[];for(let u=-c;u<=c;u+=1)for(let y=-c;y<=c;y+=1)Math.max(Math.abs(y),Math.abs(u))===c&&l.push({x:e.x+y*d,y:e.y+u*s});l.sort((u,y)=>Math.hypot(u.x-e.x,u.y-e.y)-Math.hypot(y.x-e.x,y.y-e.y));const x=l.find(u=>a({...e,...u}));if(x!==void 0)return x}return{x:e.x,y:e.y}},Mo={sticky:"Sticky note",text:"Text",shape:"Shape",frame:"Frame"},O={sticky:"\u4ED8\u7B8B",text:"\u30C6\u30AD\u30B9\u30C8",shape:"\u56F3\u5F62",frame:"\u30D5\u30EC\u30FC\u30E0"},N={sticky:"sticky note",text:"text box",shape:"shape",frame:"frame"},_o={rect:"Rectangle",ellipse:"Ellipse"},Lo={rect:"\u56DB\u89D2\u5F62",ellipse:"\u6955\u5186"},Oo={yellow:"Yellow",orange:"Orange",pink:"Pink",purple:"Purple",blue:"Blue",green:"Green",gray:"Gray"},Io={yellow:"\u9EC4",orange:"\u30AA\u30EC\u30F3\u30B8",pink:"\u30D4\u30F3\u30AF",purple:"\u7D2B",blue:"\u9752",green:"\u7DD1",gray:"\u30B0\u30EC\u30FC"},Co={small:"Small",medium:"Medium",large:"Large",xlarge:"Extra large"},Ro={small:"\u5C0F",medium:"\u4E2D",large:"\u5927",xlarge:"\u7279\u5927"},No={straight:"Straight",elbow:"Elbow",curve:"Curved"},Ao={straight:"\u76F4\u7DDA",elbow:"\u30AB\u30AE\u7DDA",curve:"\u66F2\u7DDA"},nt={small:"S",medium:"M",large:"L",xlarge:"XL"},he=qt({en:{kindLabel:t=>Mo[t],shapeLabel:t=>_o[t],colorLabel:t=>Oo[t],fontSizeLabel:t=>Co[t],fontSizeShort:t=>nt[t],routeLabel:t=>No[t],connector:"Connector",board:"Board",wholeBoard:"Whole board",canvasLabel:"Whiteboard canvas",emptyHint:"Double-click anywhere to add a sticky note, or pick something from the toolbar.",toolsLabel:"Add to the board",addSticky:"Sticky note",addText:"Text",addRect:"Rectangle",addEllipse:"Ellipse",addFrame:"Frame",newFrameTitle:"New frame",textPlaceholder:"Type something",selectionLabel:"Selected item",selectionCount:t=>`${t} items selected`,editText:"Edit text",renameFrame:"Rename frame",comment:"Comment",delete:"Delete",colorLabelPrefix:"Color",fontSizeLabelPrefix:"Text size",arrangeLabel:"Stacking order",bringToFront:"Bring to front",bringForward:"Bring forward",sendBackward:"Send backward",sendToBack:"Send to back",routeLabelPrefix:"Line",labelField:"Connector label",labelPlaceholder:"Add a label",resizeHandle:"Resize",connectHandle:"Drag to connect",commentCount:t=>`${t} comment${t===1?"":"s"}`,zoomIn:"Zoom in",zoomOut:"Zoom out",zoomFit:"Fit the board",zoomReset:"Reset to 100%",framesHeading:"Frames",framesHint:"Pick a frame to bring it into view.",memberCount:t=>`${t} item${t===1?"":"s"}`,addedTitle:t=>`Added a ${N[t]}`,textEditedTitle:t=>t==="frame"?"Renamed the frame":`Edited the ${N[t]}`,movedTitle:t=>`Moved the ${N[t]}`,resizedTitle:t=>`Resized the ${N[t]}`,recoloredTitle:t=>`Changed the color of the ${N[t]}`,resizedTextTitle:t=>`Changed the text size of the ${N[t]}`,restackedTitle:t=>`Changed the stacking order of the ${N[t]}`,deletedTitle:t=>`Deleted the ${N[t]}`,connectedTitle:"Connected two items",relabeledTitle:"Relabeled the connector",reroutedTitle:"Changed the connector line",disconnectedTitle:"Removed the connector",arrowTo:t=>`\u2192 \u201C${t}\u201D`,arrowFrom:(t,e)=>`\u201C${t}\u201D \u2192 \u201C${e}\u201D`,plain:(t,e)=>`${t} \u2192 ${e}`,added:t=>`+ \u201C${t}\u201D`,deleted:t=>`\u2212 \u201C${t}\u201D`,inFrame:t=>`in frame \u201C${t}\u201D`,intoFrame:t=>`into frame \u201C${t}\u201D`,outOfFrame:t=>`out of frame \u201C${t}\u201D`,betweenFrames:(t,e)=>`frame \u201C${t}\u201D \u2192 frame \u201C${e}\u201D`,position:(t,e)=>`(${t}, ${e})`,size:(t,e)=>`${t}\xD7${e}`,connection:(t,e)=>`\u201C${t}\u201D \u2192 \u201C${e}\u201D`,labeled:t=>`labeled \u201C${t}\u201D`,inFrontOf:t=>`in front of \u201C${t}\u201D`,toBack:"to the very back",empty:"(empty)",noLabel:"(no label)"},ja:{kindLabel:t=>O[t],shapeLabel:t=>Lo[t],colorLabel:t=>Io[t],fontSizeLabel:t=>Ro[t],fontSizeShort:t=>nt[t],routeLabel:t=>Ao[t],connector:"\u30B3\u30CD\u30AF\u30BF",board:"\u30DC\u30FC\u30C9",wholeBoard:"\u30DC\u30FC\u30C9\u5168\u4F53",canvasLabel:"\u30DB\u30EF\u30A4\u30C8\u30DC\u30FC\u30C9",emptyHint:"\u30C0\u30D6\u30EB\u30AF\u30EA\u30C3\u30AF\u3067\u4ED8\u7B8B\u3092\u7F6E\u304F\u304B\u3001\u30C4\u30FC\u30EB\u30D0\u30FC\u304B\u3089\u8FFD\u52A0\u3057\u307E\u3059\u3002",toolsLabel:"\u30DC\u30FC\u30C9\u306B\u8FFD\u52A0",addSticky:"\u4ED8\u7B8B",addText:"\u30C6\u30AD\u30B9\u30C8",addRect:"\u56DB\u89D2\u5F62",addEllipse:"\u6955\u5186",addFrame:"\u30D5\u30EC\u30FC\u30E0",newFrameTitle:"\u65B0\u3057\u3044\u30D5\u30EC\u30FC\u30E0",textPlaceholder:"\u5165\u529B\u3057\u3066\u304F\u3060\u3055\u3044",selectionLabel:"\u9078\u629E\u4E2D\u306E\u8981\u7D20",selectionCount:t=>`${t} \u4EF6\u3092\u9078\u629E\u4E2D`,editText:"\u30C6\u30AD\u30B9\u30C8\u3092\u7DE8\u96C6",renameFrame:"\u30D5\u30EC\u30FC\u30E0\u540D\u3092\u5909\u66F4",comment:"\u30B3\u30E1\u30F3\u30C8",delete:"\u524A\u9664",colorLabelPrefix:"\u8272",fontSizeLabelPrefix:"\u6587\u5B57\u30B5\u30A4\u30BA",arrangeLabel:"\u91CD\u306A\u308A\u9806",bringToFront:"\u6700\u524D\u9762\u3078",bringForward:"\u524D\u9762\u3078",sendBackward:"\u80CC\u9762\u3078",sendToBack:"\u6700\u80CC\u9762\u3078",routeLabelPrefix:"\u7DDA\u306E\u5F62",labelField:"\u30B3\u30CD\u30AF\u30BF\u306E\u30E9\u30D9\u30EB",labelPlaceholder:"\u30E9\u30D9\u30EB\u3092\u8FFD\u52A0",resizeHandle:"\u30B5\u30A4\u30BA\u3092\u5909\u66F4",connectHandle:"\u30C9\u30E9\u30C3\u30B0\u3057\u3066\u3064\u306A\u3050",commentCount:t=>`\u30B3\u30E1\u30F3\u30C8 ${t} \u4EF6`,zoomIn:"\u62E1\u5927",zoomOut:"\u7E2E\u5C0F",zoomFit:"\u30DC\u30FC\u30C9\u5168\u4F53\u3092\u8868\u793A",zoomReset:"100% \u306B\u623B\u3059",framesHeading:"\u30D5\u30EC\u30FC\u30E0",framesHint:"\u30D5\u30EC\u30FC\u30E0\u3092\u9078\u3076\u3068\u305D\u3053\u3078\u79FB\u52D5\u3057\u307E\u3059\u3002",memberCount:t=>`${t} \u4EF6`,addedTitle:t=>`${O[t]}\u3092\u8FFD\u52A0`,textEditedTitle:t=>t==="frame"?"\u30D5\u30EC\u30FC\u30E0\u540D\u3092\u5909\u66F4":`${O[t]}\u306E\u30C6\u30AD\u30B9\u30C8\u3092\u5909\u66F4`,movedTitle:t=>`${O[t]}\u3092\u79FB\u52D5`,resizedTitle:t=>`${O[t]}\u306E\u30B5\u30A4\u30BA\u3092\u5909\u66F4`,recoloredTitle:t=>`${O[t]}\u306E\u8272\u3092\u5909\u66F4`,resizedTextTitle:t=>`${O[t]}\u306E\u6587\u5B57\u30B5\u30A4\u30BA\u3092\u5909\u66F4`,restackedTitle:t=>`${O[t]}\u306E\u91CD\u306A\u308A\u9806\u3092\u5909\u66F4`,deletedTitle:t=>`${O[t]}\u3092\u524A\u9664`,connectedTitle:"\u8981\u7D20\u3092\u3064\u306A\u3044\u3060",relabeledTitle:"\u30B3\u30CD\u30AF\u30BF\u306E\u30E9\u30D9\u30EB\u3092\u5909\u66F4",reroutedTitle:"\u30B3\u30CD\u30AF\u30BF\u306E\u7DDA\u306E\u5F62\u3092\u5909\u66F4",disconnectedTitle:"\u30B3\u30CD\u30AF\u30BF\u3092\u524A\u9664",arrowTo:t=>`\u2192 \u300C${t}\u300D`,arrowFrom:(t,e)=>`\u300C${t}\u300D\u2192\u300C${e}\u300D`,plain:(t,e)=>`${t} \u2192 ${e}`,added:t=>`+ \u300C${t}\u300D`,deleted:t=>`\u2212 \u300C${t}\u300D`,inFrame:t=>`\u30D5\u30EC\u30FC\u30E0\u300C${t}\u300D\u5185`,intoFrame:t=>`\u30D5\u30EC\u30FC\u30E0\u300C${t}\u300D\u3078`,outOfFrame:t=>`\u30D5\u30EC\u30FC\u30E0\u300C${t}\u300D\u306E\u5916\u3078`,betweenFrames:(t,e)=>`\u30D5\u30EC\u30FC\u30E0\u300C${t}\u300D\u2192\u300C${e}\u300D`,position:(t,e)=>`(${t}, ${e})`,size:(t,e)=>`${t}\xD7${e}`,connection:(t,e)=>`\u300C${t}\u300D\u2192\u300C${e}\u300D`,labeled:t=>`\u30E9\u30D9\u30EB\u300C${t}\u300D`,inFrontOf:t=>`\u300C${t}\u300D\u306E\u524D\u9762\u3078`,toBack:"\u6700\u80CC\u9762\u3078",empty:"\uFF08\u7A7A\uFF09",noLabel:"\uFF08\u30E9\u30D9\u30EB\u306A\u3057\uFF09"}}),pe=t=>t===void 0?[]:[...new Set(t.split(",").filter(e=>e!==""))],it=t=>t.length===0?void 0:t.join(","),rt=(t,e)=>t.includes(e)?t.filter(o=>o!==e):[...t,e],at=40,A=(t,e)=>{const o=e.replace(/\s+/g," ").trim();return o===""?t.empty:o.length>at?`${o.slice(0,at-1)}\u2026`:o},Do=(t,e)=>`${e.kind==="shape"?t.shapeLabel(e.shape):t.kindLabel(e.kind)} \xB7 ${A(t,L(e))}`,E=(t,e,o,n)=>{const i=p(e,n)??p(o,n);return i===void 0?n:A(t,L(i))},Po=(t,e,o,n=e)=>`${t.connector} \xB7 ${t.connection(E(t,e,n,o.from),E(t,e,n,o.to))}`,Fo=(t,e,o,n,i)=>{const r=o===void 0?void 0:D(i,o),a=D(e,n),d=t.position(Math.round(n.x),Math.round(n.y));if(r?.id!==a?.id){if(r!==void 0&&a!==void 0)return`${t.betweenFrames(r.title,a.title)} ${d}`;if(a!==void 0)return`${t.intoFrame(a.title)} ${d}`;if(r!==void 0)return`${t.outOfFrame(r.title)} ${d}`}return o===void 0?`\u2192 ${d}`:t.plain(t.position(Math.round(o.x),Math.round(o.y)),d)},Bo=(t,e,o,n)=>{const i=e.target.id,r=p(n,i),a=p(o,i)??r,d=a?.kind??"sticky";switch(e.type){case"ADD_ITEM":{const s=p(o,e.payload.id)??e.payload,c=D(o,s),l=t.added(A(t,L(s)));return{title:t.addedTitle(s.kind),tone:"create",body:c===void 0?l:`${l} ${t.inFrame(c.title)}`}}case"SET_ITEM_TEXT":{const s=A(t,e.payload.text);return{title:t.textEditedTitle(d),tone:"update",body:r===void 0?t.arrowTo(s):t.arrowFrom(A(t,L(r)),s)}}case"MOVE_ITEM":{if(a===void 0)return{title:t.movedTitle(d),tone:"move"};const s={...a,x:e.payload.x,y:e.payload.y};return{title:t.movedTitle(d),tone:"move",body:Fo(t,o,r,s,n)}}case"RESIZE_ITEM":{const s=t.size(Math.round(e.payload.w),Math.round(e.payload.h));return{title:t.resizedTitle(d),tone:"update",body:r===void 0?`\u2192 ${s}`:t.plain(t.size(Math.round(r.w),Math.round(r.h)),s)}}case"SET_ITEM_COLOR":{const s=t.colorLabel(e.payload.color);return{title:t.recoloredTitle(d),tone:"update",body:r!==void 0&&ve(r)?t.plain(t.colorLabel(r.color),s):`\u2192 ${s}`}}case"SET_ITEM_FONT_SIZE":{const s=t.fontSizeLabel(e.payload.fontSize);return{title:t.resizedTextTitle(d),tone:"update",body:r!==void 0&&X(r)?t.plain(t.fontSizeLabel(r.fontSize),s):`\u2192 ${s}`}}case"REORDER_ITEM":{const s=e.payload.after;return{title:t.restackedTitle(d),tone:"move",body:s===null?t.toBack:t.inFrontOf(E(t,o,n,s))}}case"DELETE_ITEM":return{title:t.deletedTitle(d),tone:"delete",body:t.deleted(a===void 0?i:A(t,L(a)))};case"CONNECT_ITEMS":{const s=e.payload,c=t.connection(E(t,o,n,s.from),E(t,o,n,s.to));return{title:t.connectedTitle,tone:"create",body:s.label===void 0||s.label===""?c:`${c} \xB7 ${t.labeled(s.label)}`}}case"SET_CONNECTOR_LABEL":{const s=k(n,i)?.label,c=e.payload.label===""?t.noLabel:e.payload.label;return{title:t.relabeledTitle,tone:"update",body:s===void 0?t.arrowTo(c):t.arrowFrom(s,c)}}case"SET_CONNECTOR_ROUTE":{const s=k(n,i)?.route,c=t.routeLabel(e.payload.route);return{title:t.reroutedTitle,tone:"update",body:s===void 0?`\u2192 ${c}`:t.plain(t.routeLabel(s),c)}}case"DELETE_CONNECTOR":{const s=k(n,i)??k(o,i);return{title:t.disconnectedTitle,tone:"delete",...s===void 0?{}:{body:t.connection(E(t,o,n,s.from),E(t,o,n,s.to))}}}}},st=(t,e,o,n=o)=>{let i;try{const r=He(de,e);i=r===null?{title:e.type,tone:"meta"}:Bo(t,r,o,n)}catch{i={title:e.type,tone:"meta"}}return{title:i.title,targetLabel:ct(t,o,e.target,n),tone:i.tone,...i.body===void 0?{}:{summary:i.body}}},dt=t=>`${t.type} ${I(t.target)} ${JSON.stringify(t.payload)}`,ct=(t,e,o,n=e)=>{switch(o.type){case"item":{const i=p(e,o.id)??p(n,o.id);return i===void 0?`${o.type} \xB7 ${o.id} (missing)`:Do(t,i)}case"connector":{const i=k(e,o.id)??k(n,o.id);return i===void 0?`${t.connector} \xB7 ${o.id} (missing)`:Po(t,e,i,n)}case"page":return`${t.board} \xB7 ${Me(e)}`;default:return`${o.type} \xB7 ${o.id}`}},lt=(t,e)=>{const o=[{value:"page:whiteboard",label:t.wholeBoard,group:t.board}],n=e.items.filter(r=>r.kind==="frame"),i=e.items.filter(r=>r.kind!=="frame");for(const r of[...n,...i]){const a=D(e,r),d=A(t,L(r));o.push({value:I({type:"item",id:r.id}),label:a===void 0?d:`${a.title} \u203A ${d}`,group:t.kindLabel(r.kind)})}for(const r of e.connectors)o.push({value:I({type:"connector",id:r.id}),label:t.connection(E(t,e,e,r.from),E(t,e,e,r.to)),group:t.connector});return o},ht=(t,e,o)=>{const n=pe(o.item),i=n.length===1?n[0]:void 0,r=p(e,i)??p(e,o.frame);if(r!==void 0)return{value:I({type:"item",id:r.id}),label:A(t,L(r)),group:t.kindLabel(r.kind)};const a=k(e,i);return a===void 0?null:{value:I({type:"connector",id:a.id}),label:t.connection(E(t,e,e,a.from),E(t,e,e,a.to)),group:t.connector}},Me=t=>t.title??"Whiteboard",pt=(t,e)=>{const o={...e};p(t,e.frame)?.kind!=="frame"&&delete o.frame;const n=pe(e.item),i=n.filter(d=>p(t,d)!==void 0),r=n.length===1?k(t,n[0]):void 0,a=it(r===void 0?i:[r.id]);return a===void 0?delete o.item:o.item=a,o},ut=(t,e)=>{switch(e.type){case"item":return p(t,e.id)!==void 0;case"connector":return k(t,e.id)!==void 0;case"page":return!0;default:return!1}},bt=t=>{const e=he(t);return{name:"whiteboard",label:"Whiteboard",parseBase:Ge,emptyBase:Ye,actions:de,apply:et,canonicalState:o=>({...o,items:Te(o)}),hasTarget:ut,describe:(o,n,i)=>st(e,o,n,i),serialize:dt,resolveNavigation:pt,navigationHierarchy:["frame","item"],commentTargets:o=>lt(e,o),currentTarget:(o,n)=>ht(e,o,n),title:Me}},ft=["front","forward","backward","back"],mt=t=>t.items.filter(e=>e.kind!=="frame"),wt=(t,e,o,n)=>{const i=t.indexOf(e),r=(n?t.slice(i+1):t.slice(0,i).reverse()).filter(c=>!o.has(c.id)),a=r.find(c=>le(e,c,0))??r[0];if(a===void 0)return t;const d=t.filter(c=>c!==e),s=d.indexOf(a)+(n?1:0);return[...d.slice(0,s),e,...d.slice(s)]},xt=(t,e,o)=>{const n=t.filter(r=>e.has(r.id)),i=t.filter(r=>!e.has(r.id));switch(o){case"front":return[...i,...n];case"back":return[...n,...i];case"forward":return[...n].reverse().reduce((r,a)=>wt(r,a,e,!0),[...t]);case"backward":return n.reduce((r,a)=>wt(r,a,e,!1),[...t])}},Ho=(t,e,o)=>{let n=t.map(r=>r.id);const i=[];return e.forEach((r,a)=>{if(!o.has(r.id))return;const d=e[a-1]?.id??null,s=n.indexOf(r.id);(n[s-1]??null)!==d&&(n=n.filter(c=>c!==r.id),n.splice(d===null?0:n.indexOf(d)+1,0,r.id),i.push(w.reorder(r.id,d)))}),i},Wo=(t,e,o)=>{const n=mt(t),i=new Set(e.filter(r=>n.some(a=>a.id===r)));return i.size===0?[]:Ho(n,xt(n,i,o),i)},Ko=(t,e)=>{const o=mt(t),n=new Set(e.filter(a=>o.some(d=>d.id===a))),i=o.flatMap(a=>n.has(a.id)?o.filter(d=>!n.has(d.id)&&le(a,d,0)).map(d=>[a,d]):[]),r=(a,[d,s])=>a.indexOf(d)>a.indexOf(s);return new Set(ft.filter(a=>{const d=xt(o,n,a);return i.some(s=>r(o,s)!==r(d,s))}))},yt=(t,e,o)=>{if(!t.contains(e)||e.nodeType!==Node.TEXT_NODE)return;let n=0;const i=t.ownerDocument.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(let r=i.nextNode();r!==null;r=i.nextNode()){if(r===e)return n+o;n+=r.textContent?.length??0}},qo=(t,e,o)=>{const n=t.getRootNode(),i=t.ownerDocument;if(typeof i.caretPositionFromPoint=="function"){const r=n instanceof ShadowRoot?[n]:[],a=i.caretPositionFromPoint(e,o,{shadowRoots:r});if(a!==null)return yt(t,a.offsetNode,a.offset)}if(typeof i.caretRangeFromPoint=="function"){const r=i.caretRangeFromPoint(e,o);if(r!==null)return yt(t,r.startContainer,r.startOffset)}},Uo=["sticky","text","rect","ellipse","frame"],Zo=t=>t==="rect"||t==="ellipse"?C.shape:C[t],Xo=(t,e,o,n)=>{const{w:i,h:r}=Zo(o),a={x:Math.round(n.x-i/2),y:Math.round(n.y-r/2)},d=zo(t,{...a,w:i,h:r},o==="frame"),l={id:We(`new-${o==="rect"||o==="ellipse"?"shape":o}`,je(t)),x:d.x,y:d.y,w:i,h:r};switch(o){case"sticky":return{...l,kind:"sticky",text:"",color:H.sticky,fontSize:re};case"text":return{...l,kind:"text",text:"",fontSize:re};case"rect":case"ellipse":return{...l,kind:"shape",shape:o,text:"",color:H.shape,fontSize:re};case"frame":return{...l,kind:"frame",title:e.newFrameTitle,color:H.frame}}},Vo=(t,e,o)=>We(`${e}-to-${o}`,je(t)),Go=(t,e)=>{const o=(t.kind==="frame"?e.replace(/\r?\n/g," "):e).trim();if(!(t.kind==="frame"&&o===""))return o===L(t)?void 0:o},ue=4,_e=(t,e,o,n,i=[e])=>{if(p(t,e)===void 0)return;const r=new Map;for(const a of i.includes(e)?i:[e,...i]){const d=p(t,a);if(d!==void 0)for(const s of d.kind==="frame"?[d,...$e(t,d)]:[d])r.set(s.id,s)}return{kind:"move",pointerId:o,itemId:e,origins:[...r.values()].map(({id:a,x:d,y:s})=>({id:a,x:d,y:s})),start:n,current:n,moved:!1}},Yo=(t,e,o,n)=>{const i=p(t,e);if(i!==void 0)return{kind:"resize",pointerId:o,itemId:e,origin:{w:i.w,h:i.h},start:n,current:n,moved:!1,keepRatio:!1}},jo=(t,e)=>({kind:"pan",pointerId:t,start:e,last:e,moved:!1}),Jo=(t,e)=>({gesture:{...t,last:e,moved:t.moved||Math.hypot(e.x-t.start.x,e.y-t.start.y)>ue},dx:e.x-t.last.x,dy:e.y-t.last.y}),kt=(t,e,o)=>({kind:"marquee",pointerId:t,base:o,start:e,current:e,moved:!1}),Qo=(t,e,o,n,i)=>{const r=$o(t,n).find(d=>e.includes(d.id));return(r===void 0?void 0:_e(t,r.id,o,n,e))??kt(o,n,i)},gt=t=>t?.kind==="marquee"&&t.moved?Eo(t.start,t.current):void 0,vt=(t,e)=>{const o=gt(e);if(e.kind!=="marquee"||o===void 0)return[];const n=So(t,o).map(i=>i.id);return[...new Set([...e.base,...n])]},en=(t,e,o)=>({kind:"connect",pointerId:e,fromId:t,start:o,current:o,moved:!1}),Le=(t,e,o,n,i,r=!1)=>{if(e.pointerId!==o)return e;switch(e.kind){case"pan":return e;case"marquee":case"move":{const a=e.moved||Math.hypot(n.x-e.start.x,n.y-e.start.y)*i>ue;return{...e,current:n,moved:a}}case"resize":{const a=e.moved||Math.hypot(n.x-e.start.x,n.y-e.start.y)*i>ue;return{...e,current:n,moved:a,keepRatio:r}}case"connect":{const a=e.moved||Math.hypot(n.x-e.start.x,n.y-e.start.y)*i>ue,d=ze(t,n,e.fromId),{targetId:s,...c}=e;return d===void 0?{...c,current:n,moved:a}:{...c,current:n,moved:a,targetId:d.id}}}},K=t=>Math.round(t),$t=(t,e)=>{if(e===void 0||!e.moved)return t;if(e.kind==="move"){const o=e.current.x-e.start.x,n=e.current.y-e.start.y,i=new Map(e.origins.map(r=>[r.id,r]));return{...t,items:t.items.map(r=>{const a=i.get(r.id);return a===void 0?r:{...r,x:K(a.x+o),y:K(a.y+n)}})}}if(e.kind==="resize"){const o=Et(e);return{...t,items:t.items.map(n=>n.id===e.itemId?{...n,...o}:n)}}return t},Et=t=>{const{origin:e}=t,o=e.w+t.current.x-t.start.x,n=e.h+t.current.y-t.start.y;if(!t.keepRatio)return{w:Math.max(Z,K(o)),h:Math.max(Z,K(n))};const i=Math.max(o/e.w,n/e.h,Z/Math.min(e.w,e.h));return{w:K(e.w*i),h:K(e.h*i)}},tn=(t,e,o,n)=>{const[i]=e;if(i===void 0)return[];const r=_e(t,i,0,{x:0,y:0},e);if(r?.kind!=="move")return[];const a=Tt(t,{...r,current:{x:o,y:n},moved:!0});return a.kind==="dispatch"?a.inputs:[]},Tt=(t,e)=>{switch(e.kind){case"pan":return e.moved?{kind:"none"}:{kind:"click"};case"marquee":{if(e.moved)return{kind:"select",ids:vt(t,e)};const o=ze(t,e.start);return o===void 0?{kind:"click"}:{kind:"click",itemId:o.id}}case"move":{if(!e.moved)return{kind:"click",itemId:e.itemId};const o=$t(t,e),n=e.origins.flatMap(i=>{const r=p(o,i.id);return r===void 0||r.x===i.x&&r.y===i.y?[]:[w.move(i.id,r.x,r.y)]});return n.length===0?{kind:"none"}:{kind:"dispatch",inputs:n}}case"resize":{if(!e.moved)return{kind:"click",itemId:e.itemId};const o=Et(e);return o.w===e.origin.w&&o.h===e.origin.h?{kind:"none"}:{kind:"dispatch",inputs:[w.resize(e.itemId,o.w,o.h)]}}case"connect":return e.moved?e.targetId===void 0?{kind:"none"}:{kind:"connect",from:e.fromId,to:e.targetId}:{kind:"click",itemId:e.fromId}}},Oe=.1,St=2.5,on={x:0,y:0,zoom:1},nn=96,Ie=(t,e)=>({x:(e.x-t.x)/t.zoom,y:(e.y-t.y)/t.zoom}),Ce=(t,e)=>({x:e.x*t.zoom+t.x,y:e.y*t.zoom+t.y}),be=(t,e,o)=>({...t,x:t.x+e,y:t.y+o}),Re=(t,e,o)=>{const n=ye(t.zoom*o,Oe,St),i=Ie(t,e);return{zoom:n,x:e.x-i.x*n,y:e.y-i.y*n}},zt=(t,e,o=48,n=1)=>{const i=Math.max(1,e.width-o*2),r=Math.max(1,e.height-o*2),a=ye(Math.min(i/Math.max(1,t.w),r/Math.max(1,t.h)),Oe,n);return{zoom:a,x:e.width/2-(t.x+t.w/2)*a,y:e.height/2-(t.y+t.h/2)*a}},Mt=(t,e,o)=>{if(e===null||o.width<=0||o.height<=0)return t;const n=(i,r,a,d)=>{const s=Math.min(nn,d/2),c=s-(r+a)*t.zoom,l=d-s-r*t.zoom;return ye(i,Math.min(c,l),Math.max(c,l))};return{zoom:t.zoom,x:n(t.x,e.x,e.w,o.width),y:n(t.y,e.y,e.h,o.height)}},rn=(t,e,o,n=24)=>{const i=e.x*t.zoom+t.x,r=e.y*t.zoom+t.y,a=i+e.w*t.zoom,d=r+e.h*t.zoom;return i>=n&&r>=n&&a<=o.width-n&&d<=o.height-n?t:{zoom:t.zoom,x:o.width/2-(e.x+e.w/2)*t.zoom,y:o.height/2-(e.y+e.h/2)*t.zoom}},_t=(t,e,o,n)=>{const i=t+e-(o-n),r=i>0?-i:0;return t+r<n?n-t:r},an=(t,e)=>t.x===e.x&&t.y===e.y&&t.zoom===e.zoom,v={kind:"idle"},j=(t,e)=>t.kind==="editing"&&t.itemId===e,sn={front:_(so),forward:_(Zt),backward:_(Ut),back:_(ho)},Lt=[["circle",{cx:"19",cy:"5",r:"2"}],["circle",{cx:"5",cy:"19",r:"2"}]],dn={straight:_([...Lt,["path",{d:"M6.5 17.5 17.5 6.5"}]]),elbow:_([...Lt,["path",{d:"M7 19h5V5h5"}]]),curve:_(po)},cn=t=>sn[t](),ln=t=>dn[t](),hn=_(co),pn=_(lo),un={yellow:{paper:"#fff0a3",ink:"#4a3a06",stroke:"#d9a900"},orange:{paper:"#ffd1a0",ink:"#4a2503",stroke:"#ec7f1d"},pink:{paper:"#ffc9dd",ink:"#4b1029",stroke:"#de4479"},purple:{paper:"#ddcbf8",ink:"#32195c",stroke:"#8a5bd6"},blue:{paper:"#c0ddf7",ink:"#0e2c4b",stroke:"#3a80d4"},green:{paper:"#cdeba5",ink:"#22380a",stroke:"#55a42c"},gray:{paper:"#e3e6eb",ink:"#2a2f38",stroke:"#868d99"}},Ne=t=>{const{paper:e,ink:o,stroke:n}=un[t];return`--wb-paper:${e};--wb-ink:${o};--wb-stroke:${n}`},Ot={sticky:"addSticky",text:"addText",rect:"addRect",ellipse:"addEllipse",frame:"addFrame"},It={small:.8,medium:1,large:1.4,xlarge:2},bn=t=>{const e=24*t.zoom;return`background-size:${e}px ${e}px;background-position:${t.x}px ${t.y}px`},fn=t=>{const{m:e,state:o,viewport:n,gesture:i,handlers:r}=t,a=["wb-canvas"];i?.moved===!0&&a.push("wb-canvas--gesturing"),i?.kind==="pan"&&i.moved&&a.push("wb-canvas--panning"),i?.kind==="connect"&&a.push("wb-canvas--connecting"),(t.panReady||i?.kind==="pan")&&a.push("wb-canvas--pan-ready");const d=Te(o);return h`<div
-    class=${a.join(" ")}
-    data-testid="wb-canvas"
-    tabindex="0"
-    role="application"
-    aria-label=${e.canvasLabel}
-    style=${bn(n)}
-    @pointerdown=${r.canvasPointerDown}
-    @pointermove=${r.canvasPointerMove}
-    @pointerup=${r.canvasPointerUp}
-    @pointercancel=${r.canvasPointerCancel}
-    @wheel=${r.canvasWheel}
-    @dblclick=${r.canvasDblClick}
-    @keydown=${r.canvasKeyDown}
-    @keyup=${r.canvasKeyUp}
-    @blur=${r.canvasBlur}
-  >
-    <div
-      class="wb-world"
-      style=${`transform:translate(${n.x}px, ${n.y}px) scale(${n.zoom});--wb-zoom:${n.zoom}`}
-    >
-      ${Xt(d,s=>s.id,s=>xn(t,s))}
-      ${gn(t)} ${vn(t)}
-    </div>
-    ${o.items.length===0?h`<p class="wb-hint wb-hint--empty">${e.emptyHint}</p>`:b}
-    ${mn(t)} ${i?.moved===!0?b:t.overlay} ${$n(e,r)}
-    ${En(e,n,r)}
-  </div>`},mn=({marquee:t,viewport:e})=>{if(t===void 0)return b;const o=Ce(e,t),n=`width:${t.w*e.zoom}px;height:${t.h*e.zoom}px`;return h`<div
-    class="wb-marquee"
-    aria-hidden="true"
-    style=${`left:${o.x}px;top:${o.y}px;${n}`}
-  ></div>`},wn=(t,e)=>{const o=["wb-item",`wb-item--${e.kind}`];e.kind==="shape"&&o.push(`wb-item--${e.shape}`),t.selectedIds.has(e.id)&&o.push("is-selected"),j(t.mode,e.id)&&o.push("is-editing");const n=t.gesture;return n?.kind==="move"&&n.moved&&n.origins.some(i=>i.id===e.id)&&o.push("is-lifted"),n?.kind==="connect"&&n.targetId===e.id&&o.push("is-target"),o.join(" ")},xn=(t,e)=>{const{m:o,context:n,handlers:i}=t,r=`left:${e.x}px;top:${e.y}px;width:${e.w}px;height:${e.h}px`,a=e.kind==="text"?"":`;${Ne(e.color)}`,d=X(e)?`;--wb-font-scale:${It[e.fontSize]}`:"",s=n.commentCount({type:"item",id:e.id}),c=t.selectedIds.size===1&&t.selectedIds.has(e.id)&&t.gesture?.moved!==!0,l=x=>i.itemPointerDown(e.id,x);return h`<div
-    class=${wn(t,e)}
-    style=${`${r}${a}${d}`}
-    data-item-id=${e.id}
-    data-kind=${e.kind}
-    @pointerdown=${e.kind==="frame"?b:l}
-  >
-    ${e.kind==="frame"?h`<div class="wb-frame-title" @pointerdown=${l}>${Ct(t,e)}</div>`:h`<div class="wb-item-body">${Ct(t,e)}</div>`}
-    ${s>0?h`<span class="wb-flag" title=${o.commentCount(s)}>${s}</span>`:b}
-    ${c?h`<span
-              class="wb-handle wb-handle--resize"
-              role="presentation"
-              title=${o.resizeHandle}
-              @pointerdown=${x=>i.resizePointerDown(e.id,x)}
-            ></span>
-            <span
-              class="wb-handle wb-handle--connect"
-              role="presentation"
-              title=${o.connectHandle}
-              @pointerdown=${x=>i.connectPointerDown(e.id,x)}
-            ></span>`:b}
-  </div>`},yn=t=>t.stopPropagation(),Ct=(t,e)=>{const{m:o,handlers:n}=t,i=L(e);if(!j(t.mode,e.id))return h`<span class="wb-text">${i}</span>`;const r=s=>{const c=s.currentTarget;(c instanceof HTMLInputElement||c instanceof HTMLTextAreaElement)&&n.editBlur(e.id,c.value)},a=s=>n.editKeyDown(e.id,s),d=s=>{const c=s.currentTarget;c instanceof HTMLInputElement&&c.previousElementSibling?.setAttribute("data-copy",c.value||o.textPlaceholder)};return e.kind==="frame"?h`<span class="wb-title-edit"
-        ><span class="wb-text" aria-hidden="true" data-copy=${i||o.textPlaceholder}></span
-        ><input
-          class="wb-editor"
-          type="text"
-          .value=${i}
-          placeholder=${o.textPlaceholder}
-          aria-label=${o.renameFrame}
-          @input=${d}
-          @blur=${r}
-          @keydown=${a}
-      /></span>`:h`<textarea
-        class="wb-editor"
-        .value=${i}
-        placeholder=${o.textPlaceholder}
-        aria-label=${o.editText}
-        spellcheck="false"
-        @blur=${r}
-        @keydown=${a}
-        @wheel=${yn}
-      ></textarea>`},kn=()=>xe`<marker id="wb-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
-    <path d="M0,0 L10,5 L0,10 z"></path>
-  </marker>`,Rt=(t,e)=>{const o=p(t,e.from),n=p(t,e.to);return o===void 0||n===void 0?void 0:[o,n]},gn=t=>{const{state:e,handlers:o,gesture:n}=t,i=e.connectors.map(a=>{const d=Rt(e,a);if(d===void 0)return b;const{d:s}=ce(...d,a.route),c=t.selectedIds.has(a.id)?" is-selected":"";return xe`<g data-connector-id=${a.id}>
-      <path class="wb-link-hit" d=${s} @pointerdown=${l=>o.connectorPointerDown(a.id,l)}></path>
-      <path class=${`wb-link${c}`} d=${s} marker-end=${a.style==="arrow"?"url(#wb-arrow)":b}></path>
-    </g>`});let r=b;if(n?.kind==="connect"&&n.moved){const a=p(e,n.fromId),d=n.targetId===void 0?void 0:p(e,n.targetId);if(a!==void 0){const s=d===void 0?n.current:Y(d,W(a)),c=Y(a,s);r=xe`<path class="wb-link wb-link--draft" d=${`M ${c.x} ${c.y} L ${s.x} ${s.y}`} marker-end="url(#wb-arrow)"></path>`}}return h`<svg class="wb-links" width="1" height="1" aria-hidden="true">
-    <defs>${kn()}</defs>
-    ${i} ${r}
-  </svg>`},vn=t=>{const{state:e,context:o,handlers:n}=t;return e.connectors.flatMap(i=>{const r=Rt(e,i),a=o.commentCount({type:"connector",id:i.id});if(r===void 0||i.label===void 0&&a===0)return[];const{mid:d}=ce(...r,i.route),s=t.selectedIds.has(i.id)?" is-selected":"";return[h`<div
-        class=${`wb-link-label${s}`}
-        data-connector-label=${i.id}
-        style=${`left:${d.x}px;top:${d.y}px`}
-        @pointerdown=${c=>n.connectorPointerDown(i.id,c)}
-      >
-        ${i.label??b}
-        ${a>0?h`<span class="wb-flag wb-flag--inline">${a}</span>`:b}
-      </div>`]})},fe=t=>t.stopPropagation(),$n=(t,e)=>h`<div class="wb-tools" role="toolbar" aria-label=${t.toolsLabel} @pointerdown=${fe} @dblclick=${fe}>
-    ${Uo.map(o=>h`<button
-          type="button"
-          class="wb-tool"
-          data-add=${o}
-          title=${t[Ot[o]]}
-          aria-label=${t[Ot[o]]}
-          @click=${()=>e.addItem(o)}
-        >
-          <span class=${`wb-tool-icon wb-tool-icon--${o}`} aria-hidden="true"></span>
-        </button>`)}
-  </div>`,En=(t,e,o)=>h`<div class="wb-zoom" @pointerdown=${fe} @dblclick=${fe}>
-    <button type="button" aria-label=${t.zoomOut} @click=${()=>o.zoomStep(-1)}>${Vt()}</button>
-    <button type="button" class="wb-zoom-pct" title=${t.zoomReset} @click=${()=>o.zoomReset()}>
-      ${Math.round(e.zoom*100)}%
-    </button>
-    <button type="button" aria-label=${t.zoomIn} @click=${()=>o.zoomStep(1)}>${Gt()}</button>
-    <button type="button" aria-label=${t.zoomFit} title=${t.zoomFit} @click=${()=>o.zoomFit()}>
-      ${pn()}
-    </button>
-  </div>`,Tn=t=>{const{m:e,state:o,focused:n}=t,i=o.items.filter(r=>r.kind==="frame");return h`<nav class="wb-frames" aria-label=${e.framesHeading}>
-    <p class="dpk-label">${e.framesHeading}</p>
-    <p class="wb-frames-hint">${e.framesHint}</p>
-    <ul>
-      <li>
-        <button
-          type="button"
-          class="wb-frame-link"
-          aria-current=${String(n===void 0)}
-          @click=${t.showBoard}
-        >
-          <span class="wb-frame-dot wb-frame-dot--board" aria-hidden="true"></span>
-          <span class="wb-frame-name">${e.wholeBoard}</span>
-          <span class="wb-frame-count">${e.memberCount(o.items.length)}</span>
-        </button>
-      </li>
-      ${i.map(r=>h`<li>
-            <button
-              type="button"
-              class="wb-frame-link"
-              data-frame=${r.id}
-              aria-current=${String(n===r.id)}
-              @click=${()=>t.focusFrame(r.id)}
-            >
-              <span class="wb-frame-dot" style=${Ne(r.color)} aria-hidden="true"></span>
-              <span class="wb-frame-name">${r.title}</span>
-              <span class="wb-frame-count">${e.memberCount($e(o,r).length)}</span>
-            </button>
-          </li>`)}
-    </ul>
-  </nav>`},Ae={item:14,frame:40,connector:18},Sn=t=>{const{selection:e,viewport:o,state:n}=t;if(e.kind==="items"){const d=G(e.items);if(d===null)return;const s=e.items.some(l=>l.kind==="frame"&&l.y===d.y),c=Ce(o,{x:d.x+d.w/2,y:d.y});return{x:c.x,y:c.y-(s?Ae.frame:Ae.item)}}const i=p(n,e.connector.from),r=p(n,e.connector.to);if(i===void 0||r===void 0)return;const a=Ce(o,ce(i,r,e.connector.route).mid);return{x:a.x,y:a.y-Ae.connector}},De=t=>t.stopPropagation(),me=h`<span class="wb-toolbar-sep" aria-hidden="true"></span>`,Nt=t=>t.length>0&&t.every(e=>e===t[0])?t[0]:void 0,zn=t=>{const e=Sn(t);if(e===void 0)return b;const{m:o,selection:n,handlers:i}=t,r=n.kind==="connector"?n.connector:n.items.length===1?n.items[0]:void 0,a=r===void 0?void 0:n.kind==="connector"?`connector:${r.id}`:`item:${r.id}`,d=n.kind==="items"&&n.items.length>1?o.selectionCount(n.items.length):o.selectionLabel;return h`<div
-    class="wb-toolbar"
-    role="toolbar"
-    aria-label=${d}
-    style=${`left:${e.x}px;top:${e.y}px`}
-    @pointerdown=${De}
-    @dblclick=${De}
-    @keydown=${De}
-  >
-    ${n.kind==="items"?_n(t,n.items):On(t,n.connector)}
-    ${a===void 0?b:h`<button
-            type="button"
-            class="dpk-icon-btn wb-toolbar-btn"
-            data-role="comment"
-            aria-label=${o.comment}
-            title=${o.comment}
-            data-active=${String(t.commenting)}
-            @click=${()=>i.toggleComment(a)}
-          >
-            ${Yt()}
-            ${t.comments>0?h`<span class="wb-toolbar-count">${t.comments}</span>`:b}
-          </button>`}
-    <button
-      type="button"
-      class="dpk-icon-btn wb-toolbar-btn"
-      data-role="delete"
-      aria-label=${o.delete}
-      title=${o.delete}
-      @click=${()=>i.deleteSelection()}
-    >
-      ${jt()}
-    </button>
-  </div>`},Mn={front:"\u2318/Ctrl ]",forward:"]",backward:"[",back:"\u2318/Ctrl ["},_n=(t,e)=>{const{m:o,handlers:n}=t,i=e.filter(ve).map(s=>s.color),r=e.flatMap(s=>X(s)?[s.fontSize]:[]),a=Nt(i),d=Nt(r);return h`
-    ${i.length>0?h`<div class="wb-swatches" role="radiogroup" aria-label=${o.colorLabelPrefix}>
-              ${ne.map(s=>h`<button
-                    type="button"
-                    class="wb-swatch"
-                    role="radio"
-                    data-color=${s}
-                    style=${Ne(s)}
-                    aria-checked=${String(a===s)}
-                    aria-label=${`${o.colorLabelPrefix}: ${o.colorLabel(s)}`}
-                    title=${o.colorLabel(s)}
-                    @click=${()=>n.setColor(s)}
-                  ></button>`)}
-            </div>
-            ${me}`:b}
-    ${r.length>0?h`<div class="wb-choice" role="radiogroup" aria-label=${o.fontSizeLabelPrefix}>
-              ${ie.map(s=>h`<button
-                    type="button"
-                    class="wb-choice-btn"
-                    role="radio"
-                    data-font-size=${s}
-                    aria-checked=${String(d===s)}
-                    aria-label=${`${o.fontSizeLabelPrefix}: ${o.fontSizeLabel(s)}`}
-                    title=${`${o.fontSizeLabelPrefix}: ${o.fontSizeLabel(s)}`}
-                    @click=${()=>n.setFontSize(s)}
-                  >
-                    ${o.fontSizeShort(s)}
-                  </button>`)}
-            </div>
-            ${me}`:b}
-    ${t.arrange.size>0?h`${Ln(t)} ${me}`:b}
-  `},Ln=t=>{const{m:e,handlers:o}=t,n={front:e.bringToFront,forward:e.bringForward,backward:e.sendBackward,back:e.sendToBack};return h`<div class="wb-menu-anchor" @keydown=${r=>{r.key==="Escape"&&o.toggleArrangeMenu()}}>
-    <button
-      type="button"
-      class="wb-menu-btn"
-      data-role="arrange"
-      aria-haspopup="menu"
-      aria-expanded=${String(t.arrangeMenuOpen)}
-      aria-label=${e.arrangeLabel}
-      title=${e.arrangeLabel}
-      @click=${()=>o.toggleArrangeMenu()}
-    >
-      ${hn()} ${Qt()}
-    </button>
-    ${t.arrangeMenuOpen?h`<div class="wb-menu" role="menu" aria-label=${e.arrangeLabel}>
-            ${ft.map(r=>h`<button
-                  type="button"
-                  class="wb-menu-item"
-                  role="menuitem"
-                  data-arrange=${r}
-                  ?disabled=${!t.arrange.has(r)}
-                  @click=${()=>o.arrange(r)}
-                >
-                  ${cn(r)}
-                  <span class="wb-menu-label">${n[r]}</span>
-                  <kbd class="wb-menu-key">${Mn[r]}</kbd>
-                </button>`)}
-          </div>`:b}
-  </div>`},On=(t,e)=>{const{m:o,handlers:n}=t;return h`<div class="wb-choice" role="radiogroup" aria-label=${o.routeLabelPrefix}>
-      ${U.map(i=>h`<button
-            type="button"
-            class="wb-choice-btn wb-choice-btn--icon"
-            role="radio"
-            data-route=${i}
-            aria-checked=${String(e.route===i)}
-            aria-label=${`${o.routeLabelPrefix}: ${o.routeLabel(i)}`}
-            title=${o.routeLabel(i)}
-            @click=${()=>n.setRoute(e.id,i)}
-          >
-            ${ln(i)}
-          </button>`)}
-    </div>
-    ${me}
-    <dpk-component-inline-edit
-      class="wb-toolbar-label"
-      .value=${e.label??""}
-      .placeholder=${o.labelPlaceholder}
-      .label=${o.labelField}
-      @dpk-commit=${Jt(i=>n.setLabel(e.id,i))}
-    ></dpk-component-inline-edit>`},In=eo`
-  /* The board owns the whole main area; the canvas clips, never the shell. */
-  .dpk-main {
-    overflow: hidden;
-  }
-
-  .dpk-main-body {
-    flex: 1 1 auto;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    gap: 0;
-  }
-
-  /* ---------------------------------------------------------------- canvas */
-
-  .wb-canvas {
-    position: relative;
-    flex: 1 1 auto;
-    min-height: 0;
-    overflow: hidden;
-    touch-action: none;
-    background: var(--dpk-dots), var(--dpk-paper-sunken);
-    cursor: default;
-    outline: none;
-  }
-
-  .wb-canvas:focus-visible {
-    box-shadow: inset var(--dpk-focus);
-  }
-
-  /* Space held (or a pan under way): the whole board, items included, is a handle. */
-  .wb-canvas--pan-ready,
-  .wb-canvas--pan-ready .wb-item,
-  .wb-canvas--pan-ready .wb-frame-title {
-    cursor: grab;
-  }
-
-  .wb-canvas--panning,
-  .wb-canvas--panning .wb-item {
-    cursor: grabbing;
-  }
-
-  .wb-canvas--gesturing,
-  .wb-canvas--gesturing * {
-    user-select: none;
-  }
-
-  .wb-canvas--connecting .wb-item {
-    cursor: crosshair;
-  }
-
-  /* Items are things to pick up, not text to select: a press on the board
-     never starts a text selection. Only the in-place editor takes one. */
-  .wb-world {
-    -webkit-user-select: none;
-    user-select: none;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 0;
-    height: 0;
-    transform-origin: 0 0;
-    will-change: transform;
-  }
-
-  /* ----------------------------------------------------------------- items */
-
-  .wb-item {
-    position: absolute;
-    box-sizing: border-box;
-    display: flex;
-    cursor: grab;
-  }
-
-  .wb-item-body {
-    flex: 1 1 auto;
-    min-width: 0;
-    min-height: 0;
-    display: flex;
-    overflow: hidden;
-  }
-
-  .wb-text {
-    flex: 1 1 auto;
-    min-width: 0;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-  }
-
-  /* The in-place editor is a bare field over the item's whole body, typeset
-     exactly like the text it replaces, so starting an edit moves nothing. */
-  .wb-editor {
-    flex: 1 1 auto;
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    min-width: 0;
-    align-self: stretch;
-    margin: 0;
-    padding: 0;
-    border: none;
-    border-radius: 0;
-    outline: none;
-    background: transparent;
-    color: inherit;
-    font: inherit;
-    letter-spacing: inherit;
-    text-align: inherit;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-    resize: none;
-    overflow: auto;
-    scrollbar-width: none;
-    -webkit-user-select: text;
-    user-select: text;
-  }
-
-  .wb-editor::placeholder {
-    color: currentColor;
-    opacity: 0.45;
-  }
-
-  /* A shape centers its text, so the field grows with the text and stays centered. */
-  .wb-item--shape .wb-editor {
-    align-self: center;
-    max-height: 100%;
-    field-sizing: content;
-  }
-
-  .wb-title-edit {
-    position: relative;
-    display: block;
-  }
-
-  .wb-title-edit > .wb-text {
-    display: block;
-    visibility: hidden;
-    white-space: pre;
-  }
-
-  .wb-title-edit > .wb-text::before {
-    content: attr(data-copy);
-  }
-
-  /* A hair wider than the copy, so the caret at the end never scrolls the text. */
-  .wb-title-edit > .wb-editor {
-    position: absolute;
-    inset: 0 -2px 0 0;
-    width: auto;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .wb-item.is-editing {
-    cursor: text;
-  }
-
-  .wb-item.is-lifted {
-    cursor: grabbing;
-    opacity: 0.88;
-  }
-
-  .wb-item.is-selected::before,
-  .wb-item.is-target::before {
-    content: '';
-    position: absolute;
-    inset: calc(-4px / var(--wb-zoom, 1));
-    border: calc(2px / var(--wb-zoom, 1)) solid var(--dpk-blue);
-    border-radius: 6px;
-    pointer-events: none;
-  }
-
-  .wb-item.is-target::before {
-    border-style: dashed;
-    background: color-mix(in srgb, var(--dpk-blue) 8%, transparent);
-  }
-
-  /* Sticky: colored paper with a soft lift. It keeps its color in both themes. */
-  .wb-item--sticky {
-    padding: 16px 14px;
-    border-radius: 3px;
-    background: linear-gradient(170deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%), var(--wb-paper);
-    color: var(--wb-ink);
-    font-size: calc(15px * var(--wb-font-scale, 1));
-    font-weight: 560;
-    line-height: 1.35;
-    box-shadow:
-      inset 0 1px 0 rgba(255, 255, 255, 0.35),
-      0 1px 2px rgba(30, 24, 10, 0.14),
-      0 8px 14px -8px rgba(30, 24, 10, 0.32);
-  }
-
-  .wb-item--sticky .wb-item-body {
-    align-items: flex-start;
-  }
-
-  /* Text: no box at all, just type on the board. */
-  .wb-item--text {
-    padding: 4px 6px;
-    color: var(--dpk-ink);
-    font-size: calc(20px * var(--wb-font-scale, 1));
-    font-weight: 650;
-    line-height: 1.3;
-    letter-spacing: -0.01em;
-  }
-
-  /* Shape: the color's stroke around a tint of it, text centered. */
-  .wb-item--shape {
-    padding: 10px 14px;
-    border: 2px solid var(--wb-stroke);
-    border-radius: 8px;
-    background: color-mix(in srgb, var(--wb-stroke) 16%, var(--dpk-paper-raised));
-    color: var(--dpk-ink);
-    font-size: calc(14px * var(--wb-font-scale, 1));
-    font-weight: 600;
-    line-height: 1.35;
-    text-align: center;
-  }
-
-  .wb-item--ellipse {
-    border-radius: 50%;
-    padding: 14px 22px;
-  }
-
-  .wb-item--shape .wb-item-body {
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Frame: a titled area drawn behind everything; its title is a handle.
-     A click on its empty inside selects it; a drag there draws a selection
-     area, or moves the frame once it is selected. */
-  .wb-item--frame {
-    border: 1.5px solid color-mix(in srgb, var(--wb-stroke) 55%, transparent);
-    border-radius: 10px;
-    background: color-mix(in srgb, var(--wb-stroke) 7%, transparent);
-    cursor: default;
-  }
-
-  /* Selected, the whole frame is a handle. */
-  .wb-item--frame.is-selected {
-    cursor: grab;
-  }
-
-  .wb-frame-title {
-    position: absolute;
-    left: -1px;
-    bottom: 100%;
-    max-width: 100%;
-    margin-bottom: 6px;
-    padding: 3px 10px;
-    border-radius: 6px;
-    background: color-mix(in srgb, var(--wb-stroke) 20%, var(--dpk-paper-raised));
-    color: var(--dpk-ink);
-    font-size: 13px;
-    font-weight: 700;
-    line-height: 1.3;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: grab;
-  }
-
-  .wb-item--frame.is-editing .wb-frame-title {
-    overflow: visible;
-    cursor: text;
-  }
-
-  /* Comments already left: a corner flag, readable at a glance. */
-  .wb-flag {
-    position: absolute;
-    top: -8px;
-    right: -8px;
-    min-width: 18px;
-    height: 18px;
-    padding: 0 5px;
-    box-sizing: border-box;
-    border-radius: 999px;
-    background: var(--dpk-accent);
-    color: var(--dpk-accent-ink);
-    font-family: var(--dpk-mono);
-    font-size: 10px;
-    font-weight: 650;
-    line-height: 18px;
-    text-align: center;
-    pointer-events: none;
-  }
-
-  .wb-flag--inline {
-    position: static;
-    margin-left: 6px;
-  }
-
-  /* Selection handles keep their screen size at any zoom. */
-  .wb-handle {
-    position: absolute;
-    z-index: 2;
-    box-sizing: border-box;
-    width: calc(12px / var(--wb-zoom, 1));
-    height: calc(12px / var(--wb-zoom, 1));
-    border: calc(2px / var(--wb-zoom, 1)) solid var(--dpk-blue);
-    background: var(--dpk-paper-raised);
-  }
-
-  .wb-handle--resize {
-    right: calc(-7px / var(--wb-zoom, 1));
-    bottom: calc(-7px / var(--wb-zoom, 1));
-    border-radius: 3px;
-    cursor: nwse-resize;
-  }
-
-  .wb-handle--connect {
-    top: 50%;
-    right: calc(-22px / var(--wb-zoom, 1));
-    width: calc(14px / var(--wb-zoom, 1));
-    height: calc(14px / var(--wb-zoom, 1));
-    border-radius: 50%;
-    transform: translateY(-50%);
-    background: var(--dpk-blue);
-    cursor: crosshair;
-  }
-
-  /* A selection area being dragged out, in screen space over the board. */
-  .wb-marquee {
-    position: absolute;
-    z-index: 35;
-    box-sizing: border-box;
-    border: 1px solid var(--dpk-blue);
-    border-radius: 2px;
-    background: color-mix(in srgb, var(--dpk-blue) 10%, transparent);
-    pointer-events: none;
-  }
-
-  /* ------------------------------------------------------------ connectors */
-
-  .wb-links {
-    position: absolute;
-    left: 0;
-    top: 0;
-    overflow: visible;
-    pointer-events: none;
-  }
-
-  .wb-links marker path {
-    fill: var(--dpk-ink-soft);
-  }
-
-  .wb-link {
-    fill: none;
-    stroke: var(--dpk-ink-soft);
-    stroke-width: 2;
-    stroke-linecap: round;
-  }
-
-  .wb-link.is-selected {
-    stroke: var(--dpk-blue);
-    stroke-width: 3;
-  }
-
-  .wb-link--draft {
-    stroke: var(--dpk-blue);
-    stroke-dasharray: 6 5;
-  }
-
-  .wb-link-hit {
-    fill: none;
-    stroke: transparent;
-    stroke-width: 14;
-    pointer-events: stroke;
-    cursor: pointer;
-  }
-
-  .wb-link-label {
-    position: absolute;
-    transform: translate(-50%, -50%);
-    max-width: 180px;
-    padding: 2px 8px;
-    border: 1px solid var(--dpk-rule);
-    border-radius: 999px;
-    background: var(--dpk-paper-raised);
-    color: var(--dpk-ink-soft);
-    font-size: 12px;
-    line-height: 1.4;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    cursor: pointer;
-  }
-
-  .wb-link-label.is-selected {
-    border-color: var(--dpk-blue);
-    color: var(--dpk-blue);
-  }
-
-  /* ----------------------------------------------------------------- chrome */
-
-  .wb-hint {
-    position: absolute;
-    left: 50%;
-    top: 16px;
-    z-index: 30;
-    transform: translateX(-50%);
-    margin: 0;
-    padding: 6px 14px;
-    border: 1px solid var(--dpk-rule);
-    border-radius: 999px;
-    background: var(--dpk-glass);
-    backdrop-filter: blur(12px);
-    color: var(--dpk-ink-soft);
-    font-size: 12.5px;
-    pointer-events: none;
-  }
-
-  .wb-hint--empty {
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .wb-tools,
-  .wb-zoom,
-  .wb-toolbar {
-    position: absolute;
-    z-index: 40;
-    display: flex;
-    align-items: center;
-    border: 1px solid var(--dpk-rule);
-    border-radius: var(--dpk-radius);
-    background: var(--dpk-glass);
-    backdrop-filter: blur(12px);
-    box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
-  }
-
-  .wb-tools {
-    left: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    flex-direction: column;
-    gap: 2px;
-    padding: 4px;
-  }
-
-  .wb-tool {
-    display: grid;
-    place-items: center;
-    width: 34px;
-    height: 34px;
-    border: none;
-    border-radius: var(--dpk-radius-sm);
-    background: transparent;
-    cursor: pointer;
-  }
-
-  .wb-tool:hover,
-  .wb-tool:focus-visible {
-    background: var(--dpk-blue-soft);
-  }
-
-  .wb-tool-icon {
-    display: block;
-    box-sizing: border-box;
-  }
-
-  .wb-tool-icon--sticky {
-    width: 18px;
-    height: 18px;
-    border-radius: 2px;
-    background: #ffe27a;
-    box-shadow: 0 1px 2px rgba(30, 24, 10, 0.3);
-  }
-
-  .wb-tool-icon--text::before {
-    content: 'T';
-    color: var(--dpk-ink);
-    font-family: var(--dpk-display);
-    font-size: 18px;
-    font-weight: 700;
-  }
-
-  .wb-tool-icon--rect,
-  .wb-tool-icon--ellipse {
-    width: 20px;
-    height: 14px;
-    border: 2px solid var(--dpk-ink-soft);
-    border-radius: 3px;
-  }
-
-  .wb-tool-icon--ellipse {
-    border-radius: 50%;
-  }
-
-  .wb-tool-icon--frame {
-    width: 20px;
-    height: 16px;
-    border: 1.5px dashed var(--dpk-ink-soft);
-    border-radius: 3px;
-  }
-
-  .wb-zoom {
-    right: 12px;
-    bottom: 12px;
-    overflow: hidden;
-  }
-
-  .wb-zoom button {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: none;
-    background: transparent;
-    padding: 6px 10px;
-    font-size: 12px;
-    line-height: 1;
-    color: var(--dpk-ink-soft);
-    cursor: pointer;
-  }
-
-  .wb-zoom button svg {
-    width: 13px;
-    height: 13px;
-  }
-
-  .wb-zoom button:hover {
-    background: var(--dpk-blue-soft);
-    color: var(--dpk-blue);
-  }
-
-  .wb-zoom-pct {
-    min-width: 48px;
-    font-family: var(--dpk-mono);
-  }
-
-  /* The floating toolbar over the selection. */
-  .wb-toolbar {
-    transform: translate(-50%, -100%);
-    translate: var(--wb-nudge-x, 0) var(--wb-nudge-y, 0);
-    gap: 2px;
-    padding: 4px;
-    white-space: nowrap;
-  }
-
-  .wb-toolbar-btn {
-    position: relative;
-  }
-
-  .wb-toolbar-count {
-    position: absolute;
-    top: -4px;
-    right: -4px;
-    min-width: 14px;
-    height: 14px;
-    border-radius: 999px;
-    background: var(--dpk-accent);
-    color: var(--dpk-accent-ink);
-    font-family: var(--dpk-mono);
-    font-size: 9px;
-    line-height: 14px;
-    text-align: center;
-  }
-
-  .wb-toolbar-sep {
-    width: 1px;
-    height: 18px;
-    margin: 0 4px;
-    background: var(--dpk-rule);
-  }
-
-  .wb-toolbar-label {
-    min-width: 120px;
-    padding: 0 6px;
-    font-size: 12.5px;
-  }
-
-  /* A segmented choice (text size, line shape): a sunken track, the current
-     option raised out of it. */
-  .wb-choice {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-    padding: 2px;
-    border-radius: var(--dpk-radius-sm);
-    background: var(--dpk-paper-inset);
-  }
-
-  .wb-choice-btn {
-    display: grid;
-    place-items: center;
-    min-width: 28px;
-    height: 24px;
-    padding: 0 6px;
-    border: none;
-    border-radius: var(--dpk-radius-xs);
-    background: transparent;
-    color: var(--dpk-ink-soft);
-    font-family: inherit;
-    font-size: 11.5px;
-    font-weight: 650;
-    letter-spacing: 0.02em;
-    line-height: 1;
-    cursor: pointer;
-    transition:
-      background 140ms var(--dpk-ease),
-      color 140ms var(--dpk-ease),
-      box-shadow 140ms var(--dpk-ease);
-  }
-
-  .wb-choice-btn--icon {
-    padding: 0;
-  }
-
-  .wb-choice-btn svg {
-    display: block;
-    width: 16px;
-    height: 16px;
-  }
-
-  .wb-choice-btn:hover {
-    color: var(--dpk-ink);
-  }
-
-  .wb-choice-btn:focus-visible {
-    outline: none;
-    box-shadow: var(--dpk-focus);
-  }
-
-  .wb-choice-btn[aria-checked='true'] {
-    background: var(--dpk-paper-raised);
-    color: var(--dpk-blue-strong);
-    box-shadow:
-      0 0 0 0.5px var(--dpk-rule),
-      0 1px 2px rgba(15, 23, 42, 0.12);
-  }
-
-  /* Stacking order: a button that drops a menu of named moves. */
-  .wb-menu-anchor {
-    position: relative;
-    display: flex;
-  }
-
-  .wb-menu-btn {
-    display: inline-flex;
-    align-items: center;
-    gap: 1px;
-    height: 26px;
-    padding: 0 4px 0 6px;
-    border: none;
-    border-radius: var(--dpk-radius-xs);
-    background: transparent;
-    color: var(--dpk-ink-soft);
-    cursor: pointer;
-  }
-
-  .wb-menu-btn svg {
-    display: block;
-    width: 15px;
-    height: 15px;
-  }
-
-  .wb-menu-btn svg:last-child {
-    width: 11px;
-    height: 11px;
-    opacity: 0.7;
-  }
-
-  .wb-menu-btn:hover,
-  .wb-menu-btn[aria-expanded='true'] {
-    background: var(--dpk-paper-inset);
-    color: var(--dpk-ink);
-  }
-
-  .wb-menu-btn:focus-visible {
-    outline: none;
-    box-shadow: var(--dpk-focus);
-  }
-
-  /* Opens toward the toolbar's middle: its button sits near the right end. */
-  .wb-menu {
-    position: absolute;
-    right: 0;
-    top: calc(100% + 8px);
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    min-width: 200px;
-    padding: 4px;
-    border: 1px solid var(--dpk-rule);
-    border-radius: var(--dpk-radius);
-    background: var(--dpk-paper-raised);
-    box-shadow: var(--dpk-bevel), var(--dpk-shadow);
-  }
-
-  .wb-menu-item {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 7px 8px;
-    border: none;
-    border-radius: var(--dpk-radius-xs);
-    background: transparent;
-    color: var(--dpk-ink);
-    font: inherit;
-    font-size: 12.5px;
-    text-align: left;
-    cursor: pointer;
-  }
-
-  .wb-menu-item svg {
-    flex: none;
-    width: 15px;
-    height: 15px;
-    color: var(--dpk-ink-soft);
-  }
-
-  .wb-menu-item:hover:not([disabled]),
-  .wb-menu-item:focus-visible {
-    outline: none;
-    background: var(--dpk-blue-soft);
-  }
-
-  .wb-menu-item[disabled] {
-    color: var(--dpk-ink-faint);
-    cursor: default;
-  }
-
-  .wb-menu-item[disabled] svg {
-    opacity: 0.5;
-  }
-
-  .wb-menu-label {
-    flex: 1 1 auto;
-  }
-
-  .wb-menu-key {
-    color: var(--dpk-ink-faint);
-    font-family: var(--dpk-mono);
-    font-size: 10.5px;
-  }
-
-  .wb-swatches {
-    display: flex;
-    gap: 3px;
-    padding: 0 2px;
-  }
-
-  .wb-swatch {
-    width: 18px;
-    height: 18px;
-    padding: 0;
-    border: 2px solid color-mix(in srgb, var(--wb-stroke) 70%, transparent);
-    border-radius: 50%;
-    background: var(--wb-paper);
-    cursor: pointer;
-  }
-
-  .wb-swatch[aria-checked='true'] {
-    outline: 2px solid var(--dpk-blue);
-    outline-offset: 1px;
-  }
-
-  /* --------------------------------------------------------------- sidebar */
-
-  .wb-frames {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    padding: 14px 12px;
-  }
-
-  .wb-frames p {
-    margin: 0;
-  }
-
-  .wb-frames-hint {
-    color: var(--dpk-ink-faint);
-    font-size: 11.5px;
-  }
-
-  .wb-frames ul {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    margin: 6px 0 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  .wb-frame-link {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    padding: 6px 8px;
-    border: none;
-    border-radius: var(--dpk-radius-sm);
-    background: transparent;
-    color: var(--dpk-ink);
-    font: inherit;
-    font-size: 13px;
-    text-align: left;
-    cursor: pointer;
-  }
-
-  .wb-frame-link:hover {
-    background: var(--dpk-blue-soft);
-  }
-
-  .wb-frame-link[aria-current='true'] {
-    background: color-mix(in srgb, var(--dpk-blue-soft) 80%, transparent);
-    color: var(--dpk-blue-strong);
-    font-weight: 650;
-  }
-
-  .wb-frame-dot {
-    flex: none;
-    width: 10px;
-    height: 10px;
-    border-radius: 3px;
-    background: var(--wb-stroke);
-  }
-
-  .wb-frame-dot--board {
-    border: 1.5px dashed var(--dpk-ink-faint);
-    background: transparent;
-  }
-
-  .wb-frame-name {
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .wb-frame-count {
-    flex: none;
-    color: var(--dpk-ink-faint);
-    font-family: var(--dpk-mono);
-    font-size: 10.5px;
-  }
-`,Cn={width:300,height:260},At=t=>t.stopPropagation(),Rn=10,Dt=8,Nn=t=>t!==void 0;class Pt extends Ke{static{this.styles=[Ke.styles,In,to]}static{this.properties={mode:{state:!0},viewport:{state:!0},gesture:{state:!0},panReady:{state:!0},arrangeMenu:{state:!0}}}#p="";#k=!1;#c;#u;#b;#i={on:"other"};#f=!1;#l=!1;#E;#C=new ao(this);constructor(){super(),this.mode=v,this.viewport=on,this.gesture=void 0,this.panReady=!1,this.arrangeMenu=!1}definitionFor(e){return bt(e)}renderRegions(e){const o=he(this.locale),n=e.state.items.some(d=>d.kind==="frame"),i=$t(e.state,this.gesture),r=gt(this.gesture),a=r!==void 0&&this.gesture!==void 0?vt(e.state,this.gesture):pe(e.navigation.item);return{...n?{sidebar:Tn({m:o,state:e.state,focused:e.navigation.frame,focusFrame:d=>this.#Q(d),showBoard:()=>this.#$()})}:{sidebarHidden:!0},main:fn({m:o,context:e,state:i,viewport:this.viewport,gesture:this.gesture,mode:this.mode,selectedIds:new Set(a),marquee:r,panReady:this.panReady,overlay:this.#N(e,i,o),handlers:{canvasPointerDown:d=>this.#W(d),canvasPointerMove:d=>this.#U(d),canvasPointerUp:d=>this.#Z(d),canvasPointerCancel:()=>this.gesture=void 0,canvasWheel:d=>this.#X(d),canvasDblClick:d=>this.#V(d),canvasKeyDown:d=>this.#G(d),canvasKeyUp:d=>{d.key===" "&&(this.panReady=!1),d.key==="Shift"&&this.#_(!1)},canvasBlur:()=>this.panReady=!1,itemPointerDown:(d,s)=>this.#K(d,s),resizePointerDown:(d,s)=>this.#M(s,Yo(e.state,d,s.pointerId,this.#o(s))),connectPointerDown:(d,s)=>this.#M(s,en(d,s.pointerId,this.#o(s))),connectorPointerDown:(d,s)=>this.#q(d,s),editBlur:(d,s)=>this.#S(d,s),editKeyDown:(d,s)=>this.#B(d,s),addItem:d=>this.#I(d,this.#H()),zoomStep:d=>this.#y(d===1?1.2:1/1.2),zoomFit:()=>this.#$(),zoomReset:()=>this.#y(1/this.viewport.zoom)}})}}updated(){super.updated(),this.#a()!==null&&(this.#ee(),this.#R(),this.#P(),this.#D())}#R(){const e=this.#a(),o=this.renderRoot.querySelector(".wb-toolbar");if(e===null||o===null)return;const n=s=>Number.parseFloat(o.style.getPropertyValue(`--wb-nudge-${s}`))||0,i=e.getBoundingClientRect(),r=o.getBoundingClientRect(),a=_t(r.left-n("x")-i.left,r.width,i.width,Dt),d=_t(r.top-n("y")-i.top,r.height,i.height,Dt);o.style.setProperty("--wb-nudge-x",`${a}px`),o.style.setProperty("--wb-nudge-y",`${d}px`)}#t(){return pe(this.context().navigation.item)}#e(e){const o=this.context(),n=it(e);o.navigation.item!==n&&(this.arrangeMenu=!1,o.navigate({item:n??null}))}#m(e){return this.#t().map(o=>p(e,o)).filter(Nn)}#N(e,o,n){if(this.mode.kind==="editing")return b;const i=this.#t(),r=this.#m(o),a=i.length===1?k(o,i[0]):void 0,d=a!==void 0?{kind:"connector",connector:a}:r.length>0?{kind:"items",items:r}:void 0;if(d===void 0)return b;const[s]=r,c=a!==void 0?I({type:"connector",id:a.id}):r.length===1&&s!==void 0?I({type:"item",id:s.id}):void 0,l=c!==void 0&&this.mode.kind==="commenting"&&this.mode.target===c,x=zn({m:n,state:o,viewport:this.viewport,selection:d,arrange:Ko(o,i),arrangeMenuOpen:this.arrangeMenu,commenting:l,comments:c===void 0?0:e.commentCount(c),handlers:{setColor:u=>this.#Y(u),setFontSize:u=>this.#j(u),arrange:u=>{this.arrangeMenu=!1,this.#L(u)},toggleArrangeMenu:()=>this.arrangeMenu=!this.arrangeMenu,toggleComment:u=>{this.#p="",this.mode=l?v:{kind:"commenting",target:u}},deleteSelection:()=>this.#O(),setLabel:(u,y)=>e.dispatch(w.setConnectorLabel(u,y)),setRoute:(u,y)=>{k(e.state,u)?.route!==y&&e.dispatch(w.setConnectorRoute(u,y))}}});return h`${x}
-      <div class="wb-composer" @pointerdown=${At} @dblclick=${At}>
-        ${l&&c!==void 0?this.#A(e,c):b}
-      </div>`}#A(e,o){const n=e.comments.filter(r=>I(r.target)===o).map(oo),i=this.definition.commentTargets(e.state,e.navigation).find(r=>r.value===o)?.label;return no(ro(this.locale),io(this.#p,n,{key:o,...i===void 0?{}:{label:i}}),r=>{if(r.kind==="input"){this.#p=r.body,this.requestUpdate();return}r.kind==="comment"&&!e.dispatch({type:"comment",target:o,payload:{body:r.body}}).ok||(this.#p="",this.mode=v)})}#D(){if(this.mode.kind!=="commenting")return;const e=this.renderRoot.querySelector(".wb-composer .comment-pop"),o=this.renderRoot.querySelector('.wb-toolbar [data-role="comment"]');!e||!o||e.matches(":popover-open")||(this.#C.open(e,o,Cn),e.querySelector("textarea")?.focus())}#T(e){return this.renderRoot.querySelector(`.wb-item[data-item-id="${CSS.escape(e)}"] .wb-editor`)}#g(e,o){if(j(this.mode,e))return;this.#r();const n=this.context();if(p(n.state,e)===void 0)return;const i=o===void 0?null:this.renderRoot.querySelector(`.wb-item[data-item-id="${CSS.escape(e)}"] .wb-text`);this.#b=i===null||o===void 0?void 0:qo(i,o.clientX,o.clientY);const r=this.#t();(r.length!==1||r[0]!==e)&&this.#e([e]),this.mode={kind:"editing",itemId:e}}#P(){if(this.mode.kind!=="editing"){this.#u=void 0;return}const{itemId:e}=this.mode;if(this.#u===e)return;const o=this.#T(e);if(o===null)return;this.#u=e,o.focus({preventScroll:!0});const n=Math.min(this.#b??o.value.length,o.value.length);o.setSelectionRange(n,n),this.#b=void 0}#S(e,o){if(!j(this.mode,e))return;this.mode=v,this.#u=void 0;const n=this.context(),i=p(n.state,e),r=i===void 0?void 0:Go(i,o);i===void 0||r===void 0||this.#h([w.setText(e,r),...this.#z(i)])}#z(e,o){if(!X(e))return[];const n=vo(e,this.#F(e.id,o));return n===void 0?[]:[w.resize(e.id,n.w,n.h)]}#F(e,o){const n=this.renderRoot.querySelector(`.wb-item[data-item-id="${CSS.escape(e)}"]`),i=n?.querySelector(".wb-item-body");if(n==null||i===null||i===void 0)return 0;const r=n.getAttribute("style")??"";o!==void 0&&n.style.setProperty("--wb-font-scale",String(It[o]));const a=i.querySelector(".wb-editor"),s=(a===null?i.querySelector(".wb-text")?.offsetHeight??0:a.scrollHeight)-i.clientHeight;return n.setAttribute("style",r),s}#r(){if(this.mode.kind!=="editing")return;const{itemId:e}=this.mode,o=this.#T(e);if(o===null){this.mode=v;return}this.#S(e,o.value)}#B(e,o){if(o.isComposing)return;if(o.key==="Escape"){o.preventDefault(),this.mode=v,this.#d();return}const n=p(this.context().state,e)?.kind==="frame";o.key==="Enter"&&(n||o.metaKey||o.ctrlKey)&&(o.preventDefault(),this.#d())}#a(){return this.renderRoot.querySelector(".wb-canvas")}#s(){const e=this.#a();return{width:e?.clientWidth??0,height:e?.clientHeight??0}}#w(e){const o=this.#a()?.getBoundingClientRect();return o===void 0?{x:e.clientX,y:e.clientY}:{x:e.clientX-o.left,y:e.clientY-o.top}}#o(e){return Ie(this.viewport,this.#w(e))}#H(){const{width:e,height:o}=this.#s();return Ie(this.viewport,{x:e/2,y:o/2})}#x(e,o){if(o===void 0)return;const n=this.#a();if(n!==null&&typeof n.setPointerCapture=="function")try{n.setPointerCapture(e.pointerId)}catch{}this.gesture=o}#d(){this.#a()?.focus({preventScroll:!0})}#W(e){if(this.gesture!==void 0)return;const o=e.button===1||e.button===0&&(this.panReady||e.pointerType==="touch");if(!o&&e.button!==0)return;if(this.#r(),this.mode.kind==="commenting"&&(this.mode=v),this.arrangeMenu=!1,this.#d(),o){e.preventDefault(),this.#i={on:"other"},this.#x(e,jo(e.pointerId,this.#w(e)));return}this.#i={on:"ground"};const n=this.context(),i=this.#t().filter(a=>p(n.state,a)!==void 0),r=e.shiftKey?kt(e.pointerId,this.#o(e),i):Qo(n.state,i,e.pointerId,this.#o(e),[]);this.#f=!1,this.#l=r.kind==="move"&&i.length>1,this.#x(e,r)}#K(e,o){if(o.button!==0||this.panReady||this.gesture!==void 0)return;if(o.stopPropagation(),this.#i={on:"item",itemId:e},j(this.mode,e)){o.target instanceof Element&&o.target.closest(".wb-editor")!==null||o.preventDefault();return}this.#r(),o.preventDefault(),this.#d(),this.arrangeMenu=!1,this.mode.kind!=="idle"&&(this.mode=v);const n=this.context(),i=this.#t();if(o.shiftKey){this.#f=!1,this.#l=!1,this.#e(rt(i,e));return}this.#f=i.length===1&&i[0]===e,this.#l=i.length>1&&i.includes(e),this.#E={clientX:o.clientX,clientY:o.clientY},i.includes(e)||this.#e([e]);const r=this.#l?i:[e];this.#x(o,_e(n.state,e,o.pointerId,this.#o(o),r))}#M(e,o){e.button===0&&(e.stopPropagation(),e.preventDefault(),this.#i={on:"other"},this.#r(),this.#d(),this.#x(e,o))}#q(e,o){o.button!==0||this.panReady||(o.stopPropagation(),o.preventDefault(),this.#i={on:"other"},this.#r(),this.#d(),this.mode=v,this.#e([e]))}#U(e){const o=this.gesture;if(!(o===void 0||o.pointerId!==e.pointerId)){if(o.kind==="pan"){const n=Jo(o,this.#w(e));this.gesture=n.gesture,this.#n(be(this.viewport,n.dx,n.dy));return}this.gesture=Le(this.context().state,o,e.pointerId,this.#o(e),this.viewport.zoom,e.shiftKey)}}#_(e){const o=this.gesture;o?.kind!=="resize"||o.keepRatio===e||(this.gesture=Le(this.context().state,o,o.pointerId,o.current,this.viewport.zoom,e))}#Z(e){const o=this.gesture;if(o===void 0||o.pointerId!==e.pointerId)return;const n=this.context(),i=o.kind==="pan"?o:Le(n.state,o,e.pointerId,this.#o(e),this.viewport.zoom,e.shiftKey);this.gesture=void 0;const r=Tt(n.state,i);switch(r.kind){case"none":return;case"dispatch":n.dispatchBatch(r.inputs);return;case"connect":this.#J(n,r.from,r.to);return;case"select":this.#e(r.ids);return;case"click":if(i.kind==="pan"||i.kind==="marquee"){this.mode=v;const a=i.kind==="marquee"?i.base:[];r.itemId!==void 0?this.#e(a.length>0?rt(a,r.itemId):[r.itemId]):a.length===0&&this.#e([]);return}if(i.kind!=="move"||r.itemId===void 0)return;this.#f?this.#g(r.itemId,this.#E):this.#l&&this.#e([r.itemId]);return}}#X(e){e.preventDefault(),e.ctrlKey||e.metaKey?this.#n(Re(this.viewport,this.#w(e),Math.exp(-e.deltaY*.01))):this.#n(be(this.viewport,-e.deltaX,-e.deltaY))}#V(e){const o=this.#i;o.on==="item"?this.#g(o.itemId,e):o.on==="ground"&&this.#I("sticky",this.#o(e))}#G(e){if(e.key==="Shift"&&this.#_(!0),e.target!==e.currentTarget)return;const o=this.context(),n=this.#t(),i=this.#m(o.state),[r]=i,a=e.metaKey||e.ctrlKey,s={ArrowLeft:[-1,0],ArrowRight:[1,0],ArrowUp:[0,-1],ArrowDown:[0,1]}[e.key];if(e.key===" ")this.panReady=!0;else if(e.key==="Escape")this.mode.kind!=="idle"?this.mode=v:n.length>0&&this.#e([]);else if((e.key==="Delete"||e.key==="Backspace")&&n.length>0)this.#O();else if(e.key==="Enter"&&i.length===1&&r!==void 0)this.#g(r.id);else if(a&&e.key.toLowerCase()==="a")this.#e(o.state.items.map(c=>c.id));else if((e.key==="]"||e.key==="[")&&n.length>0){const c=e.key==="]";this.#L(a?c?"front":"back":c?"forward":"backward")}else if(s!==void 0){const c=e.shiftKey?1:Rn;i.length>0?o.dispatchBatch(tn(o.state,i.map(l=>l.id),s[0]*c,s[1]*c)):this.#n(be(this.viewport,-s[0]*40,-s[1]*40))}else if(e.key==="+"||e.key==="=")this.#y(1.2);else if(e.key==="-")this.#y(1/1.2);else if(e.key==="0")this.#$();else return;e.preventDefault()}#h(e){e.length>0&&this.context().dispatchBatch(e)}#Y(e){const o=this.#m(this.context().state);this.#h(o.filter(ve).flatMap(n=>n.color===e?[]:[w.setColor(n.id,e)]))}#j(e){const o=this.#m(this.context().state);this.#h(o.filter(X).flatMap(n=>n.fontSize===e?[]:[w.setFontSize(n.id,e),...this.#z(n,e)]))}#L(e){this.#h(Wo(this.context().state,this.#t(),e))}#O(){const{state:e}=this.context(),o=this.#t();this.#h([...o.filter(n=>k(e,n)!==void 0).map(n=>w.deleteConnector(n)),...o.filter(n=>p(e,n)!==void 0).map(n=>w.deleteItem(n))]),this.mode=v}#I(e,o){this.#r();const n=this.context(),i=Xo(n.state,he(this.locale),e,o);if(!n.dispatch(w.addItem(i)).ok)return;const r=this.#s();r.width>0&&r.height>0&&this.#n(rn(this.viewport,i,r)),this.#e([i.id]),this.#b=void 0,this.mode={kind:"editing",itemId:i.id}}#J(e,o,n){if(o===n)return;const i=e.state.connectors.find(a=>a.from===o&&a.to===n);if(i!==void 0){this.#e([i.id]);return}const r=Vo(e.state,o,n);e.dispatch(w.connect(r,o,n)).ok&&this.#e([r])}#n(e){const o=Mt(e,G(this.context().state.items),this.#s());an(o,this.viewport)||(this.viewport=o)}#y(e){const{width:o,height:n}=this.#s();this.#n(Re(this.viewport,{x:o/2,y:n/2},e))}#v(e){const o=this.#s();return e===null||o.width<=0||o.height<=0?!1:(this.#n(zt(e,o,72)),!0)}#Q(e){const o=this.context();o.navigate({frame:e}),this.#c=e,this.#v(p(o.state,e)??null)}#$(){const e=this.context();e.navigation.frame!==void 0&&e.navigate({frame:null}),this.#c=void 0,this.#v(G(e.state.items))}#ee(){const e=this.context(),o=e.navigation.frame;if(this.#k&&o===this.#c)return;if(o===void 0&&this.#k){this.#c=void 0;return}const n=o===void 0?G(e.state.items):p(e.state,o)??null,i=this.#s();i.width<=0||i.height<=0||(n===null?this.viewport={x:i.width/2,y:i.height/2,zoom:1}:this.#v(n),this.#k=!0,this.#c=o)}}const Ft=()=>{customElements.get("dpk-template-whiteboard")||customElements.define("dpk-template-whiteboard",Pt)},An=Object.freeze(Object.defineProperty({__proto__:null,BOARD_TARGET:Ee,DpkTemplateWhiteboard:Pt,WB_COLORS:ne,WB_CONNECTOR_ROUTES:U,WB_FONT_SIZES:ie,WB_ITEM_KINDS:uo,WB_SHAPES:qe,ZOOM_MAX:St,ZOOM_MIN:Oe,applyWhiteboardAction:et,boardBounds:G,connectorGeometry:ot,connectorPath:ce,constrainViewport:Mt,defineWhiteboardElement:Ft,describeWhiteboardAction:st,emptyWhiteboardBase:Ye,findConnector:k,findItem:p,fitRect:zt,frameMembers:$e,frameOf:D,itemAt:ze,outlinePoint:Y,panBy:be,parseWhiteboardBase:Ge,resolveWhiteboardNavigation:pt,serializeWhiteboardAction:dt,whiteboardAction:w,whiteboardActions:de,whiteboardBaseSchema:Ve,whiteboardCommentTargets:lt,whiteboardCurrentTarget:ht,whiteboardDefinitionFor:bt,whiteboardHasTarget:ut,whiteboardMessages:he,whiteboardTargetLabel:ct,whiteboardTitle:Me,zoomAt:Re},Symbol.toStringTag,{value:"Module"}));export{Ft as d,An as i};