@tangle-network/agent-app 0.45.47 → 0.45.49

package/dist/{chunk-PE67O2LH.js → chunk-ZGY6QB4F.js}

@@ -1029,6 +1029,7 @@ function PreviewCanvas({ timeline, clock, frameProvider, className }) {
   const canvasRef = useRef(null);
   const [size, setSize] = useState(null);
   const [drawError, setDrawError] = useState(null);
+  const [emptyFrame, setEmptyFrame] = useState(false);
   const paintQueueRef = useRef({ running: false, queuedFrame: null });
   const paintInputsRef = useRef({ timeline, frameProvider, size });
   paintInputsRef.current = { timeline, frameProvider, size };
@@ -1062,6 +1063,11 @@ function PreviewCanvas({ timeline, clock, frameProvider, className }) {
       const { timeline: current, frameProvider: provider, size: cssSize } = paintInputsRef.current;
       const canvas = canvasRef.current;
       if (!canvas || !cssSize) return;
+      const paintFrame = Math.max(0, Math.min(frame, current.sequence.durationFrames - 1));
+      const snapshot = snapshotFrame(current, paintFrame);
+      const mediaEntries = snapshot.active.filter(({ track, clip }) => track.kind === "video" && !track.muted && clip.media !== void 0 && (clip.media.kind === "video" || clip.media.kind === "image"));
+      const top = mediaEntries[mediaEntries.length - 1];
+      setEmptyFrame(!(top && top.clip.media));
       const ctx = canvas.getContext("2d");
       if (!ctx) return;
       const dpr = typeof window !== "undefined" && window.devicePixelRatio || 1;
@@ -1072,10 +1078,6 @@ function PreviewCanvas({ timeline, clock, frameProvider, className }) {
       ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
       ctx.fillStyle = "#000";
       ctx.fillRect(0, 0, cssSize.width, cssSize.height);
-      const paintFrame = Math.max(0, Math.min(frame, current.sequence.durationFrames - 1));
-      const snapshot = snapshotFrame(current, paintFrame);
-      const mediaEntries = snapshot.active.filter(({ track, clip }) => track.kind === "video" && !track.muted && clip.media !== void 0 && (clip.media.kind === "video" || clip.media.kind === "image"));
-      const top = mediaEntries[mediaEntries.length - 1];
       if (top && top.clip.media) {
         const sourceSeconds = framesToSeconds(top.clip.sourceInFrame + (paintFrame - top.clip.startFrame), current.sequence.fps);
         await provider.drawFrame(top.clip.media.url, sourceSeconds, ctx, {
@@ -1144,6 +1146,7 @@ function PreviewCanvas({ timeline, clock, frameProvider, className }) {
         style: size ? { width: `${size.width}px`, height: `${size.height}px` } : { width: "100%", height: "100%" }
       }
     ),
+    emptyFrame && !drawError ? /* @__PURE__ */ jsx("p", { className: "pointer-events-none absolute inset-0 flex items-center justify-center text-xs text-[var(--text-muted)]", children: "No media at the playhead" }) : null,
     drawError ? /* @__PURE__ */ jsx("p", { className: "absolute inset-x-3 bottom-2 truncate rounded bg-[hsl(var(--destructive))] px-2 py-1 text-center text-xs text-[hsl(var(--destructive-foreground))]", role: "alert", children: drawError }) : null
   ] });
 }
@@ -1323,11 +1326,11 @@ function drawWaveform(ctx, data, rect, color) {
 // src/sequences-react/components/TimelineClipChip.tsx
 import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var KIND_TONES = {
-  video: "border-sky-400/40 bg-[color-mix(in_srgb,#0ea5e9_15%,var(--bg-input))]",
-  audio: "border-emerald-400/40 bg-[color-mix(in_srgb,#10b981_15%,var(--bg-input))]",
-  caption: "border-amber-400/40 bg-[color-mix(in_srgb,#f59e0b_15%,var(--bg-input))]",
-  reference: "border-zinc-400/40 bg-[color-mix(in_srgb,#71717a_15%,var(--bg-input))]",
-  agent: "border-violet-400/40 bg-[color-mix(in_srgb,#8b5cf6_15%,var(--bg-input))]"
+  video: "border-[hsl(var(--primary)/0.4)] bg-[color-mix(in_srgb,hsl(var(--primary))_15%,var(--bg-input))]",
+  audio: "border-[hsl(var(--success)/0.4)] bg-[color-mix(in_srgb,hsl(var(--success))_15%,var(--bg-input))]",
+  caption: "border-[hsl(var(--warning)/0.4)] bg-[color-mix(in_srgb,hsl(var(--warning))_15%,var(--bg-input))]",
+  reference: "border-[hsl(var(--muted-foreground)/0.4)] bg-[color-mix(in_srgb,hsl(var(--muted-foreground))_15%,var(--bg-input))]",
+  agent: "border-[hsl(var(--primary)/0.4)] bg-[color-mix(in_srgb,hsl(var(--primary))_15%,var(--bg-input))]"
 };
 var waveformCache = /* @__PURE__ */ new Map();
 var WAVEFORM_BUCKETS = 256;
@@ -1640,7 +1643,7 @@ function TimelineClipChip(props) {
         /* @__PURE__ */ jsxs3("div", { className: "relative flex h-full min-w-0 items-stretch gap-1.5 px-1.5 py-1", children: [
           isVisualMedia ? /* @__PURE__ */ jsx5("canvas", { ref: posterRef, className: "h-full w-10 shrink-0 rounded-sm bg-black object-cover" }) : null,
           /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-            /* @__PURE__ */ jsx5("div", { className: "truncate text-[11px] font-medium leading-4 text-[var(--text-primary)]", children: isCaption && typeof clip.text === "string" ? clip.text : clip.label }),
+            /* @__PURE__ */ jsx5("div", { className: "truncate text-xs font-medium leading-4 text-[var(--text-primary)]", children: isCaption && typeof clip.text === "string" ? clip.text : clip.label }),
             /* @__PURE__ */ jsx5("span", { className: "mt-0.5 inline-block rounded bg-[hsl(var(--background))] px-1 font-mono text-[9px] leading-3 text-[var(--text-secondary)]", children: formatTimecode(shown.durationFrames, fps) })
           ] })
         ] }),
