koboyo 0.2.0 → 0.3.0

package/README.md

@@ -118,7 +118,12 @@ redrawn on every save, hand edits included.
 When `checkout.kbd` changes while the editor is open (an agent rewrote it), the
 drawing follows. If you have edited the drawing by hand, the editor asks
 whether to keep your edits or use the new code. Open a folder
-(`koboyo open docs`) to get a list of every diagram in it.
+(`koboyo open docs`, or `koboyo open .`) to get a list of every diagram in it.
+
+With no path, `koboyo open` starts a blank board in the current folder
+(`diagram.kby`). Give a name to pick it yourself: `koboyo open sketch` (or
+`koboyo open --name sketch`) creates `sketch.kby`, or opens it if it is already
+there. `koboyo open docs --name checkout-flow` puts it in `docs/`.
 
 An agent can hand the drawing to a person and wait for it to come back:
 

package/assets/editor/assets/IconCornerDownRight-BerbioFY.js

@@ -0,0 +1 @@
+import{t as e}from"./createReactComponent-9UsI5fmM.js";var t=e(`outline`,`corner-down-right`,`CornerDownRight`,[[`path`,{d:`M6 6v6a3 3 0 0 0 3 3h10l-4 -4m0 8l4 -4`,key:`svg-0`}]]);export{t};

package/assets/editor/assets/IconLink-ze4g4Lrj.js

@@ -0,0 +1 @@
+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`}]]);export{t};

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

@@ -0,0 +1 @@
+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"./IconCornerDownRight-BerbioFY.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=e(t(),1),b=n(),x=21,S=3;function C(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,y.useMemo)(()=>{if(n)return s(C).find(e=>e.id===n)},[n,C]),k=(0,y.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,b.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 l=a(e.shapes,D)??o(e.shapes[0],D),u=r!==null,d=e.shapes.some(e=>e.id===w);return(0,b.jsx)(`div`,{className:`absolute`,style:{left:l.x-(S+s*x)/t,top:l.y-S/t},children:(0,b.jsx)(`button`,{type:`button`,"data-testid":u?`build-pip`:`build-pip-add`,"data-follows":u&&i?`true`:void 0,title:u?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] ${u?`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)] ${d?`opacity-100`:`opacity-45 hover:opacity-100`}`}`,children:u?i?(0,b.jsx)(c,{size:11,stroke:2.25}):r:`+`})},n??g(e))})})}export{C as BuildPips};

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

