koboyo 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "koboyo",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Render Koboyo diagram code to SVG and PNG on your own machine. No account needed.",
   "keywords": [
     "koboyo",
@@ -50,12 +50,12 @@
     "vitest": "^4.1.10",
     "zod": "^4.4.3",
     "@koboyo/agent-tools": "0.0.0",
-    "@koboyo/headless": "0.0.0",
-    "@koboyo/language": "0.0.0",
-    "@koboyo/local-editor": "0.0.0",
     "@koboyo/compiler": "0.0.0",
+    "@koboyo/language": "0.0.0",
+    "@koboyo/model": "0.0.0",
+    "@koboyo/headless": "0.0.0",
     "@koboyo/renderer": "0.0.0",
-    "@koboyo/model": "0.0.0"
+    "@koboyo/local-editor": "0.0.0"
   },
   "scripts": {
     "build": "node --import tsx scripts/build.mjs",

package/skills/koboyo/SKILL.md

@@ -3,7 +3,7 @@ name: koboyo
 description: "Draw diagrams as code and render them to SVG, PNG or HTML on this machine with the koboyo CLI: architecture and dependency maps, flowcharts, sequence diagrams, ERDs and class diagrams, state machines, mind maps, gantt charts, timelines and more. Use when the user asks to draw, diagram, visualize, map or explain a system, a codebase, a request flow, a data model or a process, or wants a picture for docs or a README; and to let the user edit a diagram by hand in a local editor and read their edits back."
 ---
 
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Koboyo diagrams
 

package/skills/koboyo/references/architecture.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Architecture diagrams
 

package/skills/koboyo/references/bpmn.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # BPMN and swimlanes
 

package/skills/koboyo/references/chart.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Charts
 

package/skills/koboyo/references/cycle.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/erd.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Entity-relationship diagrams
 

package/skills/koboyo/references/flowchart.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Flowcharts
 

package/skills/koboyo/references/funnel.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/gantt.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Gantt charts as code
 

package/skills/koboyo/references/gitgraph.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Git graphs as code
 

package/skills/koboyo/references/journey.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/matrix.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/mindmap.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Mind maps
 

package/skills/koboyo/references/orgchart.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Org charts
 

package/skills/koboyo/references/pyramid.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/sankey.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Sankey diagrams as code
 

package/skills/koboyo/references/sequence.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Sequence diagrams
 

package/skills/koboyo/references/statemachine.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # State machines
 

package/skills/koboyo/references/timeline.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/venn.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Infographics: timelines, journeys, cycles, funnels, pyramids, venn, matrix
 

package/skills/koboyo/references/wireframe.md

@@ -1,4 +1,4 @@
-<!-- Generated by koboyo 0.2.0. `koboyo setup` rewrites this file. -->
+<!-- Generated by koboyo 0.3.0. `koboyo setup` rewrites this file. -->
 
 # Wireframes
 

package/assets/editor/assets/IconArrowBackUp-Brd2WpCh.js

@@ -1 +0,0 @@
-import{i as e}from"./rolldown-runtime-aKtaBQYM.js";import{n as t}from"./jsx-runtime-2Zwg-L3c.js";import{_ as n}from"./selection-overlay-primitives-hWJ1xjF7.js";import{t as r}from"./editable-target-BTLnvKNi.js";import{t as i}from"./createReactComponent-9UsI5fmM.js";var a=e(t(),1),o=`button, a[href], summary, [role="button"], [role="link"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="option"], [role="checkbox"], [role="switch"], [role="radio"]`;function s(e){return e instanceof Element&&e.closest(o)!==null}function c(e,t={}){let{preventDefault:i=!1}=t,[o,c]=(0,a.useState)(!1);return(0,a.useEffect)(()=>{function t(t){t.code===e&&(r(t.target)||s(t.target)||(i&&t.preventDefault(),c(!0)))}function a(t){t.code!==e&&t.key!==`Meta`||c(!1)}window.addEventListener(`keydown`,t),window.addEventListener(`keyup`,a);let o=n(()=>c(!1));return()=>{window.removeEventListener(`keydown`,t),window.removeEventListener(`keyup`,a),o()}},[e,i]),o}var l=i(`outline`,`arrow-back-up`,`ArrowBackUp`,[[`path`,{d:`M9 14l-4 -4l4 -4`,key:`svg-0`}],[`path`,{d:`M5 10h11a4 4 0 1 1 0 8h-1`,key:`svg-1`}]]);export{s as n,c as r,l as t};

package/assets/editor/assets/IconNote-CSELvWzx.js

@@ -1 +0,0 @@
-import{t as e}from"./createReactComponent-9UsI5fmM.js";var t=e(`outline`,`link`,`Link`,[[`path`,{d:`M9 15l6 -6`,key:`svg-0`}],[`path`,{d:`M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464`,key:`svg-1`}],[`path`,{d:`M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463`,key:`svg-2`}]]),n=e(`outline`,`note`,`Note`,[[`path`,{d:`M13 20l7 -7`,key:`svg-0`}],[`path`,{d:`M13 20v-6a1 1 0 0 1 1 -1h6v-7a2 2 0 0 0 -2 -2h-12a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7`,key:`svg-1`}]]);export{t as n,n as t};

package/assets/editor/assets/build-pips-CIaHaEPB.js

@@ -1 +0,0 @@
-import{i as e}from"./rolldown-runtime-aKtaBQYM.js";import{n as t,t as n}from"./jsx-runtime-2Zwg-L3c.js";import{a as r,o as i}from"./editor-B0tARd79.js";import{Zt as a,cn as o,i as s}from"./slides-D9bnXqtf.js";import{t as c}from"./createReactComponent-9UsI5fmM.js";import{_ as l,f as u,h as d,m as f,n as p,o as m,r as h,v as g}from"./plan-jQm1jDpt.js";import{n as _,r as v}from"./edit-BJ_kibk8.js";var y=c(`outline`,`corner-down-right`,`CornerDownRight`,[[`path`,{d:`M6 6v6a3 3 0 0 0 3 3h10l-4 -4m0 8l4 -4`,key:`svg-0`}]]),b=e(t(),1),x=n(),S=21,C=3;function w(e){let{zoom:t}=e,n=i(e=>e.animateSlideId),c=i(e=>e.shapes),w=i(e=>e.hoveredId),{store:T,history:E,measurement:D}=r(),O=(0,b.useMemo)(()=>{if(n)return s(c).find(e=>e.id===n)},[n,c]),k=(0,b.useMemo)(()=>{if(!O)return[];let e=l(c,O),t=u(c,O),n=h(t),r=t.flatMap((t,r)=>p([t],e).map(e=>({unit:{shapes:e.items.map(e=>e.shape),groupId:e.groupId},rowId:m(e),step:n[r],follows:e.withPrevious}))),i=f(c,O,e).map(e=>({unit:e,rowId:null,step:null,follows:!1})),a=[...r,...i],o=new Map;return a.map(e=>{let t=e.unit.groupId??e.unit.shapes[0].id,n=o.get(t)??0;return o.set(t,n+1),{...e,lane:n}})},[c,O]);if(!O||k.length===0)return null;function A(e,t){let r=T.getState().shapes,i=s(r).find(e=>e.id===n);if(!i)return;let a=l(r,i),o=u(r,i),c=t?v(p(o,a),t):_(o,[e],d(e.shapes[0]));c.length!==0&&(E.beginTransaction(),T.getState().replaceMany(c),E.endTransaction())}function j(e){return{onPointerEnter:()=>T.getState().setHoveredId(e),onPointerLeave:()=>T.getState().setHoveredId(null)}}return(0,x.jsx)(`div`,{"data-testid":`build-pips`,className:`pointer-events-none absolute left-0 top-0`,children:k.map(({unit:e,rowId:n,step:r,follows:i,lane:s})=>{let c=a(e.shapes,D)??o(e.shapes[0],D),l=r!==null,u=e.shapes.some(e=>e.id===w);return(0,x.jsx)(`div`,{className:`absolute`,style:{left:c.x-(C+s*S)/t,top:c.y-C/t},children:(0,x.jsx)(`button`,{type:`button`,"data-testid":l?`build-pip`:`build-pip-add`,"data-follows":l&&i?`true`:void 0,title:l?i?`Plays with click ${r}. Press to remove.`:`Click ${r}. Press to remove.`:`Click to animate this`,style:{transform:`scale(${1/t})`,transformOrigin:`100% 100%`},onPointerDown:e=>e.stopPropagation(),onClick:t=>{t.stopPropagation(),A(e,n)},...j(e.shapes[0].id),className:`pointer-events-auto absolute bottom-0 right-0 flex items-center justify-center rounded-md text-[11px] leading-none tabular-nums ring-1 transition-[opacity,background-color,color] ${l?`h-[18px] min-w-[18px] bg-[var(--chrome-accent)] px-1 text-white ring-[var(--chrome-accent)]`:`h-[15px] w-[15px] bg-[var(--chrome-popup)] text-[var(--chrome-fg-500)] ring-[var(--chrome-ring)] hover:text-[var(--chrome-fg-900)] ${u?`opacity-100`:`opacity-45 hover:opacity-100`}`}`,children:l?i?(0,x.jsx)(y,{size:11,stroke:2.25}):r:`+`})},n??g(e))})})}export{w as BuildPips};

package/assets/editor/assets/flow-layer-BC35drcK.js

@@ -1 +0,0 @@
-import{i as e}from"./rolldown-runtime-aKtaBQYM.js";import{n as t,t as n}from"./jsx-runtime-2Zwg-L3c.js";import{a as r,o as i}from"./editor-B0tARd79.js";import{S as a,Yr as o,Zt as s,an as c,w as l,x as u}from"./slides-D9bnXqtf.js";import{r as d,t as f}from"./dom-PAoZruqo.js";import{t as p}from"./editable-target-BTLnvKNi.js";import{n as m,t as h}from"./IconArrowBackUp-Brd2WpCh.js";import{t as g}from"./createReactComponent-9UsI5fmM.js";import{a as _,b as v,c as y,d as b,h as x,m as S,n as C,o as w,p as T,r as E,v as D}from"./tree-rq4RTGgw.js";import{t as O}from"./IconChevronLeft-BR0iwdRI.js";import{t as k}from"./IconChevronRight-DBDnxPYT.js";import{t as A}from"./IconFocusCentered-C5PcDeR0.js";import{t as j}from"./IconPencil-C5Y-Y4dC.js";import{t as M}from"./IconPlus-BbmieIBT.js";import{t as N}from"./IconX-AlbPkO_g.js";import{t as P}from"./IconPlayerPlayFilled-D4OODBX7.js";import{n as F}from"./core-CBnmD9hT.js";import{r as ee}from"./flow-start-ccYJ2KB9.js";import{r as I,t as L}from"./chrome-layout-B8YmHznO.js";import{c as R,i as z,l as B,n as V,o as te,s as H,t as ne}from"./flows-GGbkNqs8.js";import{a as U,i as W,n as G,o as K,r as q,t as re}from"./flow-stage-fiF5Nggn.js";var ie=g(`outline`,`rotate`,`Rotate`,[[`path`,{d:`M19.95 11a8 8 0 1 0 -.5 4m.5 5v-5h-5`,key:`svg-0`}]]),ae=g(`filled`,`player-pause-filled`,`PlayerPauseFilled`,[[`path`,{d:`M9 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z`,key:`svg-0`}],[`path`,{d:`M17 4h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h2a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2z`,key:`svg-1`}]]),J=e(t(),1),Y=n(),X=10,Z=28,oe=.5,se=4,ce=24;function le(e){let{frame:t,flow:n,targets:a,viewport:o}=e,s=r(),d=i(e=>e.hoveredId),f=i(e=>e.flowEdit)??{},p=I()===`docked`,m=n.steps.length;(0,J.useEffect)(()=>{let{store:e,viewportAnimation:n}=s,r=e.getState(),i=document.querySelector(`[data-canvas-root]`),a={width:(i?.clientWidth??window.innerWidth)-(p?L(`flow`):0),height:i?.clientHeight??window.innerHeight},o=c(t),d=l({x:o.x,y:o.y-Z},r.viewport),f=l({x:o.x+o.width,y:o.y+o.height},r.viewport),m=d.x>=0&&d.y>=0&&f.x<=a.width&&f.y<=a.height,h=f.x-d.x>=a.width*oe||f.y-d.y>=a.height*oe;m&&h||n.animate(r.viewport,u(o,a,64),r.setViewport)},[t.id,s,p]);let h=(0,J.useRef)(m);h.current=m,(0,J.useEffect)(()=>{let e=e=>{if(e.button!==0)return;let r=e.target instanceof Element?e.target:null;if(!r?.closest(`[data-canvas-root]`)||r.closest(`[data-overlay]`))return;let i=r.closest(`[data-shape-id]`)?.getAttribute(`data-shape-id`)??r.closest(`[data-icon-label]`)?.getAttribute(`data-icon-label`),a=s.store.getState(),o=a.shapes.find(e=>e.id===t.id);if(!i||o?.type!==`figure`)return;let c=F(a.shapes,o).find(e=>e.id===i);if(!c)return;e.preventDefault(),e.stopPropagation(),ue();let l=S({selected:a.flowEdit?.picking},h.current);if(l!==null){b(s,t.id,n.id,l,c);return}if(a.flowEdit?.picking!=null&&a.patchFlowEdit({picking:null}),e.shiftKey){y(s,t.id,n.id,c);return}w(s,t.id,n.id,c)};return window.addEventListener(`pointerdown`,e,!0),()=>window.removeEventListener(`pointerdown`,e,!0)},[s,t.id,n.id]);let[g,_]=(0,J.useState)(!1);(0,J.useEffect)(()=>{let e=e=>_(e.shiftKey);return window.addEventListener(`keydown`,e),window.addEventListener(`keyup`,e),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`keyup`,e)}},[]);let v=new Map(a.map(e=>[e.id,e])),C=d?v.get(d):void 0,E=x(f,m),D=S(f,m),O=S({selected:f.picking},m),k=T(f,m),A=S({selected:f.hovered},m),j=V(t.flows??[],n.id),M=j?.flow.steps[j.index],N=n.steps[E-1]?.target;return(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(fe,{frame:t,viewport:o}),M&&R(M).flatMap(e=>{let t=v.get(e);return t?[(0,Y.jsx)(ye,{shape:t,viewport:o},e)]:[]}),A!==null&&R(n.steps[A]).flatMap(e=>{let t=v.get(e);return t?[(0,Y.jsx)(`div`,{"data-testid":`flow-step-ring`,className:`pointer-events-none absolute rounded-md border-2 border-[var(--flow-accent)]`,style:U(t,o)},e)]:[]}),C&&(O!==null||C.id!==N||g)&&(0,Y.jsx)(`div`,{"data-testid":`flow-add-hint`,className:`pointer-events-none absolute rounded-md border-2 border-dashed border-[var(--canvas-selection)]`,style:U(C,o),children:(0,Y.jsx)(`span`,{className:`absolute -top-6 left-0 whitespace-nowrap rounded-md bg-[var(--chrome-accent)] px-1.5 py-0.5 text-[11px] font-medium text-white shadow-sm`,children:de(O,g?k:null,E,m)})}),(0,Y.jsx)(he,{flow:n,byId:v,viewport:o,slot:E}),(0,Y.jsx)(ge,{flow:n,targets:a,fork:M,viewport:o}),(0,Y.jsx)(ve,{flow:n,byId:v,viewport:o,selected:D,onSelect:e=>s.store.getState().patchFlowEdit({selected:e}),onDrop:(e,r)=>b(s,t.id,n.id,e,r)}),(0,Y.jsx)(pe,{picking:O,slot:E,count:m})]})}function ue(){let e=document.activeElement;e instanceof HTMLElement&&p(e)&&e.blur()}function de(e,t,n,r){return e===null?t===null?n<r?`Add as step ${n+1}`:`Add as step ${r+1}`:`Add to step ${t+1}`:`Step ${e+1} lights this`}function fe(e){let{frame:t,viewport:n}=e,r=c(t),i=l({x:r.x-X,y:r.y-Z},n),a=l({x:r.x+r.width+X,y:r.y+r.height+X},n);return(0,Y.jsx)(`div`,{"data-testid":`flow-edit-focus`,className:`pointer-events-none absolute rounded-lg ring-2 ring-[color-mix(in_srgb,var(--flow-accent)_35%,transparent)]`,style:{left:i.x,top:i.y,width:Math.max(0,a.x-i.x),height:Math.max(0,a.y-i.y)}})}function pe(e){let{picking:t,slot:n,count:r}=e,i=null;return t===null?n<r&&(i=`The next box goes in as step ${n+1} · Esc adds at the end`):i=`Click the box step ${t+1} should light · Esc to cancel`,i?(0,Y.jsx)(`p`,{"data-testid":`flow-board-hint`,className:`pointer-events-none absolute bottom-6 left-1/2 z-30 -translate-x-1/2 whitespace-nowrap rounded-lg bg-[var(--chrome-fg-900)] px-3 py-2 text-[12.5px] text-[var(--chrome-page)] shadow-lg`,children:i}):null}function me(e,t,n){for(let r of n.values()){if(r.type!==`arrow`)continue;let n=r.startBinding?.shapeId,i=r.endBinding?.shapeId;if(n===e.target&&i===t.target||n===t.target&&i===e.target)return r}return null}function he(e){let{flow:t,byId:n,viewport:i,slot:a}=e,s=r(),c=t.steps.slice(1).flatMap((e,r)=>{let i=t.steps[r],a=me(i,e,n);return a?[{arrow:a,slot:r+1}]:[]}),u=new Map;for(let{arrow:e}of c)u.set(e.id,(u.get(e.id)??0)+1);let d=new Map;return(0,Y.jsx)(Y.Fragment,{children:c.map(({arrow:e,slot:t})=>{let n=d.get(e.id)??0;d.set(e.id,n+1);let r=(n-((u.get(e.id)??1)-1)/2)*ce,c=l(o(e),i),f=typeof e.label==`string`&&e.label.trim().length>0,p=t===a;return(0,Y.jsx)(`button`,{type:`button`,"data-overlay":!0,"data-testid":`flow-arrow-insert`,"aria-label":`Add a step between step ${t} and step ${t+1}`,title:`Add a step between ${t} and ${t+1}`,className:`absolute z-20 flex h-[18px] w-[18px] -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full ring-1 transition-[opacity,background-color] hover:opacity-100 ${p?`bg-[var(--flow-accent)] text-white opacity-100 ring-[var(--flow-accent)]`:`bg-[var(--chrome-popup)] text-[var(--flow-accent)] opacity-60 ring-[color-mix(in_srgb,var(--flow-accent)_45%,transparent)]`}`,style:{left:c.x+r,top:c.y+(f?16:0)},onPointerDown:e=>e.stopPropagation(),onClick:()=>s.store.getState().patchFlowEdit({slot:t,picking:null}),children:(0,Y.jsx)(M,{size:11,stroke:2.5})},`${e.id}-${t}`)})})}function ge(e){let{flow:t,targets:n,fork:i,viewport:a}=e,o=r(),s=[..._(n,t.steps,i).values()];return(0,Y.jsx)(Y.Fragment,{children:[...new Map(s.map(e=>[e.arrow.id,e])).values()].flatMap(e=>e.ends.map(t=>{let r=n.find(e=>e.id===t.shapeId),i=r?z(n,r):`its box`,s=l(t.point,a);return(0,Y.jsxs)(`button`,{type:`button`,"data-overlay":!0,"data-testid":`flow-loose-end`,"aria-label":`Attach the arrow to ${i}`,title:`This arrow isn't attached to ${i}, so the flow can't follow it`,className:`group/loose absolute z-20 flex h-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center`,style:{left:s.x,top:s.y},onPointerDown:e=>e.stopPropagation(),onClick:()=>E(o,e),children:[(0,Y.jsx)(`span`,{"aria-hidden":!0,className:`absolute h-3 w-3 rounded-full bg-[var(--flow-warn)] opacity-60 motion-safe:animate-ping`,style:{animationIterationCount:4}}),(0,Y.jsx)(`span`,{"aria-hidden":!0,className:`relative h-3 w-3 rounded-full bg-[var(--flow-warn)] ring-2 ring-[var(--canvas-bg)]`}),(0,Y.jsxs)(`span`,{className:`absolute left-1/2 top-5 flex -translate-x-1/2 items-center whitespace-nowrap rounded-md bg-[var(--chrome-popup)] px-1.5 py-0.5 text-[11px] font-medium text-[var(--flow-warn-fg)] shadow-sm ring-1 ring-[color-mix(in_srgb,var(--flow-warn)_45%,transparent)] group-hover/loose:bg-[color-mix(in_srgb,var(--flow-warn)_12%,var(--chrome-popup))]`,children:[`Attach to `,i]})]},`${e.arrow.id}-${t.end}`)}))})}function _e(e,t,n){for(let r of document.elementsFromPoint(e,t)){let e=r.closest(`[data-shape-id]`)?.getAttribute(`data-shape-id`)??r.closest(`[data-icon-label]`)?.getAttribute(`data-icon-label`);if(e&&n.has(e))return e}return null}function ve(e){let{flow:t,byId:n,viewport:r,selected:i,onSelect:a,onDrop:o}=e,[s,c]=(0,J.useState)(null),l=K(t),u=W(t),d=new Set(n.keys()),f=(e,t)=>{if(e.button!==0)return;e.stopPropagation(),e.preventDefault(),ue();let n=e.currentTarget.closest(`[data-canvas-root]`)?.getBoundingClientRect(),r={left:n?.left??0,top:n?.top??0};e.currentTarget.setPointerCapture(e.pointerId),c({index:t,pointerId:e.pointerId,startX:e.clientX,startY:e.clientY,x:e.clientX-r.left,y:e.clientY-r.top,origin:r,dragging:!1,over:null})},p=e=>{if(!s||s.pointerId!==e.pointerId)return;let t=Math.hypot(e.clientX-s.startX,e.clientY-s.startY),n=s.dragging||t>se;c({...s,x:e.clientX-s.origin.left,y:e.clientY-s.origin.top,dragging:n,over:n?_e(e.clientX,e.clientY,d):null})},m=e=>{if(!s||s.pointerId!==e.pointerId)return;if(c(null),!s.dragging){a(s.index);return}let r=s.over?n.get(s.over):void 0;r&&r.id!==t.steps[s.index]?.target&&o(s.index,r)},h=s?.over?n.get(s.over):void 0;return(0,Y.jsxs)(Y.Fragment,{children:[h&&s&&h.id!==t.steps[s.index]?.target&&(0,Y.jsx)(`div`,{"data-testid":`flow-badge-drop`,className:`pointer-events-none absolute rounded-md border-2 border-[var(--flow-accent)] bg-[color-mix(in_srgb,var(--flow-accent)_6%,transparent)]`,style:U(h,r)}),[...l].map(([e,o])=>{let l=n.get(e);if(!l)return null;let d=q(l,r);return(0,Y.jsx)(`span`,{"data-overlay":!0,className:`absolute z-20 flex items-center gap-1 ${l.type===`arrow`?`-translate-x-1/2 -translate-y-[calc(100%+14px)]`:`-translate-x-full -translate-y-full`}`,style:{left:d.x-2,top:d.y-2},children:o.map(e=>{let n=e-1,r=s?.dragging&&s.index===n,o=i===n;return(0,Y.jsx)(`button`,{type:`button`,"data-testid":`flow-step-badge`,"data-selected":o||void 0,"aria-label":`Step ${e}: ${t.steps[n]?.title??``}`,"aria-pressed":o,title:`Click to select · drag onto another box to change it`,className:`flex h-[22px] min-w-[22px] cursor-grab touch-none items-center justify-center rounded-full px-1.5 text-[11.5px] font-semibold tabular-nums text-white transition-shadow active:cursor-grabbing ${u.has(e)?`bg-[var(--flow-fail)]`:`bg-[var(--flow-accent)]`} ${o?`ring-[3px] ring-[color-mix(in_srgb,var(--flow-accent)_35%,transparent)]`:`hover:ring-[3px] hover:ring-[color-mix(in_srgb,var(--flow-accent)_20%,transparent)]`} ${r?`opacity-35`:``}`,onPointerDown:e=>f(e,n),onPointerMove:p,onPointerUp:m,onPointerCancel:()=>c(null),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),a(n))},children:e},e)})},e)}),s?.dragging&&(0,Y.jsx)(`span`,{"aria-hidden":!0,"data-testid":`flow-badge-ghost`,className:`pointer-events-none absolute z-30 flex h-[26px] min-w-[26px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--flow-accent)] px-1.5 text-[12.5px] font-semibold tabular-nums text-white shadow-[0_6px_14px_rgba(0,0,0,0.25)]`,style:{left:s.x,top:s.y},children:s.index+1})]})}function ye(e){let{shape:t,viewport:n}=e,r=U(t,n,4);return(0,Y.jsxs)(`span`,{"data-testid":`flow-fork-marker`,className:`pointer-events-none absolute flex -translate-x-1/2 items-center gap-1 whitespace-nowrap rounded-full bg-[var(--flow-accent)] py-1 pl-1.5 pr-2.5 text-[11.5px] font-medium text-white`,style:{left:r.left+r.width/2,top:r.top+r.height+6},children:[(0,Y.jsx)(v,{size:13,stroke:2}),`Path starts here`]})}var be=2600,xe=.55,Se=1.1;function Ce(e,t){let n=document.querySelector(`[data-canvas-root]`),r=n?.clientWidth??window.innerWidth,i=n?.clientHeight??window.innerHeight;return{width:Math.max(1,r-(e?L(t):0)),height:Math.max(1,i-Te)}}var we={call:`Call`,async:`Fire and forget`,reply:`Reply`},Te=150;function Ee(e){let{frame:t,flow:n,targets:o,step:l,viewport:d}=e,f=r(),{store:p,viewportAnimation:h}=f,g=i(e=>e.rightPanel),_=I()===`docked`,v=n.steps.length,y=Math.min(Math.max(l,0),Math.max(v-1,0)),b=n.steps[y],x=(0,J.useMemo)(()=>new Map(o.map(e=>[e.id,e])),[o]),S=(0,J.useMemo)(()=>b?R(b).flatMap(e=>x.get(e)??[]):[],[b,x]),w=(0,J.useMemo)(()=>{let e=y>0?n.steps[y-1]:void 0;return e?R(e).flatMap(e=>x.get(e)??[]):[]},[n.steps,y,x]),T=i(e=>e.flowPlay?.trail),E=i(e=>e.viewMode),O=T?.[T.length-1],k=O?t.flows?.find(e=>e.id===O.flowId)?.name:void 0,[A,j]=(0,J.useState)(!1),[M,N]=(0,J.useState)(()=>u(c(t),Ce(_,g),64).zoom<xe),P=e=>{let r=Math.min(Math.max(e,0),v-1);p.getState().setFlowPlay({frameId:t.id,flowId:n.id,step:r,trail:T})},F=()=>{!O||!T||(j(!1),p.getState().setFlowPlay({frameId:t.id,flowId:O.flowId,step:O.step,trail:T.slice(0,-1)}))},L=(0,J.useRef)(F);L.current=F;let z=()=>{p.getState().setFlowPlay(null)},B=t.flows??[],V={tabs:C(B).filter(e=>e.steps.length>0).map(e=>({id:e.id,name:e.name})),active:De(B,n.id,T),onTab:e=>{j(!1),p.getState().setFlowPlay({frameId:t.id,flowId:e,step:0})},onEdit:E?null:()=>D(f,t.id,n.id),onNew:E?null:()=>{p.getState().setFlowPlay(null),ee(f,t.id)}},H=(0,J.useRef)(P);H.current=P;let U=(0,J.useRef)(z);U.current=z;let W=(0,J.useRef)(y);W.current=y;let G=()=>Ce(_,g),K=(0,J.useRef)(G);if(K.current=G,(0,J.useEffect)(()=>{let e=p.getState();e.setSelectedIds(new Set),h.animate(e.viewport,u(c(t),K.current(),64),e.setViewport)},[t.id,p,h]),(0,J.useEffect)(()=>{let e=s(M?[...S,...w]:S);if(!e)return;let t=p.getState();if(M){let n=u(e,K.current(),120),r=Math.min(n.zoom,Se),i=K.current();h.animate(t.viewport,{zoom:r,x:i.width/2-(e.x+e.width/2)*r,y:i.height/2-(e.y+e.height/2)*r},t.setViewport);return}let n=a(e,t.viewport,K.current(),96);n&&h.animate(t.viewport,n,t.setViewport)},[S,w,M,p,h]),(0,J.useEffect)(()=>{let e=e=>{if((e.target instanceof Element?e.target:null)?.closest(`input, textarea, select, [contenteditable=true], [role=menu]`)||(e.key===` `||e.key===`Enter`)&&m(e.target))return;let t=W.current;if(e.key===`ArrowRight`||e.key===` `||e.key===`Enter`)e.preventDefault(),H.current(t+1);else if(e.key===`ArrowLeft`||e.key===`Backspace`){if(e.preventDefault(),t===0&&L.current){L.current();return}H.current(t-1)}else e.key===`Home`?(e.preventDefault(),H.current(0)):e.key===`Escape`&&(e.preventDefault(),e.stopPropagation(),U.current())};return window.addEventListener(`keydown`,e,!0),()=>window.removeEventListener(`keydown`,e,!0)},[]),(0,J.useEffect)(()=>{if(!A)return;if(y>=v-1||(b?.branches?.length??0)>0){j(!1);return}let e=window.setTimeout(()=>H.current(W.current+1),be);return()=>window.clearTimeout(e)},[A,y,v,b]),!b)return(0,Y.jsx)(Oe,{flow:n,index:0,kind:`call`,autoplay:!1,onAutoplay:()=>{},onGo:()=>{},onStop:z,branches:[],onBranch:()=>{},returnName:k??null,onBack:F,follow:M,onFollow:N,switcher:V});let q=ne(t.flows??[],n.id);return(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(re,{frameId:t.id,flow:n,targets:o,index:y,viewport:d,lead:q}),(0,Y.jsx)(Oe,{flow:n,index:y,kind:te(o,[...q,...n.steps],q.length+y),autoplay:A,onAutoplay:j,onGo:P,onStop:z,branches:(b.branches??[]).flatMap(e=>{let r=t.flows?.find(t=>t.id===e&&t.id!==n.id);return r&&r.steps.length>0?[{id:r.id,name:r.name}]:[]}),onBranch:e=>{j(!1),p.getState().setFlowPlay({frameId:t.id,flowId:e,step:0,trail:[...T??[],{flowId:n.id,step:y}]})},returnName:k??null,onBack:F,follow:M,onFollow:N,switcher:V})]})}function De(e,t,n){let r=n?.[0]?.flowId;if(r)return r;let i=t,a=new Set;for(;!a.has(i);){a.add(i);let t=V(e,i);if(!t)return i;i=t.flow.id}return i}function Oe(e){let{flow:t,index:n,kind:r,autoplay:i,onAutoplay:a,onGo:o,onStop:s,branches:c,onBranch:l}=e,{returnName:u,onBack:d,follow:f,onFollow:p,switcher:m}=e,g=t.steps.length,_=t.steps[n],y=n>=g-1,b=`flex h-8 w-8 shrink-0 cursor-pointer items-center justify-center rounded-lg text-[var(--chrome-fg-600)] transition-colors hover:bg-[var(--chrome-hover)] hover:text-[var(--chrome-fg-900)] disabled:pointer-events-none disabled:opacity-35`;return(0,Y.jsxs)(`div`,{"data-overlay":!0,"data-testid":`flow-player`,className:`absolute bottom-6 left-1/2 z-30 flex w-[min(600px,calc(100%-32px))] -translate-x-1/2 flex-col gap-2 rounded-2xl bg-[var(--chrome-popup)] p-3 shadow-[0_8px_32px_rgba(0,0,0,0.16)] ring-1 ring-[var(--chrome-ring)]`,onPointerDown:e=>e.stopPropagation(),onDoubleClick:e=>e.stopPropagation(),children:[(0,Y.jsx)(ke,{switcher:m}),(0,Y.jsxs)(`div`,{className:`flex items-start gap-3`,children:[(0,Y.jsx)(`span`,{className:`mt-0.5 flex h-6 min-w-6 shrink-0 items-center justify-center rounded-full px-1.5 text-[12px] font-medium tabular-nums text-white ${_?.fails?`bg-[var(--flow-fail)]`:`bg-[var(--flow-accent)]`}`,children:g===0?`–`:n+1}),(0,Y.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,Y.jsx)(`p`,{"data-testid":`flow-step-title`,className:`text-[14px] font-medium leading-snug text-[var(--chrome-fg-900)]`,children:_?.title||(g===0?`This flow has no steps yet`:`Untitled step`)}),_?.text&&(0,Y.jsx)(`p`,{"data-testid":`flow-step-text`,className:`mt-0.5 text-[13px] leading-relaxed text-[var(--chrome-fg-600)]`,children:_.text}),_&&(r!==`call`||_.payload||_.fails)&&(0,Y.jsxs)(`p`,{className:`mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-[var(--chrome-fg-500)]`,children:[_.fails&&(0,Y.jsx)(`span`,{"data-testid":`flow-step-fails`,className:`rounded-full bg-[color-mix(in_srgb,var(--flow-fail)_14%,transparent)] px-2 py-0.5 font-medium text-[var(--flow-fail)]`,children:`Fails here`}),r!==`call`&&(0,Y.jsx)(`span`,{"data-testid":`flow-step-kind`,className:`rounded-full bg-[var(--chrome-rest)] px-2 py-0.5`,children:we[r]}),_.payload&&(0,Y.jsxs)(`span`,{className:`rounded-full bg-[var(--chrome-rest)] px-2 py-0.5`,children:[`Carries `,_.payload]})]}),c.length>0&&(0,Y.jsxs)(`div`,{className:`mt-2 flex flex-wrap items-center gap-1.5`,"data-testid":`flow-branches`,children:[(0,Y.jsx)(`span`,{className:`text-[12px] text-[var(--chrome-fg-500)]`,children:`Or follow:`}),c.map(e=>(0,Y.jsxs)(`button`,{type:`button`,"data-testid":`flow-branch`,className:`flex cursor-pointer items-center gap-1 rounded-full px-2.5 py-1 text-[12px] font-medium text-[var(--chrome-fg-900)] bg-[var(--chrome-rest)] transition-colors hover:bg-[var(--chrome-hover)]`,onClick:()=>l(e.id),children:[(0,Y.jsx)(v,{size:12,stroke:2}),e.name]},e.id))]})]}),(0,Y.jsx)(`button`,{type:`button`,"aria-label":`Stop playing`,className:b,onClick:s,children:(0,Y.jsx)(N,{size:16,stroke:1.75})})]}),(0,Y.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,Y.jsxs)(`span`,{className:`flex min-w-0 flex-1 items-center gap-1 truncate text-[12px] text-[var(--chrome-fg-500)]`,children:[u&&(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsxs)(`button`,{type:`button`,"data-testid":`flow-back`,title:`Back to where this path was taken (←)`,className:`flex cursor-pointer items-center gap-0.5 rounded px-1 font-medium text-[var(--chrome-fg-900)] hover:bg-[var(--chrome-hover)]`,onClick:d,children:[(0,Y.jsx)(h,{size:13,stroke:2}),u]}),(0,Y.jsx)(`span`,{"aria-hidden":!0,children:`/`})]}),(u||!m.tabs.some(e=>e.id===t.id)||!Q(m))&&(0,Y.jsx)(`span`,{className:`truncate`,children:t.name})]}),(0,Y.jsx)(`div`,{className:`flex items-center gap-1`,"data-testid":`flow-dots`,children:t.steps.map((e,t)=>(0,Y.jsx)(`button`,{type:`button`,"aria-label":e.branches?.length?`Step ${t+1}, where another path starts`:`Step ${t+1}`,"data-fork":e.branches?.length?!0:void 0,onClick:()=>o(t),className:`relative h-1.5 cursor-pointer rounded-full transition-all ${t===n?`w-4 bg-[var(--flow-accent)]`:`w-1.5 bg-[var(--chrome-fg-300)] hover:bg-[var(--chrome-fg-500)]`}`,children:e.branches?.length?(0,Y.jsx)(v,{size:9,stroke:2.5,"aria-hidden":!0,className:`absolute left-1/2 top-2 -translate-x-1/2 text-[var(--chrome-fg-400)]`}):null},`${e.target}-${t}`))}),(0,Y.jsx)(`span`,{"data-testid":`flow-position`,className:`w-10 text-right text-[12px] tabular-nums text-[var(--chrome-fg-500)]`,children:g===0?`0 / 0`:`${n+1} / ${g}`}),(0,Y.jsxs)(`div`,{className:`flex items-center`,children:[(0,Y.jsx)(`button`,{type:`button`,"aria-label":`Previous step`,"data-testid":`flow-prev`,className:b,disabled:n===0&&!u,onClick:()=>n===0?d():o(n-1),children:(0,Y.jsx)(O,{size:16,stroke:2})}),(0,Y.jsx)(`button`,{type:`button`,"aria-label":f?`Show the whole diagram`:`Follow each step`,title:f?`Show the whole diagram`:`Follow each step`,"aria-pressed":f,"data-testid":`flow-follow`,className:`${b} ${f?`bg-[var(--chrome-active)] text-[var(--chrome-fg-900)]`:``}`,onClick:()=>p(!f),children:(0,Y.jsx)(A,{size:16,stroke:1.75})}),(0,Y.jsx)(`button`,{type:`button`,"aria-label":i?`Pause`:`Play automatically`,"data-testid":`flow-autoplay`,className:b,disabled:g<2,onClick:()=>{!i&&y&&o(0),a(!i)},children:i?(0,Y.jsx)(ae,{size:14}):(0,Y.jsx)(P,{size:14})}),y&&g>1?(0,Y.jsx)(`button`,{type:`button`,"aria-label":`Play again`,"data-testid":`flow-replay`,className:b,onClick:()=>o(0),children:(0,Y.jsx)(ie,{size:15,stroke:1.75})}):(0,Y.jsx)(`button`,{type:`button`,"aria-label":`Next step`,"data-testid":`flow-next`,className:b,disabled:y,onClick:()=>o(n+1),children:(0,Y.jsx)(k,{size:16,stroke:2})})]})]})]})}function Q(e){return e.tabs.length>1||e.onEdit!==null}function ke(e){let{tabs:t,active:n,onTab:r,onEdit:i,onNew:a}=e.switcher;if(!Q(e.switcher))return null;let o=`shrink-0 cursor-pointer rounded-md px-2 py-1 text-[12.5px] transition-colors hover:bg-[var(--chrome-hover)]`;return(0,Y.jsxs)(`div`,{className:`-mx-1 -mt-1 flex items-center gap-1 border-b border-[var(--chrome-divider)] pb-1.5`,children:[(0,Y.jsxs)(`div`,{role:`group`,"aria-label":`Flows`,"data-testid":`flow-tabs`,className:`flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto`,children:[t.map(e=>(0,Y.jsx)(`button`,{type:`button`,"aria-pressed":e.id===n,"data-testid":`flow-tab`,className:`${o} ${e.id===n?`bg-[var(--chrome-active)] font-medium text-[var(--chrome-fg-900)]`:`text-[var(--chrome-fg-500)]`}`,onClick:()=>r(e.id),children:e.name},e.id)),a&&(0,Y.jsx)(`button`,{type:`button`,"aria-label":`New flow`,title:`New flow`,"data-testid":`flow-tab-new`,className:`${o} flex items-center text-[var(--chrome-fg-400)]`,onClick:a,children:(0,Y.jsx)(M,{size:14,stroke:2})})]}),i&&(0,Y.jsxs)(`button`,{type:`button`,"data-testid":`flow-player-edit`,className:`flex shrink-0 cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-[12.5px] font-medium text-[var(--chrome-fg-700)] transition-colors hover:bg-[var(--chrome-hover)]`,onClick:i,children:[(0,Y.jsx)(j,{size:13,stroke:1.75}),`Edit`]})]})}var $=10,Ae=28,je=.28;function Me(e){let{viewport:t}=e,{store:n}=r(),a=i(e=>e.shapes),o=i(e=>e.flowEdit),s=i(e=>e.flowPlay),c=i(e=>e.flowPreview),l=s??o??c,u=(0,J.useMemo)(()=>{let e=l?a.find(e=>e.id===l.frameId):void 0;return e?.type===`figure`?e:null},[a,l]),d=(0,J.useMemo)(()=>u?F(a,u):[],[a,u]),f=u?.flows?.find(e=>e.id===l?.flowId),p=(0,J.useMemo)(()=>f?H(f,d):null,[f,d]);return(0,J.useEffect)(()=>{if(!l||u&&f)return;let e=n.getState();e.setFlowPlay(null),e.setFlowEdit(null),e.setFlowPreview(null)},[l,u,f,n]),!l||!u||!p?null:s?(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(Ne,{frame:u,viewport:t}),(0,Y.jsx)(Ee,{frame:u,flow:p,targets:d,step:s.step,viewport:t})]}):o?(0,Y.jsx)(le,{frame:u,flow:p,targets:d,viewport:t}):(0,Y.jsx)(Pe,{flow:p,targets:d,viewport:t})}function Ne(e){let{frame:t,viewport:n}=e,r=c(t),i=l({x:r.x-$,y:r.y-Ae},n),a=l({x:r.x+r.width+$,y:r.y+r.height+$},n);return(0,Y.jsx)(`div`,{"data-testid":`flow-spotlight`,className:`pointer-events-none absolute rounded-lg`,style:{left:i.x,top:i.y,width:Math.max(0,a.x-i.x),height:Math.max(0,a.y-i.y),boxShadow:`0 0 0 9999px var(--canvas-scrim)`}})}function Pe(e){let{flow:t,targets:n,viewport:r}=e,i=(0,J.useMemo)(()=>new Map(n.map(e=>[e.id,e])),[n]);return(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(`style`,{"data-testid":`flow-preview`,children:(0,J.useMemo)(()=>{let e=new Set(t.steps.flatMap(R));t.steps.forEach((r,i)=>{let a=t.steps[i-1];if(a)for(let t of R(r))for(let r of R(a)){let i=B(n,r,t);if(i?.kind===`arrows`){i.hops.forEach(t=>e.add(t.arrow.id)),i.through.forEach(t=>e.add(t));break}}});let r=n.filter(t=>!e.has(t.id)&&t.type!==`figure`).flatMap(e=>[d(e.id),f(`data-icon-label`,e.id)]);return[`[data-canvas-root] :is([data-shape-id],[data-icon-label]){transition:opacity 180ms ease}`,r.length>0?`${r.join(`,`)}{opacity:${je}!important}`:``].join(``)},[t.steps,n])}),(0,Y.jsx)(G,{numbers:K(t),byId:i,viewport:r,current:null,failing:W(t)})]})}export{Me as FlowLayer};

