koboyo 0.3.0 → 0.4.0

package/assets/editor/assets/export-dialog-DPg1uzX5.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{i as r}from"./config-a_lz-57R.js";import{a as i,i as a,o,s}from"./editor-B0tARd79.js";import{g as c,i as l,o as u}from"./slides-D9bnXqtf.js";import{c as d,i as f,n as p,o as m,r as h,s as g,t as ee}from"./export-options-CJwykdP5.js";import{t as _}from"./IconX-AlbPkO_g.js";import{t as te}from"./use-export-command-CPc7qug1.js";import{n as v}from"./surface-Dke4SWpE.js";import{i as y,n as b,r as x,t as S}from"./DialogRoot-mHGRFW9m.js";import{n as C,t as w}from"./DialogTitle-CFhr-gP9.js";import{t as T}from"./dialog-B32krrce.js";var E=e(t(),1),D=n(),O=`flex h-7 items-center rounded-lg px-2.5 text-[12px] outline-none transition-colors disabled:cursor-not-allowed disabled:text-[var(--chrome-fg-300)]`,k=`bg-[var(--chrome-active)] text-[var(--chrome-fg-900)]`,A=`text-[var(--chrome-fg-500)] hover:bg-[var(--chrome-hover)]`,ne=[{id:`png`,label:`PNG`},{id:`svg`,label:`SVG`},{id:`pdf`,label:`PDF`}];function j(e){let{request:t,onClose:n}=e,O=s(),k=i(),{canvasMeta:A}=r(),j=te(),P=o(e=>e.selectedIds.size),F=a(e=>[e.shapes],e=>u(l(e)).length),I=A?.name,[L,R]=(0,E.useState)(m),[z]=(0,E.useState)(()=>f(t,L,{hasSelection:P>0,hasSlides:F>0})),[B,V]=(0,E.useState)(z.format),[H,U]=(0,E.useState)(z.scope),[W,G]=(0,E.useState)(()=>h(I,z.format)),[K,q]=(0,E.useState)(!1),[J,Y]=(0,E.useState)(!1),X=(0,E.useRef)(!0);(0,E.useEffect)(()=>(X.current=!0,()=>{X.current=!1}),[]);let Z=B===`pdf`,Q=P>0?H:`board`;function $(e,t){R(n=>({...n,[e]:t}))}function re(e){V(e),K||G(h(I,e))}async function ie(e){if(e.preventDefault(),J)return;g(Z?L:{...L,format:B}),Y(!0);let t=h(W,B),{shapes:r,selectedIds:i}=O.getState(),a=Q===`board`?r:c(r,d(r,i),k.measurement),o=Z?await j(`downloadPdf`,r,{options:{pageSize:L.pageSize},filename:t}):await j(B===`png`?`downloadPng`:`downloadSvg`,a,{options:{scale:B===`png`?L.scale:void 0,transparent:L.transparent,theme:L.theme},filename:t});X.current&&(Y(!1),o&&n())}return(0,D.jsx)(S,{open:!0,onOpenChange:e=>{e||n()},children:(0,D.jsxs)(b,{children:[(0,D.jsx)(y,{className:v.dialogBackdrop}),(0,D.jsxs)(x,{"data-overlay":!0,"data-testid":`export-dialog`,className:`w-[min(420px,92vw)] p-5 ${v.dialogPopup}`,children:[(0,D.jsxs)(`div`,{className:`flex items-start justify-between`,children:[(0,D.jsx)(w,{className:T.title,children:`Export`}),(0,D.jsx)(C,{"aria-label":`Close`,"data-testid":`export-close`,className:`-mr-1.5 -mt-1.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-[var(--chrome-fg-500)] outline-none transition-colors hover:bg-[var(--chrome-hover)]`,children:(0,D.jsx)(_,{size:16,stroke:2})})]}),(0,D.jsxs)(`form`,{className:`mt-4 flex flex-col gap-3`,onSubmit:e=>void ie(e),children:[(0,D.jsx)(M,{label:`Format`,children:(0,D.jsx)(N,{label:`Format`,testId:`export-format`,value:B,options:ne.map(e=>({...e,disabled:e.id===`pdf`&&F===0})),onChange:re})}),Z?(0,D.jsxs)(D.Fragment,{children:[(0,D.jsx)(M,{label:`Page size`,children:(0,D.jsx)(N,{label:`Page size`,testId:`export-page`,value:L.pageSize,options:p,onChange:e=>$(`pageSize`,e)})}),(0,D.jsxs)(`p`,{"data-testid":`export-pdf-summary`,className:`text-[12px] leading-relaxed text-[var(--chrome-fg-400)]`,children:[F===1?`One slide`:`${F} slides`,`, one page each. Skipped slides are left out.`]})]}):(0,D.jsxs)(D.Fragment,{children:[(0,D.jsx)(M,{label:`Export`,children:(0,D.jsx)(N,{label:`Export`,testId:`export-scope`,value:Q,options:[{id:`selection`,label:P>0?`Selection (${P})`:`Selection`,disabled:P===0},{id:`board`,label:`Whole board`}],onChange:U})}),B===`png`&&(0,D.jsx)(M,{label:`Scale`,children:(0,D.jsx)(N,{label:`Scale`,testId:`export-scale`,value:L.scale,options:ee.map(e=>({id:e,label:`${e}×`})),onChange:e=>$(`scale`,e)})}),(0,D.jsx)(M,{label:`Background`,children:(0,D.jsx)(N,{label:`Background`,testId:`export-background`,value:L.transparent?`transparent`:`solid`,options:[{id:`solid`,label:`Solid`},{id:`transparent`,label:`Transparent`}],onChange:e=>$(`transparent`,e===`transparent`)})}),(0,D.jsx)(M,{label:`Theme`,children:(0,D.jsx)(N,{label:`Theme`,testId:`export-theme`,value:L.theme,options:[{id:`light`,label:`Light`},{id:`dark`,label:`Dark`}],onChange:e=>$(`theme`,e)})})]}),(0,D.jsxs)(`label`,{className:`mt-1 flex flex-col gap-1.5`,children:[(0,D.jsx)(`span`,{className:T.label,children:`File name`}),(0,D.jsxs)(`div`,{className:`relative`,children:[(0,D.jsx)(`input`,{"data-testid":`export-filename`,className:`${T.field} pr-12`,value:W,maxLength:120,placeholder:h(null,B),onChange:e=>{G(e.target.value),q(!0)}}),(0,D.jsxs)(`span`,{className:`pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-[13px] text-[var(--chrome-fg-400)]`,children:[`.`,B]})]})]}),(0,D.jsxs)(`div`,{className:`mt-2 ${T.actions}`,children:[(0,D.jsx)(C,{className:T.cancelButton,children:`Cancel`}),(0,D.jsx)(`button`,{type:`submit`,"data-testid":`export-submit`,"data-busy":J?`true`:`false`,disabled:J,className:T.submitButton,children:J?`Exporting…`:`Export`})]})]})]})]})})}function M(e){let{label:t,children:n}=e;return(0,D.jsxs)(`div`,{className:`flex min-h-8 items-center justify-between gap-3`,children:[(0,D.jsx)(`span`,{className:T.label,children:t}),n]})}function N(e){let{label:t,testId:n,value:r,options:i,onChange:a}=e;return(0,D.jsx)(`div`,{className:`flex items-center gap-1`,role:`radiogroup`,"aria-label":t,children:i.map(e=>(0,D.jsx)(`button`,{type:`button`,role:`radio`,"aria-checked":r===e.id,"data-testid":`${n}-${String(e.id).replace(`:`,`-`)}`,disabled:e.disabled,onClick:()=>a(e.id),className:`${O} ${r===e.id?k:A}`,children:e.label},e.id))})}export{j as ExportDialog};