@@ -0,0 +1 @@
+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{C as a,S as o,Yr as s,Zt as c,an as l,w as u,x as d}from"./slides-D9bnXqtf.js";import{r as f,t as p}from"./dom-PAoZruqo.js";import{t as m}from"./editable-target-BTLnvKNi.js";import{t as h}from"./use-key-held-38H1v73f.js";import{t as g}from"./createReactComponent-9UsI5fmM.js";import{a as _,r as v}from"./flow-start-BKN48uke.js";import{a as y,c as b,d as x,f as S,g as C,h as w,m as T,n as E,o as D,r as O,x as k,y as A}from"./tree-BbSzMkPL.js";import{t as j}from"./IconChevronLeft-BR0iwdRI.js";import{t as M}from"./IconChevronRight-DBDnxPYT.js";import{t as N}from"./IconFocusCentered-C5PcDeR0.js";import{t as P}from"./IconLink-ze4g4Lrj.js";import{t as F}from"./IconPencil-C5Y-Y4dC.js";import{t as I}from"./IconPlus-BbmieIBT.js";import{t as L}from"./IconX-AlbPkO_g.js";import{t as R}from"./IconPlayerPlayFilled-D4OODBX7.js";import{n as z}from"./core-CBnmD9hT.js";import{r as ee,t as B}from"./chrome-layout-B8YmHznO.js";import{c as V,i as H,l as U,n as W,o as te,s as G,t as ne}from"./flows-GGbkNqs8.js";import{a as K,i as q,n as re,o as ie,r as ae,t as oe}from"./flow-stage-fiF5Nggn.js";var se=g(`outline`,`rotate`,`Rotate`,[[`path`,{d:`M19.95 11a8 8 0 1 0 -.5 4m.5 5v-5h-5`,key:`svg-0`}]]),ce=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),le=6;function ue(e){let t=e instanceof Element?e:null;return!!(t?.closest(`[data-canvas-root]`)&&!t.closest(`[data-overlay]`))}function de(e){let t=(0,J.useRef)(e);t.current=e,(0,J.useEffect)(()=>{let e=null,n=new Set,r=t=>{n.add(t.pointerId),e=n.size===1&&t.button===0&&ue(t.target)?{id:t.pointerId,x:t.clientX,y:t.clientY}:null},i=r=>{n.delete(r.pointerId);let i=e;!i||i.id!==r.pointerId||(e=null,Math.hypot(r.clientX-i.x,r.clientY-i.y)<=le&&t.current(r))},a=t=>{n.delete(t.pointerId),e=null};return window.addEventListener(`pointerdown`,r,!0),window.addEventListener(`pointerup`,i,!0),window.addEventListener(`pointercancel`,a,!0),()=>{window.removeEventListener(`pointerdown`,r,!0),window.removeEventListener(`pointerup`,i,!0),window.removeEventListener(`pointercancel`,a,!0)}},[])}var Y=n(),X=10,Z=28,fe=.5,pe=4,me=24;function he(e){let{frame:t,flow:n,targets:o,viewport:s}=e,c=r(),f=i(e=>e.hoveredId),p=i(e=>e.flowEdit)??{},m=ee()===`docked`,h=n.steps.length;(0,J.useEffect)(()=>{let{store:e,viewportAnimation:n}=c,r=e.getState(),i=document.querySelector(`[data-canvas-root]`),a={width:(i?.clientWidth??window.innerWidth)-(m?B(`flow`):0),height:i?.clientHeight??window.innerHeight},o=l(t),s=u({x:o.x,y:o.y-Z},r.viewport),f=u({x:o.x+o.width,y:o.y+o.height},r.viewport),p=s.x>=0&&s.y>=0&&f.x<=a.width&&f.y<=a.height,h=f.x-s.x>=a.width*fe||f.y-s.y>=a.height*fe;p&&h||n.animate(r.viewport,d(o,a,64),r.setViewport)},[t.id,c,m]);let g=(0,J.useRef)(h);g.current=h,(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=c.store.getState(),o=a.shapes.find(e=>e.id===t.id);if(!i||o?.type!==`figure`)return;let s=z(a.shapes,o).find(e=>e.id===i);if(!s)return;e.preventDefault(),e.stopPropagation(),ge();let l=w({selected:a.flowEdit?.picking},g.current);if(l!==null){x(c,t.id,n.id,l,s);return}if(a.flowEdit?.picking!=null&&a.patchFlowEdit({picking:null}),e.shiftKey){b(c,t.id,n.id,s);return}D(c,t.id,n.id,s)};return window.addEventListener(`pointerdown`,e,!0),()=>window.removeEventListener(`pointerdown`,e,!0)},[c,t.id,n.id]),de(e=>{let r=c.store.getState(),i=r.shapes.find(e=>e.id===t.id),o=document.querySelector(`[data-canvas-root]`)?.getBoundingClientRect();if(!i||!o)return;let s=a({x:e.clientX-o.left,y:e.clientY-o.top},r.viewport),u=l(i);s.x>=u.x-X&&s.x<=u.x+u.width+X&&s.y>=u.y-Z&&s.y<=u.y+u.height+X||S(c,t.id,n.id)});let[_,v]=(0,J.useState)(!1);(0,J.useEffect)(()=>{let e=e=>v(e.shiftKey);return window.addEventListener(`keydown`,e),window.addEventListener(`keyup`,e),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`keyup`,e)}},[]);let y=new Map(o.map(e=>[e.id,e])),E=f?y.get(f):void 0,O=C(p,h),k=w(p,h),A=w({selected:p.picking},h),j=T(p,h),M=w({selected:p.hovered},h),N=W(t.flows??[],n.id),P=N?.flow.steps[N.index],F=n.steps[O-1]?.target,I=new Map(o.map(e=>[e.id,H(o,e)])),L=E&&(A!==null||E.id!==F||_)?E:null,R=L?{id:L.id,number:_e(A,_?j:null,O)}:null,U=[...new Set([M,k])].flatMap(e=>e===null?[]:V(n.steps[e]));return(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(ye,{frame:t,viewport:s}),P&&V(P).flatMap(e=>{let t=y.get(e);return t?[(0,Y.jsx)(Oe,{shape:t,viewport:s,hint:h===0},e)]:[]}),[...new Set(U)].flatMap(e=>{let t=y.get(e);return t?[(0,Y.jsx)(`div`,{"data-testid":`flow-step-ring`,className:`pointer-events-none absolute rounded-md ring-[1.5px] ring-[color-mix(in_srgb,var(--chrome-fg-900)_35%,transparent)]`,style:K(t,s,5)},e)]:[]}),L&&(0,Y.jsx)(`div`,{"data-testid":`flow-add-hint`,"aria-label":ve(A,_?j:null,O,h),className:`pointer-events-none absolute rounded-md ring-[1.5px] ring-[var(--canvas-selection)]`,style:K(L,s,5)}),(0,Y.jsx)(Se,{flow:n,byId:y,viewport:s,slot:O}),(0,Y.jsx)(Ce,{flow:n,targets:o,fork:P,viewport:s}),(0,Y.jsx)(Ee,{flow:n,byId:y,viewport:s,selected:k,names:I,ghost:R,onSelect:e=>c.store.getState().patchFlowEdit({selected:e}),onDrop:(e,r)=>x(c,t.id,n.id,e,r)}),(0,Y.jsx)(be,{picking:A,slot:O,count:h})]})}function ge(){let e=document.activeElement;e instanceof HTMLElement&&m(e)&&e.blur()}function _e(e,t,n){return e===null?t===null?n+1:t+1:e+1}function ve(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 ye(e){let{frame:t,viewport:n}=e,r=l(t),i=u({x:r.x-X,y:r.y-Z},n),a=u({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-[1.5px] ring-[color-mix(in_srgb,var(--chrome-fg-900)_22%,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 be(e){let{picking:t,slot:n,count:r}=e;return t===null?n<r?(0,Y.jsx)(Q,{text:`Click a box for step ${n+1}`,escape:!0}):null:(0,Y.jsx)(Q,{text:`Click the box step ${t+1} should light`,escape:!0})}function Q(e){let{text:t,escape:n}=e;return(0,Y.jsxs)(`p`,{"data-testid":`flow-board-hint`,className:`pointer-events-none absolute bottom-6 left-1/2 z-30 flex -translate-x-1/2 items-center gap-1.5 whitespace-nowrap rounded-lg bg-[var(--chrome-accent)] px-2.5 py-1.5 text-[12px] text-white shadow-lg`,children:[t,n&&(0,Y.jsx)(`kbd`,{className:`rounded px-1 font-mono text-[10.5px] ring-1 ring-white/30`,children:`esc`})]})}function xe(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 Se(e){let{flow:t,byId:n,viewport:i,slot:a}=e,o=r(),c=t.steps.slice(1).flatMap((e,r)=>{let i=t.steps[r],a=xe(i,e,n);return a?[{arrow:a,slot:r+1}]:[]}),l=new Map;for(let{arrow:e}of c)l.set(e.id,(l.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-((l.get(e.id)??1)-1)/2)*me,c=u(s(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-4 w-4 -translate-x-1/2 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full ring-1 transition-colors ${p?`bg-[var(--chrome-fg-900)] text-[var(--canvas-bg)] ring-[var(--chrome-fg-900)]`:`bg-[var(--chrome-popup)] text-[var(--chrome-fg-600)] ring-[var(--chrome-input-hover)] hover:text-[var(--chrome-fg-900)]`}`,style:{left:c.x+r,top:c.y+(f?16:0)},onPointerDown:e=>e.stopPropagation(),onClick:()=>o.store.getState().patchFlowEdit({slot:t,picking:null}),children:(0,Y.jsx)(I,{size:9,stroke:2.5})},`${e.id}-${t}`)})})}function Ce(e){let{flow:t,targets:n,fork:i,viewport:a}=e,o=r(),s=[...y(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);if(!r)return null;let i=H(n,r),s=u(t.point,a),c=u(we(r,t.point),a),l=Math.hypot(c.x-s.x,c.y-s.y),d=Math.atan2(c.y-s.y,c.x-s.x);return(0,Y.jsxs)(`span`,{children:[l>1&&(0,Y.jsx)(`span`,{"aria-hidden":!0,"data-testid":`flow-loose-gap`,className:`pointer-events-none absolute z-20 h-0 origin-left border-t-[1.5px] border-dashed border-[var(--flow-warn)]`,style:{left:s.x,top:s.y-.75,width:l,transform:`rotate(${d}rad)`}}),(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 outline-none`,style:{left:(s.x+c.x)/2,top:(s.y+c.y)/2},onPointerDown:e=>e.stopPropagation(),onClick:()=>O(o,e),children:[(0,Y.jsx)(`span`,{"aria-hidden":!0,className:`h-[9px] w-[9px] rounded-full bg-[var(--canvas-bg)] shadow-[inset_0_0_0_2px_var(--flow-warn)] transition-transform group-hover/loose:scale-125`}),(0,Y.jsxs)(`span`,{className:`pointer-events-none absolute left-1/2 top-[18px] flex h-[22px] -translate-x-1/2 items-center gap-1 whitespace-nowrap rounded-md bg-[var(--chrome-popup)] px-2 text-[11px] font-medium text-[var(--chrome-fg-800)] opacity-0 shadow-md ring-1 ring-[var(--chrome-ring)] transition-opacity group-hover/loose:opacity-100 group-focus-visible/loose:opacity-100`,children:[(0,Y.jsx)(P,{size:11,stroke:2}),`Attach`]})]})]},`${e.arrow.id}-${t.end}`)}))})}function we(e,t){let n=l(e);return{x:Math.min(Math.max(t.x,n.x),n.x+n.width),y:Math.min(Math.max(t.y,n.y),n.y+n.height)}}function Te(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 Ee(e){let{flow:t,byId:n,viewport:r,selected:i,names:a,ghost:o,onSelect:s,onDrop:c}=e,[l,u]=(0,J.useState)(null),d=ie(t),f=q(t),p=new Set(n.keys()),m=(e,t)=>{if(e.button!==0)return;e.stopPropagation(),e.preventDefault(),ge();let n=e.currentTarget.closest(`[data-canvas-root]`)?.getBoundingClientRect(),r={left:n?.left??0,top:n?.top??0};e.currentTarget.setPointerCapture(e.pointerId),u({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})},h=e=>{if(!l||l.pointerId!==e.pointerId)return;let t=Math.hypot(e.clientX-l.startX,e.clientY-l.startY),n=l.dragging||t>pe;u({...l,x:e.clientX-l.origin.left,y:e.clientY-l.origin.top,dragging:n,over:n?Te(e.clientX,e.clientY,p):null})},g=e=>{if(!l||l.pointerId!==e.pointerId)return;if(u(null),!l.dragging){s(l.index);return}let r=l.over?n.get(l.over):void 0;r&&r.id!==t.steps[l.index]?.target&&c(l.index,r)},_=l?.over?n.get(l.over):void 0,v=_&&l&&_.id!==t.steps[l.index]?.target?_:null,y=new Map(d);return o&&!l&&!y.has(o.id)&&y.set(o.id,[]),(0,Y.jsxs)(Y.Fragment,{children:[v&&l&&(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(`div`,{"data-testid":`flow-badge-drop`,className:`pointer-events-none absolute rounded-md bg-[color-mix(in_srgb,var(--canvas-selection)_6%,transparent)] ring-[1.5px] ring-[var(--canvas-selection)]`,style:K(v,r,5)}),(0,Y.jsx)(Q,{text:`Step ${l.index+1} moves to ${a.get(v.id)??`this box`}`})]}),[...y].map(([e,a])=>{let c=n.get(e);if(!c)return null;let d=ae(c,r);return(0,Y.jsxs)(`span`,{"data-overlay":!0,className:`absolute z-20 flex items-center gap-1 ${c.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:[a.map(e=>{let n=e-1,r=l?.dragging&&l.index===n,a=i===n;return(0,Y.jsx)(`button`,{type:`button`,"data-testid":`flow-step-badge`,"data-selected":a||void 0,"aria-label":`Step ${e}: ${t.steps[n]?.title??``}`,"aria-pressed":a,title:`Click to select · drag onto another box to change it`,className:`flex h-5 min-w-5 cursor-grab touch-none items-center justify-center rounded-full px-1 text-[11px] font-semibold tabular-nums transition-colors active:cursor-grabbing ${De(f.has(e),a)} ${r?`opacity-35`:``}`,onPointerDown:e=>m(e,n),onPointerMove:h,onPointerUp:g,onPointerCancel:()=>u(null),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),s(n))},children:e},e)}),o?.id===e&&!l&&(0,Y.jsx)(`span`,{"aria-hidden":!0,"data-testid":`flow-add-ghost`,className:`pointer-events-none flex h-5 min-w-5 items-center justify-center rounded-full bg-[var(--canvas-bg)] px-1 text-[11px] font-semibold tabular-nums text-[var(--chrome-fg-500)] shadow-[inset_0_0_0_1.5px_var(--chrome-fg-400)]`,children:o.number})]},e)}),l?.dragging&&(0,Y.jsx)(`span`,{"aria-hidden":!0,"data-testid":`flow-badge-ghost`,className:`pointer-events-none absolute z-30 flex h-6 min-w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--flow-accent)] px-1.5 text-[12px] font-semibold tabular-nums text-white shadow-[0_6px_14px_rgba(0,0,0,0.25)]`,style:{left:l.x,top:l.y},children:l.index+1})]})}function De(e,t){return t?`text-white ${e?`bg-[var(--flow-fail)]`:`bg-[var(--flow-accent)]`}`:e?`bg-[var(--canvas-bg)] text-[var(--flow-fail)] shadow-[inset_0_0_0_1.5px_var(--flow-fail)] hover:bg-[color-mix(in_srgb,var(--flow-fail)_10%,var(--canvas-bg))]`:`bg-[var(--canvas-bg)] text-[var(--flow-accent)] shadow-[inset_0_0_0_1.5px_var(--flow-accent)] hover:bg-[color-mix(in_srgb,var(--flow-accent)_10%,var(--canvas-bg))]`}function Oe(e){let{shape:t,viewport:n,hint:r}=e,i=ae(t,n),a=K(t,n,4);return(0,Y.jsxs)(`span`,{className:`pointer-events-none`,children:[(0,Y.jsx)(`span`,{"data-testid":`flow-fork-marker`,className:`absolute z-20 flex h-5 w-5 -translate-x-full -translate-y-full items-center justify-center rounded-full bg-[var(--canvas-bg)] text-[var(--flow-accent)] shadow-[inset_0_0_0_1.5px_var(--flow-accent)]`,style:{left:i.x-2,top:i.y-2},children:(0,Y.jsx)(k,{size:11,stroke:2})}),r&&(0,Y.jsx)(`span`,{className:`absolute z-20 -translate-x-1/2 whitespace-nowrap rounded-md bg-[var(--chrome-accent)] px-2 py-1 text-[11px] text-white shadow-md`,style:{left:a.left+a.width/2,top:a.top+a.height+6},children:`Click where it goes next`})]})}var ke=2600,Ae=.55,je=1.1;function Me(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?B(t):0)),height:Math.max(1,i-Pe)}}var Ne={call:`Call`,async:`Fire and forget`,reply:`Reply`},Pe=150;function Fe(e){let{frame:t,flow:n,targets:a,step:s,viewport:u}=e,f=r(),{store:p,viewportAnimation:m}=f,g=i(e=>e.rightPanel),_=ee()===`docked`,y=n.steps.length,b=Math.min(Math.max(s,0),Math.max(y-1,0)),x=n.steps[b],S=(0,J.useMemo)(()=>new Map(a.map(e=>[e.id,e])),[a]),C=(0,J.useMemo)(()=>x?V(x).flatMap(e=>S.get(e)??[]):[],[x,S]),w=(0,J.useMemo)(()=>{let e=b>0?n.steps[b-1]:void 0;return e?V(e).flatMap(e=>S.get(e)??[]):[]},[n.steps,b,S]),T=i(e=>e.flowPlay?.trail),D=i(e=>e.viewMode),O=T?.[T.length-1],k=O?t.flows?.find(e=>e.id===O.flowId)?.name:void 0,[j,M]=(0,J.useState)(!1),[N,P]=(0,J.useState)(()=>d(l(t),Me(_,g),64).zoom<Ae),F=e=>{let r=Math.min(Math.max(e,0),y-1);p.getState().setFlowPlay({frameId:t.id,flowId:n.id,step:r,trail:T})},I=()=>{!O||!T||(M(!1),p.getState().setFlowPlay({frameId:t.id,flowId:O.flowId,step:O.step,trail:T.slice(0,-1)}))},L=(0,J.useRef)(I);L.current=I;let R=()=>{p.getState().setFlowPlay(null)},z=t.flows??[],B={tabs:E(z).filter(e=>e.steps.length>0).map(e=>({id:e.id,name:e.name})),active:Ie(z,n.id,T),onTab:e=>{M(!1),p.getState().setFlowPlay({frameId:t.id,flowId:e,step:0})},onEdit:D?null:()=>A(f,t.id,n.id),onNew:D?null:()=>{p.getState().setFlowPlay(null),v(f,t.id)}},H=(0,J.useRef)(F);H.current=F;let U=(0,J.useRef)(R);U.current=R;let W=(0,J.useRef)(b);W.current=b;let G=()=>Me(_,g),K=(0,J.useRef)(G);if(K.current=G,(0,J.useEffect)(()=>{let e=p.getState();e.setSelectedIds(new Set),m.animate(e.viewport,d(l(t),K.current(),64),e.setViewport)},[t.id,p,m]),(0,J.useEffect)(()=>{let e=c(N?[...C,...w]:C);if(!e)return;let t=p.getState();if(N){let n=d(e,K.current(),120),r=Math.min(n.zoom,je),i=K.current();m.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=o(e,t.viewport,K.current(),96);n&&m.animate(t.viewport,n,t.setViewport)},[C,w,N,p,m]),(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`)&&h(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)},[]),de(()=>U.current()),(0,J.useEffect)(()=>{let e=e=>{e.pointerType===`touch`||e.button!==0||!ue(e.target)||(e.preventDefault(),e.stopPropagation())};return window.addEventListener(`pointerdown`,e,!0),()=>window.removeEventListener(`pointerdown`,e,!0)},[]),(0,J.useEffect)(()=>{if(!j)return;if(b>=y-1||(x?.branches?.length??0)>0){M(!1);return}let e=window.setTimeout(()=>H.current(W.current+1),ke);return()=>window.clearTimeout(e)},[j,b,y,x]),!x)return(0,Y.jsx)(Le,{flow:n,index:0,kind:`call`,autoplay:!1,onAutoplay:()=>{},onGo:()=>{},onStop:R,branches:[],onBranch:()=>{},returnName:k??null,onBack:I,follow:N,onFollow:P,switcher:B});let q=ne(t.flows??[],n.id);return(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(oe,{frameId:t.id,flow:n,targets:a,index:b,viewport:u,lead:q}),(0,Y.jsx)(Le,{flow:n,index:b,kind:te(a,[...q,...n.steps],q.length+b),autoplay:j,onAutoplay:M,onGo:F,onStop:R,branches:(x.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=>{M(!1),p.getState().setFlowPlay({frameId:t.id,flowId:e,step:0,trail:[...T??[],{flowId:n.id,step:b}]})},returnName:k??null,onBack:I,follow:N,onFollow:P,switcher:B})]})}function Ie(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=W(e,i);if(!t)return i;i=t.flow.id}return i}function Le(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,h=t.steps.length,g=t.steps[n],v=n>=h-1,y=`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)(ze,{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 ${g?.fails?`bg-[var(--flow-fail)]`:`bg-[var(--flow-accent)]`}`,children:h===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:g?.title||(h===0?`This flow has no steps yet`:`Untitled step`)}),g?.text&&(0,Y.jsx)(`p`,{"data-testid":`flow-step-text`,className:`mt-0.5 text-[13px] leading-relaxed text-[var(--chrome-fg-600)]`,children:g.text}),g&&(r!==`call`||g.payload||g.fails)&&(0,Y.jsxs)(`p`,{className:`mt-1 flex flex-wrap items-center gap-1.5 text-[11px] text-[var(--chrome-fg-500)]`,children:[g.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:Ne[r]}),g.payload&&(0,Y.jsxs)(`span`,{className:`rounded-full bg-[var(--chrome-rest)] px-2 py-0.5`,children:[`Carries `,g.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)(k,{size:12,stroke:2}),e.name]},e.id))]})]}),(0,Y.jsx)(`button`,{type:`button`,"aria-label":`Stop playing`,className:y,onClick:s,children:(0,Y.jsx)(L,{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)(_,{size:13,stroke:2}),u]}),(0,Y.jsx)(`span`,{"aria-hidden":!0,children:`/`})]}),(u||!m.tabs.some(e=>e.id===t.id)||!Re(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)(k,{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:h===0?`0 / 0`:`${n+1} / ${h}`}),(0,Y.jsxs)(`div`,{className:`flex items-center`,children:[(0,Y.jsx)(`button`,{type:`button`,"aria-label":`Previous step`,"data-testid":`flow-prev`,className:y,disabled:n===0&&!u,onClick:()=>n===0?d():o(n-1),children:(0,Y.jsx)(j,{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:`${y} ${f?`bg-[var(--chrome-active)] text-[var(--chrome-fg-900)]`:``}`,onClick:()=>p(!f),children:(0,Y.jsx)(N,{size:16,stroke:1.75})}),(0,Y.jsx)(`button`,{type:`button`,"aria-label":i?`Pause`:`Play automatically`,"data-testid":`flow-autoplay`,className:y,disabled:h<2,onClick:()=>{!i&&v&&o(0),a(!i)},children:i?(0,Y.jsx)(ce,{size:14}):(0,Y.jsx)(R,{size:14})}),v&&h>1?(0,Y.jsx)(`button`,{type:`button`,"aria-label":`Play again`,"data-testid":`flow-replay`,className:y,onClick:()=>o(0),children:(0,Y.jsx)(se,{size:15,stroke:1.75})}):(0,Y.jsx)(`button`,{type:`button`,"aria-label":`Next step`,"data-testid":`flow-next`,className:y,disabled:v,onClick:()=>o(n+1),children:(0,Y.jsx)(M,{size:16,stroke:2})})]})]})]})}function Re(e){return e.tabs.length>1||e.onEdit!==null}function ze(e){let{tabs:t,active:n,onTab:r,onEdit:i,onNew:a}=e.switcher;if(!Re(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)(I,{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)(F,{size:13,stroke:1.75}),`Edit`]})]})}var $=10,Be=28,Ve=.28;function He(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?z(a,u):[],[a,u]),f=u?.flows?.find(e=>e.id===l?.flowId),p=(0,J.useMemo)(()=>f?G(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)(Ue,{frame:u,viewport:t}),(0,Y.jsx)(Fe,{frame:u,flow:p,targets:d,step:s.step,viewport:t})]}):o?(0,Y.jsx)(he,{frame:u,flow:p,targets:d,viewport:t}):(0,Y.jsx)(We,{flow:p,targets:d,viewport:t})}function Ue(e){let{frame:t,viewport:n}=e,r=l(t),i=u({x:r.x-$,y:r.y-Be},n),a=u({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 We(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(V));t.steps.forEach((r,i)=>{let a=t.steps[i-1];if(a)for(let t of V(r))for(let r of V(a)){let i=U(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=>[f(e.id),p(`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:${Ve}!important}`:``].join(``)},[t.steps,n])}),(0,Y.jsx)(re,{numbers:ie(t),byId:i,viewport:r,current:null,failing:q(t)})]})}export{He as FlowLayer};

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

