{"version":3,"file":"ExampleCanvas.DWXGummq.mjs","names":["React.useState","React.useRef"],"sources":["https:/framerusercontent.com/modules/PIhEYzdQ6bBO2vtwSENi/MUSCYmtjm8vIZ5L4ia58/ExampleCanvas.js"],"sourcesContent":["// Ensmbl example canvases for the /services pages (5 Oct 2026 audit rebuild, \"bold\" light system).\n// Automation: a four-step flow (Comes in -> Done for you -> You approve -> It all goes out).\n// Integrations: a hub with the Ensmbl mark and six labelled tools. Both sit on a framed dark canvas\n// with an \"Example\" tag, gradient beams (#7C9CFF -> #F2A65A) that draw once, and Phosphor duotone icons (MIT).\nimport{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";import*as React from\"react\";import{addPropertyControls,ControlType,useIsStaticRenderer}from\"framer\";const ICONS={\"globe-simple\":'',\"envelope-simple\":'',\"phone\":'',\"calendar-check\":'',\"sparkle\":'',\"check-circle\":'',\"paper-plane-tilt\":'',\"users-three\":'',\"receipt\":'',\"chart-line-up\":'',\"address-book\":'',\"calendar-dots\":'',\"chats-circle\":'',\"folder-simple\":''};const FONT='\"BDO Grotesk\", \"BDO Grotesk Variable\", sans-serif';const BLUE=\"#7C9CFF\",AMBER=\"#F2A65A\",LILAC=\"#B9A3D9\";function Ico({name,tone,dark}){const html=(ICONS[name]||\"\").replace(/opacity=\"0.2\"/g,`fill=\"${tone}\" opacity=\"0.75\"`);return /*#__PURE__*/_jsx(\"span\",{style:{width:34,height:34,flex:\"none\",borderRadius:10,display:\"grid\",placeItems:\"center\",background:dark?\"linear-gradient(180deg,#222,#000)\":\"linear-gradient(180deg,#2A2A30,#141417)\",border:\"1px solid rgba(255,255,255,0.1)\",boxShadow:\"inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 12px rgba(0,0,0,0.5)\"},children:/*#__PURE__*/_jsx(\"svg\",{viewBox:\"0 0 256 256\",width:18,height:18,fill:\"#fff\",dangerouslySetInnerHTML:{__html:html}})});}function Node(props){const{t,s,icon,tone,white,big,nref,style}=props;return /*#__PURE__*/_jsxs(\"div\",{ref:nref,style:{position:\"relative\",zIndex:1,display:\"flex\",gap:12,alignItems:\"center\",borderRadius:12,padding:big?18:\"12px 14px\",background:white?\"#fff\":\"linear-gradient(180deg,#17171A,#111113)\",color:white?\"#000\":\"#fff\",border:`1px solid ${white?\"#fff\":\"rgba(255,255,255,0.1)\"}`,boxShadow:white?\"0 0 0 6px rgba(255,255,255,0.04), 0 12px 40px rgba(0,0,0,0.5)\":\"inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.4)\",...style},children:[/*#__PURE__*/_jsx(Ico,{name:icon,tone:tone,dark:white}),/*#__PURE__*/_jsxs(\"span\",{style:{minWidth:0},children:[/*#__PURE__*/_jsx(\"b\",{style:{display:\"block\",fontWeight:400,fontSize:big?16:14,lineHeight:big?\"20px\":\"18px\"},children:t}),/*#__PURE__*/_jsx(\"small\",{style:{display:\"block\",fontSize:12,lineHeight:\"17px\",color:white?\"rgba(0,0,0,0.5)\":\"rgba(255,255,255,0.45)\",marginTop:2},children:s})]})]});}const Label=({children})=>/*#__PURE__*/_jsx(\"div\",{style:{fontSize:11,letterSpacing:\"1.4px\",textTransform:\"uppercase\",color:\"rgba(255,255,255,0.45)\",marginBottom:12},children:children});function useBeams(canvas,build,deps){const[segs,setSegs]=React.useState([]);const[size,setSize]=React.useState({w:0,h:0});React.useLayoutEffect(()=>{const cv=canvas.current;if(!cv)return;const run=()=>{const R=cv.getBoundingClientRect();if(!R.width)return;const box=el=>{if(!el)return null;const r=el.getBoundingClientRect();return{l:r.left-R.left,r:r.right-R.left,t:r.top-R.top,b:r.bottom-R.top,cx:(r.left+r.right)/2-R.left,cy:(r.top+r.bottom)/2-R.top};};setSize({w:R.width,h:R.height});setSegs(build(box,R.width,R.height));};run();const ro=new ResizeObserver(run);ro.observe(cv);const t=setTimeout(run,300);return()=>{ro.disconnect();clearTimeout(t);};},deps);return{segs,size};}function useInView(ref,isStatic){const[seen,setSeen]=React.useState(isStatic);React.useEffect(()=>{if(isStatic||!ref.current)return;const io=new IntersectionObserver(es=>es.forEach(e=>e.isIntersecting&&setSeen(true)),{threshold:.3});io.observe(ref.current);return()=>io.disconnect();},[isStatic]);return seen;}const curveH=(a,b)=>{const mx=(a[0]+b[0])/2;return`M${a[0]},${a[1]} C${mx},${a[1]} ${mx},${b[1]} ${b[0]},${b[1]}`;};function Beams({segs,size,vertical,seen}){return /*#__PURE__*/_jsxs(\"svg\",{width:size.w,height:size.h,style:{position:\"absolute\",inset:0,pointerEvents:\"none\",overflow:\"visible\",zIndex:0},children:[/*#__PURE__*/_jsxs(\"defs\",{children:[/*#__PURE__*/_jsxs(\"linearGradient\",{id:\"ensSig\",gradientUnits:\"userSpaceOnUse\",x1:\"0\",y1:\"0\",x2:vertical?0:size.w,y2:vertical?size.h:0,children:[/*#__PURE__*/_jsx(\"stop\",{offset:\"0\",stopColor:BLUE}),/*#__PURE__*/_jsx(\"stop\",{offset:\"1\",stopColor:AMBER})]}),/*#__PURE__*/_jsx(\"filter\",{id:\"ensGlow\",x:\"-20%\",y:\"-20%\",width:\"140%\",height:\"140%\",children:/*#__PURE__*/_jsx(\"feGaussianBlur\",{stdDeviation:\"4\"})})]}),segs.map((s,i)=>/*#__PURE__*/_jsxs(\"g\",{children:[/*#__PURE__*/_jsx(\"path\",{d:s.d,stroke:\"url(#ensSig)\",strokeWidth:5,fill:\"none\",opacity:seen?.35:0,filter:\"url(#ensGlow)\",style:{transition:`opacity .9s ease ${.1*i}s`}}),/*#__PURE__*/_jsx(\"path\",{d:s.d,stroke:\"url(#ensSig)\",strokeWidth:1.5,fill:\"none\",pathLength:1,strokeDasharray:\"1\",strokeDashoffset:seen?0:1,style:{transition:`stroke-dashoffset .9s ease-out ${.08*i}s`}})]},i))]});}function Flow({phone,seen}){const cv=React.useRef(null);const ins=React.useRef([]),outs=React.useRef([]);const m1=React.useRef(null),m2=React.useRef(null);const cols=React.useRef([]);const{segs,size}=useBeams(cv,box=>{const a=box(m1.current),b=box(m2.current);if(!a||!b)return[];if(phone){const c=cols.current.map(box).filter(Boolean);if(c.length<4)return[];return[{d:`M12,${c[0].t+6} L12,${c[3].b-20}`}];}const out=[];ins.current.forEach(n=>{const x=box(n);if(x)out.push({d:curveH([x.r,x.cy],[a.l,a.cy])});});out.push({d:`M${a.r},${a.cy} L${b.l},${b.cy}`});outs.current.forEach(n=>{const x=box(n);if(x)out.push({d:curveH([b.r,b.cy],[x.l,x.cy])});});return out;},[phone]);// What comes in rotates through everyday kinds of work. Icons stay put; only the words change.\nconst IN_SETS=[[[\"Enquiry\",\"Web, phone or chat\"],[\"Email\",\"To your inbox\"],[\"Phone call\",\"Or voicemail\"],[\"Order or booking\",\"New or changed\"]],[[\"Application\",\"Form or portal\"],[\"Invoice\",\"From a supplier\"],[\"Timesheet\",\"From the team\"],[\"Request\",\"From a client\"]],[[\"Support question\",\"Any channel\"],[\"Delivery update\",\"From a carrier\"],[\"Document\",\"Scanned or photographed\"],[\"Approval\",\"Waiting on someone\"]]];const IN_ICONS=[\"globe-simple\",\"envelope-simple\",\"phone\",\"calendar-check\"];const[setIdx,setSetIdx]=React.useState(0);const[fade,setFade]=React.useState(false);React.useEffect(()=>{if(!seen||typeof window!==\"undefined\"&&window.matchMedia&&window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches)return;const t=setInterval(()=>{setFade(true);setTimeout(()=>{setSetIdx(i=>(i+1)%IN_SETS.length);setFade(false);},260);},3200);return()=>clearInterval(t);},[seen]);const IN=IN_SETS[setIdx].map((x,i)=>[x[0],x[1],IN_ICONS[i]]);const OUT=[[\"Customer gets a reply\",\"In your voice\",\"paper-plane-tilt\"],[\"Right person gets the task\",\"With every detail\",\"users-three\"],[\"Payment scheduled\",\"Chased if it’s late\",\"receipt\"],[\"Numbers updated\",\"Always current\",\"chart-line-up\"]];return /*#__PURE__*/_jsxs(\"div\",{ref:cv,style:{position:\"relative\"},children:[/*#__PURE__*/_jsx(Beams,{segs:segs,size:size,vertical:phone,seen:seen}),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"relative\",zIndex:1,display:\"grid\",gridTemplateColumns:phone?\"minmax(0,1fr)\":\"repeat(4, minmax(0,1fr))\",columnGap:72,rowGap:36,alignItems:\"center\",paddingLeft:phone?28:0},children:[/*#__PURE__*/_jsxs(\"div\",{ref:e=>{cols.current[0]=e;},children:[/*#__PURE__*/_jsx(Label,{children:\"1 \\xb7 Comes in\"}),IN.map((x,i)=>/*#__PURE__*/_jsx(Node,{t:x[0],s:x[1],icon:x[2],tone:BLUE,nref:e=>{ins.current[i]=e;},style:{marginBottom:10,opacity:fade?.25:1,transition:\"opacity .26s ease\"}},i))]}),/*#__PURE__*/_jsxs(\"div\",{ref:e=>{cols.current[1]=e;},children:[/*#__PURE__*/_jsx(Label,{children:\"2 \\xb7 Done for you\"}),/*#__PURE__*/_jsx(Node,{big:true,t:\"Prepared for you\",s:\"Details captured, records updated, the reply drafted in your voice.\",icon:\"sparkle\",tone:LILAC,nref:e=>{m1.current=e;}})]}),/*#__PURE__*/_jsxs(\"div\",{ref:e=>{cols.current[2]=e;},children:[/*#__PURE__*/_jsx(Label,{children:\"3 \\xb7 You approve\"}),/*#__PURE__*/_jsx(Node,{big:true,white:true,t:\"Your team checks it\",s:\"One tap to approve and send.\",icon:\"check-circle\",tone:AMBER,nref:e=>{m2.current=e;}})]}),/*#__PURE__*/_jsxs(\"div\",{ref:e=>{cols.current[3]=e;},children:[/*#__PURE__*/_jsx(Label,{children:\"4 \\xb7 It all goes out\"}),OUT.map((x,i)=>/*#__PURE__*/_jsx(Node,{t:x[0],s:x[1],icon:x[2],tone:AMBER,nref:e=>{outs.current[i]=e;},style:{marginBottom:10}},x[0]))]})]})]});}// Integrations example: every tool plugs into one connected system you can ask and act through.\n// A sample enquiry then runs start to finish; each step lights its tool and a pulse runs to it.\nconst HUB_TOOLS=[[\"CRM\",\"Clients and leads\",\"address-book\",BLUE],[\"Accounts\",\"Invoices and payments\",\"receipt\",AMBER],[\"Email\",\"Every inbox\",\"envelope-simple\",BLUE],[\"Calendar\",\"Bookings and work\",\"calendar-dots\",AMBER],[\"Team chat\",\"Messages and alerts\",\"chats-circle\",LILAC],[\"Files\",\"Documents and photos\",\"folder-simple\",LILAC]];const HUB_STEPS=[[\"Enquiry arrives\",2],[\"Customer added\",0],[\"Work booked\",3],[\"Team told\",4],[\"Folder set up\",5],[\"Invoice sent\",1]];const ON_NODE={borderColor:\"rgba(242,166,90,0.6)\",boxShadow:\"0 0 0 1px rgba(242,166,90,0.25), 0 0 40px rgba(242,166,90,0.18)\"};function Hub({phone,seen,mark,isStatic}){const cv=React.useRef(null);const nodes=React.useRef([]);const core=React.useRef(null);const reply=React.useRef(null);const hot=React.useRef(null);const dot=React.useRef(null);const[k,setK]=React.useState(isStatic?3:0);const step=k%6;const active=HUB_STEPS[step][1];// Paths, keyed by tool index. Desktop: tool to core. Phone: down the spine, then across to the row.\nconst{segs,size}=useBeams(cv,box=>{const c=box(core.current),r=box(reply.current);if(!c||!r)return[];const out=[];for(let i=0;i<6;i++){const b=box(nodes.current[i]);if(!b){out.push({d:\"\"});continue;}if(!phone){const left=b.cx{const b=box(nodes.current[i]);out.push({d:b?`M${c.cx},${b.cy} L${b.l},${b.cy}`:\"\"});});}return out;},[phone]);React.useEffect(()=>{if(!seen||isStatic)return;const t=setInterval(()=>setK(x=>x+1),1700);return()=>clearInterval(t);},[seen,isStatic]);// Pulse along the active path. The first step (the enquiry) travels in from the tool.\nReact.useEffect(()=>{const p=hot.current,g=dot.current;if(!p||!g||isStatic||!seen)return;const L=p.getTotalLength();const inbound=step===0;let raf=0;const t0=performance.now();const run=now=>{const u=Math.min(1,(now-t0)/900);const e=u<.5?2*u*u:1-Math.pow(-2*u+2,2)/2;const along=phone?inbound?1-e:e:inbound?e:1-e;const pt=p.getPointAtLength(along*L);g.setAttribute(\"transform\",`translate(${pt.x},${pt.y})`);g.style.opacity=u<1?\"1\":\"0\";if(u<1)raf=requestAnimationFrame(run);};raf=requestAnimationFrame(run);return()=>cancelAnimationFrame(raf);},[k,seen,segs]);const wide=size.w>900;const svg=/*#__PURE__*/_jsxs(\"svg\",{width:size.w,height:size.h,style:{position:\"absolute\",inset:0,pointerEvents:\"none\",overflow:\"visible\",zIndex:0},children:[/*#__PURE__*/_jsxs(\"defs\",{children:[/*#__PURE__*/_jsxs(\"linearGradient\",{id:\"ensHubH\",gradientUnits:\"userSpaceOnUse\",x1:\"0\",y1:\"0\",x2:size.w,y2:\"0\",children:[/*#__PURE__*/_jsx(\"stop\",{offset:\"0\",stopColor:BLUE}),/*#__PURE__*/_jsx(\"stop\",{offset:\"1\",stopColor:AMBER})]}),/*#__PURE__*/_jsxs(\"linearGradient\",{id:\"ensHubV\",gradientUnits:\"userSpaceOnUse\",x1:\"0\",y1:\"0\",x2:\"0\",y2:size.h,children:[/*#__PURE__*/_jsx(\"stop\",{offset:\"0\",stopColor:BLUE}),/*#__PURE__*/_jsx(\"stop\",{offset:\"1\",stopColor:AMBER})]}),/*#__PURE__*/_jsx(\"filter\",{id:\"ensHubGlow\",x:\"-50%\",y:\"-50%\",width:\"200%\",height:\"200%\",children:/*#__PURE__*/_jsx(\"feGaussianBlur\",{stdDeviation:\"4\"})})]}),segs[6]&&/*#__PURE__*/_jsx(\"path\",{d:segs[6].d,stroke:\"url(#ensHubV)\",strokeWidth:1.5,fill:\"none\",opacity:seen?.7:0,style:{transition:\"opacity .9s\"}}),!phone&&segs.slice(0,6).map((sg,i)=>/*#__PURE__*/_jsx(\"path\",{d:sg.d,stroke:\"rgba(255,255,255,0.16)\",strokeWidth:1.4,fill:\"none\",pathLength:1,strokeDasharray:\"1\",strokeDashoffset:seen?0:1,style:{transition:`stroke-dashoffset .9s ease-out ${.08*i}s`}},i)),phone&&segs.slice(7).map((sg,i)=>/*#__PURE__*/_jsx(\"path\",{d:sg.d,stroke:i===0?\"url(#ensHubV)\":\"rgba(255,255,255,0.18)\",strokeWidth:1.4,fill:\"none\",opacity:seen?i===0?.55:1:0,style:{transition:\"opacity .9s\"}},i)),segs[active]&&/*#__PURE__*/_jsx(\"path\",{ref:hot,d:segs[active].d,stroke:phone?\"url(#ensHubV)\":\"url(#ensHubH)\",strokeWidth:2,fill:\"none\",opacity:seen?1:0}),/*#__PURE__*/_jsxs(\"g\",{ref:dot,style:{opacity:0},children:[/*#__PURE__*/_jsx(\"circle\",{r:10,fill:AMBER,opacity:.7,filter:\"url(#ensHubGlow)\"}),/*#__PURE__*/_jsx(\"circle\",{r:4,fill:\"#fff\"})]})]});const label=(t,st)=>/*#__PURE__*/_jsx(\"div\",{style:{fontSize:11,letterSpacing:\"1.6px\",textTransform:\"uppercase\",color:\"rgba(255,255,255,0.45)\",...st},children:t});const ask=/*#__PURE__*/_jsxs(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:10,alignItems:phone?\"stretch\":\"center\",...phone?{}:{position:\"absolute\",left:\"50%\",top:0,transform:\"translateX(-50%)\",width:\"min(520px, 70%)\"},zIndex:1},children:[label(\"One place to ask and act\"),/*#__PURE__*/_jsxs(\"div\",{style:{alignSelf:\"stretch\",display:\"flex\",alignItems:\"center\",gap:12,background:\"linear-gradient(#161618,#121214)\",border:\"1px solid rgba(255,255,255,0.14)\",borderRadius:16,padding:\"12px 14px\",boxShadow:\"0 20px 60px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06)\",position:\"relative\"},children:[/*#__PURE__*/_jsx(Ico,{name:\"sparkle\",tone:LILAC}),/*#__PURE__*/_jsx(\"span\",{style:{fontSize:phone?15:16,lineHeight:1.3},children:\"Which work is done but not yet invoiced?\"})]}),/*#__PURE__*/_jsxs(\"div\",{ref:e=>{reply.current=e;},style:{fontSize:13,color:\"rgba(255,255,255,0.55)\"},children:[/*#__PURE__*/_jsx(\"span\",{style:{color:\"#fff\"},children:\"Three.\"}),\" Invoices drafted for you to check.\"]})]});const coreEl=/*#__PURE__*/_jsxs(\"div\",{style:phone?{display:\"flex\",alignItems:\"center\",gap:14,marginTop:34,position:\"relative\",zIndex:1}:{position:\"absolute\",left:\"50%\",top:222,transform:\"translateX(-50%)\",display:\"flex\",flexDirection:\"column\",alignItems:\"center\",gap:12,zIndex:1},children:[/*#__PURE__*/_jsx(\"div\",{ref:e=>{core.current=e;},style:{width:phone?64:88,height:phone?64:88,flex:\"none\",borderRadius:phone?18:24,background:\"#fff\",display:\"grid\",placeItems:\"center\",boxShadow:\"0 0 0 8px rgba(255,255,255,0.04), 0 0 80px rgba(124,156,255,0.35)\"},children:mark?/*#__PURE__*/_jsx(\"img\",{src:mark,alt:\"Ensmbl\",style:{width:phone?36:50,height:phone?36:50,objectFit:\"contain\"}}):null}),/*#__PURE__*/_jsxs(\"div\",{style:{textAlign:phone?\"left\":\"center\"},children:[/*#__PURE__*/_jsx(\"div\",{style:{fontSize:16},children:\"Your connected system\"}),/*#__PURE__*/_jsx(\"div\",{style:{fontSize:13,color:\"rgba(255,255,255,0.5)\",marginTop:2},children:\"One shared record. Your rules.\"})]})]});if(phone){return /*#__PURE__*/_jsxs(\"div\",{ref:cv,style:{position:\"relative\"},children:[svg,ask,coreEl,label(\"One enquiry, start to finish\",{margin:\"30px 0 14px 44px\"}),/*#__PURE__*/_jsx(\"div\",{style:{display:\"flex\",flexDirection:\"column\",gap:10,paddingLeft:44,position:\"relative\",zIndex:1},children:HUB_STEPS.map(([t,i],j)=>{const on=j===step;return /*#__PURE__*/_jsxs(\"div\",{ref:e=>{nodes.current[i]=e;},style:{display:\"flex\",gap:12,alignItems:\"center\",borderRadius:14,padding:\"10px 12px\",border:`1px solid ${on?\"#fff\":\"rgba(255,255,255,0.1)\"}`,background:on?\"#fff\":\"#0f0f11\",color:on?\"#111\":\"#fff\",transition:\"background .5s, color .5s, border-color .5s\"},children:[/*#__PURE__*/_jsx(Ico,{name:HUB_TOOLS[i][2],tone:HUB_TOOLS[i][3],dark:on}),/*#__PURE__*/_jsxs(\"span\",{style:{minWidth:0},children:[/*#__PURE__*/_jsx(\"b\",{style:{display:\"block\",fontWeight:400,fontSize:15,lineHeight:\"19px\"},children:t}),/*#__PURE__*/_jsx(\"small\",{style:{display:\"block\",fontSize:12,lineHeight:\"16px\",marginTop:2,color:on?\"rgba(0,0,0,0.5)\":\"rgba(255,255,255,0.5)\"},children:HUB_TOOLS[i][0]})]}),/*#__PURE__*/_jsxs(\"span\",{style:{marginLeft:\"auto\",fontSize:11,color:on?\"rgba(0,0,0,0.45)\":\"rgba(255,255,255,0.4)\"},children:[\"0\",j+1]})]},t);})})]});}return /*#__PURE__*/_jsxs(\"div\",{ref:cv,style:{position:\"relative\",height:wide?600:640},children:[svg,ask,coreEl,HUB_TOOLS.map((x,i)=>/*#__PURE__*/_jsx(Node,{t:x[0],s:x[1],icon:x[2],tone:x[3],big:true,nref:e=>{nodes.current[i]=e;},style:{position:\"absolute\",width:\"clamp(180px, 24%, 250px)\",left:i<3?\"3%\":undefined,right:i<3?undefined:\"3%\",top:[150,250,350][i%3]+(i<3?0:0),transition:\"border-color .5s, box-shadow .5s\",...i===active?ON_NODE:{}}},x[0])),/*#__PURE__*/_jsxs(\"div\",{style:{position:\"absolute\",left:0,right:0,bottom:0,zIndex:1},children:[label(\"One enquiry, start to finish\",{marginBottom:12}),/*#__PURE__*/_jsx(\"div\",{style:{display:\"grid\",gridTemplateColumns:wide?\"repeat(6, minmax(0,1fr))\":\"repeat(3, minmax(0,1fr))\",gap:10},children:HUB_STEPS.map(([t,i],j)=>{const on=j===step;return /*#__PURE__*/_jsxs(\"div\",{style:{borderRadius:12,padding:\"10px 12px\",border:`1px solid ${on?\"#fff\":j