loom-spec 0.3.0 → 0.5.0

package/dist/types/timeline.d.ts

@@ -1,97 +0,0 @@
-/**
- * AUTOGENERATED — do not edit.
- * Source: schema/timeline.schema.json
- */
-/**
- * A time-axis overlay describing when events happen on the nodes of a diagram. Same node universe, different render.
- */
-export interface LoomTimeline {
-    $schema?: string;
-    version: "1";
-    /**
-     * Timeline identifier. Should match the filename without extension.
-     */
-    id: string;
-    title: string;
-    description?: string;
-    /**
-     * Id of the diagram whose nodes this timeline overlays.
-     */
-    diagram: string;
-    events: TimelineEvent[];
-    /**
-     * Optional explicit track definitions (label, color). If omitted, tracks are inferred from events[].track values.
-     */
-    tracks?: TimelineTrack[];
-}
-export interface TimelineEvent {
-    /**
-     * Unique within this timeline.
-     */
-    id: string;
-    /**
-     * Node id from the referenced diagram.
-     */
-    node: string;
-    /**
-     * Track label. Events on the same track are interpreted as sequential; events on different tracks at overlapping times are concurrent. If omitted, the renderer auto-assigns one track per node.
-     */
-    track?: string;
-    /**
-     * Start time in milliseconds from t=0.
-     */
-    start_ms: number;
-    /**
-     * Duration in milliseconds. May be 0 for instantaneous events.
-     */
-    duration_ms: number;
-    /**
-     * Short text rendered inside the clip.
-     */
-    label?: string;
-    description?: string;
-    /**
-     * Optional category for clip styling. Distinct from edge.kind in the diagram — this describes what the node is doing during this clip, not what flows between nodes.
-     */
-    kind?: "compute" | "io" | "wait" | "error";
-    /**
-     * Optional anchors to the specific function(s) running during this clip. Like node-level code_refs but scoped to a moment in time. Drift detection checks these too. Use for function-level granularity inside a node (e.g. 'validate' vs. 'issue jwt' both happen on the auth-service node).
-     */
-    code_refs?: CodeRef[];
-    /**
-     * Optional id of another event that caused this one. Used for explicit causation chains and to preserve OTel span.parent_id when importing traces. The renderer can draw a connecting arrow between the two clips.
-     */
-    triggered_by?: string;
-    /**
-     * Free-form labels for filtering or grouping clips. Examples: 'critical-path', 'billable-time', 'background'.
-     */
-    tags?: string[];
-}
-/**
- * Same shape as the CodeRef in diagram.schema.json. Inlined here to keep the schema self-contained — no cross-file $ref required to validate.
- */
-export interface CodeRef {
-    /**
-     * Repo-relative file path.
-     */
-    path: string;
-    /**
-     * Function, class, or component name. Preferred over lines because it survives refactors.
-     */
-    symbol?: string;
-    /**
-     * Line range(s) like '1-80' or '12,45-50'. Use only when no symbol applies.
-     */
-    lines?: string;
-}
-export interface TimelineTrack {
-    /**
-     * Track id, matches event.track values.
-     */
-    id: string;
-    label: string;
-    /**
-     * Optional background tint for the track lane.
-     */
-    color?: string;
-}

package/dist/types/timeline.js

@@ -1,7 +0,0 @@
-/* eslint-disable */
-/**
- * AUTOGENERATED — do not edit.
- * Source: schema/timeline.schema.json
- */
-export {};
-//# sourceMappingURL=timeline.js.map

package/dist/types/timeline.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"timeline.js","sourceRoot":"","sources":["../../src/types/timeline.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB;;;GAGG"}

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

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

package/schema/timeline.schema.json