@@ -0,0 +1 @@
+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 ee}from"./editable-target-BTLnvKNi.js";import{t as b}from"./createReactComponent-9UsI5fmM.js";import{t as x}from"./IconAlertTriangle-CxPhYpe-.js";import{a as S,n as C,r as w}from"./flow-start-BKN48uke.js";import{n as T,r as E,t as D}from"./IconTrash-DbN_RxB7.js";import{_ as O,a as k,b as A,f as te,g as ne,h as j,i as re,l as ie,m as ae,p as oe,r as se,s as ce,t as M,u as le,v as N,x as P,y as F}from"./tree-BbSzMkPL.js";import{n as I}from"./useValueChanged-p8z-93L4.js";import{t as ue}from"./IconChevronLeft-BR0iwdRI.js";import{t as L}from"./IconChevronRight-DBDnxPYT.js";import{t as de}from"./IconCornerDownRight-BerbioFY.js";import{t as fe}from"./IconLink-ze4g4Lrj.js";import{t as R}from"./IconPencil-C5Y-Y4dC.js";import{t as z}from"./IconPlus-BbmieIBT.js";import{n as B,r as V,t as H}from"./MenuSubmenuTrigger-CpN67g09.js";import{n as pe,r as me,t as he}from"./use-drag-reorder-CTTvTwza.js";import{t as U}from"./IconSparkles-WDcg8BA9.js";import{t as W}from"./IconX-AlbPkO_g.js";import{t as ge}from"./IconPlayerPlayFilled-D4OODBX7.js";import{n as _e,r as ve,t as G}from"./core-CBnmD9hT.js";import{n as ye}from"./surface-Dke4SWpE.js";import{a as be}from"./chrome-C2RCq3SI.js";import"./chrome-layout-B8YmHznO.js";import{t as xe}from"./panel-shell-CG2aq4Ia.js";import{i as Se,n as Ce,s as we}from"./flows-GGbkNqs8.js";var Te=b(`outline`,`arrows-exchange`,`ArrowsExchange`,[[`path`,{d:`M7 10h14l-4 -4`,key:`svg-0`}],[`path`,{d:`M17 14h-14l4 4`,key:`svg-1`}]]),K=b(`outline`,`bolt`,`Bolt`,[[`path`,{d:`M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11`,key:`svg-0`}]]),q=b(`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`}]]),Ee=b(`outline`,`square-plus`,`SquarePlus`,[[`path`,{d:`M9 12h6`,key:`svg-0`}],[`path`,{d:`M12 9v6`,key:`svg-1`}],[`path`,{d:`M3 5a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14`,key:`svg-2`}]]),J=e(t(),1),De=`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)]`,Oe=`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`,ke=`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)]`,Ae=`inline-flex h-[18px] min-w-[18px] items-center justify-center rounded bg-[var(--chrome-popup)] px-1 font-mono text-[10.5px] text-[var(--chrome-fg-600)] shadow-[inset_0_0_0_1px_var(--chrome-input),0_1px_0_var(--chrome-input)]`,je=`hover:bg-[color-mix(in_srgb,var(--chrome-fg-900)_3%,transparent)]`,Me=`bg-[color-mix(in_srgb,var(--chrome-fg-900)_5%,transparent)]`,Ne=`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`,Y=n(),Pe=2e3,Fe=`mb-1.5 flex gap-2 rounded-lg bg-[color-mix(in_srgb,var(--chrome-fg-900)_4%,transparent)] py-2 pl-2.5 pr-2 text-[12px] leading-[1.45] text-[var(--chrome-fg-600)]`;function Ie(e){let{count:t,attached:n,onAttach:r,onSettled:i}=e,a=(0,J.useRef)(i);a.current=i;let o=t===0&&n;return(0,J.useEffect)(()=>{if(!o)return;let e=window.setTimeout(()=>a.current(),Pe);return()=>window.clearTimeout(e)},[o]),o?(0,Y.jsxs)(`div`,{"data-testid":`flow-loose-attached`,role:`status`,className:`${Fe} items-center`,children:[(0,Y.jsx)(I,{size:14,stroke:2,className:`shrink-0 text-[var(--chrome-fg-500)]`}),`Arrow attached`]}):t===0?null:(0,Y.jsx)(Le,{count:t,onAttach:r})}function Le(e){let{count:t,onAttach:n}=e,r=(0,J.useRef)(null);(0,J.useEffect)(()=>{let e=r.current;!e||window.matchMedia(`(prefers-reduced-motion: reduce)`).matches||e.animate([{opacity:0,transform:`translateY(-4px)`},{opacity:1,transform:`none`}],{duration:180,easing:`ease-out`})},[]);let i=t===1;return(0,Y.jsxs)(`div`,{ref:r,role:`status`,"data-testid":`flow-loose-banner`,className:`${Fe} items-start`,children:[(0,Y.jsx)(x,{size:14,stroke:2,className:`mt-px shrink-0 text-[var(--flow-warn)]`}),(0,Y.jsxs)(`span`,{className:`min-w-0 flex-1`,children:[(0,Y.jsx)(`b`,{className:`block font-medium text-[var(--chrome-fg-900)]`,children:i?`1 arrow isn't attached`:`${t} arrows aren't attached`}),`The hand-off can't follow `,i?`it`:`them`,`.`]}),(0,Y.jsx)(`button`,{type:`button`,"data-testid":`flow-attach-all`,className:`${Ne} h-7 shrink-0 px-2.5 text-[12px]`,onClick:n,children:i?`Attach`:`Attach all`})]})}var Re=`w-[1.5px] bg-[color-mix(in_srgb,var(--chrome-fg-900)_14%,transparent)]`,ze=`w-[1.5px] bg-[var(--flow-accent)]`,Be=`w-[1.5px] bg-[linear-gradient(color-mix(in_srgb,var(--chrome-fg-900)_14%,transparent),transparent)]`,X=`relative z-[1] flex h-[22px] min-w-[22px] shrink-0 items-center justify-center rounded-full px-1 text-[11px] font-semibold tabular-nums`,Ve=`shadow-[inset_0_0_0_1.5px_color-mix(in_srgb,var(--chrome-fg-900)_22%,transparent)]`,He=`${X} bg-[var(--chrome-popup)] text-[var(--chrome-fg-400)] shadow-[inset_0_0_0_1.5px_color-mix(in_srgb,var(--chrome-fg-900)_14%,transparent)]`,Ue=`${X} bg-[var(--chrome-popup)] text-[var(--chrome-fg-900)] shadow-[inset_0_0_0_1.5px_var(--chrome-fg-900)]`;function We(e){return e.picking?Ue:e.current?`${X} bg-[var(--flow-accent)] text-white`:e.selected?`${X} text-white ${e.fails?`bg-[var(--flow-fail)]`:`bg-[var(--chrome-accent)]`}`:e.fails?`${X} bg-[var(--chrome-popup)] text-[var(--flow-fail)] shadow-[inset_0_0_0_1.5px_var(--flow-fail)]`:`${X} bg-[var(--chrome-popup)] text-[var(--chrome-fg-700)] ${Ve} hover:shadow-[inset_0_0_0_1.5px_var(--chrome-fg-500)]`}function Ge(e){let{node:t,first:n,end:r,litAbove:i,litBelow:a}=e;return(0,Y.jsxs)(`span`,{className:`flex w-[22px] shrink-0 flex-col items-center`,children:[(0,Y.jsx)(`span`,{className:`h-2 shrink-0 ${n?`w-[1.5px]`:i?ze:Re}`}),t,(0,Y.jsx)(`span`,{className:`min-h-2 flex-1 ${r?Be:a?ze:Re}`})]})}var Ke=[{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}],qe=e=>Ke.find(t=>t.kind===e)?.label,Je=`${De} -mx-1.5 px-1.5 hover:ring-transparent focus:bg-transparent focus:ring-transparent`;function Ye(e){let{step:t,index:n,count:r,current:a,selected:o,picking:s,names:c,otherFlows:l,loose:u}=e,{rail:d,actions:p,grip:m,rowRef:h,rowStyle:g}=e,{onPlay:_,onChange:v,onMove:y,onRemove:ee,onNewPath:b}=p,[S,C]=(0,J.useState)(!1),[w,T]=(0,J.useState)(!1),E=(0,J.useRef)(null),D=t.kind??`call`,O=t.also??[],k=t.branches??[],A=new Map(l.map(e=>[e.id,e.name])),te=o||w||S,ne=te||!!t.text,j=S||!!t.payload,re=O.length>0||D!==`call`||j||k.length>0;return(0,Y.jsxs)(`li`,{ref:h,"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 pl-1 pr-1.5 transition-colors ${o||s?Me:je}`,style:g,onPointerDown:e=>{e.target.closest(`[data-step-insert]`)||p.onSelect()},onFocusCapture:e=>{e.target.closest(`[data-step-insert]`)||p.onSelect()},onPointerEnter:()=>p.onHover(!0),onPointerLeave:()=>p.onHover(!1),children:[(0,Y.jsx)(Xe,{index:n,onInsert:p.onInsertBefore}),(0,Y.jsx)(Ge,{first:d.first,end:d.end,litAbove:d.litAbove,litBelow:d.litBelow,node:(0,Y.jsx)(`span`,{"data-testid":`flow-step-grip-${n}`,title:`Drag to reorder`,className:`${We({selected:o,current:a,fails:!!t.fails,picking:s})} cursor-grab touch-none transition-shadow active:cursor-grabbing`,...m,children:s?(0,Y.jsx)(Te,{size:12,stroke:2}):n+1})}),(0,Y.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col gap-0.5 py-2 pr-6`,children:[(0,Y.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,Y.jsx)(`input`,{"aria-label":`Step title`,"data-testid":`flow-step-title-${n}`,className:`${Je} h-[22px] text-[13px] font-medium text-[var(--chrome-fg-900)]`,defaultValue:t.title,onBlur:e=>{e.target.value!==t.title&&v({title:e.target.value})},onKeyDown:e=>{if(e.key===`Enter`&&!e.shiftKey&&E.current){e.preventDefault(),e.stopPropagation(),E.current.focus();return}$(e)}},`t-${t.title}`),!o&&(0,Y.jsx)(Ze,{index:n,step:t,names:c,flowName:A,loose:u?.names??null})]}),ne&&(0,Y.jsx)(`textarea`,{ref:E,"aria-label":`What happens at this step`,"data-testid":`flow-step-text-${n}`,rows:1,className:`${Je} resize-none py-0 text-[12px] leading-[1.55] text-[var(--chrome-fg-500)] placeholder:text-[var(--chrome-fg-400)] focus:text-[var(--chrome-fg-800)] [field-sizing:content]`,placeholder:`Add a description`,defaultValue:t.text??``,onFocus:()=>T(!0),onBlur:e=>{T(!1);let n=e.target.value.trim();n!==(t.text??``)&&v({text:n})},onKeyDown:$},`d-${t.text??``}`),t.fails&&(0,Y.jsx)(`span`,{"data-testid":`flow-step-fails-${n}`,className:`text-[12px] leading-[1.55] text-[var(--flow-fail)]`,children:`Fails here`}),s&&(0,Y.jsxs)(`span`,{className:`mt-0.5 flex items-center gap-1.5 text-[12px] text-[var(--chrome-fg-700)]`,children:[`Click the box this step should light`,(0,Y.jsx)(`button`,{type:`button`,"aria-label":`Cancel`,title:`Cancel`,className:`inline-flex h-[18px] min-w-[18px] items-center justify-center rounded bg-[var(--chrome-popup)] px-1 font-mono text-[10.5px] text-[var(--chrome-fg-600)] shadow-[inset_0_0_0_1px_var(--chrome-input),0_1px_0_var(--chrome-input)] cursor-pointer hover:text-[var(--chrome-fg-900)]`,onClick:p.onCancelPick,children:`esc`})]}),o&&u&&(0,Y.jsxs)(`div`,{role:`status`,"data-testid":`flow-step-loose-${n}`,className:`mt-1 flex items-start gap-2 rounded-md bg-[color-mix(in_srgb,var(--flow-warn)_9%,transparent)] p-2 text-[12px] leading-[1.45] text-[var(--chrome-fg-600)]`,children:[(0,Y.jsx)(x,{size:14,stroke:2,className:`mt-px shrink-0 text-[var(--flow-warn)]`}),(0,Y.jsxs)(`span`,{className:`flex min-w-0 flex-1 flex-col items-start gap-1.5`,children:[`The arrow isn't attached to `,u.names,`, so the hand-off can't follow it.`,(0,Y.jsxs)(`button`,{type:`button`,"data-testid":`flow-step-attach-${n}`,className:`flex h-6 shrink-0 cursor-pointer items-center gap-1 rounded-md bg-[var(--chrome-popup)] px-2 font-medium text-[var(--chrome-fg-800)] shadow-[inset_0_0_0_1px_var(--chrome-input-hover)] transition-colors hover:bg-[var(--chrome-hover)]`,onClick:u.onAttach,children:[(0,Y.jsx)(fe,{size:12,stroke:2}),`Attach`]})]})]}),te&&re&&(0,Y.jsxs)(`div`,{className:`mt-1 flex flex-wrap gap-1`,"data-testid":`flow-step-chips-${n}`,children:[D!==`call`&&(0,Y.jsx)(tt,{kind:D,onPick:e=>v({kind:e}),trigger:(0,Y.jsxs)(f,{"data-testid":`flow-step-kind-${n}`,className:`${Z} cursor-pointer hover:bg-[var(--chrome-hover)]`,children:[qe(D),(0,Y.jsx)(i,{size:11,stroke:2,className:`text-[var(--chrome-fg-400)]`})]})}),j&&(0,Y.jsx)(et,{index:n,payload:t.payload,editing:S,onEdit:()=>C(!0),onDone:e=>{C(!1),e!==(t.payload??``)&&v({payload:e||void 0})}}),O.map(e=>(0,Y.jsx)($e,{icon:(0,Y.jsx)(z,{size:11,stroke:2}),label:c.get(e)??`Shape`,title:`Part of this step`,onRemove:()=>v({also:O.filter(t=>t!==e)})},e)),k.map(e=>(0,Y.jsx)($e,{testId:`flow-step-path-${n}`,icon:(0,Y.jsx)(P,{size:11,stroke:2}),label:A.get(e)??`Missing flow`,title:`Another path from here`,onRemove:()=>v({branches:k.filter(t=>t!==e)})},e))]})]}),(0,Y.jsx)(it,{index:n,count:r,step:t,hasPayload:j,paths:l.filter(e=>!k.includes(e.id)),onPlay:_,onPayload:()=>C(!0),onChange:v,onMove:y,onRemove:ee,onNewPath:b,onInsertBefore:p.onInsertBefore,onInsertAfter:p.onInsertAfter,onChangeBox:p.onChangeBox})]})}function Xe(e){let{index:t,onInsert:n}=e;return(0,Y.jsxs)(`button`,{type:`button`,"aria-label":`Add a step before step ${t+1}`,"data-testid":`flow-step-insert-${t}`,"data-step-insert":!0,className:`absolute inset-x-0 -top-[7px] z-10 flex h-3.5 cursor-pointer items-center gap-1.5 pl-[7px] opacity-0 transition-opacity hover:opacity-100 focus-visible:opacity-100`,onPointerDown:e=>e.stopPropagation(),onClick:n,children:[(0,Y.jsx)(`span`,{className:`flex h-4 w-4 items-center justify-center rounded-full bg-[var(--chrome-popup)] text-[var(--chrome-fg-600)] shadow-[inset_0_0_0_1px_var(--chrome-input-hover)]`,children:(0,Y.jsx)(z,{size:10,stroke:2.5})}),(0,Y.jsx)(`span`,{className:`rounded bg-[var(--chrome-popup)] px-1 text-[11.5px] text-[var(--chrome-fg-500)]`,children:`Insert a step`})]})}function Ze(e){let{index:t,step:n,names:i,flowName:a,loose:o}=e,s=[];if(n.kind===`async`&&s.push({key:`kind`,label:`Fire and forget`,icon:(0,Y.jsx)(K,{size:13,stroke:1.75})}),n.kind===`reply`&&s.push({key:`kind`,label:`Reply`,icon:(0,Y.jsx)(S,{size:13,stroke:1.75})}),n.payload&&s.push({key:`payload`,label:`Carries ${n.payload}`,icon:(0,Y.jsx)(q,{size:13,stroke:1.75})}),n.also?.length){let e=n.also.map(e=>i.get(e)??`Shape`).join(`, `);s.push({key:`also`,label:`With ${e}`,icon:(0,Y.jsx)(Ee,{size:13,stroke:1.75})})}if(n.branches?.length){let e=n.branches.map(e=>a.get(e)??`Missing flow`).join(`, `);s.push({key:`paths`,label:`Path to ${e}`,icon:(0,Y.jsx)(P,{size:13,stroke:1.75})})}return s.length===0&&!o?null:(0,Y.jsxs)(`span`,{className:`flex shrink-0 items-center gap-1.5 text-[var(--chrome-fg-400)]`,children:[s.map(e=>(0,Y.jsx)(r,{label:e.label,children:(0,Y.jsx)(`span`,{role:`img`,"aria-label":e.label,children:e.icon})},e.key)),o&&(0,Y.jsx)(r,{label:`The arrow isn't attached to ${o}`,children:(0,Y.jsx)(`span`,{role:`img`,"data-testid":`flow-step-loose-${t}`,"aria-label":`The arrow isn't attached to ${o}`,className:`text-[var(--flow-warn)]`,children:(0,Y.jsx)(x,{size:13,stroke:2})})})]})}var Z=`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)]`,Q=`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)]`,Qe=`min-w-[200px] p-1 outline-none ${ye.popup}`;function $e(e){let{label:t,icon:n,onRemove:r,testId:i,title:a,tone:o}=e;return(0,Y.jsxs)(`span`,{"data-testid":i,title:a,className:`${Z} 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,Y.jsx)(`span`,{className:`opacity-70`,children:n}),(0,Y.jsx)(`span`,{className:`max-w-[140px] truncate`,children:t}),(0,Y.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,Y.jsx)(W,{size:10,stroke:2})})]})}function et(e){let{index:t,payload:n,editing:r,onEdit:i,onDone:a}=e;return r?(0,Y.jsxs)(`span`,{className:`${Z} pr-1`,children:[(0,Y.jsx)(q,{size:11,stroke:2,className:`opacity-70`}),(0,Y.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,Y.jsxs)(`span`,{className:`${Z} pr-0.5`,"data-testid":`flow-step-payload-chip-${t}`,children:[(0,Y.jsx)(q,{size:11,stroke:2,className:`opacity-70`}),(0,Y.jsx)(`button`,{type:`button`,title:`What this step carries`,className:`max-w-[140px] cursor-text truncate`,onClick:i,children:n}),(0,Y.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,Y.jsx)(W,{size:10,stroke:2})})]})}function tt(e){let{kind:t,onPick:n,trigger:r}=e;return(0,Y.jsxs)(u,{children:[r,(0,Y.jsx)(d,{children:(0,Y.jsx)(p,{side:`bottom`,align:`start`,sideOffset:4,className:`z-50 outline-none`,children:(0,Y.jsx)(m,{"data-overlay":!0,className:`min-w-[220px] p-1`,children:(0,Y.jsx)(nt,{kind:t,onPick:n})})})})]})}function nt(e){let{kind:t,onPick:n}=e;return(0,Y.jsx)(Y.Fragment,{children:Ke.filter(e=>e.pickable).map(e=>(0,Y.jsxs)(s,{"data-testid":`flow-kind-${e.kind}`,className:Q,onClick:()=>n(e.kind===`call`?void 0:e.kind),children:[(0,Y.jsx)(`span`,{className:`flex w-4 justify-center text-[var(--chrome-fg-900)]`,children:t===e.kind&&(0,Y.jsx)(I,{size:14,stroke:2})}),(0,Y.jsxs)(`span`,{className:`flex flex-col`,children:[(0,Y.jsx)(`span`,{className:`text-[var(--chrome-fg-900)]`,children:e.label}),(0,Y.jsx)(`span`,{className:`text-[11px] text-[var(--chrome-fg-400)]`,children:e.hint})]})]},e.kind))})}function rt(e){let{label:t,icon:n,testId:r,children:i}=e;return(0,Y.jsxs)(B,{children:[(0,Y.jsxs)(H,{className:`${Q} justify-between`,"data-testid":r,children:[(0,Y.jsxs)(`span`,{className:`flex items-center gap-2`,children:[(0,Y.jsx)(`span`,{className:`text-[var(--chrome-fg-400)]`,children:n}),t]}),(0,Y.jsx)(L,{size:14,stroke:1.75,className:`text-[var(--chrome-fg-400)]`})]}),(0,Y.jsx)(d,{children:(0,Y.jsx)(p,{className:`z-50 outline-none`,children:(0,Y.jsx)(c,{"data-overlay":!0,className:Qe,children:i})})})]})}function it(e){let{index:t,count:n,step:r,hasPayload:i,paths:c}=e,{onPlay:g,onPayload:_,onChange:v,onMove:y,onRemove:ee,onNewPath:b}=e,{onInsertBefore:S,onInsertAfter:C,onChangeBox:w}=e,O=r.branches??[];return(0,Y.jsxs)(u,{children:[(0,Y.jsx)(f,{"aria-label":`Step options`,"data-testid":`flow-step-menu-${t}`,className:`${Oe} absolute right-1 top-[7px] opacity-0 transition-opacity focus-visible:opacity-100 group-hover:opacity-100 group-aria-[current=step]:opacity-100 data-[popup-open]:opacity-100`,children:(0,Y.jsx)(a,{size:14,stroke:1.75})}),(0,Y.jsx)(d,{children:(0,Y.jsx)(p,{side:`bottom`,align:`end`,sideOffset:4,className:`z-50 outline-none`,children:(0,Y.jsxs)(m,{"data-overlay":!0,className:`min-w-[210px] p-1`,children:[(0,Y.jsx)(h,{testId:`flow-step-play`,icon:(0,Y.jsx)(o,{size:15,stroke:1.75}),onClick:g,children:`Play from here`}),(0,Y.jsx)(l,{}),(0,Y.jsx)(h,{testId:`flow-step-change-box`,icon:(0,Y.jsx)(Te,{size:15,stroke:1.75}),onClick:w,children:`Change box…`}),(0,Y.jsx)(h,{testId:`flow-step-insert-above`,icon:(0,Y.jsx)(pe,{size:15,stroke:1.75}),onClick:S,children:`Add a step above`}),(0,Y.jsx)(h,{testId:`flow-step-insert-below`,icon:(0,Y.jsx)(me,{size:15,stroke:1.75}),onClick:C,children:`Add a step below`}),(0,Y.jsx)(l,{}),(0,Y.jsx)(rt,{label:`How it travels`,icon:(0,Y.jsx)(V,{size:15,stroke:1.75}),testId:`flow-step-travels`,children:(0,Y.jsx)(nt,{kind:r.kind??`call`,onPick:e=>v({kind:e})})}),!i&&(0,Y.jsx)(h,{testId:`flow-step-add-payload`,icon:(0,Y.jsx)(q,{size:15,stroke:1.75}),onClick:_,children:`Add what it carries`}),(0,Y.jsx)(h,{testId:`flow-step-toggle-fails`,icon:(0,Y.jsx)(x,{size:15,stroke:1.75}),onClick:()=>v({fails:!r.fails||void 0}),children:r.fails?`Doesn't fail here`:`Fails here`}),(0,Y.jsxs)(rt,{label:`Another path from here`,icon:(0,Y.jsx)(P,{size:15,stroke:1.75}),testId:`flow-step-paths`,children:[c.map(e=>(0,Y.jsx)(s,{className:Q,onClick:()=>v({branches:[...O,e.id]}),children:e.name},e.id)),c.length>0&&(0,Y.jsx)(l,{}),(0,Y.jsxs)(s,{className:Q,"data-testid":`flow-step-new-path`,onClick:b,children:[(0,Y.jsx)(z,{size:14,stroke:1.75,className:`text-[var(--chrome-fg-400)]`}),`New path`]})]}),(0,Y.jsx)(l,{}),(0,Y.jsx)(h,{testId:`flow-step-up`,icon:(0,Y.jsx)(T,{size:15,stroke:1.75}),disabled:t===0,onClick:()=>y(-1),children:`Move up`}),(0,Y.jsx)(h,{testId:`flow-step-down`,icon:(0,Y.jsx)(E,{size:15,stroke:1.75}),disabled:t===n-1,onClick:()=>y(1),children:`Move down`}),(0,Y.jsx)(h,{testId:`flow-step-remove`,icon:(0,Y.jsx)(D,{size:15,stroke:1.75}),onClick:ee,children:`Remove step`})]})})})]})}function $(e){e.stopPropagation(),(e.key===`Enter`&&!e.shiftKey||e.key===`Escape`)&&e.currentTarget.blur()}function at(){let e=_(),{store:t}=e,n=v(e=>e.shapes),i=v(e=>e.viewMode),a=(0,J.useMemo)(()=>ve(n),[n]),o=(0,J.useMemo)(()=>y(n).filter(e=>G(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,J.useEffect)(()=>()=>t.getState().setFlowPreview(null),[t]),(0,Y.jsxs)(xe,{width:300,testId:`flow-list`,ariaLabel:`Flows`,onDismiss:s,children:[(0,Y.jsxs)(`div`,{className:`flex items-center gap-1 py-2 pl-4 pr-2`,children:[(0,Y.jsx)(`span`,{className:`flex-1 text-[14px] font-medium text-[var(--chrome-fg-900)]`,children:`Flows`}),!i&&o.length>0&&(0,Y.jsx)(ct,{frames:o,onPick:t=>w(e,t.id)}),(0,Y.jsx)(r,{label:`Close`,side:`bottom`,children:(0,Y.jsx)(`button`,{type:`button`,"aria-label":`Close flows`,"data-testid":`flow-list-close`,onClick:s,className:be,children:(0,Y.jsx)(W,{size:16,stroke:1.75})})})]}),(0,Y.jsx)(`div`,{className:`mx-3 h-px bg-[var(--chrome-divider)]`}),(0,Y.jsx)(`div`,{className:`flex flex-1 flex-col gap-4 overflow-y-auto p-3`,children:a.length===0?(0,Y.jsxs)(`div`,{className:`flex flex-col items-center gap-2 px-3 py-8 text-center`,children:[(0,Y.jsx)(`p`,{className:`text-balance text-[13px] font-medium text-[var(--chrome-fg-900)]`,children:`No flows yet`}),(0,Y.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,Y.jsxs)(`section`,{className:`flex flex-col gap-0.5`,onPointerLeave:()=>c(n.id,null),children:[(0,Y.jsx)(`h3`,{className:`truncate px-2 pb-1 text-[11px] font-medium text-[var(--chrome-fg-400)]`,children:n.label||`Untitled frame`}),M(n.flows??[]).map(({flow:r,depth:a,origin:o})=>(0,Y.jsx)(ot,{flow:r,depth:a,forkStep:o?o.index+1:null,viewMode:i,onPreview:e=>c(n.id,e?r.id:null),onPlay:()=>C(e,n.id,r.id),onOpen:()=>t.getState().setFlowEdit({frameId:n.id,flowId:r.id})},r.id))]},n.id))})]})}function ot(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,Y.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,Y.jsx)(`span`,{className:`shrink-0 text-[var(--chrome-fg-400)]`,children:n>0?(0,Y.jsx)(P,{size:14,stroke:1.75}):(0,Y.jsx)(V,{size:14,stroke:1.75})}),(0,Y.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,Y.jsxs)(`span`,{className:`flex items-center gap-1.5`,children:[(0,Y.jsx)(`span`,{className:`truncate text-[13px] font-medium text-[var(--chrome-fg-900)]`,children:t.name}),u&&(0,Y.jsx)(`span`,{title:`Shows something failing`,className:`h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--flow-fail)]`})]}),(0,Y.jsx)(`span`,{className:`text-[11px] text-[var(--chrome-fg-400)]`,children:i===null?d:`From step ${i} · ${d}`})]}),l>0&&(0,Y.jsx)(r,{label:`Play`,side:`left`,children:(0,Y.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,Y.jsx)(ge,{size:11})})})]})}var st=`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 ct(e){let{frames:t,onPick:n}=e,r=t.length===1?t[0]:void 0;return r?(0,Y.jsxs)(`button`,{type:`button`,"data-testid":`flow-list-new`,title:`New flow on ${r.label||`the frame`}`,className:st,onClick:()=>n(r),children:[(0,Y.jsx)(z,{size:14,stroke:2}),`New`]}):(0,Y.jsxs)(u,{children:[(0,Y.jsxs)(f,{"data-testid":`flow-list-new`,className:st,children:[(0,Y.jsx)(z,{size:14,stroke:2}),`New`]}),(0,Y.jsx)(d,{children:(0,Y.jsx)(p,{side:`bottom`,align:`end`,sideOffset:6,className:`z-50 outline-none`,children:(0,Y.jsxs)(m,{"data-overlay":!0,className:`min-w-[240px] p-1`,children:[(0,Y.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,Y.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 lt(e){let{frameId:t,readOnly:n}=e,r=_();return(0,Y.jsx)(d,{children:(0,Y.jsx)(p,{side:`bottom`,align:`end`,sideOffset:6,className:`z-50 outline-none`,children:(0,Y.jsx)(m,{"data-overlay":!0,"data-testid":`figure-flow-list`,className:`w-[300px] p-1`,finalFocus:()=>r.store.getState().flowEdit===null,children:(0,Y.jsx)(ut,{frameId:t,readOnly:n})})})})}function ut(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,J.useEffect)(()=>()=>r.store.getState().setFlowPreview(null),[r]),i?(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.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,Y.jsx)(`div`,{onPointerLeave:()=>o(null),children:M(i.flows??[]).map(({flow:e,depth:t,origin:r})=>(0,Y.jsx)(ft,{frame:i,flow:e,depth:t,forkStep:r?r.index+1:null,last:e.id===a,readOnly:n,onPreview:o},e.id))}),!n&&(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(l,{}),(0,Y.jsx)(h,{testId:`figure-flow-new`,icon:(0,Y.jsx)(z,{size:15,stroke:1.75}),onClick:()=>w(r,t),children:`New flow`})]})]}):null}var dt=`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 ft(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,Y.jsxs)(`div`,{"data-testid":`figure-flow-row`,className:`flex items-center gap-0.5`,style:{paddingLeft:r*16},onPointerEnter:()=>u(n.id),children:[(0,Y.jsxs)(s,{"data-testid":`figure-flow-row-play`,disabled:g===0,className:`${ye.menuItem} min-w-0 flex-1`,onFocus:()=>u(n.id),onClick:()=>C(f,t.id,n.id),children:[(0,Y.jsx)(`span`,{className:c?`text-[var(--flow-accent)]`:`text-[var(--chrome-fg-400)]`,children:r>0?(0,Y.jsx)(P,{size:15,stroke:1.75}):c?(0,Y.jsx)(ge,{size:13}):(0,Y.jsx)(o,{size:15,stroke:1.75})}),(0,Y.jsxs)(`span`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,Y.jsx)(`span`,{className:`truncate text-[var(--chrome-fg-900)]`,children:n.name}),i!==null&&(0,Y.jsxs)(`span`,{className:`text-[11px] text-[var(--chrome-fg-400)]`,children:[`From step `,i]})]}),v&&(0,Y.jsx)(`span`,{title:`Shows something failing`,className:`h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--flow-fail)]`}),(0,Y.jsxs)(`span`,{className:`shrink-0 text-[11px] tabular-nums text-[var(--chrome-fg-400)]`,children:[g,` `,g===1?`step`:`steps`]})]}),!l&&(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(s,{"aria-label":`Edit ${n.name}`,"data-testid":`figure-flow-row-edit`,className:dt,onFocus:()=>u(n.id),onClick:()=>F(f,t.id,n.id),children:(0,Y.jsx)(R,{size:14,stroke:1.75})}),(0,Y.jsxs)(B,{children:[(0,Y.jsx)(H,{"aria-label":`More for ${n.name}`,"data-testid":`figure-flow-row-more`,className:dt,children:(0,Y.jsx)(a,{size:14,stroke:1.75})}),(0,Y.jsx)(d,{children:(0,Y.jsx)(p,{className:`z-50 outline-none`,sideOffset:4,children:(0,Y.jsxs)(m,{"data-overlay":!0,className:`min-w-[160px] p-1`,children:[(0,Y.jsx)(h,{testId:`figure-flow-rename`,icon:(0,Y.jsx)(R,{size:15,stroke:1.75}),onClick:()=>f.store.getState().setFlowEdit({frameId:t.id,flowId:n.id,rename:!0}),children:`Rename`}),(0,Y.jsx)(h,{testId:`figure-flow-delete`,icon:(0,Y.jsx)(D,{size:15,stroke:1.75}),onClick:()=>N(f,t.id,n.id),children:`Delete`})]})})})]})]})]})}var pt=/^Flow \d+$/;function mt(){let e=v(e=>e.flowEdit);return v(e=>e.rightPanel===`flow`)?e?(0,Y.jsx)(ht,{frameId:e.frameId,flowId:e.flowId},e.flowId):(0,Y.jsx)(at,{}):null}function ht(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,J.useMemo)(()=>{let e=s.find(e=>e.id===t);return e?.type===`figure`?e:null},[s,t]),p=(0,J.useMemo)(()=>f?_e(s,f):[],[s,f]),m=f?.flows?.find(e=>e.id===n),h=m?we(m,p):null,y=h?.steps.length??0,[b,x]=(0,J.useState)(null),[S,T]=(0,J.useState)(!1),[E,D]=(0,J.useState)(!1),M=o.getState().patchFlowEdit;(0,J.useEffect)(()=>{l.rename&&(T(!0),o.getState().patchFlowEdit({rename:!1}))},[l.rename,o]);let P=he({count:y,gap:0,onReorder:(e,r)=>ie(a,t,n,e,r),onPress:e=>M({selected:e})}),F=()=>te(a,t,n),I=()=>{h&&h.steps.length===0&&N(a,t,n),o.getState().setFlowsOpen(!0)},L=()=>{if(h&&h.steps.length>0&&pt.test(h.name)){x(bt(h));return}F()},fe=(0,J.useRef)(L);fe.current=L;let R=(0,J.useRef)(y);if(R.current=y,(0,J.useEffect)(()=>{let e=e=>{let r=o.getState();if(r.flowPlay||ee(e.target)||(e.target instanceof Element?e.target:null)?.closest(`[role=menu], [role=dialog]`))return;let i=r.flowEdit??{},s=R.current,c=j(i,s);if(e.key===`Escape`){if(e.preventDefault(),e.stopPropagation(),i.picking!==null&&i.picking!==void 0){r.patchFlowEdit({picking:null});return}if(oe(i,s)){r.patchFlowEdit({slot:null});return}fe.current();return}if(c!==null){if(e.key===`Delete`||e.key===`Backspace`){e.preventDefault(),e.stopPropagation(),le(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&&ie(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 z=f.flows??[],B=new Map(p.map(e=>[e.id,Se(p,e)])),V=Ce(z,n),H=V?.flow.steps[V.index],pe=H?.title??``,me=k(p,h.steps,H),U=ne(l,y),ve=j(l,y),G=j({selected:l.picking},y),ye=ae(l,y),Te=z.filter(e=>e.id!==n).map(e=>({id:e.id,name:e.name})),K=[...new Map([...me.values()].map(e=>[e.arrow.id,e])).values()],q=e=>{for(let t of e)se(a,t);D(!0)};function Ee(e){let t=me.get(e);return t?{names:re(t,B),onAttach:()=>q([t])}:null}function Oe(){b!==null&&je(b),F()}function je(e){let r=e.trim();r&&r!==h?.name&&A(a,t,n,e=>({...e,name:r}))}return(0,Y.jsxs)(xe,{width:300,testId:`flow-panel`,ariaLabel:`Flow`,onDismiss:F,children:[(0,Y.jsxs)(`div`,{className:`flex items-center gap-0.5 py-2 pl-1.5 pr-2`,children:[(0,Y.jsx)(r,{label:`All flows`,side:`bottom`,children:(0,Y.jsx)(`button`,{type:`button`,"aria-label":`All flows`,"data-testid":`flow-panel-back`,onClick:I,className:be,children:(0,Y.jsx)(ue,{size:16,stroke:1.75})})}),(0,Y.jsx)(`div`,{className:`min-w-0 flex-1`,children:b===null?S?(0,Y.jsx)(`input`,{autoFocus:!0,"aria-label":`Flow name`,"data-testid":`flow-name`,className:`${De} text-[14px] font-medium`,defaultValue:h.name,onFocus:e=>e.target.select(),onBlur:e=>{je(e.target.value),T(!1)},onKeyDown:$}):(0,Y.jsx)(yt,{current:h,flows:z,onPick:e=>o.getState().setFlowEdit({frameId:t,flowId:e}),onRename:()=>T(!0),onNew:()=>w(a,t),onDelete:()=>N(a,t,n)}):(0,Y.jsx)(`input`,{autoFocus:!0,"aria-label":`Name this flow`,"data-testid":`flow-name-input`,className:`${De} text-[14px] font-medium ring-[var(--chrome-input-hover)] hover:ring-[var(--chrome-input-hover)]`,value:b,onFocus:e=>e.target.select(),onChange:e=>x(e.target.value),onKeyDown:e=>{e.stopPropagation(),e.key===`Enter`&&b.trim()&&Oe(),e.key===`Escape`&&F()}})}),(0,Y.jsx)(r,{label:`Close`,side:`bottom`,children:(0,Y.jsx)(`button`,{type:`button`,"aria-label":`Close the flow panel`,"data-testid":`flow-panel-done`,onClick:F,className:be,children:(0,Y.jsx)(W,{size:16,stroke:1.75})})})]}),(0,Y.jsxs)(`div`,{className:`flex flex-col gap-1.5 px-4 pb-2.5`,children:[b===null?(0,Y.jsxs)(`span`,{className:`truncate text-[11px] text-[var(--chrome-fg-400)]`,children:[f.label||`Untitled frame`,` · `,y,` `,y===1?`step`:`steps`]}):(0,Y.jsxs)(`span`,{"data-testid":`flow-name-prompt`,className:`flex flex-wrap items-center gap-1.5 text-[11px] text-[var(--chrome-fg-500)]`,children:[`Name this flow · `,(0,Y.jsx)(`kbd`,{className:Ae,children:`↵`}),` save · `,(0,Y.jsx)(`kbd`,{className:Ae,children:`esc`}),` keep "`,h.name,`"`]}),V&&(0,Y.jsxs)(`button`,{type:`button`,"data-testid":`flow-origin`,title:`Open ${V.flow.name}`,className:`group/origin -mt-0.5 flex min-w-0 cursor-pointer items-center gap-1.5 self-start text-[12px] text-[var(--chrome-fg-500)]`,onClick:()=>o.getState().setFlowEdit({frameId:t,flowId:V.flow.id}),children:[(0,Y.jsx)(de,{size:13,stroke:1.75,className:`shrink-0`}),(0,Y.jsxs)(`span`,{className:`truncate`,children:[`From`,` `,(0,Y.jsx)(`b`,{className:`font-medium text-[var(--chrome-fg-700)] group-hover/origin:underline`,children:V.flow.name}),`, step `,V.index+1]})]})]}),(0,Y.jsx)(`div`,{className:`mx-3 h-px bg-[var(--chrome-divider)]`}),(0,Y.jsx)(`div`,{ref:P.listRef,className:`flex flex-1 flex-col overflow-y-auto p-3`,children:y===0?(0,Y.jsx)(vt,{fork:V?{title:pe,step:V.index+1}:null,onAi:i?()=>{N(a,t,n),o.getState().askAi(`Write a flow for the frame "${f.label||`Untitled`}" (${f.id}) showing `)}:null}):(0,Y.jsxs)(Y.Fragment,{children:[(0,Y.jsx)(Ie,{count:K.length,attached:E,onAttach:()=>q(K),onSettled:()=>D(!1)}),(0,Y.jsx)(`ol`,{className:`flex flex-col pt-1`,"data-testid":`flow-steps`,children:h.steps.map((e,r)=>(0,Y.jsx)(gt,{before:U===r&&U<y,hidden:P.dragging,number:r+1,first:r===0,onCancel:()=>M({slot:null}),children:(0,Y.jsx)(Ye,{step:e,index:r,count:y,current:d===r,selected:ve===r,picking:G===r,names:B,otherFlows:Te,loose:Ee(r),rail:{first:r===0&&U!==0,end:G!==null&&r===y-1,litAbove:d!==null&&r>0&&r<=d,litBelow:d!==null&&r<d},rowRef:P.setItemRef(r),rowStyle:P.rowStyle(r),grip:P.rowHandlers(r),actions:{onPlay:()=>C(a,t,n,r),onChange:e=>ce(a,t,n,r,e),onMove:e=>ie(a,t,n,r,r+e),onRemove:()=>le(a,t,n,r),onNewPath:()=>O(a,t,n,r),onSelect:()=>{o.getState().flowEdit?.selected!==r&&M({selected:r})},onHover:e=>M({hovered:e?r:null}),onInsertBefore:()=>M({slot:r,picking:null}),onInsertAfter:()=>M({slot:r+1<y?r+1:null,picking:null}),onChangeBox:()=>M({picking:r,selected:r}),onCancelPick:()=>M({picking:null})}})},`${e.target}-${r}`))}),G===null&&(0,Y.jsx)(_t,{inserting:U<y,next:y+1,joined:ye,onToEnd:()=>M({slot:null})})]})}),(0,Y.jsx)(`div`,{className:`border-t border-[var(--chrome-ring)] p-3`,children:b===null?(0,Y.jsxs)(`div`,{className:`flex gap-2`,children:[(0,Y.jsxs)(`button`,{type:`button`,className:`${Ne} h-9 flex-1`,"data-testid":`flow-play`,disabled:y===0||u,onClick:()=>C(a,t,n),children:[(0,Y.jsx)(ge,{size:12}),`Preview`]}),(0,Y.jsx)(`button`,{type:`button`,className:`${ke} flex-1`,"data-testid":`flow-done`,onClick:L,children:`Done`})]}):(0,Y.jsxs)(`div`,{className:`flex gap-2`,children:[(0,Y.jsx)(`button`,{type:`button`,className:`${Ne} h-9 flex-1`,"data-testid":`flow-name-skip`,onClick:F,children:`Skip`}),(0,Y.jsx)(`button`,{type:`button`,className:`${ke} flex-1`,"data-testid":`flow-name-save`,disabled:!b.trim(),onClick:Oe,children:`Save name`})]})})]})}function gt(e){let{before:t,hidden:n,number:i,first:a,onCancel:o,children:s}=e;return(0,Y.jsxs)(Y.Fragment,{children:[t&&(0,Y.jsxs)(`li`,{"data-testid":`flow-slot`,className:`flex gap-2.5 rounded-lg pl-1 pr-1.5 bg-[color-mix(in_srgb,var(--chrome-fg-900)_5%,transparent)] ${n?`invisible`:``}`,children:[(0,Y.jsx)(Ge,{first:a,node:(0,Y.jsx)(`span`,{className:Ue,children:i})}),(0,Y.jsxs)(`span`,{className:`flex min-w-0 flex-1 items-center gap-1.5 py-2 text-[12.5px] text-[var(--chrome-fg-800)]`,children:[(0,Y.jsxs)(`span`,{className:`flex-1 leading-[22px]`,children:[`Click a box for step `,i]}),(0,Y.jsx)(r,{label:`Add at the end instead`,side:`left`,children:(0,Y.jsx)(`button`,{type:`button`,"aria-label":`Add at the end instead`,"data-testid":`flow-slot-cancel`,className:`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`,onClick:o,children:(0,Y.jsx)(W,{size:13,stroke:2})})})]})]}),s]})}function _t(e){let{inserting:t,next:n,joined:r,onToEnd:i}=e;return(0,Y.jsxs)(`div`,{"data-testid":`flow-hint`,className:`flex gap-2.5 pl-1 pr-1.5`,children:[(0,Y.jsx)(Ge,{end:!0,node:(0,Y.jsx)(`span`,{className:He,children:t?(0,Y.jsx)(z,{size:10,stroke:2.5}):n})}),(0,Y.jsx)(`div`,{className:`py-2 text-[12px] leading-[22px] text-[var(--chrome-fg-400)]`,children:t?(0,Y.jsx)(`button`,{type:`button`,className:`cursor-pointer text-[var(--chrome-fg-600)] transition-colors hover:text-[var(--chrome-fg-900)]`,onClick:i,children:`Add at the end instead`}):(0,Y.jsxs)(Y.Fragment,{children:[`Click the next box or arrow`,r!==null&&(0,Y.jsxs)(`span`,{className:`flex items-center gap-1 text-[11px] leading-[18px]`,children:[(0,Y.jsx)(`kbd`,{className:`inline-flex h-[18px] min-w-[18px] items-center justify-center rounded bg-[var(--chrome-popup)] px-1 font-mono text-[10.5px] text-[var(--chrome-fg-600)] shadow-[inset_0_0_0_1px_var(--chrome-input),0_1px_0_var(--chrome-input)]`,children:`⇧`}),` click adds it to step `,r+1]})]})})]})}function vt(e){let{onAi:t,fork:n}=e,r=n?n.title||`step ${n.step}`:``;return(0,Y.jsxs)(`div`,{className:`flex flex-col items-center gap-3 px-3 py-8 text-center`,"data-testid":`flow-empty`,children:[(0,Y.jsx)(`span`,{"aria-hidden":!0,className:`flex h-11 w-11 items-center justify-center rounded-full bg-[var(--chrome-disc)] text-[var(--chrome-fg-500)]`,children:n?(0,Y.jsx)(P,{size:20,stroke:1.75}):(0,Y.jsx)(V,{size:20,stroke:1.75})}),(0,Y.jsx)(`p`,{className:`text-balance text-[13px] font-medium text-[var(--chrome-fg-900)]`,children:n?`What happens after ${r}?`:`Click the boxes in order`}),(0,Y.jsx)(`p`,{className:`text-balance text-[12px] leading-relaxed text-[var(--chrome-fg-500)]`,children:n?`Click the box it goes to next. Viewers can choose this path at step ${n.step}.`:`Start with whoever kicks things off.`}),t&&!n&&(0,Y.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,Y.jsx)(U,{size:13,stroke:1.75}),`Write the steps with AI`]})]})}function yt(e){let{current:t,flows:n,onPick:r,onRename:a,onNew:o,onDelete:c}=e,g=(0,J.useRef)(!1);return(0,Y.jsxs)(u,{onOpenChange:e=>{e&&(g.current=!1)},children:[(0,Y.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,Y.jsx)(`span`,{className:`truncate text-[14px] font-medium text-[var(--chrome-fg-900)]`,children:t.name}),(0,Y.jsx)(i,{size:14,stroke:1.75,className:`shrink-0 text-[var(--chrome-fg-400)]`})]}),(0,Y.jsx)(d,{children:(0,Y.jsx)(p,{side:`bottom`,align:`start`,sideOffset:4,className:`z-50 outline-none`,children:(0,Y.jsxs)(m,{"data-overlay":!0,className:`min-w-[240px] p-1`,finalFocus:()=>!g.current,children:[M(n).map(({flow:e,depth:n})=>(0,Y.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,Y.jsx)(`span`,{className:`text-[var(--chrome-fg-400)]`,children:n>0?(0,Y.jsx)(P,{size:14,stroke:1.75}):(0,Y.jsx)(V,{size:14,stroke:1.75})}),(0,Y.jsx)(`span`,{className:`min-w-0 flex-1 truncate text-[var(--chrome-fg-900)]`,children:e.name}),(0,Y.jsx)(`span`,{className:`text-[11px] tabular-nums text-[var(--chrome-fg-400)]`,children:e.steps.length}),(0,Y.jsx)(`span`,{className:`flex w-4 justify-center text-[var(--chrome-fg-900)]`,children:e.id===t.id&&(0,Y.jsx)(I,{size:14,stroke:2})})]},e.id)),(0,Y.jsx)(l,{}),(0,Y.jsx)(h,{testId:`flow-name-edit`,icon:(0,Y.jsx)(R,{size:15,stroke:1.75}),onClick:()=>{g.current=!0,a()},children:`Rename`}),(0,Y.jsx)(h,{testId:`flow-new`,icon:(0,Y.jsx)(z,{size:15,stroke:1.75}),onClick:o,children:`New flow on this frame`}),(0,Y.jsx)(h,{testId:`flow-delete`,icon:(0,Y.jsx)(D,{size:15,stroke:1.75}),onClick:c,children:`Delete this flow`})]})})})]})}function bt(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{lt as FlowMenuPopup,mt as FlowPanel};

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

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