dev-process-kit 0.0.8 → 0.0.9

package/dist/chunks/shared-U2T3astJ.js

@@ -0,0 +1,1094 @@
+import{ak as Ft,ac as F,aw as xe,ad as f,af as m,am as ee,ag as S,ah as z,ai as B,aR as te,aj as oe,at as Ae,ab as Bt,ae as Fe,ay as q,p as g,aq as E,v as Be,av as Ht,P as He,e as Wt,a0 as Kt,V as I,l as We,a3 as b,a5 as qt,a4 as h,a6 as v,A as Ut,K as Zt,aB as Xt,a2 as Vt,T as Ke,a1 as Gt,h as Yt}from"./shared-7qenhU4J.js";import{P as jt,r as Jt,p as Qt,c as eo}from"./shared-BHGClRU3.js";import{c as ye}from"./shared-ml5h7U5L.js";const ne=["yellow","orange","pink","purple","blue","green","gray"],qe=["rect","ellipse"],to=["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=z(oe(),te()),R=z(oe(),te(),Ae(Z)),ke=S(ne),ge=f(S(ie),re),ae={id:xe,x:Ze,y:Ze},oo=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}),no=F({...ae,kind:ee("text"),w:f(R,C.text.w),h:f(R,C.text.h),text:f(m(),""),fontSize:ge}),io=F({...ae,kind:ee("shape"),shape:f(S(qe),"rect"),w:f(R,C.shape.w),h:f(R,C.shape.h),text:f(m(),""),color:f(ke,H.shape),fontSize:ge}),ro=F({...ae,kind:ee("frame"),w:R,h:R,title:z(m(),B(1)),color:f(ke,H.frame)}),Xe=Ft("kind",[oo,no,io,ro]),ao=F({id:xe,from:z(m(),B(1)),to:z(m(),B(1)),label:q(m()),style:f(S(Ue),"arrow"),route:f(S(U),"straight")}),Ve=F({title:q(m()),items:f(Fe(Xe),[]),connectors:f(Fe(ao),[])}),Ge=t=>{const e=Bt(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,so=(t,e,o)=>e>=t.x&&e<=t.x+t.w&&o>=t.y&&o<=t.y+t.h,P=(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)||so(r,o,n)&&(i===void 0||se(r)<se(i))&&(i=r);return i},$e=(t,e)=>{const o=[],n=i=>{let r=P(t,i);for(;r!==void 0;){if(r.id===e.id)return!0;r=P(t,r)}return!1};for(const i of t.items)i.id!==e.id&&n(i)&&o.push(i);return o},Je=z(oe(),te()),Qe=z(oe(),te(),Ae(Z)),Ee={type:"page",id:"whiteboard"},de={ADD_ITEM:g("ADD_ITEM","page",Xe,{dedupeKey:Be}),SET_ITEM_TEXT:g("SET_ITEM_TEXT","item",E({text:m()})),MOVE_ITEM:g("MOVE_ITEM","item",E({x:Je,y:Je})),RESIZE_ITEM:g("RESIZE_ITEM","item",E({w:Qe,h:Qe})),SET_ITEM_COLOR:g("SET_ITEM_COLOR","item",E({color:S(ne)})),SET_ITEM_FONT_SIZE:g("SET_ITEM_FONT_SIZE","item",E({fontSize:S(ie)})),REORDER_ITEM:g("REORDER_ITEM","item",E({after:Ht(z(m(),B(1)))})),DELETE_ITEM:g("DELETE_ITEM","item",E({})),CONNECT_ITEMS:g("CONNECT_ITEMS","page",E({id:xe,from:z(m(),B(1)),to:z(m(),B(1)),label:q(m()),style:q(S(Ue)),route:q(S(U))}),{dedupeKey:Be}),SET_CONNECTOR_LABEL:g("SET_CONNECTOR_LABEL","connector",E({label:m()})),SET_CONNECTOR_ROUTE:g("SET_CONNECTOR_ROUTE","connector",E({route:S(U)})),DELETE_CONNECTOR:g("DELETE_CONNECTOR","connector",E({}))},A=t=>({type:"item",id:t}),w={addItem:t=>({type:"ADD_ITEM",target:Ee,payload:t}),setText:(t,e)=>({type:"SET_ITEM_TEXT",target:A(t),payload:{text:e}}),move:(t,e,o)=>({type:"MOVE_ITEM",target:A(t),payload:{x:e,y:o}}),resize:(t,e,o)=>({type:"RESIZE_ITEM",target:A(t),payload:{w:e,h:o}}),setColor:(t,e)=>({type:"SET_ITEM_COLOR",target:A(t),payload:{color:e}}),setFontSize:(t,e)=>({type:"SET_ITEM_FONT_SIZE",target:A(t),payload:{fontSize:e}}),reorder:(t,e)=>({type:"REORDER_ITEM",target:A(t),payload:{after:e}}),deleteItem:t=>({type:"DELETE_ITEM",target:A(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 co(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 Wt(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)}},co=(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")],lo=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=lo(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}}},M=t=>`${t.x} ${t.y}`,ce=(t,e,o)=>{if(o==="straight"){const{start:_,end:J,mid:Q}=ot(t,e);return{d:`M ${M(_)} L ${M(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=(_,J)=>{const Q=W(_);return r?{x:J?_.x+_.w:_.x,y:Q.y}:{x:Q.x,y:J?_.y+_.h:_.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 ${M(s)} L ${M(x)} L ${M(u)} L ${M(c)}`:`M ${M(s)} C ${M(x)} ${M(u)} ${M(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,ho=(t,e)=>e>.5?{w:t.w,h:Math.ceil(t.h+e)}:void 0,po=(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},uo=(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)}),bo=(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,fo=(t,e)=>t.items.filter(o=>o.kind==="frame"?bo(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,mo=(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}},wo={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"},xo={rect:"Rectangle",ellipse:"Ellipse"},yo={rect:"\u56DB\u89D2\u5F62",ellipse:"\u6955\u5186"},ko={yellow:"Yellow",orange:"Orange",pink:"Pink",purple:"Purple",blue:"Blue",green:"Green",gray:"Gray"},go={yellow:"\u9EC4",orange:"\u30AA\u30EC\u30F3\u30B8",pink:"\u30D4\u30F3\u30AF",purple:"\u7D2B",blue:"\u9752",green:"\u7DD1",gray:"\u30B0\u30EC\u30FC"},vo={small:"Small",medium:"Medium",large:"Large",xlarge:"Extra large"},$o={small:"\u5C0F",medium:"\u4E2D",large:"\u5927",xlarge:"\u7279\u5927"},Eo={straight:"Straight",elbow:"Elbow",curve:"Curved"},To={straight:"\u76F4\u7DDA",elbow:"\u30AB\u30AE\u7DDA",curve:"\u66F2\u7DDA"},nt={small:"S",medium:"M",large:"L",xlarge:"XL"},he=Kt({en:{kindLabel:t=>wo[t],shapeLabel:t=>xo[t],colorLabel:t=>ko[t],fontSizeLabel:t=>vo[t],fontSizeShort:t=>nt[t],routeLabel:t=>Eo[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=>yo[t],colorLabel:t=>go[t],fontSizeLabel:t=>$o[t],fontSizeShort:t=>nt[t],routeLabel:t=>To[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,D=(t,e)=>{const o=e.replace(/\s+/g," ").trim();return o===""?t.empty:o.length>at?`${o.slice(0,at-1)}\u2026`:o},So=(t,e)=>`${e.kind==="shape"?t.shapeLabel(e.shape):t.kindLabel(e.kind)} \xB7 ${D(t,L(e))}`,T=(t,e,o,n)=>{const i=p(e,n)??p(o,n);return i===void 0?n:D(t,L(i))},zo=(t,e,o,n=e)=>`${t.connector} \xB7 ${t.connection(T(t,e,n,o.from),T(t,e,n,o.to))}`,Mo=(t,e,o,n,i)=>{const r=o===void 0?void 0:P(i,o),a=P(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)},_o=(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=P(o,s),l=t.added(D(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=D(t,e.payload.text);return{title:t.textEditedTitle(d),tone:"update",body:r===void 0?t.arrowTo(s):t.arrowFrom(D(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:Mo(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(T(t,o,n,s))}}case"DELETE_ITEM":return{title:t.deletedTitle(d),tone:"delete",body:t.deleted(a===void 0?i:D(t,L(a)))};case"CONNECT_ITEMS":{const s=e.payload,c=t.connection(T(t,o,n,s.from),T(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(T(t,o,n,s.from),T(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"}:_o(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)`:So(t,i)}case"connector":{const i=k(e,o.id)??k(n,o.id);return i===void 0?`${t.connector} \xB7 ${o.id} (missing)`:zo(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=P(e,r),d=D(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(T(t,e,e,r.from),T(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:D(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(T(t,e,e,a.from),T(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])}},Lo=(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},Oo=(t,e,o)=>{const n=mt(t),i=new Set(e.filter(r=>n.some(a=>a.id===r)));return i.size===0?[]:Lo(n,xt(n,i,o),i)},Io=(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}},Co=(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)}},Ro=["sticky","text","rect","ellipse","frame"],No=t=>t==="rect"||t==="ellipse"?C.shape:C[t],Do=(t,e,o,n)=>{const{w:i,h:r}=No(o),a={x:Math.round(n.x-i/2),y:Math.round(n.y-r/2)},d=mo(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}}},Po=(t,e,o)=>We(`${e}-to-${o}`,je(t)),Ao=(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}},Fo=(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}},Bo=(t,e)=>({kind:"pan",pointerId:t,start:e,last:e,moved:!1}),Ho=(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}),Wo=(t,e,o,n,i)=>{const r=po(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?uo(t.start,t.current):void 0,vt=(t,e)=>{const o=gt(e);if(e.kind!=="marquee"||o===void 0)return[];const n=fo(t,o).map(i=>i.id);return[...new Set([...e.base,...n])]},Ko=(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)}},qo=(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,Uo={x:0,y:0,zoom:1},Zo=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(Zo,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)}},Xo=(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},Vo=(t,e)=>t.x===e.x&&t.y===e.y&&t.zoom===e.zoom,$={kind:"idle"},j=(t,e)=>t.kind==="editing"&&t.itemId===e,Go={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}=Go[t];return`--wb-paper:${e};--wb-ink:${o};--wb-stroke:${n}`},Lt={sticky:"addSticky",text:"addText",rect:"addRect",ellipse:"addEllipse",frame:"addFrame"},Ot={small:.8,medium:1,large:1.4,xlarge:2},Yo=t=>{const e=24*t.zoom;return`background-size:${e}px ${e}px;background-position:${t.x}px ${t.y}px`},jo=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=${Yo(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}`}
+    >
+      ${qt(d,s=>s.id,s=>en(t,s))}
+      ${nn(t)} ${rn(t)}
+    </div>
+    ${o.items.length===0?h`<p class="wb-hint wb-hint--empty">${e.emptyHint}</p>`:b}
+    ${Jo(t)} ${i?.moved===!0?b:t.overlay} ${an(e,r)}
+    ${sn(e,n,r)}
+  </div>`},Jo=({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>`},Qo=(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(" ")},en=(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:${Ot[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=${Qo(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}>${It(t,e)}</div>`:h`<div class="wb-item-body">${It(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>`},tn=t=>t.stopPropagation(),It=(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=${tn}
+      ></textarea>`},on=()=>v`<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>`,Ct=(t,e)=>{const o=p(t,e.from),n=p(t,e.to);return o===void 0||n===void 0?void 0:[o,n]},nn=t=>{const{state:e,handlers:o,gesture:n}=t,i=e.connectors.map(a=>{const d=Ct(e,a);if(d===void 0)return b;const{d:s}=ce(...d,a.route),c=t.selectedIds.has(a.id)?" is-selected":"";return v`<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=v`<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>${on()}</defs>
+    ${i} ${r}
+  </svg>`},rn=t=>{const{state:e,context:o,handlers:n}=t;return e.connectors.flatMap(i=>{const r=Ct(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(),an=(t,e)=>h`<div class="wb-tools" role="toolbar" aria-label=${t.toolsLabel} @pointerdown=${fe} @dblclick=${fe}>
+    ${Ro.map(o=>h`<button
+          type="button"
+          class="wb-tool"
+          data-add=${o}
+          title=${t[Lt[o]]}
+          aria-label=${t[Lt[o]]}
+          @click=${()=>e.addItem(o)}
+        >
+          <span class=${`wb-tool-icon wb-tool-icon--${o}`} aria-hidden="true"></span>
+        </button>`)}
+  </div>`,sn=(t,e,o)=>h`<div class="wb-zoom" @pointerdown=${fe} @dblclick=${fe}>
+    <button type="button" aria-label=${t.zoomOut} @click=${()=>o.zoomStep(-1)}>−</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)}>+</button>
+    <button type="button" aria-label=${t.zoomFit} title=${t.zoomFit} @click=${()=>o.zoomFit()}>⛶</button>
+  </div>`,dn=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>`},me=t=>h`<svg
+    viewBox="0 0 16 16"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    focusable="false"
+  >
+    ${t}
+  </svg>`,cn={front:v`<rect x="2.5" y="2.5" width="7.5" height="7.5" rx="1.5"></rect><rect x="6" y="6" width="7.5" height="7.5" rx="1.5" fill="currentColor"></rect>`,forward:v`<path d="M8 13.5V3M4 7l4-4 4 4"></path>`,backward:v`<path d="M8 2.5V13M4 9l4 4 4-4"></path>`,back:v`<rect x="2.5" y="2.5" width="7.5" height="7.5" rx="1.5" fill="currentColor"></rect><rect x="6" y="6" width="7.5" height="7.5" rx="1.5" style="fill: var(--dpk-paper-raised)"></rect>`},ln={straight:v`<path d="M3 13L13 3"></path>`,elbow:v`<path d="M2.5 12.5H8V3.5h5.5"></path>`,curve:v`<path d="M2.5 12.5C9 12.5 7 3.5 13.5 3.5"></path>`},hn=t=>me(cn[t]),pn=t=>me(ln[t]),un=()=>me(v`<path d="M8 2.5l5.5 3L8 8.5l-5.5-3z"></path><path d="M2.5 8.25L8 11.25l5.5-3"></path><path d="M2.5 11L8 14l5.5-3"></path>`),bn=()=>me(v`<path d="M4.5 6.5L8 10l3.5-3.5"></path>`),De={item:14,frame:40,connector:18},fn=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?De.frame:De.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-De.connector}},Pe=t=>t.stopPropagation(),we=h`<span class="wb-toolbar-sep" aria-hidden="true"></span>`,Rt=t=>t.length>0&&t.every(e=>e===t[0])?t[0]:void 0,mn=t=>{const e=fn(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=${Pe}
+    @dblclick=${Pe}
+    @keydown=${Pe}
+  >
+    ${n.kind==="items"?xn(t,n.items):kn(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)}
+          >
+            ${Ut()}
+            ${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()}
+    >
+      ${Zt()}
+    </button>
+  </div>`},wn={front:"\u2318/Ctrl ]",forward:"]",backward:"[",back:"\u2318/Ctrl ["},xn=(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=Rt(i),d=Rt(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>
+            ${we}`: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>
+            ${we}`:b}
+    ${t.arrange.size>0?h`${yn(t)} ${we}`:b}
+  `},yn=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()}
+    >
+      ${un()} ${bn()}
+    </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)}
+                >
+                  ${hn(r)}
+                  <span class="wb-menu-label">${n[r]}</span>
+                  <kbd class="wb-menu-key">${wn[r]}</kbd>
+                </button>`)}
+          </div>`:b}
+  </div>`},kn=(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)}
+          >
+            ${pn(i)}
+          </button>`)}
+    </div>
+    ${we}
+    <dpk-component-inline-edit
+      class="wb-toolbar-label"
+      .value=${e.label??""}
+      .placeholder=${o.labelPlaceholder}
+      .label=${o.labelField}
+      @dpk-commit=${Xt(i=>n.setLabel(e.id,i))}
+    ></dpk-component-inline-edit>`},gn=Vt`
+  /* 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 {
+    border: none;
+    background: transparent;
+    padding: 6px 10px;
+    font-size: 12px;
+    line-height: 1;
+    color: var(--dpk-ink-soft);
+    cursor: pointer;
+  }
+
+  .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;
+  }
+`,vn={width:300,height:260},Nt=t=>t.stopPropagation(),$n=10,Dt=8,En=t=>t!==void 0;class Pt extends Ke{static{this.styles=[Ke.styles,gn,Gt]}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 jt(this);constructor(){super(),this.mode=$,this.viewport=Uo,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:dn({m:o,state:e.state,focused:e.navigation.frame,focusFrame:d=>this.#Q(d),showBoard:()=>this.#$()})}:{sidebarHidden:!0},main:jo({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,Fo(e.state,d,s.pointerId,this.#o(s))),connectPointerDown:(d,s)=>this.#M(s,Ko(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.#A(),this.#P())}#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(En)}#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=mn({m:n,state:o,viewport:this.viewport,selection:d,arrange:Io(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?$:{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=${Nt} @dblclick=${Nt}>
+        ${l&&c!==void 0?this.#D(e,c):b}
+      </div>`}#D(e,o){const n=e.comments.filter(r=>I(r.target)===o).map(Yt),i=this.definition.commentTargets(e.state,e.navigation).find(r=>r.value===o)?.label;return Jt(eo(this.locale),Qt(this.#p,n,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=$)})}#P(){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,vn),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:Co(i,o.clientX,o.clientY);const r=this.#t();(r.length!==1||r[0]!==e)&&this.#e([e]),this.mode={kind:"editing",itemId:e}}#A(){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=$,this.#u=void 0;const n=this.context(),i=p(n.state,e),r=i===void 0?void 0:Ao(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=ho(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(Ot[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=$;return}this.#S(e,o.value)}#B(e,o){if(o.isComposing)return;if(o.key==="Escape"){o.preventDefault(),this.mode=$,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=$),this.arrangeMenu=!1,this.#d(),o){e.preventDefault(),this.#i={on:"other"},this.#x(e,Bo(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):Wo(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=$);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=$,this.#e([e]))}#U(e){const o=this.gesture;if(!(o===void 0||o.pointerId!==e.pointerId)){if(o.kind==="pan"){const n=Ho(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=$;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=$: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:$n;i.length>0?o.dispatchBatch(qo(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(Oo(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=$}#I(e,o){this.#r();const n=this.context(),i=Do(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(Xo(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=Po(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());Vo(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 At=()=>{customElements.get("dpk-template-whiteboard")||customElements.define("dpk-template-whiteboard",Pt)},Tn=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:to,WB_SHAPES:qe,ZOOM_MAX:St,ZOOM_MIN:Oe,applyWhiteboardAction:et,boardBounds:G,connectorGeometry:ot,connectorPath:ce,constrainViewport:Mt,defineWhiteboardElement:At,describeWhiteboardAction:st,emptyWhiteboardBase:Ye,findConnector:k,findItem:p,fitRect:zt,frameMembers:$e,frameOf:P,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{At as d,Tn as i};