@tangle-network/agent-app 0.45.46 → 0.45.48

package/dist/{chunk-PE67O2LH.js → chunk-GT4GTRGQ.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-[11px] 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;
@@ -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(
@@ -2700,4 +2705,4 @@ export {
   TimelineEditor,
   TimelineEditor_default
 };
-//# sourceMappingURL=chunk-PE67O2LH.js.map
+//# sourceMappingURL=chunk-GT4GTRGQ.js.map