loom-spec 0.4.0 → 0.5.0

package/dist/view/assets/TimelineView-CsYV15RD.js

@@ -1,16 +0,0 @@
-import{c as te,r as c,j as e,i as Q,s as de,a as se,l as ne,T as ue,P as me,D as fe}from"./index-CqF2JC9l.js";/**
- * @license lucide-react v0.460.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const he=te("Pause",[["rect",{x:"14",y:"4",width:"4",height:"16",rx:"1",key:"zuxfzm"}],["rect",{x:"6",y:"4",width:"4",height:"16",rx:"1",key:"1okwgv"}]]);/**
- * @license lucide-react v0.460.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const pe=te("Play",[["polygon",{points:"6 3 20 12 6 21 6 3",key:"1oa8hb"}]]);/**
- * @license lucide-react v0.460.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */const ve=te("SkipBack",[["polygon",{points:"19 20 9 12 19 4 19 20",key:"o2sva"}],["line",{x1:"5",x2:"5",y1:"19",y2:"5",key:"1ocqjk"}]]),M=110,S=30,R=52,K=24,ae=8,xe=4,G=8,ee=10;function ge(t){const o=Math.max(t/10,1),v=Math.floor(Math.log10(o)),p=Math.pow(10,v),m=o/p;let x;return m<1.5?x=p:m<3.5?x=2*p:m<7.5?x=5*p:x=10*p,Math.max(x,1)}function J(t){return t===0?"0":t<1e3?`${t}ms`:t%1e3===0?`${t/1e3}s`:`${(t/1e3).toFixed(2)}s`}function je(t){const j=[],o=new Set;for(const v of t.tracks??[])o.has(v.id)||(o.add(v.id),j.push(v));for(const v of t.events??[]){const p=v.track??`node:${v.node}`;o.has(p)||(o.add(p),j.push({id:p,label:p}))}return j.length===0&&j.push({id:"default",label:""}),j}function ie(t){return t.track??`node:${t.node}`}function re(t){return Math.round(t/ee)*ee}function ye({timeline:t,diagram:j,nodeTypes:o,selectedEventId:v,onSelectEvent:p,onUpdateEvent:m,playheadMs:x,onScrub:n,zoom:u=1}){const N=c.useRef(null),k=c.useRef(null),[P,z]=c.useState(800),[i,f]=c.useState(null),[d,h]=c.useState(!1);c.useEffect(()=>{const a=N.current;if(!a)return;const l=new ResizeObserver(s=>{const r=s[0];r&&z(r.contentRect.width)});return l.observe(a),z(a.getBoundingClientRect().width),()=>l.disconnect()},[]);const b=c.useMemo(()=>{const a=je(t),s=(t.events??[]).reduce((E,O)=>Math.max(E,O.start_ms+O.duration_ms),0),r=new Map;a.forEach((E,O)=>r.set(E.id,O));const y=Math.max(P-M-K,100)*u,_=s>0?y/s:1,Z=M+y+K,A=ge(s/u),Y=[];for(let E=0;E<=s+A*.001;E+=A)Y.push(E);const q=new Map;j.nodes.forEach(E=>q.set(E.id,E.type));const B=E=>{const O=q.get(E.node),U=O?o.types[O]:void 0;return(U==null?void 0:U.color)??"#71717a"},oe=S+a.length*R+8;return{tracks:a,trackOf:r,totalMs:s,pixelsPerMs:_,svgWidth:Z,tickStep:A,ticks:Y,colorOf:B,svgHeight:oe}},[t,j,o,P,u]),{tracks:T,trackOf:W,ticks:H,pixelsPerMs:C,colorOf:I,svgHeight:D,svgWidth:w,totalMs:$}=b,V=a=>{var s;if(!i||i.eventId!==a.id)return{event:a};const l=i.originalEvent;if(i.mode==="move"){const r=Math.max(0,re(l.start_ms+i.deltaMs)),g=W.get(ie(l))??0,y=Math.min(Math.max(0,g+i.deltaTracks),T.length-1),_=((s=T[y])==null?void 0:s.id)??l.track;return{event:{...l,start_ms:r,track:_}}}else{const r=Math.max(ee,re(l.duration_ms+i.deltaMs));return{event:{...l,duration_ms:r}}}};c.useEffect(()=>{if(!i)return;const a=s=>{const r=s.clientX-i.startX,g=s.clientY-i.startY,y=r/i.pixelsPerMs,_=Math.round(g/R);f({...i,deltaMs:y,deltaTracks:_})},l=()=>{const s=V(i.originalEvent);m&&(s.event.start_ms!==i.originalEvent.start_ms||s.event.duration_ms!==i.originalEvent.duration_ms||s.event.track!==i.originalEvent.track)&&m(i.eventId,()=>s.event),f(null)};return document.addEventListener("pointermove",a),document.addEventListener("pointerup",l),()=>{document.removeEventListener("pointermove",a),document.removeEventListener("pointerup",l)}},[i,m]),c.useEffect(()=>{if(!d||!n)return;const a=k.current;if(!a)return;const l=r=>{const g=a.getBoundingClientRect(),y=r.clientX-g.left-M,_=Math.max(0,Math.min($,y/C));n(_)},s=()=>h(!1);return document.addEventListener("pointermove",l),document.addEventListener("pointerup",s),()=>{document.removeEventListener("pointermove",l),document.removeEventListener("pointerup",s)}},[d,n,$,C]);const X=(a,l,s)=>{m&&(a.stopPropagation(),f({mode:s,eventId:l.id,startX:a.clientX,startY:a.clientY,originalEvent:l,pixelsPerMs:C,deltaMs:0,deltaTracks:0}))},F=a=>x===void 0?!1:x>=a.start_ms&&x<=a.start_ms+a.duration_ms,L=x!==void 0?M+x*C:null;return e.jsx("div",{className:"timeline-wrap",ref:N,children:e.jsxs("svg",{ref:k,className:"timeline-svg",width:w,height:D,onClick:a=>{a.target.tagName==="svg"&&p(null)},children:[T.map((a,l)=>{const s=S+l*R;return e.jsxs("g",{children:[a.color&&e.jsx("rect",{x:M,y:s,width:w-M-K,height:R,fill:a.color,opacity:.4}),e.jsx("line",{x1:0,x2:w,y1:s,y2:s,className:"timeline-lane-sep"}),e.jsx("text",{x:12,y:s+R/2,className:"timeline-track-label",dominantBaseline:"middle",children:a.label})]},`lane-${a.id}`)}),e.jsx("line",{x1:0,x2:w,y1:S+T.length*R,y2:S+T.length*R,className:"timeline-lane-sep"}),e.jsx("rect",{x:M,y:0,width:w-M-K,height:S,fill:"transparent",style:{cursor:n?"ew-resize":"default"},onPointerDown:a=>{var g;if(!n)return;a.preventDefault();const l=(g=k.current)==null?void 0:g.getBoundingClientRect();if(!l)return;const s=a.clientX-l.left-M,r=Math.max(0,Math.min($,s/C));n(r),h(!0)}}),e.jsxs("g",{className:"timeline-axis",children:[e.jsx("line",{x1:M,x2:w-K,y1:S-1,y2:S-1,className:"timeline-axis-line"}),H.map(a=>{const l=M+a*C;return e.jsxs("g",{children:[e.jsx("line",{x1:l,x2:l,y1:S-6,y2:S,className:"timeline-tick-mark"}),e.jsx("line",{x1:l,x2:l,y1:S,y2:D,className:"timeline-tick-grid"}),e.jsx("text",{x:l,y:S-9,className:"timeline-tick-label",textAnchor:"middle",children:J(a)})]},`tick-${a}`)})]}),(t.events??[]).map(a=>{const{event:l}=V(a),s=W.get(ie(l))??0,r=M+l.start_ms*C,g=Math.max(l.duration_ms*C,xe),y=S+s*R+ae,_=R-ae*2,Z=I(l),A=a.id===v,Y=F(l),q=(i==null?void 0:i.eventId)===a.id;return e.jsxs("g",{className:`timeline-clip kind-${l.kind??"compute"}${A?" selected":""}${Y?" active":""}${q?" ghost":""}`,onClick:B=>{B.stopPropagation(),p(a.id)},children:[e.jsx("rect",{x:r,y,width:g,height:_,rx:4,ry:4,fill:Z,fillOpacity:Y?1:.85,stroke:A?"var(--accent)":Z,strokeWidth:A?2:1,style:{cursor:m?"grab":"pointer"},onPointerDown:B=>X(B,a,"move")}),m&&g>G&&e.jsx("rect",{x:r+g-G,y,width:G,height:_,fill:"transparent",style:{cursor:"ew-resize"},onPointerDown:B=>X(B,a,"resize")}),g>40&&l.label&&e.jsx("text",{x:r+6,y:y+_/2,className:"timeline-clip-label",dominantBaseline:"middle",pointerEvents:"none",children:l.label}),e.jsx("title",{children:(l.label??l.node)+` — ${J(l.start_ms)}, ${J(l.duration_ms)} long`})]},a.id)}),L!==null&&e.jsxs("g",{className:"timeline-playhead",pointerEvents:"none",children:[e.jsx("line",{x1:L,x2:L,y1:4,y2:D,className:"timeline-playhead-line"}),e.jsx("polygon",{points:`${L-5},4 ${L+5},4 ${L},14`,className:"timeline-playhead-handle"})]})]})})}function le(t){return t<1e3?`${t} ms`:`${(t/1e3).toFixed(2)} s`}function Ne({selectedEvent:t,diagram:j}){if(!t)return e.jsx("div",{className:"inspector",children:e.jsx("div",{className:"empty",children:"Click a clip to inspect"})});const o=j.nodes.find(m=>m.id===t.node),v=t.code_refs??[],p=t.tags??[];return e.jsxs("div",{className:"inspector",children:[e.jsx("span",{className:"type-tag",style:{background:"#71717a",color:"#fff"},children:"EVENT"}),t.label&&e.jsx("h2",{children:t.label}),e.jsxs("div",{className:"field",children:[e.jsx("div",{className:"field-label",children:"Node"}),e.jsxs("div",{className:"field-value",children:[e.jsx("code",{children:t.node}),o&&e.jsxs("span",{style:{color:"var(--text-muted)"},children:[" · ",o.label]})]})]}),e.jsxs("div",{className:"field",children:[e.jsx("div",{className:"field-label",children:"Timing"}),e.jsxs("div",{className:"field-value",children:["starts ",le(t.start_ms)," ·"," ","lasts ",le(t.duration_ms)]})]}),t.kind&&e.jsxs("div",{className:"field",children:[e.jsx("div",{className:"field-label",children:"Kind"}),e.jsx("div",{className:"field-value",children:t.kind})]}),t.track&&e.jsxs("div",{className:"field",children:[e.jsx("div",{className:"field-label",children:"Track"}),e.jsx("div",{className:"field-value",children:e.jsx("code",{children:t.track})})]}),t.triggered_by&&e.jsxs("div",{className:"field",children:[e.jsx("div",{className:"field-label",children:"Triggered by"}),e.jsx("div",{className:"field-value",children:e.jsx("code",{children:t.triggered_by})})]}),t.description&&e.jsxs("div",{className:"field",children:[e.jsx("div",{className:"field-label",children:"Description"}),e.jsx("div",{className:"field-value",children:t.description})]}),v.length>0&&e.jsxs("div",{className:"field",children:[e.jsx("div",{className:"field-label",children:"Code refs"}),v.map((m,x)=>e.jsxs("div",{className:"code-ref",children:[m.path,m.symbol&&e.jsxs("span",{style:{color:"var(--text-muted)"},children:[" · ",m.symbol]}),m.lines&&e.jsxs("span",{style:{color:"var(--text-muted)"},children:[" · L",m.lines]})]},x))]}),p.length>0&&e.jsxs("div",{className:"field",children:[e.jsx("div",{className:"field-label",children:"Tags"}),e.jsx("div",{children:p.map(m=>e.jsx("span",{className:"tag",children:m},m))})]}),e.jsxs("div",{className:"field",children:[e.jsx("div",{className:"field-label",children:"ID"}),e.jsx("div",{className:"field-value",children:e.jsx("code",{children:t.id})})]})]})}const ke=[.25,.5,1,2,4];function ce(t){return t<1e3?`${Math.round(t)} ms`:`${(t/1e3).toFixed(2)} s`}function be({playing:t,positionMs:j,totalMs:o,speed:v,onPlayPause:p,onReset:m,onSpeed:x,actions:n}){return e.jsxs("div",{className:"transport-bar",children:[e.jsx("button",{className:"transport-btn",onClick:p,title:t?"Pause (space)":"Play (space)","aria-label":t?"Pause":"Play",children:t?e.jsx(he,{size:14}):e.jsx(pe,{size:14})}),e.jsx("button",{className:"transport-btn",onClick:m,title:"Reset to 0 (home)","aria-label":"Reset",children:e.jsx(ve,{size:14})}),e.jsxs("div",{className:"transport-position",children:[e.jsx("code",{children:ce(j)}),e.jsxs("span",{className:"muted",children:[" / ",ce(o)]})]}),n,e.jsx("div",{className:"transport-spacer"}),e.jsxs("label",{className:"transport-speed",children:[e.jsx("span",{className:"muted",children:"Speed"}),e.jsx("select",{value:v,onChange:u=>x(Number(u.target.value)),children:ke.map(u=>e.jsxs("option",{value:u,children:[u,"×"]},u))})]})]})}function we({diagram:t,nodeTypes:j,anchorRef:o,onPick:v,onClose:p}){const m=c.useRef(null),[x,n]=c.useState(null);return c.useLayoutEffect(()=>{function u(){const N=o.current;if(!N)return;const k=N.getBoundingClientRect();n({top:k.bottom+6,right:Math.max(8,window.innerWidth-k.right)})}return u(),window.addEventListener("resize",u),()=>window.removeEventListener("resize",u)},[o]),c.useEffect(()=>{function u(N){var k;if(m.current&&!m.current.contains(N.target)){if((k=o.current)!=null&&k.contains(N.target))return;p()}}return document.addEventListener("mousedown",u),()=>document.removeEventListener("mousedown",u)},[p,o]),x?e.jsxs("div",{className:"add-node-menu",ref:m,style:{top:x.top,right:x.right},children:[e.jsx("div",{className:"add-node-menu-title",children:"Add event on…"}),t.nodes.length===0?e.jsx("div",{className:"switcher-empty",children:"No nodes in this diagram"}):t.nodes.map(u=>{const N=j.types[u.type],k=(N==null?void 0:N.color)??"#71717a";return e.jsxs("button",{className:"add-node-item",onClick:()=>v(u.id),style:{"--node-color":k},children:[e.jsx("span",{className:"add-node-color"}),e.jsxs("div",{className:"add-node-text",children:[e.jsx("div",{className:"add-node-label",children:u.label}),e.jsx("code",{className:"add-node-key",children:u.id})]})]},u.id)})]}):null}const Ee=500;function Me(t){const[j,o]=c.useState({timeline:null,diagram:null,nodeTypes:null,loadError:null,saveStatus:"idle",saveError:null,connectionStatus:"connecting"}),v=c.useRef(null),p=c.useRef(null),m=c.useRef(j);m.current=j;const x=c.useRef(!1);c.useEffect(()=>{let i=!1;x.current=!1;async function f(){try{const d=await se(t);if(i)return;const h=await ne(d.diagram);if(i)return;p.current=d,x.current=!0,o(b=>({...b,timeline:d,diagram:h.diagram,nodeTypes:h.nodeTypes,loadError:null}))}catch(d){if(i)return;o(h=>({...h,loadError:d instanceof Error?d.message:String(d)}))}}return f(),()=>{i=!0}},[t]);const n=c.useCallback(()=>{Q()||(v.current&&clearTimeout(v.current),o(i=>({...i,saveStatus:"dirty",saveError:null})),v.current=setTimeout(async()=>{const i=p.current;if(i){o(f=>({...f,saveStatus:"saving"}));try{await de(i),o(f=>({...f,saveStatus:"saved"}))}catch(f){o(d=>({...d,saveStatus:"error",saveError:f instanceof Error?f.message:String(f)}))}}},Ee))},[]),u=c.useCallback(i=>{x.current&&(o(f=>{if(!f.timeline)return f;const d=i(f.timeline);return p.current=d,{...f,timeline:d}}),n())},[n]),N=c.useCallback((i,f)=>{u(d=>({...d,events:d.events.map(h=>h.id===i?f(h):h)}))},[u]),k=c.useCallback(i=>{u(f=>({...f,events:[...f.events,i]}))},[u]),P=c.useCallback(i=>{u(f=>({...f,events:f.events.filter(d=>d.id!==i)}))},[u]);return c.useEffect(()=>{if(Q()){o(d=>({...d,connectionStatus:"connected"}));return}o(d=>({...d,connectionStatus:"connecting"}));const i=new EventSource("/api/events");i.onopen=()=>o(d=>({...d,connectionStatus:"connected"})),i.onerror=()=>o(d=>({...d,connectionStatus:"disconnected"}));const f=async()=>{const d=m.current.saveStatus;if(!(d==="dirty"||d==="saving"))try{const h=await se(t),b=await ne(h.diagram);p.current=h,o(T=>({...T,timeline:h,diagram:b.diagram,nodeTypes:b.nodeTypes,saveStatus:"idle",saveError:null}))}catch{}};return i.addEventListener("change",d=>{try{const h=JSON.parse(d.data),b=m.current.timeline;(h.type==="timeline-changed"&&h.id===t||h.type==="diagram-changed"&&b&&h.id===b.diagram||h.type==="node-types-changed")&&f()}catch{}}),()=>{i.close()}},[t]),c.useEffect(()=>()=>{v.current&&clearTimeout(v.current)},[]),c.useMemo(()=>({...j,updateEvent:N,addEvent:k,deleteEvent:P}),[j,N,k,P])}function Se(t){const j=new Set(t.events.map(v=>v.id));let o=t.events.length+1;for(;j.has(`ev${o}`);)o++;return`ev${o}`}function _e({id:t,diagrams:j,timelines:o,isDefault:v,onClickHome:p,onNavigate:m,onCreateDiagram:x}){const n=Me(t),[u,N]=c.useState(null),[k,P]=c.useState(!1),z=c.useRef(null),[i,f]=c.useState(1),d=Q(),[h,b]=c.useState(0),[T,W]=c.useState(!1),[H,C]=c.useState(1),I=c.useRef(null),D=c.useRef(0),w=c.useMemo(()=>n.timeline?n.timeline.events.reduce((s,r)=>Math.max(s,r.start_ms+r.duration_ms),0):0,[n.timeline]),$=c.useMemo(()=>{const s=new Set;if(!n.timeline)return s;for(const r of n.timeline.events)h>=r.start_ms&&h<=r.start_ms+r.duration_ms&&s.add(r.node);return s},[n.timeline,h]),V=c.useMemo(()=>{const s=new Set;if(!n.diagram)return s;for(const r of n.diagram.edges){const g=r.from.indexOf(":"),y=g===-1?r.from:r.from.slice(0,g);$.has(y)&&s.add(r.id)}return s},[n.diagram,$]);c.useEffect(()=>{if(!T){I.current!==null&&(clearInterval(I.current),I.current=null);return}return D.current=performance.now(),I.current=setInterval(()=>{const s=performance.now(),r=s-D.current;D.current=s,b(g=>{const y=g+r*H;return y>=w?(W(!1),w):y})},16),()=>{I.current!==null&&clearInterval(I.current)}},[T,H,w]);const X=c.useCallback(()=>{w!==0&&W(s=>(!s&&h>=w&&b(0),!s))},[h,w]),F=c.useCallback(()=>{b(0),W(!1)},[]),L=c.useCallback(s=>{b(s)},[]),a=c.useCallback(s=>{const r=n.timeline;if(!r)return;const g=Math.max(0,Math.round(h)),y={id:Se(r),node:s,start_ms:g,duration_ms:200,kind:"compute"};n.addEvent(y),N(y.id),P(!1)},[n,h]);if(c.useEffect(()=>{const s=r=>{const g=r.target;g.tagName==="INPUT"||g.tagName==="TEXTAREA"||g.tagName==="SELECT"||(r.key===" "||r.code==="Space"?(r.preventDefault(),X()):r.key==="Home"?(r.preventDefault(),F()):(r.key==="Backspace"||r.key==="Delete")&&u&&!d&&(r.preventDefault(),n.deleteEvent(u),N(null)))};return document.addEventListener("keydown",s),()=>document.removeEventListener("keydown",s)},[X,F,u,n,d]),n.loadError)return e.jsxs("div",{className:"app timeline-app",children:[e.jsx("div",{className:"topbar",children:e.jsx("div",{className:"title",children:"loom-spec"})}),e.jsx("div",{className:"canvas-wrap",style:{padding:24},children:e.jsxs("code",{style:{color:"var(--status-stale)"},children:["Failed to load: ",n.loadError]})}),e.jsx("div",{className:"inspector",children:e.jsx("div",{className:"empty",children:"—"})})]});if(!n.timeline||!n.diagram||!n.nodeTypes)return e.jsxs("div",{className:"app timeline-app",children:[e.jsx("div",{className:"topbar",children:e.jsx("div",{className:"title",children:"loom-spec"})}),e.jsx("div",{className:"canvas-wrap",style:{padding:24,color:"var(--text-muted)"},children:"Loading timeline…"}),e.jsx("div",{className:"inspector",children:e.jsx("div",{className:"empty",children:"—"})})]});const l=u?n.timeline.events.find(s=>s.id===u)??null:null;return e.jsxs("div",{className:"app timeline-app",children:[e.jsx(ue,{viewKind:"timeline",viewId:t,title:n.timeline.title,subtitle:n.timeline.description,diagrams:j,timelines:o,saveStatus:n.saveStatus,saveError:n.saveError,connectionStatus:n.connectionStatus,onClickAdd:()=>{},addMenuOpen:!1,isDefault:v,onClickHome:p,onNavigate:m,onCreateDiagram:x,addButtonRef:null,hideAddButton:!0}),e.jsx(be,{playing:T,positionMs:h,totalMs:w,speed:H,onPlayPause:X,onReset:F,onSpeed:C,actions:e.jsxs(e.Fragment,{children:[!d&&e.jsxs("button",{ref:z,className:"transport-add-event",onClick:()=>P(s=>!s),title:"Add event at playhead",children:[e.jsx(me,{size:14})," Event"]}),e.jsxs("label",{className:"transport-zoom",children:[e.jsx("span",{className:"muted",children:"Zoom"}),e.jsxs("select",{value:i,onChange:s=>f(Number(s.target.value)),children:[e.jsx("option",{value:1,children:"1× (fit)"}),e.jsx("option",{value:2,children:"2×"}),e.jsx("option",{value:5,children:"5×"}),e.jsx("option",{value:10,children:"10×"}),e.jsx("option",{value:20,children:"20×"})]})]})]})}),k&&!d&&e.jsx(we,{diagram:n.diagram,nodeTypes:n.nodeTypes,anchorRef:z,onPick:a,onClose:()=>P(!1)}),e.jsx("div",{className:"canvas-wrap timeline-canvas-wrap",children:e.jsxs("div",{className:"timeline-split",children:[e.jsx("div",{className:"timeline-split-pane timeline-split-left",children:e.jsx(ye,{timeline:n.timeline,diagram:n.diagram,nodeTypes:n.nodeTypes,selectedEventId:u,onSelectEvent:N,onUpdateEvent:d?void 0:n.updateEvent,playheadMs:h,onScrub:L,zoom:i})}),e.jsx("div",{className:"timeline-split-pane timeline-split-right",children:e.jsx(fe,{diagram:n.diagram,nodeTypesConfig:n.nodeTypes,interactive:!1,activeNodeIds:$,pulsingEdgeIds:V})})]})}),e.jsx(Ne,{selectedEvent:l,diagram:n.diagram})]})}export{_e as TimelineView};