@@ -1,135 +0,0 @@
-{
-  "$schema": "https://json-schema.org/draft/2020-12/schema",
-  "$id": "https://loom-spec.dev/schema/timeline-v1.json",
-  "title": "Loom Timeline",
-  "description": "A time-axis overlay describing when events happen on the nodes of a diagram. Same node universe, different render.",
-  "type": "object",
-  "required": ["version", "id", "title", "diagram", "events"],
-  "additionalProperties": false,
-  "properties": {
-    "$schema": { "type": "string" },
-    "version": { "const": "1" },
-    "id": {
-      "type": "string",
-      "pattern": "^[a-z0-9-]+$",
-      "description": "Timeline identifier. Should match the filename without extension."
-    },
-    "title": { "type": "string", "minLength": 1 },
-    "description": { "type": "string" },
-    "diagram": {
-      "type": "string",
-      "pattern": "^[a-z0-9-]+$",
-      "description": "Id of the diagram whose nodes this timeline overlays."
-    },
-    "events": {
-      "type": "array",
-      "items": { "$ref": "#/$defs/TimelineEvent" }
-    },
-    "tracks": {
-      "type": "array",
-      "items": { "$ref": "#/$defs/TimelineTrack" },
-      "description": "Optional explicit track definitions (label, color). If omitted, tracks are inferred from events[].track values."
-    }
-  },
-
-  "$defs": {
-    "TimelineEvent": {
-      "type": "object",
-      "required": ["id", "node", "start_ms", "duration_ms"],
-      "additionalProperties": false,
-      "properties": {
-        "id": {
-          "type": "string",
-          "pattern": "^[a-z0-9-]+$",
-          "description": "Unique within this timeline."
-        },
-        "node": {
-          "type": "string",
-          "pattern": "^[a-z0-9-]+$",
-          "description": "Node id from the referenced diagram."
-        },
-        "track": {
-          "type": "string",
-          "description": "Track label. Events on the same track are interpreted as sequential; events on different tracks at overlapping times are concurrent. If omitted, the renderer auto-assigns one track per node."
-        },
-        "start_ms": {
-          "type": "number",
-          "minimum": 0,
-          "description": "Start time in milliseconds from t=0."
-        },
-        "duration_ms": {
-          "type": "number",
-          "minimum": 0,
-          "description": "Duration in milliseconds. May be 0 for instantaneous events."
-        },
-        "label": {
-          "type": "string",
-          "maxLength": 60,
-          "description": "Short text rendered inside the clip."
-        },
-        "description": { "type": "string" },
-        "kind": {
-          "type": "string",
-          "enum": ["compute", "io", "wait", "error"],
-          "description": "Optional category for clip styling. Distinct from edge.kind in the diagram — this describes what the node is doing during this clip, not what flows between nodes."
-        },
-        "code_refs": {
-          "type": "array",
-          "items": { "$ref": "#/$defs/CodeRef" },
-          "description": "Optional anchors to the specific function(s) running during this clip. Like node-level code_refs but scoped to a moment in time. Drift detection checks these too. Use for function-level granularity inside a node (e.g. 'validate' vs. 'issue jwt' both happen on the auth-service node)."
-        },
-        "triggered_by": {
-          "type": "string",
-          "pattern": "^[a-z0-9-]+$",
-          "description": "Optional id of another event that caused this one. Used for explicit causation chains and to preserve OTel span.parent_id when importing traces. The renderer can draw a connecting arrow between the two clips."
-        },
-        "tags": {
-          "type": "array",
-          "items": { "type": "string" },
-          "description": "Free-form labels for filtering or grouping clips. Examples: 'critical-path', 'billable-time', 'background'."
-        }
-      }
-    },
-
-    "CodeRef": {
-      "type": "object",
-      "required": ["path"],
-      "additionalProperties": false,
-      "description": "Same shape as the CodeRef in diagram.schema.json. Inlined here to keep the schema self-contained — no cross-file $ref required to validate.",
-      "properties": {
-        "path": {
-          "type": "string",
-          "description": "Repo-relative file path."
-        },
-        "symbol": {
-          "type": "string",
-          "description": "Function, class, or component name. Preferred over lines because it survives refactors."
-        },
-        "lines": {
-          "type": "string",
-          "pattern": "^[0-9]+(-[0-9]+)?(,[0-9]+(-[0-9]+)?)*$",
-          "description": "Line range(s) like '1-80' or '12,45-50'. Use only when no symbol applies."
-        }
-      }
-    },
-
-    "TimelineTrack": {
-      "type": "object",
-      "required": ["id", "label"],
-      "additionalProperties": false,
-      "properties": {
-        "id": {
-          "type": "string",
-          "pattern": "^[a-z0-9-]+$",
-          "description": "Track id, matches event.track values."
-        },
-        "label": { "type": "string", "minLength": 1 },
-        "color": {
-          "type": "string",
-          "pattern": "^#[0-9a-fA-F]{6}$",
-          "description": "Optional background tint for the track lane."
-        }
-      }
-    }
-  }
-}