dev-process-kit 0.0.11 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/THIRD_PARTY_LICENSES.md +46 -0
  2. package/dist/chunks/{shared-B_MMP97h.js → shared-BC5MlWBY.js} +155 -348
  3. package/dist/chunks/{shared-BgCDocVX.js → shared-BvuW5NtY.js} +8 -8
  4. package/dist/chunks/{shared-DGI_sFo5.js → shared-BwaDMwUS.js} +8 -8
  5. package/dist/chunks/{shared-DZfXwU7f.js → shared-CLnfjHCQ.js} +1 -1
  6. package/dist/chunks/{shared-BSFZSMH5.js → shared-C__W71Hw.js} +1 -1
  7. package/dist/chunks/shared-CcrRNZCH.js +30 -0
  8. package/dist/chunks/shared-CoDXb-Yj.js +556 -0
  9. package/dist/chunks/shared-D7CMQLaX.js +2323 -0
  10. package/dist/chunks/{shared-CrE-y5oF.js → shared-DBJaP5gF.js} +65 -48
  11. package/dist/chunks/shared-DUq2-pM9.js +2023 -0
  12. package/dist/chunks/{shared-TW6kWbUL.js → shared-DYe0OZr-.js} +4 -4
  13. package/dist/chunks/shared-DhwK_dh_.js +1093 -0
  14. package/dist/chunks/{shared-CHaHI5X3.js → shared-DkkBQzIf.js} +14 -14
  15. package/dist/chunks/shared-aDPp8Vry.js +1 -0
  16. package/dist/chunks/{shared-OGH3pSVq.js → shared-y3FwoRgh.js} +8 -8
  17. package/dist/components.js +1 -1
  18. package/dist/index.js +1 -1
  19. package/dist/templates/delegation-poker.js +1 -1
  20. package/dist/templates/event-storming.js +1 -1
  21. package/dist/templates/example-mapping.js +1 -1
  22. package/dist/templates/grill.js +1 -1
  23. package/dist/templates/plain.js +1 -1
  24. package/dist/templates/prototype.js +1 -1
  25. package/dist/templates/slides.js +1 -1
  26. package/dist/templates/task-board.js +1 -1
  27. package/dist/templates/usm.js +1 -1
  28. package/dist/templates/whiteboard.js +1 -1
  29. package/package.json +1 -1
  30. package/dist/chunks/shared-B4ewpBuM.js +0 -30
  31. package/dist/chunks/shared-B9OVJ7XA.js +0 -556
  32. package/dist/chunks/shared-BHRhwgui.js +0 -1252
  33. package/dist/chunks/shared-CxFItadP.js +0 -1094
  34. package/dist/chunks/shared-DIJgMVpY.js +0 -2239