package/assets/editor/assets/flow-layer-B7mlx0G4.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{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

@@ -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 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-stage-fiF5Nggn.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{Xr as r,Yr as i,an as a,w as o}from"./slides-D9bnXqtf.js";import{r as s,t as c}from"./dom-PAoZruqo.js";import{g as l}from"./selection-overlay-primitives-hWJ1xjF7.js";import{c as u,l as d,o as f}from"./flows-GGbkNqs8.js";var p=e(t(),1),m=n(),h=6;function g(e,t){if(e.type===`arrow`)return o(i(e),t);let n=a(e);return o({x:n.x,y:n.y},t)}function _(e,t,n=h,r){let i=l(e,r),a=o({x:i.x,y:i.y},t);return{left:a.x-n,top:a.y-n,width:i.width*t.zoom+n*2,height:i.height*t.zoom+n*2}}function v(e){return new Set(e.steps.flatMap((e,t)=>e.fails?[t+1]:[]))}function y(e){let t=new Map;return e.steps.forEach((e,n)=>{for(let r of u(e))t.set(r,[...t.get(r)??[],n+1])}),t}function b(e){let{numbers:t,byId:n,viewport:r,current:i,failing:a}=e;return(0,m.jsx)(m.Fragment,{children:[...t].map(([e,t])=>{let o=n.get(e);if(!o)return null;let s=g(o,r);return(0,m.jsx)(`span`,{"data-testid":`flow-step-badge`,"data-current":i!==null&&t.includes(i)||void 0,className:`pointer-events-none absolute z-10 flex items-center gap-1 transition-opacity ${o.type===`arrow`?`-translate-x-1/2 -translate-y-[calc(100%+14px)]`:`-translate-x-full -translate-y-full`}`,style:{left:s.x-2,top:s.y-2},children:t.map(e=>{let t=i===null||e===i;return(0,m.jsx)(`span`,{className:`flex h-[22px] min-w-[22px] items-center justify-center rounded-full px-1.5 text-[11.5px] font-semibold tabular-nums transition-colors ${a.has(e)&&t?`bg-[var(--flow-fail)] text-white`:t?`bg-[var(--flow-accent)] text-white`:`bg-[color-mix(in_srgb,var(--flow-accent)_14%,var(--chrome-popup))] text-[var(--flow-accent)]`} ${e===i?`scale-110`:``}`,children:e},e)})},e)})})}var x=`http://www.w3.org/2000/svg`,S=48;function C(e,t){if(e.kind===`ghost`){let n=t.get(e.from),r=t.get(e.to);if(!n||!r)return null;let i=a(n),o=a(r);return w([D(i,E(o)),D(o,E(i))].map(e=>[e]),!0)}let n=e.hops.flatMap(e=>{let t=A(r(e.arrow));return t.length<2?[]:[e.reversed?t.reverse():t]});return n.length>0?w(n,!1):null}function w(e,t){let n=[],r=[],i=0;return(t?[e.flat()]:e).forEach((e,t)=>{if(t>0){let t=T(n[n.length-1],e[0]);r.push({from:i,to:i+t,inside:!0}),i+=t}let a=i;e.forEach((t,r)=>{r>0&&(i+=T(e[r-1],t)),n.push(t)}),r.push({from:a,to:i,inside:!1})}),{d:n.map((e,t)=>`${t===0?`M`:`L`} ${e.x} ${e.y}`).join(` `),length:i,legs:r}}function T(e,t){return Math.hypot(t.x-e.x,t.y-e.y)}function E(e){return{x:e.x+e.width/2,y:e.y+e.height/2}}function D(e,t){let n=E(e),r=t.x-n.x,i=t.y-n.y;if(r===0&&i===0)return n;let a=Math.min(r===0?1/0:e.width/2/Math.abs(r),i===0?1/0:e.height/2/Math.abs(i));return{x:n.x+r*a,y:n.y+i*a}}var O=null;function k(){if(O)return O;let e=document.createElementNS(x,`svg`);e.setAttribute(`aria-hidden`,`true`),e.style.cssText=`position:absolute;width:0;height:0;overflow:hidden;visibility:hidden`;let t=document.createElementNS(x,`path`);return e.append(t),document.body.append(e),O=t,t}function A(e){let t=k();t.setAttribute(`d`,e);let n=t.getTotalLength();return!Number.isFinite(n)||n===0?[]:Array.from({length:49},(e,r)=>{let i=t.getPointAtLength(n*r/S);return{x:i.x,y:i.y}})}var j=.16,M=.45,N=3,P=1.5,F=100,I=[];function L(e){let{frameId:t,flow:n,targets:r,index:i,viewport:a,lead:o=I}=e,l=(0,p.useMemo)(()=>new Map(r.map(e=>[e.id,e])),[r]),h=n.steps[i],g=(0,p.useMemo)(()=>f(r,[...o,...n.steps],o.length+i),[r,o,n.steps,i]),_=h?.fails?`var(--flow-fail)`:`var(--flow-accent)`,x=(0,p.useMemo)(()=>h?u(h).flatMap(e=>l.get(e)??[]):[],[h,l]),S=(0,p.useMemo)(()=>{let e=[...o,...n.steps.slice(0,i)],t=e.slice(Math.max(0,e.length-N)).reverse().flatMap((e,t)=>u(e).map(e=>({id:e,back:t})));return x.flatMap(e=>{let n;if(e.type===`arrow`)n={kind:`arrows`,hops:[{arrow:e,reversed:!1}],through:[],cost:0};else{let i=1/0;for(let a of t){let t=d(r,a.id,e.id,{reply:g===`reply`});if(!t)continue;let o=(t.kind===`ghost`?F:t.cost)+a.back*P;o<i&&(i=o,n=t)}}let a=n?C(n,l):null;return n&&a?[{key:`${i}-${e.id}`,route:n,track:a}]:[]})},[x,o,n.steps,i,r,g,l]),w=(0,p.useMemo)(()=>{let e=new Set([t,...x.map(e=>e.id)]),a=x.filter(e=>e.type===`arrow`).map(e=>e.id);for(let t of S)t.route.kind===`arrows`&&(t.route.hops.forEach(t=>{e.add(t.arrow.id),a.push(t.arrow.id)}),t.route.through.forEach(t=>e.add(t)));let l=new Set([...o,...n.steps.slice(0,i)].flatMap(u)),d=[],f=[];for(let t of r){if(e.has(t.id))continue;let n=t.type===`figure`;(l.has(t.id)||n?f:d).push(s(t.id),c(`data-icon-label`,t.id))}let p=(e,t)=>e.length>0?`${e.join(`,`)}{opacity:${t}!important}`:``;return[`[data-canvas-root] :is([data-shape-id],[data-icon-label]){transition:opacity 260ms ease}`,`[data-testid="hover-indicator"]{display:none}`,p(d,j),p(f,M),Y(a,_,g)].join(``)},[t,x,o,S,n.steps,i,r,_,g]);return h?(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(`style`,{"data-testid":`flow-dim`,children:w}),S.length>0&&(0,m.jsx)(z,{handOffs:S,kind:g,color:_,fails:h.fails,payload:h.payload,viewport:a},`${n.id}-${i}`),(0,m.jsx)(b,{numbers:y(n),byId:l,viewport:a,current:i+1,failing:v(n)})]}):null}function R(e){let t=document.querySelector(`[data-canvas-root]`);if(!t)return[];let n=t.getBoundingClientRect();return e.flatMap(e=>e.route.kind===`arrows`?e.route.hops.flatMap(r=>{let i=t.querySelector(`[data-testid="arrow-label"]${s(r.arrow.id)}`);if(!i)return[];let a=i.getBoundingClientRect();return[{key:`${e.key}-${r.arrow.id}`,x:a.left-n.left,y:a.top-n.top,width:a.width,height:a.height}]}):[])}function z(e){let{handOffs:t,kind:n,color:r,fails:i,payload:a,viewport:o}=e,s=1/o.zoom,c=W(t,o.zoom),l=R(t),u=`flow-hand-off-mask-${t[0]?.key??``}`;return(0,m.jsxs)(`svg`,{"data-testid":`flow-hand-off`,"data-kind":n,"data-fails":i||void 0,className:`pointer-events-none absolute inset-0 h-full w-full overflow-visible`,children:[l.length>0&&(0,m.jsxs)(`mask`,{id:u,maskUnits:`userSpaceOnUse`,x:`-100000`,y:`-100000`,width:`200000`,height:`200000`,children:[(0,m.jsx)(`rect`,{x:`-100000`,y:`-100000`,width:`200000`,height:`200000`,fill:`white`}),l.map(e=>(0,m.jsx)(`rect`,{x:e.x,y:e.y,width:e.width,height:e.height,rx:4,fill:`black`},e.key))]}),(0,m.jsx)(`g`,{mask:l.length>0?`url(#${u})`:void 0,children:(0,m.jsx)(`g`,{transform:`translate(${o.x} ${o.y}) scale(${o.zoom})`,children:t.map(e=>{let t=e.route.kind===`ghost`,i=t||n===`async`;return(0,m.jsxs)(`g`,{"data-testid":t?`flow-ghost`:`flow-route`,children:[t&&(0,m.jsx)(`path`,{d:e.track.d,fill:`none`,stroke:r,strokeWidth:(n===`reply`?2.5:3.5)*s,strokeLinecap:`round`,strokeDasharray:i?`${6*s} ${6*s}`:`1`,strokeDashoffset:i?void 0:1,pathLength:i?void 0:1,opacity:n===`reply`?.6:.85,children:!i&&(0,m.jsx)(`animate`,{attributeName:`stroke-dashoffset`,from:`1`,to:`0`,dur:`0.7s`,fill:`freeze`})}),(0,m.jsxs)(`g`,{opacity:0,children:[(0,m.jsx)(`animateMotion`,{dur:`${c.seconds}s`,repeatCount:`indefinite`,path:e.track.d,calcMode:`linear`,keyPoints:`0;1;1`,keyTimes:`0;${c.travel(e.track)};1`}),(0,m.jsx)(`animate`,{attributeName:`opacity`,dur:`${c.seconds}s`,repeatCount:`indefinite`,calcMode:`linear`,...G(e.track,c.travel(e.track))}),(0,m.jsx)(`circle`,{r:11*s,fill:`var(--canvas-bg, white)`,opacity:.9}),(0,m.jsx)(`circle`,{r:7*s,fill:n===`async`?`var(--canvas-bg, white)`:r,stroke:r,strokeWidth:3*s}),a&&(0,m.jsx)(J,{text:a,scale:s,color:r})]})]},e.key)})})})]})}var B=380,V=.7,H=.9,U=.12;function W(e,t){let n=Math.max(...e.map(e=>e.track.length)),r=Math.max(H,n*t/B),i=r+V;return{seconds:Number(i.toFixed(3)),travel:e=>Number((r*(e.length/n||1)/i).toFixed(4))}}function G(e,t){let n=n=>n/(e.length||1)*t,r=U*t*Math.min(1,300/(e.length||1)),i=[[0,0],[r,1]];for(let t of e.legs){if(!t.inside)continue;let e=n(t.from),a=n(t.to);i.push([Math.max(e-r/2,0),1],[e,0],[a,0],[a+r/2,1])}i.push([Math.max(t-r,0),1],[t,0],[1,0]);let a=[],o=[],s=0;for(let[e,t]of i){let n=Math.min(1,Math.max(s,e));a.push(Number(n.toFixed(4))),o.push(t),s=n}return{keyTimes:a.join(`;`),values:o.join(`;`)}}var K=11,q=6;function J(e){let{text:t,scale:n,color:r}=e,i=(t.length*K*.6+q*2)*n,a=17*n,o=14*n;return(0,m.jsxs)(`g`,{"data-testid":`flow-payload`,transform:`translate(${-i/2} ${o})`,children:[(0,m.jsx)(`rect`,{width:i,height:a,rx:a/2,fill:r}),(0,m.jsx)(`text`,{x:i/2,y:a/2,textAnchor:`middle`,dominantBaseline:`central`,fill:`white`,fontSize:K*n,fontWeight:500,fontFamily:`ui-sans-serif, system-ui, sans-serif`,children:t})]})}function Y(e,t,n){if(e.length===0)return``;let r=t=>e.map(e=>`${s(e)} [data-testid="${t}"]`).join(`,`),i=`${r(`arrow-stroke`)},${r(`arrow-head`)}`,a=e.flatMap(e=>[`arrow-stroke`,`arrow-head`].map(t=>`${s(e)} [data-testid="${t}"]:not([fill="none"])`)).join(`,`),o=n===`async`?`${r(`arrow-stroke`)}{stroke-dasharray:8 7!important}`:``;return[`${i}{stroke:${t}!important;transition:stroke 200ms ease,fill 200ms ease}`,`${a}{fill:${t}!important}`,o].join(``)}export{_ as a,v as i,b as n,y as o,g as r,L as t};