@@ -1657,7 +1660,7 @@ function TimelineClipChip(props) {
               event.stopPropagation();
             },
             onBlur: commitText,
-            className: "agent-app-edit-selection absolute inset-0 z-10 w-full bg-[hsl(var(--popover))] px-1.5 text-[11px] text-[var(--text-primary)] ring-1 ring-[var(--brand-primary)]",
+            className: "agent-app-edit-selection absolute inset-0 z-10 w-full bg-[hsl(var(--popover))] px-1.5 text-xs text-[var(--text-primary)] ring-1 ring-[var(--brand-primary)]",
             "aria-label": "Caption text"
           }
         ) : null,
@@ -1776,6 +1779,8 @@ var ExportGlyph = glyph(
     /* @__PURE__ */ jsx6("path", { d: "M12 3v12M8 7l4-4 4 4" })
   ] })
 );
+var PlusGlyph = glyph(/* @__PURE__ */ jsx6("path", { d: "M12 5v14M5 12h14" }));
+var MinusGlyph = glyph(/* @__PURE__ */ jsx6("path", { d: "M5 12h14" }));
 
 // src/sequences-react/components/TimelineTrackRow.tsx
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -1951,7 +1956,7 @@ function TimelineSmallScreenGate({ labels }) {
       className: "flex h-full min-h-0 flex-col items-center justify-center gap-3 bg-[var(--bg-input)] px-8 py-12 text-center text-[var(--text-primary)] sm:hidden",
       children: [
         /* @__PURE__ */ jsx11(BrandMark, { size: 32, className: "shrink-0 opacity-90" }),
-        /* @__PURE__ */ jsx11("p", { className: "text-base font-semibold", children: copy.smallScreenTitle }),
+        /* @__PURE__ */ jsx11("p", { className: "text-sm font-semibold", children: copy.smallScreenTitle }),
         /* @__PURE__ */ jsx11("p", { className: "max-w-xs text-sm text-[var(--text-muted)]", children: copy.smallScreenBody })
       ]
     }
@@ -1983,7 +1988,7 @@ function ZoomControl({ zoomMath, zoom, onZoomChange, fitZoom }) {
         "aria-label": "Zoom out",
         onClick: () => setSlider(slider - sliderStep * 10),
         className: ZOOM_STEP_BUTTON,
-        children: "\u2212"
+        children: /* @__PURE__ */ jsx12(MinusGlyph, { className: "h-3.5 w-3.5" })
       }
     ),
     /* @__PURE__ */ jsx12(
@@ -2007,7 +2012,7 @@ function ZoomControl({ zoomMath, zoom, onZoomChange, fitZoom }) {
         "aria-label": "Zoom in",
         onClick: () => setSlider(slider + sliderStep * 10),
         className: ZOOM_STEP_BUTTON,
-        children: "+"
+        children: /* @__PURE__ */ jsx12(PlusGlyph, { className: "h-3.5 w-3.5" })
       }
     ),
     /* @__PURE__ */ jsxs9(
@@ -2016,7 +2021,7 @@ function ZoomControl({ zoomMath, zoom, onZoomChange, fitZoom }) {
         "aria-hidden": true,
         title: fitZoom ? "Zoom (100% = fits the whole sequence)" : "Zoom",
         onClick: fitZoom ? () => onZoomChange(fitZoom) : void 0,
-        className: `w-11 select-none text-right font-mono text-[11px] tabular-nums text-[var(--text-muted)] ${fitZoom ? "cursor-pointer hover:text-[var(--text-primary)]" : ""}`,
+        className: `w-11 select-none text-right font-mono text-xs tabular-nums text-[var(--text-muted)] ${fitZoom ? "cursor-pointer hover:text-[var(--text-primary)]" : ""}`,
         children: [
           percent,
           "%"
@@ -2700,4 +2705,4 @@ export {
   TimelineEditor,
   TimelineEditor_default
 };
-//# sourceMappingURL=chunk-PE67O2LH.js.map
+//# sourceMappingURL=chunk-ZGY6QB4F.js.map