package/assets/editor/assets/flow-panel-D_K9wgZi.js

@@ -1 +0,0 @@
-import{i as e}from"./rolldown-runtime-aKtaBQYM.js";import{n as t,t as n}from"./jsx-runtime-2Zwg-L3c.js";import{t as r}from"./tooltip-DgEojto1.js";import{D as i,E as a,T as o,g as s,h as c,i as l,l as u,m as d,o as f,p,r as m,t as h}from"./menu-BPrc8Ara.js";import{i as g}from"./config-a_lz-57R.js";import{a as _,o as v}from"./editor-B0tARd79.js";import{k as y}from"./slides-D9bnXqtf.js";import{t as b}from"./editable-target-BTLnvKNi.js";import{t as x}from"./createReactComponent-9UsI5fmM.js";import{t as S}from"./IconAlertTriangle-CxPhYpe-.js";import{n as C,r as w,t as T}from"./IconTrash-DbN_RxB7.js";import{_ as E,a as D,b as O,f as k,g as ee,h as A,i as j,l as M,m as N,p as te,r as ne,s as re,t as P,u as ie,v as F,y as ae}from"./tree-rq4RTGgw.js";import{n as oe}from"./useValueChanged-p8z-93L4.js";import{t as se}from"./IconChevronLeft-BR0iwdRI.js";import{t as I}from"./IconChevronRight-DBDnxPYT.js";import{i as ce,n as le,r as L,t as ue}from"./use-drag-reorder-C3h4ZMoZ.js";import{n as R,t as z}from"./IconNote-CSELvWzx.js";import{t as B}from"./IconPencil-C5Y-Y4dC.js";import{t as V}from"./IconPlus-BbmieIBT.js";import{n as H,r as U,t as W}from"./MenuSubmenuTrigger-CpN67g09.js";import{t as G}from"./IconSparkles-WDcg8BA9.js";import{t as K}from"./IconX-AlbPkO_g.js";import{t as q}from"./IconPlayerPlayFilled-D4OODBX7.js";import{n as de,r as fe,t as pe}from"./core-CBnmD9hT.js";import{n as J,r as Y}from"./flow-start-ccYJ2KB9.js";import{n as me}from"./surface-Dke4SWpE.js";import{a as he}from"./chrome-C2RCq3SI.js";import"./chrome-layout-B8YmHznO.js";import{t as ge}from"./panel-shell-CG2aq4Ia.js";import{i as _e,n as ve,s as ye}from"./flows-GGbkNqs8.js";var be=x(`outline`,`arrows-exchange`,`ArrowsExchange`,[[`path`,{d:`M7 10h14l-4 -4`,key:`svg-0`}],[`path`,{d:`M17 14h-14l4 4`,key:`svg-1`}]]),xe=x(`outline`,`package`,`Package`,[[`path`,{d:`M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5`,key:`svg-0`}],[`path`,{d:`M12 12l8 -4.5`,key:`svg-1`}],[`path`,{d:`M12 12l0 9`,key:`svg-2`}],[`path`,{d:`M12 12l-8 -4.5`,key:`svg-3`}],[`path`,{d:`M16 5.25l-8 4.5`,key:`svg-4`}]]),X=e(t(),1),Se=`w-full min-w-0 rounded-md bg-transparent px-1.5 py-1 text-[12px] text-[var(--chrome-fg-800)] outline-none ring-1 ring-transparent transition-shadow placeholder:text-[var(--chrome-fg-300)] hover:ring-[var(--chrome-ring)] focus:bg-[var(--chrome-rest)] focus:ring-[var(--chrome-fg-300)]`,Ce=`flex cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-[12px] text-[var(--chrome-fg-500)] transition-colors hover:bg-[var(--chrome-hover)] hover:text-[var(--chrome-fg-900)] disabled:pointer-events-none disabled:text-[var(--chrome-fg-300)]`,we=`flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-[var(--chrome-fg-400)] transition-colors hover:bg-[var(--chrome-hover)] hover:text-[var(--chrome-fg-800)] disabled:pointer-events-none disabled:opacity-40`,Te=`flex h-9 w-full cursor-pointer items-center justify-center gap-2 rounded-lg bg-[var(--chrome-accent)] text-[13px] text-white transition-colors hover:bg-[var(--chrome-accent-hover)] disabled:pointer-events-none disabled:bg-[var(--chrome-hover)] disabled:text-[var(--chrome-fg-400)]`,Ee=`flex cursor-pointer items-center justify-center gap-1.5 rounded-lg px-3 text-[13px] text-[var(--chrome-fg-700)] ring-1 ring-[var(--chrome-ring)] transition-colors hover:bg-[var(--chrome-rest)] hover:text-[var(--chrome-fg-900)] disabled:pointer-events-none disabled:opacity-50`,Z=n(),De=[{kind:`call`,label:`Call`,hint:`Waits for an answer`,pickable:!0},{kind:`async`,label:`Fire and forget`,hint:`Doesn't wait for an answer`,pickable:!0},{kind:`reply`,label:`Reply`,hint:`Answers an earlier step`,pickable:!1}],Oe=e=>De.find(t=>t.kind===e)?.label;function ke(e){let{step:t,index:n,count:r,current:a,selected:o,picking:s,names:c,otherFlows:l,loose:u}=e,{actions:d,grip:p,rowRef:m,rowStyle:h}=e,{onPlay:g,onChange:_,onMove:v,onRemove:y,onNewPath:b}=d,[x,C]=(0,X.useState)(!1),[w,T]=(0,X.useState)(!1),E=t.kind??`call`,D=t.also??[],k=t.branches??[],ee=new Map(l.map(e=>[e.id,e.name])),A=x||!!t.text,j=w||!!t.payload,M=D.length>0||E!==`call`||j||t.fails||k.length>0;return(0,Z.jsxs)(`li`,{ref:m,"data-testid":`flow-step-${n}`,"data-current":a||void 0,"data-selected":o||void 0,"aria-current":o?`step`:void 0,className:`group relative flex gap-2.5 rounded-lg py-2.5 pl-5 pr-2 transition-colors ${s?`bg-[color-mix(in_srgb,var(--flow-accent)_10%,transparent)] ring-1 ring-[color-mix(in_srgb,var(--flow-accent)_45%,transparent)]`:o?`bg-[color-mix(in_srgb,var(--flow-accent)_8%,transparent)] ring-1 ring-[color-mix(in_srgb,var(--flow-accent)_30%,transparent)]`:a?`bg-[var(--chrome-active)]`:`hover:bg-[var(--chrome-rest)]`}`,style:h,onPointerDown:e=>{e.target.closest(`[data-step-insert]`)||d.onSelect()},onFocusCapture:e=>{e.target.closest(`[data-step-insert]`)||d.onSelect()},onPointerEnter:()=>d.onHover(!0),onPointerLeave:()=>d.onHover(!1),children:[(0,Z.jsx)(`button`,{type:`button`,"aria-label":`Add a step before step ${n+1}`,title:`Add a step here`,"data-testid":`flow-step-insert-${n}`,"data-step-insert":!0,className:`absolute -top-2.5 left-1/2 z-10 flex h-5 w-5 -translate-x-1/2 cursor-pointer items-center justify-center rounded-full bg-[var(--chrome-popup)] text-[var(--flow-accent)] opacity-0 ring-1 ring-[color-mix(in_srgb,var(--flow-accent)_40%,transparent)] transition-opacity hover:bg-[color-mix(in_srgb,var(--flow-accent)_10%,var(--chrome-popup))] focus-visible:opacity-100 group-hover:opacity-100`,onPointerDown:e=>e.stopPropagation(),onClick:d.onInsertBefore,children:(0,Z.jsx)(V,{size:11,stroke:2.5})}),(0,Z.jsx)(`span`,{"aria-hidden":!0,"data-testid":`flow-step-grip-${n}`,title:`Drag to reorder`,className:`absolute bottom-0 left-0 top-0 flex w-5 cursor-grab touch-none items-center justify-center text-[var(--chrome-fg-300)] opacity-0 transition-opacity active:cursor-grabbing group-hover:opacity-100`,...p,children:(0,Z.jsx)(ce,{size:13,stroke:1.75})}),(0,Z.jsx)(`button`,{type:`button`,"aria-label":`Play from step ${n+1}`,title:`Play from this step`,onClick:g,className:`mt-px flex h-6 min-w-6 shrink-0 cursor-pointer items-center justify-center rounded-full px-1.5 text-[12px] font-semibold tabular-nums text-white transition-shadow hover:ring-4 hover:ring-[color-mix(in_srgb,var(--flow-accent)_20%,transparent)] ${t.fails?`bg-[var(--flow-fail)]`:`bg-[var(--flow-accent)]`}`,children:n+1}),(0,Z.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-0.5 pr-6`,children:[(0,Z.jsx)(`input`,{"aria-label":`Step title`,"data-testid":`flow-step-title-${n}`,className:`${Se} -mx-1.5 h-6 px-1.5 text-[13px] font-semibold text-[var(--chrome-fg-900)]`,defaultValue:t.title,onBlur:e=>{e.target.value!==t.title&&_({title:e.target.value})},onKeyDown:ze},`t-${t.title}`),A&&(0,Z.jsx)(`textarea`,{autoFocus:x&&!t.text,"aria-label":`What happens at this step`,"data-testid":`flow-step-text-${n}`,rows:1,className:`w-full min-w-0 rounded-md bg-transparent px-1.5 py-1 text-[12px] text-[var(--chrome-fg-800)] outline-none ring-1 ring-transparent transition-shadow placeholder:text-[var(--chrome-fg-300)] hover:ring-[var(--chrome-ring)] focus:bg-[var(--chrome-rest)] focus:ring-[var(--chrome-fg-300)] -mx-1.5 resize-none px-1.5 text-[12px] leading-relaxed text-[var(--chrome-fg-600)] [field-sizing:content]`,placeholder:`What happens here`,defaultValue:t.text??``,onBlur:e=>{let n=e.target.value.trim();n!==(t.text??``)&&_({text:n}),n||C(!1)},onKeyDown:ze},`d-${t.text??``}`),u&&(0,Z.jsx)(je,{index:n,names:u.names,justAdded:o,onAttach:u.onAttach}),M&&(0,Z.jsxs)(`div`,{className:`mt-1 flex flex-wrap gap-1`,"data-testid":`flow-step-chips-${n}`,children:[E!==`call`&&(0,Z.jsx)(Fe,{kind:E,onPick:e=>_({kind:e}),trigger:(0,Z.jsxs)(f,{"data-testid":`flow-step-kind-${n}`,className:`${Q} cursor-pointer hover:bg-[var(--chrome-hover)]`,children:[Oe(E),(0,Z.jsx)(i,{size:11,stroke:2,className:`text-[var(--chrome-fg-400)]`})]})}),j&&(0,Z.jsx)(Pe,{index:n,payload:t.payload,editing:w,onEdit:()=>T(!0),onDone:e=>{T(!1),e!==(t.payload??``)&&_({payload:e||void 0})}}),t.fails&&(0,Z.jsx)(Ne,{testId:`flow-step-fails-${n}`,tone:`fail`,icon:(0,Z.jsx)(S,{size:11,stroke:2}),label:`Fails here`,onRemove:()=>_({fails:void 0})}),D.map(e=>(0,Z.jsx)(Ne,{icon:(0,Z.jsx)(V,{size:11,stroke:2}),label:c.get(e)??`Shape`,title:`Part of this step`,onRemove:()=>_({also:D.filter(t=>t!==e)})},e)),k.map(e=>(0,Z.jsx)(Ne,{testId:`flow-step-path-${n}`,icon:(0,Z.jsx)(O,{size:11,stroke:2}),label:ee.get(e)??`Missing flow`,title:`Another path from here`,onRemove:()=>_({branches:k.filter(t=>t!==e)})},e))]})]}),(0,Z.jsx)(Re,{index:n,count:r,step:t,hasNote:A,hasPayload:j,paths:l.filter(e=>!k.includes(e.id)),onNote:()=>C(!0),onPayload:()=>T(!0),onChange:_,onMove:v,onRemove:y,onNewPath:b,onInsertBefore:d.onInsertBefore,onInsertAfter:d.onInsertAfter,onChangeBox:d.onChangeBox})]})}var Ae=[{transform:`translateX(0)`},{transform:`translateX(-4px)`},{transform:`translateX(4px)`},{transform:`translateX(-3px)`},{transform:`translateX(2px)`},{transform:`translateX(0)`}];function je(e){let{index:t,names:n,justAdded:r,onAttach:i}=e,a=(0,X.useRef)(null),o=(0,X.useRef)(r);return(0,X.useEffect)(()=>{let e=a.current;!o.current||!e||window.matchMedia(`(prefers-reduced-motion: reduce)`).matches||e.animate(Ae,{duration:360,easing:`ease-out`})},[]),(0,Z.jsxs)(`div`,{ref:a,role:`status`,"data-testid":`flow-step-loose-${t}`,title:`The arrow isn't attached to ${n}, so the hand-off can't follow it`,className:`mt-1 flex items-start gap-1.5 rounded-md bg-[color-mix(in_srgb,var(--flow-warn)_12%,transparent)] py-1 pl-1.5 pr-1 text-[11.5px] text-[var(--flow-warn-fg)] ring-1 ring-[color-mix(in_srgb,var(--flow-warn)_30%,transparent)]`,children:[(0,Z.jsx)(S,{size:12,stroke:2,className:`mt-[3px] shrink-0`}),(0,Z.jsxs)(`span`,{className:`min-w-0 flex-1 py-px leading-snug`,children:[`Arrow isn't attached to `,n]}),(0,Z.jsxs)(`button`,{type:`button`,"data-testid":`flow-step-attach-${t}`,className:`flex h-5 shrink-0 cursor-pointer items-center gap-1 rounded px-1.5 font-medium hover:bg-[color-mix(in_srgb,var(--flow-warn)_18%,transparent)]`,onClick:i,children:[(0,Z.jsx)(R,{size:11,stroke:2}),`Attach`]})]})}var Q=`flex h-6 items-center gap-1 rounded-md bg-[var(--chrome-rest)] px-1.5 text-[11.5px] text-[var(--chrome-fg-700)] ring-1 ring-[var(--chrome-ring)]`,$=`flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 text-[13px] text-[var(--chrome-fg-700)] outline-none data-[highlighted]:bg-[var(--chrome-hover)]`,Me=`min-w-[200px] p-1 outline-none ${me.popup}`;function Ne(e){let{label:t,icon:n,onRemove:r,testId:i,title:a,tone:o}=e;return(0,Z.jsxs)(`span`,{"data-testid":i,title:a,className:`${Q} pr-0.5 ${o===`fail`?`bg-[color-mix(in_srgb,var(--flow-fail)_10%,transparent)] text-[var(--flow-fail)] ring-[color-mix(in_srgb,var(--flow-fail)_25%,transparent)]`:``}`,children:[(0,Z.jsx)(`span`,{className:`opacity-70`,children:n}),(0,Z.jsx)(`span`,{className:`max-w-[140px] truncate`,children:t}),(0,Z.jsx)(`button`,{type:`button`,"aria-label":`Remove ${t}`,className:`flex h-4 w-4 cursor-pointer items-center justify-center rounded opacity-60 hover:bg-[var(--chrome-hover)] hover:opacity-100`,onClick:r,children:(0,Z.jsx)(K,{size:10,stroke:2})})]})}function Pe(e){let{index:t,payload:n,editing:r,onEdit:i,onDone:a}=e;return r?(0,Z.jsxs)(`span`,{className:`${Q} pr-1`,children:[(0,Z.jsx)(xe,{size:11,stroke:2,className:`opacity-70`}),(0,Z.jsx)(`input`,{autoFocus:!0,"data-testid":`flow-step-payload-${t}`,"aria-label":`What this step carries`,placeholder:`e.g. order #1042`,className:`w-28 bg-transparent text-[11.5px] outline-none placeholder:text-[var(--chrome-fg-400)]`,defaultValue:n??``,onBlur:e=>a(e.target.value.trim()),onKeyDown:e=>{e.stopPropagation(),(e.key===`Enter`||e.key===`Escape`)&&e.currentTarget.blur()}})]}):(0,Z.jsxs)(`span`,{className:`${Q} pr-0.5`,"data-testid":`flow-step-payload-chip-${t}`,children:[(0,Z.jsx)(xe,{size:11,stroke:2,className:`opacity-70`}),(0,Z.jsx)(`button`,{type:`button`,title:`What this step carries`,className:`max-w-[140px] cursor-text truncate`,onClick:i,children:n}),(0,Z.jsx)(`button`,{type:`button`,"aria-label":`Remove what it carries`,className:`flex h-4 w-4 cursor-pointer items-center justify-center rounded opacity-60 hover:bg-[var(--chrome-hover)] hover:opacity-100`,onClick:()=>a(``),children:(0,Z.jsx)(K,{size:10,stroke:2})})]})}function Fe(e){let{kind:t,onPick:n,trigger:r}=e;return(0,Z.jsxs)(u,{children:[r,(0,Z.jsx)(d,{children:(0,Z.jsx)(p,{side:`bottom`,align:`start`,sideOffset:4,className:`z-50 outline-none`,children:(0,Z.jsx)(m,{"data-overlay":!0,className:`min-w-[220px] p-1`,children:(0,Z.jsx)(Ie,{kind:t,onPick:n})})})})]})}function Ie(e){let{kind:t,onPick:n}=e;return(0,Z.jsx)(Z.Fragment,{children:De.filter(e=>e.pickable).map(e=>(0,Z.jsxs)(s,{"data-testid":`flow-kind-${e.kind}`,className:$,onClick:()=>n(e.kind===`call`?void 0:e.kind),children:[(0,Z.jsx)(`span`,{className:`flex w-4 justify-center text-[var(--chrome-fg-900)]`,children:t===e.kind&&(0,Z.jsx)(oe,{size:14,stroke:2})}),(0,Z.jsxs)(`span`,{className:`flex flex-col`,children:[(0,Z.jsx)(`span`,{className:`text-[var(--chrome-fg-900)]`,children:e.label}),(0,Z.jsx)(`span`,{className:`text-[11px] text-[var(--chrome-fg-400)]`,children:e.hint})]})]},e.kind))})}function Le(e){let{label:t,icon:n,testId:r,children:i}=e;return(0,Z.jsxs)(H,{children:[(0,Z.jsxs)(W,{className:`${$} justify-between`,"data-testid":r,children:[(0,Z.jsxs)(`span`,{className:`flex items-center gap-2`,children:[(0,Z.jsx)(`span`,{className:`text-[var(--chrome-fg-400)]`,children:n}),t]}),(0,Z.jsx)(I,{size:14,stroke:1.75,className:`text-[var(--chrome-fg-400)]`})]}),(0,Z.jsx)(d,{children:(0,Z.jsx)(p,{className:`z-50 outline-none`,children:(0,Z.jsx)(c,{"data-overlay":!0,className:Me,children:i})})})]})}function Re(e){let{index:t,count:n,step:r,hasNote:i,hasPayload:o,paths:c}=e,{onNote:g,onPayload:_,onChange:v,onMove:y,onRemove:b,onNewPath:x}=e,{onInsertBefore:E,onInsertAfter:D,onChangeBox:k}=e,ee=r.branches??[];return(0,Z.jsxs)(u,{children:[(0,Z.jsx)(f,{"aria-label":`Step options`,"data-testid":`flow-step-menu-${t}`,className:`${we} absolute right-1.5 top-2 opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100 data-[popup-open]:opacity-100`,children:(0,Z.jsx)(a,{size:14,stroke:1.75})}),(0,Z.jsx)(d,{children:(0,Z.jsx)(p,{side:`bottom`,align:`end`,sideOffset:4,className:`z-50 outline-none`,children:(0,Z.jsxs)(m,{"data-overlay":!0,className:`min-w-[210px] p-1`,children:[(0,Z.jsx)(h,{testId:`flow-step-change-box`,icon:(0,Z.jsx)(be,{size:15,stroke:1.75}),onClick:k,children:`Change box…`}),(0,Z.jsx)(h,{testId:`flow-step-insert-above`,icon:(0,Z.jsx)(le,{size:15,stroke:1.75}),onClick:E,children:`Add a step above`}),(0,Z.jsx)(h,{testId:`flow-step-insert-below`,icon:(0,Z.jsx)(L,{size:15,stroke:1.75}),onClick:D,children:`Add a step below`}),(0,Z.jsx)(l,{}),!i&&(0,Z.jsx)(h,{testId:`flow-step-add-note`,icon:(0,Z.jsx)(z,{size:15,stroke:1.75}),onClick:g,children:`Add a note`}),(0,Z.jsx)(Le,{label:`How it travels`,icon:(0,Z.jsx)(U,{size:15,stroke:1.75}),testId:`flow-step-travels`,children:(0,Z.jsx)(Ie,{kind:r.kind??`call`,onPick:e=>v({kind:e})})}),!o&&(0,Z.jsx)(h,{testId:`flow-step-add-payload`,icon:(0,Z.jsx)(xe,{size:15,stroke:1.75}),onClick:_,children:`Add what it carries`}),(0,Z.jsx)(h,{testId:`flow-step-toggle-fails`,icon:(0,Z.jsx)(S,{size:15,stroke:1.75}),onClick:()=>v({fails:!r.fails||void 0}),children:r.fails?`Doesn't fail here`:`Fails here`}),(0,Z.jsxs)(Le,{label:`Another path from here`,icon:(0,Z.jsx)(O,{size:15,stroke:1.75}),testId:`flow-step-paths`,children:[c.map(e=>(0,Z.jsx)(s,{className:$,onClick:()=>v({branches:[...ee,e.id]}),children:e.name},e.id)),c.length>0&&(0,Z.jsx)(l,{}),(0,Z.jsxs)(s,{className:$,"data-testid":`flow-step-new-path`,onClick:x,children:[(0,Z.jsx)(V,{size:14,stroke:1.75,className:`text-[var(--chrome-fg-400)]`}),`New path`]})]}),(0,Z.jsx)(l,{}),(0,Z.jsx)(h,{testId:`flow-step-up`,icon:(0,Z.jsx)(C,{size:15,stroke:1.75}),disabled:t===0,onClick:()=>y(-1),children:`Move up`}),(0,Z.jsx)(h,{testId:`flow-step-down`,icon:(0,Z.jsx)(w,{size:15,stroke:1.75}),disabled:t===n-1,onClick:()=>y(1),children:`Move down`}),(0,Z.jsx)(h,{testId:`flow-step-remove`,icon:(0,Z.jsx)(T,{size:15,stroke:1.75}),onClick:b,children:`Remove step`})]})})})]})}function ze(e){e.stopPropagation(),(e.key===`Enter`&&!e.shiftKey||e.key===`Escape`)&&e.currentTarget.blur()}function Be(){let e=_(),{store:t}=e,n=v(e=>e.shapes),i=v(e=>e.viewMode),a=(0,X.useMemo)(()=>fe(n),[n]),o=(0,X.useMemo)(()=>y(n).filter(e=>pe(n,[e])?.id===e.id),[n]),s=()=>t.getState().setFlowsOpen(!1),c=(e,n)=>t.getState().setFlowPreview(n?{frameId:e,flowId:n}:null);return(0,X.useEffect)(()=>()=>t.getState().setFlowPreview(null),[t]),(0,Z.jsxs)(ge,{width:300,testId:`flow-list`,ariaLabel:`Flows`,onDismiss:s,children:[(0,Z.jsxs)(`div`,{className:`flex items-center gap-1 py-2 pl-4 pr-2`,children:[(0,Z.jsx)(`span`,{className:`flex-1 text-[14px] font-medium text-[var(--chrome-fg-900)]`,children:`Flows`}),!i&&o.length>0&&(0,Z.jsx)(Ue,{frames:o,onPick:t=>Y(e,t.id)}),(0,Z.jsx)(r,{label:`Close`,side:`bottom`,children:(0,Z.jsx)(`button`,{type:`button`,"aria-label":`Close flows`,"data-testid":`flow-list-close`,onClick:s,className:he,children:(0,Z.jsx)(K,{size:16,stroke:1.75})})})]}),(0,Z.jsx)(`div`,{className:`mx-3 h-px bg-[var(--chrome-divider)]`}),(0,Z.jsx)(`div`,{className:`flex flex-1 flex-col gap-4 overflow-y-auto p-3`,children:a.length===0?(0,Z.jsxs)(`div`,{className:`flex flex-col items-center gap-2 px-3 py-8 text-center`,children:[(0,Z.jsx)(`p`,{className:`text-balance text-[13px] font-medium text-[var(--chrome-fg-900)]`,children:`No flows yet`}),(0,Z.jsx)(`p`,{className:`text-balance text-[12px] leading-relaxed text-[var(--chrome-fg-500)]`,children:o.length>0?`A flow walks people through a diagram, one step at a time.`:`Put a diagram in a frame, then add a flow to it.`})]}):a.map(n=>(0,Z.jsxs)(`section`,{className:`flex flex-col gap-0.5`,onPointerLeave:()=>c(n.id,null),children:[(0,Z.jsx)(`h3`,{className:`truncate px-2 pb-1 text-[11px] font-medium text-[var(--chrome-fg-400)]`,children:n.label||`Untitled frame`}),P(n.flows??[]).map(({flow:r,depth:a,origin:o})=>(0,Z.jsx)(Ve,{flow:r,depth:a,forkStep:o?o.index+1:null,viewMode:i,onPreview:e=>c(n.id,e?r.id:null),onPlay:()=>J(e,n.id,r.id),onOpen:()=>t.getState().setFlowEdit({frameId:n.id,flowId:r.id})},r.id))]},n.id))})]})}function Ve(e){let{flow:t,depth:n,forkStep:i,viewMode:a,onPreview:o,onPlay:s,onOpen:c}=e,l=t.steps.length,u=t.steps.some(e=>e.fails),d=`${l} ${l===1?`step`:`steps`}`;return(0,Z.jsxs)(`div`,{"data-testid":`flow-list-row`,className:`group flex items-center gap-2 rounded-lg py-1.5 pr-1.5 transition-colors hover:bg-[var(--chrome-rest)]`,style:{paddingLeft:8+n*18},onPointerEnter:()=>o(!0),children:[(0,Z.jsx)(`span`,{className:`shrink-0 text-[var(--chrome-fg-400)]`,children:n>0?(0,Z.jsx)(O,{size:14,stroke:1.75}):(0,Z.jsx)(U,{size:14,stroke:1.75})}),(0,Z.jsxs)(`button`,{type:`button`,"data-testid":`flow-list-open`,title:a?`Play ${t.name}`:`Edit ${t.name}`,className:`flex min-w-0 flex-1 cursor-pointer flex-col text-left`,onFocus:()=>o(!0),onBlur:()=>o(!1),onClick:a?s:c,children:[(0,Z.jsxs)(`span`,{className:`flex items-center gap-1.5`,children:[(0,Z.jsx)(`span`,{className:`truncate text-[13px] font-medium text-[var(--chrome-fg-900)]`,children:t.name}),u&&(0,Z.jsx)(`span`,{title:`Shows something failing`,className:`h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--flow-fail)]`})]}),(0,Z.jsx)(`span`,{className:`text-[11px] text-[var(--chrome-fg-400)]`,children:i===null?d:`From step ${i} · ${d}`})]}),l>0&&(0,Z.jsx)(r,{label:`Play`,side:`left`,children:(0,Z.jsx)(`button`,{type:`button`,"aria-label":`Play ${t.name}`,"data-testid":`flow-list-play`,className:`flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-full bg-[var(--flow-accent)] text-white opacity-90 transition-opacity hover:opacity-100`,onClick:s,children:(0,Z.jsx)(q,{size:11})})})]})}var He=`flex h-7 cursor-pointer items-center gap-1 rounded-md px-2 text-[12.5px] font-medium text-[var(--flow-accent)] transition-colors hover:bg-[var(--chrome-hover)]`;function Ue(e){let{frames:t,onPick:n}=e,r=t.length===1?t[0]:void 0;return r?(0,Z.jsxs)(`button`,{type:`button`,"data-testid":`flow-list-new`,title:`New flow on ${r.label||`the frame`}`,className:He,onClick:()=>n(r),children:[(0,Z.jsx)(V,{size:14,stroke:2}),`New`]}):(0,Z.jsxs)(u,{children:[(0,Z.jsxs)(f,{"data-testid":`flow-list-new`,className:He,children:[(0,Z.jsx)(V,{size:14,stroke:2}),`New`]}),(0,Z.jsx)(d,{children:(0,Z.jsx)(p,{side:`bottom`,align:`end`,sideOffset:6,className:`z-50 outline-none`,children:(0,Z.jsxs)(m,{"data-overlay":!0,className:`min-w-[240px] p-1`,children:[(0,Z.jsx)(`span`,{className:`block px-2 pb-1 pt-1.5 text-[11px] font-medium text-[var(--chrome-fg-400)]`,children:`On which diagram?`}),t.map(e=>(0,Z.jsx)(s,{"data-testid":`flow-list-new-frame`,className:`flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 text-[13px] text-[var(--chrome-fg-700)] outline-none data-[highlighted]:bg-[var(--chrome-hover)]`,onClick:()=>n(e),children:e.label||`Untitled frame`},e.id))]})})})]})}function We(e){let{frameId:t,readOnly:n}=e,r=_();return(0,Z.jsx)(d,{children:(0,Z.jsx)(p,{side:`bottom`,align:`end`,sideOffset:6,className:`z-50 outline-none`,children:(0,Z.jsx)(m,{"data-overlay":!0,"data-testid":`figure-flow-list`,className:`w-[300px] p-1`,finalFocus:()=>r.store.getState().flowEdit===null,children:(0,Z.jsx)(Ge,{frameId:t,readOnly:n})})})})}function Ge(e){let{frameId:t,readOnly:n}=e,r=_(),i=v(e=>{let n=e.shapes.find(e=>e.id===t);return n?.type===`figure`?n:null}),a=v(e=>e.lastFlow[t]),o=e=>r.store.getState().setFlowPreview(e?{frameId:t,flowId:e}:null);return(0,X.useEffect)(()=>()=>r.store.getState().setFlowPreview(null),[r]),i?(0,Z.jsxs)(Z.Fragment,{children:[(0,Z.jsxs)(`p`,{className:`px-2 pb-1 pt-1.5 text-[11px] font-medium text-[var(--chrome-fg-400)]`,children:[`Flows on `,i.label||`this diagram`]}),(0,Z.jsx)(`div`,{onPointerLeave:()=>o(null),children:P(i.flows??[]).map(({flow:e,depth:t,origin:r})=>(0,Z.jsx)(qe,{frame:i,flow:e,depth:t,forkStep:r?r.index+1:null,last:e.id===a,readOnly:n,onPreview:o},e.id))}),!n&&(0,Z.jsxs)(Z.Fragment,{children:[(0,Z.jsx)(l,{}),(0,Z.jsx)(h,{testId:`figure-flow-new`,icon:(0,Z.jsx)(V,{size:15,stroke:1.75}),onClick:()=>Y(r,t),children:`New flow`})]})]}):null}var Ke=`flex h-7 w-7 shrink-0 cursor-default items-center justify-center rounded-lg text-[var(--chrome-fg-400)] outline-none data-[highlighted]:bg-[var(--chrome-hover)] data-[highlighted]:text-[var(--chrome-fg-800)]`;function qe(e){let{frame:t,flow:n,depth:r,forkStep:i,last:c,readOnly:l,onPreview:u}=e,f=_(),g=n.steps.length,v=n.steps.some(e=>e.fails);return(0,Z.jsxs)(`div`,{"data-testid":`figure-flow-row`,className:`flex items-center gap-0.5`,style:{paddingLeft:r*16},onPointerEnter:()=>u(n.id),children:[(0,Z.jsxs)(s,{"data-testid":`figure-flow-row-play`,disabled:g===0,className:`${me.menuItem} min-w-0 flex-1`,onFocus:()=>u(n.id),onClick:()=>J(f,t.id,n.id),children:[(0,Z.jsx)(`span`,{className:c?`text-[var(--flow-accent)]`:`text-[var(--chrome-fg-400)]`,children:r>0?(0,Z.jsx)(O,{size:15,stroke:1.75}):c?(0,Z.jsx)(q,{size:13}):(0,Z.jsx)(o,{size:15,stroke:1.75})}),(0,Z.jsxs)(`span`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,Z.jsx)(`span`,{className:`truncate text-[var(--chrome-fg-900)]`,children:n.name}),i!==null&&(0,Z.jsxs)(`span`,{className:`text-[11px] text-[var(--chrome-fg-400)]`,children:[`From step `,i]})]}),v&&(0,Z.jsx)(`span`,{title:`Shows something failing`,className:`h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--flow-fail)]`}),(0,Z.jsxs)(`span`,{className:`shrink-0 text-[11px] tabular-nums text-[var(--chrome-fg-400)]`,children:[g,` `,g===1?`step`:`steps`]})]}),!l&&(0,Z.jsxs)(Z.Fragment,{children:[(0,Z.jsx)(s,{"aria-label":`Edit ${n.name}`,"data-testid":`figure-flow-row-edit`,className:Ke,onFocus:()=>u(n.id),onClick:()=>F(f,t.id,n.id),children:(0,Z.jsx)(B,{size:14,stroke:1.75})}),(0,Z.jsxs)(H,{children:[(0,Z.jsx)(W,{"aria-label":`More for ${n.name}`,"data-testid":`figure-flow-row-more`,className:Ke,children:(0,Z.jsx)(a,{size:14,stroke:1.75})}),(0,Z.jsx)(d,{children:(0,Z.jsx)(p,{className:`z-50 outline-none`,sideOffset:4,children:(0,Z.jsxs)(m,{"data-overlay":!0,className:`min-w-[160px] p-1`,children:[(0,Z.jsx)(h,{testId:`figure-flow-rename`,icon:(0,Z.jsx)(B,{size:15,stroke:1.75}),onClick:()=>f.store.getState().setFlowEdit({frameId:t.id,flowId:n.id,rename:!0}),children:`Rename`}),(0,Z.jsx)(h,{testId:`figure-flow-delete`,icon:(0,Z.jsx)(T,{size:15,stroke:1.75}),onClick:()=>E(f,t.id,n.id),children:`Delete`})]})})})]})]})]})}var Je=/^Flow \d+$/;function Ye(){let e=v(e=>e.flowEdit);return v(e=>e.rightPanel===`flow`)?e?(0,Z.jsx)(Xe,{frameId:e.frameId,flowId:e.flowId},e.flowId):(0,Z.jsx)(Be,{}):null}function Xe(e){let{frameId:t,flowId:n}=e,{ai:i}=g(),a=_(),{store:o}=a,s=v(e=>e.shapes),c=v(e=>e.flowPlay),l=v(e=>e.flowEdit)??{},u=c!==null,d=c?.flowId===n?c.step:null,f=(0,X.useMemo)(()=>{let e=s.find(e=>e.id===t);return e?.type===`figure`?e:null},[s,t]),p=(0,X.useMemo)(()=>f?de(s,f):[],[s,f]),m=f?.flows?.find(e=>e.id===n),h=m?ye(m,p):null,y=h?.steps.length??0,[x,S]=(0,X.useState)(!1),[C,w]=(0,X.useState)(!1),T=o.getState().patchFlowEdit;(0,X.useEffect)(()=>{l.rename&&(w(!0),o.getState().patchFlowEdit({rename:!1}))},[l.rename,o]);let P=ue({count:y,gap:1,onReorder:(e,r)=>M(a,t,n,e,r),onPress:e=>T({selected:e})}),F=()=>{h&&h.steps.length===0&&E(a,t,n),o.getState().setFlowEdit(null)},oe=()=>{h&&h.steps.length===0&&E(a,t,n),o.getState().setFlowsOpen(!0)},I=()=>{if(h&&h.steps.length>0&&Je.test(h.name)){S(!0);return}F()},ce=(0,X.useRef)(I);ce.current=I;let le=(0,X.useRef)(y);if(le.current=y,(0,X.useEffect)(()=>{let e=e=>{let r=o.getState();if(r.flowPlay||b(e.target)||(e.target instanceof Element?e.target:null)?.closest(`[role=menu], [role=dialog]`))return;let i=r.flowEdit??{},s=le.current,c=N(i,s);if(e.key===`Escape`){if(e.preventDefault(),e.stopPropagation(),i.picking!==null&&i.picking!==void 0){r.patchFlowEdit({picking:null});return}if(k(i,s)){r.patchFlowEdit({slot:null});return}ce.current();return}if(c!==null){if(e.key===`Delete`||e.key===`Backspace`){e.preventDefault(),e.stopPropagation(),ie(a,t,n,c);return}if(e.altKey&&(e.key===`ArrowUp`||e.key===`ArrowDown`)){e.preventDefault(),e.stopPropagation();let r=c+(e.key===`ArrowUp`?-1:1);r>=0&&r<s&&M(a,t,n,c,r)}}};return window.addEventListener(`keydown`,e,!0),()=>window.removeEventListener(`keydown`,e,!0)},[o,a,t,n]),!f||!h)return null;let L=f.flows??[],R=new Map(p.map(e=>[e.id,_e(p,e)])),z=ve(L,n),B=z?.flow.steps[z.index],V=B?.title??``,H=D(p,h.steps,B),U=A(l,y),W=N(l,y),G=N({selected:l.picking},y),fe=te(l,y),pe=L.filter(e=>e.id!==n).map(e=>({id:e.id,name:e.name}));function me(e){let t=H.get(e);return t?{names:j(t,R),onAttach:()=>ne(a,t)}:null}function be(e){let r=e.trim();r&&r!==h?.name&&ae(a,t,n,e=>({...e,name:r}))}return(0,Z.jsxs)(ge,{width:300,testId:`flow-panel`,ariaLabel:`Flow`,onDismiss:F,children:[(0,Z.jsxs)(`div`,{className:`flex items-center gap-0.5 py-2 pl-1.5 pr-2`,children:[(0,Z.jsx)(r,{label:`All flows`,side:`bottom`,children:(0,Z.jsx)(`button`,{type:`button`,"aria-label":`All flows`,"data-testid":`flow-panel-back`,onClick:oe,className:he,children:(0,Z.jsx)(se,{size:16,stroke:1.75})})}),(0,Z.jsx)(`div`,{className:`min-w-0 flex-1`,children:C?(0,Z.jsx)(`input`,{autoFocus:!0,"aria-label":`Flow name`,"data-testid":`flow-name`,className:`${Se} text-[14px] font-medium`,defaultValue:h.name,onFocus:e=>e.target.select(),onBlur:e=>{be(e.target.value),w(!1)},onKeyDown:ze}):(0,Z.jsx)(tt,{current:h,flows:L,onPick:e=>o.getState().setFlowEdit({frameId:t,flowId:e}),onRename:()=>w(!0),onNew:()=>Y(a,t),onDelete:()=>E(a,t,n)})}),(0,Z.jsx)(r,{label:`Close`,side:`bottom`,children:(0,Z.jsx)(`button`,{type:`button`,"aria-label":`Close the flow panel`,"data-testid":`flow-panel-done`,onClick:F,className:he,children:(0,Z.jsx)(K,{size:16,stroke:1.75})})})]}),(0,Z.jsxs)(`div`,{className:`flex flex-col gap-1.5 px-4 pb-2.5`,children:[(0,Z.jsxs)(`span`,{className:`truncate text-[11px] text-[var(--chrome-fg-400)]`,children:[f.label||`Untitled frame`,` · `,y,` `,y===1?`step`:`steps`,y>1&&` · drag to reorder`]}),z&&(0,Z.jsxs)(`button`,{type:`button`,"data-testid":`flow-origin`,title:`Open ${z.flow.name}`,className:`-ml-1 flex min-w-0 cursor-pointer items-center gap-1 self-start rounded-md bg-[color-mix(in_srgb,var(--flow-accent)_10%,transparent)] px-1.5 py-1 text-[11.5px] text-[var(--flow-accent)] transition-colors hover:bg-[color-mix(in_srgb,var(--flow-accent)_16%,transparent)]`,onClick:()=>o.getState().setFlowEdit({frameId:t,flowId:z.flow.id}),children:[(0,Z.jsx)(O,{size:12,stroke:2,className:`shrink-0`}),(0,Z.jsxs)(`span`,{className:`truncate`,children:[`From `,z.flow.name,`, step `,z.index+1]})]})]}),(0,Z.jsx)(`div`,{className:`mx-3 h-px bg-[var(--chrome-divider)]`}),(0,Z.jsx)(`div`,{ref:P.listRef,className:`flex flex-1 flex-col gap-1 overflow-y-auto p-3`,children:y===0?(0,Z.jsx)($e,{fork:z?{title:V,step:z.index+1}:null,onAi:i?()=>{E(a,t,n),o.getState().askAi(`Write a flow for the frame "${f.label||`Untitled`}" (${f.id}) showing `)}:null}):(0,Z.jsxs)(Z.Fragment,{children:[(0,Z.jsx)(`ol`,{className:`flex flex-col gap-px pt-1`,"data-testid":`flow-steps`,children:h.steps.map((e,r)=>(0,Z.jsx)(Ze,{before:U===r&&U<y,hidden:P.dragging,number:r+1,onCancel:()=>T({slot:null}),children:(0,Z.jsx)(ke,{step:e,index:r,count:y,current:d===r,selected:W===r,picking:G===r,names:R,otherFlows:pe,loose:me(r),rowRef:P.setItemRef(r),rowStyle:P.rowStyle(r),grip:P.rowHandlers(r),actions:{onPlay:()=>J(a,t,n,r),onChange:e=>re(a,t,n,r,e),onMove:e=>M(a,t,n,r,r+e),onRemove:()=>ie(a,t,n,r),onNewPath:()=>ee(a,t,n,r),onSelect:()=>{o.getState().flowEdit?.selected!==r&&T({selected:r})},onHover:e=>T({hovered:e?r:null}),onInsertBefore:()=>T({slot:r,picking:null}),onInsertAfter:()=>T({slot:r+1<y?r+1:null,picking:null}),onChangeBox:()=>T({picking:r,selected:r})}})},`${e.target}-${r}`))}),(0,Z.jsx)(Qe,{picking:G,inserting:U<y,next:y+1,joined:fe,onCancelPick:()=>T({picking:null}),onToEnd:()=>T({slot:null})})]})}),(0,Z.jsx)(`div`,{className:`border-t border-[var(--chrome-ring)] p-3`,children:x?(0,Z.jsx)(et,{suggestion:nt(h),onSave:e=>{be(e),F()},onSkip:F}):(0,Z.jsxs)(`div`,{className:`flex gap-2`,children:[(0,Z.jsxs)(`button`,{type:`button`,className:`${Ee} h-9 flex-1`,"data-testid":`flow-play`,disabled:y===0||u,onClick:()=>J(a,t,n),children:[(0,Z.jsx)(q,{size:12}),`Preview`]}),(0,Z.jsx)(`button`,{type:`button`,className:`${Te} flex-1`,"data-testid":`flow-done`,onClick:I,children:`Done`})]})})]})}function Ze(e){let{before:t,hidden:n,number:i,onCancel:a,children:o}=e;return(0,Z.jsxs)(Z.Fragment,{children:[t&&(0,Z.jsxs)(`li`,{"data-testid":`flow-slot`,className:`my-1 flex items-center gap-2.5 rounded-lg border border-dashed border-[color-mix(in_srgb,var(--flow-accent)_55%,transparent)] bg-[color-mix(in_srgb,var(--flow-accent)_6%,transparent)] py-2 pl-5 pr-1.5 text-[12px] text-[var(--flow-accent)] ${n?`invisible`:``}`,children:[(0,Z.jsx)(`span`,{className:`flex h-6 min-w-6 shrink-0 items-center justify-center rounded-full border border-dashed border-[var(--flow-accent)]`,children:(0,Z.jsx)(V,{size:12,stroke:2.5})}),(0,Z.jsxs)(`span`,{className:`flex-1`,children:[`Click the box for a new step `,i]}),(0,Z.jsx)(r,{label:`Add at the end instead`,side:`left`,children:(0,Z.jsx)(`button`,{type:`button`,"aria-label":`Add at the end instead`,"data-testid":`flow-slot-cancel`,className:`flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-[color-mix(in_srgb,var(--flow-accent)_12%,transparent)]`,onClick:a,children:(0,Z.jsx)(K,{size:13,stroke:2})})})]}),o]})}function Qe(e){let{picking:t,inserting:n,next:r,joined:i,onCancelPick:a,onToEnd:o}=e,s=`flex h-6 min-w-6 shrink-0 items-center justify-center rounded-full bg-[color-mix(in_srgb,var(--flow-accent)_12%,transparent)] px-1.5 text-[12px] font-semibold tabular-nums text-[var(--flow-accent)]`;return t===null?n?(0,Z.jsxs)(`button`,{type:`button`,"data-testid":`flow-hint`,className:`mt-1 flex cursor-pointer items-center gap-2.5 rounded-lg border border-dashed border-[var(--chrome-divider)] px-2 py-2.5 text-left text-[12px] text-[var(--chrome-fg-500)] transition-colors hover:bg-[var(--chrome-rest)]`,onClick:o,children:[(0,Z.jsx)(`span`,{className:s,children:(0,Z.jsx)(V,{size:12,stroke:2.5})}),`Add at the end instead`]}):(0,Z.jsxs)(`div`,{"data-testid":`flow-hint`,className:`mt-1 flex items-center gap-2.5 rounded-lg border border-dashed border-[var(--chrome-divider)] px-2 py-2.5 text-[12px] text-[var(--chrome-fg-500)]`,children:[(0,Z.jsx)(`span`,{className:s,children:r}),(0,Z.jsxs)(`span`,{children:[`Click the next box or arrow`,i!==null&&(0,Z.jsxs)(`span`,{className:`block text-[11px] text-[var(--chrome-fg-400)]`,children:[`Shift-click to add it to step `,i+1]})]})]}):(0,Z.jsxs)(`div`,{"data-testid":`flow-hint`,className:`mt-1 flex items-center gap-2.5 rounded-lg border border-dashed border-[var(--flow-accent)] px-2 py-2.5 text-[12px] text-[var(--chrome-fg-700)]`,children:[(0,Z.jsx)(`span`,{className:s,children:t+1}),(0,Z.jsxs)(`span`,{className:`flex-1`,children:[`Click the box step `,t+1,` should light`,(0,Z.jsx)(`span`,{className:`block text-[11px] text-[var(--chrome-fg-400)]`,children:`Its title and notes stay`})]}),(0,Z.jsx)(`button`,{type:`button`,className:Ce,onClick:a,children:`Cancel`})]})}function $e(e){let{onAi:t,fork:n}=e;return n?(0,Z.jsxs)(`div`,{className:`flex flex-col items-center gap-3 px-3 py-8 text-center`,"data-testid":`flow-empty`,children:[(0,Z.jsxs)(`div`,{className:`flex items-center gap-2 rounded-xl bg-[var(--chrome-rest)] px-5 py-4`,"aria-hidden":!0,children:[(0,Z.jsxs)(`span`,{className:`flex h-7 items-center gap-1 rounded-full bg-[var(--chrome-popup)] px-2.5 text-[12px] font-medium text-[var(--chrome-fg-700)] ring-1 ring-[var(--chrome-ring)]`,children:[(0,Z.jsx)(O,{size:13,stroke:2,className:`text-[var(--flow-accent)]`}),n.title||`Step ${n.step}`]}),(0,Z.jsx)(`span`,{className:`h-0.5 w-5 rounded-full bg-[color-mix(in_srgb,var(--flow-accent)_35%,transparent)]`}),(0,Z.jsx)(`span`,{className:`flex h-7 w-7 items-center justify-center rounded-full bg-[var(--flow-accent)] text-[12px] font-semibold text-white`,children:`1`})]}),(0,Z.jsxs)(`p`,{className:`text-balance text-[13px] font-medium text-[var(--chrome-fg-900)]`,children:[`What happens after `,n.title||`step ${n.step}`,`?`]}),(0,Z.jsxs)(`p`,{className:`text-balance text-[12px] leading-relaxed text-[var(--chrome-fg-500)]`,children:[`Click where it goes next. Viewers can pick this path at step `,n.step,`.`]})]}):(0,Z.jsxs)(`div`,{className:`flex flex-col items-center gap-3 px-3 py-8 text-center`,"data-testid":`flow-empty`,children:[(0,Z.jsx)(`div`,{className:`flex items-center gap-2 rounded-xl bg-[var(--chrome-rest)] px-5 py-4`,"aria-hidden":!0,children:[1,2,3].map(e=>(0,Z.jsxs)(`span`,{className:`flex items-center gap-2`,children:[e>1&&(0,Z.jsx)(`span`,{className:`h-0.5 w-5 rounded-full bg-[color-mix(in_srgb,var(--flow-accent)_35%,transparent)]`}),(0,Z.jsx)(`span`,{className:`flex h-7 w-7 items-center justify-center rounded-full text-[12px] font-semibold ${e===1?`bg-[var(--flow-accent)] text-white`:`bg-[var(--chrome-popup)] text-[var(--flow-accent)] ring-1 ring-[color-mix(in_srgb,var(--flow-accent)_30%,transparent)]`}`,children:e})]},e))}),(0,Z.jsx)(`p`,{className:`text-balance text-[13px] font-medium text-[var(--chrome-fg-900)]`,children:`Click the boxes in order`}),(0,Z.jsx)(`p`,{className:`text-balance text-[12px] leading-relaxed text-[var(--chrome-fg-500)]`,children:`Start with whoever kicks things off.`}),t&&(0,Z.jsxs)(`button`,{type:`button`,"data-testid":`flow-ai`,className:`flex cursor-pointer items-center gap-1.5 rounded-md px-1.5 py-1 text-[12px] text-[var(--chrome-fg-500)] transition-colors hover:bg-[var(--chrome-hover)] hover:text-[var(--chrome-fg-900)] disabled:pointer-events-none disabled:text-[var(--chrome-fg-300)]`,onClick:t,children:[(0,Z.jsx)(G,{size:13,stroke:1.75}),`Or write the steps with AI`]})]})}function et(e){let{suggestion:t,onSave:n,onSkip:r}=e,[i,a]=(0,X.useState)(t);return(0,Z.jsxs)(`form`,{className:`flex flex-col gap-2`,"data-testid":`flow-name-prompt`,onSubmit:e=>{e.preventDefault(),n(i)},children:[(0,Z.jsxs)(`label`,{className:`flex flex-col gap-1`,children:[(0,Z.jsx)(`span`,{className:`text-[12px] font-medium text-[var(--chrome-fg-800)]`,children:`Name this flow`}),(0,Z.jsx)(`input`,{autoFocus:!0,"data-testid":`flow-name-input`,className:`${Se} h-8 ring-[var(--chrome-ring)]`,value:i,onFocus:e=>e.target.select(),onChange:e=>a(e.target.value),onKeyDown:e=>{e.stopPropagation(),e.key===`Escape`&&r()}})]}),(0,Z.jsxs)(`div`,{className:`flex gap-2`,children:[(0,Z.jsx)(`button`,{type:`button`,className:`${Ee} h-9 flex-1`,"data-testid":`flow-name-skip`,onClick:r,children:`Skip`}),(0,Z.jsx)(`button`,{type:`submit`,className:`${Te} flex-1`,"data-testid":`flow-name-save`,disabled:!i.trim(),children:`Save`})]})]})}function tt(e){let{current:t,flows:n,onPick:r,onRename:a,onNew:o,onDelete:c}=e,g=(0,X.useRef)(!1);return(0,Z.jsxs)(u,{onOpenChange:e=>{e&&(g.current=!1)},children:[(0,Z.jsxs)(f,{"data-testid":`flow-switcher`,className:`flex max-w-full cursor-pointer items-center gap-1 rounded-md px-1.5 py-1 text-left transition-colors hover:bg-[var(--chrome-hover)] data-[popup-open]:bg-[var(--chrome-hover)]`,children:[(0,Z.jsx)(`span`,{className:`truncate text-[14px] font-medium text-[var(--chrome-fg-900)]`,children:t.name}),(0,Z.jsx)(i,{size:14,stroke:1.75,className:`shrink-0 text-[var(--chrome-fg-400)]`})]}),(0,Z.jsx)(d,{children:(0,Z.jsx)(p,{side:`bottom`,align:`start`,sideOffset:4,className:`z-50 outline-none`,children:(0,Z.jsxs)(m,{"data-overlay":!0,className:`min-w-[240px] p-1`,finalFocus:()=>!g.current,children:[P(n).map(({flow:e,depth:n})=>(0,Z.jsxs)(s,{"data-testid":`flow-switcher-item`,className:`flex cursor-default select-none items-center gap-2 rounded-lg py-1.5 pr-2 text-[13px] text-[var(--chrome-fg-700)] outline-none data-[highlighted]:bg-[var(--chrome-hover)]`,style:{paddingLeft:8+n*16},onClick:()=>r(e.id),children:[(0,Z.jsx)(`span`,{className:`text-[var(--chrome-fg-400)]`,children:n>0?(0,Z.jsx)(O,{size:14,stroke:1.75}):(0,Z.jsx)(U,{size:14,stroke:1.75})}),(0,Z.jsx)(`span`,{className:`min-w-0 flex-1 truncate text-[var(--chrome-fg-900)]`,children:e.name}),(0,Z.jsx)(`span`,{className:`text-[11px] tabular-nums text-[var(--chrome-fg-400)]`,children:e.steps.length}),(0,Z.jsx)(`span`,{className:`flex w-4 justify-center text-[var(--chrome-fg-900)]`,children:e.id===t.id&&(0,Z.jsx)(oe,{size:14,stroke:2})})]},e.id)),(0,Z.jsx)(l,{}),(0,Z.jsx)(h,{testId:`flow-name-edit`,icon:(0,Z.jsx)(B,{size:15,stroke:1.75}),onClick:()=>{g.current=!0,a()},children:`Rename`}),(0,Z.jsx)(h,{testId:`flow-new`,icon:(0,Z.jsx)(V,{size:15,stroke:1.75}),onClick:o,children:`New flow on this frame`}),(0,Z.jsx)(h,{testId:`flow-delete`,icon:(0,Z.jsx)(T,{size:15,stroke:1.75}),onClick:c,children:`Delete this flow`})]})})})]})}function nt(e){let t=e.steps[0]?.title.trim(),n=e.steps[e.steps.length-1]?.title.trim();return t?n&&n!==t?`${t} to ${n}`:t:e.name}export{We as FlowMenuPopup,Ye as FlowPanel};

package/assets/editor/assets/flow-start-ccYJ2KB9.js

@@ -1 +0,0 @@
-import{i as e}from"./core-CBnmD9hT.js";function t(e,t){let n=e.store.getState().shapes.find(e=>e.id===t);return n?.type===`figure`?n:null}function n(e,t,n){e.store.getState().updateShape(t.id,{flows:n.length>0?n:void 0})}function r(r,i){let a=t(r,i);if(!a)return null;let o=a.flows??[],s=e(o);return n(r,a,[...o,s]),r.store.getState().setFlowEdit({frameId:i,flowId:s.id}),s}function i(e,t,n,r=0){e.store.getState().setFlowPlay({frameId:t,flowId:n,step:r})}export{n as i,i as n,r,t};

package/assets/editor/assets/slides-panel-DV-zQJhV.js

@@ -1,26 +0,0 @@
-import{i as e}from"./rolldown-runtime-aKtaBQYM.js";import{n as t,t as n}from"./jsx-runtime-2Zwg-L3c.js";import{t as r}from"./tooltip-DgEojto1.js";import{D as i,E as a,T as o,a as s,g as c,h as l,l as u,m as d,n as f,o as p,p as m,r as h}from"./menu-BPrc8Ara.js";import{i as g}from"./config-a_lz-57R.js";import{a as ee,o as _}from"./editor-B0tARd79.js";import{_ as v,g as y,t as b}from"./reflow-Cv75wPSh.js";import{W as x}from"./style-BENGW2ZV.js";import{A as S,C as te,Kn as C,Sn as ne,an as w,c as re,d as ie,f as T,fn as E,i as D,l as O,n as ae,o as oe,p as se,r as ce,s as le,t as ue,u as k,vn as de,x as fe}from"./slides-D9bnXqtf.js";import{n as pe}from"./renderer-environment-DmWXvuT4.js";import{A as me,C as he,D as ge,E as _e,O as ve,S as ye,T as be,_ as xe,b as Se,k as Ce,m as we,v as A,x as Te,y as Ee}from"./panel-controls-DYZ7QFT5.js";import{t as j}from"./createReactComponent-9UsI5fmM.js";import{n as M,r as De,t as Oe}from"./IconTrash-DbN_RxB7.js";import{t as ke}from"./IconArrowLeft-DFk3Krim.js";import{n as N,t as Ae}from"./IconPlayerStopFilled-BUbX6ZO5.js";import{t as je}from"./IconChevronLeft-BR0iwdRI.js";import{t as Me}from"./IconChevronRight-DBDnxPYT.js";import{t as Ne}from"./IconCode-hd05zxU4.js";import{i as Pe,n as Fe,r as Ie,t as Le}from"./use-drag-reorder-C3h4ZMoZ.js";import{a as Re,c as ze,i as Be,n as Ve,o as He,r as Ue,s as We,t as Ge}from"./build-visibility-E1mHeDCW.js";import{t as Ke}from"./IconPencil-C5Y-Y4dC.js";import{t as qe}from"./IconPlus-BbmieIBT.js";import{t as Je}from"./IconSparkles-WDcg8BA9.js";import{t as Ye}from"./IconX-AlbPkO_g.js";import{t as Xe}from"./IconPlayerPlayFilled-D4OODBX7.js";import{a as Ze,i as Qe,l as $e,r as et,t as tt}from"./PopoverPopup-BqGWd_uB.js";import{t as nt}from"./use-export-command-CPc7qug1.js";import{n as rt}from"./surface-Dke4SWpE.js";import{_ as it,a as at,c as ot,d as st,f as ct,h as lt,i as ut,l as dt,m as ft,n as pt,o as mt,p as ht,r as gt,t as _t,u as vt,v as yt,y as bt}from"./plan-jQm1jDpt.js";import{a as xt,c as St,d as Ct,f as wt,i as Tt,l as Et,n as Dt,o as Ot,r as kt,s as At,t as jt,u as Mt}from"./edit-BJ_kibk8.js";import{a as Nt,c as Pt}from"./chrome-C2RCq3SI.js";import{i as Ft,n as It,r as Lt,t as Rt}from"./DialogRoot-mHGRFW9m.js";import{n as zt,t as Bt}from"./DialogTitle-CFhr-gP9.js";import{n as Vt,t as Ht}from"./shape-meta-BpwsiB82.js";import{r as Ut}from"./chrome-layout-B8YmHznO.js";import{t as Wt}from"./panel-shell-CG2aq4Ia.js";import{A as P,C as F,D as I,E as L,O as R,S as z,T as Gt,_ as Kt,a as B,b as qt,c as Jt,d as Yt,f as V,g as Xt,h as Zt,i as Qt,k as H,l as U,m as W,n as $t,o as G,p as en,r as K,s as q,t as tn,u as nn,v as rn,w as J,x as Y,y as an}from"./builders-DbF28yId.js";import{n as on,t as sn}from"./export-DEFKKRRi.js";var cn=j(`outline`,`player-skip-back`,`PlayerSkipBack`,[[`path`,{d:`M20 5v14l-12 -7l12 -7`,key:`svg-0`}],[`path`,{d:`M4 5l0 14`,key:`svg-1`}]]),ln=j(`filled`,`pointer-filled`,`PointerFilled`,[[`path`,{d:`M3.039 4.277l3.904 13.563c.185 .837 .92 1.516 1.831 1.642l.17 .016a2.2 2.2 0 0 0 1.982 -1.006l.045 -.078l1.4 -2.072l4.05 4.05a2.067 2.067 0 0 0 2.924 0l1.047 -1.047c.388 -.388 .606 -.913 .606 -1.461l-.008 -.182a2.067 2.067 0 0 0 -.598 -1.28l-4.047 -4.048l2.103 -1.412c.726 -.385 1.18 -1.278 1.053 -2.189a2.2 2.2 0 0 0 -1.701 -1.845l-13.524 -3.89a1 1 0 0 0 -1.236 1.24z`,key:`svg-0`}]]),X=e(t(),1);function un(e,t){if(!t)return Ht(e[0]);let n=e.find(e=>Vt(e).trim().length>0);return n?Ht(n):`Group of ${e.length}`}var Z={enter:`Entry`,emphasis:`Emphasis`,exit:`Exit`},Q=n();function dn(e){let{units:t,idleCount:n,variant:r=`filled`,hasBuild:i,onHover:a,onAdd:o,onSweep:s}=e,c=r===`primary`,l=()=>{c&&(d(!1),a(null))},[u,d]=(0,X.useState)(!1);return(0,Q.jsxs)(Ze,{open:u,onOpenChange:e=>{d(e),e||a(null)},children:[(0,Q.jsx)(xe,{"data-testid":`animate-add-open`,className:c?`mt-1 flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-[var(--chrome-accent)] text-[12px] text-white transition-colors hover:bg-[var(--chrome-accent-hover)]`:`flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-lg bg-[var(--chrome-rest)] text-[12px] text-[var(--chrome-fg-900)] transition-colors hover:bg-[var(--chrome-hover)]`,children:c?`Choose what animates`:(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(qe,{size:13,stroke:1.75}),`Add animation`,n>0&&(0,Q.jsxs)(`span`,{"data-testid":`animate-add-count`,className:`text-[var(--chrome-fg-400)]`,children:[`· `,n,` not animated`]})]})}),(0,Q.jsx)(Qe,{children:(0,Q.jsx)(et,{side:`left`,align:`end`,sideOffset:8,collisionPadding:8,children:(0,Q.jsxs)(tt,{"data-overlay":!0,"data-testid":`animate-add-list`,onPointerDown:e=>e.stopPropagation(),className:`flex max-h-[60vh] w-72 flex-col overflow-y-auto p-1.5 ${rt.popup}`,children:[n>0&&(0,Q.jsxs)(`button`,{type:`button`,"data-testid":`animate-one-by-one`,onClick:()=>{s(),d(!1),a(null)},className:`mb-1 flex h-7 shrink-0 cursor-pointer items-center justify-between gap-2 rounded-lg px-2 text-[11px] font-medium text-[var(--chrome-fg-900)] transition-colors hover:bg-[var(--chrome-hover)]`,children:[(0,Q.jsx)(`span`,{children:i?`Add the remaining ${n}`:`Animate all ${n}, one by one`}),(0,Q.jsx)(be,{size:12,stroke:2})]}),t.map(e=>{let t=e.shapes[0],n=new Set(_t(t).map(e=>e.kind));return(0,Q.jsxs)(`div`,{"data-testid":`animate-add-row`,onPointerEnter:()=>a(t.id),onPointerLeave:()=>a(null),className:`flex h-8 shrink-0 items-center gap-2 rounded-lg px-2 text-[12px] text-[var(--chrome-fg-700)] hover:bg-[var(--chrome-hover)]`,children:[e.groupId&&(0,Q.jsx)(ye,{size:12,stroke:1.75,className:`shrink-0 text-[var(--chrome-fg-400)]`}),(0,Q.jsx)(`span`,{className:`flex-1 truncate`,children:un(e.shapes,e.groupId)}),vt(t).map(t=>{let r=t!==`emphasis`&&n.has(t);return(0,Q.jsx)(`button`,{type:`button`,"data-testid":`animate-add-${t}`,disabled:r,title:r?`Already has ${Z[t].toLowerCase()}`:`Add ${Z[t].toLowerCase()}`,onClick:()=>{o(e,t),l()},className:`h-5 shrink-0 cursor-pointer rounded px-1.5 text-[10px] font-medium transition-colors ${r?`cursor-default bg-[var(--chrome-active)] text-[var(--chrome-fg-400)]`:`text-[var(--chrome-fg-600)] ring-1 ring-[var(--chrome-ring)] hover:bg-[var(--chrome-hover)] hover:text-[var(--chrome-fg-900)]`}`,children:Z[t]},t)})]},yt(e))})]})})})]})}var fn={click:``,with:`Plays with the step above`,after:`Plays on its own, as soon as the step above finishes`};function pn(e){let{unit:t,click:n,playing:r,start:a,canJoin:o,pointed:s,unseen:c,selected:l,viewMode:u,handlers:d,onSplit:f,onMerge:p,onSetEffect:m,onSetDelay:h,onSetDirection:g,onSetKind:ee,onSetStart:_,onPreviewEffect:v,onRemove:y}=e,b=t.items[0],x=b.shape,S=b.animation,te=_t(x).filter((e,t)=>t!==b.index).map(e=>e.kind),C=f??p;return(0,Q.jsxs)(`div`,{className:`group flex h-8 touch-none items-center gap-1.5 rounded-lg pl-1 pr-1 text-[12px] transition-colors ${r?`bg-[var(--chrome-accent)] text-white`:l?`bg-[var(--chrome-active)]`:s?`bg-[var(--chrome-hover)]`:`hover:bg-[var(--chrome-hover)]`}`,...d,children:[(0,Q.jsx)(Pe,{size:13,stroke:1.75,className:`shrink-0 cursor-grab text-[var(--chrome-fg-300)]`}),(0,Q.jsx)(`span`,{className:`flex w-4 shrink-0 items-center justify-center text-[11px] tabular-nums ${r?`text-white/70`:`text-[var(--chrome-fg-500)]`}`,title:a===`click`?void 0:fn[a],children:a===`click`?n:``}),C&&!u?(0,Q.jsx)(`button`,{type:`button`,"data-testid":f?`animate-group-split`:`animate-group-merge`,title:f?`Animate this group's shapes one by one`:`Play these back as one group`,onPointerDown:e=>e.stopPropagation(),onClick:C,className:`flex h-5 w-4 shrink-0 cursor-pointer items-center justify-center rounded ${r?`text-white/70`:`text-[var(--chrome-fg-400)]`} hover:text-[var(--chrome-fg-900)]`,children:f?(0,Q.jsx)(Me,{size:12,stroke:2}):(0,Q.jsx)(i,{size:12,stroke:2})}):C&&(0,Q.jsx)(`span`,{className:`w-4 shrink-0`}),(0,Q.jsx)(`span`,{className:`flex-1 truncate ${r?``:`text-[var(--chrome-fg-900)]`}`,children:un(t.items.map(e=>e.shape),t.groupId)}),c&&(0,Q.jsx)(`span`,{"data-testid":`animate-row-unseen`,title:`This plays while the shape is off screen, so it will not be seen`,className:`shrink-0 ${r?`text-white/70`:`text-[var(--chrome-fg-400)]`}`,children:(0,Q.jsx)(Ce,{size:12,stroke:1.75})}),S.kind!==`enter`&&(0,Q.jsx)(`span`,{"data-testid":`animate-kind-${S.kind}`,className:`shrink-0 rounded px-1 text-[10px] uppercase tracking-wide ring-1 ${r?`text-white/70 ring-white/30`:`text-[var(--chrome-fg-500)] ring-[var(--chrome-ring)]`}`,children:S.kind}),(0,Q.jsx)(mn,{shape:x,kind:S.kind,kindsTaken:te,effect:S.effect,duration:S.duration,delay:S.delay,direction:S.direction,start:a,canJoin:o,disabled:u,onSetEffect:m,onSetDelay:h,onSetDirection:g,onSetKind:ee,onSetStart:_,onPreviewEffect:v}),!u&&(0,Q.jsx)(`button`,{"data-testid":`animate-remove`,title:`Remove from the build`,onPointerDown:e=>e.stopPropagation(),className:`flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-[var(--chrome-fg-400)] opacity-0 hover:bg-[var(--chrome-hover)] group-hover:opacity-100`,onClick:y,children:(0,Q.jsx)(Ye,{size:12,stroke:2})})]})}function mn(e){let{shape:t,kind:n,kindsTaken:r,effect:i,duration:a,delay:o,direction:s,start:c,canJoin:l,disabled:u,onSetEffect:d,onSetDelay:f,onSetDirection:p,onSetKind:m,onSetStart:h,onPreviewEffect:g}=e,[ee,_]=(0,X.useState)(!1),b=v.filter(e=>de(t,e)&&E(e,n)),x=vt(t),S=Re(i);return(0,Q.jsxs)(Ze,{open:ee,onOpenChange:_,children:[(0,Q.jsxs)(xe,{"data-testid":`animate-effect-chip`,disabled:u,onPointerDown:e=>e.stopPropagation(),className:`flex h-6 shrink-0 cursor-pointer items-center gap-0.5 rounded-md bg-[var(--chrome-rest)] pl-1.5 pr-1 text-[11px] text-[var(--chrome-fg-600)] ring-1 ring-[var(--chrome-ring)] transition-colors hover:bg-[var(--chrome-hover)] data-[popup-open]:bg-[var(--chrome-active)] disabled:cursor-default`,children:[S.label,(0,Q.jsx)($e,{})]}),(0,Q.jsx)(Qe,{children:(0,Q.jsx)(et,{side:`left`,align:`center`,sideOffset:8,collisionPadding:8,children:(0,Q.jsxs)(tt,{"data-overlay":!0,onPointerDown:e=>e.stopPropagation(),className:`w-64 p-2.5 ${rt.popup}`,children:[x.length>1&&(0,Q.jsx)(`div`,{className:`mb-2 flex items-center gap-1 border-b border-[var(--chrome-ring)] pb-2`,children:x.map(e=>{let t=e!==n&&e!==`emphasis`&&r.includes(e);return(0,Q.jsx)(`button`,{type:`button`,"data-testid":`animate-kind-set-${e}`,"aria-pressed":e===n,disabled:t,title:t?`This shape already has an ${Z[e]} row`:void 0,onClick:()=>m(e),className:`flex h-7 flex-1 cursor-pointer items-center justify-center rounded-lg text-[11px] font-medium transition-colors disabled:cursor-default disabled:opacity-40 ${Pt(e===n)}`,children:Z[e]},e)})}),(0,Q.jsxs)(`div`,{className:`space-y-1`,children:[(0,Q.jsx)(`div`,{className:`px-1 text-[11px] text-[var(--chrome-fg-500)]`,children:`Effect`}),(0,Q.jsx)(`div`,{className:`flex flex-col gap-0.5`,children:b.map(e=>(0,Q.jsxs)(`div`,{className:`flex h-7 items-center gap-1 rounded-lg pr-0.5 text-[11px] transition-colors ${Pt(e===i)}`,children:[(0,Q.jsxs)(`button`,{type:`button`,"data-testid":`animate-effect-${e}`,"aria-pressed":e===i,onClick:()=>d(e,a),className:`flex h-full flex-1 cursor-pointer items-center justify-between gap-1 rounded-l-lg pl-2 font-medium`,children:[Ue[e].label,(0,Q.jsxs)(`span`,{className:`text-[10px] tabular-nums text-[var(--chrome-fg-400)]`,children:[Math.round(Be(e,e===i?a:void 0,t)),`ms`]})]}),(0,Q.jsx)(`button`,{type:`button`,"data-testid":`animate-effect-play-${e}`,"aria-label":`Preview ${Ue[e].label} on the slide`,title:`Play this on the shape`,onClick:()=>g(e,e===i?a:void 0),className:`flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-[var(--chrome-fg-500)] transition-colors hover:bg-[var(--chrome-hover)] hover:text-[var(--chrome-fg-900)]`,children:(0,Q.jsx)(Xe,{size:10})})]},e))})]}),We(S)&&(0,Q.jsxs)(`div`,{className:`mt-1 space-y-1 border-t border-[var(--chrome-ring)] pt-2`,children:[(0,Q.jsx)(`div`,{className:`px-1 text-[11px] text-[var(--chrome-fg-500)]`,children:`Direction`}),(0,Q.jsx)(`div`,{className:`flex items-center gap-1`,children:y.map(e=>{let t=(s??S.defaultDirection)===e;return(0,Q.jsx)(`button`,{type:`button`,"data-testid":`animate-direction-${e}`,"aria-pressed":t,"aria-label":gn[e],title:gn[e],onClick:()=>p(e),className:`flex h-7 flex-1 cursor-pointer items-center justify-center rounded-lg text-[11px] font-medium transition-colors ${Pt(t)}`,children:(0,Q.jsx)(_n,{direction:e})},e)})})]}),(0,Q.jsxs)(`div`,{className:`mt-1 space-y-1 border-t border-[var(--chrome-ring)] pt-2`,children:[(0,Q.jsx)(`div`,{className:`px-1 text-[11px] text-[var(--chrome-fg-500)]`,children:`Start`}),(0,Q.jsx)(`div`,{className:`flex flex-col gap-0.5`,children:vn.map(e=>(0,Q.jsx)(`button`,{type:`button`,"data-testid":`animate-start-${e.mode}`,"aria-pressed":c===e.mode,disabled:e.mode===`with`&&!l,onClick:()=>h(e.mode),className:`flex h-7 items-center rounded-lg px-2 text-[11px] font-medium transition-colors disabled:cursor-default disabled:opacity-40 ${Pt(c===e.mode)}`,children:e.label},e.mode))})]}),(0,Q.jsxs)(`div`,{className:`mt-1 flex gap-2 border-t border-[var(--chrome-ring)] pt-2`,children:[(0,Q.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-1`,children:[(0,Q.jsx)(`div`,{className:`px-1 text-[11px] text-[var(--chrome-fg-500)]`,children:`Duration`}),(0,Q.jsx)(we,{label:`duration in milliseconds`,testId:`animate-duration`,value:Math.round(Be(i,a,t)),min:80,max:4e3,step:40,fullWidth:!0,onChange:e=>d(i,e)})]}),c!==`click`&&(0,Q.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-1`,children:[(0,Q.jsx)(`div`,{className:`px-1 text-[11px] text-[var(--chrome-fg-500)]`,children:`Delay`}),(0,Q.jsx)(we,{label:`delay in milliseconds`,testId:`animate-delay`,value:Math.round(Math.max(0,o??0)),min:0,max:1e4,step:100,fullWidth:!0,onChange:f})]})]})]})})})]})}var hn={up:M,down:De,left:ke,right:N},gn={up:`Upward`,down:`Downward`,left:`Leftward`,right:`Rightward`};function _n(e){let{direction:t}=e,n=hn[t];return(0,Q.jsx)(n,{size:13,stroke:2})}var vn=[{mode:`click`,label:`On click`},{mode:`with`,label:`With previous`},{mode:`after`,label:`After previous`}],yn=`flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-md text-[var(--chrome-fg-600)] transition-colors hover:bg-[var(--chrome-hover)] disabled:cursor-default disabled:text-[var(--chrome-fg-300)] disabled:hover:bg-transparent`,bn=4,xn=380,Sn=200;function Cn(e){let{figure:t,index:n,total:r,onBack:i,onGoToSlide:a,onFocusSlide:o,viewMode:s}=e,{store:c,history:l}=ee(),u=_(e=>e.shapes),d=_(e=>e.selectedIds),f=_(e=>e.hoveredId),p=Ve(),m=(0,X.useMemo)(()=>ct(u,t),[u,t]),h=(0,X.useMemo)(()=>it(u,t),[u,t]),g=(0,X.useMemo)(()=>pt(m,h),[m,h]),v=(0,X.useMemo)(()=>ft(u,t,h),[u,t,h]),y=(0,X.useMemo)(()=>ut(u,t,h),[u,t,h]),b=(0,X.useMemo)(()=>bt(m),[m]),x=(0,X.useMemo)(()=>y.filter(e=>e.shapes.some(e=>d.has(e.id))),[y,d]),te=(0,X.useMemo)(()=>{let e=new Map;g.forEach((t,n)=>{let r=t.groupId?void 0:t.items[0].shape.groupId;r&&!e.has(r)&&e.set(r,n)});let t=new Map;for(let[n,r]of e)g.filter(e=>e.items[0].shape.groupId===n).length>1&&t.set(r,n);return t},[g]),C=(0,X.useMemo)(()=>{let e=0;return g.map((t,n)=>(n>0&&!t.withPrevious&&(e+=1),e))},[g]),ne=(0,X.useMemo)(()=>gt(m),[m]);function re(e,t){T(Dt(m,[e],t===`enter`?lt(e.shapes[0]):void 0,t))}function ie(){T(k?Dt(m,v):jt(u,t))}function T(e){e.length!==0&&(l.beginTransaction(),c.getState().replaceMany(e),l.endTransaction())}(0,X.useEffect)(()=>{o(t)},[t.id]);let[E,D]=(0,X.useState)(null);(0,X.useLayoutEffect)(()=>{if(E===null||E<0)return;let e=m[E];e&&p.play(e,w(t))},[E,m,t,p]),(0,X.useEffect)(()=>{if(E===null)return;let e=E>=0?m[E]:null,t=m[E+1]?.afterPrevious?0:xn,n=(e?He(e):0)+t,r=setTimeout(()=>{D(e=>e===null||e+1>=m.length?null:e+1)},n);return()=>clearTimeout(r)},[E,m]);let[O,ae]=(0,X.useState)(null);function oe(e,t,n){D(null),p.cancel(),ae({items:e.map(e=>({shape:e.shape,index:e.index,start:0,row:e.row,animation:{...e.animation,step:0,effect:at(e.shape,t,e.animation.kind),duration:n,delay:void 0}})),armed:e[0]?.animation.kind===`exit`})}(0,X.useEffect)(()=>{if(!O||O.armed)return;let e=setTimeout(()=>ae(e=>e&&!e.armed?{...e,armed:!0}:e),Sn);return()=>clearTimeout(e)},[O]),(0,X.useLayoutEffect)(()=>{if(!O?.armed)return;let e=O.items.some(e=>e.animation.kind===`exit`);p.play({index:0,items:O.items,afterPrevious:!1},w(t)).then(()=>{e&&window.setTimeout(()=>p.cancel(),Sn)})},[O,t,p]),(0,X.useEffect)(()=>{D(null),ae(null)},[m]);function se(){if(ae(null),E!==null){p.cancel(),D(null);return}m.length!==0&&(o(t),p.cancel(),D(-1))}let ce=(0,X.useMemo)(()=>{let e=new Set;if(!f)return e;e.add(f);let t=S(u,f);return t?.groupId&&h.has(t.groupId)&&e.add(t.groupId),e},[f,u,h]);function le(e){return{onPointerEnter:()=>c.getState().setHoveredId(e),onPointerLeave:()=>c.getState().setHoveredId(null)}}(0,X.useEffect)(()=>()=>c.getState().setHoveredId(null),[c]);let ue=Le({count:g.length,gap:bn,disabled:s,onReorder:(e,t)=>T(Ot(g,e,t)),onPress:e=>{let t=g[e];t&&c.getState().setSelectedIds(new Set(t.items.map(e=>e.shape.id)))}}),k=g.length>0;return(0,Q.jsxs)(Q.Fragment,{children:[E!==null&&(0,Q.jsx)(Ge,{pending:ot(m,E)}),O&&!O.armed&&(0,Q.jsx)(Ge,{pending:new Set(O.items.map(e=>e.shape.id))}),(0,Q.jsxs)(`div`,{className:`flex flex-col gap-1.5 bg-[var(--chrome-rest)] px-3 pb-3 pt-2.5`,children:[(0,Q.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,Q.jsx)(be,{size:15,stroke:1.75,className:`shrink-0 text-[var(--chrome-fg-500)]`}),(0,Q.jsx)(`span`,{className:`flex-1 truncate text-[13px] font-medium text-[var(--chrome-fg-900)]`,children:`Animate`}),(0,Q.jsx)(`button`,{type:`button`,"data-testid":`animate-done`,title:`Back to the deck (Esc)`,onClick:i,className:`flex h-7 shrink-0 cursor-pointer items-center rounded-lg bg-[var(--chrome-accent)] px-3 text-[12px] text-white transition-colors hover:bg-[var(--chrome-accent-hover)]`,children:`Done`})]}),(0,Q.jsxs)(`div`,{className:`flex h-7 items-center justify-between rounded-lg bg-[var(--chrome-popup)] px-0.5 ring-1 ring-[var(--chrome-ring)]`,children:[(0,Q.jsx)(`button`,{className:yn,"data-testid":`animate-prev-slide`,"aria-label":`Previous slide`,disabled:n===0,onClick:()=>a(n-1),children:(0,Q.jsx)(je,{size:14,stroke:1.75})}),(0,Q.jsxs)(`span`,{className:`truncate text-[12px] tabular-nums text-[var(--chrome-fg-700)]`,children:[`Slide `,n+1,` of `,r]}),(0,Q.jsx)(`button`,{className:yn,"data-testid":`animate-next-slide`,"aria-label":`Next slide`,disabled:n>=r-1,onClick:()=>a(n+1),children:(0,Q.jsx)(Me,{size:14,stroke:1.75})})]})]}),!s&&x.length>0&&(0,Q.jsxs)(`div`,{"data-testid":`animate-selection`,className:`mx-3 mb-2 flex h-8 shrink-0 items-center gap-2 rounded-[10px] bg-[var(--chrome-rest)] px-2.5`,children:[(0,Q.jsx)(ln,{size:12,className:`shrink-0 text-[var(--chrome-fg-400)]`}),(0,Q.jsx)(`span`,{className:`flex-1 truncate text-[11.5px] text-[var(--chrome-fg-900)]`,children:x.length===1?un(x[0].shapes,x[0].groupId):`${x.length} shapes`}),Tn(x).map(e=>(0,Q.jsx)(`button`,{type:`button`,"data-testid":`animate-selection-${e}`,title:`Add ${Z[e].toLowerCase()}`,onClick:()=>{for(let t of x)re(t,e)},className:`h-5 shrink-0 cursor-pointer rounded px-1.5 text-[10px] font-medium text-[var(--chrome-fg-600)] ring-1 ring-[var(--chrome-ring)] transition-colors hover:bg-[var(--chrome-hover)] hover:text-[var(--chrome-fg-900)]`,children:Z[e]},e))]}),(0,Q.jsxs)(`div`,{ref:ue.listRef,"data-testid":`animate-list`,className:`flex flex-1 flex-col overflow-y-auto px-3 pb-3 pt-2`,children:[!k&&(0,Q.jsx)(`div`,{className:`px-1 pt-4`,children:y.length===0?(0,Q.jsx)(`div`,{className:`text-balance px-1 py-6 text-center text-[11px] leading-relaxed text-[var(--chrome-fg-400)]`,children:`Nothing on this slide to animate yet.`}):(0,Q.jsxs)(`div`,{"data-testid":`animate-empty`,"data-count":y.length,className:`flex flex-col items-center gap-2.5 rounded-xl p-4 text-center`,children:[(0,Q.jsx)(`span`,{className:`flex h-9 w-9 items-center justify-center rounded-full bg-[var(--chrome-hover)] text-[var(--chrome-fg-600)]`,children:(0,Q.jsx)(be,{size:17,stroke:1.75})}),(0,Q.jsx)(`span`,{className:`text-[12.5px] font-medium text-[var(--chrome-fg-900)]`,children:`Reveal this slide in steps`}),(0,Q.jsx)(`span`,{className:`text-balance text-[11px] leading-relaxed text-[var(--chrome-fg-500)]`,children:wn(y.length)}),!s&&(0,Q.jsx)(dn,{variant:`primary`,units:y,idleCount:v.length,hasBuild:k,onHover:e=>c.getState().setHoveredId(e),onAdd:re,onSweep:ie})]})}),k&&(0,Q.jsx)(`div`,{className:`flex flex-col gap-1`,children:g.map((e,t)=>{let n=ht(e);return(0,Q.jsx)(`div`,{ref:ue.setItemRef(t),"data-testid":`animate-row-${t}`,"data-start":n,className:`shrink-0 ${t>0&&n===`click`?`border-t border-[var(--chrome-ring)] pt-1`:t>0&&n===`after`?`border-t border-dashed border-[var(--chrome-ring)] pt-1`:``}`,style:ue.rowStyle(t),children:(0,Q.jsx)(pn,{unit:e,click:ne[C[t]],playing:E!==null&&C[t]===E,start:n,canJoin:t>0,pointed:ce.has(mt(e)),unseen:b.has(dt(e.items[0])),selected:e.items.every(e=>d.has(e.shape.id)),viewMode:s,handlers:{...ue.rowHandlers(t),...le(e.items[0].shape.id)},onSplit:e.groupId?()=>T(wt(g,e.groupId)):null,onMerge:te.has(t)?()=>T(xt(g,te.get(t))):null,onSetEffect:(t,n)=>T(Et(e.items,t,n)),onSetDelay:t=>T(At(e.items,t)),onSetKind:t=>T(Mt(e.items,t)),onSetDirection:t=>T(St(e.items,t)),onPreviewEffect:(t,n)=>oe(e.items,t,n),onSetStart:t=>T(Ct(g,mt(e),t)),onRemove:()=>T(kt(g,mt(e)))})},mt(e))})}),!s&&k&&(0,Q.jsx)(`div`,{className:`pt-3`,children:(0,Q.jsx)(dn,{units:y,idleCount:v.length,hasBuild:k,onHover:e=>c.getState().setHoveredId(e),onSweep:ie,onAdd:re})})]}),(0,Q.jsxs)(`div`,{className:`flex flex-col gap-2 border-t border-[var(--chrome-ring)] p-3`,children:[(0,Q.jsx)(`button`,{"data-testid":`animate-play`,disabled:!k,className:`flex h-9 w-full items-center justify-center gap-2 rounded-lg bg-[var(--chrome-accent)] text-[13px] text-white transition-colors hover:bg-[var(--chrome-accent-hover)] disabled:bg-[var(--chrome-hover)] disabled:text-[var(--chrome-fg-400)]`,onClick:se,children:E===null?(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(Xe,{size:13}),`Play`]}):(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsx)(Ae,{size:13}),`Stop`]})}),!s&&k&&(0,Q.jsx)(`button`,{"data-testid":`animate-clear`,className:`mx-auto flex h-6 cursor-pointer items-center rounded px-2 text-[11px] text-[var(--chrome-fg-500)] transition-colors hover:text-[var(--chrome-fg-900)]`,onClick:()=>T(Tt(m)),children:`Clear animations`})]})]})}function wn(e){return e===1?`One thing shows with the slide. Give it a click of its own.`:`${e} things show at once right now. Give each one its own click.`}function Tn(e){let t=e.flatMap(e=>e.shapes);return vt(t[0]).filter(e=>e===`emphasis`||t.some(t=>!_t(t).some(t=>t.kind===e)))}var En=`flex h-9 items-center justify-center bg-[var(--chrome-accent)] text-[13px] text-white transition-colors hover:bg-[var(--chrome-accent-hover)] disabled:bg-[var(--chrome-hover)] disabled:text-[var(--chrome-fg-400)] data-[popup-open]:bg-[var(--chrome-accent-hover)]`;function Dn(e){let{disabled:t,onPresent:n}=e;return(0,Q.jsxs)(`div`,{className:`flex gap-px`,children:[(0,Q.jsxs)(`button`,{type:`button`,"data-testid":`slides-present`,disabled:t,onClick:()=>n(`current`),className:`${En} flex-1 gap-2 rounded-l-lg`,children:[(0,Q.jsx)(Xe,{size:14}),`Start presentation`]}),(0,Q.jsxs)(u,{children:[(0,Q.jsx)(p,{disabled:t,render:(0,Q.jsx)(`button`,{type:`button`,"aria-label":`Presentation start options`,"data-testid":`slides-present-options`,className:`${En} w-9 rounded-r-lg`,children:(0,Q.jsx)(i,{size:14,stroke:2})})}),(0,Q.jsx)(d,{children:(0,Q.jsx)(m,{side:`top`,align:`end`,sideOffset:6,className:`z-50 outline-none`,children:(0,Q.jsxs)(h,{"data-overlay":!0,className:`min-w-[185px] p-1`,children:[(0,Q.jsxs)(f,{"data-testid":`slides-present-beginning`,onClick:()=>n(`beginning`),children:[(0,Q.jsx)(cn,{size:15,stroke:1.75,className:`text-[var(--chrome-fg-400)]`}),`From beginning`]}),(0,Q.jsxs)(f,{"data-testid":`slides-present-current`,onClick:()=>n(`current`),children:[(0,Q.jsx)(o,{size:15,stroke:1.75,className:`text-[var(--chrome-fg-400)]`}),`From current slide`]})]})})})]})]})}var On=`flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 text-[13px] text-[var(--chrome-fg-700)] outline-none data-[highlighted]:bg-[var(--chrome-hover)]`,kn=`min-w-[185px] p-1 outline-none ${rt.popup}`;function An(e){let{index:t,prefix:n,actions:r,skipped:i,Item:a,Separator:s}=e;function c(e,r,i,o,s=!1){return(0,Q.jsxs)(a,{className:s?`${On} text-red-600 data-[highlighted]:bg-red-50`:On,"data-testid":`${n}-${e}-${t}`,onClick:o,children:[(0,Q.jsx)(`span`,{className:s?`text-red-400`:`text-[var(--chrome-fg-400)]`,children:r}),(0,Q.jsx)(`span`,{children:i})]})}let l=(0,Q.jsx)(s,{className:`mx-1 my-1 h-px bg-[var(--chrome-divider)]`});return(0,Q.jsxs)(Q.Fragment,{children:[c(`present`,(0,Q.jsx)(o,{size:15,stroke:1.75}),`Present from here`,r.onPresent),l,r.onExportPng?c(`export-png`,(0,Q.jsx)(he,{size:15,stroke:1.75}),`Export slide as PNG`,r.onExportPng):null,r.onExportSvg?c(`export-svg`,(0,Q.jsx)(ge,{size:15,stroke:1.75}),`Export slide as SVG`,r.onExportSvg):null,r.onEmbed?c(`embed`,(0,Q.jsx)(Ne,{size:15,stroke:1.75}),`Embed slide…`,r.onEmbed):null,l,c(`duplicate`,(0,Q.jsx)(me,{size:15,stroke:1.75}),`Duplicate slide`,r.onDuplicate),c(`rename`,(0,Q.jsx)(Ke,{size:15,stroke:1.75}),`Rename slide`,r.onRename),c(`notes`,(0,Q.jsx)(ze,{size:15,stroke:1.75}),`Speaker notes`,r.onEditNotes),i?c(`skip`,(0,Q.jsx)(ve,{size:15,stroke:1.75}),`Unskip slide`,r.onToggleSkip):c(`skip`,(0,Q.jsx)(Ce,{size:15,stroke:1.75}),`Skip slide`,r.onToggleSkip),c(`add-above`,(0,Q.jsx)(Fe,{size:15,stroke:1.75}),`Add slide above`,r.onAddAbove),c(`add-below`,(0,Q.jsx)(Ie,{size:15,stroke:1.75}),`Add slide below`,r.onAddBelow),l,c(`delete`,(0,Q.jsx)(Oe,{size:15,stroke:1.75}),`Remove slide`,r.onDelete,!0)]})}function jn(e){let{index:t,actions:n,skipped:r,disabled:i}=e;return i?null:(0,Q.jsxs)(u,{children:[(0,Q.jsx)(p,{render:(0,Q.jsx)(`button`,{type:`button`,"aria-label":`Slide options`,"data-testid":`slide-menu-${t}`,className:`absolute right-1.5 top-1.5 flex h-6 w-6 items-center justify-center rounded-md bg-[var(--chrome-surface)] text-[var(--chrome-fg-600)] opacity-0 ring-1 ring-[var(--chrome-ring)] transition-opacity hover:bg-[var(--chrome-hover)] focus-visible:opacity-100 group-hover:opacity-100 data-[popup-open]:opacity-100`,onPointerDown:e=>e.stopPropagation(),children:(0,Q.jsx)(a,{size:13,stroke:1.75})})}),(0,Q.jsx)(d,{children:(0,Q.jsx)(m,{side:`left`,align:`start`,sideOffset:6,className:`z-50 outline-none`,children:(0,Q.jsx)(l,{"data-overlay":!0,className:kn,children:(0,Q.jsx)(An,{index:t,prefix:`slide-menu`,actions:n,skipped:r,Item:c,Separator:s})})})})]})}function Mn(e){let{index:t,actions:n,skipped:r,children:i,disabled:a}=e,o=_(e=>e.coarsePointer);return a||o?(0,Q.jsx)(Q.Fragment,{children:i}):(0,Q.jsxs)(Ee,{children:[(0,Q.jsx)(A,{render:(0,Q.jsx)(`div`,{style:{display:`contents`}}),children:i}),(0,Q.jsx)(d,{children:(0,Q.jsx)(m,{className:`z-50 outline-none`,children:(0,Q.jsx)(l,{"data-overlay":!0,"data-testid":`slide-ctx-${t}`,className:kn,children:(0,Q.jsx)(An,{index:t,prefix:`slide-ctx`,actions:n,skipped:r,Item:c,Separator:s})})})})]})}function Nn(e){let t=I(e),n=18*t.unit,r=[{x:433,fill:U.red},{x:471,fill:U.yellow},{x:509,fill:U.blue}].map(({x:e,fill:r})=>{let i=t.point(e,158);return L({x:i.x,y:i.y,width:n,height:n},r,{kind:`ellipse`,fillStyle:`bold`})}),i=(e,n,r,i)=>L(t.rect(e,n,r,r),i,{kind:`star`,fillStyle:`bold`});return[...r,i(812,100,24,U.yellow),i(128,416,16,U.pink),P(t.rect(120,204,720,90),`Presentation title`,t.font(56)),P(t.rect(180,306,600,40),`A short subtitle that sets the scene`,t.font(24),{color:K}),R([t.point(432,436),t.point(528,436)],{color:V,strokeWidth:4}),P(t.rect(280,452,400,30),`Your name · Occasion · Date`,t.font(16),{color:K})]}function Pn(e){let t=I(e);return[L(t.rect(110,145,230,230),U.yellow,{kind:`ellipse`,label:`01`,fontSize:t.font(80)}),P(t.rect(420,190,460,64),`Section title`,t.font(48),{align:`left`}),R([t.point(422,268),t.point(640,268)],{color:q,strokeWidth:4}),P(t.rect(420,292,460,36),`A one-line summary of this chapter`,t.font(20),{align:`left`,color:K})]}function Fn(e){let t=I(e);return[P(t.rect(330,148,300,26),`THE BIG IDEA`,t.font(15),{letterSpacing:.3,color:K}),P(t.rect(120,192,720,156),`Say the one thing that matters.`,t.font(64)),R([t.point(390,374),t.point(570,374)],{color:V,strokeWidth:5})]}function In(e){let t=I(e),n=(e,n,r,i)=>L(t.rect(e,n,r,r),i,{kind:`star`,fillStyle:`bold`});return[Zt(t),n(150,106,26,U.yellow),n(806,92,18,U.blue),n(730,414,20,U.yellow),n(208,408,14,U.pink),R([t.point(434,198),t.point(526,198)],{color:V,strokeWidth:4}),Xt(t.rect(120,216,720,90),`A title that glows in the dark`,t.font(52)),Xt(t.rect(240,322,480,40),`A quieter cover for serious rooms`,t.font(20),{color:Qt})]}function Ln(e){let t=I(e);return[L(t.rect(0,0,424,Yt.height),U.gray,{dash:`none`,label:`Drop an image
-or paste a screenshot`,fontSize:t.font(18),labelColor:K}),P(t.rect(486,168,300,26),`A DECK ABOUT`,t.font(14),{align:`left`,letterSpacing:.3,color:K}),P(t.rect(486,202,408,140),`The thing you came to hear`,t.font(44),{align:`left`,valign:`top`,lineHeight:1.25}),R([t.point(488,360),t.point(600,360)],{color:V,strokeWidth:4}),P(t.rect(486,384,408,30),`Your name · Occasion · Date`,t.font(16),{align:`left`,color:K})]}function Rn(e){let t=I(e),n=U.green,r=(e,n)=>L(t.rect(e,26,15,15),n,{kind:`ellipse`,fillStyle:`bold`,dash:`none`});return[Zt(t),r(30,U.red),r(56,U.yellow),r(82,U.green),Y(t.point(80,130),`~/talks $ present --topic`,t.font(20),n,{fontFamily:G}),Y(t.point(80,176),`"Your big idea"`,t.font(50),Jt,{fontFamily:G}),L(t.rect(80,268,20,42),Jt,{dash:`none`}),Y(t.point(80,356),`loading slides… ████████░░ 80%`,t.font(17),n,{fontFamily:G,opacity:.8}),Y(t.point(80,458),`# your name · today`,t.font(15),Jt,{fontFamily:G,opacity:.5})]}function zn(e){let t=I(e);return[...F(t,`Slide title`),P(t.rect(72,156,816,312),ne([`The first key point`,`A second point, with a little more detail to back it up`,`The third point that drives it home`]),t.font(24),{align:`left`,valign:`top`,lineHeight:2,color:B})]}function Bn(e){let t=I(e),n=[{fill:U.blue,text:`Where we are today`},{fill:U.green,text:`What we learned`},{fill:U.yellow,text:`The plan from here`},{fill:U.pink,text:`Questions and next steps`}].flatMap(({fill:e,text:n},r)=>{let i=160+r*78;return z([L(t.rect(72,i,48,48),e,{kind:`ellipse`,label:String(r+1),fontSize:t.font(20)}),P(t.rect(140,i,720,48),n,t.font(24),{align:`left`})])});return[...F(t,`Agenda`),...n]}function Vn(e){let t=I(e);return[...F(t,`Slide title`),R([t.point(480,160),t.point(480,468)],{strokeWidth:1.5,dash:`dashed`,opacity:.35}),P(t.rect(72,156,380,40),`First column`,t.font(24),{align:`left`}),R([t.point(74,204),t.point(150,204)],{color:`#1971c2`,strokeWidth:3}),P(t.rect(72,216,380,244),`Use this side for the first idea, option or before-state.`,t.font(20),{align:`left`,valign:`top`,color:B}),P(t.rect(508,156,380,40),`Second column`,t.font(24),{align:`left`}),R([t.point(510,204),t.point(586,204)],{color:`#2f9e44`,strokeWidth:3}),P(t.rect(508,216,380,244),`And this side for the second idea, option or after-state.`,t.font(20),{align:`left`,valign:`top`,color:B})]}function Hn(e){let t=I(e);return[P(t.rect(72,48,816,50),`Which way do we go?`,t.font(36)),...z([L(t.rect(72,132,384,344),U.green,{fillStyle:`outline`}),L(t.rect(404,152,32,32),U.green,{kind:`checkbox`,fillStyle:`bold`}),P(t.rect(96,156,336,40),`Option A`,t.font(28)),P(t.rect(108,212,312,240),ne([`Cheaper to build`,`Ships this quarter`,`Less flexible later`]),t.font(20),{align:`left`,valign:`top`,lineHeight:2,color:B})]),...z([L(t.rect(504,132,384,344),U.gray,{fillStyle:`outline`}),P(t.rect(528,156,336,40),`Option B`,t.font(28)),P(t.rect(540,212,312,240),ne([`More upfront work`,`Ships next quarter`,`Grows with us`]),t.font(20),{align:`left`,valign:`top`,lineHeight:2,color:B})]),L(t.rect(450,274,60,60),U.yellow,{kind:`ellipse`,fillStyle:`bold`,label:`vs`,fontSize:t.font(22)})]}function Un(e){let t=I(e);return[...F(t,`Before and after`),...z([L(t.rect(72,140,384,330),U.gray),P(t.rect(96,162,344,36),`Before`,t.font(26),{align:`left`}),P(t.rect(96,214,344,230),`✗ Manual deploys at midnight
-✗ Surprise regressions
-✗ Knowledge in one head`,t.font(19),{align:`left`,valign:`top`,lineHeight:2,color:B})]),...z([L(t.rect(504,140,384,330),U.green),P(t.rect(528,162,344,36),`After`,t.font(26),{align:`left`}),P(t.rect(528,214,344,230),`✓ Ship on every merge
-✓ Tests catch it first
-✓ Docs that stay current`,t.font(19),{align:`left`,valign:`top`,lineHeight:2,color:B})]),qt(t.point(462,305),t.point(498,305),5)]}function Wn(e){let t=I(e),n=[{x:72,fill:U.blue,value:`42%`,caption:`more signups`},{x:360,fill:U.teal,value:`3×`,caption:`faster builds`},{x:648,fill:U.purple,value:`12k`,caption:`happy users`}].flatMap(({x:e,fill:n,value:r,caption:i})=>z([L(t.rect(e,150,240,260),n,{fillStyle:`outline`,label:r,fontSize:t.font(56)}),P(t.rect(e+20,330,200,56),i,t.font(18),{color:K})]));return[...F(t,`The quarter in numbers`),...n]}function Gn(e){let t=I(e),n=[{color:q,text:`The first thing to remember`},{color:`#1971c2`,text:`The second, said plainly`},{color:`#2f9e44`,text:`The third, end on an action`}].flatMap(({color:e,text:n},r)=>{let i=156+r*104,a=z([Y(t.point(84,i+14),String(r+1),t.font(44),e),P(t.rect(160,i,720,84),n,t.font(26),{align:`left`})]);return r>0&&a.push(R([t.point(84,i-10),t.point(876,i-10)],{strokeWidth:1.5,opacity:.15})),a});return[...F(t,`Three takeaways`),...n]}function Kn(e){let t=I(e);return[...F(t,`Do and don't`),...z([L(t.rect(72,150,400,310),U.green,{fillStyle:`outline`}),L(t.rect(96,170,36,36),U.green,{kind:`checkbox`,fillStyle:`bold`}),P(t.rect(148,170,300,36),`Do`,t.font(28),{align:`left`}),P(t.rect(96,222,352,220),`Keep slides to one idea
-Use big readable text
-Practice out loud`,t.font(20),{align:`left`,valign:`top`,lineHeight:2,color:B})]),...z([L(t.rect(488,150,400,310),U.red,{fillStyle:`outline`}),L(t.rect(512,170,36,36),U.red,{kind:`crossbox`,fillStyle:`bold`}),P(t.rect(564,170,300,36),`Don't`,t.font(28),{align:`left`}),P(t.rect(512,222,352,220),`Cram every detail in
-Read off the slide
-Run past the time box`,t.font(20),{align:`left`,valign:`top`,lineHeight:2,color:B})])]}function qn(e){let t=I(e),n=[{icon:`zap`,fill:U.yellow,name:`Fast`,desc:`Blank canvas to first stroke in a second`},{icon:`users`,fill:U.blue,name:`Together`,desc:`Share a link, draw with the whole room`},{icon:`share-2`,fill:U.green,name:`Portable`,desc:`PNG, SVG and PDF out of the box`},{icon:`undo-2`,fill:U.pink,name:`Forgiving`,desc:`Undo everything, nothing is precious`}].flatMap(({icon:e,fill:n,name:r,desc:i},a)=>{let o=162+a*78,s=52*t.unit,c=t.point(72,o),l=26*t.unit;return z([L({x:c.x,y:c.y,width:s,height:s},n,{kind:`ellipse`,dash:`none`}),J({x:c.x+(s-l)/2,y:c.y+(s-l)/2},l,e,{color:$t}),P(t.rect(148,o+2,210,48),r,t.font(22),{align:`left`}),P(t.rect(366,o+2,522,48),i,t.font(17),{align:`left`,color:B})])});return[...F(t,`What you get`),...n]}function Jn(e){let t=I(e),n=[{icon:`gauge`,title:`Instant`,body:`Boards open in under a second, however big`},{icon:`users`,title:`Multiplayer`,body:`Cursors, comments and a shared laser pointer`},{icon:`sparkles`,title:`AI drafts`,body:`Describe a diagram, get shapes you can edit`},{icon:`shapes`,title:`Every shape`,body:`Flowcharts, mockups, tables, charts, slides`},{icon:`lock`,title:`Private`,body:`Nothing leaves your workspace unless you share`},{icon:`file-down`,title:`Portable`,body:`PNG, SVG, PDF and a plain file you own`}].flatMap(({icon:e,title:n,body:r},i)=>{let a=72+i%3*280,o=168+Math.floor(i/3)*152,s=34*t.unit,c=t.point(a,o);return z([J({x:c.x,y:c.y},s,e,{color:q}),P(t.rect(a+46,o-4,200,40),n,t.font(21),{align:`left`}),P(t.rect(a,o+48,252,76),r,t.font(15),{align:`left`,valign:`top`,lineHeight:1.6,color:B})])});return[...F(t,`Why teams switch`),...n]}function Yn(e){let t=I(e),n=(e,n,r,i)=>L(t.rect(e-126,n-126,252,252),r,{kind:`ellipse`,opacity:.6,color:i,strokeWidth:2}),r=[{cx:300,cy:262,fill:U.blue,ink:tn.blue,name:`What users beg for`},{cx:432,cy:262,fill:U.yellow,ink:tn.yellow,name:`What we're best at`},{cx:366,cy:376,fill:U.teal,ink:tn.teal,name:`What pays the bills`}],i=r.flatMap(({fill:e,name:n},r)=>z([L(t.rect(660,214+r*66,20,20),e,{kind:`ellipse`,fillStyle:`bold`}),P(t.rect(694,208+r*66,200,32),n,t.font(17),{align:`left`})]));return[...F(t,`Where the three meet`),...r.map(({cx:e,cy:t,fill:r,ink:i})=>n(e,t,r,i)),P(t.rect(288,292,156,40),`Do this`,t.font(20)),...i]}function Xn(e){let t=I(e),n=z([L(t.rect(72,140,392,300),U.blue,{fillStyle:`outline`}),P(t.rect(96,164,344,96),`38%`,t.font(72),{align:`left`}),P(t.rect(96,250,344,34),`faster to a first board`,t.font(18),{align:`left`,color:B}),Kt(t.rect(96,292,344,130),`area`,[[``,`Minutes`],[`Jan`,`9.4`],[`Feb`,`7.1`],[`Mar`,`6.2`],[`Apr`,`4.8`],[`May`,`3.6`]],t.font(11),{showLegend:!1})]),r=z([L(t.rect(480,140,196,142),U.green,{fillStyle:`outline`}),P(t.rect(496,164,164,62),`4.8`,t.font(48),{align:`left`}),P(t.rect(496,228,164,32),`average rating`,t.font(15),{align:`left`,color:B})]),i=z([L(t.rect(692,140,196,142),U.orange,{fillStyle:`outline`}),J(t.point(710,162),30*t.unit,`trophy`,{color:q}),P(t.rect(708,204,164,32),`12 of 14 shipped`,t.font(17),{align:`left`}),P(t.rect(708,234,164,28),`two slipped to Q3`,t.font(14),{align:`left`,color:K})]),a=z([L(t.rect(480,298,408,142),U.gray,{fillStyle:`outline`}),P(t.rect(504,316,360,76),`“It replaced three tools and a weekly meeting.”`,t.font(20),{align:`left`,valign:`top`,lineHeight:1.5}),P(t.rect(504,396,360,28),`Kim, platform lead at Globex`,t.font(14),{align:`left`,color:K})]);return[...F(t,`The quarter at a glance`),...n,...r,...i,...a]}function Zn(e){let t=I(e),n=[{fill:U.green,tag:`Added`,text:`Dark mode, at last`},{fill:U.blue,tag:`Improved`,text:`Boards open twice as fast`},{fill:U.red,tag:`Fixed`,text:`That one bug, gone for good`}].flatMap(({fill:e,tag:n,text:r},i)=>{let a=168+i*88;return z([L(t.rect(72,a+4,140,48),e,{fillStyle:`outline`,label:n,fontSize:t.font(18)}),P(t.rect(236,a,652,56),r,t.font(22),{align:`left`})])});return[P(t.rect(72,48,460,56),`What's new`,t.font(36),{align:`left`}),R([t.point(74,118),t.point(250,118)],{color:V,strokeWidth:4}),P(t.rect(560,58,328,36),`v2.4.0 · this week`,t.font(15),{align:`right`,fontFamily:G,color:K}),...n,P(t.rect(72,442,816,40),`…plus twelve smaller fixes nobody will notice but us.`,t.font(24),{fontFamily:nn,color:K})]}function Qn(e){let t=I(e),n=[U.blue,U.green,U.yellow,U.pink,U.teal,U.purple].flatMap((e,n)=>{let r=240+n%3*240,i=n<3?152:312;return z([L(t.rect(r-42,i,84,84),e,{kind:`ellipse`,label:String.fromCharCode(65+n),fontSize:t.font(28)}),P(t.rect(r-110,i+92,220,24),`Name Surname`,t.font(18)),P(t.rect(r-110,i+118,220,20),`What they do`,t.font(14),{color:K})])});return[...F(t,`Meet the team`),...n]}function $n(e){let t=I(e),n=[{x:72,fill:U.blue,quote:`“It changed how our team plans every single week.”`,who:`Sam, Acme`},{x:368,fill:U.orange,quote:`“The first tool everyone actually kept using.”`,who:`Ada, Initech`},{x:664,fill:U.pink,quote:`“We shipped the rework two weeks early.”`,who:`Kim, Globex`}].flatMap(({x:e,fill:n,quote:r,who:i})=>z([L(t.rect(e,150,256,268),n,{fillStyle:`outline`}),P(t.rect(e+20,172,216,150),r,t.font(18),{align:`left`,valign:`top`,lineHeight:1.5}),W(t.rect(e+18,330,104,22),`rating`,{value:5,fill:V}),P(t.rect(e+20,362,216,32),i,t.font(14),{align:`left`,color:K})]));return[...F(t,`What people say`),...n]}function er(e){let t=I(e),n=e.width/Yt.width,r=e.height/Yt.height,i=[[``,`Basic`,`Pro`,`Team`],[`Price`,`$0`,`$12`,`$29`],[`Projects`,`1`,`10`,`Unlimited`],[`Export`,`PNG`,`PNG, SVG, PDF`,`PNG, SVG, PDF`],[`Support`,`—`,`Email`,`Priority`]],a=i.map((e,t)=>e.map((e,n)=>t===0?{background:n===2?U.blue:`#e9ecef`}:n===2?{background:`#e7f5ff`}:{}));return[...F(t,`Compare the options`),rn(t.point(72,156),i,[252,188,188,188].map(e=>e*n),i.map(()=>54*r),t.font(16),{cellStyles:a})]}function tr(e){let t=I(e),n=[{x:176,fill:U.blue,when:`Q1`,what:`Discovery, 20 interviews`},{x:384,fill:U.green,when:`Q2`,what:`First beta, 10 teams`},{x:592,fill:U.yellow,when:`Q3`,what:`Public launch`},{x:792,fill:U.pink,when:`Q4`,what:`Scale up, self-serve`}].flatMap(({x:e,fill:n,when:r,what:i},a)=>{let o=a%2==0,s=26*t.unit,c=t.point(e,306),l=o?-1:1;return z([R([t.point(e,306+l*16),t.point(e,306+l*54)],{strokeWidth:1.5,opacity:.3}),L({x:c.x-s/2,y:c.y-s/2,width:s,height:s},n,{kind:`ellipse`,fillStyle:`bold`}),P(t.rect(e-92,o?184:364,184,34),r,t.font(22),{valign:o?`bottom`:`top`}),P(t.rect(e-92,o?218:398,184,56),i,t.font(15),{valign:o?`bottom`:`top`,lineHeight:1.5,color:B})])});return[...F(t,`Roadmap`),R([t.point(88,306),t.point(890,306)],{strokeWidth:3,endArrow:!0}),...n,L(t.rect(96,332,96,34),q,{kind:`oval`,fillStyle:`bold`,label:`today`,fontSize:t.font(14)}),R([t.point(144,284),t.point(144,332)],{color:q,strokeWidth:2})]}function nr(e){let t=I(e),n=[{x:72,title:`Now`},{x:350,title:`Next`},{x:628,title:`Later`}].flatMap(({x:e,title:n})=>z([L(t.rect(e,140,260,330),`transparent`,{dash:`dashed`,opacity:.6}),P(t.rect(e,152,260,30),n,t.font(22))])),r=116*t.unit,i=[{x:100,y:206,rot:-2,fill:U.yellow,text:`Ship the fix`},{x:168,y:332,rot:3,fill:U.blue,text:`Call the pilot users`},{x:396,y:224,rot:-4,fill:U.green,text:`Write the launch post`},{x:690,y:240,rot:5,fill:U.pink,text:`Explore pricing`}].map(({x:e,y:n,rot:i,fill:a,text:o})=>H(t.point(e,n),r,o,t.font(15),i,a));return[...F(t,`Now, next, later`),...n,...i]}function rr(e){let t=I(e),n=[{label:`Infrastructure`,fill:U.green,pct:.8},{label:`Mobile app`,fill:U.blue,pct:.6},{label:`Documentation`,fill:U.yellow,pct:.45},{label:`Onboarding`,fill:U.pink,pct:.2}].flatMap(({label:e,fill:n,pct:r},i)=>{let a=168+i*76;return z([P(t.rect(72,a,240,32),e,t.font(20),{align:`left`}),L(t.rect(330,a,470,32),U.gray,{dash:`none`}),L(t.rect(330,a,470*r,32),n,{fillStyle:`bold`,dash:`none`}),P(t.rect(814,a,76,32),`${Math.round(r*100)}%`,t.font(16),{align:`left`,fontFamily:G,color:B})])});return[...F(t,`Where things stand`),...n]}function ir(e){let t=I(e),n=[{x:72,y:140,fill:U.green,title:`Strengths`,hint:`What we do well`},{x:504,y:140,fill:U.red,title:`Weaknesses`,hint:`Where we struggle`},{x:72,y:314,fill:U.blue,title:`Opportunities`,hint:`What we could ride`},{x:504,y:314,fill:U.yellow,title:`Threats`,hint:`What could hurt us`}].flatMap(({x:e,y:n,fill:r,title:i,hint:a})=>z([L(t.rect(e,n,384,158),r),P(t.rect(e+20,n+12,344,28),i,t.font(20),{align:`left`}),P(t.rect(e+20,n+48,344,96),a,t.font(15),{align:`left`,valign:`top`,color:B})]));return[...F(t,`SWOT`),...n]}function ar(e){let t=I(e),n=[{fill:U.blue,label:`Collect`,note:`Anyone can file a request`},{fill:U.teal,label:`Sort`,note:`Weekly triage, no backlog`},{fill:U.green,label:`Decide`,note:`One owner says yes or no`},{fill:U.yellow,label:`Ship`,note:`Behind a flag, then wide`}].flatMap(({fill:e,label:n,note:r},i)=>{let a=72+i*188;return z([L(t.rect(a,218,234,104),e,{kind:`chevron`,label:n,fontSize:t.font(21)}),P(t.rect(a+44,340,174,76),r,t.font(15),{valign:`top`,lineHeight:1.5,color:K})])});return[...F(t,`How it works`),...n]}var $=.56;function or(e){let t=I(e),n=[{fill:U.blue,value:`12,400`,name:`Visited the site`,note:`any page, any source`},{fill:U.teal,value:`1,860`,name:`Started a trial`,note:`15% of visitors`},{fill:U.green,value:`410`,name:`Became customers`,note:`22% of trials`}],r=520,i=[],a=[];return n.forEach(({fill:e,value:n,name:o,note:s},c)=>{let l=148+c*96,u=l+96/2,d=r*$;i.push(...z([L(t.rect(340-r/2,l,r,96),e,{kind:`trapezoid`,rotation:180}),P(t.rect(340-d/2,u-24,d,48),n,t.font(30-c*4))]),...z([P(t.rect(646,u-30,250,30),o,t.font(20),{align:`left`}),P(t.rect(646,u+2,250,26),s,t.font(15),{align:`left`,color:K})])),c>0&&a.push(P(t.rect(40,u-30,134,30),c===1?`−10,540`:`−1,450`,t.font(17),{align:`right`,color:K}),qt(t.point(340-r/2+18,u-6),t.point(150,u+12),1.8,{color:K})),r*=$}),[...F(t,`Where people drop off`),...i,...a,R([t.point(622,156),t.point(622,428)],{strokeWidth:1.5,dash:`dashed`,opacity:.3}),L(t.rect(258,460,164,38),U.gray,{kind:`oval`,fillStyle:`outline`,label:`3.3% end to end`,fontSize:t.font(16)})]}function sr(e){let t=I(e),n=[{fill:U.purple,label:`Why`,note:`Teams lose their mornings to status meetings`},{fill:U.blue,label:`How`,note:`One board replaces the four tools they juggle`},{fill:U.teal,label:`What`,note:`Ship the shared inbox and the weekly digest`}],r=180,i=[];n.forEach(({fill:e,label:n,note:a},o)=>{let s=176+o*96,c=s+96/2;i.push(...z([L(t.rect(330-r/2,s,r,96),e,{kind:`trapezoid`}),P(t.rect(330-r*$*.5,c-22,r*$,44),n,t.font(24))]),...z([L(t.rect(660,c-26,12,12),e,{kind:`ellipse`,fillStyle:`bold`}),P(t.rect(684,c-34,212,68),a,t.font(16),{align:`left`,valign:`top`,lineHeight:1.5,color:B})])),r/=$});let a=180*$;return[...F(t,`How the work ladders up`),L(t.rect(330-a/2,118,a,58),U.yellow,{kind:`triangle`}),...i]}function cr(e){let t=I(e),n={x:340,y:318},r=[{label:`Talk to users`,fill:U.blue},{label:`Pick one bet`,fill:U.teal},{label:`Ship it small`,fill:U.green},{label:`Measure it`,fill:U.yellow}],i=r.map(({label:e,fill:i},a)=>{let o=-Math.PI/2+a*2*Math.PI/r.length;return L(t.rect(n.x+Math.cos(o)*152-156/2,n.y+Math.sin(o)*152-58/2,156,58),i,{label:e,fontSize:t.font(18)})}),a=i.map((e,n)=>{let r=i[(n+1)%i.length];return Gt({x:e.x+e.width/2,y:e.y+e.height/2},{x:r.x+r.width/2,y:r.y+r.height/2},e,r,{bow:-34*t.unit,strokeWidth:2.4})}),o=46*t.unit;return[...F(t,`How we work`),...a,...i,J({x:t.point(n.x,n.y).x-o/2,y:t.point(n.x,n.y).y-o/2},o,`refresh-cw`,{color:K}),P(t.rect(646,240,250,34),`Every two weeks`,t.font(21),{align:`left`}),P(t.rect(646,282,250,140),`One loop per sprint. Nothing ships that hasn't been through all four.`,t.font(16),{align:`left`,valign:`top`,lineHeight:1.5,color:B})]}function lr(e){let t=I(e),n=an(t.rect(72,148,816,300),`lanes`,{lanes:[`Customer`,`Support`,`Engineering`]}),r=e=>148+e*100+50,i=(e,n,i,a)=>L(t.rect(e,r(n)-27,148,54),a,{label:i,fontSize:t.font(16)}),a=i(126,0,`Reports a bug`,U.blue),o=i(324,1,`Triages it`,U.teal),s=i(522,2,`Ships a fix`,U.green),c=i(720,0,`Confirms`,U.blue),l=(e,t)=>Gt({x:e.x+e.width,y:e.y+e.height/2},{x:t.x,y:t.y+t.height/2},e,t,{bendStyle:`elbow`,strokeWidth:2.4});return[...F(t,`Who picks it up`),n,a,o,s,c,l(a,o),l(o,s),l(s,c)]}function ur(e){let t=I(e),n=e=>250+e*106,r=Array.from({length:6},(e,r)=>[R([t.point(n(r),150),t.point(n(r),440)],{strokeWidth:1.5,opacity:.12}),P(t.rect(n(r),118,106,26),`W${r+1}`,t.font(14),{color:K})]).flat(),i=[{name:`Research`,from:0,span:2,fill:U.purple},{name:`Design`,from:1,span:2,fill:U.blue},{name:`Build`,from:2,span:3,fill:U.teal},{name:`Beta`,from:4,span:1.5,fill:U.green},{name:`Launch prep`,from:5,span:.7,fill:U.yellow}].flatMap(({name:e,from:r,span:i,fill:a},o)=>{let s=170+o*52;return z([P(t.rect(72,s,164,36),e,t.font(17),{align:`left`}),L(t.rect(n(r)+6,s+4,106*i-12,28),a,{kind:`oval`,fillStyle:`bold`,dash:`none`})])});return[...F(t,`Six weeks to launch`),...r,...i,R([t.point(n(2),138),t.point(n(2),448)],{color:q,strokeWidth:2,dash:`dashed`}),P(t.rect(n(2)-60,452,120,26),`today`,t.font(14),{color:q}),L(t.rect(852,378,36,36),U.red,{kind:`diamond`,fillStyle:`bold`}),P(t.rect(714,418,168,26),`Launch`,t.font(15),{align:`right`,color:B})]}function dr(e){let t=I(e),n=[{y:244,text:`KR1 — Signup to first board under 2 minutes`,progress:.7,pct:`70%`},{y:320,text:`KR2 — Week-one activation up 20%`,progress:.45,pct:`45%`},{y:396,text:`KR3 — 50 teams on the new flow`,progress:.2,pct:`20%`}].flatMap(({y:e,text:n,progress:r,pct:i})=>z([P(t.rect(72,e,540,44),n,t.font(19),{align:`left`}),L(t.rect(640,e+9,160,24),U.gray,{dash:`none`}),L(t.rect(640,e+9,160*r,24),U.green,{fillStyle:`bold`,dash:`none`}),P(t.rect(812,e+2,76,38),i,t.font(18),{align:`left`,color:B})]));return[...F(t,`This quarter's OKRs`),L(t.rect(72,144,816,62),U.blue,{label:`Objective — Make onboarding effortless`,fontSize:t.font(22)}),...n]}function fr(e){let t=I(e);return[...F(t,`The problem we solve`),...z([L(t.rect(72,150,384,320),U.red,{fillStyle:`outline`}),P(t.rect(96,174,336,40),`The problem`,t.font(26),{align:`left`}),P(t.rect(96,228,336,220),`Status lives in six tools
-Standups eat the morning
-Nobody trusts the roadmap`,t.font(19),{align:`left`,valign:`top`,lineHeight:2,color:B})]),...z([L(t.rect(504,150,384,320),U.green,{fillStyle:`outline`}),P(t.rect(528,174,336,40),`Our solution`,t.font(26),{align:`left`}),P(t.rect(528,228,336,220),`One board for plans and talk
-Status that writes itself
-A roadmap anyone can read`,t.font(19),{align:`left`,valign:`top`,lineHeight:2,color:B})]),qt(t.point(462,310),t.point(498,310),5)]}function pr(e){let t=I(e),n=[{d:340,fill:U.blue},{d:230,fill:U.teal},{d:120,fill:U.green}].map(({d:e,fill:n})=>L(t.rect(330-e/2,480-e,e,e),n,{kind:`ellipse`})),r=[{y:190,fill:U.blue,value:`TAM — $4.2B`,caption:`everyone with the problem`},{y:268,fill:U.teal,value:`SAM — $600M`,caption:`who we can reach`},{y:346,fill:U.green,value:`SOM — $40M`,caption:`a realistic first bite`}].flatMap(({y:e,fill:n,value:r,caption:i})=>z([L(t.rect(560,e+4,22,22),n,{kind:`ellipse`,fillStyle:`bold`}),P(t.rect(596,e,292,30),r,t.font(22),{align:`left`}),P(t.rect(596,e+34,292,26),i,t.font(15),{align:`left`,color:K})]));return[...F(t,`How big is this?`),...n,...r]}function mr(e){let t=I(e),n=[{x:72,name:`Free`,price:`$0`,features:`3 boards
-Core shapes
-PNG export`,highlight:!1},{x:356,name:`Pro`,price:`$12`,features:`Unlimited boards
-AI assistant
-Every export`,highlight:!0},{x:640,name:`Team`,price:`$49`,features:`Shared spaces
-Admin controls
-Priority help`,highlight:!1}].flatMap(({x:e,name:n,price:r,features:i,highlight:a})=>{let o=[L(t.rect(e,156,248,314),a?U.blue:U.gray,{fillStyle:`outline`}),P(t.rect(e+24,180,200,34),n,t.font(22),{align:`left`}),P(t.rect(e+24,218,200,60),r,t.font(44),{align:`left`}),P(t.rect(e+26,240,200,60),`per person / month`,t.font(13),{align:`right`,valign:`bottom`,color:K}),P(t.rect(e+24,306,200,150),i,t.font(17),{align:`left`,valign:`top`,lineHeight:2,color:B})];return a&&o.push(en(t.rect(e+50,138,148,30),U.yellow,`MOST POPULAR`,t.font(12),{labelColor:$t})),z(o)});return[...F(t,`Pick a plan`),...n]}function hr(e){let t=I(e);return[...F(t,`Where the line is going`),Kt(t.rect(72,150,536,300),`area`,[[``,`MRR`],[`Jan`,`41`],[`Feb`,`58`],[`Mar`,`76`],[`Apr`,`97`],[`May`,`128`],[`Jun`,`164`]],t.font(12),{showLegend:!1,numberFormat:`currency`,showValues:!0}),...[{value:`4.1×`,caption:`revenue in six months`},{value:`112%`,caption:`net revenue retention`},{value:`$0`,caption:`spent on paid acquisition`}].flatMap(({value:e,caption:n},r)=>{let i=168+r*100;return z([P(t.rect(648,i,240,56),e,t.font(40),{align:`left`}),P(t.rect(648,i+54,240,30),n,t.font(15),{align:`left`,color:K})])})]}function gr(e){let t=I(e);return[...F(t,`How we sit in the market`),Kt(t.rect(96,146,768,330),`quadrant`,[[``,`x`,`y`],[`Us`,`0.78`,`0.82`],[`Legacy suite`,`0.24`,`0.74`],[`Sticky-note app`,`0.8`,`0.26`],[`Docs and slides`,`0.34`,`0.22`]],t.font(13),{quadrantLabels:[`Where we play`,`Heavy and slow`,`Good enough`,`Fast but shallow`],xTitle:`Hard to start → Open and draw`,yTitle:`One meeting → The whole workflow`})]}function _r(e){let t=I(e),n=[{icon:`circle-check`,text:`Ship the collaboration layer`},{icon:`circle-check`,text:`Hire two engineers and a designer`},{icon:`circle-check`,text:`Reach $500k ARR before the next round`}].flatMap(({icon:e,text:n},r)=>{let i=300+r*52,a=22*t.unit,o=t.point(72,i+4);return z([J({x:o.x,y:o.y},a,e,{color:`#2f9e44`}),P(t.rect(108,i,380,34),n,t.font(17),{align:`left`,color:B})])});return[...F(t,`The ask`),P(t.rect(72,158,420,96),`$2.5M`,t.font(76),{align:`left`}),P(t.rect(72,250,420,34),`seed round · 18 months of runway`,t.font(19),{align:`left`,color:K}),...n,Kt(t.rect(536,152,352,300),`donut`,[[``,`Share`],[`Engineering`,`55`],[`Go to market`,`30`],[`Everything else`,`15`]],t.font(12),{showValues:!0,numberFormat:`percent`})]}function vr(e){let t=I(e),n=[{x:136,y:146,fill:U.green,title:`Quick wins`,align:`left`},{x:491,y:146,fill:U.blue,title:`Big bets`,align:`right`},{x:136,y:299,fill:U.gray,title:`Fill-ins`,align:`left`},{x:491,y:299,fill:U.red,title:`Money pits`,align:`right`}].flatMap(({x:e,y:n,fill:r,title:i,align:a})=>[L({...t.rect(e,n,710/2,306/2)},r,{dash:`none`,opacity:.35}),P(t.rect(e+(a===`left`?16:-16),n+10,710/2-32,26),i,t.font(15),{align:a,color:B})]),r=96*t.unit,i=[{x:190,y:176,rot:-3,fill:U.green,text:`Ship this week`},{x:604,y:190,rot:4,fill:U.blue,text:`The big rewrite`},{x:236,y:322,rot:2,fill:U.yellow,text:`Nice to have`},{x:640,y:336,rot:-5,fill:U.red,text:`Kill it`}].map(({x:e,y:n,rot:i,fill:a,text:o})=>H(t.point(e,n),r,o,t.font(14),i,a));return[...F(t,`Where to spend the effort`),...n,R([t.point(120,299),t.point(868,299)],{strokeWidth:2,endArrow:!0,opacity:.5}),R([t.point(491,468),t.point(491,124)],{strokeWidth:2,endArrow:!0,opacity:.5}),...i,P(t.rect(692,466,160,26),`more effort`,t.font(14),{align:`right`,color:K}),P(t.rect(503,112,160,26),`more impact`,t.font(14),{align:`left`,color:K})]}function yr(e){let t=I(e),n=[{x:72,fill:U.green,icon:`circle-check`,title:`In scope`,body:`Shared inbox
-Weekly digest
-Slack alerts`},{x:350,fill:U.red,icon:`circle-slash`,title:`Not this time`,body:`Mobile app
-Custom roles
-SSO`},{x:628,fill:U.orange,icon:`triangle-alert`,title:`Watch out for`,body:`Search rewrite lands late
-One backend engineer`}].flatMap(({x:e,fill:n,icon:r,title:i,body:a})=>z([L(t.rect(e,232,260,186),n,{fillStyle:`outline`}),L(t.rect(e+18,250,224,32),`transparent`,{dash:`none`,label:i,fontSize:t.font(19),align:`left`,titleIcon:{source:`lucide`,name:r,placement:`inside`}}),P(t.rect(e+18,292,224,112),a,t.font(15),{align:`left`,valign:`top`,lineHeight:1.9,color:B})])),r=[`Owner · Ada`,`Ships · 14 August`,`Check-in · Fridays, 10:00`].map((e,n)=>en(t.rect(72+n*250,448,232,38),U.gray,e,t.font(15),{fillStyle:`pastel`}));return[...F(t,`Project kickoff`),L(t.rect(72,140,816,68),U.blue,{label:`Cut the time a team spends chasing status to zero`,fontSize:t.font(23),titleIcon:{source:`lucide`,name:`target`,placement:`inside`}}),...n,...r]}function br(e){let t=I(e),n=e=>186+e*140,r=[{label:`Hears of us`,doing:`A teammate shares a board`,mood:`smile`,fill:U.green},{label:`Signs up`,doing:`Three fields, no card`,mood:`smile`,fill:U.green},{label:`First board`,doing:`Stares at a blank canvas`,mood:`meh`,fill:U.yellow},{label:`Invites the team`,doing:`Nobody joins for a week`,mood:`frown`,fill:U.red},{label:`Renews`,doing:`Finance asks what it's for`,mood:`meh`,fill:U.yellow}].flatMap(({label:e,doing:r,mood:i,fill:a},o)=>{let s=n(o),c=38*t.unit,l=t.point(s+132/2,318);return[en(t.rect(s,148,132,36),U.blue,e,t.font(14),{fillStyle:`outline`}),P(t.rect(s,206,132,76),r,t.font(14),{valign:`top`,lineHeight:1.5,color:B}),J({x:l.x-c/2,y:l.y-c/2},c,i,{color:a===U.green?`#2f9e44`:a===U.red?`#e03131`:`#f08c00`})]}),i=[`Doing`,`Feeling`,`Fix it here`].map((e,n)=>P(t.rect(56,[212,306,384][n],110,30),e,t.font(15),{align:`right`,color:K})),a=104*t.unit;return[...F(t,`The trip they take`),R([t.point(176,292),t.point(888,292)],{strokeWidth:1.5,opacity:.15}),R([t.point(176,366),t.point(888,366)],{strokeWidth:1.5,opacity:.15}),...r,...i,H(t.point(n(2)+14,384),a,`Start from a template`,t.font(13),-3),H(t.point(n(3)+14,384),a,`Invite from the empty board`,t.font(13),4)]}function xr(e){let t=I(e);return[...F(t,`What the data says`),Kt(t.rect(72,150,530,310),`bar`,[[``,`This year`,`Last year`],[`Q1`,`12`,`8`],[`Q2`,`18`,`11`],[`Q3`,`24`,`16`],[`Q4`,`31`,`19`]],t.font(12),{showLegend:!0,showValues:!0}),P(t.rect(648,170,240,30),`The takeaway`,t.font(22),{align:`left`}),P(t.rect(648,212,240,200),`Say in one sentence what the chart proves, then stop.`,t.font(16),{align:`left`,valign:`top`,lineHeight:1.5,color:B})]}function Sr(e){let t=I(e),n=L(t.rect(96,220,180,90),U.blue,{label:`Client`,fontSize:t.font(20),titleIcon:{source:`lucide`,name:`monitor`,placement:`inside`}}),r=L(t.rect(390,220,180,90),U.teal,{label:`API`,fontSize:t.font(20),titleIcon:{source:`lucide`,name:`server`,placement:`inside`}}),i=L(t.rect(684,205,180,120),U.purple,{kind:`cylinder`,label:`Database`,fontSize:t.font(20)});return[...F(t,`How it fits together`),n,r,i,Gt(t.point(278,265),t.point(388,265),n,r,{label:`REST`,fontSize:t.font(14),strokeWidth:2.4}),Gt(t.point(572,265),t.point(682,265),r,i,{label:`SQL`,fontSize:t.font(14),strokeWidth:2.4}),P(t.rect(72,420,816,30),`Swap the boxes for your pieces. The arrows stay attached.`,t.font(16),{color:K})]}function Cr(e){let t=I(e);return[L(t.rect(-65,277,330,56),U.yellow,{fillStyle:`bold`,label:`THE ONE NUMBER`,fontSize:t.font(17),letterSpacing:.15,rotation:-90}),P(t.rect(180,150,600,200),`99.9%`,t.font(120)),P(t.rect(180,366,600,40),`what it measures, and why it matters`,t.font(20),{color:K}),R([t.point(420,352),t.point(540,352)],{color:q,strokeWidth:4})]}function wr(e){let t=I(e);return[L(t.rect(72,84,400,372),U.gray,{dash:`none`,label:`Drop an image
-or sketch here`,fontSize:t.font(18),labelColor:K}),P(t.rect(528,132,360,80),`Show, then tell`,t.font(36),{align:`left`}),R([t.point(530,224),t.point(660,224)],{color:V,strokeWidth:4}),P(t.rect(528,248,360,180),`Pair one strong visual with a few words. Say what it shows and why it matters. Nothing more.`,t.font(20),{align:`left`,valign:`top`,lineHeight:1.5,color:B})]}function Tr(e){let t=I(e),n=58*t.unit,r=46*t.unit,i=t.point(136,412);return[J(t.point(136,148),n,`quote`,{color:q,strokeWidth:2.4}),P(t.rect(132,232,700,156),`Add one line worth remembering, and give it the whole slide.`,t.font(38),{align:`left`,valign:`top`,lineHeight:1.4}),L({x:i.x,y:i.y,width:r,height:r},U.yellow,{kind:`ellipse`,label:`A`,fontSize:t.font(18)}),P(t.rect(196,410,400,28),`Ada Lovelace`,t.font(19),{align:`left`}),P(t.rect(196,436,400,26),`Head of platform, Initech`,t.font(15),{align:`left`,color:K})]}function Er(e){let t=I(e);return[an(t.rect(112,64,224,424),`phone`),W(t.rect(128,92,192,22),`statusbar`,{label:`9:41`,fontSize:t.font(11)}),W(t.rect(128,122,192,30),`heading`,{label:`Boards`,fontSize:t.font(18)}),W(t.rect(128,160,192,34),`search`,{label:`Search boards…`,fontSize:t.font(12)}),W(t.rect(128,206,192,116),`list`,{label:`Sprint board | Roadmap wall | Retro — Tuesday`,fontSize:t.font(12)}),W(t.rect(128,336,192,42),`button`,{label:`New board`,fill:U.blue,fontSize:t.font(13)}),W(t.rect(128,424,192,44),`tabbar`,{label:`Home | Search | You`,fontSize:t.font(11)}),P(t.rect(420,150,470,80),`In your pocket`,t.font(36),{align:`left`}),R([t.point(422,240),t.point(552,240)],{color:V,strokeWidth:4}),P(t.rect(420,264,460,160),`One tap from idea to board. Works offline, syncs the moment you're back.`,t.font(20),{align:`left`,valign:`top`,lineHeight:1.5,color:B})]}function Dr(e){let t=I(e);return[...F(t,`Where the work lives`),an(t.rect(72,148,520,312),`browser`),W(t.rect(84,196,96,252),`sidebar`,{label:`Boards | Team | Settings`,fontSize:t.font(11),fill:U.gray}),W(t.rect(192,194,200,30),`heading`,{label:`Roadmap wall`,fontSize:t.font(16)}),W(t.rect(428,196,152,28),`segmented`,{label:`Day | Week | Month`,fontSize:t.font(10),fill:U.blue}),...[{x:192,label:`Now`},{x:326,label:`Next`},{x:460,label:`Later`}].map(({x:e,label:n})=>W(t.rect(e,238,120,86),`card`,{label:n,fontSize:t.font(12)})),W(t.rect(192,340,388,100),`list`,{label:`Ship the fix | Call the pilot users | Write the launch post`,fontSize:t.font(12)}),P(t.rect(628,190,260,76),`One wall for the whole team`,t.font(25),{align:`left`,valign:`top`,lineHeight:1.3}),P(t.rect(628,288,260,160),`Everything the team is doing, on one wall anyone can open.`,t.font(17),{align:`left`,valign:`top`,lineHeight:1.5,color:B})]}function Or(e){let t=I(e),n=[{x:148,y:214,note:`The one action a new board needs`},{x:300,y:320,note:`Status, without asking anyone`},{x:452,y:396,note:`Everything else hides until it's wanted`}],r=36*t.unit;return[...F(t,`What to look at`),L(t.rect(72,150,520,300),`transparent`,{dash:`dashed`,label:`Drop a screenshot here`,fontSize:t.font(17),labelColor:K,opacity:.6}),...n.flatMap(({x:e,y:n,note:i},a)=>{let o=t.point(e,n),s=178+a*92;return[W({x:o.x,y:o.y,width:r,height:r},`stepbadge`,{label:String(a+1),fontSize:t.font(15),fill:U.yellow}),...z([W(t.rect(628,s,34,34),`stepbadge`,{label:String(a+1),fontSize:t.font(15),fill:U.yellow}),P(t.rect(674,s-4,214,84),i,t.font(16),{align:`left`,valign:`top`,lineHeight:1.5,color:B})])]})]}function kr(e){let t=I(e),n=(e,n,r)=>L(e,`transparent`,{dash:`dashed`,label:n,fontSize:t.font(r),labelColor:K,opacity:.6});return[...F(t,`The look we're after`),n(t.rect(72,148,462,312),`Drop the hero shot`,18),n(t.rect(552,148,336,148),`Reference`,15),n(t.rect(552,312,158,148),`Detail`,14),n(t.rect(730,312,158,148),`Colour`,14)]}function Ar(e){let t=I(e),n=124*t.unit,r=[{x:128,y:96,rot:-4,fill:U.blue,text:`What if…?`},{x:660,y:84,rot:3,fill:U.green,text:`Steal this idea`},{x:116,y:326,rot:5,fill:U.pink,text:`Open question`},{x:692,y:318,rot:-6,fill:U.teal,text:`Remember this`},{x:408,y:392,rot:2,fill:U.yellow,text:`Wild card`}].map(({x:e,y:r,rot:i,fill:a,text:o})=>H(t.point(e,r),n,o,t.font(15),i,a));return[L(t.rect(350,200,260,120),U.yellow,{kind:`ellipse`,fillStyle:`bold`,label:`The topic`,fontSize:t.font(26)}),...r]}function jr(e){let t=I(e),n=(e,n,r,i)=>L(t.rect(e,n,r,r),i,{kind:`star`,fillStyle:`bold`});return[n(186,122,44,U.yellow),n(744,104,32,U.pink),n(252,396,26,U.blue),P(t.rect(160,186,640,100),`Demo time`,t.font(72)),P(t.rect(280,300,400,48),`(everything will be fine)`,t.font(30),{fontFamily:nn,color:B}),H(t.point(656,360),132*t.unit,`Plan B: screenshots`,t.font(16),5)]}function Mr(e){let t=I(e),n=26*t.unit,r=t.point(772,102);return[L({x:r.x,y:r.y,width:n,height:n},U.pink,{kind:`heart`,fillStyle:`bold`}),P(t.rect(160,190,640,100),`Thank you!`,t.font(64)),...[`hello@example.com`,`koboyo.com`,`@yourhandle`].map((e,n)=>en(t.rect(196+n*200,306,184,40),U.gray,e,t.font(15),{fillStyle:`pastel`})),H(t.point(688,366),180*.85*t.unit,`Questions?`,t.font(20),-6)]}function Nr(e){let t=I(e),n=84*t.unit,r=t.point(480,132);return[J({x:r.x-n/2,y:r.y},n,`coffee`,{color:q}),P(t.rect(160,248,640,90),`Back in 10 minutes`,t.font(56)),P(t.rect(280,344,400,44),`stretch, refill, ignore Slack`,t.font(28),{fontFamily:nn,color:B}),W(t.rect(330,424,300,18),`progress`,{value:.35,fill:U.blue})]}var Pr=[{id:`blank`,name:`Blank`,category:`title`,build:()=>[]},{id:`cover`,name:`Title slide`,category:`title`,build:Nn},{id:`image-cover`,name:`Image title`,category:`title`,build:Ln},{id:`dark-cover`,name:`Midnight title`,category:`title`,build:In},{id:`terminal`,name:`Terminal`,category:`title`,build:Rn},{id:`section`,name:`Section divider`,category:`title`,build:Pn},{id:`big-statement`,name:`Big statement`,category:`title`,build:Fn},{id:`bullets`,name:`Title and bullets`,category:`content`,build:zn},{id:`agenda`,name:`Agenda`,category:`content`,build:Bn},{id:`two-columns`,name:`Two columns`,category:`content`,build:Vn},{id:`comparison`,name:`Comparison`,category:`content`,build:Hn},{id:`before-after`,name:`Before and after`,category:`content`,build:Un},{id:`metrics`,name:`Key numbers`,category:`content`,build:Wn},{id:`takeaways`,name:`Three takeaways`,category:`content`,build:Gn},{id:`checklist`,name:`Do and don't`,category:`content`,build:Kn},{id:`feature-list`,name:`Feature rundown`,category:`content`,build:qn},{id:`icon-grid`,name:`Icon grid`,category:`content`,build:Jn},{id:`bento`,name:`At a glance`,category:`content`,build:Xn},{id:`venn`,name:`Overlap`,category:`content`,build:Yn},{id:`changelog`,name:`What's new`,category:`content`,build:Zn},{id:`feature-table`,name:`Feature matrix`,category:`content`,build:er},{id:`timeline`,name:`Timeline`,category:`plan`,build:tr},{id:`kanban`,name:`Now, next, later`,category:`plan`,build:nr},{id:`progress`,name:`Status report`,category:`plan`,build:rr},{id:`okrs`,name:`OKRs`,category:`plan`,build:dr},{id:`swot`,name:`SWOT`,category:`plan`,build:ir},{id:`process`,name:`Process`,category:`plan`,build:ar},{id:`funnel`,name:`Funnel`,category:`plan`,build:or},{id:`pyramid`,name:`Pyramid`,category:`plan`,build:sr},{id:`cycle`,name:`Loop`,category:`plan`,build:cr},{id:`swimlanes`,name:`Swimlanes`,category:`plan`,build:lr},{id:`gantt`,name:`Week-by-week plan`,category:`plan`,build:ur},{id:`problem-solution`,name:`Problem, solution`,category:`pitch`,build:fr},{id:`market-size`,name:`Market size`,category:`pitch`,build:pr},{id:`traction`,name:`Traction`,category:`pitch`,build:hr},{id:`competition`,name:`Competitive map`,category:`pitch`,build:gr},{id:`ask`,name:`The ask`,category:`pitch`,build:_r},{id:`pricing`,name:`Pricing tiers`,category:`pitch`,build:mr},{id:`team`,name:`Meet the team`,category:`pitch`,build:Qn},{id:`testimonials`,name:`What people say`,category:`pitch`,build:$n},{id:`matrix`,name:`Effort vs impact`,category:`workshop`,build:vr},{id:`kickoff`,name:`Project kickoff`,category:`workshop`,build:yr},{id:`journey`,name:`Journey map`,category:`workshop`,build:br},{id:`chart`,name:`Chart`,category:`visual`,build:xr},{id:`diagram`,name:`Diagram starter`,category:`visual`,build:Sr},{id:`big-metric`,name:`One number`,category:`visual`,build:Cr},{id:`image-text`,name:`Image and text`,category:`visual`,build:wr},{id:`image-grid`,name:`Moodboard`,category:`visual`,build:kr},{id:`annotated`,name:`Annotated screenshot`,category:`visual`,build:Or},{id:`phone`,name:`Phone mockup`,category:`visual`,build:Er},{id:`browser`,name:`Browser mockup`,category:`visual`,build:Dr},{id:`quote`,name:`Quote`,category:`visual`,build:Tr},{id:`brainstorm`,name:`Brainstorm`,category:`fun`,build:Ar},{id:`demo`,name:`Demo time`,category:`fun`,build:jr},{id:`intermission`,name:`Break`,category:`fun`,build:Nr},{id:`closing`,name:`Thank you`,category:`fun`,build:Mr}];async function Fr(e,t,n,r){let i=r.theme.palette();return sn(await on(e,r,{bounds:t,padding:0,background:n(i),palette:i}))}var Ir=new Map;function Lr(e,t,n,r){let i=pe(),[a,o]=(0,X.useState)(()=>Ir.get(e)??null),s=(0,X.useRef)(t);s.current=t;let c=(0,X.useRef)(n);c.current=n;let l=(0,X.useRef)(r);return l.current=r,(0,X.useEffect)(()=>{let t=Ir.get(e);if(t){o(t);return}let n=!0,r={x:0,y:0,...c.current};return Fr(b(s.current()),r,e=>l.current?e.paperBg:e.bg,i).then(t=>{Ir.set(e,t),n&&o(t)}),()=>{n=!1}},[e,i]),a}function Rr(e){let{template:t,testId:n,cacheKey:r,aspect:i,canvas:a,onPaper:o,onPick:s}=e,c=Lr(r,()=>t.build({x:0,y:0,...a}),a,o);return(0,Q.jsxs)(`button`,{type:`button`,"data-testid":n,onClick:s,className:`group overflow-hidden rounded-lg text-left ring-1 ring-[var(--chrome-ring)] transition-shadow hover:ring-2 hover:ring-[var(--chrome-fg-500)]`,children:[(0,Q.jsx)(`div`,{className:`${i} w-full`,style:{background:o?`var(--paper-bg)`:`var(--canvas-bg)`},children:c&&(0,Q.jsx)(`img`,{src:c,alt:``,draggable:!1,className:`h-full w-full object-fill`})}),(0,Q.jsxs)(`div`,{className:`border-t border-[var(--chrome-ring)] px-2.5 py-1.5`,children:[(0,Q.jsx)(`div`,{className:`text-[12px] text-[var(--chrome-fg-800)]`,children:t.name}),t.blurb?(0,Q.jsx)(`div`,{className:`text-[11px] text-[var(--chrome-fg-500)]`,children:t.blurb}):null]})]})}function zr(e){let{open:t,onOpenChange:n,title:r,prefix:i,width:a,cardAspect:o,canvas:s,filters:c,templates:l,previewOnPaper:u,pinned:d,onPick:f}=e,p=(0,X.useRef)(null),[m,h]=(0,X.useState)(`all`),g=Te(),ee=l.filter(e=>m===`all`||e.category===m||d?.(e));return(0,Q.jsx)(Rt,{open:t,onOpenChange:n,children:(0,Q.jsxs)(It,{children:[(0,Q.jsx)(Ft,{className:`fixed inset-0 bg-gray-900/15`}),(0,Q.jsxs)(Lt,{ref:p,initialFocus:p,"data-overlay":!0,"data-testid":`${i}-dialog`,className:`scrollbar-slim fixed left-1/2 top-1/2 max-h-[82vh] ${a} -translate-x-1/2 -translate-y-1/2 overflow-y-auto overflow-x-hidden rounded-2xl bg-[var(--chrome-popup)] shadow-[0_24px_70px_rgba(0,0,0,0.22)] outline-none ring-1 ring-[var(--chrome-ring)]`,children:[(0,Q.jsxs)(`div`,{className:`sticky top-0 z-10 border-b border-[var(--chrome-ring)] bg-[var(--chrome-surface)] backdrop-blur`,children:[(0,Q.jsxs)(`div`,{className:`flex items-center justify-between px-5 pb-2.5 pt-3.5`,children:[(0,Q.jsx)(Bt,{className:`text-[15px] text-[var(--chrome-fg-900)]`,children:r}),(0,Q.jsx)(zt,{"aria-label":`Close`,className:`-mr-1.5 flex h-7 w-7 items-center justify-center rounded-full text-[var(--chrome-fg-400)] outline-none transition-colors hover:bg-[var(--chrome-divider)] hover:text-[var(--chrome-fg-600)]`,children:(0,Q.jsx)(Ye,{size:16,stroke:1.75})})]}),(0,Q.jsx)(`div`,{className:`scrollbar-slim flex gap-1.5 overflow-x-auto px-5 pb-3`,children:c.map(({id:e,label:t})=>(0,Q.jsx)(`button`,{type:`button`,"data-testid":`${i}-filter-${e}`,onClick:()=>h(e),className:`shrink-0 whitespace-nowrap rounded-full px-3 py-1 text-[12px] transition-colors ${m===e?`bg-[var(--chrome-accent)] text-white`:`text-[var(--chrome-fg-600)] ring-1 ring-[var(--chrome-ring)] hover:bg-[var(--chrome-hover)]`}`,children:t},e))})]}),(0,Q.jsx)(`div`,{className:`grid grid-cols-2 gap-3 p-5 sm:grid-cols-3`,children:ee.map(e=>(0,Q.jsx)(Rr,{template:e,testId:`${i}-${e.id}`,cacheKey:`${i}:${e.id}:${g}`,aspect:o,canvas:s,onPaper:u??!1,onPick:()=>{n(!1),f(e)}},e.id))})]})]})})}var Br=[{id:`all`,label:`All`},{id:`title`,label:`Title`},{id:`content`,label:`Content`},{id:`plan`,label:`Plan`},{id:`pitch`,label:`Pitch`},{id:`workshop`,label:`Workshop`},{id:`visual`,label:`Visual`},{id:`fun`,label:`Fun`}];function Vr(e){let{open:t,onOpenChange:n,onPick:r}=e;return(0,Q.jsx)(zr,{open:t,onOpenChange:n,title:`Pick a slide template`,prefix:`slide-template`,width:`w-[min(680px,92vw)]`,cardAspect:`aspect-video`,canvas:Yt,filters:Br,templates:Pr,previewOnPaper:!0,pinned:e=>e.id===`blank`,onPick:e=>r(e)})}var Hr=90,Ur=210;function Wr(e){let t=e.width/Math.max(1,e.height);return Math.round(x(248/t,Hr,Ur))}var Gr=new Map;function Kr(e,t,n,r){return e.box.x===t.x&&e.box.y===t.y&&e.box.width===t.width&&e.box.height===t.height&&e.fill===t.fill&&e.theme===r&&e.contents.length===n.length&&e.contents.every((e,t)=>e===n[t])}function qr(e){for(let t of Gr.keys())e.has(t)||Gr.delete(t)}function Jr(e){let{figure:t,shapes:n}=e,r=pe(),i=(0,X.useMemo)(()=>O(n,t),[n,t]),a=Te(),[o,s]=(0,X.useState)(()=>Gr.get(t.id)?.url??null);return(0,X.useEffect)(()=>{let e=Gr.get(t.id);if(e&&Kr(e,t,i,a)){s(e.url);return}let n=!0,o=setTimeout(()=>{Fr(i,w(t),e=>t.fill&&t.fill!==`transparent`?C(t.fill,e):e.bg,r).then(e=>{n&&(Gr.set(t.id,{box:{x:t.x,y:t.y,width:t.width,height:t.height},fill:t.fill,theme:a,contents:i,url:e}),s(e))})},e?300:0);return()=>{n=!1,clearTimeout(o)}},[t,i,a,r]),(0,Q.jsx)(`div`,{className:`w-full overflow-hidden rounded-[7px] bg-[var(--canvas-bg)]`,style:{height:Wr(t)},children:o&&(0,Q.jsx)(`img`,{src:o,alt:``,draggable:!1,className:`h-full w-full object-fill`})})}var Yr=`flex items-center gap-1 rounded-md bg-[var(--chrome-surface)] px-1.5 py-0.5 text-[10px] tabular-nums text-[var(--chrome-fg-600)] ring-1 ring-[var(--chrome-ring)] backdrop-blur-sm`,Xr=72,Zr=12;function Qr(e){let{containerRef:t}=e;return _(e=>e.rightPanel===`slides`)?(0,Q.jsx)($r,{containerRef:t}):null}function $r(e){let{containerRef:t}=e,{ai:n,embed:i}=g(),a=Se(`slide`),o=ee(),{store:s,viewportAnimation:c,history:l}=o,u=nt(),{beginTransaction:d,endTransaction:f}=l,p=_(e=>e.shapes),m=_(e=>e.viewport),h=_(e=>e.slidePickerOpen),v=_(e=>e.animateSlideId),y=_(e=>e.selectedIds),b=_(e=>e.viewMode),{addMany:x,sendToBack:S,replaceMany:C,removeShapes:ne,updateShape:E,setSelectedIds:de,setSlidesOpen:pe,setSlidePickerOpen:me,setNotesEditorId:he,setAnimateSlideId:ge,setAiOpen:ve,setPresentingIndex:ye,setViewport:xe,setExportDialog:we}=s.getState(),A=(0,X.useMemo)(()=>D(p),[p]),Te=(0,X.useMemo)(()=>st(p),[p]),Ee=(0,X.useMemo)(()=>oe(A).length,[A]),[j,M]=(0,X.useState)(null);(0,X.useEffect)(()=>{qr(new Set(A.map(e=>e.id)))},[A]);let De=Ut()===`docked`,Oe=(0,X.useCallback)(()=>{let e=t.current,n=e?.clientWidth??window.innerWidth,r=e?.clientHeight??window.innerHeight;return{width:Math.max(1,n-(De?272:0)),height:r}},[t,De]),ke=(0,X.useMemo)(()=>ue(A,m,Oe()),[A,m,Oe]);function N(e){c.animate(s.getState().viewport,fe(w(e),Oe(),Xr),xe)}(0,X.useEffect)(()=>{if(!v||y.size===0)return;let e=s.getState().shapes,t=ie(e,D(e),y);!t||t.id===v||ge(t.id)},[y,v,s,ge]);function Ae(e,t){let{width:n,height:r}=Oe(),i=te({x:n/2,y:r/2},m),a={...ae(A,i,p),slideOrder:e,slideLayout:t&&t.id!==`blank`?t.id:void 0},o=t?t.build(w(a)):[];d(),C(le(A,e)),x([a,...o]),S(new Set([a.id])),f(),de(new Set([a.id])),N(a)}function je(e){let t=s.getState().shapes,{clones:n,renumbered:r}=ce(t,A,e);d(),C(r),x(n),S(new Set([n[0].id])),f(),de(new Set([n[0].id])),N(n[0])}function Me(e){let t=s.getState().shapes;ne(se(t,A[e])),de(new Set)}function Ne(e,t){let n=s.getState().shapes,r=A[e],i=O(n,r),a={bounds:w(r),padding:0,background:r.fill,measurement:o.measurement},c=k(r,e);u(t===`png`?`downloadPng`:`downloadSvg`,i,{options:a,filename:c})}function Pe(e){Ee!==0&&ye(e??Math.max(0,ke))}function Fe(){if(!j)return;let e=j.value.trim();e!==j.initial&&E(j.id,{label:e}),M(null)}let Ie=Le({count:A.length,gap:Zr,disabled:b,onPress:e=>N(A[e]),onReorder:(e,t)=>C(re(A,e,t)),canDrag:()=>!j}),Re=v?A.findIndex(e=>e.id===v):-1,ze=Re>=0?A[Re]:void 0;return(0,Q.jsxs)(Wt,{width:272,testId:`slides-panel`,ariaLabel:`Slides`,onDismiss:()=>pe(!1),children:[ze?(0,Q.jsx)(Cn,{figure:ze,index:Re,total:A.length,viewMode:b,onBack:()=>ge(null),onGoToSlide:e=>{let t=A[e];t&&(ge(t.id),N(t))},onFocusSlide:N}):(0,Q.jsxs)(Q.Fragment,{children:[(0,Q.jsxs)(`div`,{className:`flex items-center justify-between py-2 pl-4 pr-2`,children:[(0,Q.jsxs)(`span`,{className:`text-[14px] text-[var(--chrome-fg-900)]`,"data-testid":`slides-count`,children:[`Slides (`,A.length,`)`]}),(0,Q.jsxs)(`div`,{className:`flex items-center`,children:[n&&!b&&(0,Q.jsx)(r,{label:`Generate with AI`,side:`bottom`,children:(0,Q.jsx)(`button`,{type:`button`,"aria-label":`Generate slides with AI`,"data-testid":`slides-ai-open`,onClick:()=>ve(!0),className:`flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-[var(--chrome-fg-600)] transition-[background-color,scale] hover:bg-[var(--chrome-hover)] active:scale-[0.96] coarse:h-11 coarse:w-11`,children:(0,Q.jsx)(Je,{size:16,stroke:1.75})})}),!b&&(0,Q.jsx)(r,{label:`Add slide`,side:`bottom`,children:(0,Q.jsx)(`button`,{type:`button`,"aria-label":`Add slide`,"data-testid":`slides-add`,onClick:()=>me(!0),className:`flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-[var(--chrome-fg-600)] transition-[background-color,scale] hover:bg-[var(--chrome-hover)] active:scale-[0.96] coarse:h-11 coarse:w-11`,children:(0,Q.jsx)(qe,{size:16,stroke:1.75})})}),i?null:(0,Q.jsx)(r,{label:`Export as PDF`,side:`bottom`,children:(0,Q.jsx)(`button`,{type:`button`,"aria-label":`Export slides as PDF`,"data-testid":`slides-export-pdf`,disabled:Ee===0,onClick:()=>we({format:`pdf`}),className:`${Nt} disabled:pointer-events-none disabled:text-[var(--chrome-fg-300)]`,children:(0,Q.jsx)(_e,{size:16,stroke:1.75})})}),(0,Q.jsx)(r,{label:`Hide slides`,side:`bottom`,children:(0,Q.jsx)(`button`,{type:`button`,"aria-label":`Hide slides`,"data-testid":`slides-close`,onClick:()=>pe(!1),className:Nt,children:(0,Q.jsx)(Ye,{size:16,stroke:1.75})})})]})]}),(0,Q.jsx)(`div`,{className:`mx-3 h-px bg-[var(--chrome-divider)]`}),(0,Q.jsxs)(`div`,{ref:Ie.listRef,"data-testid":`slides-list`,className:`flex flex-1 flex-col gap-3 overflow-y-auto p-3`,children:[A.length===0&&(0,Q.jsxs)(`div`,{className:`flex flex-col items-center gap-3 py-6 text-center`,children:[(0,Q.jsx)(`p`,{className:`text-[12px] leading-relaxed text-[var(--chrome-fg-400)]`,children:`No slides yet. Create a new slide or generate one with AI to get started.`}),!b&&(0,Q.jsxs)(`button`,{type:`button`,"data-testid":`slides-add-empty`,onClick:()=>me(!0),className:`flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] text-[var(--chrome-fg-600)] ring-1 ring-[var(--chrome-ring)] transition-colors hover:bg-[var(--chrome-rest)] hover:text-[var(--chrome-fg-900)]`,children:[(0,Q.jsx)(qe,{size:14,stroke:1.75}),`Add slide`]})]}),A.map((e,t)=>{let n=T(e,t),r=t===ke,o={onPresent:()=>Pe(t),onExportPng:i?null:()=>Ne(t,`png`),onExportSvg:i?null:()=>Ne(t,`svg`),onEmbed:a?()=>a(e.id):null,onDuplicate:()=>je(t),onRename:()=>M({id:e.id,initial:n,value:n}),onEditNotes:()=>he(e.id),onToggleSkip:()=>E(e.id,{slideSkipped:!e.slideSkipped||void 0}),onAddAbove:()=>Ae(t),onAddBelow:()=>Ae(t+1),onDelete:()=>Me(t)};return(0,Q.jsxs)(`div`,{ref:Ie.setItemRef(t),"data-testid":`slide-item-${t}`,className:`group relative shrink-0`,style:Ie.rowStyle(t),children:[(0,Q.jsx)(Mn,{index:t,actions:o,skipped:!!e.slideSkipped,disabled:b,children:(0,Q.jsxs)(`div`,{className:`relative cursor-pointer touch-none overflow-hidden rounded-lg ring-1 transition-shadow ${r?`ring-2 ring-[var(--chrome-fg-500)]`:`ring-[var(--chrome-ring)] hover:ring-black/25`}`,...Ie.rowHandlers(t),children:[(0,Q.jsx)(`div`,{className:e.slideSkipped?`opacity-40`:void 0,children:(0,Q.jsx)(Jr,{figure:e,shapes:p})}),(0,Q.jsxs)(`div`,{className:`absolute left-1.5 top-1.5 flex items-center gap-1`,children:[e.slideSkipped&&(0,Q.jsxs)(`div`,{"data-testid":`slide-skipped-${t}`,title:`Skipped — not shown when presenting`,className:Yr,children:[(0,Q.jsx)(Ce,{size:11,stroke:1.75}),`Skipped`]}),Te.has(e.id)&&(0,Q.jsxs)(`div`,{"data-testid":`slide-animated-${t}`,title:`Animated: plays in ${Te.get(e.id)} clicks`,className:Yr,children:[(0,Q.jsx)(be,{size:11,stroke:1.75}),Te.get(e.id)]})]}),j?.id===e.id?(0,Q.jsx)(`input`,{autoFocus:!0,onFocus:e=>e.target.select(),value:j.value,onChange:e=>M({...j,value:e.target.value}),onBlur:Fe,onKeyDown:e=>{e.stopPropagation(),e.key===`Enter`&&Fe(),e.key===`Escape`&&M(null)},onPointerDown:e=>e.stopPropagation(),className:`absolute inset-x-0 bottom-0 border-t border-[var(--chrome-ring)] bg-[var(--chrome-popup)] px-2.5 py-1.5 text-[12px] text-[var(--chrome-fg-800)] outline-none`}):(0,Q.jsxs)(`div`,{className:`absolute inset-x-0 bottom-0 flex items-center gap-1.5 border-t border-[var(--chrome-ring)] bg-[var(--chrome-surface)] px-2.5 py-1.5 text-[12px] text-[var(--chrome-fg-800)] backdrop-blur-sm`,title:n,onPointerDown:e=>e.stopPropagation(),onClick:()=>N(e),onDoubleClick:t=>{t.stopPropagation(),b||M({id:e.id,initial:n,value:n})},children:[(0,Q.jsx)(`span`,{className:`shrink-0 text-[var(--chrome-fg-400)]`,children:t+1}),(0,Q.jsx)(`span`,{className:`truncate`,children:n})]})]})}),(0,Q.jsx)(jn,{index:t,actions:o,skipped:!!e.slideSkipped,disabled:b})]},e.id)})]}),(0,Q.jsx)(`div`,{className:`border-t border-[var(--chrome-ring)] p-3`,children:(0,Q.jsx)(Dn,{disabled:Ee===0,onPresent:e=>Pe(e===`beginning`?0:void 0)})})]}),(0,Q.jsx)(Vr,{open:h,onOpenChange:me,onPick:e=>{Ae(A.length,e),De||pe(!1)}})]})}export{Qr as SlidesPanel};