package/assets/editor/assets/frames-CRP8oPP8.js

@@ -1 +0,0 @@
-import{W as e}from"./style-BENGW2ZV.js";import{Ar as t,Mr as n,jr as r}from"./slides-D9bnXqtf.js";var i={simple:`Frame`,phone:`Phone`,tablet:`Tablet`,browser:`Browser`,window:`Desktop window`,lanes:`Swimlanes`,vlanes:`Vertical swimlanes`,boundary:`Boundary`};function a(e){return e===`lanes`||e===`vlanes`}function o(e){return e===`vlanes`}var s={simple:{width:960,height:540},phone:{width:270,height:560},tablet:{width:400,height:540},browser:{width:560,height:400},window:{width:520,height:360},lanes:{width:760,height:420},vlanes:{width:720,height:460},boundary:{width:360,height:260}},c=[`Lane 1`,`Lane 2`,`Lane 3`],l=.7;function u(e){return e&&e.length>0?e.length:c.length}function d(e,t){if(!t||t.length!==e||e===0)return Array.from({length:e},()=>1/e);let n=t.map(e=>Math.max(0,e)),r=n.reduce((e,t)=>e+t,0)||1;return n.map(e=>e/r)}function f(e,t,n){let r=d(e,n),i=[0],a=0;for(let e of r)a+=e*t,i.push(a);return i}var p=.06;function m(t,n,r){let i=[...t],a=i[n]+i[n+1],o=e(i[n]+r,p,a-p);return i[n]=o,i[n+1]=a-o,i}function h(t,n){let r=Math.min(n.width,n.height);return t===`phone`?Math.min(e(r*.13,10,44),n.width/2,n.height/2):t===`tablet`?Math.min(e(r*.07,8,26),n.width/2,n.height/2):t===`browser`||t===`window`?Math.min(8,n.width/2,n.height/2):10}function g(e,n){let r=e.y+n/2;return[0,1,2].map(n=>t(e.x+15+n*13,r,3.5))}var _=18,v=12,y=14,b=20,x=5,S=18;function C(i,a,o,s){let c=h(i,a),l=n(a.x,a.y,a.width,a.height,c),d=[];if(i===`phone`){let t=a.x+a.width/2;if(a.height>120&&a.width>80){let n=e(a.width*.16,24,56),i=a.y+_;d.push(r(t-n/2,i,t+n/2,i));let o=e(a.width*.3,40,110),s=a.y+a.height-v;d.push(r(t-o/2,s,t+o/2,s))}return{border:l,details:d}}if(i===`tablet`){let e=a.x+a.width/2;if(a.height>140&&a.width>100){d.push(t(e,a.y+y,2.5));let n=a.y+a.height-b;d.push(t(e,n,x))}return{border:l,details:d}}if(i===`browser`||i===`window`){let e=i===`browser`?36:32;if(a.height>e*2.2&&a.width>70&&(d.push(r(a.x,a.y+e,a.x+a.width,a.y+e)),d.push(...g(a,e)),i===`browser`&&a.width>200)){let t={x:a.x+56,y:a.y+(e-S)/2,width:a.width-56-16,height:S};d.push(n(t.x,t.y,t.width,t.height,S/2))}return{border:l,details:d}}if(i===`lanes`||i===`vlanes`){let e=u(o);if(i===`vlanes`){let t=f(e,a.width,s);for(let n=1;n<e;n+=1){let e=a.x+t[n];d.push(r(e,a.y,e,a.y+a.height))}return a.height>30*2.5&&d.push(r(a.x,a.y+30,a.x+a.width,a.y+30)),{border:l,details:d}}let t=f(e,a.height,s);for(let n=1;n<e;n+=1){let e=a.y+t[n];d.push(r(a.x,e,a.x+a.width,e))}return a.width>30*2.5&&d.push(r(a.x+30,a.y,a.x+30,a.y+a.height)),{border:l,details:d}}return{border:l,details:d}}export{C as a,f as c,m as d,l as i,d as l,s as n,h as o,i as r,a as s,c as t,o as u};