@@ -1,1094 +0,0 @@
1
- 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,aV 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 Vt,a2 as Xt,T as Ke,a1 as Gt,h as Yt}from"./shared-B_MMP97h.js";import{P as jt,r as Jt,p as Qt,c as eo}from"./shared-B4ewpBuM.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)}),Ve=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")}),Xe=F({title:q(m()),items:f(Fe(Ve),[]),connectors:f(Fe(ao),[])}),Ge=t=>{const e=Bt(Xe,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",V=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",Ve,{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 X(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 X(t,n,i=>({...i,x:o.payload.x,y:o.payload.y}));case"RESIZE_ITEM":return X(t,n,i=>({...i,w:o.payload.w,h:o.payload.h}));case"SET_ITEM_COLOR":return X(t,n,i=>i.kind==="text"?null:{...i,color:o.payload.color});case"SET_ITEM_FONT_SIZE":return X(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)}},X=(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&&V(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)}},Vo=(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},Xo=(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
2
- class=${a.join(" ")}
3
- data-testid="wb-canvas"
4
- tabindex="0"
5
- role="application"
6
- aria-label=${e.canvasLabel}
7
- style=${Yo(n)}
8
- @pointerdown=${r.canvasPointerDown}
9
- @pointermove=${r.canvasPointerMove}
10
- @pointerup=${r.canvasPointerUp}
11
- @pointercancel=${r.canvasPointerCancel}
12
- @wheel=${r.canvasWheel}
13
- @dblclick=${r.canvasDblClick}
14
- @keydown=${r.canvasKeyDown}
15
- @keyup=${r.canvasKeyUp}
16
- @blur=${r.canvasBlur}
17
- >
18
- <div
19
- class="wb-world"
20
- style=${`transform:translate(${n.x}px, ${n.y}px) scale(${n.zoom});--wb-zoom:${n.zoom}`}
21
- >
22
- ${qt(d,s=>s.id,s=>en(t,s))}
23
- ${nn(t)} ${rn(t)}
24
- </div>
25
- ${o.items.length===0?h`<p class="wb-hint wb-hint--empty">${e.emptyHint}</p>`:b}
26
- ${Jo(t)} ${i?.moved===!0?b:t.overlay} ${an(e,r)}
27
- ${sn(e,n,r)}
28
- </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
29
- class="wb-marquee"
30
- aria-hidden="true"
31
- style=${`left:${o.x}px;top:${o.y}px;${n}`}
32
- ></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=V(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
33
- class=${Qo(t,e)}
34
- style=${`${r}${a}${d}`}
35
- data-item-id=${e.id}
36
- data-kind=${e.kind}
37
- @pointerdown=${e.kind==="frame"?b:l}
38
- >
39
- ${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>`}
40
- ${s>0?h`<span class="wb-flag" title=${o.commentCount(s)}>${s}</span>`:b}
41
- ${c?h`<span
42
- class="wb-handle wb-handle--resize"
43
- role="presentation"
44
- title=${o.resizeHandle}
45
- @pointerdown=${x=>i.resizePointerDown(e.id,x)}
46
- ></span>
47
- <span
48
- class="wb-handle wb-handle--connect"
49
- role="presentation"
50
- title=${o.connectHandle}
51
- @pointerdown=${x=>i.connectPointerDown(e.id,x)}
52
- ></span>`:b}
53
- </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"
54
- ><span class="wb-text" aria-hidden="true" data-copy=${i||o.textPlaceholder}></span
55
- ><input
56
- class="wb-editor"
57
- type="text"
58
- .value=${i}
59
- placeholder=${o.textPlaceholder}
60
- aria-label=${o.renameFrame}
61
- @input=${d}
62
- @blur=${r}
63
- @keydown=${a}
64
- /></span>`:h`<textarea
65
- class="wb-editor"
66
- .value=${i}
67
- placeholder=${o.textPlaceholder}
68
- aria-label=${o.editText}
69
- spellcheck="false"
70
- @blur=${r}
71
- @keydown=${a}
72
- @wheel=${tn}
73
- ></textarea>`},on=()=>v`<marker id="wb-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse">
74
- <path d="M0,0 L10,5 L0,10 z"></path>
75
- </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}>
76
- <path class="wb-link-hit" d=${s} @pointerdown=${l=>o.connectorPointerDown(a.id,l)}></path>
77
- <path class=${`wb-link${c}`} d=${s} marker-end=${a.style==="arrow"?"url(#wb-arrow)":b}></path>
78
- </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">
79
- <defs>${on()}</defs>
80
- ${i} ${r}
81
- </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
82
- class=${`wb-link-label${s}`}
83
- data-connector-label=${i.id}
84
- style=${`left:${d.x}px;top:${d.y}px`}
85
- @pointerdown=${c=>n.connectorPointerDown(i.id,c)}
86
- >
87
- ${i.label??b}
88
- ${a>0?h`<span class="wb-flag wb-flag--inline">${a}</span>`:b}
89
- </div>`]})},fe=t=>t.stopPropagation(),an=(t,e)=>h`<div class="wb-tools" role="toolbar" aria-label=${t.toolsLabel} @pointerdown=${fe} @dblclick=${fe}>
90
- ${Ro.map(o=>h`<button
91
- type="button"
92
- class="wb-tool"
93
- data-add=${o}
94
- title=${t[Lt[o]]}
95
- aria-label=${t[Lt[o]]}
96
- @click=${()=>e.addItem(o)}
97
- >
98
- <span class=${`wb-tool-icon wb-tool-icon--${o}`} aria-hidden="true"></span>
99
- </button>`)}
100
- </div>`,sn=(t,e,o)=>h`<div class="wb-zoom" @pointerdown=${fe} @dblclick=${fe}>
101
- <button type="button" aria-label=${t.zoomOut} @click=${()=>o.zoomStep(-1)}>−</button>
102
- <button type="button" class="wb-zoom-pct" title=${t.zoomReset} @click=${()=>o.zoomReset()}>
103
- ${Math.round(e.zoom*100)}%
104
- </button>
105
- <button type="button" aria-label=${t.zoomIn} @click=${()=>o.zoomStep(1)}>+</button>
106
- <button type="button" aria-label=${t.zoomFit} title=${t.zoomFit} @click=${()=>o.zoomFit()}>⛶</button>
107
- </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}>
108
- <p class="dpk-label">${e.framesHeading}</p>
109
- <p class="wb-frames-hint">${e.framesHint}</p>
110
- <ul>
111
- <li>
112
- <button
113
- type="button"
114
- class="wb-frame-link"
115
- aria-current=${String(n===void 0)}
116
- @click=${t.showBoard}
117
- >
118
- <span class="wb-frame-dot wb-frame-dot--board" aria-hidden="true"></span>
119
- <span class="wb-frame-name">${e.wholeBoard}</span>
120
- <span class="wb-frame-count">${e.memberCount(o.items.length)}</span>
121
- </button>
122
- </li>
123
- ${i.map(r=>h`<li>
124
- <button
125
- type="button"
126
- class="wb-frame-link"
127
- data-frame=${r.id}
128
- aria-current=${String(n===r.id)}
129
- @click=${()=>t.focusFrame(r.id)}
130
- >
131
- <span class="wb-frame-dot" style=${Ne(r.color)} aria-hidden="true"></span>
132
- <span class="wb-frame-name">${r.title}</span>
133
- <span class="wb-frame-count">${e.memberCount($e(o,r).length)}</span>
134
- </button>
135
- </li>`)}
136
- </ul>
137
- </nav>`},me=t=>h`<svg
138
- viewBox="0 0 16 16"
139
- fill="none"
140
- stroke="currentColor"
141
- stroke-width="1.5"
142
- stroke-linecap="round"
143
- stroke-linejoin="round"
144
- aria-hidden="true"
145
- focusable="false"
146
- >
147
- ${t}
148
- </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
149
- class="wb-toolbar"
150
- role="toolbar"
151
- aria-label=${d}
152
- style=${`left:${e.x}px;top:${e.y}px`}
153
- @pointerdown=${Pe}
154
- @dblclick=${Pe}
155
- @keydown=${Pe}
156
- >
157
- ${n.kind==="items"?xn(t,n.items):kn(t,n.connector)}
158
- ${a===void 0?b:h`<button
159
- type="button"
160
- class="dpk-icon-btn wb-toolbar-btn"
161
- data-role="comment"
162
- aria-label=${o.comment}
163
- title=${o.comment}
164
- data-active=${String(t.commenting)}
165
- @click=${()=>i.toggleComment(a)}
166
- >
167
- ${Ut()}
168
- ${t.comments>0?h`<span class="wb-toolbar-count">${t.comments}</span>`:b}
169
- </button>`}
170
- <button
171
- type="button"
172
- class="dpk-icon-btn wb-toolbar-btn"
173
- data-role="delete"
174
- aria-label=${o.delete}
175
- title=${o.delete}
176
- @click=${()=>i.deleteSelection()}
177
- >
178
- ${Zt()}
179
- </button>
180
- </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=>V(s)?[s.fontSize]:[]),a=Rt(i),d=Rt(r);return h`
181
- ${i.length>0?h`<div class="wb-swatches" role="radiogroup" aria-label=${o.colorLabelPrefix}>
182
- ${ne.map(s=>h`<button
183
- type="button"
184
- class="wb-swatch"
185
- role="radio"
186
- data-color=${s}
187
- style=${Ne(s)}
188
- aria-checked=${String(a===s)}
189
- aria-label=${`${o.colorLabelPrefix}: ${o.colorLabel(s)}`}
190
- title=${o.colorLabel(s)}
191
- @click=${()=>n.setColor(s)}
192
- ></button>`)}
193
- </div>
194
- ${we}`:b}
195
- ${r.length>0?h`<div class="wb-choice" role="radiogroup" aria-label=${o.fontSizeLabelPrefix}>
196
- ${ie.map(s=>h`<button
197
- type="button"
198
- class="wb-choice-btn"
199
- role="radio"
200
- data-font-size=${s}
201
- aria-checked=${String(d===s)}
202
- aria-label=${`${o.fontSizeLabelPrefix}: ${o.fontSizeLabel(s)}`}
203
- title=${`${o.fontSizeLabelPrefix}: ${o.fontSizeLabel(s)}`}
204
- @click=${()=>n.setFontSize(s)}
205
- >
206
- ${o.fontSizeShort(s)}
207
- </button>`)}
208
- </div>
209
- ${we}`:b}
210
- ${t.arrange.size>0?h`${yn(t)} ${we}`:b}
211
- `},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()}}>
212
- <button
213
- type="button"
214
- class="wb-menu-btn"
215
- data-role="arrange"
216
- aria-haspopup="menu"
217
- aria-expanded=${String(t.arrangeMenuOpen)}
218
- aria-label=${e.arrangeLabel}
219
- title=${e.arrangeLabel}
220
- @click=${()=>o.toggleArrangeMenu()}
221
- >
222
- ${un()} ${bn()}
223
- </button>
224
- ${t.arrangeMenuOpen?h`<div class="wb-menu" role="menu" aria-label=${e.arrangeLabel}>
225
- ${ft.map(r=>h`<button
226
- type="button"
227
- class="wb-menu-item"
228
- role="menuitem"
229
- data-arrange=${r}
230
- ?disabled=${!t.arrange.has(r)}
231
- @click=${()=>o.arrange(r)}
232
- >
233
- ${hn(r)}
234
- <span class="wb-menu-label">${n[r]}</span>
235
- <kbd class="wb-menu-key">${wn[r]}</kbd>
236
- </button>`)}
237
- </div>`:b}
238
- </div>`},kn=(t,e)=>{const{m:o,handlers:n}=t;return h`<div class="wb-choice" role="radiogroup" aria-label=${o.routeLabelPrefix}>
239
- ${U.map(i=>h`<button
240
- type="button"
241
- class="wb-choice-btn wb-choice-btn--icon"
242
- role="radio"
243
- data-route=${i}
244
- aria-checked=${String(e.route===i)}
245
- aria-label=${`${o.routeLabelPrefix}: ${o.routeLabel(i)}`}
246
- title=${o.routeLabel(i)}
247
- @click=${()=>n.setRoute(e.id,i)}
248
- >
249
- ${pn(i)}
250
- </button>`)}
251
- </div>
252
- ${we}
253
- <dpk-component-inline-edit
254
- class="wb-toolbar-label"
255
- .value=${e.label??""}
256
- .placeholder=${o.labelPlaceholder}
257
- .label=${o.labelField}
258
- @dpk-commit=${Vt(i=>n.setLabel(e.id,i))}
259
- ></dpk-component-inline-edit>`},gn=Xt`
260
- /* The board owns the whole main area; the canvas clips, never the shell. */
261
- .dpk-main {
262
- overflow: hidden;
263
- }
264
-
265
- .dpk-main-body {
266
- flex: 1 1 auto;
267
- min-height: 0;
268
- display: flex;
269
- flex-direction: column;
270
- padding: 0;
271
- gap: 0;
272
- }
273
-
274
- /* ---------------------------------------------------------------- canvas */
275
-
276
- .wb-canvas {
277
- position: relative;
278
- flex: 1 1 auto;
279
- min-height: 0;
280
- overflow: hidden;
281
- touch-action: none;
282
- background: var(--dpk-dots), var(--dpk-paper-sunken);
283
- cursor: default;
284
- outline: none;
285
- }
286
-
287
- .wb-canvas:focus-visible {
288
- box-shadow: inset var(--dpk-focus);
289
- }
290
-
291
- /* Space held (or a pan under way): the whole board, items included, is a handle. */
292
- .wb-canvas--pan-ready,
293
- .wb-canvas--pan-ready .wb-item,
294
- .wb-canvas--pan-ready .wb-frame-title {
295
- cursor: grab;
296
- }
297
-
298
- .wb-canvas--panning,
299
- .wb-canvas--panning .wb-item {
300
- cursor: grabbing;
301
- }
302
-
303
- .wb-canvas--gesturing,
304
- .wb-canvas--gesturing * {
305
- user-select: none;
306
- }
307
-
308
- .wb-canvas--connecting .wb-item {
309
- cursor: crosshair;
310
- }
311
-
312
- /* Items are things to pick up, not text to select: a press on the board
313
- never starts a text selection. Only the in-place editor takes one. */
314
- .wb-world {
315
- -webkit-user-select: none;
316
- user-select: none;
317
- position: absolute;
318
- left: 0;
319
- top: 0;
320
- width: 0;
321
- height: 0;
322
- transform-origin: 0 0;
323
- will-change: transform;
324
- }
325
-
326
- /* ----------------------------------------------------------------- items */
327
-
328
- .wb-item {
329
- position: absolute;
330
- box-sizing: border-box;
331
- display: flex;
332
- cursor: grab;
333
- }
334
-
335
- .wb-item-body {
336
- flex: 1 1 auto;
337
- min-width: 0;
338
- min-height: 0;
339
- display: flex;
340
- overflow: hidden;
341
- }
342
-
343
- .wb-text {
344
- flex: 1 1 auto;
345
- min-width: 0;
346
- white-space: pre-wrap;
347
- overflow-wrap: anywhere;
348
- }
349
-
350
- /* The in-place editor is a bare field over the item's whole body, typeset
351
- exactly like the text it replaces, so starting an edit moves nothing. */
352
- .wb-editor {
353
- flex: 1 1 auto;
354
- display: block;
355
- box-sizing: border-box;
356
- width: 100%;
357
- min-width: 0;
358
- align-self: stretch;
359
- margin: 0;
360
- padding: 0;
361
- border: none;
362
- border-radius: 0;
363
- outline: none;
364
- background: transparent;
365
- color: inherit;
366
- font: inherit;
367
- letter-spacing: inherit;
368
- text-align: inherit;
369
- white-space: pre-wrap;
370
- overflow-wrap: anywhere;
371
- resize: none;
372
- overflow: auto;
373
- scrollbar-width: none;
374
- -webkit-user-select: text;
375
- user-select: text;
376
- }
377
-
378
- .wb-editor::placeholder {
379
- color: currentColor;
380
- opacity: 0.45;
381
- }
382
-
383
- /* A shape centers its text, so the field grows with the text and stays centered. */
384
- .wb-item--shape .wb-editor {
385
- align-self: center;
386
- max-height: 100%;
387
- field-sizing: content;
388
- }
389
-
390
- .wb-title-edit {
391
- position: relative;
392
- display: block;
393
- }
394
-
395
- .wb-title-edit > .wb-text {
396
- display: block;
397
- visibility: hidden;
398
- white-space: pre;
399
- }
400
-
401
- .wb-title-edit > .wb-text::before {
402
- content: attr(data-copy);
403
- }
404
-
405
- /* A hair wider than the copy, so the caret at the end never scrolls the text. */
406
- .wb-title-edit > .wb-editor {
407
- position: absolute;
408
- inset: 0 -2px 0 0;
409
- width: auto;
410
- white-space: nowrap;
411
- overflow: hidden;
412
- }
413
-
414
- .wb-item.is-editing {
415
- cursor: text;
416
- }
417
-
418
- .wb-item.is-lifted {
419
- cursor: grabbing;
420
- opacity: 0.88;
421
- }
422
-
423
- .wb-item.is-selected::before,
424
- .wb-item.is-target::before {
425
- content: '';
426
- position: absolute;
427
- inset: calc(-4px / var(--wb-zoom, 1));
428
- border: calc(2px / var(--wb-zoom, 1)) solid var(--dpk-blue);
429
- border-radius: 6px;
430
- pointer-events: none;
431
- }
432
-
433
- .wb-item.is-target::before {
434
- border-style: dashed;
435
- background: color-mix(in srgb, var(--dpk-blue) 8%, transparent);
436
- }
437
-
438
- /* Sticky: colored paper with a soft lift. It keeps its color in both themes. */
439
- .wb-item--sticky {
440
- padding: 16px 14px;
441
- border-radius: 3px;
442
- background: linear-gradient(170deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 45%), var(--wb-paper);
443
- color: var(--wb-ink);
444
- font-size: calc(15px * var(--wb-font-scale, 1));
445
- font-weight: 560;
446
- line-height: 1.35;
447
- box-shadow:
448
- inset 0 1px 0 rgba(255, 255, 255, 0.35),
449
- 0 1px 2px rgba(30, 24, 10, 0.14),
450
- 0 8px 14px -8px rgba(30, 24, 10, 0.32);
451
- }
452
-
453
- .wb-item--sticky .wb-item-body {
454
- align-items: flex-start;
455
- }
456
-
457
- /* Text: no box at all, just type on the board. */
458
- .wb-item--text {
459
- padding: 4px 6px;
460
- color: var(--dpk-ink);
461
- font-size: calc(20px * var(--wb-font-scale, 1));
462
- font-weight: 650;
463
- line-height: 1.3;
464
- letter-spacing: -0.01em;
465
- }
466
-
467
- /* Shape: the color's stroke around a tint of it, text centered. */
468
- .wb-item--shape {
469
- padding: 10px 14px;
470
- border: 2px solid var(--wb-stroke);
471
- border-radius: 8px;
472
- background: color-mix(in srgb, var(--wb-stroke) 16%, var(--dpk-paper-raised));
473
- color: var(--dpk-ink);
474
- font-size: calc(14px * var(--wb-font-scale, 1));
475
- font-weight: 600;
476
- line-height: 1.35;
477
- text-align: center;
478
- }
479
-
480
- .wb-item--ellipse {
481
- border-radius: 50%;
482
- padding: 14px 22px;
483
- }
484
-
485
- .wb-item--shape .wb-item-body {
486
- align-items: center;
487
- justify-content: center;
488
- }
489
-
490
- /* Frame: a titled area drawn behind everything; its title is a handle.
491
- A click on its empty inside selects it; a drag there draws a selection
492
- area, or moves the frame once it is selected. */
493
- .wb-item--frame {
494
- border: 1.5px solid color-mix(in srgb, var(--wb-stroke) 55%, transparent);
495
- border-radius: 10px;
496
- background: color-mix(in srgb, var(--wb-stroke) 7%, transparent);
497
- cursor: default;
498
- }
499
-
500
- /* Selected, the whole frame is a handle. */
501
- .wb-item--frame.is-selected {
502
- cursor: grab;
503
- }
504
-
505
- .wb-frame-title {
506
- position: absolute;
507
- left: -1px;
508
- bottom: 100%;
509
- max-width: 100%;
510
- margin-bottom: 6px;
511
- padding: 3px 10px;
512
- border-radius: 6px;
513
- background: color-mix(in srgb, var(--wb-stroke) 20%, var(--dpk-paper-raised));
514
- color: var(--dpk-ink);
515
- font-size: 13px;
516
- font-weight: 700;
517
- line-height: 1.3;
518
- white-space: nowrap;
519
- overflow: hidden;
520
- text-overflow: ellipsis;
521
- cursor: grab;
522
- }
523
-
524
- .wb-item--frame.is-editing .wb-frame-title {
525
- overflow: visible;
526
- cursor: text;
527
- }
528
-
529
- /* Comments already left: a corner flag, readable at a glance. */
530
- .wb-flag {
531
- position: absolute;
532
- top: -8px;
533
- right: -8px;
534
- min-width: 18px;
535
- height: 18px;
536
- padding: 0 5px;
537
- box-sizing: border-box;
538
- border-radius: 999px;
539
- background: var(--dpk-accent);
540
- color: var(--dpk-accent-ink);
541
- font-family: var(--dpk-mono);
542
- font-size: 10px;
543
- font-weight: 650;
544
- line-height: 18px;
545
- text-align: center;
546
- pointer-events: none;
547
- }
548
-
549
- .wb-flag--inline {
550
- position: static;
551
- margin-left: 6px;
552
- }
553
-
554
- /* Selection handles keep their screen size at any zoom. */
555
- .wb-handle {
556
- position: absolute;
557
- z-index: 2;
558
- box-sizing: border-box;
559
- width: calc(12px / var(--wb-zoom, 1));
560
- height: calc(12px / var(--wb-zoom, 1));
561
- border: calc(2px / var(--wb-zoom, 1)) solid var(--dpk-blue);
562
- background: var(--dpk-paper-raised);
563
- }
564
-
565
- .wb-handle--resize {
566
- right: calc(-7px / var(--wb-zoom, 1));
567
- bottom: calc(-7px / var(--wb-zoom, 1));
568
- border-radius: 3px;
569
- cursor: nwse-resize;
570
- }
571
-
572
- .wb-handle--connect {
573
- top: 50%;
574
- right: calc(-22px / var(--wb-zoom, 1));
575
- width: calc(14px / var(--wb-zoom, 1));
576
- height: calc(14px / var(--wb-zoom, 1));
577
- border-radius: 50%;
578
- transform: translateY(-50%);
579
- background: var(--dpk-blue);
580
- cursor: crosshair;
581
- }
582
-
583
- /* A selection area being dragged out, in screen space over the board. */
584
- .wb-marquee {
585
- position: absolute;
586
- z-index: 35;
587
- box-sizing: border-box;
588
- border: 1px solid var(--dpk-blue);
589
- border-radius: 2px;
590
- background: color-mix(in srgb, var(--dpk-blue) 10%, transparent);
591
- pointer-events: none;
592
- }
593
-
594
- /* ------------------------------------------------------------ connectors */
595
-
596
- .wb-links {
597
- position: absolute;
598
- left: 0;
599
- top: 0;
600
- overflow: visible;
601
- pointer-events: none;
602
- }
603
-
604
- .wb-links marker path {
605
- fill: var(--dpk-ink-soft);
606
- }
607
-
608
- .wb-link {
609
- fill: none;
610
- stroke: var(--dpk-ink-soft);
611
- stroke-width: 2;
612
- stroke-linecap: round;
613
- }
614
-
615
- .wb-link.is-selected {
616
- stroke: var(--dpk-blue);
617
- stroke-width: 3;
618
- }
619
-
620
- .wb-link--draft {
621
- stroke: var(--dpk-blue);
622
- stroke-dasharray: 6 5;
623
- }
624
-
625
- .wb-link-hit {
626
- fill: none;
627
- stroke: transparent;
628
- stroke-width: 14;
629
- pointer-events: stroke;
630
- cursor: pointer;
631
- }
632
-
633
- .wb-link-label {
634
- position: absolute;
635
- transform: translate(-50%, -50%);
636
- max-width: 180px;
637
- padding: 2px 8px;
638
- border: 1px solid var(--dpk-rule);
639
- border-radius: 999px;
640
- background: var(--dpk-paper-raised);
641
- color: var(--dpk-ink-soft);
642
- font-size: 12px;
643
- line-height: 1.4;
644
- white-space: nowrap;
645
- overflow: hidden;
646
- text-overflow: ellipsis;
647
- cursor: pointer;
648
- }
649
-
650
- .wb-link-label.is-selected {
651
- border-color: var(--dpk-blue);
652
- color: var(--dpk-blue);
653
- }
654
-
655
- /* ----------------------------------------------------------------- chrome */
656
-
657
- .wb-hint {
658
- position: absolute;
659
- left: 50%;
660
- top: 16px;
661
- z-index: 30;
662
- transform: translateX(-50%);
663
- margin: 0;
664
- padding: 6px 14px;
665
- border: 1px solid var(--dpk-rule);
666
- border-radius: 999px;
667
- background: var(--dpk-glass);
668
- backdrop-filter: blur(12px);
669
- color: var(--dpk-ink-soft);
670
- font-size: 12.5px;
671
- pointer-events: none;
672
- }
673
-
674
- .wb-hint--empty {
675
- top: 50%;
676
- transform: translate(-50%, -50%);
677
- }
678
-
679
- .wb-tools,
680
- .wb-zoom,
681
- .wb-toolbar {
682
- position: absolute;
683
- z-index: 40;
684
- display: flex;
685
- align-items: center;
686
- border: 1px solid var(--dpk-rule);
687
- border-radius: var(--dpk-radius);
688
- background: var(--dpk-glass);
689
- backdrop-filter: blur(12px);
690
- box-shadow: var(--dpk-bevel), var(--dpk-shadow-sm);
691
- }
692
-
693
- .wb-tools {
694
- left: 12px;
695
- top: 50%;
696
- transform: translateY(-50%);
697
- flex-direction: column;
698
- gap: 2px;
699
- padding: 4px;
700
- }
701
-
702
- .wb-tool {
703
- display: grid;
704
- place-items: center;
705
- width: 34px;
706
- height: 34px;
707
- border: none;
708
- border-radius: var(--dpk-radius-sm);
709
- background: transparent;
710
- cursor: pointer;
711
- }
712
-
713
- .wb-tool:hover,
714
- .wb-tool:focus-visible {
715
- background: var(--dpk-blue-soft);
716
- }
717
-
718
- .wb-tool-icon {
719
- display: block;
720
- box-sizing: border-box;
721
- }
722
-
723
- .wb-tool-icon--sticky {
724
- width: 18px;
725
- height: 18px;
726
- border-radius: 2px;
727
- background: #ffe27a;
728
- box-shadow: 0 1px 2px rgba(30, 24, 10, 0.3);
729
- }
730
-
731
- .wb-tool-icon--text::before {
732
- content: 'T';
733
- color: var(--dpk-ink);
734
- font-family: var(--dpk-display);
735
- font-size: 18px;
736
- font-weight: 700;
737
- }
738
-
739
- .wb-tool-icon--rect,
740
- .wb-tool-icon--ellipse {
741
- width: 20px;
742
- height: 14px;
743
- border: 2px solid var(--dpk-ink-soft);
744
- border-radius: 3px;
745
- }
746
-
747
- .wb-tool-icon--ellipse {
748
- border-radius: 50%;
749
- }
750
-
751
- .wb-tool-icon--frame {
752
- width: 20px;
753
- height: 16px;
754
- border: 1.5px dashed var(--dpk-ink-soft);
755
- border-radius: 3px;
756
- }
757
-
758
- .wb-zoom {
759
- right: 12px;
760
- bottom: 12px;
761
- overflow: hidden;
762
- }
763
-
764
- .wb-zoom button {
765
- border: none;
766
- background: transparent;
767
- padding: 6px 10px;
768
- font-size: 12px;
769
- line-height: 1;
770
- color: var(--dpk-ink-soft);
771
- cursor: pointer;
772
- }
773
-
774
- .wb-zoom button:hover {
775
- background: var(--dpk-blue-soft);
776
- color: var(--dpk-blue);
777
- }
778
-
779
- .wb-zoom-pct {
780
- min-width: 48px;
781
- font-family: var(--dpk-mono);
782
- }
783
-
784
- /* The floating toolbar over the selection. */
785
- .wb-toolbar {
786
- transform: translate(-50%, -100%);
787
- translate: var(--wb-nudge-x, 0) var(--wb-nudge-y, 0);
788
- gap: 2px;
789
- padding: 4px;
790
- white-space: nowrap;
791
- }
792
-
793
- .wb-toolbar-btn {
794
- position: relative;
795
- }
796
-
797
- .wb-toolbar-count {
798
- position: absolute;
799
- top: -4px;
800
- right: -4px;
801
- min-width: 14px;
802
- height: 14px;
803
- border-radius: 999px;
804
- background: var(--dpk-accent);
805
- color: var(--dpk-accent-ink);
806
- font-family: var(--dpk-mono);
807
- font-size: 9px;
808
- line-height: 14px;
809
- text-align: center;
810
- }
811
-
812
- .wb-toolbar-sep {
813
- width: 1px;
814
- height: 18px;
815
- margin: 0 4px;
816
- background: var(--dpk-rule);
817
- }
818
-
819
- .wb-toolbar-label {
820
- min-width: 120px;
821
- padding: 0 6px;
822
- font-size: 12.5px;
823
- }
824
-
825
- /* A segmented choice (text size, line shape): a sunken track, the current
826
- option raised out of it. */
827
- .wb-choice {
828
- display: flex;
829
- align-items: center;
830
- gap: 2px;
831
- padding: 2px;
832
- border-radius: var(--dpk-radius-sm);
833
- background: var(--dpk-paper-inset);
834
- }
835
-
836
- .wb-choice-btn {
837
- display: grid;
838
- place-items: center;
839
- min-width: 28px;
840
- height: 24px;
841
- padding: 0 6px;
842
- border: none;
843
- border-radius: var(--dpk-radius-xs);
844
- background: transparent;
845
- color: var(--dpk-ink-soft);
846
- font-family: inherit;
847
- font-size: 11.5px;
848
- font-weight: 650;
849
- letter-spacing: 0.02em;
850
- line-height: 1;
851
- cursor: pointer;
852
- transition:
853
- background 140ms var(--dpk-ease),
854
- color 140ms var(--dpk-ease),
855
- box-shadow 140ms var(--dpk-ease);
856
- }
857
-
858
- .wb-choice-btn--icon {
859
- padding: 0;
860
- }
861
-
862
- .wb-choice-btn svg {
863
- display: block;
864
- width: 16px;
865
- height: 16px;
866
- }
867
-
868
- .wb-choice-btn:hover {
869
- color: var(--dpk-ink);
870
- }
871
-
872
- .wb-choice-btn:focus-visible {
873
- outline: none;
874
- box-shadow: var(--dpk-focus);
875
- }
876
-
877
- .wb-choice-btn[aria-checked='true'] {
878
- background: var(--dpk-paper-raised);
879
- color: var(--dpk-blue-strong);
880
- box-shadow:
881
- 0 0 0 0.5px var(--dpk-rule),
882
- 0 1px 2px rgba(15, 23, 42, 0.12);
883
- }
884
-
885
- /* Stacking order: a button that drops a menu of named moves. */
886
- .wb-menu-anchor {
887
- position: relative;
888
- display: flex;
889
- }
890
-
891
- .wb-menu-btn {
892
- display: inline-flex;
893
- align-items: center;
894
- gap: 1px;
895
- height: 26px;
896
- padding: 0 4px 0 6px;
897
- border: none;
898
- border-radius: var(--dpk-radius-xs);
899
- background: transparent;
900
- color: var(--dpk-ink-soft);
901
- cursor: pointer;
902
- }
903
-
904
- .wb-menu-btn svg {
905
- display: block;
906
- width: 15px;
907
- height: 15px;
908
- }
909
-
910
- .wb-menu-btn svg:last-child {
911
- width: 11px;
912
- height: 11px;
913
- opacity: 0.7;
914
- }
915
-
916
- .wb-menu-btn:hover,
917
- .wb-menu-btn[aria-expanded='true'] {
918
- background: var(--dpk-paper-inset);
919
- color: var(--dpk-ink);
920
- }
921
-
922
- .wb-menu-btn:focus-visible {
923
- outline: none;
924
- box-shadow: var(--dpk-focus);
925
- }
926
-
927
- /* Opens toward the toolbar's middle: its button sits near the right end. */
928
- .wb-menu {
929
- position: absolute;
930
- right: 0;
931
- top: calc(100% + 8px);
932
- z-index: 1;
933
- display: flex;
934
- flex-direction: column;
935
- min-width: 200px;
936
- padding: 4px;
937
- border: 1px solid var(--dpk-rule);
938
- border-radius: var(--dpk-radius);
939
- background: var(--dpk-paper-raised);
940
- box-shadow: var(--dpk-bevel), var(--dpk-shadow);
941
- }
942
-
943
- .wb-menu-item {
944
- display: flex;
945
- align-items: center;
946
- gap: 10px;
947
- padding: 7px 8px;
948
- border: none;
949
- border-radius: var(--dpk-radius-xs);
950
- background: transparent;
951
- color: var(--dpk-ink);
952
- font: inherit;
953
- font-size: 12.5px;
954
- text-align: left;
955
- cursor: pointer;
956
- }
957
-
958
- .wb-menu-item svg {
959
- flex: none;
960
- width: 15px;
961
- height: 15px;
962
- color: var(--dpk-ink-soft);
963
- }
964
-
965
- .wb-menu-item:hover:not([disabled]),
966
- .wb-menu-item:focus-visible {
967
- outline: none;
968
- background: var(--dpk-blue-soft);
969
- }
970
-
971
- .wb-menu-item[disabled] {
972
- color: var(--dpk-ink-faint);
973
- cursor: default;
974
- }
975
-
976
- .wb-menu-item[disabled] svg {
977
- opacity: 0.5;
978
- }
979
-
980
- .wb-menu-label {
981
- flex: 1 1 auto;
982
- }
983
-
984
- .wb-menu-key {
985
- color: var(--dpk-ink-faint);
986
- font-family: var(--dpk-mono);
987
- font-size: 10.5px;
988
- }
989
-
990
- .wb-swatches {
991
- display: flex;
992
- gap: 3px;
993
- padding: 0 2px;
994
- }
995
-
996
- .wb-swatch {
997
- width: 18px;
998
- height: 18px;
999
- padding: 0;
1000
- border: 2px solid color-mix(in srgb, var(--wb-stroke) 70%, transparent);
1001
- border-radius: 50%;
1002
- background: var(--wb-paper);
1003
- cursor: pointer;
1004
- }
1005
-
1006
- .wb-swatch[aria-checked='true'] {
1007
- outline: 2px solid var(--dpk-blue);
1008
- outline-offset: 1px;
1009
- }
1010
-
1011
- /* --------------------------------------------------------------- sidebar */
1012
-
1013
- .wb-frames {
1014
- display: flex;
1015
- flex-direction: column;
1016
- gap: 6px;
1017
- padding: 14px 12px;
1018
- }
1019
-
1020
- .wb-frames p {
1021
- margin: 0;
1022
- }
1023
-
1024
- .wb-frames-hint {
1025
- color: var(--dpk-ink-faint);
1026
- font-size: 11.5px;
1027
- }
1028
-
1029
- .wb-frames ul {
1030
- display: flex;
1031
- flex-direction: column;
1032
- gap: 2px;
1033
- margin: 6px 0 0;
1034
- padding: 0;
1035
- list-style: none;
1036
- }
1037
-
1038
- .wb-frame-link {
1039
- display: flex;
1040
- align-items: center;
1041
- gap: 8px;
1042
- width: 100%;
1043
- padding: 6px 8px;
1044
- border: none;
1045
- border-radius: var(--dpk-radius-sm);
1046
- background: transparent;
1047
- color: var(--dpk-ink);
1048
- font: inherit;
1049
- font-size: 13px;
1050
- text-align: left;
1051
- cursor: pointer;
1052
- }
1053
-
1054
- .wb-frame-link:hover {
1055
- background: var(--dpk-blue-soft);
1056
- }
1057
-
1058
- .wb-frame-link[aria-current='true'] {
1059
- background: color-mix(in srgb, var(--dpk-blue-soft) 80%, transparent);
1060
- color: var(--dpk-blue-strong);
1061
- font-weight: 650;
1062
- }
1063
-
1064
- .wb-frame-dot {
1065
- flex: none;
1066
- width: 10px;
1067
- height: 10px;
1068
- border-radius: 3px;
1069
- background: var(--wb-stroke);
1070
- }
1071
-
1072
- .wb-frame-dot--board {
1073
- border: 1.5px dashed var(--dpk-ink-faint);
1074
- background: transparent;
1075
- }
1076
-
1077
- .wb-frame-name {
1078
- flex: 1 1 auto;
1079
- min-width: 0;
1080
- overflow: hidden;
1081
- text-overflow: ellipsis;
1082
- white-space: nowrap;
1083
- }
1084
-
1085
- .wb-frame-count {
1086
- flex: none;
1087
- color: var(--dpk-ink-faint);
1088
- font-family: var(--dpk-mono);
1089
- font-size: 10.5px;
1090
- }
1091
- `,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.#V(d),canvasDblClick:d=>this.#X(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}
1092
- <div class="wb-composer" @pointerdown=${Nt} @dblclick=${Nt}>
1093
- ${l&&c!==void 0?this.#D(e,c):b}
1094
- </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,{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=$)})}#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(!V(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}}#V(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))}#X(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(V).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(Vo(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());Xo(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:Xe,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};