@filekit-studio/sketch 1.1.2 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/export.js +26 -26
- package/dist/export.mjs +26 -26
- package/dist/index.js +11 -11
- package/dist/index.mjs +11 -11
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import Hn,{createContext,useMemo,useRef,useState,useCallback,useEffect,useImperativeHandle,forwardRef,useContext,useLayoutEffect,useSyncExternalStore}from'react';import {IconTrash,IconLogout,IconCheck,IconCopy,IconMinus,IconPlus,IconMaximize,IconArrowLeft,IconPencilMinus,IconChevronDown,IconDeviceFloppy,IconArrowBackUp,IconArrowForwardUp,IconHandGrab,IconDots,IconGridPattern,IconLayoutSidebar,IconPlayerPlay,IconCurrentLocation,IconEraser,IconSettingsBolt,IconBracketsContain,IconDownload,IconSquare,IconCircle,IconPointer,IconNote,IconArrowUpRight,IconLine,IconPencil,IconTypography,IconPhoto,IconLock,IconLockOpen,IconLayersSubtract,IconSparkles,IconCloud,IconDatabase,IconTriangle,IconChevronLeft,IconChevronRight,IconAlignLeft,IconAlignCenter,IconAlignRight,IconAspectRatio,IconFlame,IconPin,IconX,IconBook,IconKeyboard,IconCompass,IconChevronUp,IconFileTypePdf,IconFileTypePng,IconFileCode,IconLayout,IconSun,IconMoon,IconFileTypeSvg,IconUpload,IconSlideshow,IconList,IconMinimize,IconSearch,IconFocusCentered,IconSelect,IconEdit,IconDeviceDesktop,IconDeviceMobile,IconAdjustments,IconArrowRight,IconCode}from'@tabler/icons-react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {rgb,PDFDocument}from'pdf-lib';import {BringToFront}from'lucide-react';var Ro=createContext({theme:"system",resolvedTheme:"light",isDark:false,panelVariant:"classic"});function po(){return useContext(Ro)}function aa(){if(typeof window>"u"||typeof document>"u")return false;let e=document.documentElement,t=document.body;return e.classList.contains("dark")||t?.classList.contains("dark")?true:e.classList.contains("light")||t?.classList.contains("light")?false:e.getAttribute("data-theme")==="dark"||t?.getAttribute("data-theme")==="dark"?true:e.getAttribute("data-theme")==="light"||t?.getAttribute("data-theme")==="light"?false:window.matchMedia("(prefers-color-scheme: dark)").matches}function nr(e){let t=useContext(Ro),r=e!==void 0?e:t.theme,[o,c]=useState(()=>r==="dark"?"dark":r==="light"?"light":aa()?"dark":"light");return useEffect(()=>{if(typeof window>"u"||typeof document>"u")return;if(r==="dark"){c("dark");return}if(r==="light"){c("light");return}let d=()=>{c(aa()?"dark":"light");};d();let h=new MutationObserver(()=>{d();});h.observe(document.documentElement,{attributes:true,attributeFilter:["class","data-theme"]}),document.body&&h.observe(document.body,{attributes:true,attributeFilter:["class","data-theme"]});let s=window.matchMedia("(prefers-color-scheme: dark)"),n=()=>{d();};return s.addEventListener("change",n),()=>{h.disconnect(),s.removeEventListener("change",n);}},[r]),{theme:r,resolvedTheme:o,isDark:o==="dark",panelVariant:t.panelVariant}}var Xi=()=>()=>{};function ho(){return useSyncExternalStore(Xi,()=>true,()=>false)}var fo=[{key:"q",name:"Transparent",stroke:{light:"transparent",dark:"transparent"},fill:{light:"transparent",dark:"transparent"}},{key:"w",name:"White",stroke:{light:"#ffffff",dark:"#ffffff"},fill:{light:"#ffffff",dark:"#ffffff"}},{key:"e",name:"Grey",stroke:{light:"#343a40",dark:"#ced4da"},fill:{light:"#e9ecef",dark:"#2e3238"}},{key:"r",name:"Black / Off-white",stroke:{light:"#1e1e24",dark:"#f8f9fa"},fill:{light:"#1e1e24",dark:"#1e1e24"}},{key:"t",name:"Warm Taupe",stroke:{light:"#865e3c",dark:"#d8c2b0"},fill:{light:"#f4ece4",dark:"#362b28"}},{key:"a",name:"Teal Cyan",stroke:{light:"#0c8599",dark:"#22b8cf"},fill:{light:"#c5f6fa",dark:"#0c383e"}},{key:"s",name:"Sky Blue",stroke:{light:"#1971c2",dark:"#4dabf7"},fill:{light:"#a5d8ff",dark:"#182a4d"}},{key:"d",name:"Royal Purple",stroke:{light:"#6741d9",dark:"#b197fc"},fill:{light:"#d0bfff",dark:"#2b1e4a"}},{key:"f",name:"Violet Magenta",stroke:{light:"#ae3ec9",dark:"#e599f7"},fill:{light:"#eebefa",dark:"#381e3d"}},{key:"g",name:"Crimson Berry",stroke:{light:"#c2255c",dark:"#f783ac"},fill:{light:"#fcc2d7",dark:"#3e1828"}},{key:"z",name:"Green",stroke:{light:"#2f9e44",dark:"#51cf66"},fill:{light:"#b2f2bb",dark:"#143823"}},{key:"x",name:"Mint Emerald",stroke:{light:"#087f5b",dark:"#38d9a9"},fill:{light:"#96f2d7",dark:"#123d33"}},{key:"c",name:"Amber Yellow",stroke:{light:"#f59f00",dark:"#ffd43b"},fill:{light:"#ffec99",dark:"#3d2e14"}},{key:"v",name:"Vivid Orange",stroke:{light:"#f76707",dark:"#ffa94d"},fill:{light:"#ffd8a8",dark:"#3d2014"}},{key:"b",name:"Coral Red",stroke:{light:"#e03131",dark:"#ff8787"},fill:{light:"#ffc9c9",dark:"#2e1418"}}];var pa=[{name:"Crimson Red",hex:"#ef4444",glow:"rgba(239, 68, 68, 0.7)"},{name:"Emerald Green",hex:"#10b981",glow:"rgba(16, 185, 129, 0.7)"},{name:"Electric Blue",hex:"#3b82f6",glow:"rgba(59, 130, 246, 0.7)"},{name:"Neon Purple",hex:"#a855f7",glow:"rgba(168, 85, 247, 0.7)"},{name:"Radiant Gold",hex:"#f59e0b",glow:"rgba(245, 158, 11, 0.7)"}],Do=fo.map(e=>({name:e.name,hex:e.stroke.light,shortcut:e.key}));fo.map(e=>({name:e.name,hex:e.fill.light}));var sa={"#fef08a":{bg:"#fef08a",backSheetBg:"#fefce8",backSheetBorder:"#fde047",mainBorder:"rgba(234, 179, 8, 0.45)",tapeBg:"rgba(254, 249, 195, 0.95)",tapeBorder:"rgba(202, 138, 4, 0.35)",text:"#713f12",sheen:"rgba(255, 255, 255, 0.8)"},"#fde68a":{bg:"#fde68a",backSheetBg:"#fef9d9",backSheetBorder:"#fcd34d",mainBorder:"rgba(245, 158, 11, 0.4)",tapeBg:"rgba(255, 250, 224, 0.95)",tapeBorder:"rgba(217, 119, 6, 0.35)",text:"#78350f",sheen:"rgba(255, 255, 255, 0.8)"},"#bbf7d0":{bg:"#bbf7d0",backSheetBg:"#f0fdf4",backSheetBorder:"#86efac",mainBorder:"rgba(74, 222, 128, 0.45)",tapeBg:"rgba(240, 253, 244, 0.95)",tapeBorder:"rgba(22, 163, 74, 0.35)",text:"#14532d",sheen:"rgba(255, 255, 255, 0.8)"},"#bae6fd":{bg:"#bae6fd",backSheetBg:"#f0f9ff",backSheetBorder:"#7dd3fc",mainBorder:"rgba(56, 189, 248, 0.45)",tapeBg:"rgba(240, 249, 255, 0.95)",tapeBorder:"rgba(2, 132, 199, 0.35)",text:"#0c4a6e",sheen:"rgba(255, 255, 255, 0.8)"},"#fed7aa":{bg:"#fed7aa",backSheetBg:"#fff7ed",backSheetBorder:"#fdba74",mainBorder:"rgba(251, 146, 60, 0.45)",tapeBg:"rgba(255, 247, 237, 0.95)",tapeBorder:"rgba(234, 88, 12, 0.35)",text:"#7c2d12",sheen:"rgba(255, 255, 255, 0.8)"},"#e9d5ff":{bg:"#e9d5ff",backSheetBg:"#faf5ff",backSheetBorder:"#d8b4fe",mainBorder:"rgba(192, 132, 252, 0.45)",tapeBg:"rgba(250, 245, 255, 0.95)",tapeBorder:"rgba(147, 51, 234, 0.35)",text:"#581c87",sheen:"rgba(255, 255, 255, 0.8)"},"#fecdd3":{bg:"#fecdd3",backSheetBg:"#fff1f2",backSheetBorder:"#fda4af",mainBorder:"rgba(251, 113, 133, 0.45)",tapeBg:"rgba(255, 241, 242, 0.95)",tapeBorder:"rgba(225, 29, 72, 0.35)",text:"#881337",sheen:"rgba(255, 255, 255, 0.8)"}},la={"#fef08a":{bg:"#2b230d",backSheetBg:"#1c1608",backSheetBorder:"#4a3c18",mainBorder:"rgba(250, 204, 21, 0.5)",tapeBg:"rgba(254, 240, 138, 0.18)",tapeBorder:"rgba(250, 204, 21, 0.45)",text:"#fef08a",sheen:"rgba(254, 240, 138, 0.15)"},"#fde68a":{bg:"#2b230d",backSheetBg:"#1c1608",backSheetBorder:"#4a3c18",mainBorder:"rgba(250, 204, 21, 0.5)",tapeBg:"rgba(254, 240, 138, 0.18)",tapeBorder:"rgba(250, 204, 21, 0.45)",text:"#fde68a",sheen:"rgba(254, 240, 138, 0.15)"},"#bbf7d0":{bg:"#10281b",backSheetBg:"#091b11",backSheetBorder:"#1e4730",mainBorder:"rgba(74, 222, 128, 0.5)",tapeBg:"rgba(187, 247, 208, 0.18)",tapeBorder:"rgba(74, 222, 128, 0.45)",text:"#bbf7d0",sheen:"rgba(187, 247, 208, 0.15)"},"#bae6fd":{bg:"#102436",backSheetBg:"#091724",backSheetBorder:"#1d4160",mainBorder:"rgba(56, 189, 248, 0.5)",tapeBg:"rgba(186, 230, 253, 0.18)",tapeBorder:"rgba(56, 189, 248, 0.45)",text:"#bae6fd",sheen:"rgba(186, 230, 253, 0.15)"},"#fed7aa":{bg:"#321d10",backSheetBg:"#201107",backSheetBorder:"#56321c",mainBorder:"rgba(251, 146, 60, 0.5)",tapeBg:"rgba(254, 215, 170, 0.18)",tapeBorder:"rgba(251, 146, 60, 0.45)",text:"#fed7aa",sheen:"rgba(254, 215, 170, 0.15)"},"#e9d5ff":{bg:"#271638",backSheetBg:"#190d24",backSheetBorder:"#462865",mainBorder:"rgba(192, 132, 252, 0.5)",tapeBg:"rgba(233, 213, 255, 0.18)",tapeBorder:"rgba(192, 132, 252, 0.45)",text:"#e9d5ff",sheen:"rgba(233, 213, 255, 0.15)"},"#fecdd3":{bg:"#321319",backSheetBg:"#210b10",backSheetBorder:"#56222b",mainBorder:"rgba(251, 113, 133, 0.5)",tapeBg:"rgba(254, 205, 211, 0.18)",tapeBorder:"rgba(251, 113, 133, 0.45)",text:"#fecdd3",sheen:"rgba(254, 205, 211, 0.15)"}};function da(e){let t=e.replace("#","").trim();if(t.length===3&&(t=t[0]+t[0]+t[1]+t[1]+t[2]+t[2]),t.length===6){let r=parseInt(t,16);if(!isNaN(r))return {r:r>>16&255,g:r>>8&255,b:r&255}}return {r:254,g:240,b:138}}function ca(e,t,r){e/=255,t/=255,r/=255;let o=Math.max(e,t,r),c=Math.min(e,t,r),d=0,h=0,s=(o+c)/2;if(o!==c){let n=o-c;switch(h=s>.5?n/(2-o-c):n/(o+c),o){case e:d=(t-r)/n+(t<r?6:0);break;case t:d=(r-e)/n+2;break;case r:d=(e-t)/n+4;break}d/=6;}return {h:Math.round(d*360),s:Math.round(h*100),l:Math.round(s*100)}}function Mr(e,t=false){let r=(e||"#fde68a").toLowerCase();if(t){if(la[r])return la[r];let{r:p,g:i,b:l}=da(r),{h:u,s:a}=ca(p,i,l),x=Math.max(35,a);return {bg:`hsl(${u}, ${Math.round(x*.45)}%, 16%)`,backSheetBg:`hsl(${u}, ${Math.round(x*.5)}%, 10%)`,backSheetBorder:`hsl(${u}, ${Math.round(x*.6)}%, 28%)`,mainBorder:`hsla(${u}, ${Math.round(x*.9)}%, 65%, 0.5)`,tapeBg:`hsla(${u}, ${Math.round(x*.8)}%, 80%, 0.18)`,tapeBorder:`hsla(${u}, ${Math.round(x*.9)}%, 70%, 0.45)`,text:`hsl(${u}, ${Math.round(x*.95)}%, 88%)`,sheen:`hsla(${u}, ${Math.round(x*.8)}%, 85%, 0.15)`}}if(sa[r])return sa[r];let{r:o,g:c,b:d}=da(r),{h,s}=ca(o,c,d),n=Math.max(30,s);return {bg:e||"#fde68a",backSheetBg:`hsl(${h}, ${Math.round(n*.75)}%, 94%)`,backSheetBorder:`hsl(${h}, ${Math.round(n*.85)}%, 72%)`,mainBorder:`hsl(${h}, ${Math.round(n*.95)}%, 42%)`,tapeBg:`hsla(${h}, ${Math.round(n*.6)}%, 96%, 0.95)`,tapeBorder:`hsla(${h}, ${Math.round(n*.9)}%, 42%, 0.38)`,text:`hsl(${h}, ${Math.round(n*.95)}%, 16%)`,sheen:"rgba(255, 255, 255, 0.8)"}}var ha=[{name:"Canary Yellow",bg:"#fde68a",border:"#facc15",text:"#78350f"},{name:"Mint Green",bg:"#bbf7d0",border:"#86efac",text:"#14532d"},{name:"Sky Blue",bg:"#bae6fd",border:"#7dd3fc",text:"#0c4a6e"},{name:"Soft Coral",bg:"#fed7aa",border:"#fdba74",text:"#7c2d12"},{name:"Lavender",bg:"#e9d5ff",border:"#d8b4fe",text:"#581c87"},{name:"Soft Rose",bg:"#fecdd3",border:"#fda4af",text:"#881337"}],ua=[{value:"transparent",label:"Empty",icon:"square"},{value:"solid",label:"Solid",icon:"square-filled"},{value:"hachure",label:"Slash (\\)",icon:"slash"},{value:"hachure-right",label:"Backslash (/)",icon:"backslash"},{value:"cross-hatch",label:"Grid Net",icon:"grid"},{value:"dots",label:"Dots",icon:"dots"}],Wo=[{label:"Fine",value:1.8},{label:"Medium",value:3.2},{label:"Bold",value:5.2}],bo=[{value:"none",label:"None",shortcut:"q",category:"standard"},{value:"arrow",label:"Open Arrow",shortcut:"w",category:"standard"},{value:"triangle",label:"Triangle",shortcut:"e",category:"standard"},{value:"barbed",label:"Barbed Arrow",shortcut:"r",category:"standard"},{value:"dot",label:"Filled Dot",shortcut:"a",category:"more"},{value:"circle",label:"Hollow Circle",shortcut:"s",category:"more"},{value:"diamond",label:"Filled Diamond",shortcut:"d",category:"more"},{value:"diamond_outline",label:"Hollow Diamond",shortcut:"f",category:"more"},{value:"bar",label:"Tee / Bar",shortcut:"z",category:"more"},{value:"crowfoot_one",label:"One",shortcut:"x",category:"cardinality"},{value:"crowfoot_many",label:"Many",shortcut:"c",category:"cardinality"},{value:"crowfoot_one_many",label:"One or Many",shortcut:"v",category:"cardinality"},{value:"crowfoot_strictly_one",label:"Strictly One",shortcut:"",category:"cardinality"},{value:"crowfoot_zero_one",label:"Zero or One",shortcut:"",category:"cardinality"},{value:"crowfoot_zero_many",label:"Zero or Many",shortcut:"",category:"cardinality"}];function cr(e,t="none"){return e===true?"arrow":e===false||e===null||e===void 0?t:e}var uo=[{hex:"#ffffff",name:"Pure White"},{hex:"#f0f4f8",name:"Sky Slate"},{hex:"#fffbeb",name:"Sand Cream"},{hex:"#faf5f0",name:"Blush Peach"},{hex:"#f0fdf4",name:"Mint Mist"}],xo=[{hex:"#121212",name:"Pure Dark"},{hex:"#1a1d24",name:"Midnight Slate"},{hex:"#1f1e1b",name:"Warm Olive"},{hex:"#201a1a",name:"Plum Dark"},{hex:"#141f18",name:"Forest Dark"}];function xa(e,t){if(!e||e==="default")return t?"#1a1d24":"#f0f4f8";let r=e.toLowerCase(),o=uo.findIndex(d=>d.hex.toLowerCase()===r);if(o!==-1)return t?xo[o].hex:uo[o].hex;let c=xo.findIndex(d=>d.hex.toLowerCase()===r);return c!==-1?t?xo[c].hex:uo[c].hex:e}var fa=[{value:"solid",label:"Solid"},{value:"dashed",label:"Dashed"},{value:"dotted",label:"Dotted"}],gr=[{value:"fuzzy",label:"Handwritten",cssFont:"'Fuzzy Bubbles', cursive, sans-serif"},{value:"comic",label:"Playful",cssFont:"'Comic Neue', cursive, sans-serif"},{value:"patrick",label:"Calm",cssFont:"'Patrick Hand SC', sans-serif"},{value:"sans",label:"Formal",cssFont:"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"},{value:"mono",label:"Code",cssFont:"'JetBrains Mono', 'Geist Mono', 'Courier New', Consolas, monospace"}];function ar(e){return e==="fuzzy"||e==="edusa"||e==="playpen"||e==="caveat"?gr[0]:e==="comic"||e==="handlee"?gr[1]:e==="serif"||e==="patrick"?gr[2]:e==="sans"?gr[3]:e==="mono"?gr[4]:gr.find(t=>t.value===e)||gr[0]}var ba=[{label:"S",value:16,title:"Small (S - 16px)"},{label:"M",value:22,title:"Medium (M - 22px)"},{label:"L",value:28,title:"Large (L - 28px)"},{label:"XL",value:36,title:"Extra Large (XL - 36px)"}];var cn={type:"rectangle",strokeColor:"#1e1e24",strokeWidth:2.5,strokeStyle:"solid",fillColor:"#ffc9c9",fillStyle:"hachure",opacity:1,zIndex:1,edgeStyle:"round",roughStyle:"clean",roughness:0,fontSize:20,fontFamily:"fuzzy",textAlign:"center",stickyColor:"#fef08a",startArrowhead:"none",endArrowhead:"arrow"};function Et(e,t){if(!e||e==="transparent")return e||"transparent";let r=e.trim().toLowerCase();if(t){if(["#000000","#020617","#0f172a","#111827","#18181b","#1e1e24","#1e293b","#27272a","#334155","#343a40","#3f3f46","#475569","#52525b","#1f2937","#242731"].includes(r)||["#e2e8f0","#e5e7eb","#cbd5e1","#ced4da"].includes(r))return "#f8f9fa";if(["#64748b","#71717a","#78716c","#868e96"].includes(r))return "#ced4da";if(["#94a3b8"].includes(r))return "#e2e8f0";if(["#713f12","#865e3c","#a89984","#78350f","#451a03"].includes(r))return "#ffd43b";if(["#042f2e","#134e4a","#115e59","#0f766e","#0d9488","#0891b2","#0c8599","#14b8a6","#2dd4bf","#164e63","#155e75","#0e7490"].includes(r))return "#22b8cf";if(["#172554","#1e3a8a","#1e40af","#1d4ed8","#2563eb","#1971c2","#0b6eff","#3b82f6","#182a4d","#0c4a6e","#075985","#0369a1","#0284c7"].includes(r))return "#4dabf7";if(["#3b0764","#581c87","#6b21a8","#7e22ce","#9333ea","#a855f7","#2e1065","#4c1d95","#5b21b6","#6741d9","#6965db","#7c3aed","#2b1e4a","#1e1b4b","#312e81","#3730a3","#4338ca","#4f46e5"].includes(r))return "#b197fc";if(["#ae3ec9","#9c36b5","#be185d","#381e3d","#86198f","#701a75"].includes(r))return "#e599f7";if(["#4c0519","#881337","#9f1239","#c2255c","#db2777","#e11d48","#f43f5e","#f472b6","#3e1828","#831843","#9d174d"].includes(r))return "#f783ac";if(["#052e16","#14532d","#166534","#15803d","#16a34a","#2f9e44","#22c55e","#143823"].includes(r))return "#51cf66";if(["#064e3b","#065f46","#047857","#087f5b","#059669","#10b981","#123d33","#022c22"].includes(r))return "#38d9a9";if(["#713f12","#854d0e","#a16207","#ca8a04","#eab308","#f59f00","#d97706","#b45309","#3d2e14","#78350f","#451a03"].includes(r))return "#ffd43b";if(["#451a03","#7c2d12","#9a3412","#c2410c","#ea580c","#f76707","#f97316","#3d2014"].includes(r))return "#ffa94d";if(["#450a0a","#7f1d1d","#991b1b","#b91c1c","#dc2626","#e03131","#ef4444","#2e1418"].includes(r))return "#ff8787";if(["#ffffff","#fff"].includes(r))return "#ffffff"}else {if(["#f8f9fa","#f8fafc","#f3f4f6","#ffffff","#fff"].includes(r))return "#111827";if(["#e2e8f0","#e5e7eb","#cbd5e1","#ced4da"].includes(r))return "#475569";if(["#94a3b8"].includes(r))return "#64748b";if(["#d8c2b0"].includes(r))return "#865e3c";if(["#22b8cf","#5eead4","#2dd4bf"].includes(r))return "#0c8599";if(["#4dabf7","#60a5fa","#74c0fc"].includes(r))return "#1971c2";if(["#b197fc","#a5b4fc","#c4b5fd"].includes(r))return "#6741d9";if(["#e599f7","#c084fc"].includes(r))return "#ae3ec9";if(["#f783ac","#fb7185","#f472b6"].includes(r))return "#c2255c";if(["#51cf66","#4ade80"].includes(r))return "#2f9e44";if(["#38d9a9","#34d399"].includes(r))return "#087f5b";if(["#ffd43b","#fde047","#facc15"].includes(r))return "#f59f00";if(["#ffa94d","#fb923c"].includes(r))return "#f76707";if(["#ff8787","#f87171"].includes(r))return "#e03131"}return e}function Nr(e,t,r){if(!e||e==="transparent")return "transparent";let o=e.trim().toLowerCase();if(["#ffffff","#fff"].includes(o))return "#ffffff";if(["#000000","#1e1e24","#111827","#121212","#18181b"].includes(o))return o==="#000000"?"#000000":"#1e1e24";if(["#f8f9fa","#f8fafc","#f1f5f9","#f3f4f6"].includes(o))return "#f8f9fa";if(r){if(["#e5e7eb","#e2e8f0"].includes(o)||["#1f2937","#242731","#16171b","#1e2029","#0f172a","#1e293b","#374151"].includes(o))return "#242731";if(["#e9ecef","#dee2e6","#ced4da","#2e3238","#212529","#343a40"].includes(o))return "#2e3238";if(["#f4ece4","#f5f0eb","#a89984","#e2d9cc","#362b28"].includes(o))return "#362b28";if(["#c5f6fa","#ccfbf1","#99f6e4","#5eead4","#2dd4bf","#14b8a6","#0d9488","#cffafe","#0c383e"].includes(o))return "#0c383e";if(["#a5d8ff","#d0ebff","#e0f2fe","#bae6fd","#dbeafe","#bfdbfe","#93c5fd","#60a5fa","#182a4d"].includes(o))return "#182a4d";if(["#d0bfff","#e5dbff","#ede9fe","#e0e7ff","#c7d2fe","#a5b4fc","#818cf8","#1e1b4b","#2b1e4a"].includes(o))return "#1e1b4b";if(["#eebefa","#f5d0fe","#e9d5ff","#d8b4fe","#c084fc","#381e3d"].includes(o))return "#381e3d";if(["#fcc2d7","#f8d7da","#3e1828"].includes(o))return "#3e1828";if(["#ffc9c9","#ffe3e3","#ffe4e6","#fecdd3","#fce7f3","#fbcfe8","#fda4af","#fb7185","#2e1418"].includes(o))return "#2e1418";if(["#b2f2bb","#d3f9d8","#dcfce7","#bbf7d0","#d1fae5","#a7f3d0","#143823"].includes(o))return "#143823";if(["#96f2d7","#c3fae8","#123d33"].includes(o))return "#123d33";if(["#ffec99","#fff3bf","#fef9c3","#fef08a","#fde047","#3d2e14"].includes(o))return "#3d2e14";if(["#ffd8a8","#ffe8cc","#ffedd5","#fed7aa","#3d2014"].includes(o))return "#3d2014";if(["#fee2e2","#fca5a5","#f87171","#2e1418"].includes(o))return "#2e1418"}else {if(["#1f2937","#242731","#16171b","#1e2029","#0f172a","#1e293b","#374151"].includes(o))return "#ffffff";if(["#ced4da","#e9ecef","#dee2e6","#e2e8f0","#cbd5e1","#2e3238","#212529","#343a40"].includes(o))return "#e9ecef";if(["#362b28"].includes(o))return "#f4ece4";if(["#0c383e","#042f2e"].includes(o))return "#c5f6fa";if(["#182a4d","#172554"].includes(o))return "#a5d8ff";if(["#2b1e4a","#1e1b4b","#3b0764"].includes(o))return "#d0bfff";if(["#381e3d"].includes(o))return "#eebefa";if(["#3e1828"].includes(o))return "#fcc2d7";if(["#2e1418","#4c0519","#450a0a"].includes(o))return "#ffc9c9";if(["#143823","#052e16"].includes(o))return "#b2f2bb";if(["#123d33"].includes(o))return "#96f2d7";if(["#3d2e14","#422006"].includes(o))return "#ffec99";if(["#3d2014","#431407"].includes(o))return "#ffd8a8"}return e}function ga(e){return e?e.startsWith("top")?{dx:0,dy:-1}:e.startsWith("bottom")?{dx:0,dy:1}:e.startsWith("left")?{dx:-1,dy:0}:e.startsWith("right")?{dx:1,dy:0}:{dx:0,dy:0}:{dx:0,dy:0}}function Br(e){let t={x:e.x,y:e.y},r={x:e.x+e.width,y:e.y+e.height},o=e.arrowType||"straight";if(o==="straight"){let i=Math.atan2(r.y-t.y,r.x-t.x);return {type:"straight",points:[t,r],departureAngle:i,arrivalAngle:i}}if(o==="curved"){let i=e.controlPoint;if(!i){let a=(t.x+r.x)/2,x=(t.y+r.y)/2,m=r.x-t.x,g=r.y-t.y,w=Math.hypot(m,g),_=Math.min(45,Math.max(15,w*.2)),S=w>0?-g/w*_:0,E=w>0?m/w*_:0;i={x:a+S,y:x+E};}let l=Math.atan2(i.y-t.y,i.x-t.x),u=Math.atan2(r.y-i.y,r.x-i.x);return {type:"curved",points:[t,r],controlPoint:i,departureAngle:l,arrivalAngle:u}}let c=r.x-t.x,d=r.y-t.y,h=e.controlPoint1,s=e.controlPoint2;if(!h||!s){let i=e.startBinding?.anchor,l=e.endBinding?.anchor,u=ga(i),a=ga(l);if(i&&l&&(u.dx!==0||u.dy!==0||a.dx!==0||a.dy!==0)){let x=Math.max(35,Math.hypot(c,d)*.35);h=h||{x:t.x+u.dx*x,y:t.y+u.dy*x},s=s||{x:r.x+a.dx*x,y:r.y+a.dy*x};}else h=h||{x:t.x+c*.4,y:t.y},s=s||{x:t.x+c*.6,y:r.y};}let n=Math.atan2(h.y-t.y,h.x-t.x),p=Math.atan2(r.y-s.y,r.x-s.x);return {type:"elbow",points:[t,r],controlPoint1:h,controlPoint2:s,departureAngle:n,arrivalAngle:p}}function ma(e){let t=Br(e),r={x:e.x,y:e.y},o={x:e.x+e.width,y:e.y+e.height};if(t.type==="curved"&&t.controlPoint){let c=t.controlPoint;return {x:(r.x+2*c.x+o.x)/4,y:(r.y+2*c.y+o.y)/4}}if(t.type==="elbow"&&t.points.length>2){let c=t.points,d=Math.floor(c.length/2);return c.length%2===1?c[d]:{x:(c[d-1].x+c[d].x)/2,y:(c[d-1].y+c[d].y)/2}}return {x:(r.x+o.x)/2,y:(r.y+o.y)/2}}function ya(e,t,r=12){if(t.length<2)return;if(t.length===2){e.moveTo(t[0].x,t[0].y),e.lineTo(t[1].x,t[1].y);return}e.moveTo(t[0].x,t[0].y);for(let c=1;c<t.length-1;c++){let d=t[c-1],h=t[c],s=t[c+1],n=Math.hypot(h.x-d.x,h.y-d.y),p=Math.hypot(s.x-h.x,s.y-h.y),i=Math.min(r,n/2,p/2);e.arcTo(h.x,h.y,s.x,s.y,i);}let o=t[t.length-1];e.lineTo(o.x,o.y);}var pn=new Map;function $t(e,t,r,o=1){if(t==="solid"||!t)return r;if(t==="transparent"||r==="transparent")return "transparent";let c=`${t}-${r}-${Math.round(o*10)/10}`;if(pn.has(c)){let i=pn.get(c);if(i)return i}if(typeof document>"u")return r;let h=t==="dots"?Math.max(8,Math.round(10*o)):Math.max(10,Math.round(14*o)),s=document.createElement("canvas");s.width=h,s.height=h;let n=s.getContext("2d");if(!n)return r;if(n.strokeStyle=r,n.fillStyle=r,n.lineWidth=Math.max(1.2,1.8*o),n.lineCap="round",t==="hachure")n.beginPath(),n.moveTo(0,h),n.lineTo(h,0),n.moveTo(-h/2,h/2),n.lineTo(h/2,-h/2),n.moveTo(h/2,h*1.5),n.lineTo(h*1.5,h/2),n.stroke();else if(t==="hachure-right")n.beginPath(),n.moveTo(0,0),n.lineTo(h,h),n.moveTo(h/2,-h/2),n.lineTo(h*1.5,h/2),n.moveTo(-h/2,h/2),n.lineTo(h/2,h*1.5),n.stroke();else if(t==="cross-hatch")n.beginPath(),n.moveTo(0,h),n.lineTo(h,0),n.moveTo(-h/2,h/2),n.lineTo(h/2,-h/2),n.moveTo(h/2,h*1.5),n.lineTo(h*1.5,h/2),n.moveTo(0,0),n.lineTo(h,h),n.moveTo(h/2,-h/2),n.lineTo(h*1.5,h/2),n.moveTo(-h/2,h/2),n.lineTo(h/2,h*1.5),n.stroke();else if(t==="dots"){let i=Math.max(.8,1.3*o);n.beginPath(),n.arc(h/2,h/2,i,0,Math.PI*2),n.fill();}let p=e.createPattern(s,"repeat");return p?(pn.set(c,p),p):r}function pr(e){let t=0;for(let r=0;r<e.length;r++)t=(t<<5)-t+e.charCodeAt(r),t|=0;return Math.abs(t)||12345}var er=class{state;constructor(t){this.state=t%2147483647,this.state<=0&&(this.state+=2147483646);}next(){return this.state=this.state*16807%2147483647,(this.state-1)/2147483646}offset(t){return (this.next()*2-1)*t}};function Pr(e,t,r,o,c,d,h={}){let s=h.roughness??1.5,n=h.bowing??1.8,p=h.overshoot??2.8,i=o-t,l=c-r,u=Math.hypot(i,l);if(u<1)return;let a=-l/u,x=i/u,m=d.offset(n*Math.min(6,s*1.4)),g=(t+o)/2+a*m,w=(r+c)/2+x*m,_=d.offset(p*s*.9),S=t-i/u*_,E=r-l/u*_,z=o+i/u*_,D=c+l/u*_;e.beginPath(),e.moveTo(S+d.offset(.8*s),E+d.offset(.8*s)),e.quadraticCurveTo(g,w,z+d.offset(.8*s),D+d.offset(.8*s)),e.stroke();let P=d.offset(n*Math.min(6,s*1.1)),I=(t+o)/2+a*P,b=(r+c)/2+x*P,f=d.offset(p*s*.7),v=t-i/u*f,C=r-l/u*f,M=o+i/u*f,R=c+l/u*f;e.beginPath(),e.moveTo(v+d.offset(1*s),C+d.offset(1*s)),e.quadraticCurveTo(I,b,M+d.offset(1*s),R+d.offset(1*s)),e.stroke();}function Tr(e,t,r,o=1.2){if(t.length<3)return;e.beginPath();let c=t[0];e.moveTo(c.x+r.offset(.8*o),c.y+r.offset(.8*o));for(let d=0;d<t.length;d++){let h=t[d],s=t[(d+1)%t.length],n=(h.x+s.x)/2+r.offset(1.2*o),p=(h.y+s.y)/2+r.offset(1.2*o),i=s.x+r.offset(.8*o),l=s.y+r.offset(.8*o);e.quadraticCurveTo(n,p,i,l);}e.closePath();}function Ir(e,t,r,o={}){for(let c=0;c<t.length;c++){let d=t[c],h=t[(c+1)%t.length];Pr(e,d.x,d.y,h.x,h.y,r,o);}}function ka(e,t,r,o,c,d,h=false,s=true,n={}){let p=new er(pr(d)),i=n.roughness??1.2,l=[{x:t,y:r},{x:t+o,y:r},{x:t+o,y:r+c},{x:t,y:r+c}];h&&(Tr(e,l,p,i),e.fill()),s&&Ir(e,l,p,n);}function wa(e,t,r,o,c,d,h,s=false,n=true,p={}){let i=new er(pr(h)),l=p.roughness??1.2,u=Math.min(d,Math.abs(o)/2,Math.abs(c)/2),a={x:t+u,y:r},x={x:t+o-u,y:r},m={x:t+o,y:r+u},g={x:t+o,y:r+c-u},w={x:t+o-u,y:r+c},_={x:t+u,y:r+c},S={x:t,y:r+c-u},E={x:t,y:r+u};if(s&&(e.beginPath(),e.moveTo(a.x,a.y),e.lineTo(x.x,x.y),e.arcTo(t+o,r,t+o,r+u,u),e.lineTo(g.x,g.y),e.arcTo(t+o,r+c,t+o-u,r+c,u),e.lineTo(_.x,_.y),e.arcTo(t,r+c,t,r+c-u,u),e.lineTo(E.x,E.y),e.arcTo(t,r,t+u,r,u),e.closePath(),e.fill()),n){Pr(e,a.x,a.y,x.x,x.y,i,p),Pr(e,m.x,m.y,g.x,g.y,i,p),Pr(e,w.x,w.y,_.x,_.y,i,p),Pr(e,S.x,S.y,E.x,E.y,i,p);let z=[{cx:t+o-u,cy:r+u,sa:-Math.PI/2,ea:0},{cx:t+o-u,cy:r+c-u,sa:0,ea:Math.PI/2},{cx:t+u,cy:r+c-u,sa:Math.PI/2,ea:Math.PI},{cx:t+u,cy:r+u,sa:Math.PI,ea:Math.PI*3/2}];for(let D of z)for(let P=0;P<2;P++){e.beginPath();let I=i.offset(.8*l);e.arc(D.cx,D.cy,Math.max(1,u+I),D.sa,D.ea),e.stroke();}}}function Fo(e,t,r,o,c,d,h=false,s=true,n={}){let p=new er(pr(d)),i=n.roughness??1.2;if(h){e.beginPath();let l=8;for(let u=0;u<l;u++){let a=u/l*Math.PI*2,x=1+p.offset(.04*i),m=t+Math.cos(a)*o*x,g=r+Math.sin(a)*c*x;u===0?e.moveTo(m,g):e.lineTo(m,g);}e.closePath(),e.fill();}if(s){e.beginPath();let l=12;for(let x=0;x<=l+1;x++){let m=x/l*Math.PI*2,g=p.offset(1.2*i),w=p.offset(1.2*i),_=t+Math.cos(m)*(o+g),S=r+Math.sin(m)*(c+w);x===0?e.moveTo(_,S):e.lineTo(_,S);}e.stroke(),e.beginPath();let u=10,a=p.offset(.3);for(let x=0;x<=u+1;x++){let m=a+x/u*Math.PI*2,g=p.offset(1*i),w=p.offset(1*i),_=t+Math.cos(m)*(o+g),S=r+Math.sin(m)*(c+w);x===0?e.moveTo(_,S):e.lineTo(_,S);}e.stroke();}}var va=new Map;function Xr(e,t,r){let o=[],c=t.split(`
|
|
2
|
-
`);for(let d of c){if(!d){o.push("");continue}let h=d.split(" "),s="";for(let n=0;n<h.length;n++){let p=h[n];if(e.measureText(p).width>r){s&&(o.push(s),s="");let u="";for(let a of p)e.measureText(u+a).width>r&&u?(o.push(u),u=a):u+=a;s=u;continue}let i=s?`${s} ${p}`:p;e.measureText(i).width>r&&s?(o.push(s),s=p):s=i;}s&&o.push(s);}return o}function Lr(e){let t=Math.max(1,e.rows||3),r=Math.max(1,e.cols||3),o=Math.max(60,Math.abs(e.width)),c=Math.max(40,Math.abs(e.height)),d=e.colWidths&&e.colWidths.length===r?[...e.colWidths]:Array.from({length:r},()=>o/r),h=e.rowHeights&&e.rowHeights.length===t?[...e.rowHeights]:Array.from({length:t},()=>c/t);d=d.map(x=>Math.max(30,isNaN(x)||x<=0?o/r:x)),h=h.map(x=>Math.max(22,isNaN(x)||x<=0?c/t:x));let s=[0];for(let x=0;x<r;x++)s.push(s[x]+d[x]);let n=[0];for(let x=0;x<t;x++)n.push(n[x]+h[x]);let p=s[r],i=n[t],l=Math.min(e.x,e.x+e.width),u=Math.min(e.y,e.y+e.height);return {rows:t,cols:r,colWidths:d,rowHeights:h,colOffsets:s,rowOffsets:n,totalWidth:p,totalHeight:i,getCellBounds:(x,m)=>{let g=Math.max(0,Math.min(t-1,x)),w=Math.max(0,Math.min(r-1,m));return {x:l+s[w],y:u+n[g],width:d[w],height:h[g]}}}}function Yo(e){let{x:t,y:r,width:o,height:c}=e,d=Math.abs(o),h=Math.abs(c),s=t+o/2,n=r+c/2;switch(e.type){case "table":{let p=Lr(e),i=e.editingCell?e.editingCell.row:0,l=e.editingCell?e.editingCell.col:0,u=p.getCellBounds(i,l),a=6,x=4,m=Math.max(16,u.width-a*2),g=Math.max(16,u.height-x*2);return {boxX:u.x+a,boxY:u.y+x,boxW:m,boxH:g,centerX:u.x+u.width/2,centerY:u.y+u.height/2}}case "rectangle":{let p=(e.edgeStyle||"round")==="round",i=p?Math.max(12,d*.08):8,l=p?Math.max(10,h*.08):6,u=Math.max(16,d-i*2),a=Math.max(16,h-l*2);return {boxX:t+i,boxY:r+l,boxW:u,boxH:a,centerX:s,centerY:n}}case "sticky":{let u=Math.max(16,d-28),a=Math.max(16,h-34);return {boxX:t+14,boxY:r+20,boxW:u,boxH:a,centerX:s,centerY:r+20+a/2}}case "ellipse":{let p=Math.max(16,d*.68),i=Math.max(16,h*.68);return {boxX:s-p/2,boxY:n-i/2,boxW:p,boxH:i,centerX:s,centerY:n}}case "diamond":{let p=Math.max(16,d*.52),i=Math.max(16,h*.5);return {boxX:s-p/2,boxY:n-i/2,boxW:p,boxH:i,centerX:s,centerY:n}}case "triangle":{let p=Math.max(16,d*.5),i=Math.max(16,h*.42),l=r+h*.62;return {boxX:s-p/2,boxY:l-i/2,boxW:p,boxH:i,centerX:s,centerY:l}}case "capsule":{let p=Math.min(d,h),i=d>=h,l=Math.max(16,i?d-p*.72:d-16),u=Math.max(16,i?h-16:h-p*.72);return {boxX:s-l/2,boxY:n-u/2,boxW:l,boxH:u,centerX:s,centerY:n}}case "trapezoid":{let p=Math.min(d*.2,40),i=Math.max(16,d-p*2.2),l=Math.max(16,h-18);return {boxX:s-i/2,boxY:n-l/2+2,boxW:i,boxH:l,centerX:s,centerY:n+2}}case "hexagon":{let p=Math.min(d*.22,45),i=Math.max(16,d-p*2.1),l=Math.max(16,h-16);return {boxX:s-i/2,boxY:n-l/2,boxW:i,boxH:l,centerX:s,centerY:n}}case "parallelogram":{let p=Math.min(36,d*.22),i=Math.max(16,d-p*2.2),l=Math.max(16,h-16);return {boxX:s-i/2,boxY:n-l/2,boxW:i,boxH:l,centerX:s,centerY:n}}case "cylinder":{let p=Math.min(
|
|
1
|
+
import Hn,{createContext,useMemo,useRef,useState,useCallback,useEffect,useImperativeHandle,forwardRef,useContext,useLayoutEffect,useSyncExternalStore}from'react';import {IconTrash,IconLogout,IconCheck,IconCopy,IconMinus,IconPlus,IconMaximize,IconArrowLeft,IconPencilMinus,IconChevronDown,IconDeviceFloppy,IconArrowBackUp,IconArrowForwardUp,IconHandGrab,IconDots,IconGridPattern,IconLayoutSidebar,IconPlayerPlay,IconCurrentLocation,IconEraser,IconSettingsBolt,IconBracketsContain,IconDownload,IconSquare,IconCircle,IconPointer,IconNote,IconArrowUpRight,IconLine,IconPencil,IconTypography,IconPhoto,IconLock,IconLockOpen,IconLayersSubtract,IconSparkles,IconCloud,IconDatabase,IconTriangle,IconChevronLeft,IconChevronRight,IconAlignLeft,IconAlignCenter,IconAlignRight,IconAspectRatio,IconFlame,IconPin,IconX,IconBook,IconKeyboard,IconCompass,IconChevronUp,IconFileTypePdf,IconFileTypePng,IconFileCode,IconLayout,IconSun,IconMoon,IconFileTypeSvg,IconUpload,IconSlideshow,IconList,IconMinimize,IconSearch,IconFocusCentered,IconSelect,IconEdit,IconDeviceDesktop,IconDeviceMobile,IconAdjustments,IconArrowRight,IconCode}from'@tabler/icons-react';import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {rgb,PDFDocument}from'pdf-lib';import {BringToFront}from'lucide-react';var Ro=createContext({theme:"system",resolvedTheme:"light",isDark:false,panelVariant:"classic"});function po(){return useContext(Ro)}function Hi(){if(typeof window>"u"||typeof document>"u")return false;let e=document.documentElement,t=document.body;return e.classList.contains("dark")||t?.classList.contains("dark")?true:e.classList.contains("light")||t?.classList.contains("light")?false:e.getAttribute("data-theme")==="dark"||t?.getAttribute("data-theme")==="dark"?true:e.getAttribute("data-theme")==="light"||t?.getAttribute("data-theme")==="light"?false:window.matchMedia("(prefers-color-scheme: dark)").matches}function nr(e){let t=useContext(Ro),r=e!==void 0?e:t.theme,[o,c]=useState(()=>r==="dark"?"dark":"light");return useEffect(()=>{if(typeof window>"u"||typeof document>"u")return;if(r==="dark"){c("dark");return}if(r==="light"){c("light");return}let d=()=>{c(Hi()?"dark":"light");};d();let h=new MutationObserver(()=>{d();});h.observe(document.documentElement,{attributes:true,attributeFilter:["class","data-theme"]}),document.body&&h.observe(document.body,{attributes:true,attributeFilter:["class","data-theme"]});let s=window.matchMedia("(prefers-color-scheme: dark)"),n=()=>{d();};return s.addEventListener("change",n),()=>{h.disconnect(),s.removeEventListener("change",n);}},[r]),{theme:r,resolvedTheme:o,isDark:o==="dark",panelVariant:t.panelVariant}}var Xi=()=>()=>{};function ho(){return useSyncExternalStore(Xi,()=>true,()=>false)}var fo=[{key:"q",name:"Transparent",stroke:{light:"transparent",dark:"transparent"},fill:{light:"transparent",dark:"transparent"}},{key:"w",name:"White",stroke:{light:"#ffffff",dark:"#ffffff"},fill:{light:"#ffffff",dark:"#ffffff"}},{key:"e",name:"Grey",stroke:{light:"#343a40",dark:"#ced4da"},fill:{light:"#e9ecef",dark:"#2e3238"}},{key:"r",name:"Black / Off-white",stroke:{light:"#1e1e24",dark:"#f8f9fa"},fill:{light:"#1e1e24",dark:"#1e1e24"}},{key:"t",name:"Warm Taupe",stroke:{light:"#865e3c",dark:"#d8c2b0"},fill:{light:"#f4ece4",dark:"#362b28"}},{key:"a",name:"Teal Cyan",stroke:{light:"#0c8599",dark:"#22b8cf"},fill:{light:"#c5f6fa",dark:"#0c383e"}},{key:"s",name:"Sky Blue",stroke:{light:"#1971c2",dark:"#4dabf7"},fill:{light:"#a5d8ff",dark:"#182a4d"}},{key:"d",name:"Royal Purple",stroke:{light:"#6741d9",dark:"#b197fc"},fill:{light:"#d0bfff",dark:"#2b1e4a"}},{key:"f",name:"Violet Magenta",stroke:{light:"#ae3ec9",dark:"#e599f7"},fill:{light:"#eebefa",dark:"#381e3d"}},{key:"g",name:"Crimson Berry",stroke:{light:"#c2255c",dark:"#f783ac"},fill:{light:"#fcc2d7",dark:"#3e1828"}},{key:"z",name:"Green",stroke:{light:"#2f9e44",dark:"#51cf66"},fill:{light:"#b2f2bb",dark:"#143823"}},{key:"x",name:"Mint Emerald",stroke:{light:"#087f5b",dark:"#38d9a9"},fill:{light:"#96f2d7",dark:"#123d33"}},{key:"c",name:"Amber Yellow",stroke:{light:"#f59f00",dark:"#ffd43b"},fill:{light:"#ffec99",dark:"#3d2e14"}},{key:"v",name:"Vivid Orange",stroke:{light:"#f76707",dark:"#ffa94d"},fill:{light:"#ffd8a8",dark:"#3d2014"}},{key:"b",name:"Coral Red",stroke:{light:"#e03131",dark:"#ff8787"},fill:{light:"#ffc9c9",dark:"#2e1418"}}];var ca=[{name:"Crimson Red",hex:"#ef4444",glow:"rgba(239, 68, 68, 0.7)"},{name:"Emerald Green",hex:"#10b981",glow:"rgba(16, 185, 129, 0.7)"},{name:"Electric Blue",hex:"#3b82f6",glow:"rgba(59, 130, 246, 0.7)"},{name:"Neon Purple",hex:"#a855f7",glow:"rgba(168, 85, 247, 0.7)"},{name:"Radiant Gold",hex:"#f59e0b",glow:"rgba(245, 158, 11, 0.7)"}],Do=fo.map(e=>({name:e.name,hex:e.stroke.light,shortcut:e.key}));fo.map(e=>({name:e.name,hex:e.fill.light}));var ia={"#fef08a":{bg:"#fef08a",backSheetBg:"#fefce8",backSheetBorder:"#fde047",mainBorder:"rgba(234, 179, 8, 0.45)",tapeBg:"rgba(254, 249, 195, 0.95)",tapeBorder:"rgba(202, 138, 4, 0.35)",text:"#713f12",sheen:"rgba(255, 255, 255, 0.8)"},"#fde68a":{bg:"#fde68a",backSheetBg:"#fef9d9",backSheetBorder:"#fcd34d",mainBorder:"rgba(245, 158, 11, 0.4)",tapeBg:"rgba(255, 250, 224, 0.95)",tapeBorder:"rgba(217, 119, 6, 0.35)",text:"#78350f",sheen:"rgba(255, 255, 255, 0.8)"},"#bbf7d0":{bg:"#bbf7d0",backSheetBg:"#f0fdf4",backSheetBorder:"#86efac",mainBorder:"rgba(74, 222, 128, 0.45)",tapeBg:"rgba(240, 253, 244, 0.95)",tapeBorder:"rgba(22, 163, 74, 0.35)",text:"#14532d",sheen:"rgba(255, 255, 255, 0.8)"},"#bae6fd":{bg:"#bae6fd",backSheetBg:"#f0f9ff",backSheetBorder:"#7dd3fc",mainBorder:"rgba(56, 189, 248, 0.45)",tapeBg:"rgba(240, 249, 255, 0.95)",tapeBorder:"rgba(2, 132, 199, 0.35)",text:"#0c4a6e",sheen:"rgba(255, 255, 255, 0.8)"},"#fed7aa":{bg:"#fed7aa",backSheetBg:"#fff7ed",backSheetBorder:"#fdba74",mainBorder:"rgba(251, 146, 60, 0.45)",tapeBg:"rgba(255, 247, 237, 0.95)",tapeBorder:"rgba(234, 88, 12, 0.35)",text:"#7c2d12",sheen:"rgba(255, 255, 255, 0.8)"},"#e9d5ff":{bg:"#e9d5ff",backSheetBg:"#faf5ff",backSheetBorder:"#d8b4fe",mainBorder:"rgba(192, 132, 252, 0.45)",tapeBg:"rgba(250, 245, 255, 0.95)",tapeBorder:"rgba(147, 51, 234, 0.35)",text:"#581c87",sheen:"rgba(255, 255, 255, 0.8)"},"#fecdd3":{bg:"#fecdd3",backSheetBg:"#fff1f2",backSheetBorder:"#fda4af",mainBorder:"rgba(251, 113, 133, 0.45)",tapeBg:"rgba(255, 241, 242, 0.95)",tapeBorder:"rgba(225, 29, 72, 0.35)",text:"#881337",sheen:"rgba(255, 255, 255, 0.8)"}},sa={"#fef08a":{bg:"#2b230d",backSheetBg:"#1c1608",backSheetBorder:"#4a3c18",mainBorder:"rgba(250, 204, 21, 0.5)",tapeBg:"rgba(254, 240, 138, 0.18)",tapeBorder:"rgba(250, 204, 21, 0.45)",text:"#fef08a",sheen:"rgba(254, 240, 138, 0.15)"},"#fde68a":{bg:"#2b230d",backSheetBg:"#1c1608",backSheetBorder:"#4a3c18",mainBorder:"rgba(250, 204, 21, 0.5)",tapeBg:"rgba(254, 240, 138, 0.18)",tapeBorder:"rgba(250, 204, 21, 0.45)",text:"#fde68a",sheen:"rgba(254, 240, 138, 0.15)"},"#bbf7d0":{bg:"#10281b",backSheetBg:"#091b11",backSheetBorder:"#1e4730",mainBorder:"rgba(74, 222, 128, 0.5)",tapeBg:"rgba(187, 247, 208, 0.18)",tapeBorder:"rgba(74, 222, 128, 0.45)",text:"#bbf7d0",sheen:"rgba(187, 247, 208, 0.15)"},"#bae6fd":{bg:"#102436",backSheetBg:"#091724",backSheetBorder:"#1d4160",mainBorder:"rgba(56, 189, 248, 0.5)",tapeBg:"rgba(186, 230, 253, 0.18)",tapeBorder:"rgba(56, 189, 248, 0.45)",text:"#bae6fd",sheen:"rgba(186, 230, 253, 0.15)"},"#fed7aa":{bg:"#321d10",backSheetBg:"#201107",backSheetBorder:"#56321c",mainBorder:"rgba(251, 146, 60, 0.5)",tapeBg:"rgba(254, 215, 170, 0.18)",tapeBorder:"rgba(251, 146, 60, 0.45)",text:"#fed7aa",sheen:"rgba(254, 215, 170, 0.15)"},"#e9d5ff":{bg:"#271638",backSheetBg:"#190d24",backSheetBorder:"#462865",mainBorder:"rgba(192, 132, 252, 0.5)",tapeBg:"rgba(233, 213, 255, 0.18)",tapeBorder:"rgba(192, 132, 252, 0.45)",text:"#e9d5ff",sheen:"rgba(233, 213, 255, 0.15)"},"#fecdd3":{bg:"#321319",backSheetBg:"#210b10",backSheetBorder:"#56222b",mainBorder:"rgba(251, 113, 133, 0.5)",tapeBg:"rgba(254, 205, 211, 0.18)",tapeBorder:"rgba(251, 113, 133, 0.45)",text:"#fecdd3",sheen:"rgba(254, 205, 211, 0.15)"}};function la(e){let t=e.replace("#","").trim();if(t.length===3&&(t=t[0]+t[0]+t[1]+t[1]+t[2]+t[2]),t.length===6){let r=parseInt(t,16);if(!isNaN(r))return {r:r>>16&255,g:r>>8&255,b:r&255}}return {r:254,g:240,b:138}}function da(e,t,r){e/=255,t/=255,r/=255;let o=Math.max(e,t,r),c=Math.min(e,t,r),d=0,h=0,s=(o+c)/2;if(o!==c){let n=o-c;switch(h=s>.5?n/(2-o-c):n/(o+c),o){case e:d=(t-r)/n+(t<r?6:0);break;case t:d=(r-e)/n+2;break;case r:d=(e-t)/n+4;break}d/=6;}return {h:Math.round(d*360),s:Math.round(h*100),l:Math.round(s*100)}}function Mr(e,t=false){let r=(e||"#fde68a").toLowerCase();if(t){if(sa[r])return sa[r];let{r:p,g:i,b:l}=la(r),{h:u,s:a}=da(p,i,l),x=Math.max(35,a);return {bg:`hsl(${u}, ${Math.round(x*.45)}%, 16%)`,backSheetBg:`hsl(${u}, ${Math.round(x*.5)}%, 10%)`,backSheetBorder:`hsl(${u}, ${Math.round(x*.6)}%, 28%)`,mainBorder:`hsla(${u}, ${Math.round(x*.9)}%, 65%, 0.5)`,tapeBg:`hsla(${u}, ${Math.round(x*.8)}%, 80%, 0.18)`,tapeBorder:`hsla(${u}, ${Math.round(x*.9)}%, 70%, 0.45)`,text:`hsl(${u}, ${Math.round(x*.95)}%, 88%)`,sheen:`hsla(${u}, ${Math.round(x*.8)}%, 85%, 0.15)`}}if(ia[r])return ia[r];let{r:o,g:c,b:d}=la(r),{h,s}=da(o,c,d),n=Math.max(30,s);return {bg:e||"#fde68a",backSheetBg:`hsl(${h}, ${Math.round(n*.75)}%, 94%)`,backSheetBorder:`hsl(${h}, ${Math.round(n*.85)}%, 72%)`,mainBorder:`hsl(${h}, ${Math.round(n*.95)}%, 42%)`,tapeBg:`hsla(${h}, ${Math.round(n*.6)}%, 96%, 0.95)`,tapeBorder:`hsla(${h}, ${Math.round(n*.9)}%, 42%, 0.38)`,text:`hsl(${h}, ${Math.round(n*.95)}%, 16%)`,sheen:"rgba(255, 255, 255, 0.8)"}}var pa=[{name:"Canary Yellow",bg:"#fde68a",border:"#facc15",text:"#78350f"},{name:"Mint Green",bg:"#bbf7d0",border:"#86efac",text:"#14532d"},{name:"Sky Blue",bg:"#bae6fd",border:"#7dd3fc",text:"#0c4a6e"},{name:"Soft Coral",bg:"#fed7aa",border:"#fdba74",text:"#7c2d12"},{name:"Lavender",bg:"#e9d5ff",border:"#d8b4fe",text:"#581c87"},{name:"Soft Rose",bg:"#fecdd3",border:"#fda4af",text:"#881337"}],ha=[{value:"transparent",label:"Empty",icon:"square"},{value:"solid",label:"Solid",icon:"square-filled"},{value:"hachure",label:"Slash (\\)",icon:"slash"},{value:"hachure-right",label:"Backslash (/)",icon:"backslash"},{value:"cross-hatch",label:"Grid Net",icon:"grid"},{value:"dots",label:"Dots",icon:"dots"}],Wo=[{label:"Fine",value:1.8},{label:"Medium",value:3.2},{label:"Bold",value:5.2}],bo=[{value:"none",label:"None",shortcut:"q",category:"standard"},{value:"arrow",label:"Open Arrow",shortcut:"w",category:"standard"},{value:"triangle",label:"Triangle",shortcut:"e",category:"standard"},{value:"barbed",label:"Barbed Arrow",shortcut:"r",category:"standard"},{value:"dot",label:"Filled Dot",shortcut:"a",category:"more"},{value:"circle",label:"Hollow Circle",shortcut:"s",category:"more"},{value:"diamond",label:"Filled Diamond",shortcut:"d",category:"more"},{value:"diamond_outline",label:"Hollow Diamond",shortcut:"f",category:"more"},{value:"bar",label:"Tee / Bar",shortcut:"z",category:"more"},{value:"crowfoot_one",label:"One",shortcut:"x",category:"cardinality"},{value:"crowfoot_many",label:"Many",shortcut:"c",category:"cardinality"},{value:"crowfoot_one_many",label:"One or Many",shortcut:"v",category:"cardinality"},{value:"crowfoot_strictly_one",label:"Strictly One",shortcut:"",category:"cardinality"},{value:"crowfoot_zero_one",label:"Zero or One",shortcut:"",category:"cardinality"},{value:"crowfoot_zero_many",label:"Zero or Many",shortcut:"",category:"cardinality"}];function cr(e,t="none"){return e===true?"arrow":e===false||e===null||e===void 0?t:e}var uo=[{hex:"#ffffff",name:"Pure White"},{hex:"#f0f4f8",name:"Sky Slate"},{hex:"#fffbeb",name:"Sand Cream"},{hex:"#faf5f0",name:"Blush Peach"},{hex:"#f0fdf4",name:"Mint Mist"}],xo=[{hex:"#121212",name:"Pure Dark"},{hex:"#1a1d24",name:"Midnight Slate"},{hex:"#1f1e1b",name:"Warm Olive"},{hex:"#201a1a",name:"Plum Dark"},{hex:"#141f18",name:"Forest Dark"}];function ua(e,t){if(!e||e==="default")return t?"#1a1d24":"#f0f4f8";let r=e.toLowerCase(),o=uo.findIndex(d=>d.hex.toLowerCase()===r);if(o!==-1)return t?xo[o].hex:uo[o].hex;let c=xo.findIndex(d=>d.hex.toLowerCase()===r);return c!==-1?t?xo[c].hex:uo[c].hex:e}var xa=[{value:"solid",label:"Solid"},{value:"dashed",label:"Dashed"},{value:"dotted",label:"Dotted"}],gr=[{value:"fuzzy",label:"Handwritten",cssFont:"'Fuzzy Bubbles', cursive, sans-serif"},{value:"comic",label:"Playful",cssFont:"'Comic Neue', cursive, sans-serif"},{value:"patrick",label:"Calm",cssFont:"'Patrick Hand SC', sans-serif"},{value:"sans",label:"Formal",cssFont:"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"},{value:"mono",label:"Code",cssFont:"'JetBrains Mono', 'Geist Mono', 'Courier New', Consolas, monospace"}];function ar(e){return e==="fuzzy"||e==="edusa"||e==="playpen"||e==="caveat"?gr[0]:e==="comic"||e==="handlee"?gr[1]:e==="serif"||e==="patrick"?gr[2]:e==="sans"?gr[3]:e==="mono"?gr[4]:gr.find(t=>t.value===e)||gr[0]}var fa=[{label:"S",value:16,title:"Small (S - 16px)"},{label:"M",value:22,title:"Medium (M - 22px)"},{label:"L",value:28,title:"Large (L - 28px)"},{label:"XL",value:36,title:"Extra Large (XL - 36px)"}];var cn={type:"rectangle",strokeColor:"#1e1e24",strokeWidth:2.5,strokeStyle:"solid",fillColor:"#ffc9c9",fillStyle:"hachure",opacity:1,zIndex:1,edgeStyle:"round",roughStyle:"clean",roughness:0,fontSize:20,fontFamily:"fuzzy",textAlign:"center",stickyColor:"#fef08a",startArrowhead:"none",endArrowhead:"arrow"};function Et(e,t){if(!e||e==="transparent")return e||"transparent";let r=e.trim().toLowerCase();if(t){if(["#000000","#020617","#0f172a","#111827","#18181b","#1e1e24","#1e293b","#27272a","#334155","#343a40","#3f3f46","#475569","#52525b","#1f2937","#242731"].includes(r)||["#e2e8f0","#e5e7eb","#cbd5e1","#ced4da"].includes(r))return "#f8f9fa";if(["#64748b","#71717a","#78716c","#868e96"].includes(r))return "#ced4da";if(["#94a3b8"].includes(r))return "#e2e8f0";if(["#713f12","#865e3c","#a89984","#78350f","#451a03"].includes(r))return "#ffd43b";if(["#042f2e","#134e4a","#115e59","#0f766e","#0d9488","#0891b2","#0c8599","#14b8a6","#2dd4bf","#164e63","#155e75","#0e7490"].includes(r))return "#22b8cf";if(["#172554","#1e3a8a","#1e40af","#1d4ed8","#2563eb","#1971c2","#0b6eff","#3b82f6","#182a4d","#0c4a6e","#075985","#0369a1","#0284c7"].includes(r))return "#4dabf7";if(["#3b0764","#581c87","#6b21a8","#7e22ce","#9333ea","#a855f7","#2e1065","#4c1d95","#5b21b6","#6741d9","#6965db","#7c3aed","#2b1e4a","#1e1b4b","#312e81","#3730a3","#4338ca","#4f46e5"].includes(r))return "#b197fc";if(["#ae3ec9","#9c36b5","#be185d","#381e3d","#86198f","#701a75"].includes(r))return "#e599f7";if(["#4c0519","#881337","#9f1239","#c2255c","#db2777","#e11d48","#f43f5e","#f472b6","#3e1828","#831843","#9d174d"].includes(r))return "#f783ac";if(["#052e16","#14532d","#166534","#15803d","#16a34a","#2f9e44","#22c55e","#143823"].includes(r))return "#51cf66";if(["#064e3b","#065f46","#047857","#087f5b","#059669","#10b981","#123d33","#022c22"].includes(r))return "#38d9a9";if(["#713f12","#854d0e","#a16207","#ca8a04","#eab308","#f59f00","#d97706","#b45309","#3d2e14","#78350f","#451a03"].includes(r))return "#ffd43b";if(["#451a03","#7c2d12","#9a3412","#c2410c","#ea580c","#f76707","#f97316","#3d2014"].includes(r))return "#ffa94d";if(["#450a0a","#7f1d1d","#991b1b","#b91c1c","#dc2626","#e03131","#ef4444","#2e1418"].includes(r))return "#ff8787";if(["#ffffff","#fff"].includes(r))return "#ffffff"}else {if(["#f8f9fa","#f8fafc","#f3f4f6","#ffffff","#fff"].includes(r))return "#111827";if(["#e2e8f0","#e5e7eb","#cbd5e1","#ced4da"].includes(r))return "#475569";if(["#94a3b8"].includes(r))return "#64748b";if(["#d8c2b0"].includes(r))return "#865e3c";if(["#22b8cf","#5eead4","#2dd4bf"].includes(r))return "#0c8599";if(["#4dabf7","#60a5fa","#74c0fc"].includes(r))return "#1971c2";if(["#b197fc","#a5b4fc","#c4b5fd"].includes(r))return "#6741d9";if(["#e599f7","#c084fc"].includes(r))return "#ae3ec9";if(["#f783ac","#fb7185","#f472b6"].includes(r))return "#c2255c";if(["#51cf66","#4ade80"].includes(r))return "#2f9e44";if(["#38d9a9","#34d399"].includes(r))return "#087f5b";if(["#ffd43b","#fde047","#facc15"].includes(r))return "#f59f00";if(["#ffa94d","#fb923c"].includes(r))return "#f76707";if(["#ff8787","#f87171"].includes(r))return "#e03131"}return e}function Nr(e,t,r){if(!e||e==="transparent")return "transparent";let o=e.trim().toLowerCase();if(["#ffffff","#fff"].includes(o))return "#ffffff";if(["#000000","#1e1e24","#111827","#121212","#18181b"].includes(o))return o==="#000000"?"#000000":"#1e1e24";if(["#f8f9fa","#f8fafc","#f1f5f9","#f3f4f6"].includes(o))return "#f8f9fa";if(r){if(["#e5e7eb","#e2e8f0"].includes(o)||["#1f2937","#242731","#16171b","#1e2029","#0f172a","#1e293b","#374151"].includes(o))return "#242731";if(["#e9ecef","#dee2e6","#ced4da","#2e3238","#212529","#343a40"].includes(o))return "#2e3238";if(["#f4ece4","#f5f0eb","#a89984","#e2d9cc","#362b28"].includes(o))return "#362b28";if(["#c5f6fa","#ccfbf1","#99f6e4","#5eead4","#2dd4bf","#14b8a6","#0d9488","#cffafe","#0c383e"].includes(o))return "#0c383e";if(["#a5d8ff","#d0ebff","#e0f2fe","#bae6fd","#dbeafe","#bfdbfe","#93c5fd","#60a5fa","#182a4d"].includes(o))return "#182a4d";if(["#d0bfff","#e5dbff","#ede9fe","#f3e8ff","#e0e7ff","#c7d2fe","#a5b4fc","#818cf8","#1e1b4b","#2b1e4a"].includes(o))return "#1e1b4b";if(["#eebefa","#f5d0fe","#e9d5ff","#d8b4fe","#c084fc","#381e3d"].includes(o))return "#381e3d";if(["#fcc2d7","#f8d7da","#3e1828"].includes(o))return "#3e1828";if(["#ffc9c9","#ffe3e3","#ffe4e6","#fecdd3","#fce7f3","#fbcfe8","#fda4af","#fb7185","#2e1418"].includes(o))return "#2e1418";if(["#b2f2bb","#d3f9d8","#dcfce7","#bbf7d0","#d1fae5","#a7f3d0","#143823"].includes(o))return "#143823";if(["#96f2d7","#c3fae8","#123d33"].includes(o))return "#123d33";if(["#ffec99","#fff3bf","#fef9c3","#fef3c7","#fffbeb","#fefce8","#fde68a","#fcd34d","#fef08a","#fde047","#ffd43b","#facc15","#eab308","#3d2e14","#2d200e","#261a0b","#241a0c"].includes(o))return "#241a0c";if(["#ffd8a8","#ffe8cc","#ffedd5","#fed7aa","#3d2014"].includes(o))return "#3d2014";if(["#fee2e2","#fca5a5","#f87171","#2e1418"].includes(o))return "#2e1418"}else {if(["#1f2937","#242731","#16171b","#1e2029","#0f172a","#1e293b","#374151"].includes(o))return "#ffffff";if(["#ced4da","#e9ecef","#dee2e6","#e2e8f0","#cbd5e1","#2e3238","#212529","#343a40"].includes(o))return "#e9ecef";if(["#362b28"].includes(o))return "#f4ece4";if(["#0c383e","#042f2e"].includes(o))return "#c5f6fa";if(["#182a4d","#172554"].includes(o))return "#a5d8ff";if(["#2b1e4a","#1e1b4b","#3b0764"].includes(o))return "#d0bfff";if(["#381e3d"].includes(o))return "#eebefa";if(["#3e1828"].includes(o))return "#fcc2d7";if(["#2e1418","#4c0519","#450a0a"].includes(o))return "#ffc9c9";if(["#143823","#052e16"].includes(o))return "#b2f2bb";if(["#123d33"].includes(o))return "#96f2d7";if(["#3d2e14","#422006","#2d200e","#261a0b","#241a0c"].includes(o))return "#ffec99";if(["#3d2014","#431407"].includes(o))return "#ffd8a8"}return e}function ba(e){return e?e.startsWith("top")?{dx:0,dy:-1}:e.startsWith("bottom")?{dx:0,dy:1}:e.startsWith("left")?{dx:-1,dy:0}:e.startsWith("right")?{dx:1,dy:0}:{dx:0,dy:0}:{dx:0,dy:0}}function Br(e){let t={x:e.x,y:e.y},r={x:e.x+e.width,y:e.y+e.height},o=e.arrowType||"straight";if(o==="straight"){let i=Math.atan2(r.y-t.y,r.x-t.x);return {type:"straight",points:[t,r],departureAngle:i,arrivalAngle:i}}if(o==="curved"){let i=e.controlPoint;if(!i){let a=(t.x+r.x)/2,x=(t.y+r.y)/2,m=r.x-t.x,g=r.y-t.y,w=Math.hypot(m,g),_=Math.min(45,Math.max(15,w*.2)),S=w>0?-g/w*_:0,E=w>0?m/w*_:0;i={x:a+S,y:x+E};}let l=Math.atan2(i.y-t.y,i.x-t.x),u=Math.atan2(r.y-i.y,r.x-i.x);return {type:"curved",points:[t,r],controlPoint:i,departureAngle:l,arrivalAngle:u}}let c=r.x-t.x,d=r.y-t.y,h=e.controlPoint1,s=e.controlPoint2;if(!h||!s){let i=e.startBinding?.anchor,l=e.endBinding?.anchor,u=ba(i),a=ba(l);if(i&&l&&(u.dx!==0||u.dy!==0||a.dx!==0||a.dy!==0)){let x=Math.max(35,Math.hypot(c,d)*.35);h=h||{x:t.x+u.dx*x,y:t.y+u.dy*x},s=s||{x:r.x+a.dx*x,y:r.y+a.dy*x};}else h=h||{x:t.x+c*.4,y:t.y},s=s||{x:t.x+c*.6,y:r.y};}let n=Math.atan2(h.y-t.y,h.x-t.x),p=Math.atan2(r.y-s.y,r.x-s.x);return {type:"elbow",points:[t,r],controlPoint1:h,controlPoint2:s,departureAngle:n,arrivalAngle:p}}function ga(e){let t=Br(e),r={x:e.x,y:e.y},o={x:e.x+e.width,y:e.y+e.height};if(t.type==="curved"&&t.controlPoint){let c=t.controlPoint;return {x:(r.x+2*c.x+o.x)/4,y:(r.y+2*c.y+o.y)/4}}if(t.type==="elbow"&&t.points.length>2){let c=t.points,d=Math.floor(c.length/2);return c.length%2===1?c[d]:{x:(c[d-1].x+c[d].x)/2,y:(c[d-1].y+c[d].y)/2}}return {x:(r.x+o.x)/2,y:(r.y+o.y)/2}}function ma(e,t,r=12){if(t.length<2)return;if(t.length===2){e.moveTo(t[0].x,t[0].y),e.lineTo(t[1].x,t[1].y);return}e.moveTo(t[0].x,t[0].y);for(let c=1;c<t.length-1;c++){let d=t[c-1],h=t[c],s=t[c+1],n=Math.hypot(h.x-d.x,h.y-d.y),p=Math.hypot(s.x-h.x,s.y-h.y),i=Math.min(r,n/2,p/2);e.arcTo(h.x,h.y,s.x,s.y,i);}let o=t[t.length-1];e.lineTo(o.x,o.y);}var pn=new Map;function Oi(e){if(!e)return false;let t=e.trim().toLowerCase();if(["#fffbeb","#fef3c7","#fde68a","#fcd34d","#fbbf24","#f59e0b","#d97706","#b45309","#92400e","#78350f","#451a03","#fefce8","#fef9c3","#fef08a","#fde047","#facc15","#eab308","#ca8a04","#a16207","#854d0e","#713f12","#fff9db","#fff3bf","#ffec99","#ffe066","#ffd43b","#fcc419","#fab005","#f59f00","#3d2e14","#2d200e","#261a0b","#241a0c","#22170a","#422006"].includes(t))return true;if(t.startsWith("#")&&(t.length===7||t.length===4)){let o=t.length===7?parseInt(t.slice(1,3),16):parseInt(t[1]+t[1],16),c=t.length===7?parseInt(t.slice(3,5),16):parseInt(t[2]+t[2],16),d=t.length===7?parseInt(t.slice(5,7),16):parseInt(t[3]+t[3],16);if(o>30&&c>20&&o>=c*.75&&c>=d*1.25)return true}return false}function $t(e,t,r,o=1){if(t==="solid"||!t)return r;if(t==="transparent"||r==="transparent")return "transparent";let c=`${t}-${r}-${Math.round(o*10)/10}`;if(pn.has(c)){let l=pn.get(c);if(l)return l}if(typeof document>"u")return r;let h=t==="dots"?Math.max(8,Math.round(10*o)):Math.max(10,Math.round(14*o)),s=document.createElement("canvas");s.width=h,s.height=h;let n=s.getContext("2d");if(!n)return r;if(n.strokeStyle=r,n.fillStyle=r,Oi(r)?(n.globalAlpha=.48,n.lineWidth=Math.max(1,1.35*o)):(n.globalAlpha=.85,n.lineWidth=Math.max(1.2,1.8*o)),n.lineCap="round",t==="hachure")n.beginPath(),n.moveTo(0,h),n.lineTo(h,0),n.moveTo(-h/2,h/2),n.lineTo(h/2,-h/2),n.moveTo(h/2,h*1.5),n.lineTo(h*1.5,h/2),n.stroke();else if(t==="hachure-right")n.beginPath(),n.moveTo(0,0),n.lineTo(h,h),n.moveTo(h/2,-h/2),n.lineTo(h*1.5,h/2),n.moveTo(-h/2,h/2),n.lineTo(h/2,h*1.5),n.stroke();else if(t==="cross-hatch")n.beginPath(),n.moveTo(0,h),n.lineTo(h,0),n.moveTo(-h/2,h/2),n.lineTo(h/2,-h/2),n.moveTo(h/2,h*1.5),n.lineTo(h*1.5,h/2),n.moveTo(0,0),n.lineTo(h,h),n.moveTo(h/2,-h/2),n.lineTo(h*1.5,h/2),n.moveTo(-h/2,h/2),n.lineTo(h/2,h*1.5),n.stroke();else if(t==="dots"){let l=Math.max(.8,1.3*o);n.beginPath(),n.arc(h/2,h/2,l,0,Math.PI*2),n.fill();}let i=e.createPattern(s,"repeat");return i?(pn.set(c,i),i):r}function pr(e){let t=0;for(let r=0;r<e.length;r++)t=(t<<5)-t+e.charCodeAt(r),t|=0;return Math.abs(t)||12345}var er=class{state;constructor(t){this.state=t%2147483647,this.state<=0&&(this.state+=2147483646);}next(){return this.state=this.state*16807%2147483647,(this.state-1)/2147483646}offset(t){return (this.next()*2-1)*t}};function Pr(e,t,r,o,c,d,h={}){let s=h.roughness??1.5,n=h.bowing??1.8,p=h.overshoot??2.8,i=o-t,l=c-r,u=Math.hypot(i,l);if(u<1)return;let a=-l/u,x=i/u,m=d.offset(n*Math.min(6,s*1.4)),g=(t+o)/2+a*m,w=(r+c)/2+x*m,_=d.offset(p*s*.9),S=t-i/u*_,E=r-l/u*_,z=o+i/u*_,D=c+l/u*_;e.beginPath(),e.moveTo(S+d.offset(.8*s),E+d.offset(.8*s)),e.quadraticCurveTo(g,w,z+d.offset(.8*s),D+d.offset(.8*s)),e.stroke();let P=d.offset(n*Math.min(6,s*1.1)),I=(t+o)/2+a*P,b=(r+c)/2+x*P,f=d.offset(p*s*.7),v=t-i/u*f,C=r-l/u*f,M=o+i/u*f,R=c+l/u*f;e.beginPath(),e.moveTo(v+d.offset(1*s),C+d.offset(1*s)),e.quadraticCurveTo(I,b,M+d.offset(1*s),R+d.offset(1*s)),e.stroke();}function Tr(e,t,r,o=1.2){if(t.length<3)return;e.beginPath();let c=t[0];e.moveTo(c.x+r.offset(.8*o),c.y+r.offset(.8*o));for(let d=0;d<t.length;d++){let h=t[d],s=t[(d+1)%t.length],n=(h.x+s.x)/2+r.offset(1.2*o),p=(h.y+s.y)/2+r.offset(1.2*o),i=s.x+r.offset(.8*o),l=s.y+r.offset(.8*o);e.quadraticCurveTo(n,p,i,l);}e.closePath();}function Ir(e,t,r,o={}){for(let c=0;c<t.length;c++){let d=t[c],h=t[(c+1)%t.length];Pr(e,d.x,d.y,h.x,h.y,r,o);}}function ya(e,t,r,o,c,d,h=false,s=true,n={}){let p=new er(pr(d)),i=n.roughness??1.2,l=[{x:t,y:r},{x:t+o,y:r},{x:t+o,y:r+c},{x:t,y:r+c}];h&&(Tr(e,l,p,i),e.fill()),s&&Ir(e,l,p,n);}function ka(e,t,r,o,c,d,h,s=false,n=true,p={}){let i=new er(pr(h)),l=p.roughness??1.2,u=Math.min(d,Math.abs(o)/2,Math.abs(c)/2),a={x:t+u,y:r},x={x:t+o-u,y:r},m={x:t+o,y:r+u},g={x:t+o,y:r+c-u},w={x:t+o-u,y:r+c},_={x:t+u,y:r+c},S={x:t,y:r+c-u},E={x:t,y:r+u};if(s&&(e.beginPath(),e.moveTo(a.x,a.y),e.lineTo(x.x,x.y),e.arcTo(t+o,r,t+o,r+u,u),e.lineTo(g.x,g.y),e.arcTo(t+o,r+c,t+o-u,r+c,u),e.lineTo(_.x,_.y),e.arcTo(t,r+c,t,r+c-u,u),e.lineTo(E.x,E.y),e.arcTo(t,r,t+u,r,u),e.closePath(),e.fill()),n){Pr(e,a.x,a.y,x.x,x.y,i,p),Pr(e,m.x,m.y,g.x,g.y,i,p),Pr(e,w.x,w.y,_.x,_.y,i,p),Pr(e,S.x,S.y,E.x,E.y,i,p);let z=[{cx:t+o-u,cy:r+u,sa:-Math.PI/2,ea:0},{cx:t+o-u,cy:r+c-u,sa:0,ea:Math.PI/2},{cx:t+u,cy:r+c-u,sa:Math.PI/2,ea:Math.PI},{cx:t+u,cy:r+u,sa:Math.PI,ea:Math.PI*3/2}];for(let D of z)for(let P=0;P<2;P++){e.beginPath();let I=i.offset(.8*l);e.arc(D.cx,D.cy,Math.max(1,u+I),D.sa,D.ea),e.stroke();}}}function Fo(e,t,r,o,c,d,h=false,s=true,n={}){let p=new er(pr(d)),i=n.roughness??1.2;if(h){e.beginPath();let l=8;for(let u=0;u<l;u++){let a=u/l*Math.PI*2,x=1+p.offset(.04*i),m=t+Math.cos(a)*o*x,g=r+Math.sin(a)*c*x;u===0?e.moveTo(m,g):e.lineTo(m,g);}e.closePath(),e.fill();}if(s){e.beginPath();let l=12;for(let x=0;x<=l+1;x++){let m=x/l*Math.PI*2,g=p.offset(1.2*i),w=p.offset(1.2*i),_=t+Math.cos(m)*(o+g),S=r+Math.sin(m)*(c+w);x===0?e.moveTo(_,S):e.lineTo(_,S);}e.stroke(),e.beginPath();let u=10,a=p.offset(.3);for(let x=0;x<=u+1;x++){let m=a+x/u*Math.PI*2,g=p.offset(1*i),w=p.offset(1*i),_=t+Math.cos(m)*(o+g),S=r+Math.sin(m)*(c+w);x===0?e.moveTo(_,S):e.lineTo(_,S);}e.stroke();}}var wa=new Map;function Xr(e,t,r){let o=[],c=t.split(`
|
|
2
|
+
`);for(let d of c){if(!d){o.push("");continue}let h=d.split(" "),s="";for(let n=0;n<h.length;n++){let p=h[n];if(e.measureText(p).width>r){s&&(o.push(s),s="");let u="";for(let a of p)e.measureText(u+a).width>r&&u?(o.push(u),u=a):u+=a;s=u;continue}let i=s?`${s} ${p}`:p;e.measureText(i).width>r&&s?(o.push(s),s=p):s=i;}s&&o.push(s);}return o}function Lr(e){let t=Math.max(1,e.rows||3),r=Math.max(1,e.cols||3),o=Math.max(60,Math.abs(e.width)),c=Math.max(40,Math.abs(e.height)),d=e.colWidths&&e.colWidths.length===r?[...e.colWidths]:Array.from({length:r},()=>o/r),h=e.rowHeights&&e.rowHeights.length===t?[...e.rowHeights]:Array.from({length:t},()=>c/t);d=d.map(x=>Math.max(30,isNaN(x)||x<=0?o/r:x)),h=h.map(x=>Math.max(22,isNaN(x)||x<=0?c/t:x));let s=[0];for(let x=0;x<r;x++)s.push(s[x]+d[x]);let n=[0];for(let x=0;x<t;x++)n.push(n[x]+h[x]);let p=s[r],i=n[t],l=Math.min(e.x,e.x+e.width),u=Math.min(e.y,e.y+e.height);return {rows:t,cols:r,colWidths:d,rowHeights:h,colOffsets:s,rowOffsets:n,totalWidth:p,totalHeight:i,getCellBounds:(x,m)=>{let g=Math.max(0,Math.min(t-1,x)),w=Math.max(0,Math.min(r-1,m));return {x:l+s[w],y:u+n[g],width:d[w],height:h[g]}}}}function Yo(e){let{x:t,y:r,width:o,height:c}=e,d=Math.abs(o),h=Math.abs(c),s=t+o/2,n=r+c/2;switch(e.type){case "table":{let p=Lr(e),i=e.editingCell?e.editingCell.row:0,l=e.editingCell?e.editingCell.col:0,u=p.getCellBounds(i,l),a=6,x=4,m=Math.max(16,u.width-a*2),g=Math.max(16,u.height-x*2);return {boxX:u.x+a,boxY:u.y+x,boxW:m,boxH:g,centerX:u.x+u.width/2,centerY:u.y+u.height/2}}case "rectangle":{let p=(e.edgeStyle||"round")==="round",i=p?Math.max(12,d*.08):8,l=p?Math.max(10,h*.08):6,u=Math.max(16,d-i*2),a=Math.max(16,h-l*2);return {boxX:t+i,boxY:r+l,boxW:u,boxH:a,centerX:s,centerY:n}}case "sticky":{let u=Math.max(16,d-28),a=Math.max(16,h-34);return {boxX:t+14,boxY:r+20,boxW:u,boxH:a,centerX:s,centerY:r+20+a/2}}case "ellipse":{let p=Math.max(16,d*.68),i=Math.max(16,h*.68);return {boxX:s-p/2,boxY:n-i/2,boxW:p,boxH:i,centerX:s,centerY:n}}case "diamond":{let p=Math.max(16,d*.52),i=Math.max(16,h*.5);return {boxX:s-p/2,boxY:n-i/2,boxW:p,boxH:i,centerX:s,centerY:n}}case "triangle":{let p=Math.max(16,d*.5),i=Math.max(16,h*.42),l=r+h*.62;return {boxX:s-p/2,boxY:l-i/2,boxW:p,boxH:i,centerX:s,centerY:l}}case "capsule":{let p=Math.min(d,h),i=d>=h,l=Math.max(16,i?d-p*.72:d-16),u=Math.max(16,i?h-16:h-p*.72);return {boxX:s-l/2,boxY:n-u/2,boxW:l,boxH:u,centerX:s,centerY:n}}case "trapezoid":{let p=Math.min(d*.2,40),i=Math.max(16,d-p*2.2),l=Math.max(16,h-18);return {boxX:s-i/2,boxY:n-l/2+2,boxW:i,boxH:l,centerX:s,centerY:n+2}}case "hexagon":{let p=Math.min(d*.22,45),i=Math.max(16,d-p*2.1),l=Math.max(16,h-16);return {boxX:s-i/2,boxY:n-l/2,boxW:i,boxH:l,centerX:s,centerY:n}}case "parallelogram":{let p=Math.min(36,d*.22),i=Math.max(16,d-p*2.2),l=Math.max(16,h-16);return {boxX:s-i/2,boxY:n-l/2,boxW:i,boxH:l,centerX:s,centerY:n}}case "cylinder":{let p=Math.min(24,h*.2),i=Math.max(16,d-28),l=Math.max(16,h-p*4),u=n;return {boxX:s-i/2,boxY:u-l/2,boxW:i,boxH:l,centerX:s,centerY:u}}case "cloud":{let p=Math.max(16,d*.58),i=Math.max(16,h*.44);return {boxX:s-p/2,boxY:n-i/2,boxW:p,boxH:i,centerX:s,centerY:n}}case "star":{let p=Math.max(16,d*.4),i=Math.max(16,h*.4);return {boxX:s-p/2,boxY:n-i/2,boxW:p,boxH:i,centerX:s,centerY:n}}default:return {boxX:t+4,boxY:r+2,boxW:Math.max(16,d-8),boxH:Math.max(16,h-4),centerX:s,centerY:n}}}function Ho(e,t,r,o,c,d=0){if(e.beginPath(),d>0)if(typeof e.roundRect=="function")e.roundRect(t,r,o,c,d);else {let h=Math.min(d,Math.abs(o)/2,Math.abs(c)/2);e.moveTo(t+h,r),e.arcTo(t+o,r,t+o,r+c,h),e.arcTo(t+o,r+c,t,r+c,h),e.arcTo(t,r+c,t,r,h),e.arcTo(t,r,t+o,r,h),e.closePath();}else e.rect(t,r,o,c);}function ro(e,t=22,r){if(typeof window>"u"||!e)return {width:140,height:36};let o=ar(r),c=o.value==="patrick",d=o.value==="comic"||o.value==="handlee",h=o.value==="fuzzy"||o.value==="edusa",s=c||d||h?"400":"500",p=document.createElement("canvas").getContext("2d");if(!p){let a=e.split(`
|
|
3
3
|
`);return {width:Math.max(60,e.length*12),height:Math.max(36,a.length*28)}}p.font=`normal ${s} ${t}px ${o.cssFont}`;let i=t*1.35,l=e.split(`
|
|
4
4
|
`),u=0;for(let a of l){let x=p.measureText(a||" ").width;x>u&&(u=x);}return {width:Math.max(60,Math.ceil(u+16)),height:Math.max(Math.ceil(i),Math.ceil(l.length*i))}}function ir(e,t,r=1,o=false,c=false){if(!t.text||o)return;let{x:d,y:h,width:s,height:n}=t,p=Math.abs(s),i=Math.abs(n),l=d+s/2,u=h+n/2,a=ar(t.fontFamily),x=Yo(t),m=t.type==="text"?1/0:x.boxW*r,g=t.type==="text"?1/0:x.boxH*r,w=(t.fontSize||(t.type==="sticky"?20:22))*r,_=8*r,S=a.value==="fuzzy"||a.value==="edusa",E=a.value==="patrick"||a.value==="comic"||a.value==="handlee"?"400":S?t.type==="sticky"||t.type!=="text"?"700":"400":t.type==="sticky"||t.type!=="text"?"600":"500";e.font=`normal ${E} ${w}px ${a.cssFont}`;let z=t.type==="text"?t.text.split(`
|
|
5
|
-
`):Xr(e,t.text,m),D=w*1.35;if(t.type!=="text")for(;(z.length*D>g||z.some(C=>e.measureText(C).width>m))&&w>_;)w-=.75*r,e.font=`normal ${E} ${w}px ${a.cssFont}`,z=Xr(e,t.text,m),D=w*1.35;let P=z.length*D,I=(D-w)/2,b=t.type==="text"?(h+Math.max(0,(n-P/r)/2))*r+I:x.centerY*r-P/2+I,f=t.textAlign||(t.type==="text"?"left":"center");e.textAlign=f,e.textBaseline="top";let v=f==="center"?t.type==="text"?(d+s/2)*r:x.centerX*r:f==="right"?t.type==="text"?(d+s-4)*r:(x.boxX+x.boxW)*r-4*r:t.type==="text"?(d+4)*r:x.boxX*r+4*r;if(t.type==="sticky"){let C=Mr(t.stickyColor||t.fillColor,c);e.fillStyle=t.strokeColor&&t.strokeColor!=="transparent"?Et(t.strokeColor,c):C.text;}else e.fillStyle=Et(t.textColor||(c?"#f8fafc":"#0f172a"),c);if(t.type!=="text"){if(e.save(),e.beginPath(),t.type==="rectangle"||t.type==="sticky"){let C=t.type==="sticky",M=(t.edgeStyle||"round")==="round"||C,R=C?Math.min(22*r,p*.16,i*.16):M?Math.min(16*r,p*.2,i*.2):0;R>0&&typeof e.roundRect=="function"?e.roundRect(d+2,h+2,s-4,n-4,R):e.rect(d+2,h+2,s-4,n-4);}else if(t.type==="ellipse")e.ellipse(l,u,Math.max(1,p/2-2),Math.max(1,i/2-2),0,0,Math.PI*2);else if(t.type==="diamond")e.moveTo(l,h+2),e.lineTo(d+s-2,u),e.lineTo(l,h+n-2),e.lineTo(d+2,u),e.closePath();else if(t.type==="triangle")e.moveTo(l,h+2),e.lineTo(d+s-2,h+n-2),e.lineTo(d+2,h+n-2),e.closePath();else if(t.type==="capsule"){let C=Math.min(p,i)/2-2;p>=i?(e.arc(d+C+2,h+C+2,C,Math.PI/2,Math.PI*3/2),e.lineTo(d+s-C-2,h+2),e.arc(d+s-C-2,h+C+2,C,Math.PI*3/2,Math.PI/2),e.lineTo(d+C+2,h+n-2)):(e.arc(d+C+2,h+C+2,C,Math.PI,0),e.lineTo(d+s-2,h+n-C-2),e.arc(d+C+2,h+n-C-2,C,0,Math.PI),e.lineTo(d+2,h+C+2)),e.closePath();}else if(t.type==="trapezoid"){let C=Math.min(p*.2,40*r);e.moveTo(d+C+2,h+2),e.lineTo(d+s-C-2,h+2),e.lineTo(d+s-2,h+n-2),e.lineTo(d+2,h+n-2),e.closePath();}else if(t.type==="hexagon"){let C=Math.min(p*.22,45*r);e.moveTo(d+C+2,h+2),e.lineTo(d+s-C-2,h+2),e.lineTo(d+s-2,u),e.lineTo(d+s-C-2,h+n-2),e.lineTo(d+C+2,h+n-2),e.lineTo(d+2,u),e.closePath();}else if(t.type==="parallelogram"){let C=Math.min(36*r,p*.22);e.moveTo(d+C+2,h+2),e.lineTo(d+s-2,h+2),e.lineTo(d+s-C-2,h+n-2),e.lineTo(d+2,h+n-2),e.closePath();}else if(t.type==="cylinder"){let C=Math.abs(s/2)-2,M=Math.min(24*r,i*.2);e.ellipse(l,h+M,C,M,0,Math.PI,0),e.lineTo(d+s-2,h+n-M),e.ellipse(l,h+n-M,C,M,0,0,Math.PI),e.lineTo(d+2,h+M),e.closePath();}else t.type==="cloud"?e.ellipse(l,u,Math.max(1,p*.38),Math.max(1,i*.35),0,0,Math.PI*2):e.rect(d+2,h+2,s-4,n-4);e.clip();}z.forEach((C,M)=>{e.fillText(C,v,b+M*D);}),t.type!=="text"&&e.restore();}function _a(e,t,r,o,c,d,h,s=1,n=false){if(!c||c==="none")return;let p=c===true?"arrow":c;e.save(),e.translate(t,r),e.rotate(o),e.strokeStyle=d,e.fillStyle=d,e.lineWidth=Math.max(1,h*s),e.lineCap="round",e.lineJoin="round";let i=Math.max(1.5,h*s);switch(p){case "arrow":{let l=Math.max(12*s,i*4.5),u=l*.55;e.beginPath(),e.moveTo(-l,-u),e.lineTo(0,0),e.lineTo(-l,u),e.stroke();break}case "triangle":{let l=Math.max(14*s,i*4.8),u=l*.55;e.beginPath(),e.moveTo(0,0),e.lineTo(-l,-u),e.lineTo(-l,u),e.closePath(),e.fill(),e.stroke();break}case "barbed":{let l=Math.max(16*s,i*5.2),u=l*.55,a=l*.35;e.beginPath(),e.moveTo(0,0),e.lineTo(-l,-u),e.lineTo(-l+a,0),e.lineTo(-l,u),e.closePath(),e.fill(),e.stroke();break}case "dot":{let l=Math.max(4.5*s,i*1.8);e.beginPath(),e.arc(-l,0,l,0,Math.PI*2),e.fill();break}case "circle":{let l=Math.max(4.5*s,i*1.8);e.beginPath(),e.arc(-l,0,l,0,Math.PI*2),e.fillStyle=n?"#181818":"#ffffff",e.fill(),e.stroke();break}case "diamond":{let l=Math.max(13*s,i*4.2),u=l*.5;e.beginPath(),e.moveTo(0,0),e.lineTo(-l/2,-u),e.lineTo(-l,0),e.lineTo(-l/2,u),e.closePath(),e.fill(),e.stroke();break}case "diamond_outline":{let l=Math.max(13*s,i*4.2),u=l*.5;e.beginPath(),e.moveTo(0,0),e.lineTo(-l/2,-u),e.lineTo(-l,0),e.lineTo(-l/2,u),e.closePath(),e.fillStyle=n?"#181818":"#ffffff",e.fill(),e.stroke();break}case "bar":case "crowfoot_one":{let l=Math.max(12*s,i*4.5);e.beginPath(),e.moveTo(0,-l/2),e.lineTo(0,l/2),e.stroke();break}case "crowfoot_many":{let l=Math.max(12*s,i*4),u=l*.7;e.beginPath(),e.moveTo(-l,-u),e.lineTo(0,0),e.lineTo(-l,u),e.moveTo(-l,0),e.lineTo(0,0),e.stroke();break}case "crowfoot_one_many":{let l=Math.max(14*s,i*4.5),u=l*.65;e.beginPath(),e.moveTo(-l,-u),e.lineTo(0,0),e.lineTo(-l,u),e.moveTo(-l,0),e.lineTo(0,0),e.moveTo(-l*.45,-u),e.lineTo(-l*.45,u),e.stroke();break}case "crowfoot_strictly_one":{let l=Math.max(12*s,i*4.5),u=Math.max(5*s,i*2);e.beginPath(),e.moveTo(0,-l/2),e.lineTo(0,l/2),e.moveTo(-u,-l/2),e.lineTo(-u,l/2),e.stroke();break}case "crowfoot_zero_one":{let l=Math.max(12*s,i*4.5),u=Math.max(4*s,i*1.5);e.beginPath(),e.arc(-u*2-2*s,0,u,0,Math.PI*2),e.fillStyle=n?"#181818":"#ffffff",e.fill(),e.stroke(),e.beginPath(),e.moveTo(0,-l/2),e.lineTo(0,l/2),e.stroke();break}case "crowfoot_zero_many":{let l=Math.max(12*s,i*4),u=l*.65,a=Math.max(4*s,i*1.5);e.beginPath(),e.moveTo(-l,-u),e.lineTo(0,0),e.lineTo(-l,u),e.moveTo(-l,0),e.lineTo(0,0),e.stroke(),e.beginPath(),e.arc(-l-a-2*s,0,a,0,Math.PI*2),e.fillStyle=n?"#181818":"#ffffff",e.fill(),e.stroke();break}}e.restore();}function Or(e,t,r=1,o=false,c=false,d=false){e.save(),e.globalAlpha=t.opacity??1;let h=t.x+t.width/2,s=t.y+t.height/2;t.rotation&&(e.translate(h,s),e.rotate(t.rotation),e.translate(-h,-s)),d&&t.type!=="frame"?(e.shadowColor=c?"rgba(0, 0, 0, 0.45)":"rgba(15, 23, 42, 0.08)",e.shadowBlur=Math.round((c?12:10)*r),e.shadowOffsetX=0,e.shadowOffsetY=Math.round((c?4:3)*r)):e.shadowColor="transparent";let n=Et(t.strokeColor,c),p=Nr(t.fillColor,t.fillStyle,c);e.strokeStyle=n,e.lineWidth=Math.max(1,t.strokeWidth*r),e.lineCap="round",e.lineJoin="round",t.strokeStyle==="dashed"?e.setLineDash([Math.max(6,t.strokeWidth*2.5*r),Math.max(4,t.strokeWidth*1.8*r)]):t.strokeStyle==="dotted"?e.setLineDash([Math.max(1.5,t.strokeWidth*.8*r),Math.max(4,t.strokeWidth*1.8*r)]):e.setLineDash([]);let{x:i,y:l,width:u,height:a}=t,x=t.roughStyle==="rough"||t.roughness!==void 0&&t.roughness>0,m={roughness:t.roughness||1.2};switch(t.type){case "rectangle":{let w=(t.edgeStyle||"round")==="round"?Math.min(16,Math.min(Math.abs(u),Math.abs(a))*.25):0;p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r)),x?w>0?wa(e,i,l,u,a,w,t.id,!!(p&&p!=="transparent"),t.strokeWidth>0&&n!=="transparent",m):ka(e,i,l,u,a,t.id,!!(p&&p!=="transparent"),t.strokeWidth>0&&n!=="transparent",m):(p&&p!=="transparent"&&(w>0?(Ho(e,i,l,u,a,w),e.fill()):e.fillRect(i,l,u,a)),t.strokeWidth>0&&n!=="transparent"&&(w>0?(Ho(e,i,l,u,a,w),e.stroke()):e.strokeRect(i,l,u,a))),ir(e,t,r,o,c);break}case "ellipse":{let g=Math.abs(u/2),w=Math.abs(a/2);p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r)),x?Fo(e,h,s,g,w,t.id,!!(p&&p!=="transparent"),t.strokeWidth>0&&n!=="transparent",m):(e.beginPath(),e.ellipse(h,s,g,w,0,0,Math.PI*2),p&&p!=="transparent"&&e.fill(),t.strokeWidth>0&&n!=="transparent"&&e.stroke()),ir(e,t,r,o,c);break}case "diamond":{if(x){let g=new er(pr(t.id)),w=[{x:h,y:l},{x:i+u,y:s},{x:h,y:l+a},{x:i,y:s}];p&&p!=="transparent"&&(Tr(e,w,g,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&Ir(e,w,g,m);}else e.beginPath(),e.moveTo(h,l),e.lineTo(i+u,s),e.lineTo(h,l+a),e.lineTo(i,s),e.closePath(),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&e.stroke();ir(e,t,r,o,c);break}case "table":{let g=Lr(t),_=(t.edgeStyle||"round")==="round"?Math.min(10,Math.min(g.totalWidth,g.totalHeight)*.05):0;Ho(e,i,l,g.totalWidth,g.totalHeight,_);let S=p&&p!=="transparent"?p:c?"rgba(24, 24, 28, 0.95)":"rgba(255, 255, 255, 0.95)";e.fillStyle=S,e.fill();let E=t.cells||{},z=t.hasHeaderRow??true,D=t.hasHeaderCol??false;for(let C=0;C<g.rows;C++)for(let M=0;M<g.cols;M++){let R=`${C}_${M}`,J=E[R],oe=g.getCellBounds(C,M),A=null;J?.fill?A=J.fill:t.tableStyle==="swot"?C===0&&M===0?A=c?"rgba(16, 185, 129, 0.18)":"rgba(16, 185, 129, 0.12)":C===0&&M===1?A=c?"rgba(245, 158, 11, 0.18)":"rgba(245, 158, 11, 0.12)":C===1&&M===0?A=c?"rgba(59, 130, 246, 0.18)":"rgba(59, 130, 246, 0.12)":C===1&&M===1&&(A=c?"rgba(239, 68, 68, 0.18)":"rgba(239, 68, 68, 0.12)"):t.tableStyle==="kanban"&&C===0?M===0?A=c?"rgba(107, 114, 128, 0.22)":"rgba(107, 114, 128, 0.12)":M===1?A=c?"rgba(99, 102, 241, 0.22)":"rgba(99, 102, 241, 0.12)":M===2&&(A=c?"rgba(16, 185, 129, 0.22)":"rgba(16, 185, 129, 0.12)"):z&&C===0?A=c?"rgba(99, 102, 241, 0.22)":"rgba(99, 102, 241, 0.10)":D&&M===0?A=c?"rgba(99, 102, 241, 0.14)":"rgba(99, 102, 241, 0.06)":t.tableStyle==="zebra"&&C%2===1&&(A=c?"rgba(255, 255, 255, 0.03)":"rgba(0, 0, 0, 0.025)"),A&&(e.fillStyle=A,e.fillRect(oe.x,oe.y,oe.width,oe.height));}let P=Math.max(1,t.strokeWidth||1.5),I=n;e.strokeStyle=I,e.lineWidth=P;for(let C=1;C<g.cols;C++){let M=i+g.colOffsets[C];e.beginPath(),e.moveTo(M,l),e.lineTo(M,l+g.totalHeight),e.stroke();}for(let C=1;C<g.rows;C++){let M=l+g.rowOffsets[C];e.beginPath(),e.moveTo(i,M),e.lineTo(i+g.totalWidth,M),e.stroke();}t.strokeWidth>0&&n!=="transparent"&&(Ho(e,i,l,g.totalWidth,g.totalHeight,_),e.stroke());let b=Math.max(10,t.fontSize||13),f=ar(t.fontFamily),v=f.cssFont;for(let C=0;C<g.rows;C++)for(let M=0;M<g.cols;M++){if(o&&t.editingCell&&t.editingCell.row===C&&t.editingCell.col===M)continue;let J=`${C}_${M}`,oe=E[J],A=oe?.text??"";if(!A)continue;let U=g.getCellBounds(C,M),G=z&&C===0||D&&M===0||oe?.bold,Ne=oe?.align||(G?"center":"left");e.save(),e.beginPath(),e.rect(U.x+2,U.y+2,U.width-4,U.height-4),e.clip();let ne=f.value==="fuzzy"||f.value==="edusa",le=f.value==="patrick"||f.value==="comic"||f.value==="handlee"?"400":ne?G?"700":"400":G?"600":"400";e.font=`${le} ${b}px ${v}`,e.fillStyle=oe?.color||(G&&z&&C===0?c?"#ffffff":"#1e1b4b":n),e.textBaseline="middle";let ce=Xr(e,A,U.width-16),ke=b*1.35,Ie=ce.length*ke,we=U.y+(U.height-Ie)/2+ke/2;ce.forEach((Ge,Ue)=>{let ee=we+Ue*ke,Pe=U.x+8;Ne==="center"?(e.textAlign="center",Pe=U.x+U.width/2):Ne==="right"?(e.textAlign="right",Pe=U.x+U.width-8):(e.textAlign="left",Pe=U.x+8),e.fillText(Ge,Pe,ee);}),e.restore();}break}case "cylinder":{let g=Math.abs(u/2),w=Math.min(24*r,Math.abs(a)*.2),_=l+w,S=l+a-w;if(x){let E=new er(pr(t.id)),z=[{x:i,y:_},{x:i+u,y:_},{x:i+u,y:S},{x:i,y:S}];p&&p!=="transparent"&&(Tr(e,z,E,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&(Pr(e,i,_,i,S,E,m),Pr(e,i+u,_,i+u,S,E,m),Fo(e,h,S,g,w,t.id+"_b",false,true,m)),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r)),Fo(e,h,_,g,w,t.id+"_t",!!(p&&p!=="transparent"),t.strokeWidth>0&&n!=="transparent",m);}else e.beginPath(),e.ellipse(h,_,g,w,0,Math.PI,0),e.lineTo(i+u,S),e.ellipse(h,S,g,w,0,0,Math.PI),e.lineTo(i,_),e.closePath(),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&(e.beginPath(),e.moveTo(i,_),e.lineTo(i,S),e.ellipse(h,S,g,w,0,Math.PI,0,true),e.lineTo(i+u,_),e.stroke()),e.beginPath(),e.ellipse(h,_,g,w,0,0,Math.PI*2),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&e.stroke();ir(e,t,r,o,c);break}case "parallelogram":{let g=Math.min(36*r,Math.abs(u)*.22),w=[{x:i+g,y:l},{x:i+u,y:l},{x:i+u-g,y:l+a},{x:i,y:l+a}];if(x){let _=new er(pr(t.id));p&&p!=="transparent"&&(Tr(e,w,_,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&Ir(e,w,_,m);}else e.beginPath(),e.moveTo(w[0].x,w[0].y),e.lineTo(w[1].x,w[1].y),e.lineTo(w[2].x,w[2].y),e.lineTo(w[3].x,w[3].y),e.closePath(),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&e.stroke();ir(e,t,r,o,c);break}case "cloud":{let g=Math.abs(u),w=Math.abs(a);e.beginPath(),e.moveTo(i+g*.2,l+w*.7),e.bezierCurveTo(i+g*.1,l+w*.85,i+g*.35,l+w*.95,i+g*.5,l+w*.85),e.bezierCurveTo(i+g*.65,l+w*.95,i+g*.9,l+w*.85,i+g*.85,l+w*.65),e.bezierCurveTo(i+g*1.02,l+w*.5,i+g*.98,l+w*.25,i+g*.8,l+w*.25),e.bezierCurveTo(i+g*.78,l+w*.05,i+g*.52,l+w*.05,i+g*.45,l+w*.2),e.bezierCurveTo(i+g*.35,l+w*.08,i+g*.12,l+w*.15,i+g*.15,l+w*.4),e.bezierCurveTo(i-g*.02,l+w*.45,i-g*.01,l+w*.68,i+g*.2,l+w*.7),e.closePath(),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&(e.stroke(),x&&e.stroke()),ir(e,t,r,o,c);break}case "star":{let w=Math.min(Math.abs(u),Math.abs(a))/2,_=w*.45,S=Math.PI/2*3,E=Math.PI/5,z=[];for(let D=0;D<5;D++)z.push({x:h+Math.cos(S)*w,y:s+Math.sin(S)*w}),S+=E,z.push({x:h+Math.cos(S)*_,y:s+Math.sin(S)*_}),S+=E;if(x){let D=new er(pr(t.id));p&&p!=="transparent"&&(Tr(e,z,D,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&Ir(e,z,D,m);}else {e.beginPath(),e.moveTo(z[0].x,z[0].y);for(let D=1;D<z.length;D++)e.lineTo(z[D].x,z[D].y);e.closePath(),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),d&&(e.shadowColor="transparent"),t.strokeWidth>0&&n!=="transparent"&&e.stroke();}ir(e,t,r,o,c);break}case "triangle":{let g=(t.edgeStyle||"round")==="round",w={x:i+u/2,y:l},_={x:i+u,y:l+a},S={x:i,y:l+a},E=[w,_,S];if(x){let z=new er(pr(t.id));p&&p!=="transparent"&&(Tr(e,E,z,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&Ir(e,E,z,m);}else {if(e.beginPath(),g){let z=Math.min(12,Math.min(Math.abs(u),Math.abs(a))*.15);e.moveTo((w.x+_.x)/2,(w.y+_.y)/2),e.arcTo(_.x,_.y,S.x,S.y,z),e.arcTo(S.x,S.y,w.x,w.y,z),e.arcTo(w.x,w.y,_.x,_.y,z),e.closePath();}else e.moveTo(w.x,w.y),e.lineTo(_.x,_.y),e.lineTo(S.x,S.y),e.closePath();p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),d&&(e.shadowColor="transparent"),t.strokeWidth>0&&n!=="transparent"&&e.stroke();}ir(e,t,r,o,c);break}case "trapezoid":{let g=(t.edgeStyle||"round")==="round",w=Math.min(Math.abs(u)*.2,40*r),_={x:i+w,y:l},S={x:i+u-w,y:l},E={x:i+u,y:l+a},z={x:i,y:l+a},D=[_,S,E,z];if(x){let P=new er(pr(t.id));p&&p!=="transparent"&&(Tr(e,D,P,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&Ir(e,D,P,m);}else {if(e.beginPath(),g){let P=Math.min(10,Math.min(Math.abs(u),Math.abs(a))*.15);e.moveTo((_.x+S.x)/2,_.y),e.arcTo(S.x,S.y,E.x,E.y,P),e.arcTo(E.x,E.y,z.x,z.y,P),e.arcTo(z.x,z.y,_.x,_.y,P),e.arcTo(_.x,_.y,S.x,S.y,P),e.closePath();}else e.moveTo(_.x,_.y),e.lineTo(S.x,S.y),e.lineTo(E.x,E.y),e.lineTo(z.x,z.y),e.closePath();p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),d&&(e.shadowColor="transparent"),t.strokeWidth>0&&n!=="transparent"&&e.stroke();}ir(e,t,r,o,c);break}case "hexagon":{let g=(t.edgeStyle||"round")==="round",w=Math.min(Math.abs(u)*.22,45*r),_={x:i+w,y:l},S={x:i+u-w,y:l},E={x:i+u,y:l+a/2},z={x:i+u-w,y:l+a},D={x:i+w,y:l+a},P={x:i,y:l+a/2},I=[_,S,E,z,D,P];if(x){let b=new er(pr(t.id));p&&p!=="transparent"&&(Tr(e,I,b,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&Ir(e,I,b,m);}else {if(e.beginPath(),g){let b=Math.min(10,Math.min(Math.abs(u),Math.abs(a))*.12);e.moveTo((_.x+S.x)/2,_.y),e.arcTo(S.x,S.y,E.x,E.y,b),e.arcTo(E.x,E.y,z.x,z.y,b),e.arcTo(z.x,z.y,D.x,D.y,b),e.arcTo(D.x,D.y,P.x,P.y,b),e.arcTo(P.x,P.y,_.x,_.y,b),e.arcTo(_.x,_.y,S.x,S.y,b),e.closePath();}else e.moveTo(_.x,_.y),e.lineTo(S.x,S.y),e.lineTo(E.x,E.y),e.lineTo(z.x,z.y),e.lineTo(D.x,D.y),e.lineTo(P.x,P.y),e.closePath();p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),d&&(e.shadowColor="transparent"),t.strokeWidth>0&&n!=="transparent"&&e.stroke();}ir(e,t,r,o,c);break}case "capsule":{let g=Math.abs(u),w=Math.abs(a),_=Math.min(g,w)/2;e.beginPath(),g>=w?(e.arc(i+_,l+_,_,Math.PI/2,Math.PI*3/2),e.lineTo(i+u-_,l),e.arc(i+u-_,l+_,_,Math.PI*3/2,Math.PI/2),e.lineTo(i+_,l+a)):(e.arc(i+_,l+_,_,Math.PI,0),e.lineTo(i+u-_,l+a-_),e.arc(i+_,l+a-_,_,0,Math.PI),e.lineTo(i,l+_)),e.closePath(),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),d&&(e.shadowColor="transparent"),t.strokeWidth>0&&n!=="transparent"&&(e.stroke(),x&&e.stroke()),ir(e,t,r,o,c);break}case "arrow":case "line":{let g=Br(t),w={x:i+u,y:l+a};if(x&&g.type==="straight"){let S=new er(pr(t.id));Pr(e,i,l,w.x,w.y,S,m);}else e.beginPath(),g.type==="straight"?(e.moveTo(i,l),e.lineTo(w.x,w.y)):g.type==="curved"&&g.controlPoint?(e.moveTo(i,l),e.quadraticCurveTo(g.controlPoint.x,g.controlPoint.y,w.x,w.y)):g.type==="elbow"&&g.controlPoint1&&g.controlPoint2?(e.moveTo(i,l),e.bezierCurveTo(g.controlPoint1.x,g.controlPoint1.y,g.controlPoint2.x,g.controlPoint2.y,w.x,w.y)):ya(e,g.points,Math.max(8,12*r)),e.stroke(),x&&e.stroke();t.startArrowhead&&t.startArrowhead!=="none"&&_a(e,i,l,g.departureAngle+Math.PI,t.startArrowhead,n,t.strokeWidth,r,c);let _=t.endArrowhead!==void 0?t.endArrowhead:t.type==="arrow"?"arrow":"none";_&&_!=="none"&&_a(e,w.x,w.y,g.arrivalAngle,_,n,t.strokeWidth,r,c);break}case "pen":{let g=t.points;if(!g||g.length<2)break;e.beginPath(),e.moveTo(g[0].x,g[0].y);for(let _=1;_<g.length-1;_++){let S=(g[_].x+g[_+1].x)/2,E=(g[_].y+g[_+1].y)/2;e.quadraticCurveTo(g[_].x,g[_].y,S,E);}let w=g[g.length-1];e.lineTo(w.x,w.y),e.stroke();break}case "text":{ir(e,t,r,o,c);break}case "sticky":{let g=Mr(t.stickyColor||t.fillColor,c),w=Math.abs(u),_=Math.abs(a),S=Math.min(22*r,Math.min(w,_)*.16),E=Math.min(13*r,w*.08),z=Math.min(13*r,_*.08);e.fillStyle=g.backSheetBg,e.strokeStyle=g.backSheetBorder,e.lineWidth=1.5*r,e.beginPath(),typeof e.roundRect=="function"?e.roundRect(i+E,l+z,u,a,S):e.rect(i+E,l+z,u,a),e.fill(),e.stroke(),e.save(),e.shadowColor="rgba(0, 0, 0, 0.08)",e.shadowBlur=8*r,e.shadowOffsetX=1*r,e.shadowOffsetY=3*r,e.fillStyle=g.bg,e.beginPath(),typeof e.roundRect=="function"?e.roundRect(i,l,u,a,S):e.rect(i,l,u,a),e.fill(),e.restore(),e.strokeStyle=g.mainBorder,e.lineWidth=1.5*r,e.beginPath(),typeof e.roundRect=="function"?e.roundRect(i,l,u,a,S):e.rect(i,l,u,a),e.stroke(),e.save(),e.strokeStyle=g.sheen,e.lineWidth=1.5*r,e.beginPath();let D=2*r,P=Math.max(2,S-D);typeof e.roundRect=="function"&&e.roundRect(i+D,l+D,u-D*2,a-D*2,P),e.stroke(),e.restore();let I=Math.min(64*r,Math.max(30*r,w*.28)),b=Math.min(18*r,Math.max(10*r,_*.09)),f=i+(u-I)/2,v=l-b*.42,C=4*r;e.save(),e.shadowColor="rgba(0, 0, 0, 0.06)",e.shadowBlur=4*r,e.shadowOffsetY=1*r,e.fillStyle=g.tapeBg,e.beginPath(),typeof e.roundRect=="function"?e.roundRect(f,v,I,b,C):e.rect(f,v,I,b),e.fill(),e.restore(),e.strokeStyle=g.tapeBorder,e.lineWidth=1*r,e.beginPath(),typeof e.roundRect=="function"?e.roundRect(f,v,I,b,C):e.rect(f,v,I,b),e.stroke(),ir(e,t,r,o,c);break}case "image":{if(t.dataUrl){let g=va.get(t.dataUrl);if(g||(g=new Image,g.crossOrigin="anonymous",g.onload=()=>{typeof window<"u"&&window.dispatchEvent(new CustomEvent("sketch-redraw-canvas"));},g.src=t.dataUrl,va.set(t.dataUrl,g)),g.complete&&g.naturalWidth>0)if(t.edgeStyle==="round"){let w=Math.min(10*r,Math.abs(u)/4,Math.abs(a)/4);e.save(),e.beginPath(),typeof e.roundRect=="function"?e.roundRect(i,l,u,a,w):e.rect(i,l,u,a),e.clip(),e.drawImage(g,i,l,u,a),e.restore();}else e.drawImage(g,i,l,u,a);}break}case "frame":{let g=u<0?i+u:i,w=a<0?l+a:l,_=Math.abs(u),S=Math.abs(a);if(t.fillColor&&t.fillColor!=="transparent"&&(e.fillStyle=Nr(t.fillColor,t.fillStyle||"solid",c),e.fillRect(g,w,_,S)),t.strokeColor!=="transparent"){e.save();let E=t.strokeColor&&t.strokeColor!=="transparent"?Et(t.strokeColor,c):c?"#818cf8":"#6366f1";e.strokeStyle=E,e.lineWidth=Math.max(1,(t.strokeWidth||1.5)*r),t.strokeStyle==="dashed"?e.setLineDash([6*r,6*r]):t.strokeStyle==="dotted"?e.setLineDash([2*r,4*r]):e.setLineDash([]),e.strokeRect(g,w,_,S),e.restore();}if(!o){let E=t.frameLabel||"Frame",z=Math.max(11,12*r);e.save(),e.font=`600 ${z}px Inter, -apple-system, sans-serif`;let D=e.measureText(E),P=8*r,I=z+8*r,b=D.width+P*2,f=g+_-b,v=w-I-3*r;e.fillStyle=c?"#27272a":"#e4e4e7",typeof e.roundRect=="function"?(e.beginPath(),e.roundRect(f,v,b,I,4*r),e.fill()):e.fillRect(f,v,b,I),e.fillStyle=c?"#f4f4f5":"#18181b",e.textAlign="left",e.textBaseline="middle",e.fillText(E,f+P,v+I/2),e.restore();}break}}e.restore();}function Rr(e,t,r){let o=Math.cos(r),c=Math.sin(r),d=e.x-t.x,h=e.y-t.y;return {x:t.x+d*o-h*c,y:t.y+d*c+h*o}}function Ar(e,t,r){let o=r.x-t.x,c=r.y-t.y,d=o*o+c*c;if(d===0)return Math.hypot(e.x-t.x,e.y-t.y);let h=((e.x-t.x)*o+(e.y-t.y)*c)/d;h=Math.max(0,Math.min(1,h));let s=t.x+h*o,n=t.y+h*c;return Math.hypot(e.x-s,e.y-n)}function bt(e){let t=Math.min(e.x,e.x+e.width),r=Math.min(e.y,e.y+e.height),o=Math.abs(e.width),c=Math.abs(e.height);return {x:t,y:r,width:o,height:c}}function Oi(e,t,r=8){let o=t.x+t.width/2,c=t.y+t.height/2,d=t.rotation?Rr(e,{x:o,y:c},-t.rotation):e,h=bt(t),{x:s,y:n,width:p,height:i}=h;switch(t.type){case "rectangle":case "text":case "image":return d.x>=s-r&&d.x<=s+p+r&&d.y>=n-r&&d.y<=n+i+r;case "frame":{let l=d.x>=s-r&&d.x<=s+p+r&&d.y>=n-r&&d.y<=n+i+r,u=d.x>=s+p-Math.min(p,260)-r&&d.x<=s+p+r&&d.y>=n-32-r&&d.y<=n+r;return l||u}case "sticky":{let l=Math.min(13,p*.08),u=Math.min(13,i*.08),a=Math.min(18,i*.09)*.42;return d.x>=s-r&&d.x<=s+p+l+r&&d.y>=n-a-r&&d.y<=n+i+u+r}case "ellipse":{let l=p/2+r,u=i/2+r;if(l<=0||u<=0)return false;let a=s+p/2,x=n+i/2,m=d.x-a,g=d.y-x;return m*m/(l*l)+g*g/(u*u)<=1}case "diamond":{let l=p/2+r,u=i/2+r;if(l<=0||u<=0)return false;let a=s+p/2,x=n+i/2,m=Math.abs(d.x-a),g=Math.abs(d.y-x);return m/l+g/u<=1}case "cylinder":case "table":return d.x>=s-r&&d.x<=s+p+r&&d.y>=n-r&&d.y<=n+i+r;case "cloud":case "star":case "trapezoid":case "hexagon":case "capsule":return d.x>=s-r&&d.x<=s+p+r&&d.y>=n-r&&d.y<=n+i+r;case "triangle":{if(d.x<s-r||d.x>s+p+r||d.y<n-r||d.y>n+i+r)return false;let l=i===0?0:Math.max(0,Math.min(1,(d.y-n)/i)),u=p/2*l,a=s+p/2-u,x=s+p/2+u;return d.x>=a-r&&d.x<=x+r}case "parallelogram":{if(d.y<n-r||d.y>n+i+r)return false;let l=Math.min(36,p*.22),u=i===0?0:Math.max(0,Math.min(1,(d.y-n)/i)),a=s+l*(1-u),x=s+p-l*u;return d.x>=a-r&&d.x<=x+r}case "line":case "arrow":{let l=Br(t),u=Math.max(r,(t.strokeWidth||2)+4);if(l.type==="straight")return Ar(d,l.points[0],l.points[1])<=u;if(l.type==="curved"&&l.controlPoint){let a={x:(l.points[0].x+l.controlPoint.x*2+l.points[1].x)/4,y:(l.points[0].y+l.controlPoint.y*2+l.points[1].y)/4};return Ar(d,l.points[0],a)<=u||Ar(d,a,l.points[1])<=u}if(l.type==="elbow"&&l.controlPoint1&&l.controlPoint2){let a=l.points[0],x=l.points[1],m=l.controlPoint1,g=l.controlPoint2;return Ar(d,a,m)<=u||Ar(d,m,g)<=u||Ar(d,g,x)<=u}for(let a=0;a<l.points.length-1;a++){let x=l.points[a],m=l.points[a+1];if(Ar(d,x,m)<=u)return true}return false}case "pen":{if(!t.points||t.points.length<2)return false;let l=Math.max(r,(t.strokeWidth||2)+4);for(let u=0;u<t.points.length-1;u++){let a=t.points[u],x=t.points[u+1];if(Ar(d,a,x)<=l)return true}return false}default:return false}}function go(e){if(e.type==="arrow"||e.type==="line"){let p=e.arrowType||"straight";if(p==="straight")return [{type:"start",x:e.x,y:e.y,cursor:"crosshair"},{type:"end",x:e.x+e.width,y:e.y+e.height,cursor:"crosshair"}];if(p==="curved"){let i=ma(e);return [{type:"start",x:e.x,y:e.y,cursor:"crosshair"},{type:"middle",x:i.x,y:i.y,cursor:"grab"},{type:"end",x:e.x+e.width,y:e.y+e.height,cursor:"crosshair"}]}if(p==="elbow"){let i=Br(e),l=i.controlPoint1||{x:e.x+e.width*.4,y:e.y},u=i.controlPoint2||{x:e.x+e.width*.6,y:e.y+e.height};return [{type:"start",x:e.x,y:e.y,cursor:"crosshair"},{type:"control1",x:l.x,y:l.y,cursor:"grab"},{type:"control2",x:u.x,y:u.y,cursor:"grab"},{type:"end",x:e.x+e.width,y:e.y+e.height,cursor:"crosshair"}]}}let t=bt(e),{x:r,y:o,width:c,height:d}=t,h=r+c/2,s=o+d/2,n=[{type:"nw",x:r,y:o,cursor:"nwse-resize"},{type:"n",x:h,y:o,cursor:"ns-resize"},{type:"ne",x:r+c,y:o,cursor:"nesw-resize"},{type:"e",x:r+c,y:s,cursor:"ew-resize"},{type:"se",x:r+c,y:o+d,cursor:"nwse-resize"},{type:"s",x:h,y:o+d,cursor:"ns-resize"},{type:"sw",x:r,y:o+d,cursor:"nesw-resize"},{type:"w",x:r,y:s,cursor:"ew-resize"},{type:"rotate",x:h,y:o-24,cursor:"grab"}];return e.rotation?n.map(p=>{let i=Rr({x:p.x,y:p.y},{x:h,y:s},e.rotation||0);return {...p,x:i.x,y:i.y}}):n}function mo(e,t,r=8){for(let o of t)if(Math.hypot(e.x-o.x,e.y-o.y)<=r)return o;return null}function Dr(e,t,r=8){let o=[...t].sort((c,d)=>(d.zIndex??0)-(c.zIndex??0));for(let c of o)if(Oi(e,c,r))return c;return null}function Sa(e,t){let r=Math.min(e.startX,e.currentX),o=Math.max(e.startX,e.currentX),c=Math.min(e.startY,e.currentY),d=Math.max(e.startY,e.currentY);return t.filter(h=>{let s=bt(h),n=s.x,p=s.x+s.width,i=s.y,l=s.y+s.height;return !(p<r||n>o||l<c||i>d)})}function jr(e,t=0){if(e.length===0)return null;let r=1/0,o=1/0,c=-1/0,d=-1/0;for(let h of e){let s=bt(h);s.x<r&&(r=s.x),s.y<o&&(o=s.y),s.x+s.width>c&&(c=s.x+s.width),s.y+s.height>d&&(d=s.y+s.height);}return r===1/0?null:{x:r-t,y:o-t,width:Math.max(1,c-r+t*2),height:Math.max(1,d-o+t*2)}}function yo(e){let{x:t,y:r,width:o,height:c}=e,d=t+o/2,h=r+c/2;return [{type:"nw",x:t,y:r,cursor:"nwse-resize"},{type:"n",x:d,y:r,cursor:"ns-resize"},{type:"ne",x:t+o,y:r,cursor:"nesw-resize"},{type:"e",x:t+o,y:h,cursor:"ew-resize"},{type:"se",x:t+o,y:r+c,cursor:"nwse-resize"},{type:"s",x:d,y:r+c,cursor:"ns-resize"},{type:"sw",x:t,y:r+c,cursor:"nesw-resize"},{type:"w",x:t,y:h,cursor:"ew-resize"},{type:"rotate",x:d,y:r-24,cursor:"grab"}]}function Ca(e,t,r=6){if(e.type!=="table")return {type:"none"};let o=Math.min(e.x,e.x+e.width),c=Math.min(e.y,e.y+e.height),d=Lr(e),h=e.rotation?Rr(t,{x:o+d.totalWidth/2,y:c+d.totalHeight/2},-e.rotation):t;for(let s=1;s<d.cols;s++){let n=o+d.colOffsets[s];if(Math.abs(h.x-n)<=r&&h.y>=c-r&&h.y<=c+d.totalHeight+r)return {type:"col-divider",colIndex:s,x:n,minY:c,maxY:c+d.totalHeight}}for(let s=1;s<d.rows;s++){let n=c+d.rowOffsets[s];if(Math.abs(h.y-n)<=r&&h.x>=o-r&&h.x<=o+d.totalWidth+r)return {type:"row-divider",rowIndex:s,y:n,minX:o,maxX:o+d.totalWidth}}for(let s=0;s<d.rows;s++)for(let n=0;n<d.cols;n++){let p=d.getCellBounds(s,n);if(h.x>=p.x&&h.x<=p.x+p.width&&h.y>=p.y&&h.y<=p.y+p.height)return {type:"cell",row:s,col:n,bounds:p}}return {type:"none"}}var ji=["rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","table","sticky","text","image","frame"];function Xo(e){let t=Math.min(e.x,e.x+e.width),r=Math.max(e.x,e.x+e.width),o=Math.min(e.y,e.y+e.height),c=Math.max(e.y,e.y+e.height),d=r-t,h=c-o,s=t+d/2,n=o+h/2,p;if(e.type==="ellipse"){let i=d/2,l=h/2,u=Math.cos(Math.PI/6),a=Math.sin(Math.PI/6),x=Math.cos(Math.PI/3),m=Math.sin(Math.PI/3);p={"top-left":{x:s-i*x,y:n-l*m},top:{x:s,y:n-l},"top-right":{x:s+i*x,y:n-l*m},"right-top":{x:s+i*u,y:n-l*a},right:{x:s+i,y:n},"right-bottom":{x:s+i*u,y:n+l*a},"bottom-right":{x:s+i*x,y:n+l*m},bottom:{x:s,y:n+l},"bottom-left":{x:s-i*x,y:n+l*m},"left-bottom":{x:s-i*u,y:n+l*a},left:{x:s-i,y:n},"left-top":{x:s-i*u,y:n-l*a},center:{x:s,y:n}};}else if(e.type==="diamond")p={"top-left":{x:t+(s-t)*.5,y:n-(n-o)*.5},top:{x:s,y:o},"top-right":{x:s+(r-s)*.5,y:o+(n-o)*.5},"right-top":{x:s+(r-s)*.75,y:o+(n-o)*.75},right:{x:r,y:n},"right-bottom":{x:r-(r-s)*.25,y:n+(c-n)*.25},"bottom-right":{x:s+(r-s)*.5,y:n+(c-n)*.5},bottom:{x:s,y:c},"bottom-left":{x:t+(s-t)*.5,y:n+(c-n)*.5},"left-bottom":{x:t+(s-t)*.25,y:n+(c-n)*.25},left:{x:t,y:n},"left-top":{x:t+(s-t)*.25,y:n-(n-o)*.25},center:{x:s,y:n}};else if(e.type==="triangle")p={top:{x:s,y:o},"top-left":{x:s+(t-s)*.33,y:o+h*.33},"left-top":{x:s+(t-s)*.5,y:o+h*.5},left:{x:s+(t-s)*.67,y:o+h*.67},"left-bottom":{x:s+(t-s)*.85,y:o+h*.85},"top-right":{x:s+(r-s)*.33,y:o+h*.33},"right-top":{x:s+(r-s)*.5,y:o+h*.5},right:{x:s+(r-s)*.67,y:o+h*.67},"right-bottom":{x:s+(r-s)*.85,y:o+h*.85},"bottom-left":{x:t+d*.25,y:c},bottom:{x:s,y:c},"bottom-right":{x:t+d*.75,y:c},center:{x:s,y:o+h*.62}};else if(e.type==="parallelogram"){let i=Math.min(36,d*.22);p={"top-left":{x:t+i+(d-i)*.25,y:o},top:{x:t+i+(d-i)*.5,y:o},"top-right":{x:t+i+(d-i)*.75,y:o},"right-top":{x:r-i*.25,y:o+h*.25},right:{x:r-i*.5,y:n},"right-bottom":{x:r-i*.75,y:o+h*.75},"bottom-right":{x:t+(d-i)*.75,y:c},bottom:{x:t+(d-i)*.5,y:c},"bottom-left":{x:t+(d-i)*.25,y:c},"left-bottom":{x:t+i*.25,y:o+h*.75},left:{x:t+i*.5,y:n},"left-top":{x:t+i*.75,y:o+h*.25},center:{x:s,y:n}};}else if(e.type==="trapezoid"){let i=Math.min(d*.2,40);p={"top-left":{x:t+i+(d-2*i)*.25,y:o},top:{x:s,y:o},"top-right":{x:t+i+(d-2*i)*.75,y:o},"right-top":{x:r-i+i*.25,y:o+h*.25},right:{x:r-i*.5,y:n},"right-bottom":{x:r-i+i*.75,y:o+h*.75},"bottom-right":{x:t+d*.75,y:c},bottom:{x:s,y:c},"bottom-left":{x:t+d*.25,y:c},"left-bottom":{x:t+i*.25,y:o+h*.75},left:{x:t+i*.5,y:n},"left-top":{x:t+i*.75,y:o+h*.25},center:{x:s,y:n}};}else if(e.type==="hexagon"){let i=Math.min(d*.22,45);p={"top-left":{x:t+i+(d-2*i)*.25,y:o},top:{x:s,y:o},"top-right":{x:t+i+(d-2*i)*.75,y:o},"right-top":{x:r-i*.5,y:o+h*.25},right:{x:r,y:n},"right-bottom":{x:r-i*.5,y:o+h*.75},"bottom-right":{x:t+i+(d-2*i)*.75,y:c},bottom:{x:s,y:c},"bottom-left":{x:t+i+(d-2*i)*.25,y:c},"left-bottom":{x:t+i*.5,y:o+h*.75},left:{x:t,y:n},"left-top":{x:t+i*.5,y:o+h*.25},center:{x:s,y:n}};}else if(e.type==="capsule"){let i=d>=h,l=Math.min(d,h)/2;if(i){let u=Math.SQRT1_2;p={"top-left":{x:t+l+(d-2*l)*.25,y:o},top:{x:s,y:o},"top-right":{x:t+l+(d-2*l)*.75,y:o},"right-top":{x:r-l+l*u,y:n-l*u},right:{x:r,y:n},"right-bottom":{x:r-l+l*u,y:n+l*u},"bottom-right":{x:t+l+(d-2*l)*.75,y:c},bottom:{x:s,y:c},"bottom-left":{x:t+l+(d-2*l)*.25,y:c},"left-bottom":{x:t+l-l*u,y:n+l*u},left:{x:t,y:n},"left-top":{x:t+l-l*u,y:n-l*u},center:{x:s,y:n}};}else {let u=Math.SQRT1_2;p={"top-left":{x:s-l*u,y:o+l-l*u},top:{x:s,y:o},"top-right":{x:s+l*u,y:o+l-l*u},"right-top":{x:r,y:o+l+(h-2*l)*.25},right:{x:r,y:n},"right-bottom":{x:r,y:o+l+(h-2*l)*.75},"bottom-right":{x:s+l*u,y:c-l+l*u},bottom:{x:s,y:c},"bottom-left":{x:s-l*u,y:c-l+l*u},"left-bottom":{x:t,y:o+l+(h-2*l)*.75},left:{x:t,y:n},"left-top":{x:t,y:o+l+(h-2*l)*.25},center:{x:s,y:n}};}}else if(e.type==="cylinder"){let i=Math.min(24,h*.2);p={"top-left":{x:s-d/2*.7,y:o+i-i*.7},top:{x:s,y:o},"top-right":{x:s+d/2*.7,y:o+i-i*.7},"right-top":{x:r,y:o+i+(h-2*i)*.25},right:{x:r,y:n},"right-bottom":{x:r,y:o+i+(h-2*i)*.75},"bottom-right":{x:s+d/2*.7,y:c-i+i*.7},bottom:{x:s,y:c},"bottom-left":{x:s-d/2*.7,y:c-i+i*.7},"left-bottom":{x:t,y:o+i+(h-2*i)*.75},left:{x:t,y:n},"left-top":{x:t,y:o+i+(h-2*i)*.25},center:{x:s,y:n}};}else if(e.type==="star"){let i=Math.min(d,h)/2,l=i*.45,u=Math.cos,a=Math.sin,x=Math.PI;p={top:{x:s,y:n-i},"top-right":{x:s+l*u(-x/2+x/5),y:n+l*a(-x/2+x/5)},"right-top":{x:s+i*u(-x/10),y:n+i*a(-x/10)},right:{x:s+(i*u(-x/10)+l*u(x/10))/2,y:n},"right-bottom":{x:s+i*u(3*x/10),y:n+i*a(3*x/10)},"bottom-right":{x:s+l*u(x/10),y:n+l*a(x/10)},bottom:{x:s,y:n+l},"bottom-left":{x:s+l*u(9*x/10),y:n+l*a(9*x/10)},"left-bottom":{x:s+i*u(7*x/10),y:n+i*a(7*x/10)},left:{x:s+(i*u(11*x/10)+l*u(9*x/10))/2,y:n},"left-top":{x:s+i*u(11*x/10),y:n+i*a(11*x/10)},"top-left":{x:s+l*u(-x/2-x/5),y:n+l*a(-x/2-x/5)},center:{x:s,y:n}};}else e.type==="cloud"?p={"top-left":{x:t+d*.28,y:o+h*.08},top:{x:s,y:o+h*.05},"top-right":{x:t+d*.72,y:o+h*.08},"right-top":{x:r-d*.04,y:o+h*.28},right:{x:r,y:n},"right-bottom":{x:r-d*.06,y:o+h*.72},"bottom-right":{x:t+d*.72,y:c-h*.05},bottom:{x:s,y:c},"bottom-left":{x:t+d*.28,y:c-h*.05},"left-bottom":{x:t+d*.04,y:o+h*.72},left:{x:t,y:n},"left-top":{x:t+d*.04,y:o+h*.28},center:{x:s,y:n}}:p={"top-left":{x:t+d*.25,y:o},top:{x:s,y:o},"top-right":{x:t+d*.75,y:o},"right-top":{x:r,y:o+h*.25},right:{x:r,y:n},"right-bottom":{x:r,y:o+h*.75},"bottom-left":{x:t+d*.25,y:c},bottom:{x:s,y:c},"bottom-right":{x:t+d*.75,y:c},"left-top":{x:t,y:o+h*.25},left:{x:t,y:n},"left-bottom":{x:t,y:o+h*.75},center:{x:s,y:n}};if(e.rotation){let i={x:s,y:n},l={};for(let[u,a]of Object.entries(p))l[u]=u==="center"?a:Rr(a,i,e.rotation);return l}return p}function Ma(e,t){let r=Xo(e);return r[t]||r.center}function oo(e,t,r,o=28){let c=null,d=o;for(let h of t){if(h.id===r||!ji.includes(h.type))continue;let s=Xo(h);for(let[n,p]of Object.entries(s)){let i=Math.hypot(e.x-p.x,e.y-p.y);i<d&&(d=i,c={element:h,anchor:n,point:p,distance:i});}}return c}function Ct(e){let t=new Map;for(let r of e)t.set(r.id,r);return e.map(r=>{if(r.type!=="arrow"&&r.type!=="line"||!r.startBinding&&!r.endBinding)return r;let o={x:r.x,y:r.y},c={x:r.x+r.width,y:r.y+r.height},d=r.startBinding,h=r.endBinding;if(r.startBinding){let x=t.get(r.startBinding.elementId);x?o=Ma(x,r.startBinding.anchor):d=null;}if(r.endBinding){let x=t.get(r.endBinding.elementId);x?c=Ma(x,r.endBinding.anchor):h=null;}let s=o.x-r.x,n=o.y-r.y,p=c.x-(r.x+r.width),i=c.y-(r.y+r.height),l=r.controlPoint;l&&(l={x:l.x+(s+p)/2,y:l.y+(n+i)/2});let u=r.controlPoint1;u&&(u={x:u.x+s*.7+p*.3,y:u.y+n*.7+i*.3});let a=r.controlPoint2;return a&&(a={x:a.x+s*.3+p*.7,y:a.y+n*.3+i*.7}),{...r,x:o.x,y:o.y,width:c.x-o.x,height:c.y-o.y,controlPoint:l,controlPoint1:u,controlPoint2:a,startBinding:d,endBinding:h}})}function Er(e,t={}){let{deltaX:r=24,deltaY:o=24,highestZ:c=0}=t,d=new Map,h=new Map,s=[];return e.forEach((p,i)=>{let l=`el_${Date.now()}_${i}_${Math.random().toString(36).substring(2,7)}`;d.set(p.id,l),s.push(l),p.groupIds&&p.groupIds.length>0&&p.groupIds.forEach(u=>{h.has(u)||h.set(u,`grp_${Date.now()}_${i}_${Math.random().toString(36).substring(2,7)}`);});}),{clonedElements:e.map((p,i)=>{let l=d.get(p.id),u;p.groupIds&&p.groupIds.length>0&&(u=p.groupIds.map(S=>h.get(S)));let a=p.startBinding;p.startBinding&&(d.has(p.startBinding.elementId)?a={...p.startBinding,elementId:d.get(p.startBinding.elementId)}:a=null);let x=p.endBinding;p.endBinding&&(d.has(p.endBinding.elementId)?x={...p.endBinding,elementId:d.get(p.endBinding.elementId)}:x=null);let m=p.controlPoint;m&&(m={x:m.x+r,y:m.y+o});let g=p.controlPoint1;g&&(g={x:g.x+r,y:g.y+o});let w=p.controlPoint2;w&&(w={x:w.x+r,y:w.y+o});let _=p.points;return _&&_.length>0&&(_=_.map(S=>({x:S.x+r,y:S.y+o}))),{...p,id:l,x:p.x+r,y:p.y+o,zIndex:c+i+1,groupIds:u,startBinding:a,endBinding:x,controlPoint:m,controlPoint1:g,controlPoint2:w,points:_}}),newSelectedIds:s}}function Gr(e,t){if(!t||t.length===0)return e;let r=new Set(t),o=new Set;for(let d of e)r.has(d.id)&&d.type!=="arrow"&&d.type!=="line"&&o.add(d.id);let c=e.filter(d=>{if(r.has(d.id))return false;if(d.type==="arrow"||d.type==="line"){let h=d.startBinding&&o.has(d.startBinding.elementId),s=d.endBinding&&o.has(d.endBinding.elementId);if(h||s)return false}return true});return Ct(c)}function Na({dragInitialBounds:e,rawDx:t,rawDy:r,allElements:o,selectedIds:c,snapThreshold:d=8}){let h={id:"dragging",minX:e.x+t,maxX:e.x+t+e.width,centerX:e.x+t+e.width/2,minY:e.y+r,maxY:e.y+r+e.height,centerY:e.y+r+e.height/2,width:e.width,height:e.height},s=[];for(let w of o){if(c.includes(w.id)||w.type==="pen"||w.type==="arrow"||w.type==="line")continue;let _=bt(w);_.width<5||_.height<5||s.push({id:w.id,minX:_.x,maxX:_.x+_.width,centerX:_.x+_.width/2,minY:_.y,maxY:_.y+_.height,centerY:_.y+_.height/2,width:_.width,height:_.height});}if(s.length===0)return {snappedDx:t,snappedDy:r,alignmentGuides:[],spacingGuides:[]};let n=null,p=null;for(let w of s){let _=[{dragVal:h.minX,targetVal:w.minX,type:"edge",snapDelta:w.minX-h.minX},{dragVal:h.minX,targetVal:w.maxX,type:"edge",snapDelta:w.maxX-h.minX},{dragVal:h.centerX,targetVal:w.centerX,type:"center",snapDelta:w.centerX-h.centerX},{dragVal:h.maxX,targetVal:w.minX,type:"edge",snapDelta:w.minX-h.maxX},{dragVal:h.maxX,targetVal:w.maxX,type:"edge",snapDelta:w.maxX-h.maxX}];for(let E of _){let z=Math.abs(E.snapDelta);if(z<=d&&(!n||z<Math.abs(n.diff))){let D=Math.min(h.minY,w.minY)-16,P=Math.max(h.maxY,w.maxY)+16;n={diff:E.snapDelta,guide:{orientation:"vertical",position:E.targetVal,from:D,to:P,type:E.type}};}}let S=[{dragVal:h.minY,targetVal:w.minY,type:"edge",snapDelta:w.minY-h.minY},{dragVal:h.minY,targetVal:w.maxY,type:"edge",snapDelta:w.maxY-h.minY},{dragVal:h.centerY,targetVal:w.centerY,type:"center",snapDelta:w.centerY-h.centerY},{dragVal:h.maxY,targetVal:w.minY,type:"edge",snapDelta:w.minY-h.maxY},{dragVal:h.maxY,targetVal:w.maxY,type:"edge",snapDelta:w.maxY-h.maxY}];for(let E of S){let z=Math.abs(E.snapDelta);if(z<=d&&(!p||z<Math.abs(p.diff))){let D=Math.min(h.minX,w.minX)-16,P=Math.max(h.maxX,w.maxX)+16;p={diff:E.snapDelta,guide:{orientation:"horizontal",position:E.targetVal,from:D,to:P,type:E.type}};}}}let i=t+(n?n.diff:0),l=r+(p?p.diff:0),u=[];n&&u.push(n.guide),p&&u.push(p.guide);let a=[],x={...h,minX:e.x+i,maxX:e.x+i+e.width,centerX:e.x+i+e.width/2,minY:e.y+l,maxY:e.y+l+e.height,centerY:e.y+l+e.height/2},m=s.filter(w=>Math.max(w.minY,x.minY)<Math.min(w.maxY,x.maxY)).sort((w,_)=>w.minX-_.minX);if(m.length>=2){let w=false;for(let _=0;_<m.length-1;_++){let S=m[_],E=m[_+1];if(S.maxX<x.minX&&x.maxX<E.minX){let z=x.minX-S.maxX,D=E.minX-x.maxX,I=(E.minX-S.maxX-x.width)/2;if(I>5&&Math.abs(z-D)<=d*2){let b=S.maxX+I-x.minX;if(Math.abs(b)<=d){i+=b,x.minX+=b,x.maxX+=b;let f=Math.round(I),v=x.centerY;a.push({orientation:"horizontal",gap:f,lineStart:{x:S.maxX,y:v},lineEnd:{x:x.minX,y:v},badgePos:{x:(S.maxX+x.minX)/2,y:v}}),a.push({orientation:"horizontal",gap:f,lineStart:{x:x.maxX,y:v},lineEnd:{x:E.minX,y:v},badgePos:{x:(x.maxX+E.minX)/2,y:v}}),w=true;break}}}}if(!w)for(let _=0;_<m.length-1;_++){let S=m[_],E=m[_+1],z=E.minX-S.maxX;if(z>5){if(x.minX>=E.maxX){let D=x.minX-E.maxX,P=z-D;if(Math.abs(P)<=d){i+=P,x.minX+=P,x.maxX+=P;let I=Math.round(z),b=x.centerY;a.push({orientation:"horizontal",gap:I,lineStart:{x:S.maxX,y:b},lineEnd:{x:E.minX,y:b},badgePos:{x:(S.maxX+E.minX)/2,y:b}}),a.push({orientation:"horizontal",gap:I,lineStart:{x:E.maxX,y:b},lineEnd:{x:x.minX,y:b},badgePos:{x:(E.maxX+x.minX)/2,y:b}});break}}if(x.maxX<=S.minX){let P=S.minX-x.maxX-z;if(Math.abs(P)<=d){i+=P,x.minX+=P,x.maxX+=P;let I=Math.round(z),b=x.centerY;a.push({orientation:"horizontal",gap:I,lineStart:{x:x.maxX,y:b},lineEnd:{x:S.minX,y:b},badgePos:{x:(x.maxX+S.minX)/2,y:b}}),a.push({orientation:"horizontal",gap:I,lineStart:{x:S.maxX,y:b},lineEnd:{x:E.minX,y:b},badgePos:{x:(S.maxX+E.minX)/2,y:b}});break}}}}}let g=s.filter(w=>Math.max(w.minX,x.minX)<Math.min(w.maxX,x.maxX)).sort((w,_)=>w.minY-_.minY);if(g.length>=2){let w=false;for(let _=0;_<g.length-1;_++){let S=g[_],E=g[_+1];if(S.maxY<x.minY&&x.maxY<E.minY){let z=x.minY-S.maxY,D=E.minY-x.maxY,I=(E.minY-S.maxY-x.height)/2;if(I>5&&Math.abs(z-D)<=d*2){let b=S.maxY+I-x.minY;if(Math.abs(b)<=d){l+=b,x.minY+=b,x.maxY+=b;let f=Math.round(I),v=x.centerX;a.push({orientation:"vertical",gap:f,lineStart:{x:v,y:S.maxY},lineEnd:{x:v,y:x.minY},badgePos:{x:v,y:(S.maxY+x.minY)/2}}),a.push({orientation:"vertical",gap:f,lineStart:{x:v,y:x.maxY},lineEnd:{x:v,y:E.minY},badgePos:{x:v,y:(x.maxY+E.minY)/2}}),w=true;break}}}}if(!w)for(let _=0;_<g.length-1;_++){let S=g[_],E=g[_+1],z=E.minY-S.maxY;if(z>5){if(x.minY>=E.maxY){let D=x.minY-E.maxY,P=z-D;if(Math.abs(P)<=d){l+=P,x.minY+=P,x.maxY+=P;let I=Math.round(z),b=x.centerX;a.push({orientation:"vertical",gap:I,lineStart:{x:b,y:S.maxY},lineEnd:{x:b,y:E.minY},badgePos:{x:b,y:(S.maxY+E.minY)/2}}),a.push({orientation:"vertical",gap:I,lineStart:{x:b,y:E.maxY},lineEnd:{x:b,y:x.minY},badgePos:{x:b,y:(E.maxY+x.minY)/2}});break}}if(x.maxY<=S.minY){let P=S.minY-x.maxY-z;if(Math.abs(P)<=d){l+=P,x.minY+=P,x.maxY+=P;let I=Math.round(z),b=x.centerX;a.push({orientation:"vertical",gap:I,lineStart:{x:b,y:x.maxY},lineEnd:{x:b,y:S.minY},badgePos:{x:b,y:(x.maxY+S.minY)/2}}),a.push({orientation:"vertical",gap:I,lineStart:{x:b,y:S.maxY},lineEnd:{x:b,y:E.minY},badgePos:{x:b,y:(S.maxY+E.minY)/2}});break}}}}}return {snappedDx:i,snappedDy:l,alignmentGuides:u,spacingGuides:a}}function Ta({readOnly:e=false,tool:t,setTool:r,isToolLocked:o=false,camera:c,screenToWorld:d,panBy:h,elements:s,setElements:n,selectedIds:p,selectElement:i,selectElements:l,clearSelection:u,addElement:a,deleteSelectedElements:x,duplicateSelectedElements:m,groupSelectedElements:g,ungroupSelectedElements:w,pushHistory:_,undo:S,redo:E,defaultStyles:z,onEditText:D,onLaserDrawStart:P,onLaserDrawMove:I,onLaserDrawEnd:b,onLaserHover:f}){let v=useRef(s),C=useRef(p);useEffect(()=>{v.current=s,C.current=p;},[s,p]);let[M,R]=useState(false),[J,oe]=useState(null),[A,U]=useState(null),G=useMemo(()=>e||M||t==="hand"?"grab":t==="select"?"default":t==="laser"?"none":t==="eraser"?"crosshair":t==="text"?"text":"crosshair",[e,t,M]),[Ne,ne]=useState(null),le=Ne||G,[ce,ke]=useState(null),[Ie,we]=useState([]),[Ge,Ue]=useState([]),ee=useRef({mode:"none",startScreenPt:{x:0,y:0},startWorldPt:{x:0,y:0}});useEffect(()=>{let Z=K=>{if(!(K.target instanceof HTMLInputElement||K.target instanceof HTMLTextAreaElement||K.target.isContentEditable)){if(e){K.code==="Space"&&!K.repeat&&(K.preventDefault(),R(true));return}if(K.code==="Space"&&!K.repeat)K.preventDefault(),R(true);else if(K.key==="Delete"||K.key==="Backspace")x();else if((K.ctrlKey||K.metaKey)&&K.key.toLowerCase()==="z")K.preventDefault(),K.shiftKey?E():S();else if((K.ctrlKey||K.metaKey)&&K.key.toLowerCase()==="y")K.preventDefault(),E();else if((K.ctrlKey||K.metaKey)&&K.key.toLowerCase()==="d")K.preventDefault(),m();else if((K.ctrlKey||K.metaKey)&&K.key.toLowerCase()==="a")K.preventDefault(),v.current.length>0&&(l(v.current.map(de=>de.id)),r("select"));else if((K.ctrlKey||K.metaKey)&&K.key.toLowerCase()==="g")K.preventDefault(),K.shiftKey?w?.():g?.();else if(!K.ctrlKey&&!K.metaKey&&(K.key==="ArrowUp"||K.key==="ArrowDown"||K.key==="ArrowLeft"||K.key==="ArrowRight")&&C.current.length>0){K.preventDefault();let de=K.shiftKey?10:2,re=K.key==="ArrowLeft"?-de:K.key==="ArrowRight"?de:0,T=K.key==="ArrowUp"?-de:K.key==="ArrowDown"?de:0,L=C.current;n(q=>{let k=q.map(V=>L.includes(V.id)?{...V,x:V.x+re,y:V.y+T,points:V.points?.map($=>({x:$.x+re,y:$.y+T})),controlPoint:V.controlPoint?{x:V.controlPoint.x+re,y:V.controlPoint.y+T}:V.controlPoint,controlPoint1:V.controlPoint1?{x:V.controlPoint1.x+re,y:V.controlPoint1.y+T}:V.controlPoint1,controlPoint2:V.controlPoint2?{x:V.controlPoint2.x+re,y:V.controlPoint2.y+T}:V.controlPoint2}:V),pe=Ct(k);return _(pe),pe});}}},Se=K=>{K.code==="Space"&&R(false);};return window.addEventListener("keydown",Z),window.addEventListener("keyup",Se),()=>{window.removeEventListener("keydown",Z),window.removeEventListener("keyup",Se);}},[x,m,g,w,S,E,l,r,n,_]);let Pe=useCallback(Z=>{if(e){(Z.button===0||Z.button===1)&&(ee.current={mode:"pan",startScreenPt:{x:Z.clientX,y:Z.clientY},startWorldPt:d({x:Z.clientX,y:Z.clientY})},ne("grabbing"));return}if(Z.button===1||M||t==="hand"){ee.current={mode:"pan",startScreenPt:{x:Z.clientX,y:Z.clientY},startWorldPt:d({x:Z.clientX,y:Z.clientY})},ne("grabbing");return}if(Z.button!==0)return;let Se=Z.currentTarget.getBoundingClientRect(),K={x:Z.clientX-Se.left,y:Z.clientY-Se.top},de=d(K);if(t==="laser"){u(),P?.(de),ee.current={mode:"laser",startScreenPt:K,startWorldPt:de};return}if(p.length===1){let L=s.find(q=>q.id===p[0]);if(L){let q=go(L),k=mo(de,q,12/c.zoom);if(k){let pe=new Map;if(pe.set(L.id,{...L}),k.type==="start"||k.type==="end"){ee.current={mode:"arrow-endpoint",startScreenPt:K,startWorldPt:de,activeElementId:L.id,initialElementSnapshots:pe,arrowHandleType:k.type};return}if(k.type==="middle"){ee.current={mode:"arrow-control",startScreenPt:K,startWorldPt:de,activeElementId:L.id,initialElementSnapshots:pe,arrowHandleType:"middle"};return}if(k.type==="control1"||k.type==="control2"){ee.current={mode:k.type==="control1"?"arrow-control1":"arrow-control2",startScreenPt:K,startWorldPt:de,activeElementId:L.id,initialElementSnapshots:pe,arrowHandleType:k.type};return}if(k.type==="rotate"){let V=L.x+L.width/2,$=L.y+L.height/2,te=Math.atan2(de.y-$,de.x-V);ee.current={mode:"rotate",startScreenPt:K,startWorldPt:de,activeElementId:L.id,initialElementSnapshots:pe,initialAngle:te,initialRotation:L.rotation||0};}else ee.current={mode:"resize",startScreenPt:K,startWorldPt:de,activeElementId:L.id,initialElementSnapshots:pe,activeHandle:k};return}}}else if(p.length>1){let L=s.filter(k=>p.includes(k.id)),q=jr(L,6);if(q){let k=yo(q),pe=mo(de,k,12/c.zoom);if(pe){let V=new Map;if(L.forEach($=>V.set($.id,{...$})),pe.type==="rotate"){let $=q.x+q.width/2,te=q.y+q.height/2,fe=Math.atan2(de.y-te,de.x-$);ee.current={mode:"rotate",startScreenPt:K,startWorldPt:de,initialElementSnapshots:V,initialGroupBounds:q,initialAngle:fe,initialRotation:0};}else ee.current={mode:"resize",startScreenPt:K,startWorldPt:de,initialElementSnapshots:V,initialGroupBounds:q,activeHandle:pe};return}}}if(t==="select"){let L=Dr(de,s,8/c.zoom),q=false;if(!L&&p.length>1&&!Z.shiftKey){let k=s.filter(V=>p.includes(V.id)),pe=jr(k,8);pe&&de.x>=pe.x&&de.x<=pe.x+pe.width&&de.y>=pe.y&&de.y<=pe.y+pe.height&&(q=true);}if(L||q){let k=Z.shiftKey,pe=Z.ctrlKey||Z.metaKey,V=p,$=[];if(L){$=[L.id];let fe=p.length===1&&p[0]===L.id;if(L.groupIds&&L.groupIds.length>0&&!pe&&!fe){let F=L.groupIds[L.groupIds.length-1];$=s.filter(ve=>ve.groupIds&&ve.groupIds.includes(F)).map(ve=>ve.id);}let be=$.every(F=>p.includes(F)),ue=p.includes(L.id);k?(be?V=p.filter(F=>!$.includes(F)):V=Array.from(new Set([...p,...$])),l(V)):ue||(V=$,l(V));}let te=new Map;if(Z.altKey){let fe=s.filter(ve=>V.includes(ve.id)),be=s.reduce((ve,ae)=>Math.max(ve,ae.zIndex??0),0),{clonedElements:ue,newSelectedIds:F}=Er(fe,{deltaX:0,deltaY:0,highestZ:be});if(ue.length>0){ue.forEach(ae=>{te.set(ae.id,{...ae});});let ve=Ct([...s,...ue]);n(ve),l(F);}}else {let fe=s.filter(ue=>V.includes(ue.id));fe.forEach(ue=>{te.set(ue.id,{...ue});});let be=fe.filter(ue=>ue.type==="frame");if(be.length>0){let ue=F=>({x:F.width<0?F.x+F.width:F.x,y:F.height<0?F.y+F.height:F.y,width:Math.abs(F.width),height:Math.abs(F.height)});s.forEach(F=>{if(F.type==="frame"||te.has(F.id))return;let ve=ue(F),ae=ve.x+ve.width/2,ze=ve.y+ve.height/2;be.some(nt=>{let et=ue(nt);return ae>=et.x&&ae<=et.x+et.width&&ze>=et.y&&ze<=et.y+et.height})&&te.set(F.id,{...F});});}}ee.current={mode:"move",startScreenPt:K,startWorldPt:de,initialElementSnapshots:te,pendingSingleClickTarget:L&&!k&&p.includes(L.id)&&p.length>1?$:void 0,dragMoved:false};}else Z.shiftKey||u(),oe({startX:de.x,startY:de.y,currentX:de.x,currentY:de.y}),ee.current={mode:"marquee",startScreenPt:K,startWorldPt:de};return}if(t==="eraser"){let L=Dr(de,s,12/c.zoom);if(L){let q=Gr(s,[L.id]);n(q),_(q);}ee.current={mode:"erase",startScreenPt:K,startWorldPt:de};return}if(t==="text"||t==="sticky"){let L=Dr(de,s,8/c.zoom);if(L&&["text","sticky","rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star"].includes(L.type)){i(L.id),o||r("select"),D?.(L);return}}let re=`el_${Date.now()}_${Math.random().toString(36).substring(2,7)}`,T=s.reduce((L,q)=>Math.max(L,q.zIndex??0),0);if(t==="arrow"||t==="line"){let L=oo(de,s),q=L?L.point:de,k=L?{elementId:L.element.id,anchor:L.anchor}:null,pe={...z,id:re,type:t,x:q.x,y:q.y,width:1,height:1,arrowType:z.arrowType||"straight",startArrowhead:t==="arrow"&&z.startArrowhead||"none",endArrowhead:t==="arrow"?z.endArrowhead||"arrow":"none",strokeStyle:z.strokeStyle||"solid",startBinding:k,endBinding:null,zIndex:T+1};a(pe),ee.current={mode:"draw",startScreenPt:K,startWorldPt:q,activeElementId:re};}else if(t==="pen"){let L={...z,id:re,type:"pen",x:de.x,y:de.y,width:0,height:0,points:[de],zIndex:T+1};a(L),ee.current={mode:"draw",startScreenPt:K,startWorldPt:de,activeElementId:re};}else if(t==="text"){let L={...z,id:re,type:"text",x:de.x,y:de.y,width:140,height:36,text:"",zIndex:T+1};a(L),o?u():(i(re),r("select")),D&&D(L),_([...s,L]);}else if(t==="sticky"){let L={...z,id:re,type:"sticky",x:de.x,y:de.y,width:180,height:180,text:"",zIndex:T+1,fillColor:z.stickyColor||"#fef08a",stickyColor:z.stickyColor||"#fef08a"};a(L),o?u():(i(re),r("select")),D&&D(L),_([...s,L]);}else if(t==="frame"){let L=s.filter(k=>k.type==="frame").length,q={...z,id:re,type:"frame",x:de.x,y:de.y,width:1,height:1,frameLabel:`Slide ${L+1}`,strokeColor:"#0b6eff",strokeWidth:1.5,strokeStyle:"solid",fillColor:"transparent",zIndex:0};a(q),ee.current={mode:"draw",startScreenPt:K,startWorldPt:de,activeElementId:re};}else if(t==="table"){let te={...z,id:re,type:"table",x:de.x,y:de.y,width:420,height:126,rows:3,cols:3,colWidths:[140,140,140],rowHeights:[42,42,42],hasHeaderRow:true,hasHeaderCol:false,tableStyle:"header-accent",cells:{"0_0":{text:"Header 1",bold:true,align:"center"},"0_1":{text:"Header 2",bold:true,align:"center"},"0_2":{text:"Header 3",bold:true,align:"center"},"1_0":{text:"Item 1",align:"left"},"1_1":{text:"",align:"left"},"1_2":{text:"",align:"left"},"2_0":{text:"Item 2",align:"left"},"2_1":{text:"",align:"left"},"2_2":{text:"",align:"left"}},zIndex:T+1};a(te),ee.current={mode:"draw",startScreenPt:K,startWorldPt:de,activeElementId:re};}else {let L={...z,id:re,type:t,x:de.x,y:de.y,width:1,height:1,zIndex:T+1};a(L),ee.current={mode:"draw",startScreenPt:K,startWorldPt:de,activeElementId:re};}},[M,t,d,p,s,c.zoom,i,u,z,a,r,D,_,n,P,o,l]),xe=useCallback(Z=>{let Se=ee.current.mode,K=Z.currentTarget.getBoundingClientRect(),de={x:Z.clientX-K.left,y:Z.clientY-K.top},re=d(de);if(t==="laser"){f?.(re),Se==="laser"&&I?.(re);return}if(Se==="none"){if(e){ke(null),U(null),ne(null);return}if(t==="arrow"||t==="line"){let T=oo(re,s);ke(T?{elementId:T.element.id,anchor:T.anchor,point:T.point}:null);}else ke(null);if(t==="select"){if(p.length===1){let T=s.find(L=>L.id===p[0]);if(T){let L=go(T),q=mo(re,L,10/c.zoom);if(q){ne(q.cursor),U(q);return}}}else if(p.length>1){let T=s.filter(q=>p.includes(q.id)),L=jr(T,6);if(L){let q=yo(L),k=mo(re,q,10/c.zoom);if(k){ne(k.cursor),U(k);return}}}}if(U(null),M||t==="hand")ne("grab");else if(t==="select"){let L=!!Dr(re,s,8/c.zoom);if(!L&&p.length>1){let q=s.filter(pe=>p.includes(pe.id)),k=jr(q,8);k&&re.x>=k.x&&re.x<=k.x+k.width&&re.y>=k.y&&re.y<=k.y+k.height&&(L=true);}ne(L?"move":null);}return}if(Se==="pan"){let T=(Z.clientX-ee.current.startScreenPt.x)/c.zoom,L=(Z.clientY-ee.current.startScreenPt.y)/c.zoom;h(T,L),ee.current.startScreenPt={x:Z.clientX,y:Z.clientY};return}if(Se==="erase"){let T=Dr(re,s,12/c.zoom);T&&n(L=>Gr(L,[T.id]));return}if(Se==="draw"&&ee.current.activeElementId){let T=ee.current.activeElementId,L=ee.current.startWorldPt,q=re,k=null;if(t==="arrow"||t==="line"){let pe=s.find($=>$.id===T),V=oo(re,s,pe?.startBinding?.elementId);V?(q=V.point,k={elementId:V.element.id,anchor:V.anchor},ke({elementId:V.element.id,anchor:V.anchor,point:V.point})):ke(null);}n(pe=>pe.map(V=>{if(V.id!==T)return V;if(V.type==="pen"){let ue=V.points||[];return {...V,points:[...ue,re]}}if(V.type==="arrow"||V.type==="line")return {...V,width:q.x-V.x,height:q.y-V.y,endBinding:k};if(V.type==="table"){let ue=Math.min(L.x,re.x),F=Math.min(L.y,re.y),ve=Math.max(90,Math.abs(re.x-L.x)),ae=Math.max(60,Math.abs(re.y-L.y)),ze=V.cols||3,Le=V.rows||3;return {...V,x:ue,y:F,width:ve,height:ae,colWidths:Array.from({length:ze},()=>ve/ze),rowHeights:Array.from({length:Le},()=>ae/Le)}}let $=Math.min(L.x,re.x),te=Math.min(L.y,re.y),fe=Math.abs(re.x-L.x),be=Math.abs(re.y-L.y);return {...V,x:$,y:te,width:Math.max(10,fe),height:Math.max(10,be)}}));return}if(Se==="move"&&ee.current.initialElementSnapshots){let T=re.x-ee.current.startWorldPt.x,L=re.y-ee.current.startWorldPt.y,q=ee.current.initialElementSnapshots;Math.hypot(T,L)>2&&(ee.current.dragMoved=true);let k=1/0,pe=1/0,V=-1/0,$=-1/0;q.forEach(F=>{let ve=bt(F);k=Math.min(k,ve.x),pe=Math.min(pe,ve.y),V=Math.max(V,ve.x+ve.width),$=Math.max($,ve.y+ve.height);});let te={x:k,y:pe,width:V-k,height:$-pe},fe=Na({dragInitialBounds:te,rawDx:T,rawDy:L,allElements:v.current,selectedIds:Array.from(q.keys()),snapThreshold:7/c.zoom}),be=fe.snappedDx,ue=fe.snappedDy;we(fe.alignmentGuides),Ue(fe.spacingGuides),n(F=>{let ve=F.map(ae=>{let ze=q.get(ae.id);return ze?{...ae,x:ze.x+be,y:ze.y+ue,points:ze.points?.map(Le=>({x:Le.x+be,y:Le.y+ue})),controlPoint:ze.controlPoint?{x:ze.controlPoint.x+be,y:ze.controlPoint.y+ue}:void 0,controlPoint1:ze.controlPoint1?{x:ze.controlPoint1.x+be,y:ze.controlPoint1.y+ue}:void 0,controlPoint2:ze.controlPoint2?{x:ze.controlPoint2.x+be,y:ze.controlPoint2.y+ue}:void 0}:ae});return Ct(ve)});return}if(Se==="arrow-endpoint"&&ee.current.activeElementId&&ee.current.arrowHandleType){let T=ee.current.activeElementId,L=ee.current.arrowHandleType,q=v.current,k=q.find($=>$.id===T);if(!k)return;let pe=re,V=null;if(L==="start"){let $=oo(re,q,k.endBinding?.elementId);$?(pe=$.point,V={elementId:$.element.id,anchor:$.anchor},ke({elementId:$.element.id,anchor:$.anchor,point:$.point})):ke(null);}else {let $=oo(re,q,k.startBinding?.elementId);$?(pe=$.point,V={elementId:$.element.id,anchor:$.anchor},ke({elementId:$.element.id,anchor:$.anchor,point:$.point})):ke(null);}n($=>$.map(te=>{if(te.id!==T)return te;if(L==="start"){let fe={x:te.x+te.width,y:te.y+te.height};return {...te,x:pe.x,y:pe.y,width:fe.x-pe.x,height:fe.y-pe.y,startBinding:V}}else return {...te,width:pe.x-te.x,height:pe.y-te.y,endBinding:V}}));return}if(Se==="arrow-control"&&ee.current.activeElementId){let T=ee.current.activeElementId;n(L=>L.map(q=>{if(q.id!==T)return q;let k={x:q.x,y:q.y},pe={x:q.x+q.width,y:q.y+q.height},V={x:2*re.x-.5*k.x-.5*pe.x,y:2*re.y-.5*k.y-.5*pe.y};return {...q,arrowType:"curved",controlPoint:V}}));return}if(Se==="arrow-control1"&&ee.current.activeElementId){let T=ee.current.activeElementId;n(L=>L.map(q=>q.id!==T?q:{...q,arrowType:"elbow",controlPoint1:re}));return}if(Se==="arrow-control2"&&ee.current.activeElementId){let T=ee.current.activeElementId;n(L=>L.map(q=>q.id!==T?q:{...q,arrowType:"elbow",controlPoint2:re}));return}if(Se==="resize"&&ee.current.initialElementSnapshots&&ee.current.activeHandle){let T=ee.current.activeHandle,L=re.x-ee.current.startWorldPt.x,q=re.y-ee.current.startWorldPt.y;if(ee.current.activeElementId){let k=ee.current.initialElementSnapshots.get(ee.current.activeElementId);if(!k)return;if(k.type==="text"){let be=k.fontSize||20,ue=1;T.type==="e"||T.type==="se"||T.type==="ne"?ue=Math.max(.2,(k.width+L)/k.width):T.type==="w"||T.type==="sw"||T.type==="nw"?ue=Math.max(.2,(k.width-L)/k.width):T.type==="s"?ue=Math.max(.2,(k.height+q)/k.height):T.type==="n"&&(ue=Math.max(.2,(k.height-q)/k.height));let F=Math.max(8,Math.min(180,Math.round(be*ue))),ve=ar(k.fontFamily),ae=Math.max(30,Math.round(k.width*(F/be))),ze=Math.max(20,Math.round(k.height*(F/be)));if(typeof window<"u"){let gt=document.createElement("canvas").getContext("2d");if(gt){let St=ve.value==="patrick",N=ve.value==="comic"||ve.value==="handlee",ye=ve.value==="fuzzy"||ve.value==="edusa",Te=St||N||ye?"400":"500";gt.font=`normal ${Te} ${F}px ${ve.cssFont}`;let kt=(k.text||"").split(`
|
|
6
|
-
`),ut=0;for(let jt of kt){let Ye=gt.measureText(jt||" ").width;Ye>ut&&(ut=Ye);}let Lt=F*1.35;ae=Math.max(30,Math.ceil(ut+16)),ze=Math.max(Math.ceil(Lt+4),Math.ceil(kt.length*Lt+4));}}let Le=k.x,nt=k.y;T.type.includes("w")&&(Le=k.x+(k.width-ae)),T.type.includes("n")&&(nt=k.y+(k.height-ze)),n(et=>{let gt=et.map(St=>St.id===k.id?{...St,x:Le,y:nt,width:ae,height:ze,fontSize:F}:St);return Ct(gt)});return}let pe=k.x,V=k.y,$=k.width,te=k.height;if((k.aspectRatioLocked||k.type==="image"||Z.shiftKey)&&k.width>0&&k.height>0){let be=k.naturalWidth&&k.naturalHeight?k.naturalWidth/k.naturalHeight:k.width/k.height;T.type==="se"?($=Math.max(20,k.width+L),te=Math.round($/be)):T.type==="sw"?($=Math.max(20,k.width-L),te=Math.round($/be),pe=k.x+(k.width-$)):T.type==="ne"?($=Math.max(20,k.width+L),te=Math.round($/be),V=k.y+(k.height-te)):T.type==="nw"?($=Math.max(20,k.width-L),te=Math.round($/be),pe=k.x+(k.width-$),V=k.y+(k.height-te)):T.type==="e"||T.type==="w"?($=Math.max(20,T.type==="e"?k.width+L:k.width-L),te=Math.round($/be),T.type==="w"&&(pe=k.x+(k.width-$)),V=k.y+(k.height-te)/2):(T.type==="n"||T.type==="s")&&(te=Math.max(20,T.type==="s"?k.height+q:k.height-q),$=Math.round(te*be),T.type==="n"&&(V=k.y+(k.height-te)),pe=k.x+(k.width-$)/2);}else {if(T.type.includes("e")&&($=Math.max(15,k.width+L)),T.type.includes("s")&&(te=Math.max(15,k.height+q)),T.type.includes("w")){let be=k.width-15,ue=Math.min(L,be);pe=k.x+ue,$=k.width-ue;}if(T.type.includes("n")){let be=k.height-15,ue=Math.min(q,be);V=k.y+ue,te=k.height-ue;}}n(be=>{let ue=be.map(F=>{if(F.id!==k.id)return F;let ve=F.points;if(F.points&&F.points.length>0){let ae=$/(k.width||1),ze=te/(k.height||1);ve=F.points.map(Le=>({x:pe+(Le.x-k.x)*ae,y:V+(Le.y-k.y)*ze}));}if(F.type==="table"){let ae=F.cols||3,ze=F.rows||3,Le=$/Math.max(1,k.width),nt=te/Math.max(1,k.height),et=k.colWidths&&k.colWidths.length===ae?k.colWidths:Array.from({length:ae},()=>k.width/ae),gt=k.rowHeights&&k.rowHeights.length===ze?k.rowHeights:Array.from({length:ze},()=>k.height/ze),St=et.map(ye=>Math.max(24,Math.round(ye*Le))),N=gt.map(ye=>Math.max(20,Math.round(ye*nt)));return {...F,x:pe,y:V,width:St.reduce((ye,Te)=>ye+Te,0),height:N.reduce((ye,Te)=>ye+Te,0),colWidths:St,rowHeights:N}}return {...F,x:pe,y:V,width:$,height:te,points:ve}});return Ct(ue)});return}if(ee.current.initialGroupBounds){let k=ee.current.initialGroupBounds,pe=ee.current.initialElementSnapshots,V=k.x,$=k.y,te=k.width,fe=k.height;if(Z.shiftKey&&k.width>0&&k.height>0){let ve=k.width/k.height;T.type==="se"?(te=Math.max(30,k.width+L),fe=Math.round(te/ve)):T.type==="sw"?(te=Math.max(30,k.width-L),fe=Math.round(te/ve),V=k.x+(k.width-te)):T.type==="ne"?(te=Math.max(30,k.width+L),fe=Math.round(te/ve),$=k.y+(k.height-fe)):T.type==="nw"?(te=Math.max(30,k.width-L),fe=Math.round(te/ve),V=k.x+(k.width-te),$=k.y+(k.height-fe)):T.type==="e"||T.type==="w"?(te=Math.max(30,T.type==="e"?k.width+L:k.width-L),fe=Math.round(te/ve),T.type==="w"&&(V=k.x+(k.width-te)),$=k.y+(k.height-fe)/2):(T.type==="n"||T.type==="s")&&(fe=Math.max(30,T.type==="s"?k.height+q:k.height-q),te=Math.round(fe*ve),T.type==="n"&&($=k.y+(k.height-fe)),V=k.x+(k.width-te)/2);}else {if(T.type.includes("e")&&(te=Math.max(30,k.width+L)),T.type.includes("s")&&(fe=Math.max(30,k.height+q)),T.type.includes("w")){let ve=Math.min(L,k.width-30);V=k.x+ve,te=k.width-ve;}if(T.type.includes("n")){let ve=Math.min(q,k.height-30);$=k.y+ve,fe=k.height-ve;}}let ue=te/(k.width||1),F=fe/(k.height||1);n(ve=>{let ae=ve.map(ze=>{let Le=pe.get(ze.id);if(!Le)return ze;let nt=(Le.x-k.x)/k.width,et=(Le.y-k.y)/k.height,gt=V+nt*te,St=$+et*fe,N=Math.max(5,Le.width*ue),ye=Math.max(5,Le.height*F),Te=Le.fontSize;if(Le.fontSize){let Ye=Math.min(ue,F);Te=Math.max(8,Math.min(180,Math.round(Le.fontSize*Ye)));}let kt=Le.points;Le.points&&Le.points.length>0&&(kt=Le.points.map(Ye=>({x:V+(Ye.x-k.x)/k.width*te,y:$+(Ye.y-k.y)/k.height*fe})));let ut=Le.controlPoint;Le.controlPoint&&(ut={x:V+(Le.controlPoint.x-k.x)/k.width*te,y:$+(Le.controlPoint.y-k.y)/k.height*fe});let Lt=Le.controlPoint1;Le.controlPoint1&&(Lt={x:V+(Le.controlPoint1.x-k.x)/k.width*te,y:$+(Le.controlPoint1.y-k.y)/k.height*fe});let jt=Le.controlPoint2;return Le.controlPoint2&&(jt={x:V+(Le.controlPoint2.x-k.x)/k.width*te,y:$+(Le.controlPoint2.y-k.y)/k.height*fe}),{...ze,x:gt,y:St,width:N,height:ye,fontSize:Te,points:kt,controlPoint:ut,controlPoint1:Lt,controlPoint2:jt}});return Ct(ae)});return}}if(Se==="rotate"&&ee.current.initialElementSnapshots&&ee.current.initialAngle!==void 0){if(ee.current.initialGroupBounds){let T=ee.current.initialGroupBounds,L=T.x+T.width/2,q=T.y+T.height/2,pe=Math.atan2(re.y-q,re.x-L)-ee.current.initialAngle;if(Z.shiftKey){let $=Math.PI/4;pe=Math.round(pe/$)*$;}let V=ee.current.initialElementSnapshots;n($=>{let te=$.map(fe=>{let be=V.get(fe.id);if(!be)return fe;let ue={x:be.x+be.width/2,y:be.y+be.height/2},F=Rr(ue,{x:L,y:q},pe),ve=((be.rotation||0)+pe)%(Math.PI*2),ae=be.points;return be.points&&be.points.length>0&&(ae=be.points.map(ze=>Rr(ze,{x:L,y:q},pe))),{...fe,x:F.x-be.width/2,y:F.y-be.height/2,rotation:ve,points:ae}});return Ct(te)});return}if(ee.current.activeElementId&&ee.current.initialRotation!==void 0){let T=ee.current.initialElementSnapshots.get(ee.current.activeElementId);if(!T)return;let L=T.x+T.width/2,q=T.y+T.height/2,pe=Math.atan2(re.y-q,re.x-L)-ee.current.initialAngle,V=(ee.current.initialRotation+pe)%(Math.PI*2);if(Z.shiftKey){let $=Math.PI/4;V=Math.round(V/$)*$;}n($=>{let te=$.map(fe=>fe.id===T.id?{...fe,rotation:V}:fe);return Ct(te)});return}}if(Se==="marquee"&&J){oe(L=>L?{...L,currentX:re.x,currentY:re.y}:null);let T=Sa({...J,currentX:re.x,currentY:re.y},s);l(T.map(L=>L.id));}},[t,p,s,c.zoom,M,h,d,J,l,n,f,I]),O=useCallback(()=>{let Z=ee.current.mode;if(ke(null),Z==="pan")ee.current.mode="none",ne(null);else if(Z==="draw"){if(ee.current.activeElementId){let Se=ee.current.activeElementId,K=v.current,de=K.find(T=>T.id===Se),re=v.current;de?.type==="frame"&&(Math.abs(de.width)<40||Math.abs(de.height)<40)&&(re=K.map(q=>q.id===Se?{...q,x:Math.round(ee.current.startWorldPt.x-800/2),y:Math.round(ee.current.startWorldPt.y-450/2),width:800,height:450}:q),n(re)),o?u():(i(ee.current.activeElementId),t!=="pen"&&r("select")),_(re);}}else Z==="move"||Z==="resize"||Z==="rotate"||Z==="erase"||Z==="arrow-endpoint"||Z==="arrow-control"||Z==="arrow-control1"||Z==="arrow-control2"?Z==="move"?!ee.current.dragMoved&&ee.current.pendingSingleClickTarget?l(ee.current.pendingSingleClickTarget):ee.current.dragMoved&&_(v.current):_(v.current):Z==="laser"&&b?.();ee.current={mode:"none",startScreenPt:{x:0,y:0},startWorldPt:{x:0,y:0}},oe(null),we([]),Ue([]);},[t,i,l,r,_,b,u,o,n]);return {onPointerDown:Pe,onPointerMove:xe,onPointerUp:O,cursor:le,marquee:J,activeHandle:A,hoveredAnchor:ce,alignmentGuides:Ie,spacingGuides:Ge}}function Vi(e,t,r,o){e.save();for(let c of t)if(!(!c.points||c.points.length===0))if(c.mode==="persistent"){if(c.points.length===1){let h=c.points[0];e.beginPath(),e.arc(h.x,h.y,3/r.zoom,0,Math.PI*2),e.fillStyle=c.color,e.shadowColor=c.color,e.shadowBlur=10/r.zoom,e.fill();continue}e.save(),e.lineCap="round",e.lineJoin="round",e.beginPath(),e.moveTo(c.points[0].x,c.points[0].y);for(let h=1;h<c.points.length;h++){let s=c.points[h-1],n=c.points[h],p=(s.x+n.x)/2,i=(s.y+n.y)/2;e.quadraticCurveTo(s.x,s.y,p,i);}let d=c.points[c.points.length-1];e.lineTo(d.x,d.y),e.strokeStyle=c.color,e.lineWidth=5.5/r.zoom,e.shadowColor=c.color,e.shadowBlur=12/r.zoom,e.globalAlpha=.85,e.stroke(),e.strokeStyle="#ffffff",e.lineWidth=2.2/r.zoom,e.shadowBlur=3/r.zoom,e.globalAlpha=.95,e.stroke(),e.restore();}else {let h=[];for(let s=0;s<c.points.length;s++){let n=c.points[s],p=o-n.timestamp;if(p<1e3){let i=p/1e3,l=Math.max(0,1-i),u=Math.max(.4,1-i*.6);h.push({x:n.x,y:n.y,alpha:l,widthMultiplier:u});}}if(h.length===0)continue;if(h.length===1){let s=h[0];e.save(),e.beginPath(),e.arc(s.x,s.y,3*s.widthMultiplier/r.zoom,0,Math.PI*2),e.fillStyle=c.color,e.shadowColor=c.color,e.shadowBlur=12/r.zoom,e.globalAlpha=s.alpha,e.fill(),e.restore();continue}e.save(),e.lineCap="round",e.lineJoin="round";for(let s=1;s<h.length;s++){let n=h[s-1],p=h[s],i=(n.alpha+p.alpha)/2,l=(n.widthMultiplier+p.widthMultiplier)/2;e.beginPath(),e.moveTo(n.x,n.y),e.lineTo(p.x,p.y),e.strokeStyle=c.color,e.lineWidth=6*l/r.zoom,e.shadowColor=c.color,e.shadowBlur=12/r.zoom,e.globalAlpha=i*.85,e.stroke(),e.beginPath(),e.moveTo(n.x,n.y),e.lineTo(p.x,p.y),e.strokeStyle="#ffffff",e.lineWidth=2.2*l/r.zoom,e.shadowBlur=3/r.zoom,e.globalAlpha=i*.95,e.stroke();}e.restore();}e.restore();}function Zi(e,t,r,o){e.save();let{x:c,y:d}=t;e.beginPath(),e.arc(c,d,9/o.zoom,0,Math.PI*2),e.fillStyle=r,e.shadowColor=r,e.shadowBlur=16/o.zoom,e.globalAlpha=.35,e.fill(),e.beginPath(),e.arc(c,d,4.5/o.zoom,0,Math.PI*2),e.fillStyle=r,e.shadowColor=r,e.shadowBlur=8/o.zoom,e.globalAlpha=.9,e.fill(),e.beginPath(),e.arc(c,d,2/o.zoom,0,Math.PI*2),e.fillStyle="#ffffff",e.shadowColor="#ffffff",e.shadowBlur=3/o.zoom,e.globalAlpha=1,e.fill(),e.restore();}function qi(e,t,r){if(t.length!==0){e.save(),e.strokeStyle="#ec4899",e.lineWidth=1.2/r.zoom,e.setLineDash([4/r.zoom,3/r.zoom]);for(let o of t)e.beginPath(),o.orientation==="vertical"?(e.moveTo(o.position,o.from),e.lineTo(o.position,o.to)):(e.moveTo(o.from,o.position),e.lineTo(o.to,o.position)),e.stroke(),e.beginPath(),o.orientation==="vertical"?(e.moveTo(o.position-4/r.zoom,o.from),e.lineTo(o.position+4/r.zoom,o.from),e.moveTo(o.position-4/r.zoom,o.to),e.lineTo(o.position+4/r.zoom,o.to)):(e.moveTo(o.from,o.position-4/r.zoom),e.lineTo(o.from,o.position+4/r.zoom),e.moveTo(o.to,o.position-4/r.zoom),e.lineTo(o.to,o.position+4/r.zoom)),e.stroke();e.restore();}}function Ji(e,t,r){if(t.length!==0){e.save();for(let o of t){e.strokeStyle="#ec4899",e.lineWidth=1.5/r.zoom,e.setLineDash([]),e.beginPath(),e.moveTo(o.lineStart.x,o.lineStart.y),e.lineTo(o.lineEnd.x,o.lineEnd.y),e.stroke();let c=4/r.zoom;e.beginPath(),o.orientation==="horizontal"?(e.moveTo(o.lineStart.x,o.lineStart.y-c),e.lineTo(o.lineStart.x,o.lineStart.y+c),e.moveTo(o.lineEnd.x,o.lineEnd.y-c),e.lineTo(o.lineEnd.x,o.lineEnd.y+c)):(e.moveTo(o.lineStart.x-c,o.lineStart.y),e.lineTo(o.lineStart.x+c,o.lineStart.y),e.moveTo(o.lineEnd.x-c,o.lineEnd.y),e.lineTo(o.lineEnd.x+c,o.lineEnd.y)),e.stroke();let d=`${o.gap}`,h=11/r.zoom;e.font=`bold ${h}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;let s=e.measureText(d).width,n=6/r.zoom,p=s+n*2,i=16/r.zoom,l=o.badgePos.x-p/2,u=o.badgePos.y-i/2;e.fillStyle="#ec4899",typeof e.roundRect=="function"?(e.beginPath(),e.roundRect(l,u,p,i,4/r.zoom),e.fill()):e.fillRect(l,u,p,i),e.fillStyle="#ffffff",e.textAlign="center",e.textBaseline="middle",e.fillText(d,o.badgePos.x,o.badgePos.y);}e.restore();}}function xn({elements:e,setElements:t,selectedIds:r,selectElement:o,selectElements:c,clearSelection:d,addElement:h,updateElement:s,deleteSelectedElements:n,duplicateSelectedElements:p,groupSelectedElements:i,ungroupSelectedElements:l,pushHistory:u,undo:a,redo:x,camera:m,screenToWorld:g,worldToScreen:w,panBy:_,zoomAtPoint:S,tool:E,setTool:z,isToolLocked:D=false,setIsToolLocked:P,gridStyle:I,defaultStyles:b,editingElementId:f,setEditingElementId:v,canvasBackground:C,isPresentationOpen:M=false,laserColor:R="#ef4444",laserMode:J="fading",laserStrokes:oe=[],setLaserStrokes:A,laserPointerPos:U=null,setLaserPointerPos:G,readOnly:Ne=false,onDoubleClick:ne}){let le=useRef(null),ce=useRef(null),{resolvedTheme:ke}=nr(),Ie=ho(),we=Ie&&ke==="dark",Ge=xa(C,we),[Ue,ee]=useState(null),Pe=f!==void 0?f:Ue,xe=useCallback(W=>{ee(W),v?.(W);},[v]);function O(W,y,H,ie,Y,he){return ie==="text"?ro(W,y,he):{width:Y,height:0}}let[Z,Se]=useState(""),K=useRef(null),de=useRef(null),re=useRef(null),[T,L]=useState(null),[q,k]=useState(null),pe=useCallback((W,y)=>{let H=W.type==="table",ie=W.frameLabel||W.text||"";if(H){let Y=y||W.editingCell||{row:0,col:0};W.editingCell=Y;let he=`${Y.row}_${Y.col}`;ie=W.cells?.[he]?.text||"";}xe(W.id),Se(ie),setTimeout(()=>{W.type==="frame"?de.current&&(de.current.focus(),de.current.select()):K.current&&(K.current.focus(),W.type!=="text"&&(K.current.style.height="auto",K.current.style.height=`${K.current.scrollHeight}px`),ie&&K.current.select());},50);},[xe]);useEffect(()=>{if(Pe&&Pe!==re.current){let W=e.find(y=>y.id===Pe);if(W){let y=W.frameLabel||W.text||"";if(W.type==="table"){let ie=W.editingCell||{row:0,col:0},Y=`${ie.row}_${ie.col}`;y=W.cells?.[Y]?.text||"";}let H=setTimeout(()=>{Se(ie=>ie!==y?y:ie),W.type==="frame"?de.current&&(de.current.focus(),de.current.select()):K.current&&(K.current.focus(),W.type!=="text"&&(K.current.style.height="auto",K.current.style.height=`${K.current.scrollHeight}px`),y&&K.current.select());},50);return re.current=Pe,()=>clearTimeout(H)}}re.current=Pe;},[Pe,e]),useLayoutEffect(()=>{if(K.current&&Pe){let W=e.find(y=>y.id===Pe);if(W&&W.type!=="text"){let y=K.current;y.style.height="auto",y.style.height=`${y.scrollHeight}px`;}}},[Z,Pe,e,m.zoom]);let V=useCallback(W=>{if(!Pe)return;let y=e.find(he=>he.id===Pe);if(!y){xe(null);return}if(y.type==="text"&&!Z.trim()){t(he=>he.filter(We=>We.id!==Pe)),xe(null);return}let H=ar(y.fontFamily),ie=y.fontSize||(y.type==="sticky"?20:22),Y={};if(y.type==="table"){let he=Lr(y),We=y.editingCell?y.editingCell.row:0,Oe=y.editingCell?y.editingCell.col:0,Fe=`${We}_${Oe}`,qe={...y.cells||{}};qe[Fe]={...qe[Fe]||{},text:Z},Y.cells=qe;let dt=he.getCellBounds(We,Oe),j=H.cssFont,ge=y.fontSize||13,tt=document.createElement("canvas").getContext("2d");if(tt){tt.font=`400 ${ge}px ${j}`;let Ae=Xr(tt,Z,dt.width-16),Ee=Math.max(28,Math.ceil(Ae.length*(ge*1.35)+12));if(Ee>he.rowHeights[We]){let at=[...he.rowHeights];at[We]=Ee,Y.rowHeights=at,Y.height=at.reduce((Be,Ht)=>Be+Ht,0);}}if(W==="next"){let Ae=We,Ee=Oe+1;if(Ee>=he.cols&&(Ee=0,Ae=We+1),Ae>=he.rows){let Ht=[...Y.rowHeights||he.rowHeights,38];Y.rows=he.rows+1,Y.rowHeights=Ht,Y.height=Ht.reduce((Nt,yr)=>Nt+yr,0);}Y.editingCell={row:Ae,col:Ee};let at=`${Ae}_${Ee}`,Be=qe[at]?.text||"";s(Pe,Y),Se(Be),setTimeout(()=>{K.current&&(K.current.focus(),K.current.select());},30);return}else if(W==="prev"){let Ae=We,Ee=Oe-1;if(Ee<0&&(Ee=he.cols-1,Ae=We-1),Ae>=0){Y.editingCell={row:Ae,col:Ee};let at=`${Ae}_${Ee}`,Be=qe[at]?.text||"";s(Pe,Y),Se(Be),setTimeout(()=>{K.current&&(K.current.focus(),K.current.select());},30);return}}Y.editingCell=void 0;}else if(y.type==="frame")Y.frameLabel=Z.trim()||y.frameLabel||"Frame",Y.text=void 0;else if(y.type==="text"){Y.text=Z;let he=ro(Z,ie,y.fontFamily),We=y.width;Y.width=he.width,Y.height=he.height,y.textAlign==="center"?Y.x=Math.round(y.x+We/2-he.width/2):y.textAlign==="right"&&(Y.x=Math.round(y.x+We-he.width));}else if(y.type==="sticky"){Y.text=Z;let he=36,We=Math.max(10,Math.floor((y.width-32)/(ie*.55))),Oe=Z.split(`
|
|
7
|
-
`),Fe=0;for(let dt of Oe)Fe+=Math.max(1,Math.ceil(dt.length/We));let qe=Fe*(ie*1.35)+he;qe>y.height&&(Y.height=Math.round(qe));}else Y.text=Z;s(Pe,Y),u(e.map(he=>he.id===Pe?{...he,...Y}:he)),xe(null);},[Pe,Z,s,u,e,t,xe]),$=useRef(null),te=useCallback(W=>{let y=`ls_${Date.now()}_${Math.random().toString(36).substring(2,6)}`;$.current=y;let H={id:y,color:R,mode:J,points:[{x:W.x,y:W.y,timestamp:Date.now()}]};A?.(ie=>[...ie,H]);},[R,J,A]),fe=useCallback(W=>{let y=$.current;if(!y)return;let H={x:W.x,y:W.y,timestamp:Date.now()};A?.(ie=>ie.map(Y=>Y.id===y?{...Y,points:[...Y.points,H]}:Y));},[A]),be=useCallback(()=>{$.current=null;},[]),ue=useCallback(W=>{G?.(W);},[G]),[F,ve]=useState(0);useEffect(()=>{if(!oe.some(ie=>ie.mode==="fading"&&ie.points.length>0)&&E!=="laser")return;let y,H=()=>{ve(ie=>(ie+1)%1e6),y=requestAnimationFrame(H);};return y=requestAnimationFrame(H),()=>cancelAnimationFrame(y)},[oe,E]),useEffect(()=>{if(!oe.some(H=>H.mode==="fading"))return;let y=setInterval(()=>{let H=Date.now();A?.(ie=>ie.filter(Y=>Y.mode==="persistent"?true:Y.points.some(he=>H-he.timestamp<1200)));},400);return ()=>clearInterval(y)},[oe,A]);let ae=Ta({readOnly:Ne,tool:E,setTool:z,isToolLocked:D,camera:m,screenToWorld:g,panBy:_,elements:e,setElements:t,selectedIds:r,selectElement:o,selectElements:c,clearSelection:d,addElement:h,deleteSelectedElements:n,duplicateSelectedElements:p,groupSelectedElements:i,ungroupSelectedElements:l,pushHistory:u,undo:a,redo:x,defaultStyles:b,onEditText:pe,onLaserDrawStart:te,onLaserDrawMove:fe,onLaserDrawEnd:be,onLaserHover:ue}),ze=useRef({x:0,y:0}),Le=useCallback(W=>{if(!ce.current)return;let y=ce.current.getBoundingClientRect(),H={x:W.clientX-y.left,y:W.clientY-y.top},ie=g(H);ze.current=ie;let Y=r.length===1&&e.find(Oe=>Oe.id===r[0])||null,he=!!(Y&&["rectangle","ellipse","diamond","sticky","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","table","frame"].includes(Y.type)),We=!!ae.activeHandle||ae.cursor.includes("resize")||ae.cursor.includes("grab")||ae.cursor==="grabbing"||!!ae.marquee;if(We){q!==null&&k(null),T!==null&&L(null);return}if(Y&&he&&E==="select"&&!Pe&&!We){let Oe=bt(Y),{x:Fe,y:qe,width:dt,height:j}=Oe,ge=ie.x,Re=ie.y,tt=Math.min(36,Math.min(dt,j)*.45),Ae=42/m.zoom,Ee=82/m.zoom;if(ge>=Fe-Ae&&ge<=Fe+dt+Ae&&Re>=qe-Ee&&Re<=qe+j+Ae){let Be=Math.abs(ge-Fe),Ht=Math.abs(ge-(Fe+dt)),Nt=Math.abs(Re-qe),yr=Math.abs(Re-(qe+j)),br=Math.min(Be,Ht,Nt,yr);br<=tt+Ee?br===Ht?k("right"):br===yr?k("bottom"):br===Be?k("left"):br===Nt&&k("top"):T||k(null);}else T||k(null);}else q!==null&&k(null);},[g,r,e,E,Pe,m.zoom,T,q,ae.activeHandle,ae.cursor,ae.marquee]);useEffect(()=>(window.addEventListener("mousemove",Le),()=>window.removeEventListener("mousemove",Le)),[Le]),useEffect(()=>{let W=ce.current;if(!W)return;let y=H=>{H.preventDefault();let ie=W.getBoundingClientRect(),Y={x:H.clientX-ie.left,y:H.clientY-ie.top};if(H.ctrlKey||H.metaKey){let he=-H.deltaY*.002,We=m.zoom*(1+he);S(We,Y);}else _(-H.deltaX,-H.deltaY);};return W.addEventListener("wheel",y,{passive:false}),()=>{W.removeEventListener("wheel",y);}},[m.zoom,S,_]),useEffect(()=>{let W=y=>{(y.ctrlKey||y.metaKey)&&y.preventDefault();};return window.addEventListener("wheel",W,{passive:false}),()=>{window.removeEventListener("wheel",W);}},[]);let nt=useCallback((W,y)=>{let H=new Image;H.crossOrigin="anonymous",H.onload=()=>{let ie=H.naturalWidth||400,Y=H.naturalHeight||300,he=ie,We=Y,Oe=600;(he>Oe||We>Oe)&&(he>=We?(We=Math.round(We/he*Oe),he=Oe):(he=Math.round(he/We*Oe),We=Oe));let Fe=y;if(!Fe)if(ce.current){let ge=ce.current.getBoundingClientRect();Fe=g({x:ge.width/2,y:ge.height/2});}else Fe={x:0,y:0};let qe=`el_${Date.now()}_${Math.random().toString(36).substring(2,7)}`,dt=e.reduce((ge,Re)=>Math.max(ge,Re.zIndex??0),0),j={...b,id:qe,type:"image",x:Math.round(Fe.x-he/2),y:Math.round(Fe.y-We/2),width:he,height:We,dataUrl:W,naturalWidth:ie,naturalHeight:Y,aspectRatioLocked:true,opacity:1,zIndex:dt+1};h(j),c([qe]),z("select"),u([...e,j]);},H.src=W;},[b,e,h,c,z,u,g]),et=useRef([]);useEffect(()=>{let W=y=>{if(!(y.target instanceof HTMLInputElement||y.target instanceof HTMLTextAreaElement||y.target.isContentEditable)&&r.length>0){let H=e.filter(ie=>r.includes(ie.id));if(H.length>0){et.current=H;try{let ie=JSON.stringify({filekitSketchBoardElements:!0,elements:H});y.clipboardData?.setData("text/plain",ie),y.preventDefault();}catch(ie){console.warn("Could not copy elements to clipboard:",ie);}}}};return window.addEventListener("copy",W),()=>window.removeEventListener("copy",W)},[e,r]),useEffect(()=>{let W=y=>{if(y.target instanceof HTMLInputElement||y.target instanceof HTMLTextAreaElement||y.target.isContentEditable)return;let H=y.clipboardData;if(!H)return;let ie=H.getData("text/plain"),Y=null;if(ie)try{let Oe=JSON.parse(ie);Oe&&Oe.filekitSketchBoardElements&&Array.isArray(Oe.elements)&&(Y=Oe.elements);}catch{}if(!Y&&et.current.length>0&&(Y=et.current),Y&&Y.length>0){y.preventDefault();let Oe=e.reduce((tt,Ae)=>Math.max(tt,Ae.zIndex??0),0),Fe=ze.current,qe=24,dt=24;if(Fe){let tt=Math.min(...Y.map(Nt=>Nt.x)),Ae=Math.min(...Y.map(Nt=>Nt.y)),Ee=Math.max(...Y.map(Nt=>Nt.x+Nt.width)),at=Math.max(...Y.map(Nt=>Nt.y+Nt.height)),Be=(tt+Ee)/2,Ht=(Ae+at)/2;qe=Math.round(Fe.x-Be),dt=Math.round(Fe.y-Ht);}let{clonedElements:j,newSelectedIds:ge}=Er(Y,{deltaX:qe,deltaY:dt,highestZ:Oe}),Re=Ct([...e,...j]);t(Re),c(ge),z("select"),u(Re);return}let We=Array.from(H.items).find(Oe=>Oe.type.startsWith("image/"));if(We){y.preventDefault();let Oe=We.getAsFile();if(Oe){let Fe=new FileReader;Fe.onload=qe=>{let dt=qe.target?.result;dt&&nt(dt,ze.current);},Fe.readAsDataURL(Oe);}}};return window.addEventListener("paste",W),()=>window.removeEventListener("paste",W)},[e,nt,u,c,t,z]);let[gt,St]=useState(false),N=W=>{W.preventDefault(),W.stopPropagation(),W.dataTransfer.types.includes("Files")&&!gt&&St(true);},ye=W=>{W.preventDefault(),W.stopPropagation(),W.dataTransfer.types.includes("Files")&&St(true);},Te=W=>{W.preventDefault(),W.stopPropagation(),(W.currentTarget===W.target||!W.currentTarget.contains(W.relatedTarget))&&St(false);},kt=W=>{W.preventDefault(),W.stopPropagation(),St(false);let y=Array.from(W.dataTransfer.files);if(y.length===0)return;let H=W.currentTarget.getBoundingClientRect(),ie=g({x:W.clientX-H.left,y:W.clientY-H.top});y.forEach((Y,he)=>{if(Y.type.startsWith("image/")||/\.(png|jpe?g|svg|webp|gif)$/i.test(Y.name)){let Oe=new FileReader;Oe.onload=Fe=>{let qe=Fe.target?.result;if(qe){let dt={x:ie.x+he*24,y:ie.y+he*24};nt(qe,dt);}},Oe.readAsDataURL(Y);}});},ut=W=>{if(Ne){ne?.();return}let y=W.currentTarget.getBoundingClientRect(),H={x:W.clientX-y.left,y:W.clientY-y.top},ie=g(H),Y=Dr(ie,e,10/m.zoom);if(Y){let he=!!(Y.groupIds&&Y.groupIds.length>0),We=r.length===1&&r[0]===Y.id;if(he&&!We){c([Y.id]);return}if(c([Y.id]),Y.type==="table"){let Oe=Ca(Y,ie);Oe.type==="cell"?pe(Y,{row:Oe.row,col:Oe.col}):pe(Y,{row:0,col:0});}else ["rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","sticky","text","frame"].includes(Y.type)&&pe(Y);}};useEffect(()=>{let W=()=>{if(!le.current||!ce.current)return;let{clientWidth:y,clientHeight:H}=le.current,ie=window.devicePixelRatio||1;ce.current.width=y*ie,ce.current.height=H*ie,ce.current.style.width=`${y}px`,ce.current.style.height=`${H}px`;};return W(),window.addEventListener("resize",W),()=>window.removeEventListener("resize",W)},[]);let[Lt,jt]=useState(0);useEffect(()=>{let W=()=>jt(y=>(y+1)%1e4);return window.addEventListener("sketch-redraw-canvas",W),()=>window.removeEventListener("sketch-redraw-canvas",W)},[]),useEffect(()=>{if(typeof document>"u"||!document.fonts)return;let W=['400 16px "Fuzzy Bubbles"','700 16px "Fuzzy Bubbles"','400 16px "Comic Neue"','700 16px "Comic Neue"','400 16px "Patrick Hand SC"'],y=()=>{jt(H=>(H+1)%1e4),t(H=>{let ie=false,Y=H.map(he=>{if(he.type==="text"&&he.text){let We=ro(he.text,he.fontSize||22,he.fontFamily);if(Math.abs(We.width-he.width)>3||Math.abs(We.height-he.height)>2){ie=true;let Oe=he.width,Fe={...he,width:We.width,height:We.height};return he.textAlign==="center"?Fe.x=Math.round(he.x+Oe/2-We.width/2):he.textAlign==="right"&&(Fe.x=Math.round(he.x+Oe-We.width)),Fe}}return he});return ie?Y:H});};return Promise.allSettled(W.map(H=>document.fonts.load(H))).then(()=>{y();}),document.fonts.ready.then(y),document.fonts.addEventListener?.("loadingdone",y),()=>{document.fonts.removeEventListener?.("loadingdone",y);}},[]),useEffect(()=>{let W=ce.current;if(!W)return;let y=W.getContext("2d");if(!y)return;let H=window.devicePixelRatio||1,ie=W.width/H,Y=W.height/H;if(y.save(),y.scale(H,H),y.clearRect(0,0,ie,Y),Ge&&Ge!=="transparent"&&(y.fillStyle=Ge,y.fillRect(0,0,ie,Y)),I==="dots"){let j=24;for(;j*m.zoom<16;)j*=2;for(;j*m.zoom>64;)j/=2;let ge=j*m.zoom,Re=(m.x%ge+ge)%ge,tt=(m.y%ge+ge)%ge,Ae=Math.max(.75,Math.min(1.4,1.05*Math.sqrt(Math.max(.2,m.zoom))));y.fillStyle=we?"rgba(255, 255, 255, 0.13)":"rgba(0, 0, 0, 0.12)",y.beginPath();for(let Ee=Re;Ee<ie;Ee+=ge)for(let at=tt;at<Y;at+=ge)y.moveTo(Ee+Ae,at),y.arc(Ee,at,Ae,0,Math.PI*2);y.fill();}else if(I==="grid"){let j=20;for(;j*m.zoom<14;)j*=2;for(;j*m.zoom>56;)j/=2;let ge=j*m.zoom,Re=ge*5,tt=(m.x%ge+ge)%ge,Ae=(m.y%ge+ge)%ge;y.strokeStyle=we?"rgba(255, 255, 255, 0.075)":"rgba(0, 0, 0, 0.08)",y.lineWidth=1,y.setLineDash([1.5,3.5]),y.beginPath();for(let Be=tt;Be<ie;Be+=ge)y.moveTo(Be,0),y.lineTo(Be,Y);for(let Be=Ae;Be<Y;Be+=ge)y.moveTo(0,Be),y.lineTo(ie,Be);y.stroke();let Ee=(m.x%Re+Re)%Re,at=(m.y%Re+Re)%Re;y.strokeStyle=we?"rgba(255, 255, 255, 0.04)":"rgba(0, 0, 0, 0.04)",y.setLineDash([]),y.beginPath();for(let Be=Ee;Be<ie;Be+=Re)y.moveTo(Be,0),y.lineTo(Be,Y);for(let Be=at;Be<Y;Be+=Re)y.moveTo(0,Be),y.lineTo(ie,Be);y.stroke();}else if(I==="cross"){let j=32;for(;j*m.zoom<20;)j*=2;for(;j*m.zoom>80;)j/=2;let ge=j*m.zoom,Re=(m.x%ge+ge)%ge,tt=(m.y%ge+ge)%ge;y.strokeStyle=we?"rgba(255, 255, 255, 0.11)":"rgba(0, 0, 0, 0.09)",y.lineWidth=1,y.setLineDash([]),y.beginPath();for(let Ae=Re;Ae<ie;Ae+=ge)for(let Ee=tt;Ee<Y;Ee+=ge)y.moveTo(Ae-3,Ee),y.lineTo(Ae+3,Ee),y.moveTo(Ae,Ee-3),y.lineTo(Ae,Ee+3);y.stroke();}y.save(),y.translate(m.x,m.y),y.scale(m.zoom,m.zoom);let he=-m.x/m.zoom,We=-m.y/m.zoom,Oe=(ie-m.x)/m.zoom,Fe=(Y-m.y)/m.zoom,qe=100,dt=[...e].sort((j,ge)=>(j.zIndex??0)-(ge.zIndex??0));for(let j of dt){let ge=Math.min(j.x,j.x+j.width),Re=Math.max(j.x,j.x+j.width),tt=Math.min(j.y,j.y+j.height),Ae=Math.max(j.y,j.y+j.height);Re<he-qe||ge>Oe+qe||Ae<We-qe||tt>Fe+qe||Or(y,j,1,j.id===Pe,we);}if(!M&&!Ne){for(let j of r){if(j===Pe)continue;let ge=e.find(Ee=>Ee.id===j);if(!ge)continue;let Re=bt(ge),tt=Re.x+Re.width/2,Ae=Re.y+Re.height/2;if(y.save(),ge.rotation&&(y.translate(tt,Ae),y.rotate(ge.rotation),y.translate(-tt,-Ae)),r.length===1){y.strokeStyle="#0b6eff",y.lineWidth=1.5/m.zoom,y.setLineDash([4/m.zoom,4/m.zoom]),y.strokeRect(Re.x-4,Re.y-4,Re.width+8,Re.height+8),y.setLineDash([]);let Ee=3.25/m.zoom,at=go({...ge,rotation:0});for(let Be of at)Be.type==="start"||Be.type==="end"||Be.type==="middle"||Be.type==="control1"||Be.type==="control2"?(y.beginPath(),y.arc(Be.x,Be.y,Ee*1.3,0,Math.PI*2),y.fillStyle="#ffffff",y.fill(),y.strokeStyle="#0b6eff",y.lineWidth=1.5/m.zoom,y.stroke(),y.beginPath(),y.arc(Be.x,Be.y,Ee*.5,0,Math.PI*2),y.fillStyle="#0b6eff",y.fill()):Be.type==="rotate"?(y.beginPath(),y.moveTo(tt,Re.y-4),y.lineTo(tt,Re.y-20),y.strokeStyle="#0b6eff",y.lineWidth=1.1/m.zoom,y.stroke(),y.beginPath(),y.arc(tt,Re.y-20,Ee*1.1,0,Math.PI*2),y.fillStyle="#ffffff",y.fill(),y.strokeStyle="#0b6eff",y.lineWidth=1.5/m.zoom,y.stroke()):(y.fillStyle="#ffffff",y.fillRect(Be.x-Ee,Be.y-Ee,Ee*2,Ee*2),y.strokeStyle="#0b6eff",y.lineWidth=1.2/m.zoom,y.strokeRect(Be.x-Ee,Be.y-Ee,Ee*2,Ee*2));}else y.strokeStyle="rgba(105, 101, 219, 0.45)",y.lineWidth=1/m.zoom,y.setLineDash([3/m.zoom,3/m.zoom]),y.strokeRect(Re.x-3,Re.y-3,Re.width+6,Re.height+6),y.setLineDash([]);y.restore();}if(!Ne&&r.length>1){let j=e.filter(Re=>r.includes(Re.id)),ge=jr(j,8);if(ge){y.save(),y.fillStyle=we?"rgba(105, 101, 219, 0.05)":"rgba(105, 101, 219, 0.035)",y.fillRect(ge.x,ge.y,ge.width,ge.height),y.strokeStyle="#0b6eff",y.lineWidth=1.8/m.zoom,y.setLineDash([6/m.zoom,4/m.zoom]),y.strokeRect(ge.x,ge.y,ge.width,ge.height),y.setLineDash([]);let Re=j.length>0&&j[0].groupIds&&j[0].groupIds.length>0?j[0].groupIds[j[0].groupIds.length-1]:null,Ae=Re!==null&&j.every(Jt=>Jt.groupIds&&Jt.groupIds.includes(Re))?"Group":"Selection",Ee=Math.max(9,Math.min(13,10.5/m.zoom));y.font=`600 ${Ee}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;let at=y.measureText(Ae).width,Be=6/m.zoom,Ht=at+Be*2,Nt=16/m.zoom,yr=ge.x,br=ge.y-Nt-3/m.zoom;y.fillStyle="#0b6eff",typeof y.roundRect=="function"?(y.beginPath(),y.roundRect(yr,br,Ht,Nt,4/m.zoom),y.fill()):y.fillRect(yr,br,Ht,Nt),y.fillStyle="#ffffff",y.textAlign="center",y.textBaseline="middle",y.fillText(Ae,yr+Ht/2,br+Nt/2);let eo=yo(ge),qt=3.25/m.zoom;for(let Jt of eo)if(Jt.type==="rotate"){let Yr=ge.x+ge.width/2;y.beginPath(),y.moveTo(Yr,ge.y),y.lineTo(Yr,ge.y-20/m.zoom),y.strokeStyle="#0b6eff",y.lineWidth=1.1/m.zoom,y.stroke(),y.beginPath(),y.arc(Yr,ge.y-20/m.zoom,qt*1.1,0,Math.PI*2),y.fillStyle="#ffffff",y.fill(),y.strokeStyle="#0b6eff",y.lineWidth=1.5/m.zoom,y.stroke();}else y.fillStyle="#ffffff",y.fillRect(Jt.x-qt,Jt.y-qt,qt*2,qt*2),y.strokeStyle="#0b6eff",y.lineWidth=1.2/m.zoom,y.strokeRect(Jt.x-qt,Jt.y-qt,qt*2,qt*2);y.restore();}}}if(ae.hoveredAnchor){let{elementId:j,point:ge}=ae.hoveredAnchor,Re=e.find(tt=>tt.id===j);if(Re){y.save();let tt=Xo(Re);for(let[Ae,Ee]of Object.entries(tt)){if(Ae==="center")continue;let at=Math.abs(Ee.x-ge.x)<.1&&Math.abs(Ee.y-ge.y)<.1,Be=(at?5:3)/m.zoom;y.beginPath(),y.arc(Ee.x,Ee.y,Be,0,Math.PI*2),y.fillStyle=at?"#6366f1":we?"rgba(255, 255, 255, 0.45)":"rgba(99, 102, 241, 0.35)",y.fill(),y.strokeStyle=at?"#ffffff":we?"rgba(255, 255, 255, 0.65)":"rgba(79, 70, 229, 0.55)",y.lineWidth=(at?1.5:1)/m.zoom,y.stroke(),at&&(y.beginPath(),y.arc(Ee.x,Ee.y,(Be+4)/m.zoom,0,Math.PI*2),y.strokeStyle="rgba(99, 102, 241, 0.45)",y.lineWidth=2/m.zoom,y.stroke());}y.restore();}}if(ae.marquee){let{startX:j,startY:ge,currentX:Re,currentY:tt}=ae.marquee,Ae=Math.min(j,Re),Ee=Math.min(ge,tt),at=Math.abs(Re-j),Be=Math.abs(tt-ge);y.fillStyle="rgba(11, 110, 255, 0.12)",y.fillRect(Ae,Ee,at,Be),y.strokeStyle="#0b6eff",y.lineWidth=1/m.zoom,y.setLineDash([3/m.zoom,3/m.zoom]),y.strokeRect(Ae,Ee,at,Be),y.setLineDash([]);}ae.alignmentGuides&&ae.alignmentGuides.length>0&&qi(y,ae.alignmentGuides,m),ae.spacingGuides&&ae.spacingGuides.length>0&&Ji(y,ae.spacingGuides,m),oe&&oe.length>0&&Vi(y,oe,m,Date.now()),E==="laser"&&U&&Zi(y,U,R,m),y.restore(),y.restore();},[e,m,r,I,Ge,ke,Ie,ae.marquee,ae.hoveredAnchor,ae.alignmentGuides,ae.spacingGuides,oe,U,R,E,M,F,Lt]);let Ye=r.length===1&&e.find(W=>W.id===r[0])||null,dr=!!(Ye&&["rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","table","sticky","frame"].includes(Ye.type)),At=useCallback(W=>{if(!Ye||!dr)return;let y=Ye,H=bt(y),ie=80,Y=H.x,he=H.y,We="right",Oe="left",Fe={x:H.x+H.width,y:H.y+H.height/2},qe={x:H.x+H.width+ie,y:H.y+H.height/2};W==="right"?(Y=H.x+H.width+ie,he=H.y,We="right",Oe="left",Fe={x:H.x+H.width,y:H.y+H.height/2},qe={x:Y,y:he+H.height/2}):W==="bottom"?(Y=H.x,he=H.y+H.height+ie,We="bottom",Oe="top",Fe={x:H.x+H.width/2,y:H.y+H.height},qe={x:Y+H.width/2,y:he}):W==="left"?(Y=H.x-H.width-ie,he=H.y,We="left",Oe="right",Fe={x:H.x,y:H.y+H.height/2},qe={x:Y+H.width,y:he+H.height/2}):W==="top"&&(Y=H.x,he=H.y-H.height-ie,We="top",Oe="bottom",Fe={x:H.x+H.width/2,y:H.y},qe={x:Y+H.width/2,y:he+H.height});let dt=`el_${Date.now()}_${Math.random().toString(36).substring(2,7)}`,j=`el_${Date.now()+1}_${Math.random().toString(36).substring(2,7)}`,ge=e.reduce((at,Be)=>Math.max(at,Be.zIndex??0),0),Re=y.type==="frame",tt={...y,id:dt,x:Y,y:he,zIndex:ge+2,text:"",frameLabel:Re?`Frame ${e.filter(at=>at.type==="frame").length+1}`:y.frameLabel},Ae={id:j,type:"arrow",x:Fe.x,y:Fe.y,width:qe.x-Fe.x,height:qe.y-Fe.y,strokeColor:y.strokeColor||"#1e1e24",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"transparent",opacity:1,zIndex:ge+1,arrowType:"straight",endArrowhead:true,startBinding:{elementId:y.id,anchor:We},endBinding:{elementId:dt,anchor:Oe}},Ee=[...e,Ae,tt];t(Ee),u(Ee),o(dt);},[Ye,dr,e,t,u,o]);useEffect(()=>{let W=y=>{Pe||["INPUT","TEXTAREA"].includes(y.target?.tagName)||(y.ctrlKey||y.metaKey)&&(y.key==="ArrowRight"?(y.preventDefault(),At("right")):y.key==="ArrowDown"?(y.preventDefault(),At("bottom")):y.key==="ArrowLeft"?(y.preventDefault(),At("left")):y.key==="ArrowUp"&&(y.preventDefault(),At("top")));};return window.addEventListener("keydown",W),()=>window.removeEventListener("keydown",W)},[Pe,At]);let Ke=e.find(W=>W.id===Pe),Sr=Ke?w({x:Ke.width<0?Ke.x+Ke.width:Ke.x,y:Ke.height<0?Ke.y+Ke.height:Ke.y}):null,wt=Ke?ar(Ke.fontFamily):gr[0],or=useMemo(()=>{if(!Ke)return 22;let W=Ke.fontSize||(Ke.type==="sticky"?20:22);if(Ke.type==="text"||Ke.type==="frame"||typeof window>"u")return W;let H=document.createElement("canvas").getContext("2d");if(!H)return W;let ie=Yo(Ke),Y=W,he=9,We=wt.value==="fuzzy"||wt.value==="edusa",Fe=wt.value==="patrick"||wt.value==="comic"||wt.value==="handlee"?"400":We?"700":"600",qe=Z||Ke.text||"";H.font=`normal ${Fe} ${Y}px ${wt.cssFont}`;let dt=Xr(H,qe,ie.boxW),j=Y*1.35;for(;(dt.length*j>ie.boxH||dt.some(ge=>H.measureText(ge).width>ie.boxW))&&Y>he;)Y-=.75,H.font=`normal ${Fe} ${Y}px ${wt.cssFont}`,dt=Xr(H,qe,ie.boxW),j=Y*1.35;return Y},[Ke,Z,wt.cssFont,wt.value]),Dt=Ke?O(Z||" ",or,wt.cssFont,Ke.type,Ke.width,Ke.fontFamily):{width:140,height:36};return jsxs("div",{ref:le,onDragOver:N,onDragEnter:ye,onDragLeave:Te,onDrop:kt,className:"relative w-full h-full overflow-hidden select-none",style:{backgroundColor:Ge,cursor:ae.cursor},children:[gt&&jsx("div",{className:"absolute inset-0 z-50 pointer-events-none flex flex-col items-center justify-center bg-primary/10 dark:bg-primary/15 backdrop-blur-[2px] border-4 border-dashed border-primary/60 dark:border-primary/70 transition-all duration-200",children:jsxs("div",{className:"flex flex-col items-center gap-3 px-8 py-6 rounded-2xl bg-white/95 dark:bg-neutral-900/95 shadow-2xl border border-primary/30",children:[jsx("div",{className:"w-16 h-16 rounded-full bg-primary/15 dark:bg-primary/25 flex items-center justify-center text-primary animate-bounce",children:jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",className:"w-8 h-8",viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),jsx("path",{d:"M15 8h.01"}),jsx("path",{d:"M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z"}),jsx("path",{d:"M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"}),jsx("path",{d:"M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"})]})}),jsx("p",{className:"text-base font-bold text-neutral-800 dark:text-neutral-100",children:"Drop image to add onto canvas"}),jsx("p",{className:"text-xs text-neutral-500 dark:text-neutral-400",children:"Supports PNG, JPG, SVG, WebP, GIF"})]})}),jsx("canvas",{ref:ce,onPointerDown:ae.onPointerDown,onPointerMove:ae.onPointerMove,onPointerUp:ae.onPointerUp,onDoubleClick:ut,className:"block touch-none"}),Ke&&Sr&&(Ke.type==="frame"?jsx("div",{className:"absolute z-30 pointer-events-auto flex items-center justify-end",style:{left:`${Sr.x+Math.abs(Ke.width)*m.zoom-160}px`,top:`${Sr.y-28*m.zoom-4}px`,width:"160px",height:`${28*m.zoom}px`},children:jsx("input",{ref:de,type:"text",value:Z,placeholder:"Frame title...",onChange:W=>Se(W.target.value),onBlur:()=>V(),onPointerDown:W=>W.stopPropagation(),onKeyDown:W=>{W.stopPropagation(),(W.key==="Enter"||W.key==="Escape")&&V();},onKeyUp:W=>W.stopPropagation(),className:"w-full px-2.5 py-1 rounded-[6px] text-xs font-semibold bg-white dark:bg-[#181818] text-neutral-900 dark:text-neutral-100 border-2 border-primary shadow-lg outline-none cursor-text select-text",style:{fontSize:`${Math.max(11,12*m.zoom)}px`,height:`${28*m.zoom}px`}})}):Ke.type==="text"?jsx("div",{className:"absolute z-30 pointer-events-auto",style:{left:`${Sr.x}px`,top:`${Sr.y}px`,width:`${Dt.width*m.zoom}px`,height:`${Dt.height*m.zoom}px`,transform:Ke.rotation?`rotate(${Ke.rotation}rad)`:void 0,transformOrigin:"top left",boxSizing:"border-box"},children:jsx("textarea",{ref:K,value:Z,onChange:W=>Se(W.target.value),onBlur:()=>V(),onKeyDown:W=>{W.key==="Enter"&&(W.metaKey||W.ctrlKey)&&V(),W.key==="Escape"&&V();},className:"w-full h-full bg-transparent border-0 outline-none shadow-none resize-none select-text cursor-text focus:ring-0",style:{fontFamily:wt.cssFont,fontSize:`${or*m.zoom}px`,lineHeight:1.35,textAlign:Ke.textAlign||"left",color:Et(Ke.strokeColor||"#1e1e24",we),caretColor:Et(Ke.strokeColor||"#0b6eff",we),fontWeight:wt.value==="patrick"||wt.value==="comic"||wt.value==="handlee"||wt.value==="fuzzy"||wt.value==="edusa"?400:500,padding:`0px ${4*m.zoom}px`,margin:"0px",boxSizing:"border-box",whiteSpace:"pre",overflow:"hidden"}})}):(()=>{let W=Yo(Ke),y=w({x:W.boxX,y:W.boxY}),H=Ke.type==="sticky",ie=H?Ke.strokeColor&&Ke.strokeColor!=="transparent"?Et(Ke.strokeColor,we):Mr(Ke.stickyColor||Ke.fillColor,we).text:Et(Ke.strokeColor||"#1e1e24",we),Y=H?ie:Et(Ke.strokeColor||"#0b6eff",we);return jsx("div",{className:"absolute z-30 pointer-events-auto",style:{left:`${y.x}px`,top:`${y.y}px`,width:`${W.boxW*m.zoom}px`,height:`${W.boxH*m.zoom}px`,transform:Ke.rotation?`rotate(${Ke.rotation}rad)`:void 0,transformOrigin:"center center",boxSizing:"border-box",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden"},children:jsx("textarea",{ref:K,value:Z,placeholder:H?"Type a note...":"Type text...",onChange:he=>{Se(he.target.value),K.current&&(K.current.style.height="auto",K.current.style.height=`${K.current.scrollHeight}px`);},onBlur:()=>V(),onKeyDown:he=>{if(Ke.type==="table"&&he.key==="Tab"){he.preventDefault(),he.shiftKey?V("prev"):V("next");return}he.key==="Enter"&&(he.metaKey||he.ctrlKey)&&V(),he.key==="Escape"&&V();},className:"w-full bg-transparent border-0 outline-none shadow-none resize-none select-text cursor-text focus:ring-0",style:{fontFamily:wt.cssFont,fontSize:`${or*m.zoom}px`,lineHeight:1.35,textAlign:Ke.textAlign||"center",color:ie,caretColor:Y,fontWeight:wt.value==="patrick"||wt.value==="comic"||wt.value==="handlee"?400:wt.value==="fuzzy"||wt.value==="edusa"?700:600,padding:"0px",margin:"0px",boxSizing:"border-box",whiteSpace:"pre-wrap",wordBreak:"break-word",overflowWrap:"break-word",overflow:"hidden",maxHeight:"100%"}})})})()),!M&&dr&&Ye&&!Pe&&E==="select"&&!ae.activeHandle&&!ae.cursor.includes("resize")&&!ae.cursor.includes("grab")&&!ae.cursor.includes("grabbing")&&!ae.marquee&&(()=>{let W=bt(Ye),y=w({x:W.x,y:W.y}),H=W.width*m.zoom,ie=W.height*m.zoom,Y=80*m.zoom,he=Ye.type==="sticky",We=Ye.type==="ellipse",Oe=Ye.type==="diamond",Fe=Ye.type==="parallelogram";Ye.type==="star";let dt=j=>Oe?jsxs("div",{className:"relative w-full h-full flex items-center justify-center",children:[jsx("svg",{className:"absolute inset-0 w-full h-full pointer-events-none overflow-visible",viewBox:"0 0 100 100",preserveAspectRatio:"none",children:jsx("polygon",{points:"50,1 99,50 50,99 1,50",className:"fill-neutral-500/10 dark:fill-white/[0.04] stroke-neutral-400/50 dark:stroke-neutral-600/60",strokeWidth:"2",strokeDasharray:"5 4",vectorEffect:"non-scaling-stroke"})}),jsxs("div",{className:"relative z-10 flex items-center gap-1.5 px-2 py-1 rounded-[6px] bg-neutral-900/85 dark:bg-neutral-950/90 text-white text-[11px] font-semibold tracking-wide shadow-md border border-white/15",children:[jsx("span",{children:j[0]}),jsx("span",{className:"text-[12px] leading-none",children:j[1]})]})]}):Fe?jsxs("div",{className:"relative w-full h-full flex items-center justify-center",children:[jsx("svg",{className:"absolute inset-0 w-full h-full pointer-events-none overflow-visible",viewBox:"0 0 100 100",preserveAspectRatio:"none",children:jsx("polygon",{points:"20,0 100,0 80,100 0,100",className:"fill-neutral-500/10 dark:fill-white/[0.04] stroke-neutral-400/50 dark:stroke-neutral-600/60",strokeWidth:"2",strokeDasharray:"5 4",vectorEffect:"non-scaling-stroke"})}),jsxs("div",{className:"relative z-10 flex items-center gap-1.5 px-2 py-1 rounded-[6px] bg-neutral-900/85 dark:bg-neutral-950/90 text-white text-[11px] font-semibold tracking-wide shadow-md border border-white/15",children:[jsx("span",{children:j[0]}),jsx("span",{className:"text-[12px] leading-none",children:j[1]})]})]}):jsx("div",{className:`w-full h-full flex items-center justify-center border-2 border-dashed transition-all ${he?"rounded-[6px] bg-amber-400/10 dark:bg-amber-400/5 border-amber-400/40 shadow-xs":We?"rounded-full bg-neutral-500/10 dark:bg-white/[0.04] border-neutral-400/40 dark:border-neutral-600/50 shadow-xs":"rounded-[10px] bg-neutral-500/10 dark:bg-white/[0.04] border-neutral-400/40 dark:border-neutral-600/50 shadow-xs"}`,children:jsxs("div",{className:"flex items-center gap-1.5 px-2 py-1 rounded-[6px] bg-neutral-900/85 dark:bg-neutral-950/90 text-white text-[11px] font-semibold tracking-wide shadow-md border border-white/15",children:[jsx("span",{children:j[0]}),jsx("span",{className:"text-[12px] leading-none",children:j[1]})]})});return jsxs("div",{className:"absolute pointer-events-none z-20",style:{left:y.x,top:y.y,width:H,height:ie,transform:Ye.rotation?`rotate(${Ye.rotation}rad)`:void 0,transformOrigin:"center center"},children:[(q==="right"||T==="right")&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:j=>{j.stopPropagation(),At("right");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("right"),onMouseLeave:()=>L(null),title:"Add connected shape to the right (Ctrl + \u2192)",className:"absolute -translate-x-1/2 -translate-y-1/2 z-20 pointer-events-auto w-6 h-6 rounded-full bg-white dark:bg-[#1e1e24] shadow-md border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200 hover:bg-primary hover:border-primary hover:text-white dark:hover:text-white flex items-center justify-center hover:scale-115 transition-all duration-150 cursor-pointer animate-in fade-in zoom-in-90",style:{left:H+28,top:ie/2},children:jsx(IconPlus,{size:13,stroke:2.6})}),T==="right"&&jsxs("div",{className:"absolute z-10 pointer-events-auto cursor-pointer animate-in fade-in duration-100",style:{left:H+16,top:0,width:Math.max(0,Y+H-16),height:ie},onClick:j=>{j.stopPropagation(),At("right");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("right"),onMouseLeave:()=>L(null),children:[jsxs("svg",{className:"absolute overflow-visible pointer-events-none",style:{left:-16,top:ie/2-8,width:Y,height:16},children:[jsx("line",{x1:0,y1:8,x2:Y-3,y2:8,stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5}),jsx("polyline",{points:`${Y-7},4 ${Y-1},8 ${Y-7},12`,fill:"none",stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5})]}),jsx("div",{className:"absolute",style:{left:Y-16,top:0,width:H,height:ie},children:dt(["Ctrl","\u2192"])})]})]}),(q==="bottom"||T==="bottom")&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:j=>{j.stopPropagation(),At("bottom");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("bottom"),onMouseLeave:()=>L(null),title:"Add connected shape below (Ctrl + \u2193)",className:"absolute -translate-x-1/2 -translate-y-1/2 z-20 pointer-events-auto w-6 h-6 rounded-full bg-white dark:bg-[#1e1e24] shadow-md border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200 hover:bg-primary hover:border-primary hover:text-white dark:hover:text-white flex items-center justify-center hover:scale-115 transition-all duration-150 cursor-pointer animate-in fade-in zoom-in-90",style:{left:H/2,top:ie+28},children:jsx(IconPlus,{size:13,stroke:2.6})}),T==="bottom"&&jsxs("div",{className:"absolute z-10 pointer-events-auto cursor-pointer animate-in fade-in duration-100",style:{left:0,top:ie+16,width:H,height:Math.max(0,Y+ie-16)},onClick:j=>{j.stopPropagation(),At("bottom");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("bottom"),onMouseLeave:()=>L(null),children:[jsxs("svg",{className:"absolute overflow-visible pointer-events-none",style:{left:H/2-8,top:-16,width:16,height:Y},children:[jsx("line",{x1:8,y1:0,x2:8,y2:Y-3,stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5}),jsx("polyline",{points:`4,${Y-7} 8,${Y-1} 12,${Y-7}`,fill:"none",stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5})]}),jsx("div",{className:"absolute",style:{left:0,top:Y-16,width:H,height:ie},children:dt(["Ctrl","\u2193"])})]})]}),(q==="left"||T==="left")&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:j=>{j.stopPropagation(),At("left");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("left"),onMouseLeave:()=>L(null),title:"Add connected shape to the left (Ctrl + \u2190)",className:"absolute -translate-x-1/2 -translate-y-1/2 z-20 pointer-events-auto w-6 h-6 rounded-full bg-white dark:bg-[#1e1e24] shadow-md border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200 hover:bg-primary hover:border-primary hover:text-white dark:hover:text-white flex items-center justify-center hover:scale-115 transition-all duration-150 cursor-pointer animate-in fade-in zoom-in-90",style:{left:-28,top:ie/2},children:jsx(IconPlus,{size:13,stroke:2.6})}),T==="left"&&jsxs("div",{className:"absolute z-10 pointer-events-auto cursor-pointer animate-in fade-in duration-100",style:{left:-Y-H,top:0,width:Math.max(0,Y+H-16),height:ie},onClick:j=>{j.stopPropagation(),At("left");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("left"),onMouseLeave:()=>L(null),children:[jsxs("svg",{className:"absolute overflow-visible pointer-events-none",style:{right:-16,top:ie/2-8,width:Y,height:16},children:[jsx("line",{x1:Y,y1:8,x2:3,y2:8,stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5}),jsx("polyline",{points:"7,4 1,8 7,12",fill:"none",stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5})]}),jsx("div",{className:"absolute",style:{left:0,top:0,width:H,height:ie},children:dt(["Ctrl","\u2190"])})]})]}),(q==="top"||T==="top")&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:j=>{j.stopPropagation(),At("top");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("top"),onMouseLeave:()=>L(null),title:"Add connected shape above (Ctrl + \u2191)",className:"absolute -translate-x-1/2 -translate-y-1/2 z-20 pointer-events-auto w-6 h-6 rounded-full bg-white dark:bg-[#1e1e24] shadow-md border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200 hover:bg-primary hover:border-primary hover:text-white dark:hover:text-white flex items-center justify-center hover:scale-115 transition-all duration-150 cursor-pointer animate-in fade-in zoom-in-90",style:{left:H/2,top:-64},children:jsx(IconPlus,{size:13,stroke:2.6})}),T==="top"&&jsxs("div",{className:"absolute z-10 pointer-events-auto cursor-pointer animate-in fade-in duration-100",style:{left:0,top:-Y-ie,width:H,height:Math.max(0,Y+ie-16)},onClick:j=>{j.stopPropagation(),At("top");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("top"),onMouseLeave:()=>L(null),children:[jsxs("svg",{className:"absolute overflow-visible pointer-events-none",style:{left:H/2-8,bottom:-16,width:16,height:Y},children:[jsx("line",{x1:8,y1:Y,x2:8,y2:3,stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5}),jsx("polyline",{points:"4,7 8,1 12,7",fill:"none",stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5})]}),jsx("div",{className:"absolute",style:{left:0,top:0,width:H,height:ie},children:dt(["Ctrl","\u2191"])})]})]})]})})()]})}async function Vr(e,t,r){if(typeof window>"u")return;let o=typeof r=="string"?r:r?.mimeType||"application/octet-stream";if(typeof e=="string"&&e.startsWith("data:")){let s=document.createElement("a");s.href=e,s.download=t,s.style.display="none",document.body.appendChild(s),s.click(),document.body.removeChild(s);return}let c=e instanceof Blob?e:new Blob([e],{type:o}),d=URL.createObjectURL(c),h=document.createElement("a");h.href=d,h.download=t,h.style.display="none",document.body.appendChild(h),h.click(),document.body.removeChild(h),setTimeout(()=>{URL.revokeObjectURL(d);},1e3);}function tr(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function ko(e){if(!e||e==="transparent")return false;if(e.startsWith("#")){let t=e.replace("#","");if(t.length===3){let r=parseInt(t[0]+t[0],16),o=parseInt(t[1]+t[1],16),c=parseInt(t[2]+t[2],16);return r*.299+o*.587+c*.114<128}if(t.length===6){let r=parseInt(t.substring(0,2),16),o=parseInt(t.substring(2,4),16),c=parseInt(t.substring(4,6),16);return r*.299+o*.587+c*.114<128}}return false}function Ea(e,t,r,o,c,d,h){if(!o||o==="none")return "";let s=o===true?"arrow":o,n=Math.max(1.5,d),p=`transform="translate(${e}, ${t}) rotate(${r*180/Math.PI})"`;switch(s){case "arrow":{let i=Math.max(12,n*4.5),l=i*.55;return `<path d="M ${-i} ${-l} L 0 0 L ${-i} ${l}" fill="none" stroke="${c}" stroke-width="${n}" stroke-linecap="round" stroke-linejoin="round" opacity="${h}" ${p} />
|
|
5
|
+
`):Xr(e,t.text,m),D=w*1.35;if(t.type!=="text")for(;(z.length*D>g||z.some(C=>e.measureText(C).width>m))&&w>_;)w-=.75*r,e.font=`normal ${E} ${w}px ${a.cssFont}`,z=Xr(e,t.text,m),D=w*1.35;let P=z.length*D,I=(D-w)/2,b=t.type==="text"?(h+Math.max(0,(n-P/r)/2))*r+I:x.centerY*r-P/2+I,f=t.textAlign||(t.type==="text"?"left":"center");e.textAlign=f,e.textBaseline="top";let v=f==="center"?t.type==="text"?(d+s/2)*r:x.centerX*r:f==="right"?t.type==="text"?(d+s-4)*r:(x.boxX+x.boxW)*r-4*r:t.type==="text"?(d+4)*r:x.boxX*r+4*r;if(t.type==="sticky"){let C=Mr(t.stickyColor||t.fillColor,c);e.fillStyle=t.strokeColor&&t.strokeColor!=="transparent"?Et(t.strokeColor,c):C.text;}else e.fillStyle=Et(t.textColor||(c?"#f8fafc":"#0f172a"),c);if(t.type!=="text"){if(e.save(),e.beginPath(),t.type==="rectangle"||t.type==="sticky"){let C=t.type==="sticky",M=(t.edgeStyle||"round")==="round"||C,R=C?Math.min(22*r,p*.16,i*.16):M?Math.min(16*r,p*.2,i*.2):0;R>0&&typeof e.roundRect=="function"?e.roundRect(d+2,h+2,s-4,n-4,R):e.rect(d+2,h+2,s-4,n-4);}else if(t.type==="ellipse")e.ellipse(l,u,Math.max(1,p/2-2),Math.max(1,i/2-2),0,0,Math.PI*2);else if(t.type==="diamond")e.moveTo(l,h+2),e.lineTo(d+s-2,u),e.lineTo(l,h+n-2),e.lineTo(d+2,u),e.closePath();else if(t.type==="triangle")e.moveTo(l,h+2),e.lineTo(d+s-2,h+n-2),e.lineTo(d+2,h+n-2),e.closePath();else if(t.type==="capsule"){let C=Math.min(p,i)/2-2;p>=i?(e.arc(d+C+2,h+C+2,C,Math.PI/2,Math.PI*3/2),e.lineTo(d+s-C-2,h+2),e.arc(d+s-C-2,h+C+2,C,Math.PI*3/2,Math.PI/2),e.lineTo(d+C+2,h+n-2)):(e.arc(d+C+2,h+C+2,C,Math.PI,0),e.lineTo(d+s-2,h+n-C-2),e.arc(d+C+2,h+n-C-2,C,0,Math.PI),e.lineTo(d+2,h+C+2)),e.closePath();}else if(t.type==="trapezoid"){let C=Math.min(p*.2,40*r);e.moveTo(d+C+2,h+2),e.lineTo(d+s-C-2,h+2),e.lineTo(d+s-2,h+n-2),e.lineTo(d+2,h+n-2),e.closePath();}else if(t.type==="hexagon"){let C=Math.min(p*.22,45*r);e.moveTo(d+C+2,h+2),e.lineTo(d+s-C-2,h+2),e.lineTo(d+s-2,u),e.lineTo(d+s-C-2,h+n-2),e.lineTo(d+C+2,h+n-2),e.lineTo(d+2,u),e.closePath();}else if(t.type==="parallelogram"){let C=Math.min(36*r,p*.22);e.moveTo(d+C+2,h+2),e.lineTo(d+s-2,h+2),e.lineTo(d+s-C-2,h+n-2),e.lineTo(d+2,h+n-2),e.closePath();}else if(t.type==="cylinder"){let C=Math.abs(s/2)-2,M=Math.min(24*r,i*.2);e.ellipse(l,h+M,C,M,0,Math.PI,0),e.lineTo(d+s-2,h+n-M),e.ellipse(l,h+n-M,C,M,0,0,Math.PI),e.lineTo(d+2,h+M),e.closePath();}else t.type==="cloud"?e.ellipse(l,u,Math.max(1,p*.38),Math.max(1,i*.35),0,0,Math.PI*2):e.rect(d+2,h+2,s-4,n-4);e.clip();}z.forEach((C,M)=>{e.fillText(C,v,b+M*D);}),t.type!=="text"&&e.restore();}function va(e,t,r,o,c,d,h,s=1,n=false){if(!c||c==="none")return;let p=c===true?"arrow":c;e.save(),e.translate(t,r),e.rotate(o),e.strokeStyle=d,e.fillStyle=d,e.lineWidth=Math.max(1,h*s),e.lineCap="round",e.lineJoin="round";let i=Math.max(1.5,h*s);switch(p){case "arrow":{let l=Math.max(12*s,i*4.5),u=l*.55;e.beginPath(),e.moveTo(-l,-u),e.lineTo(0,0),e.lineTo(-l,u),e.stroke();break}case "triangle":{let l=Math.max(14*s,i*4.8),u=l*.55;e.beginPath(),e.moveTo(0,0),e.lineTo(-l,-u),e.lineTo(-l,u),e.closePath(),e.fill(),e.stroke();break}case "barbed":{let l=Math.max(16*s,i*5.2),u=l*.55,a=l*.35;e.beginPath(),e.moveTo(0,0),e.lineTo(-l,-u),e.lineTo(-l+a,0),e.lineTo(-l,u),e.closePath(),e.fill(),e.stroke();break}case "dot":{let l=Math.max(4.5*s,i*1.8);e.beginPath(),e.arc(-l,0,l,0,Math.PI*2),e.fill();break}case "circle":{let l=Math.max(4.5*s,i*1.8);e.beginPath(),e.arc(-l,0,l,0,Math.PI*2),e.fillStyle=n?"#181818":"#ffffff",e.fill(),e.stroke();break}case "diamond":{let l=Math.max(13*s,i*4.2),u=l*.5;e.beginPath(),e.moveTo(0,0),e.lineTo(-l/2,-u),e.lineTo(-l,0),e.lineTo(-l/2,u),e.closePath(),e.fill(),e.stroke();break}case "diamond_outline":{let l=Math.max(13*s,i*4.2),u=l*.5;e.beginPath(),e.moveTo(0,0),e.lineTo(-l/2,-u),e.lineTo(-l,0),e.lineTo(-l/2,u),e.closePath(),e.fillStyle=n?"#181818":"#ffffff",e.fill(),e.stroke();break}case "bar":case "crowfoot_one":{let l=Math.max(12*s,i*4.5);e.beginPath(),e.moveTo(0,-l/2),e.lineTo(0,l/2),e.stroke();break}case "crowfoot_many":{let l=Math.max(12*s,i*4),u=l*.7;e.beginPath(),e.moveTo(-l,-u),e.lineTo(0,0),e.lineTo(-l,u),e.moveTo(-l,0),e.lineTo(0,0),e.stroke();break}case "crowfoot_one_many":{let l=Math.max(14*s,i*4.5),u=l*.65;e.beginPath(),e.moveTo(-l,-u),e.lineTo(0,0),e.lineTo(-l,u),e.moveTo(-l,0),e.lineTo(0,0),e.moveTo(-l*.45,-u),e.lineTo(-l*.45,u),e.stroke();break}case "crowfoot_strictly_one":{let l=Math.max(12*s,i*4.5),u=Math.max(5*s,i*2);e.beginPath(),e.moveTo(0,-l/2),e.lineTo(0,l/2),e.moveTo(-u,-l/2),e.lineTo(-u,l/2),e.stroke();break}case "crowfoot_zero_one":{let l=Math.max(12*s,i*4.5),u=Math.max(4*s,i*1.5);e.beginPath(),e.arc(-u*2-2*s,0,u,0,Math.PI*2),e.fillStyle=n?"#181818":"#ffffff",e.fill(),e.stroke(),e.beginPath(),e.moveTo(0,-l/2),e.lineTo(0,l/2),e.stroke();break}case "crowfoot_zero_many":{let l=Math.max(12*s,i*4),u=l*.65,a=Math.max(4*s,i*1.5);e.beginPath(),e.moveTo(-l,-u),e.lineTo(0,0),e.lineTo(-l,u),e.moveTo(-l,0),e.lineTo(0,0),e.stroke(),e.beginPath(),e.arc(-l-a-2*s,0,a,0,Math.PI*2),e.fillStyle=n?"#181818":"#ffffff",e.fill(),e.stroke();break}}e.restore();}function Or(e,t,r=1,o=false,c=false,d=false){e.save(),e.globalAlpha=t.opacity??1;let h=t.x+t.width/2,s=t.y+t.height/2;t.rotation&&(e.translate(h,s),e.rotate(t.rotation),e.translate(-h,-s)),d&&t.type!=="frame"?(e.shadowColor=c?"rgba(0, 0, 0, 0.45)":"rgba(15, 23, 42, 0.08)",e.shadowBlur=Math.round((c?12:10)*r),e.shadowOffsetX=0,e.shadowOffsetY=Math.round((c?4:3)*r)):e.shadowColor="transparent";let n=Et(t.strokeColor,c),p=Nr(t.fillColor,t.fillStyle,c);e.strokeStyle=n,e.lineWidth=Math.max(1,t.strokeWidth*r),e.lineCap="round",e.lineJoin="round",t.strokeStyle==="dashed"?e.setLineDash([Math.max(6,t.strokeWidth*2.5*r),Math.max(4,t.strokeWidth*1.8*r)]):t.strokeStyle==="dotted"?e.setLineDash([Math.max(1.5,t.strokeWidth*.8*r),Math.max(4,t.strokeWidth*1.8*r)]):e.setLineDash([]);let{x:i,y:l,width:u,height:a}=t,x=t.roughStyle==="rough"||t.roughness!==void 0&&t.roughness>0,m={roughness:t.roughness||1.2};switch(t.type){case "rectangle":{let w=(t.edgeStyle||"round")==="round"?Math.min(16,Math.min(Math.abs(u),Math.abs(a))*.25):0;p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r)),x?w>0?ka(e,i,l,u,a,w,t.id,!!(p&&p!=="transparent"),t.strokeWidth>0&&n!=="transparent",m):ya(e,i,l,u,a,t.id,!!(p&&p!=="transparent"),t.strokeWidth>0&&n!=="transparent",m):(p&&p!=="transparent"&&(w>0?(Ho(e,i,l,u,a,w),e.fill()):e.fillRect(i,l,u,a)),t.strokeWidth>0&&n!=="transparent"&&(w>0?(Ho(e,i,l,u,a,w),e.stroke()):e.strokeRect(i,l,u,a))),ir(e,t,r,o,c);break}case "ellipse":{let g=Math.abs(u/2),w=Math.abs(a/2);p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r)),x?Fo(e,h,s,g,w,t.id,!!(p&&p!=="transparent"),t.strokeWidth>0&&n!=="transparent",m):(e.beginPath(),e.ellipse(h,s,g,w,0,0,Math.PI*2),p&&p!=="transparent"&&e.fill(),t.strokeWidth>0&&n!=="transparent"&&e.stroke()),ir(e,t,r,o,c);break}case "diamond":{if(x){let g=new er(pr(t.id)),w=[{x:h,y:l},{x:i+u,y:s},{x:h,y:l+a},{x:i,y:s}];p&&p!=="transparent"&&(Tr(e,w,g,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&Ir(e,w,g,m);}else e.beginPath(),e.moveTo(h,l),e.lineTo(i+u,s),e.lineTo(h,l+a),e.lineTo(i,s),e.closePath(),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&e.stroke();ir(e,t,r,o,c);break}case "table":{let g=Lr(t),_=(t.edgeStyle||"round")==="round"?Math.min(10,Math.min(g.totalWidth,g.totalHeight)*.05):0;Ho(e,i,l,g.totalWidth,g.totalHeight,_);let S=p&&p!=="transparent"?p:c?"rgba(24, 24, 28, 0.95)":"rgba(255, 255, 255, 0.95)";e.fillStyle=S,e.fill();let E=t.cells||{},z=t.hasHeaderRow??true,D=t.hasHeaderCol??false;for(let C=0;C<g.rows;C++)for(let M=0;M<g.cols;M++){let R=`${C}_${M}`,J=E[R],oe=g.getCellBounds(C,M),A=null;J?.fill?A=J.fill:t.tableStyle==="swot"?C===0&&M===0?A=c?"rgba(16, 185, 129, 0.18)":"rgba(16, 185, 129, 0.12)":C===0&&M===1?A=c?"rgba(245, 158, 11, 0.18)":"rgba(245, 158, 11, 0.12)":C===1&&M===0?A=c?"rgba(59, 130, 246, 0.18)":"rgba(59, 130, 246, 0.12)":C===1&&M===1&&(A=c?"rgba(239, 68, 68, 0.18)":"rgba(239, 68, 68, 0.12)"):t.tableStyle==="kanban"&&C===0?M===0?A=c?"rgba(107, 114, 128, 0.22)":"rgba(107, 114, 128, 0.12)":M===1?A=c?"rgba(99, 102, 241, 0.22)":"rgba(99, 102, 241, 0.12)":M===2&&(A=c?"rgba(16, 185, 129, 0.22)":"rgba(16, 185, 129, 0.12)"):z&&C===0?A=c?"rgba(99, 102, 241, 0.22)":"rgba(99, 102, 241, 0.10)":D&&M===0?A=c?"rgba(99, 102, 241, 0.14)":"rgba(99, 102, 241, 0.06)":t.tableStyle==="zebra"&&C%2===1&&(A=c?"rgba(255, 255, 255, 0.03)":"rgba(0, 0, 0, 0.025)"),A&&(e.fillStyle=A,e.fillRect(oe.x,oe.y,oe.width,oe.height));}let P=Math.max(1,t.strokeWidth||1.5),I=n;e.strokeStyle=I,e.lineWidth=P;for(let C=1;C<g.cols;C++){let M=i+g.colOffsets[C];e.beginPath(),e.moveTo(M,l),e.lineTo(M,l+g.totalHeight),e.stroke();}for(let C=1;C<g.rows;C++){let M=l+g.rowOffsets[C];e.beginPath(),e.moveTo(i,M),e.lineTo(i+g.totalWidth,M),e.stroke();}t.strokeWidth>0&&n!=="transparent"&&(Ho(e,i,l,g.totalWidth,g.totalHeight,_),e.stroke());let b=Math.max(10,t.fontSize||13),f=ar(t.fontFamily),v=f.cssFont;for(let C=0;C<g.rows;C++)for(let M=0;M<g.cols;M++){if(o&&t.editingCell&&t.editingCell.row===C&&t.editingCell.col===M)continue;let J=`${C}_${M}`,oe=E[J],A=oe?.text??"";if(!A)continue;let U=g.getCellBounds(C,M),G=z&&C===0||D&&M===0||oe?.bold,Ne=oe?.align||(G?"center":"left");e.save(),e.beginPath(),e.rect(U.x+2,U.y+2,U.width-4,U.height-4),e.clip();let ne=f.value==="fuzzy"||f.value==="edusa",le=f.value==="patrick"||f.value==="comic"||f.value==="handlee"?"400":ne?G?"700":"400":G?"600":"400";e.font=`${le} ${b}px ${v}`,e.fillStyle=oe?.color||(G&&z&&C===0?c?"#ffffff":"#1e1b4b":n),e.textBaseline="middle";let ce=Xr(e,A,U.width-16),ke=b*1.35,Ie=ce.length*ke,we=U.y+(U.height-Ie)/2+ke/2;ce.forEach((Ge,Ue)=>{let ee=we+Ue*ke,Pe=U.x+8;Ne==="center"?(e.textAlign="center",Pe=U.x+U.width/2):Ne==="right"?(e.textAlign="right",Pe=U.x+U.width-8):(e.textAlign="left",Pe=U.x+8),e.fillText(Ge,Pe,ee);}),e.restore();}break}case "cylinder":{let g=Math.abs(u/2),w=Math.min(24*r,Math.abs(a)*.2),_=l+w,S=l+a-w;if(x){let E=new er(pr(t.id)),z=[{x:i,y:_},{x:i+u,y:_},{x:i+u,y:S},{x:i,y:S}];p&&p!=="transparent"&&(Tr(e,z,E,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&(Pr(e,i,_,i,S,E,m),Pr(e,i+u,_,i+u,S,E,m),Fo(e,h,S,g,w,t.id+"_b",false,true,m)),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r)),Fo(e,h,_,g,w,t.id+"_t",!!(p&&p!=="transparent"),t.strokeWidth>0&&n!=="transparent",m);}else e.beginPath(),e.ellipse(h,_,g,w,0,Math.PI,0),e.lineTo(i+u,S),e.ellipse(h,S,g,w,0,0,Math.PI),e.lineTo(i,_),e.closePath(),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&(e.beginPath(),e.moveTo(i,_),e.lineTo(i,S),e.ellipse(h,S,g,w,0,Math.PI,0,true),e.lineTo(i+u,_),e.stroke()),e.beginPath(),e.ellipse(h,_,g,w,0,0,Math.PI*2),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&e.stroke();ir(e,t,r,o,c);break}case "parallelogram":{let g=Math.min(36*r,Math.abs(u)*.22),w=[{x:i+g,y:l},{x:i+u,y:l},{x:i+u-g,y:l+a},{x:i,y:l+a}];if(x){let _=new er(pr(t.id));p&&p!=="transparent"&&(Tr(e,w,_,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&Ir(e,w,_,m);}else e.beginPath(),e.moveTo(w[0].x,w[0].y),e.lineTo(w[1].x,w[1].y),e.lineTo(w[2].x,w[2].y),e.lineTo(w[3].x,w[3].y),e.closePath(),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&e.stroke();ir(e,t,r,o,c);break}case "cloud":{let g=Math.abs(u),w=Math.abs(a);e.beginPath(),e.moveTo(i+g*.2,l+w*.7),e.bezierCurveTo(i+g*.1,l+w*.85,i+g*.35,l+w*.95,i+g*.5,l+w*.85),e.bezierCurveTo(i+g*.65,l+w*.95,i+g*.9,l+w*.85,i+g*.85,l+w*.65),e.bezierCurveTo(i+g*1.02,l+w*.5,i+g*.98,l+w*.25,i+g*.8,l+w*.25),e.bezierCurveTo(i+g*.78,l+w*.05,i+g*.52,l+w*.05,i+g*.45,l+w*.2),e.bezierCurveTo(i+g*.35,l+w*.08,i+g*.12,l+w*.15,i+g*.15,l+w*.4),e.bezierCurveTo(i-g*.02,l+w*.45,i-g*.01,l+w*.68,i+g*.2,l+w*.7),e.closePath(),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&(e.stroke(),x&&e.stroke()),ir(e,t,r,o,c);break}case "star":{let w=Math.min(Math.abs(u),Math.abs(a))/2,_=w*.45,S=Math.PI/2*3,E=Math.PI/5,z=[];for(let D=0;D<5;D++)z.push({x:h+Math.cos(S)*w,y:s+Math.sin(S)*w}),S+=E,z.push({x:h+Math.cos(S)*_,y:s+Math.sin(S)*_}),S+=E;if(x){let D=new er(pr(t.id));p&&p!=="transparent"&&(Tr(e,z,D,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&Ir(e,z,D,m);}else {e.beginPath(),e.moveTo(z[0].x,z[0].y);for(let D=1;D<z.length;D++)e.lineTo(z[D].x,z[D].y);e.closePath(),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),d&&(e.shadowColor="transparent"),t.strokeWidth>0&&n!=="transparent"&&e.stroke();}ir(e,t,r,o,c);break}case "triangle":{let g=(t.edgeStyle||"round")==="round",w={x:i+u/2,y:l},_={x:i+u,y:l+a},S={x:i,y:l+a},E=[w,_,S];if(x){let z=new er(pr(t.id));p&&p!=="transparent"&&(Tr(e,E,z,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&Ir(e,E,z,m);}else {if(e.beginPath(),g){let z=Math.min(12,Math.min(Math.abs(u),Math.abs(a))*.15);e.moveTo((w.x+_.x)/2,(w.y+_.y)/2),e.arcTo(_.x,_.y,S.x,S.y,z),e.arcTo(S.x,S.y,w.x,w.y,z),e.arcTo(w.x,w.y,_.x,_.y,z),e.closePath();}else e.moveTo(w.x,w.y),e.lineTo(_.x,_.y),e.lineTo(S.x,S.y),e.closePath();p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),d&&(e.shadowColor="transparent"),t.strokeWidth>0&&n!=="transparent"&&e.stroke();}ir(e,t,r,o,c);break}case "trapezoid":{let g=(t.edgeStyle||"round")==="round",w=Math.min(Math.abs(u)*.2,40*r),_={x:i+w,y:l},S={x:i+u-w,y:l},E={x:i+u,y:l+a},z={x:i,y:l+a},D=[_,S,E,z];if(x){let P=new er(pr(t.id));p&&p!=="transparent"&&(Tr(e,D,P,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&Ir(e,D,P,m);}else {if(e.beginPath(),g){let P=Math.min(10,Math.min(Math.abs(u),Math.abs(a))*.15);e.moveTo((_.x+S.x)/2,_.y),e.arcTo(S.x,S.y,E.x,E.y,P),e.arcTo(E.x,E.y,z.x,z.y,P),e.arcTo(z.x,z.y,_.x,_.y,P),e.arcTo(_.x,_.y,S.x,S.y,P),e.closePath();}else e.moveTo(_.x,_.y),e.lineTo(S.x,S.y),e.lineTo(E.x,E.y),e.lineTo(z.x,z.y),e.closePath();p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),d&&(e.shadowColor="transparent"),t.strokeWidth>0&&n!=="transparent"&&e.stroke();}ir(e,t,r,o,c);break}case "hexagon":{let g=(t.edgeStyle||"round")==="round",w=Math.min(Math.abs(u)*.22,45*r),_={x:i+w,y:l},S={x:i+u-w,y:l},E={x:i+u,y:l+a/2},z={x:i+u-w,y:l+a},D={x:i+w,y:l+a},P={x:i,y:l+a/2},I=[_,S,E,z,D,P];if(x){let b=new er(pr(t.id));p&&p!=="transparent"&&(Tr(e,I,b,m.roughness),e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),t.strokeWidth>0&&n!=="transparent"&&Ir(e,I,b,m);}else {if(e.beginPath(),g){let b=Math.min(10,Math.min(Math.abs(u),Math.abs(a))*.12);e.moveTo((_.x+S.x)/2,_.y),e.arcTo(S.x,S.y,E.x,E.y,b),e.arcTo(E.x,E.y,z.x,z.y,b),e.arcTo(z.x,z.y,D.x,D.y,b),e.arcTo(D.x,D.y,P.x,P.y,b),e.arcTo(P.x,P.y,_.x,_.y,b),e.arcTo(_.x,_.y,S.x,S.y,b),e.closePath();}else e.moveTo(_.x,_.y),e.lineTo(S.x,S.y),e.lineTo(E.x,E.y),e.lineTo(z.x,z.y),e.lineTo(D.x,D.y),e.lineTo(P.x,P.y),e.closePath();p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),d&&(e.shadowColor="transparent"),t.strokeWidth>0&&n!=="transparent"&&e.stroke();}ir(e,t,r,o,c);break}case "capsule":{let g=Math.abs(u),w=Math.abs(a),_=Math.min(g,w)/2;e.beginPath(),g>=w?(e.arc(i+_,l+_,_,Math.PI/2,Math.PI*3/2),e.lineTo(i+u-_,l),e.arc(i+u-_,l+_,_,Math.PI*3/2,Math.PI/2),e.lineTo(i+_,l+a)):(e.arc(i+_,l+_,_,Math.PI,0),e.lineTo(i+u-_,l+a-_),e.arc(i+_,l+a-_,_,0,Math.PI),e.lineTo(i,l+_)),e.closePath(),p&&p!=="transparent"&&(e.fillStyle=$t(e,t.fillStyle||"solid",p,r),e.fill()),d&&(e.shadowColor="transparent"),t.strokeWidth>0&&n!=="transparent"&&(e.stroke(),x&&e.stroke()),ir(e,t,r,o,c);break}case "arrow":case "line":{let g=Br(t),w={x:i+u,y:l+a};if(x&&g.type==="straight"){let S=new er(pr(t.id));Pr(e,i,l,w.x,w.y,S,m);}else e.beginPath(),g.type==="straight"?(e.moveTo(i,l),e.lineTo(w.x,w.y)):g.type==="curved"&&g.controlPoint?(e.moveTo(i,l),e.quadraticCurveTo(g.controlPoint.x,g.controlPoint.y,w.x,w.y)):g.type==="elbow"&&g.controlPoint1&&g.controlPoint2?(e.moveTo(i,l),e.bezierCurveTo(g.controlPoint1.x,g.controlPoint1.y,g.controlPoint2.x,g.controlPoint2.y,w.x,w.y)):ma(e,g.points,Math.max(8,12*r)),e.stroke(),x&&e.stroke();t.startArrowhead&&t.startArrowhead!=="none"&&va(e,i,l,g.departureAngle+Math.PI,t.startArrowhead,n,t.strokeWidth,r,c);let _=t.endArrowhead!==void 0?t.endArrowhead:t.type==="arrow"?"arrow":"none";_&&_!=="none"&&va(e,w.x,w.y,g.arrivalAngle,_,n,t.strokeWidth,r,c);break}case "pen":{let g=t.points;if(!g||g.length<2)break;e.beginPath(),e.moveTo(g[0].x,g[0].y);for(let _=1;_<g.length-1;_++){let S=(g[_].x+g[_+1].x)/2,E=(g[_].y+g[_+1].y)/2;e.quadraticCurveTo(g[_].x,g[_].y,S,E);}let w=g[g.length-1];e.lineTo(w.x,w.y),e.stroke();break}case "text":{ir(e,t,r,o,c);break}case "sticky":{let g=Mr(t.stickyColor||t.fillColor,c),w=Math.abs(u),_=Math.abs(a),S=Math.min(22*r,Math.min(w,_)*.16),E=Math.min(13*r,w*.08),z=Math.min(13*r,_*.08);e.fillStyle=g.backSheetBg,e.strokeStyle=g.backSheetBorder,e.lineWidth=1.5*r,e.beginPath(),typeof e.roundRect=="function"?e.roundRect(i+E,l+z,u,a,S):e.rect(i+E,l+z,u,a),e.fill(),e.stroke(),e.save(),e.shadowColor="rgba(0, 0, 0, 0.08)",e.shadowBlur=8*r,e.shadowOffsetX=1*r,e.shadowOffsetY=3*r,e.fillStyle=g.bg,e.beginPath(),typeof e.roundRect=="function"?e.roundRect(i,l,u,a,S):e.rect(i,l,u,a),e.fill(),e.restore(),e.strokeStyle=g.mainBorder,e.lineWidth=1.5*r,e.beginPath(),typeof e.roundRect=="function"?e.roundRect(i,l,u,a,S):e.rect(i,l,u,a),e.stroke(),e.save(),e.strokeStyle=g.sheen,e.lineWidth=1.5*r,e.beginPath();let D=2*r,P=Math.max(2,S-D);typeof e.roundRect=="function"&&e.roundRect(i+D,l+D,u-D*2,a-D*2,P),e.stroke(),e.restore();let I=Math.min(64*r,Math.max(30*r,w*.28)),b=Math.min(18*r,Math.max(10*r,_*.09)),f=i+(u-I)/2,v=l-b*.42,C=4*r;e.save(),e.shadowColor="rgba(0, 0, 0, 0.06)",e.shadowBlur=4*r,e.shadowOffsetY=1*r,e.fillStyle=g.tapeBg,e.beginPath(),typeof e.roundRect=="function"?e.roundRect(f,v,I,b,C):e.rect(f,v,I,b),e.fill(),e.restore(),e.strokeStyle=g.tapeBorder,e.lineWidth=1*r,e.beginPath(),typeof e.roundRect=="function"?e.roundRect(f,v,I,b,C):e.rect(f,v,I,b),e.stroke(),ir(e,t,r,o,c);break}case "image":{if(t.dataUrl){let g=wa.get(t.dataUrl);if(g||(g=new Image,g.crossOrigin="anonymous",g.onload=()=>{typeof window<"u"&&window.dispatchEvent(new CustomEvent("sketch-redraw-canvas"));},g.src=t.dataUrl,wa.set(t.dataUrl,g)),g.complete&&g.naturalWidth>0)if(t.edgeStyle==="round"){let w=Math.min(10*r,Math.abs(u)/4,Math.abs(a)/4);e.save(),e.beginPath(),typeof e.roundRect=="function"?e.roundRect(i,l,u,a,w):e.rect(i,l,u,a),e.clip(),e.drawImage(g,i,l,u,a),e.restore();}else e.drawImage(g,i,l,u,a);}break}case "frame":{let g=u<0?i+u:i,w=a<0?l+a:l,_=Math.abs(u),S=Math.abs(a);if(t.fillColor&&t.fillColor!=="transparent"&&(e.fillStyle=Nr(t.fillColor,t.fillStyle||"solid",c),e.fillRect(g,w,_,S)),t.strokeColor!=="transparent"){e.save();let E=t.strokeColor&&t.strokeColor!=="transparent"?Et(t.strokeColor,c):c?"#818cf8":"#6366f1";e.strokeStyle=E,e.lineWidth=Math.max(1,(t.strokeWidth||1.5)*r),t.strokeStyle==="dashed"?e.setLineDash([6*r,6*r]):t.strokeStyle==="dotted"?e.setLineDash([2*r,4*r]):e.setLineDash([]),e.strokeRect(g,w,_,S),e.restore();}if(!o){let E=t.frameLabel||"Frame",z=Math.max(11,12*r);e.save(),e.font=`600 ${z}px Inter, -apple-system, sans-serif`;let D=e.measureText(E),P=8*r,I=z+8*r,b=D.width+P*2,f=g+_-b,v=w-I-3*r;e.fillStyle=c?"#27272a":"#e4e4e7",typeof e.roundRect=="function"?(e.beginPath(),e.roundRect(f,v,b,I,4*r),e.fill()):e.fillRect(f,v,b,I),e.fillStyle=c?"#f4f4f5":"#18181b",e.textAlign="left",e.textBaseline="middle",e.fillText(E,f+P,v+I/2),e.restore();}break}}e.restore();}function Rr(e,t,r){let o=Math.cos(r),c=Math.sin(r),d=e.x-t.x,h=e.y-t.y;return {x:t.x+d*o-h*c,y:t.y+d*c+h*o}}function Ar(e,t,r){let o=r.x-t.x,c=r.y-t.y,d=o*o+c*c;if(d===0)return Math.hypot(e.x-t.x,e.y-t.y);let h=((e.x-t.x)*o+(e.y-t.y)*c)/d;h=Math.max(0,Math.min(1,h));let s=t.x+h*o,n=t.y+h*c;return Math.hypot(e.x-s,e.y-n)}function bt(e){let t=Math.min(e.x,e.x+e.width),r=Math.min(e.y,e.y+e.height),o=Math.abs(e.width),c=Math.abs(e.height);return {x:t,y:r,width:o,height:c}}function ji(e,t,r=8){let o=t.x+t.width/2,c=t.y+t.height/2,d=t.rotation?Rr(e,{x:o,y:c},-t.rotation):e,h=bt(t),{x:s,y:n,width:p,height:i}=h;switch(t.type){case "rectangle":case "text":case "image":return d.x>=s-r&&d.x<=s+p+r&&d.y>=n-r&&d.y<=n+i+r;case "frame":{let l=d.x>=s-r&&d.x<=s+p+r&&d.y>=n-r&&d.y<=n+i+r,u=d.x>=s+p-Math.min(p,260)-r&&d.x<=s+p+r&&d.y>=n-32-r&&d.y<=n+r;return l||u}case "sticky":{let l=Math.min(13,p*.08),u=Math.min(13,i*.08),a=Math.min(18,i*.09)*.42;return d.x>=s-r&&d.x<=s+p+l+r&&d.y>=n-a-r&&d.y<=n+i+u+r}case "ellipse":{let l=p/2+r,u=i/2+r;if(l<=0||u<=0)return false;let a=s+p/2,x=n+i/2,m=d.x-a,g=d.y-x;return m*m/(l*l)+g*g/(u*u)<=1}case "diamond":{let l=p/2+r,u=i/2+r;if(l<=0||u<=0)return false;let a=s+p/2,x=n+i/2,m=Math.abs(d.x-a),g=Math.abs(d.y-x);return m/l+g/u<=1}case "cylinder":case "table":return d.x>=s-r&&d.x<=s+p+r&&d.y>=n-r&&d.y<=n+i+r;case "cloud":case "star":case "trapezoid":case "hexagon":case "capsule":return d.x>=s-r&&d.x<=s+p+r&&d.y>=n-r&&d.y<=n+i+r;case "triangle":{if(d.x<s-r||d.x>s+p+r||d.y<n-r||d.y>n+i+r)return false;let l=i===0?0:Math.max(0,Math.min(1,(d.y-n)/i)),u=p/2*l,a=s+p/2-u,x=s+p/2+u;return d.x>=a-r&&d.x<=x+r}case "parallelogram":{if(d.y<n-r||d.y>n+i+r)return false;let l=Math.min(36,p*.22),u=i===0?0:Math.max(0,Math.min(1,(d.y-n)/i)),a=s+l*(1-u),x=s+p-l*u;return d.x>=a-r&&d.x<=x+r}case "line":case "arrow":{let l=Br(t),u=Math.max(r,(t.strokeWidth||2)+4);if(l.type==="straight")return Ar(d,l.points[0],l.points[1])<=u;if(l.type==="curved"&&l.controlPoint){let a={x:(l.points[0].x+l.controlPoint.x*2+l.points[1].x)/4,y:(l.points[0].y+l.controlPoint.y*2+l.points[1].y)/4};return Ar(d,l.points[0],a)<=u||Ar(d,a,l.points[1])<=u}if(l.type==="elbow"&&l.controlPoint1&&l.controlPoint2){let a=l.points[0],x=l.points[1],m=l.controlPoint1,g=l.controlPoint2;return Ar(d,a,m)<=u||Ar(d,m,g)<=u||Ar(d,g,x)<=u}for(let a=0;a<l.points.length-1;a++){let x=l.points[a],m=l.points[a+1];if(Ar(d,x,m)<=u)return true}return false}case "pen":{if(!t.points||t.points.length<2)return false;let l=Math.max(r,(t.strokeWidth||2)+4);for(let u=0;u<t.points.length-1;u++){let a=t.points[u],x=t.points[u+1];if(Ar(d,a,x)<=l)return true}return false}default:return false}}function go(e){if(e.type==="arrow"||e.type==="line"){let p=e.arrowType||"straight";if(p==="straight")return [{type:"start",x:e.x,y:e.y,cursor:"crosshair"},{type:"end",x:e.x+e.width,y:e.y+e.height,cursor:"crosshair"}];if(p==="curved"){let i=ga(e);return [{type:"start",x:e.x,y:e.y,cursor:"crosshair"},{type:"middle",x:i.x,y:i.y,cursor:"grab"},{type:"end",x:e.x+e.width,y:e.y+e.height,cursor:"crosshair"}]}if(p==="elbow"){let i=Br(e),l=i.controlPoint1||{x:e.x+e.width*.4,y:e.y},u=i.controlPoint2||{x:e.x+e.width*.6,y:e.y+e.height};return [{type:"start",x:e.x,y:e.y,cursor:"crosshair"},{type:"control1",x:l.x,y:l.y,cursor:"grab"},{type:"control2",x:u.x,y:u.y,cursor:"grab"},{type:"end",x:e.x+e.width,y:e.y+e.height,cursor:"crosshair"}]}}let t=bt(e),{x:r,y:o,width:c,height:d}=t,h=r+c/2,s=o+d/2,n=[{type:"nw",x:r,y:o,cursor:"nwse-resize"},{type:"n",x:h,y:o,cursor:"ns-resize"},{type:"ne",x:r+c,y:o,cursor:"nesw-resize"},{type:"e",x:r+c,y:s,cursor:"ew-resize"},{type:"se",x:r+c,y:o+d,cursor:"nwse-resize"},{type:"s",x:h,y:o+d,cursor:"ns-resize"},{type:"sw",x:r,y:o+d,cursor:"nesw-resize"},{type:"w",x:r,y:s,cursor:"ew-resize"},{type:"rotate",x:h,y:o-24,cursor:"grab"}];return e.rotation?n.map(p=>{let i=Rr({x:p.x,y:p.y},{x:h,y:s},e.rotation||0);return {...p,x:i.x,y:i.y}}):n}function mo(e,t,r=8){for(let o of t)if(Math.hypot(e.x-o.x,e.y-o.y)<=r)return o;return null}function Dr(e,t,r=8){let o=[...t].sort((c,d)=>(d.zIndex??0)-(c.zIndex??0));for(let c of o)if(ji(e,c,r))return c;return null}function _a(e,t){let r=Math.min(e.startX,e.currentX),o=Math.max(e.startX,e.currentX),c=Math.min(e.startY,e.currentY),d=Math.max(e.startY,e.currentY);return t.filter(h=>{let s=bt(h),n=s.x,p=s.x+s.width,i=s.y,l=s.y+s.height;return !(p<r||n>o||l<c||i>d)})}function jr(e,t=0){if(e.length===0)return null;let r=1/0,o=1/0,c=-1/0,d=-1/0;for(let h of e){let s=bt(h);s.x<r&&(r=s.x),s.y<o&&(o=s.y),s.x+s.width>c&&(c=s.x+s.width),s.y+s.height>d&&(d=s.y+s.height);}return r===1/0?null:{x:r-t,y:o-t,width:Math.max(1,c-r+t*2),height:Math.max(1,d-o+t*2)}}function yo(e){let{x:t,y:r,width:o,height:c}=e,d=t+o/2,h=r+c/2;return [{type:"nw",x:t,y:r,cursor:"nwse-resize"},{type:"n",x:d,y:r,cursor:"ns-resize"},{type:"ne",x:t+o,y:r,cursor:"nesw-resize"},{type:"e",x:t+o,y:h,cursor:"ew-resize"},{type:"se",x:t+o,y:r+c,cursor:"nwse-resize"},{type:"s",x:d,y:r+c,cursor:"ns-resize"},{type:"sw",x:t,y:r+c,cursor:"nesw-resize"},{type:"w",x:t,y:h,cursor:"ew-resize"},{type:"rotate",x:d,y:r-24,cursor:"grab"}]}function Sa(e,t,r=6){if(e.type!=="table")return {type:"none"};let o=Math.min(e.x,e.x+e.width),c=Math.min(e.y,e.y+e.height),d=Lr(e),h=e.rotation?Rr(t,{x:o+d.totalWidth/2,y:c+d.totalHeight/2},-e.rotation):t;for(let s=1;s<d.cols;s++){let n=o+d.colOffsets[s];if(Math.abs(h.x-n)<=r&&h.y>=c-r&&h.y<=c+d.totalHeight+r)return {type:"col-divider",colIndex:s,x:n,minY:c,maxY:c+d.totalHeight}}for(let s=1;s<d.rows;s++){let n=c+d.rowOffsets[s];if(Math.abs(h.y-n)<=r&&h.x>=o-r&&h.x<=o+d.totalWidth+r)return {type:"row-divider",rowIndex:s,y:n,minX:o,maxX:o+d.totalWidth}}for(let s=0;s<d.rows;s++)for(let n=0;n<d.cols;n++){let p=d.getCellBounds(s,n);if(h.x>=p.x&&h.x<=p.x+p.width&&h.y>=p.y&&h.y<=p.y+p.height)return {type:"cell",row:s,col:n,bounds:p}}return {type:"none"}}var Gi=["rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","table","sticky","text","image","frame"];function Xo(e){let t=Math.min(e.x,e.x+e.width),r=Math.max(e.x,e.x+e.width),o=Math.min(e.y,e.y+e.height),c=Math.max(e.y,e.y+e.height),d=r-t,h=c-o,s=t+d/2,n=o+h/2,p;if(e.type==="ellipse"){let i=d/2,l=h/2,u=Math.cos(Math.PI/6),a=Math.sin(Math.PI/6),x=Math.cos(Math.PI/3),m=Math.sin(Math.PI/3);p={"top-left":{x:s-i*x,y:n-l*m},top:{x:s,y:n-l},"top-right":{x:s+i*x,y:n-l*m},"right-top":{x:s+i*u,y:n-l*a},right:{x:s+i,y:n},"right-bottom":{x:s+i*u,y:n+l*a},"bottom-right":{x:s+i*x,y:n+l*m},bottom:{x:s,y:n+l},"bottom-left":{x:s-i*x,y:n+l*m},"left-bottom":{x:s-i*u,y:n+l*a},left:{x:s-i,y:n},"left-top":{x:s-i*u,y:n-l*a},center:{x:s,y:n}};}else if(e.type==="diamond")p={"top-left":{x:t+(s-t)*.5,y:n-(n-o)*.5},top:{x:s,y:o},"top-right":{x:s+(r-s)*.5,y:o+(n-o)*.5},"right-top":{x:s+(r-s)*.75,y:o+(n-o)*.75},right:{x:r,y:n},"right-bottom":{x:r-(r-s)*.25,y:n+(c-n)*.25},"bottom-right":{x:s+(r-s)*.5,y:n+(c-n)*.5},bottom:{x:s,y:c},"bottom-left":{x:t+(s-t)*.5,y:n+(c-n)*.5},"left-bottom":{x:t+(s-t)*.25,y:n+(c-n)*.25},left:{x:t,y:n},"left-top":{x:t+(s-t)*.25,y:n-(n-o)*.25},center:{x:s,y:n}};else if(e.type==="triangle")p={top:{x:s,y:o},"top-left":{x:s+(t-s)*.33,y:o+h*.33},"left-top":{x:s+(t-s)*.5,y:o+h*.5},left:{x:s+(t-s)*.67,y:o+h*.67},"left-bottom":{x:s+(t-s)*.85,y:o+h*.85},"top-right":{x:s+(r-s)*.33,y:o+h*.33},"right-top":{x:s+(r-s)*.5,y:o+h*.5},right:{x:s+(r-s)*.67,y:o+h*.67},"right-bottom":{x:s+(r-s)*.85,y:o+h*.85},"bottom-left":{x:t+d*.25,y:c},bottom:{x:s,y:c},"bottom-right":{x:t+d*.75,y:c},center:{x:s,y:o+h*.62}};else if(e.type==="parallelogram"){let i=Math.min(36,d*.22);p={"top-left":{x:t+i+(d-i)*.25,y:o},top:{x:t+i+(d-i)*.5,y:o},"top-right":{x:t+i+(d-i)*.75,y:o},"right-top":{x:r-i*.25,y:o+h*.25},right:{x:r-i*.5,y:n},"right-bottom":{x:r-i*.75,y:o+h*.75},"bottom-right":{x:t+(d-i)*.75,y:c},bottom:{x:t+(d-i)*.5,y:c},"bottom-left":{x:t+(d-i)*.25,y:c},"left-bottom":{x:t+i*.25,y:o+h*.75},left:{x:t+i*.5,y:n},"left-top":{x:t+i*.75,y:o+h*.25},center:{x:s,y:n}};}else if(e.type==="trapezoid"){let i=Math.min(d*.2,40);p={"top-left":{x:t+i+(d-2*i)*.25,y:o},top:{x:s,y:o},"top-right":{x:t+i+(d-2*i)*.75,y:o},"right-top":{x:r-i+i*.25,y:o+h*.25},right:{x:r-i*.5,y:n},"right-bottom":{x:r-i+i*.75,y:o+h*.75},"bottom-right":{x:t+d*.75,y:c},bottom:{x:s,y:c},"bottom-left":{x:t+d*.25,y:c},"left-bottom":{x:t+i*.25,y:o+h*.75},left:{x:t+i*.5,y:n},"left-top":{x:t+i*.75,y:o+h*.25},center:{x:s,y:n}};}else if(e.type==="hexagon"){let i=Math.min(d*.22,45);p={"top-left":{x:t+i+(d-2*i)*.25,y:o},top:{x:s,y:o},"top-right":{x:t+i+(d-2*i)*.75,y:o},"right-top":{x:r-i*.5,y:o+h*.25},right:{x:r,y:n},"right-bottom":{x:r-i*.5,y:o+h*.75},"bottom-right":{x:t+i+(d-2*i)*.75,y:c},bottom:{x:s,y:c},"bottom-left":{x:t+i+(d-2*i)*.25,y:c},"left-bottom":{x:t+i*.5,y:o+h*.75},left:{x:t,y:n},"left-top":{x:t+i*.5,y:o+h*.25},center:{x:s,y:n}};}else if(e.type==="capsule"){let i=d>=h,l=Math.min(d,h)/2;if(i){let u=Math.SQRT1_2;p={"top-left":{x:t+l+(d-2*l)*.25,y:o},top:{x:s,y:o},"top-right":{x:t+l+(d-2*l)*.75,y:o},"right-top":{x:r-l+l*u,y:n-l*u},right:{x:r,y:n},"right-bottom":{x:r-l+l*u,y:n+l*u},"bottom-right":{x:t+l+(d-2*l)*.75,y:c},bottom:{x:s,y:c},"bottom-left":{x:t+l+(d-2*l)*.25,y:c},"left-bottom":{x:t+l-l*u,y:n+l*u},left:{x:t,y:n},"left-top":{x:t+l-l*u,y:n-l*u},center:{x:s,y:n}};}else {let u=Math.SQRT1_2;p={"top-left":{x:s-l*u,y:o+l-l*u},top:{x:s,y:o},"top-right":{x:s+l*u,y:o+l-l*u},"right-top":{x:r,y:o+l+(h-2*l)*.25},right:{x:r,y:n},"right-bottom":{x:r,y:o+l+(h-2*l)*.75},"bottom-right":{x:s+l*u,y:c-l+l*u},bottom:{x:s,y:c},"bottom-left":{x:s-l*u,y:c-l+l*u},"left-bottom":{x:t,y:o+l+(h-2*l)*.75},left:{x:t,y:n},"left-top":{x:t,y:o+l+(h-2*l)*.25},center:{x:s,y:n}};}}else if(e.type==="cylinder"){let i=Math.min(24,h*.2);p={"top-left":{x:s-d/2*.7,y:o+i-i*.7},top:{x:s,y:o},"top-right":{x:s+d/2*.7,y:o+i-i*.7},"right-top":{x:r,y:o+i+(h-2*i)*.25},right:{x:r,y:n},"right-bottom":{x:r,y:o+i+(h-2*i)*.75},"bottom-right":{x:s+d/2*.7,y:c-i+i*.7},bottom:{x:s,y:c},"bottom-left":{x:s-d/2*.7,y:c-i+i*.7},"left-bottom":{x:t,y:o+i+(h-2*i)*.75},left:{x:t,y:n},"left-top":{x:t,y:o+i+(h-2*i)*.25},center:{x:s,y:n}};}else if(e.type==="star"){let i=Math.min(d,h)/2,l=i*.45,u=Math.cos,a=Math.sin,x=Math.PI;p={top:{x:s,y:n-i},"top-right":{x:s+l*u(-x/2+x/5),y:n+l*a(-x/2+x/5)},"right-top":{x:s+i*u(-x/10),y:n+i*a(-x/10)},right:{x:s+(i*u(-x/10)+l*u(x/10))/2,y:n},"right-bottom":{x:s+i*u(3*x/10),y:n+i*a(3*x/10)},"bottom-right":{x:s+l*u(x/10),y:n+l*a(x/10)},bottom:{x:s,y:n+l},"bottom-left":{x:s+l*u(9*x/10),y:n+l*a(9*x/10)},"left-bottom":{x:s+i*u(7*x/10),y:n+i*a(7*x/10)},left:{x:s+(i*u(11*x/10)+l*u(9*x/10))/2,y:n},"left-top":{x:s+i*u(11*x/10),y:n+i*a(11*x/10)},"top-left":{x:s+l*u(-x/2-x/5),y:n+l*a(-x/2-x/5)},center:{x:s,y:n}};}else e.type==="cloud"?p={"top-left":{x:t+d*.28,y:o+h*.08},top:{x:s,y:o+h*.05},"top-right":{x:t+d*.72,y:o+h*.08},"right-top":{x:r-d*.04,y:o+h*.28},right:{x:r,y:n},"right-bottom":{x:r-d*.06,y:o+h*.72},"bottom-right":{x:t+d*.72,y:c-h*.05},bottom:{x:s,y:c},"bottom-left":{x:t+d*.28,y:c-h*.05},"left-bottom":{x:t+d*.04,y:o+h*.72},left:{x:t,y:n},"left-top":{x:t+d*.04,y:o+h*.28},center:{x:s,y:n}}:p={"top-left":{x:t+d*.25,y:o},top:{x:s,y:o},"top-right":{x:t+d*.75,y:o},"right-top":{x:r,y:o+h*.25},right:{x:r,y:n},"right-bottom":{x:r,y:o+h*.75},"bottom-left":{x:t+d*.25,y:c},bottom:{x:s,y:c},"bottom-right":{x:t+d*.75,y:c},"left-top":{x:t,y:o+h*.25},left:{x:t,y:n},"left-bottom":{x:t,y:o+h*.75},center:{x:s,y:n}};if(e.rotation){let i={x:s,y:n},l={};for(let[u,a]of Object.entries(p))l[u]=u==="center"?a:Rr(a,i,e.rotation);return l}return p}function Ca(e,t){let r=Xo(e);return r[t]||r.center}function oo(e,t,r,o=28){let c=null,d=o;for(let h of t){if(h.id===r||!Gi.includes(h.type))continue;let s=Xo(h);for(let[n,p]of Object.entries(s)){let i=Math.hypot(e.x-p.x,e.y-p.y);i<d&&(d=i,c={element:h,anchor:n,point:p,distance:i});}}return c}function Ct(e){let t=new Map;for(let r of e)t.set(r.id,r);return e.map(r=>{if(r.type!=="arrow"&&r.type!=="line"||!r.startBinding&&!r.endBinding)return r;let o={x:r.x,y:r.y},c={x:r.x+r.width,y:r.y+r.height},d=r.startBinding,h=r.endBinding;if(r.startBinding){let x=t.get(r.startBinding.elementId);x?o=Ca(x,r.startBinding.anchor):d=null;}if(r.endBinding){let x=t.get(r.endBinding.elementId);x?c=Ca(x,r.endBinding.anchor):h=null;}let s=o.x-r.x,n=o.y-r.y,p=c.x-(r.x+r.width),i=c.y-(r.y+r.height),l=r.controlPoint;l&&(l={x:l.x+(s+p)/2,y:l.y+(n+i)/2});let u=r.controlPoint1;u&&(u={x:u.x+s*.7+p*.3,y:u.y+n*.7+i*.3});let a=r.controlPoint2;return a&&(a={x:a.x+s*.3+p*.7,y:a.y+n*.3+i*.7}),{...r,x:o.x,y:o.y,width:c.x-o.x,height:c.y-o.y,controlPoint:l,controlPoint1:u,controlPoint2:a,startBinding:d,endBinding:h}})}function Er(e,t={}){let{deltaX:r=24,deltaY:o=24,highestZ:c=0}=t,d=new Map,h=new Map,s=[];return e.forEach((p,i)=>{let l=`el_${Date.now()}_${i}_${Math.random().toString(36).substring(2,7)}`;d.set(p.id,l),s.push(l),p.groupIds&&p.groupIds.length>0&&p.groupIds.forEach(u=>{h.has(u)||h.set(u,`grp_${Date.now()}_${i}_${Math.random().toString(36).substring(2,7)}`);});}),{clonedElements:e.map((p,i)=>{let l=d.get(p.id),u;p.groupIds&&p.groupIds.length>0&&(u=p.groupIds.map(S=>h.get(S)));let a=p.startBinding;p.startBinding&&(d.has(p.startBinding.elementId)?a={...p.startBinding,elementId:d.get(p.startBinding.elementId)}:a=null);let x=p.endBinding;p.endBinding&&(d.has(p.endBinding.elementId)?x={...p.endBinding,elementId:d.get(p.endBinding.elementId)}:x=null);let m=p.controlPoint;m&&(m={x:m.x+r,y:m.y+o});let g=p.controlPoint1;g&&(g={x:g.x+r,y:g.y+o});let w=p.controlPoint2;w&&(w={x:w.x+r,y:w.y+o});let _=p.points;return _&&_.length>0&&(_=_.map(S=>({x:S.x+r,y:S.y+o}))),{...p,id:l,x:p.x+r,y:p.y+o,zIndex:c+i+1,groupIds:u,startBinding:a,endBinding:x,controlPoint:m,controlPoint1:g,controlPoint2:w,points:_}}),newSelectedIds:s}}function Gr(e,t){if(!t||t.length===0)return e;let r=new Set(t),o=new Set;for(let d of e)r.has(d.id)&&d.type!=="arrow"&&d.type!=="line"&&o.add(d.id);let c=e.filter(d=>{if(r.has(d.id))return false;if(d.type==="arrow"||d.type==="line"){let h=d.startBinding&&o.has(d.startBinding.elementId),s=d.endBinding&&o.has(d.endBinding.elementId);if(h||s)return false}return true});return Ct(c)}function Ma({dragInitialBounds:e,rawDx:t,rawDy:r,allElements:o,selectedIds:c,snapThreshold:d=8}){let h={id:"dragging",minX:e.x+t,maxX:e.x+t+e.width,centerX:e.x+t+e.width/2,minY:e.y+r,maxY:e.y+r+e.height,centerY:e.y+r+e.height/2,width:e.width,height:e.height},s=[];for(let w of o){if(c.includes(w.id)||w.type==="pen"||w.type==="arrow"||w.type==="line")continue;let _=bt(w);_.width<5||_.height<5||s.push({id:w.id,minX:_.x,maxX:_.x+_.width,centerX:_.x+_.width/2,minY:_.y,maxY:_.y+_.height,centerY:_.y+_.height/2,width:_.width,height:_.height});}if(s.length===0)return {snappedDx:t,snappedDy:r,alignmentGuides:[],spacingGuides:[]};let n=null,p=null;for(let w of s){let _=[{dragVal:h.minX,targetVal:w.minX,type:"edge",snapDelta:w.minX-h.minX},{dragVal:h.minX,targetVal:w.maxX,type:"edge",snapDelta:w.maxX-h.minX},{dragVal:h.centerX,targetVal:w.centerX,type:"center",snapDelta:w.centerX-h.centerX},{dragVal:h.maxX,targetVal:w.minX,type:"edge",snapDelta:w.minX-h.maxX},{dragVal:h.maxX,targetVal:w.maxX,type:"edge",snapDelta:w.maxX-h.maxX}];for(let E of _){let z=Math.abs(E.snapDelta);if(z<=d&&(!n||z<Math.abs(n.diff))){let D=Math.min(h.minY,w.minY)-16,P=Math.max(h.maxY,w.maxY)+16;n={diff:E.snapDelta,guide:{orientation:"vertical",position:E.targetVal,from:D,to:P,type:E.type}};}}let S=[{dragVal:h.minY,targetVal:w.minY,type:"edge",snapDelta:w.minY-h.minY},{dragVal:h.minY,targetVal:w.maxY,type:"edge",snapDelta:w.maxY-h.minY},{dragVal:h.centerY,targetVal:w.centerY,type:"center",snapDelta:w.centerY-h.centerY},{dragVal:h.maxY,targetVal:w.minY,type:"edge",snapDelta:w.minY-h.maxY},{dragVal:h.maxY,targetVal:w.maxY,type:"edge",snapDelta:w.maxY-h.maxY}];for(let E of S){let z=Math.abs(E.snapDelta);if(z<=d&&(!p||z<Math.abs(p.diff))){let D=Math.min(h.minX,w.minX)-16,P=Math.max(h.maxX,w.maxX)+16;p={diff:E.snapDelta,guide:{orientation:"horizontal",position:E.targetVal,from:D,to:P,type:E.type}};}}}let i=t+(n?n.diff:0),l=r+(p?p.diff:0),u=[];n&&u.push(n.guide),p&&u.push(p.guide);let a=[],x={...h,minX:e.x+i,maxX:e.x+i+e.width,centerX:e.x+i+e.width/2,minY:e.y+l,maxY:e.y+l+e.height,centerY:e.y+l+e.height/2},m=s.filter(w=>Math.max(w.minY,x.minY)<Math.min(w.maxY,x.maxY)).sort((w,_)=>w.minX-_.minX);if(m.length>=2){let w=false;for(let _=0;_<m.length-1;_++){let S=m[_],E=m[_+1];if(S.maxX<x.minX&&x.maxX<E.minX){let z=x.minX-S.maxX,D=E.minX-x.maxX,I=(E.minX-S.maxX-x.width)/2;if(I>5&&Math.abs(z-D)<=d*2){let b=S.maxX+I-x.minX;if(Math.abs(b)<=d){i+=b,x.minX+=b,x.maxX+=b;let f=Math.round(I),v=x.centerY;a.push({orientation:"horizontal",gap:f,lineStart:{x:S.maxX,y:v},lineEnd:{x:x.minX,y:v},badgePos:{x:(S.maxX+x.minX)/2,y:v}}),a.push({orientation:"horizontal",gap:f,lineStart:{x:x.maxX,y:v},lineEnd:{x:E.minX,y:v},badgePos:{x:(x.maxX+E.minX)/2,y:v}}),w=true;break}}}}if(!w)for(let _=0;_<m.length-1;_++){let S=m[_],E=m[_+1],z=E.minX-S.maxX;if(z>5){if(x.minX>=E.maxX){let D=x.minX-E.maxX,P=z-D;if(Math.abs(P)<=d){i+=P,x.minX+=P,x.maxX+=P;let I=Math.round(z),b=x.centerY;a.push({orientation:"horizontal",gap:I,lineStart:{x:S.maxX,y:b},lineEnd:{x:E.minX,y:b},badgePos:{x:(S.maxX+E.minX)/2,y:b}}),a.push({orientation:"horizontal",gap:I,lineStart:{x:E.maxX,y:b},lineEnd:{x:x.minX,y:b},badgePos:{x:(E.maxX+x.minX)/2,y:b}});break}}if(x.maxX<=S.minX){let P=S.minX-x.maxX-z;if(Math.abs(P)<=d){i+=P,x.minX+=P,x.maxX+=P;let I=Math.round(z),b=x.centerY;a.push({orientation:"horizontal",gap:I,lineStart:{x:x.maxX,y:b},lineEnd:{x:S.minX,y:b},badgePos:{x:(x.maxX+S.minX)/2,y:b}}),a.push({orientation:"horizontal",gap:I,lineStart:{x:S.maxX,y:b},lineEnd:{x:E.minX,y:b},badgePos:{x:(S.maxX+E.minX)/2,y:b}});break}}}}}let g=s.filter(w=>Math.max(w.minX,x.minX)<Math.min(w.maxX,x.maxX)).sort((w,_)=>w.minY-_.minY);if(g.length>=2){let w=false;for(let _=0;_<g.length-1;_++){let S=g[_],E=g[_+1];if(S.maxY<x.minY&&x.maxY<E.minY){let z=x.minY-S.maxY,D=E.minY-x.maxY,I=(E.minY-S.maxY-x.height)/2;if(I>5&&Math.abs(z-D)<=d*2){let b=S.maxY+I-x.minY;if(Math.abs(b)<=d){l+=b,x.minY+=b,x.maxY+=b;let f=Math.round(I),v=x.centerX;a.push({orientation:"vertical",gap:f,lineStart:{x:v,y:S.maxY},lineEnd:{x:v,y:x.minY},badgePos:{x:v,y:(S.maxY+x.minY)/2}}),a.push({orientation:"vertical",gap:f,lineStart:{x:v,y:x.maxY},lineEnd:{x:v,y:E.minY},badgePos:{x:v,y:(x.maxY+E.minY)/2}}),w=true;break}}}}if(!w)for(let _=0;_<g.length-1;_++){let S=g[_],E=g[_+1],z=E.minY-S.maxY;if(z>5){if(x.minY>=E.maxY){let D=x.minY-E.maxY,P=z-D;if(Math.abs(P)<=d){l+=P,x.minY+=P,x.maxY+=P;let I=Math.round(z),b=x.centerX;a.push({orientation:"vertical",gap:I,lineStart:{x:b,y:S.maxY},lineEnd:{x:b,y:E.minY},badgePos:{x:b,y:(S.maxY+E.minY)/2}}),a.push({orientation:"vertical",gap:I,lineStart:{x:b,y:E.maxY},lineEnd:{x:b,y:x.minY},badgePos:{x:b,y:(E.maxY+x.minY)/2}});break}}if(x.maxY<=S.minY){let P=S.minY-x.maxY-z;if(Math.abs(P)<=d){l+=P,x.minY+=P,x.maxY+=P;let I=Math.round(z),b=x.centerX;a.push({orientation:"vertical",gap:I,lineStart:{x:b,y:x.maxY},lineEnd:{x:b,y:S.minY},badgePos:{x:b,y:(x.maxY+S.minY)/2}}),a.push({orientation:"vertical",gap:I,lineStart:{x:b,y:S.maxY},lineEnd:{x:b,y:E.minY},badgePos:{x:b,y:(S.maxY+E.minY)/2}});break}}}}}return {snappedDx:i,snappedDy:l,alignmentGuides:u,spacingGuides:a}}function Pa({readOnly:e=false,tool:t,setTool:r,isToolLocked:o=false,camera:c,screenToWorld:d,panBy:h,elements:s,setElements:n,selectedIds:p,selectElement:i,selectElements:l,clearSelection:u,addElement:a,deleteSelectedElements:x,duplicateSelectedElements:m,groupSelectedElements:g,ungroupSelectedElements:w,pushHistory:_,undo:S,redo:E,defaultStyles:z,onEditText:D,onLaserDrawStart:P,onLaserDrawMove:I,onLaserDrawEnd:b,onLaserHover:f}){let v=useRef(s),C=useRef(p);useEffect(()=>{v.current=s,C.current=p;},[s,p]);let[M,R]=useState(false),[J,oe]=useState(null),[A,U]=useState(null),G=useMemo(()=>e||M||t==="hand"?"grab":t==="select"?"default":t==="laser"?"none":t==="eraser"?"crosshair":t==="text"?"text":"crosshair",[e,t,M]),[Ne,ne]=useState(null),le=Ne||G,[ce,ke]=useState(null),[Ie,we]=useState([]),[Ge,Ue]=useState([]),ee=useRef({mode:"none",startScreenPt:{x:0,y:0},startWorldPt:{x:0,y:0}});useEffect(()=>{let Z=K=>{if(!(K.target instanceof HTMLInputElement||K.target instanceof HTMLTextAreaElement||K.target.isContentEditable)){if(e){K.code==="Space"&&!K.repeat&&(K.preventDefault(),R(true));return}if(K.code==="Space"&&!K.repeat)K.preventDefault(),R(true);else if(K.key==="Delete"||K.key==="Backspace")x();else if((K.ctrlKey||K.metaKey)&&K.key.toLowerCase()==="z")K.preventDefault(),K.shiftKey?E():S();else if((K.ctrlKey||K.metaKey)&&K.key.toLowerCase()==="y")K.preventDefault(),E();else if((K.ctrlKey||K.metaKey)&&K.key.toLowerCase()==="d")K.preventDefault(),m();else if((K.ctrlKey||K.metaKey)&&K.key.toLowerCase()==="a")K.preventDefault(),v.current.length>0&&(l(v.current.map(de=>de.id)),r("select"));else if((K.ctrlKey||K.metaKey)&&K.key.toLowerCase()==="g")K.preventDefault(),K.shiftKey?w?.():g?.();else if(!K.ctrlKey&&!K.metaKey&&(K.key==="ArrowUp"||K.key==="ArrowDown"||K.key==="ArrowLeft"||K.key==="ArrowRight")&&C.current.length>0){K.preventDefault();let de=K.shiftKey?10:2,re=K.key==="ArrowLeft"?-de:K.key==="ArrowRight"?de:0,T=K.key==="ArrowUp"?-de:K.key==="ArrowDown"?de:0,L=C.current;n(q=>{let k=q.map(V=>L.includes(V.id)?{...V,x:V.x+re,y:V.y+T,points:V.points?.map($=>({x:$.x+re,y:$.y+T})),controlPoint:V.controlPoint?{x:V.controlPoint.x+re,y:V.controlPoint.y+T}:V.controlPoint,controlPoint1:V.controlPoint1?{x:V.controlPoint1.x+re,y:V.controlPoint1.y+T}:V.controlPoint1,controlPoint2:V.controlPoint2?{x:V.controlPoint2.x+re,y:V.controlPoint2.y+T}:V.controlPoint2}:V),pe=Ct(k);return _(pe),pe});}}},Se=K=>{K.code==="Space"&&R(false);};return window.addEventListener("keydown",Z),window.addEventListener("keyup",Se),()=>{window.removeEventListener("keydown",Z),window.removeEventListener("keyup",Se);}},[x,m,g,w,S,E,l,r,n,_]);let Pe=useCallback(Z=>{if(e){(Z.button===0||Z.button===1)&&(ee.current={mode:"pan",startScreenPt:{x:Z.clientX,y:Z.clientY},startWorldPt:d({x:Z.clientX,y:Z.clientY})},ne("grabbing"));return}if(Z.button===1||M||t==="hand"){ee.current={mode:"pan",startScreenPt:{x:Z.clientX,y:Z.clientY},startWorldPt:d({x:Z.clientX,y:Z.clientY})},ne("grabbing");return}if(Z.button!==0)return;let Se=Z.currentTarget.getBoundingClientRect(),K={x:Z.clientX-Se.left,y:Z.clientY-Se.top},de=d(K);if(t==="laser"){u(),P?.(de),ee.current={mode:"laser",startScreenPt:K,startWorldPt:de};return}if(p.length===1){let L=s.find(q=>q.id===p[0]);if(L){let q=go(L),k=mo(de,q,12/c.zoom);if(k){let pe=new Map;if(pe.set(L.id,{...L}),k.type==="start"||k.type==="end"){ee.current={mode:"arrow-endpoint",startScreenPt:K,startWorldPt:de,activeElementId:L.id,initialElementSnapshots:pe,arrowHandleType:k.type};return}if(k.type==="middle"){ee.current={mode:"arrow-control",startScreenPt:K,startWorldPt:de,activeElementId:L.id,initialElementSnapshots:pe,arrowHandleType:"middle"};return}if(k.type==="control1"||k.type==="control2"){ee.current={mode:k.type==="control1"?"arrow-control1":"arrow-control2",startScreenPt:K,startWorldPt:de,activeElementId:L.id,initialElementSnapshots:pe,arrowHandleType:k.type};return}if(k.type==="rotate"){let V=L.x+L.width/2,$=L.y+L.height/2,te=Math.atan2(de.y-$,de.x-V);ee.current={mode:"rotate",startScreenPt:K,startWorldPt:de,activeElementId:L.id,initialElementSnapshots:pe,initialAngle:te,initialRotation:L.rotation||0};}else ee.current={mode:"resize",startScreenPt:K,startWorldPt:de,activeElementId:L.id,initialElementSnapshots:pe,activeHandle:k};return}}}else if(p.length>1){let L=s.filter(k=>p.includes(k.id)),q=jr(L,6);if(q){let k=yo(q),pe=mo(de,k,12/c.zoom);if(pe){let V=new Map;if(L.forEach($=>V.set($.id,{...$})),pe.type==="rotate"){let $=q.x+q.width/2,te=q.y+q.height/2,fe=Math.atan2(de.y-te,de.x-$);ee.current={mode:"rotate",startScreenPt:K,startWorldPt:de,initialElementSnapshots:V,initialGroupBounds:q,initialAngle:fe,initialRotation:0};}else ee.current={mode:"resize",startScreenPt:K,startWorldPt:de,initialElementSnapshots:V,initialGroupBounds:q,activeHandle:pe};return}}}if(t==="select"){let L=Dr(de,s,8/c.zoom),q=false;if(!L&&p.length>1&&!Z.shiftKey){let k=s.filter(V=>p.includes(V.id)),pe=jr(k,8);pe&&de.x>=pe.x&&de.x<=pe.x+pe.width&&de.y>=pe.y&&de.y<=pe.y+pe.height&&(q=true);}if(L||q){let k=Z.shiftKey,pe=Z.ctrlKey||Z.metaKey,V=p,$=[];if(L){$=[L.id];let fe=p.length===1&&p[0]===L.id;if(L.groupIds&&L.groupIds.length>0&&!pe&&!fe){let F=L.groupIds[L.groupIds.length-1];$=s.filter(ve=>ve.groupIds&&ve.groupIds.includes(F)).map(ve=>ve.id);}let be=$.every(F=>p.includes(F)),ue=p.includes(L.id);k?(be?V=p.filter(F=>!$.includes(F)):V=Array.from(new Set([...p,...$])),l(V)):ue||(V=$,l(V));}let te=new Map;if(Z.altKey){let fe=s.filter(ve=>V.includes(ve.id)),be=s.reduce((ve,ae)=>Math.max(ve,ae.zIndex??0),0),{clonedElements:ue,newSelectedIds:F}=Er(fe,{deltaX:0,deltaY:0,highestZ:be});if(ue.length>0){ue.forEach(ae=>{te.set(ae.id,{...ae});});let ve=Ct([...s,...ue]);n(ve),l(F);}}else {let fe=s.filter(ue=>V.includes(ue.id));fe.forEach(ue=>{te.set(ue.id,{...ue});});let be=fe.filter(ue=>ue.type==="frame");if(be.length>0){let ue=F=>({x:F.width<0?F.x+F.width:F.x,y:F.height<0?F.y+F.height:F.y,width:Math.abs(F.width),height:Math.abs(F.height)});s.forEach(F=>{if(F.type==="frame"||te.has(F.id))return;let ve=ue(F),ae=ve.x+ve.width/2,ze=ve.y+ve.height/2;be.some(nt=>{let et=ue(nt);return ae>=et.x&&ae<=et.x+et.width&&ze>=et.y&&ze<=et.y+et.height})&&te.set(F.id,{...F});});}}ee.current={mode:"move",startScreenPt:K,startWorldPt:de,initialElementSnapshots:te,pendingSingleClickTarget:L&&!k&&p.includes(L.id)&&p.length>1?$:void 0,dragMoved:false};}else Z.shiftKey||u(),oe({startX:de.x,startY:de.y,currentX:de.x,currentY:de.y}),ee.current={mode:"marquee",startScreenPt:K,startWorldPt:de};return}if(t==="eraser"){let L=Dr(de,s,12/c.zoom);if(L){let q=Gr(s,[L.id]);n(q),_(q);}ee.current={mode:"erase",startScreenPt:K,startWorldPt:de};return}if(t==="text"||t==="sticky"){let L=Dr(de,s,8/c.zoom);if(L&&["text","sticky","rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star"].includes(L.type)){i(L.id),o||r("select"),D?.(L);return}}let re=`el_${Date.now()}_${Math.random().toString(36).substring(2,7)}`,T=s.reduce((L,q)=>Math.max(L,q.zIndex??0),0);if(t==="arrow"||t==="line"){let L=oo(de,s),q=L?L.point:de,k=L?{elementId:L.element.id,anchor:L.anchor}:null,pe={...z,id:re,type:t,x:q.x,y:q.y,width:1,height:1,arrowType:z.arrowType||"straight",startArrowhead:t==="arrow"&&z.startArrowhead||"none",endArrowhead:t==="arrow"?z.endArrowhead||"arrow":"none",strokeStyle:z.strokeStyle||"solid",startBinding:k,endBinding:null,zIndex:T+1};a(pe),ee.current={mode:"draw",startScreenPt:K,startWorldPt:q,activeElementId:re};}else if(t==="pen"){let L={...z,id:re,type:"pen",x:de.x,y:de.y,width:0,height:0,points:[de],zIndex:T+1};a(L),ee.current={mode:"draw",startScreenPt:K,startWorldPt:de,activeElementId:re};}else if(t==="text"){let L={...z,id:re,type:"text",x:de.x,y:de.y,width:140,height:36,text:"",zIndex:T+1};a(L),o?u():(i(re),r("select")),D&&D(L),_([...s,L]);}else if(t==="sticky"){let L={...z,id:re,type:"sticky",x:de.x,y:de.y,width:180,height:180,text:"",zIndex:T+1,fillColor:z.stickyColor||"#fef08a",stickyColor:z.stickyColor||"#fef08a"};a(L),o?u():(i(re),r("select")),D&&D(L),_([...s,L]);}else if(t==="frame"){let L=s.filter(k=>k.type==="frame").length,q={...z,id:re,type:"frame",x:de.x,y:de.y,width:1,height:1,frameLabel:`Slide ${L+1}`,strokeColor:"#0b6eff",strokeWidth:1.5,strokeStyle:"solid",fillColor:"transparent",zIndex:0};a(q),ee.current={mode:"draw",startScreenPt:K,startWorldPt:de,activeElementId:re};}else if(t==="table"){let te={...z,id:re,type:"table",x:de.x,y:de.y,width:420,height:126,rows:3,cols:3,colWidths:[140,140,140],rowHeights:[42,42,42],hasHeaderRow:true,hasHeaderCol:false,tableStyle:"header-accent",cells:{"0_0":{text:"Header 1",bold:true,align:"center"},"0_1":{text:"Header 2",bold:true,align:"center"},"0_2":{text:"Header 3",bold:true,align:"center"},"1_0":{text:"Item 1",align:"left"},"1_1":{text:"",align:"left"},"1_2":{text:"",align:"left"},"2_0":{text:"Item 2",align:"left"},"2_1":{text:"",align:"left"},"2_2":{text:"",align:"left"}},zIndex:T+1};a(te),ee.current={mode:"draw",startScreenPt:K,startWorldPt:de,activeElementId:re};}else {let L={...z,id:re,type:t,x:de.x,y:de.y,width:1,height:1,zIndex:T+1};a(L),ee.current={mode:"draw",startScreenPt:K,startWorldPt:de,activeElementId:re};}},[M,t,d,p,s,c.zoom,i,u,z,a,r,D,_,n,P,o,l]),xe=useCallback(Z=>{let Se=ee.current.mode,K=Z.currentTarget.getBoundingClientRect(),de={x:Z.clientX-K.left,y:Z.clientY-K.top},re=d(de);if(t==="laser"){f?.(re),Se==="laser"&&I?.(re);return}if(Se==="none"){if(e){ke(null),U(null),ne(null);return}if(t==="arrow"||t==="line"){let T=oo(re,s);ke(T?{elementId:T.element.id,anchor:T.anchor,point:T.point}:null);}else ke(null);if(t==="select"){if(p.length===1){let T=s.find(L=>L.id===p[0]);if(T){let L=go(T),q=mo(re,L,10/c.zoom);if(q){ne(q.cursor),U(q);return}}}else if(p.length>1){let T=s.filter(q=>p.includes(q.id)),L=jr(T,6);if(L){let q=yo(L),k=mo(re,q,10/c.zoom);if(k){ne(k.cursor),U(k);return}}}}if(U(null),M||t==="hand")ne("grab");else if(t==="select"){let L=!!Dr(re,s,8/c.zoom);if(!L&&p.length>1){let q=s.filter(pe=>p.includes(pe.id)),k=jr(q,8);k&&re.x>=k.x&&re.x<=k.x+k.width&&re.y>=k.y&&re.y<=k.y+k.height&&(L=true);}ne(L?"move":null);}return}if(Se==="pan"){let T=(Z.clientX-ee.current.startScreenPt.x)/c.zoom,L=(Z.clientY-ee.current.startScreenPt.y)/c.zoom;h(T,L),ee.current.startScreenPt={x:Z.clientX,y:Z.clientY};return}if(Se==="erase"){let T=Dr(re,s,12/c.zoom);T&&n(L=>Gr(L,[T.id]));return}if(Se==="draw"&&ee.current.activeElementId){let T=ee.current.activeElementId,L=ee.current.startWorldPt,q=re,k=null;if(t==="arrow"||t==="line"){let pe=s.find($=>$.id===T),V=oo(re,s,pe?.startBinding?.elementId);V?(q=V.point,k={elementId:V.element.id,anchor:V.anchor},ke({elementId:V.element.id,anchor:V.anchor,point:V.point})):ke(null);}n(pe=>pe.map(V=>{if(V.id!==T)return V;if(V.type==="pen"){let ue=V.points||[];return {...V,points:[...ue,re]}}if(V.type==="arrow"||V.type==="line")return {...V,width:q.x-V.x,height:q.y-V.y,endBinding:k};if(V.type==="table"){let ue=Math.min(L.x,re.x),F=Math.min(L.y,re.y),ve=Math.max(90,Math.abs(re.x-L.x)),ae=Math.max(60,Math.abs(re.y-L.y)),ze=V.cols||3,Le=V.rows||3;return {...V,x:ue,y:F,width:ve,height:ae,colWidths:Array.from({length:ze},()=>ve/ze),rowHeights:Array.from({length:Le},()=>ae/Le)}}let $=Math.min(L.x,re.x),te=Math.min(L.y,re.y),fe=Math.abs(re.x-L.x),be=Math.abs(re.y-L.y);return {...V,x:$,y:te,width:Math.max(10,fe),height:Math.max(10,be)}}));return}if(Se==="move"&&ee.current.initialElementSnapshots){let T=re.x-ee.current.startWorldPt.x,L=re.y-ee.current.startWorldPt.y,q=ee.current.initialElementSnapshots;Math.hypot(T,L)>2&&(ee.current.dragMoved=true);let k=1/0,pe=1/0,V=-1/0,$=-1/0;q.forEach(F=>{let ve=bt(F);k=Math.min(k,ve.x),pe=Math.min(pe,ve.y),V=Math.max(V,ve.x+ve.width),$=Math.max($,ve.y+ve.height);});let te={x:k,y:pe,width:V-k,height:$-pe},fe=Ma({dragInitialBounds:te,rawDx:T,rawDy:L,allElements:v.current,selectedIds:Array.from(q.keys()),snapThreshold:7/c.zoom}),be=fe.snappedDx,ue=fe.snappedDy;we(fe.alignmentGuides),Ue(fe.spacingGuides),n(F=>{let ve=F.map(ae=>{let ze=q.get(ae.id);return ze?{...ae,x:ze.x+be,y:ze.y+ue,points:ze.points?.map(Le=>({x:Le.x+be,y:Le.y+ue})),controlPoint:ze.controlPoint?{x:ze.controlPoint.x+be,y:ze.controlPoint.y+ue}:void 0,controlPoint1:ze.controlPoint1?{x:ze.controlPoint1.x+be,y:ze.controlPoint1.y+ue}:void 0,controlPoint2:ze.controlPoint2?{x:ze.controlPoint2.x+be,y:ze.controlPoint2.y+ue}:void 0}:ae});return Ct(ve)});return}if(Se==="arrow-endpoint"&&ee.current.activeElementId&&ee.current.arrowHandleType){let T=ee.current.activeElementId,L=ee.current.arrowHandleType,q=v.current,k=q.find($=>$.id===T);if(!k)return;let pe=re,V=null;if(L==="start"){let $=oo(re,q,k.endBinding?.elementId);$?(pe=$.point,V={elementId:$.element.id,anchor:$.anchor},ke({elementId:$.element.id,anchor:$.anchor,point:$.point})):ke(null);}else {let $=oo(re,q,k.startBinding?.elementId);$?(pe=$.point,V={elementId:$.element.id,anchor:$.anchor},ke({elementId:$.element.id,anchor:$.anchor,point:$.point})):ke(null);}n($=>$.map(te=>{if(te.id!==T)return te;if(L==="start"){let fe={x:te.x+te.width,y:te.y+te.height};return {...te,x:pe.x,y:pe.y,width:fe.x-pe.x,height:fe.y-pe.y,startBinding:V}}else return {...te,width:pe.x-te.x,height:pe.y-te.y,endBinding:V}}));return}if(Se==="arrow-control"&&ee.current.activeElementId){let T=ee.current.activeElementId;n(L=>L.map(q=>{if(q.id!==T)return q;let k={x:q.x,y:q.y},pe={x:q.x+q.width,y:q.y+q.height},V={x:2*re.x-.5*k.x-.5*pe.x,y:2*re.y-.5*k.y-.5*pe.y};return {...q,arrowType:"curved",controlPoint:V}}));return}if(Se==="arrow-control1"&&ee.current.activeElementId){let T=ee.current.activeElementId;n(L=>L.map(q=>q.id!==T?q:{...q,arrowType:"elbow",controlPoint1:re}));return}if(Se==="arrow-control2"&&ee.current.activeElementId){let T=ee.current.activeElementId;n(L=>L.map(q=>q.id!==T?q:{...q,arrowType:"elbow",controlPoint2:re}));return}if(Se==="resize"&&ee.current.initialElementSnapshots&&ee.current.activeHandle){let T=ee.current.activeHandle,L=re.x-ee.current.startWorldPt.x,q=re.y-ee.current.startWorldPt.y;if(ee.current.activeElementId){let k=ee.current.initialElementSnapshots.get(ee.current.activeElementId);if(!k)return;if(k.type==="text"){let be=k.fontSize||20,ue=1;T.type==="e"||T.type==="se"||T.type==="ne"?ue=Math.max(.2,(k.width+L)/k.width):T.type==="w"||T.type==="sw"||T.type==="nw"?ue=Math.max(.2,(k.width-L)/k.width):T.type==="s"?ue=Math.max(.2,(k.height+q)/k.height):T.type==="n"&&(ue=Math.max(.2,(k.height-q)/k.height));let F=Math.max(8,Math.min(180,Math.round(be*ue))),ve=ar(k.fontFamily),ae=Math.max(30,Math.round(k.width*(F/be))),ze=Math.max(20,Math.round(k.height*(F/be)));if(typeof window<"u"){let gt=document.createElement("canvas").getContext("2d");if(gt){let St=ve.value==="patrick",N=ve.value==="comic"||ve.value==="handlee",ye=ve.value==="fuzzy"||ve.value==="edusa",Te=St||N||ye?"400":"500";gt.font=`normal ${Te} ${F}px ${ve.cssFont}`;let kt=(k.text||"").split(`
|
|
6
|
+
`),ut=0;for(let jt of kt){let Ye=gt.measureText(jt||" ").width;Ye>ut&&(ut=Ye);}let Lt=F*1.35;ae=Math.max(30,Math.ceil(ut+16)),ze=Math.max(Math.ceil(Lt+4),Math.ceil(kt.length*Lt+4));}}let Le=k.x,nt=k.y;T.type.includes("w")&&(Le=k.x+(k.width-ae)),T.type.includes("n")&&(nt=k.y+(k.height-ze)),n(et=>{let gt=et.map(St=>St.id===k.id?{...St,x:Le,y:nt,width:ae,height:ze,fontSize:F}:St);return Ct(gt)});return}let pe=k.x,V=k.y,$=k.width,te=k.height;if((k.aspectRatioLocked||k.type==="image"||Z.shiftKey)&&k.width>0&&k.height>0){let be=k.naturalWidth&&k.naturalHeight?k.naturalWidth/k.naturalHeight:k.width/k.height;T.type==="se"?($=Math.max(20,k.width+L),te=Math.round($/be)):T.type==="sw"?($=Math.max(20,k.width-L),te=Math.round($/be),pe=k.x+(k.width-$)):T.type==="ne"?($=Math.max(20,k.width+L),te=Math.round($/be),V=k.y+(k.height-te)):T.type==="nw"?($=Math.max(20,k.width-L),te=Math.round($/be),pe=k.x+(k.width-$),V=k.y+(k.height-te)):T.type==="e"||T.type==="w"?($=Math.max(20,T.type==="e"?k.width+L:k.width-L),te=Math.round($/be),T.type==="w"&&(pe=k.x+(k.width-$)),V=k.y+(k.height-te)/2):(T.type==="n"||T.type==="s")&&(te=Math.max(20,T.type==="s"?k.height+q:k.height-q),$=Math.round(te*be),T.type==="n"&&(V=k.y+(k.height-te)),pe=k.x+(k.width-$)/2);}else {if(T.type.includes("e")&&($=Math.max(15,k.width+L)),T.type.includes("s")&&(te=Math.max(15,k.height+q)),T.type.includes("w")){let be=k.width-15,ue=Math.min(L,be);pe=k.x+ue,$=k.width-ue;}if(T.type.includes("n")){let be=k.height-15,ue=Math.min(q,be);V=k.y+ue,te=k.height-ue;}}n(be=>{let ue=be.map(F=>{if(F.id!==k.id)return F;let ve=F.points;if(F.points&&F.points.length>0){let ae=$/(k.width||1),ze=te/(k.height||1);ve=F.points.map(Le=>({x:pe+(Le.x-k.x)*ae,y:V+(Le.y-k.y)*ze}));}if(F.type==="table"){let ae=F.cols||3,ze=F.rows||3,Le=$/Math.max(1,k.width),nt=te/Math.max(1,k.height),et=k.colWidths&&k.colWidths.length===ae?k.colWidths:Array.from({length:ae},()=>k.width/ae),gt=k.rowHeights&&k.rowHeights.length===ze?k.rowHeights:Array.from({length:ze},()=>k.height/ze),St=et.map(ye=>Math.max(24,Math.round(ye*Le))),N=gt.map(ye=>Math.max(20,Math.round(ye*nt)));return {...F,x:pe,y:V,width:St.reduce((ye,Te)=>ye+Te,0),height:N.reduce((ye,Te)=>ye+Te,0),colWidths:St,rowHeights:N}}return {...F,x:pe,y:V,width:$,height:te,points:ve}});return Ct(ue)});return}if(ee.current.initialGroupBounds){let k=ee.current.initialGroupBounds,pe=ee.current.initialElementSnapshots,V=k.x,$=k.y,te=k.width,fe=k.height;if(Z.shiftKey&&k.width>0&&k.height>0){let ve=k.width/k.height;T.type==="se"?(te=Math.max(30,k.width+L),fe=Math.round(te/ve)):T.type==="sw"?(te=Math.max(30,k.width-L),fe=Math.round(te/ve),V=k.x+(k.width-te)):T.type==="ne"?(te=Math.max(30,k.width+L),fe=Math.round(te/ve),$=k.y+(k.height-fe)):T.type==="nw"?(te=Math.max(30,k.width-L),fe=Math.round(te/ve),V=k.x+(k.width-te),$=k.y+(k.height-fe)):T.type==="e"||T.type==="w"?(te=Math.max(30,T.type==="e"?k.width+L:k.width-L),fe=Math.round(te/ve),T.type==="w"&&(V=k.x+(k.width-te)),$=k.y+(k.height-fe)/2):(T.type==="n"||T.type==="s")&&(fe=Math.max(30,T.type==="s"?k.height+q:k.height-q),te=Math.round(fe*ve),T.type==="n"&&($=k.y+(k.height-fe)),V=k.x+(k.width-te)/2);}else {if(T.type.includes("e")&&(te=Math.max(30,k.width+L)),T.type.includes("s")&&(fe=Math.max(30,k.height+q)),T.type.includes("w")){let ve=Math.min(L,k.width-30);V=k.x+ve,te=k.width-ve;}if(T.type.includes("n")){let ve=Math.min(q,k.height-30);$=k.y+ve,fe=k.height-ve;}}let ue=te/(k.width||1),F=fe/(k.height||1);n(ve=>{let ae=ve.map(ze=>{let Le=pe.get(ze.id);if(!Le)return ze;let nt=(Le.x-k.x)/k.width,et=(Le.y-k.y)/k.height,gt=V+nt*te,St=$+et*fe,N=Math.max(5,Le.width*ue),ye=Math.max(5,Le.height*F),Te=Le.fontSize;if(Le.fontSize){let Ye=Math.min(ue,F);Te=Math.max(8,Math.min(180,Math.round(Le.fontSize*Ye)));}let kt=Le.points;Le.points&&Le.points.length>0&&(kt=Le.points.map(Ye=>({x:V+(Ye.x-k.x)/k.width*te,y:$+(Ye.y-k.y)/k.height*fe})));let ut=Le.controlPoint;Le.controlPoint&&(ut={x:V+(Le.controlPoint.x-k.x)/k.width*te,y:$+(Le.controlPoint.y-k.y)/k.height*fe});let Lt=Le.controlPoint1;Le.controlPoint1&&(Lt={x:V+(Le.controlPoint1.x-k.x)/k.width*te,y:$+(Le.controlPoint1.y-k.y)/k.height*fe});let jt=Le.controlPoint2;return Le.controlPoint2&&(jt={x:V+(Le.controlPoint2.x-k.x)/k.width*te,y:$+(Le.controlPoint2.y-k.y)/k.height*fe}),{...ze,x:gt,y:St,width:N,height:ye,fontSize:Te,points:kt,controlPoint:ut,controlPoint1:Lt,controlPoint2:jt}});return Ct(ae)});return}}if(Se==="rotate"&&ee.current.initialElementSnapshots&&ee.current.initialAngle!==void 0){if(ee.current.initialGroupBounds){let T=ee.current.initialGroupBounds,L=T.x+T.width/2,q=T.y+T.height/2,pe=Math.atan2(re.y-q,re.x-L)-ee.current.initialAngle;if(Z.shiftKey){let $=Math.PI/4;pe=Math.round(pe/$)*$;}let V=ee.current.initialElementSnapshots;n($=>{let te=$.map(fe=>{let be=V.get(fe.id);if(!be)return fe;let ue={x:be.x+be.width/2,y:be.y+be.height/2},F=Rr(ue,{x:L,y:q},pe),ve=((be.rotation||0)+pe)%(Math.PI*2),ae=be.points;return be.points&&be.points.length>0&&(ae=be.points.map(ze=>Rr(ze,{x:L,y:q},pe))),{...fe,x:F.x-be.width/2,y:F.y-be.height/2,rotation:ve,points:ae}});return Ct(te)});return}if(ee.current.activeElementId&&ee.current.initialRotation!==void 0){let T=ee.current.initialElementSnapshots.get(ee.current.activeElementId);if(!T)return;let L=T.x+T.width/2,q=T.y+T.height/2,pe=Math.atan2(re.y-q,re.x-L)-ee.current.initialAngle,V=(ee.current.initialRotation+pe)%(Math.PI*2);if(Z.shiftKey){let $=Math.PI/4;V=Math.round(V/$)*$;}n($=>{let te=$.map(fe=>fe.id===T.id?{...fe,rotation:V}:fe);return Ct(te)});return}}if(Se==="marquee"&&J){oe(L=>L?{...L,currentX:re.x,currentY:re.y}:null);let T=_a({...J,currentX:re.x,currentY:re.y},s);l(T.map(L=>L.id));}},[t,p,s,c.zoom,M,h,d,J,l,n,f,I]),O=useCallback(()=>{let Z=ee.current.mode;if(ke(null),Z==="pan")ee.current.mode="none",ne(null);else if(Z==="draw"){if(ee.current.activeElementId){let Se=ee.current.activeElementId,K=v.current,de=K.find(T=>T.id===Se),re=v.current;de?.type==="frame"&&(Math.abs(de.width)<40||Math.abs(de.height)<40)&&(re=K.map(q=>q.id===Se?{...q,x:Math.round(ee.current.startWorldPt.x-800/2),y:Math.round(ee.current.startWorldPt.y-450/2),width:800,height:450}:q),n(re)),o?u():(i(ee.current.activeElementId),t!=="pen"&&r("select")),_(re);}}else Z==="move"||Z==="resize"||Z==="rotate"||Z==="erase"||Z==="arrow-endpoint"||Z==="arrow-control"||Z==="arrow-control1"||Z==="arrow-control2"?Z==="move"?!ee.current.dragMoved&&ee.current.pendingSingleClickTarget?l(ee.current.pendingSingleClickTarget):ee.current.dragMoved&&_(v.current):_(v.current):Z==="laser"&&b?.();ee.current={mode:"none",startScreenPt:{x:0,y:0},startWorldPt:{x:0,y:0}},oe(null),we([]),Ue([]);},[t,i,l,r,_,b,u,o,n]);return {onPointerDown:Pe,onPointerMove:xe,onPointerUp:O,cursor:le,marquee:J,activeHandle:A,hoveredAnchor:ce,alignmentGuides:Ie,spacingGuides:Ge}}function Zi(e,t,r,o){e.save();for(let c of t)if(!(!c.points||c.points.length===0))if(c.mode==="persistent"){if(c.points.length===1){let h=c.points[0];e.beginPath(),e.arc(h.x,h.y,3/r.zoom,0,Math.PI*2),e.fillStyle=c.color,e.shadowColor=c.color,e.shadowBlur=10/r.zoom,e.fill();continue}e.save(),e.lineCap="round",e.lineJoin="round",e.beginPath(),e.moveTo(c.points[0].x,c.points[0].y);for(let h=1;h<c.points.length;h++){let s=c.points[h-1],n=c.points[h],p=(s.x+n.x)/2,i=(s.y+n.y)/2;e.quadraticCurveTo(s.x,s.y,p,i);}let d=c.points[c.points.length-1];e.lineTo(d.x,d.y),e.strokeStyle=c.color,e.lineWidth=5.5/r.zoom,e.shadowColor=c.color,e.shadowBlur=12/r.zoom,e.globalAlpha=.85,e.stroke(),e.strokeStyle="#ffffff",e.lineWidth=2.2/r.zoom,e.shadowBlur=3/r.zoom,e.globalAlpha=.95,e.stroke(),e.restore();}else {let h=[];for(let s=0;s<c.points.length;s++){let n=c.points[s],p=o-n.timestamp;if(p<1e3){let i=p/1e3,l=Math.max(0,1-i),u=Math.max(.4,1-i*.6);h.push({x:n.x,y:n.y,alpha:l,widthMultiplier:u});}}if(h.length===0)continue;if(h.length===1){let s=h[0];e.save(),e.beginPath(),e.arc(s.x,s.y,3*s.widthMultiplier/r.zoom,0,Math.PI*2),e.fillStyle=c.color,e.shadowColor=c.color,e.shadowBlur=12/r.zoom,e.globalAlpha=s.alpha,e.fill(),e.restore();continue}e.save(),e.lineCap="round",e.lineJoin="round";for(let s=1;s<h.length;s++){let n=h[s-1],p=h[s],i=(n.alpha+p.alpha)/2,l=(n.widthMultiplier+p.widthMultiplier)/2;e.beginPath(),e.moveTo(n.x,n.y),e.lineTo(p.x,p.y),e.strokeStyle=c.color,e.lineWidth=6*l/r.zoom,e.shadowColor=c.color,e.shadowBlur=12/r.zoom,e.globalAlpha=i*.85,e.stroke(),e.beginPath(),e.moveTo(n.x,n.y),e.lineTo(p.x,p.y),e.strokeStyle="#ffffff",e.lineWidth=2.2*l/r.zoom,e.shadowBlur=3/r.zoom,e.globalAlpha=i*.95,e.stroke();}e.restore();}e.restore();}function qi(e,t,r,o){e.save();let{x:c,y:d}=t;e.beginPath(),e.arc(c,d,9/o.zoom,0,Math.PI*2),e.fillStyle=r,e.shadowColor=r,e.shadowBlur=16/o.zoom,e.globalAlpha=.35,e.fill(),e.beginPath(),e.arc(c,d,4.5/o.zoom,0,Math.PI*2),e.fillStyle=r,e.shadowColor=r,e.shadowBlur=8/o.zoom,e.globalAlpha=.9,e.fill(),e.beginPath(),e.arc(c,d,2/o.zoom,0,Math.PI*2),e.fillStyle="#ffffff",e.shadowColor="#ffffff",e.shadowBlur=3/o.zoom,e.globalAlpha=1,e.fill(),e.restore();}function Ji(e,t,r){if(t.length!==0){e.save(),e.strokeStyle="#ec4899",e.lineWidth=1.2/r.zoom,e.setLineDash([4/r.zoom,3/r.zoom]);for(let o of t)e.beginPath(),o.orientation==="vertical"?(e.moveTo(o.position,o.from),e.lineTo(o.position,o.to)):(e.moveTo(o.from,o.position),e.lineTo(o.to,o.position)),e.stroke(),e.beginPath(),o.orientation==="vertical"?(e.moveTo(o.position-4/r.zoom,o.from),e.lineTo(o.position+4/r.zoom,o.from),e.moveTo(o.position-4/r.zoom,o.to),e.lineTo(o.position+4/r.zoom,o.to)):(e.moveTo(o.from,o.position-4/r.zoom),e.lineTo(o.from,o.position+4/r.zoom),e.moveTo(o.to,o.position-4/r.zoom),e.lineTo(o.to,o.position+4/r.zoom)),e.stroke();e.restore();}}function Qi(e,t,r){if(t.length!==0){e.save();for(let o of t){e.strokeStyle="#ec4899",e.lineWidth=1.5/r.zoom,e.setLineDash([]),e.beginPath(),e.moveTo(o.lineStart.x,o.lineStart.y),e.lineTo(o.lineEnd.x,o.lineEnd.y),e.stroke();let c=4/r.zoom;e.beginPath(),o.orientation==="horizontal"?(e.moveTo(o.lineStart.x,o.lineStart.y-c),e.lineTo(o.lineStart.x,o.lineStart.y+c),e.moveTo(o.lineEnd.x,o.lineEnd.y-c),e.lineTo(o.lineEnd.x,o.lineEnd.y+c)):(e.moveTo(o.lineStart.x-c,o.lineStart.y),e.lineTo(o.lineStart.x+c,o.lineStart.y),e.moveTo(o.lineEnd.x-c,o.lineEnd.y),e.lineTo(o.lineEnd.x+c,o.lineEnd.y)),e.stroke();let d=`${o.gap}`,h=11/r.zoom;e.font=`bold ${h}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;let s=e.measureText(d).width,n=6/r.zoom,p=s+n*2,i=16/r.zoom,l=o.badgePos.x-p/2,u=o.badgePos.y-i/2;e.fillStyle="#ec4899",typeof e.roundRect=="function"?(e.beginPath(),e.roundRect(l,u,p,i,4/r.zoom),e.fill()):e.fillRect(l,u,p,i),e.fillStyle="#ffffff",e.textAlign="center",e.textBaseline="middle",e.fillText(d,o.badgePos.x,o.badgePos.y);}e.restore();}}function xn({elements:e,setElements:t,selectedIds:r,selectElement:o,selectElements:c,clearSelection:d,addElement:h,updateElement:s,deleteSelectedElements:n,duplicateSelectedElements:p,groupSelectedElements:i,ungroupSelectedElements:l,pushHistory:u,undo:a,redo:x,camera:m,screenToWorld:g,worldToScreen:w,panBy:_,zoomAtPoint:S,tool:E,setTool:z,isToolLocked:D=false,setIsToolLocked:P,gridStyle:I,defaultStyles:b,editingElementId:f,setEditingElementId:v,canvasBackground:C,isPresentationOpen:M=false,laserColor:R="#ef4444",laserMode:J="fading",laserStrokes:oe=[],setLaserStrokes:A,laserPointerPos:U=null,setLaserPointerPos:G,readOnly:Ne=false,onDoubleClick:ne}){let le=useRef(null),ce=useRef(null),{resolvedTheme:ke}=nr(),Ie=ho(),we=Ie&&ke==="dark",Ge=ua(C,we),[Ue,ee]=useState(null),Pe=f!==void 0?f:Ue,xe=useCallback(W=>{ee(W),v?.(W);},[v]);function O(W,y,H,ie,Y,he){return ie==="text"?ro(W,y,he):{width:Y,height:0}}let[Z,Se]=useState(""),K=useRef(null),de=useRef(null),re=useRef(null),[T,L]=useState(null),[q,k]=useState(null),pe=useCallback((W,y)=>{let H=W.type==="table",ie=W.frameLabel||W.text||"";if(H){let Y=y||W.editingCell||{row:0,col:0};W.editingCell=Y;let he=`${Y.row}_${Y.col}`;ie=W.cells?.[he]?.text||"";}xe(W.id),Se(ie),setTimeout(()=>{W.type==="frame"?de.current&&(de.current.focus(),de.current.select()):K.current&&(K.current.focus(),W.type!=="text"&&(K.current.style.height="auto",K.current.style.height=`${K.current.scrollHeight}px`),ie&&K.current.select());},50);},[xe]);useEffect(()=>{if(Pe&&Pe!==re.current){let W=e.find(y=>y.id===Pe);if(W){let y=W.frameLabel||W.text||"";if(W.type==="table"){let ie=W.editingCell||{row:0,col:0},Y=`${ie.row}_${ie.col}`;y=W.cells?.[Y]?.text||"";}let H=setTimeout(()=>{Se(ie=>ie!==y?y:ie),W.type==="frame"?de.current&&(de.current.focus(),de.current.select()):K.current&&(K.current.focus(),W.type!=="text"&&(K.current.style.height="auto",K.current.style.height=`${K.current.scrollHeight}px`),y&&K.current.select());},50);return re.current=Pe,()=>clearTimeout(H)}}re.current=Pe;},[Pe,e]),useLayoutEffect(()=>{if(K.current&&Pe){let W=e.find(y=>y.id===Pe);if(W&&W.type!=="text"){let y=K.current;y.style.height="auto",y.style.height=`${y.scrollHeight}px`;}}},[Z,Pe,e,m.zoom]);let V=useCallback(W=>{if(!Pe)return;let y=e.find(he=>he.id===Pe);if(!y){xe(null);return}if(y.type==="text"&&!Z.trim()){t(he=>he.filter(We=>We.id!==Pe)),xe(null);return}let H=ar(y.fontFamily),ie=y.fontSize||(y.type==="sticky"?20:22),Y={};if(y.type==="table"){let he=Lr(y),We=y.editingCell?y.editingCell.row:0,Oe=y.editingCell?y.editingCell.col:0,Fe=`${We}_${Oe}`,qe={...y.cells||{}};qe[Fe]={...qe[Fe]||{},text:Z},Y.cells=qe;let dt=he.getCellBounds(We,Oe),j=H.cssFont,ge=y.fontSize||13,tt=document.createElement("canvas").getContext("2d");if(tt){tt.font=`400 ${ge}px ${j}`;let Ae=Xr(tt,Z,dt.width-16),Ee=Math.max(28,Math.ceil(Ae.length*(ge*1.35)+12));if(Ee>he.rowHeights[We]){let at=[...he.rowHeights];at[We]=Ee,Y.rowHeights=at,Y.height=at.reduce((Be,Ht)=>Be+Ht,0);}}if(W==="next"){let Ae=We,Ee=Oe+1;if(Ee>=he.cols&&(Ee=0,Ae=We+1),Ae>=he.rows){let Ht=[...Y.rowHeights||he.rowHeights,38];Y.rows=he.rows+1,Y.rowHeights=Ht,Y.height=Ht.reduce((Nt,yr)=>Nt+yr,0);}Y.editingCell={row:Ae,col:Ee};let at=`${Ae}_${Ee}`,Be=qe[at]?.text||"";s(Pe,Y),Se(Be),setTimeout(()=>{K.current&&(K.current.focus(),K.current.select());},30);return}else if(W==="prev"){let Ae=We,Ee=Oe-1;if(Ee<0&&(Ee=he.cols-1,Ae=We-1),Ae>=0){Y.editingCell={row:Ae,col:Ee};let at=`${Ae}_${Ee}`,Be=qe[at]?.text||"";s(Pe,Y),Se(Be),setTimeout(()=>{K.current&&(K.current.focus(),K.current.select());},30);return}}Y.editingCell=void 0;}else if(y.type==="frame")Y.frameLabel=Z.trim()||y.frameLabel||"Frame",Y.text=void 0;else if(y.type==="text"){Y.text=Z;let he=ro(Z,ie,y.fontFamily),We=y.width;Y.width=he.width,Y.height=he.height,y.textAlign==="center"?Y.x=Math.round(y.x+We/2-he.width/2):y.textAlign==="right"&&(Y.x=Math.round(y.x+We-he.width));}else if(y.type==="sticky"){Y.text=Z;let he=36,We=Math.max(10,Math.floor((y.width-32)/(ie*.55))),Oe=Z.split(`
|
|
7
|
+
`),Fe=0;for(let dt of Oe)Fe+=Math.max(1,Math.ceil(dt.length/We));let qe=Fe*(ie*1.35)+he;qe>y.height&&(Y.height=Math.round(qe));}else Y.text=Z;s(Pe,Y),u(e.map(he=>he.id===Pe?{...he,...Y}:he)),xe(null);},[Pe,Z,s,u,e,t,xe]),$=useRef(null),te=useCallback(W=>{let y=`ls_${Date.now()}_${Math.random().toString(36).substring(2,6)}`;$.current=y;let H={id:y,color:R,mode:J,points:[{x:W.x,y:W.y,timestamp:Date.now()}]};A?.(ie=>[...ie,H]);},[R,J,A]),fe=useCallback(W=>{let y=$.current;if(!y)return;let H={x:W.x,y:W.y,timestamp:Date.now()};A?.(ie=>ie.map(Y=>Y.id===y?{...Y,points:[...Y.points,H]}:Y));},[A]),be=useCallback(()=>{$.current=null;},[]),ue=useCallback(W=>{G?.(W);},[G]),[F,ve]=useState(0);useEffect(()=>{if(!oe.some(ie=>ie.mode==="fading"&&ie.points.length>0)&&E!=="laser")return;let y,H=()=>{ve(ie=>(ie+1)%1e6),y=requestAnimationFrame(H);};return y=requestAnimationFrame(H),()=>cancelAnimationFrame(y)},[oe,E]),useEffect(()=>{if(!oe.some(H=>H.mode==="fading"))return;let y=setInterval(()=>{let H=Date.now();A?.(ie=>ie.filter(Y=>Y.mode==="persistent"?true:Y.points.some(he=>H-he.timestamp<1200)));},400);return ()=>clearInterval(y)},[oe,A]);let ae=Pa({readOnly:Ne,tool:E,setTool:z,isToolLocked:D,camera:m,screenToWorld:g,panBy:_,elements:e,setElements:t,selectedIds:r,selectElement:o,selectElements:c,clearSelection:d,addElement:h,deleteSelectedElements:n,duplicateSelectedElements:p,groupSelectedElements:i,ungroupSelectedElements:l,pushHistory:u,undo:a,redo:x,defaultStyles:b,onEditText:pe,onLaserDrawStart:te,onLaserDrawMove:fe,onLaserDrawEnd:be,onLaserHover:ue}),ze=useRef({x:0,y:0}),Le=useCallback(W=>{if(!ce.current)return;let y=ce.current.getBoundingClientRect(),H={x:W.clientX-y.left,y:W.clientY-y.top},ie=g(H);ze.current=ie;let Y=r.length===1&&e.find(Oe=>Oe.id===r[0])||null,he=!!(Y&&["rectangle","ellipse","diamond","sticky","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","table","frame"].includes(Y.type)),We=!!ae.activeHandle||ae.cursor.includes("resize")||ae.cursor.includes("grab")||ae.cursor==="grabbing"||!!ae.marquee;if(We){q!==null&&k(null),T!==null&&L(null);return}if(Y&&he&&E==="select"&&!Pe&&!We){let Oe=bt(Y),{x:Fe,y:qe,width:dt,height:j}=Oe,ge=ie.x,Re=ie.y,tt=Math.min(36,Math.min(dt,j)*.45),Ae=42/m.zoom,Ee=82/m.zoom;if(ge>=Fe-Ae&&ge<=Fe+dt+Ae&&Re>=qe-Ee&&Re<=qe+j+Ae){let Be=Math.abs(ge-Fe),Ht=Math.abs(ge-(Fe+dt)),Nt=Math.abs(Re-qe),yr=Math.abs(Re-(qe+j)),br=Math.min(Be,Ht,Nt,yr);br<=tt+Ee?br===Ht?k("right"):br===yr?k("bottom"):br===Be?k("left"):br===Nt&&k("top"):T||k(null);}else T||k(null);}else q!==null&&k(null);},[g,r,e,E,Pe,m.zoom,T,q,ae.activeHandle,ae.cursor,ae.marquee]);useEffect(()=>(window.addEventListener("mousemove",Le),()=>window.removeEventListener("mousemove",Le)),[Le]),useEffect(()=>{let W=ce.current;if(!W)return;let y=H=>{H.preventDefault();let ie=W.getBoundingClientRect(),Y={x:H.clientX-ie.left,y:H.clientY-ie.top};if(H.ctrlKey||H.metaKey){let he=-H.deltaY*.002,We=m.zoom*(1+he);S(We,Y);}else _(-H.deltaX,-H.deltaY);};return W.addEventListener("wheel",y,{passive:false}),()=>{W.removeEventListener("wheel",y);}},[m.zoom,S,_]),useEffect(()=>{let W=y=>{(y.ctrlKey||y.metaKey)&&y.preventDefault();};return window.addEventListener("wheel",W,{passive:false}),()=>{window.removeEventListener("wheel",W);}},[]);let nt=useCallback((W,y)=>{let H=new Image;H.crossOrigin="anonymous",H.onload=()=>{let ie=H.naturalWidth||400,Y=H.naturalHeight||300,he=ie,We=Y,Oe=600;(he>Oe||We>Oe)&&(he>=We?(We=Math.round(We/he*Oe),he=Oe):(he=Math.round(he/We*Oe),We=Oe));let Fe=y;if(!Fe)if(ce.current){let ge=ce.current.getBoundingClientRect();Fe=g({x:ge.width/2,y:ge.height/2});}else Fe={x:0,y:0};let qe=`el_${Date.now()}_${Math.random().toString(36).substring(2,7)}`,dt=e.reduce((ge,Re)=>Math.max(ge,Re.zIndex??0),0),j={...b,id:qe,type:"image",x:Math.round(Fe.x-he/2),y:Math.round(Fe.y-We/2),width:he,height:We,dataUrl:W,naturalWidth:ie,naturalHeight:Y,aspectRatioLocked:true,opacity:1,zIndex:dt+1};h(j),c([qe]),z("select"),u([...e,j]);},H.src=W;},[b,e,h,c,z,u,g]),et=useRef([]);useEffect(()=>{let W=y=>{if(!(y.target instanceof HTMLInputElement||y.target instanceof HTMLTextAreaElement||y.target.isContentEditable)&&r.length>0){let H=e.filter(ie=>r.includes(ie.id));if(H.length>0){et.current=H;try{let ie=JSON.stringify({filekitSketchBoardElements:!0,elements:H});y.clipboardData?.setData("text/plain",ie),y.preventDefault();}catch(ie){console.warn("Could not copy elements to clipboard:",ie);}}}};return window.addEventListener("copy",W),()=>window.removeEventListener("copy",W)},[e,r]),useEffect(()=>{let W=y=>{if(y.target instanceof HTMLInputElement||y.target instanceof HTMLTextAreaElement||y.target.isContentEditable)return;let H=y.clipboardData;if(!H)return;let ie=H.getData("text/plain"),Y=null;if(ie)try{let Oe=JSON.parse(ie);Oe&&Oe.filekitSketchBoardElements&&Array.isArray(Oe.elements)&&(Y=Oe.elements);}catch{}if(!Y&&et.current.length>0&&(Y=et.current),Y&&Y.length>0){y.preventDefault();let Oe=e.reduce((tt,Ae)=>Math.max(tt,Ae.zIndex??0),0),Fe=ze.current,qe=24,dt=24;if(Fe){let tt=Math.min(...Y.map(Nt=>Nt.x)),Ae=Math.min(...Y.map(Nt=>Nt.y)),Ee=Math.max(...Y.map(Nt=>Nt.x+Nt.width)),at=Math.max(...Y.map(Nt=>Nt.y+Nt.height)),Be=(tt+Ee)/2,Ht=(Ae+at)/2;qe=Math.round(Fe.x-Be),dt=Math.round(Fe.y-Ht);}let{clonedElements:j,newSelectedIds:ge}=Er(Y,{deltaX:qe,deltaY:dt,highestZ:Oe}),Re=Ct([...e,...j]);t(Re),c(ge),z("select"),u(Re);return}let We=Array.from(H.items).find(Oe=>Oe.type.startsWith("image/"));if(We){y.preventDefault();let Oe=We.getAsFile();if(Oe){let Fe=new FileReader;Fe.onload=qe=>{let dt=qe.target?.result;dt&&nt(dt,ze.current);},Fe.readAsDataURL(Oe);}}};return window.addEventListener("paste",W),()=>window.removeEventListener("paste",W)},[e,nt,u,c,t,z]);let[gt,St]=useState(false),N=W=>{W.preventDefault(),W.stopPropagation(),W.dataTransfer.types.includes("Files")&&!gt&&St(true);},ye=W=>{W.preventDefault(),W.stopPropagation(),W.dataTransfer.types.includes("Files")&&St(true);},Te=W=>{W.preventDefault(),W.stopPropagation(),(W.currentTarget===W.target||!W.currentTarget.contains(W.relatedTarget))&&St(false);},kt=W=>{W.preventDefault(),W.stopPropagation(),St(false);let y=Array.from(W.dataTransfer.files);if(y.length===0)return;let H=W.currentTarget.getBoundingClientRect(),ie=g({x:W.clientX-H.left,y:W.clientY-H.top});y.forEach((Y,he)=>{if(Y.type.startsWith("image/")||/\.(png|jpe?g|svg|webp|gif)$/i.test(Y.name)){let Oe=new FileReader;Oe.onload=Fe=>{let qe=Fe.target?.result;if(qe){let dt={x:ie.x+he*24,y:ie.y+he*24};nt(qe,dt);}},Oe.readAsDataURL(Y);}});},ut=W=>{if(Ne){ne?.();return}let y=W.currentTarget.getBoundingClientRect(),H={x:W.clientX-y.left,y:W.clientY-y.top},ie=g(H),Y=Dr(ie,e,10/m.zoom);if(Y){let he=!!(Y.groupIds&&Y.groupIds.length>0),We=r.length===1&&r[0]===Y.id;if(he&&!We){c([Y.id]);return}if(c([Y.id]),Y.type==="table"){let Oe=Sa(Y,ie);Oe.type==="cell"?pe(Y,{row:Oe.row,col:Oe.col}):pe(Y,{row:0,col:0});}else ["rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","sticky","text","frame"].includes(Y.type)&&pe(Y);}};useEffect(()=>{let W=()=>{if(!le.current||!ce.current)return;let{clientWidth:y,clientHeight:H}=le.current,ie=window.devicePixelRatio||1;ce.current.width=y*ie,ce.current.height=H*ie,ce.current.style.width=`${y}px`,ce.current.style.height=`${H}px`;};return W(),window.addEventListener("resize",W),()=>window.removeEventListener("resize",W)},[]);let[Lt,jt]=useState(0);useEffect(()=>{let W=()=>jt(y=>(y+1)%1e4);return window.addEventListener("sketch-redraw-canvas",W),()=>window.removeEventListener("sketch-redraw-canvas",W)},[]),useEffect(()=>{if(typeof document>"u"||!document.fonts)return;let W=['400 16px "Fuzzy Bubbles"','700 16px "Fuzzy Bubbles"','400 16px "Comic Neue"','700 16px "Comic Neue"','400 16px "Patrick Hand SC"'],y=()=>{jt(H=>(H+1)%1e4),t(H=>{let ie=false,Y=H.map(he=>{if(he.type==="text"&&he.text){let We=ro(he.text,he.fontSize||22,he.fontFamily);if(Math.abs(We.width-he.width)>3||Math.abs(We.height-he.height)>2){ie=true;let Oe=he.width,Fe={...he,width:We.width,height:We.height};return he.textAlign==="center"?Fe.x=Math.round(he.x+Oe/2-We.width/2):he.textAlign==="right"&&(Fe.x=Math.round(he.x+Oe-We.width)),Fe}}return he});return ie?Y:H});};return Promise.allSettled(W.map(H=>document.fonts.load(H))).then(()=>{y();}),document.fonts.ready.then(y),document.fonts.addEventListener?.("loadingdone",y),()=>{document.fonts.removeEventListener?.("loadingdone",y);}},[]),useEffect(()=>{let W=ce.current;if(!W)return;let y=W.getContext("2d");if(!y)return;let H=window.devicePixelRatio||1,ie=W.width/H,Y=W.height/H;if(y.save(),y.scale(H,H),y.clearRect(0,0,ie,Y),Ge&&Ge!=="transparent"&&(y.fillStyle=Ge,y.fillRect(0,0,ie,Y)),I==="dots"){let j=24;for(;j*m.zoom<16;)j*=2;for(;j*m.zoom>64;)j/=2;let ge=j*m.zoom,Re=(m.x%ge+ge)%ge,tt=(m.y%ge+ge)%ge,Ae=Math.max(.75,Math.min(1.4,1.05*Math.sqrt(Math.max(.2,m.zoom))));y.fillStyle=we?"rgba(255, 255, 255, 0.13)":"rgba(0, 0, 0, 0.12)",y.beginPath();for(let Ee=Re;Ee<ie;Ee+=ge)for(let at=tt;at<Y;at+=ge)y.moveTo(Ee+Ae,at),y.arc(Ee,at,Ae,0,Math.PI*2);y.fill();}else if(I==="grid"){let j=20;for(;j*m.zoom<14;)j*=2;for(;j*m.zoom>56;)j/=2;let ge=j*m.zoom,Re=ge*5,tt=(m.x%ge+ge)%ge,Ae=(m.y%ge+ge)%ge;y.strokeStyle=we?"rgba(255, 255, 255, 0.075)":"rgba(0, 0, 0, 0.08)",y.lineWidth=1,y.setLineDash([1.5,3.5]),y.beginPath();for(let Be=tt;Be<ie;Be+=ge)y.moveTo(Be,0),y.lineTo(Be,Y);for(let Be=Ae;Be<Y;Be+=ge)y.moveTo(0,Be),y.lineTo(ie,Be);y.stroke();let Ee=(m.x%Re+Re)%Re,at=(m.y%Re+Re)%Re;y.strokeStyle=we?"rgba(255, 255, 255, 0.04)":"rgba(0, 0, 0, 0.04)",y.setLineDash([]),y.beginPath();for(let Be=Ee;Be<ie;Be+=Re)y.moveTo(Be,0),y.lineTo(Be,Y);for(let Be=at;Be<Y;Be+=Re)y.moveTo(0,Be),y.lineTo(ie,Be);y.stroke();}else if(I==="cross"){let j=32;for(;j*m.zoom<20;)j*=2;for(;j*m.zoom>80;)j/=2;let ge=j*m.zoom,Re=(m.x%ge+ge)%ge,tt=(m.y%ge+ge)%ge;y.strokeStyle=we?"rgba(255, 255, 255, 0.11)":"rgba(0, 0, 0, 0.09)",y.lineWidth=1,y.setLineDash([]),y.beginPath();for(let Ae=Re;Ae<ie;Ae+=ge)for(let Ee=tt;Ee<Y;Ee+=ge)y.moveTo(Ae-3,Ee),y.lineTo(Ae+3,Ee),y.moveTo(Ae,Ee-3),y.lineTo(Ae,Ee+3);y.stroke();}y.save(),y.translate(m.x,m.y),y.scale(m.zoom,m.zoom);let he=-m.x/m.zoom,We=-m.y/m.zoom,Oe=(ie-m.x)/m.zoom,Fe=(Y-m.y)/m.zoom,qe=100,dt=[...e].sort((j,ge)=>(j.zIndex??0)-(ge.zIndex??0));for(let j of dt){let ge=Math.min(j.x,j.x+j.width),Re=Math.max(j.x,j.x+j.width),tt=Math.min(j.y,j.y+j.height),Ae=Math.max(j.y,j.y+j.height);Re<he-qe||ge>Oe+qe||Ae<We-qe||tt>Fe+qe||Or(y,j,1,j.id===Pe,we);}if(!M&&!Ne){for(let j of r){if(j===Pe)continue;let ge=e.find(Ee=>Ee.id===j);if(!ge)continue;let Re=bt(ge),tt=Re.x+Re.width/2,Ae=Re.y+Re.height/2;if(y.save(),ge.rotation&&(y.translate(tt,Ae),y.rotate(ge.rotation),y.translate(-tt,-Ae)),r.length===1){y.strokeStyle="#0b6eff",y.lineWidth=1.5/m.zoom,y.setLineDash([4/m.zoom,4/m.zoom]),y.strokeRect(Re.x-4,Re.y-4,Re.width+8,Re.height+8),y.setLineDash([]);let Ee=3.25/m.zoom,at=go({...ge,rotation:0});for(let Be of at)Be.type==="start"||Be.type==="end"||Be.type==="middle"||Be.type==="control1"||Be.type==="control2"?(y.beginPath(),y.arc(Be.x,Be.y,Ee*1.3,0,Math.PI*2),y.fillStyle="#ffffff",y.fill(),y.strokeStyle="#0b6eff",y.lineWidth=1.5/m.zoom,y.stroke(),y.beginPath(),y.arc(Be.x,Be.y,Ee*.5,0,Math.PI*2),y.fillStyle="#0b6eff",y.fill()):Be.type==="rotate"?(y.beginPath(),y.moveTo(tt,Re.y-4),y.lineTo(tt,Re.y-20),y.strokeStyle="#0b6eff",y.lineWidth=1.1/m.zoom,y.stroke(),y.beginPath(),y.arc(tt,Re.y-20,Ee*1.1,0,Math.PI*2),y.fillStyle="#ffffff",y.fill(),y.strokeStyle="#0b6eff",y.lineWidth=1.5/m.zoom,y.stroke()):(y.fillStyle="#ffffff",y.fillRect(Be.x-Ee,Be.y-Ee,Ee*2,Ee*2),y.strokeStyle="#0b6eff",y.lineWidth=1.2/m.zoom,y.strokeRect(Be.x-Ee,Be.y-Ee,Ee*2,Ee*2));}else y.strokeStyle="rgba(105, 101, 219, 0.45)",y.lineWidth=1/m.zoom,y.setLineDash([3/m.zoom,3/m.zoom]),y.strokeRect(Re.x-3,Re.y-3,Re.width+6,Re.height+6),y.setLineDash([]);y.restore();}if(!Ne&&r.length>1){let j=e.filter(Re=>r.includes(Re.id)),ge=jr(j,8);if(ge){y.save(),y.fillStyle=we?"rgba(105, 101, 219, 0.05)":"rgba(105, 101, 219, 0.035)",y.fillRect(ge.x,ge.y,ge.width,ge.height),y.strokeStyle="#0b6eff",y.lineWidth=1.8/m.zoom,y.setLineDash([6/m.zoom,4/m.zoom]),y.strokeRect(ge.x,ge.y,ge.width,ge.height),y.setLineDash([]);let Re=j.length>0&&j[0].groupIds&&j[0].groupIds.length>0?j[0].groupIds[j[0].groupIds.length-1]:null,Ae=Re!==null&&j.every(Jt=>Jt.groupIds&&Jt.groupIds.includes(Re))?"Group":"Selection",Ee=Math.max(9,Math.min(13,10.5/m.zoom));y.font=`600 ${Ee}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;let at=y.measureText(Ae).width,Be=6/m.zoom,Ht=at+Be*2,Nt=16/m.zoom,yr=ge.x,br=ge.y-Nt-3/m.zoom;y.fillStyle="#0b6eff",typeof y.roundRect=="function"?(y.beginPath(),y.roundRect(yr,br,Ht,Nt,4/m.zoom),y.fill()):y.fillRect(yr,br,Ht,Nt),y.fillStyle="#ffffff",y.textAlign="center",y.textBaseline="middle",y.fillText(Ae,yr+Ht/2,br+Nt/2);let eo=yo(ge),qt=3.25/m.zoom;for(let Jt of eo)if(Jt.type==="rotate"){let Yr=ge.x+ge.width/2;y.beginPath(),y.moveTo(Yr,ge.y),y.lineTo(Yr,ge.y-20/m.zoom),y.strokeStyle="#0b6eff",y.lineWidth=1.1/m.zoom,y.stroke(),y.beginPath(),y.arc(Yr,ge.y-20/m.zoom,qt*1.1,0,Math.PI*2),y.fillStyle="#ffffff",y.fill(),y.strokeStyle="#0b6eff",y.lineWidth=1.5/m.zoom,y.stroke();}else y.fillStyle="#ffffff",y.fillRect(Jt.x-qt,Jt.y-qt,qt*2,qt*2),y.strokeStyle="#0b6eff",y.lineWidth=1.2/m.zoom,y.strokeRect(Jt.x-qt,Jt.y-qt,qt*2,qt*2);y.restore();}}}if(ae.hoveredAnchor){let{elementId:j,point:ge}=ae.hoveredAnchor,Re=e.find(tt=>tt.id===j);if(Re){y.save();let tt=Xo(Re);for(let[Ae,Ee]of Object.entries(tt)){if(Ae==="center")continue;let at=Math.abs(Ee.x-ge.x)<.1&&Math.abs(Ee.y-ge.y)<.1,Be=(at?5:3)/m.zoom;y.beginPath(),y.arc(Ee.x,Ee.y,Be,0,Math.PI*2),y.fillStyle=at?"#6366f1":we?"rgba(255, 255, 255, 0.45)":"rgba(99, 102, 241, 0.35)",y.fill(),y.strokeStyle=at?"#ffffff":we?"rgba(255, 255, 255, 0.65)":"rgba(79, 70, 229, 0.55)",y.lineWidth=(at?1.5:1)/m.zoom,y.stroke(),at&&(y.beginPath(),y.arc(Ee.x,Ee.y,(Be+4)/m.zoom,0,Math.PI*2),y.strokeStyle="rgba(99, 102, 241, 0.45)",y.lineWidth=2/m.zoom,y.stroke());}y.restore();}}if(ae.marquee){let{startX:j,startY:ge,currentX:Re,currentY:tt}=ae.marquee,Ae=Math.min(j,Re),Ee=Math.min(ge,tt),at=Math.abs(Re-j),Be=Math.abs(tt-ge);y.fillStyle="rgba(11, 110, 255, 0.12)",y.fillRect(Ae,Ee,at,Be),y.strokeStyle="#0b6eff",y.lineWidth=1/m.zoom,y.setLineDash([3/m.zoom,3/m.zoom]),y.strokeRect(Ae,Ee,at,Be),y.setLineDash([]);}ae.alignmentGuides&&ae.alignmentGuides.length>0&&Ji(y,ae.alignmentGuides,m),ae.spacingGuides&&ae.spacingGuides.length>0&&Qi(y,ae.spacingGuides,m),oe&&oe.length>0&&Zi(y,oe,m,Date.now()),E==="laser"&&U&&qi(y,U,R,m),y.restore(),y.restore();},[e,m,r,I,Ge,ke,Ie,ae.marquee,ae.hoveredAnchor,ae.alignmentGuides,ae.spacingGuides,oe,U,R,E,M,F,Lt]);let Ye=r.length===1&&e.find(W=>W.id===r[0])||null,dr=!!(Ye&&["rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","table","sticky","frame"].includes(Ye.type)),At=useCallback(W=>{if(!Ye||!dr)return;let y=Ye,H=bt(y),ie=80,Y=H.x,he=H.y,We="right",Oe="left",Fe={x:H.x+H.width,y:H.y+H.height/2},qe={x:H.x+H.width+ie,y:H.y+H.height/2};W==="right"?(Y=H.x+H.width+ie,he=H.y,We="right",Oe="left",Fe={x:H.x+H.width,y:H.y+H.height/2},qe={x:Y,y:he+H.height/2}):W==="bottom"?(Y=H.x,he=H.y+H.height+ie,We="bottom",Oe="top",Fe={x:H.x+H.width/2,y:H.y+H.height},qe={x:Y+H.width/2,y:he}):W==="left"?(Y=H.x-H.width-ie,he=H.y,We="left",Oe="right",Fe={x:H.x,y:H.y+H.height/2},qe={x:Y+H.width,y:he+H.height/2}):W==="top"&&(Y=H.x,he=H.y-H.height-ie,We="top",Oe="bottom",Fe={x:H.x+H.width/2,y:H.y},qe={x:Y+H.width/2,y:he+H.height});let dt=`el_${Date.now()}_${Math.random().toString(36).substring(2,7)}`,j=`el_${Date.now()+1}_${Math.random().toString(36).substring(2,7)}`,ge=e.reduce((at,Be)=>Math.max(at,Be.zIndex??0),0),Re=y.type==="frame",tt={...y,id:dt,x:Y,y:he,zIndex:ge+2,text:"",frameLabel:Re?`Frame ${e.filter(at=>at.type==="frame").length+1}`:y.frameLabel},Ae={id:j,type:"arrow",x:Fe.x,y:Fe.y,width:qe.x-Fe.x,height:qe.y-Fe.y,strokeColor:y.strokeColor||"#1e1e24",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"transparent",opacity:1,zIndex:ge+1,arrowType:"straight",endArrowhead:true,startBinding:{elementId:y.id,anchor:We},endBinding:{elementId:dt,anchor:Oe}},Ee=[...e,Ae,tt];t(Ee),u(Ee),o(dt);},[Ye,dr,e,t,u,o]);useEffect(()=>{let W=y=>{Pe||["INPUT","TEXTAREA"].includes(y.target?.tagName)||(y.ctrlKey||y.metaKey)&&(y.key==="ArrowRight"?(y.preventDefault(),At("right")):y.key==="ArrowDown"?(y.preventDefault(),At("bottom")):y.key==="ArrowLeft"?(y.preventDefault(),At("left")):y.key==="ArrowUp"&&(y.preventDefault(),At("top")));};return window.addEventListener("keydown",W),()=>window.removeEventListener("keydown",W)},[Pe,At]);let Ke=e.find(W=>W.id===Pe),Sr=Ke?w({x:Ke.width<0?Ke.x+Ke.width:Ke.x,y:Ke.height<0?Ke.y+Ke.height:Ke.y}):null,wt=Ke?ar(Ke.fontFamily):gr[0],or=useMemo(()=>{if(!Ke)return 22;let W=Ke.fontSize||(Ke.type==="sticky"?20:22);if(Ke.type==="text"||Ke.type==="frame"||typeof window>"u")return W;let H=document.createElement("canvas").getContext("2d");if(!H)return W;let ie=Yo(Ke),Y=W,he=9,We=wt.value==="fuzzy"||wt.value==="edusa",Fe=wt.value==="patrick"||wt.value==="comic"||wt.value==="handlee"?"400":We?"700":"600",qe=Z||Ke.text||"";H.font=`normal ${Fe} ${Y}px ${wt.cssFont}`;let dt=Xr(H,qe,ie.boxW),j=Y*1.35;for(;(dt.length*j>ie.boxH||dt.some(ge=>H.measureText(ge).width>ie.boxW))&&Y>he;)Y-=.75,H.font=`normal ${Fe} ${Y}px ${wt.cssFont}`,dt=Xr(H,qe,ie.boxW),j=Y*1.35;return Y},[Ke,Z,wt.cssFont,wt.value]),Dt=Ke?O(Z||" ",or,wt.cssFont,Ke.type,Ke.width,Ke.fontFamily):{width:140,height:36};return jsxs("div",{ref:le,onDragOver:N,onDragEnter:ye,onDragLeave:Te,onDrop:kt,className:"relative w-full h-full overflow-hidden select-none",style:{backgroundColor:Ge,cursor:ae.cursor},children:[gt&&jsx("div",{className:"absolute inset-0 z-50 pointer-events-none flex flex-col items-center justify-center bg-primary/10 dark:bg-primary/15 backdrop-blur-[2px] border-4 border-dashed border-primary/60 dark:border-primary/70 transition-all duration-200",children:jsxs("div",{className:"flex flex-col items-center gap-3 px-8 py-6 rounded-2xl bg-white/95 dark:bg-neutral-900/95 shadow-2xl border border-primary/30",children:[jsx("div",{className:"w-16 h-16 rounded-full bg-primary/15 dark:bg-primary/25 flex items-center justify-center text-primary animate-bounce",children:jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",className:"w-8 h-8",viewBox:"0 0 24 24",strokeWidth:"2",stroke:"currentColor",fill:"none",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),jsx("path",{d:"M15 8h.01"}),jsx("path",{d:"M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z"}),jsx("path",{d:"M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5"}),jsx("path",{d:"M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3"})]})}),jsx("p",{className:"text-base font-bold text-neutral-800 dark:text-neutral-100",children:"Drop image to add onto canvas"}),jsx("p",{className:"text-xs text-neutral-500 dark:text-neutral-400",children:"Supports PNG, JPG, SVG, WebP, GIF"})]})}),jsx("canvas",{ref:ce,onPointerDown:ae.onPointerDown,onPointerMove:ae.onPointerMove,onPointerUp:ae.onPointerUp,onDoubleClick:ut,className:"block touch-none"}),Ke&&Sr&&(Ke.type==="frame"?jsx("div",{className:"absolute z-30 pointer-events-auto flex items-center justify-end",style:{left:`${Sr.x+Math.abs(Ke.width)*m.zoom-160}px`,top:`${Sr.y-28*m.zoom-4}px`,width:"160px",height:`${28*m.zoom}px`},children:jsx("input",{ref:de,type:"text",value:Z,placeholder:"Frame title...",onChange:W=>Se(W.target.value),onBlur:()=>V(),onPointerDown:W=>W.stopPropagation(),onKeyDown:W=>{W.stopPropagation(),(W.key==="Enter"||W.key==="Escape")&&V();},onKeyUp:W=>W.stopPropagation(),className:"w-full px-2.5 py-1 rounded-[6px] text-xs font-semibold bg-white dark:bg-[#181818] text-neutral-900 dark:text-neutral-100 border-2 border-primary shadow-lg outline-none cursor-text select-text",style:{fontSize:`${Math.max(11,12*m.zoom)}px`,height:`${28*m.zoom}px`}})}):Ke.type==="text"?jsx("div",{className:"absolute z-30 pointer-events-auto",style:{left:`${Sr.x}px`,top:`${Sr.y}px`,width:`${Dt.width*m.zoom}px`,height:`${Dt.height*m.zoom}px`,transform:Ke.rotation?`rotate(${Ke.rotation}rad)`:void 0,transformOrigin:"top left",boxSizing:"border-box"},children:jsx("textarea",{ref:K,value:Z,onChange:W=>Se(W.target.value),onBlur:()=>V(),onKeyDown:W=>{W.key==="Enter"&&(W.metaKey||W.ctrlKey)&&V(),W.key==="Escape"&&V();},className:"w-full h-full bg-transparent border-0 outline-none shadow-none resize-none select-text cursor-text focus:ring-0",style:{fontFamily:wt.cssFont,fontSize:`${or*m.zoom}px`,lineHeight:1.35,textAlign:Ke.textAlign||"left",color:Et(Ke.strokeColor||"#1e1e24",we),caretColor:Et(Ke.strokeColor||"#0b6eff",we),fontWeight:wt.value==="patrick"||wt.value==="comic"||wt.value==="handlee"||wt.value==="fuzzy"||wt.value==="edusa"?400:500,padding:`0px ${4*m.zoom}px`,margin:"0px",boxSizing:"border-box",whiteSpace:"pre",overflow:"hidden"}})}):(()=>{let W=Yo(Ke),y=w({x:W.boxX,y:W.boxY}),H=Ke.type==="sticky",ie=H?Ke.strokeColor&&Ke.strokeColor!=="transparent"?Et(Ke.strokeColor,we):Mr(Ke.stickyColor||Ke.fillColor,we).text:Et(Ke.strokeColor||"#1e1e24",we),Y=H?ie:Et(Ke.strokeColor||"#0b6eff",we);return jsx("div",{className:"absolute z-30 pointer-events-auto",style:{left:`${y.x}px`,top:`${y.y}px`,width:`${W.boxW*m.zoom}px`,height:`${W.boxH*m.zoom}px`,transform:Ke.rotation?`rotate(${Ke.rotation}rad)`:void 0,transformOrigin:"center center",boxSizing:"border-box",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden"},children:jsx("textarea",{ref:K,value:Z,placeholder:H?"Type a note...":"Type text...",onChange:he=>{Se(he.target.value),K.current&&(K.current.style.height="auto",K.current.style.height=`${K.current.scrollHeight}px`);},onBlur:()=>V(),onKeyDown:he=>{if(Ke.type==="table"&&he.key==="Tab"){he.preventDefault(),he.shiftKey?V("prev"):V("next");return}he.key==="Enter"&&(he.metaKey||he.ctrlKey)&&V(),he.key==="Escape"&&V();},className:"w-full bg-transparent border-0 outline-none shadow-none resize-none select-text cursor-text focus:ring-0",style:{fontFamily:wt.cssFont,fontSize:`${or*m.zoom}px`,lineHeight:1.35,textAlign:Ke.textAlign||"center",color:ie,caretColor:Y,fontWeight:wt.value==="patrick"||wt.value==="comic"||wt.value==="handlee"?400:wt.value==="fuzzy"||wt.value==="edusa"?700:600,padding:"0px",margin:"0px",boxSizing:"border-box",whiteSpace:"pre-wrap",wordBreak:"break-word",overflowWrap:"break-word",overflow:"hidden",maxHeight:"100%"}})})})()),!M&&dr&&Ye&&!Pe&&E==="select"&&!ae.activeHandle&&!ae.cursor.includes("resize")&&!ae.cursor.includes("grab")&&!ae.cursor.includes("grabbing")&&!ae.marquee&&(()=>{let W=bt(Ye),y=w({x:W.x,y:W.y}),H=W.width*m.zoom,ie=W.height*m.zoom,Y=80*m.zoom,he=Ye.type==="sticky",We=Ye.type==="ellipse",Oe=Ye.type==="diamond",Fe=Ye.type==="parallelogram";Ye.type==="star";let dt=j=>Oe?jsxs("div",{className:"relative w-full h-full flex items-center justify-center",children:[jsx("svg",{className:"absolute inset-0 w-full h-full pointer-events-none overflow-visible",viewBox:"0 0 100 100",preserveAspectRatio:"none",children:jsx("polygon",{points:"50,1 99,50 50,99 1,50",className:"fill-neutral-500/10 dark:fill-white/[0.04] stroke-neutral-400/50 dark:stroke-neutral-600/60",strokeWidth:"2",strokeDasharray:"5 4",vectorEffect:"non-scaling-stroke"})}),jsxs("div",{className:"relative z-10 flex items-center gap-1.5 px-2 py-1 rounded-[6px] bg-neutral-900/85 dark:bg-neutral-950/90 text-white text-[11px] font-semibold tracking-wide shadow-md border border-white/15",children:[jsx("span",{children:j[0]}),jsx("span",{className:"text-[12px] leading-none",children:j[1]})]})]}):Fe?jsxs("div",{className:"relative w-full h-full flex items-center justify-center",children:[jsx("svg",{className:"absolute inset-0 w-full h-full pointer-events-none overflow-visible",viewBox:"0 0 100 100",preserveAspectRatio:"none",children:jsx("polygon",{points:"20,0 100,0 80,100 0,100",className:"fill-neutral-500/10 dark:fill-white/[0.04] stroke-neutral-400/50 dark:stroke-neutral-600/60",strokeWidth:"2",strokeDasharray:"5 4",vectorEffect:"non-scaling-stroke"})}),jsxs("div",{className:"relative z-10 flex items-center gap-1.5 px-2 py-1 rounded-[6px] bg-neutral-900/85 dark:bg-neutral-950/90 text-white text-[11px] font-semibold tracking-wide shadow-md border border-white/15",children:[jsx("span",{children:j[0]}),jsx("span",{className:"text-[12px] leading-none",children:j[1]})]})]}):jsx("div",{className:`w-full h-full flex items-center justify-center border-2 border-dashed transition-all ${he?"rounded-[6px] bg-amber-400/10 dark:bg-amber-400/5 border-amber-400/40 shadow-xs":We?"rounded-full bg-neutral-500/10 dark:bg-white/[0.04] border-neutral-400/40 dark:border-neutral-600/50 shadow-xs":"rounded-[10px] bg-neutral-500/10 dark:bg-white/[0.04] border-neutral-400/40 dark:border-neutral-600/50 shadow-xs"}`,children:jsxs("div",{className:"flex items-center gap-1.5 px-2 py-1 rounded-[6px] bg-neutral-900/85 dark:bg-neutral-950/90 text-white text-[11px] font-semibold tracking-wide shadow-md border border-white/15",children:[jsx("span",{children:j[0]}),jsx("span",{className:"text-[12px] leading-none",children:j[1]})]})});return jsxs("div",{className:"absolute pointer-events-none z-20",style:{left:y.x,top:y.y,width:H,height:ie,transform:Ye.rotation?`rotate(${Ye.rotation}rad)`:void 0,transformOrigin:"center center"},children:[(q==="right"||T==="right")&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:j=>{j.stopPropagation(),At("right");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("right"),onMouseLeave:()=>L(null),title:"Add connected shape to the right (Ctrl + \u2192)",className:"absolute -translate-x-1/2 -translate-y-1/2 z-20 pointer-events-auto w-6 h-6 rounded-full bg-white dark:bg-[#1e1e24] shadow-md border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200 hover:bg-primary hover:border-primary hover:text-white dark:hover:text-white flex items-center justify-center hover:scale-115 transition-all duration-150 cursor-pointer animate-in fade-in zoom-in-90",style:{left:H+28,top:ie/2},children:jsx(IconPlus,{size:13,stroke:2.6})}),T==="right"&&jsxs("div",{className:"absolute z-10 pointer-events-auto cursor-pointer animate-in fade-in duration-100",style:{left:H+16,top:0,width:Math.max(0,Y+H-16),height:ie},onClick:j=>{j.stopPropagation(),At("right");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("right"),onMouseLeave:()=>L(null),children:[jsxs("svg",{className:"absolute overflow-visible pointer-events-none",style:{left:-16,top:ie/2-8,width:Y,height:16},children:[jsx("line",{x1:0,y1:8,x2:Y-3,y2:8,stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5}),jsx("polyline",{points:`${Y-7},4 ${Y-1},8 ${Y-7},12`,fill:"none",stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5})]}),jsx("div",{className:"absolute",style:{left:Y-16,top:0,width:H,height:ie},children:dt(["Ctrl","\u2192"])})]})]}),(q==="bottom"||T==="bottom")&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:j=>{j.stopPropagation(),At("bottom");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("bottom"),onMouseLeave:()=>L(null),title:"Add connected shape below (Ctrl + \u2193)",className:"absolute -translate-x-1/2 -translate-y-1/2 z-20 pointer-events-auto w-6 h-6 rounded-full bg-white dark:bg-[#1e1e24] shadow-md border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200 hover:bg-primary hover:border-primary hover:text-white dark:hover:text-white flex items-center justify-center hover:scale-115 transition-all duration-150 cursor-pointer animate-in fade-in zoom-in-90",style:{left:H/2,top:ie+28},children:jsx(IconPlus,{size:13,stroke:2.6})}),T==="bottom"&&jsxs("div",{className:"absolute z-10 pointer-events-auto cursor-pointer animate-in fade-in duration-100",style:{left:0,top:ie+16,width:H,height:Math.max(0,Y+ie-16)},onClick:j=>{j.stopPropagation(),At("bottom");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("bottom"),onMouseLeave:()=>L(null),children:[jsxs("svg",{className:"absolute overflow-visible pointer-events-none",style:{left:H/2-8,top:-16,width:16,height:Y},children:[jsx("line",{x1:8,y1:0,x2:8,y2:Y-3,stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5}),jsx("polyline",{points:`4,${Y-7} 8,${Y-1} 12,${Y-7}`,fill:"none",stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5})]}),jsx("div",{className:"absolute",style:{left:0,top:Y-16,width:H,height:ie},children:dt(["Ctrl","\u2193"])})]})]}),(q==="left"||T==="left")&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:j=>{j.stopPropagation(),At("left");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("left"),onMouseLeave:()=>L(null),title:"Add connected shape to the left (Ctrl + \u2190)",className:"absolute -translate-x-1/2 -translate-y-1/2 z-20 pointer-events-auto w-6 h-6 rounded-full bg-white dark:bg-[#1e1e24] shadow-md border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200 hover:bg-primary hover:border-primary hover:text-white dark:hover:text-white flex items-center justify-center hover:scale-115 transition-all duration-150 cursor-pointer animate-in fade-in zoom-in-90",style:{left:-28,top:ie/2},children:jsx(IconPlus,{size:13,stroke:2.6})}),T==="left"&&jsxs("div",{className:"absolute z-10 pointer-events-auto cursor-pointer animate-in fade-in duration-100",style:{left:-Y-H,top:0,width:Math.max(0,Y+H-16),height:ie},onClick:j=>{j.stopPropagation(),At("left");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("left"),onMouseLeave:()=>L(null),children:[jsxs("svg",{className:"absolute overflow-visible pointer-events-none",style:{right:-16,top:ie/2-8,width:Y,height:16},children:[jsx("line",{x1:Y,y1:8,x2:3,y2:8,stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5}),jsx("polyline",{points:"7,4 1,8 7,12",fill:"none",stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5})]}),jsx("div",{className:"absolute",style:{left:0,top:0,width:H,height:ie},children:dt(["Ctrl","\u2190"])})]})]}),(q==="top"||T==="top")&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:j=>{j.stopPropagation(),At("top");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("top"),onMouseLeave:()=>L(null),title:"Add connected shape above (Ctrl + \u2191)",className:"absolute -translate-x-1/2 -translate-y-1/2 z-20 pointer-events-auto w-6 h-6 rounded-full bg-white dark:bg-[#1e1e24] shadow-md border border-neutral-300 dark:border-neutral-600 text-neutral-700 dark:text-neutral-200 hover:bg-primary hover:border-primary hover:text-white dark:hover:text-white flex items-center justify-center hover:scale-115 transition-all duration-150 cursor-pointer animate-in fade-in zoom-in-90",style:{left:H/2,top:-64},children:jsx(IconPlus,{size:13,stroke:2.6})}),T==="top"&&jsxs("div",{className:"absolute z-10 pointer-events-auto cursor-pointer animate-in fade-in duration-100",style:{left:0,top:-Y-ie,width:H,height:Math.max(0,Y+ie-16)},onClick:j=>{j.stopPropagation(),At("top");},onPointerDown:j=>j.stopPropagation(),onMouseDown:j=>j.stopPropagation(),onMouseEnter:()=>L("top"),onMouseLeave:()=>L(null),children:[jsxs("svg",{className:"absolute overflow-visible pointer-events-none",style:{left:H/2-8,bottom:-16,width:16,height:Y},children:[jsx("line",{x1:8,y1:Y,x2:8,y2:3,stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5}),jsx("polyline",{points:"4,7 8,1 12,7",fill:"none",stroke:we?"rgba(255,255,255,0.4)":"rgba(0,0,0,0.35)",strokeWidth:1.5})]}),jsx("div",{className:"absolute",style:{left:0,top:0,width:H,height:ie},children:dt(["Ctrl","\u2191"])})]})]})]})})()]})}async function Vr(e,t,r){if(typeof window>"u")return;let o=typeof r=="string"?r:r?.mimeType||"application/octet-stream";if(typeof e=="string"&&e.startsWith("data:")){let s=document.createElement("a");s.href=e,s.download=t,s.style.display="none",document.body.appendChild(s),s.click(),document.body.removeChild(s);return}let c=e instanceof Blob?e:new Blob([e],{type:o}),d=URL.createObjectURL(c),h=document.createElement("a");h.href=d,h.download=t,h.style.display="none",document.body.appendChild(h),h.click(),document.body.removeChild(h),setTimeout(()=>{URL.revokeObjectURL(d);},1e3);}function tr(e){return e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function ko(e){if(!e||e==="transparent")return false;if(e.startsWith("#")){let t=e.replace("#","");if(t.length===3){let r=parseInt(t[0]+t[0],16),o=parseInt(t[1]+t[1],16),c=parseInt(t[2]+t[2],16);return r*.299+o*.587+c*.114<128}if(t.length===6){let r=parseInt(t.substring(0,2),16),o=parseInt(t.substring(2,4),16),c=parseInt(t.substring(4,6),16);return r*.299+o*.587+c*.114<128}}return false}function Ta(e,t,r,o,c,d,h){if(!o||o==="none")return "";let s=o===true?"arrow":o,n=Math.max(1.5,d),p=`transform="translate(${e}, ${t}) rotate(${r*180/Math.PI})"`;switch(s){case "arrow":{let i=Math.max(12,n*4.5),l=i*.55;return `<path d="M ${-i} ${-l} L 0 0 L ${-i} ${l}" fill="none" stroke="${c}" stroke-width="${n}" stroke-linecap="round" stroke-linejoin="round" opacity="${h}" ${p} />
|
|
8
8
|
`}case "triangle":{let i=Math.max(14,n*4.8),l=i*.55;return `<polygon points="0,0 ${-i},${-l} ${-i},${l}" fill="${c}" stroke="${c}" stroke-width="${n}" stroke-linejoin="round" opacity="${h}" ${p} />
|
|
9
9
|
`}case "barbed":{let i=Math.max(16,n*5.2),l=i*.55,u=i*.35;return `<polygon points="0,0 ${-i},${-l} ${-i+u},0 ${-i},${l}" fill="${c}" stroke="${c}" stroke-width="${n}" stroke-linejoin="round" opacity="${h}" ${p} />
|
|
10
10
|
`}case "dot":{let i=Math.max(4.5,n*1.8);return `<circle cx="${-i}" cy="0" r="${i}" fill="${c}" opacity="${h}" ${p} />
|
|
@@ -59,7 +59,7 @@ import Hn,{createContext,useMemo,useRef,useState,useCallback,useEffect,useImpera
|
|
|
59
59
|
`;else if(b.type==="curved"&&b.controlPoint){let M=`M ${a.x} ${a.y} Q ${b.controlPoint.x} ${b.controlPoint.y} ${f} ${v}`;n+=`<path d="${M}" fill="none" stroke="${m}" stroke-width="${g}" stroke-dasharray="${S}" opacity="${x}" stroke-linecap="round" />
|
|
60
60
|
`;}else if(b.type==="elbow"&&b.controlPoint1&&b.controlPoint2){let M=`M ${a.x} ${a.y} C ${b.controlPoint1.x} ${b.controlPoint1.y}, ${b.controlPoint2.x} ${b.controlPoint2.y}, ${f} ${v}`;n+=`<path d="${M}" fill="none" stroke="${m}" stroke-width="${g}" stroke-dasharray="${S}" opacity="${x}" stroke-linecap="round" />
|
|
61
61
|
`;}else {let M=b.points.map((R,J)=>`${J===0?"M":"L"} ${R.x} ${R.y}`).join(" ");n+=`<path d="${M}" fill="none" stroke="${m}" stroke-width="${g}" stroke-dasharray="${S}" opacity="${x}" stroke-linecap="round" stroke-linejoin="round" />
|
|
62
|
-
`;}a.startArrowhead&&a.startArrowhead!=="none"&&(n+=
|
|
62
|
+
`;}a.startArrowhead&&a.startArrowhead!=="none"&&(n+=Ta(a.x,a.y,b.departureAngle+Math.PI,a.startArrowhead,m,g,x));let C=a.endArrowhead!==void 0?a.endArrowhead:a.type==="arrow"?"arrow":"none";C&&C!=="none"&&(n+=Ta(f,v,b.arrivalAngle,C,m,g,x));break}case "pen":{if(a.points&&a.points.length>1){let b=a.points.map((f,v)=>`${v===0?"M":"L"} ${f.x} ${f.y}`).join(" ");n+=`<path d="${b}" fill="none" stroke="${m}" stroke-width="${g}" stroke-linecap="round" stroke-linejoin="round" opacity="${x}" />
|
|
63
63
|
`;}break}case "text":{if(a.text){let b=a.text.split(`
|
|
64
64
|
`),f=a.fontSize||22,v=f*1.35,C=(v-f)/2,M=a.textAlign||"left",R=M==="center"?"middle":M==="right"?"end":"start",J=M==="center"?a.x+a.width/2:M==="right"?a.x+a.width-4:a.x+4;b.forEach((oe,A)=>{n+=`<text x="${J}" y="${a.y+C+f+A*v}" text-anchor="${R}" font-size="${f}" font-weight="${P}" fill="${m}" font-family="${z}" opacity="${x}">${tr(I(oe))}</text>
|
|
65
65
|
`;});}break}case "sticky":{let b=Mr(a.stickyColor||a.fillColor),f=Math.abs(a.width),v=Math.abs(a.height),C=Math.min(22,Math.min(f,v)*.16),M=Math.min(13,f*.08),R=Math.min(13,v*.08);n+=`<rect x="${a.x+M}" y="${a.y+R}" width="${a.width}" height="${a.height}" rx="${C}" fill="${b.backSheetBg}" stroke="${b.backSheetBorder}" stroke-width="1.5" opacity="${x}" />
|
|
@@ -92,9 +92,9 @@ import Hn,{createContext,useMemo,useRef,useState,useCallback,useEffect,useImpera
|
|
|
92
92
|
${r!=="transparent"?`<rect x="${d.minX}" y="${d.minY}" width="${d.width}" height="${d.height}" fill="${r}" />`:""}
|
|
93
93
|
${l}
|
|
94
94
|
${n}
|
|
95
|
-
</svg>`}function vr(e,t,r){Vr(e,t,{mimeType:r});}function Qi(e){let t=e.split(";base64,"),r=t[0].split(":")[1],o=window.atob(t[1]),c=o.length,d=new Uint8Array(c);for(let h=0;h<c;++h)d[h]=o.charCodeAt(h);return new Blob([d],{type:r})}async function Zr(e,t={}){try{let r=await no(e,t),o=Qi(r);return await navigator.clipboard.write([new ClipboardItem({"image/png":o})]),!0}catch(r){return console.warn("Clipboard copy failed:",r),false}}function Fr(e,t){let r=bt(e);return t.filter(o=>{if(o.id===e.id)return false;let c=bt(o),d=c.x+c.width/2,h=c.y+c.height/2;return d>=r.x&&d<=r.x+r.width&&h>=r.y&&h<=r.y+r.height})}async function vo(e,t,r={}){let{scale:o=2,backgroundColor:c=e.fillColor&&e.fillColor!=="transparent"?e.fillColor:"#ffffff",padding:d=0}=r,h=bt(e),s=document.createElement("canvas");s.width=Math.max(10,(h.width+d*2)*o),s.height=Math.max(10,(h.height+d*2)*o);let n=s.getContext("2d");if(!n)throw new Error("Could not create canvas context");let p=r.isDark??(ko(c)||c==="transparent"&&typeof document<"u"&&document.documentElement.classList.contains("dark"));c&&c!=="transparent"&&(n.fillStyle=c,n.fillRect(0,0,s.width,s.height)),n.save(),n.scale(o,o),n.translate(-h.x+d,-h.y+d),n.beginPath(),n.rect(h.x,h.y,h.width,h.height),n.clip();let i=Fr(e,t),l=i.filter(a=>a.type==="image"&&a.dataUrl);l.length>0&&await Promise.all(l.map(a=>new Promise(x=>{let m=new Image;m.crossOrigin="anonymous",m.onload=()=>x(),m.onerror=()=>x(),m.src=a.dataUrl;})));let u=[...i].sort((a,x)=>(a.zIndex??0)-(x.zIndex??0));for(let a of u)Or(n,a,1,false,p);return n.restore(),s.toDataURL("image/png")}var $a=595.28,za=841.89,Go=24,es=.75;function ts(e,t=Go){let r=e==="landscape",o=r?za:$a,c=r?$a:za;return {pageWidth:o,pageHeight:c,margin:t,printableWidth:Math.max(100,o-t*2),printableHeight:Math.max(100,c-t*2)}}var fn=class{parent=new Map;find(t){if(!this.parent.has(t))return this.parent.set(t,t),t;let r=this.parent.get(t);if(r===t)return t;let o=this.find(r);return this.parent.set(t,o),o}union(t,r){let o=this.find(t),c=this.find(r);o!==c&&this.parent.set(o,c);}};function rs(e){if(e.length===0)return [];let t=new fn,r=new Map;for(let p of e)r.set(p.id,p);let o=new Map;for(let p of e)if(p.groupIds&&p.groupIds.length>0)for(let i of p.groupIds){let l=o.get(i)||[];l.push(p.id),o.set(i,l);}for(let p of o.values())for(let i=1;i<p.length;i++)t.union(p[0],p[i]);let c=e.filter(p=>p.type==="frame");for(let p of c){let i=Fr(p,e);for(let l of i)t.union(p.id,l.id);}for(let p of e)p.frameId&&r.has(p.frameId)&&t.union(p.id,p.frameId);for(let p of e)(p.type==="arrow"||p.type==="line")&&(p.startBinding?.elementId&&r.has(p.startBinding.elementId)&&t.union(p.id,p.startBinding.elementId),p.endBinding?.elementId&&r.has(p.endBinding.elementId)&&t.union(p.id,p.endBinding.elementId));let d=e.filter(p=>(!p.groupIds||p.groupIds.length===0)&&!p.frameId&&p.type!=="frame"),h=12;for(let p=0;p<d.length;p++){let i=d[p],l=bt(i);for(let u=p+1;u<d.length;u++){let a=d[u],x=bt(a),m=Math.max(0,Math.max(l.x,x.x)-Math.min(l.x+l.width,x.x+x.width)),g=Math.max(0,Math.max(l.y,x.y)-Math.min(l.y+l.height,x.y+x.height));m<=h&&g<=h&&(i.type==="text"||a.type==="text"||i.type==="sticky"||a.type==="sticky"||m===0&&g===0)&&t.union(i.id,a.id);}}let s=new Map;for(let p of e){let i=t.find(p.id),l=s.get(i)||[];l.push(p),s.set(i,l);}let n=[];for(let[p,i]of s.entries()){let l=Vt(i,4);n.push({id:p,elements:i,bbox:l});}return n}function Ba(e,t){let{orientation:r,margin:o=Go,baseScale:c=es}=t,d=ts(r,o),{printableWidth:h,printableHeight:s}=d;if(e.length===0)return {pageGeometry:d,pages:[{pageIndex:0,slices:[]}],uniformScale:c};let p=Vt(e,20),i=p.width>0?Math.min(c,h/p.width):c,l=p.width*i,u=p.height*i,a=Math.max(0,(h-l)/2);if(u<=s){let S=Math.max(0,(s-u)/2);return {pageGeometry:d,pages:[{pageIndex:0,slices:[{elements:e,sourceBounds:{minX:p.minX,minY:p.minY,width:p.width,height:p.height},destRect:{x:a,y:S,width:l,height:u}}]}],uniformScale:i}}let x=rs(e),m=s/i,g=[],w=p.minY,_=0;for(;w<p.maxY;){let S=p.maxY-w;if(S<=m){let f=S,v=f*i,C=e.filter(M=>{let R=bt(M);return R.y+R.height>=w&&R.y<=p.maxY});g.push({pageIndex:_,slices:[{elements:C.length>0?C:e,sourceBounds:{minX:p.minX,minY:w,width:p.width,height:f},destRect:{x:a,y:0,width:l,height:v}}]});break}let E=w+m,z=E,D=x.filter(f=>f.bbox.minY<E&&f.bbox.maxY>E);if(D.length>0){let f=Math.min(...D.map(C=>C.bbox.minY)),v=m*.55;f-w>=v?z=f:z=E;}let P=z-w,I=P*i,b=e.filter(f=>{let v=bt(f);return v.y+v.height>=w&&v.y<=z});g.push({pageIndex:_,slices:[{elements:b.length>0?b:e,sourceBounds:{minX:p.minX,minY:w,width:p.width,height:P},destRect:{x:a,y:0,width:l,height:I}}]}),w=z,_++;}return {pageGeometry:d,pages:g,uniformScale:i}}var ns=2.5,Ia=4096;function as(e){if(!e||e==="transparent")return rgb(1,1,1);let t=e.replace("#","").trim();if(t.length===3&&(t=t.split("").map(d=>d+d).join("")),t.length!==6)return rgb(1,1,1);let r=parseInt(t.substring(0,2),16)/255,o=parseInt(t.substring(2,4),16)/255,c=parseInt(t.substring(4,6),16)/255;return rgb(Number.isFinite(r)?r:1,Number.isFinite(o)?o:1,Number.isFinite(c)?c:1)}async function is(e){let t=e.filter(r=>r.type==="image"&&r.dataUrl);t.length!==0&&await Promise.all(t.map(r=>new Promise(o=>{let c=new Image;c.crossOrigin="anonymous",c.onload=()=>o(),c.onerror=()=>o(),c.src=r.dataUrl;})));}async function ss(e,t,r){let{sourceBounds:o,elements:c}=e;if(o.width<=0||o.height<=0)return null;let d=ns,h=Math.max(o.width,o.height);h*d>Ia&&(d=Math.max(1,Ia/h));let s=Math.max(2,Math.round(o.width*d)),n=Math.max(2,Math.round(o.height*d)),p=document.createElement("canvas");p.width=s,p.height=n;let i=p.getContext("2d");if(!i)return null;r&&r!=="transparent"&&(i.fillStyle=r,i.fillRect(0,0,s,n)),i.save(),i.scale(d,d),i.translate(-o.minX,-o.minY);let l=[...c].sort((x,m)=>(x.zIndex??0)-(m.zIndex??0));for(let x of l)Or(i,x,1,false,t);i.restore();let u=await new Promise(x=>{p.toBlob(x,"image/png");});if(p.width=0,p.height=0,!u)return null;let a=await u.arrayBuffer();return new Uint8Array(a)}async function _o(e,t={}){let{orientation:r="portrait",appearance:o="original",margin:c=Go,boardName:d="whiteboard",canvasBackground:h="#ffffff",isSelection:s=false,onProgress:n}=t;if(e.length===0)throw new Error("No elements to export");await is(e);let p=false,i="#ffffff",l=rgb(1,1,1);o==="dark"?(p=true,i="#121212",l=rgb(.07,.07,.07)):o==="light"?(p=false,i="#ffffff",l=rgb(1,1,1)):(p=t.isDark??ko(h),i=h||"#ffffff",l=as(i));let{pageGeometry:u,pages:a}=Ba(e,{orientation:r,margin:c}),x=await PDFDocument.create(),m=a.length,g=0;for(let E=0;E<a.length;E++){let z=a[E],D=x.addPage([u.pageWidth,u.pageHeight]);D.drawRectangle({x:0,y:0,width:u.pageWidth,height:u.pageHeight,color:l});for(let P of z.slices){let I=await ss(P,p,i);if(!I)continue;let b=await x.embedPng(I),f=u.margin+P.destRect.x,v=u.pageHeight-u.margin-P.destRect.y-P.destRect.height;D.drawImage(b,{x:f,y:v,width:P.destRect.width,height:P.destRect.height});}g++,n?.(g,m);}let w=await x.save(),S=`${(d||"whiteboard").toLowerCase().replace(/[^a-z0-9_-]/g,"-")||"whiteboard"}${s?"-selection":""}.pdf`;return await Vr(w,S,{mimeType:"application/pdf",filters:[{name:"PDF Document",extensions:["pdf"]}],showToast:true}),{success:true,pageCount:m,filename:S}}function mn({elements:e,selectedIds:t=[],boardName:r,onManualSave:o,onClearBoard:c,gridStyle:d,setGridStyle:h,resetCamera:s,canvasBackground:n="#ffffff"}){let{resolvedTheme:p}=nr(),l=useSyncExternalStore(()=>()=>{},()=>true,()=>false)&&p==="dark",[u,a]=useState(false),[x,m]=useState({x:0,y:0}),[g,w]=useState("none"),[_,S]=useState(false),[E,z]=useState("portrait"),[D,P]=useState("original"),[I,b]=useState(l?"dark":"light"),[f,v]=useState(2),[C,M]=useState(null),R=useRef(null),J=useRef(e),oe=useRef(t);useEffect(()=>{J.current=e,oe.current=t;},[e,t]);let A=ke=>{M(ke),setTimeout(()=>{M(null),a(false);},1e3);};useEffect(()=>{let ke=we=>{if(["INPUT","TEXTAREA"].includes(we.target?.tagName)||we.target?.isContentEditable)return;we.preventDefault();let Ge=240,Ue=320,ee=Math.min(window.innerWidth-Ge-16,Math.max(12,we.clientX)),Pe=Math.min(window.innerHeight-Ue-16,Math.max(12,we.clientY)),xe=J.current.filter(O=>oe.current.includes(O.id));if(xe.length>0){let O=Vt(xe,0);z(O.width>O.height*1.1?"landscape":"portrait");}m({x:ee,y:Pe}),w("none"),a(true);},Ie=we=>{if(we instanceof KeyboardEvent&&we.key==="Escape"){a(false);return}we instanceof MouseEvent&&R.current&&!R.current.contains(we.target)&&a(false);};return window.addEventListener("contextmenu",ke),window.addEventListener("mousedown",Ie),window.addEventListener("keydown",Ie),window.addEventListener("wheel",()=>a(false),{passive:true}),()=>{window.removeEventListener("contextmenu",ke),window.removeEventListener("mousedown",Ie),window.removeEventListener("keydown",Ie);}},[]);let U=async()=>{try{let Ie=await no(e,{scale:f,backgroundColor:I==="dark"?"#121212":I==="light"?"#ffffff":"transparent"}),we=`${r.toLowerCase().replace(/[^a-z0-9]/g,"-")||"whiteboard"}-${f}x.png`;vr(Ie,we,"image/png"),A(`Downloaded PNG (${f}x)`);}catch{A("Failed to download image");}},G=async()=>{try{let Ie=await Zr(e,{scale:f,backgroundColor:I==="dark"?"#121212":I==="light"?"#ffffff":"transparent"});A(Ie?"Copied image to clipboard! \u{1F4CB}":"Clipboard write failed");}catch{A("Clipboard write failed");}},Ne=()=>{try{let Ie=wo(e,{backgroundColor:I==="dark"?"#121212":I==="light"?"#ffffff":"transparent"}),we=`${r.toLowerCase().replace(/[^a-z0-9]/g,"-")||"whiteboard"}.svg`;vr(Ie,we,"image/svg+xml"),A("Downloaded SVG Vector");}catch{A("Failed to download SVG");}},ne=()=>{try{let ke=JSON.stringify(e,null,2),Ie=`${r.toLowerCase().replace(/[^a-z0-9]/g,"-")||"whiteboard"}.json`;vr(ke,Ie,"application/json"),A("Downloaded JSON file");}catch{A("Failed to download JSON");}},le=async()=>{try{let ke=JSON.stringify(e,null,2);await navigator.clipboard.writeText(ke),A("Copied JSON to clipboard! \u{1F4CB}");}catch{A("Could not copy JSON");}},ce=async()=>{if(!(_||t.length===0))try{S(!0),A("Preparing PDF\u2026");let ke=e.filter(Ie=>t.includes(Ie.id));if(ke.length===0)return;await _o(ke,{orientation:E,appearance:D,margin:24,boardName:r,canvasBackground:n,isDark:l,isSelection:!0}),A(`Downloaded PDF (${E==="landscape"?"Landscape":"Portrait"}) \u2713`);}catch(ke){console.error("Failed to export selection as PDF:",ke),A("Export failed");}finally{S(false);}};return u?jsx("div",{ref:R,className:"fixed z-50 select-none animate-in fade-in-0 zoom-in-95 duration-100",style:{left:`${x.x}px`,top:`${x.y}px`},children:jsxs("div",{className:"relative w-56 rounded-2xl bg-white/95 dark:bg-[#18181b]/95 backdrop-blur-md shadow-sm dark:shadow-md border border-neutral-200/90 dark:border-neutral-800 p-1.5 text-xs text-neutral-800 dark:text-neutral-200 font-medium space-y-0.5",children:[C&&jsx("div",{className:"mb-1.5 px-2.5 py-1.5 rounded-2xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-600 dark:text-emerald-400 text-center font-semibold text-[11px] animate-in fade-in",children:C}),t.length>0&&jsxs("div",{className:"relative",onMouseEnter:()=>w("pdf"),children:[jsxs("button",{type:"button",disabled:_,onClick:ce,className:"w-full flex items-center justify-between px-2.5 py-1.5 rounded-2xl bg-primary/10 hover:bg-primary/20 text-primary dark:text-foreground transition-colors cursor-pointer group font-semibold",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(IconFileTypePdf,{size:14,className:"text-primary shrink-0"}),jsx("span",{children:_?"Preparing\u2026":"Export Selection as PDF"})]}),jsx("div",{className:"flex items-center gap-1",children:jsx(IconArrowRight,{size:12,className:"opacity-70"})})]}),g==="pdf"&&jsxs("div",{className:"absolute left-full top-0 ml-1.5 w-60 rounded-2xl bg-white/95 dark:bg-[#18181b]/95 backdrop-blur-md shadow-2xl border border-neutral-200/90 dark:border-neutral-800 p-2 text-xs space-y-2 animate-in fade-in-0 zoom-in-95 duration-100",style:{top:x.y+200>window.innerHeight?"-60px":"0px"},children:[jsxs("div",{children:[jsx("span",{className:"text-[10px] font-semibold text-neutral-400 uppercase tracking-wider block mb-1",children:"Orientation"}),jsxs("div",{className:"grid grid-cols-2 gap-1 bg-neutral-100 dark:bg-neutral-900/60 p-1 rounded-2xl border border-neutral-200/70 dark:border-neutral-800",children:[jsx("button",{type:"button",onClick:()=>z("portrait"),className:`px-1.5 py-1 rounded-2xl text-[11px] font-medium transition-all ${E==="portrait"?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Portrait"}),jsx("button",{type:"button",onClick:()=>z("landscape"),className:`px-1.5 py-1 rounded-2xl text-[11px] font-medium transition-all ${E==="landscape"?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Landscape"})]})]}),jsxs("div",{children:[jsx("span",{className:"text-[10px] font-semibold text-neutral-400 uppercase tracking-wider block mb-1",children:"Appearance"}),jsxs("div",{className:"grid grid-cols-3 gap-1 bg-neutral-100 dark:bg-neutral-900/60 p-1 rounded-2xl border border-neutral-200/70 dark:border-neutral-800",children:[jsx("button",{type:"button",onClick:()=>P("original"),className:`px-1 py-1 rounded-2xl text-[10px] font-medium transition-all ${D==="original"?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Original"}),jsx("button",{type:"button",onClick:()=>P("light"),className:`px-1 py-1 rounded-2xl text-[10px] font-medium transition-all ${D==="light"?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Light"}),jsx("button",{type:"button",onClick:()=>P("dark"),className:`px-1 py-1 rounded-2xl text-[10px] font-medium transition-all ${D==="dark"?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Dark"})]})]}),jsxs("div",{className:"flex items-center justify-between text-[10px] text-neutral-400 px-1",children:[jsx("span",{children:"Margins"}),jsx("span",{className:"font-mono",children:"24 pt"})]}),jsx("div",{className:"h-[1px] bg-neutral-200/80 dark:bg-neutral-800"}),jsxs("button",{type:"button",disabled:_,onClick:ce,className:"w-full flex items-center justify-between px-2 py-1.5 rounded-2xl bg-primary text-white hover:bg-primary/90 transition-colors cursor-pointer font-medium",children:[jsxs("div",{className:"flex items-center gap-1.5",children:[jsx(IconDownload,{size:13}),jsx("span",{children:_?"Generating\u2026":"Download PDF"})]}),jsx("span",{className:"text-[10px] opacity-75 capitalize",children:E})]})]}),jsx("div",{className:"h-[1px] bg-neutral-200/80 dark:bg-neutral-800 my-1"})]}),jsxs("button",{type:"button",onClick:()=>{o(),A("Saved to storage \u2713");},className:"w-full flex items-center justify-between px-2.5 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2 text-neutral-700 dark:text-neutral-200 group-hover:text-primary",children:[jsx(IconDeviceFloppy,{size:14,className:"text-primary"}),jsx("span",{children:"Save Board"})]}),jsx("kbd",{className:"text-[10px] font-mono text-neutral-400 bg-neutral-100 dark:bg-neutral-800/80 px-1.5 py-0.5 rounded-2xl border border-neutral-200 dark:border-neutral-700",children:"Ctrl+S"})]}),jsx("div",{className:"h-[1px] bg-neutral-200/80 dark:bg-neutral-800 my-1"}),jsxs("div",{className:"relative",onMouseEnter:()=>w("image"),children:[jsxs("button",{type:"button",className:"w-full flex items-center justify-between px-2.5 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2 text-neutral-700 dark:text-neutral-200 group-hover:text-primary",children:[jsx(IconPhoto,{size:14,className:"text-purple-500"}),jsx("span",{children:"Export Image"})]}),jsx(IconArrowRight,{size:12,className:"text-neutral-400"})]}),g==="image"&&jsxs("div",{className:"absolute left-full top-0 ml-1.5 w-60 rounded-2xl bg-white/95 dark:bg-[#18181b]/95 backdrop-blur-md shadow-2xl border border-neutral-200/90 dark:border-neutral-800 p-2 text-xs space-y-2 animate-in fade-in-0 zoom-in-95 duration-100",style:{top:x.y+260>window.innerHeight?"-120px":"0px"},children:[jsxs("div",{children:[jsx("span",{className:"text-[10px] font-semibold text-neutral-400 uppercase tracking-wider block mb-1",children:"Background"}),jsxs("div",{className:"grid grid-cols-3 gap-1 bg-neutral-100 dark:bg-neutral-900/60 p-1 rounded-2xl border border-neutral-200/70 dark:border-neutral-800",children:[jsx("button",{type:"button",onClick:()=>b("dark"),className:`px-1.5 py-1 rounded-2xl text-[11px] font-medium transition-all ${I==="dark"?"bg-[#181818] text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Dark"}),jsx("button",{type:"button",onClick:()=>b("light"),className:`px-1.5 py-1 rounded-2xl text-[11px] font-medium transition-all ${I==="light"?"bg-white text-neutral-900 shadow-xs border border-neutral-200":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"White"}),jsx("button",{type:"button",onClick:()=>b("transparent"),className:`px-1.5 py-1 rounded-2xl text-[11px] font-medium transition-all ${I==="transparent"?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Clear"})]})]}),jsxs("div",{children:[jsx("span",{className:"text-[10px] font-semibold text-neutral-400 uppercase tracking-wider block mb-1",children:"Scale"}),jsx("div",{className:"grid grid-cols-3 gap-1 bg-neutral-100 dark:bg-neutral-900/60 p-1 rounded-2xl border border-neutral-200/70 dark:border-neutral-800",children:[1,2,3].map(ke=>jsxs("button",{type:"button",onClick:()=>v(ke),className:`px-1.5 py-1 rounded-2xl text-[11px] font-medium transition-all ${f===ke?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:[ke,"x"]},ke))})]}),jsx("div",{className:"h-[1px] bg-neutral-200/80 dark:bg-neutral-800"}),jsxs("div",{className:"space-y-1",children:[jsxs("button",{type:"button",onClick:U,className:"w-full flex items-center justify-between px-2 py-1.5 rounded-2xl bg-neutral-100 dark:bg-neutral-800/80 hover:bg-primary hover:text-white dark:hover:bg-primary dark:hover:text-white transition-colors cursor-pointer",children:[jsxs("div",{className:"flex items-center gap-1.5",children:[jsx(IconDownload,{size:13}),jsx("span",{children:"Download PNG"})]}),jsxs("span",{className:"text-[10px] opacity-75",children:[f,"x"]})]}),jsxs("button",{type:"button",onClick:G,className:"w-full flex items-center gap-1.5 px-2 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer text-neutral-700 dark:text-neutral-300",children:[jsx(IconCopy,{size:13}),jsx("span",{children:"Copy PNG to Clipboard"})]}),jsxs("button",{type:"button",onClick:Ne,className:"w-full flex items-center gap-1.5 px-2 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer text-neutral-700 dark:text-neutral-300",children:[jsx(IconCode,{size:13}),jsx("span",{children:"Download SVG Vector"})]})]})]})]}),jsxs("div",{className:"relative",onMouseEnter:()=>w("json"),children:[jsxs("button",{type:"button",className:"w-full flex items-center justify-between px-2.5 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2 text-neutral-700 dark:text-neutral-200 group-hover:text-primary",children:[jsx(IconCode,{size:14,className:"text-emerald-500"}),jsx("span",{children:"Current JSON"})]}),jsx(IconArrowRight,{size:12,className:"text-neutral-400"})]}),g==="json"&&jsxs("div",{className:"absolute left-full top-0 ml-1.5 w-48 rounded-xl bg-white/95 dark:bg-[#18181b]/95 backdrop-blur-md shadow-2xl border border-neutral-200/90 dark:border-neutral-800 p-1.5 text-xs space-y-1 animate-in fade-in-0 zoom-in-95 duration-100",children:[jsxs("button",{type:"button",onClick:ne,className:"w-full flex items-center gap-2 px-2 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer text-neutral-700 dark:text-neutral-300",children:[jsx(IconDownload,{size:13}),jsx("span",{children:"Download .json file"})]}),jsxs("button",{type:"button",onClick:le,className:"w-full flex items-center gap-2 px-2 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer text-neutral-700 dark:text-neutral-300",children:[jsx(IconCopy,{size:13}),jsx("span",{children:"Copy JSON to Clipboard"})]})]})]}),jsxs("div",{className:"relative",onMouseEnter:()=>w("grid"),children:[jsxs("button",{type:"button",className:"w-full flex items-center justify-between px-2.5 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2 text-neutral-700 dark:text-neutral-200 group-hover:text-primary",children:[jsx(IconGridPattern,{size:14,className:"text-blue-500"}),jsx("span",{children:"Grid Pattern"})]}),jsx(IconArrowRight,{size:12,className:"text-neutral-400"})]}),g==="grid"&&jsx("div",{className:"absolute left-full top-0 ml-1.5 w-44 rounded-xl bg-white/95 dark:bg-[#18181b]/95 backdrop-blur-md shadow-2xl border border-neutral-200/90 dark:border-neutral-800 p-1.5 text-xs space-y-0.5 animate-in fade-in-0 zoom-in-95 duration-100",children:[{id:"grid",label:"Mesh Grid (Default)"},{id:"dots",label:"Dots Grid"},{id:"cross",label:"Crosshairs"},{id:"none",label:"Clean Canvas"}].map(ke=>jsxs("button",{type:"button",onClick:()=>{h(ke.id),A(`Grid: ${ke.label}`);},className:`w-full flex items-center justify-between px-2 py-1.5 rounded-2xl transition-colors cursor-pointer ${d===ke.id?"bg-primary/10 text-primary font-semibold":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300"}`,children:[jsx("span",{children:ke.label}),d===ke.id&&jsx(IconCheck,{size:13,stroke:2.5})]},ke.id))})]}),jsx("div",{className:"h-[1px] bg-neutral-200/80 dark:bg-neutral-800 my-1"}),jsxs("button",{type:"button",onClick:()=>{s(),a(false);},className:"w-full flex items-center gap-2 px-2.5 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer text-neutral-700 dark:text-neutral-300",children:[jsx(IconFocusCentered,{size:14}),jsx("span",{children:"Reset Zoom (100%)"})]}),jsxs("button",{type:"button",onClick:()=>{a(false),c();},className:"w-full flex items-center gap-2 px-2.5 py-1.5 rounded-2xl hover:bg-red-50 dark:hover:bg-red-950/40 text-red-600 dark:text-red-400 transition-colors cursor-pointer",children:[jsx(IconTrash,{size:14}),jsx("span",{children:"Clear Whiteboard..."})]})]})}):null}function kn({isOpen:e,onClose:t,elements:r,selectedIds:o=[],onImportElements:c,boardName:d,canvasBackground:h="#ffffff",gridStyle:s="grid",uiConfig:n}){let p=n?.showExportPdf??true,i=n?.showExportPng??true,l=n?.showExportSvg??true,u=i||l,a=n?.showExportJson??true,x=n?.showImportJson??true,m=a||x,g=p?"pdf":u?"image":"json",[w,_]=useState(g),[S,E]=useState("portrait"),[z,D]=useState("original"),[P,I]=useState(false),[b,f]=useState(null),[v,C]=useState(2),[M,R]=useState(h),[J,oe]=useState("none"),[A,U]=useState("all"),[G,Ne]=useState(false),ne=useRef(null),le=r.filter(xe=>xe.type==="frame"),[ce,ke]=useState(false);if(e!==ce&&(ke(e),e))if(_(g),R(h),oe(s),f(null),o.length>0){let xe=le.find(O=>o.includes(O.id));U(xe?`frame:${xe.id}`:"selection");}else U("all");if(!e)return null;let Ie=()=>{if(A==="selection"&&o.length>0)return {targets:r.filter(xe=>o.includes(xe.id)),isSelection:true};if(A.startsWith("frame:")){let xe=A.replace("frame:",""),O=le.find(Z=>Z.id===xe);if(O)return {targets:[O,...Fr(O,r)],isSelection:false}}return {targets:r,isSelection:false}},we=async()=>{if(!(P||r.length===0))try{I(!0);let{targets:xe,isSelection:O}=Ie();if(xe.length===0)return;await _o(xe,{orientation:S,appearance:z,margin:24,boardName:d,canvasBackground:h,isDark:typeof document<"u"&&document.documentElement.classList.contains("dark"),isSelection:O,onProgress:(Z,Se)=>{f({current:Z,total:Se});}}),t();}catch(xe){console.error("Failed to export PDF:",xe);}finally{I(false),f(null);}},Ge=async()=>{try{if(Ne(!0),A.startsWith("frame:")){let Se=A.replace("frame:",""),K=le.find(de=>de.id===Se);if(K){let de=await vo(K,r,{scale:v,backgroundColor:M}),re=(K.frameLabel||"frame").toLowerCase().replace(/\s+/g,"-"),T=`${d.toLowerCase().replace(/\s+/g,"-")||"sketch"}-${re}.png`;vr(de,T,"image/png"),t();return}}let{targets:xe}=Ie(),O=await no(xe,{scale:v,backgroundColor:M,gridStyle:J}),Z=`${d.toLowerCase().replace(/\s+/g,"-")||"sketch"}.png`;vr(O,Z,"image/png"),t();}catch(xe){console.error("Failed to export PNG:",xe);}finally{Ne(false);}},Ue=()=>{try{let{targets:xe}=Ie(),O=wo(xe,{backgroundColor:M,gridStyle:J}),Z=`${d.toLowerCase().replace(/\s+/g,"-")||"sketch"}.svg`;vr(O,Z,"image/svg+xml"),t();}catch(xe){console.error("Failed to export SVG:",xe);}},ee=()=>{let xe=JSON.stringify(r,null,2),O=`${d.toLowerCase().replace(/\s+/g,"-")||"sketch"}.json`;vr(xe,O,"application/json"),t();},Pe=xe=>{let O=xe.target.files?.[0];if(!O)return;let Z=new FileReader;Z.onload=Se=>{try{let K=JSON.parse(Se.target?.result);Array.isArray(K)?(c(K),t()):alert("Invalid file format. Expected an array of Sketch elements.");}catch{alert("Failed to parse JSON file.");}},Z.readAsText(O);};return jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-xs animate-in fade-in duration-150",children:jsxs("div",{className:"w-full max-w-md bg-white dark:bg-neutral-900 rounded-[22px] shadow-2xl border-2 border-neutral-200/90 dark:border-neutral-800 overflow-hidden",children:[jsxs("div",{className:"flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-800",children:[jsxs("h2",{className:"text-base font-bold text-neutral-900 dark:text-neutral-100 flex items-center gap-2",children:[jsx(IconDownload,{size:18,className:"text-primary"}),"Export & Save"]}),jsx("button",{type:"button",onClick:t,className:"p-1 rounded-[8px] text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer",children:jsx(IconX,{size:18})})]}),(p||u||m)&&jsxs("div",{className:"flex border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-950/40 p-1.5 gap-1.5",children:[p&&jsxs("button",{type:"button",onClick:()=>_("pdf"),className:`flex-1 flex items-center justify-center gap-1.5 py-2 rounded-[12px] text-xs font-semibold transition-colors cursor-pointer ${w==="pdf"?"bg-white dark:bg-neutral-800 text-primary shadow-xs border border-neutral-200 dark:border-neutral-700":"text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"}`,children:[jsx(IconFileTypePdf,{size:16}),"PDF (A4)"]}),u&&jsxs("button",{type:"button",onClick:()=>_("image"),className:`flex-1 flex items-center justify-center gap-1.5 py-2 rounded-[12px] text-xs font-semibold transition-colors cursor-pointer ${w==="image"?"bg-white dark:bg-neutral-800 text-primary shadow-xs border border-neutral-200 dark:border-neutral-700":"text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"}`,children:[jsx(IconFileTypePng,{size:16}),"Image ",i&&l?"(PNG/SVG)":i?"(PNG)":"(SVG)"]}),m&&jsxs("button",{type:"button",onClick:()=>_("json"),className:`flex-1 flex items-center justify-center gap-1.5 py-2 rounded-[12px] text-xs font-semibold transition-colors cursor-pointer ${w==="json"?"bg-white dark:bg-neutral-800 text-primary shadow-xs border border-neutral-200 dark:border-neutral-700":"text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"}`,children:[jsx(IconFileCode,{size:16}),"JSON"]})]}),jsxs("div",{className:"p-5 space-y-4",children:[w!=="json"&&jsxs("div",{children:[jsxs("label",{className:"text-xs font-semibold text-neutral-600 dark:text-neutral-400 block mb-1.5 flex items-center justify-between",children:[jsx("span",{children:"Export Scope"}),le.length>0&&jsxs("span",{className:"text-[10px] text-primary font-medium flex items-center gap-1",children:[jsx(IconLayout,{size:12}),le.length," frame",le.length>1?"s":""," detected"]})]}),jsxs("div",{className:"relative",children:[jsxs("select",{value:A,onChange:xe=>U(xe.target.value),className:"w-full py-2 px-3 rounded-[10px] border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800 text-xs font-medium text-neutral-800 dark:text-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/40 appearance-none cursor-pointer",children:[jsx("option",{value:"all",children:"Entire Canvas (All Elements)"}),o.length>0&&jsxs("option",{value:"selection",children:["Selected Elements (",o.length," item",o.length>1?"s":"",")"]}),le.length>0&&jsx("optgroup",{label:"Frames / Artboards",children:le.map((xe,O)=>jsxs("option",{value:`frame:${xe.id}`,children:["\u{1F5BC}\uFE0F ",xe.frameLabel||`Frame ${O+1}`," (",Math.round(xe.width),"\xD7",Math.round(xe.height),")"]},xe.id))})]}),jsx("div",{className:"absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-neutral-400 text-xs",children:"\u25BC"})]})]}),w==="pdf"?jsxs(Fragment,{children:[jsxs("div",{className:"flex items-center justify-between px-3 py-2 rounded-[10px] bg-neutral-100 dark:bg-neutral-800/60 border border-neutral-200/80 dark:border-neutral-800 text-xs",children:[jsx("span",{className:"text-neutral-600 dark:text-neutral-400 font-medium",children:"Paper Size"}),jsxs("span",{className:"font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-1.5",children:[jsx("span",{className:"px-1.5 py-0.5 rounded bg-primary/10 text-primary text-[10px] font-bold",children:"A4"}),jsx("span",{children:"210 \xD7 297 mm"})]})]}),jsxs("div",{children:[jsx("label",{className:"text-xs font-semibold text-neutral-600 dark:text-neutral-400 block mb-1.5",children:"Orientation"}),jsxs("div",{className:"grid grid-cols-2 gap-2 text-xs",children:[jsxs("button",{type:"button",onClick:()=>E("portrait"),className:`py-2 px-3 rounded-[10px] border font-medium flex items-center justify-center gap-2 transition-colors cursor-pointer ${S==="portrait"?"bg-primary/10 border-primary text-primary font-bold shadow-2xs":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:[jsx("svg",{width:"14",height:"18",viewBox:"0 0 14 18",fill:"none",className:"shrink-0",children:jsx("rect",{x:"1",y:"1",width:"12",height:"16",rx:"2",stroke:"currentColor",strokeWidth:"1.5"})}),jsx("span",{children:"Portrait"})]}),jsxs("button",{type:"button",onClick:()=>E("landscape"),className:`py-2 px-3 rounded-[10px] border font-medium flex items-center justify-center gap-2 transition-colors cursor-pointer ${S==="landscape"?"bg-primary/10 border-primary text-primary font-bold shadow-2xs":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:[jsx("svg",{width:"18",height:"14",viewBox:"0 0 18 14",fill:"none",className:"shrink-0",children:jsx("rect",{x:"1",y:"1",width:"16",height:"12",rx:"2",stroke:"currentColor",strokeWidth:"1.5"})}),jsx("span",{children:"Landscape"})]})]})]}),jsxs("div",{children:[jsx("label",{className:"text-xs font-semibold text-neutral-600 dark:text-neutral-400 block mb-1.5",children:"Appearance"}),jsxs("div",{className:"grid grid-cols-3 gap-2 text-xs",children:[jsxs("button",{type:"button",onClick:()=>D("original"),className:`py-2 px-2 rounded-[10px] border font-medium flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${z==="original"?"bg-primary/10 border-primary text-primary font-bold shadow-2xs":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:[jsx("span",{className:"w-2.5 h-2.5 rounded-full border border-black/10 dark:border-white/10 shrink-0",style:{backgroundColor:h}}),jsx("span",{children:"Original"})]}),jsxs("button",{type:"button",onClick:()=>D("light"),className:`py-2 px-2 rounded-[10px] border font-medium flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${z==="light"?"bg-primary/10 border-primary text-primary font-bold shadow-2xs":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:[jsx(IconSun,{size:13,className:"text-amber-500"}),jsx("span",{children:"Light"})]}),jsxs("button",{type:"button",onClick:()=>D("dark"),className:`py-2 px-2 rounded-[10px] border font-medium flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${z==="dark"?"bg-primary/10 border-primary text-primary font-bold shadow-2xs":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:[jsx(IconMoon,{size:13,className:"text-primary"}),jsx("span",{children:"Dark"})]})]})]}),jsxs("div",{className:"flex items-center justify-between text-[11px] text-neutral-500 dark:text-neutral-400 px-1 pt-1",children:[jsx("span",{children:"Page Margins"}),jsx("span",{className:"font-mono",children:"24 pt"})]}),jsx("div",{className:"pt-2",children:jsxs("button",{type:"button",onClick:we,disabled:P||r.length===0,className:"w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-[12px] bg-primary hover:bg-primary/90 text-primary-foreground text-xs font-semibold shadow-md shadow-primary/25 disabled:opacity-50 transition-colors cursor-pointer",children:[jsx(IconFileTypePdf,{size:16}),jsx("span",{children:P?b?`Generating PDF (Page ${b.current} of ${b.total})\u2026`:"Preparing PDF\u2026":"Download PDF"})]})})]}):w==="image"?jsxs(Fragment,{children:[jsxs("div",{children:[jsxs("div",{className:"flex items-center justify-between mb-1.5",children:[jsx("label",{className:"text-xs font-semibold text-neutral-600 dark:text-neutral-400",children:"Background Color"}),M!=="transparent"&&jsx("span",{className:"text-[10px] font-mono text-neutral-400",children:M})]}),jsx("div",{className:"grid grid-cols-4 gap-2 text-xs",children:[{label:"Canvas",val:h},{label:"White",val:"#ffffff"},{label:"Dark",val:"#121212"},{label:"Transparent",val:"transparent"}].map(xe=>{let O=M===xe.val;return jsxs("button",{type:"button",onClick:()=>R(xe.val),className:`py-2 px-1 rounded-[10px] border font-medium flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${O?"bg-primary/10 border-primary text-primary font-bold shadow-2xs":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:[xe.val!=="transparent"&&jsx("span",{className:"w-3 h-3 rounded-full border border-black/10 dark:border-white/10 shrink-0",style:{backgroundColor:xe.val}}),jsx("span",{className:"truncate",children:xe.label})]},xe.label)})})]}),jsxs("div",{children:[jsx("label",{className:"text-xs font-semibold text-neutral-600 dark:text-neutral-400 block mb-1.5",children:"Grid Pattern"}),jsx("div",{className:"grid grid-cols-4 gap-2 text-xs",children:[{label:"Mesh Grid",val:"grid"},{label:"Dots",val:"dots"},{label:"Cross",val:"cross"},{label:"None",val:"none"}].map(xe=>jsx("button",{type:"button",onClick:()=>oe(xe.val),className:`py-2 rounded-[10px] border font-medium transition-colors cursor-pointer ${J===xe.val?"bg-primary/10 border-primary text-primary font-bold":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:xe.label},xe.val))})]}),jsxs("div",{children:[jsx("label",{className:"text-xs font-semibold text-neutral-600 dark:text-neutral-400 block mb-1.5",children:"Scale / Resolution"}),jsx("div",{className:"grid grid-cols-3 gap-2 text-xs",children:[{label:"1x (Standard)",val:1},{label:"2x (HD Crisp)",val:2},{label:"3x (Ultra HD)",val:3}].map(xe=>jsx("button",{type:"button",onClick:()=>C(xe.val),className:`py-2 rounded-[10px] border font-medium transition-colors cursor-pointer ${v===xe.val?"bg-primary/10 border-primary text-primary font-bold":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:xe.label},xe.val))})]}),jsxs("div",{className:`grid ${i&&l?"grid-cols-2":"grid-cols-1"} gap-3 pt-2`,children:[i&&jsxs("button",{type:"button",onClick:Ge,disabled:G||r.length===0,className:"flex items-center justify-center gap-2 py-2.5 px-4 rounded-[12px] bg-primary hover:bg-primary/90 text-primary-foreground text-xs font-semibold shadow-md shadow-primary/25 disabled:opacity-50 transition-colors cursor-pointer",children:[jsx(IconFileTypePng,{size:16}),G?"Rendering...":"Export PNG"]}),l&&jsxs("button",{type:"button",onClick:Ue,disabled:r.length===0,className:"flex items-center justify-center gap-2 py-2.5 px-4 rounded-[12px] border-2 border-neutral-300 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-800 dark:text-neutral-200 text-xs font-semibold disabled:opacity-50 transition-colors cursor-pointer",children:[jsx(IconFileTypeSvg,{size:16}),"Export SVG"]})]})]}):jsxs("div",{className:"space-y-4",children:[jsx("p",{className:"text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed",children:"Save your complete workspace as a lightweight JSON file so you can reopen, share, or edit it at any time."}),a&&jsxs("button",{type:"button",onClick:ee,disabled:r.length===0,className:"w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-[12px] bg-primary hover:bg-primary/90 text-primary-foreground text-xs font-semibold shadow-md shadow-primary/25 disabled:opacity-50 transition-colors cursor-pointer",children:[jsx(IconDownload,{size:16}),"Download Project (.json)"]}),a&&x&&jsxs("div",{className:"relative flex items-center justify-center",children:[jsx("div",{className:"w-full border-t border-neutral-200 dark:border-neutral-800"}),jsx("span",{className:"absolute px-2 bg-white dark:bg-neutral-900 text-[11px] text-neutral-400",children:"or"})]}),x&&jsxs(Fragment,{children:[jsx("input",{ref:ne,type:"file",accept:".json",onChange:Pe,className:"hidden"}),jsxs("button",{type:"button",onClick:()=>ne.current?.click(),className:"w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-[12px] border-2 border-neutral-300 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-800 dark:text-neutral-200 text-xs font-semibold transition-colors cursor-pointer",children:[jsx(IconUpload,{size:16}),"Open Existing Project (.json)"]})]})]})]})]})})}function qr({value:e,side:t,className:r="w-6 h-4",strokeWidth:o=1.6}){return jsx("svg",{viewBox:"0 0 28 20",className:r,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t==="start"?jsxs(Fragment,{children:[e==="none"&&jsxs(Fragment,{children:[jsx("line",{x1:"10",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"4",y1:"7",x2:"8",y2:"13",stroke:"currentColor",strokeWidth:1.4,strokeLinecap:"round"}),jsx("line",{x1:"8",y1:"7",x2:"4",y2:"13",stroke:"currentColor",strokeWidth:1.4,strokeLinecap:"round"})]}),e==="arrow"&&jsxs(Fragment,{children:[jsx("line",{x1:"6",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 12 5.5 L 6 10 L 12 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"})]}),e==="triangle"&&jsxs(Fragment,{children:[jsx("line",{x1:"12",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"12,5 4.5,10 12,15",fill:"currentColor"})]}),e==="barbed"&&jsxs(Fragment,{children:[jsx("line",{x1:"10",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"13,5 4.5,10 13,15 10,10",fill:"currentColor"})]}),e==="dot"&&jsxs(Fragment,{children:[jsx("line",{x1:"10",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("circle",{cx:"7",cy:"10",r:"3.5",fill:"currentColor"})]}),e==="circle"&&jsxs(Fragment,{children:[jsx("line",{x1:"11",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("circle",{cx:"7",cy:"10",r:"3.5",stroke:"currentColor",strokeWidth:o,fill:"none"})]}),e==="diamond"&&jsxs(Fragment,{children:[jsx("line",{x1:"14",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"5,10 9.5,5.5 14,10 9.5,14.5",fill:"currentColor"})]}),e==="diamond_outline"&&jsxs(Fragment,{children:[jsx("line",{x1:"14",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"5,10 9.5,5.5 14,10 9.5,14.5",stroke:"currentColor",strokeWidth:o,fill:"none",strokeLinejoin:"round"})]}),e==="bar"&&jsxs(Fragment,{children:[jsx("line",{x1:"6",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"6",y1:"5",x2:"6",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_one"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"8",y1:"5",x2:"8",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_many"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 12 5.5 L 4 10 L 12 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"})]}),e==="crowfoot_one_many"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 11 5.5 L 4 10 L 11 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"}),jsx("line",{x1:"15",y1:"5",x2:"15",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_strictly_one"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"7",y1:"5",x2:"7",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"}),jsx("line",{x1:"12",y1:"5",x2:"12",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_zero_one"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"6",y1:"5",x2:"6",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"}),jsx("circle",{cx:"13",cy:"10",r:"3",stroke:"currentColor",strokeWidth:o,fill:"none"})]}),e==="crowfoot_zero_many"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 11 5.5 L 4 10 L 11 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"}),jsx("circle",{cx:"16",cy:"10",r:"3",stroke:"currentColor",strokeWidth:o,fill:"none"})]})]}):jsxs(Fragment,{children:[e==="none"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"18",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"20",y1:"7",x2:"24",y2:"13",stroke:"currentColor",strokeWidth:1.4,strokeLinecap:"round"}),jsx("line",{x1:"24",y1:"7",x2:"20",y2:"13",stroke:"currentColor",strokeWidth:1.4,strokeLinecap:"round"})]}),e==="arrow"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"22",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 16 5.5 L 22 10 L 16 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"})]}),e==="triangle"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"16",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"16,5 23.5,10 16,15",fill:"currentColor"})]}),e==="barbed"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"18",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"15,5 23.5,10 15,15 18,10",fill:"currentColor"})]}),e==="dot"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"18",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("circle",{cx:"21",cy:"10",r:"3.5",fill:"currentColor"})]}),e==="circle"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"17",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("circle",{cx:"21",cy:"10",r:"3.5",stroke:"currentColor",strokeWidth:o,fill:"none"})]}),e==="diamond"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"14",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"23,10 18.5,5.5 14,10 18.5,14.5",fill:"currentColor"})]}),e==="diamond_outline"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"14",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"23,10 18.5,5.5 14,10 18.5,14.5",stroke:"currentColor",strokeWidth:o,fill:"none",strokeLinejoin:"round"})]}),e==="bar"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"22",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"22",y1:"5",x2:"22",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_one"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"20",y1:"5",x2:"20",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_many"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 16 5.5 L 24 10 L 16 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"})]}),e==="crowfoot_one_many"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 17 5.5 L 24 10 L 17 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"}),jsx("line",{x1:"13",y1:"5",x2:"13",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_strictly_one"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"21",y1:"5",x2:"21",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"}),jsx("line",{x1:"16",y1:"5",x2:"16",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_zero_one"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"22",y1:"5",x2:"22",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"}),jsx("circle",{cx:"15",cy:"10",r:"3",stroke:"currentColor",strokeWidth:o,fill:"none"})]}),e==="crowfoot_zero_many"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 17 5.5 L 24 10 L 17 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"}),jsx("circle",{cx:"12",cy:"10",r:"3",stroke:"currentColor",strokeWidth:o,fill:"none"})]})]})})}function Ko({side:e,currentValue:t,onChange:r,onClose:o,className:c="",style:d}){let[h,s]=useState(false);useEffect(()=>{let u=a=>{let x=document.activeElement;if(x&&(x.tagName==="INPUT"||x.tagName==="TEXTAREA"))return;if(a.key==="Escape"){o();return}let m=a.key.toLowerCase(),g=bo.find(w=>w.shortcut===m);g&&(a.preventDefault(),r(g.value),o());};return window.addEventListener("keydown",u),()=>window.removeEventListener("keydown",u)},[r,o]);let n=bo.filter(u=>u.category==="standard"),p=bo.filter(u=>u.category==="more"),i=bo.filter(u=>u.category==="cardinality"),l=u=>{let a=t===u.value;return jsxs("button",{type:"button",onClick:()=>{r(u.value),o();},title:`${u.label}${u.shortcut?` (${u.shortcut})`:""}`,className:`relative w-8 h-8 rounded-[8px] flex items-center justify-center transition-all cursor-pointer ${a?"bg-primary/15 border border-primary text-primary shadow-2xs font-semibold":"border border-neutral-200/70 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"}`,children:[jsx(qr,{value:u.value,side:e,className:"w-5 h-3.5"}),u.shortcut&&jsx("span",{className:"absolute right-1 bottom-0.5 text-[8px] font-mono leading-none text-neutral-400 dark:text-neutral-500 pointer-events-none",children:u.shortcut})]},u.value)};return jsxs("div",{style:d,className:`z-50 bg-white/95 dark:bg-[#181818]/95 backdrop-blur-md rounded-[14px] shadow-lg border border-neutral-200/90 dark:border-neutral-800 p-2.5 space-y-2.5 select-none animate-in fade-in zoom-in-95 duration-100 ${c}`,children:[jsx("div",{className:"grid grid-cols-4 gap-1.5",children:n.map(l)}),jsxs("div",{className:"pt-0.5",children:[jsxs("button",{type:"button",onClick:()=>s(!h),className:"flex items-center justify-between w-full py-1 px-1 text-[11px] font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200 transition-colors",children:[jsx("span",{children:"More options"}),h?jsx(IconChevronUp,{size:14}):jsx(IconChevronDown,{size:14})]}),h&&jsxs("div",{className:"pt-1.5 space-y-2.5 animate-in fade-in duration-100",children:[jsx("div",{className:"grid grid-cols-4 gap-1.5",children:p.map(l)}),jsxs("div",{children:[jsx("span",{className:"text-[10px] font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider block mb-1 px-1",children:"Cardinality"}),jsx("div",{className:"grid grid-cols-4 gap-1.5",children:i.map(l)})]})]})]})]})}function wn({selectedElements:e,updateSelectedElements:t,deleteSelectedElements:r,duplicateSelectedElements:o,groupSelectedElements:c,ungroupSelectedElements:d,alignSelectedElements:h,distributeSelectedElements:s,copySelectedImage:n,bringToFront:p,sendToBack:i,camera:l,worldToScreen:u,onEditText:a,onToggleSpotlight:x}){let{resolvedTheme:m}=nr(),[g,w]=useState(false);useEffect(()=>{w(true);},[]);let _=g&&m==="dark",[S,E]=useState("none"),z=useRef(null),D=useRef(null),P=useRef(null),I=useRef(null),b=useRef(null),f=e[0],v=e.length===1,C=v&&!!(f&&f.type==="frame"),M=v&&!!(f&&f.type==="table"),R=v&&!!(f&&(f.type==="arrow"||f.type==="line")),J=v&&!!(f&&["text","sticky","rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","frame","table"].includes(f.type)),oe=v&&!!(f&&(f.type==="text"||f.type==="sticky")),A=v&&!!(f&&f.type==="sticky"),U=v&&!!(f&&f.type==="text"),G=v&&!!(f&&f.type==="image"),Ne=v&&!!(f&&["rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","table","arrow","line","pen"].includes(f.type));if(useEffect(()=>{let $=fe=>{let be=fe.target;z.current&&z.current.contains(be)||D.current&&D.current.contains(be)||P.current&&P.current.contains(be)||I.current&&I.current.contains(be)||b.current&&b.current.contains(be)||E("none");},te=fe=>{if(!f||fe.target instanceof HTMLInputElement||fe.target instanceof HTMLTextAreaElement||fe.target.isContentEditable||fe.ctrlKey||fe.metaKey||fe.altKey||fe.shiftKey)return;if(fe.key==="Escape"){E("none");return}let be=Do.find(ue=>ue.shortcut===fe.key.toLowerCase());be&&(fe.preventDefault(),S==="textColor"?t({strokeColor:be.hex}):S==="color"&&t(A?{fillColor:be.hex,stickyColor:be.hex}:{strokeColor:be.hex}),E("none"));};return S!=="none"&&(document.addEventListener("mousedown",$),window.addEventListener("keydown",te)),()=>{document.removeEventListener("mousedown",$),window.removeEventListener("keydown",te);}},[S,f,A,t]),!f||e.length===0)return null;let ne=()=>{if(!f||f.type!=="table")return;let $=Math.max(1,f.rows||3),be=[...f.rowHeights&&f.rowHeights.length===$?[...f.rowHeights]:Array.from({length:$},()=>Math.abs(f.height)/$),36],ue=be.reduce((F,ve)=>F+ve,0);t({rows:$+1,rowHeights:be,height:f.height>=0?ue:-ue});},le=()=>{if(!f||f.type!=="table")return;let $=Math.max(1,f.rows||3);if($<=1)return;let fe=(f.rowHeights&&f.rowHeights.length===$?[...f.rowHeights]:Array.from({length:$},()=>Math.abs(f.height)/$)).slice(0,$-1),be=fe.reduce((ve,ae)=>ve+ae,0),ue={...f.cells||{}},F=$-1;Object.keys(ue).forEach(ve=>{ve.startsWith(`${F}_`)&&delete ue[ve];}),t({rows:$-1,rowHeights:fe,height:f.height>=0?be:-be,cells:ue});},ce=()=>{if(!f||f.type!=="table")return;let $=Math.max(1,f.cols||3),be=[...f.colWidths&&f.colWidths.length===$?[...f.colWidths]:Array.from({length:$},()=>Math.abs(f.width)/$),110],ue=be.reduce((F,ve)=>F+ve,0);t({cols:$+1,colWidths:be,width:f.width>=0?ue:-ue});},ke=()=>{if(!f||f.type!=="table")return;let $=Math.max(1,f.cols||3);if($<=1)return;let fe=(f.colWidths&&f.colWidths.length===$?[...f.colWidths]:Array.from({length:$},()=>Math.abs(f.width)/$)).slice(0,$-1),be=fe.reduce((ve,ae)=>ve+ae,0),ue={...f.cells||{}},F=$-1;Object.keys(ue).forEach(ve=>{ve.endsWith(`_${F}`)&&delete ue[ve];}),t({cols:$-1,colWidths:fe,width:f.width>=0?be:-be,cells:ue});},Ie=1/0,we=1/0,Ge=-1/0,Ue=-1/0;e.forEach($=>{let te=bt($);Ie=Math.min(Ie,te.x),we=Math.min(we,te.y),Ge=Math.max(Ge,te.x+te.width),Ue=Math.max(Ue,te.y+te.height);});let ee=u({x:Ie,y:we}),Pe=u({x:Ge,y:Ue}),xe=(ee.x+Pe.x)/2,O=ee.y,Z=Pe.y,Se=175,K=Pe.x-ee.x,de=ee.x+K*.4,re=xe-14,T=Math.min(de,re),L=T>=Se+16,q=O-70<64,k,pe,V;return L?(k=T,pe=q?Z+18:O-68,V="-translate-x-full"):(k=16,pe=O-70>=64?O-68:Z+18,V=""),jsx("div",{className:`fixed z-40 ${V} pointer-events-auto transition-all duration-75 select-none`,style:{left:`${k}px`,top:`${pe}px`},children:jsxs("div",{className:"fk-card relative flex items-center gap-1 p-1 bg-white/95 dark:bg-[#181818]/95 backdrop-blur-md rounded-[12px] border border-black/[0.04] dark:border-white/[0.05] shadow-[0_10px_30px_-4px_rgba(0,0,0,0.08)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.65)] text-neutral-700 dark:text-neutral-300 animate-in fade-in zoom-in-95 duration-100",children:[J&&a&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:()=>a(f),title:C?"Rename Frame (Double Click)":M?"Edit Table Cells (Double Click)":"Edit Text",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-primary transition-colors cursor-pointer",children:jsx(IconPencil,{size:15})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),C&&jsxs(Fragment,{children:[jsxs("div",{className:"relative",ref:S==="framePreset"?P:void 0,children:[jsxs("button",{type:"button",onClick:()=>E(S==="framePreset"?"none":"framePreset"),title:"Change Frame Preset / Aspect Ratio",className:"flex items-center gap-1 px-2 py-1 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-xs font-semibold text-neutral-700 dark:text-neutral-300 transition-colors",children:[jsx(IconAspectRatio,{size:14,className:"text-primary"}),jsxs("span",{className:"text-[10.5px]",children:[Math.round(Math.abs(f.width||0)),"\xD7",Math.round(Math.abs(f.height||0))]})]}),S==="framePreset"&&jsxs("div",{className:"absolute left-1/2 -translate-x-1/2 z-50 p-2 bg-white/95 dark:bg-[#181818]/95 backdrop-blur-md rounded-[14px] shadow-lg border border-neutral-200/90 dark:border-neutral-800 animate-in fade-in zoom-in-95 duration-100 w-44",style:{[q?"top":"bottom"]:"100%",margin:"6px 0"},children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1.5 px-1",children:"Frame Presets"}),jsx("div",{className:"space-y-1",children:[{label:"16:9 Slide",w:800,h:450},{label:"1920\xD71080 FHD",w:1920,h:1080},{label:"Mobile (390\xD7844)",w:390,h:844},{label:"16:10 Laptop",w:1440,h:900},{label:"4:3 Standard",w:1024,h:768},{label:"1:1 Square",w:800,h:800}].map($=>{let te=Math.round(Math.abs(f.width||0))===$.w&&Math.round(Math.abs(f.height||0))===$.h;return jsxs("button",{type:"button",onClick:()=>{t({width:$.w,height:$.h}),E("none");},className:`w-full flex items-center justify-between px-2 py-1.5 rounded-[7px] text-xs transition-colors ${te?"bg-primary text-primary-foreground font-semibold":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300"}`,children:[jsx("span",{children:$.label}),jsxs("span",{className:"text-[9.5px] opacity-70 font-mono font-normal",children:[$.w,"\xD7",$.h]})]},$.label)})})]})]}),jsx("button",{type:"button",onClick:()=>t({aspectRatioLocked:!f.aspectRatioLocked}),title:f.aspectRatioLocked?"Unlock Aspect Ratio":"Lock Aspect Ratio",className:`p-1.5 rounded-[8px] transition-colors ${f.aspectRatioLocked?"bg-primary/15 text-primary":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-500"}`,children:f.aspectRatioLocked?jsx(IconLock,{size:15}):jsx(IconLockOpen,{size:15})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),M&&jsxs(Fragment,{children:[jsxs("div",{className:"relative",ref:S==="tablePreset"?I:void 0,children:[jsxs("button",{type:"button",onClick:()=>E(S==="tablePreset"?"none":"tablePreset"),title:"Change Table Layout Preset / Style",className:"flex items-center gap-1 px-2 py-1 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-xs font-semibold text-neutral-700 dark:text-neutral-300 transition-colors",children:[jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-primary",children:[jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"2"}),jsx("line",{x1:"3",y1:"10",x2:"21",y2:"10"}),jsx("line",{x1:"10",y1:"4",x2:"10",y2:"20"})]}),jsxs("span",{className:"text-[10.5px]",children:[f.rows||3,"\xD7",f.cols||3]})]}),S==="tablePreset"&&jsxs("div",{className:"absolute left-1/2 -translate-x-1/2 z-50 p-2 bg-white/95 dark:bg-[#181818]/95 backdrop-blur-md rounded-[14px] shadow-lg border border-neutral-200/90 dark:border-neutral-800 animate-in fade-in zoom-in-95 duration-100 w-48",style:{[q?"top":"bottom"]:"100%",margin:"6px 0"},children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1.5 px-1",children:"Table Styles"}),jsx("div",{className:"space-y-1",children:[{id:"default",label:"Clean / Minimal",desc:"Subtle borders"},{id:"header-accent",label:"Feature Matrix",desc:"Highlighted header row"},{id:"swot",label:"SWOT Matrix",desc:"4 pastel quadrants"},{id:"kanban",label:"Kanban / Sprint",desc:"Column headers"},{id:"zebra",label:"Zebra Striped",desc:"Alternating rows"}].map($=>{let te=(f.tableStyle||"default")===$.id;return jsxs("button",{type:"button",onClick:()=>{t({tableStyle:$.id}),E("none");},className:`w-full flex flex-col text-left px-2 py-1.5 rounded-[7px] text-xs transition-colors ${te?"bg-primary text-primary-foreground font-semibold":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300"}`,children:[jsxs("div",{className:"flex items-center justify-between w-full",children:[jsx("span",{children:$.label}),te&&jsx("span",{className:"text-[10px]",children:"\u2713"})]}),jsx("span",{className:`text-[9.5px] ${te?"text-primary-foreground/80":"text-neutral-400 dark:text-neutral-500"}`,children:$.desc})]},$.id)})})]})]}),jsx("button",{type:"button",onClick:()=>t({hasHeaderRow:!f.hasHeaderRow}),title:f.hasHeaderRow?"Disable Header Row":"Enable Header Row",className:`px-1.5 py-1 rounded-[6px] text-[10.5px] font-medium transition-colors ${f.hasHeaderRow?"bg-primary/15 text-primary font-semibold":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-500"}`,children:"Header"}),jsxs("div",{className:"flex items-center gap-0.5 bg-neutral-100/80 dark:bg-neutral-800/80 rounded-[7px] p-0.5",children:[jsx("button",{type:"button",onClick:le,disabled:(f.rows||3)<=1,title:"Delete Row",className:"w-5 h-5 flex items-center justify-center rounded-[5px] hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300 disabled:opacity-30 disabled:pointer-events-none text-[10px] font-bold",children:"-R"}),jsx("button",{type:"button",onClick:ne,title:"Add Row Below",className:"w-5 h-5 flex items-center justify-center rounded-[5px] hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300 text-[10px] font-bold",children:"+R"})]}),jsxs("div",{className:"flex items-center gap-0.5 bg-neutral-100/80 dark:bg-neutral-800/80 rounded-[7px] p-0.5",children:[jsx("button",{type:"button",onClick:ke,disabled:(f.cols||3)<=1,title:"Delete Column",className:"w-5 h-5 flex items-center justify-center rounded-[5px] hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300 disabled:opacity-30 disabled:pointer-events-none text-[10px] font-bold",children:"-C"}),jsx("button",{type:"button",onClick:ce,title:"Add Column Right",className:"w-5 h-5 flex items-center justify-center rounded-[5px] hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300 text-[10px] font-bold",children:"+C"})]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),!U&&jsxs("div",{className:"relative",ref:S==="color"?z:void 0,children:[jsx("button",{type:"button",onClick:()=>E(S==="color"?"none":"color"),title:A?"Note Background Color":"Stroke Color",className:"flex items-center justify-center p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",children:jsx("span",{className:"w-3.5 h-3.5 rounded-[4px] border border-neutral-400/50 shadow-2xs",style:{backgroundColor:A?f.stickyColor||f.fillColor||"#fef08a":f.strokeColor&&f.strokeColor!=="transparent"?Et(f.strokeColor,_):f.fillColor&&f.fillColor!=="transparent"?Nr(f.fillColor,"solid",_):"#0b6eff"}})}),S==="color"&&jsxs("div",{className:`absolute left-1/2 -translate-x-1/2 z-50 p-2 bg-white/95 dark:bg-[#181818]/95 backdrop-blur-md rounded-[12px] shadow-lg border border-neutral-200/90 dark:border-neutral-800 animate-in fade-in zoom-in-95 duration-100 ${q?"top-full mt-2":"bottom-full mb-2"}`,style:{minWidth:"162px"},children:[jsx("div",{className:"text-[10px] font-semibold text-neutral-500 dark:text-neutral-400 mb-1.5 px-0.5 select-none",children:A?"Note Color":"Color"}),jsx("div",{className:"grid grid-cols-5 gap-1.5",children:Do.map($=>{let te=A?f.fillColor===$.hex||f.stickyColor===$.hex:f.strokeColor===$.hex;return jsx("button",{type:"button",onClick:()=>{t(A?{fillColor:$.hex,stickyColor:$.hex,strokeColor:void 0}:{strokeColor:$.hex}),E("none");},title:`${$.name}${$.shortcut?` (${$.shortcut})`:""}`,className:`relative w-6 h-6 rounded-[5px] border border-neutral-300/80 dark:border-neutral-700/80 transition-all hover:scale-110 active:scale-95 flex items-end justify-end p-0.5 ${te?"ring-2 ring-primary ring-offset-1 dark:ring-offset-[#181818]":""}`,style:{backgroundColor:Et($.hex,_)},children:$.shortcut&&jsx("span",{className:"text-[8px] font-mono leading-none opacity-40 text-neutral-900 dark:text-white pointer-events-none",children:$.shortcut})},$.name)})})]})]}),oe&&jsxs(Fragment,{children:[A&&jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"}),jsxs("div",{className:"relative",ref:S==="textColor"?z:void 0,children:[jsxs("button",{type:"button",onClick:()=>E(S==="textColor"?"none":"textColor"),title:"Text Color",className:"flex flex-col items-center justify-center w-7 h-7 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",children:[jsx("span",{className:"text-[12px] font-extrabold leading-none",children:"A"}),jsx("span",{className:"w-3.5 h-[2.5px] rounded-full mt-0.5",style:{backgroundColor:Et(f.strokeColor||"#713f12",_)}})]}),S==="textColor"&&jsxs("div",{className:`absolute left-1/2 -translate-x-1/2 z-50 p-2 bg-white/95 dark:bg-[#181818]/95 backdrop-blur-md rounded-[12px] shadow-lg border border-neutral-200/90 dark:border-neutral-800 animate-in fade-in zoom-in-95 duration-100 ${q?"top-full mt-2":"bottom-full mb-2"}`,style:{minWidth:"162px"},children:[jsx("div",{className:"text-[10px] font-semibold text-neutral-500 dark:text-neutral-400 mb-1.5 px-0.5 select-none",children:"Text Color"}),jsx("div",{className:"grid grid-cols-5 gap-1.5",children:Do.map($=>{let te=f.strokeColor===$.hex;return jsx("button",{type:"button",onClick:()=>{t({strokeColor:$.hex}),E("none");},title:`${$.name}${$.shortcut?` (${$.shortcut})`:""}`,className:`relative w-6 h-6 rounded-[5px] border border-neutral-300/80 dark:border-neutral-700/80 transition-all hover:scale-110 active:scale-95 flex items-end justify-end p-0.5 ${te?"ring-2 ring-primary ring-offset-1 dark:ring-offset-[#181818]":""}`,style:{backgroundColor:Et($.hex,_)},children:$.shortcut&&jsx("span",{className:"text-[8px] font-mono leading-none opacity-40 text-neutral-900 dark:text-white pointer-events-none",children:$.shortcut})},$.name)})})]})]})]}),R&&jsxs(Fragment,{children:[jsxs("div",{className:"flex items-center gap-0.5 bg-neutral-100/80 dark:bg-neutral-800/80 rounded-[7px] p-0.5",children:[jsx("button",{type:"button",onClick:()=>t({arrowType:"straight"}),title:"Straight Line / Arrow",className:`w-6 h-6 flex items-center justify-center rounded-[5px] transition-all cursor-pointer ${(f.arrowType||"straight")==="straight"?"bg-primary text-white shadow-xs font-semibold":"hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",children:jsx("line",{x1:"4",y1:"20",x2:"20",y2:"4"})})}),jsx("button",{type:"button",onClick:()=>t({arrowType:"curved"}),title:"Single Curved (1 Control Handle)",className:`w-6 h-6 flex items-center justify-center rounded-[5px] transition-all cursor-pointer ${f.arrowType==="curved"?"bg-primary text-white shadow-xs font-semibold":"hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",children:jsx("path",{d:"M4 20 Q 12 4 20 4"})})}),jsx("button",{type:"button",onClick:()=>t({arrowType:"elbow"}),title:"Double Curved / S-Curve (2 Control Handles)",className:`w-6 h-6 flex items-center justify-center rounded-[5px] transition-all cursor-pointer ${f.arrowType==="elbow"?"bg-primary text-white shadow-xs font-semibold":"hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",children:jsx("path",{d:"M4 20 C 8 20, 16 4, 20 4"})})})]}),jsxs("div",{className:"flex items-center gap-0.5 bg-neutral-100/80 dark:bg-neutral-800/80 rounded-[7px] p-0.5",children:[jsx("button",{type:"button",onClick:()=>t({strokeStyle:"solid"}),title:"Solid Stroke",className:`w-5 h-6 flex items-center justify-center rounded-[5px] transition-all cursor-pointer ${(f.strokeStyle||"solid")==="solid"?"bg-primary text-white shadow-xs":"hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:jsx("span",{className:"w-3.5 h-[2px] bg-current rounded-full"})}),jsx("button",{type:"button",onClick:()=>t({strokeStyle:"dashed"}),title:"Dashed Stroke",className:`w-5 h-6 flex items-center justify-center rounded-[5px] transition-all cursor-pointer ${f.strokeStyle==="dashed"?"bg-primary text-white shadow-xs":"hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:jsx("svg",{width:"14",height:"2",viewBox:"0 0 14 2",fill:"none",children:jsx("line",{x1:"0",y1:"1",x2:"14",y2:"1",stroke:"currentColor",strokeWidth:"2",strokeDasharray:"3 2"})})}),jsx("button",{type:"button",onClick:()=>t({strokeStyle:"dotted"}),title:"Dotted Stroke",className:`w-5 h-6 flex items-center justify-center rounded-[5px] transition-all cursor-pointer ${f.strokeStyle==="dotted"?"bg-primary text-white shadow-xs":"hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:jsx("svg",{width:"14",height:"2",viewBox:"0 0 14 2",fill:"none",children:jsx("line",{x1:"0",y1:"1",x2:"14",y2:"1",stroke:"currentColor",strokeWidth:"2",strokeDasharray:"1 2.5",strokeLinecap:"round"})})})]}),jsxs("div",{className:"flex items-center gap-1 px-0.5 relative",ref:S==="startArrowhead"||S==="endArrowhead"?D:void 0,children:[jsx("button",{type:"button",onClick:()=>E(S==="startArrowhead"?"none":"startArrowhead"),title:`Start Arrowhead (${cr(f.startArrowhead,"none")})`,className:`p-1 rounded-[6px] transition-colors flex items-center justify-center ${S==="startArrowhead"?"bg-primary/15 text-primary":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300"}`,children:jsx(qr,{value:cr(f.startArrowhead,"none"),side:"start",className:"w-4 h-3"})}),jsx("button",{type:"button",onClick:()=>E(S==="endArrowhead"?"none":"endArrowhead"),title:`End Arrowhead (${cr(f.endArrowhead,f.type==="arrow"?"arrow":"none")})`,className:`p-1 rounded-[6px] transition-colors flex items-center justify-center ${S==="endArrowhead"?"bg-primary/15 text-primary":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300"}`,children:jsx(qr,{value:cr(f.endArrowhead,f.type==="arrow"?"arrow":"none"),side:"end",className:"w-4 h-3"})}),(S==="startArrowhead"||S==="endArrowhead")&&jsx("div",{className:`absolute left-1/2 -translate-x-1/2 z-50 w-[184px] ${q?"top-full mt-2":"bottom-full mb-2"}`,children:jsx(Ko,{side:S==="startArrowhead"?"start":"end",currentValue:S==="startArrowhead"?cr(f.startArrowhead,"none"):cr(f.endArrowhead,f.type==="arrow"?"arrow":"none"),onChange:$=>{t(S==="startArrowhead"?{startArrowhead:$}:{endArrowhead:$}),E("none");},onClose:()=>E("none")})})]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),Ne&&jsxs(Fragment,{children:[jsxs("div",{className:"relative",ref:S==="strokeWidth"?b:void 0,children:[jsx("button",{type:"button",onClick:()=>E(S==="strokeWidth"?"none":"strokeWidth"),title:`Stroke Width (${(f.strokeWidth||2)<=1.5?"Thin":(f.strokeWidth||2)<=3?"Medium":"Bold"})`,className:`w-7 h-7 flex items-center justify-center rounded-[8px] transition-colors cursor-pointer ${S==="strokeWidth"?"bg-primary/15 text-primary":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300"}`,children:(f.strokeWidth||2)<=1.5?jsx("span",{className:"w-3.5 h-[1.5px] bg-current rounded-full"}):(f.strokeWidth||2)<=3?jsx("span",{className:"w-3.5 h-[2.8px] bg-current rounded-full"}):jsx("span",{className:"w-3.5 h-[4.5px] bg-current rounded-full"})}),S==="strokeWidth"&&jsx("div",{className:`absolute left-1/2 -translate-x-1/2 z-50 p-1.5 bg-white/98 dark:bg-[#181818]/98 backdrop-blur-md rounded-[12px] shadow-lg border border-neutral-200/90 dark:border-neutral-800 flex items-center gap-1 animate-in fade-in zoom-in-95 duration-100 ${q?"top-full mt-2":"bottom-full mb-2"}`,children:Wo.map(($,te)=>{let fe=(f.strokeWidth||2)===$.value;return jsxs("button",{type:"button",onClick:()=>{t({strokeWidth:$.value}),E("none");},title:`Stroke Width: ${$.label}`,className:`w-8 h-7 flex items-center justify-center rounded-[7px] transition-all cursor-pointer ${fe?"bg-primary text-white font-bold shadow-xs scale-105":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300"}`,children:[te===0&&jsx("span",{className:"w-4 h-[1.5px] bg-current rounded-full"}),te===1&&jsx("span",{className:"w-4 h-[2.8px] bg-current rounded-full"}),te===2&&jsx("span",{className:"w-4 h-[4.5px] bg-current rounded-full"})]},$.label)})})]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),!C&&!G&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:()=>{let $=f.roughStyle==="rough"||f.roughness!==void 0&&f.roughness>0;t({roughStyle:$?"clean":"rough",roughness:$?0:1.2});},title:f.roughStyle==="rough"||f.roughness!==void 0&&f.roughness>0?"Style: Rough (Click for Clean)":"Style: Clean (Click for Rough)",className:`w-7 h-7 flex items-center justify-center rounded-[8px] transition-colors cursor-pointer ${f.roughStyle==="rough"||f.roughness!==void 0&&f.roughness>0?"bg-primary/15 text-primary":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300"}`,children:f.roughStyle==="rough"||f.roughness!==void 0&&f.roughness>0?jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"}),jsx("path",{d:"M13.5 6.5l4 4"})]}):jsx("svg",{width:"13",height:"13",viewBox:"0 0 16 16",fill:"none",children:jsx("rect",{x:"2.5",y:"2.5",width:"11",height:"11",rx:"1.5",stroke:"currentColor",strokeWidth:"1.8"})})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),jsx("button",{type:"button",onClick:p,title:"Bring to Front",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",children:jsx(BringToFront,{size:15})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"}),e.length>1&&c&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:c,title:"Group (Ctrl+G)",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 transition-colors",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),jsx("path",{d:"M4 16v-8a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"}),jsx("path",{d:"M8 10v-4a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-4"})]})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),e.some($=>$.groupIds&&$.groupIds.length>0)&&d&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:d,title:"Ungroup (Ctrl+Shift+G)",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 transition-colors",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),jsx("path",{d:"M4 8a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2z"}),jsx("path",{d:"M12 16a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2z"})]})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),e.length>1&&h&&jsxs(Fragment,{children:[jsxs("div",{className:"flex items-center gap-0.5",children:[jsx("button",{type:"button",onClick:()=>h("left"),title:"Align Left",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 transition-colors",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"4",y1:"2",x2:"4",y2:"22"}),jsx("rect",{x:"8",y:"5",width:"12",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"8",y:"14",width:"8",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>h("center"),title:"Align Center (Horizontal)",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 transition-colors",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"12",y1:"2",x2:"12",y2:"22"}),jsx("rect",{x:"5",y:"5",width:"14",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"7",y:"14",width:"10",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>h("middle"),title:"Align Middle (Vertical)",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 transition-colors",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"2",y1:"12",x2:"22",y2:"12"}),jsx("rect",{x:"5",y:"5",width:"5",height:"14",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"14",y:"7",width:"5",height:"10",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})})]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),n&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:n,title:"Copy selection as PNG to clipboard (Ctrl+Shift+C)",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 transition-colors",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-primary",children:[jsx("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),jsx("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),x&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:x,title:"Spotlight / Focus Mode (Alt+S)",className:"p-1.5 rounded-[8px] hover:bg-amber-500/15 text-amber-500 hover:text-amber-600 dark:text-amber-400 transition-colors cursor-pointer",children:jsx(IconCurrentLocation,{size:16})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),jsx("button",{type:"button",onClick:o,title:"Duplicate (Ctrl+D)",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",children:jsx(IconCopy,{size:15})}),jsx("button",{type:"button",onClick:r,title:"Delete (Del)",className:"p-1.5 rounded-[8px] text-rose-500 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/40 transition-colors",children:jsx(IconTrash,{size:15})})]})})}var qs=[{name:"16:9 Slide",width:1280,height:720,icon:IconSlideshow,label:"Slide"},{name:"Desktop (1440)",width:1440,height:900,icon:IconDeviceDesktop,label:"Desktop Wireframe"},{name:"Mobile (iPhone)",width:390,height:844,icon:IconDeviceMobile,label:"Mobile Screen"}];function vn({isOpen:e,onClose:t,elements:r,setElements:o,selectedIds:c,selectElements:d,updateElement:h,pushHistory:s,camera:n,setCamera:p,onStartPresentation:i}){let[l,u]=useState(""),[a,x]=useState(null),[m,g]=useState(""),[w,_]=useState(null),S=useMemo(()=>r.filter(v=>v.type==="frame").sort((v,C)=>Math.abs(v.y-C.y)>100?v.y-C.y:v.x-C.x),[r]),E=useMemo(()=>{if(!l.trim())return S;let v=l.toLowerCase();return S.filter((C,M)=>(C.frameLabel||`Frame ${M+1}`).toLowerCase().includes(v)||`slide ${M+1}`.includes(v))},[S,l]),z=useCallback(v=>{if(typeof window>"u")return;let C=window.innerWidth,M=window.innerHeight,R=100,J=(C-R*2)/Math.max(v.width,100),oe=(M-R*2)/Math.max(v.height,100),A=Math.min(Math.max(Math.min(J,oe),.15),2.2),U=v.x+v.width/2,G=v.y+v.height/2,Ne=C/2-U*A,ne=M/2-G*A,le=n.x,ce=n.y,ke=n.zoom,Ie=performance.now(),we=420,Ge=Ue=>{let ee=Ue-Ie,Pe=Math.min(ee/we,1),xe=1-Math.pow(1-Pe,3);p({x:Math.round(le+(Ne-le)*xe),y:Math.round(ce+(ne-ce)*xe),zoom:Number((ke+(A-ke)*xe).toFixed(4))}),Pe<1&&requestAnimationFrame(Ge);};requestAnimationFrame(Ge),d([v.id]);},[n,p,d]),D=v=>{let C=Fr(v,r);C.length>0?d([v.id,...C.map(M=>M.id)]):d([v.id]);},P=v=>{if(typeof window>"u")return;let C=window.innerWidth,M=window.innerHeight,R=(C/2-n.x)/n.zoom,J=(M/2-n.y)/n.zoom,oe=S.length,U={id:`frame_${Date.now()}_${Math.random().toString(36).substring(2,6)}`,type:"frame",x:Math.round(R-v.width/2),y:Math.round(J-v.height/2),width:v.width,height:v.height,strokeColor:"#94a3b8",strokeWidth:1.5,strokeStyle:"dashed",fillColor:"transparent",fillStyle:"solid",opacity:1,frameLabel:`${v.label} ${oe+1}`,zIndex:1},G=[...r,U];o(G),s(G),z(U);},I=v=>{let C=m.trim();C&&(h(v,{frameLabel:C}),s(r.map(M=>M.id===v?{...M,frameLabel:C}:M))),x(null);},b=(v,C)=>{C.stopPropagation();let M=Gr(r,[v]);o(M),s(M);},f=async(v,C)=>{C.stopPropagation(),_(v.id);try{let M=await vo(v,r,{scale:2}),R=`${v.frameLabel||"Frame"}.png`;Vr(M,R,{mimeType:"image/png",filters:[{name:"PNG Image",extensions:["png"]},{name:"All Files",extensions:["*"]}]});}catch(M){console.error("Frame export failed",M);}finally{_(null);}};return e?jsxs("div",{className:"fk-card fixed top-14 left-4 z-40 w-80 max-w-[calc(100vw-2rem)] max-h-[calc(100vh-5rem)] flex flex-col bg-[#eef1f6]/98 dark:bg-[#16171b]/98 backdrop-blur-2xl rounded-[20px] border border-white/80 dark:border-white/[0.06] shadow-[-8px_-8px_20px_rgba(255,255,255,0.9),_10px_10px_24px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_16px_rgba(255,255,255,0.02),_10px_10px_28px_rgba(0,0,0,0.9)] overflow-hidden select-none animate-in fade-in slide-in-from-left-4 duration-200",children:[jsxs("div",{className:"p-3.5 pb-2.5 border-b border-black/[0.06] dark:border-white/[0.06] flex items-center justify-between",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx("span",{className:"w-7 h-7 rounded-[8px] bg-[#e2e6ee] dark:bg-[#121316] text-primary flex items-center justify-center border border-white/60 dark:border-white/[0.04] shadow-[inset_1px_1px_2.5px_rgba(166,175,195,0.45),_inset_-1px_-1px_2.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.6)]",children:jsx(IconLayoutSidebar,{size:15})}),jsxs("div",{children:[jsxs("div",{className:"flex items-center gap-1.5",children:[jsx("h2",{className:"text-xs font-bold text-neutral-800 dark:text-neutral-100 tracking-tight",children:"Frames Outline"}),jsx("span",{className:"px-1.5 py-0.2 bg-primary/10 text-primary rounded-[5px] text-[10px] font-bold",children:S.length})]}),jsx("p",{className:"text-[10px] text-neutral-400 dark:text-neutral-500 leading-none mt-0.5",children:"Jump, organize & present sections"})]})]}),jsxs("div",{className:"flex items-center gap-1",children:[S.length>0&&i&&jsxs("button",{type:"button",onClick:i,title:"Launch Presentation Slideshow (Alt+P)",className:"h-6.5 px-2 rounded-[7px] bg-primary/10 hover:bg-primary/20 text-primary dark:text-foreground border border-primary/20 flex items-center gap-1 text-[10.5px] font-semibold transition-all cursor-pointer",children:[jsx(IconPlayerPlay,{size:11,className:"fill-primary/30"}),jsx("span",{children:"Present"})]}),jsx("button",{type:"button",onClick:t,title:"Close outline drawer",className:"w-6.5 h-6.5 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-100 flex items-center justify-center transition-all cursor-pointer shadow-[-1px_-1px_2px_rgba(255,255,255,0.9),_1px_1px_2px_rgba(166,175,195,0.3)] dark:shadow-[-1px_-1px_2px_rgba(255,255,255,0.02),_1px_1px_2px_rgba(0,0,0,0.6)]",children:jsx(IconX,{size:13})})]})]}),S.length>=3&&jsx("div",{className:"px-3 pt-2.5",children:jsxs("div",{className:"relative flex items-center",children:[jsx(IconSearch,{size:12,className:"absolute left-2.5 text-neutral-400"}),jsx("input",{type:"text",placeholder:"Search frames...",value:l,onChange:v=>u(v.target.value),className:"w-full h-7 pl-7 pr-2.5 text-[11px] rounded-[8px] bg-[#e2e6ee] dark:bg-[#111215] text-neutral-800 dark:text-neutral-100 border border-white/60 dark:border-white/[0.04] shadow-[inset_1px_1px_2.5px_rgba(166,175,195,0.45),_inset_-1px_-1px_2.5px_rgba(255,255,255,0.85)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.7)] outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"})]})}),jsx("div",{className:"flex-1 overflow-y-auto p-3 space-y-2 max-h-[50vh] min-h-[140px] custom-scrollbar",children:E.length>0?E.map((v,C)=>{let M=c.includes(v.id),R=Fr(v,r),J=a===v.id,oe=v.frameLabel||`Frame ${C+1}`;return jsx("div",{onClick:()=>z(v),className:`group relative p-2.5 rounded-[12px] border transition-all cursor-pointer select-none ${M?"bg-[#f0f3f8] dark:bg-[#1f222b] border-primary/50 dark:border-primary/60 shadow-[-2px_-2px_6px_rgba(255,255,255,0.95),_3px_3px_7px_rgba(105,101,219,0.3)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_3px_3px_8px_rgba(0,0,0,0.85)]":"bg-[#e9edf4]/80 dark:bg-[#131417]/80 hover:bg-[#f0f3f8] dark:hover:bg-[#1b1c21] border-white/60 dark:border-white/[0.04] shadow-[-2px_-2px_4px_rgba(255,255,255,0.85),_2px_2px_5px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.02),_2px_2px_5px_rgba(0,0,0,0.7)]"}`,children:jsxs("div",{className:"flex items-center justify-between",children:[jsxs("div",{className:"flex items-center gap-2 flex-1 min-w-0 pr-2",children:[jsx("span",{className:`w-5 h-5 rounded-[6px] text-[10px] font-bold flex items-center justify-center shrink-0 ${M?"bg-primary text-white shadow-sm":"bg-[#dce1eb] dark:bg-[#1a1b20] text-neutral-600 dark:text-neutral-400"}`,children:C+1}),J?jsxs("div",{className:"flex items-center gap-1 flex-1",onClick:A=>A.stopPropagation(),children:[jsx("input",{type:"text",value:m,onChange:A=>g(A.target.value),onKeyDown:A=>{A.key==="Enter"&&I(v.id),A.key==="Escape"&&x(null);},autoFocus:true,className:"h-6 px-1.5 text-xs font-semibold rounded-[5px] bg-[#e0e5ee] dark:bg-[#101114] text-neutral-900 dark:text-neutral-100 border border-primary/40 outline-none w-full"}),jsx("button",{type:"button",onClick:()=>I(v.id),className:"p-1 rounded-[5px] text-emerald-600 hover:bg-emerald-500/10 cursor-pointer",children:jsx(IconCheck,{size:12,stroke:2.5})})]}):jsxs("div",{className:"flex-1 min-w-0",onDoubleClick:A=>{A.stopPropagation(),x(v.id),g(oe);},children:[jsx("span",{className:`text-xs font-bold block truncate leading-tight ${M?"text-primary dark:text-neutral-100":"text-neutral-700 dark:text-neutral-200"}`,children:oe}),jsxs("div",{className:"flex items-center gap-1.5 text-[9.5px] text-neutral-400 dark:text-neutral-400 mt-0.5 font-medium",children:[jsxs("span",{children:[R.length," ",R.length===1?"element":"elements"]}),jsx("span",{children:"\u2022"}),jsxs("span",{children:[Math.round(v.width)," \xD7 ",Math.round(v.height)]})]})]})]}),jsxs("div",{className:"flex items-center gap-0.5 opacity-80 group-hover:opacity-100 transition-opacity",children:[jsx("button",{type:"button",onClick:A=>{A.stopPropagation(),z(v);},title:"Jump & focus camera on this frame",className:"p-1 rounded-[6px] text-neutral-500 dark:text-neutral-300 hover:text-primary dark:hover:text-primary hover:bg-primary/10 dark:hover:bg-primary/20 transition-colors cursor-pointer",children:jsx(IconFocusCentered,{size:13})}),jsx("button",{type:"button",onClick:A=>{A.stopPropagation(),D(v);},title:"Select all elements inside this frame",className:"p-1 rounded-[6px] text-neutral-500 dark:text-neutral-300 hover:text-primary dark:hover:text-primary hover:bg-primary/10 dark:hover:bg-primary/20 transition-colors cursor-pointer",children:jsx(IconSelect,{size:13})}),jsx("button",{type:"button",onClick:A=>f(v,A),disabled:w===v.id,title:"Export this frame as PNG image",className:"p-1 rounded-[6px] text-neutral-500 dark:text-neutral-300 hover:text-primary dark:hover:text-primary hover:bg-primary/10 dark:hover:bg-primary/20 transition-colors cursor-pointer",children:jsx(IconDownload,{size:13})}),jsx("button",{type:"button",onClick:A=>{A.stopPropagation(),x(v.id),g(oe);},title:"Rename frame",className:"p-1 rounded-[6px] text-neutral-500 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/10 transition-colors cursor-pointer",children:jsx(IconEdit,{size:12})}),jsx("button",{type:"button",onClick:A=>b(v.id,A),title:"Delete this frame",className:"p-1 rounded-[6px] text-neutral-400 dark:text-neutral-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-500/10 dark:hover:bg-rose-500/20 transition-colors cursor-pointer",children:jsx(IconTrash,{size:12})})]})]})},v.id)}):jsxs("div",{className:"py-4 px-2 text-center flex flex-col items-center justify-center",children:[jsx("div",{className:"w-10 h-10 rounded-2xl bg-primary/10 text-primary flex items-center justify-center mb-2 shadow-[inset_1px_1px_2px_rgba(105,101,219,0.2)]",children:jsx(IconSparkles,{size:18})}),jsx("h3",{className:"text-xs font-bold text-neutral-700 dark:text-neutral-200",children:"No frames on canvas"}),jsx("p",{className:"text-[10px] text-neutral-400 dark:text-neutral-500 mt-1 max-w-[210px] leading-relaxed",children:"Frames organize your board into sections, artboards, and presentation slides."})]})}),jsxs("div",{className:"p-3 bg-[#e8ecf4]/90 dark:bg-[#121316]/90 border-t border-black/[0.06] dark:border-white/[0.06]",children:[jsx("span",{className:"text-[9.5px] font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider block mb-1.5 px-0.5",children:"+ Add New Frame Preset"}),jsx("div",{className:"grid grid-cols-3 gap-1.5",children:qs.map(v=>{let C=v.icon;return jsxs("button",{type:"button",onClick:()=>P(v),className:"flex flex-col items-center justify-center p-2 rounded-[10px] bg-[#f0f3f8] dark:bg-[#1c1e24] text-neutral-700 dark:text-neutral-300 hover:text-primary dark:hover:text-primary border border-white/80 dark:border-white/[0.06] shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.02),_2px_2px_5px_rgba(0,0,0,0.7)] hover:shadow-[-2px_-2px_6px_rgba(255,255,255,1),_2px_2px_6px_rgba(166,175,195,0.5)] active:shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.5)] active:scale-95 transition-all cursor-pointer",title:`Insert ${v.name} (${v.width}\xD7${v.height})`,children:[jsx(C,{size:14,className:"mb-0.5"}),jsx("span",{className:"text-[10px] font-semibold leading-tight",children:v.name}),jsxs("span",{className:"text-[8.5px] text-neutral-400 font-mono",children:[v.width,"\xD7",v.height]})]},v.name)})})]})]}):null}function _n({laserColor:e,setLaserColor:t,laserMode:r,setLaserMode:o,onClearLaser:c,laserStrokeCount:d,onExitLaser:h}){return jsxs("div",{"aria-label":"Laser Pointer Controls",className:"fixed bottom-5 left-1/2 -translate-x-1/2 z-40 flex items-center gap-2 p-1.5 px-2 bg-[#eef1f6]/95 dark:bg-[#16171b]/95 backdrop-blur-2xl rounded-[16px] border border-white/80 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.9),_8px_8px_20px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.03),_10px_10px_26px_rgba(0,0,0,0.85)] select-none animate-in fade-in slide-in-from-bottom-3 duration-150 text-xs",children:[jsxs("div",{className:"flex items-center gap-1.5 pl-1 pr-1.5 text-neutral-600 dark:text-neutral-300",children:[jsxs("span",{className:"relative flex h-2.5 w-2.5",children:[jsx("span",{className:"animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",style:{backgroundColor:e}}),jsx("span",{className:"relative inline-flex rounded-full h-2.5 w-2.5 shadow-sm",style:{backgroundColor:e}})]}),jsx("span",{className:"text-[11px] font-bold tracking-wide uppercase text-neutral-700 dark:text-neutral-200",children:"Laser"})]}),jsx("div",{className:"w-[1px] h-4 bg-black/10 dark:bg-white/10 mx-0.5"}),jsx("div",{className:"flex items-center gap-1.5",children:pa.map(s=>{let n=e.toLowerCase()===s.hex.toLowerCase();return jsx("button",{type:"button",onClick:()=>t(s.hex),title:s.name,className:`relative w-6 h-6 rounded-[7px] transition-all cursor-pointer flex items-center justify-center ${n?"scale-110 ring-2 ring-primary ring-offset-1 dark:ring-offset-neutral-900 shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(0,0,0,0.3)]":"border border-black/15 dark:border-white/15 hover:scale-105 shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(0,0,0,0.2)]"}`,style:{backgroundColor:s.hex},children:n&&jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-white shadow-xs"})},s.hex)})}),jsx("div",{className:"w-[1px] h-4 bg-black/10 dark:bg-white/10 mx-0.5"}),jsxs("div",{className:"flex items-center p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] h-7",children:[jsxs("button",{type:"button",onClick:()=>o("fading"),title:"Laser beam smoothly vanishes automatically as you draw",className:`h-full px-2 flex items-center gap-1 rounded-[6px] text-[10.5px] font-medium transition-all cursor-pointer ${r==="fading"?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:[jsx(IconFlame,{size:13,className:"text-amber-500"}),jsx("span",{children:"Fading Trail"})]}),jsxs("button",{type:"button",onClick:()=>o("persistent"),title:"Laser marks stay visible on screen until cleared",className:`h-full px-2 flex items-center gap-1 rounded-[6px] text-[10.5px] font-medium transition-all cursor-pointer ${r==="persistent"?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:[jsx(IconPin,{size:13,className:"text-sky-500"}),jsx("span",{children:"Keep Marks"})]})]}),d>0&&jsxs("button",{type:"button",onClick:c,title:"Clear all laser marks on screen",className:"h-7 px-2 flex items-center gap-1 rounded-[8px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_2px_2px_5px_rgba(0,0,0,0.6)] text-rose-600 dark:text-rose-400 text-[10.5px] font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer",children:[jsx(IconTrash,{size:13}),jsxs("span",{children:["Clear (",d,")"]})]}),jsx("div",{className:"w-[1px] h-4 bg-black/10 dark:bg-white/10 mx-0.5"}),jsx("button",{type:"button",onClick:h,title:"Exit Laser Pointer (Esc or V)",className:"w-6 h-6 flex items-center justify-center rounded-[7px] text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 hover:bg-black/5 dark:hover:bg-white/5 transition-all cursor-pointer",children:jsx(IconX,{size:14})})]})}function Mn({elements:e,camera:t,setCamera:r}){let[o,c]=useState(true),d=useRef(null),h=useRef(false),[s,n]=useState(false),[p,i]=useState(false),l=168,u=118,a=useRef({miniScale:1,offsetX:0,offsetY:0,viewportRect:{vx:0,vy:0,vw:0,vh:0}});useEffect(()=>{if(o)return;let _=d.current;if(!_)return;let S=_.getContext("2d");if(!S)return;S.clearRect(0,0,l,u);let E=Vt(e,300),z=l/E.width,D=u/E.height,P=Math.min(z,D),I=(l-E.width*P)/2-E.minX*P,b=(u-E.height*P)/2-E.minY*P;S.fillStyle="#0b6eff",e.forEach(ne=>{let le=ne.x*P+I,ce=ne.y*P+b,ke=Math.max(3,Math.abs(ne.width)*P),Ie=Math.max(3,Math.abs(ne.height)*P);S.globalAlpha=.55,S.fillRect(le,ce,ke,Ie);});let f=typeof window<"u"?window.innerWidth:1200,v=typeof window<"u"?window.innerHeight:800,C=f/t.zoom,M=v/t.zoom,R=-t.x/t.zoom,J=-t.y/t.zoom,oe=R*P+I,A=J*P+b,U=Math.max(8,C*P),G=Math.max(6,M*P);a.current={miniScale:P,offsetX:I,offsetY:b,viewportRect:{vx:oe,vy:A,vw:U,vh:G}},S.globalAlpha=p?.22:.12,S.fillStyle="#ef4444",S.fillRect(oe,A,U,G),S.globalAlpha=1,S.strokeStyle="#ef4444",S.lineWidth=p?2:1.5,S.strokeRect(oe,A,U,G);let Ne=Math.min(4,Math.min(U,G)/3);S.fillStyle="#ef4444",S.fillRect(oe-1,A-1,Ne,Ne),S.fillRect(oe+U-Ne+1,A-1,Ne,Ne),S.fillRect(oe-1,A+G-Ne+1,Ne,Ne),S.fillRect(oe+U-Ne+1,A+G-Ne+1,Ne,Ne);},[e,t,o,p]);let x=(_,S)=>{if(!d.current)return;let E=d.current.getBoundingClientRect(),z=_-E.left,D=S-E.top,{miniScale:P,offsetX:I,offsetY:b}=a.current;if(P<=0)return;let f=(z-I)/P,v=(D-b)/P,C=typeof window<"u"?window.innerWidth:1200,M=typeof window<"u"?window.innerHeight:800;r(R=>({...R,x:Math.round(C/2-f*R.zoom),y:Math.round(M/2-v*R.zoom)}));};return jsx("div",{className:"fixed bottom-4 right-4 z-30 flex flex-col items-end",children:o?jsxs("button",{type:"button",onClick:()=>c(false),title:"Expand Minimap Overview",className:"h-8 px-3 rounded-[12px] bg-[#f0f3f8] dark:bg-[#1c1e24] text-neutral-700 dark:text-neutral-200 border border-white/80 dark:border-white/[0.06] shadow-[-3px_-3px_7px_rgba(255,255,255,0.95),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_3px_3px_7px_rgba(0,0,0,0.65)] hover:shadow-[-4px_-4px_9px_rgba(255,255,255,1),_4px_4px_9px_rgba(166,175,195,0.5)] hover:text-neutral-900 dark:hover:text-white flex items-center gap-2 text-xs font-semibold select-none cursor-pointer transition-all duration-150",children:[jsx("span",{className:"w-5 h-5 rounded-[6px] bg-[#e2e6ee] dark:bg-[#121316] text-primary flex items-center justify-center border border-white/60 dark:border-white/[0.04] shadow-[inset_1px_1px_2.5px_rgba(166,175,195,0.45),_inset_-1px_-1px_2.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.6),_inset_-1px_-1px_2.5px_rgba(255,255,255,0.03)]",children:jsx(IconCompass,{size:13})}),jsx("span",{className:"font-medium tracking-tight",children:"Overview"}),jsx(IconChevronUp,{size:13,className:"text-neutral-400 dark:text-neutral-500"})]}):jsxs("div",{className:"bg-[#edf0f5]/98 dark:bg-[#16171b]/98 backdrop-blur-2xl rounded-[18px] border border-white/80 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.95),_8px_8px_18px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_12px_rgba(255,255,255,0.03),_8px_8px_20px_rgba(0,0,0,0.85)] p-2.5 overflow-hidden transition-all select-none animate-in fade-in zoom-in-95 duration-150",children:[jsxs("div",{className:"flex items-center justify-between px-1 text-xs font-bold text-neutral-700 dark:text-neutral-200",children:[jsxs("span",{className:"flex items-center gap-1.5",children:[jsx("span",{className:"w-5 h-5 rounded-[6px] bg-[#e4e8ef] dark:bg-[#131417] text-primary flex items-center justify-center border border-white/70 dark:border-white/[0.04] shadow-[inset_1px_1px_2px_rgba(166,175,195,0.4),_inset_-1px_-1px_2px_rgba(255,255,255,0.8)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.6)]",children:jsx(IconCompass,{size:12})}),jsx("span",{className:"text-[11.5px] tracking-tight",children:"Overview"})]}),jsx("button",{type:"button",onClick:()=>c(true),className:"w-6 h-6 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:shadow-[-1px_-1px_2px_rgba(255,255,255,0.03),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] hover:shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.45)] active:shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.5)] flex items-center justify-center text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-all cursor-pointer",title:"Collapse Minimap",children:jsx(IconChevronDown,{size:13})})]}),jsx("div",{className:"relative mt-2 rounded-[12px] overflow-hidden bg-[#e2e6ee] dark:bg-[#101114] border border-white/60 dark:border-white/[0.04] shadow-[inset_2px_2px_5px_rgba(166,175,195,0.45),_inset_-2px_-2px_5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.7),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:jsx("canvas",{ref:d,width:l,height:u,onPointerDown:_=>{_.currentTarget.setPointerCapture(_.pointerId),h.current=true,i(true),x(_.clientX,_.clientY);},onPointerMove:_=>{if(h.current)x(_.clientX,_.clientY);else {let S=_.currentTarget.getBoundingClientRect(),E=_.clientX-S.left,z=_.clientY-S.top,{vx:D,vy:P,vw:I,vh:b}=a.current.viewportRect,f=E>=D&&E<=D+I&&z>=P&&z<=P+b;n(f);}},onPointerUp:_=>{h.current=false,i(false);try{_.currentTarget.releasePointerCapture(_.pointerId);}catch{}},className:`block touch-none select-none transition-all ${p?"cursor-grabbing":s?"cursor-grab":"cursor-crosshair"}`,title:"Click or drag viewport box to pan"})})]})})}function Nn({isOpen:e,onClose:t,elements:r,selectedIds:o,camera:c,setCamera:d,isSpotlightActive:h,onToggleSpotlight:s}){let[n,p]=useState(0),[i,l]=useState(false),[u,a]=useState(false),[x,m]=useState(true),[g,w]=useState(false),_=useRef(null),S=useRef(null),E=useRef([]),z=useRef(null),D=useRef({x:0,y:0}),P=useMemo(()=>{if(o&&o.length>1){let ne=r.filter(le=>o.includes(le.id)).sort((le,ce)=>Math.abs(le.y-ce.y)>120?le.y-ce.y:le.x-ce.x);if(ne.length>0)return ne.map((le,ce)=>{let Ie=Math.min(le.x,le.x+le.width)-60,we=Math.min(le.y,le.y+le.height)-60,Ge=Math.abs(le.width)+120,Ue=Math.abs(le.height)+120,ee=le.frameLabel||(le.text?.trim()?le.text.split(`
|
|
95
|
+
</svg>`}function vr(e,t,r){Vr(e,t,{mimeType:r});}function es(e){let t=e.split(";base64,"),r=t[0].split(":")[1],o=window.atob(t[1]),c=o.length,d=new Uint8Array(c);for(let h=0;h<c;++h)d[h]=o.charCodeAt(h);return new Blob([d],{type:r})}async function Zr(e,t={}){try{let r=await no(e,t),o=es(r);return await navigator.clipboard.write([new ClipboardItem({"image/png":o})]),!0}catch(r){return console.warn("Clipboard copy failed:",r),false}}function Fr(e,t){let r=bt(e);return t.filter(o=>{if(o.id===e.id)return false;let c=bt(o),d=c.x+c.width/2,h=c.y+c.height/2;return d>=r.x&&d<=r.x+r.width&&h>=r.y&&h<=r.y+r.height})}async function vo(e,t,r={}){let{scale:o=2,backgroundColor:c=e.fillColor&&e.fillColor!=="transparent"?e.fillColor:"#ffffff",padding:d=0}=r,h=bt(e),s=document.createElement("canvas");s.width=Math.max(10,(h.width+d*2)*o),s.height=Math.max(10,(h.height+d*2)*o);let n=s.getContext("2d");if(!n)throw new Error("Could not create canvas context");let p=r.isDark??(ko(c)||c==="transparent"&&typeof document<"u"&&document.documentElement.classList.contains("dark"));c&&c!=="transparent"&&(n.fillStyle=c,n.fillRect(0,0,s.width,s.height)),n.save(),n.scale(o,o),n.translate(-h.x+d,-h.y+d),n.beginPath(),n.rect(h.x,h.y,h.width,h.height),n.clip();let i=Fr(e,t),l=i.filter(a=>a.type==="image"&&a.dataUrl);l.length>0&&await Promise.all(l.map(a=>new Promise(x=>{let m=new Image;m.crossOrigin="anonymous",m.onload=()=>x(),m.onerror=()=>x(),m.src=a.dataUrl;})));let u=[...i].sort((a,x)=>(a.zIndex??0)-(x.zIndex??0));for(let a of u)Or(n,a,1,false,p);return n.restore(),s.toDataURL("image/png")}var Ea=595.28,$a=841.89,Go=24,ts=.75;function rs(e,t=Go){let r=e==="landscape",o=r?$a:Ea,c=r?Ea:$a;return {pageWidth:o,pageHeight:c,margin:t,printableWidth:Math.max(100,o-t*2),printableHeight:Math.max(100,c-t*2)}}var fn=class{parent=new Map;find(t){if(!this.parent.has(t))return this.parent.set(t,t),t;let r=this.parent.get(t);if(r===t)return t;let o=this.find(r);return this.parent.set(t,o),o}union(t,r){let o=this.find(t),c=this.find(r);o!==c&&this.parent.set(o,c);}};function os(e){if(e.length===0)return [];let t=new fn,r=new Map;for(let p of e)r.set(p.id,p);let o=new Map;for(let p of e)if(p.groupIds&&p.groupIds.length>0)for(let i of p.groupIds){let l=o.get(i)||[];l.push(p.id),o.set(i,l);}for(let p of o.values())for(let i=1;i<p.length;i++)t.union(p[0],p[i]);let c=e.filter(p=>p.type==="frame");for(let p of c){let i=Fr(p,e);for(let l of i)t.union(p.id,l.id);}for(let p of e)p.frameId&&r.has(p.frameId)&&t.union(p.id,p.frameId);for(let p of e)(p.type==="arrow"||p.type==="line")&&(p.startBinding?.elementId&&r.has(p.startBinding.elementId)&&t.union(p.id,p.startBinding.elementId),p.endBinding?.elementId&&r.has(p.endBinding.elementId)&&t.union(p.id,p.endBinding.elementId));let d=e.filter(p=>(!p.groupIds||p.groupIds.length===0)&&!p.frameId&&p.type!=="frame"),h=12;for(let p=0;p<d.length;p++){let i=d[p],l=bt(i);for(let u=p+1;u<d.length;u++){let a=d[u],x=bt(a),m=Math.max(0,Math.max(l.x,x.x)-Math.min(l.x+l.width,x.x+x.width)),g=Math.max(0,Math.max(l.y,x.y)-Math.min(l.y+l.height,x.y+x.height));m<=h&&g<=h&&(i.type==="text"||a.type==="text"||i.type==="sticky"||a.type==="sticky"||m===0&&g===0)&&t.union(i.id,a.id);}}let s=new Map;for(let p of e){let i=t.find(p.id),l=s.get(i)||[];l.push(p),s.set(i,l);}let n=[];for(let[p,i]of s.entries()){let l=Vt(i,4);n.push({id:p,elements:i,bbox:l});}return n}function za(e,t){let{orientation:r,margin:o=Go,baseScale:c=ts}=t,d=rs(r,o),{printableWidth:h,printableHeight:s}=d;if(e.length===0)return {pageGeometry:d,pages:[{pageIndex:0,slices:[]}],uniformScale:c};let p=Vt(e,20),i=p.width>0?Math.min(c,h/p.width):c,l=p.width*i,u=p.height*i,a=Math.max(0,(h-l)/2);if(u<=s){let S=Math.max(0,(s-u)/2);return {pageGeometry:d,pages:[{pageIndex:0,slices:[{elements:e,sourceBounds:{minX:p.minX,minY:p.minY,width:p.width,height:p.height},destRect:{x:a,y:S,width:l,height:u}}]}],uniformScale:i}}let x=os(e),m=s/i,g=[],w=p.minY,_=0;for(;w<p.maxY;){let S=p.maxY-w;if(S<=m){let f=S,v=f*i,C=e.filter(M=>{let R=bt(M);return R.y+R.height>=w&&R.y<=p.maxY});g.push({pageIndex:_,slices:[{elements:C.length>0?C:e,sourceBounds:{minX:p.minX,minY:w,width:p.width,height:f},destRect:{x:a,y:0,width:l,height:v}}]});break}let E=w+m,z=E,D=x.filter(f=>f.bbox.minY<E&&f.bbox.maxY>E);if(D.length>0){let f=Math.min(...D.map(C=>C.bbox.minY)),v=m*.55;f-w>=v?z=f:z=E;}let P=z-w,I=P*i,b=e.filter(f=>{let v=bt(f);return v.y+v.height>=w&&v.y<=z});g.push({pageIndex:_,slices:[{elements:b.length>0?b:e,sourceBounds:{minX:p.minX,minY:w,width:p.width,height:P},destRect:{x:a,y:0,width:l,height:I}}]}),w=z,_++;}return {pageGeometry:d,pages:g,uniformScale:i}}var as=2.5,Ba=4096;function is(e){if(!e||e==="transparent")return rgb(1,1,1);let t=e.replace("#","").trim();if(t.length===3&&(t=t.split("").map(d=>d+d).join("")),t.length!==6)return rgb(1,1,1);let r=parseInt(t.substring(0,2),16)/255,o=parseInt(t.substring(2,4),16)/255,c=parseInt(t.substring(4,6),16)/255;return rgb(Number.isFinite(r)?r:1,Number.isFinite(o)?o:1,Number.isFinite(c)?c:1)}async function ss(e){let t=e.filter(r=>r.type==="image"&&r.dataUrl);t.length!==0&&await Promise.all(t.map(r=>new Promise(o=>{let c=new Image;c.crossOrigin="anonymous",c.onload=()=>o(),c.onerror=()=>o(),c.src=r.dataUrl;})));}async function ls(e,t,r){let{sourceBounds:o,elements:c}=e;if(o.width<=0||o.height<=0)return null;let d=as,h=Math.max(o.width,o.height);h*d>Ba&&(d=Math.max(1,Ba/h));let s=Math.max(2,Math.round(o.width*d)),n=Math.max(2,Math.round(o.height*d)),p=document.createElement("canvas");p.width=s,p.height=n;let i=p.getContext("2d");if(!i)return null;r&&r!=="transparent"&&(i.fillStyle=r,i.fillRect(0,0,s,n)),i.save(),i.scale(d,d),i.translate(-o.minX,-o.minY);let l=[...c].sort((x,m)=>(x.zIndex??0)-(m.zIndex??0));for(let x of l)Or(i,x,1,false,t);i.restore();let u=await new Promise(x=>{p.toBlob(x,"image/png");});if(p.width=0,p.height=0,!u)return null;let a=await u.arrayBuffer();return new Uint8Array(a)}async function _o(e,t={}){let{orientation:r="portrait",appearance:o="original",margin:c=Go,boardName:d="whiteboard",canvasBackground:h="#ffffff",isSelection:s=false,onProgress:n}=t;if(e.length===0)throw new Error("No elements to export");await ss(e);let p=false,i="#ffffff",l=rgb(1,1,1);o==="dark"?(p=true,i="#121212",l=rgb(.07,.07,.07)):o==="light"?(p=false,i="#ffffff",l=rgb(1,1,1)):(p=t.isDark??ko(h),i=h||"#ffffff",l=is(i));let{pageGeometry:u,pages:a}=za(e,{orientation:r,margin:c}),x=await PDFDocument.create(),m=a.length,g=0;for(let E=0;E<a.length;E++){let z=a[E],D=x.addPage([u.pageWidth,u.pageHeight]);D.drawRectangle({x:0,y:0,width:u.pageWidth,height:u.pageHeight,color:l});for(let P of z.slices){let I=await ls(P,p,i);if(!I)continue;let b=await x.embedPng(I),f=u.margin+P.destRect.x,v=u.pageHeight-u.margin-P.destRect.y-P.destRect.height;D.drawImage(b,{x:f,y:v,width:P.destRect.width,height:P.destRect.height});}g++,n?.(g,m);}let w=await x.save(),S=`${(d||"whiteboard").toLowerCase().replace(/[^a-z0-9_-]/g,"-")||"whiteboard"}${s?"-selection":""}.pdf`;return await Vr(w,S,{mimeType:"application/pdf",filters:[{name:"PDF Document",extensions:["pdf"]}],showToast:true}),{success:true,pageCount:m,filename:S}}function mn({elements:e,selectedIds:t=[],boardName:r,onManualSave:o,onClearBoard:c,gridStyle:d,setGridStyle:h,resetCamera:s,canvasBackground:n="#ffffff"}){let{resolvedTheme:p}=nr(),l=useSyncExternalStore(()=>()=>{},()=>true,()=>false)&&p==="dark",[u,a]=useState(false),[x,m]=useState({x:0,y:0}),[g,w]=useState("none"),[_,S]=useState(false),[E,z]=useState("portrait"),[D,P]=useState("original"),[I,b]=useState(l?"dark":"light"),[f,v]=useState(2),[C,M]=useState(null),R=useRef(null),J=useRef(e),oe=useRef(t);useEffect(()=>{J.current=e,oe.current=t;},[e,t]);let A=ke=>{M(ke),setTimeout(()=>{M(null),a(false);},1e3);};useEffect(()=>{let ke=we=>{if(["INPUT","TEXTAREA"].includes(we.target?.tagName)||we.target?.isContentEditable)return;we.preventDefault();let Ge=240,Ue=320,ee=Math.min(window.innerWidth-Ge-16,Math.max(12,we.clientX)),Pe=Math.min(window.innerHeight-Ue-16,Math.max(12,we.clientY)),xe=J.current.filter(O=>oe.current.includes(O.id));if(xe.length>0){let O=Vt(xe,0);z(O.width>O.height*1.1?"landscape":"portrait");}m({x:ee,y:Pe}),w("none"),a(true);},Ie=we=>{if(we instanceof KeyboardEvent&&we.key==="Escape"){a(false);return}we instanceof MouseEvent&&R.current&&!R.current.contains(we.target)&&a(false);};return window.addEventListener("contextmenu",ke),window.addEventListener("mousedown",Ie),window.addEventListener("keydown",Ie),window.addEventListener("wheel",()=>a(false),{passive:true}),()=>{window.removeEventListener("contextmenu",ke),window.removeEventListener("mousedown",Ie),window.removeEventListener("keydown",Ie);}},[]);let U=async()=>{try{let Ie=await no(e,{scale:f,backgroundColor:I==="dark"?"#121212":I==="light"?"#ffffff":"transparent"}),we=`${r.toLowerCase().replace(/[^a-z0-9]/g,"-")||"whiteboard"}-${f}x.png`;vr(Ie,we,"image/png"),A(`Downloaded PNG (${f}x)`);}catch{A("Failed to download image");}},G=async()=>{try{let Ie=await Zr(e,{scale:f,backgroundColor:I==="dark"?"#121212":I==="light"?"#ffffff":"transparent"});A(Ie?"Copied image to clipboard! \u{1F4CB}":"Clipboard write failed");}catch{A("Clipboard write failed");}},Ne=()=>{try{let Ie=wo(e,{backgroundColor:I==="dark"?"#121212":I==="light"?"#ffffff":"transparent"}),we=`${r.toLowerCase().replace(/[^a-z0-9]/g,"-")||"whiteboard"}.svg`;vr(Ie,we,"image/svg+xml"),A("Downloaded SVG Vector");}catch{A("Failed to download SVG");}},ne=()=>{try{let ke=JSON.stringify(e,null,2),Ie=`${r.toLowerCase().replace(/[^a-z0-9]/g,"-")||"whiteboard"}.json`;vr(ke,Ie,"application/json"),A("Downloaded JSON file");}catch{A("Failed to download JSON");}},le=async()=>{try{let ke=JSON.stringify(e,null,2);await navigator.clipboard.writeText(ke),A("Copied JSON to clipboard! \u{1F4CB}");}catch{A("Could not copy JSON");}},ce=async()=>{if(!(_||t.length===0))try{S(!0),A("Preparing PDF\u2026");let ke=e.filter(Ie=>t.includes(Ie.id));if(ke.length===0)return;await _o(ke,{orientation:E,appearance:D,margin:24,boardName:r,canvasBackground:n,isDark:l,isSelection:!0}),A(`Downloaded PDF (${E==="landscape"?"Landscape":"Portrait"}) \u2713`);}catch(ke){console.error("Failed to export selection as PDF:",ke),A("Export failed");}finally{S(false);}};return u?jsx("div",{ref:R,className:"fixed z-50 select-none animate-in fade-in-0 zoom-in-95 duration-100",style:{left:`${x.x}px`,top:`${x.y}px`},children:jsxs("div",{className:"relative w-56 rounded-2xl bg-white/95 dark:bg-[#18181b]/95 backdrop-blur-md shadow-sm dark:shadow-md border border-neutral-200/90 dark:border-neutral-800 p-1.5 text-xs text-neutral-800 dark:text-neutral-200 font-medium space-y-0.5",children:[C&&jsx("div",{className:"mb-1.5 px-2.5 py-1.5 rounded-2xl bg-emerald-500/15 border border-emerald-500/30 text-emerald-600 dark:text-emerald-400 text-center font-semibold text-[11px] animate-in fade-in",children:C}),t.length>0&&jsxs("div",{className:"relative",onMouseEnter:()=>w("pdf"),children:[jsxs("button",{type:"button",disabled:_,onClick:ce,className:"w-full flex items-center justify-between px-2.5 py-1.5 rounded-2xl bg-primary/10 hover:bg-primary/20 text-primary dark:text-foreground transition-colors cursor-pointer group font-semibold",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(IconFileTypePdf,{size:14,className:"text-primary shrink-0"}),jsx("span",{children:_?"Preparing\u2026":"Export Selection as PDF"})]}),jsx("div",{className:"flex items-center gap-1",children:jsx(IconArrowRight,{size:12,className:"opacity-70"})})]}),g==="pdf"&&jsxs("div",{className:"absolute left-full top-0 ml-1.5 w-60 rounded-2xl bg-white/95 dark:bg-[#18181b]/95 backdrop-blur-md shadow-2xl border border-neutral-200/90 dark:border-neutral-800 p-2 text-xs space-y-2 animate-in fade-in-0 zoom-in-95 duration-100",style:{top:x.y+200>window.innerHeight?"-60px":"0px"},children:[jsxs("div",{children:[jsx("span",{className:"text-[10px] font-semibold text-neutral-400 uppercase tracking-wider block mb-1",children:"Orientation"}),jsxs("div",{className:"grid grid-cols-2 gap-1 bg-neutral-100 dark:bg-neutral-900/60 p-1 rounded-2xl border border-neutral-200/70 dark:border-neutral-800",children:[jsx("button",{type:"button",onClick:()=>z("portrait"),className:`px-1.5 py-1 rounded-2xl text-[11px] font-medium transition-all ${E==="portrait"?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Portrait"}),jsx("button",{type:"button",onClick:()=>z("landscape"),className:`px-1.5 py-1 rounded-2xl text-[11px] font-medium transition-all ${E==="landscape"?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Landscape"})]})]}),jsxs("div",{children:[jsx("span",{className:"text-[10px] font-semibold text-neutral-400 uppercase tracking-wider block mb-1",children:"Appearance"}),jsxs("div",{className:"grid grid-cols-3 gap-1 bg-neutral-100 dark:bg-neutral-900/60 p-1 rounded-2xl border border-neutral-200/70 dark:border-neutral-800",children:[jsx("button",{type:"button",onClick:()=>P("original"),className:`px-1 py-1 rounded-2xl text-[10px] font-medium transition-all ${D==="original"?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Original"}),jsx("button",{type:"button",onClick:()=>P("light"),className:`px-1 py-1 rounded-2xl text-[10px] font-medium transition-all ${D==="light"?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Light"}),jsx("button",{type:"button",onClick:()=>P("dark"),className:`px-1 py-1 rounded-2xl text-[10px] font-medium transition-all ${D==="dark"?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Dark"})]})]}),jsxs("div",{className:"flex items-center justify-between text-[10px] text-neutral-400 px-1",children:[jsx("span",{children:"Margins"}),jsx("span",{className:"font-mono",children:"24 pt"})]}),jsx("div",{className:"h-[1px] bg-neutral-200/80 dark:bg-neutral-800"}),jsxs("button",{type:"button",disabled:_,onClick:ce,className:"w-full flex items-center justify-between px-2 py-1.5 rounded-2xl bg-primary text-white hover:bg-primary/90 transition-colors cursor-pointer font-medium",children:[jsxs("div",{className:"flex items-center gap-1.5",children:[jsx(IconDownload,{size:13}),jsx("span",{children:_?"Generating\u2026":"Download PDF"})]}),jsx("span",{className:"text-[10px] opacity-75 capitalize",children:E})]})]}),jsx("div",{className:"h-[1px] bg-neutral-200/80 dark:bg-neutral-800 my-1"})]}),jsxs("button",{type:"button",onClick:()=>{o(),A("Saved to storage \u2713");},className:"w-full flex items-center justify-between px-2.5 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2 text-neutral-700 dark:text-neutral-200 group-hover:text-primary",children:[jsx(IconDeviceFloppy,{size:14,className:"text-primary"}),jsx("span",{children:"Save Board"})]}),jsx("kbd",{className:"text-[10px] font-mono text-neutral-400 bg-neutral-100 dark:bg-neutral-800/80 px-1.5 py-0.5 rounded-2xl border border-neutral-200 dark:border-neutral-700",children:"Ctrl+S"})]}),jsx("div",{className:"h-[1px] bg-neutral-200/80 dark:bg-neutral-800 my-1"}),jsxs("div",{className:"relative",onMouseEnter:()=>w("image"),children:[jsxs("button",{type:"button",className:"w-full flex items-center justify-between px-2.5 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2 text-neutral-700 dark:text-neutral-200 group-hover:text-primary",children:[jsx(IconPhoto,{size:14,className:"text-purple-500"}),jsx("span",{children:"Export Image"})]}),jsx(IconArrowRight,{size:12,className:"text-neutral-400"})]}),g==="image"&&jsxs("div",{className:"absolute left-full top-0 ml-1.5 w-60 rounded-2xl bg-white/95 dark:bg-[#18181b]/95 backdrop-blur-md shadow-2xl border border-neutral-200/90 dark:border-neutral-800 p-2 text-xs space-y-2 animate-in fade-in-0 zoom-in-95 duration-100",style:{top:x.y+260>window.innerHeight?"-120px":"0px"},children:[jsxs("div",{children:[jsx("span",{className:"text-[10px] font-semibold text-neutral-400 uppercase tracking-wider block mb-1",children:"Background"}),jsxs("div",{className:"grid grid-cols-3 gap-1 bg-neutral-100 dark:bg-neutral-900/60 p-1 rounded-2xl border border-neutral-200/70 dark:border-neutral-800",children:[jsx("button",{type:"button",onClick:()=>b("dark"),className:`px-1.5 py-1 rounded-2xl text-[11px] font-medium transition-all ${I==="dark"?"bg-[#181818] text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Dark"}),jsx("button",{type:"button",onClick:()=>b("light"),className:`px-1.5 py-1 rounded-2xl text-[11px] font-medium transition-all ${I==="light"?"bg-white text-neutral-900 shadow-xs border border-neutral-200":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"White"}),jsx("button",{type:"button",onClick:()=>b("transparent"),className:`px-1.5 py-1 rounded-2xl text-[11px] font-medium transition-all ${I==="transparent"?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Clear"})]})]}),jsxs("div",{children:[jsx("span",{className:"text-[10px] font-semibold text-neutral-400 uppercase tracking-wider block mb-1",children:"Scale"}),jsx("div",{className:"grid grid-cols-3 gap-1 bg-neutral-100 dark:bg-neutral-900/60 p-1 rounded-2xl border border-neutral-200/70 dark:border-neutral-800",children:[1,2,3].map(ke=>jsxs("button",{type:"button",onClick:()=>v(ke),className:`px-1.5 py-1 rounded-2xl text-[11px] font-medium transition-all ${f===ke?"bg-primary text-white shadow-xs":"text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:[ke,"x"]},ke))})]}),jsx("div",{className:"h-[1px] bg-neutral-200/80 dark:bg-neutral-800"}),jsxs("div",{className:"space-y-1",children:[jsxs("button",{type:"button",onClick:U,className:"w-full flex items-center justify-between px-2 py-1.5 rounded-2xl bg-neutral-100 dark:bg-neutral-800/80 hover:bg-primary hover:text-white dark:hover:bg-primary dark:hover:text-white transition-colors cursor-pointer",children:[jsxs("div",{className:"flex items-center gap-1.5",children:[jsx(IconDownload,{size:13}),jsx("span",{children:"Download PNG"})]}),jsxs("span",{className:"text-[10px] opacity-75",children:[f,"x"]})]}),jsxs("button",{type:"button",onClick:G,className:"w-full flex items-center gap-1.5 px-2 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer text-neutral-700 dark:text-neutral-300",children:[jsx(IconCopy,{size:13}),jsx("span",{children:"Copy PNG to Clipboard"})]}),jsxs("button",{type:"button",onClick:Ne,className:"w-full flex items-center gap-1.5 px-2 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer text-neutral-700 dark:text-neutral-300",children:[jsx(IconCode,{size:13}),jsx("span",{children:"Download SVG Vector"})]})]})]})]}),jsxs("div",{className:"relative",onMouseEnter:()=>w("json"),children:[jsxs("button",{type:"button",className:"w-full flex items-center justify-between px-2.5 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2 text-neutral-700 dark:text-neutral-200 group-hover:text-primary",children:[jsx(IconCode,{size:14,className:"text-emerald-500"}),jsx("span",{children:"Current JSON"})]}),jsx(IconArrowRight,{size:12,className:"text-neutral-400"})]}),g==="json"&&jsxs("div",{className:"absolute left-full top-0 ml-1.5 w-48 rounded-xl bg-white/95 dark:bg-[#18181b]/95 backdrop-blur-md shadow-2xl border border-neutral-200/90 dark:border-neutral-800 p-1.5 text-xs space-y-1 animate-in fade-in-0 zoom-in-95 duration-100",children:[jsxs("button",{type:"button",onClick:ne,className:"w-full flex items-center gap-2 px-2 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer text-neutral-700 dark:text-neutral-300",children:[jsx(IconDownload,{size:13}),jsx("span",{children:"Download .json file"})]}),jsxs("button",{type:"button",onClick:le,className:"w-full flex items-center gap-2 px-2 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer text-neutral-700 dark:text-neutral-300",children:[jsx(IconCopy,{size:13}),jsx("span",{children:"Copy JSON to Clipboard"})]})]})]}),jsxs("div",{className:"relative",onMouseEnter:()=>w("grid"),children:[jsxs("button",{type:"button",className:"w-full flex items-center justify-between px-2.5 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2 text-neutral-700 dark:text-neutral-200 group-hover:text-primary",children:[jsx(IconGridPattern,{size:14,className:"text-blue-500"}),jsx("span",{children:"Grid Pattern"})]}),jsx(IconArrowRight,{size:12,className:"text-neutral-400"})]}),g==="grid"&&jsx("div",{className:"absolute left-full top-0 ml-1.5 w-44 rounded-xl bg-white/95 dark:bg-[#18181b]/95 backdrop-blur-md shadow-2xl border border-neutral-200/90 dark:border-neutral-800 p-1.5 text-xs space-y-0.5 animate-in fade-in-0 zoom-in-95 duration-100",children:[{id:"grid",label:"Mesh Grid (Default)"},{id:"dots",label:"Dots Grid"},{id:"cross",label:"Crosshairs"},{id:"none",label:"Clean Canvas"}].map(ke=>jsxs("button",{type:"button",onClick:()=>{h(ke.id),A(`Grid: ${ke.label}`);},className:`w-full flex items-center justify-between px-2 py-1.5 rounded-2xl transition-colors cursor-pointer ${d===ke.id?"bg-primary/10 text-primary font-semibold":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300"}`,children:[jsx("span",{children:ke.label}),d===ke.id&&jsx(IconCheck,{size:13,stroke:2.5})]},ke.id))})]}),jsx("div",{className:"h-[1px] bg-neutral-200/80 dark:bg-neutral-800 my-1"}),jsxs("button",{type:"button",onClick:()=>{s(),a(false);},className:"w-full flex items-center gap-2 px-2.5 py-1.5 rounded-2xl hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer text-neutral-700 dark:text-neutral-300",children:[jsx(IconFocusCentered,{size:14}),jsx("span",{children:"Reset Zoom (100%)"})]}),jsxs("button",{type:"button",onClick:()=>{a(false),c();},className:"w-full flex items-center gap-2 px-2.5 py-1.5 rounded-2xl hover:bg-red-50 dark:hover:bg-red-950/40 text-red-600 dark:text-red-400 transition-colors cursor-pointer",children:[jsx(IconTrash,{size:14}),jsx("span",{children:"Clear Whiteboard..."})]})]})}):null}function kn({isOpen:e,onClose:t,elements:r,selectedIds:o=[],onImportElements:c,boardName:d,canvasBackground:h="#ffffff",gridStyle:s="grid",uiConfig:n}){let p=n?.showExportPdf??true,i=n?.showExportPng??true,l=n?.showExportSvg??true,u=i||l,a=n?.showExportJson??true,x=n?.showImportJson??true,m=a||x,g=p?"pdf":u?"image":"json",[w,_]=useState(g),[S,E]=useState("portrait"),[z,D]=useState("original"),[P,I]=useState(false),[b,f]=useState(null),[v,C]=useState(2),[M,R]=useState(h),[J,oe]=useState("none"),[A,U]=useState("all"),[G,Ne]=useState(false),ne=useRef(null),le=r.filter(xe=>xe.type==="frame"),[ce,ke]=useState(false);if(e!==ce&&(ke(e),e))if(_(g),R(h),oe(s),f(null),o.length>0){let xe=le.find(O=>o.includes(O.id));U(xe?`frame:${xe.id}`:"selection");}else U("all");if(!e)return null;let Ie=()=>{if(A==="selection"&&o.length>0)return {targets:r.filter(xe=>o.includes(xe.id)),isSelection:true};if(A.startsWith("frame:")){let xe=A.replace("frame:",""),O=le.find(Z=>Z.id===xe);if(O)return {targets:[O,...Fr(O,r)],isSelection:false}}return {targets:r,isSelection:false}},we=async()=>{if(!(P||r.length===0))try{I(!0);let{targets:xe,isSelection:O}=Ie();if(xe.length===0)return;await _o(xe,{orientation:S,appearance:z,margin:24,boardName:d,canvasBackground:h,isDark:typeof document<"u"&&document.documentElement.classList.contains("dark"),isSelection:O,onProgress:(Z,Se)=>{f({current:Z,total:Se});}}),t();}catch(xe){console.error("Failed to export PDF:",xe);}finally{I(false),f(null);}},Ge=async()=>{try{if(Ne(!0),A.startsWith("frame:")){let Se=A.replace("frame:",""),K=le.find(de=>de.id===Se);if(K){let de=await vo(K,r,{scale:v,backgroundColor:M}),re=(K.frameLabel||"frame").toLowerCase().replace(/\s+/g,"-"),T=`${d.toLowerCase().replace(/\s+/g,"-")||"sketch"}-${re}.png`;vr(de,T,"image/png"),t();return}}let{targets:xe}=Ie(),O=await no(xe,{scale:v,backgroundColor:M,gridStyle:J}),Z=`${d.toLowerCase().replace(/\s+/g,"-")||"sketch"}.png`;vr(O,Z,"image/png"),t();}catch(xe){console.error("Failed to export PNG:",xe);}finally{Ne(false);}},Ue=()=>{try{let{targets:xe}=Ie(),O=wo(xe,{backgroundColor:M,gridStyle:J}),Z=`${d.toLowerCase().replace(/\s+/g,"-")||"sketch"}.svg`;vr(O,Z,"image/svg+xml"),t();}catch(xe){console.error("Failed to export SVG:",xe);}},ee=()=>{let xe=JSON.stringify(r,null,2),O=`${d.toLowerCase().replace(/\s+/g,"-")||"sketch"}.json`;vr(xe,O,"application/json"),t();},Pe=xe=>{let O=xe.target.files?.[0];if(!O)return;let Z=new FileReader;Z.onload=Se=>{try{let K=JSON.parse(Se.target?.result);Array.isArray(K)?(c(K),t()):alert("Invalid file format. Expected an array of Sketch elements.");}catch{alert("Failed to parse JSON file.");}},Z.readAsText(O);};return jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-xs animate-in fade-in duration-150",children:jsxs("div",{className:"w-full max-w-md bg-white dark:bg-neutral-900 rounded-[22px] shadow-2xl border-2 border-neutral-200/90 dark:border-neutral-800 overflow-hidden",children:[jsxs("div",{className:"flex items-center justify-between px-5 py-4 border-b border-neutral-200 dark:border-neutral-800",children:[jsxs("h2",{className:"text-base font-bold text-neutral-900 dark:text-neutral-100 flex items-center gap-2",children:[jsx(IconDownload,{size:18,className:"text-primary"}),"Export & Save"]}),jsx("button",{type:"button",onClick:t,className:"p-1 rounded-[8px] text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer",children:jsx(IconX,{size:18})})]}),(p||u||m)&&jsxs("div",{className:"flex border-b border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-950/40 p-1.5 gap-1.5",children:[p&&jsxs("button",{type:"button",onClick:()=>_("pdf"),className:`flex-1 flex items-center justify-center gap-1.5 py-2 rounded-[12px] text-xs font-semibold transition-colors cursor-pointer ${w==="pdf"?"bg-white dark:bg-neutral-800 text-primary shadow-xs border border-neutral-200 dark:border-neutral-700":"text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"}`,children:[jsx(IconFileTypePdf,{size:16}),"PDF (A4)"]}),u&&jsxs("button",{type:"button",onClick:()=>_("image"),className:`flex-1 flex items-center justify-center gap-1.5 py-2 rounded-[12px] text-xs font-semibold transition-colors cursor-pointer ${w==="image"?"bg-white dark:bg-neutral-800 text-primary shadow-xs border border-neutral-200 dark:border-neutral-700":"text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"}`,children:[jsx(IconFileTypePng,{size:16}),"Image ",i&&l?"(PNG/SVG)":i?"(PNG)":"(SVG)"]}),m&&jsxs("button",{type:"button",onClick:()=>_("json"),className:`flex-1 flex items-center justify-center gap-1.5 py-2 rounded-[12px] text-xs font-semibold transition-colors cursor-pointer ${w==="json"?"bg-white dark:bg-neutral-800 text-primary shadow-xs border border-neutral-200 dark:border-neutral-700":"text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white"}`,children:[jsx(IconFileCode,{size:16}),"JSON"]})]}),jsxs("div",{className:"p-5 space-y-4",children:[w!=="json"&&jsxs("div",{children:[jsxs("label",{className:"text-xs font-semibold text-neutral-600 dark:text-neutral-400 block mb-1.5 flex items-center justify-between",children:[jsx("span",{children:"Export Scope"}),le.length>0&&jsxs("span",{className:"text-[10px] text-primary font-medium flex items-center gap-1",children:[jsx(IconLayout,{size:12}),le.length," frame",le.length>1?"s":""," detected"]})]}),jsxs("div",{className:"relative",children:[jsxs("select",{value:A,onChange:xe=>U(xe.target.value),className:"w-full py-2 px-3 rounded-[10px] border border-neutral-200 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-800 text-xs font-medium text-neutral-800 dark:text-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/40 appearance-none cursor-pointer",children:[jsx("option",{value:"all",children:"Entire Canvas (All Elements)"}),o.length>0&&jsxs("option",{value:"selection",children:["Selected Elements (",o.length," item",o.length>1?"s":"",")"]}),le.length>0&&jsx("optgroup",{label:"Frames / Artboards",children:le.map((xe,O)=>jsxs("option",{value:`frame:${xe.id}`,children:["\u{1F5BC}\uFE0F ",xe.frameLabel||`Frame ${O+1}`," (",Math.round(xe.width),"\xD7",Math.round(xe.height),")"]},xe.id))})]}),jsx("div",{className:"absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-neutral-400 text-xs",children:"\u25BC"})]})]}),w==="pdf"?jsxs(Fragment,{children:[jsxs("div",{className:"flex items-center justify-between px-3 py-2 rounded-[10px] bg-neutral-100 dark:bg-neutral-800/60 border border-neutral-200/80 dark:border-neutral-800 text-xs",children:[jsx("span",{className:"text-neutral-600 dark:text-neutral-400 font-medium",children:"Paper Size"}),jsxs("span",{className:"font-semibold text-neutral-900 dark:text-neutral-100 flex items-center gap-1.5",children:[jsx("span",{className:"px-1.5 py-0.5 rounded bg-primary/10 text-primary text-[10px] font-bold",children:"A4"}),jsx("span",{children:"210 \xD7 297 mm"})]})]}),jsxs("div",{children:[jsx("label",{className:"text-xs font-semibold text-neutral-600 dark:text-neutral-400 block mb-1.5",children:"Orientation"}),jsxs("div",{className:"grid grid-cols-2 gap-2 text-xs",children:[jsxs("button",{type:"button",onClick:()=>E("portrait"),className:`py-2 px-3 rounded-[10px] border font-medium flex items-center justify-center gap-2 transition-colors cursor-pointer ${S==="portrait"?"bg-primary/10 border-primary text-primary font-bold shadow-2xs":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:[jsx("svg",{width:"14",height:"18",viewBox:"0 0 14 18",fill:"none",className:"shrink-0",children:jsx("rect",{x:"1",y:"1",width:"12",height:"16",rx:"2",stroke:"currentColor",strokeWidth:"1.5"})}),jsx("span",{children:"Portrait"})]}),jsxs("button",{type:"button",onClick:()=>E("landscape"),className:`py-2 px-3 rounded-[10px] border font-medium flex items-center justify-center gap-2 transition-colors cursor-pointer ${S==="landscape"?"bg-primary/10 border-primary text-primary font-bold shadow-2xs":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:[jsx("svg",{width:"18",height:"14",viewBox:"0 0 18 14",fill:"none",className:"shrink-0",children:jsx("rect",{x:"1",y:"1",width:"16",height:"12",rx:"2",stroke:"currentColor",strokeWidth:"1.5"})}),jsx("span",{children:"Landscape"})]})]})]}),jsxs("div",{children:[jsx("label",{className:"text-xs font-semibold text-neutral-600 dark:text-neutral-400 block mb-1.5",children:"Appearance"}),jsxs("div",{className:"grid grid-cols-3 gap-2 text-xs",children:[jsxs("button",{type:"button",onClick:()=>D("original"),className:`py-2 px-2 rounded-[10px] border font-medium flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${z==="original"?"bg-primary/10 border-primary text-primary font-bold shadow-2xs":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:[jsx("span",{className:"w-2.5 h-2.5 rounded-full border border-black/10 dark:border-white/10 shrink-0",style:{backgroundColor:h}}),jsx("span",{children:"Original"})]}),jsxs("button",{type:"button",onClick:()=>D("light"),className:`py-2 px-2 rounded-[10px] border font-medium flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${z==="light"?"bg-primary/10 border-primary text-primary font-bold shadow-2xs":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:[jsx(IconSun,{size:13,className:"text-amber-500"}),jsx("span",{children:"Light"})]}),jsxs("button",{type:"button",onClick:()=>D("dark"),className:`py-2 px-2 rounded-[10px] border font-medium flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${z==="dark"?"bg-primary/10 border-primary text-primary font-bold shadow-2xs":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:[jsx(IconMoon,{size:13,className:"text-primary"}),jsx("span",{children:"Dark"})]})]})]}),jsxs("div",{className:"flex items-center justify-between text-[11px] text-neutral-500 dark:text-neutral-400 px-1 pt-1",children:[jsx("span",{children:"Page Margins"}),jsx("span",{className:"font-mono",children:"24 pt"})]}),jsx("div",{className:"pt-2",children:jsxs("button",{type:"button",onClick:we,disabled:P||r.length===0,className:"w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-[12px] bg-primary hover:bg-primary/90 text-primary-foreground text-xs font-semibold shadow-md shadow-primary/25 disabled:opacity-50 transition-colors cursor-pointer",children:[jsx(IconFileTypePdf,{size:16}),jsx("span",{children:P?b?`Generating PDF (Page ${b.current} of ${b.total})\u2026`:"Preparing PDF\u2026":"Download PDF"})]})})]}):w==="image"?jsxs(Fragment,{children:[jsxs("div",{children:[jsxs("div",{className:"flex items-center justify-between mb-1.5",children:[jsx("label",{className:"text-xs font-semibold text-neutral-600 dark:text-neutral-400",children:"Background Color"}),M!=="transparent"&&jsx("span",{className:"text-[10px] font-mono text-neutral-400",children:M})]}),jsx("div",{className:"grid grid-cols-4 gap-2 text-xs",children:[{label:"Canvas",val:h},{label:"White",val:"#ffffff"},{label:"Dark",val:"#121212"},{label:"Transparent",val:"transparent"}].map(xe=>{let O=M===xe.val;return jsxs("button",{type:"button",onClick:()=>R(xe.val),className:`py-2 px-1 rounded-[10px] border font-medium flex items-center justify-center gap-1.5 transition-colors cursor-pointer ${O?"bg-primary/10 border-primary text-primary font-bold shadow-2xs":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:[xe.val!=="transparent"&&jsx("span",{className:"w-3 h-3 rounded-full border border-black/10 dark:border-white/10 shrink-0",style:{backgroundColor:xe.val}}),jsx("span",{className:"truncate",children:xe.label})]},xe.label)})})]}),jsxs("div",{children:[jsx("label",{className:"text-xs font-semibold text-neutral-600 dark:text-neutral-400 block mb-1.5",children:"Grid Pattern"}),jsx("div",{className:"grid grid-cols-4 gap-2 text-xs",children:[{label:"Mesh Grid",val:"grid"},{label:"Dots",val:"dots"},{label:"Cross",val:"cross"},{label:"None",val:"none"}].map(xe=>jsx("button",{type:"button",onClick:()=>oe(xe.val),className:`py-2 rounded-[10px] border font-medium transition-colors cursor-pointer ${J===xe.val?"bg-primary/10 border-primary text-primary font-bold":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:xe.label},xe.val))})]}),jsxs("div",{children:[jsx("label",{className:"text-xs font-semibold text-neutral-600 dark:text-neutral-400 block mb-1.5",children:"Scale / Resolution"}),jsx("div",{className:"grid grid-cols-3 gap-2 text-xs",children:[{label:"1x (Standard)",val:1},{label:"2x (HD Crisp)",val:2},{label:"3x (Ultra HD)",val:3}].map(xe=>jsx("button",{type:"button",onClick:()=>C(xe.val),className:`py-2 rounded-[10px] border font-medium transition-colors cursor-pointer ${v===xe.val?"bg-primary/10 border-primary text-primary font-bold":"border-neutral-200 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,children:xe.label},xe.val))})]}),jsxs("div",{className:`grid ${i&&l?"grid-cols-2":"grid-cols-1"} gap-3 pt-2`,children:[i&&jsxs("button",{type:"button",onClick:Ge,disabled:G||r.length===0,className:"flex items-center justify-center gap-2 py-2.5 px-4 rounded-[12px] bg-primary hover:bg-primary/90 text-primary-foreground text-xs font-semibold shadow-md shadow-primary/25 disabled:opacity-50 transition-colors cursor-pointer",children:[jsx(IconFileTypePng,{size:16}),G?"Rendering...":"Export PNG"]}),l&&jsxs("button",{type:"button",onClick:Ue,disabled:r.length===0,className:"flex items-center justify-center gap-2 py-2.5 px-4 rounded-[12px] border-2 border-neutral-300 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-800 dark:text-neutral-200 text-xs font-semibold disabled:opacity-50 transition-colors cursor-pointer",children:[jsx(IconFileTypeSvg,{size:16}),"Export SVG"]})]})]}):jsxs("div",{className:"space-y-4",children:[jsx("p",{className:"text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed",children:"Save your complete workspace as a lightweight JSON file so you can reopen, share, or edit it at any time."}),a&&jsxs("button",{type:"button",onClick:ee,disabled:r.length===0,className:"w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-[12px] bg-primary hover:bg-primary/90 text-primary-foreground text-xs font-semibold shadow-md shadow-primary/25 disabled:opacity-50 transition-colors cursor-pointer",children:[jsx(IconDownload,{size:16}),"Download Project (.json)"]}),a&&x&&jsxs("div",{className:"relative flex items-center justify-center",children:[jsx("div",{className:"w-full border-t border-neutral-200 dark:border-neutral-800"}),jsx("span",{className:"absolute px-2 bg-white dark:bg-neutral-900 text-[11px] text-neutral-400",children:"or"})]}),x&&jsxs(Fragment,{children:[jsx("input",{ref:ne,type:"file",accept:".json",onChange:Pe,className:"hidden"}),jsxs("button",{type:"button",onClick:()=>ne.current?.click(),className:"w-full flex items-center justify-center gap-2 py-2.5 px-4 rounded-[12px] border-2 border-neutral-300 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-800 dark:text-neutral-200 text-xs font-semibold transition-colors cursor-pointer",children:[jsx(IconUpload,{size:16}),"Open Existing Project (.json)"]})]})]})]})]})})}function qr({value:e,side:t,className:r="w-6 h-4",strokeWidth:o=1.6}){return jsx("svg",{viewBox:"0 0 28 20",className:r,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t==="start"?jsxs(Fragment,{children:[e==="none"&&jsxs(Fragment,{children:[jsx("line",{x1:"10",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"4",y1:"7",x2:"8",y2:"13",stroke:"currentColor",strokeWidth:1.4,strokeLinecap:"round"}),jsx("line",{x1:"8",y1:"7",x2:"4",y2:"13",stroke:"currentColor",strokeWidth:1.4,strokeLinecap:"round"})]}),e==="arrow"&&jsxs(Fragment,{children:[jsx("line",{x1:"6",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 12 5.5 L 6 10 L 12 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"})]}),e==="triangle"&&jsxs(Fragment,{children:[jsx("line",{x1:"12",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"12,5 4.5,10 12,15",fill:"currentColor"})]}),e==="barbed"&&jsxs(Fragment,{children:[jsx("line",{x1:"10",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"13,5 4.5,10 13,15 10,10",fill:"currentColor"})]}),e==="dot"&&jsxs(Fragment,{children:[jsx("line",{x1:"10",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("circle",{cx:"7",cy:"10",r:"3.5",fill:"currentColor"})]}),e==="circle"&&jsxs(Fragment,{children:[jsx("line",{x1:"11",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("circle",{cx:"7",cy:"10",r:"3.5",stroke:"currentColor",strokeWidth:o,fill:"none"})]}),e==="diamond"&&jsxs(Fragment,{children:[jsx("line",{x1:"14",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"5,10 9.5,5.5 14,10 9.5,14.5",fill:"currentColor"})]}),e==="diamond_outline"&&jsxs(Fragment,{children:[jsx("line",{x1:"14",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"5,10 9.5,5.5 14,10 9.5,14.5",stroke:"currentColor",strokeWidth:o,fill:"none",strokeLinejoin:"round"})]}),e==="bar"&&jsxs(Fragment,{children:[jsx("line",{x1:"6",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"6",y1:"5",x2:"6",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_one"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"8",y1:"5",x2:"8",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_many"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 12 5.5 L 4 10 L 12 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"})]}),e==="crowfoot_one_many"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 11 5.5 L 4 10 L 11 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"}),jsx("line",{x1:"15",y1:"5",x2:"15",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_strictly_one"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"7",y1:"5",x2:"7",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"}),jsx("line",{x1:"12",y1:"5",x2:"12",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_zero_one"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"6",y1:"5",x2:"6",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"}),jsx("circle",{cx:"13",cy:"10",r:"3",stroke:"currentColor",strokeWidth:o,fill:"none"})]}),e==="crowfoot_zero_many"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 11 5.5 L 4 10 L 11 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"}),jsx("circle",{cx:"16",cy:"10",r:"3",stroke:"currentColor",strokeWidth:o,fill:"none"})]})]}):jsxs(Fragment,{children:[e==="none"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"18",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"20",y1:"7",x2:"24",y2:"13",stroke:"currentColor",strokeWidth:1.4,strokeLinecap:"round"}),jsx("line",{x1:"24",y1:"7",x2:"20",y2:"13",stroke:"currentColor",strokeWidth:1.4,strokeLinecap:"round"})]}),e==="arrow"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"22",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 16 5.5 L 22 10 L 16 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"})]}),e==="triangle"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"16",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"16,5 23.5,10 16,15",fill:"currentColor"})]}),e==="barbed"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"18",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"15,5 23.5,10 15,15 18,10",fill:"currentColor"})]}),e==="dot"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"18",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("circle",{cx:"21",cy:"10",r:"3.5",fill:"currentColor"})]}),e==="circle"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"17",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("circle",{cx:"21",cy:"10",r:"3.5",stroke:"currentColor",strokeWidth:o,fill:"none"})]}),e==="diamond"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"14",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"23,10 18.5,5.5 14,10 18.5,14.5",fill:"currentColor"})]}),e==="diamond_outline"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"14",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("polygon",{points:"23,10 18.5,5.5 14,10 18.5,14.5",stroke:"currentColor",strokeWidth:o,fill:"none",strokeLinejoin:"round"})]}),e==="bar"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"22",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"22",y1:"5",x2:"22",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_one"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"20",y1:"5",x2:"20",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_many"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 16 5.5 L 24 10 L 16 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"})]}),e==="crowfoot_one_many"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 17 5.5 L 24 10 L 17 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"}),jsx("line",{x1:"13",y1:"5",x2:"13",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_strictly_one"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"21",y1:"5",x2:"21",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"}),jsx("line",{x1:"16",y1:"5",x2:"16",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"})]}),e==="crowfoot_zero_one"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("line",{x1:"22",y1:"5",x2:"22",y2:"15",stroke:"currentColor",strokeWidth:1.8,strokeLinecap:"round"}),jsx("circle",{cx:"15",cy:"10",r:"3",stroke:"currentColor",strokeWidth:o,fill:"none"})]}),e==="crowfoot_zero_many"&&jsxs(Fragment,{children:[jsx("line",{x1:"4",y1:"10",x2:"24",y2:"10",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round"}),jsx("path",{d:"M 17 5.5 L 24 10 L 17 14.5",stroke:"currentColor",strokeWidth:o,strokeLinecap:"round",strokeLinejoin:"round"}),jsx("circle",{cx:"12",cy:"10",r:"3",stroke:"currentColor",strokeWidth:o,fill:"none"})]})]})})}function Ko({side:e,currentValue:t,onChange:r,onClose:o,className:c="",style:d}){let[h,s]=useState(false);useEffect(()=>{let u=a=>{let x=document.activeElement;if(x&&(x.tagName==="INPUT"||x.tagName==="TEXTAREA"))return;if(a.key==="Escape"){o();return}let m=a.key.toLowerCase(),g=bo.find(w=>w.shortcut===m);g&&(a.preventDefault(),r(g.value),o());};return window.addEventListener("keydown",u),()=>window.removeEventListener("keydown",u)},[r,o]);let n=bo.filter(u=>u.category==="standard"),p=bo.filter(u=>u.category==="more"),i=bo.filter(u=>u.category==="cardinality"),l=u=>{let a=t===u.value;return jsxs("button",{type:"button",onClick:()=>{r(u.value),o();},title:`${u.label}${u.shortcut?` (${u.shortcut})`:""}`,className:`relative w-8 h-8 rounded-[8px] flex items-center justify-center transition-all cursor-pointer ${a?"bg-primary/15 border border-primary text-primary shadow-2xs font-semibold":"border border-neutral-200/70 dark:border-neutral-800 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"}`,children:[jsx(qr,{value:u.value,side:e,className:"w-5 h-3.5"}),u.shortcut&&jsx("span",{className:"absolute right-1 bottom-0.5 text-[8px] font-mono leading-none text-neutral-400 dark:text-neutral-500 pointer-events-none",children:u.shortcut})]},u.value)};return jsxs("div",{style:d,className:`z-50 bg-white/95 dark:bg-[#181818]/95 backdrop-blur-md rounded-[14px] shadow-lg border border-neutral-200/90 dark:border-neutral-800 p-2.5 space-y-2.5 select-none animate-in fade-in zoom-in-95 duration-100 ${c}`,children:[jsx("div",{className:"grid grid-cols-4 gap-1.5",children:n.map(l)}),jsxs("div",{className:"pt-0.5",children:[jsxs("button",{type:"button",onClick:()=>s(!h),className:"flex items-center justify-between w-full py-1 px-1 text-[11px] font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200 transition-colors",children:[jsx("span",{children:"More options"}),h?jsx(IconChevronUp,{size:14}):jsx(IconChevronDown,{size:14})]}),h&&jsxs("div",{className:"pt-1.5 space-y-2.5 animate-in fade-in duration-100",children:[jsx("div",{className:"grid grid-cols-4 gap-1.5",children:p.map(l)}),jsxs("div",{children:[jsx("span",{className:"text-[10px] font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider block mb-1 px-1",children:"Cardinality"}),jsx("div",{className:"grid grid-cols-4 gap-1.5",children:i.map(l)})]})]})]})]})}function wn({selectedElements:e,updateSelectedElements:t,deleteSelectedElements:r,duplicateSelectedElements:o,groupSelectedElements:c,ungroupSelectedElements:d,alignSelectedElements:h,distributeSelectedElements:s,copySelectedImage:n,bringToFront:p,sendToBack:i,camera:l,worldToScreen:u,onEditText:a,onToggleSpotlight:x}){let{resolvedTheme:m}=nr(),[g,w]=useState(false);useEffect(()=>{w(true);},[]);let _=g&&m==="dark",[S,E]=useState("none"),z=useRef(null),D=useRef(null),P=useRef(null),I=useRef(null),b=useRef(null),f=e[0],v=e.length===1,C=v&&!!(f&&f.type==="frame"),M=v&&!!(f&&f.type==="table"),R=v&&!!(f&&(f.type==="arrow"||f.type==="line")),J=v&&!!(f&&["text","sticky","rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","frame","table"].includes(f.type)),oe=v&&!!(f&&(f.type==="text"||f.type==="sticky")),A=v&&!!(f&&f.type==="sticky"),U=v&&!!(f&&f.type==="text"),G=v&&!!(f&&f.type==="image"),Ne=v&&!!(f&&["rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","table","arrow","line","pen"].includes(f.type));if(useEffect(()=>{let $=fe=>{let be=fe.target;z.current&&z.current.contains(be)||D.current&&D.current.contains(be)||P.current&&P.current.contains(be)||I.current&&I.current.contains(be)||b.current&&b.current.contains(be)||E("none");},te=fe=>{if(!f||fe.target instanceof HTMLInputElement||fe.target instanceof HTMLTextAreaElement||fe.target.isContentEditable||fe.ctrlKey||fe.metaKey||fe.altKey||fe.shiftKey)return;if(fe.key==="Escape"){E("none");return}let be=Do.find(ue=>ue.shortcut===fe.key.toLowerCase());be&&(fe.preventDefault(),S==="textColor"?t({strokeColor:be.hex}):S==="color"&&t(A?{fillColor:be.hex,stickyColor:be.hex}:{strokeColor:be.hex}),E("none"));};return S!=="none"&&(document.addEventListener("mousedown",$),window.addEventListener("keydown",te)),()=>{document.removeEventListener("mousedown",$),window.removeEventListener("keydown",te);}},[S,f,A,t]),!f||e.length===0)return null;let ne=()=>{if(!f||f.type!=="table")return;let $=Math.max(1,f.rows||3),be=[...f.rowHeights&&f.rowHeights.length===$?[...f.rowHeights]:Array.from({length:$},()=>Math.abs(f.height)/$),36],ue=be.reduce((F,ve)=>F+ve,0);t({rows:$+1,rowHeights:be,height:f.height>=0?ue:-ue});},le=()=>{if(!f||f.type!=="table")return;let $=Math.max(1,f.rows||3);if($<=1)return;let fe=(f.rowHeights&&f.rowHeights.length===$?[...f.rowHeights]:Array.from({length:$},()=>Math.abs(f.height)/$)).slice(0,$-1),be=fe.reduce((ve,ae)=>ve+ae,0),ue={...f.cells||{}},F=$-1;Object.keys(ue).forEach(ve=>{ve.startsWith(`${F}_`)&&delete ue[ve];}),t({rows:$-1,rowHeights:fe,height:f.height>=0?be:-be,cells:ue});},ce=()=>{if(!f||f.type!=="table")return;let $=Math.max(1,f.cols||3),be=[...f.colWidths&&f.colWidths.length===$?[...f.colWidths]:Array.from({length:$},()=>Math.abs(f.width)/$),110],ue=be.reduce((F,ve)=>F+ve,0);t({cols:$+1,colWidths:be,width:f.width>=0?ue:-ue});},ke=()=>{if(!f||f.type!=="table")return;let $=Math.max(1,f.cols||3);if($<=1)return;let fe=(f.colWidths&&f.colWidths.length===$?[...f.colWidths]:Array.from({length:$},()=>Math.abs(f.width)/$)).slice(0,$-1),be=fe.reduce((ve,ae)=>ve+ae,0),ue={...f.cells||{}},F=$-1;Object.keys(ue).forEach(ve=>{ve.endsWith(`_${F}`)&&delete ue[ve];}),t({cols:$-1,colWidths:fe,width:f.width>=0?be:-be,cells:ue});},Ie=1/0,we=1/0,Ge=-1/0,Ue=-1/0;e.forEach($=>{let te=bt($);Ie=Math.min(Ie,te.x),we=Math.min(we,te.y),Ge=Math.max(Ge,te.x+te.width),Ue=Math.max(Ue,te.y+te.height);});let ee=u({x:Ie,y:we}),Pe=u({x:Ge,y:Ue}),xe=(ee.x+Pe.x)/2,O=ee.y,Z=Pe.y,Se=175,K=Pe.x-ee.x,de=ee.x+K*.4,re=xe-14,T=Math.min(de,re),L=T>=Se+16,q=O-70<64,k,pe,V;return L?(k=T,pe=q?Z+18:O-68,V="-translate-x-full"):(k=16,pe=O-70>=64?O-68:Z+18,V=""),jsx("div",{className:`fixed z-40 ${V} pointer-events-auto transition-all duration-75 select-none`,style:{left:`${k}px`,top:`${pe}px`},children:jsxs("div",{className:"fk-card relative flex items-center gap-1 p-1 bg-white/95 dark:bg-[#181818]/95 backdrop-blur-md rounded-[12px] border border-black/[0.04] dark:border-white/[0.05] shadow-[0_10px_30px_-4px_rgba(0,0,0,0.08)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.65)] text-neutral-700 dark:text-neutral-300 animate-in fade-in zoom-in-95 duration-100",children:[J&&a&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:()=>a(f),title:C?"Rename Frame (Double Click)":M?"Edit Table Cells (Double Click)":"Edit Text",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:text-primary transition-colors cursor-pointer",children:jsx(IconPencil,{size:15})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),C&&jsxs(Fragment,{children:[jsxs("div",{className:"relative",ref:S==="framePreset"?P:void 0,children:[jsxs("button",{type:"button",onClick:()=>E(S==="framePreset"?"none":"framePreset"),title:"Change Frame Preset / Aspect Ratio",className:"flex items-center gap-1 px-2 py-1 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-xs font-semibold text-neutral-700 dark:text-neutral-300 transition-colors",children:[jsx(IconAspectRatio,{size:14,className:"text-primary"}),jsxs("span",{className:"text-[10.5px]",children:[Math.round(Math.abs(f.width||0)),"\xD7",Math.round(Math.abs(f.height||0))]})]}),S==="framePreset"&&jsxs("div",{className:"absolute left-1/2 -translate-x-1/2 z-50 p-2 bg-white/95 dark:bg-[#181818]/95 backdrop-blur-md rounded-[14px] shadow-lg border border-neutral-200/90 dark:border-neutral-800 animate-in fade-in zoom-in-95 duration-100 w-44",style:{[q?"top":"bottom"]:"100%",margin:"6px 0"},children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1.5 px-1",children:"Frame Presets"}),jsx("div",{className:"space-y-1",children:[{label:"16:9 Slide",w:800,h:450},{label:"1920\xD71080 FHD",w:1920,h:1080},{label:"Mobile (390\xD7844)",w:390,h:844},{label:"16:10 Laptop",w:1440,h:900},{label:"4:3 Standard",w:1024,h:768},{label:"1:1 Square",w:800,h:800}].map($=>{let te=Math.round(Math.abs(f.width||0))===$.w&&Math.round(Math.abs(f.height||0))===$.h;return jsxs("button",{type:"button",onClick:()=>{t({width:$.w,height:$.h}),E("none");},className:`w-full flex items-center justify-between px-2 py-1.5 rounded-[7px] text-xs transition-colors ${te?"bg-primary text-primary-foreground font-semibold":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300"}`,children:[jsx("span",{children:$.label}),jsxs("span",{className:"text-[9.5px] opacity-70 font-mono font-normal",children:[$.w,"\xD7",$.h]})]},$.label)})})]})]}),jsx("button",{type:"button",onClick:()=>t({aspectRatioLocked:!f.aspectRatioLocked}),title:f.aspectRatioLocked?"Unlock Aspect Ratio":"Lock Aspect Ratio",className:`p-1.5 rounded-[8px] transition-colors ${f.aspectRatioLocked?"bg-primary/15 text-primary":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-500"}`,children:f.aspectRatioLocked?jsx(IconLock,{size:15}):jsx(IconLockOpen,{size:15})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),M&&jsxs(Fragment,{children:[jsxs("div",{className:"relative",ref:S==="tablePreset"?I:void 0,children:[jsxs("button",{type:"button",onClick:()=>E(S==="tablePreset"?"none":"tablePreset"),title:"Change Table Layout Preset / Style",className:"flex items-center gap-1 px-2 py-1 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-xs font-semibold text-neutral-700 dark:text-neutral-300 transition-colors",children:[jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-primary",children:[jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"2"}),jsx("line",{x1:"3",y1:"10",x2:"21",y2:"10"}),jsx("line",{x1:"10",y1:"4",x2:"10",y2:"20"})]}),jsxs("span",{className:"text-[10.5px]",children:[f.rows||3,"\xD7",f.cols||3]})]}),S==="tablePreset"&&jsxs("div",{className:"absolute left-1/2 -translate-x-1/2 z-50 p-2 bg-white/95 dark:bg-[#181818]/95 backdrop-blur-md rounded-[14px] shadow-lg border border-neutral-200/90 dark:border-neutral-800 animate-in fade-in zoom-in-95 duration-100 w-48",style:{[q?"top":"bottom"]:"100%",margin:"6px 0"},children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1.5 px-1",children:"Table Styles"}),jsx("div",{className:"space-y-1",children:[{id:"default",label:"Clean / Minimal",desc:"Subtle borders"},{id:"header-accent",label:"Feature Matrix",desc:"Highlighted header row"},{id:"swot",label:"SWOT Matrix",desc:"4 pastel quadrants"},{id:"kanban",label:"Kanban / Sprint",desc:"Column headers"},{id:"zebra",label:"Zebra Striped",desc:"Alternating rows"}].map($=>{let te=(f.tableStyle||"default")===$.id;return jsxs("button",{type:"button",onClick:()=>{t({tableStyle:$.id}),E("none");},className:`w-full flex flex-col text-left px-2 py-1.5 rounded-[7px] text-xs transition-colors ${te?"bg-primary text-primary-foreground font-semibold":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300"}`,children:[jsxs("div",{className:"flex items-center justify-between w-full",children:[jsx("span",{children:$.label}),te&&jsx("span",{className:"text-[10px]",children:"\u2713"})]}),jsx("span",{className:`text-[9.5px] ${te?"text-primary-foreground/80":"text-neutral-400 dark:text-neutral-500"}`,children:$.desc})]},$.id)})})]})]}),jsx("button",{type:"button",onClick:()=>t({hasHeaderRow:!f.hasHeaderRow}),title:f.hasHeaderRow?"Disable Header Row":"Enable Header Row",className:`px-1.5 py-1 rounded-[6px] text-[10.5px] font-medium transition-colors ${f.hasHeaderRow?"bg-primary/15 text-primary font-semibold":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-500"}`,children:"Header"}),jsxs("div",{className:"flex items-center gap-0.5 bg-neutral-100/80 dark:bg-neutral-800/80 rounded-[7px] p-0.5",children:[jsx("button",{type:"button",onClick:le,disabled:(f.rows||3)<=1,title:"Delete Row",className:"w-5 h-5 flex items-center justify-center rounded-[5px] hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300 disabled:opacity-30 disabled:pointer-events-none text-[10px] font-bold",children:"-R"}),jsx("button",{type:"button",onClick:ne,title:"Add Row Below",className:"w-5 h-5 flex items-center justify-center rounded-[5px] hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300 text-[10px] font-bold",children:"+R"})]}),jsxs("div",{className:"flex items-center gap-0.5 bg-neutral-100/80 dark:bg-neutral-800/80 rounded-[7px] p-0.5",children:[jsx("button",{type:"button",onClick:ke,disabled:(f.cols||3)<=1,title:"Delete Column",className:"w-5 h-5 flex items-center justify-center rounded-[5px] hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300 disabled:opacity-30 disabled:pointer-events-none text-[10px] font-bold",children:"-C"}),jsx("button",{type:"button",onClick:ce,title:"Add Column Right",className:"w-5 h-5 flex items-center justify-center rounded-[5px] hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300 text-[10px] font-bold",children:"+C"})]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),!U&&jsxs("div",{className:"relative",ref:S==="color"?z:void 0,children:[jsx("button",{type:"button",onClick:()=>E(S==="color"?"none":"color"),title:A?"Note Background Color":"Stroke Color",className:"flex items-center justify-center p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",children:jsx("span",{className:"w-3.5 h-3.5 rounded-[4px] border border-neutral-400/50 shadow-2xs",style:{backgroundColor:A?f.stickyColor||f.fillColor||"#fef08a":f.strokeColor&&f.strokeColor!=="transparent"?Et(f.strokeColor,_):f.fillColor&&f.fillColor!=="transparent"?Nr(f.fillColor,"solid",_):"#0b6eff"}})}),S==="color"&&jsxs("div",{className:`absolute left-1/2 -translate-x-1/2 z-50 p-2 bg-white/95 dark:bg-[#181818]/95 backdrop-blur-md rounded-[12px] shadow-lg border border-neutral-200/90 dark:border-neutral-800 animate-in fade-in zoom-in-95 duration-100 ${q?"top-full mt-2":"bottom-full mb-2"}`,style:{minWidth:"162px"},children:[jsx("div",{className:"text-[10px] font-semibold text-neutral-500 dark:text-neutral-400 mb-1.5 px-0.5 select-none",children:A?"Note Color":"Color"}),jsx("div",{className:"grid grid-cols-5 gap-1.5",children:Do.map($=>{let te=A?f.fillColor===$.hex||f.stickyColor===$.hex:f.strokeColor===$.hex;return jsx("button",{type:"button",onClick:()=>{t(A?{fillColor:$.hex,stickyColor:$.hex,strokeColor:void 0}:{strokeColor:$.hex}),E("none");},title:`${$.name}${$.shortcut?` (${$.shortcut})`:""}`,className:`relative w-6 h-6 rounded-[5px] border border-neutral-300/80 dark:border-neutral-700/80 transition-all hover:scale-110 active:scale-95 flex items-end justify-end p-0.5 ${te?"ring-2 ring-primary ring-offset-1 dark:ring-offset-[#181818]":""}`,style:{backgroundColor:Et($.hex,_)},children:$.shortcut&&jsx("span",{className:"text-[8px] font-mono leading-none opacity-40 text-neutral-900 dark:text-white pointer-events-none",children:$.shortcut})},$.name)})})]})]}),oe&&jsxs(Fragment,{children:[A&&jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"}),jsxs("div",{className:"relative",ref:S==="textColor"?z:void 0,children:[jsxs("button",{type:"button",onClick:()=>E(S==="textColor"?"none":"textColor"),title:"Text Color",className:"flex flex-col items-center justify-center w-7 h-7 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",children:[jsx("span",{className:"text-[12px] font-extrabold leading-none",children:"A"}),jsx("span",{className:"w-3.5 h-[2.5px] rounded-full mt-0.5",style:{backgroundColor:Et(f.strokeColor||"#713f12",_)}})]}),S==="textColor"&&jsxs("div",{className:`absolute left-1/2 -translate-x-1/2 z-50 p-2 bg-white/95 dark:bg-[#181818]/95 backdrop-blur-md rounded-[12px] shadow-lg border border-neutral-200/90 dark:border-neutral-800 animate-in fade-in zoom-in-95 duration-100 ${q?"top-full mt-2":"bottom-full mb-2"}`,style:{minWidth:"162px"},children:[jsx("div",{className:"text-[10px] font-semibold text-neutral-500 dark:text-neutral-400 mb-1.5 px-0.5 select-none",children:"Text Color"}),jsx("div",{className:"grid grid-cols-5 gap-1.5",children:Do.map($=>{let te=f.strokeColor===$.hex;return jsx("button",{type:"button",onClick:()=>{t({strokeColor:$.hex}),E("none");},title:`${$.name}${$.shortcut?` (${$.shortcut})`:""}`,className:`relative w-6 h-6 rounded-[5px] border border-neutral-300/80 dark:border-neutral-700/80 transition-all hover:scale-110 active:scale-95 flex items-end justify-end p-0.5 ${te?"ring-2 ring-primary ring-offset-1 dark:ring-offset-[#181818]":""}`,style:{backgroundColor:Et($.hex,_)},children:$.shortcut&&jsx("span",{className:"text-[8px] font-mono leading-none opacity-40 text-neutral-900 dark:text-white pointer-events-none",children:$.shortcut})},$.name)})})]})]})]}),R&&jsxs(Fragment,{children:[jsxs("div",{className:"flex items-center gap-0.5 bg-neutral-100/80 dark:bg-neutral-800/80 rounded-[7px] p-0.5",children:[jsx("button",{type:"button",onClick:()=>t({arrowType:"straight"}),title:"Straight Line / Arrow",className:`w-6 h-6 flex items-center justify-center rounded-[5px] transition-all cursor-pointer ${(f.arrowType||"straight")==="straight"?"bg-primary text-white shadow-xs font-semibold":"hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",children:jsx("line",{x1:"4",y1:"20",x2:"20",y2:"4"})})}),jsx("button",{type:"button",onClick:()=>t({arrowType:"curved"}),title:"Single Curved (1 Control Handle)",className:`w-6 h-6 flex items-center justify-center rounded-[5px] transition-all cursor-pointer ${f.arrowType==="curved"?"bg-primary text-white shadow-xs font-semibold":"hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",children:jsx("path",{d:"M4 20 Q 12 4 20 4"})})}),jsx("button",{type:"button",onClick:()=>t({arrowType:"elbow"}),title:"Double Curved / S-Curve (2 Control Handles)",className:`w-6 h-6 flex items-center justify-center rounded-[5px] transition-all cursor-pointer ${f.arrowType==="elbow"?"bg-primary text-white shadow-xs font-semibold":"hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",children:jsx("path",{d:"M4 20 C 8 20, 16 4, 20 4"})})})]}),jsxs("div",{className:"flex items-center gap-0.5 bg-neutral-100/80 dark:bg-neutral-800/80 rounded-[7px] p-0.5",children:[jsx("button",{type:"button",onClick:()=>t({strokeStyle:"solid"}),title:"Solid Stroke",className:`w-5 h-6 flex items-center justify-center rounded-[5px] transition-all cursor-pointer ${(f.strokeStyle||"solid")==="solid"?"bg-primary text-white shadow-xs":"hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:jsx("span",{className:"w-3.5 h-[2px] bg-current rounded-full"})}),jsx("button",{type:"button",onClick:()=>t({strokeStyle:"dashed"}),title:"Dashed Stroke",className:`w-5 h-6 flex items-center justify-center rounded-[5px] transition-all cursor-pointer ${f.strokeStyle==="dashed"?"bg-primary text-white shadow-xs":"hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:jsx("svg",{width:"14",height:"2",viewBox:"0 0 14 2",fill:"none",children:jsx("line",{x1:"0",y1:"1",x2:"14",y2:"1",stroke:"currentColor",strokeWidth:"2",strokeDasharray:"3 2"})})}),jsx("button",{type:"button",onClick:()=>t({strokeStyle:"dotted"}),title:"Dotted Stroke",className:`w-5 h-6 flex items-center justify-center rounded-[5px] transition-all cursor-pointer ${f.strokeStyle==="dotted"?"bg-primary text-white shadow-xs":"hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:jsx("svg",{width:"14",height:"2",viewBox:"0 0 14 2",fill:"none",children:jsx("line",{x1:"0",y1:"1",x2:"14",y2:"1",stroke:"currentColor",strokeWidth:"2",strokeDasharray:"1 2.5",strokeLinecap:"round"})})})]}),jsxs("div",{className:"flex items-center gap-1 px-0.5 relative",ref:S==="startArrowhead"||S==="endArrowhead"?D:void 0,children:[jsx("button",{type:"button",onClick:()=>E(S==="startArrowhead"?"none":"startArrowhead"),title:`Start Arrowhead (${cr(f.startArrowhead,"none")})`,className:`p-1 rounded-[6px] transition-colors flex items-center justify-center ${S==="startArrowhead"?"bg-primary/15 text-primary":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300"}`,children:jsx(qr,{value:cr(f.startArrowhead,"none"),side:"start",className:"w-4 h-3"})}),jsx("button",{type:"button",onClick:()=>E(S==="endArrowhead"?"none":"endArrowhead"),title:`End Arrowhead (${cr(f.endArrowhead,f.type==="arrow"?"arrow":"none")})`,className:`p-1 rounded-[6px] transition-colors flex items-center justify-center ${S==="endArrowhead"?"bg-primary/15 text-primary":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300"}`,children:jsx(qr,{value:cr(f.endArrowhead,f.type==="arrow"?"arrow":"none"),side:"end",className:"w-4 h-3"})}),(S==="startArrowhead"||S==="endArrowhead")&&jsx("div",{className:`absolute left-1/2 -translate-x-1/2 z-50 w-[184px] ${q?"top-full mt-2":"bottom-full mb-2"}`,children:jsx(Ko,{side:S==="startArrowhead"?"start":"end",currentValue:S==="startArrowhead"?cr(f.startArrowhead,"none"):cr(f.endArrowhead,f.type==="arrow"?"arrow":"none"),onChange:$=>{t(S==="startArrowhead"?{startArrowhead:$}:{endArrowhead:$}),E("none");},onClose:()=>E("none")})})]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),Ne&&jsxs(Fragment,{children:[jsxs("div",{className:"relative",ref:S==="strokeWidth"?b:void 0,children:[jsx("button",{type:"button",onClick:()=>E(S==="strokeWidth"?"none":"strokeWidth"),title:`Stroke Width (${(f.strokeWidth||2)<=1.5?"Thin":(f.strokeWidth||2)<=3?"Medium":"Bold"})`,className:`w-7 h-7 flex items-center justify-center rounded-[8px] transition-colors cursor-pointer ${S==="strokeWidth"?"bg-primary/15 text-primary":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300"}`,children:(f.strokeWidth||2)<=1.5?jsx("span",{className:"w-3.5 h-[1.5px] bg-current rounded-full"}):(f.strokeWidth||2)<=3?jsx("span",{className:"w-3.5 h-[2.8px] bg-current rounded-full"}):jsx("span",{className:"w-3.5 h-[4.5px] bg-current rounded-full"})}),S==="strokeWidth"&&jsx("div",{className:`absolute left-1/2 -translate-x-1/2 z-50 p-1.5 bg-white/98 dark:bg-[#181818]/98 backdrop-blur-md rounded-[12px] shadow-lg border border-neutral-200/90 dark:border-neutral-800 flex items-center gap-1 animate-in fade-in zoom-in-95 duration-100 ${q?"top-full mt-2":"bottom-full mb-2"}`,children:Wo.map(($,te)=>{let fe=(f.strokeWidth||2)===$.value;return jsxs("button",{type:"button",onClick:()=>{t({strokeWidth:$.value}),E("none");},title:`Stroke Width: ${$.label}`,className:`w-8 h-7 flex items-center justify-center rounded-[7px] transition-all cursor-pointer ${fe?"bg-primary text-white font-bold shadow-xs scale-105":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300"}`,children:[te===0&&jsx("span",{className:"w-4 h-[1.5px] bg-current rounded-full"}),te===1&&jsx("span",{className:"w-4 h-[2.8px] bg-current rounded-full"}),te===2&&jsx("span",{className:"w-4 h-[4.5px] bg-current rounded-full"})]},$.label)})})]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),!C&&!G&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:()=>{let $=f.roughStyle==="rough"||f.roughness!==void 0&&f.roughness>0;t({roughStyle:$?"clean":"rough",roughness:$?0:1.2});},title:f.roughStyle==="rough"||f.roughness!==void 0&&f.roughness>0?"Style: Rough (Click for Clean)":"Style: Clean (Click for Rough)",className:`w-7 h-7 flex items-center justify-center rounded-[8px] transition-colors cursor-pointer ${f.roughStyle==="rough"||f.roughness!==void 0&&f.roughness>0?"bg-primary/15 text-primary":"hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-600 dark:text-neutral-300"}`,children:f.roughStyle==="rough"||f.roughness!==void 0&&f.roughness>0?jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4"}),jsx("path",{d:"M13.5 6.5l4 4"})]}):jsx("svg",{width:"13",height:"13",viewBox:"0 0 16 16",fill:"none",children:jsx("rect",{x:"2.5",y:"2.5",width:"11",height:"11",rx:"1.5",stroke:"currentColor",strokeWidth:"1.8"})})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),jsx("button",{type:"button",onClick:p,title:"Bring to Front",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",children:jsx(BringToFront,{size:15})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"}),e.length>1&&c&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:c,title:"Group (Ctrl+G)",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 transition-colors",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),jsx("path",{d:"M4 16v-8a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z"}),jsx("path",{d:"M8 10v-4a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-4"})]})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),e.some($=>$.groupIds&&$.groupIds.length>0)&&d&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:d,title:"Ungroup (Ctrl+Shift+G)",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 transition-colors",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{stroke:"none",d:"M0 0h24v24H0z",fill:"none"}),jsx("path",{d:"M4 8a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2z"}),jsx("path",{d:"M12 16a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-4a2 2 0 0 1 -2 -2z"})]})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),e.length>1&&h&&jsxs(Fragment,{children:[jsxs("div",{className:"flex items-center gap-0.5",children:[jsx("button",{type:"button",onClick:()=>h("left"),title:"Align Left",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 transition-colors",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"4",y1:"2",x2:"4",y2:"22"}),jsx("rect",{x:"8",y:"5",width:"12",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"8",y:"14",width:"8",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>h("center"),title:"Align Center (Horizontal)",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 transition-colors",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"12",y1:"2",x2:"12",y2:"22"}),jsx("rect",{x:"5",y:"5",width:"14",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"7",y:"14",width:"10",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>h("middle"),title:"Align Middle (Vertical)",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 transition-colors",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"2",y1:"12",x2:"22",y2:"12"}),jsx("rect",{x:"5",y:"5",width:"5",height:"14",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"14",y:"7",width:"5",height:"10",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})})]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),n&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:n,title:"Copy selection as PNG to clipboard (Ctrl+Shift+C)",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 text-neutral-700 dark:text-neutral-300 transition-colors",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-primary",children:[jsx("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),jsx("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),x&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:x,title:"Spotlight / Focus Mode (Alt+S)",className:"p-1.5 rounded-[8px] hover:bg-amber-500/15 text-amber-500 hover:text-amber-600 dark:text-amber-400 transition-colors cursor-pointer",children:jsx(IconCurrentLocation,{size:16})}),jsx("div",{className:"w-[1px] h-4 bg-neutral-200 dark:bg-neutral-800 mx-0.5"})]}),jsx("button",{type:"button",onClick:o,title:"Duplicate (Ctrl+D)",className:"p-1.5 rounded-[8px] hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",children:jsx(IconCopy,{size:15})}),jsx("button",{type:"button",onClick:r,title:"Delete (Del)",className:"p-1.5 rounded-[8px] text-rose-500 hover:text-rose-600 hover:bg-rose-50 dark:hover:bg-rose-950/40 transition-colors",children:jsx(IconTrash,{size:15})})]})})}var Js=[{name:"16:9 Slide",width:1280,height:720,icon:IconSlideshow,label:"Slide"},{name:"Desktop (1440)",width:1440,height:900,icon:IconDeviceDesktop,label:"Desktop Wireframe"},{name:"Mobile (iPhone)",width:390,height:844,icon:IconDeviceMobile,label:"Mobile Screen"}];function vn({isOpen:e,onClose:t,elements:r,setElements:o,selectedIds:c,selectElements:d,updateElement:h,pushHistory:s,camera:n,setCamera:p,onStartPresentation:i}){let[l,u]=useState(""),[a,x]=useState(null),[m,g]=useState(""),[w,_]=useState(null),S=useMemo(()=>r.filter(v=>v.type==="frame").sort((v,C)=>Math.abs(v.y-C.y)>100?v.y-C.y:v.x-C.x),[r]),E=useMemo(()=>{if(!l.trim())return S;let v=l.toLowerCase();return S.filter((C,M)=>(C.frameLabel||`Frame ${M+1}`).toLowerCase().includes(v)||`slide ${M+1}`.includes(v))},[S,l]),z=useCallback(v=>{if(typeof window>"u")return;let C=window.innerWidth,M=window.innerHeight,R=100,J=(C-R*2)/Math.max(v.width,100),oe=(M-R*2)/Math.max(v.height,100),A=Math.min(Math.max(Math.min(J,oe),.15),2.2),U=v.x+v.width/2,G=v.y+v.height/2,Ne=C/2-U*A,ne=M/2-G*A,le=n.x,ce=n.y,ke=n.zoom,Ie=performance.now(),we=420,Ge=Ue=>{let ee=Ue-Ie,Pe=Math.min(ee/we,1),xe=1-Math.pow(1-Pe,3);p({x:Math.round(le+(Ne-le)*xe),y:Math.round(ce+(ne-ce)*xe),zoom:Number((ke+(A-ke)*xe).toFixed(4))}),Pe<1&&requestAnimationFrame(Ge);};requestAnimationFrame(Ge),d([v.id]);},[n,p,d]),D=v=>{let C=Fr(v,r);C.length>0?d([v.id,...C.map(M=>M.id)]):d([v.id]);},P=v=>{if(typeof window>"u")return;let C=window.innerWidth,M=window.innerHeight,R=(C/2-n.x)/n.zoom,J=(M/2-n.y)/n.zoom,oe=S.length,U={id:`frame_${Date.now()}_${Math.random().toString(36).substring(2,6)}`,type:"frame",x:Math.round(R-v.width/2),y:Math.round(J-v.height/2),width:v.width,height:v.height,strokeColor:"#94a3b8",strokeWidth:1.5,strokeStyle:"dashed",fillColor:"transparent",fillStyle:"solid",opacity:1,frameLabel:`${v.label} ${oe+1}`,zIndex:1},G=[...r,U];o(G),s(G),z(U);},I=v=>{let C=m.trim();C&&(h(v,{frameLabel:C}),s(r.map(M=>M.id===v?{...M,frameLabel:C}:M))),x(null);},b=(v,C)=>{C.stopPropagation();let M=Gr(r,[v]);o(M),s(M);},f=async(v,C)=>{C.stopPropagation(),_(v.id);try{let M=await vo(v,r,{scale:2}),R=`${v.frameLabel||"Frame"}.png`;Vr(M,R,{mimeType:"image/png",filters:[{name:"PNG Image",extensions:["png"]},{name:"All Files",extensions:["*"]}]});}catch(M){console.error("Frame export failed",M);}finally{_(null);}};return e?jsxs("div",{className:"fk-card fixed top-14 left-4 z-40 w-80 max-w-[calc(100vw-2rem)] max-h-[calc(100vh-5rem)] flex flex-col bg-[#eef1f6]/98 dark:bg-[#16171b]/98 backdrop-blur-2xl rounded-[20px] border border-white/80 dark:border-white/[0.06] shadow-[-8px_-8px_20px_rgba(255,255,255,0.9),_10px_10px_24px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_16px_rgba(255,255,255,0.02),_10px_10px_28px_rgba(0,0,0,0.9)] overflow-hidden select-none animate-in fade-in slide-in-from-left-4 duration-200",children:[jsxs("div",{className:"p-3.5 pb-2.5 border-b border-black/[0.06] dark:border-white/[0.06] flex items-center justify-between",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx("span",{className:"w-7 h-7 rounded-[8px] bg-[#e2e6ee] dark:bg-[#121316] text-primary flex items-center justify-center border border-white/60 dark:border-white/[0.04] shadow-[inset_1px_1px_2.5px_rgba(166,175,195,0.45),_inset_-1px_-1px_2.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.6)]",children:jsx(IconLayoutSidebar,{size:15})}),jsxs("div",{children:[jsxs("div",{className:"flex items-center gap-1.5",children:[jsx("h2",{className:"text-xs font-bold text-neutral-800 dark:text-neutral-100 tracking-tight",children:"Frames Outline"}),jsx("span",{className:"px-1.5 py-0.2 bg-primary/10 text-primary rounded-[5px] text-[10px] font-bold",children:S.length})]}),jsx("p",{className:"text-[10px] text-neutral-400 dark:text-neutral-500 leading-none mt-0.5",children:"Jump, organize & present sections"})]})]}),jsxs("div",{className:"flex items-center gap-1",children:[S.length>0&&i&&jsxs("button",{type:"button",onClick:i,title:"Launch Presentation Slideshow (Alt+P)",className:"h-6.5 px-2 rounded-[7px] bg-primary/10 hover:bg-primary/20 text-primary dark:text-foreground border border-primary/20 flex items-center gap-1 text-[10.5px] font-semibold transition-all cursor-pointer",children:[jsx(IconPlayerPlay,{size:11,className:"fill-primary/30"}),jsx("span",{children:"Present"})]}),jsx("button",{type:"button",onClick:t,title:"Close outline drawer",className:"w-6.5 h-6.5 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-100 flex items-center justify-center transition-all cursor-pointer shadow-[-1px_-1px_2px_rgba(255,255,255,0.9),_1px_1px_2px_rgba(166,175,195,0.3)] dark:shadow-[-1px_-1px_2px_rgba(255,255,255,0.02),_1px_1px_2px_rgba(0,0,0,0.6)]",children:jsx(IconX,{size:13})})]})]}),S.length>=3&&jsx("div",{className:"px-3 pt-2.5",children:jsxs("div",{className:"relative flex items-center",children:[jsx(IconSearch,{size:12,className:"absolute left-2.5 text-neutral-400"}),jsx("input",{type:"text",placeholder:"Search frames...",value:l,onChange:v=>u(v.target.value),className:"w-full h-7 pl-7 pr-2.5 text-[11px] rounded-[8px] bg-[#e2e6ee] dark:bg-[#111215] text-neutral-800 dark:text-neutral-100 border border-white/60 dark:border-white/[0.04] shadow-[inset_1px_1px_2.5px_rgba(166,175,195,0.45),_inset_-1px_-1px_2.5px_rgba(255,255,255,0.85)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.7)] outline-none placeholder:text-neutral-400 dark:placeholder:text-neutral-600"})]})}),jsx("div",{className:"flex-1 overflow-y-auto p-3 space-y-2 max-h-[50vh] min-h-[140px] custom-scrollbar",children:E.length>0?E.map((v,C)=>{let M=c.includes(v.id),R=Fr(v,r),J=a===v.id,oe=v.frameLabel||`Frame ${C+1}`;return jsx("div",{onClick:()=>z(v),className:`group relative p-2.5 rounded-[12px] border transition-all cursor-pointer select-none ${M?"bg-[#f0f3f8] dark:bg-[#1f222b] border-primary/50 dark:border-primary/60 shadow-[-2px_-2px_6px_rgba(255,255,255,0.95),_3px_3px_7px_rgba(105,101,219,0.3)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_3px_3px_8px_rgba(0,0,0,0.85)]":"bg-[#e9edf4]/80 dark:bg-[#131417]/80 hover:bg-[#f0f3f8] dark:hover:bg-[#1b1c21] border-white/60 dark:border-white/[0.04] shadow-[-2px_-2px_4px_rgba(255,255,255,0.85),_2px_2px_5px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.02),_2px_2px_5px_rgba(0,0,0,0.7)]"}`,children:jsxs("div",{className:"flex items-center justify-between",children:[jsxs("div",{className:"flex items-center gap-2 flex-1 min-w-0 pr-2",children:[jsx("span",{className:`w-5 h-5 rounded-[6px] text-[10px] font-bold flex items-center justify-center shrink-0 ${M?"bg-primary text-white shadow-sm":"bg-[#dce1eb] dark:bg-[#1a1b20] text-neutral-600 dark:text-neutral-400"}`,children:C+1}),J?jsxs("div",{className:"flex items-center gap-1 flex-1",onClick:A=>A.stopPropagation(),children:[jsx("input",{type:"text",value:m,onChange:A=>g(A.target.value),onKeyDown:A=>{A.key==="Enter"&&I(v.id),A.key==="Escape"&&x(null);},autoFocus:true,className:"h-6 px-1.5 text-xs font-semibold rounded-[5px] bg-[#e0e5ee] dark:bg-[#101114] text-neutral-900 dark:text-neutral-100 border border-primary/40 outline-none w-full"}),jsx("button",{type:"button",onClick:()=>I(v.id),className:"p-1 rounded-[5px] text-emerald-600 hover:bg-emerald-500/10 cursor-pointer",children:jsx(IconCheck,{size:12,stroke:2.5})})]}):jsxs("div",{className:"flex-1 min-w-0",onDoubleClick:A=>{A.stopPropagation(),x(v.id),g(oe);},children:[jsx("span",{className:`text-xs font-bold block truncate leading-tight ${M?"text-primary dark:text-neutral-100":"text-neutral-700 dark:text-neutral-200"}`,children:oe}),jsxs("div",{className:"flex items-center gap-1.5 text-[9.5px] text-neutral-400 dark:text-neutral-400 mt-0.5 font-medium",children:[jsxs("span",{children:[R.length," ",R.length===1?"element":"elements"]}),jsx("span",{children:"\u2022"}),jsxs("span",{children:[Math.round(v.width)," \xD7 ",Math.round(v.height)]})]})]})]}),jsxs("div",{className:"flex items-center gap-0.5 opacity-80 group-hover:opacity-100 transition-opacity",children:[jsx("button",{type:"button",onClick:A=>{A.stopPropagation(),z(v);},title:"Jump & focus camera on this frame",className:"p-1 rounded-[6px] text-neutral-500 dark:text-neutral-300 hover:text-primary dark:hover:text-primary hover:bg-primary/10 dark:hover:bg-primary/20 transition-colors cursor-pointer",children:jsx(IconFocusCentered,{size:13})}),jsx("button",{type:"button",onClick:A=>{A.stopPropagation(),D(v);},title:"Select all elements inside this frame",className:"p-1 rounded-[6px] text-neutral-500 dark:text-neutral-300 hover:text-primary dark:hover:text-primary hover:bg-primary/10 dark:hover:bg-primary/20 transition-colors cursor-pointer",children:jsx(IconSelect,{size:13})}),jsx("button",{type:"button",onClick:A=>f(v,A),disabled:w===v.id,title:"Export this frame as PNG image",className:"p-1 rounded-[6px] text-neutral-500 dark:text-neutral-300 hover:text-primary dark:hover:text-primary hover:bg-primary/10 dark:hover:bg-primary/20 transition-colors cursor-pointer",children:jsx(IconDownload,{size:13})}),jsx("button",{type:"button",onClick:A=>{A.stopPropagation(),x(v.id),g(oe);},title:"Rename frame",className:"p-1 rounded-[6px] text-neutral-500 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/10 transition-colors cursor-pointer",children:jsx(IconEdit,{size:12})}),jsx("button",{type:"button",onClick:A=>b(v.id,A),title:"Delete this frame",className:"p-1 rounded-[6px] text-neutral-400 dark:text-neutral-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-500/10 dark:hover:bg-rose-500/20 transition-colors cursor-pointer",children:jsx(IconTrash,{size:12})})]})]})},v.id)}):jsxs("div",{className:"py-4 px-2 text-center flex flex-col items-center justify-center",children:[jsx("div",{className:"w-10 h-10 rounded-2xl bg-primary/10 text-primary flex items-center justify-center mb-2 shadow-[inset_1px_1px_2px_rgba(105,101,219,0.2)]",children:jsx(IconSparkles,{size:18})}),jsx("h3",{className:"text-xs font-bold text-neutral-700 dark:text-neutral-200",children:"No frames on canvas"}),jsx("p",{className:"text-[10px] text-neutral-400 dark:text-neutral-500 mt-1 max-w-[210px] leading-relaxed",children:"Frames organize your board into sections, artboards, and presentation slides."})]})}),jsxs("div",{className:"p-3 bg-[#e8ecf4]/90 dark:bg-[#121316]/90 border-t border-black/[0.06] dark:border-white/[0.06]",children:[jsx("span",{className:"text-[9.5px] font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider block mb-1.5 px-0.5",children:"+ Add New Frame Preset"}),jsx("div",{className:"grid grid-cols-3 gap-1.5",children:Js.map(v=>{let C=v.icon;return jsxs("button",{type:"button",onClick:()=>P(v),className:"flex flex-col items-center justify-center p-2 rounded-[10px] bg-[#f0f3f8] dark:bg-[#1c1e24] text-neutral-700 dark:text-neutral-300 hover:text-primary dark:hover:text-primary border border-white/80 dark:border-white/[0.06] shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.02),_2px_2px_5px_rgba(0,0,0,0.7)] hover:shadow-[-2px_-2px_6px_rgba(255,255,255,1),_2px_2px_6px_rgba(166,175,195,0.5)] active:shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.5)] active:scale-95 transition-all cursor-pointer",title:`Insert ${v.name} (${v.width}\xD7${v.height})`,children:[jsx(C,{size:14,className:"mb-0.5"}),jsx("span",{className:"text-[10px] font-semibold leading-tight",children:v.name}),jsxs("span",{className:"text-[8.5px] text-neutral-400 font-mono",children:[v.width,"\xD7",v.height]})]},v.name)})})]})]}):null}function _n({laserColor:e,setLaserColor:t,laserMode:r,setLaserMode:o,onClearLaser:c,laserStrokeCount:d,onExitLaser:h}){return jsxs("div",{"aria-label":"Laser Pointer Controls",className:"fixed bottom-5 left-1/2 -translate-x-1/2 z-40 flex items-center gap-2 p-1.5 px-2 bg-[#eef1f6]/95 dark:bg-[#16171b]/95 backdrop-blur-2xl rounded-[16px] border border-white/80 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.9),_8px_8px_20px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.03),_10px_10px_26px_rgba(0,0,0,0.85)] select-none animate-in fade-in slide-in-from-bottom-3 duration-150 text-xs",children:[jsxs("div",{className:"flex items-center gap-1.5 pl-1 pr-1.5 text-neutral-600 dark:text-neutral-300",children:[jsxs("span",{className:"relative flex h-2.5 w-2.5",children:[jsx("span",{className:"animate-ping absolute inline-flex h-full w-full rounded-full opacity-75",style:{backgroundColor:e}}),jsx("span",{className:"relative inline-flex rounded-full h-2.5 w-2.5 shadow-sm",style:{backgroundColor:e}})]}),jsx("span",{className:"text-[11px] font-bold tracking-wide uppercase text-neutral-700 dark:text-neutral-200",children:"Laser"})]}),jsx("div",{className:"w-[1px] h-4 bg-black/10 dark:bg-white/10 mx-0.5"}),jsx("div",{className:"flex items-center gap-1.5",children:ca.map(s=>{let n=e.toLowerCase()===s.hex.toLowerCase();return jsx("button",{type:"button",onClick:()=>t(s.hex),title:s.name,className:`relative w-6 h-6 rounded-[7px] transition-all cursor-pointer flex items-center justify-center ${n?"scale-110 ring-2 ring-primary ring-offset-1 dark:ring-offset-neutral-900 shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(0,0,0,0.3)]":"border border-black/15 dark:border-white/15 hover:scale-105 shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(0,0,0,0.2)]"}`,style:{backgroundColor:s.hex},children:n&&jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-white shadow-xs"})},s.hex)})}),jsx("div",{className:"w-[1px] h-4 bg-black/10 dark:bg-white/10 mx-0.5"}),jsxs("div",{className:"flex items-center p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] h-7",children:[jsxs("button",{type:"button",onClick:()=>o("fading"),title:"Laser beam smoothly vanishes automatically as you draw",className:`h-full px-2 flex items-center gap-1 rounded-[6px] text-[10.5px] font-medium transition-all cursor-pointer ${r==="fading"?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:[jsx(IconFlame,{size:13,className:"text-amber-500"}),jsx("span",{children:"Fading Trail"})]}),jsxs("button",{type:"button",onClick:()=>o("persistent"),title:"Laser marks stay visible on screen until cleared",className:`h-full px-2 flex items-center gap-1 rounded-[6px] text-[10.5px] font-medium transition-all cursor-pointer ${r==="persistent"?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:[jsx(IconPin,{size:13,className:"text-sky-500"}),jsx("span",{children:"Keep Marks"})]})]}),d>0&&jsxs("button",{type:"button",onClick:c,title:"Clear all laser marks on screen",className:"h-7 px-2 flex items-center gap-1 rounded-[8px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_2px_2px_5px_rgba(0,0,0,0.6)] text-rose-600 dark:text-rose-400 text-[10.5px] font-medium transition-all hover:scale-[1.03] active:scale-95 cursor-pointer",children:[jsx(IconTrash,{size:13}),jsxs("span",{children:["Clear (",d,")"]})]}),jsx("div",{className:"w-[1px] h-4 bg-black/10 dark:bg-white/10 mx-0.5"}),jsx("button",{type:"button",onClick:h,title:"Exit Laser Pointer (Esc or V)",className:"w-6 h-6 flex items-center justify-center rounded-[7px] text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 hover:bg-black/5 dark:hover:bg-white/5 transition-all cursor-pointer",children:jsx(IconX,{size:14})})]})}function Mn({elements:e,camera:t,setCamera:r}){let[o,c]=useState(true),d=useRef(null),h=useRef(false),[s,n]=useState(false),[p,i]=useState(false),l=168,u=118,a=useRef({miniScale:1,offsetX:0,offsetY:0,viewportRect:{vx:0,vy:0,vw:0,vh:0}});useEffect(()=>{if(o)return;let _=d.current;if(!_)return;let S=_.getContext("2d");if(!S)return;S.clearRect(0,0,l,u);let E=Vt(e,300),z=l/E.width,D=u/E.height,P=Math.min(z,D),I=(l-E.width*P)/2-E.minX*P,b=(u-E.height*P)/2-E.minY*P;S.fillStyle="#0b6eff",e.forEach(ne=>{let le=ne.x*P+I,ce=ne.y*P+b,ke=Math.max(3,Math.abs(ne.width)*P),Ie=Math.max(3,Math.abs(ne.height)*P);S.globalAlpha=.55,S.fillRect(le,ce,ke,Ie);});let f=typeof window<"u"?window.innerWidth:1200,v=typeof window<"u"?window.innerHeight:800,C=f/t.zoom,M=v/t.zoom,R=-t.x/t.zoom,J=-t.y/t.zoom,oe=R*P+I,A=J*P+b,U=Math.max(8,C*P),G=Math.max(6,M*P);a.current={miniScale:P,offsetX:I,offsetY:b,viewportRect:{vx:oe,vy:A,vw:U,vh:G}},S.globalAlpha=p?.22:.12,S.fillStyle="#ef4444",S.fillRect(oe,A,U,G),S.globalAlpha=1,S.strokeStyle="#ef4444",S.lineWidth=p?2:1.5,S.strokeRect(oe,A,U,G);let Ne=Math.min(4,Math.min(U,G)/3);S.fillStyle="#ef4444",S.fillRect(oe-1,A-1,Ne,Ne),S.fillRect(oe+U-Ne+1,A-1,Ne,Ne),S.fillRect(oe-1,A+G-Ne+1,Ne,Ne),S.fillRect(oe+U-Ne+1,A+G-Ne+1,Ne,Ne);},[e,t,o,p]);let x=(_,S)=>{if(!d.current)return;let E=d.current.getBoundingClientRect(),z=_-E.left,D=S-E.top,{miniScale:P,offsetX:I,offsetY:b}=a.current;if(P<=0)return;let f=(z-I)/P,v=(D-b)/P,C=typeof window<"u"?window.innerWidth:1200,M=typeof window<"u"?window.innerHeight:800;r(R=>({...R,x:Math.round(C/2-f*R.zoom),y:Math.round(M/2-v*R.zoom)}));};return jsx("div",{className:"fixed bottom-4 right-4 z-30 flex flex-col items-end",children:o?jsxs("button",{type:"button",onClick:()=>c(false),title:"Expand Minimap Overview",className:"h-8 px-3 rounded-[12px] bg-[#f0f3f8] dark:bg-[#1c1e24] text-neutral-700 dark:text-neutral-200 border border-white/80 dark:border-white/[0.06] shadow-[-3px_-3px_7px_rgba(255,255,255,0.95),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_3px_3px_7px_rgba(0,0,0,0.65)] hover:shadow-[-4px_-4px_9px_rgba(255,255,255,1),_4px_4px_9px_rgba(166,175,195,0.5)] hover:text-neutral-900 dark:hover:text-white flex items-center gap-2 text-xs font-semibold select-none cursor-pointer transition-all duration-150",children:[jsx("span",{className:"w-5 h-5 rounded-[6px] bg-[#e2e6ee] dark:bg-[#121316] text-primary flex items-center justify-center border border-white/60 dark:border-white/[0.04] shadow-[inset_1px_1px_2.5px_rgba(166,175,195,0.45),_inset_-1px_-1px_2.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.6),_inset_-1px_-1px_2.5px_rgba(255,255,255,0.03)]",children:jsx(IconCompass,{size:13})}),jsx("span",{className:"font-medium tracking-tight",children:"Overview"}),jsx(IconChevronUp,{size:13,className:"text-neutral-400 dark:text-neutral-500"})]}):jsxs("div",{className:"bg-[#edf0f5]/98 dark:bg-[#16171b]/98 backdrop-blur-2xl rounded-[18px] border border-white/80 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.95),_8px_8px_18px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_12px_rgba(255,255,255,0.03),_8px_8px_20px_rgba(0,0,0,0.85)] p-2.5 overflow-hidden transition-all select-none animate-in fade-in zoom-in-95 duration-150",children:[jsxs("div",{className:"flex items-center justify-between px-1 text-xs font-bold text-neutral-700 dark:text-neutral-200",children:[jsxs("span",{className:"flex items-center gap-1.5",children:[jsx("span",{className:"w-5 h-5 rounded-[6px] bg-[#e4e8ef] dark:bg-[#131417] text-primary flex items-center justify-center border border-white/70 dark:border-white/[0.04] shadow-[inset_1px_1px_2px_rgba(166,175,195,0.4),_inset_-1px_-1px_2px_rgba(255,255,255,0.8)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.6)]",children:jsx(IconCompass,{size:12})}),jsx("span",{className:"text-[11.5px] tracking-tight",children:"Overview"})]}),jsx("button",{type:"button",onClick:()=>c(true),className:"w-6 h-6 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:shadow-[-1px_-1px_2px_rgba(255,255,255,0.03),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] hover:shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.45)] active:shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.5)] flex items-center justify-center text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-all cursor-pointer",title:"Collapse Minimap",children:jsx(IconChevronDown,{size:13})})]}),jsx("div",{className:"relative mt-2 rounded-[12px] overflow-hidden bg-[#e2e6ee] dark:bg-[#101114] border border-white/60 dark:border-white/[0.04] shadow-[inset_2px_2px_5px_rgba(166,175,195,0.45),_inset_-2px_-2px_5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.7),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:jsx("canvas",{ref:d,width:l,height:u,onPointerDown:_=>{_.currentTarget.setPointerCapture(_.pointerId),h.current=true,i(true),x(_.clientX,_.clientY);},onPointerMove:_=>{if(h.current)x(_.clientX,_.clientY);else {let S=_.currentTarget.getBoundingClientRect(),E=_.clientX-S.left,z=_.clientY-S.top,{vx:D,vy:P,vw:I,vh:b}=a.current.viewportRect,f=E>=D&&E<=D+I&&z>=P&&z<=P+b;n(f);}},onPointerUp:_=>{h.current=false,i(false);try{_.currentTarget.releasePointerCapture(_.pointerId);}catch{}},className:`block touch-none select-none transition-all ${p?"cursor-grabbing":s?"cursor-grab":"cursor-crosshair"}`,title:"Click or drag viewport box to pan"})})]})})}function Nn({isOpen:e,onClose:t,elements:r,selectedIds:o,camera:c,setCamera:d,isSpotlightActive:h,onToggleSpotlight:s}){let[n,p]=useState(0),[i,l]=useState(false),[u,a]=useState(false),[x,m]=useState(true),[g,w]=useState(false),_=useRef(null),S=useRef(null),E=useRef([]),z=useRef(null),D=useRef({x:0,y:0}),P=useMemo(()=>{if(o&&o.length>1){let ne=r.filter(le=>o.includes(le.id)).sort((le,ce)=>Math.abs(le.y-ce.y)>120?le.y-ce.y:le.x-ce.x);if(ne.length>0)return ne.map((le,ce)=>{let Ie=Math.min(le.x,le.x+le.width)-60,we=Math.min(le.y,le.y+le.height)-60,Ge=Math.abs(le.width)+120,Ue=Math.abs(le.height)+120,ee=le.frameLabel||(le.text?.trim()?le.text.split(`
|
|
96
96
|
`)[0].slice(0,24):`${le.type.charAt(0).toUpperCase()+le.type.slice(1)} ${ce+1}`);return {id:le.id,title:ee,x:Ie,y:we,width:Math.max(120,Ge),height:Math.max(80,Ue),isVirtual:true}})}let U=r.filter(ne=>ne.type==="frame").sort((ne,le)=>Math.abs(ne.y-le.y)>120?ne.y-le.y:ne.x-le.x);if(U.length>0)return U.map((ne,le)=>({id:ne.id,title:ne.frameLabel||`Frame ${le+1}`,x:ne.x,y:ne.y,width:Math.max(100,Math.abs(ne.width)),height:Math.max(100,Math.abs(ne.height))}));let G=r.filter(ne=>ne.type!=="line"&&ne.type!=="arrow"&&Math.abs(ne.width)>30&&Math.abs(ne.height)>20);return G.length===0?[{id:"default-slide",title:"Overview",x:0,y:0,width:800,height:600,isVirtual:true}]:[...G].sort((ne,le)=>Math.abs(ne.y-le.y)>180?ne.y-le.y:ne.x-le.x).map((ne,le)=>{let ke=Math.min(ne.x,ne.x+ne.width)-80,Ie=Math.min(ne.y,ne.y+ne.height)-80,we=Math.abs(ne.width)+160,Ge=Math.abs(ne.height)+160,Ue=ne.text?.trim()?ne.text.split(`
|
|
97
|
-
`)[0].slice(0,24):`${ne.type.charAt(0).toUpperCase()+ne.type.slice(1)} ${le+1}`;return {id:ne.id,title:Ue,x:ke,y:Ie,width:we,height:Ge,isVirtual:true}})},[r]),I=useCallback((U,G=true)=>{if(typeof window>"u")return;let Ne=window.innerWidth,ne=window.innerHeight,le=70,ce=(Ne-le*2)/Math.max(U.width,100),ke=(ne-le*2)/Math.max(U.height,100),Ie=Math.min(Math.max(Math.min(ce,ke),.1),2.5),we=U.x+U.width/2,Ge=U.y+U.height/2,Ue=Ne/2-we*Ie,ee=ne/2-Ge*Ie;if(!G){d({x:Ue,y:ee,zoom:Ie});return}let Pe=c.x,xe=c.y,O=c.zoom,Z=performance.now(),Se=480,K=(Ue-Pe)/Ie,de=(ee-xe)/Ie,re=Math.hypot(K,de),T=Math.min(.18,Math.max(.04,re/3800)),L=q=>{let k=q-Z,pe=Math.min(k/Se,1),V=1-Math.pow(1-pe,3),$=Math.sin(pe*Math.PI)*T*Ie,te=Pe+(Ue-Pe)*V,fe=xe+(ee-xe)*V,be=Math.max(.08,O+(Ie-O)*V-$);d({x:te,y:fe,zoom:be}),pe<1&&requestAnimationFrame(L);};requestAnimationFrame(L);},[c,d]);useEffect(()=>{e&&P.length>0&&(p(0),I(P[0],true));},[e,P.length]);let b=useCallback(U=>{U<0||U>=P.length||(p(U),I(P[U],true));},[P,I]),f=useCallback(()=>{n<P.length-1&&b(n+1);},[n,P.length,b]),v=useCallback(()=>{n>0&&b(n-1);},[n,b]),C=useCallback(()=>{document.fullscreenElement?document.exitFullscreen().then(()=>{l(false);}).catch(()=>{}):document.documentElement.requestFullscreen().then(()=>{l(true);}).catch(()=>{});},[]);useEffect(()=>{if(!e)return;let U=G=>{if(!(document.activeElement?.tagName==="INPUT"||document.activeElement?.tagName==="TEXTAREA"))switch(G.key){case "ArrowRight":case "PageDown":case " ":case "Enter":G.preventDefault(),f();break;case "ArrowLeft":case "PageUp":case "Backspace":G.preventDefault(),v();break;case "Home":G.preventDefault(),b(0);break;case "End":G.preventDefault(),b(P.length-1);break;case "Escape":G.preventDefault(),document.fullscreenElement&&(document.exitFullscreen().catch(()=>{}),l(false)),t();break;case "f":case "F":!G.ctrlKey&&!G.metaKey&&!G.altKey&&(G.preventDefault(),C());break;case "l":case "L":!G.ctrlKey&&!G.metaKey&&!G.altKey&&(G.preventDefault(),w(Ne=>!Ne));break;case "s":case "S":!G.ctrlKey&&!G.metaKey&&s&&(G.preventDefault(),s());break;case "g":case "G":!G.ctrlKey&&!G.metaKey&&!G.altKey&&(G.preventDefault(),a(Ne=>!Ne));break}};return window.addEventListener("keydown",U),()=>window.removeEventListener("keydown",U)},[e,f,v,b,P.length,t,C,s]);let M=useCallback(()=>{m(true),_.current&&clearTimeout(_.current),_.current=setTimeout(()=>{u||m(false);},3200);},[u]);if(useEffect(()=>{if(!e)return;let U=G=>{D.current={x:G.clientX,y:G.clientY},g&&E.current.push({x:G.clientX,y:G.clientY,time:performance.now()}),M();};return window.addEventListener("mousemove",U),M(),()=>{window.removeEventListener("mousemove",U),_.current&&clearTimeout(_.current);}},[e,g,M]),useEffect(()=>{if(!e||!g){z.current&&cancelAnimationFrame(z.current);return}let U=S.current;if(!U)return;let G=U.getContext("2d");if(!G)return;let Ne=()=>{U.width=window.innerWidth,U.height=window.innerHeight;};Ne(),window.addEventListener("resize",Ne);let ne=()=>{let le=performance.now();G.clearRect(0,0,U.width,U.height),E.current=E.current.filter(we=>le-we.time<450);let ce=E.current;if(ce.length>1)for(let we=1;we<ce.length;we++){let Ge=ce[we-1],Ue=ce[we],ee=le-Ue.time,Pe=Math.max(0,1-ee/450);G.beginPath(),G.moveTo(Ge.x,Ge.y),G.lineTo(Ue.x,Ue.y),G.strokeStyle=`rgba(239, 68, 68, ${Pe*.75})`,G.lineWidth=4*Pe,G.lineCap="round",G.shadowColor="#ef4444",G.shadowBlur=12*Pe,G.stroke();}let{x:ke,y:Ie}=D.current;ke>0&&Ie>0&&(G.beginPath(),G.arc(ke,Ie,7,0,Math.PI*2),G.fillStyle="#ef4444",G.shadowColor="#ff2222",G.shadowBlur=18,G.fill(),G.beginPath(),G.arc(ke,Ie,3,0,Math.PI*2),G.fillStyle="#ffffff",G.shadowBlur=4,G.fill()),z.current=requestAnimationFrame(ne);};return z.current=requestAnimationFrame(ne),()=>{window.removeEventListener("resize",Ne),z.current&&cancelAnimationFrame(z.current);}},[e,g]),!e||P.length===0)return null;let R=P[n],J=(n+1)/P.length*100,oe=n===0,A=n===P.length-1;return jsxs("div",{className:"fixed inset-0 z-40 pointer-events-none select-none",children:[g&&jsx("canvas",{ref:S,className:"fixed inset-0 pointer-events-none z-50"}),jsx("div",{className:"absolute top-0 left-0 right-0 h-1 bg-black/15 dark:bg-white/10 z-50",children:jsx("div",{className:"h-full bg-linear-to-r from-primary via-amber-500 to-primary transition-all duration-300 ease-out shadow-[0_0_8px_rgba(59,130,246,0.6)]",style:{width:`${J}%`}})}),jsx("div",{className:`fixed left-4 top-1/2 -translate-y-1/2 z-50 pointer-events-auto transition-all duration-300 ${x&&!oe?"opacity-100 translate-x-0":"opacity-0 -translate-x-4 pointer-events-none"}`,children:jsx("button",{type:"button",onClick:v,className:"group p-3.5 rounded-full bg-neutral-900/80 dark:bg-[#1c1d22]/90 hover:bg-neutral-900 dark:hover:bg-[#25272e] text-white/90 hover:text-white backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-2xl shadow-black/40 hover:scale-110 active:scale-95 transition-all cursor-pointer flex items-center justify-center",title:"Previous Slide (\u2190 / Backspace)",children:jsx(IconChevronLeft,{size:22,className:"group-hover:-translate-x-0.5 transition-transform"})})}),jsx("div",{className:`fixed right-4 top-1/2 -translate-y-1/2 z-50 pointer-events-auto transition-all duration-300 ${x&&!A?"opacity-100 translate-x-0":"opacity-0 translate-x-4 pointer-events-none"}`,children:jsx("button",{type:"button",onClick:f,className:"group p-3.5 rounded-full bg-neutral-900/80 dark:bg-[#1c1d22]/90 hover:bg-neutral-900 dark:hover:bg-[#25272e] text-white/90 hover:text-white backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-2xl shadow-black/40 hover:scale-110 active:scale-95 transition-all cursor-pointer flex items-center justify-center",title:"Next Slide (\u2192 / Space)",children:jsx(IconChevronRight,{size:22,className:"group-hover:translate-x-0.5 transition-transform"})})}),jsxs("div",{className:`absolute bottom-6 left-1/2 -translate-x-1/2 z-50 pointer-events-auto transition-all duration-300 ${x?"opacity-100 translate-y-0":"opacity-0 translate-y-4 pointer-events-none"}`,children:[jsxs("div",{className:"flex items-center gap-1.5 p-1.5 rounded-[18px] bg-neutral-900/90 dark:bg-[#181818]/95 backdrop-blur-xl border border-white/15 dark:border-neutral-800 text-white shadow-2xl shadow-black/40",children:[jsxs("div",{className:"hidden sm:flex items-center gap-1.5 pl-2.5 pr-2 py-1 text-xs font-semibold text-neutral-300 border-r border-white/10",children:[jsx(IconSlideshow,{size:16,className:"text-primary"}),jsx("span",{className:"max-w-[150px] truncate",children:R?.title||`Slide ${n+1}`})]}),jsxs("div",{className:"flex items-center gap-0.5",children:[jsx("button",{type:"button",onClick:v,disabled:oe,className:"p-2 rounded-[10px] text-neutral-300 hover:text-white hover:bg-white/10 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer",title:"Previous Slide (\u2190 / Backspace)",children:jsx(IconChevronLeft,{size:18})}),jsxs("span",{className:"px-2.5 py-1 text-xs font-mono font-medium text-neutral-200",children:[jsx("span",{className:"font-bold text-white",children:n+1}),jsx("span",{className:"text-neutral-500 mx-1",children:"/"}),jsx("span",{children:P.length})]}),jsx("button",{type:"button",onClick:f,disabled:A,className:"p-2 rounded-[10px] text-neutral-300 hover:text-white hover:bg-white/10 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer",title:"Next Slide (\u2192 / Space)",children:jsx(IconChevronRight,{size:18})})]}),jsx("div",{className:"w-[1px] h-4 bg-white/15 mx-0.5"}),jsx("button",{type:"button",onClick:()=>w(U=>!U),className:`p-2 rounded-[10px] transition-colors cursor-pointer ${g?"bg-rose-500 text-white shadow-[0_0_10px_rgba(239,68,68,0.7)]":"text-neutral-300 hover:text-white hover:bg-white/10"}`,title:"Laser Pointer Trail (L)",children:jsx(IconPointer,{size:18,className:g?"animate-pulse":""})}),s&&jsx("button",{type:"button",onClick:s,className:`p-2 rounded-[10px] transition-colors cursor-pointer ${h?"bg-amber-500 text-white shadow-[0_0_10px_rgba(245,158,11,0.7)]":"text-neutral-300 hover:text-white hover:bg-white/10"}`,title:"Spotlight Mode (S)",children:jsx(IconSparkles,{size:18})}),jsx("button",{type:"button",onClick:()=>a(U=>!U),className:`p-2 rounded-[10px] transition-colors cursor-pointer ${u?"bg-primary text-primary-foreground":"text-neutral-300 hover:text-white hover:bg-white/10"}`,title:"All Slides Grid Overview (G)",children:jsx(IconList,{size:18})}),jsx("button",{type:"button",onClick:C,className:"p-2 rounded-[10px] text-neutral-300 hover:text-white hover:bg-white/10 transition-colors cursor-pointer",title:i?"Exit Fullscreen (F)":"Enter Fullscreen (F)",children:i?jsx(IconMinimize,{size:18}):jsx(IconMaximize,{size:18})}),jsx("button",{type:"button",onClick:()=>{document.fullscreenElement&&document.exitFullscreen().catch(()=>{}),t();},className:"p-2 rounded-[10px] text-rose-400 hover:text-rose-300 hover:bg-rose-500/20 transition-colors cursor-pointer",title:"Exit Presentation Mode (Esc)",children:jsx(IconX,{size:18})})]}),u&&jsxs("div",{className:"absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-84 max-h-72 overflow-y-auto bg-neutral-900/95 dark:bg-[#181818]/95 backdrop-blur-xl border border-white/15 dark:border-neutral-800 rounded-[18px] p-2.5 shadow-2xl space-y-1",children:[jsxs("div",{className:"px-2 py-1 text-[11px] font-bold uppercase tracking-wider text-neutral-400 border-b border-white/10 mb-1 flex items-center justify-between",children:[jsx("span",{children:"Presentation Slides"}),jsxs("span",{className:"font-mono text-[10px]",children:[P.length," Total"]})]}),P.map((U,G)=>jsxs("button",{type:"button",onClick:()=>{b(G),a(false);},className:`w-full flex items-center justify-between px-3 py-2 rounded-[10px] text-xs text-left transition-all ${G===n?"bg-primary text-primary-foreground font-semibold shadow-xs":"text-neutral-300 hover:bg-white/10 hover:text-white"}`,children:[jsxs("div",{className:"flex items-center gap-2.5 truncate",children:[jsx("span",{className:"w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-[10px] font-mono shrink-0",children:G+1}),jsx("span",{className:"truncate",children:U.title})]}),jsxs("span",{className:"text-[10px] opacity-60 font-mono shrink-0 ml-2",children:[Math.round(U.width),"\xD7",Math.round(U.height)]})]},U.id))]})]})]})}function El(e){if(!e||e==="transparent")return "text-neutral-700 dark:text-neutral-300";let t=e.replace("#","");if(t.length!==6)return "text-white";let r=parseInt(t.substring(0,2),16),o=parseInt(t.substring(2,4),16),c=parseInt(t.substring(4,6),16);return (r*299+o*587+c*114)/1e3>=150?"text-neutral-800":"text-white"}function Va(e,t,r){if(e==="transparent")return r?["#121212","#1e1e24","#334155","#64748b","#cbd5e1"]:["#f8fafc","#e2e8f0","#cbd5e1","#94a3b8","#64748b"];let o=e.replace("#","");if(o.length===3&&(o=o[0]+o[0]+o[1]+o[1]+o[2]+o[2]),o.length!==6)return r?["#121212","#1e1e24","#334155","#64748b","#cbd5e1"]:["#f8fafc","#e2e8f0","#cbd5e1","#94a3b8","#64748b"];let c=parseInt(o.substring(0,2),16)/255,d=parseInt(o.substring(2,4),16)/255,h=parseInt(o.substring(4,6),16)/255,s=Math.max(c,d,h),n=Math.min(c,d,h),p=0,i=0,l=(s+n)/2;if(s!==n){let x=s-n;switch(i=l>.5?x/(2-s-n):x/(s+n),s){case c:p=(d-h)/x+(d<h?6:0);break;case d:p=(h-c)/x+2;break;case h:p=(c-d)/x+4;break}p/=6;}let u=(x,m,g)=>{let w=(D,P,I)=>(I<0&&(I+=1),I>1&&(I-=1),I<.16666666666666666?D+(P-D)*6*I:I<.5?P:I<.6666666666666666?D+(P-D)*(.6666666666666666-I)*6:D),_,S,E;if(m===0)_=S=E=g;else {let D=g<.5?g*(1+m):g+m-g*m,P=2*g-D;_=w(P,D,x+1/3),S=w(P,D,x),E=w(P,D,x-1/3);}let z=D=>{let P=Math.round(Math.max(0,Math.min(1,D))*255).toString(16);return P.length===1?"0"+P:P};return `#${z(_)}${z(S)}${z(E)}`},a=Math.max(i,.45);return t==="stroke"?r?[.2,.35,.5,.65,.82].map(m=>u(p,a,m)):[.93,.78,.62,.48,.35].map(m=>u(p,a,m)):r?[.08,.16,.3,.52,.76].map(m=>u(p,a,m)):[.96,.88,.74,.58,.42].map(m=>u(p,a,m))}function En({uiConfig:e,selectedElements:t,updateSelectedElements:r,deleteSelectedElements:o,duplicateSelectedElements:c,groupSelectedElements:d,ungroupSelectedElements:h,alignSelectedElements:s,distributeSelectedElements:n,bringToFront:p,sendToBack:i,bringForward:l,sendBackward:u,defaultStyles:a,setDefaultStyles:x,canvasBackground:m,setCanvasBackground:g}){let w=e?.showStrokeColor??true,_=e?.showFillColor??true,S=e?.showFillStyle??true,E=e?.showStrokeWidth??true,z=e?.showStrokeStyle??true,D=e?.showRoughness??true,P=e?.showEdgeStyle??true,I=e?.showArrowheads??true,b=e?.showTypography??true,f=e?.showOpacity??true,v=e?.showCanvasBackgroundPicker??true,C=e?.showAlignment??true,M=e?.showLayerOrdering??true,R=e?.showGrouping??true,J=e?.showDuplicateDelete??true,{resolvedTheme:oe,isDark:A,panelVariant:U}=nr(),G=U==="neumorphic";ho();let [ne,le]=useState(false),[ce,ke]=useState("none"),[Ie,we]=useState(null),[Ge,Ue]=useState("none"),[ee,Pe]=useState(null),[xe,O]=useState(null),Z=useRef(null),Se=useRef(null),K=useRef(null);useRef(null);let re=t.length>0,T=re?t[0]:a,L=ce==="stroke"?T.strokeColor||"#1e1e24":T.fillColor||"transparent",q=xe!==null?xe:L!=="transparent"?L.replace("#","").toUpperCase():"",k=N=>{re&&r(N);let ye=["strokeColor","strokeWidth","strokeStyle","fillColor","fillStyle","roughStyle","roughness","edgeStyle","opacity","fontFamily","fontSize","textAlign","arrowType","startArrowhead","endArrowhead","stickyColor"],Te={},kt=false;for(let ut of ye)N[ut]!==void 0&&(Te[ut]=N[ut],kt=true);kt&&x(ut=>({...ut,...Te}));};useEffect(()=>{if(t.length===1){let N=t[0];x(ye=>{let Te={...ye};return N.strokeColor!==void 0&&(Te.strokeColor=N.strokeColor),N.strokeWidth!==void 0&&(Te.strokeWidth=N.strokeWidth),N.strokeStyle!==void 0&&(Te.strokeStyle=N.strokeStyle),N.fillColor!==void 0&&N.type!=="arrow"&&N.type!=="line"&&(Te.fillColor=N.fillColor),N.fillStyle!==void 0&&N.type!=="arrow"&&N.type!=="line"&&(Te.fillStyle=N.fillStyle),N.roughStyle!==void 0&&(Te.roughStyle=N.roughStyle),N.roughness!==void 0&&(Te.roughness=N.roughness),N.edgeStyle!==void 0&&(Te.edgeStyle=N.edgeStyle),N.opacity!==void 0&&(Te.opacity=N.opacity),N.fontFamily!==void 0&&(Te.fontFamily=N.fontFamily),N.fontSize!==void 0&&(Te.fontSize=N.fontSize),N.textAlign!==void 0&&(Te.textAlign=N.textAlign),N.arrowType!==void 0&&(Te.arrowType=N.arrowType),N.startArrowhead!==void 0&&(Te.startArrowhead=N.startArrowhead),N.endArrowhead!==void 0&&(Te.endArrowhead=N.endArrowhead),N.stickyColor!==void 0&&(Te.stickyColor=N.stickyColor),Te});}},[t[0]?.id,x]);let pe=N=>{O(null),ce==="stroke"?k({strokeColor:N}):ce==="background"&&k({fillColor:N});};useEffect(()=>{let N=ye=>{let Te=ye.target;Z.current&&!Z.current.contains(Te)&&(Te.closest("[data-color-trigger]")||(ke("none"),we(null))),Se.current&&!Se.current.contains(ye.target)&&(Te.closest("[data-arrowhead-trigger]")||(Ue("none"),Pe(null)));};return (ce!=="none"||Ge!=="none")&&document.addEventListener("mousedown",N),()=>{document.removeEventListener("mousedown",N);}},[ce,Ge]),useEffect(()=>{if(ce==="none")return;let N=ye=>{let Te=document.activeElement;if(Te&&(Te.tagName==="INPUT"||Te.tagName==="TEXTAREA")||ye.ctrlKey||ye.metaKey||ye.altKey||ye.shiftKey)return;let kt=ye.key.toLowerCase(),ut=fo.find(Lt=>Lt.key===kt);if(ut){ye.preventDefault();let Lt=ce==="background"?A?ut.fill.dark:ut.fill.light:A?ut.stroke.dark:ut.stroke.light;pe(Lt);return}if(["1","2","3","4","5"].includes(ye.key)){ye.preventDefault();let Lt=parseInt(ye.key,10)-1,jt=Va(L,ce==="stroke"?"stroke":"background",A);jt[Lt]&&pe(jt[Lt]);}};return document.addEventListener("keydown",N),()=>{document.removeEventListener("keydown",N);}},[ce,L,A]);let V=(N,ye)=>{if(Ue("none"),Pe(null),ce===N){ke("none"),we(null);return}let Te=ye.currentTarget.getBoundingClientRect(),kt=Te.top+Te.height/2,ut=310,Lt=kt-ut/2,jt=76,Ye=window.innerHeight-ut-16,dr=Math.max(jt,Math.min(Lt,Ye)),At=Math.max(14,Math.min(kt-dr,ut-20));we({top:dr,arrowTop:At}),ke(N);},$=(N,ye)=>{if(ke("none"),we(null),Ge===N){Ue("none"),Pe(null);return}let Te=ye.currentTarget.getBoundingClientRect(),kt=Te.top+Te.height/2,ut=220,Lt=kt-ut/2,jt=76,Ye=window.innerHeight-ut-16,dr=Math.max(jt,Math.min(Lt,Ye)),At=Math.max(14,Math.min(kt-dr,ut-20));Pe({top:dr,arrowTop:At}),Ue(N);},te=N=>{let ye=N.replace("#","").trim();(/^[0-9A-Fa-f]{6}$/.test(ye)||/^[0-9A-Fa-f]{3}$/.test(ye))&&pe(`#${ye}`);},fe=re&&T.type==="frame",be=re&&T.type==="image",ue=!re||["rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","sticky","frame"].includes(T.type),F=re&&(T.type==="text"||T.type==="sticky"),ve=re&&T.type==="sticky",ae=re&&T.type==="text",ze=re&&(T.type==="line"||T.type==="arrow"),Le=t.length>1,nt=Va(L,ce==="stroke"?"stroke":"background",A),gt=(()=>{if(!re)return {icon:IconPencil,title:"Canvas Styles",subtitle:"Default drawing properties"};if(Le)return {icon:IconLayersSubtract,title:`Selection (${t.length})`,subtitle:"Multiple items selected"};switch(T.type){case "frame":return {icon:IconSquare,title:T.frameLabel||"Frame",subtitle:"Presentation artboard"};case "sticky":return {icon:IconNote,title:"Sticky Note",subtitle:"Quick idea card"};case "text":return {icon:IconTypography,title:"Text Block",subtitle:"Typography element"};case "arrow":case "line":return {icon:IconArrowUpRight,title:T.type==="arrow"?"Arrow":"Line",subtitle:"Connector line"};case "rectangle":return {icon:IconSquare,title:"Rectangle",subtitle:"Shape element"};case "ellipse":return {icon:IconCircle,title:"Ellipse",subtitle:"Circle shape"};case "triangle":return {icon:IconTriangle,title:"Triangle",subtitle:"3-sided polygon"};case "trapezoid":return {icon:IconSquare,title:"Trapezoid",subtitle:"Trapezium shape"};case "hexagon":return {icon:IconSquare,title:"Hexagon",subtitle:"6-sided polygon"};case "capsule":return {icon:IconCircle,title:"Capsule",subtitle:"Stadium / Pill shape"};case "cylinder":return {icon:IconDatabase,title:"Cylinder",subtitle:"Database shape"};case "cloud":return {icon:IconCloud,title:"Cloud",subtitle:"Network & infra shape"};case "parallelogram":return {icon:IconSquare,title:"Parallelogram",subtitle:"Data input/output shape"};case "star":return {icon:IconSparkles,title:"Star",subtitle:"Highlight & badge shape"};default:return {icon:IconSparkles,title:"Element",subtitle:"Selected item"}}})(),St=gt.icon;return ne?jsxs("button",{type:"button",onClick:()=>le(false),className:"fixed right-3.5 top-16 z-30 flex items-center gap-1.5 px-2.5 py-1.5 rounded-full bg-white/90 dark:bg-[#16161a]/90 backdrop-blur-xl border border-neutral-200/80 dark:border-neutral-800/80 shadow-lg text-neutral-600 dark:text-neutral-300 hover:text-primary dark:hover:text-primary transition-all duration-150 cursor-pointer",title:"Open Properties Panel",children:[jsx(IconChevronLeft,{size:14,stroke:2.2}),jsx("span",{className:"text-[11px] font-semibold pr-0.5",children:"Properties"})]}):jsxs(Fragment,{children:[jsxs("aside",{"aria-label":"Properties Panel",className:`fk-card fixed right-3.5 top-16 z-30 w-[272px] max-h-[calc(100vh-80px)] flex flex-col rounded-[20px] text-neutral-800 dark:text-neutral-200 select-none overflow-hidden transition-all ${G?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 backdrop-blur-2xl border border-white/70 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.85),_8px_8px_20px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.02),_10px_10px_26px_rgba(0,0,0,0.85)]":"bg-white/95 dark:bg-[#16171b]/95 backdrop-blur-md border border-black/[0.04] dark:border-white/[0.05] shadow-[0_10px_30px_-4px_rgba(0,0,0,0.08),0_4px_12px_-2px_rgba(0,0,0,0.03)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.65),0_4px_14px_-2px_rgba(0,0,0,0.45)]"}`,children:[jsxs("div",{className:"flex items-center justify-between px-3 py-2.5 border-b border-black/[0.04] dark:border-white/[0.04] bg-white/30 dark:bg-black/15",children:[jsxs("div",{className:"flex items-center gap-2 min-w-0",children:[jsx("div",{className:"w-6 h-6 rounded-[8px] bg-[#f0f3f8] dark:bg-[#1f2128] border border-white/80 dark:border-white/[0.06] shadow-[-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9),_1.5px_1.5px_3.5px_rgba(166,175,195,0.4)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] text-primary flex items-center justify-center shrink-0",children:jsx(St,{size:13,stroke:2.2})}),jsx("div",{className:"min-w-0",children:jsx("h3",{className:"text-xs font-bold text-neutral-900 dark:text-neutral-100 truncate leading-tight",children:gt.title})})]}),jsxs("div",{className:"flex items-center gap-1 shrink-0",children:[J&&re&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:c,className:"w-6 h-6 rounded-[7px] flex items-center justify-center text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white bg-[#f0f3f8]/70 dark:bg-[#1c1e24]/70 border border-white/60 dark:border-white/[0.04] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.5)] transition-all cursor-pointer",title:"Duplicate (Ctrl+D)",children:jsx(IconCopy,{size:13})}),jsx("button",{type:"button",onClick:o,className:"w-6 h-6 rounded-[7px] flex items-center justify-center text-neutral-500 hover:text-rose-600 dark:hover:text-rose-400 bg-[#f0f3f8]/70 dark:bg-[#1c1e24]/70 border border-white/60 dark:border-white/[0.04] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(244,63,94,0.3)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.5)] transition-all cursor-pointer",title:"Delete (Del)",children:jsx(IconTrash,{size:13})}),jsx("div",{className:"w-[1px] h-3 bg-black/10 dark:bg-white/10 mx-0.5"})]}),jsx("button",{type:"button",onClick:()=>le(true),className:"w-6 h-6 rounded-[7px] flex items-center justify-center text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white bg-[#f0f3f8]/70 dark:bg-[#1c1e24]/70 border border-white/60 dark:border-white/[0.04] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.5)] transition-all cursor-pointer",title:"Collapse panel",children:jsx(IconChevronRight,{size:13,stroke:2.2})})]})]}),jsxs("div",{className:"flex-1 overflow-y-auto px-3 py-2.5 space-y-3 text-xs scrollbar-thin scrollbar-thumb-neutral-300 dark:scrollbar-thumb-neutral-700",children:[fe&&t[0]&&(()=>{let N=t[0];return jsxs("div",{className:"space-y-2.5 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsxs("div",{children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:"Frame Title"}),jsx("input",{type:"text",value:N.frameLabel||"",placeholder:"e.g. Slide 1, Screen",onKeyDown:ye=>ye.stopPropagation(),onChange:ye=>k({frameLabel:ye.target.value}),className:"w-full h-7 px-2.5 text-xs font-semibold rounded-[8px] bg-[#e2e6ed] dark:bg-[#121316] border border-black/[0.03] dark:border-white/[0.03] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] text-neutral-900 dark:text-neutral-100 outline-none focus:shadow-[inset_2px_2px_4px_rgba(99,102,241,0.25),_0_0_0_1.5px_rgba(99,102,241,0.4)] transition-all"})]}),jsxs("div",{children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:"Presets"}),jsx("div",{className:"grid grid-cols-3 gap-1.5",children:[{label:"16:9",w:800,h:450},{label:"1080p",w:1920,h:1080},{label:"Mobile",w:390,h:844},{label:"16:10",w:1440,h:900},{label:"4:3",w:1024,h:768},{label:"1:1",w:800,h:800}].map(ye=>{let Te=Math.round(Math.abs(N.width||0))===ye.w&&Math.round(Math.abs(N.height||0))===ye.h;return jsx("button",{type:"button",onClick:()=>k({width:ye.w,height:ye.h}),className:`py-1 rounded-[7px] text-center transition-all cursor-pointer text-[10.5px] ${Te?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary border border-primary/40 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,0.95),_2px_2px_4px_rgba(166,175,195,0.5)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.05),_2px_2px_5px_rgba(0,0,0,0.7)]":"bg-[#e6eaf0] dark:bg-[#18191e] border border-white/60 dark:border-white/[0.04] text-neutral-600 dark:text-neutral-300 shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.8),_1.5px_1.5px_3px_rgba(166,175,195,0.3)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.02),_1.5px_1.5px_4px_rgba(0,0,0,0.5)] hover:bg-[#f0f3f8] dark:hover:bg-[#1f2128]"}`,children:ye.label},ye.label)})})]}),jsxs("div",{children:[jsxs("div",{className:"flex items-center justify-between text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:[jsx("span",{children:"Dimensions"}),jsxs("button",{type:"button",onClick:()=>k({aspectRatioLocked:!N.aspectRatioLocked}),className:`flex items-center gap-1 text-[9px] font-semibold transition-colors cursor-pointer ${N.aspectRatioLocked?"text-primary":"text-neutral-400 hover:text-neutral-600"}`,children:[N.aspectRatioLocked?jsx(IconLock,{size:11}):jsx(IconLockOpen,{size:11}),jsx("span",{children:N.aspectRatioLocked?"Locked":"Unlock"})]})]}),jsxs("div",{className:"grid grid-cols-2 gap-1.5",children:[jsxs("div",{className:"flex items-center gap-1.5 px-2 h-7 rounded-[8px] bg-[#e2e6ed] dark:bg-[#121316] border border-black/[0.03] dark:border-white/[0.03] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsx("span",{className:"text-[10px] font-bold text-neutral-400",children:"W"}),jsx("input",{type:"number",value:Math.round(Math.abs(N.width||0)),onKeyDown:ye=>ye.stopPropagation(),onChange:ye=>{let Te=Math.max(20,parseInt(ye.target.value,10)||20);if(N.aspectRatioLocked&&N.width&&N.height){let kt=Math.abs(N.width)/Math.abs(N.height);k({width:Te,height:Math.round(Te/kt)});}else k({width:Te});},className:"w-full bg-transparent text-neutral-900 dark:text-neutral-100 outline-none font-mono text-xs"})]}),jsxs("div",{className:"flex items-center gap-1.5 px-2 h-7 rounded-[8px] bg-[#e2e6ed] dark:bg-[#121316] border border-black/[0.03] dark:border-white/[0.03] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsx("span",{className:"text-[10px] font-bold text-neutral-400",children:"H"}),jsx("input",{type:"number",value:Math.round(Math.abs(N.height||0)),onKeyDown:ye=>ye.stopPropagation(),onChange:ye=>{let Te=Math.max(20,parseInt(ye.target.value,10)||20);if(N.aspectRatioLocked&&N.width&&N.height){let kt=Math.abs(N.width)/Math.abs(N.height);k({height:Te,width:Math.round(Te*kt)});}else k({height:Te});},className:"w-full bg-transparent text-neutral-900 dark:text-neutral-100 outline-none font-mono text-xs"})]})]})]})]})})(),ve&&jsxs("div",{className:"pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1.5",children:"Note Color"}),jsx("div",{className:"flex items-center justify-between",children:ha.map(N=>{let ye=(T.stickyColor||T.fillColor)===N.bg,Te=A?Mr(N.bg,true).bg:N.bg;return jsx("button",{type:"button",onClick:()=>k({stickyColor:N.bg,fillColor:N.bg,strokeColor:void 0}),title:N.name,className:`w-7 h-7 rounded-full transition-all duration-150 cursor-pointer ${ye?"ring-2 ring-primary ring-offset-2 dark:ring-offset-neutral-900 scale-110 shadow-[-2px_-2px_5px_rgba(255,255,255,0.9),_2px_2px_5px_rgba(0,0,0,0.3)]":"border border-black/10 dark:border-white/10 hover:scale-105 shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.8),_1.5px_1.5px_3px_rgba(0,0,0,0.15)]"}`,style:{backgroundColor:Te}},N.name)})})]}),!ve&&!be&&(w||_)&&jsxs("div",{className:"space-y-2 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:"Appearance"}),jsxs("div",{className:`grid ${w&&_?"grid-cols-2":"grid-cols-1"} gap-2`,children:[w&&jsxs("button",{type:"button","data-color-trigger":"stroke",onClick:N=>V("stroke",N),className:`flex items-center gap-2 p-1.5 rounded-[11px] transition-all cursor-pointer ${ce==="stroke"?"bg-[#e4e8ef] dark:bg-[#131417] border border-primary/40 shadow-[inset_2px_2px_4px_rgba(166,175,195,0.55),_inset_-2px_-2px_4px_rgba(255,255,255,1)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_3px_rgba(255,255,255,0.05)]":"bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2.5px_-2.5px_6px_rgba(255,255,255,0.95),_2.5px_2.5px_6px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_2.5px_2.5px_6px_rgba(0,0,0,0.6)] hover:shadow-[-3.5px_-3.5px_8px_rgba(255,255,255,1),_3.5px_3.5px_8px_rgba(166,175,195,0.5)]"}`,children:[jsx("div",{className:"w-5 h-5 rounded-full border border-black/15 dark:border-white/20 shrink-0 shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(0,0,0,0.2)]",style:{backgroundColor:Et(T.strokeColor||"#1e1e24",A)}}),jsxs("div",{className:"min-w-0 text-left",children:[jsx("div",{className:"text-[9.5px] text-neutral-400 dark:text-neutral-500 leading-none",children:"Stroke"}),jsx("div",{className:"text-[11px] font-mono font-semibold text-neutral-800 dark:text-neutral-200 truncate",children:T.strokeColor==="transparent"?"None":(T.strokeColor||"#1E1E24").toUpperCase()})]})]}),_&&(ue?jsxs("button",{type:"button","data-color-trigger":"background",onClick:N=>V("background",N),className:`flex items-center gap-2 p-1.5 rounded-[11px] transition-all cursor-pointer ${ce==="background"?"bg-[#e4e8ef] dark:bg-[#131417] border border-primary/40 shadow-[inset_2px_2px_4px_rgba(166,175,195,0.55),_inset_-2px_-2px_4px_rgba(255,255,255,1)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_3px_rgba(255,255,255,0.05)]":"bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2.5px_-2.5px_6px_rgba(255,255,255,0.95),_2.5px_2.5px_6px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_2.5px_2.5px_6px_rgba(0,0,0,0.6)] hover:shadow-[-3.5px_-3.5px_8px_rgba(255,255,255,1),_3.5px_3.5px_8px_rgba(166,175,195,0.5)]"}`,children:[jsx("div",{className:`w-5 h-5 rounded-full border border-black/15 dark:border-white/20 shrink-0 relative overflow-hidden shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(0,0,0,0.2)] ${T.fillColor==="transparent"||!T.fillColor?"bg-neutral-200 dark:bg-neutral-800":""}`,style:{backgroundColor:T.fillColor&&T.fillColor!=="transparent"?Nr(T.fillColor,T.fillStyle||"solid",A):void 0},children:(!T.fillColor||T.fillColor==="transparent")&&jsx("div",{className:"absolute inset-0 flex items-center justify-center text-rose-500 font-bold text-xs",children:"/"})}),jsxs("div",{className:"min-w-0 text-left",children:[jsx("div",{className:"text-[9.5px] text-neutral-400 dark:text-neutral-500 leading-none",children:"Fill"}),jsx("div",{className:"text-[11px] font-mono font-semibold text-neutral-800 dark:text-neutral-200 truncate",children:T.fillColor==="transparent"||!T.fillColor?"None":T.fillColor.toUpperCase()})]})]}):jsxs("div",{className:"flex items-center gap-2 p-1.5 rounded-[11px] bg-[#e4e8ef]/60 dark:bg-[#131417]/60 border border-white/40 dark:border-white/[0.02] opacity-40",children:[jsx("div",{className:"w-5 h-5 rounded-full border border-dashed border-neutral-400 shrink-0"}),jsx("div",{className:"text-[10px] text-neutral-400",children:"No Fill"})]}))]}),S&&ue&&T.fillColor&&T.fillColor!=="transparent"&&jsx("div",{className:"pt-1",children:jsx("div",{className:"grid grid-cols-6 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] h-8",children:ua.map(N=>{let ye=(T.fillStyle||"solid")===N.value;return jsxs("button",{type:"button",onClick:()=>k({fillStyle:N.value}),title:N.label,className:`h-full flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${ye?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary font-semibold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-200"}`,children:[N.value==="transparent"&&jsxs("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",children:[jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2",stroke:"currentColor",strokeWidth:"1.4",strokeDasharray:"2 2"}),jsx("line",{x1:"3",y1:"13",x2:"13",y2:"3",stroke:"currentColor",strokeWidth:"1.2"})]}),N.value==="solid"&&jsx("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",children:jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2",fill:"currentColor",stroke:"currentColor",strokeWidth:"1.2"})}),N.value==="hachure"&&jsxs("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",children:[jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2",stroke:"currentColor",strokeWidth:"1.3"}),jsx("line",{x1:"3.5",y1:"3.5",x2:"12.5",y2:"12.5",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"}),jsx("line",{x1:"3.5",y1:"8",x2:"8",y2:"12.5",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"}),jsx("line",{x1:"8",y1:"3.5",x2:"12.5",y2:"8",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"})]}),N.value==="hachure-right"&&jsxs("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",children:[jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2",stroke:"currentColor",strokeWidth:"1.3"}),jsx("line",{x1:"12.5",y1:"3.5",x2:"3.5",y2:"12.5",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"}),jsx("line",{x1:"8",y1:"3.5",x2:"3.5",y2:"8",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"}),jsx("line",{x1:"12.5",y1:"8",x2:"8",y2:"12.5",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"})]}),N.value==="cross-hatch"&&jsxs("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",children:[jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2",stroke:"currentColor",strokeWidth:"1.3"}),jsx("line",{x1:"6",y1:"2.5",x2:"6",y2:"13.5",stroke:"currentColor",strokeWidth:"1.1"}),jsx("line",{x1:"10",y1:"2.5",x2:"10",y2:"13.5",stroke:"currentColor",strokeWidth:"1.1"}),jsx("line",{x1:"2.5",y1:"6",x2:"13.5",y2:"6",stroke:"currentColor",strokeWidth:"1.1"}),jsx("line",{x1:"2.5",y1:"10",x2:"13.5",y2:"10",stroke:"currentColor",strokeWidth:"1.1"})]}),N.value==="dots"&&jsxs("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",children:[jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2",stroke:"currentColor",strokeWidth:"1.3"}),jsx("circle",{cx:"5.5",cy:"5.5",r:"1.1",fill:"currentColor"}),jsx("circle",{cx:"10.5",cy:"5.5",r:"1.1",fill:"currentColor"}),jsx("circle",{cx:"5.5",cy:"10.5",r:"1.1",fill:"currentColor"}),jsx("circle",{cx:"10.5",cy:"10.5",r:"1.1",fill:"currentColor"})]})]},N.value)})})})]}),!ve&&!ae&&!be&&(E||z||D||P)&&jsxs("div",{className:"space-y-2.5 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[(E||z)&&jsxs("div",{className:`grid ${E&&z?"grid-cols-2":"grid-cols-1"} gap-2`,children:[E&&jsxs("div",{children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:"Stroke Width"}),jsx("div",{className:"h-8 flex items-center p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:Wo.map(N=>{let ye=(T.strokeWidth||2)===N.value;return jsx("button",{type:"button",onClick:()=>k({strokeWidth:N.value}),title:N.label,className:`h-full flex-1 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${ye?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-400 hover:text-neutral-700"}`,children:jsx("div",{className:"w-4 rounded-full bg-current",style:{height:`${Math.max(1.8,N.value*1.05)}px`}})},N.value)})})]}),z&&jsxs("div",{children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:"Stroke Style"}),jsx("div",{className:"h-8 flex items-center p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:fa.map(N=>{let ye=(T.strokeStyle||"solid")===N.value;return jsxs("button",{type:"button",onClick:()=>k({strokeStyle:N.value}),title:N.label,className:`h-full flex-1 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${ye?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-400 hover:text-neutral-700"}`,children:[N.value==="solid"&&jsx("svg",{width:"16",height:"4",viewBox:"0 0 16 4",fill:"none",children:jsx("line",{x1:"1",y1:"2",x2:"15",y2:"2",stroke:"currentColor",strokeWidth:"2.2",strokeLinecap:"round"})}),N.value==="dashed"&&jsx("svg",{width:"16",height:"4",viewBox:"0 0 16 4",fill:"none",children:jsx("line",{x1:"1",y1:"2",x2:"15",y2:"2",stroke:"currentColor",strokeWidth:"2.2",strokeDasharray:"3 2",strokeLinecap:"round"})}),N.value==="dotted"&&jsx("svg",{width:"16",height:"4",viewBox:"0 0 16 4",fill:"none",children:jsx("line",{x1:"1",y1:"2",x2:"15",y2:"2",stroke:"currentColor",strokeWidth:"2.2",strokeDasharray:"1 2.5",strokeLinecap:"round"})})]},N.value)})})]})]}),D&&(!re||!fe&&!be)&&jsxs("div",{children:[jsxs("div",{className:"flex items-center justify-between text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:[jsx("span",{children:"Drawing Style"}),jsx("span",{className:"text-[9px] font-normal text-neutral-400 lowercase",children:T.roughStyle==="rough"?`rough (${(T.roughness??1.8)<=1.2?"subtle":(T.roughness??1.8)<=2.6?"medium":"sloppy"})`:"clean"})]}),jsxs("div",{className:"flex items-center gap-2",children:[jsxs("div",{className:"flex-[0.9] grid grid-cols-2 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsx("button",{type:"button",onClick:()=>k({roughStyle:"clean",roughness:0}),className:`h-7 text-[11px] font-medium rounded-[6px] flex items-center justify-center transition-all cursor-pointer ${(T.roughStyle||"clean")==="clean"?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,title:"Clean vector style",children:"Clean"}),jsx("button",{type:"button",onClick:()=>k({roughStyle:"rough",roughness:T.roughness&&T.roughness>0?T.roughness:1.8}),className:`h-7 text-[11px] font-medium rounded-[6px] flex items-center justify-center transition-all cursor-pointer ${T.roughStyle==="rough"?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,title:"Hand-drawn rough style",children:"Rough"})]}),jsxs("div",{className:"flex-[1.25] grid grid-cols-3 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsx("button",{type:"button",onClick:()=>k({roughStyle:"rough",roughness:.9}),className:`h-7 text-[10.5px] font-medium rounded-[6px] flex items-center justify-center transition-all cursor-pointer ${T.roughStyle==="rough"&&(T.roughness??1.8)<=1.2?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,title:"Subtle roughness",children:"Subtle"}),jsx("button",{type:"button",onClick:()=>k({roughStyle:"rough",roughness:2}),className:`h-7 text-[10.5px] font-medium rounded-[6px] flex items-center justify-center transition-all cursor-pointer ${T.roughStyle==="rough"&&(T.roughness??1.8)>1.2&&(T.roughness??1.8)<=2.6?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,title:"Medium roughness",children:"Med"}),jsx("button",{type:"button",onClick:()=>k({roughStyle:"rough",roughness:3.5}),className:`h-7 text-[10.5px] font-medium rounded-[6px] flex items-center justify-center transition-all cursor-pointer ${T.roughStyle==="rough"&&(T.roughness??1.8)>2.6?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,title:"Sloppy / extra expressive roughness",children:"Sloppy"})]})]})]}),P&&(!re||T.type==="rectangle")&&jsxs("div",{children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:"Corner Edges"}),jsxs("div",{className:"grid grid-cols-2 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsxs("button",{type:"button",onClick:()=>k({edgeStyle:"sharp"}),className:`py-1 text-[11px] font-medium rounded-[6px] flex items-center justify-center gap-1.5 transition-all cursor-pointer ${T.edgeStyle==="sharp"?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,children:[jsx("svg",{width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",children:jsx("path",{d:"M 3.5 12.5 V 3.5 H 12.5",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"square"})}),jsx("span",{children:"Sharp"})]}),jsxs("button",{type:"button",onClick:()=>k({edgeStyle:"round"}),className:`py-1 text-[11px] font-medium rounded-[6px] flex items-center justify-center gap-1.5 transition-all cursor-pointer ${(T.edgeStyle||"round")==="round"?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,children:[jsx("svg",{width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",children:jsx("path",{d:"M 3.5 12.5 V 7.5 C 3.5 5.2 5.2 3.5 7.5 3.5 H 12.5",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"})}),jsx("span",{children:"Round"})]})]})]})]}),I&&(!re||ze)&&jsxs("div",{className:"space-y-2 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:"Connectors"}),jsxs("div",{className:"flex items-center gap-1.5",children:[jsx("button",{type:"button","data-arrowhead-trigger":"start",onClick:N=>$("start",N),title:"Start Arrowhead",className:`flex-1 h-7 rounded-[8px] flex items-center justify-center transition-all cursor-pointer ${Ge==="start"?"bg-[#e4e8ef] dark:bg-[#131417] text-primary border border-primary/40 shadow-[inset_2px_2px_4px_rgba(166,175,195,0.55),_inset_-2px_-2px_4px_rgba(255,255,255,1)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_3px_rgba(255,255,255,0.05)]":"bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_2px_2px_5px_rgba(0,0,0,0.6)] hover:shadow-[-3px_-3px_6px_rgba(255,255,255,1),_3px_3px_6px_rgba(166,175,195,0.45)]"}`,children:jsx(qr,{value:cr(T.startArrowhead,"none"),side:"start",className:"w-4 h-3"})}),jsxs("div",{className:"flex items-center p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsx("button",{type:"button",onClick:()=>k({arrowType:"straight"}),title:"Straight",className:`w-6 h-6 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${(T.arrowType||"straight")==="straight"?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,1),_1.5px_1.5px_3px_rgba(166,175,195,0.55)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.06),_1.5px_1.5px_4px_rgba(0,0,0,0.8)]":"text-neutral-400 hover:text-neutral-700"}`,children:jsx("svg",{width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",children:jsx("path",{d:"M 4 12 L 12 4 M 7 4 H 12 V 9",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round"})})}),jsx("button",{type:"button",onClick:()=>k({arrowType:"curved"}),title:"Curved",className:`w-6 h-6 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${T.arrowType==="curved"?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,1),_1.5px_1.5px_3px_rgba(166,175,195,0.55)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.06),_1.5px_1.5px_4px_rgba(0,0,0,0.8)]":"text-neutral-400 hover:text-neutral-700"}`,children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M16,12L20,9L16,6"}),jsx("path",{d:"M6 20c0 -6.075 4.925 -11 11 -11h3"})]})}),jsx("button",{type:"button",onClick:()=>k({arrowType:"elbow"}),title:"Elbow",className:`w-6 h-6 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${T.arrowType==="elbow"?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,1),_1.5px_1.5px_3px_rgba(166,175,195,0.55)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.06),_1.5px_1.5px_4px_rgba(0,0,0,0.8)]":"text-neutral-400 hover:text-neutral-700"}`,children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M4,19L10,19C11.097,19 12,18.097 12,17L12,9C12,7.903 12.903,7 14,7L21,7"}),jsx("path",{d:"M18 4l3 3l-3 3"})]})})]}),jsx("button",{type:"button","data-arrowhead-trigger":"end",onClick:N=>$("end",N),title:"End Arrowhead",className:`flex-1 h-7 rounded-[8px] flex items-center justify-center transition-all cursor-pointer ${Ge==="end"?"bg-[#e4e8ef] dark:bg-[#131417] text-primary border border-primary/40 shadow-[inset_2px_2px_4px_rgba(166,175,195,0.55),_inset_-2px_-2px_4px_rgba(255,255,255,1)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_3px_rgba(255,255,255,0.05)]":"bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_2px_2px_5px_rgba(0,0,0,0.6)] hover:shadow-[-3px_-3px_6px_rgba(255,255,255,1),_3px_3px_6px_rgba(166,175,195,0.45)]"}`,children:jsx(qr,{value:cr(T.endArrowhead,T.type==="arrow"?"arrow":"none"),side:"end",className:"w-4 h-3"})})]})]}),b&&(!re||F||!!T.text)&&jsxs("div",{className:"space-y-2.5 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:"Typography"}),jsx("div",{className:"grid grid-cols-5 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] h-8 items-center",children:gr.map(N=>{let Te=ar(T.fontFamily).value===N.value;return jsx("button",{type:"button",onClick:()=>{k({fontFamily:N.value}),typeof window<"u"&&(window.dispatchEvent(new CustomEvent("sketch-redraw-canvas")),document.fonts&&document.fonts.load(`400 16px ${N.cssFont}`).then(()=>{window.dispatchEvent(new CustomEvent("sketch-redraw-canvas"));}));},title:N.label,"aria-label":N.label,className:`h-full flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${Te?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100"}`,children:jsx("span",{className:"text-xs leading-none",style:{fontFamily:N.cssFont},children:N.value==="fuzzy"||N.value==="edusa"?"Aa":N.value==="comic"||N.value==="handlee"?"Abc":N.value==="patrick"?"ABC":N.value==="sans"?"Ag":"{ }"})},N.value)})}),jsxs("div",{className:"grid grid-cols-2 gap-2",children:[jsx("div",{className:"h-8 flex items-center p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:ba.map(N=>{let ye=(T.fontSize||22)===N.value;return jsx("button",{type:"button",onClick:()=>k({fontSize:N.value}),title:`${N.label} (${N.value}px)`,className:`h-full flex-1 text-[10.5px] font-medium rounded-[6px] flex items-center justify-center transition-all cursor-pointer ${ye?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8)]":"text-neutral-400 hover:text-neutral-700"}`,children:N.label},N.value)})}),jsx("div",{className:"h-8 flex items-center p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:["left","center","right"].map(N=>{let ye=(T.textAlign||(T.type==="text"?"left":"center"))===N;return jsxs("button",{type:"button",onClick:()=>k({textAlign:N}),title:`Align ${N}`,className:`h-full flex-1 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${ye?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8)]":"text-neutral-400 hover:text-neutral-700"}`,children:[N==="left"&&jsx(IconAlignLeft,{size:13}),N==="center"&&jsx(IconAlignCenter,{size:13}),N==="right"&&jsx(IconAlignRight,{size:13})]},N)})})]})]}),(f||M&&re)&&jsxs("div",{className:"space-y-2.5 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[f&&jsxs("div",{children:[jsxs("div",{className:"flex items-center justify-between text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:[jsx("span",{children:"Opacity"}),jsxs("span",{className:"font-mono text-neutral-600 dark:text-neutral-300",children:[Math.round((T.opacity??1)*100),"%"]})]}),jsx("input",{type:"range",min:"0.1",max:"1",step:"0.05",value:T.opacity??1,onChange:N=>k({opacity:parseFloat(N.target.value)}),className:"w-full h-2 bg-[#e2e6ed] dark:bg-[#121316] rounded-lg appearance-none cursor-pointer accent-primary shadow-[inset_1px_1px_2px_rgba(0,0,0,0.2)]"})]}),M&&re&&jsxs("div",{children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:"Layer"}),jsxs("div",{className:"grid grid-cols-4 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] h-8 items-center",children:[jsx("button",{type:"button",onClick:p,title:"Bring to Front",className:"h-full flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M12 10l0 10"}),jsx("path",{d:"M12 10l4 4"}),jsx("path",{d:"M12 10l-4 4"}),jsx("path",{d:"M4 4l16 0"})]})}),l&&jsx("button",{type:"button",onClick:l,title:"Bring Forward",className:"h-full flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M12 5l0 14"}),jsx("path",{d:"M16 9l-4 -4"}),jsx("path",{d:"M8 9l4 -4"})]})}),u&&jsx("button",{type:"button",onClick:u,title:"Send Backward",className:"h-full flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",style:{transform:"rotate(180deg)"},children:[jsx("path",{d:"M12 5l0 14"}),jsx("path",{d:"M16 9l-4 -4"}),jsx("path",{d:"M8 9l4 -4"})]})}),jsx("button",{type:"button",onClick:i,title:"Send to Back",className:"h-full flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",style:{transform:"rotate(180deg)"},children:[jsx("path",{d:"M12 10l0 10"}),jsx("path",{d:"M12 10l4 4"}),jsx("path",{d:"M12 10l-4 4"}),jsx("path",{d:"M4 4l16 0"})]})})]})]})]}),Le&&(C||R)&&jsxs("div",{className:"space-y-2 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:"Align & Distribute"}),C&&s&&jsxs("div",{className:"grid grid-cols-6 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsx("button",{type:"button",onClick:()=>s("left"),title:"Align Left",className:"py-1 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:text-primary dark:hover:text-blue-200 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"4",y1:"2",x2:"4",y2:"22"}),jsx("rect",{x:"8",y:"5",width:"12",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"8",y:"14",width:"8",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>s("center"),title:"Align Center H",className:"py-1 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:text-primary dark:hover:text-blue-200 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"12",y1:"2",x2:"12",y2:"22"}),jsx("rect",{x:"5",y:"5",width:"14",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"7",y:"14",width:"10",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>s("right"),title:"Align Right",className:"py-1 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:text-primary dark:hover:text-blue-200 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"20",y1:"2",x2:"20",y2:"22"}),jsx("rect",{x:"2",y:"5",width:"14",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"6",y:"14",width:"10",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>s("top"),title:"Align Top",className:"py-1 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:text-primary dark:hover:text-blue-200 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"2",y1:"4",x2:"22",y2:"4"}),jsx("rect",{x:"5",y:"8",width:"5",height:"12",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"14",y:"8",width:"5",height:"8",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>s("middle"),title:"Align Middle V",className:"py-1 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:text-primary dark:hover:text-blue-200 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"2",y1:"12",x2:"22",y2:"12"}),jsx("rect",{x:"5",y:"5",width:"5",height:"14",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"14",y:"7",width:"5",height:"10",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>s("bottom"),title:"Align Bottom",className:"py-1 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:text-primary dark:hover:text-blue-200 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"20",y1:"2",x2:"20",y2:"22"}),jsx("rect",{x:"5",y:"4",width:"5",height:"12",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"14",y:"8",width:"5",height:"8",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})})]}),jsxs("div",{className:"flex items-center gap-1.5",children:[C&&n&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:()=>n("horizontal"),className:"flex-1 py-1 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] text-[10.5px] font-medium text-neutral-600 dark:text-neutral-300 hover:text-primary dark:hover:text-blue-200 transition-all cursor-pointer",children:"Distribute H"}),jsx("button",{type:"button",onClick:()=>n("vertical"),className:"flex-1 py-1 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] text-[10.5px] font-medium text-neutral-600 dark:text-neutral-300 hover:text-primary dark:hover:text-blue-200 transition-all cursor-pointer",children:"Distribute V"})]}),R&&d&&jsx("button",{type:"button",onClick:d,className:"px-2.5 py-1 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-primary/30 text-primary text-[10.5px] font-bold shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] hover:bg-primary hover:text-white transition-all cursor-pointer",children:"Group"}),R&&t.some(N=>N.groupIds&&N.groupIds.length>0)&&h&&jsx("button",{type:"button",onClick:h,className:"px-2.5 py-1 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] text-neutral-700 dark:text-neutral-300 text-[10.5px] font-medium transition-all cursor-pointer",children:"Ungroup"})]})]}),v&&!re&&g&&jsxs("div",{className:"space-y-2",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:"Canvas Background"}),jsx("div",{className:"grid grid-cols-5 gap-1.5",children:(A?xo:uo).map(N=>{let Te=(m||(A?"#1a1d24":"#f0f4f8")).toLowerCase()===N.hex.toLowerCase();return jsx("button",{type:"button",onClick:()=>g(N.hex),title:N.name,className:`h-7 rounded-[8px] flex items-center justify-center transition-all cursor-pointer ${Te?"bg-[#e4e8ef] dark:bg-[#131417] border border-primary/50 shadow-[inset_2px_2px_4px_rgba(166,175,195,0.55),_inset_-2px_-2px_4px_rgba(255,255,255,1)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_3px_rgba(255,255,255,0.05)] ring-1 ring-primary/40":"bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_2px_2px_5px_rgba(0,0,0,0.6)] hover:shadow-[-3px_-3px_6px_rgba(255,255,255,1),_3px_3px_6px_rgba(166,175,195,0.45)] hover:scale-[1.03]"}`,children:jsx("div",{className:"w-4 h-4 rounded-[5px] border border-black/15 dark:border-white/20 shadow-2xs",style:{backgroundColor:N.hex}})},N.name)})})]})]})]}),ce!=="none"&&Ie&&jsxs("div",{ref:Z,className:`fk-card fixed right-[288px] z-50 w-[248px] rounded-[18px] p-3 select-none animate-in fade-in zoom-in-95 duration-150 text-xs ${G?"bg-[#eef1f6]/98 dark:bg-[#16171b]/98 backdrop-blur-2xl border border-white/80 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.9),_8px_8px_20px_rgba(166,175,195,0.5)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.03),_10px_10px_26px_rgba(0,0,0,0.85)]":"bg-white/98 dark:bg-[#16171b]/98 backdrop-blur-md border border-black/[0.04] dark:border-white/[0.05] shadow-[0_12px_32px_-4px_rgba(0,0,0,0.12),0_4px_14px_-2px_rgba(0,0,0,0.04)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.7),0_4px_14px_-2px_rgba(0,0,0,0.5)]"}`,style:{top:Ie.top},children:[jsxs("div",{className:"flex items-center justify-between pb-2 mb-2 border-b border-black/[0.04] dark:border-white/[0.04]",children:[jsx("span",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:ce==="stroke"?"Stroke Color":"Fill Color"}),jsx("span",{className:"text-[10px] font-mono text-neutral-400",children:L==="transparent"?"None":L.toUpperCase()})]}),jsx("div",{className:"grid grid-cols-5 gap-1.5 mb-2.5",children:fo.map(N=>{let ye=ce==="background"?A?N.fill.dark:N.fill.light:A?N.stroke.dark:N.stroke.light,Te=L.toLowerCase()===ye.toLowerCase()||L.toLowerCase()===N.key||(ce==="background"?L.toLowerCase()===N.fill.light.toLowerCase()||L.toLowerCase()===N.fill.dark.toLowerCase():L.toLowerCase()===N.stroke.light.toLowerCase()||L.toLowerCase()===N.stroke.dark.toLowerCase()),kt=ce==="background"&&N.key==="r"?"Black / Charcoal":N.name;return jsx("button",{type:"button",onClick:()=>pe(ye),title:`${kt} (${N.key.toUpperCase()})`,className:`relative h-6 rounded-[7px] transition-all cursor-pointer flex items-center justify-center ${Te?"ring-2 ring-primary ring-offset-1 dark:ring-offset-neutral-900 scale-105 shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(0,0,0,0.3)]":"border border-black/10 dark:border-white/10 hover:scale-105 shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(0,0,0,0.15)]"}`,style:{backgroundColor:ye==="transparent"?"transparent":ye},children:ye==="transparent"?jsx("span",{className:"text-rose-500 text-xs font-bold leading-none",children:"/"}):jsx("span",{className:`text-[8px] font-mono font-bold opacity-0 hover:opacity-100 ${El(ye)}`,children:N.key})},N.key)})}),L!=="transparent"&&jsxs("div",{className:"mb-2.5",children:[jsx("div",{className:"text-[9.5px] font-medium text-neutral-400 mb-1",children:"Shades (1-5)"}),jsx("div",{className:"grid grid-cols-5 gap-1",children:nt.map((N,ye)=>{let Te=L.toLowerCase()===N.toLowerCase();return jsx("button",{type:"button",onClick:()=>pe(N),title:`Shade ${ye+1}`,className:`h-5 rounded-[6px] transition-all cursor-pointer ${Te?"ring-2 ring-primary ring-offset-1 dark:ring-offset-neutral-900 scale-105 shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(0,0,0,0.3)]":"border border-black/10 dark:border-white/10 hover:scale-105 shadow-[-1px_-1px_2px_rgba(255,255,255,0.7),_1px_1px_2px_rgba(0,0,0,0.1)]"}`,style:{backgroundColor:N}},ye)})})]}),jsxs("div",{className:"flex items-center gap-1.5 pt-2 border-t border-black/[0.04] dark:border-white/[0.04]",children:[jsxs("div",{className:"relative flex-1",children:[jsx("span",{className:"absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-400 font-mono text-xs",children:"#"}),jsx("input",{type:"text",value:q,onChange:N=>O(N.target.value.replace("#","").toUpperCase()),onKeyDown:N=>{N.stopPropagation(),N.key==="Enter"&&te(q);},onBlur:()=>te(q),placeholder:"HEX CODE",maxLength:6,className:"w-full h-7 pl-6 pr-2 rounded-[7px] text-xs font-mono font-semibold bg-[#e2e6ed] dark:bg-[#121316] border border-black/[0.03] dark:border-white/[0.03] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] text-neutral-900 dark:text-neutral-100 outline-none focus:shadow-[inset_2px_2px_4px_rgba(99,102,241,0.25),_0_0_0_1.5px_rgba(99,102,241,0.4)] transition-all"})]}),jsx("button",{type:"button",onClick:()=>K.current?.click(),title:"Native Color Picker",className:"w-7 h-7 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] flex items-center justify-center hover:shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.45)] transition-all cursor-pointer",children:jsx("div",{className:"w-4 h-4 rounded-full border border-black/15 shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(0,0,0,0.2)]",style:{backgroundColor:L==="transparent"?"#ffffff":L}})}),jsx("input",{ref:K,type:"color",value:L.startsWith("#")?L:"#4f46e5",onChange:N=>pe(N.target.value),className:"sr-only"})]})]}),Ge!=="none"&&ee&&jsx("div",{ref:Se,className:`fk-card fixed right-[288px] z-50 rounded-[18px] p-2.5 animate-in fade-in zoom-in-95 duration-150 select-none text-xs ${G?"bg-[#eef1f6]/98 dark:bg-[#16171b]/98 backdrop-blur-2xl border border-white/80 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.9),_8px_8px_20px_rgba(166,175,195,0.5)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.03),_10px_10px_26px_rgba(0,0,0,0.85)]":"bg-white/98 dark:bg-[#16171b]/98 backdrop-blur-md border border-black/[0.04] dark:border-white/[0.05] shadow-[0_12px_32px_-4px_rgba(0,0,0,0.12),0_4px_14px_-2px_rgba(0,0,0,0.04)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.7),0_4px_14px_-2px_rgba(0,0,0,0.5)]"}`,style:{top:ee.top},children:jsx(Ko,{side:Ge,currentValue:Ge==="start"?cr(T.startArrowhead,"none"):cr(T.endArrowhead,T.type==="arrow"?"arrow":"none"),onClose:()=>{Ue("none"),Pe(null);},onChange:N=>{k(Ge==="start"?{startArrowhead:N}:{endArrowhead:N}),Ue("none"),Pe(null);}})})]})}var Al=[{category:"Tools",items:[{key:["V","1"],label:"Select tool"},{key:["H","Space","2"],label:"Hand / Pan canvas"},{key:["R","3"],label:"Rectangle"},{key:["O","4"],label:"Ellipse / Circle"},{key:["D","5"],label:"Diamond"},{key:"Y",label:"Triangle"},{key:"B",label:"Capsule / Stadium"},{key:"G",label:"Parallelogram (Data)"},{key:"Z",label:"Trapezoid (Trapezium)"},{key:"X",label:"Hexagon"},{key:"C",label:"Cylinder (Database)"},{key:"U",label:"Cloud (Infra/Idea)"},{key:"J",label:"Star (Jewel / Milestone)"},{key:["A","6"],label:"Arrow"},{key:["L","7"],label:"Line"},{key:["P","8"],label:"Freehand Pen"},{key:["T","9"],label:"Text tool"},{key:"F",label:"Frame / Artboard"},{key:"N",label:"Table / Matrix Grid"},{key:"I",label:"Insert image from file"},{key:["S","0"],label:"Sticky Note"},{key:"K",label:"Laser pointer tool"},{key:"E",label:"Eraser tool"},{key:"Q",label:"Lock / keep active tool"}]},{category:"Editing & Shapes",items:[{key:"Ctrl + A",label:"Select all elements"},{key:"Ctrl + G",label:"Group selection"},{key:"Ctrl + Shift + G",label:"Ungroup selection"},{key:"\u2191 \u2193 \u2190 \u2192",label:"Nudge selection (Shift = 10px)"},{key:"Tab / Shift+Tab",label:"Next / previous table cell"},{key:"Ctrl + V",label:"Paste image / screenshot"},{key:"Double Click",label:"Write text / Table cell / Rename frame"},{key:"Ctrl + Arrows",label:"Quick branch shape & arrow"},{key:"Ctrl + D",label:"Duplicate selected"},{key:"Del",label:"Delete selected"},{key:"Esc",label:"Clear selection / Cancel"}]},{category:"Canvas & Presentation",items:[{key:"Alt + I",label:"Developer & Cloud Stencils Library"},{key:"Alt + T",label:"Diagram Templates & Starter Kits"},{key:"Alt + F",label:"Toggle Frames Outline drawer"},{key:"Alt + P",label:"Start Presentation / Slideshow"},{key:"\u2190 / \u2192",label:"Next / Previous slide in Presentation"},{key:"L",label:"Toggle Laser Pointer in Presentation"},{key:"G",label:"Toggle Slides Overview in Presentation"},{key:"Alt + S",label:"Spotlight / Focus Mode (Selection / Cursor)"},{key:"Ctrl + Shift + C",label:"Copy image as PNG to clipboard"},{key:"Ctrl + S",label:"Save whiteboard"},{key:"Ctrl + Z",label:"Undo"},{key:"Ctrl + Y",label:"Redo (Ctrl+Shift+Z)"},{key:"Ctrl + Scroll",label:"Zoom in / out"},{key:"Space + Drag",label:"Pan canvas view"}]},{category:"Color Popover",items:[{key:"Q - B",label:"Palette swatch pick"},{key:"1 - 5",label:"Shade level (light/dark)"}]}];function $n({guideHref:e,onOpenGuide:t,showShortcutsButton:r=true,showGuideButton:o=true}={}){let[c,d]=useState(false),h=useRef(null),s=useRef(null);return useEffect(()=>{let n=i=>{c&&h.current&&!h.current.contains(i.target)&&s.current&&!s.current.contains(i.target)&&d(false);},p=i=>{i.target instanceof HTMLInputElement||i.target instanceof HTMLTextAreaElement||i.target.isContentEditable||(i.key==="?"||i.shiftKey&&i.key==="/"?(i.preventDefault(),d(l=>!l)):i.key==="Escape"&&c&&d(false));};return document.addEventListener("mousedown",n),window.addEventListener("keydown",p),()=>{document.removeEventListener("mousedown",n),window.removeEventListener("keydown",p);}},[c]),jsxs(Fragment,{children:[(r||o&&(t||e))&&jsxs("div",{className:"fixed bottom-4 left-4 z-20 pointer-events-auto flex items-center gap-2",children:[r&&jsxs("button",{ref:s,type:"button",onClick:()=>d(n=>!n),title:"View Keyboard Shortcuts (?)",className:`h-8 px-3 rounded-[12px] flex items-center gap-2 text-xs font-semibold select-none cursor-pointer transition-all duration-150 ${c?"bg-[#e4e8ef] dark:bg-[#131417] text-primary dark:text-foreground border border-primary/40 shadow-[inset_2px_2px_4px_rgba(166,175,195,0.55),_inset_-2px_-2px_4px_rgba(255,255,255,1)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_3px_rgba(255,255,255,0.05)]":"bg-[#f0f3f8] dark:bg-[#1c1e24] text-neutral-700 dark:text-neutral-200 border border-white/80 dark:border-white/[0.06] shadow-[-3px_-3px_7px_rgba(255,255,255,0.95),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_3px_3px_7px_rgba(0,0,0,0.65)] hover:shadow-[-4px_-4px_9px_rgba(255,255,255,1),_4px_4px_9px_rgba(166,175,195,0.5)] hover:text-neutral-900 dark:hover:text-white"}`,children:[jsx("span",{className:`w-5 h-5 rounded-[6px] flex items-center justify-center font-mono font-bold text-[10.5px] transition-all ${c?"bg-primary text-white shadow-[-1px_-1px_2px_rgba(255,255,255,0.4),_1px_1px_3px_rgba(0,0,0,0.3)]":"bg-[#e2e6ee] dark:bg-[#121316] text-neutral-600 dark:text-neutral-300 border border-white/60 dark:border-white/[0.04] shadow-[inset_1px_1px_2.5px_rgba(166,175,195,0.45),_inset_-1px_-1px_2.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]"}`,children:"?"}),jsx("span",{className:"font-medium tracking-tight",children:"Shortcuts"})]}),o&&(t?jsxs("button",{type:"button",onClick:t,title:"Sketch Features & Architecture Guide",className:"h-8 px-3 rounded-[12px] flex items-center gap-1.5 text-xs font-semibold select-none cursor-pointer bg-[#f0f3f8] dark:bg-[#1c1e24] text-neutral-700 dark:text-neutral-200 border border-white/80 dark:border-white/[0.06] shadow-[-3px_-3px_7px_rgba(255,255,255,0.95),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_3px_3px_7px_rgba(0,0,0,0.65)] hover:shadow-[-4px_-4px_9px_rgba(255,255,255,1),_4px_4px_9px_rgba(166,175,195,0.5)] hover:text-primary dark:hover:text-blue-200 active:scale-95 transition-all",children:[jsx(IconBook,{size:14,className:"text-primary dark:text-blue-300"}),jsx("span",{className:"font-medium tracking-tight",children:"Guide"})]}):e?jsxs("a",{href:e,target:"_blank",rel:"noopener noreferrer",title:"Sketch Features & Architecture Guide",className:"h-8 px-3 rounded-[12px] flex items-center gap-1.5 text-xs font-semibold select-none cursor-pointer bg-[#f0f3f8] dark:bg-[#1c1e24] text-neutral-700 dark:text-neutral-200 border border-white/80 dark:border-white/[0.06] shadow-[-3px_-3px_7px_rgba(255,255,255,0.95),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_3px_3px_7px_rgba(0,0,0,0.65)] hover:shadow-[-4px_-4px_9px_rgba(255,255,255,1),_4px_4px_9px_rgba(166,175,195,0.5)] hover:text-primary dark:hover:text-blue-200 active:scale-95 transition-all",children:[jsx(IconBook,{size:14,className:"text-primary dark:text-blue-300"}),jsx("span",{className:"font-medium tracking-tight",children:"Guide"})]}):null)]}),c&&jsxs("div",{ref:h,className:"fixed bottom-14 left-4 z-40 w-[340px] sm:w-[380px] max-h-[calc(100vh-120px)] flex flex-col bg-[#edf0f5]/98 dark:bg-[#16171b]/98 backdrop-blur-2xl rounded-[20px] border border-white/80 dark:border-white/[0.06] shadow-[-8px_-8px_20px_rgba(255,255,255,0.95),_10px_10px_24px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.03),_10px_10px_28px_rgba(0,0,0,0.85)] p-3.5 animate-in fade-in zoom-in-95 duration-150 select-none overflow-hidden",children:[jsxs("div",{className:"flex items-center justify-between pb-2.5 mb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx("div",{className:"w-6 h-6 rounded-[8px] bg-[#e4e8ef] dark:bg-[#131417] flex items-center justify-center text-primary border border-white/70 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.4),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.8)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.6)]",children:jsx(IconKeyboard,{size:14})}),jsx("span",{className:"text-xs font-bold text-neutral-800 dark:text-neutral-100 tracking-tight",children:"Keyboard Shortcuts"})]}),jsx("button",{type:"button",onClick:()=>d(false),className:"w-6 h-6 rounded-[8px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_2px_2px_4px_rgba(0,0,0,0.6)] hover:shadow-[-2.5px_-2.5px_5px_rgba(255,255,255,1),_2.5px_2.5px_5px_rgba(166,175,195,0.45)] active:shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.5)] flex items-center justify-center text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-all cursor-pointer",title:"Close (Esc)",children:jsx(IconX,{size:13})})]}),jsx("div",{className:"flex-1 overflow-y-auto space-y-3.5 pr-1 text-xs scrollbar-thin scrollbar-thumb-neutral-300 dark:scrollbar-thumb-neutral-700",children:Al.map(n=>jsxs("div",{children:[jsx("h4",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1.5 px-1",children:n.category}),jsx("div",{className:"space-y-1",children:n.items.map((p,i)=>jsxs("div",{className:"flex items-center justify-between py-1.5 px-2 rounded-[9px] hover:bg-white/60 dark:hover:bg-white/[0.03] transition-colors",children:[jsx("span",{className:"text-[11.5px] font-medium text-neutral-600 dark:text-neutral-300",children:p.label}),jsx("div",{className:"flex items-center gap-1 shrink-0",children:Array.isArray(p.key)?p.key.map((l,u)=>jsxs(Hn.Fragment,{children:[u>0&&jsx("span",{className:"text-[10px] text-neutral-400 dark:text-neutral-500 font-medium",children:"or"}),jsx("kbd",{className:"px-1.5 py-0.5 text-[10px] font-mono font-bold bg-[#e8ecf3] dark:bg-[#1e2027] text-neutral-800 dark:text-neutral-200 rounded-[6px] border border-white/80 dark:border-white/[0.07] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:shadow-[-1px_-1px_2.5px_rgba(255,255,255,0.03),_1.5px_1.5px_3px_rgba(0,0,0,0.6)]",children:l})]},l)):jsx("kbd",{className:"px-1.5 py-0.5 text-[10px] font-mono font-bold bg-[#e8ecf3] dark:bg-[#1e2027] text-neutral-800 dark:text-neutral-200 rounded-[6px] border border-white/80 dark:border-white/[0.07] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:shadow-[-1px_-1px_2.5px_rgba(255,255,255,0.03),_1.5px_1.5px_3px_rgba(0,0,0,0.6)]",children:p.key})})]},i))})]},n.category))}),jsxs("div",{className:"pt-2.5 mt-2.5 border-t border-black/[0.05] dark:border-white/[0.05] flex items-center justify-between text-[10px] text-neutral-400 dark:text-neutral-500 px-1",children:[jsxs("span",{children:["Press"," ",jsx("kbd",{className:"font-mono font-bold bg-[#e8ecf3] dark:bg-[#1e2027] text-neutral-700 dark:text-neutral-200 px-1 py-0.5 rounded-[5px] border border-white/70 dark:border-white/[0.05] shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(0,0,0,0.15)]",children:"?"})," ","to toggle"]}),jsx("span",{children:"Click outside or Esc to close"})]})]})]})}function Bn({isActive:e,onClose:t,selectedElements:r,allElements:o,camera:c,worldToScreen:d,screenToWorld:h,onSelectElement:s,isDark:n}){let p=useRef(null),[i,l]=useState(r.length>0?"selection":"cursor"),[u,a]=useState(.9),[x,m]=useState(180),[g,w]=useState(24),[_,S]=useState({x:typeof window<"u"?window.innerWidth/2:500,y:typeof window<"u"?window.innerHeight/2:400}),[E,z]=useState(false);return useEffect(()=>{r.length>0;},[r,i]),useEffect(()=>{if(!e)return;let D=I=>{S({x:I.clientX,y:I.clientY});},P=I=>{if(I.key==="Escape"){I.preventDefault(),I.stopPropagation(),t();return}if(I.altKey&&I.key.toLowerCase()==="s"){I.preventDefault(),I.stopPropagation(),t();return}};return window.addEventListener("mousemove",D),window.addEventListener("keydown",P,{capture:true}),()=>{window.removeEventListener("mousemove",D),window.removeEventListener("keydown",P,{capture:true});}},[e,t]),useEffect(()=>{if(!e)return;let D,P=()=>{let I=p.current;if(!I)return;let b=I.getContext("2d");if(!b)return;let f=window.devicePixelRatio||1,v=window.innerWidth,C=window.innerHeight;(I.width!==v*f||I.height!==C*f)&&(I.width=v*f,I.height=C*f),b.save(),b.scale(f,f),b.clearRect(0,0,v,C);let M=n?`rgba(6, 8, 12, ${u})`:`rgba(15, 23, 42, ${u})`;if(b.fillStyle=M,b.fillRect(0,0,v,C),b.globalCompositeOperation="destination-out",i==="selection"&&r.length>0){let R=1/0,J=1/0,oe=-1/0,A=-1/0;r.forEach(ee=>{let Pe=bt(ee);R=Math.min(R,Pe.x),J=Math.min(J,Pe.y),oe=Math.max(oe,Pe.x+Pe.width),A=Math.max(A,Pe.y+Pe.height);});let U=d({x:R,y:J}),G=d({x:oe,y:A}),Ne=Math.min(U.x,G.x)-g,ne=Math.min(U.y,G.y)-g,le=Math.abs(G.x-U.x)+g*2,ce=Math.abs(G.y-U.y)+g*2,ke=Math.min(24,Math.min(le,ce)*.15),Ie=Ne+le/2,we=ne+ce/2,Ge=Math.max(le,ce)*.75;b.beginPath(),typeof b.roundRect=="function"?b.roundRect(Ne,ne,le,ce,ke):b.rect(Ne,ne,le,ce),b.fill();let Ue=b.createRadialGradient(Ie,we,Math.min(le,ce)*.35,Ie,we,Ge+40);Ue.addColorStop(0,"rgba(0, 0, 0, 1)"),Ue.addColorStop(.6,"rgba(0, 0, 0, 0.8)"),Ue.addColorStop(1,"rgba(0, 0, 0, 0)"),b.fillStyle=Ue,b.fillRect(Ne-50,ne-50,le+100,ce+100),b.globalCompositeOperation="source-over",b.save(),b.strokeStyle="rgba(245, 158, 11, 0.85)",b.lineWidth=2.5,b.shadowColor="rgba(245, 158, 11, 0.6)",b.shadowBlur=18,b.beginPath(),typeof b.roundRect=="function"?b.roundRect(Ne,ne,le,ce,ke):b.rect(Ne,ne,le,ce),b.stroke(),b.restore();}else {let{x:R,y:J}=_,oe=x,A=b.createRadialGradient(R,J,oe*.45,R,J,oe);A.addColorStop(0,"rgba(0, 0, 0, 1)"),A.addColorStop(.75,"rgba(0, 0, 0, 0.85)"),A.addColorStop(1,"rgba(0, 0, 0, 0)"),b.fillStyle=A,b.beginPath(),b.arc(R,J,oe+40,0,Math.PI*2),b.fill(),b.globalCompositeOperation="source-over",b.save(),b.strokeStyle="rgba(245, 158, 11, 0.75)",b.lineWidth=2,b.shadowColor="rgba(245, 158, 11, 0.6)",b.shadowBlur=16,b.beginPath(),b.arc(R,J,oe*.9,0,Math.PI*2),b.stroke(),b.restore();}b.restore(),D=requestAnimationFrame(P);};return D=requestAnimationFrame(P),()=>cancelAnimationFrame(D)},[e,i,r,d,g,u,x,_,n]),e?jsxs("div",{className:"fixed inset-0 z-50 pointer-events-none select-none",children:[jsx("canvas",{ref:p,className:"absolute inset-0 w-full h-full pointer-events-none"}),jsxs("div",{className:"absolute top-4 left-1/2 -translate-x-1/2 pointer-events-auto flex flex-col items-center gap-2 animate-in fade-in slide-in-from-top-4 duration-150",children:[jsxs("div",{className:"flex items-center gap-2 px-3.5 py-1.5 bg-neutral-900/95 dark:bg-[#18181b]/95 backdrop-blur-md rounded-full shadow-2xl border border-neutral-700/80 text-white text-xs",children:[jsxs("div",{className:"flex items-center gap-1.5 font-semibold text-amber-400",children:[jsx(IconCurrentLocation,{size:16,className:"animate-pulse"}),jsx("span",{children:"Spotlight Focus"})]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-700"}),jsxs("div",{className:"flex items-center bg-neutral-800 rounded-full p-0.5 border border-neutral-700",children:[jsx("button",{type:"button",onClick:()=>l("selection"),className:`px-2.5 py-1 rounded-full text-[11px] font-medium transition-all ${i==="selection"?"bg-amber-500 text-neutral-950 font-bold shadow-xs":"text-neutral-400 hover:text-white"}`,children:"Selection"}),jsx("button",{type:"button",onClick:()=>l("cursor"),className:`px-2.5 py-1 rounded-full text-[11px] font-medium transition-all ${i==="cursor"?"bg-amber-500 text-neutral-950 font-bold shadow-xs":"text-neutral-400 hover:text-white"}`,children:"Follow Cursor"})]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-700"}),jsx("button",{type:"button",onClick:()=>z(D=>!D),title:"Adjust Spotlight Settings",className:`p-1 rounded-full hover:bg-neutral-800 transition-colors ${E?"text-amber-400":"text-neutral-400"}`,children:jsx(IconAdjustments,{size:15})}),jsxs("button",{type:"button",onClick:t,title:"Exit Focus Mode (Esc or Alt+S)",className:"flex items-center gap-1 pl-2 pr-1.5 py-0.5 rounded-full hover:bg-rose-500/20 hover:text-rose-400 text-neutral-400 transition-colors cursor-pointer",children:[jsx("span",{className:"text-[10px] font-mono opacity-60",children:"Esc"}),jsx(IconX,{size:14})]})]}),E&&jsxs("div",{className:"flex items-center gap-4 px-4 py-2 bg-neutral-900/95 dark:bg-[#18181b]/95 backdrop-blur-md rounded-2xl shadow-2xl border border-neutral-700/80 text-white text-xs animate-in fade-in zoom-in-95 duration-100",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx("span",{className:"text-neutral-400 text-[11px]",children:"Dim:"}),[{label:"60%",val:.6},{label:"75%",val:.76},{label:"90%",val:.9}].map(D=>jsx("button",{type:"button",onClick:()=>a(D.val),className:`px-2 py-0.5 rounded-[5px] text-[10.5px] font-semibold transition-all ${u===D.val?"bg-amber-500 text-neutral-950":"bg-neutral-800 text-neutral-400 hover:text-white"}`,children:D.label},D.label))]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-700"}),i==="cursor"?jsxs("div",{className:"flex items-center gap-2",children:[jsx("span",{className:"text-neutral-400 text-[11px]",children:"Radius:"}),[{label:"S",val:130},{label:"M",val:190},{label:"L",val:280}].map(D=>jsx("button",{type:"button",onClick:()=>m(D.val),className:`px-2 py-0.5 rounded-[5px] text-[10.5px] font-semibold transition-all ${x===D.val?"bg-amber-500 text-neutral-950":"bg-neutral-800 text-neutral-400 hover:text-white"}`,children:D.label},D.label))]}):jsxs("div",{className:"flex items-center gap-2",children:[jsx("span",{className:"text-neutral-400 text-[11px]",children:"Padding:"}),[{label:"Tight",val:12},{label:"Med",val:24},{label:"Wide",val:48}].map(D=>jsx("button",{type:"button",onClick:()=>w(D.val),className:`px-2 py-0.5 rounded-[5px] text-[10.5px] font-semibold transition-all ${g===D.val?"bg-amber-500 text-neutral-950":"bg-neutral-800 text-neutral-400 hover:text-white"}`,children:D.label},D.label))]})]})]})]}):null}var In=[{id:"all",label:"All Stencils"},{id:"frontend",label:"Frontend & UI"},{id:"backend",label:"Backend & Runtimes"},{id:"database",label:"Databases & Storage"},{id:"cloud",label:"Cloud & DevOps"},{id:"tools",label:"AI, Tools & APIs"}],Ln=[{id:"react",name:"React",category:"frontend",color:"#61DAFB",keywords:["react","reactjs","frontend","ui","framework","jsx"],svg:'<svg viewBox="0 0 24 24" fill="none" stroke="#61DAFB" stroke-width="1.8"><ellipse cx="12" cy="12" rx="10" ry="4"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)"/><circle cx="12" cy="12" r="1.8" fill="#61DAFB"/></svg>'},{id:"nextjs",name:"Next.js",category:"frontend",color:"#000000",keywords:["next","nextjs","react","ssr","fullstack","vercel"],svg:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm4.5 13.9-6.3-8.2V7.6h1.5v5.8l5.2 6.8a8.5 8.5 0 0 1-8.9.1l8.5-4.4ZM14.8 7.6h1.5v6.5l-1.5-1.9Z"/></svg>'},{id:"vue",name:"Vue.js",category:"frontend",color:"#4FC08D",keywords:["vue","vuejs","frontend","ui","vite"],svg:'<svg viewBox="0 0 24 24"><path fill="#4FC08D" d="M2 3h3.5L12 14.5 18.5 3H22L12 21 2 3z"/><path fill="#35495E" d="M6.5 3h3.2L12 7.8 14.3 3h3.2L12 12.8 6.5 3z"/></svg>'},{id:"svelte",name:"Svelte",category:"frontend",color:"#FF3E00",keywords:["svelte","sveltekit","ui","compiler"],svg:'<svg viewBox="0 0 24 24" fill="#FF3E00"><path d="M19.4 6.3a6.8 6.8 0 0 0-9.8-.9l-3.8 3.2a6.8 6.8 0 0 0 1.2 10.9 6.8 6.8 0 0 0 9.8.9l3.8-3.2a6.8 6.8 0 0 0-1.2-10.9zm-4.3 8.8-3.8 3.2c-1.8 1.5-4.5.3-5-1.9a3.8 3.8 0 0 1 .7-3.4l3.8-3.2c1.8-1.5 4.5-.3 5 1.9a3.8 3.8 0 0 1-.7 3.4z"/></svg>'},{id:"tailwind",name:"Tailwind CSS",category:"frontend",color:"#06B6D4",keywords:["tailwind","css","styling","utility","ui"],svg:'<svg viewBox="0 0 24 24" fill="#06B6D4"><path d="M12 6c-2.7 0-4.4 1.3-5.1 4 1-1.3 2.2-1.8 3.6-1.5 1 .3 1.8 1 2.6 1.8 1.3 1.3 2.8 2.7 5.9 2.7 2.7 0 4.4-1.3 5.1-4-1 1.3-2.2 1.8-3.6 1.5-1-.3-1.8-1-2.6-1.8-1.3-1.3-2.8-2.7-5.9-2.7zm-7 6c-2.7 0-4.4 1.3-5.1 4 1-1.3 2.2-1.8 3.6-1.5 1 .3 1.8 1 2.6 1.8 1.3 1.3 2.8 2.7 5.9 2.7 2.7 0 4.4-1.3 5.1-4-1 1.3-2.2 1.8-3.6 1.5-1-.3-1.8-1-2.6-1.8-1.3-1.3-2.8-2.7-5.9-2.7z"/></svg>'},{id:"typescript",name:"TypeScript",category:"frontend",color:"#3178C6",keywords:["typescript","ts","javascript","types","code"],svg:'<svg viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="#3178C6"/><path fill="#fff" d="M11.5 14.5c-.2.9-.6 1.6-1.3 2.1-.7.5-1.5.7-2.6.7-1.1 0-2-.3-2.7-.9s-1-1.5-1-2.7c0-.8.2-1.5.6-2.1.4-.6.9-1 1.6-1.3.7-.3 1.4-.4 2.3-.4.8 0 1.5.1 2.1.4.6.2 1 .6 1.3 1l-1.4 1.2c-.4-.6-1.1-.9-1.9-.9-.7 0-1.2.2-1.6.6s-.5.9-.5 1.5c0 .7.2 1.2.6 1.6.4.4.9.5 1.6.5.4 0 .8-.1 1.1-.3.3-.2.5-.5.6-.8h-1.8v-1.4h3.7v3.2zm4.3 2.8h-1.9v-7.1h-2.3v-1.6h6.5v1.6h-2.3v7.1z"/></svg>'},{id:"javascript",name:"JavaScript",category:"frontend",color:"#F7DF1E",keywords:["javascript","js","frontend","web","node"],svg:'<svg viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="#F7DF1E"/><path fill="#000" d="M7 17.5c.5.8 1.2 1.3 2.2 1.3 1.1 0 1.9-.6 1.9-2v-6.3h2.3v6.3c0 2.5-1.5 3.6-3.9 3.6-1.8 0-3-.8-3.7-2.1l1.2-.8zm8.6-1c.4.7 1 1.1 1.9 1.1.8 0 1.4-.4 1.4-1 0-.7-.5-1-1.6-1.4l-.5-.2c-1.6-.6-2.7-1.4-2.7-3.1 0-1.7 1.3-3 3.3-3 1.5 0 2.5.5 3.2 1.8l-1.6 1c-.3-.6-.7-.9-1.5-.9-.7 0-1.2.4-1.2.9 0 .6.4.9 1.4 1.3l.5.2c1.9.7 2.9 1.5 2.9 3.3 0 1.9-1.5 3.1-3.7 3.1-2.1 0-3.3-1-3.9-2.3l2.1-.9z"/></svg>'},{id:"html5",name:"HTML5",category:"frontend",color:"#E34F26",keywords:["html","html5","web","frontend","markup"],svg:'<svg viewBox="0 0 24 24"><path fill="#E34F26" d="M3 2l1.8 18.2L12 23l7.2-2.8L21 2H3z"/><path fill="#EF652A" d="M12 21.1l5.7-2.2 1.4-15.1H12v17.3z"/><path fill="#EBEBEB" d="M12 8.7H8.3l-.2-2.2H12V4.4H6l.7 6.4h5.3v-2.1zm0 6.6l-3.2-.9-.2-2.3H6.4l.4 4.5 5.2 1.4v-2.7z"/><path fill="#fff" d="M12 8.7h3.7l-.4 3.7-3.3.9v2.2l5.2-1.4.6-7.5H12V4.4h6l-.2 2.1h-5.8v2.2z"/></svg>'},{id:"angular",name:"Angular",category:"frontend",color:"#DD0031",keywords:["angular","google","frontend","typescript","spa"],svg:'<svg viewBox="0 0 24 24"><path fill="#DD0031" d="M12 2L2.5 5.5l1.4 12.2L12 22l8.1-4.3 1.4-12.2L12 2z"/><path fill="#C3002F" d="M12 2v20l8.1-4.3 1.4-12.2L12 2z"/><path fill="#fff" d="M12 5.5L6.6 17.5h2.1l1.1-2.7h4.4l1.1 2.7h2.1L12 5.5zm1.5 7.6h-3L12 8.8l1.5 4.3z"/></svg>'},{id:"vite",name:"Vite",category:"frontend",color:"#646CFF",keywords:["vite","bundler","build","frontend","tooling"],svg:'<svg viewBox="0 0 24 24"><path fill="#646CFF" d="M20.2 3.8L12.7 22l-1.3-3.2L2.3 5.4l9-1.6 8.9 0z"/><path fill="#FFD62E" d="M13.6 2l-6.8 1.4L11 11.2l-2.7.4L15.4 20l-1.2-6.5 3.3-.6L13.6 2z"/></svg>'},{id:"nodejs",name:"Node.js",category:"backend",color:"#339933",keywords:["node","nodejs","backend","javascript","server"],svg:'<svg viewBox="0 0 24 24" fill="#339933"><path d="M12 2.5a2 2 0 0 0-1 .3L3.5 7a2 2 0 0 0-1 1.7v8.6a2 2 0 0 0 1 1.7l7.5 4.3a2 2 0 0 0 2 0l7.5-4.3a2 2 0 0 0 1-1.7V8.7a2 2 0 0 0-1-1.7L13 2.8a2 2 0 0 0-1-.3zm0 3.2l6.2 3.6-6.2 3.6-6.2-3.6 6.2-3.6zm-7.2 5.2l6.2 3.6v7.2L4.8 18.1v-7.2zm14.4 0v7.2l-6.2 3.6v-7.2l6.2-3.6z"/></svg>'},{id:"python",name:"Python",category:"backend",color:"#3776AB",keywords:["python","django","fastapi","flask","ai","backend"],svg:'<svg viewBox="0 0 24 24"><path fill="#3776AB" d="M11.9 2C6.8 2 7.1 4.2 7.1 4.2l.02 2.3h4.9v.7H4.2S2 6.9 2 12c0 5.2 1.9 5 1.9 5l1.8.02V14.5s-.1-2.9 2.9-2.9h4.9s2.8.04 2.8-2.8V4.8S16.9 2 11.9 2zm-2.4 1.7c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1z"/><path fill="#FFD43B" d="M12.1 22c5.1 0 4.8-2.2 4.8-2.2l-.02-2.3h-4.9v-.7h7.8s2.2.3 2.2-4.8c0-5.2-1.9-5-1.9-5l-1.8-.02V9.5s.1 2.9-2.9 2.9H10.5s-2.8-.04-2.8 2.8v4S7.1 22 12.1 22zm2.4-1.7c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"/></svg>'},{id:"go",name:"Go (Golang)",category:"backend",color:"#00ADD8",keywords:["go","golang","backend","microservices","concurrency"],svg:'<svg viewBox="0 0 24 24" fill="#00ADD8"><path d="M3 10.5h4.5v1.8H4.8v3.4h2.7v-1.6H6.2v-1.5h3v4.6H3v-6.7zm8 0h2.4a3.3 3.3 0 0 1 3.5 3.3 3.3 3.3 0 0 1-3.5 3.4H11v-6.7zm2.3 5c1 0 1.6-.7 1.6-1.7s-.6-1.6-1.6-1.6h-.6v3.3h.6zm6.2-5h1.7l1.5 4 1.5-4h1.7l-2.4 6.7h-1.6l-2.4-6.7z"/></svg>'},{id:"rust",name:"Rust",category:"backend",color:"#DEA584",keywords:["rust","wasm","backend","systems","memory","safety"],svg:'<svg viewBox="0 0 24 24" fill="#DEA584"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm3.8 14.5h-1.6l-1.4-2.4h-1.5v2.4H9.6V7.5h3.4c1.8 0 2.8.9 2.8 2.4 0 1.1-.6 1.9-1.5 2.2l1.5 2.4zm-2.8-5.3c.7 0 1.2-.4 1.2-1s-.5-1-1.2-1h-1.7v2h1.7z"/></svg>'},{id:"bun",name:"Bun",category:"backend",color:"#FBF0DF",keywords:["bun","javascript","runtime","fast","package","backend"],svg:'<svg viewBox="0 0 24 24" fill="#E8B072"><path d="M12 3a9 9 0 0 0-8.7 6.7c-.5 2 .2 4.1 1.7 5.5l.3.3a8.9 8.9 0 0 0 13.4 0l.3-.3c1.5-1.4 2.2-3.5 1.7-5.5A9 9 0 0 0 12 3zm-2.5 7.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>'},{id:"java",name:"Java",category:"backend",color:"#007396",keywords:["java","spring","jvm","backend","enterprise"],svg:'<svg viewBox="0 0 24 24" fill="#007396"><path d="M9 19s-1.8.4-1.2 1.3c.6.9 2.5.8 4.3.5 2.1-.3 4.9-1.2 4.9-1.2s-1.4.6-2.9.9c-2.3.4-4.5.3-5.1-.5zm-.5-3.2s-2.1.6-1.5 1.7c.6 1 3 .9 5.3.5 2.6-.4 5.9-1.5 5.9-1.5s-1.7.8-3.6 1.1c-2.8.5-5.4.4-6.1-.8zm4.2-11.5c.8.9.8 1.9-.3 3.3-1.4 1.8-2.4 2.7-4.3 4.1-.7.5-.9 1.1-.7 1.5.3.8 1.5.8 2.4.6 2.3-.4 4.5-1.5 4.5-1.5s-.8.6-2.1 1.1c-1.9.7-3.9.7-4.8-.4-.8-1-.4-2.2.6-3 1.5-1.4 3.4-3.1 4.7-5.7z"/></svg>'},{id:"fastapi",name:"FastAPI",category:"backend",color:"#059669",keywords:["fastapi","python","api","rest","backend","async"],svg:'<svg viewBox="0 0 24 24" fill="#059669"><circle cx="12" cy="12" r="10"/><path fill="#fff" d="M12.5 5.5l-5 7.5h4l-1 5.5 6-8h-4.5l1.5-5z"/></svg>'},{id:"graphql",name:"GraphQL",category:"backend",color:"#E10098",keywords:["graphql","api","query","schema","backend"],svg:'<svg viewBox="0 0 24 24" fill="#E10098"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2zm0 2.3L4.8 8.4l7.2 4.2 7.2-4.2L12 4.3zm-7.2 5.5v7.4l6.4-3.7-6.4-3.7zm14.4 0l-6.4 3.7 6.4 3.7V9.8z"/></svg>'},{id:"postgresql",name:"PostgreSQL",category:"database",color:"#4169E1",keywords:["postgres","postgresql","sql","relational","database","db"],svg:'<svg viewBox="0 0 24 24" fill="#4169E1"><path d="M12 2a10 10 0 0 0-9.8 8.1c-.8 4.4 1.5 8.8 5.6 10.4 1.3.5 2.7.7 4.2.7s2.9-.2 4.2-.7c4.1-1.6 6.4-6 5.6-10.4A10 10 0 0 0 12 2zm-1.8 14.8c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5zm3.6 0c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"/></svg>'},{id:"mongodb",name:"MongoDB",category:"database",color:"#47A248",keywords:["mongodb","mongo","nosql","document","database","db"],svg:'<svg viewBox="0 0 24 24" fill="#47A248"><path d="M12 2S7 7.5 7 13.5c0 4.2 3.1 7.8 5 8.5 1.9-.7 5-4.3 5-8.5C17 7.5 12 2 12 2zm.3 17.5v-6.3c0-.2.1-.3.3-.3.2 0 .3.1.3.3v6.3c-.2.1-.4.1-.6 0z"/></svg>'},{id:"redis",name:"Redis",category:"database",color:"#DC382D",keywords:["redis","cache","in-memory","nosql","key-value","database"],svg:'<svg viewBox="0 0 24 24" fill="#DC382D"><path d="M21.5 9.5l-9.5-4-9.5 4L12 13.5l9.5-4zm0 5l-9.5 4-9.5-4 1.5-.6 8 3.4 8-3.4 1.5.6zm0 4l-9.5 4-9.5-4 1.5-.6 8 3.4 8-3.4 1.5.6z"/></svg>'},{id:"mysql",name:"MySQL",category:"database",color:"#4479A1",keywords:["mysql","sql","relational","database","db","oracle"],svg:'<svg viewBox="0 0 24 24" fill="#4479A1"><path d="M12 3a9 9 0 0 0-9 9c0 4.5 3.3 8.2 7.7 8.9v-6.3H8.3v-2.6h2.4V10c0-2.4 1.4-3.7 3.6-3.7 1 0 2.1.2 2.1.2v2.3h-1.2c-1.2 0-1.6.7-1.6 1.5v1.7h2.7l-.4 2.6h-2.3v6.3C18.7 20.2 22 16.5 22 12a9 9 0 0 0-9-9z"/></svg>'},{id:"supabase",name:"Supabase",category:"database",color:"#3ECF8E",keywords:["supabase","postgres","baas","auth","realtime","database"],svg:'<svg viewBox="0 0 24 24"><path fill="#3ECF8E" d="M13.4 2.2a1 1 0 0 0-1.4.3L3.3 15.6a1 1 0 0 0 .8 1.5h7.6l-1.3 4.7a1 1 0 0 0 1.6.9l9.3-11.4a1 1 0 0 0-.8-1.6h-8.2l1.7-6.9a1 1 0 0 0-.6-.6z"/></svg>'},{id:"prisma",name:"Prisma ORM",category:"database",color:"#2D3748",keywords:["prisma","orm","database","schema","typescript","postgres"],svg:'<svg viewBox="0 0 24 24" fill="#2D3748"><path d="M12.7 2.3a1 1 0 0 0-1.4 0L2.5 11.1a1 1 0 0 0 0 1.4l8.8 8.8a1 1 0 0 0 1.4 0l8.8-8.8a1 1 0 0 0 0-1.4L12.7 2.3zM12 5.4l5.6 5.6-5.6 5.6-5.6-5.6L12 5.4z"/></svg>'},{id:"firebase",name:"Firebase",category:"database",color:"#FFCA28",keywords:["firebase","google","firestore","nosql","auth","cloud"],svg:'<svg viewBox="0 0 24 24"><path fill="#FFA000" d="M3.9 14.5L6.4 2.8a.7.7 0 0 1 1.3-.2l3.4 6.4-7.2 5.5z"/><path fill="#F57F17" d="M14.5 9.4L12.7 6a.7.7 0 0 0-1.3 0L3.9 14.5l10.6-5.1z"/><path fill="#FFCA28" d="M20.1 14.5l-1.7-10.4a.7.7 0 0 0-1.3-.3l-9.8 15.2 12.8-4.5z"/></svg>'},{id:"docker",name:"Docker",category:"cloud",color:"#2496ED",keywords:["docker","container","devops","kubernetes","cloud"],svg:'<svg viewBox="0 0 24 24" fill="#2496ED"><path d="M22.5 10.5c-.3-.2-1.5-.3-2.3.3-.4-.9-1.2-1.6-2.2-1.8-.2-.7-.7-1.4-1.5-1.7V7h-2.5v2H11V7H8.5v2H6V7H3.5v4.5C2 12 1 13.5 1 15.2c0 3.8 3.5 6.8 9.5 6.8 6.5 0 10.5-3.3 11.5-8 .8-.3 1.5-1.5 1.5-2.5-.3-.5-.7-.8-1-.1zM6 10h2V8H6v2zm3 0h2V8H9v2zm3 0h2V8h-2v2zm3 0h2V8h-2v2z"/></svg>'},{id:"kubernetes",name:"Kubernetes",category:"cloud",color:"#326CE5",keywords:["k8s","kubernetes","cloud","orchestration","docker","devops"],svg:'<svg viewBox="0 0 24 24" fill="#326CE5"><path d="M12 2l9.5 5.5v11L12 22l-9.5-3.5v-11L12 2zm0 2.8L4.5 9.2v7.6L12 19.2l7.5-2.4V9.2L12 4.8zm0 3.2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"/></svg>'},{id:"aws",name:"AWS",category:"cloud",color:"#FF9900",keywords:["aws","amazon","cloud","ec2","s3","lambda","serverless"],svg:'<svg viewBox="0 0 24 24"><path fill="#FF9900" d="M18.8 15.8c-2.4 1.7-5.7 2.6-8.7 2.6-4.1 0-7.8-1.5-10.6-4.1-.2-.2 0-.5.3-.4 3 1.7 6.6 2.7 10.3 2.7 2.6 0 5.6-.6 8.3-2 .4-.3.8.2.4.6v.6zm1.3-.9c-.3-.4-1.9-.2-2.7-.1-.2 0-.3-.2-.1-.3 1.1-.9 2.9-.6 3.2-.2.3.4-.1 2.3-1.1 3.2-.2.2-.4.1-.3-.1.4-.7 1.2-2.1 1-2.5z"/><path fill="#232F3E" d="M8.2 12.7c0 1.2-.8 1.9-1.9 1.9s-1.8-.7-1.8-1.9c0-1.2.7-1.9 1.8-1.9 1.1 0 1.9.7 1.9 1.9zm5.3-2.3v3.9c0 1-.3 1.8-1 2.3-.7.5-1.7.7-2.9.7-1.5 0-2.8-.4-3.5-1l.7-1.2c.6.5 1.6.8 2.6.8 1.3 0 2-.6 2-1.7v-.4c-.5.6-1.3 1-2.3 1-1.8 0-3.1-1.3-3.1-3.2 0-1.9 1.3-3.3 3.1-3.3 1.1 0 1.9.4 2.4 1.1V8h1.9v2.4h.1z"/></svg>'},{id:"gcp",name:"Google Cloud",category:"cloud",color:"#4285F4",keywords:["gcp","google","cloud","kubernetes","bigquery"],svg:'<svg viewBox="0 0 24 24"><path fill="#EA4335" d="M12 4.5a7.5 7.5 0 0 0-7.2 5.4l2.9 1.1A4.5 4.5 0 0 1 12 7.5c1.4 0 2.6.6 3.4 1.6l2.2-2.2A7.5 7.5 0 0 0 12 4.5z"/><path fill="#4285F4" d="M19.5 12c0-.4 0-.9-.1-1.3H12v3h4.3a3.8 3.8 0 0 1-1.6 2.4l2.4 1.9c1.4-1.3 2.4-3.4 2.4-6z"/><path fill="#FBBC05" d="M7.7 11l-2.9-1.1A7.5 7.5 0 0 0 4.5 12c0 1.4.4 2.7 1.1 3.8l2.6-1.8A4.5 4.5 0 0 1 7.7 11z"/><path fill="#34A853" d="M12 19.5c2.1 0 3.9-.7 5.2-2l-2.4-1.9c-.7.5-1.6.9-2.8.9a4.5 4.5 0 0 1-4.2-3.1L5.2 15.2A7.5 7.5 0 0 0 12 19.5z"/></svg>'},{id:"vercel",name:"Vercel",category:"cloud",color:"#000000",keywords:["vercel","nextjs","deployment","hosting","serverless","cloud"],svg:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 20h20L12 2z"/></svg>'},{id:"cloudflare",name:"Cloudflare",category:"cloud",color:"#F38020",keywords:["cloudflare","cdn","dns","security","workers","edge"],svg:'<svg viewBox="0 0 24 24" fill="#F38020"><path d="M18.2 9.5a5.5 5.5 0 0 0-10.4-1.3A4.5 4.5 0 0 0 4 12.5a4.5 4.5 0 0 0 4.5 4.5h11a3.5 3.5 0 0 0 .7-6.9v-.6z"/></svg>'},{id:"linux",name:"Linux",category:"cloud",color:"#FCC624",keywords:["linux","ubuntu","debian","server","os","kernel"],svg:'<svg viewBox="0 0 24 24"><path fill="#333" d="M12 2a4 4 0 0 0-4 4v4a4 4 0 0 0 8 0V6a4 4 0 0 0-4-4z"/><path fill="#FCC624" d="M12 12c-3.3 0-6 2.7-6 6v2h12v-2c0-3.3-2.7-6-6-6z"/><circle cx="10" cy="6" r="1" fill="#fff"/><circle cx="14" cy="6" r="1" fill="#fff"/><path fill="#FFA500" d="M11 8h2l-1 2-1-2z"/></svg>'},{id:"nginx",name:"NGINX",category:"cloud",color:"#009639",keywords:["nginx","proxy","web-server","load-balancer","cloud"],svg:'<svg viewBox="0 0 24 24" fill="#009639"><path d="M12 2L3 7.2v9.6L12 22l9-5.2V7.2L12 2zm-4.5 6.2h2.2l4.8 7.3v-7.3h2v9.6h-2.2L9.5 10.5v7.3h-2V8.2z"/></svg>'},{id:"terraform",name:"Terraform",category:"cloud",color:"#844FBA",keywords:["terraform","iac","cloud","infrastructure","devops"],svg:'<svg viewBox="0 0 24 24" fill="#844FBA"><path d="M1.5 3.5l6.5 3.8v7.5l-6.5-3.8V3.5zm7.5 4.4l6.5-3.8v7.5l-6.5 3.8V7.9zm0 8.8l6.5-3.8v7.5L9 24.2v-7.5zm7.5-13.2L23 7.3v7.5l-6.5-3.8V3.5z"/></svg>'},{id:"openai",name:"OpenAI / AI",category:"tools",color:"#10A37F",keywords:["openai","chatgpt","ai","llm","gpt","model"],svg:'<svg viewBox="0 0 24 24" fill="#10A37F"><path d="M22.3 10.7a6.2 6.2 0 0 0-.5-4.8 6.3 6.3 0 0 0-6.1-3.1 6.3 6.3 0 0 0-4.6-2 6.3 6.3 0 0 0-5.8 4 6.3 6.3 0 0 0-4 2.8 6.3 6.3 0 0 0 .7 6.8 6.2 6.2 0 0 0 .5 4.8 6.3 6.3 0 0 0 6.1 3.1 6.3 6.3 0 0 0 4.6 2 6.3 6.3 0 0 0 5.8-4 6.3 6.3 0 0 0 4-2.8 6.3 6.3 0 0 0-.7-6.8zm-9.3 10.4a4.8 4.8 0 0 1-3.3-1.3l.1-.1 3.8-2.2a.7.7 0 0 0 .4-.6v-5.2l1.6.9v4.4a4.8 4.8 0 0 1-2.6 4.1zm-7.6-3.4a4.8 4.8 0 0 1-.6-3.5l.1.1 3.8 2.2a.7.7 0 0 0 .7 0l4.5-2.6v1.9l-3.8 2.2a4.8 4.8 0 0 1-4.7-.3zm-1.8-7.9a4.8 4.8 0 0 1 2.7-2.2v4.6a.7.7 0 0 0 .4.6l4.5 2.6-1.6.9-3.8-2.2a4.8 4.8 0 0 1-2.2-4.3zm13.1 2.6l-4.5-2.6 1.6-.9 3.8 2.2a4.8 4.8 0 0 1 2.2 4.3 4.8 4.8 0 0 1-2.7 2.2v-4.6a.7.7 0 0 0-.4-.6zm2.3-3.6a4.8 4.8 0 0 1 .6 3.5l-.1-.1-3.8-2.2a.7.7 0 0 0-.7 0l-4.5 2.6v-1.9l3.8-2.2a4.8 4.8 0 0 1 4.7.3zm-6.8-5.3a4.8 4.8 0 0 1 3.3 1.3l-.1.1-3.8 2.2a.7.7 0 0 0-.4.6v5.2l-1.6-.9V8.5a4.8 4.8 0 0 1 2.6-4.1zm-1.6 7.3l2-1.2 2 1.2v2.3l-2 1.2-2-1.2v-2.3z"/></svg>'},{id:"github",name:"GitHub",category:"tools",color:"#181717",keywords:["github","git","repo","vcs","code","devops"],svg:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2A10 10 0 0 0 2 12c0 4.4 2.9 8.2 6.8 9.5.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.4-3.4-1.4-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.6 1.1 1.6 1.1.9 1.6 2.4 1.1 3 .9.1-.7.4-1.1.7-1.4-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.8 0-.3-.4-1.3.1-2.7 0 0 .9-.3 2.8 1.1a10 10 0 0 1 5.2 0c2-1.4 2.8-1.1 2.8-1.1.5 1.4.2 2.4.1 2.7.7.8 1 1.7 1 2.8 0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9v2.8c0 .3.2.6.7.5A10 10 0 0 0 22 12 10 10 0 0 0 12 2z"/></svg>'},{id:"kafka",name:"Apache Kafka",category:"tools",color:"#231F20",keywords:["kafka","event","streaming","queue","message","pubsub"],svg:'<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="3"/><circle cx="5" cy="8" r="2.5"/><circle cx="5" cy="16" r="2.5"/><circle cx="19" cy="8" r="2.5"/><circle cx="19" cy="16" r="2.5"/><line x1="7.2" y1="9" x2="9.8" y2="10.8" stroke="currentColor" stroke-width="1.8"/><line x1="7.2" y1="15" x2="9.8" y2="13.2" stroke="currentColor" stroke-width="1.8"/><line x1="16.8" y1="9" x2="14.2" y2="10.8" stroke="currentColor" stroke-width="1.8"/><line x1="16.8" y1="15" x2="14.2" y2="13.2" stroke="currentColor" stroke-width="1.8"/></svg>'},{id:"stripe",name:"Stripe",category:"tools",color:"#635BFF",keywords:["stripe","payment","billing","checkout","api"],svg:'<svg viewBox="0 0 24 24" fill="#635BFF"><path d="M13.9 10.4c0-.9-.7-1.3-1.8-1.3-1.6 0-3.6.6-4.9 1.4L6 6.8c1.6-.9 4-1.5 6.4-1.5 4.6 0 7.6 2.3 7.6 6.3 0 6.1-8.4 5.2-8.4 7.8 0 1 .9 1.4 2.2 1.4 1.9 0 4.3-.8 5.7-1.8l1.2 3.6c-1.7 1.1-4.4 1.8-7.1 1.8-4.9 0-8.1-2.4-8.1-6.4-.1-6.4 8.4-5.3 8.4-8z"/></svg>'},{id:"postman",name:"Postman",category:"tools",color:"#FF6C37",keywords:["postman","api","testing","rest","http"],svg:'<svg viewBox="0 0 24 24" fill="#FF6C37"><circle cx="12" cy="12" r="10"/><path fill="#fff" d="M16 11.5c-.8-.8-2-1.3-3.2-1.3H9v4.5h1.5v-1.7h2.1c.8 0 1.5-.3 2-1 .5-.6.6-1.5-.2-2zm-3.2 1.8h-2.3v-1.7h2.3c.7 0 1.1.4 1.1.9s-.4.8-1.1.8z"/></svg>'}];function Ja(e,t){let r=e.svg.trim();r.includes("xmlns=")||(r=r.replace("<svg",'<svg xmlns="http://www.w3.org/2000/svg"')),!r.includes("width=")&&!r.includes("height=")&&(r=r.replace("<svg",'<svg width="128" height="128"'));try{if(typeof window<"u"){let o=new TextEncoder().encode(r),c="";for(let d=0;d<o.length;d++)c+=String.fromCharCode(o[d]);return `data:image/svg+xml;base64,${window.btoa(c)}`}}catch{}return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(r)}`}function Rn({isOpen:e,onClose:t,onInsertTechStencil:r}){let[o,c]=useState(""),[d,h]=useState("all"),[s,n]=useState("badge"),p=useRef(null),i=useRef(null);if(useEffect(()=>{if(e){let a=setTimeout(()=>{p.current?.focus();},100);return ()=>clearTimeout(a)}},[e]),useEffect(()=>{let a=x=>{x.key==="Escape"&&e&&t();};return window.addEventListener("keydown",a),()=>window.removeEventListener("keydown",a)},[e,t]),!e)return null;let l=Ln.filter(a=>{let x=d==="all"||a.category===d,m=o.toLowerCase().trim();if(!m)return x;let g=a.name.toLowerCase().includes(m),w=a.keywords.some(_=>_.toLowerCase().includes(m));return x&&(g||w)}),u=a=>{let x=Ja(a);r(x,a.name,s),t();};return jsx("div",{role:"dialog","aria-modal":"true","aria-labelledby":"tech-stencils-title",className:"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 dark:bg-black/60 backdrop-blur-sm animate-in fade-in duration-150",onClick:a=>{a.target===a.currentTarget&&t();},children:jsxs("div",{ref:i,className:"fk-card w-full max-w-2xl bg-[#eef1f6]/98 dark:bg-[#15161a]/98 backdrop-blur-3xl rounded-[22px] border border-white/80 dark:border-white/[0.08] shadow-[-8px_-8px_24px_rgba(255,255,255,0.9),_12px_12px_32px_rgba(166,175,195,0.6)] dark:shadow-[-6px_-6px_20px_rgba(255,255,255,0.03),_12px_12px_36px_rgba(0,0,0,0.95)] overflow-hidden flex flex-col max-h-[85vh] animate-in zoom-in-95 duration-150",children:[jsxs("div",{className:"flex items-center justify-between px-6 pt-5 pb-3 border-b border-black/5 dark:border-white/5",children:[jsxs("div",{className:"flex items-center gap-2.5",children:[jsx("div",{className:"w-8 h-8 rounded-[10px] bg-primary text-white flex items-center justify-center shadow-md",children:jsx(IconBracketsContain,{size:18,stroke:2})}),jsxs("div",{children:[jsxs("h2",{id:"tech-stencils-title",className:"text-base font-bold text-neutral-800 dark:text-neutral-100 flex items-center gap-2",children:["Developer & Cloud Stencils",jsx("span",{className:"text-[10px] px-2 py-0.5 rounded-full bg-primary/10 text-primary dark:text-foreground border border-primary/20 font-semibold",children:"30+ Logos"})]}),jsx("p",{className:"text-xs text-neutral-500 dark:text-neutral-400",children:"1-click insert official tech icons for system design & architecture diagrams"})]})]}),jsx("button",{type:"button",onClick:t,className:"w-7 h-7 rounded-[8px] flex items-center justify-center text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 hover:bg-neutral-200/50 dark:hover:bg-neutral-800/50 transition-colors cursor-pointer",children:jsx(IconX,{size:16})})]}),jsxs("div",{className:"px-6 pt-3 pb-2 flex flex-col sm:flex-row gap-2.5 items-stretch sm:items-center justify-between",children:[jsxs("div",{className:"relative flex-1",children:[jsx(IconSearch,{size:16,className:"absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-500 pointer-events-none"}),jsx("input",{ref:p,type:"text",value:o,onChange:a=>c(a.target.value),placeholder:"Search React, Docker, Postgres, AWS, Python...",className:"w-full pl-9 pr-8 py-2 text-xs rounded-[11px] bg-white/80 dark:bg-[#1f2128]/80 border border-neutral-300/80 dark:border-neutral-700/80 text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-primary/40 shadow-inner"}),o&&jsx("button",{type:"button",onClick:()=>c(""),className:"absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200",children:jsx(IconX,{size:13})})]}),jsxs("div",{className:"flex items-center gap-1 p-0.5 rounded-[10px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shrink-0",children:[jsx("button",{type:"button",onClick:()=>n("badge"),title:"Insert as styled card with label",className:`px-2.5 py-1 text-[11px] font-medium rounded-[8px] transition-all cursor-pointer ${s==="badge"?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground font-bold shadow-sm":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Badge Card"}),jsx("button",{type:"button",onClick:()=>n("standalone"),title:"Insert standalone SVG logo icon",className:`px-2.5 py-1 text-[11px] font-medium rounded-[8px] transition-all cursor-pointer ${s==="standalone"?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground font-bold shadow-sm":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Pure Logo"})]})]}),jsx("div",{className:"px-6 py-2 flex items-center gap-1.5 overflow-x-auto no-scrollbar border-b border-black/5 dark:border-white/5",children:In.map(a=>jsx("button",{type:"button",onClick:()=>h(a.id),className:`px-2.5 py-1 rounded-full text-[11px] font-medium transition-all whitespace-nowrap cursor-pointer ${d===a.id?"bg-primary text-primary-foreground font-semibold shadow-xs":"bg-neutral-200/60 dark:bg-neutral-800/60 text-neutral-600 dark:text-neutral-300 hover:bg-neutral-300/70 dark:hover:bg-neutral-700/70"}`,children:a.label},a.id))}),jsxs("div",{className:"flex-1 overflow-y-auto p-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3",children:[l.map(a=>jsxs("button",{type:"button",onClick:()=>u(a),className:"flex items-center gap-3 p-2.5 rounded-[13px] bg-white/70 dark:bg-[#1a1c22]/70 hover:bg-white dark:hover:bg-[#22242c] border border-neutral-200/80 dark:border-neutral-800/80 hover:border-primary/40 dark:hover:border-primary/40 shadow-xs hover:shadow-md hover:-translate-y-0.5 transition-all group cursor-pointer text-left",children:[jsx("div",{className:"w-9 h-9 rounded-[9px] flex items-center justify-center p-1.5 shrink-0 bg-neutral-100 dark:bg-neutral-900 border border-black/5 dark:border-white/5 group-hover:scale-105 transition-transform",dangerouslySetInnerHTML:{__html:a.svg}}),jsxs("div",{className:"min-w-0 flex-1",children:[jsx("div",{className:"text-xs font-semibold text-neutral-800 dark:text-neutral-200 truncate group-hover:text-primary dark:group-hover:text-blue-200 transition-colors",children:a.name}),jsx("div",{className:"text-[9px] text-neutral-400 dark:text-neutral-500 capitalize truncate",children:a.category})]}),jsx("div",{className:"opacity-0 group-hover:opacity-100 transition-opacity text-primary shrink-0",children:jsx(IconPlus,{size:14,stroke:2.5})})]},a.id)),l.length===0&&jsxs("div",{className:"col-span-full py-12 flex flex-col items-center justify-center text-center",children:[jsx(IconSparkles,{size:32,className:"text-neutral-300 dark:text-neutral-700 mb-2"}),jsxs("p",{className:"text-sm font-semibold text-neutral-600 dark:text-neutral-300",children:["No tech stencils found for \u201C",o,"\u201D"]}),jsx("p",{className:"text-xs text-neutral-400 mt-0.5",children:"Try searching for React, Python, Docker, PostgreSQL, AWS..."})]})]}),jsxs("div",{className:"px-6 py-3 bg-[#e8ecf3]/70 dark:bg-[#121316]/70 border-t border-black/5 dark:border-white/5 flex items-center justify-between text-[11px] text-neutral-500 dark:text-neutral-400",children:[jsx("span",{children:"Clicking an icon places it directly onto your canvas."}),jsx("span",{className:"font-mono text-[10px] opacity-70",children:"Esc to close"})]})]})})}var Po=[{id:"mindmap",title:"Mind Map Starter",category:"Brainstorming",description:"Central theme with radiating branches for ideation, strategy, and brainstorming sessions.",tag:"Ideation",tagColor:"bg-purple-100 dark:bg-purple-950/60 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-800",elementsCount:13,previewType:"mindmap"},{id:"flowchart",title:"Flowchart Decision Tree",category:"Diagrams",description:"Standard workflow with start pill, process steps, decision diamonds, and return branches.",tag:"Workflow",tagColor:"bg-emerald-100 dark:bg-emerald-950/60 text-emerald-700 dark:text-emerald-300 border-emerald-200 dark:border-emerald-800",elementsCount:11,previewType:"flowchart"},{id:"erd",title:"Entity-Relationship (ERD) Schema",category:"Engineering",description:"Database table models with primary/foreign keys and Crow's Foot relationship connectors.",tag:"Database",tagColor:"bg-blue-100 dark:bg-blue-950/60 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800",elementsCount:7,previewType:"erd"},{id:"kanban",title:"Kanban / Retrospective Board",category:"Agile & Planning",description:"Organized columns with structured frames and color-coded sticky notes for sprint tracking.",tag:"Sprint Board",tagColor:"bg-amber-100 dark:bg-amber-950/60 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-800",elementsCount:9,previewType:"kanban"},{id:"user_journey",title:"User Journey Map",category:"Agile & Planning",description:"Step-by-step customer experience map tracking user actions, touchpoints, and pain points.",tag:"UX Design",tagColor:"bg-rose-100 dark:bg-rose-950/60 text-rose-700 dark:text-rose-300 border-rose-200 dark:border-rose-800",elementsCount:12,previewType:"journey"}],ri=0;function lt(e){return ri+=1,`tmpl_${e}_${Date.now()}_${ri}_${Math.random().toString(36).substring(2,6)}`}function oi(e,t,r=false){let o=[];if(e==="mindmap"){let c=t.x,d=t.y,h=lt("center");o.push({id:h,type:"rectangle",x:c-120,y:d-45,width:240,height:90,strokeColor:"#4f46e5",strokeWidth:2.5,strokeStyle:"solid",fillColor:"#e0e7ff",fillStyle:"solid",edgeStyle:"round",opacity:1,zIndex:10}),o.push({id:lt("center_text"),type:"text",x:c-110,y:d-25,width:220,height:50,text:`\u{1F680} Product Vision
|
|
97
|
+
`)[0].slice(0,24):`${ne.type.charAt(0).toUpperCase()+ne.type.slice(1)} ${le+1}`;return {id:ne.id,title:Ue,x:ke,y:Ie,width:we,height:Ge,isVirtual:true}})},[r]),I=useCallback((U,G=true)=>{if(typeof window>"u")return;let Ne=window.innerWidth,ne=window.innerHeight,le=70,ce=(Ne-le*2)/Math.max(U.width,100),ke=(ne-le*2)/Math.max(U.height,100),Ie=Math.min(Math.max(Math.min(ce,ke),.1),2.5),we=U.x+U.width/2,Ge=U.y+U.height/2,Ue=Ne/2-we*Ie,ee=ne/2-Ge*Ie;if(!G){d({x:Ue,y:ee,zoom:Ie});return}let Pe=c.x,xe=c.y,O=c.zoom,Z=performance.now(),Se=480,K=(Ue-Pe)/Ie,de=(ee-xe)/Ie,re=Math.hypot(K,de),T=Math.min(.18,Math.max(.04,re/3800)),L=q=>{let k=q-Z,pe=Math.min(k/Se,1),V=1-Math.pow(1-pe,3),$=Math.sin(pe*Math.PI)*T*Ie,te=Pe+(Ue-Pe)*V,fe=xe+(ee-xe)*V,be=Math.max(.08,O+(Ie-O)*V-$);d({x:te,y:fe,zoom:be}),pe<1&&requestAnimationFrame(L);};requestAnimationFrame(L);},[c,d]);useEffect(()=>{e&&P.length>0&&(p(0),I(P[0],true));},[e,P.length]);let b=useCallback(U=>{U<0||U>=P.length||(p(U),I(P[U],true));},[P,I]),f=useCallback(()=>{n<P.length-1&&b(n+1);},[n,P.length,b]),v=useCallback(()=>{n>0&&b(n-1);},[n,b]),C=useCallback(()=>{document.fullscreenElement?document.exitFullscreen().then(()=>{l(false);}).catch(()=>{}):document.documentElement.requestFullscreen().then(()=>{l(true);}).catch(()=>{});},[]);useEffect(()=>{if(!e)return;let U=G=>{if(!(document.activeElement?.tagName==="INPUT"||document.activeElement?.tagName==="TEXTAREA"))switch(G.key){case "ArrowRight":case "PageDown":case " ":case "Enter":G.preventDefault(),f();break;case "ArrowLeft":case "PageUp":case "Backspace":G.preventDefault(),v();break;case "Home":G.preventDefault(),b(0);break;case "End":G.preventDefault(),b(P.length-1);break;case "Escape":G.preventDefault(),document.fullscreenElement&&(document.exitFullscreen().catch(()=>{}),l(false)),t();break;case "f":case "F":!G.ctrlKey&&!G.metaKey&&!G.altKey&&(G.preventDefault(),C());break;case "l":case "L":!G.ctrlKey&&!G.metaKey&&!G.altKey&&(G.preventDefault(),w(Ne=>!Ne));break;case "s":case "S":!G.ctrlKey&&!G.metaKey&&s&&(G.preventDefault(),s());break;case "g":case "G":!G.ctrlKey&&!G.metaKey&&!G.altKey&&(G.preventDefault(),a(Ne=>!Ne));break}};return window.addEventListener("keydown",U),()=>window.removeEventListener("keydown",U)},[e,f,v,b,P.length,t,C,s]);let M=useCallback(()=>{m(true),_.current&&clearTimeout(_.current),_.current=setTimeout(()=>{u||m(false);},3200);},[u]);if(useEffect(()=>{if(!e)return;let U=G=>{D.current={x:G.clientX,y:G.clientY},g&&E.current.push({x:G.clientX,y:G.clientY,time:performance.now()}),M();};return window.addEventListener("mousemove",U),M(),()=>{window.removeEventListener("mousemove",U),_.current&&clearTimeout(_.current);}},[e,g,M]),useEffect(()=>{if(!e||!g){z.current&&cancelAnimationFrame(z.current);return}let U=S.current;if(!U)return;let G=U.getContext("2d");if(!G)return;let Ne=()=>{U.width=window.innerWidth,U.height=window.innerHeight;};Ne(),window.addEventListener("resize",Ne);let ne=()=>{let le=performance.now();G.clearRect(0,0,U.width,U.height),E.current=E.current.filter(we=>le-we.time<450);let ce=E.current;if(ce.length>1)for(let we=1;we<ce.length;we++){let Ge=ce[we-1],Ue=ce[we],ee=le-Ue.time,Pe=Math.max(0,1-ee/450);G.beginPath(),G.moveTo(Ge.x,Ge.y),G.lineTo(Ue.x,Ue.y),G.strokeStyle=`rgba(239, 68, 68, ${Pe*.75})`,G.lineWidth=4*Pe,G.lineCap="round",G.shadowColor="#ef4444",G.shadowBlur=12*Pe,G.stroke();}let{x:ke,y:Ie}=D.current;ke>0&&Ie>0&&(G.beginPath(),G.arc(ke,Ie,7,0,Math.PI*2),G.fillStyle="#ef4444",G.shadowColor="#ff2222",G.shadowBlur=18,G.fill(),G.beginPath(),G.arc(ke,Ie,3,0,Math.PI*2),G.fillStyle="#ffffff",G.shadowBlur=4,G.fill()),z.current=requestAnimationFrame(ne);};return z.current=requestAnimationFrame(ne),()=>{window.removeEventListener("resize",Ne),z.current&&cancelAnimationFrame(z.current);}},[e,g]),!e||P.length===0)return null;let R=P[n],J=(n+1)/P.length*100,oe=n===0,A=n===P.length-1;return jsxs("div",{className:"fixed inset-0 z-40 pointer-events-none select-none",children:[g&&jsx("canvas",{ref:S,className:"fixed inset-0 pointer-events-none z-50"}),jsx("div",{className:"absolute top-0 left-0 right-0 h-1 bg-black/15 dark:bg-white/10 z-50",children:jsx("div",{className:"h-full bg-linear-to-r from-primary via-amber-500 to-primary transition-all duration-300 ease-out shadow-[0_0_8px_rgba(59,130,246,0.6)]",style:{width:`${J}%`}})}),jsx("div",{className:`fixed left-4 top-1/2 -translate-y-1/2 z-50 pointer-events-auto transition-all duration-300 ${x&&!oe?"opacity-100 translate-x-0":"opacity-0 -translate-x-4 pointer-events-none"}`,children:jsx("button",{type:"button",onClick:v,className:"group p-3.5 rounded-full bg-neutral-900/80 dark:bg-[#1c1d22]/90 hover:bg-neutral-900 dark:hover:bg-[#25272e] text-white/90 hover:text-white backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-2xl shadow-black/40 hover:scale-110 active:scale-95 transition-all cursor-pointer flex items-center justify-center",title:"Previous Slide (\u2190 / Backspace)",children:jsx(IconChevronLeft,{size:22,className:"group-hover:-translate-x-0.5 transition-transform"})})}),jsx("div",{className:`fixed right-4 top-1/2 -translate-y-1/2 z-50 pointer-events-auto transition-all duration-300 ${x&&!A?"opacity-100 translate-x-0":"opacity-0 translate-x-4 pointer-events-none"}`,children:jsx("button",{type:"button",onClick:f,className:"group p-3.5 rounded-full bg-neutral-900/80 dark:bg-[#1c1d22]/90 hover:bg-neutral-900 dark:hover:bg-[#25272e] text-white/90 hover:text-white backdrop-blur-xl border border-white/20 dark:border-white/10 shadow-2xl shadow-black/40 hover:scale-110 active:scale-95 transition-all cursor-pointer flex items-center justify-center",title:"Next Slide (\u2192 / Space)",children:jsx(IconChevronRight,{size:22,className:"group-hover:translate-x-0.5 transition-transform"})})}),jsxs("div",{className:`absolute bottom-6 left-1/2 -translate-x-1/2 z-50 pointer-events-auto transition-all duration-300 ${x?"opacity-100 translate-y-0":"opacity-0 translate-y-4 pointer-events-none"}`,children:[jsxs("div",{className:"flex items-center gap-1.5 p-1.5 rounded-[18px] bg-neutral-900/90 dark:bg-[#181818]/95 backdrop-blur-xl border border-white/15 dark:border-neutral-800 text-white shadow-2xl shadow-black/40",children:[jsxs("div",{className:"hidden sm:flex items-center gap-1.5 pl-2.5 pr-2 py-1 text-xs font-semibold text-neutral-300 border-r border-white/10",children:[jsx(IconSlideshow,{size:16,className:"text-primary"}),jsx("span",{className:"max-w-[150px] truncate",children:R?.title||`Slide ${n+1}`})]}),jsxs("div",{className:"flex items-center gap-0.5",children:[jsx("button",{type:"button",onClick:v,disabled:oe,className:"p-2 rounded-[10px] text-neutral-300 hover:text-white hover:bg-white/10 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer",title:"Previous Slide (\u2190 / Backspace)",children:jsx(IconChevronLeft,{size:18})}),jsxs("span",{className:"px-2.5 py-1 text-xs font-mono font-medium text-neutral-200",children:[jsx("span",{className:"font-bold text-white",children:n+1}),jsx("span",{className:"text-neutral-500 mx-1",children:"/"}),jsx("span",{children:P.length})]}),jsx("button",{type:"button",onClick:f,disabled:A,className:"p-2 rounded-[10px] text-neutral-300 hover:text-white hover:bg-white/10 disabled:opacity-30 disabled:hover:bg-transparent transition-colors cursor-pointer",title:"Next Slide (\u2192 / Space)",children:jsx(IconChevronRight,{size:18})})]}),jsx("div",{className:"w-[1px] h-4 bg-white/15 mx-0.5"}),jsx("button",{type:"button",onClick:()=>w(U=>!U),className:`p-2 rounded-[10px] transition-colors cursor-pointer ${g?"bg-rose-500 text-white shadow-[0_0_10px_rgba(239,68,68,0.7)]":"text-neutral-300 hover:text-white hover:bg-white/10"}`,title:"Laser Pointer Trail (L)",children:jsx(IconPointer,{size:18,className:g?"animate-pulse":""})}),s&&jsx("button",{type:"button",onClick:s,className:`p-2 rounded-[10px] transition-colors cursor-pointer ${h?"bg-amber-500 text-white shadow-[0_0_10px_rgba(245,158,11,0.7)]":"text-neutral-300 hover:text-white hover:bg-white/10"}`,title:"Spotlight Mode (S)",children:jsx(IconSparkles,{size:18})}),jsx("button",{type:"button",onClick:()=>a(U=>!U),className:`p-2 rounded-[10px] transition-colors cursor-pointer ${u?"bg-primary text-primary-foreground":"text-neutral-300 hover:text-white hover:bg-white/10"}`,title:"All Slides Grid Overview (G)",children:jsx(IconList,{size:18})}),jsx("button",{type:"button",onClick:C,className:"p-2 rounded-[10px] text-neutral-300 hover:text-white hover:bg-white/10 transition-colors cursor-pointer",title:i?"Exit Fullscreen (F)":"Enter Fullscreen (F)",children:i?jsx(IconMinimize,{size:18}):jsx(IconMaximize,{size:18})}),jsx("button",{type:"button",onClick:()=>{document.fullscreenElement&&document.exitFullscreen().catch(()=>{}),t();},className:"p-2 rounded-[10px] text-rose-400 hover:text-rose-300 hover:bg-rose-500/20 transition-colors cursor-pointer",title:"Exit Presentation Mode (Esc)",children:jsx(IconX,{size:18})})]}),u&&jsxs("div",{className:"absolute bottom-full left-1/2 -translate-x-1/2 mb-3 w-84 max-h-72 overflow-y-auto bg-neutral-900/95 dark:bg-[#181818]/95 backdrop-blur-xl border border-white/15 dark:border-neutral-800 rounded-[18px] p-2.5 shadow-2xl space-y-1",children:[jsxs("div",{className:"px-2 py-1 text-[11px] font-bold uppercase tracking-wider text-neutral-400 border-b border-white/10 mb-1 flex items-center justify-between",children:[jsx("span",{children:"Presentation Slides"}),jsxs("span",{className:"font-mono text-[10px]",children:[P.length," Total"]})]}),P.map((U,G)=>jsxs("button",{type:"button",onClick:()=>{b(G),a(false);},className:`w-full flex items-center justify-between px-3 py-2 rounded-[10px] text-xs text-left transition-all ${G===n?"bg-primary text-primary-foreground font-semibold shadow-xs":"text-neutral-300 hover:bg-white/10 hover:text-white"}`,children:[jsxs("div",{className:"flex items-center gap-2.5 truncate",children:[jsx("span",{className:"w-5 h-5 rounded-full bg-white/10 flex items-center justify-center text-[10px] font-mono shrink-0",children:G+1}),jsx("span",{className:"truncate",children:U.title})]}),jsxs("span",{className:"text-[10px] opacity-60 font-mono shrink-0 ml-2",children:[Math.round(U.width),"\xD7",Math.round(U.height)]})]},U.id))]})]})]})}function $l(e){if(!e||e==="transparent")return "text-neutral-700 dark:text-neutral-300";let t=e.replace("#","");if(t.length!==6)return "text-white";let r=parseInt(t.substring(0,2),16),o=parseInt(t.substring(2,4),16),c=parseInt(t.substring(4,6),16);return (r*299+o*587+c*114)/1e3>=150?"text-neutral-800":"text-white"}function Ka(e,t,r){if(e==="transparent")return r?["#121212","#1e1e24","#334155","#64748b","#cbd5e1"]:["#f8fafc","#e2e8f0","#cbd5e1","#94a3b8","#64748b"];let o=e.replace("#","");if(o.length===3&&(o=o[0]+o[0]+o[1]+o[1]+o[2]+o[2]),o.length!==6)return r?["#121212","#1e1e24","#334155","#64748b","#cbd5e1"]:["#f8fafc","#e2e8f0","#cbd5e1","#94a3b8","#64748b"];let c=parseInt(o.substring(0,2),16)/255,d=parseInt(o.substring(2,4),16)/255,h=parseInt(o.substring(4,6),16)/255,s=Math.max(c,d,h),n=Math.min(c,d,h),p=0,i=0,l=(s+n)/2;if(s!==n){let x=s-n;switch(i=l>.5?x/(2-s-n):x/(s+n),s){case c:p=(d-h)/x+(d<h?6:0);break;case d:p=(h-c)/x+2;break;case h:p=(c-d)/x+4;break}p/=6;}let u=(x,m,g)=>{let w=(D,P,I)=>(I<0&&(I+=1),I>1&&(I-=1),I<.16666666666666666?D+(P-D)*6*I:I<.5?P:I<.6666666666666666?D+(P-D)*(.6666666666666666-I)*6:D),_,S,E;if(m===0)_=S=E=g;else {let D=g<.5?g*(1+m):g+m-g*m,P=2*g-D;_=w(P,D,x+1/3),S=w(P,D,x),E=w(P,D,x-1/3);}let z=D=>{let P=Math.round(Math.max(0,Math.min(1,D))*255).toString(16);return P.length===1?"0"+P:P};return `#${z(_)}${z(S)}${z(E)}`},a=Math.max(i,.45);return t==="stroke"?r?[.2,.35,.5,.65,.82].map(m=>u(p,a,m)):[.93,.78,.62,.48,.35].map(m=>u(p,a,m)):r?[.08,.16,.3,.52,.76].map(m=>u(p,a,m)):[.96,.88,.74,.58,.42].map(m=>u(p,a,m))}function En({uiConfig:e,selectedElements:t,updateSelectedElements:r,deleteSelectedElements:o,duplicateSelectedElements:c,groupSelectedElements:d,ungroupSelectedElements:h,alignSelectedElements:s,distributeSelectedElements:n,bringToFront:p,sendToBack:i,bringForward:l,sendBackward:u,defaultStyles:a,setDefaultStyles:x,canvasBackground:m,setCanvasBackground:g}){let w=e?.showStrokeColor??true,_=e?.showFillColor??true,S=e?.showFillStyle??true,E=e?.showStrokeWidth??true,z=e?.showStrokeStyle??true,D=e?.showRoughness??true,P=e?.showEdgeStyle??true,I=e?.showArrowheads??true,b=e?.showTypography??true,f=e?.showOpacity??true,v=e?.showCanvasBackgroundPicker??true,C=e?.showAlignment??true,M=e?.showLayerOrdering??true,R=e?.showGrouping??true,J=e?.showDuplicateDelete??true,{resolvedTheme:oe,isDark:A,panelVariant:U}=nr(),G=U==="neumorphic";ho();let [ne,le]=useState(false),[ce,ke]=useState("none"),[Ie,we]=useState(null),[Ge,Ue]=useState("none"),[ee,Pe]=useState(null),[xe,O]=useState(null),Z=useRef(null),Se=useRef(null),K=useRef(null);useRef(null);let re=t.length>0,T=re?t[0]:a,L=ce==="stroke"?T.strokeColor||"#1e1e24":T.fillColor||"transparent",q=xe!==null?xe:L!=="transparent"?L.replace("#","").toUpperCase():"",k=N=>{re&&r(N);let ye=["strokeColor","strokeWidth","strokeStyle","fillColor","fillStyle","roughStyle","roughness","edgeStyle","opacity","fontFamily","fontSize","textAlign","arrowType","startArrowhead","endArrowhead","stickyColor"],Te={},kt=false;for(let ut of ye)N[ut]!==void 0&&(Te[ut]=N[ut],kt=true);kt&&x(ut=>({...ut,...Te}));};useEffect(()=>{if(t.length===1){let N=t[0];x(ye=>{let Te={...ye};return N.strokeColor!==void 0&&(Te.strokeColor=N.strokeColor),N.strokeWidth!==void 0&&(Te.strokeWidth=N.strokeWidth),N.strokeStyle!==void 0&&(Te.strokeStyle=N.strokeStyle),N.fillColor!==void 0&&N.type!=="arrow"&&N.type!=="line"&&(Te.fillColor=N.fillColor),N.fillStyle!==void 0&&N.type!=="arrow"&&N.type!=="line"&&(Te.fillStyle=N.fillStyle),N.roughStyle!==void 0&&(Te.roughStyle=N.roughStyle),N.roughness!==void 0&&(Te.roughness=N.roughness),N.edgeStyle!==void 0&&(Te.edgeStyle=N.edgeStyle),N.opacity!==void 0&&(Te.opacity=N.opacity),N.fontFamily!==void 0&&(Te.fontFamily=N.fontFamily),N.fontSize!==void 0&&(Te.fontSize=N.fontSize),N.textAlign!==void 0&&(Te.textAlign=N.textAlign),N.arrowType!==void 0&&(Te.arrowType=N.arrowType),N.startArrowhead!==void 0&&(Te.startArrowhead=N.startArrowhead),N.endArrowhead!==void 0&&(Te.endArrowhead=N.endArrowhead),N.stickyColor!==void 0&&(Te.stickyColor=N.stickyColor),Te});}},[t[0]?.id,x]);let pe=N=>{O(null),ce==="stroke"?k({strokeColor:N}):ce==="background"&&k({fillColor:N});};useEffect(()=>{let N=ye=>{let Te=ye.target;Z.current&&!Z.current.contains(Te)&&(Te.closest("[data-color-trigger]")||(ke("none"),we(null))),Se.current&&!Se.current.contains(ye.target)&&(Te.closest("[data-arrowhead-trigger]")||(Ue("none"),Pe(null)));};return (ce!=="none"||Ge!=="none")&&document.addEventListener("mousedown",N),()=>{document.removeEventListener("mousedown",N);}},[ce,Ge]),useEffect(()=>{if(ce==="none")return;let N=ye=>{let Te=document.activeElement;if(Te&&(Te.tagName==="INPUT"||Te.tagName==="TEXTAREA")||ye.ctrlKey||ye.metaKey||ye.altKey||ye.shiftKey)return;let kt=ye.key.toLowerCase(),ut=fo.find(Lt=>Lt.key===kt);if(ut){ye.preventDefault();let Lt=ce==="background"?A?ut.fill.dark:ut.fill.light:A?ut.stroke.dark:ut.stroke.light;pe(Lt);return}if(["1","2","3","4","5"].includes(ye.key)){ye.preventDefault();let Lt=parseInt(ye.key,10)-1,jt=Ka(L,ce==="stroke"?"stroke":"background",A);jt[Lt]&&pe(jt[Lt]);}};return document.addEventListener("keydown",N),()=>{document.removeEventListener("keydown",N);}},[ce,L,A]);let V=(N,ye)=>{if(Ue("none"),Pe(null),ce===N){ke("none"),we(null);return}let Te=ye.currentTarget.getBoundingClientRect(),kt=Te.top+Te.height/2,ut=310,Lt=kt-ut/2,jt=76,Ye=window.innerHeight-ut-16,dr=Math.max(jt,Math.min(Lt,Ye)),At=Math.max(14,Math.min(kt-dr,ut-20));we({top:dr,arrowTop:At}),ke(N);},$=(N,ye)=>{if(ke("none"),we(null),Ge===N){Ue("none"),Pe(null);return}let Te=ye.currentTarget.getBoundingClientRect(),kt=Te.top+Te.height/2,ut=220,Lt=kt-ut/2,jt=76,Ye=window.innerHeight-ut-16,dr=Math.max(jt,Math.min(Lt,Ye)),At=Math.max(14,Math.min(kt-dr,ut-20));Pe({top:dr,arrowTop:At}),Ue(N);},te=N=>{let ye=N.replace("#","").trim();(/^[0-9A-Fa-f]{6}$/.test(ye)||/^[0-9A-Fa-f]{3}$/.test(ye))&&pe(`#${ye}`);},fe=re&&T.type==="frame",be=re&&T.type==="image",ue=!re||["rectangle","ellipse","diamond","triangle","capsule","parallelogram","trapezoid","hexagon","cylinder","cloud","star","sticky","frame"].includes(T.type),F=re&&(T.type==="text"||T.type==="sticky"),ve=re&&T.type==="sticky",ae=re&&T.type==="text",ze=re&&(T.type==="line"||T.type==="arrow"),Le=t.length>1,nt=Ka(L,ce==="stroke"?"stroke":"background",A),gt=(()=>{if(!re)return {icon:IconPencil,title:"Canvas Styles",subtitle:"Default drawing properties"};if(Le)return {icon:IconLayersSubtract,title:`Selection (${t.length})`,subtitle:"Multiple items selected"};switch(T.type){case "frame":return {icon:IconSquare,title:T.frameLabel||"Frame",subtitle:"Presentation artboard"};case "sticky":return {icon:IconNote,title:"Sticky Note",subtitle:"Quick idea card"};case "text":return {icon:IconTypography,title:"Text Block",subtitle:"Typography element"};case "arrow":case "line":return {icon:IconArrowUpRight,title:T.type==="arrow"?"Arrow":"Line",subtitle:"Connector line"};case "rectangle":return {icon:IconSquare,title:"Rectangle",subtitle:"Shape element"};case "ellipse":return {icon:IconCircle,title:"Ellipse",subtitle:"Circle shape"};case "triangle":return {icon:IconTriangle,title:"Triangle",subtitle:"3-sided polygon"};case "trapezoid":return {icon:IconSquare,title:"Trapezoid",subtitle:"Trapezium shape"};case "hexagon":return {icon:IconSquare,title:"Hexagon",subtitle:"6-sided polygon"};case "capsule":return {icon:IconCircle,title:"Capsule",subtitle:"Stadium / Pill shape"};case "cylinder":return {icon:IconDatabase,title:"Cylinder",subtitle:"Database shape"};case "cloud":return {icon:IconCloud,title:"Cloud",subtitle:"Network & infra shape"};case "parallelogram":return {icon:IconSquare,title:"Parallelogram",subtitle:"Data input/output shape"};case "star":return {icon:IconSparkles,title:"Star",subtitle:"Highlight & badge shape"};default:return {icon:IconSparkles,title:"Element",subtitle:"Selected item"}}})(),St=gt.icon;return ne?jsxs("button",{type:"button",onClick:()=>le(false),className:"fixed right-3.5 top-16 z-30 flex items-center gap-1.5 px-2.5 py-1.5 rounded-full bg-white/90 dark:bg-[#16161a]/90 backdrop-blur-xl border border-neutral-200/80 dark:border-neutral-800/80 shadow-lg text-neutral-600 dark:text-neutral-300 hover:text-primary dark:hover:text-primary transition-all duration-150 cursor-pointer",title:"Open Properties Panel",children:[jsx(IconChevronLeft,{size:14,stroke:2.2}),jsx("span",{className:"text-[11px] font-semibold pr-0.5",children:"Properties"})]}):jsxs(Fragment,{children:[jsxs("aside",{"aria-label":"Properties Panel",className:`fk-card fixed right-3.5 top-16 z-30 w-[272px] max-h-[calc(100vh-80px)] flex flex-col rounded-[20px] text-neutral-800 dark:text-neutral-200 select-none overflow-hidden transition-all ${G?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 backdrop-blur-2xl border border-white/70 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.85),_8px_8px_20px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.02),_10px_10px_26px_rgba(0,0,0,0.85)]":"bg-white/95 dark:bg-[#16171b]/95 backdrop-blur-md border border-black/[0.04] dark:border-white/[0.05] shadow-[0_10px_30px_-4px_rgba(0,0,0,0.08),0_4px_12px_-2px_rgba(0,0,0,0.03)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.65),0_4px_14px_-2px_rgba(0,0,0,0.45)]"}`,children:[jsxs("div",{className:"flex items-center justify-between px-3 py-2.5 border-b border-black/[0.04] dark:border-white/[0.04] bg-white/30 dark:bg-black/15",children:[jsxs("div",{className:"flex items-center gap-2 min-w-0",children:[jsx("div",{className:"w-6 h-6 rounded-[8px] bg-[#f0f3f8] dark:bg-[#1f2128] border border-white/80 dark:border-white/[0.06] shadow-[-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9),_1.5px_1.5px_3.5px_rgba(166,175,195,0.4)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] text-primary flex items-center justify-center shrink-0",children:jsx(St,{size:13,stroke:2.2})}),jsx("div",{className:"min-w-0",children:jsx("h3",{className:"text-xs font-bold text-neutral-900 dark:text-neutral-100 truncate leading-tight",children:gt.title})})]}),jsxs("div",{className:"flex items-center gap-1 shrink-0",children:[J&&re&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:c,className:"w-6 h-6 rounded-[7px] flex items-center justify-center text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white bg-[#f0f3f8]/70 dark:bg-[#1c1e24]/70 border border-white/60 dark:border-white/[0.04] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.5)] transition-all cursor-pointer",title:"Duplicate (Ctrl+D)",children:jsx(IconCopy,{size:13})}),jsx("button",{type:"button",onClick:o,className:"w-6 h-6 rounded-[7px] flex items-center justify-center text-neutral-500 hover:text-rose-600 dark:hover:text-rose-400 bg-[#f0f3f8]/70 dark:bg-[#1c1e24]/70 border border-white/60 dark:border-white/[0.04] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(244,63,94,0.3)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.5)] transition-all cursor-pointer",title:"Delete (Del)",children:jsx(IconTrash,{size:13})}),jsx("div",{className:"w-[1px] h-3 bg-black/10 dark:bg-white/10 mx-0.5"})]}),jsx("button",{type:"button",onClick:()=>le(true),className:"w-6 h-6 rounded-[7px] flex items-center justify-center text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white bg-[#f0f3f8]/70 dark:bg-[#1c1e24]/70 border border-white/60 dark:border-white/[0.04] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.5)] transition-all cursor-pointer",title:"Collapse panel",children:jsx(IconChevronRight,{size:13,stroke:2.2})})]})]}),jsxs("div",{className:"flex-1 overflow-y-auto px-3 py-2.5 space-y-3 text-xs scrollbar-thin scrollbar-thumb-neutral-300 dark:scrollbar-thumb-neutral-700",children:[fe&&t[0]&&(()=>{let N=t[0];return jsxs("div",{className:"space-y-2.5 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsxs("div",{children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:"Frame Title"}),jsx("input",{type:"text",value:N.frameLabel||"",placeholder:"e.g. Slide 1, Screen",onKeyDown:ye=>ye.stopPropagation(),onChange:ye=>k({frameLabel:ye.target.value}),className:"w-full h-7 px-2.5 text-xs font-semibold rounded-[8px] bg-[#e2e6ed] dark:bg-[#121316] border border-black/[0.03] dark:border-white/[0.03] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] text-neutral-900 dark:text-neutral-100 outline-none focus:shadow-[inset_2px_2px_4px_rgba(99,102,241,0.25),_0_0_0_1.5px_rgba(99,102,241,0.4)] transition-all"})]}),jsxs("div",{children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:"Presets"}),jsx("div",{className:"grid grid-cols-3 gap-1.5",children:[{label:"16:9",w:800,h:450},{label:"1080p",w:1920,h:1080},{label:"Mobile",w:390,h:844},{label:"16:10",w:1440,h:900},{label:"4:3",w:1024,h:768},{label:"1:1",w:800,h:800}].map(ye=>{let Te=Math.round(Math.abs(N.width||0))===ye.w&&Math.round(Math.abs(N.height||0))===ye.h;return jsx("button",{type:"button",onClick:()=>k({width:ye.w,height:ye.h}),className:`py-1 rounded-[7px] text-center transition-all cursor-pointer text-[10.5px] ${Te?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary border border-primary/40 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,0.95),_2px_2px_4px_rgba(166,175,195,0.5)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.05),_2px_2px_5px_rgba(0,0,0,0.7)]":"bg-[#e6eaf0] dark:bg-[#18191e] border border-white/60 dark:border-white/[0.04] text-neutral-600 dark:text-neutral-300 shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.8),_1.5px_1.5px_3px_rgba(166,175,195,0.3)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.02),_1.5px_1.5px_4px_rgba(0,0,0,0.5)] hover:bg-[#f0f3f8] dark:hover:bg-[#1f2128]"}`,children:ye.label},ye.label)})})]}),jsxs("div",{children:[jsxs("div",{className:"flex items-center justify-between text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:[jsx("span",{children:"Dimensions"}),jsxs("button",{type:"button",onClick:()=>k({aspectRatioLocked:!N.aspectRatioLocked}),className:`flex items-center gap-1 text-[9px] font-semibold transition-colors cursor-pointer ${N.aspectRatioLocked?"text-primary":"text-neutral-400 hover:text-neutral-600"}`,children:[N.aspectRatioLocked?jsx(IconLock,{size:11}):jsx(IconLockOpen,{size:11}),jsx("span",{children:N.aspectRatioLocked?"Locked":"Unlock"})]})]}),jsxs("div",{className:"grid grid-cols-2 gap-1.5",children:[jsxs("div",{className:"flex items-center gap-1.5 px-2 h-7 rounded-[8px] bg-[#e2e6ed] dark:bg-[#121316] border border-black/[0.03] dark:border-white/[0.03] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsx("span",{className:"text-[10px] font-bold text-neutral-400",children:"W"}),jsx("input",{type:"number",value:Math.round(Math.abs(N.width||0)),onKeyDown:ye=>ye.stopPropagation(),onChange:ye=>{let Te=Math.max(20,parseInt(ye.target.value,10)||20);if(N.aspectRatioLocked&&N.width&&N.height){let kt=Math.abs(N.width)/Math.abs(N.height);k({width:Te,height:Math.round(Te/kt)});}else k({width:Te});},className:"w-full bg-transparent text-neutral-900 dark:text-neutral-100 outline-none font-mono text-xs"})]}),jsxs("div",{className:"flex items-center gap-1.5 px-2 h-7 rounded-[8px] bg-[#e2e6ed] dark:bg-[#121316] border border-black/[0.03] dark:border-white/[0.03] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsx("span",{className:"text-[10px] font-bold text-neutral-400",children:"H"}),jsx("input",{type:"number",value:Math.round(Math.abs(N.height||0)),onKeyDown:ye=>ye.stopPropagation(),onChange:ye=>{let Te=Math.max(20,parseInt(ye.target.value,10)||20);if(N.aspectRatioLocked&&N.width&&N.height){let kt=Math.abs(N.width)/Math.abs(N.height);k({height:Te,width:Math.round(Te*kt)});}else k({height:Te});},className:"w-full bg-transparent text-neutral-900 dark:text-neutral-100 outline-none font-mono text-xs"})]})]})]})]})})(),ve&&jsxs("div",{className:"pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1.5",children:"Note Color"}),jsx("div",{className:"flex items-center justify-between",children:pa.map(N=>{let ye=(T.stickyColor||T.fillColor)===N.bg,Te=A?Mr(N.bg,true).bg:N.bg;return jsx("button",{type:"button",onClick:()=>k({stickyColor:N.bg,fillColor:N.bg,strokeColor:void 0}),title:N.name,className:`w-7 h-7 rounded-full transition-all duration-150 cursor-pointer ${ye?"ring-2 ring-primary ring-offset-2 dark:ring-offset-neutral-900 scale-110 shadow-[-2px_-2px_5px_rgba(255,255,255,0.9),_2px_2px_5px_rgba(0,0,0,0.3)]":"border border-black/10 dark:border-white/10 hover:scale-105 shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.8),_1.5px_1.5px_3px_rgba(0,0,0,0.15)]"}`,style:{backgroundColor:Te}},N.name)})})]}),!ve&&!be&&(w||_)&&jsxs("div",{className:"space-y-2 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:"Appearance"}),jsxs("div",{className:`grid ${w&&_?"grid-cols-2":"grid-cols-1"} gap-2`,children:[w&&jsxs("button",{type:"button","data-color-trigger":"stroke",onClick:N=>V("stroke",N),className:`flex items-center gap-2 p-1.5 rounded-[11px] transition-all cursor-pointer ${ce==="stroke"?"bg-[#e4e8ef] dark:bg-[#131417] border border-primary/40 shadow-[inset_2px_2px_4px_rgba(166,175,195,0.55),_inset_-2px_-2px_4px_rgba(255,255,255,1)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_3px_rgba(255,255,255,0.05)]":"bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2.5px_-2.5px_6px_rgba(255,255,255,0.95),_2.5px_2.5px_6px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_2.5px_2.5px_6px_rgba(0,0,0,0.6)] hover:shadow-[-3.5px_-3.5px_8px_rgba(255,255,255,1),_3.5px_3.5px_8px_rgba(166,175,195,0.5)]"}`,children:[jsx("div",{className:"w-5 h-5 rounded-full border border-black/15 dark:border-white/20 shrink-0 shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(0,0,0,0.2)]",style:{backgroundColor:Et(T.strokeColor||"#1e1e24",A)}}),jsxs("div",{className:"min-w-0 text-left",children:[jsx("div",{className:"text-[9.5px] text-neutral-400 dark:text-neutral-500 leading-none",children:"Stroke"}),jsx("div",{className:"text-[11px] font-mono font-semibold text-neutral-800 dark:text-neutral-200 truncate",children:T.strokeColor==="transparent"?"None":(T.strokeColor||"#1E1E24").toUpperCase()})]})]}),_&&(ue?jsxs("button",{type:"button","data-color-trigger":"background",onClick:N=>V("background",N),className:`flex items-center gap-2 p-1.5 rounded-[11px] transition-all cursor-pointer ${ce==="background"?"bg-[#e4e8ef] dark:bg-[#131417] border border-primary/40 shadow-[inset_2px_2px_4px_rgba(166,175,195,0.55),_inset_-2px_-2px_4px_rgba(255,255,255,1)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_3px_rgba(255,255,255,0.05)]":"bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2.5px_-2.5px_6px_rgba(255,255,255,0.95),_2.5px_2.5px_6px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_2.5px_2.5px_6px_rgba(0,0,0,0.6)] hover:shadow-[-3.5px_-3.5px_8px_rgba(255,255,255,1),_3.5px_3.5px_8px_rgba(166,175,195,0.5)]"}`,children:[jsx("div",{className:`w-5 h-5 rounded-full border border-black/15 dark:border-white/20 shrink-0 relative overflow-hidden shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(0,0,0,0.2)] ${T.fillColor==="transparent"||!T.fillColor?"bg-neutral-200 dark:bg-neutral-800":""}`,style:{backgroundColor:T.fillColor&&T.fillColor!=="transparent"?Nr(T.fillColor,T.fillStyle||"solid",A):void 0},children:(!T.fillColor||T.fillColor==="transparent")&&jsx("div",{className:"absolute inset-0 flex items-center justify-center text-rose-500 font-bold text-xs",children:"/"})}),jsxs("div",{className:"min-w-0 text-left",children:[jsx("div",{className:"text-[9.5px] text-neutral-400 dark:text-neutral-500 leading-none",children:"Fill"}),jsx("div",{className:"text-[11px] font-mono font-semibold text-neutral-800 dark:text-neutral-200 truncate",children:T.fillColor==="transparent"||!T.fillColor?"None":T.fillColor.toUpperCase()})]})]}):jsxs("div",{className:"flex items-center gap-2 p-1.5 rounded-[11px] bg-[#e4e8ef]/60 dark:bg-[#131417]/60 border border-white/40 dark:border-white/[0.02] opacity-40",children:[jsx("div",{className:"w-5 h-5 rounded-full border border-dashed border-neutral-400 shrink-0"}),jsx("div",{className:"text-[10px] text-neutral-400",children:"No Fill"})]}))]}),S&&ue&&T.fillColor&&T.fillColor!=="transparent"&&jsx("div",{className:"pt-1",children:jsx("div",{className:"grid grid-cols-6 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] h-8",children:ha.map(N=>{let ye=(T.fillStyle||"solid")===N.value;return jsxs("button",{type:"button",onClick:()=>k({fillStyle:N.value}),title:N.label,className:`h-full flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${ye?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary font-semibold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-400 dark:text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-200"}`,children:[N.value==="transparent"&&jsxs("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",children:[jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2",stroke:"currentColor",strokeWidth:"1.4",strokeDasharray:"2 2"}),jsx("line",{x1:"3",y1:"13",x2:"13",y2:"3",stroke:"currentColor",strokeWidth:"1.2"})]}),N.value==="solid"&&jsx("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",children:jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2",fill:"currentColor",stroke:"currentColor",strokeWidth:"1.2"})}),N.value==="hachure"&&jsxs("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",children:[jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2",stroke:"currentColor",strokeWidth:"1.3"}),jsx("line",{x1:"3.5",y1:"3.5",x2:"12.5",y2:"12.5",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"}),jsx("line",{x1:"3.5",y1:"8",x2:"8",y2:"12.5",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"}),jsx("line",{x1:"8",y1:"3.5",x2:"12.5",y2:"8",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"})]}),N.value==="hachure-right"&&jsxs("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",children:[jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2",stroke:"currentColor",strokeWidth:"1.3"}),jsx("line",{x1:"12.5",y1:"3.5",x2:"3.5",y2:"12.5",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"}),jsx("line",{x1:"8",y1:"3.5",x2:"3.5",y2:"8",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"}),jsx("line",{x1:"12.5",y1:"8",x2:"8",y2:"12.5",stroke:"currentColor",strokeWidth:"1.3",strokeLinecap:"round"})]}),N.value==="cross-hatch"&&jsxs("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",children:[jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2",stroke:"currentColor",strokeWidth:"1.3"}),jsx("line",{x1:"6",y1:"2.5",x2:"6",y2:"13.5",stroke:"currentColor",strokeWidth:"1.1"}),jsx("line",{x1:"10",y1:"2.5",x2:"10",y2:"13.5",stroke:"currentColor",strokeWidth:"1.1"}),jsx("line",{x1:"2.5",y1:"6",x2:"13.5",y2:"6",stroke:"currentColor",strokeWidth:"1.1"}),jsx("line",{x1:"2.5",y1:"10",x2:"13.5",y2:"10",stroke:"currentColor",strokeWidth:"1.1"})]}),N.value==="dots"&&jsxs("svg",{width:"14",height:"14",viewBox:"0 0 16 16",fill:"none",children:[jsx("rect",{x:"2",y:"2",width:"12",height:"12",rx:"2",stroke:"currentColor",strokeWidth:"1.3"}),jsx("circle",{cx:"5.5",cy:"5.5",r:"1.1",fill:"currentColor"}),jsx("circle",{cx:"10.5",cy:"5.5",r:"1.1",fill:"currentColor"}),jsx("circle",{cx:"5.5",cy:"10.5",r:"1.1",fill:"currentColor"}),jsx("circle",{cx:"10.5",cy:"10.5",r:"1.1",fill:"currentColor"})]})]},N.value)})})})]}),!ve&&!ae&&!be&&(E||z||D||P)&&jsxs("div",{className:"space-y-2.5 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[(E||z)&&jsxs("div",{className:`grid ${E&&z?"grid-cols-2":"grid-cols-1"} gap-2`,children:[E&&jsxs("div",{children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:"Stroke Width"}),jsx("div",{className:"h-8 flex items-center p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:Wo.map(N=>{let ye=(T.strokeWidth||2)===N.value;return jsx("button",{type:"button",onClick:()=>k({strokeWidth:N.value}),title:N.label,className:`h-full flex-1 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${ye?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-400 hover:text-neutral-700"}`,children:jsx("div",{className:"w-4 rounded-full bg-current",style:{height:`${Math.max(1.8,N.value*1.05)}px`}})},N.value)})})]}),z&&jsxs("div",{children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:"Stroke Style"}),jsx("div",{className:"h-8 flex items-center p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:xa.map(N=>{let ye=(T.strokeStyle||"solid")===N.value;return jsxs("button",{type:"button",onClick:()=>k({strokeStyle:N.value}),title:N.label,className:`h-full flex-1 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${ye?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-400 hover:text-neutral-700"}`,children:[N.value==="solid"&&jsx("svg",{width:"16",height:"4",viewBox:"0 0 16 4",fill:"none",children:jsx("line",{x1:"1",y1:"2",x2:"15",y2:"2",stroke:"currentColor",strokeWidth:"2.2",strokeLinecap:"round"})}),N.value==="dashed"&&jsx("svg",{width:"16",height:"4",viewBox:"0 0 16 4",fill:"none",children:jsx("line",{x1:"1",y1:"2",x2:"15",y2:"2",stroke:"currentColor",strokeWidth:"2.2",strokeDasharray:"3 2",strokeLinecap:"round"})}),N.value==="dotted"&&jsx("svg",{width:"16",height:"4",viewBox:"0 0 16 4",fill:"none",children:jsx("line",{x1:"1",y1:"2",x2:"15",y2:"2",stroke:"currentColor",strokeWidth:"2.2",strokeDasharray:"1 2.5",strokeLinecap:"round"})})]},N.value)})})]})]}),D&&(!re||!fe&&!be)&&jsxs("div",{children:[jsxs("div",{className:"flex items-center justify-between text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:[jsx("span",{children:"Drawing Style"}),jsx("span",{className:"text-[9px] font-normal text-neutral-400 lowercase",children:T.roughStyle==="rough"?`rough (${(T.roughness??1.8)<=1.2?"subtle":(T.roughness??1.8)<=2.6?"medium":"sloppy"})`:"clean"})]}),jsxs("div",{className:"flex items-center gap-2",children:[jsxs("div",{className:"flex-[0.9] grid grid-cols-2 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsx("button",{type:"button",onClick:()=>k({roughStyle:"clean",roughness:0}),className:`h-7 text-[11px] font-medium rounded-[6px] flex items-center justify-center transition-all cursor-pointer ${(T.roughStyle||"clean")==="clean"?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,title:"Clean vector style",children:"Clean"}),jsx("button",{type:"button",onClick:()=>k({roughStyle:"rough",roughness:T.roughness&&T.roughness>0?T.roughness:1.8}),className:`h-7 text-[11px] font-medium rounded-[6px] flex items-center justify-center transition-all cursor-pointer ${T.roughStyle==="rough"?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,title:"Hand-drawn rough style",children:"Rough"})]}),jsxs("div",{className:"flex-[1.25] grid grid-cols-3 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsx("button",{type:"button",onClick:()=>k({roughStyle:"rough",roughness:.9}),className:`h-7 text-[10.5px] font-medium rounded-[6px] flex items-center justify-center transition-all cursor-pointer ${T.roughStyle==="rough"&&(T.roughness??1.8)<=1.2?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,title:"Subtle roughness",children:"Subtle"}),jsx("button",{type:"button",onClick:()=>k({roughStyle:"rough",roughness:2}),className:`h-7 text-[10.5px] font-medium rounded-[6px] flex items-center justify-center transition-all cursor-pointer ${T.roughStyle==="rough"&&(T.roughness??1.8)>1.2&&(T.roughness??1.8)<=2.6?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,title:"Medium roughness",children:"Med"}),jsx("button",{type:"button",onClick:()=>k({roughStyle:"rough",roughness:3.5}),className:`h-7 text-[10.5px] font-medium rounded-[6px] flex items-center justify-center transition-all cursor-pointer ${T.roughStyle==="rough"&&(T.roughness??1.8)>2.6?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,title:"Sloppy / extra expressive roughness",children:"Sloppy"})]})]})]}),P&&(!re||T.type==="rectangle")&&jsxs("div",{children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:"Corner Edges"}),jsxs("div",{className:"grid grid-cols-2 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsxs("button",{type:"button",onClick:()=>k({edgeStyle:"sharp"}),className:`py-1 text-[11px] font-medium rounded-[6px] flex items-center justify-center gap-1.5 transition-all cursor-pointer ${T.edgeStyle==="sharp"?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,children:[jsx("svg",{width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",children:jsx("path",{d:"M 3.5 12.5 V 3.5 H 12.5",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"square"})}),jsx("span",{children:"Sharp"})]}),jsxs("button",{type:"button",onClick:()=>k({edgeStyle:"round"}),className:`py-1 text-[11px] font-medium rounded-[6px] flex items-center justify-center gap-1.5 transition-all cursor-pointer ${(T.edgeStyle||"round")==="round"?"bg-[#f0f3f8] dark:bg-[#22242b] text-neutral-900 dark:text-neutral-100 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800"}`,children:[jsx("svg",{width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",children:jsx("path",{d:"M 3.5 12.5 V 7.5 C 3.5 5.2 5.2 3.5 7.5 3.5 H 12.5",stroke:"currentColor",strokeWidth:"1.8",strokeLinecap:"round"})}),jsx("span",{children:"Round"})]})]})]})]}),I&&(!re||ze)&&jsxs("div",{className:"space-y-2 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:"Connectors"}),jsxs("div",{className:"flex items-center gap-1.5",children:[jsx("button",{type:"button","data-arrowhead-trigger":"start",onClick:N=>$("start",N),title:"Start Arrowhead",className:`flex-1 h-7 rounded-[8px] flex items-center justify-center transition-all cursor-pointer ${Ge==="start"?"bg-[#e4e8ef] dark:bg-[#131417] text-primary border border-primary/40 shadow-[inset_2px_2px_4px_rgba(166,175,195,0.55),_inset_-2px_-2px_4px_rgba(255,255,255,1)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_3px_rgba(255,255,255,0.05)]":"bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_2px_2px_5px_rgba(0,0,0,0.6)] hover:shadow-[-3px_-3px_6px_rgba(255,255,255,1),_3px_3px_6px_rgba(166,175,195,0.45)]"}`,children:jsx(qr,{value:cr(T.startArrowhead,"none"),side:"start",className:"w-4 h-3"})}),jsxs("div",{className:"flex items-center p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsx("button",{type:"button",onClick:()=>k({arrowType:"straight"}),title:"Straight",className:`w-6 h-6 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${(T.arrowType||"straight")==="straight"?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,1),_1.5px_1.5px_3px_rgba(166,175,195,0.55)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.06),_1.5px_1.5px_4px_rgba(0,0,0,0.8)]":"text-neutral-400 hover:text-neutral-700"}`,children:jsx("svg",{width:"12",height:"12",viewBox:"0 0 16 16",fill:"none",children:jsx("path",{d:"M 4 12 L 12 4 M 7 4 H 12 V 9",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round"})})}),jsx("button",{type:"button",onClick:()=>k({arrowType:"curved"}),title:"Curved",className:`w-6 h-6 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${T.arrowType==="curved"?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,1),_1.5px_1.5px_3px_rgba(166,175,195,0.55)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.06),_1.5px_1.5px_4px_rgba(0,0,0,0.8)]":"text-neutral-400 hover:text-neutral-700"}`,children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M16,12L20,9L16,6"}),jsx("path",{d:"M6 20c0 -6.075 4.925 -11 11 -11h3"})]})}),jsx("button",{type:"button",onClick:()=>k({arrowType:"elbow"}),title:"Elbow",className:`w-6 h-6 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${T.arrowType==="elbow"?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,1),_1.5px_1.5px_3px_rgba(166,175,195,0.55)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.06),_1.5px_1.5px_4px_rgba(0,0,0,0.8)]":"text-neutral-400 hover:text-neutral-700"}`,children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M4,19L10,19C11.097,19 12,18.097 12,17L12,9C12,7.903 12.903,7 14,7L21,7"}),jsx("path",{d:"M18 4l3 3l-3 3"})]})})]}),jsx("button",{type:"button","data-arrowhead-trigger":"end",onClick:N=>$("end",N),title:"End Arrowhead",className:`flex-1 h-7 rounded-[8px] flex items-center justify-center transition-all cursor-pointer ${Ge==="end"?"bg-[#e4e8ef] dark:bg-[#131417] text-primary border border-primary/40 shadow-[inset_2px_2px_4px_rgba(166,175,195,0.55),_inset_-2px_-2px_4px_rgba(255,255,255,1)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_3px_rgba(255,255,255,0.05)]":"bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_2px_2px_5px_rgba(0,0,0,0.6)] hover:shadow-[-3px_-3px_6px_rgba(255,255,255,1),_3px_3px_6px_rgba(166,175,195,0.45)]"}`,children:jsx(qr,{value:cr(T.endArrowhead,T.type==="arrow"?"arrow":"none"),side:"end",className:"w-4 h-3"})})]})]}),b&&(!re||F||!!T.text)&&jsxs("div",{className:"space-y-2.5 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:"Typography"}),jsx("div",{className:"grid grid-cols-5 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] h-8 items-center",children:gr.map(N=>{let Te=ar(T.fontFamily).value===N.value;return jsx("button",{type:"button",onClick:()=>{k({fontFamily:N.value}),typeof window<"u"&&(window.dispatchEvent(new CustomEvent("sketch-redraw-canvas")),document.fonts&&document.fonts.load(`400 16px ${N.cssFont}`).then(()=>{window.dispatchEvent(new CustomEvent("sketch-redraw-canvas"));}));},title:N.label,"aria-label":N.label,className:`h-full flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${Te?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)]":"text-neutral-500 hover:text-neutral-900 dark:hover:text-neutral-100"}`,children:jsx("span",{className:"text-xs leading-none",style:{fontFamily:N.cssFont},children:N.value==="fuzzy"||N.value==="edusa"?"Aa":N.value==="comic"||N.value==="handlee"?"Abc":N.value==="patrick"?"ABC":N.value==="sans"?"Ag":"{ }"})},N.value)})}),jsxs("div",{className:"grid grid-cols-2 gap-2",children:[jsx("div",{className:"h-8 flex items-center p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:fa.map(N=>{let ye=(T.fontSize||22)===N.value;return jsx("button",{type:"button",onClick:()=>k({fontSize:N.value}),title:`${N.label} (${N.value}px)`,className:`h-full flex-1 text-[10.5px] font-medium rounded-[6px] flex items-center justify-center transition-all cursor-pointer ${ye?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8)]":"text-neutral-400 hover:text-neutral-700"}`,children:N.label},N.value)})}),jsx("div",{className:"h-8 flex items-center p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:["left","center","right"].map(N=>{let ye=(T.textAlign||(T.type==="text"?"left":"center"))===N;return jsxs("button",{type:"button",onClick:()=>k({textAlign:N}),title:`Align ${N}`,className:`h-full flex-1 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${ye?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8)]":"text-neutral-400 hover:text-neutral-700"}`,children:[N==="left"&&jsx(IconAlignLeft,{size:13}),N==="center"&&jsx(IconAlignCenter,{size:13}),N==="right"&&jsx(IconAlignRight,{size:13})]},N)})})]})]}),(f||M&&re)&&jsxs("div",{className:"space-y-2.5 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[f&&jsxs("div",{children:[jsxs("div",{className:"flex items-center justify-between text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:[jsx("span",{children:"Opacity"}),jsxs("span",{className:"font-mono text-neutral-600 dark:text-neutral-300",children:[Math.round((T.opacity??1)*100),"%"]})]}),jsx("input",{type:"range",min:"0.1",max:"1",step:"0.05",value:T.opacity??1,onChange:N=>k({opacity:parseFloat(N.target.value)}),className:"w-full h-2 bg-[#e2e6ed] dark:bg-[#121316] rounded-lg appearance-none cursor-pointer accent-primary shadow-[inset_1px_1px_2px_rgba(0,0,0,0.2)]"})]}),M&&re&&jsxs("div",{children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1",children:"Layer"}),jsxs("div",{className:"grid grid-cols-4 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] h-8 items-center",children:[jsx("button",{type:"button",onClick:p,title:"Bring to Front",className:"h-full flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M12 10l0 10"}),jsx("path",{d:"M12 10l4 4"}),jsx("path",{d:"M12 10l-4 4"}),jsx("path",{d:"M4 4l16 0"})]})}),l&&jsx("button",{type:"button",onClick:l,title:"Bring Forward",className:"h-full flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M12 5l0 14"}),jsx("path",{d:"M16 9l-4 -4"}),jsx("path",{d:"M8 9l4 -4"})]})}),u&&jsx("button",{type:"button",onClick:u,title:"Send Backward",className:"h-full flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",style:{transform:"rotate(180deg)"},children:[jsx("path",{d:"M12 5l0 14"}),jsx("path",{d:"M16 9l-4 -4"}),jsx("path",{d:"M8 9l4 -4"})]})}),jsx("button",{type:"button",onClick:i,title:"Send to Back",className:"h-full flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.6",strokeLinecap:"round",strokeLinejoin:"round",style:{transform:"rotate(180deg)"},children:[jsx("path",{d:"M12 10l0 10"}),jsx("path",{d:"M12 10l4 4"}),jsx("path",{d:"M12 10l-4 4"}),jsx("path",{d:"M4 4l16 0"})]})})]})]})]}),Le&&(C||R)&&jsxs("div",{className:"space-y-2 pb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:"Align & Distribute"}),C&&s&&jsxs("div",{className:"grid grid-cols-6 gap-1 p-0.5 rounded-[9px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3.5px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]",children:[jsx("button",{type:"button",onClick:()=>s("left"),title:"Align Left",className:"py-1 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:text-primary dark:hover:text-blue-200 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"4",y1:"2",x2:"4",y2:"22"}),jsx("rect",{x:"8",y:"5",width:"12",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"8",y:"14",width:"8",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>s("center"),title:"Align Center H",className:"py-1 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:text-primary dark:hover:text-blue-200 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"12",y1:"2",x2:"12",y2:"22"}),jsx("rect",{x:"5",y:"5",width:"14",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"7",y:"14",width:"10",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>s("right"),title:"Align Right",className:"py-1 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:text-primary dark:hover:text-blue-200 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"20",y1:"2",x2:"20",y2:"22"}),jsx("rect",{x:"2",y:"5",width:"14",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"6",y:"14",width:"10",height:"5",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>s("top"),title:"Align Top",className:"py-1 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:text-primary dark:hover:text-blue-200 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"2",y1:"4",x2:"22",y2:"4"}),jsx("rect",{x:"5",y:"8",width:"5",height:"12",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"14",y:"8",width:"5",height:"8",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>s("middle"),title:"Align Middle V",className:"py-1 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:text-primary dark:hover:text-blue-200 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"2",y1:"12",x2:"22",y2:"12"}),jsx("rect",{x:"5",y:"5",width:"5",height:"14",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"14",y:"7",width:"5",height:"10",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})}),jsx("button",{type:"button",onClick:()=>s("bottom"),title:"Align Bottom",className:"py-1 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-400 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:text-primary dark:hover:text-blue-200 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.04),_1.5px_1.5px_3px_rgba(0,0,0,0.6)] transition-all cursor-pointer",children:jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("line",{x1:"20",y1:"2",x2:"20",y2:"22"}),jsx("rect",{x:"5",y:"4",width:"5",height:"12",rx:"1",fill:"currentColor",fillOpacity:"0.2"}),jsx("rect",{x:"14",y:"8",width:"5",height:"8",rx:"1",fill:"currentColor",fillOpacity:"0.2"})]})})]}),jsxs("div",{className:"flex items-center gap-1.5",children:[C&&n&&jsxs(Fragment,{children:[jsx("button",{type:"button",onClick:()=>n("horizontal"),className:"flex-1 py-1 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] text-[10.5px] font-medium text-neutral-600 dark:text-neutral-300 hover:text-primary dark:hover:text-blue-200 transition-all cursor-pointer",children:"Distribute H"}),jsx("button",{type:"button",onClick:()=>n("vertical"),className:"flex-1 py-1 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] text-[10.5px] font-medium text-neutral-600 dark:text-neutral-300 hover:text-primary dark:hover:text-blue-200 transition-all cursor-pointer",children:"Distribute V"})]}),R&&d&&jsx("button",{type:"button",onClick:d,className:"px-2.5 py-1 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-primary/30 text-primary text-[10.5px] font-bold shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] hover:bg-primary hover:text-white transition-all cursor-pointer",children:"Group"}),R&&t.some(N=>N.groupIds&&N.groupIds.length>0)&&h&&jsx("button",{type:"button",onClick:h,className:"px-2.5 py-1 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] text-neutral-700 dark:text-neutral-300 text-[10.5px] font-medium transition-all cursor-pointer",children:"Ungroup"})]})]}),v&&!re&&g&&jsxs("div",{className:"space-y-2",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:"Canvas Background"}),jsx("div",{className:"grid grid-cols-5 gap-1.5",children:(A?xo:uo).map(N=>{let Te=(m||(A?"#1a1d24":"#f0f4f8")).toLowerCase()===N.hex.toLowerCase();return jsx("button",{type:"button",onClick:()=>g(N.hex),title:N.name,className:`h-7 rounded-[8px] flex items-center justify-center transition-all cursor-pointer ${Te?"bg-[#e4e8ef] dark:bg-[#131417] border border-primary/50 shadow-[inset_2px_2px_4px_rgba(166,175,195,0.55),_inset_-2px_-2px_4px_rgba(255,255,255,1)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_3px_rgba(255,255,255,0.05)] ring-1 ring-primary/40":"bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_2px_2px_5px_rgba(0,0,0,0.6)] hover:shadow-[-3px_-3px_6px_rgba(255,255,255,1),_3px_3px_6px_rgba(166,175,195,0.45)] hover:scale-[1.03]"}`,children:jsx("div",{className:"w-4 h-4 rounded-[5px] border border-black/15 dark:border-white/20 shadow-2xs",style:{backgroundColor:N.hex}})},N.name)})})]})]})]}),ce!=="none"&&Ie&&jsxs("div",{ref:Z,className:`fk-card fixed right-[288px] z-50 w-[248px] rounded-[18px] p-3 select-none animate-in fade-in zoom-in-95 duration-150 text-xs ${G?"bg-[#eef1f6]/98 dark:bg-[#16171b]/98 backdrop-blur-2xl border border-white/80 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.9),_8px_8px_20px_rgba(166,175,195,0.5)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.03),_10px_10px_26px_rgba(0,0,0,0.85)]":"bg-white/98 dark:bg-[#16171b]/98 backdrop-blur-md border border-black/[0.04] dark:border-white/[0.05] shadow-[0_12px_32px_-4px_rgba(0,0,0,0.12),0_4px_14px_-2px_rgba(0,0,0,0.04)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.7),0_4px_14px_-2px_rgba(0,0,0,0.5)]"}`,style:{top:Ie.top},children:[jsxs("div",{className:"flex items-center justify-between pb-2 mb-2 border-b border-black/[0.04] dark:border-white/[0.04]",children:[jsx("span",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:ce==="stroke"?"Stroke Color":"Fill Color"}),jsx("span",{className:"text-[10px] font-mono text-neutral-400",children:L==="transparent"?"None":L.toUpperCase()})]}),jsx("div",{className:"grid grid-cols-5 gap-1.5 mb-2.5",children:fo.map(N=>{let ye=ce==="background"?A?N.fill.dark:N.fill.light:A?N.stroke.dark:N.stroke.light,Te=L.toLowerCase()===ye.toLowerCase()||L.toLowerCase()===N.key||(ce==="background"?L.toLowerCase()===N.fill.light.toLowerCase()||L.toLowerCase()===N.fill.dark.toLowerCase():L.toLowerCase()===N.stroke.light.toLowerCase()||L.toLowerCase()===N.stroke.dark.toLowerCase()),kt=ce==="background"&&N.key==="r"?"Black / Charcoal":N.name;return jsx("button",{type:"button",onClick:()=>pe(ye),title:`${kt} (${N.key.toUpperCase()})`,className:`relative h-6 rounded-[7px] transition-all cursor-pointer flex items-center justify-center ${Te?"ring-2 ring-primary ring-offset-1 dark:ring-offset-neutral-900 scale-105 shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(0,0,0,0.3)]":"border border-black/10 dark:border-white/10 hover:scale-105 shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(0,0,0,0.15)]"}`,style:{backgroundColor:ye==="transparent"?"transparent":ye},children:ye==="transparent"?jsx("span",{className:"text-rose-500 text-xs font-bold leading-none",children:"/"}):jsx("span",{className:`text-[8px] font-mono font-bold opacity-0 hover:opacity-100 ${$l(ye)}`,children:N.key})},N.key)})}),L!=="transparent"&&jsxs("div",{className:"mb-2.5",children:[jsx("div",{className:"text-[9.5px] font-medium text-neutral-400 mb-1",children:"Shades (1-5)"}),jsx("div",{className:"grid grid-cols-5 gap-1",children:nt.map((N,ye)=>{let Te=L.toLowerCase()===N.toLowerCase();return jsx("button",{type:"button",onClick:()=>pe(N),title:`Shade ${ye+1}`,className:`h-5 rounded-[6px] transition-all cursor-pointer ${Te?"ring-2 ring-primary ring-offset-1 dark:ring-offset-neutral-900 scale-105 shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(0,0,0,0.3)]":"border border-black/10 dark:border-white/10 hover:scale-105 shadow-[-1px_-1px_2px_rgba(255,255,255,0.7),_1px_1px_2px_rgba(0,0,0,0.1)]"}`,style:{backgroundColor:N}},ye)})})]}),jsxs("div",{className:"flex items-center gap-1.5 pt-2 border-t border-black/[0.04] dark:border-white/[0.04]",children:[jsxs("div",{className:"relative flex-1",children:[jsx("span",{className:"absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-400 font-mono text-xs",children:"#"}),jsx("input",{type:"text",value:q,onChange:N=>O(N.target.value.replace("#","").toUpperCase()),onKeyDown:N=>{N.stopPropagation(),N.key==="Enter"&&te(q);},onBlur:()=>te(q),placeholder:"HEX CODE",maxLength:6,className:"w-full h-7 pl-6 pr-2 rounded-[7px] text-xs font-mono font-semibold bg-[#e2e6ed] dark:bg-[#121316] border border-black/[0.03] dark:border-white/[0.03] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] text-neutral-900 dark:text-neutral-100 outline-none focus:shadow-[inset_2px_2px_4px_rgba(99,102,241,0.25),_0_0_0_1.5px_rgba(99,102,241,0.4)] transition-all"})]}),jsx("button",{type:"button",onClick:()=>K.current?.click(),title:"Native Color Picker",className:"w-7 h-7 rounded-[7px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] flex items-center justify-center hover:shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.45)] transition-all cursor-pointer",children:jsx("div",{className:"w-4 h-4 rounded-full border border-black/15 shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(0,0,0,0.2)]",style:{backgroundColor:L==="transparent"?"#ffffff":L}})}),jsx("input",{ref:K,type:"color",value:L.startsWith("#")?L:"#4f46e5",onChange:N=>pe(N.target.value),className:"sr-only"})]})]}),Ge!=="none"&&ee&&jsx("div",{ref:Se,className:`fk-card fixed right-[288px] z-50 rounded-[18px] p-2.5 animate-in fade-in zoom-in-95 duration-150 select-none text-xs ${G?"bg-[#eef1f6]/98 dark:bg-[#16171b]/98 backdrop-blur-2xl border border-white/80 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.9),_8px_8px_20px_rgba(166,175,195,0.5)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.03),_10px_10px_26px_rgba(0,0,0,0.85)]":"bg-white/98 dark:bg-[#16171b]/98 backdrop-blur-md border border-black/[0.04] dark:border-white/[0.05] shadow-[0_12px_32px_-4px_rgba(0,0,0,0.12),0_4px_14px_-2px_rgba(0,0,0,0.04)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.7),0_4px_14px_-2px_rgba(0,0,0,0.5)]"}`,style:{top:ee.top},children:jsx(Ko,{side:Ge,currentValue:Ge==="start"?cr(T.startArrowhead,"none"):cr(T.endArrowhead,T.type==="arrow"?"arrow":"none"),onClose:()=>{Ue("none"),Pe(null);},onChange:N=>{k(Ge==="start"?{startArrowhead:N}:{endArrowhead:N}),Ue("none"),Pe(null);}})})]})}var Rl=[{category:"Tools",items:[{key:["V","1"],label:"Select tool"},{key:["H","Space","2"],label:"Hand / Pan canvas"},{key:["R","3"],label:"Rectangle"},{key:["O","4"],label:"Ellipse / Circle"},{key:["D","5"],label:"Diamond"},{key:"Y",label:"Triangle"},{key:"B",label:"Capsule / Stadium"},{key:"G",label:"Parallelogram (Data)"},{key:"Z",label:"Trapezoid (Trapezium)"},{key:"X",label:"Hexagon"},{key:"C",label:"Cylinder (Database)"},{key:"U",label:"Cloud (Infra/Idea)"},{key:"J",label:"Star (Jewel / Milestone)"},{key:["A","6"],label:"Arrow"},{key:["L","7"],label:"Line"},{key:["P","8"],label:"Freehand Pen"},{key:["T","9"],label:"Text tool"},{key:"F",label:"Frame / Artboard"},{key:"N",label:"Table / Matrix Grid"},{key:"I",label:"Insert image from file"},{key:["S","0"],label:"Sticky Note"},{key:"K",label:"Laser pointer tool"},{key:"E",label:"Eraser tool"},{key:"Q",label:"Lock / keep active tool"}]},{category:"Editing & Shapes",items:[{key:"Ctrl + A",label:"Select all elements"},{key:"Ctrl + G",label:"Group selection"},{key:"Ctrl + Shift + G",label:"Ungroup selection"},{key:"\u2191 \u2193 \u2190 \u2192",label:"Nudge selection (Shift = 10px)"},{key:"Tab / Shift+Tab",label:"Next / previous table cell"},{key:"Ctrl + V",label:"Paste image / screenshot"},{key:"Double Click",label:"Write text / Table cell / Rename frame"},{key:"Ctrl + Arrows",label:"Quick branch shape & arrow"},{key:"Ctrl + D",label:"Duplicate selected"},{key:"Del",label:"Delete selected"},{key:"Esc",label:"Clear selection / Cancel"}]},{category:"Canvas & Presentation",items:[{key:"Alt + I",label:"Developer & Cloud Stencils Library"},{key:"Alt + T",label:"Diagram Templates & Starter Kits"},{key:"Alt + F",label:"Toggle Frames Outline drawer"},{key:"Alt + P",label:"Start Presentation / Slideshow"},{key:"\u2190 / \u2192",label:"Next / Previous slide in Presentation"},{key:"L",label:"Toggle Laser Pointer in Presentation"},{key:"G",label:"Toggle Slides Overview in Presentation"},{key:"Alt + S",label:"Spotlight / Focus Mode (Selection / Cursor)"},{key:"Ctrl + Shift + C",label:"Copy image as PNG to clipboard"},{key:"Ctrl + S",label:"Save whiteboard"},{key:"Ctrl + Z",label:"Undo"},{key:"Ctrl + Y",label:"Redo (Ctrl+Shift+Z)"},{key:"Ctrl + Scroll",label:"Zoom in / out"},{key:"Space + Drag",label:"Pan canvas view"}]},{category:"Color Popover",items:[{key:"Q - B",label:"Palette swatch pick"},{key:"1 - 5",label:"Shade level (light/dark)"}]}];function $n({guideHref:e,onOpenGuide:t,showShortcutsButton:r=true,showGuideButton:o=true}={}){let[c,d]=useState(false),h=useRef(null),s=useRef(null);return useEffect(()=>{let n=i=>{c&&h.current&&!h.current.contains(i.target)&&s.current&&!s.current.contains(i.target)&&d(false);},p=i=>{i.target instanceof HTMLInputElement||i.target instanceof HTMLTextAreaElement||i.target.isContentEditable||(i.key==="?"||i.shiftKey&&i.key==="/"?(i.preventDefault(),d(l=>!l)):i.key==="Escape"&&c&&d(false));};return document.addEventListener("mousedown",n),window.addEventListener("keydown",p),()=>{document.removeEventListener("mousedown",n),window.removeEventListener("keydown",p);}},[c]),jsxs(Fragment,{children:[(r||o&&(t||e))&&jsxs("div",{className:"fixed bottom-4 left-4 z-20 pointer-events-auto flex items-center gap-2",children:[r&&jsxs("button",{ref:s,type:"button",onClick:()=>d(n=>!n),title:"View Keyboard Shortcuts (?)",className:`h-8 px-3 rounded-[12px] flex items-center gap-2 text-xs font-semibold select-none cursor-pointer transition-all duration-150 ${c?"bg-[#e4e8ef] dark:bg-[#131417] text-primary dark:text-foreground border border-primary/40 shadow-[inset_2px_2px_4px_rgba(166,175,195,0.55),_inset_-2px_-2px_4px_rgba(255,255,255,1)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_3px_rgba(255,255,255,0.05)]":"bg-[#f0f3f8] dark:bg-[#1c1e24] text-neutral-700 dark:text-neutral-200 border border-white/80 dark:border-white/[0.06] shadow-[-3px_-3px_7px_rgba(255,255,255,0.95),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_3px_3px_7px_rgba(0,0,0,0.65)] hover:shadow-[-4px_-4px_9px_rgba(255,255,255,1),_4px_4px_9px_rgba(166,175,195,0.5)] hover:text-neutral-900 dark:hover:text-white"}`,children:[jsx("span",{className:`w-5 h-5 rounded-[6px] flex items-center justify-center font-mono font-bold text-[10.5px] transition-all ${c?"bg-primary text-white shadow-[-1px_-1px_2px_rgba(255,255,255,0.4),_1px_1px_3px_rgba(0,0,0,0.3)]":"bg-[#e2e6ee] dark:bg-[#121316] text-neutral-600 dark:text-neutral-300 border border-white/60 dark:border-white/[0.04] shadow-[inset_1px_1px_2.5px_rgba(166,175,195,0.45),_inset_-1px_-1px_2.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.6),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]"}`,children:"?"}),jsx("span",{className:"font-medium tracking-tight",children:"Shortcuts"})]}),o&&(t?jsxs("button",{type:"button",onClick:t,title:"Sketch Features & Architecture Guide",className:"h-8 px-3 rounded-[12px] flex items-center gap-1.5 text-xs font-semibold select-none cursor-pointer bg-[#f0f3f8] dark:bg-[#1c1e24] text-neutral-700 dark:text-neutral-200 border border-white/80 dark:border-white/[0.06] shadow-[-3px_-3px_7px_rgba(255,255,255,0.95),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_3px_3px_7px_rgba(0,0,0,0.65)] hover:shadow-[-4px_-4px_9px_rgba(255,255,255,1),_4px_4px_9px_rgba(166,175,195,0.5)] hover:text-primary dark:hover:text-blue-200 active:scale-95 transition-all",children:[jsx(IconBook,{size:14,className:"text-primary dark:text-blue-300"}),jsx("span",{className:"font-medium tracking-tight",children:"Guide"})]}):e?jsxs("a",{href:e,target:"_blank",rel:"noopener noreferrer",title:"Sketch Features & Architecture Guide",className:"h-8 px-3 rounded-[12px] flex items-center gap-1.5 text-xs font-semibold select-none cursor-pointer bg-[#f0f3f8] dark:bg-[#1c1e24] text-neutral-700 dark:text-neutral-200 border border-white/80 dark:border-white/[0.06] shadow-[-3px_-3px_7px_rgba(255,255,255,0.95),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.03),_3px_3px_7px_rgba(0,0,0,0.65)] hover:shadow-[-4px_-4px_9px_rgba(255,255,255,1),_4px_4px_9px_rgba(166,175,195,0.5)] hover:text-primary dark:hover:text-blue-200 active:scale-95 transition-all",children:[jsx(IconBook,{size:14,className:"text-primary dark:text-blue-300"}),jsx("span",{className:"font-medium tracking-tight",children:"Guide"})]}):null)]}),c&&jsxs("div",{ref:h,className:"fixed bottom-14 left-4 z-40 w-[340px] sm:w-[380px] max-h-[calc(100vh-120px)] flex flex-col bg-[#edf0f5]/98 dark:bg-[#16171b]/98 backdrop-blur-2xl rounded-[20px] border border-white/80 dark:border-white/[0.06] shadow-[-8px_-8px_20px_rgba(255,255,255,0.95),_10px_10px_24px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.03),_10px_10px_28px_rgba(0,0,0,0.85)] p-3.5 animate-in fade-in zoom-in-95 duration-150 select-none overflow-hidden",children:[jsxs("div",{className:"flex items-center justify-between pb-2.5 mb-2.5 border-b border-black/[0.05] dark:border-white/[0.05]",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx("div",{className:"w-6 h-6 rounded-[8px] bg-[#e4e8ef] dark:bg-[#131417] flex items-center justify-center text-primary border border-white/70 dark:border-white/[0.04] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.4),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.8)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.6)]",children:jsx(IconKeyboard,{size:14})}),jsx("span",{className:"text-xs font-bold text-neutral-800 dark:text-neutral-100 tracking-tight",children:"Keyboard Shortcuts"})]}),jsx("button",{type:"button",onClick:()=>d(false),className:"w-6 h-6 rounded-[8px] bg-[#f0f3f8] dark:bg-[#1c1e24] border border-white/80 dark:border-white/[0.06] shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_4px_rgba(166,175,195,0.35)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_2px_2px_4px_rgba(0,0,0,0.6)] hover:shadow-[-2.5px_-2.5px_5px_rgba(255,255,255,1),_2.5px_2.5px_5px_rgba(166,175,195,0.45)] active:shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.5)] flex items-center justify-center text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-all cursor-pointer",title:"Close (Esc)",children:jsx(IconX,{size:13})})]}),jsx("div",{className:"flex-1 overflow-y-auto space-y-3.5 pr-1 text-xs scrollbar-thin scrollbar-thumb-neutral-300 dark:scrollbar-thumb-neutral-700",children:Rl.map(n=>jsxs("div",{children:[jsx("h4",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider mb-1.5 px-1",children:n.category}),jsx("div",{className:"space-y-1",children:n.items.map((p,i)=>jsxs("div",{className:"flex items-center justify-between py-1.5 px-2 rounded-[9px] hover:bg-white/60 dark:hover:bg-white/[0.03] transition-colors",children:[jsx("span",{className:"text-[11.5px] font-medium text-neutral-600 dark:text-neutral-300",children:p.label}),jsx("div",{className:"flex items-center gap-1 shrink-0",children:Array.isArray(p.key)?p.key.map((l,u)=>jsxs(Hn.Fragment,{children:[u>0&&jsx("span",{className:"text-[10px] text-neutral-400 dark:text-neutral-500 font-medium",children:"or"}),jsx("kbd",{className:"px-1.5 py-0.5 text-[10px] font-mono font-bold bg-[#e8ecf3] dark:bg-[#1e2027] text-neutral-800 dark:text-neutral-200 rounded-[6px] border border-white/80 dark:border-white/[0.07] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:shadow-[-1px_-1px_2.5px_rgba(255,255,255,0.03),_1.5px_1.5px_3px_rgba(0,0,0,0.6)]",children:l})]},l)):jsx("kbd",{className:"px-1.5 py-0.5 text-[10px] font-mono font-bold bg-[#e8ecf3] dark:bg-[#1e2027] text-neutral-800 dark:text-neutral-200 rounded-[6px] border border-white/80 dark:border-white/[0.07] shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.4)] dark:shadow-[-1px_-1px_2.5px_rgba(255,255,255,0.03),_1.5px_1.5px_3px_rgba(0,0,0,0.6)]",children:p.key})})]},i))})]},n.category))}),jsxs("div",{className:"pt-2.5 mt-2.5 border-t border-black/[0.05] dark:border-white/[0.05] flex items-center justify-between text-[10px] text-neutral-400 dark:text-neutral-500 px-1",children:[jsxs("span",{children:["Press"," ",jsx("kbd",{className:"font-mono font-bold bg-[#e8ecf3] dark:bg-[#1e2027] text-neutral-700 dark:text-neutral-200 px-1 py-0.5 rounded-[5px] border border-white/70 dark:border-white/[0.05] shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(0,0,0,0.15)]",children:"?"})," ","to toggle"]}),jsx("span",{children:"Click outside or Esc to close"})]})]})]})}function Bn({isActive:e,onClose:t,selectedElements:r,allElements:o,camera:c,worldToScreen:d,screenToWorld:h,onSelectElement:s,isDark:n}){let p=useRef(null),[i,l]=useState(r.length>0?"selection":"cursor"),[u,a]=useState(.9),[x,m]=useState(180),[g,w]=useState(24),[_,S]=useState({x:typeof window<"u"?window.innerWidth/2:500,y:typeof window<"u"?window.innerHeight/2:400}),[E,z]=useState(false);return useEffect(()=>{r.length>0;},[r,i]),useEffect(()=>{if(!e)return;let D=I=>{S({x:I.clientX,y:I.clientY});},P=I=>{if(I.key==="Escape"){I.preventDefault(),I.stopPropagation(),t();return}if(I.altKey&&I.key.toLowerCase()==="s"){I.preventDefault(),I.stopPropagation(),t();return}};return window.addEventListener("mousemove",D),window.addEventListener("keydown",P,{capture:true}),()=>{window.removeEventListener("mousemove",D),window.removeEventListener("keydown",P,{capture:true});}},[e,t]),useEffect(()=>{if(!e)return;let D,P=()=>{let I=p.current;if(!I)return;let b=I.getContext("2d");if(!b)return;let f=window.devicePixelRatio||1,v=window.innerWidth,C=window.innerHeight;(I.width!==v*f||I.height!==C*f)&&(I.width=v*f,I.height=C*f),b.save(),b.scale(f,f),b.clearRect(0,0,v,C);let M=n?`rgba(6, 8, 12, ${u})`:`rgba(15, 23, 42, ${u})`;if(b.fillStyle=M,b.fillRect(0,0,v,C),b.globalCompositeOperation="destination-out",i==="selection"&&r.length>0){let R=1/0,J=1/0,oe=-1/0,A=-1/0;r.forEach(ee=>{let Pe=bt(ee);R=Math.min(R,Pe.x),J=Math.min(J,Pe.y),oe=Math.max(oe,Pe.x+Pe.width),A=Math.max(A,Pe.y+Pe.height);});let U=d({x:R,y:J}),G=d({x:oe,y:A}),Ne=Math.min(U.x,G.x)-g,ne=Math.min(U.y,G.y)-g,le=Math.abs(G.x-U.x)+g*2,ce=Math.abs(G.y-U.y)+g*2,ke=Math.min(24,Math.min(le,ce)*.15),Ie=Ne+le/2,we=ne+ce/2,Ge=Math.max(le,ce)*.75;b.beginPath(),typeof b.roundRect=="function"?b.roundRect(Ne,ne,le,ce,ke):b.rect(Ne,ne,le,ce),b.fill();let Ue=b.createRadialGradient(Ie,we,Math.min(le,ce)*.35,Ie,we,Ge+40);Ue.addColorStop(0,"rgba(0, 0, 0, 1)"),Ue.addColorStop(.6,"rgba(0, 0, 0, 0.8)"),Ue.addColorStop(1,"rgba(0, 0, 0, 0)"),b.fillStyle=Ue,b.fillRect(Ne-50,ne-50,le+100,ce+100),b.globalCompositeOperation="source-over",b.save(),b.strokeStyle="rgba(245, 158, 11, 0.85)",b.lineWidth=2.5,b.shadowColor="rgba(245, 158, 11, 0.6)",b.shadowBlur=18,b.beginPath(),typeof b.roundRect=="function"?b.roundRect(Ne,ne,le,ce,ke):b.rect(Ne,ne,le,ce),b.stroke(),b.restore();}else {let{x:R,y:J}=_,oe=x,A=b.createRadialGradient(R,J,oe*.45,R,J,oe);A.addColorStop(0,"rgba(0, 0, 0, 1)"),A.addColorStop(.75,"rgba(0, 0, 0, 0.85)"),A.addColorStop(1,"rgba(0, 0, 0, 0)"),b.fillStyle=A,b.beginPath(),b.arc(R,J,oe+40,0,Math.PI*2),b.fill(),b.globalCompositeOperation="source-over",b.save(),b.strokeStyle="rgba(245, 158, 11, 0.75)",b.lineWidth=2,b.shadowColor="rgba(245, 158, 11, 0.6)",b.shadowBlur=16,b.beginPath(),b.arc(R,J,oe*.9,0,Math.PI*2),b.stroke(),b.restore();}b.restore(),D=requestAnimationFrame(P);};return D=requestAnimationFrame(P),()=>cancelAnimationFrame(D)},[e,i,r,d,g,u,x,_,n]),e?jsxs("div",{className:"fixed inset-0 z-50 pointer-events-none select-none",children:[jsx("canvas",{ref:p,className:"absolute inset-0 w-full h-full pointer-events-none"}),jsxs("div",{className:"absolute top-4 left-1/2 -translate-x-1/2 pointer-events-auto flex flex-col items-center gap-2 animate-in fade-in slide-in-from-top-4 duration-150",children:[jsxs("div",{className:"flex items-center gap-2 px-3.5 py-1.5 bg-neutral-900/95 dark:bg-[#18181b]/95 backdrop-blur-md rounded-full shadow-2xl border border-neutral-700/80 text-white text-xs",children:[jsxs("div",{className:"flex items-center gap-1.5 font-semibold text-amber-400",children:[jsx(IconCurrentLocation,{size:16,className:"animate-pulse"}),jsx("span",{children:"Spotlight Focus"})]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-700"}),jsxs("div",{className:"flex items-center bg-neutral-800 rounded-full p-0.5 border border-neutral-700",children:[jsx("button",{type:"button",onClick:()=>l("selection"),className:`px-2.5 py-1 rounded-full text-[11px] font-medium transition-all ${i==="selection"?"bg-amber-500 text-neutral-950 font-bold shadow-xs":"text-neutral-400 hover:text-white"}`,children:"Selection"}),jsx("button",{type:"button",onClick:()=>l("cursor"),className:`px-2.5 py-1 rounded-full text-[11px] font-medium transition-all ${i==="cursor"?"bg-amber-500 text-neutral-950 font-bold shadow-xs":"text-neutral-400 hover:text-white"}`,children:"Follow Cursor"})]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-700"}),jsx("button",{type:"button",onClick:()=>z(D=>!D),title:"Adjust Spotlight Settings",className:`p-1 rounded-full hover:bg-neutral-800 transition-colors ${E?"text-amber-400":"text-neutral-400"}`,children:jsx(IconAdjustments,{size:15})}),jsxs("button",{type:"button",onClick:t,title:"Exit Focus Mode (Esc or Alt+S)",className:"flex items-center gap-1 pl-2 pr-1.5 py-0.5 rounded-full hover:bg-rose-500/20 hover:text-rose-400 text-neutral-400 transition-colors cursor-pointer",children:[jsx("span",{className:"text-[10px] font-mono opacity-60",children:"Esc"}),jsx(IconX,{size:14})]})]}),E&&jsxs("div",{className:"flex items-center gap-4 px-4 py-2 bg-neutral-900/95 dark:bg-[#18181b]/95 backdrop-blur-md rounded-2xl shadow-2xl border border-neutral-700/80 text-white text-xs animate-in fade-in zoom-in-95 duration-100",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx("span",{className:"text-neutral-400 text-[11px]",children:"Dim:"}),[{label:"60%",val:.6},{label:"75%",val:.76},{label:"90%",val:.9}].map(D=>jsx("button",{type:"button",onClick:()=>a(D.val),className:`px-2 py-0.5 rounded-[5px] text-[10.5px] font-semibold transition-all ${u===D.val?"bg-amber-500 text-neutral-950":"bg-neutral-800 text-neutral-400 hover:text-white"}`,children:D.label},D.label))]}),jsx("div",{className:"w-[1px] h-4 bg-neutral-700"}),i==="cursor"?jsxs("div",{className:"flex items-center gap-2",children:[jsx("span",{className:"text-neutral-400 text-[11px]",children:"Radius:"}),[{label:"S",val:130},{label:"M",val:190},{label:"L",val:280}].map(D=>jsx("button",{type:"button",onClick:()=>m(D.val),className:`px-2 py-0.5 rounded-[5px] text-[10.5px] font-semibold transition-all ${x===D.val?"bg-amber-500 text-neutral-950":"bg-neutral-800 text-neutral-400 hover:text-white"}`,children:D.label},D.label))]}):jsxs("div",{className:"flex items-center gap-2",children:[jsx("span",{className:"text-neutral-400 text-[11px]",children:"Padding:"}),[{label:"Tight",val:12},{label:"Med",val:24},{label:"Wide",val:48}].map(D=>jsx("button",{type:"button",onClick:()=>w(D.val),className:`px-2 py-0.5 rounded-[5px] text-[10.5px] font-semibold transition-all ${g===D.val?"bg-amber-500 text-neutral-950":"bg-neutral-800 text-neutral-400 hover:text-white"}`,children:D.label},D.label))]})]})]})]}):null}var In=[{id:"all",label:"All Stencils"},{id:"frontend",label:"Frontend & UI"},{id:"backend",label:"Backend & Runtimes"},{id:"database",label:"Databases & Storage"},{id:"cloud",label:"Cloud & DevOps"},{id:"tools",label:"AI, Tools & APIs"}],Ln=[{id:"react",name:"React",category:"frontend",color:"#61DAFB",keywords:["react","reactjs","frontend","ui","framework","jsx"],svg:'<svg viewBox="0 0 24 24" fill="none" stroke="#61DAFB" stroke-width="1.8"><ellipse cx="12" cy="12" rx="10" ry="4"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(60 12 12)"/><ellipse cx="12" cy="12" rx="10" ry="4" transform="rotate(120 12 12)"/><circle cx="12" cy="12" r="1.8" fill="#61DAFB"/></svg>'},{id:"nextjs",name:"Next.js",category:"frontend",color:"#000000",keywords:["next","nextjs","react","ssr","fullstack","vercel"],svg:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm4.5 13.9-6.3-8.2V7.6h1.5v5.8l5.2 6.8a8.5 8.5 0 0 1-8.9.1l8.5-4.4ZM14.8 7.6h1.5v6.5l-1.5-1.9Z"/></svg>'},{id:"vue",name:"Vue.js",category:"frontend",color:"#4FC08D",keywords:["vue","vuejs","frontend","ui","vite"],svg:'<svg viewBox="0 0 24 24"><path fill="#4FC08D" d="M2 3h3.5L12 14.5 18.5 3H22L12 21 2 3z"/><path fill="#35495E" d="M6.5 3h3.2L12 7.8 14.3 3h3.2L12 12.8 6.5 3z"/></svg>'},{id:"svelte",name:"Svelte",category:"frontend",color:"#FF3E00",keywords:["svelte","sveltekit","ui","compiler"],svg:'<svg viewBox="0 0 24 24" fill="#FF3E00"><path d="M19.4 6.3a6.8 6.8 0 0 0-9.8-.9l-3.8 3.2a6.8 6.8 0 0 0 1.2 10.9 6.8 6.8 0 0 0 9.8.9l3.8-3.2a6.8 6.8 0 0 0-1.2-10.9zm-4.3 8.8-3.8 3.2c-1.8 1.5-4.5.3-5-1.9a3.8 3.8 0 0 1 .7-3.4l3.8-3.2c1.8-1.5 4.5-.3 5 1.9a3.8 3.8 0 0 1-.7 3.4z"/></svg>'},{id:"tailwind",name:"Tailwind CSS",category:"frontend",color:"#06B6D4",keywords:["tailwind","css","styling","utility","ui"],svg:'<svg viewBox="0 0 24 24" fill="#06B6D4"><path d="M12 6c-2.7 0-4.4 1.3-5.1 4 1-1.3 2.2-1.8 3.6-1.5 1 .3 1.8 1 2.6 1.8 1.3 1.3 2.8 2.7 5.9 2.7 2.7 0 4.4-1.3 5.1-4-1 1.3-2.2 1.8-3.6 1.5-1-.3-1.8-1-2.6-1.8-1.3-1.3-2.8-2.7-5.9-2.7zm-7 6c-2.7 0-4.4 1.3-5.1 4 1-1.3 2.2-1.8 3.6-1.5 1 .3 1.8 1 2.6 1.8 1.3 1.3 2.8 2.7 5.9 2.7 2.7 0 4.4-1.3 5.1-4-1 1.3-2.2 1.8-3.6 1.5-1-.3-1.8-1-2.6-1.8-1.3-1.3-2.8-2.7-5.9-2.7z"/></svg>'},{id:"typescript",name:"TypeScript",category:"frontend",color:"#3178C6",keywords:["typescript","ts","javascript","types","code"],svg:'<svg viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="#3178C6"/><path fill="#fff" d="M11.5 14.5c-.2.9-.6 1.6-1.3 2.1-.7.5-1.5.7-2.6.7-1.1 0-2-.3-2.7-.9s-1-1.5-1-2.7c0-.8.2-1.5.6-2.1.4-.6.9-1 1.6-1.3.7-.3 1.4-.4 2.3-.4.8 0 1.5.1 2.1.4.6.2 1 .6 1.3 1l-1.4 1.2c-.4-.6-1.1-.9-1.9-.9-.7 0-1.2.2-1.6.6s-.5.9-.5 1.5c0 .7.2 1.2.6 1.6.4.4.9.5 1.6.5.4 0 .8-.1 1.1-.3.3-.2.5-.5.6-.8h-1.8v-1.4h3.7v3.2zm4.3 2.8h-1.9v-7.1h-2.3v-1.6h6.5v1.6h-2.3v7.1z"/></svg>'},{id:"javascript",name:"JavaScript",category:"frontend",color:"#F7DF1E",keywords:["javascript","js","frontend","web","node"],svg:'<svg viewBox="0 0 24 24"><rect width="24" height="24" rx="4" fill="#F7DF1E"/><path fill="#000" d="M7 17.5c.5.8 1.2 1.3 2.2 1.3 1.1 0 1.9-.6 1.9-2v-6.3h2.3v6.3c0 2.5-1.5 3.6-3.9 3.6-1.8 0-3-.8-3.7-2.1l1.2-.8zm8.6-1c.4.7 1 1.1 1.9 1.1.8 0 1.4-.4 1.4-1 0-.7-.5-1-1.6-1.4l-.5-.2c-1.6-.6-2.7-1.4-2.7-3.1 0-1.7 1.3-3 3.3-3 1.5 0 2.5.5 3.2 1.8l-1.6 1c-.3-.6-.7-.9-1.5-.9-.7 0-1.2.4-1.2.9 0 .6.4.9 1.4 1.3l.5.2c1.9.7 2.9 1.5 2.9 3.3 0 1.9-1.5 3.1-3.7 3.1-2.1 0-3.3-1-3.9-2.3l2.1-.9z"/></svg>'},{id:"html5",name:"HTML5",category:"frontend",color:"#E34F26",keywords:["html","html5","web","frontend","markup"],svg:'<svg viewBox="0 0 24 24"><path fill="#E34F26" d="M3 2l1.8 18.2L12 23l7.2-2.8L21 2H3z"/><path fill="#EF652A" d="M12 21.1l5.7-2.2 1.4-15.1H12v17.3z"/><path fill="#EBEBEB" d="M12 8.7H8.3l-.2-2.2H12V4.4H6l.7 6.4h5.3v-2.1zm0 6.6l-3.2-.9-.2-2.3H6.4l.4 4.5 5.2 1.4v-2.7z"/><path fill="#fff" d="M12 8.7h3.7l-.4 3.7-3.3.9v2.2l5.2-1.4.6-7.5H12V4.4h6l-.2 2.1h-5.8v2.2z"/></svg>'},{id:"angular",name:"Angular",category:"frontend",color:"#DD0031",keywords:["angular","google","frontend","typescript","spa"],svg:'<svg viewBox="0 0 24 24"><path fill="#DD0031" d="M12 2L2.5 5.5l1.4 12.2L12 22l8.1-4.3 1.4-12.2L12 2z"/><path fill="#C3002F" d="M12 2v20l8.1-4.3 1.4-12.2L12 2z"/><path fill="#fff" d="M12 5.5L6.6 17.5h2.1l1.1-2.7h4.4l1.1 2.7h2.1L12 5.5zm1.5 7.6h-3L12 8.8l1.5 4.3z"/></svg>'},{id:"vite",name:"Vite",category:"frontend",color:"#646CFF",keywords:["vite","bundler","build","frontend","tooling"],svg:'<svg viewBox="0 0 24 24"><path fill="#646CFF" d="M20.2 3.8L12.7 22l-1.3-3.2L2.3 5.4l9-1.6 8.9 0z"/><path fill="#FFD62E" d="M13.6 2l-6.8 1.4L11 11.2l-2.7.4L15.4 20l-1.2-6.5 3.3-.6L13.6 2z"/></svg>'},{id:"nodejs",name:"Node.js",category:"backend",color:"#339933",keywords:["node","nodejs","backend","javascript","server"],svg:'<svg viewBox="0 0 24 24" fill="#339933"><path d="M12 2.5a2 2 0 0 0-1 .3L3.5 7a2 2 0 0 0-1 1.7v8.6a2 2 0 0 0 1 1.7l7.5 4.3a2 2 0 0 0 2 0l7.5-4.3a2 2 0 0 0 1-1.7V8.7a2 2 0 0 0-1-1.7L13 2.8a2 2 0 0 0-1-.3zm0 3.2l6.2 3.6-6.2 3.6-6.2-3.6 6.2-3.6zm-7.2 5.2l6.2 3.6v7.2L4.8 18.1v-7.2zm14.4 0v7.2l-6.2 3.6v-7.2l6.2-3.6z"/></svg>'},{id:"python",name:"Python",category:"backend",color:"#3776AB",keywords:["python","django","fastapi","flask","ai","backend"],svg:'<svg viewBox="0 0 24 24"><path fill="#3776AB" d="M11.9 2C6.8 2 7.1 4.2 7.1 4.2l.02 2.3h4.9v.7H4.2S2 6.9 2 12c0 5.2 1.9 5 1.9 5l1.8.02V14.5s-.1-2.9 2.9-2.9h4.9s2.8.04 2.8-2.8V4.8S16.9 2 11.9 2zm-2.4 1.7c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1z"/><path fill="#FFD43B" d="M12.1 22c5.1 0 4.8-2.2 4.8-2.2l-.02-2.3h-4.9v-.7h7.8s2.2.3 2.2-4.8c0-5.2-1.9-5-1.9-5l-1.8-.02V9.5s.1 2.9-2.9 2.9H10.5s-2.8-.04-2.8 2.8v4S7.1 22 12.1 22zm2.4-1.7c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"/></svg>'},{id:"go",name:"Go (Golang)",category:"backend",color:"#00ADD8",keywords:["go","golang","backend","microservices","concurrency"],svg:'<svg viewBox="0 0 24 24" fill="#00ADD8"><path d="M3 10.5h4.5v1.8H4.8v3.4h2.7v-1.6H6.2v-1.5h3v4.6H3v-6.7zm8 0h2.4a3.3 3.3 0 0 1 3.5 3.3 3.3 3.3 0 0 1-3.5 3.4H11v-6.7zm2.3 5c1 0 1.6-.7 1.6-1.7s-.6-1.6-1.6-1.6h-.6v3.3h.6zm6.2-5h1.7l1.5 4 1.5-4h1.7l-2.4 6.7h-1.6l-2.4-6.7z"/></svg>'},{id:"rust",name:"Rust",category:"backend",color:"#DEA584",keywords:["rust","wasm","backend","systems","memory","safety"],svg:'<svg viewBox="0 0 24 24" fill="#DEA584"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm3.8 14.5h-1.6l-1.4-2.4h-1.5v2.4H9.6V7.5h3.4c1.8 0 2.8.9 2.8 2.4 0 1.1-.6 1.9-1.5 2.2l1.5 2.4zm-2.8-5.3c.7 0 1.2-.4 1.2-1s-.5-1-1.2-1h-1.7v2h1.7z"/></svg>'},{id:"bun",name:"Bun",category:"backend",color:"#FBF0DF",keywords:["bun","javascript","runtime","fast","package","backend"],svg:'<svg viewBox="0 0 24 24" fill="#E8B072"><path d="M12 3a9 9 0 0 0-8.7 6.7c-.5 2 .2 4.1 1.7 5.5l.3.3a8.9 8.9 0 0 0 13.4 0l.3-.3c1.5-1.4 2.2-3.5 1.7-5.5A9 9 0 0 0 12 3zm-2.5 7.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>'},{id:"java",name:"Java",category:"backend",color:"#007396",keywords:["java","spring","jvm","backend","enterprise"],svg:'<svg viewBox="0 0 24 24" fill="#007396"><path d="M9 19s-1.8.4-1.2 1.3c.6.9 2.5.8 4.3.5 2.1-.3 4.9-1.2 4.9-1.2s-1.4.6-2.9.9c-2.3.4-4.5.3-5.1-.5zm-.5-3.2s-2.1.6-1.5 1.7c.6 1 3 .9 5.3.5 2.6-.4 5.9-1.5 5.9-1.5s-1.7.8-3.6 1.1c-2.8.5-5.4.4-6.1-.8zm4.2-11.5c.8.9.8 1.9-.3 3.3-1.4 1.8-2.4 2.7-4.3 4.1-.7.5-.9 1.1-.7 1.5.3.8 1.5.8 2.4.6 2.3-.4 4.5-1.5 4.5-1.5s-.8.6-2.1 1.1c-1.9.7-3.9.7-4.8-.4-.8-1-.4-2.2.6-3 1.5-1.4 3.4-3.1 4.7-5.7z"/></svg>'},{id:"fastapi",name:"FastAPI",category:"backend",color:"#059669",keywords:["fastapi","python","api","rest","backend","async"],svg:'<svg viewBox="0 0 24 24" fill="#059669"><circle cx="12" cy="12" r="10"/><path fill="#fff" d="M12.5 5.5l-5 7.5h4l-1 5.5 6-8h-4.5l1.5-5z"/></svg>'},{id:"graphql",name:"GraphQL",category:"backend",color:"#E10098",keywords:["graphql","api","query","schema","backend"],svg:'<svg viewBox="0 0 24 24" fill="#E10098"><path d="M12 2l8.7 5v10L12 22 3.3 17V7L12 2zm0 2.3L4.8 8.4l7.2 4.2 7.2-4.2L12 4.3zm-7.2 5.5v7.4l6.4-3.7-6.4-3.7zm14.4 0l-6.4 3.7 6.4 3.7V9.8z"/></svg>'},{id:"postgresql",name:"PostgreSQL",category:"database",color:"#4169E1",keywords:["postgres","postgresql","sql","relational","database","db"],svg:'<svg viewBox="0 0 24 24" fill="#4169E1"><path d="M12 2a10 10 0 0 0-9.8 8.1c-.8 4.4 1.5 8.8 5.6 10.4 1.3.5 2.7.7 4.2.7s2.9-.2 4.2-.7c4.1-1.6 6.4-6 5.6-10.4A10 10 0 0 0 12 2zm-1.8 14.8c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5zm3.6 0c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"/></svg>'},{id:"mongodb",name:"MongoDB",category:"database",color:"#47A248",keywords:["mongodb","mongo","nosql","document","database","db"],svg:'<svg viewBox="0 0 24 24" fill="#47A248"><path d="M12 2S7 7.5 7 13.5c0 4.2 3.1 7.8 5 8.5 1.9-.7 5-4.3 5-8.5C17 7.5 12 2 12 2zm.3 17.5v-6.3c0-.2.1-.3.3-.3.2 0 .3.1.3.3v6.3c-.2.1-.4.1-.6 0z"/></svg>'},{id:"redis",name:"Redis",category:"database",color:"#DC382D",keywords:["redis","cache","in-memory","nosql","key-value","database"],svg:'<svg viewBox="0 0 24 24" fill="#DC382D"><path d="M21.5 9.5l-9.5-4-9.5 4L12 13.5l9.5-4zm0 5l-9.5 4-9.5-4 1.5-.6 8 3.4 8-3.4 1.5.6zm0 4l-9.5 4-9.5-4 1.5-.6 8 3.4 8-3.4 1.5.6z"/></svg>'},{id:"mysql",name:"MySQL",category:"database",color:"#4479A1",keywords:["mysql","sql","relational","database","db","oracle"],svg:'<svg viewBox="0 0 24 24" fill="#4479A1"><path d="M12 3a9 9 0 0 0-9 9c0 4.5 3.3 8.2 7.7 8.9v-6.3H8.3v-2.6h2.4V10c0-2.4 1.4-3.7 3.6-3.7 1 0 2.1.2 2.1.2v2.3h-1.2c-1.2 0-1.6.7-1.6 1.5v1.7h2.7l-.4 2.6h-2.3v6.3C18.7 20.2 22 16.5 22 12a9 9 0 0 0-9-9z"/></svg>'},{id:"supabase",name:"Supabase",category:"database",color:"#3ECF8E",keywords:["supabase","postgres","baas","auth","realtime","database"],svg:'<svg viewBox="0 0 24 24"><path fill="#3ECF8E" d="M13.4 2.2a1 1 0 0 0-1.4.3L3.3 15.6a1 1 0 0 0 .8 1.5h7.6l-1.3 4.7a1 1 0 0 0 1.6.9l9.3-11.4a1 1 0 0 0-.8-1.6h-8.2l1.7-6.9a1 1 0 0 0-.6-.6z"/></svg>'},{id:"prisma",name:"Prisma ORM",category:"database",color:"#2D3748",keywords:["prisma","orm","database","schema","typescript","postgres"],svg:'<svg viewBox="0 0 24 24" fill="#2D3748"><path d="M12.7 2.3a1 1 0 0 0-1.4 0L2.5 11.1a1 1 0 0 0 0 1.4l8.8 8.8a1 1 0 0 0 1.4 0l8.8-8.8a1 1 0 0 0 0-1.4L12.7 2.3zM12 5.4l5.6 5.6-5.6 5.6-5.6-5.6L12 5.4z"/></svg>'},{id:"firebase",name:"Firebase",category:"database",color:"#FFCA28",keywords:["firebase","google","firestore","nosql","auth","cloud"],svg:'<svg viewBox="0 0 24 24"><path fill="#FFA000" d="M3.9 14.5L6.4 2.8a.7.7 0 0 1 1.3-.2l3.4 6.4-7.2 5.5z"/><path fill="#F57F17" d="M14.5 9.4L12.7 6a.7.7 0 0 0-1.3 0L3.9 14.5l10.6-5.1z"/><path fill="#FFCA28" d="M20.1 14.5l-1.7-10.4a.7.7 0 0 0-1.3-.3l-9.8 15.2 12.8-4.5z"/></svg>'},{id:"docker",name:"Docker",category:"cloud",color:"#2496ED",keywords:["docker","container","devops","kubernetes","cloud"],svg:'<svg viewBox="0 0 24 24" fill="#2496ED"><path d="M22.5 10.5c-.3-.2-1.5-.3-2.3.3-.4-.9-1.2-1.6-2.2-1.8-.2-.7-.7-1.4-1.5-1.7V7h-2.5v2H11V7H8.5v2H6V7H3.5v4.5C2 12 1 13.5 1 15.2c0 3.8 3.5 6.8 9.5 6.8 6.5 0 10.5-3.3 11.5-8 .8-.3 1.5-1.5 1.5-2.5-.3-.5-.7-.8-1-.1zM6 10h2V8H6v2zm3 0h2V8H9v2zm3 0h2V8h-2v2zm3 0h2V8h-2v2z"/></svg>'},{id:"kubernetes",name:"Kubernetes",category:"cloud",color:"#326CE5",keywords:["k8s","kubernetes","cloud","orchestration","docker","devops"],svg:'<svg viewBox="0 0 24 24" fill="#326CE5"><path d="M12 2l9.5 5.5v11L12 22l-9.5-3.5v-11L12 2zm0 2.8L4.5 9.2v7.6L12 19.2l7.5-2.4V9.2L12 4.8zm0 3.2a4 4 0 1 1 0 8 4 4 0 0 1 0-8z"/></svg>'},{id:"aws",name:"AWS",category:"cloud",color:"#FF9900",keywords:["aws","amazon","cloud","ec2","s3","lambda","serverless"],svg:'<svg viewBox="0 0 24 24"><path fill="#FF9900" d="M18.8 15.8c-2.4 1.7-5.7 2.6-8.7 2.6-4.1 0-7.8-1.5-10.6-4.1-.2-.2 0-.5.3-.4 3 1.7 6.6 2.7 10.3 2.7 2.6 0 5.6-.6 8.3-2 .4-.3.8.2.4.6v.6zm1.3-.9c-.3-.4-1.9-.2-2.7-.1-.2 0-.3-.2-.1-.3 1.1-.9 2.9-.6 3.2-.2.3.4-.1 2.3-1.1 3.2-.2.2-.4.1-.3-.1.4-.7 1.2-2.1 1-2.5z"/><path fill="#232F3E" d="M8.2 12.7c0 1.2-.8 1.9-1.9 1.9s-1.8-.7-1.8-1.9c0-1.2.7-1.9 1.8-1.9 1.1 0 1.9.7 1.9 1.9zm5.3-2.3v3.9c0 1-.3 1.8-1 2.3-.7.5-1.7.7-2.9.7-1.5 0-2.8-.4-3.5-1l.7-1.2c.6.5 1.6.8 2.6.8 1.3 0 2-.6 2-1.7v-.4c-.5.6-1.3 1-2.3 1-1.8 0-3.1-1.3-3.1-3.2 0-1.9 1.3-3.3 3.1-3.3 1.1 0 1.9.4 2.4 1.1V8h1.9v2.4h.1z"/></svg>'},{id:"gcp",name:"Google Cloud",category:"cloud",color:"#4285F4",keywords:["gcp","google","cloud","kubernetes","bigquery"],svg:'<svg viewBox="0 0 24 24"><path fill="#EA4335" d="M12 4.5a7.5 7.5 0 0 0-7.2 5.4l2.9 1.1A4.5 4.5 0 0 1 12 7.5c1.4 0 2.6.6 3.4 1.6l2.2-2.2A7.5 7.5 0 0 0 12 4.5z"/><path fill="#4285F4" d="M19.5 12c0-.4 0-.9-.1-1.3H12v3h4.3a3.8 3.8 0 0 1-1.6 2.4l2.4 1.9c1.4-1.3 2.4-3.4 2.4-6z"/><path fill="#FBBC05" d="M7.7 11l-2.9-1.1A7.5 7.5 0 0 0 4.5 12c0 1.4.4 2.7 1.1 3.8l2.6-1.8A4.5 4.5 0 0 1 7.7 11z"/><path fill="#34A853" d="M12 19.5c2.1 0 3.9-.7 5.2-2l-2.4-1.9c-.7.5-1.6.9-2.8.9a4.5 4.5 0 0 1-4.2-3.1L5.2 15.2A7.5 7.5 0 0 0 12 19.5z"/></svg>'},{id:"vercel",name:"Vercel",category:"cloud",color:"#000000",keywords:["vercel","nextjs","deployment","hosting","serverless","cloud"],svg:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 20h20L12 2z"/></svg>'},{id:"cloudflare",name:"Cloudflare",category:"cloud",color:"#F38020",keywords:["cloudflare","cdn","dns","security","workers","edge"],svg:'<svg viewBox="0 0 24 24" fill="#F38020"><path d="M18.2 9.5a5.5 5.5 0 0 0-10.4-1.3A4.5 4.5 0 0 0 4 12.5a4.5 4.5 0 0 0 4.5 4.5h11a3.5 3.5 0 0 0 .7-6.9v-.6z"/></svg>'},{id:"linux",name:"Linux",category:"cloud",color:"#FCC624",keywords:["linux","ubuntu","debian","server","os","kernel"],svg:'<svg viewBox="0 0 24 24"><path fill="#333" d="M12 2a4 4 0 0 0-4 4v4a4 4 0 0 0 8 0V6a4 4 0 0 0-4-4z"/><path fill="#FCC624" d="M12 12c-3.3 0-6 2.7-6 6v2h12v-2c0-3.3-2.7-6-6-6z"/><circle cx="10" cy="6" r="1" fill="#fff"/><circle cx="14" cy="6" r="1" fill="#fff"/><path fill="#FFA500" d="M11 8h2l-1 2-1-2z"/></svg>'},{id:"nginx",name:"NGINX",category:"cloud",color:"#009639",keywords:["nginx","proxy","web-server","load-balancer","cloud"],svg:'<svg viewBox="0 0 24 24" fill="#009639"><path d="M12 2L3 7.2v9.6L12 22l9-5.2V7.2L12 2zm-4.5 6.2h2.2l4.8 7.3v-7.3h2v9.6h-2.2L9.5 10.5v7.3h-2V8.2z"/></svg>'},{id:"terraform",name:"Terraform",category:"cloud",color:"#844FBA",keywords:["terraform","iac","cloud","infrastructure","devops"],svg:'<svg viewBox="0 0 24 24" fill="#844FBA"><path d="M1.5 3.5l6.5 3.8v7.5l-6.5-3.8V3.5zm7.5 4.4l6.5-3.8v7.5l-6.5 3.8V7.9zm0 8.8l6.5-3.8v7.5L9 24.2v-7.5zm7.5-13.2L23 7.3v7.5l-6.5-3.8V3.5z"/></svg>'},{id:"openai",name:"OpenAI / AI",category:"tools",color:"#10A37F",keywords:["openai","chatgpt","ai","llm","gpt","model"],svg:'<svg viewBox="0 0 24 24" fill="#10A37F"><path d="M22.3 10.7a6.2 6.2 0 0 0-.5-4.8 6.3 6.3 0 0 0-6.1-3.1 6.3 6.3 0 0 0-4.6-2 6.3 6.3 0 0 0-5.8 4 6.3 6.3 0 0 0-4 2.8 6.3 6.3 0 0 0 .7 6.8 6.2 6.2 0 0 0 .5 4.8 6.3 6.3 0 0 0 6.1 3.1 6.3 6.3 0 0 0 4.6 2 6.3 6.3 0 0 0 5.8-4 6.3 6.3 0 0 0 4-2.8 6.3 6.3 0 0 0-.7-6.8zm-9.3 10.4a4.8 4.8 0 0 1-3.3-1.3l.1-.1 3.8-2.2a.7.7 0 0 0 .4-.6v-5.2l1.6.9v4.4a4.8 4.8 0 0 1-2.6 4.1zm-7.6-3.4a4.8 4.8 0 0 1-.6-3.5l.1.1 3.8 2.2a.7.7 0 0 0 .7 0l4.5-2.6v1.9l-3.8 2.2a4.8 4.8 0 0 1-4.7-.3zm-1.8-7.9a4.8 4.8 0 0 1 2.7-2.2v4.6a.7.7 0 0 0 .4.6l4.5 2.6-1.6.9-3.8-2.2a4.8 4.8 0 0 1-2.2-4.3zm13.1 2.6l-4.5-2.6 1.6-.9 3.8 2.2a4.8 4.8 0 0 1 2.2 4.3 4.8 4.8 0 0 1-2.7 2.2v-4.6a.7.7 0 0 0-.4-.6zm2.3-3.6a4.8 4.8 0 0 1 .6 3.5l-.1-.1-3.8-2.2a.7.7 0 0 0-.7 0l-4.5 2.6v-1.9l3.8-2.2a4.8 4.8 0 0 1 4.7.3zm-6.8-5.3a4.8 4.8 0 0 1 3.3 1.3l-.1.1-3.8 2.2a.7.7 0 0 0-.4.6v5.2l-1.6-.9V8.5a4.8 4.8 0 0 1 2.6-4.1zm-1.6 7.3l2-1.2 2 1.2v2.3l-2 1.2-2-1.2v-2.3z"/></svg>'},{id:"github",name:"GitHub",category:"tools",color:"#181717",keywords:["github","git","repo","vcs","code","devops"],svg:'<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2A10 10 0 0 0 2 12c0 4.4 2.9 8.2 6.8 9.5.5.1.7-.2.7-.5v-1.7c-2.8.6-3.4-1.4-3.4-1.4-.4-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.6 1.1 1.6 1.1.9 1.6 2.4 1.1 3 .9.1-.7.4-1.1.7-1.4-2.2-.3-4.6-1.1-4.6-5 0-1.1.4-2 1-2.8 0-.3-.4-1.3.1-2.7 0 0 .9-.3 2.8 1.1a10 10 0 0 1 5.2 0c2-1.4 2.8-1.1 2.8-1.1.5 1.4.2 2.4.1 2.7.7.8 1 1.7 1 2.8 0 3.9-2.4 4.7-4.6 5 .4.3.7.9.7 1.9v2.8c0 .3.2.6.7.5A10 10 0 0 0 22 12 10 10 0 0 0 12 2z"/></svg>'},{id:"kafka",name:"Apache Kafka",category:"tools",color:"#231F20",keywords:["kafka","event","streaming","queue","message","pubsub"],svg:'<svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="3"/><circle cx="5" cy="8" r="2.5"/><circle cx="5" cy="16" r="2.5"/><circle cx="19" cy="8" r="2.5"/><circle cx="19" cy="16" r="2.5"/><line x1="7.2" y1="9" x2="9.8" y2="10.8" stroke="currentColor" stroke-width="1.8"/><line x1="7.2" y1="15" x2="9.8" y2="13.2" stroke="currentColor" stroke-width="1.8"/><line x1="16.8" y1="9" x2="14.2" y2="10.8" stroke="currentColor" stroke-width="1.8"/><line x1="16.8" y1="15" x2="14.2" y2="13.2" stroke="currentColor" stroke-width="1.8"/></svg>'},{id:"stripe",name:"Stripe",category:"tools",color:"#635BFF",keywords:["stripe","payment","billing","checkout","api"],svg:'<svg viewBox="0 0 24 24" fill="#635BFF"><path d="M13.9 10.4c0-.9-.7-1.3-1.8-1.3-1.6 0-3.6.6-4.9 1.4L6 6.8c1.6-.9 4-1.5 6.4-1.5 4.6 0 7.6 2.3 7.6 6.3 0 6.1-8.4 5.2-8.4 7.8 0 1 .9 1.4 2.2 1.4 1.9 0 4.3-.8 5.7-1.8l1.2 3.6c-1.7 1.1-4.4 1.8-7.1 1.8-4.9 0-8.1-2.4-8.1-6.4-.1-6.4 8.4-5.3 8.4-8z"/></svg>'},{id:"postman",name:"Postman",category:"tools",color:"#FF6C37",keywords:["postman","api","testing","rest","http"],svg:'<svg viewBox="0 0 24 24" fill="#FF6C37"><circle cx="12" cy="12" r="10"/><path fill="#fff" d="M16 11.5c-.8-.8-2-1.3-3.2-1.3H9v4.5h1.5v-1.7h2.1c.8 0 1.5-.3 2-1 .5-.6.6-1.5-.2-2zm-3.2 1.8h-2.3v-1.7h2.3c.7 0 1.1.4 1.1.9s-.4.8-1.1.8z"/></svg>'}];function qa(e,t){let r=e.svg.trim();r.includes("xmlns=")||(r=r.replace("<svg",'<svg xmlns="http://www.w3.org/2000/svg"')),!r.includes("width=")&&!r.includes("height=")&&(r=r.replace("<svg",'<svg width="128" height="128"'));try{if(typeof window<"u"){let o=new TextEncoder().encode(r),c="";for(let d=0;d<o.length;d++)c+=String.fromCharCode(o[d]);return `data:image/svg+xml;base64,${window.btoa(c)}`}}catch{}return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(r)}`}function Rn({isOpen:e,onClose:t,onInsertTechStencil:r}){let[o,c]=useState(""),[d,h]=useState("all"),[s,n]=useState("badge"),p=useRef(null),i=useRef(null);if(useEffect(()=>{if(e){let a=setTimeout(()=>{p.current?.focus();},100);return ()=>clearTimeout(a)}},[e]),useEffect(()=>{let a=x=>{x.key==="Escape"&&e&&t();};return window.addEventListener("keydown",a),()=>window.removeEventListener("keydown",a)},[e,t]),!e)return null;let l=Ln.filter(a=>{let x=d==="all"||a.category===d,m=o.toLowerCase().trim();if(!m)return x;let g=a.name.toLowerCase().includes(m),w=a.keywords.some(_=>_.toLowerCase().includes(m));return x&&(g||w)}),u=a=>{let x=qa(a);r(x,a.name,s),t();};return jsx("div",{role:"dialog","aria-modal":"true","aria-labelledby":"tech-stencils-title",className:"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 dark:bg-black/60 backdrop-blur-sm animate-in fade-in duration-150",onClick:a=>{a.target===a.currentTarget&&t();},children:jsxs("div",{ref:i,className:"fk-card w-full max-w-2xl bg-[#eef1f6]/98 dark:bg-[#15161a]/98 backdrop-blur-3xl rounded-[22px] border border-white/80 dark:border-white/[0.08] shadow-[-8px_-8px_24px_rgba(255,255,255,0.9),_12px_12px_32px_rgba(166,175,195,0.6)] dark:shadow-[-6px_-6px_20px_rgba(255,255,255,0.03),_12px_12px_36px_rgba(0,0,0,0.95)] overflow-hidden flex flex-col max-h-[85vh] animate-in zoom-in-95 duration-150",children:[jsxs("div",{className:"flex items-center justify-between px-6 pt-5 pb-3 border-b border-black/5 dark:border-white/5",children:[jsxs("div",{className:"flex items-center gap-2.5",children:[jsx("div",{className:"w-8 h-8 rounded-[10px] bg-primary text-white flex items-center justify-center shadow-md",children:jsx(IconBracketsContain,{size:18,stroke:2})}),jsxs("div",{children:[jsxs("h2",{id:"tech-stencils-title",className:"text-base font-bold text-neutral-800 dark:text-neutral-100 flex items-center gap-2",children:["Developer & Cloud Stencils",jsx("span",{className:"text-[10px] px-2 py-0.5 rounded-full bg-primary/10 text-primary dark:text-foreground border border-primary/20 font-semibold",children:"30+ Logos"})]}),jsx("p",{className:"text-xs text-neutral-500 dark:text-neutral-400",children:"1-click insert official tech icons for system design & architecture diagrams"})]})]}),jsx("button",{type:"button",onClick:t,className:"w-7 h-7 rounded-[8px] flex items-center justify-center text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 hover:bg-neutral-200/50 dark:hover:bg-neutral-800/50 transition-colors cursor-pointer",children:jsx(IconX,{size:16})})]}),jsxs("div",{className:"px-6 pt-3 pb-2 flex flex-col sm:flex-row gap-2.5 items-stretch sm:items-center justify-between",children:[jsxs("div",{className:"relative flex-1",children:[jsx(IconSearch,{size:16,className:"absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-500 pointer-events-none"}),jsx("input",{ref:p,type:"text",value:o,onChange:a=>c(a.target.value),placeholder:"Search React, Docker, Postgres, AWS, Python...",className:"w-full pl-9 pr-8 py-2 text-xs rounded-[11px] bg-white/80 dark:bg-[#1f2128]/80 border border-neutral-300/80 dark:border-neutral-700/80 text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-primary/40 shadow-inner"}),o&&jsx("button",{type:"button",onClick:()=>c(""),className:"absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200",children:jsx(IconX,{size:13})})]}),jsxs("div",{className:"flex items-center gap-1 p-0.5 rounded-[10px] bg-[#e4e8ef] dark:bg-[#121316] border border-white/60 dark:border-white/[0.04] shrink-0",children:[jsx("button",{type:"button",onClick:()=>n("badge"),title:"Insert as styled card with label",className:`px-2.5 py-1 text-[11px] font-medium rounded-[8px] transition-all cursor-pointer ${s==="badge"?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground font-bold shadow-sm":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Badge Card"}),jsx("button",{type:"button",onClick:()=>n("standalone"),title:"Insert standalone SVG logo icon",className:`px-2.5 py-1 text-[11px] font-medium rounded-[8px] transition-all cursor-pointer ${s==="standalone"?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground font-bold shadow-sm":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-800 dark:hover:text-neutral-200"}`,children:"Pure Logo"})]})]}),jsx("div",{className:"px-6 py-2 flex items-center gap-1.5 overflow-x-auto no-scrollbar border-b border-black/5 dark:border-white/5",children:In.map(a=>jsx("button",{type:"button",onClick:()=>h(a.id),className:`px-2.5 py-1 rounded-full text-[11px] font-medium transition-all whitespace-nowrap cursor-pointer ${d===a.id?"bg-primary text-primary-foreground font-semibold shadow-xs":"bg-neutral-200/60 dark:bg-neutral-800/60 text-neutral-600 dark:text-neutral-300 hover:bg-neutral-300/70 dark:hover:bg-neutral-700/70"}`,children:a.label},a.id))}),jsxs("div",{className:"flex-1 overflow-y-auto p-6 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3",children:[l.map(a=>jsxs("button",{type:"button",onClick:()=>u(a),className:"flex items-center gap-3 p-2.5 rounded-[13px] bg-white/70 dark:bg-[#1a1c22]/70 hover:bg-white dark:hover:bg-[#22242c] border border-neutral-200/80 dark:border-neutral-800/80 hover:border-primary/40 dark:hover:border-primary/40 shadow-xs hover:shadow-md hover:-translate-y-0.5 transition-all group cursor-pointer text-left",children:[jsx("div",{className:"w-9 h-9 rounded-[9px] flex items-center justify-center p-1.5 shrink-0 bg-neutral-100 dark:bg-neutral-900 border border-black/5 dark:border-white/5 group-hover:scale-105 transition-transform",dangerouslySetInnerHTML:{__html:a.svg}}),jsxs("div",{className:"min-w-0 flex-1",children:[jsx("div",{className:"text-xs font-semibold text-neutral-800 dark:text-neutral-200 truncate group-hover:text-primary dark:group-hover:text-blue-200 transition-colors",children:a.name}),jsx("div",{className:"text-[9px] text-neutral-400 dark:text-neutral-500 capitalize truncate",children:a.category})]}),jsx("div",{className:"opacity-0 group-hover:opacity-100 transition-opacity text-primary shrink-0",children:jsx(IconPlus,{size:14,stroke:2.5})})]},a.id)),l.length===0&&jsxs("div",{className:"col-span-full py-12 flex flex-col items-center justify-center text-center",children:[jsx(IconSparkles,{size:32,className:"text-neutral-300 dark:text-neutral-700 mb-2"}),jsxs("p",{className:"text-sm font-semibold text-neutral-600 dark:text-neutral-300",children:["No tech stencils found for \u201C",o,"\u201D"]}),jsx("p",{className:"text-xs text-neutral-400 mt-0.5",children:"Try searching for React, Python, Docker, PostgreSQL, AWS..."})]})]}),jsxs("div",{className:"px-6 py-3 bg-[#e8ecf3]/70 dark:bg-[#121316]/70 border-t border-black/5 dark:border-white/5 flex items-center justify-between text-[11px] text-neutral-500 dark:text-neutral-400",children:[jsx("span",{children:"Clicking an icon places it directly onto your canvas."}),jsx("span",{className:"font-mono text-[10px] opacity-70",children:"Esc to close"})]})]})})}var Po=[{id:"mindmap",title:"Mind Map Starter",category:"Brainstorming",description:"Central theme with radiating branches for ideation, strategy, and brainstorming sessions.",tag:"Ideation",tagColor:"bg-purple-100 dark:bg-purple-950/60 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-800",elementsCount:13,previewType:"mindmap"},{id:"flowchart",title:"Flowchart Decision Tree",category:"Diagrams",description:"Standard workflow with start pill, process steps, decision diamonds, and return branches.",tag:"Workflow",tagColor:"bg-emerald-100 dark:bg-emerald-950/60 text-emerald-700 dark:text-emerald-300 border-emerald-200 dark:border-emerald-800",elementsCount:11,previewType:"flowchart"},{id:"erd",title:"Entity-Relationship (ERD) Schema",category:"Engineering",description:"Database table models with primary/foreign keys and Crow's Foot relationship connectors.",tag:"Database",tagColor:"bg-blue-100 dark:bg-blue-950/60 text-blue-700 dark:text-blue-300 border-blue-200 dark:border-blue-800",elementsCount:7,previewType:"erd"},{id:"kanban",title:"Kanban / Retrospective Board",category:"Agile & Planning",description:"Organized columns with structured frames and color-coded sticky notes for sprint tracking.",tag:"Sprint Board",tagColor:"bg-amber-100 dark:bg-amber-950/60 text-amber-700 dark:text-amber-300 border-amber-200 dark:border-amber-800",elementsCount:9,previewType:"kanban"},{id:"user_journey",title:"User Journey Map",category:"Agile & Planning",description:"Step-by-step customer experience map tracking user actions, touchpoints, and pain points.",tag:"UX Design",tagColor:"bg-rose-100 dark:bg-rose-950/60 text-rose-700 dark:text-rose-300 border-rose-200 dark:border-rose-800",elementsCount:12,previewType:"journey"}],ti=0;function lt(e){return ti+=1,`tmpl_${e}_${Date.now()}_${ti}_${Math.random().toString(36).substring(2,6)}`}function ri(e,t,r=false){let o=[];if(e==="mindmap"){let c=t.x,d=t.y,h=lt("center");o.push({id:h,type:"rectangle",x:c-120,y:d-45,width:240,height:90,strokeColor:"#4f46e5",strokeWidth:2.5,strokeStyle:"solid",fillColor:"#e0e7ff",fillStyle:"solid",edgeStyle:"round",opacity:1,zIndex:10}),o.push({id:lt("center_text"),type:"text",x:c-110,y:d-25,width:220,height:50,text:`\u{1F680} Product Vision
|
|
98
98
|
& Strategy`,fontSize:20,fontFamily:"sans",textAlign:"center",strokeColor:"#312e81",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:11}),[{title:"\u{1F4A1} Ideation & Research",sub:["User Surveys & Data","Competitive Analysis"],dx:-360,dy:-180,color:"#0284c7",bg:"#e0f2fe"},{title:"\u{1F3A8} Design & UX",sub:["Design System","Interactive Prototype"],dx:360,dy:-180,color:"#d97706",bg:"#fef3c7"},{title:"\u26A1 Core Architecture",sub:["Canvas Engine API","Realtime Sync"],dx:-360,dy:180,color:"#16a34a",bg:"#dcfce7"},{title:"\u{1F4C8} Launch & Growth",sub:["Product Hunt Launch","Docs & Tutorials"],dx:360,dy:180,color:"#e11d48",bg:"#ffe4e6"}].forEach((n,p)=>{let i=c+n.dx,l=d+n.dy,u=lt(`branch_${p}`);o.push({id:u,type:"rectangle",x:i-100,y:l-35,width:200,height:70,strokeColor:n.color,strokeWidth:2,strokeStyle:"solid",fillColor:n.bg,fillStyle:"solid",edgeStyle:"round",opacity:1,zIndex:10}),o.push({id:lt(`branch_text_${p}`),type:"text",x:i-90,y:l-16,width:180,height:32,text:n.title,fontSize:16,fontFamily:"sans",textAlign:"center",strokeColor:n.color,strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:11});let a=n.dx<0?c-120:c+120,x=d,m=n.dx<0?i+100:i-100,g=l;o.push({id:lt(`arrow_${p}`),type:"arrow",arrowType:"curved",x:a,y:x,width:m-a,height:g-x,strokeColor:n.color,strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",endArrowhead:"arrow",opacity:.85,zIndex:5}),n.sub.forEach((w,_)=>{let S=i+(n.dx<0?-190:190),E=l+(_===0?-40:40);o.push({id:lt(`sub_${p}_${_}`),type:"rectangle",x:S-75,y:E-22,width:150,height:44,strokeColor:"#cbd5e1",strokeWidth:1.5,strokeStyle:"dashed",fillColor:"#ffffff",fillStyle:"solid",edgeStyle:"round",opacity:1,zIndex:8}),o.push({id:lt(`sub_txt_${p}_${_}`),type:"text",x:S-70,y:E-12,width:140,height:24,text:w,fontSize:13,fontFamily:"sans",textAlign:"center",strokeColor:"#334155",strokeWidth:1.5,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:9});let z=n.dx<0?i-100:i+100,D=n.dx<0?S+75:S-75;o.push({id:lt(`sub_line_${p}_${_}`),type:"line",arrowType:"straight",x:z,y:l,width:D-z,height:E-l,strokeColor:"#cbd5e1",strokeWidth:1.5,strokeStyle:"dotted",fillColor:"transparent",fillStyle:"solid",opacity:.7,zIndex:4});});});}else if(e==="flowchart"){let c=t.x,d=t.y-280;o.push({id:lt("fc_start"),type:"rectangle",x:c-110,y:d,width:220,height:60,strokeColor:"#059669",strokeWidth:2,strokeStyle:"solid",fillColor:"#d1fae5",fillStyle:"solid",edgeStyle:"round",opacity:1,zIndex:10}),o.push({id:lt("fc_start_txt"),type:"text",x:c-100,y:d+18,width:200,height:24,text:"\u{1F7E2} User Submits Form",fontSize:16,fontFamily:"sans",textAlign:"center",strokeColor:"#065f46",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:11}),o.push({id:lt("fc_arr1"),type:"arrow",x:c,y:d+60,width:0,height:60,strokeColor:"#475569",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",endArrowhead:"arrow",opacity:1,zIndex:5});let h=d+120;o.push({id:lt("fc_proc"),type:"rectangle",x:c-120,y:h,width:240,height:70,strokeColor:"#4f46e5",strokeWidth:2,strokeStyle:"solid",fillColor:"#e0e7ff",fillStyle:"solid",opacity:1,zIndex:10}),o.push({id:lt("fc_proc_txt"),type:"text",x:c-110,y:h+22,width:220,height:26,text:"\u2699\uFE0F Validate Request Payload",fontSize:15,fontFamily:"sans",textAlign:"center",strokeColor:"#3730a3",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:11}),o.push({id:lt("fc_arr2"),type:"arrow",x:c,y:h+70,width:0,height:60,strokeColor:"#475569",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",endArrowhead:"arrow",opacity:1,zIndex:5});let s=h+130;o.push({id:lt("fc_diam"),type:"diamond",x:c-90,y:s,width:180,height:120,strokeColor:"#d97706",strokeWidth:2,strokeStyle:"solid",fillColor:"#fef3c7",fillStyle:"solid",opacity:1,zIndex:10}),o.push({id:lt("fc_diam_txt"),type:"text",x:c-75,y:s+45,width:150,height:30,text:"Is Input Valid?",fontSize:15,fontFamily:"sans",textAlign:"center",strokeColor:"#92400e",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:11});let n=c+220;o.push({id:lt("fc_arr_yes"),type:"arrow",x:c+90,y:s+60,width:130,height:0,strokeColor:"#16a34a",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",endArrowhead:"arrow",opacity:1,zIndex:5}),o.push({id:lt("fc_lbl_yes"),type:"text",x:c+120,y:s+36,width:50,height:20,text:"YES",fontSize:12,fontFamily:"sans",textAlign:"center",strokeColor:"#15803d",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:11}),o.push({id:lt("fc_succ"),type:"rectangle",x:n,y:s+25,width:200,height:70,strokeColor:"#16a34a",strokeWidth:2,strokeStyle:"solid",fillColor:"#dcfce7",fillStyle:"solid",edgeStyle:"round",opacity:1,zIndex:10}),o.push({id:lt("fc_succ_txt"),type:"text",x:n+10,y:s+45,width:180,height:30,text:`\u2728 Generate Auth Token
|
|
99
99
|
& Redirect Dashboard`,fontSize:13,fontFamily:"sans",textAlign:"center",strokeColor:"#166534",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:11});let p=c-380;o.push({id:lt("fc_arr_no"),type:"arrow",x:c-90,y:s+60,width:-130,height:0,strokeColor:"#dc2626",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",endArrowhead:"arrow",opacity:1,zIndex:5}),o.push({id:lt("fc_lbl_no"),type:"text",x:c-170,y:s+36,width:40,height:20,text:"NO",fontSize:12,fontFamily:"sans",textAlign:"center",strokeColor:"#b91c1c",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:11}),o.push({id:lt("fc_err"),type:"rectangle",x:p,y:s+25,width:160,height:70,strokeColor:"#dc2626",strokeWidth:2,strokeStyle:"solid",fillColor:"#fee2e2",fillStyle:"solid",edgeStyle:"round",opacity:1,zIndex:10}),o.push({id:lt("fc_err_txt"),type:"text",x:p+10,y:s+45,width:140,height:30,text:`\u26A0\uFE0F Show 400 Error
|
|
100
100
|
Highlight Fields`,fontSize:13,fontFamily:"sans",textAlign:"center",strokeColor:"#991b1b",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:11}),o.push({id:lt("fc_loopback"),type:"arrow",arrowType:"elbow",x:p+80,y:s+25,width:c-110-(p+80),height:d+30-(s+25),strokeColor:"#94a3b8",strokeWidth:1.8,strokeStyle:"dashed",fillColor:"transparent",fillStyle:"solid",endArrowhead:"arrow",opacity:.8,zIndex:4});}else if(e==="erd"){let c=t.x,d=t.y;[{name:"users",x:c-340,y:d-180,headerBg:"#4f46e5",bodyText:`\u{1F511} id: uuid (PK)
|
|
@@ -116,13 +116,13 @@ Highlight Fields`,fontSize:13,fontFamily:"sans",textAlign:"center",strokeColor:"
|
|
|
116
116
|
\u{1F4E6} stock_count: integer`}].forEach(s=>{o.push({id:lt(`erd_${s.name}`),type:"rectangle",x:s.x,y:s.y,width:240,height:180,strokeColor:"#cbd5e1",strokeWidth:2,strokeStyle:"solid",fillColor:"#ffffff",fillStyle:"solid",edgeStyle:"round",opacity:1,zIndex:10}),o.push({id:lt(`erd_hdr_${s.name}`),type:"rectangle",x:s.x,y:s.y,width:240,height:38,strokeColor:s.headerBg,strokeWidth:0,strokeStyle:"solid",fillColor:s.headerBg,fillStyle:"solid",edgeStyle:"round",opacity:1,zIndex:11}),o.push({id:lt(`erd_hdrtxt_${s.name}`),type:"text",x:s.x+12,y:s.y+9,width:216,height:20,text:`\u{1F5C4}\uFE0F ${s.name.toUpperCase()}`,fontSize:14,fontFamily:"mono",textAlign:"left",strokeColor:"#ffffff",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:12}),o.push({id:lt(`erd_body_${s.name}`),type:"text",x:s.x+14,y:s.y+48,width:212,height:128,text:s.bodyText,fontSize:13,fontFamily:"mono",textAlign:"left",strokeColor:"#334155",strokeWidth:1.5,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:12});}),o.push({id:lt("erd_rel_users_orders"),type:"arrow",arrowType:"straight",x:c-100,y:d-90,width:180,height:0,strokeColor:"#4f46e5",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",startArrowhead:"crowfoot_strictly_one",endArrowhead:"crowfoot_zero_many",opacity:.9,zIndex:6}),o.push({id:lt("erd_rel_orders_items"),type:"arrow",arrowType:"straight",x:c+200,y:d,width:0,height:120,strokeColor:"#059669",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",startArrowhead:"crowfoot_strictly_one",endArrowhead:"crowfoot_one_many",opacity:.9,zIndex:6}),o.push({id:lt("erd_rel_products_items"),type:"arrow",arrowType:"straight",x:c-100,y:d+210,width:180,height:0,strokeColor:"#e11d48",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",startArrowhead:"crowfoot_strictly_one",endArrowhead:"crowfoot_zero_many",opacity:.9,zIndex:6});}else if(e==="kanban"){let c=t.x,d=t.y;[{title:"\u{1F3AF} To Do (Backlog)",x:c-480,y:d-240,w:300,h:480,stickies:[{text:"Implement WebSocket sync engine for multi-tab collaboration",color:"#fef08a"},{text:"Add SVG icon library preset picker into left tool rail",color:"#e0e7ff"}]},{title:"\u26A1 In Progress",x:c-150,y:d-240,w:300,h:480,stickies:[{text:"Build diagram templates & starter kits with instant preview",color:"#fbcfe8"},{text:"ERD Crow's foot arrow connector endpoint rendering",color:"#cffafe"}]},{title:"\u2705 Done & Shipped",x:c+180,y:d-240,w:300,h:480,stickies:[{text:"Canvas Presentation slideshow mode with frame step navigation",color:"#bbf7d0"},{text:"Copy Image directly to system clipboard (Ctrl+Shift+C)",color:"#fed7aa"}]}].forEach(s=>{o.push({id:lt(`frame_${s.title}`),type:"frame",frameLabel:s.title,x:s.x,y:s.y,width:s.w,height:s.h,strokeColor:"#6366f1",strokeWidth:1.5,strokeStyle:"dashed",fillColor:"rgba(248, 250, 252, 0.5)",fillStyle:"solid",opacity:1,zIndex:2}),s.stickies.forEach((n,p)=>{o.push({id:lt(`sticky_${s.title}_${p}`),type:"sticky",x:s.x+24,y:s.y+40+p*190,width:s.w-48,height:160,text:n.text,fontSize:16,fontFamily:"comic",textAlign:"center",strokeColor:"#1e293b",strokeWidth:1,strokeStyle:"solid",fillColor:n.color,stickyColor:n.color,fillStyle:"solid",opacity:1,zIndex:8});});});}else if(e==="user_journey"){let c=t.x,d=t.y;[{name:"1. Discover \u{1F50D}",action:"Searches for online whiteboard on Google & social",emotion:"\u{1F914} Curious",pain:"Too many complex tools requiring credit cards",opp:"Clear instant demo button with zero signup barrier",x:c-480},{name:"2. Explore \u{1F9ED}",action:"Draws flowcharts, mindmaps & tries sticky notes",emotion:"\u{1F929} Delighted",pain:"Hard to align multiple shapes cleanly",opp:"One-click auto distribute & quick-branch (+) creator",x:c-160},{name:"3. Convert \u{1F4B3}",action:"Exports high-res PNG & presents slides to team",emotion:"\u{1F680} Empowered",pain:"Needs offline backup & copy to clipboard",opp:"Ctrl+Shift+C transparent PNG clipboard copy",x:c+160},{name:"4. Retain \u{1F496}",action:"Uses SketchBoard daily for sprint planning & specs",emotion:"\u{1F3C6} Champion",pain:"Wants reusable starter templates",opp:"Pre-built diagram library & starter kits",x:c+480}].forEach(s=>{let i=d-280;o.push({id:lt(`uj_frame_${s.name}`),type:"frame",frameLabel:s.name,x:s.x-280/2,y:i,width:280,height:560,strokeColor:"#8b5cf6",strokeWidth:1.5,strokeStyle:"dashed",fillColor:"rgba(245, 243, 255, 0.45)",fillStyle:"solid",opacity:1,zIndex:2}),o.push({id:lt(`uj_act_${s.name}`),type:"sticky",x:s.x-115,y:i+30,width:230,height:110,text:`\u{1F3AF} ACTION:
|
|
117
117
|
${s.action}`,fontSize:15,fontFamily:"comic",textAlign:"center",strokeColor:"#1e293b",strokeWidth:1,strokeStyle:"solid",fillColor:"#e0f2fe",stickyColor:"#e0f2fe",fillStyle:"solid",opacity:1,zIndex:6}),o.push({id:lt(`uj_pain_${s.name}`),type:"sticky",x:s.x-115,y:i+160,width:230,height:120,text:`\u26A0\uFE0F PAIN POINT (${s.emotion}):
|
|
118
118
|
${s.pain}`,fontSize:15,fontFamily:"comic",textAlign:"center",strokeColor:"#1e293b",strokeWidth:1,strokeStyle:"solid",fillColor:"#fee2e2",stickyColor:"#fee2e2",fillStyle:"solid",opacity:1,zIndex:6}),o.push({id:lt(`uj_opp_${s.name}`),type:"sticky",x:s.x-115,y:i+300,width:230,height:130,text:`\u{1F4A1} OPPORTUNITY:
|
|
119
|
-
${s.opp}`,fontSize:15,fontFamily:"comic",textAlign:"center",strokeColor:"#1e293b",strokeWidth:1,strokeStyle:"solid",fillColor:"#dcfce7",stickyColor:"#dcfce7",fillStyle:"solid",opacity:1,zIndex:6});});}return o}var ql=["All","Brainstorming","Diagrams","Engineering","Agile & Planning"];function Dn({isOpen:e,onClose:t,onSelectTemplate:r,hasExistingElements:o=false}){let{panelVariant:c}=po(),d=c==="neumorphic",[h,s]=useState("All"),[n,p]=useState(""),i=useRef(null);if(useEffect(()=>{let a=x=>{x.key==="Escape"&&e&&t();};return window.addEventListener("keydown",a),()=>window.removeEventListener("keydown",a)},[e,t]),useEffect(()=>{let a=x=>{e&&i.current&&!i.current.contains(x.target)&&t();};return e&&document.addEventListener("mousedown",a),()=>{document.removeEventListener("mousedown",a);}},[e,t]),!e)return null;let l=Po.filter(a=>{let x=h==="All"||a.category===h,m=a.title.toLowerCase().includes(n.toLowerCase())||a.description.toLowerCase().includes(n.toLowerCase())||a.tag.toLowerCase().includes(n.toLowerCase());return x&&m}),u=a=>{switch(a){case "mindmap":return jsxs("svg",{className:"w-full h-full",viewBox:"0 0 200 110",fill:"none",children:[jsx("rect",{x:"75",y:"38",width:"50",height:"34",rx:"8",fill:"#4f46e5",fillOpacity:"0.15",stroke:"#4f46e5",strokeWidth:"1.5"}),jsx("circle",{cx:"100",cy:"55",r:"5",fill:"#4f46e5"}),jsx("path",{d:"M75 50 C50 50 45 25 25 25",stroke:"#0284c7",strokeWidth:"1.5",strokeDasharray:"3 3"}),jsx("rect",{x:"10",y:"15",width:"30",height:"18",rx:"4",fill:"#e0f2fe",stroke:"#0284c7",strokeWidth:"1"}),jsx("path",{d:"M125 50 C150 50 155 25 175 25",stroke:"#d97706",strokeWidth:"1.5",strokeDasharray:"3 3"}),jsx("rect",{x:"160",y:"15",width:"30",height:"18",rx:"4",fill:"#fef3c7",stroke:"#d97706",strokeWidth:"1"}),jsx("path",{d:"M75 60 C50 60 45 85 25 85",stroke:"#16a34a",strokeWidth:"1.5",strokeDasharray:"3 3"}),jsx("rect",{x:"10",y:"75",width:"30",height:"18",rx:"4",fill:"#dcfce7",stroke:"#16a34a",strokeWidth:"1"}),jsx("path",{d:"M125 60 C150 60 155 85 175 85",stroke:"#e11d48",strokeWidth:"1.5",strokeDasharray:"3 3"}),jsx("rect",{x:"160",y:"75",width:"30",height:"18",rx:"4",fill:"#ffe4e6",stroke:"#e11d48",strokeWidth:"1"})]});case "flowchart":return jsxs("svg",{className:"w-full h-full",viewBox:"0 0 200 110",fill:"none",children:[jsx("rect",{x:"70",y:"8",width:"60",height:"20",rx:"10",fill:"#d1fae5",stroke:"#059669",strokeWidth:"1.5"}),jsx("line",{x1:"100",y1:"28",x2:"100",y2:"40",stroke:"#64748b",strokeWidth:"1.5"}),jsx("polygon",{points:"100,42 125,58 100,74 75,58",fill:"#fef3c7",stroke:"#d97706",strokeWidth:"1.5"}),jsx("line",{x1:"125",y1:"58",x2:"150",y2:"58",stroke:"#16a34a",strokeWidth:"1.5"}),jsx("rect",{x:"150",y:"46",width:"40",height:"24",rx:"4",fill:"#dcfce7",stroke:"#16a34a",strokeWidth:"1.2"}),jsx("line",{x1:"75",y1:"58",x2:"50",y2:"58",stroke:"#dc2626",strokeWidth:"1.5"}),jsx("rect",{x:"10",y:"46",width:"40",height:"24",rx:"4",fill:"#fee2e2",stroke:"#dc2626",strokeWidth:"1.2"}),jsx("line",{x1:"100",y1:"74",x2:"100",y2:"86",stroke:"#64748b",strokeWidth:"1.5"}),jsx("rect",{x:"75",y:"86",width:"50",height:"18",rx:"4",fill:"#e0e7ff",stroke:"#4f46e5",strokeWidth:"1.2"})]});case "erd":return jsxs("svg",{className:"w-full h-full",viewBox:"0 0 200 110",fill:"none",children:[jsx("rect",{x:"12",y:"15",width:"65",height:"42",rx:"4",fill:"#ffffff",stroke:"#4f46e5",strokeWidth:"1.2"}),jsx("rect",{x:"12",y:"15",width:"65",height:"14",rx:"4",fill:"#4f46e5"}),jsx("line",{x1:"18",y1:"38",x2:"68",y2:"38",stroke:"#cbd5e1",strokeWidth:"1.5"}),jsx("line",{x1:"18",y1:"46",x2:"55",y2:"46",stroke:"#e2e8f0",strokeWidth:"1.5"}),jsx("rect",{x:"122",y:"15",width:"65",height:"42",rx:"4",fill:"#ffffff",stroke:"#059669",strokeWidth:"1.2"}),jsx("rect",{x:"122",y:"15",width:"65",height:"14",rx:"4",fill:"#059669"}),jsx("line",{x1:"128",y1:"38",x2:"178",y2:"38",stroke:"#cbd5e1",strokeWidth:"1.5"}),jsx("line",{x1:"128",y1:"46",x2:"165",y2:"46",stroke:"#e2e8f0",strokeWidth:"1.5"}),jsx("rect",{x:"122",y:"66",width:"65",height:"38",rx:"4",fill:"#ffffff",stroke:"#d97706",strokeWidth:"1.2"}),jsx("rect",{x:"122",y:"66",width:"65",height:"12",rx:"4",fill:"#d97706"}),jsx("path",{d:"M77 35 L122 35",stroke:"#4f46e5",strokeWidth:"1.5",strokeDasharray:"2 2"}),jsx("path",{d:"M155 57 L155 66",stroke:"#059669",strokeWidth:"1.5",strokeDasharray:"2 2"})]});case "kanban":return jsxs("svg",{className:"w-full h-full",viewBox:"0 0 200 110",fill:"none",children:[jsx("rect",{x:"10",y:"10",width:"55",height:"90",rx:"6",fill:"#f8fafc",stroke:"#cbd5e1",strokeWidth:"1",strokeDasharray:"3 2"}),jsx("rect",{x:"16",y:"16",width:"43",height:"8",rx:"2",fill:"#6366f1",fillOpacity:"0.3"}),jsx("rect",{x:"15",y:"30",width:"45",height:"24",rx:"3",fill:"#fef08a",stroke:"#ca8a04",strokeWidth:"0.8"}),jsx("rect",{x:"15",y:"58",width:"45",height:"24",rx:"3",fill:"#e0e7ff",stroke:"#4f46e5",strokeWidth:"0.8"}),jsx("rect",{x:"72",y:"10",width:"55",height:"90",rx:"6",fill:"#f8fafc",stroke:"#cbd5e1",strokeWidth:"1",strokeDasharray:"3 2"}),jsx("rect",{x:"78",y:"16",width:"43",height:"8",rx:"2",fill:"#d97706",fillOpacity:"0.3"}),jsx("rect",{x:"77",y:"30",width:"45",height:"24",rx:"3",fill:"#fbcfe8",stroke:"#db2777",strokeWidth:"0.8"}),jsx("rect",{x:"77",y:"58",width:"45",height:"24",rx:"3",fill:"#cffafe",stroke:"#0891b2",strokeWidth:"0.8"}),jsx("rect",{x:"135",y:"10",width:"55",height:"90",rx:"6",fill:"#f8fafc",stroke:"#cbd5e1",strokeWidth:"1",strokeDasharray:"3 2"}),jsx("rect",{x:"141",y:"16",width:"43",height:"8",rx:"2",fill:"#16a34a",fillOpacity:"0.3"}),jsx("rect",{x:"140",y:"30",width:"45",height:"24",rx:"3",fill:"#bbf7d0",stroke:"#16a34a",strokeWidth:"0.8"})]});case "journey":return jsxs("svg",{className:"w-full h-full",viewBox:"0 0 200 110",fill:"none",children:[jsx("rect",{x:"8",y:"8",width:"42",height:"94",rx:"4",fill:"#f5f3ff",stroke:"#8b5cf6",strokeWidth:"1",strokeDasharray:"2 2"}),jsx("rect",{x:"12",y:"14",width:"34",height:"22",rx:"2",fill:"#e0f2fe",stroke:"#0284c7",strokeWidth:"0.8"}),jsx("rect",{x:"12",y:"42",width:"34",height:"24",rx:"2",fill:"#fee2e2",stroke:"#dc2626",strokeWidth:"0.8"}),jsx("rect",{x:"12",y:"72",width:"34",height:"24",rx:"2",fill:"#dcfce7",stroke:"#16a34a",strokeWidth:"0.8"}),jsx("rect",{x:"55",y:"8",width:"42",height:"94",rx:"4",fill:"#f5f3ff",stroke:"#8b5cf6",strokeWidth:"1",strokeDasharray:"2 2"}),jsx("rect",{x:"59",y:"14",width:"34",height:"22",rx:"2",fill:"#e0f2fe",stroke:"#0284c7",strokeWidth:"0.8"}),jsx("rect",{x:"59",y:"42",width:"34",height:"24",rx:"2",fill:"#fee2e2",stroke:"#dc2626",strokeWidth:"0.8"}),jsx("rect",{x:"59",y:"72",width:"34",height:"24",rx:"2",fill:"#dcfce7",stroke:"#16a34a",strokeWidth:"0.8"}),jsx("rect",{x:"103",y:"8",width:"42",height:"94",rx:"4",fill:"#f5f3ff",stroke:"#8b5cf6",strokeWidth:"1",strokeDasharray:"2 2"}),jsx("rect",{x:"107",y:"14",width:"34",height:"22",rx:"2",fill:"#e0f2fe",stroke:"#0284c7",strokeWidth:"0.8"}),jsx("rect",{x:"107",y:"42",width:"34",height:"24",rx:"2",fill:"#fee2e2",stroke:"#dc2626",strokeWidth:"0.8"}),jsx("rect",{x:"107",y:"72",width:"34",height:"24",rx:"2",fill:"#dcfce7",stroke:"#16a34a",strokeWidth:"0.8"}),jsx("rect",{x:"150",y:"8",width:"42",height:"94",rx:"4",fill:"#f5f3ff",stroke:"#8b5cf6",strokeWidth:"1",strokeDasharray:"2 2"}),jsx("rect",{x:"154",y:"14",width:"34",height:"22",rx:"2",fill:"#e0f2fe",stroke:"#0284c7",strokeWidth:"0.8"}),jsx("rect",{x:"154",y:"42",width:"34",height:"24",rx:"2",fill:"#fee2e2",stroke:"#dc2626",strokeWidth:"0.8"}),jsx("rect",{x:"154",y:"72",width:"34",height:"24",rx:"2",fill:"#dcfce7",stroke:"#16a34a",strokeWidth:"0.8"})]})}};return jsxs("div",{ref:i,className:`fk-card fixed left-13 top-1/2 -translate-y-1/2 z-40 w-[420px] max-w-[calc(100vw-80px)] max-h-[85vh] flex flex-col backdrop-blur-2xl rounded-[20px] animate-in fade-in zoom-in-95 duration-200 select-none overflow-hidden ${d?"bg-[#eef1f6]/98 dark:bg-[#16171b]/98 border border-white/70 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.85),_8px_8px_20px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_12px_rgba(255,255,255,0.02),_8px_8px_24px_rgba(0,0,0,0.9)]":"bg-white/95 dark:bg-[#16171b]/95 border border-black/[0.06] dark:border-white/[0.08] shadow-[0_12px_36px_-6px_rgba(0,0,0,0.12),0_6px_16px_-4px_rgba(0,0,0,0.06)] dark:shadow-[0_16px_40px_-6px_rgba(0,0,0,0.7),0_8px_20px_-4px_rgba(0,0,0,0.5)]"}`,children:[jsxs("div",{className:`flex items-center justify-between px-4 py-3 border-b border-black/[0.06] dark:border-white/[0.06] ${d?"bg-[#eef1f6]/50 dark:bg-[#16171b]/50":"bg-neutral-50/70 dark:bg-[#131418]/70"}`,children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx("div",{className:"w-8 h-8 rounded-[10px] bg-primary/10 dark:bg-primary/20 text-primary flex items-center justify-center shadow-[-1px_-1px_3px_rgba(255,255,255,0.8),_1px_1px_3px_rgba(166,175,195,0.4)] dark:shadow-none",children:jsx(IconSparkles,{size:16,stroke:2.2})}),jsxs("div",{children:[jsx("h3",{className:"text-sm font-bold text-neutral-900 dark:text-neutral-100 leading-tight",children:"Diagram Templates"}),jsx("p",{className:"text-[10.5px] text-neutral-500 dark:text-neutral-400",children:"Pre-built starter kits with auto-adaptive theme styling"})]})]}),jsx("button",{type:"button",onClick:t,className:`w-7 h-7 rounded-[8px] flex items-center justify-center text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-all cursor-pointer ${d?"hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(166,175,195,0.3)]":"hover:bg-neutral-100 dark:hover:bg-neutral-800"}`,title:"Close templates flyout (Esc)",children:jsx(IconX,{size:14})})]}),jsxs("div",{className:"px-4 pt-3 pb-2 space-y-2 border-b border-black/[0.06] dark:border-white/[0.06]",children:[jsxs("div",{className:"relative",children:[jsx(IconSearch,{size:13,className:"absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-400"}),jsx("input",{type:"text",value:n,onChange:a=>p(a.target.value),placeholder:"Search templates...",className:`w-full h-8 pl-8 pr-3 text-xs rounded-[8px] border text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 outline-none focus:border-primary/50 transition-all ${d?"bg-[#e2e7ef] dark:bg-[#111215] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] border-neutral-300/80 dark:border-neutral-800":"bg-neutral-100/80 dark:bg-[#111215] border-neutral-200 dark:border-neutral-800 focus:bg-white dark:focus:bg-[#15161b]"}`})]}),jsx("div",{className:"flex items-center gap-1 overflow-x-auto scrollbar-none pb-0.5",children:ql.map(a=>jsx("button",{type:"button",onClick:()=>s(a),className:`px-2.5 py-1 rounded-[7px] text-[10.5px] font-semibold transition-all shrink-0 cursor-pointer ${h===a?d?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,1),_1.5px_1.5px_3px_rgba(166,175,195,0.55)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.06),_1.5px_1.5px_4px_rgba(0,0,0,0.8)]":"bg-primary/10 dark:bg-primary/25 text-primary dark:text-blue-300 border border-primary/30 font-bold":d?"text-neutral-600 dark:text-neutral-300 hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(166,175,195,0.3)]":"text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800/60"}`,children:a},a))})]}),jsx("div",{className:"flex-1 overflow-y-auto px-4 py-3 space-y-3 max-h-[55vh]",children:l.length===0?jsx("div",{className:"py-8 text-center text-xs text-neutral-400",children:"No templates match your search query."}):l.map(a=>jsxs("div",{className:`fk-template-card group relative flex flex-col rounded-[12px] p-3 transition-all duration-200 ${d?"bg-[#eef1f6] dark:bg-[#1a1c22] border border-white/80 dark:border-white/[0.05] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:shadow-[-3px_-3px_8px_rgba(255,255,255,0.95),_4px_4px_10px_rgba(166,175,195,0.5)]":"bg-white dark:bg-[#1a1c22] border border-neutral-200/80 dark:border-neutral-800/80 shadow-xs hover:shadow-md hover:border-primary/40 dark:hover:border-primary/40"}`,children:[jsxs("div",{className:"flex items-start gap-3",children:[jsx("div",{className:"w-28 h-20 rounded-[8px] bg-neutral-100/80 dark:bg-neutral-950/80 border border-black/[0.06] dark:border-white/[0.06] p-1.5 shrink-0 overflow-hidden flex items-center justify-center transition-transform duration-200 group-hover:scale-[1.02]",children:u(a.previewType)}),jsxs("div",{className:"flex-1 min-w-0",children:[jsxs("div",{className:"flex items-center gap-1.5 mb-1",children:[jsx("span",{className:`text-[9px] font-bold px-1.5 py-0.5 rounded-[4px] border ${a.tagColor}`,children:a.tag}),jsxs("span",{className:"text-[9.5px] text-neutral-400 font-mono",children:[a.elementsCount," items"]})]}),jsx("h4",{className:"text-xs font-bold text-neutral-900 dark:text-neutral-100 truncate group-hover:text-primary dark:group-hover:text-blue-200 transition-colors",children:a.title}),jsx("p",{className:"text-[10.5px] text-neutral-500 dark:text-neutral-400 line-clamp-2 mt-0.5 leading-tight",children:a.description})]})]}),jsxs("div",{className:"mt-2.5 pt-2 border-t border-black/[0.06] dark:border-white/[0.06] flex items-center justify-end gap-2",children:[o&&jsx("button",{type:"button",onClick:()=>{r(a.id,"replace"),t();},className:"px-2.5 py-1 text-[10.5px] font-semibold text-neutral-500 dark:text-neutral-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/30 rounded-[6px] transition-colors cursor-pointer",title:"Clear canvas and load this template",children:"Replace Canvas"}),jsxs("button",{type:"button",onClick:()=>{r(a.id,"append"),t();},className:`flex items-center gap-1 px-3 py-1 text-xs font-bold bg-primary text-primary-foreground rounded-[7px] active:scale-95 transition-all cursor-pointer ${d?"shadow-[-1px_-1px_3px_rgba(255,255,255,0.6),_2px_2px_6px_rgba(99,102,241,0.45)] hover:shadow-[-1px_-1px_4px_rgba(255,255,255,0.7),_2px_2px_8px_rgba(99,102,241,0.6)]":"shadow-xs hover:shadow-sm hover:brightness-105"}`,children:[jsx(IconPlus,{size:12,stroke:2.5}),jsx("span",{children:"Insert Template"})]})]})]},a.id))}),jsxs("div",{className:`px-4 py-2 border-t border-black/[0.06] dark:border-white/[0.06] flex items-center justify-between text-[10.5px] text-neutral-400 ${d?"bg-[#eef1f6]/50 dark:bg-[#16171b]/50":"bg-neutral-50/70 dark:bg-[#131418]/70"}`,children:[jsx("span",{children:"\u{1F4A1} Inserted at center of current view"}),jsx("span",{className:"font-mono text-[9.5px]",children:"Undo anytime with Ctrl+Z"})]})]})}function ii(e,t){let r=(t?.maxSizeMB??25)*1024*1024;return e.type.startsWith("image/")?e.size>r?(console.warn(`[Sketch] File "${e.name}" exceeds the maximum allowed size of ${t?.maxSizeMB??25} MB.`),[]):[e]:(console.warn(`[Sketch] Invalid file type: "${e.type}". Please select an image file.`),[])}var pd=({className:e,...t})=>jsx(IconSquare,{...t,className:`${e||""} rotate-45 scale-[0.75]`}),hd=({size:e=17,stroke:t=1.7,className:r})=>jsxs("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:[jsx("ellipse",{cx:"12",cy:"6",rx:"8",ry:"3"}),jsx("path",{d:"M4 6v12c0 1.657 3.582 3 8 3s8 -1.343 8 -3v-12"})]}),ud=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("path",{d:"M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.135 1.54 -3.906 3.61 -4.382c.394 -3.191 3.197 -5.635 6.447 -5.635c3.275 0 6.096 2.474 6.456 5.694c2.046 .505 3.544 2.261 3.544 4.372c0 2.476 -2.085 4.434 -4.657 4.434z"})}),xd=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("polygon",{points:"7,4 21,4 17,20 3,20"})}),fd=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("polygon",{points:"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"})}),bd=({size:e=17,stroke:t=1.7,className:r})=>jsxs("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:[jsx("line",{x1:"3",y1:"7",x2:"21",y2:"7"}),jsx("line",{x1:"3",y1:"17",x2:"21",y2:"17"}),jsx("line",{x1:"7",y1:"3",x2:"7",y2:"21"}),jsx("line",{x1:"17",y1:"3",x2:"17",y2:"21"})]}),gd=({size:e=17,stroke:t=1.7,className:r})=>jsxs("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:[jsx("path",{d:"M4 20l7 -7"}),jsx("path",{d:"M6 18l1.5 -1.5"}),jsx("path",{d:"M11 13l2.5 2.5l5.5 -5.5a2.121 2.121 0 0 0 -3 -3l-5 5"}),jsx("path",{d:"M18.5 5.5l1.5 -1.5"}),jsx("path",{d:"M21 7l1 -1"}),jsx("circle",{cx:"19",cy:"4",r:"0.8",fill:"currentColor"})]}),md=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("polygon",{points:"12 4 21 20 3 20"})}),yd=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("polygon",{points:"6 5 18 5 21 19 3 19"})}),kd=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("polygon",{points:"6 4 18 4 22 12 18 20 6 20 2 12"})}),wd=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("rect",{x:"3",y:"6",width:"18",height:"12",rx:"6"})}),vd=({size:e=17,stroke:t=1.7,className:r})=>jsxs("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:[jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"2.5"}),jsx("line",{x1:"3",y1:"10",x2:"21",y2:"10"}),jsx("line",{x1:"10",y1:"4",x2:"10",y2:"20"}),jsx("line",{x1:"16",y1:"10",x2:"16",y2:"20"})]}),To=[{type:"rectangle",label:"Rectangle (R or 3)",shortLabel:"Rect",icon:IconSquare,shortcut:"R",category:"basic",description:"Standard container & card box"},{type:"ellipse",label:"Ellipse / Circle (O or 4)",shortLabel:"Circle",icon:IconCircle,shortcut:"O",category:"basic",description:"Start/End terminals & circular nodes"},{type:"diamond",label:"Diamond (D or 5)",shortLabel:"Diamond",icon:pd,shortcut:"D",category:"basic",description:"Flowchart decision / conditional branching"},{type:"triangle",label:"Triangle (Y)",shortLabel:"Triangle",icon:md,shortcut:"Y",category:"basic",description:"3-sided triangular shape / warning node"},{type:"capsule",label:"Capsule / Stadium (B)",shortLabel:"Capsule",icon:wd,shortcut:"B",category:"basic",description:"Rounded pill / stadium terminal node"},{type:"parallelogram",label:"Parallelogram (G)",shortLabel:"Data",icon:xd,shortcut:"G",category:"flowchart",description:"Data input / output flowchart symbol"},{type:"trapezoid",label:"Trapezoid (Z)",shortLabel:"Trapezoid",icon:yd,shortcut:"Z",category:"flowchart",description:"Manual operation / trapezoid shape"},{type:"hexagon",label:"Hexagon (X)",shortLabel:"Hexagon",icon:kd,shortcut:"X",category:"flowchart",description:"Preparation / hexagonal process node"},{type:"cylinder",label:"Cylinder (C)",shortLabel:"Cylinder",icon:hd,shortcut:"C",category:"flowchart",description:"Database, storage & data repositories"},{type:"cloud",label:"Cloud (U)",shortLabel:"Cloud",icon:ud,shortcut:"U",category:"flowchart",description:"Cloud infrastructure, AWS/GCP, ideas"},{type:"star",label:"Star (J)",shortLabel:"Star",icon:fd,shortcut:"J",category:"flowchart",description:"Highlights, rating badges & milestones"}],_d=[{type:"select",label:"Select (V or 1)",shortLabel:"Select",icon:IconPointer,shortcut:"V"},{type:"frame",label:"Frame / Slide (F)",shortLabel:"Frame",icon:bd,shortcut:"F"},{type:"sticky",label:"Sticky Note (S or 0)",shortLabel:"Note",icon:IconNote,shortcut:"S"}],Sd=[{type:"arrow",label:"Arrow (A or 6)",shortLabel:"Arrow",icon:IconArrowUpRight,shortcut:"A"},{type:"line",label:"Line (L or 7)",shortLabel:"Line",icon:IconLine,shortcut:"L"},{type:"pen",label:"Freehand Pen (P or 8)",shortLabel:"Pen",icon:IconPencil,shortcut:"P"},{type:"text",label:"Text (T or 9)",shortLabel:"Text",icon:IconTypography,shortcut:"T"}],Cd=[{type:"eraser",label:"Eraser (E)",shortLabel:"Eraser",icon:IconEraser,shortcut:"E"},{type:"laser",label:"Laser Pointer (K)",shortLabel:"Laser",icon:gd,shortcut:"K"}];function Fn({uiConfig:e,tool:t,setTool:r,isToolLocked:o=false,setIsToolLocked:c,onInsertImage:d,onOpenTemplates:h,isTemplatesOpen:s=false,onOpenTechStencils:n,isTechStencilsOpen:p=false,onInsertTablePreset:i}){let l=e?.showSelectTool??true,u=e?.showShapeTools??true,a=e?.showDrawTool??true,x=e?.showArrowTool??true,m=e?.showLineTool??true,g=e?.showTextTool??true,w=e?.showStickyNoteTool??true,_=e?.showTableTool??true,S=e?.showImageUpload??true,E=e?.showTechStencils??true,z=e?.showTemplates??true,D=e?.showEraserTool??true,P=e?.showLaserTool??true,I=e?.showLockTool??true,b=e?.showPresentation??true,{panelVariant:f}=po(),v=f==="neumorphic",C=useRef(null),[M,R]=useState("rectangle"),[J,oe]=useState(false),A=useRef(null),[U,G]=useState(false),[Ne,ne]=useState({rows:3,cols:3}),le=useRef(null),ce=()=>{le.current&&(clearTimeout(le.current),le.current=null),G(true);},ke=()=>{le.current&&clearTimeout(le.current),le.current=setTimeout(()=>{G(false);},220);},Ie=()=>{C.current?.click();},we=O=>{let Z=O.target.files?.[0];if(Z){let Se=ii(Z,{});if(Se.length>0){let K=new FileReader;K.onload=de=>{let re=de.target?.result;re&&d&&d(re);},K.readAsDataURL(Se[0]);}}C.current&&(C.current.value="");},Ge=()=>{A.current&&(clearTimeout(A.current),A.current=null),oe(true);},Ue=()=>{A.current&&clearTimeout(A.current),A.current=setTimeout(()=>{oe(false);},220);};useEffect(()=>{let O=Z=>{if(Z.target instanceof HTMLInputElement||Z.target instanceof HTMLTextAreaElement||Z.target.isContentEditable||Z.ctrlKey||Z.metaKey||Z.altKey||Z.shiftKey)return;switch(Z.key.toLowerCase()){case "1":case "v":r("select");break;case "f":r("frame");break;case "0":case "s":r("sticky");break;case "3":case "r":r("rectangle");break;case "5":case "d":r("diamond");break;case "4":case "o":r("ellipse");break;case "y":r("triangle");break;case "b":r("capsule");break;case "z":r("trapezoid");break;case "x":r("hexagon");break;case "c":r("cylinder");break;case "u":r("cloud");break;case "g":r("parallelogram");break;case "2":case "h":r("hand");break;case "j":r("star");break;case "n":r("table");break;case "6":case "a":r("arrow");break;case "7":case "l":r("line");break;case "8":case "p":r("pen");break;case "9":case "t":r("text");break;case "e":r("eraser");break;case "k":r("laser");break;case "i":Ie();break;case "q":c?.(K=>!K);break;}};return window.addEventListener("keydown",O),()=>window.removeEventListener("keydown",O)},[r,c]);let ee=To.find(O=>O.type===M)||To[0],Pe=ee.icon,xe=To.some(O=>O.type===t);return jsxs("aside",{"aria-label":"Creation Toolbox",className:"fixed left-2.5 top-1/2 -translate-y-1/2 z-30 pointer-events-auto select-none",children:[jsx("input",{ref:C,type:"file",accept:"image/png,image/jpeg,image/webp,image/svg+xml,image/gif",className:"hidden",onChange:we}),jsxs("div",{className:`fk-card flex flex-col items-center gap-1 p-1 backdrop-blur-2xl rounded-[16px] transition-all ${v?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-4px_-4px_12px_rgba(255,255,255,0.85),_6px_6px_16px_rgba(166,175,195,0.45)] dark:shadow-[-3px_-3px_10px_rgba(255,255,255,0.02),_6px_6px_18px_rgba(0,0,0,0.85)]":"bg-white/95 dark:bg-[#16171b]/95 border border-black/[0.04] dark:border-white/[0.05] shadow-[0_10px_30px_-4px_rgba(0,0,0,0.08),0_4px_12px_-2px_rgba(0,0,0,0.03)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.65),0_4px_14px_-2px_rgba(0,0,0,0.45)]"}`,children:[z&&h&&jsx(Fragment,{children:jsxs("button",{type:"button","data-active":s?"true":void 0,onClick:h,title:"Diagram Templates & Starter Kits",className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${s?"fk-tool-active bg-primary text-white shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_5px_rgba(11,110,255,0.4)] scale-[1.05]":"text-primary dark:text-foreground hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(11,110,255,0.25)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:scale-95"}`,children:[jsxs("svg",{width:17,height:17,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:s?2:1.7,strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"}),jsx("path",{d:"M4 9h16"}),jsx("path",{d:"M9 4v16"})]}),jsx("span",{className:"sr-only",children:"Diagram Templates"}),jsx("span",{className:"absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-primary ring-1 ring-white dark:ring-neutral-900"})]})}),E&&n&&jsxs("button",{type:"button","data-active":p?"true":void 0,onClick:n,title:"Developer & Cloud Stencils (React, Node, Docker, AWS, Postgres, etc.)",className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${p?"fk-tool-active bg-primary text-white shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_5px_rgba(11,110,255,0.4)] scale-[1.05]":"text-primary dark:text-foreground hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(11,110,255,0.25)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:scale-95"}`,children:[jsx(IconBracketsContain,{size:17,stroke:p?2:1.7}),jsx("span",{className:"sr-only",children:"Developer Stencils"})]}),(z&&h||E&&n)&&jsx("div",{className:"w-5 h-[1px] bg-black/10 dark:bg-white/10 my-0.5"}),_d.filter(O=>O.type==="select"?l:O.type==="frame"?b:O.type==="sticky"?w:true).map(O=>{let Z=O.icon,Se=t===O.type;return jsxs("button",{type:"button","data-active":Se?"true":void 0,onClick:()=>r(O.type),title:O.label,className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${Se?"fk-tool-active bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)] scale-[1.05]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.8)] active:scale-95"}`,children:[jsx(Z,{size:17,stroke:Se?2:1.7}),jsx("span",{className:"sr-only",children:O.label}),jsx("span",{className:`absolute -bottom-0.5 -right-0.5 text-[6.5px] font-mono px-0.5 rounded-[2px] leading-none pointer-events-none opacity-0 group-hover:opacity-90 transition-opacity ${Se?"bg-primary/90 text-primary-foreground":"bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:O.shortcut})]},O.type)}),u&&jsxs("div",{className:"relative",onMouseEnter:Ge,onMouseLeave:Ue,children:[jsxs("button",{type:"button","data-active":xe?"true":void 0,onClick:()=>r(M),title:`Shape Tool: ${ee.label} (Hover to see all shapes)`,className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${xe?"fk-tool-active bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)] scale-[1.05]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.8)] active:scale-95"}`,children:[jsx(Pe,{size:17,stroke:xe?2:1.7}),jsx("span",{className:"sr-only",children:"Shapes Menu"}),jsx("span",{className:"absolute bottom-0.5 right-0.5 w-1 h-1 rounded-full bg-neutral-400 dark:bg-neutral-500 group-hover:bg-primary transition-colors"}),jsx("span",{className:`absolute -bottom-0.5 -right-0.5 text-[6.5px] font-mono px-0.5 rounded-[2px] leading-none pointer-events-none opacity-0 group-hover:opacity-90 transition-opacity ${xe?"bg-primary/90 text-primary-foreground":"bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:ee.shortcut})]}),J&&jsx("div",{className:"absolute left-full top-1/2 -translate-y-1/2 pl-3 z-50 animate-in fade-in zoom-in-95 duration-150",onMouseEnter:Ge,onMouseLeave:Ue,children:jsxs("div",{className:"w-56 p-2.5 rounded-[14px] bg-[#f7f9fc]/95 dark:bg-[#16171b]/95 backdrop-blur-2xl border border-white/80 dark:border-white/[0.08] shadow-[-6px_-6px_16px_rgba(255,255,255,0.9),_8px_8px_24px_rgba(166,175,195,0.55)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.03),_8px_8px_24px_rgba(0,0,0,0.9)]",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider px-1.5 mb-1.5",children:"Basic Shapes"}),jsx("div",{className:"grid grid-cols-3 gap-1 mb-2.5",children:To.filter(O=>O.category==="basic").map(O=>{let Z=O.icon,Se=t===O.type;return jsxs("button",{type:"button",onClick:()=>{r(O.type),R(O.type),oe(false);},title:`${O.label} - ${O.description}`,className:`flex flex-col items-center justify-center p-1.5 rounded-[9px] transition-all cursor-pointer group/item ${Se?"bg-primary text-primary-foreground shadow-sm font-semibold scale-[1.02]":"text-neutral-600 dark:text-neutral-300 hover:bg-neutral-200/70 dark:hover:bg-neutral-800/80 hover:text-neutral-900 dark:hover:text-white"}`,children:[jsx(Z,{size:18,stroke:Se?2:1.7}),jsx("span",{className:"text-[10px] mt-1 font-medium leading-none",children:O.shortLabel}),jsx("span",{className:"text-[8px] opacity-60 font-mono mt-0.5",children:O.shortcut})]},O.type)})}),jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider px-1.5 mb-1.5",children:"Flowchart & Cloud"}),jsx("div",{className:"grid grid-cols-2 gap-1.5",children:To.filter(O=>O.category==="flowchart").map(O=>{let Z=O.icon,Se=t===O.type;return jsxs("button",{type:"button",onClick:()=>{r(O.type),R(O.type),oe(false);},title:`${O.label} - ${O.description}`,className:`flex items-center gap-2 px-2 py-1.5 rounded-[9px] transition-all cursor-pointer text-left group/item ${Se?"bg-primary text-primary-foreground shadow-sm font-semibold scale-[1.02]":"text-neutral-600 dark:text-neutral-300 hover:bg-neutral-200/70 dark:hover:bg-neutral-800/80 hover:text-neutral-900 dark:hover:text-white"}`,children:[jsx("div",{className:"w-6 h-6 rounded-[6px] bg-neutral-200/60 dark:bg-neutral-800/60 flex items-center justify-center shrink-0 group-hover/item:scale-105 transition-transform",children:jsx(Z,{size:15,stroke:Se?2:1.7})}),jsxs("div",{className:"flex flex-col min-w-0 flex-1",children:[jsx("span",{className:"text-[11px] font-medium truncate leading-tight",children:O.shortLabel}),jsxs("span",{className:"text-[8px] opacity-60 font-mono",children:["Key: ",O.shortcut]})]})]},O.type)})})]})})]}),_&&jsxs("div",{className:"relative",onMouseEnter:ce,onMouseLeave:ke,children:[jsxs("button",{type:"button","data-active":t==="table"?"true":void 0,onClick:()=>r("table"),title:"Table & Grid Tool (N) - Hover for grid size picker & templates",className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${t==="table"?"fk-tool-active bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)] scale-[1.05]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:scale-95"}`,children:[jsx(vd,{size:17,stroke:t==="table"?2:1.7}),jsx("span",{className:"sr-only",children:"Table Tool"}),jsx("span",{className:"absolute bottom-0.5 right-0.5 w-1 h-1 rounded-full bg-neutral-400 dark:bg-neutral-500 group-hover:bg-primary transition-colors"}),jsx("span",{className:`absolute -bottom-0.5 -right-0.5 text-[6.5px] font-mono px-0.5 rounded-[2px] leading-none pointer-events-none opacity-0 group-hover:opacity-90 transition-opacity ${t==="table"?"bg-primary/90 text-primary-foreground":"bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:"N"})]}),U&&jsx("div",{className:"absolute left-full top-1/2 -translate-y-1/2 pl-3 z-50 animate-in fade-in zoom-in-95 duration-150",onMouseEnter:ce,onMouseLeave:ke,children:jsxs("div",{className:"w-56 p-3 rounded-[14px] bg-[#f7f9fc]/95 dark:bg-[#16171b]/95 backdrop-blur-2xl border border-white/80 dark:border-white/[0.08] shadow-[-6px_-6px_16px_rgba(255,255,255,0.9),_8px_8px_24px_rgba(166,175,195,0.55)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.03),_8px_8px_24px_rgba(0,0,0,0.9)]",children:[jsxs("div",{className:"flex items-center justify-between px-0.5 mb-2",children:[jsx("span",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:"Grid Size"}),jsxs("span",{className:"text-[11px] font-mono font-semibold text-primary",children:[Ne.rows," \xD7 ",Ne.cols]})]}),jsx("div",{className:"grid grid-cols-5 gap-1 p-1.5 rounded-[10px] bg-neutral-200/50 dark:bg-neutral-800/50 mb-3",onMouseLeave:()=>ne({rows:3,cols:3}),children:Array.from({length:5}).map((O,Z)=>Array.from({length:5}).map((Se,K)=>{let de=Z+1,re=K+1,T=de<=Ne.rows&&re<=Ne.cols;return jsx("button",{type:"button",onMouseEnter:()=>ne({rows:de,cols:re}),onClick:()=>{i?i("blank",de,re):r("table"),G(false);},className:`w-7 h-5 rounded-[4px] border transition-all cursor-pointer ${T?"bg-primary/80 border-primary shadow-xs":"bg-white/80 dark:bg-neutral-900/80 border-neutral-300/80 dark:border-neutral-700/80"}`},`${de}_${re}`)}))}),jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider px-0.5 mb-1.5",children:"Templates & Presets"}),jsx("div",{className:"flex flex-col gap-1",children:[{id:"blank",label:"Blank Grid (3 \xD7 3)",icon:"\u25A6",desc:"Empty table"},{id:"matrix",label:"Feature Matrix",icon:"\u{1F4CA}",desc:"4\xD73 pricing/features"},{id:"swot",label:"SWOT Matrix",icon:"\u{1F3AF}",desc:"2\xD72 strategic quadrants"},{id:"kanban",label:"Sprint Board",icon:"\u{1F4CB}",desc:"3 columns (To Do, Doing, Done)"}].map(O=>jsxs("button",{type:"button",onClick:()=>{let Z=O.id==="kanban"?"kanban":O.id==="matrix-2x2"?"matrix":"blank";i?.(Z),G(false);},className:"flex items-center gap-2 px-2 py-1.5 rounded-[8px] hover:bg-neutral-200/70 dark:hover:bg-neutral-800/80 text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white transition-colors text-left cursor-pointer group",children:[jsx("span",{className:"text-sm",children:O.icon}),jsxs("div",{className:"flex flex-col min-w-0 flex-1",children:[jsx("span",{className:"text-[11px] font-medium leading-tight",children:O.label}),jsx("span",{className:"text-[9px] text-neutral-400 dark:text-neutral-500 leading-tight",children:O.desc})]})]},O.id))})]})})]}),Sd.filter(O=>O.type==="arrow"?x:O.type==="line"?m:O.type==="pen"?a:O.type==="text"?g:true).map(O=>{let Z=O.icon,Se=t===O.type;return jsxs("button",{type:"button","data-active":Se?"true":void 0,onClick:()=>r(O.type),title:O.label,className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${Se?"fk-tool-active bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)] scale-[1.05]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.8)] active:scale-95"}`,children:[jsx(Z,{size:17,stroke:Se?2:1.7}),jsx("span",{className:"sr-only",children:O.label}),jsx("span",{className:`absolute -bottom-0.5 -right-0.5 text-[6.5px] font-mono px-0.5 rounded-[2px] leading-none pointer-events-none opacity-0 group-hover:opacity-90 transition-opacity ${Se?"bg-primary/90 text-primary-foreground":"bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:O.shortcut})]},O.type)}),S&&jsxs("button",{type:"button",onClick:Ie,title:"Insert Image from file (I)",className:"fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.8)] active:scale-95 cursor-pointer",children:[jsx(IconPhoto,{size:17,stroke:1.7}),jsx("span",{className:"sr-only",children:"Insert Image (I)"}),jsx("span",{className:"absolute -bottom-0.5 -right-0.5 text-[6.5px] font-mono px-0.5 rounded-[2px] leading-none pointer-events-none opacity-0 group-hover:opacity-90 transition-opacity bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300",children:"I"})]}),Cd.filter(O=>O.type==="eraser"?D:O.type==="laser"?P:true).map(O=>{let Z=O.icon,Se=t===O.type;return jsxs("button",{type:"button","data-active":Se?"true":void 0,onClick:()=>r(O.type),title:O.label,className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${Se?"fk-tool-active bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)] scale-[1.05]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.8)] active:scale-95"}`,children:[jsx(Z,{size:17,stroke:Se?2:1.7}),jsx("span",{className:"sr-only",children:O.label}),jsx("span",{className:`absolute -bottom-0.5 -right-0.5 text-[6.5px] font-mono px-0.5 rounded-[2px] leading-none pointer-events-none opacity-0 group-hover:opacity-90 transition-opacity ${Se?"bg-primary/90 text-primary-foreground":"bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:O.shortcut})]},O.type)}),I&&jsxs(Fragment,{children:[jsx("div",{className:"w-5 h-[1px] bg-black/10 dark:bg-white/10 my-0.5"}),jsxs("button",{type:"button","data-active":o?"true":void 0,onClick:()=>c?.(O=>!O),title:"Keep tool selected after drawing (Q)",className:`fk-tool-btn relative flex items-center justify-center w-8 h-7 rounded-[8px] transition-all duration-150 group cursor-pointer ${o?"fk-tool-active bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/40 shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,1),_1.5px_1.5px_3px_rgba(166,175,195,0.55)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.06),_1.5px_1.5px_4px_rgba(0,0,0,0.8)]":"text-neutral-400 dark:text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800"}`,children:[o?jsx(IconLock,{size:15,stroke:2}):jsx(IconLockOpen,{size:15,stroke:1.7}),jsx("span",{className:"sr-only",children:"Lock Tool (Q)"})]})]})]})]})}var Wd=[{style:"grid",label:"Mesh Grid (Default)",desc:"Graph paper squares"},{style:"dots",label:"Dots Grid",desc:"Matrix dots pattern"},{style:"cross",label:"Crosshairs",desc:"Architectural markers"},{style:"none",label:"Clean Canvas",desc:"No background grid"}];function Xn({boardName:e,setBoardName:t,onOpenExport:r,onOpenTemplates:o,onCopyImage:c,onClearBoard:d,elementCount:h,zoom:s,zoomIn:n,zoomOut:p,resetCamera:i,canUndo:l,canRedo:u,undo:a,redo:x,tool:m,setTool:g,gridStyle:w,setGridStyle:_,onExit:S,saveStatus:E="saved",onManualSave:z,onStartPresentation:D,hasFrames:P=false,frameCount:I=0,isFramesOutlineOpen:b=false,onToggleFramesOutline:f,onOpenTechStencils:v,isTechStencilsOpen:C=false,isSpotlightActive:M=false,onToggleSpotlight:R,uiConfig:J}){let oe=J?.showBoardName??true,A=J?.showExitButton??true,U=J?.showSaveIndicator??true,G=J?.showHistoryControls??true,Ne=(J?.showUndoButton??true)&&G,ne=(J?.showRedoButton??true)&&G,le=Ne||ne,ce=J?.showZoomControls??true,ke=(J?.showZoomOutButton??true)&&ce,Ie=(J?.showZoomInButton??true)&&ce,we=(J?.showZoomResetButton??true)&&ce,Ge=ke||Ie||we,Ue=J?.showHandTool??true,ee=J?.showGridSelector??true,Pe=J?.showFramesOutline??true,xe=J?.showPresentation??true,O=J?.showSpotlight??true,Z=J?.showCopyImage??true,Se=J?.showClearButton??true,K=J?.showExportMenu??true,de=J?.showTemplates??true,re=J?.showTechStencils??true,{resolvedTheme:T,isDark:L,panelVariant:q}=nr(),k=q==="neumorphic",[pe,V]=useState(false),[$,te]=useState(e),[fe,be]=useState(false),[ue,F]=useState(false),ve=Hn.useRef(null),ae=Hn.useRef(null),ze=()=>{t($.trim()||"Untitled Whiteboard"),V(false);};Hn.useEffect(()=>{let nt=et=>{ve.current&&!ve.current.contains(et.target)&&be(false),ae.current&&!ae.current.contains(et.target)&&F(false);};return (fe||ue)&&document.addEventListener("mousedown",nt),()=>{document.removeEventListener("mousedown",nt);}},[fe,ue]);let Le=m==="hand";return jsxs("header",{className:"fixed top-0 left-0 right-0 z-40 h-12 pointer-events-none flex items-center justify-between px-2.5 md:px-4",children:[jsxs("div",{className:"pointer-events-auto flex items-center gap-1.5",children:[A&&S&&jsx("button",{type:"button",onClick:S,className:`fk-btn h-8 w-8 flex items-center justify-center rounded-[9px] backdrop-blur-2xl transition-all cursor-pointer box-border active:scale-95 ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] text-neutral-700 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] hover:shadow-[-2px_-2px_7px_rgba(255,255,255,0.95),_3px_3px_8px_rgba(166,175,195,0.5)] active:shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.5),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:active:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]":"bg-white/95 dark:bg-[#16171b]/95 border border-black/[0.04] dark:border-white/[0.05] shadow-[0_1px_3px_rgba(0,0,0,0.06)] dark:shadow-[0_2px_5px_rgba(0,0,0,0.4)] text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,title:"Exit whiteboard",children:jsx(IconArrowLeft,{size:14,stroke:2})}),(oe||U)&&jsxs("div",{className:`fk-card h-8 flex items-center gap-2 px-2.5 backdrop-blur-2xl rounded-[9px] box-border transition-all ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-3px_-3px_8px_rgba(255,255,255,0.85),_4px_4px_10px_rgba(166,175,195,0.45)] dark:shadow-[-2px_-2px_6px_rgba(255,255,255,0.02),_4px_4px_12px_rgba(0,0,0,0.8)]":"bg-white/95 dark:bg-[#16171b]/95 border border-black/[0.04] dark:border-white/[0.05] shadow-[0_4px_16px_-2px_rgba(0,0,0,0.06),0_2px_4px_-1px_rgba(0,0,0,0.03)] dark:shadow-[0_4px_16px_-2px_rgba(0,0,0,0.5)]"}`,children:[jsxs("div",{title:"Sketch",className:"flex items-center gap-1.5 text-primary font-bold text-xs tracking-tight",children:[jsx(IconPencilMinus,{size:15,className:"text-primary"}),jsx("span",{className:"hidden min-[1700px]:inline font-semibold text-primary text-xs tracking-wide",children:"Sketch"})]}),oe&&jsxs(Fragment,{children:[jsx("div",{className:"hidden min-[1700px]:block w-[1px] h-3 bg-neutral-300 dark:bg-neutral-700/60"}),pe?jsxs("div",{className:"flex items-center gap-1",children:[jsx("input",{type:"text",value:$,onChange:nt=>te(nt.target.value),onBlur:ze,onKeyDown:nt=>{nt.key==="Enter"&&ze();},autoFocus:true,className:"text-xs font-medium px-2 py-0.5 border border-primary/50 rounded-[5px] bg-[#e2e7ef] dark:bg-[#111215] text-neutral-900 dark:text-neutral-100 shadow-[inset_1px_1px_2.5px_rgba(166,175,195,0.5),_inset_-1px_-1px_2.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.7),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] outline-none w-28 md:w-36"}),jsx("button",{type:"button",onClick:ze,className:"p-1 rounded-[5px] text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-950/40",children:jsx(IconCheck,{size:12,stroke:2.5})})]}):jsxs("button",{type:"button",onClick:()=>{te(e),V(true);},className:"flex items-center gap-1 text-xs font-medium text-neutral-700 dark:text-neutral-300 hover:text-primary dark:hover:text-blue-200 transition-colors group cursor-pointer",title:"Click to rename board",children:[jsx("span",{className:"max-w-[90px] sm:max-w-[130px] md:max-w-[160px] truncate",children:e}),jsx(IconChevronDown,{size:11,className:"text-neutral-400 group-hover:text-primary dark:group-hover:text-blue-200 transition-colors"})]})]}),U&&jsxs(Fragment,{children:[jsx("div",{className:"w-[1px] h-3 bg-neutral-300 dark:bg-neutral-700/60"}),E==="saving"?jsxs("span",{className:"h-5 flex items-center gap-1 text-[9.5px] font-semibold text-amber-600 dark:text-amber-400 bg-amber-500/10 px-1.5 rounded-[5px] animate-pulse select-none leading-none shadow-[inset_0.5px_0.5px_1.5px_rgba(245,158,11,0.2)]",title:"Saving changes to local storage...",children:[jsx(IconDeviceFloppy,{size:10,className:"animate-spin"}),jsx("span",{className:"hidden lg:inline",children:"Saving..."})]}):E==="unsaved"?jsxs("button",{type:"button",onClick:z,title:"Unsaved changes. Click or press Ctrl+S to save.",className:"h-5 flex items-center gap-1 text-[9.5px] font-semibold text-neutral-600 dark:text-neutral-400 hover:text-primary dark:hover:text-blue-200 bg-neutral-500/10 hover:bg-primary/10 px-1.5 rounded-[5px] transition-colors cursor-pointer leading-none",children:[jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-amber-500 shadow-[0_0_4px_rgba(245,158,11,0.6)]"}),jsx("span",{className:"hidden lg:inline",children:"Unsaved"})]}):jsxs("button",{type:"button",onClick:z,title:"All changes saved to local storage (Ctrl+S to save anytime)",className:"h-5 flex items-center gap-1 text-[9.5px] font-semibold text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20 px-1.5 rounded-[5px] transition-all cursor-pointer select-none leading-none shadow-[inset_0.5px_0.5px_1.5px_rgba(16,185,129,0.2)]",children:[jsx(IconCheck,{size:10,stroke:2.5}),jsx("span",{className:"hidden lg:inline",children:"Saved"})]})]})]})]}),(le||Ge||Ue)&&jsxs("div",{className:`fk-card pointer-events-auto absolute left-1/2 -translate-x-1/2 h-8 flex items-center gap-0.5 lg:px-1 px-0.5 backdrop-blur-2xl rounded-[9px] text-neutral-700 dark:text-neutral-300 box-border transition-all ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-3px_-3px_8px_rgba(255,255,255,0.85),_4px_4px_10px_rgba(166,175,195,0.45)] dark:shadow-[-2px_-2px_6px_rgba(255,255,255,0.02),_4px_4px_12px_rgba(0,0,0,0.8)]":"bg-white/95 dark:bg-[#16171b]/95 border border-neutral-200/90 dark:border-neutral-800 shadow-sm"}`,children:[le&&jsxs(Fragment,{children:[Ne&&jsx("button",{type:"button",onClick:a,disabled:!l,title:"Undo (Ctrl+Z)",className:"h-6.5 w-5 lg:w-6.5 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.7)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.9)] disabled:opacity-30 disabled:hover:shadow-none disabled:hover:bg-transparent transition-all cursor-pointer",children:jsx(IconArrowBackUp,{size:14})}),ne&&jsx("button",{type:"button",onClick:x,disabled:!u,title:"Redo (Ctrl+Y or Ctrl+Shift+Z)",className:"h-6.5 w-5 lg:w-6.5 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.7)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.9)] disabled:opacity-30 disabled:hover:shadow-none disabled:hover:bg-transparent transition-all cursor-pointer",children:jsx(IconArrowForwardUp,{size:14})})]}),le&&(Ge||Ue)&&jsx("div",{className:"w-[1px] h-3 bg-neutral-300 dark:bg-neutral-700/60 mx-0.5"}),Ge&&jsxs(Fragment,{children:[ke&&jsx("button",{type:"button",onClick:p,title:"Zoom Out",className:"h-6.5 w-5 lg:w-6.5 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.7)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.9)] transition-all cursor-pointer",children:jsx(IconMinus,{size:13})}),we&&jsxs("button",{type:"button",onClick:i,title:"Click to reset zoom to 100%",className:"h-6.5 px-1.5 flex items-center justify-center text-[11px] font-mono font-bold min-w-[38px] text-center rounded-[6px] text-neutral-700 dark:text-neutral-200 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.7)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.9)] transition-all cursor-pointer",children:[Math.round(s*100),"%"]}),Ie&&jsx("button",{type:"button",onClick:n,title:"Zoom In",className:"h-6.5 w-5 lg:w-6.5 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.7)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.9)] transition-all cursor-pointer",children:jsx(IconPlus,{size:13})})]}),Ge&&Ue&&jsx("div",{className:"w-[1px] h-3 bg-neutral-300 dark:bg-neutral-700/60 mx-0.5"}),Ue&&jsx("button",{type:"button",onClick:()=>g(Le?"select":"hand"),title:Le?"Pan Mode Active (H / Space)":"Switch to Hand/Pan Tool (H)",className:`h-6.5 w-5 lg:w-6.5 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${Le?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8)] scale-[1.04]":"text-neutral-600 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.7)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.9)]"}`,children:jsx(IconHandGrab,{size:14})})]}),jsxs("div",{className:"pointer-events-auto flex items-center gap-1.5",children:[ee&&jsxs("div",{className:"relative",ref:ve,children:[jsxs("button",{type:"button",onClick:()=>be(nt=>!nt),className:`fk-btn h-8 flex items-center gap-1 px-2 rounded-[9px] backdrop-blur-2xl text-neutral-700 dark:text-neutral-300 active:scale-95 transition-all cursor-pointer box-border ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] hover:shadow-[-2px_-2px_7px_rgba(255,255,255,0.95),_3px_3px_8px_rgba(166,175,195,0.5)]":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs hover:bg-neutral-50 dark:hover:bg-[#272a34]"} ${fe?k?"border-primary/40 bg-[#f0f3f8] dark:bg-[#20222a] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.5),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]":"border-primary/50 text-primary dark:text-blue-300 bg-primary/10 dark:bg-primary/20":""}`,title:"Choose canvas background grid style",children:[w==="dots"&&jsx(IconDots,{size:14,className:"text-primary"}),w==="grid"&&jsx(IconGridPattern,{size:14,className:"text-primary"}),w==="cross"&&jsx("span",{className:"font-mono text-[11px] font-bold px-0.5 text-primary dark:text-foreground",children:"+"}),w==="none"&&jsx("span",{className:"text-[9px] font-medium px-0.5 text-neutral-400",children:"Off"}),jsx(IconChevronDown,{size:10,className:`text-neutral-400 transition-transform duration-150 ${fe?"rotate-180":""}`})]}),fe&&jsxs("div",{className:`fk-card absolute right-0 top-full mt-2 w-52 backdrop-blur-2xl rounded-[14px] p-2 z-50 animate-in fade-in zoom-in-95 duration-150 select-none ${k?"bg-[#eef1f6]/98 dark:bg-[#16171b]/98 border border-white/70 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.85),_8px_8px_20px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_12px_rgba(255,255,255,0.02),_8px_8px_24px_rgba(0,0,0,0.9)]":"bg-white/95 dark:bg-[#16171b]/95 border border-black/[0.06] dark:border-white/[0.08] shadow-[0_12px_30px_-4px_rgba(0,0,0,0.12),0_4px_12px_-2px_rgba(0,0,0,0.06)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.7),0_4px_14px_-2px_rgba(0,0,0,0.5)]"}`,children:[jsxs("div",{className:"px-2 py-1 mb-1 border-b border-black/[0.06] dark:border-white/[0.06] flex items-center justify-between",children:[jsx("span",{className:"text-[9.5px] font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider",children:"Grid Background"}),jsx("span",{className:"text-[9px] font-mono text-neutral-400 dark:text-neutral-500",children:w==="grid"?"Default":w})]}),jsx("div",{className:"flex flex-col gap-1",children:Wd.map(nt=>{let et=w===nt.style;return jsxs("button",{type:"button",onClick:()=>{_(nt.style),be(false);},className:`flex items-center gap-2.5 p-1.5 rounded-[9px] text-left transition-all cursor-pointer ${et?k?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8)] font-semibold":"bg-primary/10 dark:bg-primary/25 text-primary dark:text-blue-300 border border-primary/25 dark:border-primary/30 font-semibold":k?"hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 text-neutral-700 dark:text-neutral-300 border border-transparent":"hover:bg-neutral-100 dark:hover:bg-neutral-800/70 text-neutral-700 dark:text-neutral-300 border border-transparent"}`,children:[nt.style==="dots"&&jsx("div",{className:"w-8 h-6 rounded-[5px] border border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-900 relative overflow-hidden flex items-center justify-center shrink-0",children:jsxs("svg",{className:"w-full h-full text-neutral-600 dark:text-neutral-300",xmlns:"http://www.w3.org/2000/svg",children:[jsx("pattern",{id:"grid-dots-preview-btn",width:"5",height:"5",patternUnits:"userSpaceOnUse",children:jsx("circle",{cx:"2.5",cy:"2.5",r:"0.8",fill:"currentColor"})}),jsx("rect",{width:"100%",height:"100%",fill:"url(#grid-dots-preview-btn)"})]})}),nt.style==="grid"&&jsx("div",{className:"w-8 h-6 rounded-[5px] border border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-900 relative overflow-hidden flex items-center justify-center shrink-0",children:jsxs("svg",{className:"w-full h-full text-neutral-600 dark:text-neutral-300",xmlns:"http://www.w3.org/2000/svg",children:[jsx("pattern",{id:"grid-mesh-preview-btn",width:"6",height:"6",patternUnits:"userSpaceOnUse",children:jsx("path",{d:"M 6 0 L 0 0 0 6",fill:"none",stroke:"currentColor",strokeWidth:"0.8"})}),jsx("rect",{width:"100%",height:"100%",fill:"url(#grid-mesh-preview-btn)"})]})}),nt.style==="cross"&&jsx("div",{className:"w-8 h-6 rounded-[5px] border border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-900 flex items-center justify-center shrink-0",children:jsx("span",{className:"font-mono text-[11px] font-bold text-neutral-600 dark:text-neutral-300 leading-none select-none",children:"+"})}),nt.style==="none"&&jsx("div",{className:"w-8 h-6 rounded-[5px] border border-dashed border-neutral-300 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50 flex items-center justify-center shrink-0",children:jsx("span",{className:"text-[8px] font-semibold text-neutral-400 uppercase tracking-wider",children:"Off"})}),jsxs("div",{className:"flex-1 min-w-0",children:[jsxs("div",{className:"flex items-center justify-between",children:[jsx("span",{className:"text-xs leading-tight",children:nt.label}),et&&jsx(IconCheck,{size:12,className:"text-primary stroke-[2.5]"})]}),jsx("span",{className:"text-[9.5px] text-neutral-400 block leading-tight",children:nt.desc})]})]},nt.style)})})]})]}),Pe&&f&&jsxs("button",{type:"button",onClick:f,className:`fk-btn h-8 hidden min-[1700px]:flex items-center gap-1.5 px-2.5 rounded-[9px] backdrop-blur-2xl text-xs font-medium text-neutral-700 dark:text-neutral-300 active:scale-95 transition-all cursor-pointer box-border ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] hover:shadow-[-2px_-2px_7px_rgba(255,255,255,0.95),_3px_3px_8px_rgba(166,175,195,0.5)]":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs hover:bg-neutral-50 dark:hover:bg-[#272a34]"}`,title:"Toggle Frames Presentation Outline (Alt+F)",children:[jsx(IconLayoutSidebar,{size:14,className:"text-primary"}),jsx("span",{children:"Outline"}),I>0&&jsx("span",{className:"px-1 py-0.2 rounded-[3px] bg-primary/15 text-[8.5px] font-mono font-bold text-primary dark:text-foreground",children:I})]}),xe&&D&&jsxs("button",{type:"button",onClick:D,disabled:!P,className:`fk-btn h-8 hidden min-[1700px]:flex items-center gap-1.5 px-2.5 rounded-[9px] backdrop-blur-2xl text-xs font-medium transition-all box-border ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)]":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs"} ${P?"text-primary dark:text-foreground hover:bg-neutral-50 dark:hover:bg-neutral-800/80 active:scale-95 cursor-pointer":"opacity-40 text-neutral-400 dark:text-neutral-500 cursor-not-allowed"}`,title:P?"Start Slideshow Presentation (Alt+P)":"Add frame elements to present",children:[jsx(IconPlayerPlay,{size:13,className:P?"text-primary":""}),jsx("span",{children:"Present"})]}),O&&R&&jsx("button",{type:"button",onClick:R,className:`fk-btn h-8 hidden min-[1700px]:flex items-center gap-1.5 px-2.5 rounded-[9px] backdrop-blur-2xl transition-all cursor-pointer box-border active:scale-95 ${M?"bg-amber-500/20 text-amber-600 dark:text-amber-400 border border-amber-500/40 font-semibold shadow-[inset_1.5px_1.5px_3px_rgba(245,158,11,0.3),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)]":k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] text-neutral-700 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] hover:text-amber-500":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-[#272a34] hover:text-amber-500"}`,title:"Spotlight / Focus Mode (Alt+S)",children:jsx(IconCurrentLocation,{size:14,className:"text-amber-500"})}),Z&&c&&jsxs("button",{type:"button",onClick:c,className:`fk-btn h-8 hidden min-[1720px]:flex items-center gap-1.5 px-2.5 rounded-[9px] backdrop-blur-2xl text-xs font-medium text-neutral-700 dark:text-neutral-300 active:scale-95 transition-all cursor-pointer box-border ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:bg-[#f0f3f8] dark:hover:bg-[#20222a]":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs hover:bg-neutral-50 dark:hover:bg-[#272a34]"}`,title:"Quick copy whole drawing or selected elements as image (Ctrl+Shift+C)",children:[jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-primary",children:[jsx("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),jsx("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]}),jsx("span",{children:"Copy Image"})]}),Se&&h>0&&jsxs("button",{type:"button",onClick:d,className:`fk-btn h-8 hidden min-[1700px]:flex items-center gap-1.5 px-2.5 rounded-[9px] backdrop-blur-2xl text-xs font-semibold text-rose-600 dark:text-rose-400 active:scale-95 transition-all cursor-pointer box-border ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:bg-rose-500/10":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs hover:bg-rose-50 dark:hover:bg-rose-950/30"}`,title:"Clear all whiteboard elements",children:[jsx(IconEraser,{size:13}),jsx("span",{children:"Clear"})]}),de&&o&&jsxs("button",{type:"button",onClick:o,className:"fk-btn h-8 hidden min-[1700px]:flex items-center gap-1.5 px-2.5 rounded-[9px] bg-linear-to-r from-primary/15 via-blue-500/15 to-sky-500/15 border border-primary/30 dark:border-primary/40 text-xs font-semibold text-primary dark:text-foreground backdrop-blur-2xl shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_8px_rgba(11,110,255,0.3)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:shadow-[-2px_-2px_7px_rgba(255,255,255,0.95),_3px_3px_10px_rgba(11,110,255,0.4)] active:scale-95 transition-all cursor-pointer box-border",title:"Diagram Templates & Starter Kits",children:[jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-primary",children:[jsx("path",{d:"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"}),jsx("path",{d:"M4 9h16"}),jsx("path",{d:"M9 4v16"})]}),jsx("span",{className:"px-1 py-0.2 rounded-[3px] bg-primary/15 text-[8.5px] font-mono font-bold text-primary dark:text-foreground",children:"5"})]}),(de&&!!o||re&&!!v||Pe&&!!f||xe&&!!D||O&&!!R||Z&&!!c||Se&&h>0)&&jsxs("div",{className:"relative flex min-[1700px]:hidden",ref:ae,children:[jsxs("button",{type:"button",onClick:()=>F(nt=>!nt),className:`h-8 flex items-center justify-center px-2 rounded-[9px] backdrop-blur-2xl text-neutral-700 dark:text-neutral-300 active:scale-95 transition-all cursor-pointer box-border ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:bg-[#f0f3f8] dark:hover:bg-[#20222a]":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs hover:bg-neutral-50 dark:hover:bg-[#272a34]"} ${ue?k?"border-primary/40 bg-[#f0f3f8] dark:bg-[#20222a] text-primary dark:text-foreground":"border-primary/50 text-primary dark:text-blue-300 bg-primary/10 dark:bg-primary/20":""}`,title:"More whiteboard tools and options",children:[jsx(IconSettingsBolt,{size:15}),jsx(IconChevronDown,{size:10,className:`ml-1 text-neutral-400 transition-transform duration-150 ${ue?"rotate-180":""}`})]}),ue&&jsxs("div",{className:`fk-card absolute right-0 top-full mt-2 w-56 backdrop-blur-2xl rounded-[14px] p-2 z-50 animate-in fade-in zoom-in-95 duration-150 select-none ${k?"bg-[#eef1f6]/98 dark:bg-[#16171b]/98 border border-white/70 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.85),_8px_8px_20px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_12px_rgba(255,255,255,0.02),_8px_8px_24px_rgba(0,0,0,0.9)]":"bg-white/95 dark:bg-[#16171b]/95 border border-black/[0.06] dark:border-white/[0.08] shadow-[0_12px_30px_-4px_rgba(0,0,0,0.12),0_4px_12px_-2px_rgba(0,0,0,0.06)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.7),0_4px_14px_-2px_rgba(0,0,0,0.5)]"}`,children:[jsx("div",{className:"px-2 py-1 mb-1 border-b border-black/[0.06] dark:border-white/[0.06] flex items-center justify-between",children:jsx("span",{className:"text-[9.5px] font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider",children:"Tools & Actions"})}),jsxs("div",{className:"flex flex-col gap-0.5",children:[de&&o&&jsxs("button",{type:"button",onClick:()=>{o(),F(false);},className:"flex items-center justify-between p-2 rounded-[9px] text-left hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] text-neutral-700 dark:text-neutral-200 transition-all cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-primary",children:[jsx("path",{d:"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"}),jsx("path",{d:"M4 9h16"}),jsx("path",{d:"M9 4v16"})]}),jsx("span",{className:"text-xs font-medium",children:"Starter Templates"})]}),jsx("span",{className:"px-1.5 py-0.2 rounded-[4px] bg-primary/15 text-[9px] font-mono font-bold text-primary dark:text-foreground",children:"5"})]}),re&&v&&jsxs("button",{type:"button",onClick:()=>{v(),F(false);},className:"flex items-center justify-between p-2 rounded-[9px] text-left hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] text-neutral-700 dark:text-neutral-200 transition-all cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(IconBracketsContain,{size:15,className:"text-primary"}),jsx("span",{className:"text-xs font-medium",children:"Tech Stencils"})]}),jsx("span",{className:"text-[9.5px] font-mono text-neutral-400",children:"Library"})]}),Pe&&f&&jsxs("button",{type:"button",onClick:()=>{f(),F(false);},className:"flex items-center justify-between p-2 rounded-[9px] text-left hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] text-neutral-700 dark:text-neutral-200 transition-all cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(IconLayoutSidebar,{size:15,className:"text-primary"}),jsx("span",{className:"text-xs font-medium",children:"Frames Outline"})]}),jsx("span",{className:"text-[9.5px] font-mono text-neutral-400",children:I>0?`${I} frame${I>1?"s":""}`:"Alt+F"})]}),xe&&D&&jsxs("button",{type:"button",onClick:()=>{P&&(D(),F(false));},disabled:!P,className:`flex items-center justify-between p-2 rounded-[9px] text-left transition-all ${P?"hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] text-primary dark:text-foreground cursor-pointer":"opacity-40 text-neutral-400 dark:text-neutral-500 cursor-not-allowed"}`,children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(IconPlayerPlay,{size:15,className:P?"text-primary":""}),jsx("span",{className:"text-xs font-medium",children:"Present Slideshow"})]}),jsx("span",{className:"text-[9.5px] font-mono text-neutral-400",children:"Alt+P"})]}),O&&R&&jsxs("button",{type:"button",onClick:()=>{R(),F(false);},className:"flex items-center justify-between p-2 rounded-[9px] text-left hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] text-neutral-700 dark:text-neutral-200 transition-all cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(IconCurrentLocation,{size:15,className:"text-amber-500"}),jsx("span",{className:"text-xs font-medium",children:"Spotlight Focus"})]}),jsx("span",{className:"text-[9.5px] font-mono text-neutral-400",children:"Alt+S"})]}),Z&&c&&jsxs("button",{type:"button",onClick:()=>{c(),F(false);},className:"flex items-center justify-between p-2 rounded-[9px] text-left hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] text-neutral-700 dark:text-neutral-200 transition-all cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-primary",children:[jsx("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),jsx("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]}),jsx("span",{className:"text-xs font-medium",children:"Copy as Image"})]}),jsx("span",{className:"text-[9.5px] font-mono text-neutral-400",children:"Ctrl+Shift+C"})]}),Se&&h>0&&jsxs(Fragment,{children:[jsx("div",{className:"my-1 border-t border-black/[0.06] dark:border-white/[0.06]"}),jsxs("button",{type:"button",onClick:()=>{d(),F(false);},className:"flex items-center justify-between p-2 rounded-[9px] text-left hover:bg-rose-500/10 text-rose-600 dark:text-rose-400 transition-all cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(IconEraser,{size:15}),jsx("span",{className:"text-xs font-medium",children:"Clear Canvas"})]}),jsx("span",{className:"text-[9.5px] font-mono opacity-80",children:"Reset"})]})]})]})]})]}),K&&jsxs("button",{type:"button",onClick:r,className:"h-8 flex items-center gap-1.5 px-3 rounded-[9px] bg-primary text-primary-foreground hover:bg-primary/90 text-xs font-semibold border border-primary/20 active:scale-95 transition-all cursor-pointer box-border shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),_inset_0_-1px_1.5px_rgba(0,0,0,0.25)] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",title:"Export drawing as PNG, SVG, JSON, PDF (Ctrl+E)",children:[jsx(IconDownload,{size:13,stroke:2.2}),jsx("span",{className:"hidden sm:inline",children:"Export"}),jsx(IconChevronDown,{size:10,className:"opacity-80",stroke:2.2})]})]})]})}var $o=class{listeners=new Map;on(t,r){this.listeners.has(t)||this.listeners.set(t,new Set);let o=this.listeners.get(t);return o.add(r),()=>{o.delete(r);}}emit(t,r){let o=this.listeners.get(t);o&&o.forEach(c=>{try{c(r);}catch(d){console.error(`[Sketch] Error in event listener for "${t}":`,d);}});}clear(){this.listeners.clear();}};var On=1;function Fd(e){let t=Date.now();return {version:On,id:e?.id||`doc_${Math.random().toString(36).slice(2,10)}`,name:e?.name||"Untitled Sketch",elements:e?.elements?[...e.elements]:[],canvasBackground:e?.canvasBackground||"#fcfcfd",gridStyle:e?.gridStyle||"grid",createdAt:e?.createdAt||t,updatedAt:t}}function Hd(e){return JSON.stringify(e,null,2)}function Yd(e){let t=JSON.parse(e);if(!t||typeof t!="object")throw new Error("[Sketch] Failed to parse document: expected an object.");let r=Array.isArray(t.elements)?t.elements:[];return {version:typeof t.version=="number"?t.version:On,id:typeof t.id=="string"?t.id:void 0,name:typeof t.name=="string"?t.name:"Untitled Sketch",elements:r,canvasBackground:typeof t.canvasBackground=="string"?t.canvasBackground:"#fcfcfd",gridStyle:t.gridStyle||"grid",createdAt:typeof t.createdAt=="number"?t.createdAt:Date.now(),updatedAt:Date.now()}}function jn(e){if(!e||typeof e!="object")return false;let t=e;return typeof t.version=="number"&&Array.isArray(t.elements)&&typeof t.name=="string"}var ui=.1,xi=5;function Gn(e={x:0,y:0,zoom:1}){let[t,r]=useState(e),o=useCallback(i=>({x:(i.x-t.x)/t.zoom,y:(i.y-t.y)/t.zoom}),[t]),c=useCallback(i=>({x:i.x*t.zoom+t.x,y:i.y*t.zoom+t.y}),[t]),d=useCallback((i,l)=>{r(u=>({...u,x:u.x+i,y:u.y+l}));},[]),h=useCallback((i,l)=>{r(u=>{let a=Math.min(xi,Math.max(ui,i));if(a===u.zoom)return u;let x=a/u.zoom,m=l.x-(l.x-u.x)*x,g=l.y-(l.y-u.y)*x;return {x:m,y:g,zoom:a}});},[]),s=useCallback(i=>{r(l=>{let u=Math.min(xi,Math.round((l.zoom+.15)*10)/10),a=i||{x:window.innerWidth/2,y:window.innerHeight/2},x=u/l.zoom;return {x:a.x-(a.x-l.x)*x,y:a.y-(a.y-l.y)*x,zoom:u}});},[]),n=useCallback(i=>{r(l=>{let u=Math.max(ui,Math.round((l.zoom-.15)*10)/10),a=i||{x:window.innerWidth/2,y:window.innerHeight/2},x=u/l.zoom;return {x:a.x-(a.x-l.x)*x,y:a.y-(a.y-l.y)*x,zoom:u}});},[]),p=useCallback(()=>{r({x:0,y:0,zoom:1});},[]);return {camera:t,setCamera:r,screenToWorld:o,worldToScreen:c,panBy:d,zoomAtPoint:h,zoomIn:s,zoomOut:n,resetCamera:p}}function zo(e,t,r){if(t.length<2)return e;let o=e.filter(s=>t.includes(s.id));if(o.length<2)return e;let c=o.map(s=>({el:s,bounds:bt(s)})),d=new Map;if(r==="left"){let s=Math.min(...c.map(n=>n.bounds.x));c.forEach(({el:n,bounds:p})=>{let i=s-p.x;d.set(n.id,{...n,x:n.x+i,points:n.points?.map(l=>({x:l.x+i,y:l.y}))});});}else if(r==="center"){let s=Math.min(...c.map(i=>i.bounds.x)),n=Math.max(...c.map(i=>i.bounds.x+i.bounds.width)),p=(s+n)/2;c.forEach(({el:i,bounds:l})=>{let u=l.x+l.width/2,a=p-u;d.set(i.id,{...i,x:i.x+a,points:i.points?.map(x=>({x:x.x+a,y:x.y}))});});}else if(r==="right"){let s=Math.max(...c.map(n=>n.bounds.x+n.bounds.width));c.forEach(({el:n,bounds:p})=>{let i=s-(p.x+p.width);d.set(n.id,{...n,x:n.x+i,points:n.points?.map(l=>({x:l.x+i,y:l.y}))});});}else if(r==="top"){let s=Math.min(...c.map(n=>n.bounds.y));c.forEach(({el:n,bounds:p})=>{let i=s-p.y;d.set(n.id,{...n,y:n.y+i,points:n.points?.map(l=>({x:l.x,y:l.y+i}))});});}else if(r==="middle"){let s=Math.min(...c.map(i=>i.bounds.y)),n=Math.max(...c.map(i=>i.bounds.y+i.bounds.height)),p=(s+n)/2;c.forEach(({el:i,bounds:l})=>{let u=l.y+l.height/2,a=p-u;d.set(i.id,{...i,y:i.y+a,points:i.points?.map(x=>({x:x.x,y:x.y+a}))});});}else if(r==="bottom"){let s=Math.max(...c.map(n=>n.bounds.y+n.bounds.height));c.forEach(({el:n,bounds:p})=>{let i=s-(p.y+p.height);d.set(n.id,{...n,y:n.y+i,points:n.points?.map(l=>({x:l.x,y:l.y+i}))});});}let h=e.map(s=>d.get(s.id)||s);return Ct(h)}function Bo(e,t,r){if(t.length<2)return e;let o=e.filter(s=>t.includes(s.id));if(o.length<2)return e;let c=o.map(s=>({el:s,bounds:bt(s)})),d=new Map;if(r==="horizontal"){c.sort((x,m)=>x.bounds.x-m.bounds.x);let s=c[0],n=c[c.length-1],p=n.bounds.x+n.bounds.width-s.bounds.x,i=c.reduce((x,m)=>x+m.bounds.width,0),u=Math.max(0,p-i)/(c.length-1),a=s.bounds.x;c.forEach((x,m)=>{if(m===0){a+=x.bounds.width+u;return}if(m===c.length-1)return;let g=a-x.bounds.x;d.set(x.el.id,{...x.el,x:x.el.x+g,points:x.el.points?.map(w=>({x:w.x+g,y:w.y}))}),a+=x.bounds.width+u;});}else if(r==="vertical"){c.sort((x,m)=>x.bounds.y-m.bounds.y);let s=c[0],n=c[c.length-1],p=n.bounds.y+n.bounds.height-s.bounds.y,i=c.reduce((x,m)=>x+m.bounds.height,0),u=Math.max(0,p-i)/(c.length-1),a=s.bounds.y;c.forEach((x,m)=>{if(m===0){a+=x.bounds.height+u;return}if(m===c.length-1)return;let g=a-x.bounds.y;d.set(x.el.id,{...x.el,y:x.el.y+g,points:x.el.points?.map(w=>({x:w.x,y:w.y+g}))}),a+=x.bounds.height+u;});}let h=e.map(s=>d.get(s.id)||s);return Ct(h)}function gi(e,t){let r={...e,...t};if(r.type==="text"){let o=t.text!==void 0&&t.text!==e.text,c=t.fontFamily!==void 0&&t.fontFamily!==e.fontFamily,d=t.fontSize!==void 0&&t.fontSize!==e.fontSize;if((o||c||d)&&t.width===void 0&&t.height===void 0&&r.text){let h=ro(r.text,r.fontSize||22,r.fontFamily),s=e.width;if(r.width=h.width,r.height=h.height,e.textAlign==="center"){let n=e.x+s/2;r.x=Math.round(n-h.width/2);}else if(e.textAlign==="right"){let n=e.x+s;r.x=Math.round(n-h.width);}}}return r}function Un(e=[]){let[t,r]=useState(e),[o,c]=useState([]),d=useMemo(()=>t.filter(I=>o.includes(I.id)),[t,o]),h=useMemo(()=>d.length===1?d[0]:null,[d]),s=useCallback(I=>{r(b=>[...b,I]);},[]),n=useCallback((I,b)=>{r(f=>{let v=f.map(C=>C.id===I?gi(C,b):C);return Ct(v)});},[]),p=useCallback(I=>{r(b=>{let f=b.map(v=>o.includes(v.id)?gi(v,I):v);return Ct(f)});},[o]),i=useCallback(()=>{r(I=>Gr(I,o)),c([]);},[o]),l=useCallback(()=>{if(o.length===0)return;let I=t.filter(M=>o.includes(M.id));if(I.length===0)return;let b=t.reduce((M,R)=>Math.max(M,R.zIndex??0),0),{clonedElements:f,newSelectedIds:v}=Er(I,{deltaX:24,deltaY:24,highestZ:b}),C=Ct([...t,...f]);r(C),c(v);},[t,o]),u=useCallback(()=>{if(o.length<2)return;let I=`grp_${Date.now()}_${Math.random().toString(36).substring(2,7)}`;r(b=>b.map(f=>{if(o.includes(f.id)){let v=f.groupIds||[];return {...f,groupIds:[...v,I]}}return f}));},[o]),a=useCallback(()=>{o.length!==0&&r(I=>{let b=new Set;return I.forEach(f=>{o.includes(f.id)&&f.groupIds&&f.groupIds.length>0&&b.add(f.groupIds[f.groupIds.length-1]);}),b.size===0?I:I.map(f=>{if(f.groupIds&&f.groupIds.length>0){let v=f.groupIds[f.groupIds.length-1];if(b.has(v)){let C=f.groupIds.slice(0,-1);return {...f,groupIds:C.length>0?C:void 0}}}return f})});},[o]),x=useCallback(()=>{o.length!==0&&r(I=>{let b=[...I].sort((M,R)=>(M.zIndex??0)-(R.zIndex??0)),f=b.filter(M=>!o.includes(M.id)),v=b.filter(M=>o.includes(M.id));return [...f,...v].map((M,R)=>({...M,zIndex:R+1}))});},[o]),m=useCallback(()=>{o.length!==0&&r(I=>{let b=[...I].sort((M,R)=>(M.zIndex??0)-(R.zIndex??0)),f=b.filter(M=>o.includes(M.id)),v=b.filter(M=>!o.includes(M.id));return [...f,...v].map((M,R)=>({...M,zIndex:R+1}))});},[o]),g=useCallback(()=>{o.length!==0&&r(I=>{let b=[...I].sort((f,v)=>(f.zIndex??0)-(v.zIndex??0));for(let f=b.length-2;f>=0;f--)if(o.includes(b[f].id)&&!o.includes(b[f+1].id)){let v=b[f];b[f]=b[f+1],b[f+1]=v;}return b.map((f,v)=>({...f,zIndex:v+1}))});},[o]),w=useCallback(()=>{o.length!==0&&r(I=>{let b=[...I].sort((f,v)=>(f.zIndex??0)-(v.zIndex??0));for(let f=1;f<b.length;f++)if(o.includes(b[f].id)&&!o.includes(b[f-1].id)){let v=b[f];b[f]=b[f-1],b[f-1]=v;}return b.map((f,v)=>({...f,zIndex:v+1}))});},[o]),_=useCallback((I,b=false)=>{c(f=>b?f.includes(I)?f.filter(v=>v!==I):[...f,I]:[I]);},[]),S=useCallback(I=>{c(I);},[]),E=useCallback(()=>{c([]);},[]),z=useCallback(I=>{r(I);},[]),D=useCallback(I=>{o.length<2||r(b=>zo(b,o,I));},[o]),P=useCallback(I=>{o.length<2||r(b=>Bo(b,o,I));},[o]);return {elements:t,setElements:r,setAllElements:z,selectedIds:o,setSelectedIds:c,selectedElements:d,singleSelectedElement:h,addElement:s,updateElement:n,updateSelectedElements:p,deleteSelectedElements:i,duplicateSelectedElements:l,groupSelectedElements:u,ungroupSelectedElements:a,alignSelectedElements:D,distributeSelectedElements:P,bringToFront:x,sendToBack:m,bringForward:g,sendBackward:w,selectElement:_,selectElements:S,clearSelection:E}}var Kn=50;function Vn(e=[]){let[t,r]=useState([e]),[o,c]=useState(0),d=useCallback(p=>{r(i=>{let l=i.slice(0,o+1);return l.push(p),l.length>Kn&&l.shift(),l}),c(i=>{let l=i+1;return l>=Kn?Kn-1:l});},[o]),h=useCallback(()=>{if(o>0){let p=o-1;return c(p),t[p]}return null},[o,t]),s=useCallback(()=>{if(o<t.length-1){let p=o+1;return c(p),t[p]}return null},[o,t]),n=useCallback((p=[])=>{r([p]),c(0);},[]);return {pushState:d,undo:h,redo:s,resetHistory:n,canUndo:o>0,canRedo:o<t.length-1}}var co=[{id:"starter-1",type:"rectangle",x:140,y:120,width:200,height:180,strokeColor:"#4f46e5",strokeWidth:2.5,strokeStyle:"solid",fillColor:"#e0e7ff",fillStyle:"hachure",opacity:1,zIndex:1},{id:"starter-1-text",type:"text",x:160,y:165,width:160,height:80,text:`Plan
|
|
119
|
+
${s.opp}`,fontSize:15,fontFamily:"comic",textAlign:"center",strokeColor:"#1e293b",strokeWidth:1,strokeStyle:"solid",fillColor:"#dcfce7",stickyColor:"#dcfce7",fillStyle:"solid",opacity:1,zIndex:6});});}return o}var Jl=["All","Brainstorming","Diagrams","Engineering","Agile & Planning"];function Dn({isOpen:e,onClose:t,onSelectTemplate:r,hasExistingElements:o=false}){let{panelVariant:c}=po(),d=c==="neumorphic",[h,s]=useState("All"),[n,p]=useState(""),i=useRef(null);if(useEffect(()=>{let a=x=>{x.key==="Escape"&&e&&t();};return window.addEventListener("keydown",a),()=>window.removeEventListener("keydown",a)},[e,t]),useEffect(()=>{let a=x=>{e&&i.current&&!i.current.contains(x.target)&&t();};return e&&document.addEventListener("mousedown",a),()=>{document.removeEventListener("mousedown",a);}},[e,t]),!e)return null;let l=Po.filter(a=>{let x=h==="All"||a.category===h,m=a.title.toLowerCase().includes(n.toLowerCase())||a.description.toLowerCase().includes(n.toLowerCase())||a.tag.toLowerCase().includes(n.toLowerCase());return x&&m}),u=a=>{switch(a){case "mindmap":return jsxs("svg",{className:"w-full h-full",viewBox:"0 0 200 110",fill:"none",children:[jsx("rect",{x:"75",y:"38",width:"50",height:"34",rx:"8",fill:"#4f46e5",fillOpacity:"0.15",stroke:"#4f46e5",strokeWidth:"1.5"}),jsx("circle",{cx:"100",cy:"55",r:"5",fill:"#4f46e5"}),jsx("path",{d:"M75 50 C50 50 45 25 25 25",stroke:"#0284c7",strokeWidth:"1.5",strokeDasharray:"3 3"}),jsx("rect",{x:"10",y:"15",width:"30",height:"18",rx:"4",fill:"#e0f2fe",stroke:"#0284c7",strokeWidth:"1"}),jsx("path",{d:"M125 50 C150 50 155 25 175 25",stroke:"#d97706",strokeWidth:"1.5",strokeDasharray:"3 3"}),jsx("rect",{x:"160",y:"15",width:"30",height:"18",rx:"4",fill:"#fef3c7",stroke:"#d97706",strokeWidth:"1"}),jsx("path",{d:"M75 60 C50 60 45 85 25 85",stroke:"#16a34a",strokeWidth:"1.5",strokeDasharray:"3 3"}),jsx("rect",{x:"10",y:"75",width:"30",height:"18",rx:"4",fill:"#dcfce7",stroke:"#16a34a",strokeWidth:"1"}),jsx("path",{d:"M125 60 C150 60 155 85 175 85",stroke:"#e11d48",strokeWidth:"1.5",strokeDasharray:"3 3"}),jsx("rect",{x:"160",y:"75",width:"30",height:"18",rx:"4",fill:"#ffe4e6",stroke:"#e11d48",strokeWidth:"1"})]});case "flowchart":return jsxs("svg",{className:"w-full h-full",viewBox:"0 0 200 110",fill:"none",children:[jsx("rect",{x:"70",y:"8",width:"60",height:"20",rx:"10",fill:"#d1fae5",stroke:"#059669",strokeWidth:"1.5"}),jsx("line",{x1:"100",y1:"28",x2:"100",y2:"40",stroke:"#64748b",strokeWidth:"1.5"}),jsx("polygon",{points:"100,42 125,58 100,74 75,58",fill:"#fef3c7",stroke:"#d97706",strokeWidth:"1.5"}),jsx("line",{x1:"125",y1:"58",x2:"150",y2:"58",stroke:"#16a34a",strokeWidth:"1.5"}),jsx("rect",{x:"150",y:"46",width:"40",height:"24",rx:"4",fill:"#dcfce7",stroke:"#16a34a",strokeWidth:"1.2"}),jsx("line",{x1:"75",y1:"58",x2:"50",y2:"58",stroke:"#dc2626",strokeWidth:"1.5"}),jsx("rect",{x:"10",y:"46",width:"40",height:"24",rx:"4",fill:"#fee2e2",stroke:"#dc2626",strokeWidth:"1.2"}),jsx("line",{x1:"100",y1:"74",x2:"100",y2:"86",stroke:"#64748b",strokeWidth:"1.5"}),jsx("rect",{x:"75",y:"86",width:"50",height:"18",rx:"4",fill:"#e0e7ff",stroke:"#4f46e5",strokeWidth:"1.2"})]});case "erd":return jsxs("svg",{className:"w-full h-full",viewBox:"0 0 200 110",fill:"none",children:[jsx("rect",{x:"12",y:"15",width:"65",height:"42",rx:"4",fill:"#ffffff",stroke:"#4f46e5",strokeWidth:"1.2"}),jsx("rect",{x:"12",y:"15",width:"65",height:"14",rx:"4",fill:"#4f46e5"}),jsx("line",{x1:"18",y1:"38",x2:"68",y2:"38",stroke:"#cbd5e1",strokeWidth:"1.5"}),jsx("line",{x1:"18",y1:"46",x2:"55",y2:"46",stroke:"#e2e8f0",strokeWidth:"1.5"}),jsx("rect",{x:"122",y:"15",width:"65",height:"42",rx:"4",fill:"#ffffff",stroke:"#059669",strokeWidth:"1.2"}),jsx("rect",{x:"122",y:"15",width:"65",height:"14",rx:"4",fill:"#059669"}),jsx("line",{x1:"128",y1:"38",x2:"178",y2:"38",stroke:"#cbd5e1",strokeWidth:"1.5"}),jsx("line",{x1:"128",y1:"46",x2:"165",y2:"46",stroke:"#e2e8f0",strokeWidth:"1.5"}),jsx("rect",{x:"122",y:"66",width:"65",height:"38",rx:"4",fill:"#ffffff",stroke:"#d97706",strokeWidth:"1.2"}),jsx("rect",{x:"122",y:"66",width:"65",height:"12",rx:"4",fill:"#d97706"}),jsx("path",{d:"M77 35 L122 35",stroke:"#4f46e5",strokeWidth:"1.5",strokeDasharray:"2 2"}),jsx("path",{d:"M155 57 L155 66",stroke:"#059669",strokeWidth:"1.5",strokeDasharray:"2 2"})]});case "kanban":return jsxs("svg",{className:"w-full h-full",viewBox:"0 0 200 110",fill:"none",children:[jsx("rect",{x:"10",y:"10",width:"55",height:"90",rx:"6",fill:"#f8fafc",stroke:"#cbd5e1",strokeWidth:"1",strokeDasharray:"3 2"}),jsx("rect",{x:"16",y:"16",width:"43",height:"8",rx:"2",fill:"#6366f1",fillOpacity:"0.3"}),jsx("rect",{x:"15",y:"30",width:"45",height:"24",rx:"3",fill:"#fef08a",stroke:"#ca8a04",strokeWidth:"0.8"}),jsx("rect",{x:"15",y:"58",width:"45",height:"24",rx:"3",fill:"#e0e7ff",stroke:"#4f46e5",strokeWidth:"0.8"}),jsx("rect",{x:"72",y:"10",width:"55",height:"90",rx:"6",fill:"#f8fafc",stroke:"#cbd5e1",strokeWidth:"1",strokeDasharray:"3 2"}),jsx("rect",{x:"78",y:"16",width:"43",height:"8",rx:"2",fill:"#d97706",fillOpacity:"0.3"}),jsx("rect",{x:"77",y:"30",width:"45",height:"24",rx:"3",fill:"#fbcfe8",stroke:"#db2777",strokeWidth:"0.8"}),jsx("rect",{x:"77",y:"58",width:"45",height:"24",rx:"3",fill:"#cffafe",stroke:"#0891b2",strokeWidth:"0.8"}),jsx("rect",{x:"135",y:"10",width:"55",height:"90",rx:"6",fill:"#f8fafc",stroke:"#cbd5e1",strokeWidth:"1",strokeDasharray:"3 2"}),jsx("rect",{x:"141",y:"16",width:"43",height:"8",rx:"2",fill:"#16a34a",fillOpacity:"0.3"}),jsx("rect",{x:"140",y:"30",width:"45",height:"24",rx:"3",fill:"#bbf7d0",stroke:"#16a34a",strokeWidth:"0.8"})]});case "journey":return jsxs("svg",{className:"w-full h-full",viewBox:"0 0 200 110",fill:"none",children:[jsx("rect",{x:"8",y:"8",width:"42",height:"94",rx:"4",fill:"#f5f3ff",stroke:"#8b5cf6",strokeWidth:"1",strokeDasharray:"2 2"}),jsx("rect",{x:"12",y:"14",width:"34",height:"22",rx:"2",fill:"#e0f2fe",stroke:"#0284c7",strokeWidth:"0.8"}),jsx("rect",{x:"12",y:"42",width:"34",height:"24",rx:"2",fill:"#fee2e2",stroke:"#dc2626",strokeWidth:"0.8"}),jsx("rect",{x:"12",y:"72",width:"34",height:"24",rx:"2",fill:"#dcfce7",stroke:"#16a34a",strokeWidth:"0.8"}),jsx("rect",{x:"55",y:"8",width:"42",height:"94",rx:"4",fill:"#f5f3ff",stroke:"#8b5cf6",strokeWidth:"1",strokeDasharray:"2 2"}),jsx("rect",{x:"59",y:"14",width:"34",height:"22",rx:"2",fill:"#e0f2fe",stroke:"#0284c7",strokeWidth:"0.8"}),jsx("rect",{x:"59",y:"42",width:"34",height:"24",rx:"2",fill:"#fee2e2",stroke:"#dc2626",strokeWidth:"0.8"}),jsx("rect",{x:"59",y:"72",width:"34",height:"24",rx:"2",fill:"#dcfce7",stroke:"#16a34a",strokeWidth:"0.8"}),jsx("rect",{x:"103",y:"8",width:"42",height:"94",rx:"4",fill:"#f5f3ff",stroke:"#8b5cf6",strokeWidth:"1",strokeDasharray:"2 2"}),jsx("rect",{x:"107",y:"14",width:"34",height:"22",rx:"2",fill:"#e0f2fe",stroke:"#0284c7",strokeWidth:"0.8"}),jsx("rect",{x:"107",y:"42",width:"34",height:"24",rx:"2",fill:"#fee2e2",stroke:"#dc2626",strokeWidth:"0.8"}),jsx("rect",{x:"107",y:"72",width:"34",height:"24",rx:"2",fill:"#dcfce7",stroke:"#16a34a",strokeWidth:"0.8"}),jsx("rect",{x:"150",y:"8",width:"42",height:"94",rx:"4",fill:"#f5f3ff",stroke:"#8b5cf6",strokeWidth:"1",strokeDasharray:"2 2"}),jsx("rect",{x:"154",y:"14",width:"34",height:"22",rx:"2",fill:"#e0f2fe",stroke:"#0284c7",strokeWidth:"0.8"}),jsx("rect",{x:"154",y:"42",width:"34",height:"24",rx:"2",fill:"#fee2e2",stroke:"#dc2626",strokeWidth:"0.8"}),jsx("rect",{x:"154",y:"72",width:"34",height:"24",rx:"2",fill:"#dcfce7",stroke:"#16a34a",strokeWidth:"0.8"})]})}};return jsxs("div",{ref:i,className:`fk-card fixed left-13 top-1/2 -translate-y-1/2 z-40 w-[420px] max-w-[calc(100vw-80px)] max-h-[85vh] flex flex-col backdrop-blur-2xl rounded-[20px] animate-in fade-in zoom-in-95 duration-200 select-none overflow-hidden ${d?"bg-[#eef1f6]/98 dark:bg-[#16171b]/98 border border-white/70 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.85),_8px_8px_20px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_12px_rgba(255,255,255,0.02),_8px_8px_24px_rgba(0,0,0,0.9)]":"bg-white/95 dark:bg-[#16171b]/95 border border-black/[0.06] dark:border-white/[0.08] shadow-[0_12px_36px_-6px_rgba(0,0,0,0.12),0_6px_16px_-4px_rgba(0,0,0,0.06)] dark:shadow-[0_16px_40px_-6px_rgba(0,0,0,0.7),0_8px_20px_-4px_rgba(0,0,0,0.5)]"}`,children:[jsxs("div",{className:`flex items-center justify-between px-4 py-3 border-b border-black/[0.06] dark:border-white/[0.06] ${d?"bg-[#eef1f6]/50 dark:bg-[#16171b]/50":"bg-neutral-50/70 dark:bg-[#131418]/70"}`,children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx("div",{className:"w-8 h-8 rounded-[10px] bg-primary/10 dark:bg-primary/20 text-primary flex items-center justify-center shadow-[-1px_-1px_3px_rgba(255,255,255,0.8),_1px_1px_3px_rgba(166,175,195,0.4)] dark:shadow-none",children:jsx(IconSparkles,{size:16,stroke:2.2})}),jsxs("div",{children:[jsx("h3",{className:"text-sm font-bold text-neutral-900 dark:text-neutral-100 leading-tight",children:"Diagram Templates"}),jsx("p",{className:"text-[10.5px] text-neutral-500 dark:text-neutral-400",children:"Pre-built starter kits with auto-adaptive theme styling"})]})]}),jsx("button",{type:"button",onClick:t,className:`w-7 h-7 rounded-[8px] flex items-center justify-center text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200 transition-all cursor-pointer ${d?"hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(166,175,195,0.3)]":"hover:bg-neutral-100 dark:hover:bg-neutral-800"}`,title:"Close templates flyout (Esc)",children:jsx(IconX,{size:14})})]}),jsxs("div",{className:"px-4 pt-3 pb-2 space-y-2 border-b border-black/[0.06] dark:border-white/[0.06]",children:[jsxs("div",{className:"relative",children:[jsx(IconSearch,{size:13,className:"absolute left-2.5 top-1/2 -translate-y-1/2 text-neutral-400"}),jsx("input",{type:"text",value:n,onChange:a=>p(a.target.value),placeholder:"Search templates...",className:`w-full h-8 pl-8 pr-3 text-xs rounded-[8px] border text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 outline-none focus:border-primary/50 transition-all ${d?"bg-[#e2e7ef] dark:bg-[#111215] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.45),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] border-neutral-300/80 dark:border-neutral-800":"bg-neutral-100/80 dark:bg-[#111215] border-neutral-200 dark:border-neutral-800 focus:bg-white dark:focus:bg-[#15161b]"}`})]}),jsx("div",{className:"flex items-center gap-1 overflow-x-auto scrollbar-none pb-0.5",children:Jl.map(a=>jsx("button",{type:"button",onClick:()=>s(a),className:`px-2.5 py-1 rounded-[7px] text-[10.5px] font-semibold transition-all shrink-0 cursor-pointer ${h===a?d?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,1),_1.5px_1.5px_3px_rgba(166,175,195,0.55)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.06),_1.5px_1.5px_4px_rgba(0,0,0,0.8)]":"bg-primary/10 dark:bg-primary/25 text-primary dark:text-blue-300 border border-primary/30 font-bold":d?"text-neutral-600 dark:text-neutral-300 hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1px_-1px_2px_rgba(255,255,255,0.8),_1px_1px_2px_rgba(166,175,195,0.3)]":"text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800/60"}`,children:a},a))})]}),jsx("div",{className:"flex-1 overflow-y-auto px-4 py-3 space-y-3 max-h-[55vh]",children:l.length===0?jsx("div",{className:"py-8 text-center text-xs text-neutral-400",children:"No templates match your search query."}):l.map(a=>jsxs("div",{className:`fk-template-card group relative flex flex-col rounded-[12px] p-3 transition-all duration-200 ${d?"bg-[#eef1f6] dark:bg-[#1a1c22] border border-white/80 dark:border-white/[0.05] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:shadow-[-3px_-3px_8px_rgba(255,255,255,0.95),_4px_4px_10px_rgba(166,175,195,0.5)]":"bg-white dark:bg-[#1a1c22] border border-neutral-200/80 dark:border-neutral-800/80 shadow-xs hover:shadow-md hover:border-primary/40 dark:hover:border-primary/40"}`,children:[jsxs("div",{className:"flex items-start gap-3",children:[jsx("div",{className:"w-28 h-20 rounded-[8px] bg-neutral-100/80 dark:bg-neutral-950/80 border border-black/[0.06] dark:border-white/[0.06] p-1.5 shrink-0 overflow-hidden flex items-center justify-center transition-transform duration-200 group-hover:scale-[1.02]",children:u(a.previewType)}),jsxs("div",{className:"flex-1 min-w-0",children:[jsxs("div",{className:"flex items-center gap-1.5 mb-1",children:[jsx("span",{className:`text-[9px] font-bold px-1.5 py-0.5 rounded-[4px] border ${a.tagColor}`,children:a.tag}),jsxs("span",{className:"text-[9.5px] text-neutral-400 font-mono",children:[a.elementsCount," items"]})]}),jsx("h4",{className:"text-xs font-bold text-neutral-900 dark:text-neutral-100 truncate group-hover:text-primary dark:group-hover:text-blue-200 transition-colors",children:a.title}),jsx("p",{className:"text-[10.5px] text-neutral-500 dark:text-neutral-400 line-clamp-2 mt-0.5 leading-tight",children:a.description})]})]}),jsxs("div",{className:"mt-2.5 pt-2 border-t border-black/[0.06] dark:border-white/[0.06] flex items-center justify-end gap-2",children:[o&&jsx("button",{type:"button",onClick:()=>{r(a.id,"replace"),t();},className:"px-2.5 py-1 text-[10.5px] font-semibold text-neutral-500 dark:text-neutral-400 hover:text-rose-600 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-950/30 rounded-[6px] transition-colors cursor-pointer",title:"Clear canvas and load this template",children:"Replace Canvas"}),jsxs("button",{type:"button",onClick:()=>{r(a.id,"append"),t();},className:`flex items-center gap-1 px-3 py-1 text-xs font-bold bg-primary text-primary-foreground rounded-[7px] active:scale-95 transition-all cursor-pointer ${d?"shadow-[-1px_-1px_3px_rgba(255,255,255,0.6),_2px_2px_6px_rgba(99,102,241,0.45)] hover:shadow-[-1px_-1px_4px_rgba(255,255,255,0.7),_2px_2px_8px_rgba(99,102,241,0.6)]":"shadow-xs hover:shadow-sm hover:brightness-105"}`,children:[jsx(IconPlus,{size:12,stroke:2.5}),jsx("span",{children:"Insert Template"})]})]})]},a.id))}),jsxs("div",{className:`px-4 py-2 border-t border-black/[0.06] dark:border-white/[0.06] flex items-center justify-between text-[10.5px] text-neutral-400 ${d?"bg-[#eef1f6]/50 dark:bg-[#16171b]/50":"bg-neutral-50/70 dark:bg-[#131418]/70"}`,children:[jsx("span",{children:"\u{1F4A1} Inserted at center of current view"}),jsx("span",{className:"font-mono text-[9.5px]",children:"Undo anytime with Ctrl+Z"})]})]})}function ai(e,t){let r=(t?.maxSizeMB??25)*1024*1024;return e.type.startsWith("image/")?e.size>r?(console.warn(`[Sketch] File "${e.name}" exceeds the maximum allowed size of ${t?.maxSizeMB??25} MB.`),[]):[e]:(console.warn(`[Sketch] Invalid file type: "${e.type}". Please select an image file.`),[])}var hd=({className:e,...t})=>jsx(IconSquare,{...t,className:`${e||""} rotate-45 scale-[0.75]`}),ud=({size:e=17,stroke:t=1.7,className:r})=>jsxs("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:[jsx("ellipse",{cx:"12",cy:"6",rx:"8",ry:"3"}),jsx("path",{d:"M4 6v12c0 1.657 3.582 3 8 3s8 -1.343 8 -3v-12"})]}),xd=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("path",{d:"M6.657 18c-2.572 0 -4.657 -2.007 -4.657 -4.483c0 -2.135 1.54 -3.906 3.61 -4.382c.394 -3.191 3.197 -5.635 6.447 -5.635c3.275 0 6.096 2.474 6.456 5.694c2.046 .505 3.544 2.261 3.544 4.372c0 2.476 -2.085 4.434 -4.657 4.434z"})}),fd=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("polygon",{points:"7,4 21,4 17,20 3,20"})}),bd=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("polygon",{points:"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"})}),gd=({size:e=17,stroke:t=1.7,className:r})=>jsxs("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:[jsx("line",{x1:"3",y1:"7",x2:"21",y2:"7"}),jsx("line",{x1:"3",y1:"17",x2:"21",y2:"17"}),jsx("line",{x1:"7",y1:"3",x2:"7",y2:"21"}),jsx("line",{x1:"17",y1:"3",x2:"17",y2:"21"})]}),md=({size:e=17,stroke:t=1.7,className:r})=>jsxs("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:[jsx("path",{d:"M4 20l7 -7"}),jsx("path",{d:"M6 18l1.5 -1.5"}),jsx("path",{d:"M11 13l2.5 2.5l5.5 -5.5a2.121 2.121 0 0 0 -3 -3l-5 5"}),jsx("path",{d:"M18.5 5.5l1.5 -1.5"}),jsx("path",{d:"M21 7l1 -1"}),jsx("circle",{cx:"19",cy:"4",r:"0.8",fill:"currentColor"})]}),yd=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("polygon",{points:"12 4 21 20 3 20"})}),kd=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("polygon",{points:"6 5 18 5 21 19 3 19"})}),wd=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("polygon",{points:"6 4 18 4 22 12 18 20 6 20 2 12"})}),vd=({size:e=17,stroke:t=1.7,className:r})=>jsx("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:jsx("rect",{x:"3",y:"6",width:"18",height:"12",rx:"6"})}),_d=({size:e=17,stroke:t=1.7,className:r})=>jsxs("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:t,strokeLinecap:"round",strokeLinejoin:"round",className:r,children:[jsx("rect",{x:"3",y:"4",width:"18",height:"16",rx:"2.5"}),jsx("line",{x1:"3",y1:"10",x2:"21",y2:"10"}),jsx("line",{x1:"10",y1:"4",x2:"10",y2:"20"}),jsx("line",{x1:"16",y1:"10",x2:"16",y2:"20"})]}),To=[{type:"rectangle",label:"Rectangle (R or 3)",shortLabel:"Rect",icon:IconSquare,shortcut:"R",category:"basic",description:"Standard container & card box"},{type:"ellipse",label:"Ellipse / Circle (O or 4)",shortLabel:"Circle",icon:IconCircle,shortcut:"O",category:"basic",description:"Start/End terminals & circular nodes"},{type:"diamond",label:"Diamond (D or 5)",shortLabel:"Diamond",icon:hd,shortcut:"D",category:"basic",description:"Flowchart decision / conditional branching"},{type:"triangle",label:"Triangle (Y)",shortLabel:"Triangle",icon:yd,shortcut:"Y",category:"basic",description:"3-sided triangular shape / warning node"},{type:"capsule",label:"Capsule / Stadium (B)",shortLabel:"Capsule",icon:vd,shortcut:"B",category:"basic",description:"Rounded pill / stadium terminal node"},{type:"parallelogram",label:"Parallelogram (G)",shortLabel:"Data",icon:fd,shortcut:"G",category:"flowchart",description:"Data input / output flowchart symbol"},{type:"trapezoid",label:"Trapezoid (Z)",shortLabel:"Trapezoid",icon:kd,shortcut:"Z",category:"flowchart",description:"Manual operation / trapezoid shape"},{type:"hexagon",label:"Hexagon (X)",shortLabel:"Hexagon",icon:wd,shortcut:"X",category:"flowchart",description:"Preparation / hexagonal process node"},{type:"cylinder",label:"Cylinder (C)",shortLabel:"Cylinder",icon:ud,shortcut:"C",category:"flowchart",description:"Database, storage & data repositories"},{type:"cloud",label:"Cloud (U)",shortLabel:"Cloud",icon:xd,shortcut:"U",category:"flowchart",description:"Cloud infrastructure, AWS/GCP, ideas"},{type:"star",label:"Star (J)",shortLabel:"Star",icon:bd,shortcut:"J",category:"flowchart",description:"Highlights, rating badges & milestones"}],Sd=[{type:"select",label:"Select (V or 1)",shortLabel:"Select",icon:IconPointer,shortcut:"V"},{type:"frame",label:"Frame / Slide (F)",shortLabel:"Frame",icon:gd,shortcut:"F"},{type:"sticky",label:"Sticky Note (S or 0)",shortLabel:"Note",icon:IconNote,shortcut:"S"}],Cd=[{type:"arrow",label:"Arrow (A or 6)",shortLabel:"Arrow",icon:IconArrowUpRight,shortcut:"A"},{type:"line",label:"Line (L or 7)",shortLabel:"Line",icon:IconLine,shortcut:"L"},{type:"pen",label:"Freehand Pen (P or 8)",shortLabel:"Pen",icon:IconPencil,shortcut:"P"},{type:"text",label:"Text (T or 9)",shortLabel:"Text",icon:IconTypography,shortcut:"T"}],Md=[{type:"eraser",label:"Eraser (E)",shortLabel:"Eraser",icon:IconEraser,shortcut:"E"},{type:"laser",label:"Laser Pointer (K)",shortLabel:"Laser",icon:md,shortcut:"K"}];function Fn({uiConfig:e,tool:t,setTool:r,isToolLocked:o=false,setIsToolLocked:c,onInsertImage:d,onOpenTemplates:h,isTemplatesOpen:s=false,onOpenTechStencils:n,isTechStencilsOpen:p=false,onInsertTablePreset:i}){let l=e?.showSelectTool??true,u=e?.showShapeTools??true,a=e?.showDrawTool??true,x=e?.showArrowTool??true,m=e?.showLineTool??true,g=e?.showTextTool??true,w=e?.showStickyNoteTool??true,_=e?.showTableTool??true,S=e?.showImageUpload??true,E=e?.showTechStencils??true,z=e?.showTemplates??true,D=e?.showEraserTool??true,P=e?.showLaserTool??true,I=e?.showLockTool??true,b=e?.showPresentation??true,{panelVariant:f}=po(),v=f==="neumorphic",C=useRef(null),[M,R]=useState("rectangle"),[J,oe]=useState(false),A=useRef(null),[U,G]=useState(false),[Ne,ne]=useState({rows:3,cols:3}),le=useRef(null),ce=()=>{le.current&&(clearTimeout(le.current),le.current=null),G(true);},ke=()=>{le.current&&clearTimeout(le.current),le.current=setTimeout(()=>{G(false);},220);},Ie=()=>{C.current?.click();},we=O=>{let Z=O.target.files?.[0];if(Z){let Se=ai(Z,{});if(Se.length>0){let K=new FileReader;K.onload=de=>{let re=de.target?.result;re&&d&&d(re);},K.readAsDataURL(Se[0]);}}C.current&&(C.current.value="");},Ge=()=>{A.current&&(clearTimeout(A.current),A.current=null),oe(true);},Ue=()=>{A.current&&clearTimeout(A.current),A.current=setTimeout(()=>{oe(false);},220);};useEffect(()=>{let O=Z=>{if(Z.target instanceof HTMLInputElement||Z.target instanceof HTMLTextAreaElement||Z.target.isContentEditable||Z.ctrlKey||Z.metaKey||Z.altKey||Z.shiftKey)return;switch(Z.key.toLowerCase()){case "1":case "v":r("select");break;case "f":r("frame");break;case "0":case "s":r("sticky");break;case "3":case "r":r("rectangle");break;case "5":case "d":r("diamond");break;case "4":case "o":r("ellipse");break;case "y":r("triangle");break;case "b":r("capsule");break;case "z":r("trapezoid");break;case "x":r("hexagon");break;case "c":r("cylinder");break;case "u":r("cloud");break;case "g":r("parallelogram");break;case "2":case "h":r("hand");break;case "j":r("star");break;case "n":r("table");break;case "6":case "a":r("arrow");break;case "7":case "l":r("line");break;case "8":case "p":r("pen");break;case "9":case "t":r("text");break;case "e":r("eraser");break;case "k":r("laser");break;case "i":Ie();break;case "q":c?.(K=>!K);break;}};return window.addEventListener("keydown",O),()=>window.removeEventListener("keydown",O)},[r,c]);let ee=To.find(O=>O.type===M)||To[0],Pe=ee.icon,xe=To.some(O=>O.type===t);return jsxs("aside",{"aria-label":"Creation Toolbox",className:"fixed left-2.5 top-1/2 -translate-y-1/2 z-30 pointer-events-auto select-none",children:[jsx("input",{ref:C,type:"file",accept:"image/png,image/jpeg,image/webp,image/svg+xml,image/gif",className:"hidden",onChange:we}),jsxs("div",{className:`fk-card flex flex-col items-center gap-1 p-1 backdrop-blur-2xl rounded-[16px] transition-all ${v?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-4px_-4px_12px_rgba(255,255,255,0.85),_6px_6px_16px_rgba(166,175,195,0.45)] dark:shadow-[-3px_-3px_10px_rgba(255,255,255,0.02),_6px_6px_18px_rgba(0,0,0,0.85)]":"bg-white/95 dark:bg-[#16171b]/95 border border-black/[0.04] dark:border-white/[0.05] shadow-[0_10px_30px_-4px_rgba(0,0,0,0.08),0_4px_12px_-2px_rgba(0,0,0,0.03)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.65),0_4px_14px_-2px_rgba(0,0,0,0.45)]"}`,children:[z&&h&&jsx(Fragment,{children:jsxs("button",{type:"button","data-active":s?"true":void 0,onClick:h,title:"Diagram Templates & Starter Kits",className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${s?"fk-tool-active bg-primary text-white shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_5px_rgba(11,110,255,0.4)] scale-[1.05]":"text-primary dark:text-foreground hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(11,110,255,0.25)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:scale-95"}`,children:[jsxs("svg",{width:17,height:17,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:s?2:1.7,strokeLinecap:"round",strokeLinejoin:"round",children:[jsx("path",{d:"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"}),jsx("path",{d:"M4 9h16"}),jsx("path",{d:"M9 4v16"})]}),jsx("span",{className:"sr-only",children:"Diagram Templates"}),jsx("span",{className:"absolute -top-0.5 -right-0.5 w-1.5 h-1.5 rounded-full bg-primary ring-1 ring-white dark:ring-neutral-900"})]})}),E&&n&&jsxs("button",{type:"button","data-active":p?"true":void 0,onClick:n,title:"Developer & Cloud Stencils (React, Node, Docker, AWS, Postgres, etc.)",className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${p?"fk-tool-active bg-primary text-white shadow-[-2px_-2px_4px_rgba(255,255,255,0.9),_2px_2px_5px_rgba(11,110,255,0.4)] scale-[1.05]":"text-primary dark:text-foreground hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(11,110,255,0.25)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:scale-95"}`,children:[jsx(IconBracketsContain,{size:17,stroke:p?2:1.7}),jsx("span",{className:"sr-only",children:"Developer Stencils"})]}),(z&&h||E&&n)&&jsx("div",{className:"w-5 h-[1px] bg-black/10 dark:bg-white/10 my-0.5"}),Sd.filter(O=>O.type==="select"?l:O.type==="frame"?b:O.type==="sticky"?w:true).map(O=>{let Z=O.icon,Se=t===O.type;return jsxs("button",{type:"button","data-active":Se?"true":void 0,onClick:()=>r(O.type),title:O.label,className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${Se?"fk-tool-active bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)] scale-[1.05]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.8)] active:scale-95"}`,children:[jsx(Z,{size:17,stroke:Se?2:1.7}),jsx("span",{className:"sr-only",children:O.label}),jsx("span",{className:`absolute -bottom-0.5 -right-0.5 text-[6.5px] font-mono px-0.5 rounded-[2px] leading-none pointer-events-none opacity-0 group-hover:opacity-90 transition-opacity ${Se?"bg-primary/90 text-primary-foreground":"bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:O.shortcut})]},O.type)}),u&&jsxs("div",{className:"relative",onMouseEnter:Ge,onMouseLeave:Ue,children:[jsxs("button",{type:"button","data-active":xe?"true":void 0,onClick:()=>r(M),title:`Shape Tool: ${ee.label} (Hover to see all shapes)`,className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${xe?"fk-tool-active bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)] scale-[1.05]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.8)] active:scale-95"}`,children:[jsx(Pe,{size:17,stroke:xe?2:1.7}),jsx("span",{className:"sr-only",children:"Shapes Menu"}),jsx("span",{className:"absolute bottom-0.5 right-0.5 w-1 h-1 rounded-full bg-neutral-400 dark:bg-neutral-500 group-hover:bg-primary transition-colors"}),jsx("span",{className:`absolute -bottom-0.5 -right-0.5 text-[6.5px] font-mono px-0.5 rounded-[2px] leading-none pointer-events-none opacity-0 group-hover:opacity-90 transition-opacity ${xe?"bg-primary/90 text-primary-foreground":"bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:ee.shortcut})]}),J&&jsx("div",{className:"absolute left-full top-1/2 -translate-y-1/2 pl-3 z-50 animate-in fade-in zoom-in-95 duration-150",onMouseEnter:Ge,onMouseLeave:Ue,children:jsxs("div",{className:"w-56 p-2.5 rounded-[14px] bg-[#f7f9fc]/95 dark:bg-[#16171b]/95 backdrop-blur-2xl border border-white/80 dark:border-white/[0.08] shadow-[-6px_-6px_16px_rgba(255,255,255,0.9),_8px_8px_24px_rgba(166,175,195,0.55)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.03),_8px_8px_24px_rgba(0,0,0,0.9)]",children:[jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider px-1.5 mb-1.5",children:"Basic Shapes"}),jsx("div",{className:"grid grid-cols-3 gap-1 mb-2.5",children:To.filter(O=>O.category==="basic").map(O=>{let Z=O.icon,Se=t===O.type;return jsxs("button",{type:"button",onClick:()=>{r(O.type),R(O.type),oe(false);},title:`${O.label} - ${O.description}`,className:`flex flex-col items-center justify-center p-1.5 rounded-[9px] transition-all cursor-pointer group/item ${Se?"bg-primary text-primary-foreground shadow-sm font-semibold scale-[1.02]":"text-neutral-600 dark:text-neutral-300 hover:bg-neutral-200/70 dark:hover:bg-neutral-800/80 hover:text-neutral-900 dark:hover:text-white"}`,children:[jsx(Z,{size:18,stroke:Se?2:1.7}),jsx("span",{className:"text-[10px] mt-1 font-medium leading-none",children:O.shortLabel}),jsx("span",{className:"text-[8px] opacity-60 font-mono mt-0.5",children:O.shortcut})]},O.type)})}),jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider px-1.5 mb-1.5",children:"Flowchart & Cloud"}),jsx("div",{className:"grid grid-cols-2 gap-1.5",children:To.filter(O=>O.category==="flowchart").map(O=>{let Z=O.icon,Se=t===O.type;return jsxs("button",{type:"button",onClick:()=>{r(O.type),R(O.type),oe(false);},title:`${O.label} - ${O.description}`,className:`flex items-center gap-2 px-2 py-1.5 rounded-[9px] transition-all cursor-pointer text-left group/item ${Se?"bg-primary text-primary-foreground shadow-sm font-semibold scale-[1.02]":"text-neutral-600 dark:text-neutral-300 hover:bg-neutral-200/70 dark:hover:bg-neutral-800/80 hover:text-neutral-900 dark:hover:text-white"}`,children:[jsx("div",{className:"w-6 h-6 rounded-[6px] bg-neutral-200/60 dark:bg-neutral-800/60 flex items-center justify-center shrink-0 group-hover/item:scale-105 transition-transform",children:jsx(Z,{size:15,stroke:Se?2:1.7})}),jsxs("div",{className:"flex flex-col min-w-0 flex-1",children:[jsx("span",{className:"text-[11px] font-medium truncate leading-tight",children:O.shortLabel}),jsxs("span",{className:"text-[8px] opacity-60 font-mono",children:["Key: ",O.shortcut]})]})]},O.type)})})]})})]}),_&&jsxs("div",{className:"relative",onMouseEnter:ce,onMouseLeave:ke,children:[jsxs("button",{type:"button","data-active":t==="table"?"true":void 0,onClick:()=>r("table"),title:"Table & Grid Tool (N) - Hover for grid size picker & templates",className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${t==="table"?"fk-tool-active bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)] scale-[1.05]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 active:scale-95"}`,children:[jsx(_d,{size:17,stroke:t==="table"?2:1.7}),jsx("span",{className:"sr-only",children:"Table Tool"}),jsx("span",{className:"absolute bottom-0.5 right-0.5 w-1 h-1 rounded-full bg-neutral-400 dark:bg-neutral-500 group-hover:bg-primary transition-colors"}),jsx("span",{className:`absolute -bottom-0.5 -right-0.5 text-[6.5px] font-mono px-0.5 rounded-[2px] leading-none pointer-events-none opacity-0 group-hover:opacity-90 transition-opacity ${t==="table"?"bg-primary/90 text-primary-foreground":"bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:"N"})]}),U&&jsx("div",{className:"absolute left-full top-1/2 -translate-y-1/2 pl-3 z-50 animate-in fade-in zoom-in-95 duration-150",onMouseEnter:ce,onMouseLeave:ke,children:jsxs("div",{className:"w-56 p-3 rounded-[14px] bg-[#f7f9fc]/95 dark:bg-[#16171b]/95 backdrop-blur-2xl border border-white/80 dark:border-white/[0.08] shadow-[-6px_-6px_16px_rgba(255,255,255,0.9),_8px_8px_24px_rgba(166,175,195,0.55)] dark:shadow-[-4px_-4px_14px_rgba(255,255,255,0.03),_8px_8px_24px_rgba(0,0,0,0.9)]",children:[jsxs("div",{className:"flex items-center justify-between px-0.5 mb-2",children:[jsx("span",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider",children:"Grid Size"}),jsxs("span",{className:"text-[11px] font-mono font-semibold text-primary",children:[Ne.rows," \xD7 ",Ne.cols]})]}),jsx("div",{className:"grid grid-cols-5 gap-1 p-1.5 rounded-[10px] bg-neutral-200/50 dark:bg-neutral-800/50 mb-3",onMouseLeave:()=>ne({rows:3,cols:3}),children:Array.from({length:5}).map((O,Z)=>Array.from({length:5}).map((Se,K)=>{let de=Z+1,re=K+1,T=de<=Ne.rows&&re<=Ne.cols;return jsx("button",{type:"button",onMouseEnter:()=>ne({rows:de,cols:re}),onClick:()=>{i?i("blank",de,re):r("table"),G(false);},className:`w-7 h-5 rounded-[4px] border transition-all cursor-pointer ${T?"bg-primary/80 border-primary shadow-xs":"bg-white/80 dark:bg-neutral-900/80 border-neutral-300/80 dark:border-neutral-700/80"}`},`${de}_${re}`)}))}),jsx("div",{className:"text-[10px] font-bold text-neutral-400 dark:text-neutral-500 uppercase tracking-wider px-0.5 mb-1.5",children:"Templates & Presets"}),jsx("div",{className:"flex flex-col gap-1",children:[{id:"blank",label:"Blank Grid (3 \xD7 3)",icon:"\u25A6",desc:"Empty table"},{id:"matrix",label:"Feature Matrix",icon:"\u{1F4CA}",desc:"4\xD73 pricing/features"},{id:"swot",label:"SWOT Matrix",icon:"\u{1F3AF}",desc:"2\xD72 strategic quadrants"},{id:"kanban",label:"Sprint Board",icon:"\u{1F4CB}",desc:"3 columns (To Do, Doing, Done)"}].map(O=>jsxs("button",{type:"button",onClick:()=>{let Z=O.id==="kanban"?"kanban":O.id==="matrix-2x2"?"matrix":"blank";i?.(Z),G(false);},className:"flex items-center gap-2 px-2 py-1.5 rounded-[8px] hover:bg-neutral-200/70 dark:hover:bg-neutral-800/80 text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white transition-colors text-left cursor-pointer group",children:[jsx("span",{className:"text-sm",children:O.icon}),jsxs("div",{className:"flex flex-col min-w-0 flex-1",children:[jsx("span",{className:"text-[11px] font-medium leading-tight",children:O.label}),jsx("span",{className:"text-[9px] text-neutral-400 dark:text-neutral-500 leading-tight",children:O.desc})]})]},O.id))})]})})]}),Cd.filter(O=>O.type==="arrow"?x:O.type==="line"?m:O.type==="pen"?a:O.type==="text"?g:true).map(O=>{let Z=O.icon,Se=t===O.type;return jsxs("button",{type:"button","data-active":Se?"true":void 0,onClick:()=>r(O.type),title:O.label,className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${Se?"fk-tool-active bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)] scale-[1.05]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.8)] active:scale-95"}`,children:[jsx(Z,{size:17,stroke:Se?2:1.7}),jsx("span",{className:"sr-only",children:O.label}),jsx("span",{className:`absolute -bottom-0.5 -right-0.5 text-[6.5px] font-mono px-0.5 rounded-[2px] leading-none pointer-events-none opacity-0 group-hover:opacity-90 transition-opacity ${Se?"bg-primary/90 text-primary-foreground":"bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:O.shortcut})]},O.type)}),S&&jsxs("button",{type:"button",onClick:Ie,title:"Insert Image from file (I)",className:"fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.8)] active:scale-95 cursor-pointer",children:[jsx(IconPhoto,{size:17,stroke:1.7}),jsx("span",{className:"sr-only",children:"Insert Image (I)"}),jsx("span",{className:"absolute -bottom-0.5 -right-0.5 text-[6.5px] font-mono px-0.5 rounded-[2px] leading-none pointer-events-none opacity-0 group-hover:opacity-90 transition-opacity bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300",children:"I"})]}),Md.filter(O=>O.type==="eraser"?D:O.type==="laser"?P:true).map(O=>{let Z=O.icon,Se=t===O.type;return jsxs("button",{type:"button","data-active":Se?"true":void 0,onClick:()=>r(O.type),title:O.label,className:`fk-tool-btn relative flex flex-col items-center justify-center w-8 h-8 rounded-[9px] transition-all duration-150 group cursor-pointer ${Se?"fk-tool-active bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55),_0_0_0_1px_rgba(255,255,255,0.8)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8),_0_0_0_1px_rgba(255,255,255,0.06)] scale-[1.05]":"text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.85),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.6)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.8)] active:scale-95"}`,children:[jsx(Z,{size:17,stroke:Se?2:1.7}),jsx("span",{className:"sr-only",children:O.label}),jsx("span",{className:`absolute -bottom-0.5 -right-0.5 text-[6.5px] font-mono px-0.5 rounded-[2px] leading-none pointer-events-none opacity-0 group-hover:opacity-90 transition-opacity ${Se?"bg-primary/90 text-primary-foreground":"bg-neutral-200 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300"}`,children:O.shortcut})]},O.type)}),I&&jsxs(Fragment,{children:[jsx("div",{className:"w-5 h-[1px] bg-black/10 dark:bg-white/10 my-0.5"}),jsxs("button",{type:"button","data-active":o?"true":void 0,onClick:()=>c?.(O=>!O),title:"Keep tool selected after drawing (Q)",className:`fk-tool-btn relative flex items-center justify-center w-8 h-7 rounded-[8px] transition-all duration-150 group cursor-pointer ${o?"fk-tool-active bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/40 shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,1),_1.5px_1.5px_3px_rgba(166,175,195,0.55)] dark:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.06),_1.5px_1.5px_4px_rgba(0,0,0,0.8)]":"text-neutral-400 dark:text-neutral-500 hover:text-neutral-800 dark:hover:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800"}`,children:[o?jsx(IconLock,{size:15,stroke:2}):jsx(IconLockOpen,{size:15,stroke:1.7}),jsx("span",{className:"sr-only",children:"Lock Tool (Q)"})]})]})]})]})}var Fd=[{style:"grid",label:"Mesh Grid (Default)",desc:"Graph paper squares"},{style:"dots",label:"Dots Grid",desc:"Matrix dots pattern"},{style:"cross",label:"Crosshairs",desc:"Architectural markers"},{style:"none",label:"Clean Canvas",desc:"No background grid"}];function Xn({boardName:e,setBoardName:t,onOpenExport:r,onOpenTemplates:o,onCopyImage:c,onClearBoard:d,elementCount:h,zoom:s,zoomIn:n,zoomOut:p,resetCamera:i,canUndo:l,canRedo:u,undo:a,redo:x,tool:m,setTool:g,gridStyle:w,setGridStyle:_,onExit:S,saveStatus:E="saved",onManualSave:z,onStartPresentation:D,hasFrames:P=false,frameCount:I=0,isFramesOutlineOpen:b=false,onToggleFramesOutline:f,onOpenTechStencils:v,isTechStencilsOpen:C=false,isSpotlightActive:M=false,onToggleSpotlight:R,uiConfig:J}){let oe=J?.showBoardName??true,A=J?.showExitButton??true,U=J?.showSaveIndicator??true,G=J?.showHistoryControls??true,Ne=(J?.showUndoButton??true)&&G,ne=(J?.showRedoButton??true)&&G,le=Ne||ne,ce=J?.showZoomControls??true,ke=(J?.showZoomOutButton??true)&&ce,Ie=(J?.showZoomInButton??true)&&ce,we=(J?.showZoomResetButton??true)&&ce,Ge=ke||Ie||we,Ue=J?.showHandTool??true,ee=J?.showGridSelector??true,Pe=J?.showFramesOutline??true,xe=J?.showPresentation??true,O=J?.showSpotlight??true,Z=J?.showCopyImage??true,Se=J?.showClearButton??true,K=J?.showExportMenu??true,de=J?.showTemplates??true,re=J?.showTechStencils??true,{resolvedTheme:T,isDark:L,panelVariant:q}=nr(),k=q==="neumorphic",[pe,V]=useState(false),[$,te]=useState(e),[fe,be]=useState(false),[ue,F]=useState(false),ve=Hn.useRef(null),ae=Hn.useRef(null),ze=()=>{t($.trim()||"Untitled Whiteboard"),V(false);};Hn.useEffect(()=>{let nt=et=>{ve.current&&!ve.current.contains(et.target)&&be(false),ae.current&&!ae.current.contains(et.target)&&F(false);};return (fe||ue)&&document.addEventListener("mousedown",nt),()=>{document.removeEventListener("mousedown",nt);}},[fe,ue]);let Le=m==="hand";return jsxs("header",{className:"fixed top-0 left-0 right-0 z-40 h-12 pointer-events-none flex items-center justify-between px-2.5 md:px-4",children:[jsxs("div",{className:"pointer-events-auto flex items-center gap-1.5",children:[A&&S&&jsx("button",{type:"button",onClick:S,className:`fk-btn h-8 w-8 flex items-center justify-center rounded-[9px] backdrop-blur-2xl transition-all cursor-pointer box-border active:scale-95 ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] text-neutral-700 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] hover:shadow-[-2px_-2px_7px_rgba(255,255,255,0.95),_3px_3px_8px_rgba(166,175,195,0.5)] active:shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.5),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:active:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]":"bg-white/95 dark:bg-[#16171b]/95 border border-black/[0.04] dark:border-white/[0.05] shadow-[0_1px_3px_rgba(0,0,0,0.06)] dark:shadow-[0_2px_5px_rgba(0,0,0,0.4)] text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800"}`,title:"Exit whiteboard",children:jsx(IconArrowLeft,{size:14,stroke:2})}),(oe||U)&&jsxs("div",{className:`fk-card h-8 flex items-center gap-2 px-2.5 backdrop-blur-2xl rounded-[9px] box-border transition-all ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-3px_-3px_8px_rgba(255,255,255,0.85),_4px_4px_10px_rgba(166,175,195,0.45)] dark:shadow-[-2px_-2px_6px_rgba(255,255,255,0.02),_4px_4px_12px_rgba(0,0,0,0.8)]":"bg-white/95 dark:bg-[#16171b]/95 border border-black/[0.04] dark:border-white/[0.05] shadow-[0_4px_16px_-2px_rgba(0,0,0,0.06),0_2px_4px_-1px_rgba(0,0,0,0.03)] dark:shadow-[0_4px_16px_-2px_rgba(0,0,0,0.5)]"}`,children:[jsxs("div",{title:"Sketch",className:"flex items-center gap-1.5 text-primary font-bold text-xs tracking-tight",children:[jsx(IconPencilMinus,{size:15,className:"text-primary"}),jsx("span",{className:"hidden min-[1700px]:inline font-semibold text-primary text-xs tracking-wide",children:"Sketch"})]}),oe&&jsxs(Fragment,{children:[jsx("div",{className:"hidden min-[1700px]:block w-[1px] h-3 bg-neutral-300 dark:bg-neutral-700/60"}),pe?jsxs("div",{className:"flex items-center gap-1",children:[jsx("input",{type:"text",value:$,onChange:nt=>te(nt.target.value),onBlur:ze,onKeyDown:nt=>{nt.key==="Enter"&&ze();},autoFocus:true,className:"text-xs font-medium px-2 py-0.5 border border-primary/50 rounded-[5px] bg-[#e2e7ef] dark:bg-[#111215] text-neutral-900 dark:text-neutral-100 shadow-[inset_1px_1px_2.5px_rgba(166,175,195,0.5),_inset_-1px_-1px_2.5px_rgba(255,255,255,0.9)] dark:shadow-[inset_1.5px_1.5px_3px_rgba(0,0,0,0.7),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)] outline-none w-28 md:w-36"}),jsx("button",{type:"button",onClick:ze,className:"p-1 rounded-[5px] text-emerald-600 hover:bg-emerald-50 dark:hover:bg-emerald-950/40",children:jsx(IconCheck,{size:12,stroke:2.5})})]}):jsxs("button",{type:"button",onClick:()=>{te(e),V(true);},className:"flex items-center gap-1 text-xs font-medium text-neutral-700 dark:text-neutral-300 hover:text-primary dark:hover:text-blue-200 transition-colors group cursor-pointer",title:"Click to rename board",children:[jsx("span",{className:"max-w-[90px] sm:max-w-[130px] md:max-w-[160px] truncate",children:e}),jsx(IconChevronDown,{size:11,className:"text-neutral-400 group-hover:text-primary dark:group-hover:text-blue-200 transition-colors"})]})]}),U&&jsxs(Fragment,{children:[jsx("div",{className:"w-[1px] h-3 bg-neutral-300 dark:bg-neutral-700/60"}),E==="saving"?jsxs("span",{className:"h-5 flex items-center gap-1 text-[9.5px] font-semibold text-amber-600 dark:text-amber-400 bg-amber-500/10 px-1.5 rounded-[5px] animate-pulse select-none leading-none shadow-[inset_0.5px_0.5px_1.5px_rgba(245,158,11,0.2)]",title:"Saving changes to local storage...",children:[jsx(IconDeviceFloppy,{size:10,className:"animate-spin"}),jsx("span",{className:"hidden lg:inline",children:"Saving..."})]}):E==="unsaved"?jsxs("button",{type:"button",onClick:z,title:"Unsaved changes. Click or press Ctrl+S to save.",className:"h-5 flex items-center gap-1 text-[9.5px] font-semibold text-neutral-600 dark:text-neutral-400 hover:text-primary dark:hover:text-blue-200 bg-neutral-500/10 hover:bg-primary/10 px-1.5 rounded-[5px] transition-colors cursor-pointer leading-none",children:[jsx("span",{className:"w-1.5 h-1.5 rounded-full bg-amber-500 shadow-[0_0_4px_rgba(245,158,11,0.6)]"}),jsx("span",{className:"hidden lg:inline",children:"Unsaved"})]}):jsxs("button",{type:"button",onClick:z,title:"All changes saved to local storage (Ctrl+S to save anytime)",className:"h-5 flex items-center gap-1 text-[9.5px] font-semibold text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20 px-1.5 rounded-[5px] transition-all cursor-pointer select-none leading-none shadow-[inset_0.5px_0.5px_1.5px_rgba(16,185,129,0.2)]",children:[jsx(IconCheck,{size:10,stroke:2.5}),jsx("span",{className:"hidden lg:inline",children:"Saved"})]})]})]})]}),(le||Ge||Ue)&&jsxs("div",{className:`fk-card pointer-events-auto absolute left-1/2 -translate-x-1/2 h-8 flex items-center gap-0.5 lg:px-1 px-0.5 backdrop-blur-2xl rounded-[9px] text-neutral-700 dark:text-neutral-300 box-border transition-all ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-3px_-3px_8px_rgba(255,255,255,0.85),_4px_4px_10px_rgba(166,175,195,0.45)] dark:shadow-[-2px_-2px_6px_rgba(255,255,255,0.02),_4px_4px_12px_rgba(0,0,0,0.8)]":"bg-white/95 dark:bg-[#16171b]/95 border border-neutral-200/90 dark:border-neutral-800 shadow-sm"}`,children:[le&&jsxs(Fragment,{children:[Ne&&jsx("button",{type:"button",onClick:a,disabled:!l,title:"Undo (Ctrl+Z)",className:"h-6.5 w-5 lg:w-6.5 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.7)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.9)] disabled:opacity-30 disabled:hover:shadow-none disabled:hover:bg-transparent transition-all cursor-pointer",children:jsx(IconArrowBackUp,{size:14})}),ne&&jsx("button",{type:"button",onClick:x,disabled:!u,title:"Redo (Ctrl+Y or Ctrl+Shift+Z)",className:"h-6.5 w-5 lg:w-6.5 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.7)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.9)] disabled:opacity-30 disabled:hover:shadow-none disabled:hover:bg-transparent transition-all cursor-pointer",children:jsx(IconArrowForwardUp,{size:14})})]}),le&&(Ge||Ue)&&jsx("div",{className:"w-[1px] h-3 bg-neutral-300 dark:bg-neutral-700/60 mx-0.5"}),Ge&&jsxs(Fragment,{children:[ke&&jsx("button",{type:"button",onClick:p,title:"Zoom Out",className:"h-6.5 w-5 lg:w-6.5 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.7)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.9)] transition-all cursor-pointer",children:jsx(IconMinus,{size:13})}),we&&jsxs("button",{type:"button",onClick:i,title:"Click to reset zoom to 100%",className:"h-6.5 px-1.5 flex items-center justify-center text-[11px] font-mono font-bold min-w-[38px] text-center rounded-[6px] text-neutral-700 dark:text-neutral-200 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.7)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.9)] transition-all cursor-pointer",children:[Math.round(s*100),"%"]}),Ie&&jsx("button",{type:"button",onClick:n,title:"Zoom In",className:"h-6.5 w-5 lg:w-6.5 flex items-center justify-center rounded-[6px] text-neutral-600 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.7)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.9)] transition-all cursor-pointer",children:jsx(IconPlus,{size:13})})]}),Ge&&Ue&&jsx("div",{className:"w-[1px] h-3 bg-neutral-300 dark:bg-neutral-700/60 mx-0.5"}),Ue&&jsx("button",{type:"button",onClick:()=>g(Le?"select":"hand"),title:Le?"Pan Mode Active (H / Space)":"Switch to Hand/Pan Tool (H)",className:`h-6.5 w-5 lg:w-6.5 flex items-center justify-center rounded-[6px] transition-all cursor-pointer ${Le?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 font-bold shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8)] scale-[1.04]":"text-neutral-600 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#22242b] hover:shadow-[-1.5px_-1.5px_3px_rgba(255,255,255,0.9),_1.5px_1.5px_3px_rgba(166,175,195,0.35)] dark:hover:shadow-[-1px_-1px_3px_rgba(255,255,255,0.03),_1.5px_1.5px_4px_rgba(0,0,0,0.7)] active:shadow-[inset_1px_1px_2px_rgba(166,175,195,0.5),_inset_-1px_-1px_2px_rgba(255,255,255,0.9)]"}`,children:jsx(IconHandGrab,{size:14})})]}),jsxs("div",{className:"pointer-events-auto flex items-center gap-1.5",children:[ee&&jsxs("div",{className:"relative",ref:ve,children:[jsxs("button",{type:"button",onClick:()=>be(nt=>!nt),className:`fk-btn h-8 flex items-center gap-1 px-2 rounded-[9px] backdrop-blur-2xl text-neutral-700 dark:text-neutral-300 active:scale-95 transition-all cursor-pointer box-border ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] hover:shadow-[-2px_-2px_7px_rgba(255,255,255,0.95),_3px_3px_8px_rgba(166,175,195,0.5)]":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs hover:bg-neutral-50 dark:hover:bg-[#272a34]"} ${fe?k?"border-primary/40 bg-[#f0f3f8] dark:bg-[#20222a] shadow-[inset_1.5px_1.5px_3px_rgba(166,175,195,0.5),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)] dark:shadow-[inset_2px_2px_4px_rgba(0,0,0,0.7),_inset_-1px_-1px_2px_rgba(255,255,255,0.03)]":"border-primary/50 text-primary dark:text-blue-300 bg-primary/10 dark:bg-primary/20":""}`,title:"Choose canvas background grid style",children:[w==="dots"&&jsx(IconDots,{size:14,className:"text-primary"}),w==="grid"&&jsx(IconGridPattern,{size:14,className:"text-primary"}),w==="cross"&&jsx("span",{className:"font-mono text-[11px] font-bold px-0.5 text-primary dark:text-foreground",children:"+"}),w==="none"&&jsx("span",{className:"text-[9px] font-medium px-0.5 text-neutral-400",children:"Off"}),jsx(IconChevronDown,{size:10,className:`text-neutral-400 transition-transform duration-150 ${fe?"rotate-180":""}`})]}),fe&&jsxs("div",{className:`fk-card absolute right-0 top-full mt-2 w-52 backdrop-blur-2xl rounded-[14px] p-2 z-50 animate-in fade-in zoom-in-95 duration-150 select-none ${k?"bg-[#eef1f6]/98 dark:bg-[#16171b]/98 border border-white/70 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.85),_8px_8px_20px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_12px_rgba(255,255,255,0.02),_8px_8px_24px_rgba(0,0,0,0.9)]":"bg-white/95 dark:bg-[#16171b]/95 border border-black/[0.06] dark:border-white/[0.08] shadow-[0_12px_30px_-4px_rgba(0,0,0,0.12),0_4px_12px_-2px_rgba(0,0,0,0.06)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.7),0_4px_14px_-2px_rgba(0,0,0,0.5)]"}`,children:[jsxs("div",{className:"px-2 py-1 mb-1 border-b border-black/[0.06] dark:border-white/[0.06] flex items-center justify-between",children:[jsx("span",{className:"text-[9.5px] font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider",children:"Grid Background"}),jsx("span",{className:"text-[9px] font-mono text-neutral-400 dark:text-neutral-500",children:w==="grid"?"Default":w})]}),jsx("div",{className:"flex flex-col gap-1",children:Fd.map(nt=>{let et=w===nt.style;return jsxs("button",{type:"button",onClick:()=>{_(nt.style),be(false);},className:`flex items-center gap-2.5 p-1.5 rounded-[9px] text-left transition-all cursor-pointer ${et?k?"bg-[#f0f3f8] dark:bg-[#22242b] text-primary dark:text-foreground border border-primary/30 shadow-[-2px_-2px_4px_rgba(255,255,255,1),_2px_2px_4px_rgba(166,175,195,0.55)] dark:shadow-[-2px_-2px_4px_rgba(255,255,255,0.06),_2px_2px_5px_rgba(0,0,0,0.8)] font-semibold":"bg-primary/10 dark:bg-primary/25 text-primary dark:text-blue-300 border border-primary/25 dark:border-primary/30 font-semibold":k?"hover:bg-[#f0f3f8]/80 dark:hover:bg-[#1c1e24]/80 text-neutral-700 dark:text-neutral-300 border border-transparent":"hover:bg-neutral-100 dark:hover:bg-neutral-800/70 text-neutral-700 dark:text-neutral-300 border border-transparent"}`,children:[nt.style==="dots"&&jsx("div",{className:"w-8 h-6 rounded-[5px] border border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-900 relative overflow-hidden flex items-center justify-center shrink-0",children:jsxs("svg",{className:"w-full h-full text-neutral-600 dark:text-neutral-300",xmlns:"http://www.w3.org/2000/svg",children:[jsx("pattern",{id:"grid-dots-preview-btn",width:"5",height:"5",patternUnits:"userSpaceOnUse",children:jsx("circle",{cx:"2.5",cy:"2.5",r:"0.8",fill:"currentColor"})}),jsx("rect",{width:"100%",height:"100%",fill:"url(#grid-dots-preview-btn)"})]})}),nt.style==="grid"&&jsx("div",{className:"w-8 h-6 rounded-[5px] border border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-900 relative overflow-hidden flex items-center justify-center shrink-0",children:jsxs("svg",{className:"w-full h-full text-neutral-600 dark:text-neutral-300",xmlns:"http://www.w3.org/2000/svg",children:[jsx("pattern",{id:"grid-mesh-preview-btn",width:"6",height:"6",patternUnits:"userSpaceOnUse",children:jsx("path",{d:"M 6 0 L 0 0 0 6",fill:"none",stroke:"currentColor",strokeWidth:"0.8"})}),jsx("rect",{width:"100%",height:"100%",fill:"url(#grid-mesh-preview-btn)"})]})}),nt.style==="cross"&&jsx("div",{className:"w-8 h-6 rounded-[5px] border border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-900 flex items-center justify-center shrink-0",children:jsx("span",{className:"font-mono text-[11px] font-bold text-neutral-600 dark:text-neutral-300 leading-none select-none",children:"+"})}),nt.style==="none"&&jsx("div",{className:"w-8 h-6 rounded-[5px] border border-dashed border-neutral-300 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900/50 flex items-center justify-center shrink-0",children:jsx("span",{className:"text-[8px] font-semibold text-neutral-400 uppercase tracking-wider",children:"Off"})}),jsxs("div",{className:"flex-1 min-w-0",children:[jsxs("div",{className:"flex items-center justify-between",children:[jsx("span",{className:"text-xs leading-tight",children:nt.label}),et&&jsx(IconCheck,{size:12,className:"text-primary stroke-[2.5]"})]}),jsx("span",{className:"text-[9.5px] text-neutral-400 block leading-tight",children:nt.desc})]})]},nt.style)})})]})]}),Pe&&f&&jsxs("button",{type:"button",onClick:f,className:`fk-btn h-8 hidden min-[1700px]:flex items-center gap-1.5 px-2.5 rounded-[9px] backdrop-blur-2xl text-xs font-medium text-neutral-700 dark:text-neutral-300 active:scale-95 transition-all cursor-pointer box-border ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] hover:shadow-[-2px_-2px_7px_rgba(255,255,255,0.95),_3px_3px_8px_rgba(166,175,195,0.5)]":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs hover:bg-neutral-50 dark:hover:bg-[#272a34]"}`,title:"Toggle Frames Presentation Outline (Alt+F)",children:[jsx(IconLayoutSidebar,{size:14,className:"text-primary"}),jsx("span",{children:"Outline"}),I>0&&jsx("span",{className:"px-1 py-0.2 rounded-[3px] bg-primary/15 text-[8.5px] font-mono font-bold text-primary dark:text-foreground",children:I})]}),xe&&D&&jsxs("button",{type:"button",onClick:D,disabled:!P,className:`fk-btn h-8 hidden min-[1700px]:flex items-center gap-1.5 px-2.5 rounded-[9px] backdrop-blur-2xl text-xs font-medium transition-all box-border ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)]":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs"} ${P?"text-primary dark:text-foreground hover:bg-neutral-50 dark:hover:bg-neutral-800/80 active:scale-95 cursor-pointer":"opacity-40 text-neutral-400 dark:text-neutral-500 cursor-not-allowed"}`,title:P?"Start Slideshow Presentation (Alt+P)":"Add frame elements to present",children:[jsx(IconPlayerPlay,{size:13,className:P?"text-primary":""}),jsx("span",{children:"Present"})]}),O&&R&&jsx("button",{type:"button",onClick:R,className:`fk-btn h-8 hidden min-[1700px]:flex items-center gap-1.5 px-2.5 rounded-[9px] backdrop-blur-2xl transition-all cursor-pointer box-border active:scale-95 ${M?"bg-amber-500/20 text-amber-600 dark:text-amber-400 border border-amber-500/40 font-semibold shadow-[inset_1.5px_1.5px_3px_rgba(245,158,11,0.3),_inset_-1.5px_-1.5px_3px_rgba(255,255,255,0.9)]":k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] text-neutral-700 dark:text-neutral-300 hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] hover:text-amber-500":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-[#272a34] hover:text-amber-500"}`,title:"Spotlight / Focus Mode (Alt+S)",children:jsx(IconCurrentLocation,{size:14,className:"text-amber-500"})}),Z&&c&&jsxs("button",{type:"button",onClick:c,className:`fk-btn h-8 hidden min-[1720px]:flex items-center gap-1.5 px-2.5 rounded-[9px] backdrop-blur-2xl text-xs font-medium text-neutral-700 dark:text-neutral-300 active:scale-95 transition-all cursor-pointer box-border ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:bg-[#f0f3f8] dark:hover:bg-[#20222a]":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs hover:bg-neutral-50 dark:hover:bg-[#272a34]"}`,title:"Quick copy whole drawing or selected elements as image (Ctrl+Shift+C)",children:[jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-primary",children:[jsx("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),jsx("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]}),jsx("span",{children:"Copy Image"})]}),Se&&h>0&&jsxs("button",{type:"button",onClick:d,className:`fk-btn h-8 hidden min-[1700px]:flex items-center gap-1.5 px-2.5 rounded-[9px] backdrop-blur-2xl text-xs font-semibold text-rose-600 dark:text-rose-400 active:scale-95 transition-all cursor-pointer box-border ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:bg-rose-500/10":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs hover:bg-rose-50 dark:hover:bg-rose-950/30"}`,title:"Clear all whiteboard elements",children:[jsx(IconEraser,{size:13}),jsx("span",{children:"Clear"})]}),de&&o&&jsxs("button",{type:"button",onClick:o,className:"fk-btn h-8 hidden min-[1700px]:flex items-center gap-1.5 px-2.5 rounded-[9px] bg-linear-to-r from-primary/15 via-blue-500/15 to-sky-500/15 border border-primary/30 dark:border-primary/40 text-xs font-semibold text-primary dark:text-foreground backdrop-blur-2xl shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_8px_rgba(11,110,255,0.3)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:shadow-[-2px_-2px_7px_rgba(255,255,255,0.95),_3px_3px_10px_rgba(11,110,255,0.4)] active:scale-95 transition-all cursor-pointer box-border",title:"Diagram Templates & Starter Kits",children:[jsxs("svg",{width:"13",height:"13",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-primary",children:[jsx("path",{d:"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"}),jsx("path",{d:"M4 9h16"}),jsx("path",{d:"M9 4v16"})]}),jsx("span",{className:"px-1 py-0.2 rounded-[3px] bg-primary/15 text-[8.5px] font-mono font-bold text-primary dark:text-foreground",children:"5"})]}),(de&&!!o||re&&!!v||Pe&&!!f||xe&&!!D||O&&!!R||Z&&!!c||Se&&h>0)&&jsxs("div",{className:"relative flex min-[1700px]:hidden",ref:ae,children:[jsxs("button",{type:"button",onClick:()=>F(nt=>!nt),className:`h-8 flex items-center justify-center px-2 rounded-[9px] backdrop-blur-2xl text-neutral-700 dark:text-neutral-300 active:scale-95 transition-all cursor-pointer box-border ${k?"bg-[#eef1f6]/95 dark:bg-[#16171b]/95 border border-white/70 dark:border-white/[0.06] shadow-[-2px_-2px_6px_rgba(255,255,255,0.85),_3px_3px_7px_rgba(166,175,195,0.4)] dark:shadow-[-2px_-2px_5px_rgba(255,255,255,0.02),_3px_3px_8px_rgba(0,0,0,0.8)] hover:bg-[#f0f3f8] dark:hover:bg-[#20222a]":"bg-white/95 dark:bg-[#1e2026] border border-black/[0.06] dark:border-white/[0.08] shadow-xs hover:bg-neutral-50 dark:hover:bg-[#272a34]"} ${ue?k?"border-primary/40 bg-[#f0f3f8] dark:bg-[#20222a] text-primary dark:text-foreground":"border-primary/50 text-primary dark:text-blue-300 bg-primary/10 dark:bg-primary/20":""}`,title:"More whiteboard tools and options",children:[jsx(IconSettingsBolt,{size:15}),jsx(IconChevronDown,{size:10,className:`ml-1 text-neutral-400 transition-transform duration-150 ${ue?"rotate-180":""}`})]}),ue&&jsxs("div",{className:`fk-card absolute right-0 top-full mt-2 w-56 backdrop-blur-2xl rounded-[14px] p-2 z-50 animate-in fade-in zoom-in-95 duration-150 select-none ${k?"bg-[#eef1f6]/98 dark:bg-[#16171b]/98 border border-white/70 dark:border-white/[0.06] shadow-[-6px_-6px_16px_rgba(255,255,255,0.85),_8px_8px_20px_rgba(166,175,195,0.45)] dark:shadow-[-4px_-4px_12px_rgba(255,255,255,0.02),_8px_8px_24px_rgba(0,0,0,0.9)]":"bg-white/95 dark:bg-[#16171b]/95 border border-black/[0.06] dark:border-white/[0.08] shadow-[0_12px_30px_-4px_rgba(0,0,0,0.12),0_4px_12px_-2px_rgba(0,0,0,0.06)] dark:shadow-[0_14px_34px_-4px_rgba(0,0,0,0.7),0_4px_14px_-2px_rgba(0,0,0,0.5)]"}`,children:[jsx("div",{className:"px-2 py-1 mb-1 border-b border-black/[0.06] dark:border-white/[0.06] flex items-center justify-between",children:jsx("span",{className:"text-[9.5px] font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider",children:"Tools & Actions"})}),jsxs("div",{className:"flex flex-col gap-0.5",children:[de&&o&&jsxs("button",{type:"button",onClick:()=>{o(),F(false);},className:"flex items-center justify-between p-2 rounded-[9px] text-left hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] text-neutral-700 dark:text-neutral-200 transition-all cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-primary",children:[jsx("path",{d:"M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"}),jsx("path",{d:"M4 9h16"}),jsx("path",{d:"M9 4v16"})]}),jsx("span",{className:"text-xs font-medium",children:"Starter Templates"})]}),jsx("span",{className:"px-1.5 py-0.2 rounded-[4px] bg-primary/15 text-[9px] font-mono font-bold text-primary dark:text-foreground",children:"5"})]}),re&&v&&jsxs("button",{type:"button",onClick:()=>{v(),F(false);},className:"flex items-center justify-between p-2 rounded-[9px] text-left hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] text-neutral-700 dark:text-neutral-200 transition-all cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(IconBracketsContain,{size:15,className:"text-primary"}),jsx("span",{className:"text-xs font-medium",children:"Tech Stencils"})]}),jsx("span",{className:"text-[9.5px] font-mono text-neutral-400",children:"Library"})]}),Pe&&f&&jsxs("button",{type:"button",onClick:()=>{f(),F(false);},className:"flex items-center justify-between p-2 rounded-[9px] text-left hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] text-neutral-700 dark:text-neutral-200 transition-all cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(IconLayoutSidebar,{size:15,className:"text-primary"}),jsx("span",{className:"text-xs font-medium",children:"Frames Outline"})]}),jsx("span",{className:"text-[9.5px] font-mono text-neutral-400",children:I>0?`${I} frame${I>1?"s":""}`:"Alt+F"})]}),xe&&D&&jsxs("button",{type:"button",onClick:()=>{P&&(D(),F(false));},disabled:!P,className:`flex items-center justify-between p-2 rounded-[9px] text-left transition-all ${P?"hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] text-primary dark:text-foreground cursor-pointer":"opacity-40 text-neutral-400 dark:text-neutral-500 cursor-not-allowed"}`,children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(IconPlayerPlay,{size:15,className:P?"text-primary":""}),jsx("span",{className:"text-xs font-medium",children:"Present Slideshow"})]}),jsx("span",{className:"text-[9.5px] font-mono text-neutral-400",children:"Alt+P"})]}),O&&R&&jsxs("button",{type:"button",onClick:()=>{R(),F(false);},className:"flex items-center justify-between p-2 rounded-[9px] text-left hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] text-neutral-700 dark:text-neutral-200 transition-all cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(IconCurrentLocation,{size:15,className:"text-amber-500"}),jsx("span",{className:"text-xs font-medium",children:"Spotlight Focus"})]}),jsx("span",{className:"text-[9.5px] font-mono text-neutral-400",children:"Alt+S"})]}),Z&&c&&jsxs("button",{type:"button",onClick:()=>{c(),F(false);},className:"flex items-center justify-between p-2 rounded-[9px] text-left hover:bg-[#f0f3f8] dark:hover:bg-[#20222a] text-neutral-700 dark:text-neutral-200 transition-all cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"text-primary",children:[jsx("rect",{width:"14",height:"14",x:"8",y:"8",rx:"2",ry:"2"}),jsx("path",{d:"M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"})]}),jsx("span",{className:"text-xs font-medium",children:"Copy as Image"})]}),jsx("span",{className:"text-[9.5px] font-mono text-neutral-400",children:"Ctrl+Shift+C"})]}),Se&&h>0&&jsxs(Fragment,{children:[jsx("div",{className:"my-1 border-t border-black/[0.06] dark:border-white/[0.06]"}),jsxs("button",{type:"button",onClick:()=>{d(),F(false);},className:"flex items-center justify-between p-2 rounded-[9px] text-left hover:bg-rose-500/10 text-rose-600 dark:text-rose-400 transition-all cursor-pointer group",children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx(IconEraser,{size:15}),jsx("span",{className:"text-xs font-medium",children:"Clear Canvas"})]}),jsx("span",{className:"text-[9.5px] font-mono opacity-80",children:"Reset"})]})]})]})]})]}),K&&jsxs("button",{type:"button",onClick:r,className:"h-8 flex items-center gap-1.5 px-3 rounded-[9px] bg-primary text-primary-foreground hover:bg-primary/90 text-xs font-semibold border border-primary/20 active:scale-95 transition-all cursor-pointer box-border shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),_inset_0_-1px_1.5px_rgba(0,0,0,0.25)] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.3)]",title:"Export drawing as PNG, SVG, JSON, PDF (Ctrl+E)",children:[jsx(IconDownload,{size:13,stroke:2.2}),jsx("span",{className:"hidden sm:inline",children:"Export"}),jsx(IconChevronDown,{size:10,className:"opacity-80",stroke:2.2})]})]})]})}var $o=class{listeners=new Map;on(t,r){this.listeners.has(t)||this.listeners.set(t,new Set);let o=this.listeners.get(t);return o.add(r),()=>{o.delete(r);}}emit(t,r){let o=this.listeners.get(t);o&&o.forEach(c=>{try{c(r);}catch(d){console.error(`[Sketch] Error in event listener for "${t}":`,d);}});}clear(){this.listeners.clear();}};var On=1;function Hd(e){let t=Date.now();return {version:On,id:e?.id||`doc_${Math.random().toString(36).slice(2,10)}`,name:e?.name||"Untitled Sketch",elements:e?.elements?[...e.elements]:[],canvasBackground:e?.canvasBackground||"#fcfcfd",gridStyle:e?.gridStyle||"grid",createdAt:e?.createdAt||t,updatedAt:t}}function Yd(e){return JSON.stringify(e,null,2)}function Xd(e){let t=JSON.parse(e);if(!t||typeof t!="object")throw new Error("[Sketch] Failed to parse document: expected an object.");let r=Array.isArray(t.elements)?t.elements:[];return {version:typeof t.version=="number"?t.version:On,id:typeof t.id=="string"?t.id:void 0,name:typeof t.name=="string"?t.name:"Untitled Sketch",elements:r,canvasBackground:typeof t.canvasBackground=="string"?t.canvasBackground:"#fcfcfd",gridStyle:t.gridStyle||"grid",createdAt:typeof t.createdAt=="number"?t.createdAt:Date.now(),updatedAt:Date.now()}}function jn(e){if(!e||typeof e!="object")return false;let t=e;return typeof t.version=="number"&&Array.isArray(t.elements)&&typeof t.name=="string"}var hi=.1,ui=5;function Gn(e={x:0,y:0,zoom:1}){let[t,r]=useState(e),o=useCallback(i=>({x:(i.x-t.x)/t.zoom,y:(i.y-t.y)/t.zoom}),[t]),c=useCallback(i=>({x:i.x*t.zoom+t.x,y:i.y*t.zoom+t.y}),[t]),d=useCallback((i,l)=>{r(u=>({...u,x:u.x+i,y:u.y+l}));},[]),h=useCallback((i,l)=>{r(u=>{let a=Math.min(ui,Math.max(hi,i));if(a===u.zoom)return u;let x=a/u.zoom,m=l.x-(l.x-u.x)*x,g=l.y-(l.y-u.y)*x;return {x:m,y:g,zoom:a}});},[]),s=useCallback(i=>{r(l=>{let u=Math.min(ui,Math.round((l.zoom+.15)*10)/10),a=i||{x:window.innerWidth/2,y:window.innerHeight/2},x=u/l.zoom;return {x:a.x-(a.x-l.x)*x,y:a.y-(a.y-l.y)*x,zoom:u}});},[]),n=useCallback(i=>{r(l=>{let u=Math.max(hi,Math.round((l.zoom-.15)*10)/10),a=i||{x:window.innerWidth/2,y:window.innerHeight/2},x=u/l.zoom;return {x:a.x-(a.x-l.x)*x,y:a.y-(a.y-l.y)*x,zoom:u}});},[]),p=useCallback(()=>{r({x:0,y:0,zoom:1});},[]);return {camera:t,setCamera:r,screenToWorld:o,worldToScreen:c,panBy:d,zoomAtPoint:h,zoomIn:s,zoomOut:n,resetCamera:p}}function zo(e,t,r){if(t.length<2)return e;let o=e.filter(s=>t.includes(s.id));if(o.length<2)return e;let c=o.map(s=>({el:s,bounds:bt(s)})),d=new Map;if(r==="left"){let s=Math.min(...c.map(n=>n.bounds.x));c.forEach(({el:n,bounds:p})=>{let i=s-p.x;d.set(n.id,{...n,x:n.x+i,points:n.points?.map(l=>({x:l.x+i,y:l.y}))});});}else if(r==="center"){let s=Math.min(...c.map(i=>i.bounds.x)),n=Math.max(...c.map(i=>i.bounds.x+i.bounds.width)),p=(s+n)/2;c.forEach(({el:i,bounds:l})=>{let u=l.x+l.width/2,a=p-u;d.set(i.id,{...i,x:i.x+a,points:i.points?.map(x=>({x:x.x+a,y:x.y}))});});}else if(r==="right"){let s=Math.max(...c.map(n=>n.bounds.x+n.bounds.width));c.forEach(({el:n,bounds:p})=>{let i=s-(p.x+p.width);d.set(n.id,{...n,x:n.x+i,points:n.points?.map(l=>({x:l.x+i,y:l.y}))});});}else if(r==="top"){let s=Math.min(...c.map(n=>n.bounds.y));c.forEach(({el:n,bounds:p})=>{let i=s-p.y;d.set(n.id,{...n,y:n.y+i,points:n.points?.map(l=>({x:l.x,y:l.y+i}))});});}else if(r==="middle"){let s=Math.min(...c.map(i=>i.bounds.y)),n=Math.max(...c.map(i=>i.bounds.y+i.bounds.height)),p=(s+n)/2;c.forEach(({el:i,bounds:l})=>{let u=l.y+l.height/2,a=p-u;d.set(i.id,{...i,y:i.y+a,points:i.points?.map(x=>({x:x.x,y:x.y+a}))});});}else if(r==="bottom"){let s=Math.max(...c.map(n=>n.bounds.y+n.bounds.height));c.forEach(({el:n,bounds:p})=>{let i=s-(p.y+p.height);d.set(n.id,{...n,y:n.y+i,points:n.points?.map(l=>({x:l.x,y:l.y+i}))});});}let h=e.map(s=>d.get(s.id)||s);return Ct(h)}function Bo(e,t,r){if(t.length<2)return e;let o=e.filter(s=>t.includes(s.id));if(o.length<2)return e;let c=o.map(s=>({el:s,bounds:bt(s)})),d=new Map;if(r==="horizontal"){c.sort((x,m)=>x.bounds.x-m.bounds.x);let s=c[0],n=c[c.length-1],p=n.bounds.x+n.bounds.width-s.bounds.x,i=c.reduce((x,m)=>x+m.bounds.width,0),u=Math.max(0,p-i)/(c.length-1),a=s.bounds.x;c.forEach((x,m)=>{if(m===0){a+=x.bounds.width+u;return}if(m===c.length-1)return;let g=a-x.bounds.x;d.set(x.el.id,{...x.el,x:x.el.x+g,points:x.el.points?.map(w=>({x:w.x+g,y:w.y}))}),a+=x.bounds.width+u;});}else if(r==="vertical"){c.sort((x,m)=>x.bounds.y-m.bounds.y);let s=c[0],n=c[c.length-1],p=n.bounds.y+n.bounds.height-s.bounds.y,i=c.reduce((x,m)=>x+m.bounds.height,0),u=Math.max(0,p-i)/(c.length-1),a=s.bounds.y;c.forEach((x,m)=>{if(m===0){a+=x.bounds.height+u;return}if(m===c.length-1)return;let g=a-x.bounds.y;d.set(x.el.id,{...x.el,y:x.el.y+g,points:x.el.points?.map(w=>({x:w.x,y:w.y+g}))}),a+=x.bounds.height+u;});}let h=e.map(s=>d.get(s.id)||s);return Ct(h)}function bi(e,t){let r={...e,...t};if(r.type==="text"){let o=t.text!==void 0&&t.text!==e.text,c=t.fontFamily!==void 0&&t.fontFamily!==e.fontFamily,d=t.fontSize!==void 0&&t.fontSize!==e.fontSize;if((o||c||d)&&t.width===void 0&&t.height===void 0&&r.text){let h=ro(r.text,r.fontSize||22,r.fontFamily),s=e.width;if(r.width=h.width,r.height=h.height,e.textAlign==="center"){let n=e.x+s/2;r.x=Math.round(n-h.width/2);}else if(e.textAlign==="right"){let n=e.x+s;r.x=Math.round(n-h.width);}}}return r}function Un(e=[]){let[t,r]=useState(e),[o,c]=useState([]),d=useMemo(()=>t.filter(I=>o.includes(I.id)),[t,o]),h=useMemo(()=>d.length===1?d[0]:null,[d]),s=useCallback(I=>{r(b=>[...b,I]);},[]),n=useCallback((I,b)=>{r(f=>{let v=f.map(C=>C.id===I?bi(C,b):C);return Ct(v)});},[]),p=useCallback(I=>{r(b=>{let f=b.map(v=>o.includes(v.id)?bi(v,I):v);return Ct(f)});},[o]),i=useCallback(()=>{r(I=>Gr(I,o)),c([]);},[o]),l=useCallback(()=>{if(o.length===0)return;let I=t.filter(M=>o.includes(M.id));if(I.length===0)return;let b=t.reduce((M,R)=>Math.max(M,R.zIndex??0),0),{clonedElements:f,newSelectedIds:v}=Er(I,{deltaX:24,deltaY:24,highestZ:b}),C=Ct([...t,...f]);r(C),c(v);},[t,o]),u=useCallback(()=>{if(o.length<2)return;let I=`grp_${Date.now()}_${Math.random().toString(36).substring(2,7)}`;r(b=>b.map(f=>{if(o.includes(f.id)){let v=f.groupIds||[];return {...f,groupIds:[...v,I]}}return f}));},[o]),a=useCallback(()=>{o.length!==0&&r(I=>{let b=new Set;return I.forEach(f=>{o.includes(f.id)&&f.groupIds&&f.groupIds.length>0&&b.add(f.groupIds[f.groupIds.length-1]);}),b.size===0?I:I.map(f=>{if(f.groupIds&&f.groupIds.length>0){let v=f.groupIds[f.groupIds.length-1];if(b.has(v)){let C=f.groupIds.slice(0,-1);return {...f,groupIds:C.length>0?C:void 0}}}return f})});},[o]),x=useCallback(()=>{o.length!==0&&r(I=>{let b=[...I].sort((M,R)=>(M.zIndex??0)-(R.zIndex??0)),f=b.filter(M=>!o.includes(M.id)),v=b.filter(M=>o.includes(M.id));return [...f,...v].map((M,R)=>({...M,zIndex:R+1}))});},[o]),m=useCallback(()=>{o.length!==0&&r(I=>{let b=[...I].sort((M,R)=>(M.zIndex??0)-(R.zIndex??0)),f=b.filter(M=>o.includes(M.id)),v=b.filter(M=>!o.includes(M.id));return [...f,...v].map((M,R)=>({...M,zIndex:R+1}))});},[o]),g=useCallback(()=>{o.length!==0&&r(I=>{let b=[...I].sort((f,v)=>(f.zIndex??0)-(v.zIndex??0));for(let f=b.length-2;f>=0;f--)if(o.includes(b[f].id)&&!o.includes(b[f+1].id)){let v=b[f];b[f]=b[f+1],b[f+1]=v;}return b.map((f,v)=>({...f,zIndex:v+1}))});},[o]),w=useCallback(()=>{o.length!==0&&r(I=>{let b=[...I].sort((f,v)=>(f.zIndex??0)-(v.zIndex??0));for(let f=1;f<b.length;f++)if(o.includes(b[f].id)&&!o.includes(b[f-1].id)){let v=b[f];b[f]=b[f-1],b[f-1]=v;}return b.map((f,v)=>({...f,zIndex:v+1}))});},[o]),_=useCallback((I,b=false)=>{c(f=>b?f.includes(I)?f.filter(v=>v!==I):[...f,I]:[I]);},[]),S=useCallback(I=>{c(I);},[]),E=useCallback(()=>{c([]);},[]),z=useCallback(I=>{r(I);},[]),D=useCallback(I=>{o.length<2||r(b=>zo(b,o,I));},[o]),P=useCallback(I=>{o.length<2||r(b=>Bo(b,o,I));},[o]);return {elements:t,setElements:r,setAllElements:z,selectedIds:o,setSelectedIds:c,selectedElements:d,singleSelectedElement:h,addElement:s,updateElement:n,updateSelectedElements:p,deleteSelectedElements:i,duplicateSelectedElements:l,groupSelectedElements:u,ungroupSelectedElements:a,alignSelectedElements:D,distributeSelectedElements:P,bringToFront:x,sendToBack:m,bringForward:g,sendBackward:w,selectElement:_,selectElements:S,clearSelection:E}}var Kn=50;function Vn(e=[]){let[t,r]=useState([e]),[o,c]=useState(0),d=useCallback(p=>{r(i=>{let l=i.slice(0,o+1);return l.push(p),l.length>Kn&&l.shift(),l}),c(i=>{let l=i+1;return l>=Kn?Kn-1:l});},[o]),h=useCallback(()=>{if(o>0){let p=o-1;return c(p),t[p]}return null},[o,t]),s=useCallback(()=>{if(o<t.length-1){let p=o+1;return c(p),t[p]}return null},[o,t]),n=useCallback((p=[])=>{r([p]),c(0);},[]);return {pushState:d,undo:h,redo:s,resetHistory:n,canUndo:o>0,canRedo:o<t.length-1}}var co=[{id:"starter-1",type:"rectangle",x:140,y:120,width:200,height:180,strokeColor:"#4f46e5",strokeWidth:2.5,strokeStyle:"solid",fillColor:"#e0e7ff",fillStyle:"hachure",opacity:1,zIndex:1},{id:"starter-1-text",type:"text",x:160,y:165,width:160,height:80,text:`Plan
|
|
120
120
|
Design
|
|
121
121
|
Build \u2728`,fontSize:24,fontFamily:"comic",textAlign:"center",strokeColor:"#4f46e5",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:2},{id:"starter-2",type:"arrow",x:355,y:200,width:120,height:0,strokeColor:"#1e293b",strokeWidth:2.5,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:3},{id:"starter-3",type:"diamond",x:490,y:100,width:210,height:200,strokeColor:"#059669",strokeWidth:2.5,strokeStyle:"solid",fillColor:"#dcfce7",fillStyle:"cross-hatch",opacity:1,zIndex:4},{id:"starter-3-text",type:"text",x:520,y:160,width:150,height:80,text:`Create
|
|
122
122
|
Without
|
|
123
123
|
Limits \u{1F4A1}`,fontSize:24,fontFamily:"comic",textAlign:"center",strokeColor:"#059669",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:5},{id:"starter-4",type:"sticky",x:80,y:350,width:190,height:180,text:`Add your
|
|
124
124
|
ideas here...
|
|
125
|
-
Click any tool to draw! \u{1F3A8}`,fontSize:20,fontFamily:"comic",textAlign:"center",strokeColor:"#713f12",strokeWidth:1,strokeStyle:"solid",fillColor:"#fef08a",fillStyle:"solid",stickyColor:"#fef08a",opacity:1,zIndex:6},{id:"starter-5",type:"text",x:80,y:40,width:260,height:60,text:"Ideas Flow Better Here \u270D\uFE0F",fontSize:28,fontFamily:"comic",textAlign:"left",strokeColor:"#4f46e5",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:7}];function ki(e,t="My Whiteboard",r="#f0f4f8",o="grid"){return e?Array.isArray(e)?{elements:e,name:t,canvasBackground:r,gridStyle:o}:jn(e)?{elements:e.elements||[],name:e.name||t,canvasBackground:e.canvasBackground||r,gridStyle:e.gridStyle||o}:{elements:co,name:t,canvasBackground:r,gridStyle:o}:{elements:co,name:t,canvasBackground:r,gridStyle:o}}var qn=Hn.forwardRef(function({value:t,defaultValue:r,onChange:o,onSave:c,storageKey:d="filekit_sketch_document_v1",boardName:h,onBoardNameChange:s,readOnly:n=false,theme:p="system",panelVariant:i="classic",canvasBackground:l="#f0f4f8",gridStyle:u="grid",onExit:a,guideHref:x,onOpenGuide:m,uiConfig:g,controllerRef:w,className:_="",style:S},E){let z=useMemo(()=>ki(t!==void 0?t:r,h,l,u),[]),D=useRef(null),[P,I]=useState(h!==void 0?h:z.name),[b,f]=useState(z.canvasBackground),[v,C]=useState(z.gridStyle),[M,R]=useState(n?"hand":"select"),[J,oe]=useState(false),[A,U]=useState(cn),[G,Ne]=useState(null),[ne,le]=useState(false),[ce,ke]=useState(false),[Ie,we]=useState(false),[Ge,Ue]=useState(false),[ee,Pe]=useState(false),[xe,O]=useState(false),[Z,Se]=useState(false),[K,de]=useState(false),[re,T]=useState("#ef4444"),[L,q]=useState("fading"),[k,pe]=useState([]),[V,$]=useState(null),[te,fe]=useState(null),be=useRef(null),ue=useCallback(X=>{be.current&&clearTimeout(be.current),fe(X),be.current=setTimeout(()=>{fe(null);},2400);},[]),{elements:F,setElements:ve,setAllElements:ae,selectedIds:ze,selectedElements:Le,selectElement:nt,selectElements:et,clearSelection:gt,addElement:St,updateElement:N,updateSelectedElements:ye,deleteSelectedElements:Te,bringToFront:kt,sendToBack:ut,bringForward:Lt,sendBackward:jt}=Un(z.elements),{pushState:Ye,undo:dr,redo:At,resetHistory:Ke,canUndo:Sr,canRedo:wt}=Vn(z.elements),{camera:or,setCamera:Dt,screenToWorld:W,worldToScreen:y,panBy:H,zoomAtPoint:ie,zoomIn:Y,zoomOut:he,resetCamera:We}=Gn({x:0,y:0,zoom:1}),{resolvedTheme:Oe,isDark:Fe}=nr(p),qe=useMemo(()=>b?Fe&&(b==="#f0f4f8"||b==="#ffffff")?"#121316":!Fe&&(b==="#121316"||b==="#1a1d24"||b==="#0f0f11")?"#f0f4f8":b:Fe?"#121316":"#f0f4f8",[b,Fe]),[dt,j]=useState("saved"),ge=useRef(false),Re=useRef(""),tt=useRef(""),Ae=useRef(null),Ee=useRef(new $o),at=useCallback(X=>{I(X),s?.(X);},[s]);useEffect(()=>{h!==void 0&&h!==P&&I(h);},[h]),useEffect(()=>{if(typeof window>"u")return;let X=z.elements,$e=z.name;if(d)try{let xt=localStorage.getItem(d);if(xt){let ft=JSON.parse(xt);ft&&Array.isArray(ft.elements)&&(X=ft.elements,ft.name&&($e=ft.name),ft.canvasBackground&&f(ft.canvasBackground),ft.gridStyle&&C(ft.gridStyle));}}catch(xt){console.warn("[Sketch] Failed to restore from localStorage:",xt);}ae(X),Ke(X),I($e),Re.current=JSON.stringify(X),tt.current=$e,ge.current=true;let He=D.current,pt=He?.clientWidth||(typeof window<"u"?window.innerWidth:1200),yt=He?.clientHeight||(typeof window<"u"?window.innerHeight:800),Je=Vt(X.length>0?X:co,0),vt=Je.minX+Je.width/2,Pt=Je.minY+Je.height/2;if(n){let xt=Math.max(100,pt-80),ft=Math.max(100,yt-80),Wt=Math.max(.15,Math.min(1.2,Math.min(xt/(Je.width||1),ft/(Je.height||1)))),Tt=Number(Wt.toFixed(2));Dt({x:Math.round(pt/2-vt*Tt),y:Math.round(yt/2-Pt*Tt),zoom:Tt});}else {let xt=g?.showToolBar!==false?60:0;Dt({x:Math.round(pt/2-vt+xt),y:Math.round(yt/2-Pt),zoom:1});}},[d]),useEffect(()=>{if(t===void 0||!ge.current)return;let X=ki(t,P,b,v),$e=JSON.stringify(X.elements);Re.current!==$e&&(Re.current=$e,ae(X.elements),Ke(X.elements)),X.name&&X.name!==tt.current&&(tt.current=X.name,I(X.name));},[t,P,b,v]);let Be=useCallback((X,$e)=>{let He={version:1,name:$e,elements:X,canvasBackground:b,gridStyle:v,createdAt:Date.now(),updatedAt:Date.now()};if(d&&typeof window<"u")try{j("saving"),localStorage.setItem(d,JSON.stringify(He)),Re.current=JSON.stringify(X),tt.current=$e,setTimeout(()=>j("saved"),250);}catch(pt){console.warn("[Sketch] Failed to save document to localStorage:",pt),j("saved");}o?.(He),Ee.current.emit("change",He);},[d,b,v,o]);useEffect(()=>{if(!ge.current)return;let $e=JSON.stringify(F)!==Re.current,He=P!==tt.current;return ($e||He)&&(j("unsaved"),Ae.current&&clearTimeout(Ae.current),Ae.current=setTimeout(()=>{Be(F,P);},800)),()=>{Ae.current&&clearTimeout(Ae.current);}},[F,P,Be]);let Ht=useCallback(()=>{Ae.current&&clearTimeout(Ae.current),Be(F,P);let X={version:1,name:P,elements:F,canvasBackground:b,gridStyle:v,createdAt:Date.now(),updatedAt:Date.now()};c?.(X),ue("Document saved successfully");},[F,P,b,v,Be,c,ue]);useEffect(()=>{let X=$e=>{($e.ctrlKey||$e.metaKey)&&$e.key.toLowerCase()==="s"&&($e.preventDefault(),Ht());};return window.addEventListener("keydown",X),()=>window.removeEventListener("keydown",X)},[Ht]);let Nt=useCallback(X=>{n||R($e=>{let He=typeof X=="function"?X($e):X;return (He==="arrow"||He!=="select"&&He!=="hand")&>(),He});},[n,gt]),yr=useCallback(()=>pe([]),[]),br=useCallback(()=>R("select"),[]),eo=useCallback(()=>{if(n)return;let X=dr();X&&(ae(X),gt(),Ee.current.emit("undo",X));},[n,dr,ae,gt]),qt=useCallback(()=>{if(n)return;let X=At();X&&(ae(X),gt(),Ee.current.emit("redo",X));},[n,At,ae,gt]),Jt=useCallback(()=>{let X=D.current,$e=X?.clientWidth||(typeof window<"u"?window.innerWidth:1200),He=X?.clientHeight||(typeof window<"u"?window.innerHeight:800),pt=Vt(F.length>0?F:co,0),yt=pt.minX+pt.width/2,Je=pt.minY+pt.height/2,vt=!n&&g?.showToolBar!==false?60:0;Dt({x:Math.round($e/2-yt+vt),y:Math.round(He/2-Je),zoom:1});},[F,n,g?.showToolBar,Dt]),Yr=useCallback((X=40)=>{let $e=D.current,He=$e?.clientWidth||(typeof window<"u"?window.innerWidth:1200),pt=$e?.clientHeight||(typeof window<"u"?window.innerHeight:800),yt=F.length>0?F:co,Je=Vt(yt,0);if(Je.width<=0||Je.height<=0){Jt();return}let vt=Je.minX+Je.width/2,Pt=Je.minY+Je.height/2,xt=Math.max(100,He-X*2),ft=Math.max(100,pt-X*2),Wt=xt/Je.width,Tt=ft/Je.height,Xt=Math.min(Wt,Tt),Gt=Math.max(.15,Math.min(1.25,Number(Xt.toFixed(2)))),Qt=!n&&g?.showToolBar!==false?40:0;Dt({x:Math.round(He/2-vt*Gt+Qt),y:Math.round(pt/2-Pt*Gt),zoom:Gt});},[F,n,g?.showToolBar,Jt,Dt]),on=useCallback(()=>{n||(Ye([]),ae([]),gt(),Ae.current&&clearTimeout(Ae.current),Be([],P),Se(false),Ee.current.emit("clear",null),ue("Canvas cleared"));},[n,Ye,ae,gt,P,Be,ue]),Ci=useCallback(X=>{n||(Ye(X),ae(X),gt(),We(),Ae.current&&clearTimeout(Ae.current),Be(X,P),ue(`Imported ${X.length} elements`));},[n,Ye,ae,gt,We,P,Be,ue]),nn=useCallback(()=>{if(n||ze.length===0)return;let X=F.filter(Je=>ze.includes(Je.id));if(X.length===0)return;let $e=F.reduce((Je,vt)=>Math.max(Je,vt.zIndex??0),0),{clonedElements:He,newSelectedIds:pt}=Er(X,{deltaX:24,deltaY:24,highestZ:$e}),yt=Ct([...F,...He]);ae(yt),et(pt),Ye(yt);},[n,F,ze,ae,et,Ye]),an=useCallback(()=>{if(n||ze.length<2)return;let X=`grp_${Date.now()}_${Math.random().toString(36).substring(2,7)}`,$e=F.map(He=>{if(ze.includes(He.id)){let pt=He.groupIds||[];return {...He,groupIds:[...pt,X]}}return He});ae($e),Ye($e);},[n,F,ze,ae,Ye]),sn=useCallback(()=>{if(n||ze.length===0)return;let X=new Set;if(F.forEach(He=>{ze.includes(He.id)&&He.groupIds&&He.groupIds.length>0&&X.add(He.groupIds[He.groupIds.length-1]);}),X.size===0)return;let $e=F.map(He=>{if(He.groupIds&&He.groupIds.length>0){let pt=He.groupIds[He.groupIds.length-1];if(X.has(pt)){let yt=He.groupIds.slice(0,-1);return {...He,groupIds:yt.length>0?yt:void 0}}}return He});ae($e),Ye($e);},[n,F,ze,ae,Ye]),Qn=useCallback(async()=>{let X=Le.length>0?Le:F;if(X.length===0){ue("Canvas is empty");return}let $e=await Zr(X,{scale:2,backgroundColor:"transparent",padding:30});ue($e?Le.length>0?`Copied ${Le.length} element${Le.length>1?"s":""} as PNG!`:"Copied canvas image to clipboard as PNG!":"Failed to copy image to clipboard");},[Le,F,ue]),ea=useCallback(X=>{if(n||ze.length<2)return;let $e=zo(F,ze,X);ae($e),Ye($e);},[n,F,ze,ae,Ye]),ta=useCallback(X=>{if(n||ze.length<2)return;let $e=Bo(F,ze,X);ae($e),Ye($e);},[n,F,ze,ae,Ye]),Mi=useCallback(X=>{if(n)return;let $e=new Image;$e.onload=()=>{let He=$e.naturalWidth||400,pt=$e.naturalHeight||300,yt=He,Je=pt,vt=500;(yt>vt||Je>vt)&&(yt>=Je?(Je=Math.round(Je/yt*vt),yt=vt):(yt=Math.round(yt/Je*vt),Je=vt));let Pt={x:typeof window<"u"?window.innerWidth/2:500,y:typeof window<"u"?window.innerHeight/2:400},xt=W(Pt),ft=`el_${Date.now()}_${Math.random().toString(36).substring(2,7)}`,Wt=F.reduce((Xt,Gt)=>Math.max(Xt,Gt.zIndex??0),0),Tt={...A,id:ft,type:"image",x:Math.round(xt.x-yt/2),y:Math.round(xt.y-Je/2),width:yt,height:Je,dataUrl:X,naturalWidth:He,naturalHeight:pt,aspectRatioLocked:true,opacity:1,zIndex:Wt+1};St(Tt),et([ft]),R("select"),Ye([...F,Tt]);},$e.src=X;},[n,A,F,St,et,Ye,W]),Ni=useCallback((X,$e,He)=>{if(n)return;let pt=typeof window<"u"?window.innerWidth:1200,yt=typeof window<"u"?window.innerHeight:800,Je=W({x:pt/2,y:yt/2}),vt=Date.now(),Pt=Math.random().toString(36).substring(2,7),xt=`group_stencil_${vt}_${Pt}`,ft=F.reduce((Xt,Gt)=>Math.max(Xt,Gt.zIndex??0),0),Wt=[];if(He==="badge"){let Qt=Je.x-80,zr=Je.y-64/2,kr={id:`stencil_card_${vt}_${Pt}`,type:"rectangle",x:Math.round(Qt),y:Math.round(zr),width:160,height:64,edgeStyle:"round",strokeColor:"#e2e8f0",strokeWidth:1.5,strokeStyle:"solid",fillColor:"#ffffff",fillStyle:"solid",opacity:1,zIndex:ft+1,groupIds:[xt]},to={id:`stencil_icon_${vt}_${Pt}`,type:"image",x:Math.round(Qt+14),y:Math.round(zr+14),width:36,height:36,dataUrl:X,naturalWidth:128,naturalHeight:128,aspectRatioLocked:true,strokeColor:"#000000",strokeWidth:1,strokeStyle:"solid",fillColor:"transparent",fillStyle:"transparent",opacity:1,zIndex:ft+2,groupIds:[xt]},Ut={id:`stencil_text_${vt}_${Pt}`,type:"text",x:Math.round(Qt+58),y:Math.round(zr+20),width:90,height:24,text:$e,fontSize:16,fontFamily:"sans",textAlign:"left",strokeColor:"#111827",strokeWidth:1,strokeStyle:"solid",fillColor:"transparent",fillStyle:"transparent",opacity:1,zIndex:ft+3,groupIds:[xt]};Wt=[kr,to,Ut];}else Wt=[{id:`stencil_logo_${vt}_${Pt}`,type:"image",x:Math.round(Je.x-36),y:Math.round(Je.y-36),width:72,height:72,dataUrl:X,naturalWidth:128,naturalHeight:128,aspectRatioLocked:true,strokeColor:"#000000",strokeWidth:1,strokeStyle:"solid",fillColor:"transparent",fillStyle:"transparent",opacity:1,zIndex:ft+1}];let Tt=Ct([...F,...Wt]);ae(Tt),et(Wt.map(Xt=>Xt.id)),Ye(Tt),R("select"),ue(`\u2728 Added ${$e} stencil!`);},[n,W,F,ae,et,Ye,ue]),Pi=useCallback((X,$e,He)=>{if(n)return;let pt=typeof window<"u"?window.innerWidth:1200,yt=typeof window<"u"?window.innerHeight:800,Je=W({x:pt/2,y:yt/2}),vt=F.reduce((Ut,Cr)=>Math.max(Ut,Cr.zIndex??0),0),Pt=`tbl_${Date.now()}_${Math.random().toString(36).substring(2,7)}`,xt=$e||3,ft=He||3,Wt=[],Tt=[],Xt={},Gt=true,Qt="header-accent";if(X==="swot")xt=2,ft=2,Wt=[200,200],Tt=[140,140],Gt=false,Qt="swot",Xt={"0_0":{text:`\u{1F4AA} STRENGTHS
|
|
125
|
+
Click any tool to draw! \u{1F3A8}`,fontSize:20,fontFamily:"comic",textAlign:"center",strokeColor:"#713f12",strokeWidth:1,strokeStyle:"solid",fillColor:"#fef08a",fillStyle:"solid",stickyColor:"#fef08a",opacity:1,zIndex:6},{id:"starter-5",type:"text",x:80,y:40,width:260,height:60,text:"Ideas Flow Better Here \u270D\uFE0F",fontSize:28,fontFamily:"comic",textAlign:"left",strokeColor:"#4f46e5",strokeWidth:2,strokeStyle:"solid",fillColor:"transparent",fillStyle:"solid",opacity:1,zIndex:7}];function yi(e,t="My Whiteboard",r="#f0f4f8",o="grid"){return e?Array.isArray(e)?{elements:e,name:t,canvasBackground:r,gridStyle:o}:jn(e)?{elements:e.elements||[],name:e.name||t,canvasBackground:e.canvasBackground||r,gridStyle:e.gridStyle||o}:{elements:co,name:t,canvasBackground:r,gridStyle:o}:{elements:co,name:t,canvasBackground:r,gridStyle:o}}var qn=Hn.forwardRef(function({value:t,defaultValue:r,onChange:o,onSave:c,storageKey:d="filekit_sketch_document_v1",boardName:h,onBoardNameChange:s,readOnly:n=false,theme:p="system",panelVariant:i="classic",canvasBackground:l="#f0f4f8",gridStyle:u="grid",onExit:a,guideHref:x,onOpenGuide:m,uiConfig:g,controllerRef:w,className:_="",style:S},E){let z=useMemo(()=>yi(t!==void 0?t:r,h,l,u),[]),D=useRef(null),[P,I]=useState(h!==void 0?h:z.name),[b,f]=useState(z.canvasBackground),[v,C]=useState(z.gridStyle),[M,R]=useState(n?"hand":"select"),[J,oe]=useState(false),[A,U]=useState(cn),[G,Ne]=useState(null),[ne,le]=useState(false),[ce,ke]=useState(false),[Ie,we]=useState(false),[Ge,Ue]=useState(false),[ee,Pe]=useState(false),[xe,O]=useState(false),[Z,Se]=useState(false),[K,de]=useState(false),[re,T]=useState("#ef4444"),[L,q]=useState("fading"),[k,pe]=useState([]),[V,$]=useState(null),[te,fe]=useState(null),be=useRef(null),ue=useCallback(X=>{be.current&&clearTimeout(be.current),fe(X),be.current=setTimeout(()=>{fe(null);},2400);},[]),{elements:F,setElements:ve,setAllElements:ae,selectedIds:ze,selectedElements:Le,selectElement:nt,selectElements:et,clearSelection:gt,addElement:St,updateElement:N,updateSelectedElements:ye,deleteSelectedElements:Te,bringToFront:kt,sendToBack:ut,bringForward:Lt,sendBackward:jt}=Un(z.elements),{pushState:Ye,undo:dr,redo:At,resetHistory:Ke,canUndo:Sr,canRedo:wt}=Vn(z.elements),{camera:or,setCamera:Dt,screenToWorld:W,worldToScreen:y,panBy:H,zoomAtPoint:ie,zoomIn:Y,zoomOut:he,resetCamera:We}=Gn({x:0,y:0,zoom:1}),{resolvedTheme:Oe,isDark:Fe}=nr(p),qe=useMemo(()=>b?Fe&&(b==="#f0f4f8"||b==="#ffffff")?"#121316":!Fe&&(b==="#121316"||b==="#1a1d24"||b==="#0f0f11")?"#f0f4f8":b:Fe?"#121316":"#f0f4f8",[b,Fe]),[dt,j]=useState("saved"),ge=useRef(false),Re=useRef(""),tt=useRef(""),Ae=useRef(null),Ee=useRef(new $o),at=useCallback(X=>{I(X),s?.(X);},[s]);useEffect(()=>{h!==void 0&&h!==P&&I(h);},[h]),useEffect(()=>{if(typeof window>"u")return;let X=z.elements,$e=z.name;if(d)try{let xt=localStorage.getItem(d);if(xt){let ft=JSON.parse(xt);ft&&Array.isArray(ft.elements)&&(X=ft.elements,ft.name&&($e=ft.name),ft.canvasBackground&&f(ft.canvasBackground),ft.gridStyle&&C(ft.gridStyle));}}catch(xt){console.warn("[Sketch] Failed to restore from localStorage:",xt);}ae(X),Ke(X),I($e),Re.current=JSON.stringify(X),tt.current=$e,ge.current=true;let He=D.current,pt=He?.clientWidth||(typeof window<"u"?window.innerWidth:1200),yt=He?.clientHeight||(typeof window<"u"?window.innerHeight:800),Je=Vt(X.length>0?X:co,0),vt=Je.minX+Je.width/2,Pt=Je.minY+Je.height/2;if(n){let xt=Math.max(100,pt-80),ft=Math.max(100,yt-80),Wt=Math.max(.15,Math.min(1.2,Math.min(xt/(Je.width||1),ft/(Je.height||1)))),Tt=Number(Wt.toFixed(2));Dt({x:Math.round(pt/2-vt*Tt),y:Math.round(yt/2-Pt*Tt),zoom:Tt});}else {let xt=g?.showToolBar!==false?60:0;Dt({x:Math.round(pt/2-vt+xt),y:Math.round(yt/2-Pt),zoom:1});}},[d]),useEffect(()=>{if(t===void 0||!ge.current)return;let X=yi(t,P,b,v),$e=JSON.stringify(X.elements);Re.current!==$e&&(Re.current=$e,ae(X.elements),Ke(X.elements)),X.name&&X.name!==tt.current&&(tt.current=X.name,I(X.name));},[t,P,b,v]);let Be=useCallback((X,$e)=>{let He={version:1,name:$e,elements:X,canvasBackground:b,gridStyle:v,createdAt:Date.now(),updatedAt:Date.now()};if(d&&typeof window<"u")try{j("saving"),localStorage.setItem(d,JSON.stringify(He)),Re.current=JSON.stringify(X),tt.current=$e,setTimeout(()=>j("saved"),250);}catch(pt){console.warn("[Sketch] Failed to save document to localStorage:",pt),j("saved");}o?.(He),Ee.current.emit("change",He);},[d,b,v,o]);useEffect(()=>{if(!ge.current)return;let $e=JSON.stringify(F)!==Re.current,He=P!==tt.current;return ($e||He)&&(j("unsaved"),Ae.current&&clearTimeout(Ae.current),Ae.current=setTimeout(()=>{Be(F,P);},800)),()=>{Ae.current&&clearTimeout(Ae.current);}},[F,P,Be]);let Ht=useCallback(()=>{Ae.current&&clearTimeout(Ae.current),Be(F,P);let X={version:1,name:P,elements:F,canvasBackground:b,gridStyle:v,createdAt:Date.now(),updatedAt:Date.now()};c?.(X),ue("Document saved successfully");},[F,P,b,v,Be,c,ue]);useEffect(()=>{let X=$e=>{($e.ctrlKey||$e.metaKey)&&$e.key.toLowerCase()==="s"&&($e.preventDefault(),Ht());};return window.addEventListener("keydown",X),()=>window.removeEventListener("keydown",X)},[Ht]);let Nt=useCallback(X=>{n||R($e=>{let He=typeof X=="function"?X($e):X;return (He==="arrow"||He!=="select"&&He!=="hand")&>(),He});},[n,gt]),yr=useCallback(()=>pe([]),[]),br=useCallback(()=>R("select"),[]),eo=useCallback(()=>{if(n)return;let X=dr();X&&(ae(X),gt(),Ee.current.emit("undo",X));},[n,dr,ae,gt]),qt=useCallback(()=>{if(n)return;let X=At();X&&(ae(X),gt(),Ee.current.emit("redo",X));},[n,At,ae,gt]),Jt=useCallback(()=>{let X=D.current,$e=X?.clientWidth||(typeof window<"u"?window.innerWidth:1200),He=X?.clientHeight||(typeof window<"u"?window.innerHeight:800),pt=Vt(F.length>0?F:co,0),yt=pt.minX+pt.width/2,Je=pt.minY+pt.height/2,vt=!n&&g?.showToolBar!==false?60:0;Dt({x:Math.round($e/2-yt+vt),y:Math.round(He/2-Je),zoom:1});},[F,n,g?.showToolBar,Dt]),Yr=useCallback((X=40)=>{let $e=D.current,He=$e?.clientWidth||(typeof window<"u"?window.innerWidth:1200),pt=$e?.clientHeight||(typeof window<"u"?window.innerHeight:800),yt=F.length>0?F:co,Je=Vt(yt,0);if(Je.width<=0||Je.height<=0){Jt();return}let vt=Je.minX+Je.width/2,Pt=Je.minY+Je.height/2,xt=Math.max(100,He-X*2),ft=Math.max(100,pt-X*2),Wt=xt/Je.width,Tt=ft/Je.height,Xt=Math.min(Wt,Tt),Gt=Math.max(.15,Math.min(1.25,Number(Xt.toFixed(2)))),Qt=!n&&g?.showToolBar!==false?40:0;Dt({x:Math.round(He/2-vt*Gt+Qt),y:Math.round(pt/2-Pt*Gt),zoom:Gt});},[F,n,g?.showToolBar,Jt,Dt]),on=useCallback(()=>{n||(Ye([]),ae([]),gt(),Ae.current&&clearTimeout(Ae.current),Be([],P),Se(false),Ee.current.emit("clear",null),ue("Canvas cleared"));},[n,Ye,ae,gt,P,Be,ue]),Si=useCallback(X=>{n||(Ye(X),ae(X),gt(),We(),Ae.current&&clearTimeout(Ae.current),Be(X,P),ue(`Imported ${X.length} elements`));},[n,Ye,ae,gt,We,P,Be,ue]),nn=useCallback(()=>{if(n||ze.length===0)return;let X=F.filter(Je=>ze.includes(Je.id));if(X.length===0)return;let $e=F.reduce((Je,vt)=>Math.max(Je,vt.zIndex??0),0),{clonedElements:He,newSelectedIds:pt}=Er(X,{deltaX:24,deltaY:24,highestZ:$e}),yt=Ct([...F,...He]);ae(yt),et(pt),Ye(yt);},[n,F,ze,ae,et,Ye]),an=useCallback(()=>{if(n||ze.length<2)return;let X=`grp_${Date.now()}_${Math.random().toString(36).substring(2,7)}`,$e=F.map(He=>{if(ze.includes(He.id)){let pt=He.groupIds||[];return {...He,groupIds:[...pt,X]}}return He});ae($e),Ye($e);},[n,F,ze,ae,Ye]),sn=useCallback(()=>{if(n||ze.length===0)return;let X=new Set;if(F.forEach(He=>{ze.includes(He.id)&&He.groupIds&&He.groupIds.length>0&&X.add(He.groupIds[He.groupIds.length-1]);}),X.size===0)return;let $e=F.map(He=>{if(He.groupIds&&He.groupIds.length>0){let pt=He.groupIds[He.groupIds.length-1];if(X.has(pt)){let yt=He.groupIds.slice(0,-1);return {...He,groupIds:yt.length>0?yt:void 0}}}return He});ae($e),Ye($e);},[n,F,ze,ae,Ye]),Qn=useCallback(async()=>{let X=Le.length>0?Le:F;if(X.length===0){ue("Canvas is empty");return}let $e=await Zr(X,{scale:2,backgroundColor:"transparent",padding:30});ue($e?Le.length>0?`Copied ${Le.length} element${Le.length>1?"s":""} as PNG!`:"Copied canvas image to clipboard as PNG!":"Failed to copy image to clipboard");},[Le,F,ue]),ea=useCallback(X=>{if(n||ze.length<2)return;let $e=zo(F,ze,X);ae($e),Ye($e);},[n,F,ze,ae,Ye]),ta=useCallback(X=>{if(n||ze.length<2)return;let $e=Bo(F,ze,X);ae($e),Ye($e);},[n,F,ze,ae,Ye]),Ci=useCallback(X=>{if(n)return;let $e=new Image;$e.onload=()=>{let He=$e.naturalWidth||400,pt=$e.naturalHeight||300,yt=He,Je=pt,vt=500;(yt>vt||Je>vt)&&(yt>=Je?(Je=Math.round(Je/yt*vt),yt=vt):(yt=Math.round(yt/Je*vt),Je=vt));let Pt={x:typeof window<"u"?window.innerWidth/2:500,y:typeof window<"u"?window.innerHeight/2:400},xt=W(Pt),ft=`el_${Date.now()}_${Math.random().toString(36).substring(2,7)}`,Wt=F.reduce((Xt,Gt)=>Math.max(Xt,Gt.zIndex??0),0),Tt={...A,id:ft,type:"image",x:Math.round(xt.x-yt/2),y:Math.round(xt.y-Je/2),width:yt,height:Je,dataUrl:X,naturalWidth:He,naturalHeight:pt,aspectRatioLocked:true,opacity:1,zIndex:Wt+1};St(Tt),et([ft]),R("select"),Ye([...F,Tt]);},$e.src=X;},[n,A,F,St,et,Ye,W]),Mi=useCallback((X,$e,He)=>{if(n)return;let pt=typeof window<"u"?window.innerWidth:1200,yt=typeof window<"u"?window.innerHeight:800,Je=W({x:pt/2,y:yt/2}),vt=Date.now(),Pt=Math.random().toString(36).substring(2,7),xt=`group_stencil_${vt}_${Pt}`,ft=F.reduce((Xt,Gt)=>Math.max(Xt,Gt.zIndex??0),0),Wt=[];if(He==="badge"){let Qt=Je.x-80,zr=Je.y-64/2,kr={id:`stencil_card_${vt}_${Pt}`,type:"rectangle",x:Math.round(Qt),y:Math.round(zr),width:160,height:64,edgeStyle:"round",strokeColor:"#e2e8f0",strokeWidth:1.5,strokeStyle:"solid",fillColor:"#ffffff",fillStyle:"solid",opacity:1,zIndex:ft+1,groupIds:[xt]},to={id:`stencil_icon_${vt}_${Pt}`,type:"image",x:Math.round(Qt+14),y:Math.round(zr+14),width:36,height:36,dataUrl:X,naturalWidth:128,naturalHeight:128,aspectRatioLocked:true,strokeColor:"#000000",strokeWidth:1,strokeStyle:"solid",fillColor:"transparent",fillStyle:"transparent",opacity:1,zIndex:ft+2,groupIds:[xt]},Ut={id:`stencil_text_${vt}_${Pt}`,type:"text",x:Math.round(Qt+58),y:Math.round(zr+20),width:90,height:24,text:$e,fontSize:16,fontFamily:"sans",textAlign:"left",strokeColor:"#111827",strokeWidth:1,strokeStyle:"solid",fillColor:"transparent",fillStyle:"transparent",opacity:1,zIndex:ft+3,groupIds:[xt]};Wt=[kr,to,Ut];}else Wt=[{id:`stencil_logo_${vt}_${Pt}`,type:"image",x:Math.round(Je.x-36),y:Math.round(Je.y-36),width:72,height:72,dataUrl:X,naturalWidth:128,naturalHeight:128,aspectRatioLocked:true,strokeColor:"#000000",strokeWidth:1,strokeStyle:"solid",fillColor:"transparent",fillStyle:"transparent",opacity:1,zIndex:ft+1}];let Tt=Ct([...F,...Wt]);ae(Tt),et(Wt.map(Xt=>Xt.id)),Ye(Tt),R("select"),ue(`\u2728 Added ${$e} stencil!`);},[n,W,F,ae,et,Ye,ue]),Ni=useCallback((X,$e,He)=>{if(n)return;let pt=typeof window<"u"?window.innerWidth:1200,yt=typeof window<"u"?window.innerHeight:800,Je=W({x:pt/2,y:yt/2}),vt=F.reduce((Ut,Cr)=>Math.max(Ut,Cr.zIndex??0),0),Pt=`tbl_${Date.now()}_${Math.random().toString(36).substring(2,7)}`,xt=$e||3,ft=He||3,Wt=[],Tt=[],Xt={},Gt=true,Qt="header-accent";if(X==="swot")xt=2,ft=2,Wt=[200,200],Tt=[140,140],Gt=false,Qt="swot",Xt={"0_0":{text:`\u{1F4AA} STRENGTHS
|
|
126
126
|
\u2022 Core competency
|
|
127
127
|
\u2022 Proprietary tech`,bold:true,align:"left"},"0_1":{text:`\u26A0\uFE0F WEAKNESSES
|
|
128
128
|
\u2022 Resource gaps
|
|
@@ -130,4 +130,4 @@ Click any tool to draw! \u{1F3A8}`,fontSize:20,fontFamily:"comic",textAlign:"cen
|
|
|
130
130
|
\u2022 New market growth
|
|
131
131
|
\u2022 Partner ecosystem`,bold:true,align:"left"},"1_1":{text:`\u{1F6D1} THREATS
|
|
132
132
|
\u2022 Emerging rivals
|
|
133
|
-
\u2022 Shifting policy`,bold:true,align:"left"}};else if(X==="kanban")xt=4,ft=3,Wt=[180,180,180],Tt=[44,70,70,70],Gt=true,Qt="kanban",Xt={"0_0":{text:"\u{1F4CB} TO DO",bold:true,align:"center"},"0_1":{text:"\u26A1 IN PROGRESS",bold:true,align:"center"},"0_2":{text:"\u2705 DONE",bold:true,align:"center"},"1_0":{text:"Design system setup",align:"left"},"1_1":{text:"Auth flow endpoints",align:"left"},"1_2":{text:"Project kickoff",align:"left"}};else if(X==="matrix")xt=4,ft=3,Wt=[160,140,140],Tt=[44,40,40,40],Gt=true,Qt="header-accent",Xt={"0_0":{text:"Feature",bold:true,align:"center"},"0_1":{text:"Starter",bold:true,align:"center"},"0_2":{text:"Enterprise",bold:true,align:"center"},"1_0":{text:"Realtime Collab",align:"left"},"1_1":{text:"Basic",align:"center"},"1_2":{text:"Unlimited",align:"center"},"2_0":{text:"Cloud Stencils",align:"left"},"2_1":{text:"50+",align:"center"},"2_2":{text:"All Included",align:"center"},"3_0":{text:"Vector PDF Export",align:"left"},"3_1":{text:"Yes",align:"center"},"3_2":{text:"Yes",align:"center"}};else {Wt=Array.from({length:ft},()=>140),Tt=Array.from({length:xt},()=>42);for(let Ut=0;Ut<ft;Ut++)Xt[`0_${Ut}`]={text:`Column ${Ut+1}`,bold:true,align:"center"};}let zr=Wt.reduce((Ut,Cr)=>Ut+Cr,0),kr=Tt.reduce((Ut,Cr)=>Ut+Cr,0),to={...A,id:Pt,type:"table",x:Math.round(Je.x-zr/2),y:Math.round(Je.y-kr/2),width:zr,height:kr,rows:xt,cols:ft,colWidths:Wt,rowHeights:Tt,cells:Xt,hasHeaderRow:Gt,hasHeaderCol:false,tableStyle:Qt,zIndex:vt+1};St(to),et([Pt]),R("select"),Ye([...F,to]),ue("Table inserted");},[n,W,F,A,St,et,Ye,ue]),Ti=useCallback((X,$e)=>{if(n)return;let He=typeof window<"u"?window.innerWidth:1200,pt=typeof window<"u"?window.innerHeight:800,yt=W({x:He/2,y:pt/2}),Je=oi(X,yt,Fe),vt=Je.map(kr=>kr.id),Pt=[];if($e==="replace")Pt=Je,ae(Pt),Ke(Pt),et(vt);else {let kr=F.reduce((Ut,Cr)=>Math.max(Ut,Cr.zIndex??0),0),to=Je.map((Ut,Cr)=>({...Ut,zIndex:kr+1+Cr}));Pt=Ct([...F,...to]),ae(Pt),et(vt),Ye(Pt);}let xt=Vt(Je,60),ft=xt.minX+xt.width/2,Wt=xt.minY+xt.height/2,Tt=140,Xt=Math.max(200,He-Tt*2),Gt=Math.max(200,pt-Tt*2),Qt=Math.max(.35,Math.min(1.15,Math.min(Xt/xt.width,Gt/xt.height)));Dt({x:Math.round(He/2-ft*Qt),y:Math.round(pt/2-Wt*Qt),zoom:Qt}),R("select");let zr=Po.find(kr=>kr.id===X);ue(`\u2728 ${$e==="replace"?"Loaded":"Inserted"} ${zr?.title||"template"}!`);},[n,W,Fe,F,ae,Ke,et,Ye,Dt,ue]),Ei=useCallback(()=>{let X=JSON.stringify(F);dt==="unsaved"||X!==Re.current||P!==tt.current?de(true):a?.();},[dt,F,P,a]),$i=useCallback(()=>{Ae.current&&clearTimeout(Ae.current),Be(F,P),de(false),a?.();},[F,P,Be,a]),zi=useCallback(()=>{Ae.current&&clearTimeout(Ae.current),de(false),a?.();},[a]),Ao=useMemo(()=>({loadDocument:X=>{ae(X.elements||[]),Ke(X.elements||[]),at(X.name||"Untitled"),X.canvasBackground&&f(X.canvasBackground),X.gridStyle&&C(X.gridStyle);},getDocument:()=>({version:1,name:P,elements:F,canvasBackground:b,gridStyle:v,createdAt:Date.now(),updatedAt:Date.now()}),clear:()=>on(),addElement:X=>{let $e={...A,id:X.id||`el_${Date.now()}_${Math.random().toString(36).slice(2,7)}`,...X};return St($e),Ye([...F,$e]),$e},updateElement:(X,$e)=>{N(X,$e);},deleteElements:X=>{let $e=new Set(X),He=F.filter(pt=>!$e.has(pt.id));ae(He),Ye(He);},getElements:()=>F,getSelectedElements:()=>Le,setSelection:X=>et(X),clearSelection:()=>gt(),undo:()=>eo(),redo:()=>qt(),canUndo:()=>Sr,canRedo:()=>wt,getCamera:()=>or,setZoom:X=>Dt($e=>({...$e,zoom:X})),panTo:(X,$e)=>Dt(He=>({...He,x:X,y:$e})),zoomToFit:X=>Yr(X),resetZoom:()=>Dt(X=>({...X,zoom:1})),on:(X,$e)=>Ee.current.on(X,$e),destroy:()=>Ee.current.clear()}),[P,F,Le,b,v,on,A,St,N,Te,et,gt,eo,qt,Sr,wt,or,Dt,Jt,Yr,Ye,ae,Ke,at]);useImperativeHandle(E,()=>Ao,[Ao]),useImperativeHandle(w,()=>Ao,[Ao]);let Bi=g?.showTopBar??true,Ii=!n&&(g?.showToolBar??true),Li=!n&&(g?.showPropertiesPanel??true),Ai=g?.showMinimap??true,ra=g?.showShortcutsButton??true,oa=g?.showGuideButton??true,na=g?.showPresentation??true,ln=!n&&(g?.showTechStencils??true),dn=!n&&(g?.showTemplates??true),Ri=F.some(X=>X.type==="frame"),Di=F.filter(X=>X.type==="frame").length;return jsx(Ro.Provider,{value:{theme:p,resolvedTheme:Oe,isDark:Fe,panelVariant:i},children:jsxs("div",{ref:D,className:`fk-sketch-root ${Fe?"dark":""} fk-panel-${i} relative w-full h-full min-h-[500px] overflow-hidden select-none font-inter touch-none ${Fe?"bg-[#121316]":"bg-[#f0f4f8]"} ${_}`,"data-theme":Oe,"data-panel":i,style:S,children:[jsxs("div",{"aria-hidden":"true",className:"fixed -left-[9999px] -top-[9999px] pointer-events-none opacity-0 select-none overflow-hidden h-0 w-0",children:[jsx("span",{style:{fontFamily:"'Patrick Hand SC', sans-serif"},children:"THE QUICK BROWN FOX"}),jsx("span",{style:{fontFamily:"'Fuzzy Bubbles', cursive, sans-serif",fontWeight:400},children:"The quick brown fox"}),jsx("span",{style:{fontFamily:"'Fuzzy Bubbles', cursive, sans-serif",fontWeight:700},children:"The quick brown fox"}),jsx("span",{style:{fontFamily:"'Comic Neue', cursive, sans-serif"},children:"The quick brown fox"})]}),Bi&&!ce&&jsx(Xn,{uiConfig:g,boardName:P,setBoardName:at,onOpenExport:()=>le(true),onOpenTemplates:dn?()=>O(X=>!X):void 0,onCopyImage:Qn,onStartPresentation:na?()=>ke(true):void 0,hasFrames:Ri,frameCount:Di,isFramesOutlineOpen:Ge,onToggleFramesOutline:()=>Ue(X=>!X),onOpenTechStencils:ln?()=>Pe(X=>!X):void 0,isTechStencilsOpen:ee,onClearBoard:()=>Se(true),onExit:a?Ei:void 0,saveStatus:dt,onManualSave:Ht,elementCount:F.length,zoom:or.zoom,zoomIn:Y,zoomOut:he,resetCamera:Jt,canUndo:Sr,canRedo:wt,undo:eo,redo:qt,tool:M,setTool:Nt,gridStyle:v,setGridStyle:C,isSpotlightActive:Ie,onToggleSpotlight:()=>we(X=>!X)}),Ii&&!ce&&jsx(Fn,{uiConfig:g,tool:M,setTool:Nt,isToolLocked:J,setIsToolLocked:oe,onInsertImage:Mi,onOpenTemplates:dn?()=>O(X=>!X):void 0,isTemplatesOpen:xe,onOpenTechStencils:ln?()=>Pe(X=>!X):void 0,isTechStencilsOpen:ee,onInsertTablePreset:Pi}),Li&&!ce&&M!=="laser"&&jsx(En,{uiConfig:g,selectedElements:Le,updateSelectedElements:ye,deleteSelectedElements:Te,duplicateSelectedElements:nn,groupSelectedElements:an,ungroupSelectedElements:sn,alignSelectedElements:ea,distributeSelectedElements:ta,bringToFront:kt,sendToBack:ut,bringForward:Lt,sendBackward:jt,defaultStyles:A,setDefaultStyles:U,canvasBackground:qe,setCanvasBackground:f}),!n&&(g?.showFloatingDock??true)&&!ce&&!G&&M!=="laser"&&jsx(wn,{selectedElements:Le,updateSelectedElements:ye,deleteSelectedElements:Te,duplicateSelectedElements:nn,groupSelectedElements:an,ungroupSelectedElements:sn,alignSelectedElements:ea,distributeSelectedElements:ta,copySelectedImage:Qn,bringToFront:kt,sendToBack:ut,camera:or,worldToScreen:y,onEditText:X=>Ne(X.id),onToggleSpotlight:()=>we(X=>!X)}),jsx(xn,{elements:F,setElements:ve,selectedIds:ze,selectElement:nt,selectElements:et,clearSelection:gt,addElement:St,updateElement:N,deleteSelectedElements:Te,duplicateSelectedElements:nn,groupSelectedElements:an,ungroupSelectedElements:sn,pushHistory:Ye,undo:eo,redo:qt,camera:or,setCamera:Dt,screenToWorld:W,worldToScreen:y,panBy:H,zoomAtPoint:ie,tool:M,setTool:Nt,isToolLocked:J,setIsToolLocked:oe,gridStyle:v,defaultStyles:A,editingElementId:G,setEditingElementId:Ne,canvasBackground:qe,isPresentationOpen:ce,laserColor:re,laserMode:L,laserStrokes:k,setLaserStrokes:pe,laserPointerPos:V,setLaserPointerPos:$,readOnly:n,onDoubleClick:()=>Yr()}),!ce&&M==="laser"&&jsx(_n,{laserColor:re,setLaserColor:T,laserMode:L,setLaserMode:q,onClearLaser:yr,laserStrokeCount:k.filter(X=>X.mode==="persistent").length,onExitLaser:br}),(ra||oa)&&!ce&&jsx($n,{guideHref:x,onOpenGuide:m,showShortcutsButton:ra,showGuideButton:oa}),Ai&&!ce&&jsx(Mn,{elements:F,camera:or,setCamera:Dt}),jsx(kn,{isOpen:ne,onClose:()=>le(false),elements:F,selectedIds:ze,onImportElements:Ci,boardName:P,canvasBackground:qe,gridStyle:v,uiConfig:g}),na&&jsx(Nn,{isOpen:ce,onClose:()=>ke(false),elements:F,selectedIds:ze,camera:or,setCamera:Dt,isSpotlightActive:Ie,onToggleSpotlight:()=>we(X=>!X)}),jsx(vn,{isOpen:Ge,onClose:()=>Ue(false),elements:F,setElements:ve,selectedIds:ze,selectElements:et,updateElement:N,pushHistory:Ye,camera:or,setCamera:Dt,onStartPresentation:()=>{Ue(false),ke(true);}}),dn&&jsx(Dn,{isOpen:xe,onClose:()=>O(false),onSelectTemplate:Ti,hasExistingElements:F.length>0}),ln&&jsx(Rn,{isOpen:ee,onClose:()=>Pe(false),onInsertTechStencil:Ni}),jsx(Bn,{isActive:Ie,onClose:()=>we(false),selectedElements:Le,allElements:F,camera:or,worldToScreen:y,screenToWorld:W,onSelectElement:nt,isDark:Fe}),(g?.showContextMenu??true)&&!n&&jsx(mn,{elements:F,selectedIds:ze,boardName:P,onManualSave:Ht,onClearBoard:()=>Se(true),gridStyle:v,setGridStyle:C,resetCamera:Jt,canvasBackground:qe}),Z&&jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-xs animate-in fade-in duration-150",children:jsxs("div",{className:"w-full max-w-md rounded-2xl bg-[#f0f3f8] dark:bg-[#1a1d24] border border-white/60 dark:border-white/[0.08] p-6 shadow-2xl",children:[jsxs("div",{className:"flex items-start gap-4",children:[jsx("div",{className:"w-10 h-10 rounded-xl bg-red-100 dark:bg-red-950/60 text-red-600 dark:text-red-400 flex items-center justify-center shrink-0 border border-red-200 dark:border-red-900/50",children:jsx(IconTrash,{size:20,stroke:2})}),jsxs("div",{children:[jsx("h3",{className:"text-base font-semibold text-neutral-900 dark:text-neutral-100",children:"Clear whiteboard canvas?"}),jsxs("p",{className:"text-sm text-neutral-600 dark:text-neutral-400 mt-1.5 leading-relaxed",children:["This will remove all elements on the current board. You can still undo this action using"," ",jsx("kbd",{className:"px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 text-xs font-mono",children:"Ctrl+Z"}),"."]})]})]}),jsxs("div",{className:"mt-6 flex items-center justify-end gap-2.5",children:[jsx("button",{type:"button",onClick:()=>Se(false),className:"rounded-lg h-9 px-4 text-sm font-medium border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-700 cursor-pointer",children:"Cancel"}),jsx("button",{type:"button",onClick:on,className:"rounded-lg h-9 px-4 text-sm font-medium bg-red-600 hover:bg-red-700 text-white cursor-pointer shadow-sm",children:"Clear Canvas"})]})]})}),K&&jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-xs animate-in fade-in duration-150",children:jsxs("div",{className:"w-full max-w-md rounded-2xl bg-[#f0f3f8] dark:bg-[#1a1d24] border border-white/60 dark:border-white/[0.08] p-6 shadow-2xl",children:[jsxs("div",{className:"flex items-start gap-4",children:[jsx("div",{className:"w-10 h-10 rounded-xl bg-amber-100 dark:bg-amber-950/60 text-amber-600 dark:text-amber-400 flex items-center justify-center shrink-0 border border-amber-200 dark:border-amber-900/50",children:jsx(IconLogout,{size:20,stroke:2})}),jsxs("div",{children:[jsx("h3",{className:"text-base font-semibold text-neutral-900 dark:text-neutral-100",children:"Save changes before exiting?"}),jsx("p",{className:"text-sm text-neutral-600 dark:text-neutral-400 mt-1.5 leading-relaxed",children:"You have unsaved changes on your board. Would you like to save your work before leaving?"})]})]}),jsxs("div",{className:"mt-6 flex items-center justify-end gap-2.5",children:[jsx("button",{type:"button",onClick:zi,className:"rounded-lg h-9 px-3.5 text-xs text-neutral-500 hover:text-red-600 dark:text-neutral-400 dark:hover:text-red-400 cursor-pointer",children:"Discard Changes"}),jsx("button",{type:"button",onClick:()=>de(false),className:"rounded-lg h-9 px-4 text-sm font-medium border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-700 cursor-pointer",children:"Cancel"}),jsx("button",{type:"button",onClick:$i,className:"rounded-lg h-9 px-4 text-sm font-semibold bg-indigo-600 hover:bg-indigo-700 text-white cursor-pointer shadow-sm",children:"Save & Exit"})]})]})}),te&&jsx("div",{className:"fixed bottom-6 left-1/2 -translate-x-1/2 z-50 pointer-events-none animate-in fade-in slide-in-from-bottom-3 duration-150",children:jsxs("div",{className:"flex items-center gap-2 px-4 py-2.5 rounded-full bg-neutral-900/95 dark:bg-neutral-100/95 text-white dark:text-neutral-900 text-xs font-medium shadow-2xl backdrop-blur-md border border-white/10 dark:border-black/10",children:[jsx("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:"text-emerald-400 dark:text-emerald-600 shrink-0",children:jsx("polyline",{points:"20 6 9 17 4 12"})}),jsx("span",{children:te})]})})]})})});var tc=forwardRef(function({value:t,defaultValue:r,theme:o="system",canvasBackground:c,gridStyle:d="dots",interactive:h=true,autoFit:s=true,showCopyButton:n=true,showZoomControls:p=false,title:i,uiConfig:l,controllerRef:u,className:a="",style:x},m){let g=useRef(null),[w,_]=useState(false),[S,E]=useState(100);useImperativeHandle(m,()=>g.current,[]),useImperativeHandle(u,()=>g.current,[]);let z=useMemo(()=>{let b=t??r;return b?Array.isArray(b)?b:"elements"in b&&Array.isArray(b.elements)?b.elements:[]:[]},[t,r]),D=useMemo(()=>t?Array.isArray(t)?`${t.length}_${t[0]?.id??""}`:"elements"in t&&Array.isArray(t.elements)?`${t.elements.length}_${t.name??""}`:"":"",[t]);useEffect(()=>{if(!s)return;let b=setTimeout(()=>{g.current?.zoomToFit();},60),f=()=>{g.current?.zoomToFit();};return window.addEventListener("resize",f),()=>{clearTimeout(b),window.removeEventListener("resize",f);}},[s,D]),useEffect(()=>{if(!p)return;let b=g.current;if(!b)return;let f=b.on("change",()=>{let v=b.getCamera();E(Math.round(v.zoom*100));});return ()=>f()},[p]);let P=useCallback(async()=>{if(w)return;let b=g.current?.getElements()??z;if(b.length===0)return;await Zr(b,{scale:2,backgroundColor:c})&&(_(true),setTimeout(()=>_(false),2e3));},[w,z,c]),I=useMemo(()=>({showTopBar:false,showToolBar:false,showPropertiesPanel:false,showMinimap:false,showShortcutsButton:false,showGuideButton:false,showPresentation:false,showTechStencils:false,showTemplates:false,...l}),[l]);return jsxs("div",{className:`relative w-full h-full min-h-[300px] overflow-hidden rounded-[14px] border border-black/[0.08] dark:border-white/[0.08] ${h?"":"pointer-events-none select-none"} ${a}`,style:x,children:[jsx(qn,{value:t,defaultValue:r,boardName:i,theme:o,canvasBackground:c,gridStyle:d,readOnly:true,uiConfig:I,controllerRef:g}),i&&jsx("div",{className:"absolute top-3 left-3 z-20 pointer-events-none select-none",children:jsx("span",{className:"px-2.5 py-1 text-xs font-semibold tracking-tight rounded-md bg-white/90 dark:bg-neutral-900/90 text-neutral-800 dark:text-neutral-200 shadow-sm border border-black/5 dark:border-white/10 backdrop-blur-md",children:i})}),n&&jsx("div",{className:"absolute top-3 right-3 z-20 pointer-events-auto",children:jsx("button",{type:"button",onClick:P,title:"Copy diagram as PNG",className:"h-7 px-2.5 rounded-lg flex items-center gap-1.5 text-[11px] font-medium transition-all cursor-pointer bg-white/90 dark:bg-neutral-900/90 text-neutral-700 dark:text-neutral-200 border border-black/10 dark:border-white/10 shadow-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 active:scale-95 backdrop-blur-md",children:w?jsxs(Fragment,{children:[jsx(IconCheck,{size:13,className:"text-emerald-500"}),jsx("span",{className:"text-emerald-600 dark:text-emerald-400 font-semibold",children:"Copied!"})]}):jsxs(Fragment,{children:[jsx(IconCopy,{size:13}),jsx("span",{children:"Copy"})]})})}),p&&jsxs("div",{className:"absolute bottom-3 left-3 z-20 pointer-events-auto flex items-center gap-1 p-0.5 rounded-lg bg-white/90 dark:bg-neutral-900/90 border border-black/10 dark:border-white/10 shadow-sm backdrop-blur-md text-neutral-700 dark:text-neutral-300",children:[jsx("button",{type:"button",onClick:()=>{let b=g.current;if(!b)return;let f=b.getCamera();b.setZoom(Math.max(.1,f.zoom/1.2));},className:"h-6 w-6 flex items-center justify-center rounded hover:bg-black/5 dark:hover:bg-white/10 transition-colors",title:"Zoom Out",children:jsx(IconMinus,{size:12})}),jsxs("span",{className:"px-1 text-[10px] font-mono font-medium",children:[S,"%"]}),jsx("button",{type:"button",onClick:()=>{let b=g.current;if(!b)return;let f=b.getCamera();b.setZoom(Math.min(5,f.zoom*1.2));},className:"h-6 w-6 flex items-center justify-center rounded hover:bg-black/5 dark:hover:bg-white/10 transition-colors",title:"Zoom In",children:jsx(IconPlus,{size:12})}),jsx("button",{type:"button",onClick:()=>g.current?.zoomToFit(),className:"h-6 w-6 flex items-center justify-center rounded hover:bg-black/5 dark:hover:bg-white/10 transition-colors ml-0.5",title:"Zoom to Fit",children:jsx(IconMaximize,{size:12})})]})]})});export{cn as DEFAULT_ELEMENT_STYLES,co as DEFAULT_STARTER_ELEMENTS,Po as DIAGRAM_TEMPLATES,On as SKETCH_DOCUMENT_VERSION,xn as SketchBoardCanvas,mn as SketchBoardContextMenu,kn as SketchBoardExportModal,wn as SketchBoardFloatingDock,vn as SketchBoardFramesOutline,_n as SketchBoardLaserDock,Mn as SketchBoardMinimap,Nn as SketchBoardPresentationMode,En as SketchBoardPropertiesPanel,$n as SketchBoardShortcutsModal,Bn as SketchBoardSpotlightOverlay,Rn as SketchBoardTechStencilsModal,Dn as SketchBoardTemplatesFlyout,Fn as SketchBoardToolBar,Xn as SketchBoardTopBar,qn as SketchEditor,$o as SketchEventEmitter,tc as SketchViewer,In as TECH_CATEGORIES,Ln as TECH_ICONS,zo as alignElements,Er as cloneSketchBoardElements,Zr as copyImageToClipboard,Fd as createEmptyDocument,Bo as distributeElements,vr as downloadFile,vo as exportFrameToPng,no as exportToPng,wo as exportToSvg,_o as exportWhiteboardToPdf,Vt as getElementsBoundingBox,jn as isValidSketchDocument,Yd as parseDocument,Vr as saveOrDownloadFile,Hd as serializeDocument,Ct as updateBoundArrows,ho as useHydrated,Gn as useSketchBoardCamera,Un as useSketchBoardElements,Vn as useSketchBoardHistory,nr as useSketchTheme,po as useSketchThemeContext};
|
|
133
|
+
\u2022 Shifting policy`,bold:true,align:"left"}};else if(X==="kanban")xt=4,ft=3,Wt=[180,180,180],Tt=[44,70,70,70],Gt=true,Qt="kanban",Xt={"0_0":{text:"\u{1F4CB} TO DO",bold:true,align:"center"},"0_1":{text:"\u26A1 IN PROGRESS",bold:true,align:"center"},"0_2":{text:"\u2705 DONE",bold:true,align:"center"},"1_0":{text:"Design system setup",align:"left"},"1_1":{text:"Auth flow endpoints",align:"left"},"1_2":{text:"Project kickoff",align:"left"}};else if(X==="matrix")xt=4,ft=3,Wt=[160,140,140],Tt=[44,40,40,40],Gt=true,Qt="header-accent",Xt={"0_0":{text:"Feature",bold:true,align:"center"},"0_1":{text:"Starter",bold:true,align:"center"},"0_2":{text:"Enterprise",bold:true,align:"center"},"1_0":{text:"Realtime Collab",align:"left"},"1_1":{text:"Basic",align:"center"},"1_2":{text:"Unlimited",align:"center"},"2_0":{text:"Cloud Stencils",align:"left"},"2_1":{text:"50+",align:"center"},"2_2":{text:"All Included",align:"center"},"3_0":{text:"Vector PDF Export",align:"left"},"3_1":{text:"Yes",align:"center"},"3_2":{text:"Yes",align:"center"}};else {Wt=Array.from({length:ft},()=>140),Tt=Array.from({length:xt},()=>42);for(let Ut=0;Ut<ft;Ut++)Xt[`0_${Ut}`]={text:`Column ${Ut+1}`,bold:true,align:"center"};}let zr=Wt.reduce((Ut,Cr)=>Ut+Cr,0),kr=Tt.reduce((Ut,Cr)=>Ut+Cr,0),to={...A,id:Pt,type:"table",x:Math.round(Je.x-zr/2),y:Math.round(Je.y-kr/2),width:zr,height:kr,rows:xt,cols:ft,colWidths:Wt,rowHeights:Tt,cells:Xt,hasHeaderRow:Gt,hasHeaderCol:false,tableStyle:Qt,zIndex:vt+1};St(to),et([Pt]),R("select"),Ye([...F,to]),ue("Table inserted");},[n,W,F,A,St,et,Ye,ue]),Pi=useCallback((X,$e)=>{if(n)return;let He=typeof window<"u"?window.innerWidth:1200,pt=typeof window<"u"?window.innerHeight:800,yt=W({x:He/2,y:pt/2}),Je=ri(X,yt,Fe),vt=Je.map(kr=>kr.id),Pt=[];if($e==="replace")Pt=Je,ae(Pt),Ke(Pt),et(vt);else {let kr=F.reduce((Ut,Cr)=>Math.max(Ut,Cr.zIndex??0),0),to=Je.map((Ut,Cr)=>({...Ut,zIndex:kr+1+Cr}));Pt=Ct([...F,...to]),ae(Pt),et(vt),Ye(Pt);}let xt=Vt(Je,60),ft=xt.minX+xt.width/2,Wt=xt.minY+xt.height/2,Tt=140,Xt=Math.max(200,He-Tt*2),Gt=Math.max(200,pt-Tt*2),Qt=Math.max(.35,Math.min(1.15,Math.min(Xt/xt.width,Gt/xt.height)));Dt({x:Math.round(He/2-ft*Qt),y:Math.round(pt/2-Wt*Qt),zoom:Qt}),R("select");let zr=Po.find(kr=>kr.id===X);ue(`\u2728 ${$e==="replace"?"Loaded":"Inserted"} ${zr?.title||"template"}!`);},[n,W,Fe,F,ae,Ke,et,Ye,Dt,ue]),Ti=useCallback(()=>{let X=JSON.stringify(F);dt==="unsaved"||X!==Re.current||P!==tt.current?de(true):a?.();},[dt,F,P,a]),Ei=useCallback(()=>{Ae.current&&clearTimeout(Ae.current),Be(F,P),de(false),a?.();},[F,P,Be,a]),$i=useCallback(()=>{Ae.current&&clearTimeout(Ae.current),de(false),a?.();},[a]),Ao=useMemo(()=>({loadDocument:X=>{ae(X.elements||[]),Ke(X.elements||[]),at(X.name||"Untitled"),X.canvasBackground&&f(X.canvasBackground),X.gridStyle&&C(X.gridStyle);},getDocument:()=>({version:1,name:P,elements:F,canvasBackground:b,gridStyle:v,createdAt:Date.now(),updatedAt:Date.now()}),clear:()=>on(),addElement:X=>{let $e={...A,id:X.id||`el_${Date.now()}_${Math.random().toString(36).slice(2,7)}`,...X};return St($e),Ye([...F,$e]),$e},updateElement:(X,$e)=>{N(X,$e);},deleteElements:X=>{let $e=new Set(X),He=F.filter(pt=>!$e.has(pt.id));ae(He),Ye(He);},getElements:()=>F,getSelectedElements:()=>Le,setSelection:X=>et(X),clearSelection:()=>gt(),undo:()=>eo(),redo:()=>qt(),canUndo:()=>Sr,canRedo:()=>wt,getCamera:()=>or,setZoom:X=>Dt($e=>({...$e,zoom:X})),panTo:(X,$e)=>Dt(He=>({...He,x:X,y:$e})),zoomToFit:X=>Yr(X),resetZoom:()=>Dt(X=>({...X,zoom:1})),on:(X,$e)=>Ee.current.on(X,$e),destroy:()=>Ee.current.clear()}),[P,F,Le,b,v,on,A,St,N,Te,et,gt,eo,qt,Sr,wt,or,Dt,Jt,Yr,Ye,ae,Ke,at]);useImperativeHandle(E,()=>Ao,[Ao]),useImperativeHandle(w,()=>Ao,[Ao]);let zi=g?.showTopBar??true,Bi=!n&&(g?.showToolBar??true),Ii=!n&&(g?.showPropertiesPanel??true),Li=g?.showMinimap??true,ra=g?.showShortcutsButton??true,oa=g?.showGuideButton??true,na=g?.showPresentation??true,ln=!n&&(g?.showTechStencils??true),dn=!n&&(g?.showTemplates??true),Ai=F.some(X=>X.type==="frame"),Ri=F.filter(X=>X.type==="frame").length;return jsx(Ro.Provider,{value:{theme:p,resolvedTheme:Oe,isDark:Fe,panelVariant:i},children:jsxs("div",{ref:D,className:`fk-sketch-root ${Fe?"dark":""} fk-panel-${i} relative w-full h-full min-h-[500px] overflow-hidden select-none font-inter touch-none ${Fe?"bg-[#121316]":"bg-[#f0f4f8]"} ${_}`,"data-theme":Oe,"data-panel":i,style:S,children:[jsxs("div",{"aria-hidden":"true",className:"fixed -left-[9999px] -top-[9999px] pointer-events-none opacity-0 select-none overflow-hidden h-0 w-0",children:[jsx("span",{style:{fontFamily:"'Patrick Hand SC', sans-serif"},children:"THE QUICK BROWN FOX"}),jsx("span",{style:{fontFamily:"'Fuzzy Bubbles', cursive, sans-serif",fontWeight:400},children:"The quick brown fox"}),jsx("span",{style:{fontFamily:"'Fuzzy Bubbles', cursive, sans-serif",fontWeight:700},children:"The quick brown fox"}),jsx("span",{style:{fontFamily:"'Comic Neue', cursive, sans-serif"},children:"The quick brown fox"})]}),zi&&!ce&&jsx(Xn,{uiConfig:g,boardName:P,setBoardName:at,onOpenExport:()=>le(true),onOpenTemplates:dn?()=>O(X=>!X):void 0,onCopyImage:Qn,onStartPresentation:na?()=>ke(true):void 0,hasFrames:Ai,frameCount:Ri,isFramesOutlineOpen:Ge,onToggleFramesOutline:()=>Ue(X=>!X),onOpenTechStencils:ln?()=>Pe(X=>!X):void 0,isTechStencilsOpen:ee,onClearBoard:()=>Se(true),onExit:a?Ti:void 0,saveStatus:dt,onManualSave:Ht,elementCount:F.length,zoom:or.zoom,zoomIn:Y,zoomOut:he,resetCamera:Jt,canUndo:Sr,canRedo:wt,undo:eo,redo:qt,tool:M,setTool:Nt,gridStyle:v,setGridStyle:C,isSpotlightActive:Ie,onToggleSpotlight:()=>we(X=>!X)}),Bi&&!ce&&jsx(Fn,{uiConfig:g,tool:M,setTool:Nt,isToolLocked:J,setIsToolLocked:oe,onInsertImage:Ci,onOpenTemplates:dn?()=>O(X=>!X):void 0,isTemplatesOpen:xe,onOpenTechStencils:ln?()=>Pe(X=>!X):void 0,isTechStencilsOpen:ee,onInsertTablePreset:Ni}),Ii&&!ce&&M!=="laser"&&jsx(En,{uiConfig:g,selectedElements:Le,updateSelectedElements:ye,deleteSelectedElements:Te,duplicateSelectedElements:nn,groupSelectedElements:an,ungroupSelectedElements:sn,alignSelectedElements:ea,distributeSelectedElements:ta,bringToFront:kt,sendToBack:ut,bringForward:Lt,sendBackward:jt,defaultStyles:A,setDefaultStyles:U,canvasBackground:qe,setCanvasBackground:f}),!n&&(g?.showFloatingDock??true)&&!ce&&!G&&M!=="laser"&&jsx(wn,{selectedElements:Le,updateSelectedElements:ye,deleteSelectedElements:Te,duplicateSelectedElements:nn,groupSelectedElements:an,ungroupSelectedElements:sn,alignSelectedElements:ea,distributeSelectedElements:ta,copySelectedImage:Qn,bringToFront:kt,sendToBack:ut,camera:or,worldToScreen:y,onEditText:X=>Ne(X.id),onToggleSpotlight:()=>we(X=>!X)}),jsx(xn,{elements:F,setElements:ve,selectedIds:ze,selectElement:nt,selectElements:et,clearSelection:gt,addElement:St,updateElement:N,deleteSelectedElements:Te,duplicateSelectedElements:nn,groupSelectedElements:an,ungroupSelectedElements:sn,pushHistory:Ye,undo:eo,redo:qt,camera:or,setCamera:Dt,screenToWorld:W,worldToScreen:y,panBy:H,zoomAtPoint:ie,tool:M,setTool:Nt,isToolLocked:J,setIsToolLocked:oe,gridStyle:v,defaultStyles:A,editingElementId:G,setEditingElementId:Ne,canvasBackground:qe,isPresentationOpen:ce,laserColor:re,laserMode:L,laserStrokes:k,setLaserStrokes:pe,laserPointerPos:V,setLaserPointerPos:$,readOnly:n,onDoubleClick:()=>Yr()}),!ce&&M==="laser"&&jsx(_n,{laserColor:re,setLaserColor:T,laserMode:L,setLaserMode:q,onClearLaser:yr,laserStrokeCount:k.filter(X=>X.mode==="persistent").length,onExitLaser:br}),(ra||oa)&&!ce&&jsx($n,{guideHref:x,onOpenGuide:m,showShortcutsButton:ra,showGuideButton:oa}),Li&&!ce&&jsx(Mn,{elements:F,camera:or,setCamera:Dt}),jsx(kn,{isOpen:ne,onClose:()=>le(false),elements:F,selectedIds:ze,onImportElements:Si,boardName:P,canvasBackground:qe,gridStyle:v,uiConfig:g}),na&&jsx(Nn,{isOpen:ce,onClose:()=>ke(false),elements:F,selectedIds:ze,camera:or,setCamera:Dt,isSpotlightActive:Ie,onToggleSpotlight:()=>we(X=>!X)}),jsx(vn,{isOpen:Ge,onClose:()=>Ue(false),elements:F,setElements:ve,selectedIds:ze,selectElements:et,updateElement:N,pushHistory:Ye,camera:or,setCamera:Dt,onStartPresentation:()=>{Ue(false),ke(true);}}),dn&&jsx(Dn,{isOpen:xe,onClose:()=>O(false),onSelectTemplate:Pi,hasExistingElements:F.length>0}),ln&&jsx(Rn,{isOpen:ee,onClose:()=>Pe(false),onInsertTechStencil:Mi}),jsx(Bn,{isActive:Ie,onClose:()=>we(false),selectedElements:Le,allElements:F,camera:or,worldToScreen:y,screenToWorld:W,onSelectElement:nt,isDark:Fe}),(g?.showContextMenu??true)&&!n&&jsx(mn,{elements:F,selectedIds:ze,boardName:P,onManualSave:Ht,onClearBoard:()=>Se(true),gridStyle:v,setGridStyle:C,resetCamera:Jt,canvasBackground:qe}),Z&&jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-xs animate-in fade-in duration-150",children:jsxs("div",{className:"w-full max-w-md rounded-2xl bg-[#f0f3f8] dark:bg-[#1a1d24] border border-white/60 dark:border-white/[0.08] p-6 shadow-2xl",children:[jsxs("div",{className:"flex items-start gap-4",children:[jsx("div",{className:"w-10 h-10 rounded-xl bg-red-100 dark:bg-red-950/60 text-red-600 dark:text-red-400 flex items-center justify-center shrink-0 border border-red-200 dark:border-red-900/50",children:jsx(IconTrash,{size:20,stroke:2})}),jsxs("div",{children:[jsx("h3",{className:"text-base font-semibold text-neutral-900 dark:text-neutral-100",children:"Clear whiteboard canvas?"}),jsxs("p",{className:"text-sm text-neutral-600 dark:text-neutral-400 mt-1.5 leading-relaxed",children:["This will remove all elements on the current board. You can still undo this action using"," ",jsx("kbd",{className:"px-1.5 py-0.5 rounded bg-neutral-200 dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 text-xs font-mono",children:"Ctrl+Z"}),"."]})]})]}),jsxs("div",{className:"mt-6 flex items-center justify-end gap-2.5",children:[jsx("button",{type:"button",onClick:()=>Se(false),className:"rounded-lg h-9 px-4 text-sm font-medium border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-700 cursor-pointer",children:"Cancel"}),jsx("button",{type:"button",onClick:on,className:"rounded-lg h-9 px-4 text-sm font-medium bg-red-600 hover:bg-red-700 text-white cursor-pointer shadow-sm",children:"Clear Canvas"})]})]})}),K&&jsx("div",{className:"fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-xs animate-in fade-in duration-150",children:jsxs("div",{className:"w-full max-w-md rounded-2xl bg-[#f0f3f8] dark:bg-[#1a1d24] border border-white/60 dark:border-white/[0.08] p-6 shadow-2xl",children:[jsxs("div",{className:"flex items-start gap-4",children:[jsx("div",{className:"w-10 h-10 rounded-xl bg-amber-100 dark:bg-amber-950/60 text-amber-600 dark:text-amber-400 flex items-center justify-center shrink-0 border border-amber-200 dark:border-amber-900/50",children:jsx(IconLogout,{size:20,stroke:2})}),jsxs("div",{children:[jsx("h3",{className:"text-base font-semibold text-neutral-900 dark:text-neutral-100",children:"Save changes before exiting?"}),jsx("p",{className:"text-sm text-neutral-600 dark:text-neutral-400 mt-1.5 leading-relaxed",children:"You have unsaved changes on your board. Would you like to save your work before leaving?"})]})]}),jsxs("div",{className:"mt-6 flex items-center justify-end gap-2.5",children:[jsx("button",{type:"button",onClick:$i,className:"rounded-lg h-9 px-3.5 text-xs text-neutral-500 hover:text-red-600 dark:text-neutral-400 dark:hover:text-red-400 cursor-pointer",children:"Discard Changes"}),jsx("button",{type:"button",onClick:()=>de(false),className:"rounded-lg h-9 px-4 text-sm font-medium border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-800 text-neutral-800 dark:text-neutral-200 hover:bg-neutral-50 dark:hover:bg-neutral-700 cursor-pointer",children:"Cancel"}),jsx("button",{type:"button",onClick:Ei,className:"rounded-lg h-9 px-4 text-sm font-semibold bg-indigo-600 hover:bg-indigo-700 text-white cursor-pointer shadow-sm",children:"Save & Exit"})]})]})}),te&&jsx("div",{className:"fixed bottom-6 left-1/2 -translate-x-1/2 z-50 pointer-events-none animate-in fade-in slide-in-from-bottom-3 duration-150",children:jsxs("div",{className:"flex items-center gap-2 px-4 py-2.5 rounded-full bg-neutral-900/95 dark:bg-neutral-100/95 text-white dark:text-neutral-900 text-xs font-medium shadow-2xl backdrop-blur-md border border-white/10 dark:border-black/10",children:[jsx("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",className:"text-emerald-400 dark:text-emerald-600 shrink-0",children:jsx("polyline",{points:"20 6 9 17 4 12"})}),jsx("span",{children:te})]})})]})})});var rc=forwardRef(function({value:t,defaultValue:r,theme:o="system",canvasBackground:c,gridStyle:d="dots",interactive:h=true,autoFit:s=true,showCopyButton:n=true,showZoomControls:p=false,title:i,uiConfig:l,controllerRef:u,className:a="",style:x},m){let g=useRef(null),[w,_]=useState(false),[S,E]=useState(100);useImperativeHandle(m,()=>g.current,[]),useImperativeHandle(u,()=>g.current,[]);let z=useMemo(()=>{let b=t??r;return b?Array.isArray(b)?b:"elements"in b&&Array.isArray(b.elements)?b.elements:[]:[]},[t,r]),D=useMemo(()=>t?Array.isArray(t)?`${t.length}_${t[0]?.id??""}`:"elements"in t&&Array.isArray(t.elements)?`${t.elements.length}_${t.name??""}`:"":"",[t]);useEffect(()=>{if(!s)return;let b=setTimeout(()=>{g.current?.zoomToFit();},60),f=()=>{g.current?.zoomToFit();};return window.addEventListener("resize",f),()=>{clearTimeout(b),window.removeEventListener("resize",f);}},[s,D]),useEffect(()=>{if(!p)return;let b=g.current;if(!b)return;let f=b.on("change",()=>{let v=b.getCamera();E(Math.round(v.zoom*100));});return ()=>f()},[p]);let P=useCallback(async()=>{if(w)return;let b=g.current?.getElements()??z;if(b.length===0)return;await Zr(b,{scale:2,backgroundColor:c})&&(_(true),setTimeout(()=>_(false),2e3));},[w,z,c]),I=useMemo(()=>({showTopBar:false,showToolBar:false,showPropertiesPanel:false,showMinimap:false,showShortcutsButton:false,showGuideButton:false,showPresentation:false,showTechStencils:false,showTemplates:false,...l}),[l]);return jsxs("div",{className:`relative w-full h-full min-h-[300px] overflow-hidden rounded-[14px] border border-black/[0.08] dark:border-white/[0.08] ${h?"":"pointer-events-none select-none"} ${a}`,style:x,children:[jsx(qn,{value:t,defaultValue:r,boardName:i,theme:o,canvasBackground:c,gridStyle:d,readOnly:true,uiConfig:I,controllerRef:g}),i&&jsx("div",{className:"absolute top-3 left-3 z-20 pointer-events-none select-none",style:{top:"0.75rem",left:"0.75rem"},children:jsx("span",{className:"px-2.5 py-1 text-xs font-semibold tracking-tight rounded-md bg-white/90 dark:bg-neutral-900/90 text-neutral-800 dark:text-neutral-200 shadow-sm border border-black/5 dark:border-white/10 backdrop-blur-md",children:i})}),n&&jsx("div",{className:"absolute top-3 right-3 z-20 pointer-events-auto",style:{top:"0.75rem",right:"0.75rem"},children:jsx("button",{type:"button",onClick:P,title:"Copy diagram as PNG",className:"h-7 px-2.5 rounded-lg flex items-center gap-1.5 text-[11px] font-medium transition-all cursor-pointer bg-white/90 dark:bg-neutral-900/90 text-neutral-700 dark:text-neutral-200 border border-black/10 dark:border-white/10 shadow-sm hover:bg-neutral-100 dark:hover:bg-neutral-800 active:scale-95 backdrop-blur-md",children:w?jsxs(Fragment,{children:[jsx(IconCheck,{size:13,className:"text-emerald-500"}),jsx("span",{className:"text-emerald-600 dark:text-emerald-400 font-semibold",children:"Copied!"})]}):jsxs(Fragment,{children:[jsx(IconCopy,{size:13}),jsx("span",{children:"Copy"})]})})}),p&&jsxs("div",{className:"absolute bottom-3 left-3 z-20 pointer-events-auto flex items-center gap-1 p-0.5 rounded-lg bg-white/90 dark:bg-neutral-900/90 border border-black/10 dark:border-white/10 shadow-sm backdrop-blur-md text-neutral-700 dark:text-neutral-300",style:{bottom:"0.75rem",left:"0.75rem"},children:[jsx("button",{type:"button",onClick:()=>{let b=g.current;if(!b)return;let f=b.getCamera();b.setZoom(Math.max(.1,f.zoom/1.2));},className:"h-6 w-6 flex items-center justify-center rounded hover:bg-black/5 dark:hover:bg-white/10 transition-colors",title:"Zoom Out",children:jsx(IconMinus,{size:12})}),jsxs("span",{className:"px-1 text-[10px] font-mono font-medium",children:[S,"%"]}),jsx("button",{type:"button",onClick:()=>{let b=g.current;if(!b)return;let f=b.getCamera();b.setZoom(Math.min(5,f.zoom*1.2));},className:"h-6 w-6 flex items-center justify-center rounded hover:bg-black/5 dark:hover:bg-white/10 transition-colors",title:"Zoom In",children:jsx(IconPlus,{size:12})}),jsx("button",{type:"button",onClick:()=>g.current?.zoomToFit(),className:"h-6 w-6 flex items-center justify-center rounded hover:bg-black/5 dark:hover:bg-white/10 transition-colors ml-0.5",title:"Zoom to Fit",children:jsx(IconMaximize,{size:12})})]})]})});export{cn as DEFAULT_ELEMENT_STYLES,co as DEFAULT_STARTER_ELEMENTS,Po as DIAGRAM_TEMPLATES,On as SKETCH_DOCUMENT_VERSION,xn as SketchBoardCanvas,mn as SketchBoardContextMenu,kn as SketchBoardExportModal,wn as SketchBoardFloatingDock,vn as SketchBoardFramesOutline,_n as SketchBoardLaserDock,Mn as SketchBoardMinimap,Nn as SketchBoardPresentationMode,En as SketchBoardPropertiesPanel,$n as SketchBoardShortcutsModal,Bn as SketchBoardSpotlightOverlay,Rn as SketchBoardTechStencilsModal,Dn as SketchBoardTemplatesFlyout,Fn as SketchBoardToolBar,Xn as SketchBoardTopBar,qn as SketchEditor,$o as SketchEventEmitter,rc as SketchViewer,In as TECH_CATEGORIES,Ln as TECH_ICONS,zo as alignElements,Er as cloneSketchBoardElements,Zr as copyImageToClipboard,Hd as createEmptyDocument,Bo as distributeElements,vr as downloadFile,vo as exportFrameToPng,no as exportToPng,wo as exportToSvg,_o as exportWhiteboardToPdf,Vt as getElementsBoundingBox,jn as isValidSketchDocument,Xd as parseDocument,Vr as saveOrDownloadFile,Yd as serializeDocument,Ct as updateBoundArrows,ho as useHydrated,Gn as useSketchBoardCamera,Un as useSketchBoardElements,Vn as useSketchBoardHistory,nr as useSketchTheme,po as useSketchThemeContext};
|