package/assets/editor/assets/icon-picker-NboB5Fvv.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{o as r}from"./editor-B0tARd79.js";import{t as i}from"./preload-helper-Czpn1I53.js";import{r as a,t as o}from"./icon-sources-CZI1h18s.js";import{t as s}from"./icons-DzW1j-r3.js";import{a as c,i as l,r as u,t as d,u as f}from"./PopoverPopup-BqGWd_uB.js";import{s as ee}from"./chrome-C2RCq3SI.js";import{n as p,t as te}from"./icon-catalog-CbUlEKtK.js";import{a as ne,c as m,d as h,f as g,i as re,l as _,n as ie,o as v,r as y,s as b,t as x,u as ae}from"./use-grid-keyboard-nav-B88Qw-cQ.js";var S=e(t(),1),C=new Set(`zodiac-aquarius.zodiac-aries.zodiac-cancer.zodiac-capricorn.zodiac-gemini.zodiac-leo.zodiac-libra.zodiac-ophiuchus.zodiac-pisces.zodiac-sagittarius.zodiac-scorpio.zodiac-taurus.zodiac-virgo.clock-1.clock-2.clock-3.clock-4.clock-5.clock-6.clock-7.clock-8.clock-9.clock-10.clock-11.clock-12.dice-1.dice-2.dice-3.dice-4.dice-5.dice-6.tally-1.tally-2.tally-3.tally-4.bean-off.beef-off.beer-off.candy-off.cannabis.cannabis-off.cigarette.cigarette-off.dna-off.egg-off.fish-off.hop.hop-off.milk-off.nut-off.wheat-off.wine-off.panda.rat.squirrel.worm.shrimp.amphora.anvil.axe.bow-arrow.castle.sword.pocket-knife.drama.venetian-mask.ferris-wheel.roller-coaster.tent-tree.drum.guitar.piano.metronome.turntable.boom-box.cassette-tape.videotape.towel-rack.soap-dispenser-droplet.shower-head.toilet.washing-machine.microwave.refrigerator.blinds.rocking-chair.shelving-unit.lamp-ceiling.lamp-desk.lamp-floor.lamp-wall-down.lamp-wall-up.birdhouse.mirror-rectangular.mirror-round.parasol.fence.drill.shovel.pickaxe.dam.utility-pole.tractor.cable-car.caravan.helicopter.kayak.volleyball.fishing-hook.fishing-rod.club.spade.hat-glasses.keyboard-music.astroid.spool.stone`.split(`.`)),oe=p.filter(e=>!C.has(e)),w={smile:[`mood`,`satisfied`],"smile-plus":[`mood`,`satisfied`],laugh:[`mood`,`satisfied`],meh:[`mood`],frown:[`mood`,`dissatisfied`],angry:[`mood`],annoyed:[`mood`]},T=n();function E(e,t){return e.label.toLowerCase().includes(t)||e.keywords&&e.keywords.some(e=>e.includes(t))?!0:h(e.label).startsWith(t)}var D=92;function O(e){let{onPick:t,onClose:n,library:c}=e,[l,u]=(0,S.useState)(`all`),[d,p]=(0,S.useState)(null),[h,C]=(0,S.useState)(``),O=(0,S.useRef)(null),k=(0,S.useRef)(null),[A,se]=(0,S.useState)(0),[j,ce]=(0,S.useState)({width:360,height:420}),[M,le]=(0,S.useState)({}),[N,P]=(0,S.useState)({}),{recent:F,remember:I}=ie(),[L,R]=(0,S.useState)(null),z=r(e=>e.setImageLibraryOpen),B=r(e=>e.coarsePointer);(0,S.useEffect)(()=>{s().ensureCatalog();let e=!0;return i(()=>import(`./icon-tags-Bw7m3Jke.js`).then(t=>{e&&le(t.default)}),[]).catch(()=>void 0),()=>{e=!1}},[]);let V=(0,S.useRef)(!0);(0,S.useEffect)(()=>(V.current=!0,()=>{V.current=!1}),[]);function H(e){s().loadAssetIndex(e).then(t=>{V.current&&P(n=>({...n,[e]:t}))}).catch(()=>void 0)}(0,S.useEffect)(()=>{for(let e of b)H(e);if(v.length===0)return;let e=()=>{for(let e of v)H(e)};if(typeof window.requestIdleCallback==`function`){let t=window.requestIdleCallback(e);return()=>window.cancelIdleCallback(t)}let t=window.setTimeout(e,400);return()=>window.clearTimeout(t)},[]),(0,S.useEffect)(()=>{let e=d?[d]:g(l);for(let t of v)e.includes(t)&&(h.trim()||l!==`all`)&&H(t)},[l,d,h]),(0,S.useEffect)(()=>{let e=k.current;if(!e)return;let t=()=>ce({width:e.clientWidth,height:e.clientHeight});t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[]);let U=(0,S.useMemo)(()=>{let e={};for(let[t,n]of Object.entries(te))(e[n]??=[]).push(t);return oe.map(t=>{let n=[...M[t]??[],...w[t]??[],...e[t]??[]];return{source:`lucide`,id:t,label:t,keywords:n.length>0?n:void 0}})},[M]),W=(0,S.useMemo)(()=>{let e={lucide:U};for(let t of o)e[t]=(N[t]??[]).map(([e,n,r])=>({source:t,id:n,label:e,keywords:Array.isArray(r)?r:typeof r==`string`?r.split(` `):void 0}));return e},[U,N]),G=ne((0,S.useMemo)(()=>{let e=h.trim().toLowerCase(),t=d?[d]:g(l),n=t.length>1,r=[];!e&&l===`all`&&F.length>0&&r.push({label:`Recent`,entries:F});for(let i of t){let t=n?_[i]:null;if(!e){let e=a(i)&&N[i]===void 0,n=W[i]??[];e?r.push({label:t,entries:[],tail:!0}):n.length>0&&r.push({label:t,entries:n});continue}let o=(W[i]??[]).filter(t=>E(t,e));o.length>0&&r.push({label:t,entries:o})}return r},[h,l,d,W,N,F]),j.width);function K(e){I(e),t(e.id,e.source)}let{focus:q,setFocus:ue,onKeyDown:de}=x({layout:G,scrollRef:k,onEnter:K});function fe(e){C(e),Y()}function pe(e){u(e),p(null),Y(),B||O.current?.focus()}function J(e){p(e),Y(),B||O.current?.focus()}function Y(){ue(0),R(null),k.current&&(k.current.scrollTop=0)}let me=A-D,he=A+j.height+D,ge=Math.max(1,Math.floor(j.width/46)),X=[];for(let e of G.rows)if(!(e.top+e.height<me)){if(e.top>he)break;if(e.type===`header`){X.push((0,T.jsxs)(`div`,{className:`absolute inset-x-0 flex items-baseline gap-1.5 px-1.5 pt-3`,style:{top:e.top},children:[(0,T.jsx)(`span`,{className:`text-[11px] uppercase tracking-wide text-gray-500`,children:e.label}),(0,T.jsx)(`span`,{className:`text-[10px] text-gray-400`,children:e.count})]},`header-${e.top}`));continue}if(e.type===`skeleton`){X.push((0,T.jsx)(`div`,{className:`absolute inset-x-0 flex`,style:{top:e.top},children:Array.from({length:ge},(e,t)=>(0,T.jsx)(`span`,{className:`flex h-[46px] w-[46px] items-center justify-center`,children:(0,T.jsx)(`span`,{className:`h-8 w-8 animate-pulse rounded-lg bg-black/5`})},t))},`skeleton-${e.top}`));continue}e.entries.forEach((t,n)=>{let r=e.startIndex+n,i=n*46,o=r===q;a(t.source)?X.push((0,T.jsx)(y,{source:t.source,slug:t.id,label:t.label,left:i,top:e.top,focused:o,onPick:()=>K(t),onHover:e=>R(e?t:null)},r)):X.push((0,T.jsx)(re,{name:t.id,left:i,top:e.top,focused:o,onPick:()=>K(t),onHover:e=>R(e?t:null)},r))})}let Z=m.find(e=>e.id===l)?.label??`All`,Q=ae(l),_e=l===`all`?`all`:d?_[d]:Z,$=L?.source??G.flat[q]?.source;return(0,T.jsxs)(`div`,{"data-overlay":!0,className:`flex w-[min(380px,calc(100vw-1rem))] flex-col overflow-hidden rounded-xl ${ee}`,style:{height:`min(70vh, 560px)`},onKeyDown:de,children:[(0,T.jsxs)(`div`,{className:`flex items-center gap-1 overflow-x-auto border-b border-black/5 px-2 py-2`,style:{scrollbarWidth:`none`},children:[m.map(e=>(0,T.jsx)(`button`,{type:`button`,onClick:()=>pe(e.id),className:`shrink-0 rounded-full px-2.5 py-1 text-xs transition-colors ${l===e.id?`bg-gray-200 text-gray-900`:`text-gray-500 hover:bg-gray-100 hover:text-gray-700`}`,children:e.label},e.id)),c&&(0,T.jsx)(`button`,{type:`button`,onClick:()=>{z(!0),n?.()},"aria-label":`Image library`,title:`Image library`,"data-testid":`image-library-open`,className:`ml-auto flex h-[26px] w-[26px] shrink-0 items-center justify-center rounded-full transition-colors hover:bg-gray-100`,children:(0,T.jsx)(`img`,{src:s().assetIconUrl(`drawnicons`,`solid-smiley-face`),alt:``,draggable:!1,className:`h-[19px] w-[19px]`})})]}),Q&&(0,T.jsxs)(`div`,{className:`flex items-center gap-1 border-b border-black/5 px-3 py-1.5`,children:[(0,T.jsx)(`button`,{type:`button`,onClick:()=>J(null),className:`rounded-full px-2 py-0.5 text-[11px] transition-colors ${d===null?`bg-gray-200 text-gray-900`:`text-gray-500 hover:bg-gray-100 hover:text-gray-700`}`,children:`All`}),Q.sources.map(e=>(0,T.jsx)(`button`,{type:`button`,onClick:()=>J(e),className:`rounded-full px-2 py-0.5 text-[11px] transition-colors ${d===e?`bg-gray-200 text-gray-900`:`text-gray-500 hover:bg-gray-100 hover:text-gray-700`}`,children:_[e]},e))]}),(0,T.jsxs)(`div`,{className:`flex items-center gap-2 border-b border-black/5 p-3`,children:[(0,T.jsx)(`input`,{ref:O,autoFocus:!B,value:h,"data-testid":`icon-picker-search`,onChange:e=>fe(e.target.value),placeholder:`Search ${_e} icons`,className:`h-9 flex-1 rounded-lg bg-black/5 px-3 text-sm text-gray-800 outline-none placeholder:text-gray-400 focus:bg-black/[0.07]`}),n&&(0,T.jsx)(`button`,{type:`button`,onClick:n,"aria-label":`Close`,className:`flex h-9 w-9 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-black/5`,children:(0,T.jsx)(f,{})})]}),(0,T.jsx)(`div`,{ref:k,onScroll:e=>se(e.currentTarget.scrollTop),className:`scrollbar-slim relative flex-1 overflow-y-auto p-2`,children:G.flat.length===0&&h.trim()?(0,T.jsx)(`div`,{className:`px-2 py-8 text-center text-sm text-gray-400`,children:`No icons match “${h}”.`}):(0,T.jsx)(`div`,{className:`relative`,style:{height:G.totalHeight},children:X})}),(0,T.jsxs)(`div`,{className:`flex items-center justify-between gap-2 border-t border-black/5 px-3 py-2 text-[11px] text-gray-400`,children:[(0,T.jsx)(`span`,{className:`truncate text-gray-600`,children:L?.label??G.flat[q]?.label??Z}),(0,T.jsxs)(`span`,{className:`shrink-0`,children:[G.flat.length,` · `,$?_[$]:Z]})]})]})}function k(e){let{onPick:t,onClose:n}=e;return(0,T.jsx)(c,{open:!0,modal:!1,onOpenChange:e=>{e||n()},children:(0,T.jsx)(l,{children:(0,T.jsx)(u,{anchor:()=>document.querySelector(`[data-canvas-toolbar]`),side:`right`,align:`start`,sideOffset:8,children:(0,T.jsx)(d,{finalFocus:!1,children:(0,T.jsx)(O,{onPick:t,onClose:n,library:!0})})})})})}export{k as IconPicker,O as IconPickerContent};

package/assets/editor/assets/image-library-Bb6bV6eK.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{i as r}from"./config-a_lz-57R.js";import{o as ee}from"./editor-B0tARd79.js";import{i as te,r as ne,t as i}from"./icons-DzW1j-r3.js";import{t as re}from"./IconLoader2-BQaF1LKo.js";import{t as ie}from"./IconSearch-C1K0_Pq_.js";import{s as ae}from"./asset-glyph-B3c--Mx2.js";import{n as oe}from"./surface-Dke4SWpE.js";import{i as a,n as o,r as se,t as ce}from"./DialogRoot-mHGRFW9m.js";import{a as le,n as ue,r as de,t as fe}from"./use-grid-keyboard-nav-B88Qw-cQ.js";var s=e(t(),1),c=n(),l=64,u=16,d=2*l;function f(e,t){return e.label.toLowerCase().includes(t)||(e.keywords??[]).some(e=>e.includes(t))}var p={face:`M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-3.4 6.4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm6.8 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-8 5.3c.9 2.3 2.6 3.6 4.6 3.6s3.7-1.3 4.6-3.6c-1.5.9-3 1.3-4.6 1.3s-3.1-.4-4.6-1.3Z`,mark:`M20.6 4.6 22 6.7l-11.6 12L2 11.6l1.7-1.9 6.4 5.3L20.6 4.6Z`,object:`M12 1.8l9 5v10.4l-9 5-9-5V6.8l9-5Zm0 2.5L6 7.6l6 3.3 6-3.3-6-3.3ZM4.8 9.3v6.6l6.1 3.4v-6.6L4.8 9.3Zm14.4 0-6.1 3.4v6.6l6.1-3.4V9.3Z`,people:`M8.2 3.6a3.2 3.2 0 1 1 0 6.4 3.2 3.2 0 0 1 0-6.4Zm8.3 1.6a2.6 2.6 0 1 1 0 5.2 2.6 2.6 0 0 1 0-5.2ZM8.2 11.3c3 0 5.3 1.9 5.3 4.7V20H2.9v-4c0-2.8 2.3-4.7 5.3-4.7Zm8.3 1c2.4 0 4.3 1.6 4.3 4V19h-5.9v-3c0-1.2-.4-2.3-1-3.2a7 7 0 0 1 2.6-.5Z`,scene:`M4.5 3.5h15A2.5 2.5 0 0 1 22 6v12a2.5 2.5 0 0 1-2.5 2.5h-15A2.5 2.5 0 0 1 2 18V6a2.5 2.5 0 0 1 2.5-2.5Zm12 3.2a1.9 1.9 0 1 0 0 3.8 1.9 1.9 0 0 0 0-3.8ZM5 17.6h14.2l-4.9-6.6-3.4 4.6-2.2-2.7L5 17.6Z`,solid:`M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2.4a7.6 7.6 0 1 0 0 15.2 7.6 7.6 0 0 0 0-15.2Zm0 0v15.2a7.6 7.6 0 0 0 0-15.2Z`},pe=`M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z`;function m(e){return e.path?(0,c.jsx)(`svg`,{className:`h-4 w-4 shrink-0`,viewBox:`0 0 24 24`,fill:`currentColor`,"aria-hidden":`true`,children:(0,c.jsx)(`path`,{fillRule:`evenodd`,d:e.path})}):null}function me(e){let t=new Map;for(let n of e){let e=t.get(n.group)??[];e.push(n),t.set(n.group,e)}return[...t.entries()].map(([e,t])=>({name:e,total:t.reduce((e,t)=>e+t.count,0),subs:t.sort((e,t)=>e.subgroup.localeCompare(t.subgroup))})).sort((e,t)=>e.name.localeCompare(t.name))}var h=`flex w-full cursor-pointer items-center gap-2 rounded-lg px-2 py-[5px] text-left text-[12.5px] outline-none transition-colors`;function he(){return(0,c.jsx)(`div`,{"aria-hidden":!0,children:[64,40,44,52,48,44,40].map((e,t)=>(0,c.jsxs)(`div`,{className:`flex items-center gap-2 px-2 py-[5px]`,children:[(0,c.jsx)(`span`,{className:`h-4 w-4 shrink-0 animate-pulse rounded bg-black/5`}),(0,c.jsx)(`span`,{className:`h-3 animate-pulse rounded bg-black/5`,style:{width:e}}),(0,c.jsx)(`span`,{className:`ml-auto h-3 w-7 shrink-0 animate-pulse rounded bg-black/5`})]},t))})}function g(e){return{source:`drawnicons`,id:e[0],label:e[1],keywords:e[2]?e[2].split(` `):void 0,style:e[7]}}function _(e,t){e(e=>{let{[t]:n,...r}=e;return r})}function v(e){let{open:t,onOpenChange:n,onPick:v}=e,{searchIcons:y}=r(),{remember:ge}=ue(),_e=ee(e=>e.coarsePointer),[b,x]=(0,s.useState)(``),[S,ve]=(0,s.useState)([]),[ye,be]=(0,s.useState)(null),[C,w]=(0,s.useState)(()=>i().cachedLibraryGroups(`drawnicons`)??`loading`),[T,xe]=(0,s.useState)(null),[Se,Ce]=(0,s.useState)(null),[E,D]=(0,s.useState)({}),[O,k]=(0,s.useState)({query:``,failed:!1,entries:[]}),A=(0,s.useRef)([]),j=(0,s.useRef)(null),M=(0,s.useRef)(null),[N,we]=(0,s.useState)(0),[P,Te]=(0,s.useState)({width:480,height:360}),[Ee,F]=(0,s.useState)(null);(0,s.useEffect)(()=>{if(!t)return;let e=!0;return i().loadAssetIndex(`drawnicons`).then(t=>{if(e){let e=t.map(([e,t,n])=>({source:`drawnicons`,id:t,label:e,keywords:Array.isArray(n)?n:void 0}));A.current=e,ve(e)}}).catch(()=>void 0),te(`drawnicons`).then(t=>{e&&t&&be(t)}).catch(()=>void 0),i().loadLibraryGroups(`drawnicons`).then(t=>{e&&w(t.length>0?t:`unavailable`)}).catch(()=>{e&&w(`unavailable`)}),()=>{e=!1}},[t]),(0,s.useEffect)(()=>{let e=b.trim().toLowerCase();if(!y||e.length<2){k({query:``,failed:!1,entries:[]});return}let t=!0,n=window.setTimeout(()=>{y(e).then(n=>{t&&k({query:e,failed:!1,entries:n.map(e=>({source:`drawnicons`,id:e.slug,label:e.name}))})}).catch(()=>{t&&k({query:e,failed:!0,entries:A.current.filter(t=>f(t,e))})})},150);return()=>{t=!1,window.clearTimeout(n)}},[b,y]);let I=(0,s.useRef)(null),De=(0,s.useCallback)(e=>{if(M.current=e,I.current?.disconnect(),I.current=null,e){let t=()=>Te({width:e.clientWidth-u,height:e.clientHeight});t();let n=new ResizeObserver(t);n.observe(e),I.current=n}},[]);function L(){Ae(0),F(null),M.current&&(M.current.scrollTop=0)}function Oe(e){ne(`drawnicons`,e.group,e.subgroup).then(t=>{t&&D(n=>({...n,[e.id]:{count:t.count,entries:t.entries.map(g)}}))}).catch(()=>{D(t=>({...t,[e.id]:`error`}))})}function R(e){xe(e),x(``),L(),e&&(E[e.id]===void 0||E[e.id]===`error`)&&(E[e.id]===`error`&&_(D,e.id),Oe(e))}let z=b.trim().toLowerCase(),B=!z&&T?E[T.id]:void 0,V=(0,s.useMemo)(()=>z?y&&z.length>=2?O.query===z?O.entries:null:S.filter(e=>f(e,z)):T?B===void 0?null:B===`error`?[]:B.entries:S,[z,S,O,y,T,B]),H=(0,s.useRef)([]);V&&(H.current=V);let U=V??H.current,W=V===null,ke=B===`error`,G=le((0,s.useMemo)(()=>[{label:null,entries:U}],[U]),P.width,l);function K(e){ge(e),n(!1),v(e.id,e.source)}let{focus:q,setFocus:Ae,onKeyDown:je}=fe({layout:G,scrollRef:M,onEnter:K});function Me(e){x(e),L()}let Ne=N-d,Pe=N+P.height+d,Fe=Math.max(1,Math.floor(P.width/l)),J=P.width/Fe,Y=[];for(let e of G.rows)if(!(e.top+e.height<Ne)){if(e.top>Pe)break;e.type===`icons`&&e.entries.forEach((t,n)=>{let r=e.startIndex+n;Y.push((0,c.jsx)(de,{source:`drawnicons`,slug:t.id,label:t.label,left:n*J+(J-l)/2,top:e.top,focused:r===q,onPick:()=>K(t),onHover:e=>{F(e?t:null),e&&ae(`drawnicons`,t.id)},size:l},t.id))})}let X=ye?.count,Ie=(0,s.useMemo)(()=>Array.isArray(C)?me(C):[],[C]),Le=C!==`unavailable`,Z=C===`loading`,Q=!!z&&O.query===z&&O.failed,$=W?`Searching…`:z?Q?`Couldn't reach the image search — check your connection and try again.`:`No images match “${b}”.`:ke?`Couldn't load these — pick it again to retry.`:`Loading images…`;function Re(){return z?Q?G.flat.length>0?`${G.flat.length.toLocaleString()} offline results`:`search unavailable`:`${G.flat.length.toLocaleString()} results`:T?`${(B!==`error`&&B?.count||T.count).toLocaleString()} images in ${T.subgroup}`:X?`${X.toLocaleString()} images`:`${G.flat.length.toLocaleString()} featured`}return(0,c.jsx)(ce,{open:t,onOpenChange:n,children:(0,c.jsxs)(o,{children:[(0,c.jsx)(a,{className:`fixed inset-0 bg-gray-900/15`}),(0,c.jsxs)(se,{initialFocus:_e?void 0:j,"data-overlay":!0,"data-testid":`image-library`,className:`fixed left-1/2 top-[16%] flex w-[min(720px,92vw)] -translate-x-1/2 flex-col overflow-hidden rounded-xl outline-none ${oe.popup}`,style:{height:`min(64vh, 560px)`},onKeyDown:e=>{e.target?.closest?.(`[data-library-sidebar]`)||je(e),e.stopPropagation()},children:[(0,c.jsxs)(`div`,{className:`flex shrink-0 items-center gap-2 border-b border-[var(--chrome-ring)] px-3.5`,children:[W?(0,c.jsx)(re,{size:15,stroke:1.75,className:`shrink-0 animate-spin text-[var(--chrome-fg-400)]`}):(0,c.jsx)(ie,{size:15,stroke:1.75,className:`shrink-0 text-[var(--chrome-fg-400)]`}),(0,c.jsx)(`input`,{ref:j,"data-testid":`image-library-search`,value:b,onChange:e=>Me(e.target.value),placeholder:X?`Search ${X.toLocaleString()} images…`:`Search images…`,className:`w-full bg-transparent py-2.5 text-[13.5px] text-[var(--chrome-fg-900)] outline-none placeholder:text-[var(--chrome-fg-400)]`})]}),(0,c.jsxs)(`div`,{className:`flex min-h-0 flex-1`,children:[Le&&(0,c.jsx)(`nav`,{"data-library-sidebar":!0,"data-testid":`image-library-sidebar`,"aria-label":`Image categories`,"aria-busy":Z||void 0,className:`scrollbar-slim w-[176px] shrink-0 overflow-y-auto border-r border-[var(--chrome-ring)] p-1.5`,children:Z?(0,c.jsx)(he,{}):(0,c.jsxs)(c.Fragment,{children:[(0,c.jsxs)(`button`,{type:`button`,onClick:()=>R(null),"aria-current":T?void 0:`true`,className:`${h} ${T?`text-[var(--chrome-fg-700)] hover:bg-[var(--chrome-hover)]`:`bg-[var(--chrome-hover)] font-medium text-[var(--chrome-fg-900)]`}`,children:[(0,c.jsx)(m,{path:pe}),(0,c.jsx)(`span`,{className:`truncate`,children:`All images`}),X!=null&&(0,c.jsx)(`span`,{className:`ml-auto shrink-0 text-[11px] font-normal text-[var(--chrome-fg-400)]`,children:X.toLocaleString()})]}),Ie.map(e=>{if(e.subs.length===1){let t=e.subs[0],n=T?.id===t.id;return(0,c.jsxs)(`button`,{type:`button`,onClick:()=>R(t),"aria-current":n?`true`:void 0,className:`${h} capitalize ${n?`bg-[var(--chrome-hover)] font-medium text-[var(--chrome-fg-900)]`:`text-[var(--chrome-fg-700)] hover:bg-[var(--chrome-hover)]`}`,children:[(0,c.jsx)(m,{path:p[e.name]}),(0,c.jsx)(`span`,{className:`truncate`,children:e.name}),(0,c.jsx)(`span`,{className:`ml-auto shrink-0 text-[11px] font-normal text-[var(--chrome-fg-400)]`,children:e.total.toLocaleString()})]},e.name)}let t=Se===e.name;return(0,c.jsxs)(`div`,{children:[(0,c.jsxs)(`button`,{type:`button`,onClick:()=>Ce(t?null:e.name),"aria-expanded":t,className:`${h} capitalize text-[var(--chrome-fg-700)] hover:bg-[var(--chrome-hover)]`,children:[(0,c.jsx)(m,{path:p[e.name]}),(0,c.jsx)(`span`,{className:`truncate`,children:e.name}),(0,c.jsx)(`span`,{className:`ml-auto shrink-0 text-[11px] text-[var(--chrome-fg-400)]`,children:e.total.toLocaleString()})]}),t&&e.subs.map(e=>{let t=T?.id===e.id;return(0,c.jsxs)(`button`,{type:`button`,onClick:()=>R(e),"aria-current":t?`true`:void 0,className:`${h} pl-8 ${t?`bg-[var(--chrome-hover)] font-medium text-[var(--chrome-fg-900)]`:`text-[var(--chrome-fg-500)] hover:bg-[var(--chrome-hover)] hover:text-[var(--chrome-fg-700)]`}`,children:[(0,c.jsx)(`span`,{className:`truncate`,children:e.subgroup}),(0,c.jsx)(`span`,{className:`ml-auto shrink-0 text-[11px] font-normal text-[var(--chrome-fg-400)]`,children:e.count.toLocaleString()})]},e.id)})]},e.name)})]})}),(0,c.jsx)(`div`,{ref:De,onScroll:e=>we(e.currentTarget.scrollTop),className:`scrollbar-slim relative min-w-0 flex-1 overflow-y-auto overflow-x-hidden p-2`,children:G.flat.length===0?(0,c.jsx)(`div`,{className:`px-2 py-8 text-center text-sm text-gray-400`,children:$}):(0,c.jsx)(`div`,{className:`relative`,style:{height:G.totalHeight},children:Y})})]}),(0,c.jsxs)(`div`,{className:`flex shrink-0 items-center justify-between gap-2 border-t border-black/5 px-3 py-2 text-[11px] text-gray-400`,children:[(0,c.jsx)(`span`,{className:`truncate text-gray-600`,children:Ee?.label??G.flat[q]?.label??(!z&&T?`${T.group} / ${T.subgroup}`:`Image library`)}),(0,c.jsx)(`span`,{className:`shrink-0`,children:Re()})]})]})]})})}export{v as ImageLibraryDialog};