@tangle-network/agent-app 0.42.5 → 0.42.7

package/dist/{chunk-S6WS2B32.js → chunk-EX3LD5G6.js}

@@ -13,6 +13,24 @@ import {
 // src/sequences-react/components/TimelineEditor.tsx
 import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState3, useSyncExternalStore } from "react";
 
+// src/sequences-react/contracts.ts
+var DEFAULT_TIMELINE_LABELS = {
+  splitClip: "Split here",
+  splitClipAriaLabel: "Split clip at playhead",
+  addCaption: "Add caption",
+  addCaptionAriaLabel: "Add caption at playhead",
+  createExport: "Export\u2026",
+  emptyTitle: "This sequence has no tracks yet",
+  emptyBody: "Start from a template, drop in a clip, or hand it to the agent.",
+  emptyTemplateDoor: "Start from a template",
+  emptyClipDoor: "Add a clip",
+  emptyAgentDoor: "Ask the agent",
+  smallScreenTitle: "Best edited on a larger screen",
+  smallScreenBody: "The timeline needs room to scrub and trim. Open this cut on a tablet or desktop to edit.",
+  ghostVideoLane: "Video",
+  ghostCaptionLane: "Captions"
+};
+
 // src/sequences-react/engine/command-stack.ts
 var COMMAND_HISTORY_LIMIT = 200;
 function createCommandStack(initial) {
@@ -1211,7 +1229,7 @@ function TimelineRuler({ fps, durationFrames, zoom, onScrub }) {
     {
       "data-timeline-ruler": true,
       className: "relative h-7 cursor-ew-resize select-none border-b border-[var(--border-default)] bg-[var(--bg-input)]",
-      style: { width: `${durationFrames * zoom}px` },
+      style: { width: `${durationFrames * zoom}px`, touchAction: "none" },
       onPointerDown: handlePointerDown,
       onPointerMove: handlePointerMove,
       children: ticks.map((tick) => /* @__PURE__ */ jsx4(
@@ -1604,7 +1622,9 @@ function TimelineClipChip(props) {
       style: {
         left: `${geometry.left}px`,
         width: `${geometry.width}px`,
-        transform: shown.translateY !== 0 ? `translateY(${shown.translateY}px)` : void 0
+        transform: shown.translateY !== 0 ? `translateY(${shown.translateY}px)` : void 0,
+        // own the touch gesture so move/trim drags don't trigger lane scroll
+        touchAction: "none"
       },
       onPointerDown: (event) => beginGesture(event, "move"),
       onPointerMove: updateGesture,
@@ -1750,6 +1770,12 @@ var CaptionPlusGlyph = glyph(
     /* @__PURE__ */ jsx6("path", { d: "M12 9v6M9 12h6" })
   ] })
 );
+var ExportGlyph = glyph(
+  /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx6("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+    /* @__PURE__ */ jsx6("path", { d: "M12 3v12M8 7l4-4 4 4" })
+  ] })
+);
 
 // src/sequences-react/components/TimelineTrackRow.tsx
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -1791,7 +1817,7 @@ function TimelineTrackRow(props) {
         "data-lane-kind": track.kind,
         "data-lane-locked": track.locked ? "true" : "false",
         className: `relative ${laneHeight} ${track.muted ? "opacity-60" : ""}`,
-        style: { width: `${sequenceDurationFrames * zoom}px` },
+        style: { width: `${sequenceDurationFrames * zoom}px`, touchAction: "none" },
         onPointerDown: handleLanePointerDown,
         children: clips.map((clip) => /* @__PURE__ */ jsx7(
           TimelineClipChip,
@@ -1822,62 +1848,194 @@ function TimelineTrackRow(props) {
   ] });
 }
 
+// src/sequences-react/components/BrandMark.tsx
+import { lazy, Suspense } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function MarkSpacer({ size }) {
+  return /* @__PURE__ */ jsx8("span", { "aria-hidden": true, style: { display: "inline-block", width: size, height: size } });
+}
+var LazyKnot = lazy(async () => {
+  try {
+    const mod = await import("./brand/index.js");
+    return { default: mod.TangleKnot };
+  } catch {
+    return { default: MarkSpacer };
+  }
+});
+function BrandMark({ size, className }) {
+  return /* @__PURE__ */ jsx8(Suspense, { fallback: /* @__PURE__ */ jsx8(MarkSpacer, { size }), children: /* @__PURE__ */ jsx8(LazyKnot, { size, className }) });
+}
+
+// src/sequences-react/components/TimelineEmptyState.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var DOOR_BUTTON = "flex min-h-[44px] items-center gap-2 rounded-md border border-[var(--border-default)] bg-[var(--bg-input)] px-3.5 py-2 text-xs font-medium text-[var(--text-secondary)] transition hover:border-[var(--brand-primary)] hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function TimelineEmptyState(props) {
+  const labels = { ...DEFAULT_TIMELINE_LABELS, ...props.labels };
+  const doors = [];
+  if (props.onStartFromTemplate) {
+    doors.push({ key: "template", label: labels.emptyTemplateDoor, primary: true, icon: FilmGlyph, onClick: props.onStartFromTemplate });
+  }
+  if (props.onAddClip) {
+    doors.push({ key: "clip", label: labels.emptyClipDoor, primary: false, icon: CaptionPlusGlyph, onClick: props.onAddClip });
+  }
+  if (props.onAskAgent) {
+    doors.push({ key: "agent", label: labels.emptyAgentDoor, primary: false, icon: AgentGlyph, onClick: props.onAskAgent });
+  }
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      "data-timeline-empty": true,
+      className: "sticky left-0 flex min-h-[6rem] flex-col items-center justify-center gap-3 px-6 py-9 text-center",
+      style: { width: "100%" },
+      children: [
+        /* @__PURE__ */ jsx9(BrandMark, { size: 28, className: "shrink-0 opacity-90" }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx9("p", { className: "text-sm font-semibold text-[var(--text-primary)]", children: labels.emptyTitle }),
+          /* @__PURE__ */ jsx9("p", { className: "max-w-sm text-xs text-[var(--text-muted)]", children: labels.emptyBody })
+        ] }),
+        doors.length > 0 ? /* @__PURE__ */ jsx9("div", { className: "flex flex-wrap items-center justify-center gap-2 pt-1", children: doors.map(({ key, label, primary, icon: Icon, onClick }) => /* @__PURE__ */ jsxs6(
+          "button",
+          {
+            type: "button",
+            onClick,
+            className: primary ? "flex min-h-[44px] items-center gap-2 rounded-md bg-[var(--brand-primary)] px-3.5 py-2 text-xs font-semibold text-[hsl(var(--primary-foreground))] transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" : DOOR_BUTTON,
+            children: [
+              /* @__PURE__ */ jsx9(Icon, { className: "h-4 w-4 shrink-0" }),
+              label
+            ]
+          },
+          key
+        )) }) : null
+      ]
+    }
+  );
+}
+
+// src/sequences-react/components/TimelineGhostLanes.tsx
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+function GhostLane({
+  label,
+  icon: Icon,
+  height,
+  laneWidth
+}) {
+  return /* @__PURE__ */ jsxs7("div", { className: "flex border-b border-[var(--border-default)] last:border-b-0 opacity-60", children: [
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: `sticky left-0 z-10 flex w-36 shrink-0 items-center gap-2 border-r border-[var(--border-default)] bg-[var(--bg-input)] px-2.5 ${height}`,
+        children: [
+          /* @__PURE__ */ jsx10(Icon, { className: "h-3.5 w-3.5 shrink-0 text-[var(--text-muted)]" }),
+          /* @__PURE__ */ jsx10("span", { className: "min-w-0 flex-1 truncate text-xs font-medium text-[var(--text-muted)]", children: label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx10("div", { className: `${height}`, style: { width: `${laneWidth}px` } })
+  ] });
+}
+function TimelineGhostLanes({ laneWidth, videoLabel, captionLabel }) {
+  return /* @__PURE__ */ jsxs7("div", { "data-timeline-ghost-lanes": true, "aria-hidden": true, className: "pointer-events-none absolute inset-0", children: [
+    /* @__PURE__ */ jsx10(GhostLane, { label: videoLabel, icon: FilmGlyph, height: "h-16", laneWidth }),
+    /* @__PURE__ */ jsx10(GhostLane, { label: captionLabel, icon: CaptionGlyph, height: "h-9", laneWidth })
+  ] });
+}
+
+// src/sequences-react/components/TimelineSmallScreenGate.tsx
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+function TimelineSmallScreenGate({ labels }) {
+  const copy = { ...DEFAULT_TIMELINE_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      "data-timeline-small-screen": true,
+      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: "max-w-xs text-sm text-[var(--text-muted)]", children: copy.smallScreenBody })
+      ]
+    }
+  );
+}
+
 // src/sequences-react/components/ZoomControl.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function ZoomControl({ zoomMath, zoom, onZoomChange }) {
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function zoomPercent(zoom, fitZoom) {
+  const base = fitZoom && fitZoom > 0 ? fitZoom : 1;
+  return Math.round(zoom / base * 100);
+}
+var ZOOM_STEP_BUTTON = "flex h-7 w-7 items-center justify-center rounded border border-[var(--border-default)] text-sm leading-none text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function ZoomControl({ zoomMath, zoom, onZoomChange, fitZoom }) {
   const sliderMin = zoomMath.zoomToSlider(zoomMath.minZoom);
   const sliderMax = zoomMath.zoomToSlider(zoomMath.maxZoom);
   const sliderStep = (sliderMax - sliderMin) / 100;
   const slider = zoomMath.zoomToSlider(zoom);
+  const percent = zoomPercent(zoom, fitZoom);
   function setSlider(next) {
     const clamped = Math.max(sliderMin, Math.min(sliderMax, next));
     onZoomChange(zoomMath.sliderToZoom(clamped));
   }
-  return /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5", children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx12(
       "button",
       {
         type: "button",
         "aria-label": "Zoom out",
         onClick: () => setSlider(slider - sliderStep * 10),
-        className: "flex h-6 w-6 items-center justify-center rounded border border-[var(--border-default)] text-sm leading-none text-[var(--text-secondary)] hover:text-[var(--text-primary)]",
+        className: ZOOM_STEP_BUTTON,
         children: "\u2212"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx12(
       "input",
       {
         type: "range",
         "aria-label": "Timeline zoom",
+        "aria-valuetext": `${percent}%`,
         min: sliderMin,
         max: sliderMax,
         step: sliderStep,
         value: slider,
         onChange: (event) => setSlider(Number(event.target.value)),
-        className: "h-1 w-24 cursor-pointer accent-[var(--brand-primary)]"
+        className: "hidden h-1 w-24 cursor-pointer accent-[var(--brand-primary)] sm:block"
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx12(
       "button",
       {
         type: "button",
         "aria-label": "Zoom in",
         onClick: () => setSlider(slider + sliderStep * 10),
-        className: "flex h-6 w-6 items-center justify-center rounded border border-[var(--border-default)] text-sm leading-none text-[var(--text-secondary)] hover:text-[var(--text-primary)]",
+        className: ZOOM_STEP_BUTTON,
         children: "+"
       }
+    ),
+    /* @__PURE__ */ jsxs9(
+      "output",
+      {
+        "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)]" : ""}`,
+        children: [
+          percent,
+          "%"
+        ]
+      }
     )
   ] });
 }
 
 // src/sequences-react/components/TimelineEditor.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var SEQUENCE_MEDIA_DRAG_TYPE = "application/x-sequence-media";
 var HISTORY_MIRROR_LIMIT = 200;
 var MIN_ZOOM = 5e-3;
 var MAX_ZOOM = 24;
 var TRACK_HEADER_PX = 144;
-var TRANSPORT_BUTTON = "flex h-7 w-7 items-center justify-center rounded border border-[var(--border-default)] text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] disabled:cursor-default disabled:opacity-40 disabled:hover:text-[var(--text-secondary)]";
+var TRANSPORT_BUTTON = "flex h-7 w-7 items-center justify-center rounded border border-[var(--border-default)] text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default disabled:opacity-40 disabled:hover:text-[var(--text-secondary)]";
+var EDIT_TOOL_BUTTON = "flex h-7 items-center gap-1.5 rounded border border-[var(--border-default)] px-2 text-xs font-medium text-[var(--text-secondary)] transition hover:text-[var(--text-primary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-default disabled:opacity-40 disabled:hover:text-[var(--text-secondary)]";
+var CLUSTER_DIVIDER = "mx-1 h-5 w-px shrink-0 bg-[var(--border-default)]";
 function mintClipId() {
   const uuid = globalThis.crypto && "randomUUID" in globalThis.crypto ? globalThis.crypto.randomUUID() : null;
   return `local-${uuid ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`}`;
@@ -1899,6 +2057,7 @@ function TimelineEditor(props) {
   const { canWrite, onApplyOperations } = props;
   const fps = props.timeline.sequence.fps;
   const durationFrames = props.timeline.sequence.durationFrames;
+  const labels = useMemo3(() => ({ ...DEFAULT_TIMELINE_LABELS, ...props.labels }), [props.labels]);
   const stack = useMemo3(() => createCommandStack(props.timeline), []);
   const editorState = useSyncExternalStore(stack.subscribe, stack.getState, stack.getState);
   const timeline = editorState.timeline;
@@ -1951,13 +2110,16 @@ function TimelineEditor(props) {
   }, [props.frameProvider]);
   const zoomMath = useMemo3(() => createZoomMath({ minZoom: MIN_ZOOM, maxZoom: MAX_ZOOM }), []);
   const [zoom, setZoom] = useState3(1);
+  const [fitZoom, setFitZoom] = useState3(void 0);
   const trackViewportRef = useRef3(null);
   useEffect3(() => {
     const viewport = trackViewportRef.current;
     if (!viewport) return;
     const laneWidth = viewport.clientWidth - TRACK_HEADER_PX;
     if (laneWidth <= 0) return;
-    setZoom(Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, laneWidth / durationFrames)));
+    const fit = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, laneWidth / durationFrames));
+    setFitZoom(fit);
+    setZoom(fit);
   }, []);
   const [snapEnabled, setSnapEnabled] = useState3(true);
   const [activeSnapPoint, setActiveSnapPoint] = useState3(null);
@@ -2336,120 +2498,154 @@ function TimelineEditor(props) {
     );
   }
   const timelineWidth = timeline.sequence.durationFrames * zoom;
-  return /* @__PURE__ */ jsx9("div", { className: `flex h-full min-h-0 flex-col bg-[var(--bg-input)] text-[var(--text-primary)] ${props.className ?? ""}`, children: /* @__PURE__ */ jsxs7("div", { className: "flex min-h-0 flex-1", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      /* @__PURE__ */ jsx9(PreviewCanvas, { timeline, clock, frameProvider }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex h-10 shrink-0 items-center gap-2 border-y border-[var(--border-default)] px-2", children: [
-        /* @__PURE__ */ jsx9(
-          "button",
-          {
-            type: "button",
-            "aria-label": isPlaying ? "Pause" : "Play",
-            onClick: togglePlayback,
-            className: TRANSPORT_BUTTON,
-            children: isPlaying ? /* @__PURE__ */ jsx9(PauseGlyph, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx9(PlayGlyph, { className: "h-3.5 w-3.5" })
-          }
-        ),
-        /* @__PURE__ */ jsxs7("span", { className: "font-mono text-xs tabular-nums text-[var(--text-secondary)]", children: [
-          formatTimecode(playheadFrame, fps),
-          /* @__PURE__ */ jsxs7("span", { className: "text-[var(--text-muted)]", children: [
-            " / ",
-            formatTimecode(timeline.sequence.durationFrames, fps)
-          ] })
+  return /* @__PURE__ */ jsxs10("div", { className: `flex h-full min-h-0 flex-col bg-[var(--bg-input)] text-[var(--text-primary)] ${props.className ?? ""}`, children: [
+    /* @__PURE__ */ jsx13(TimelineSmallScreenGate, { labels: props.labels }),
+    /* @__PURE__ */ jsxs10("div", { className: "hidden min-h-0 flex-1 flex-col sm:flex lg:flex-row", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx13(PreviewCanvas, { timeline, clock, frameProvider }),
+        /* @__PURE__ */ jsxs10("div", { "aria-label": "Timeline controls", className: "flex h-11 shrink-0 items-center gap-1.5 overflow-x-auto border-y border-[var(--border-default)] px-2", children: [
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              "aria-label": isPlaying ? "Pause" : "Play",
+              onClick: togglePlayback,
+              className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-[var(--brand-primary)] text-[hsl(var(--primary-foreground))] transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              children: isPlaying ? /* @__PURE__ */ jsx13(PauseGlyph, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx13(PlayGlyph, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs10("span", { className: "shrink-0 font-mono text-xs tabular-nums text-[var(--text-secondary)]", children: [
+            formatTimecode(playheadFrame, fps),
+            /* @__PURE__ */ jsxs10("span", { className: "text-[var(--text-muted)]", children: [
+              " / ",
+              formatTimecode(timeline.sequence.durationFrames, fps)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx13("div", { className: CLUSTER_DIVIDER }),
+          /* @__PURE__ */ jsx13("button", { type: "button", "aria-label": "Undo", disabled: !stack.canUndo() || !canWrite, onClick: undoLast, className: TRANSPORT_BUTTON, children: /* @__PURE__ */ jsx13(UndoGlyph, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx13("button", { type: "button", "aria-label": "Redo", disabled: !stack.canRedo() || !canWrite, onClick: redoLast, className: TRANSPORT_BUTTON, children: /* @__PURE__ */ jsx13(RedoGlyph, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx13(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Toggle snapping",
+              "aria-pressed": snapEnabled,
+              onClick: () => setSnapEnabled((current) => !current),
+              className: `${TRANSPORT_BUTTON} ${snapEnabled ? "border-[var(--brand-primary)] text-[var(--brand-primary)] hover:text-[var(--brand-primary)]" : ""}`,
+              children: /* @__PURE__ */ jsx13(MagnetGlyph, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          canWrite ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+            /* @__PURE__ */ jsx13("div", { className: CLUSTER_DIVIDER }),
+            /* @__PURE__ */ jsxs10("button", { type: "button", "aria-label": labels.splitClipAriaLabel, disabled: !splittableClip, onClick: splitAtPlayhead, className: EDIT_TOOL_BUTTON, children: [
+              /* @__PURE__ */ jsx13(ScissorsGlyph, { className: "h-3.5 w-3.5 shrink-0" }),
+              /* @__PURE__ */ jsx13("span", { className: "hidden md:inline", children: labels.splitClip })
+            ] }),
+            /* @__PURE__ */ jsxs10("button", { type: "button", "aria-label": labels.addCaptionAriaLabel, onClick: addCaptionAtPlayhead, className: EDIT_TOOL_BUTTON, children: [
+              /* @__PURE__ */ jsx13(CaptionPlusGlyph, { className: "h-3.5 w-3.5 shrink-0" }),
+              /* @__PURE__ */ jsx13("span", { className: "hidden md:inline", children: labels.addCaption })
+            ] })
+          ] }) : null,
+          /* @__PURE__ */ jsx13("div", { className: "min-w-2 flex-1" }),
+          /* @__PURE__ */ jsx13(ZoomControl, { zoomMath, zoom, onZoomChange: setZoom, fitZoom }),
+          props.onCreateExport ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+            /* @__PURE__ */ jsx13("div", { className: CLUSTER_DIVIDER }),
+            /* @__PURE__ */ jsxs10(
+              "button",
+              {
+                type: "button",
+                "aria-label": labels.createExport,
+                onClick: props.onCreateExport,
+                className: "flex h-8 shrink-0 items-center gap-1.5 rounded-md border border-[var(--brand-primary)] px-2.5 text-xs font-semibold text-[var(--brand-primary)] transition hover:bg-[hsl(var(--primary)/0.1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                children: [
+                  /* @__PURE__ */ jsx13(ExportGlyph, { className: "h-3.5 w-3.5 shrink-0" }),
+                  /* @__PURE__ */ jsx13("span", { className: "hidden md:inline", children: labels.createExport })
+                ]
+              }
+            )
+          ] }) : null
         ] }),
-        /* @__PURE__ */ jsx9("div", { className: "mx-1 h-4 w-px bg-[var(--border-default)]" }),
-        /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Undo", disabled: !stack.canUndo() || !canWrite, onClick: undoLast, className: TRANSPORT_BUTTON, children: /* @__PURE__ */ jsx9(UndoGlyph, { className: "h-3.5 w-3.5" }) }),
-        /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Redo", disabled: !stack.canRedo() || !canWrite, onClick: redoLast, className: TRANSPORT_BUTTON, children: /* @__PURE__ */ jsx9(RedoGlyph, { className: "h-3.5 w-3.5" }) }),
-        /* @__PURE__ */ jsx9(
-          "button",
-          {
-            type: "button",
-            "aria-label": "Toggle snapping",
-            "aria-pressed": snapEnabled,
-            onClick: () => setSnapEnabled((current) => !current),
-            className: `${TRANSPORT_BUTTON} ${snapEnabled ? "border-[var(--brand-primary)] text-[var(--brand-primary)] hover:text-[var(--brand-primary)]" : ""}`,
-            children: /* @__PURE__ */ jsx9(MagnetGlyph, { className: "h-3.5 w-3.5" })
-          }
-        ),
-        canWrite ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
-          /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Split clip at playhead", disabled: !splittableClip, onClick: splitAtPlayhead, className: TRANSPORT_BUTTON, children: /* @__PURE__ */ jsx9(ScissorsGlyph, { className: "h-3.5 w-3.5" }) }),
-          /* @__PURE__ */ jsx9("button", { type: "button", "aria-label": "Add caption at playhead", onClick: addCaptionAtPlayhead, className: TRANSPORT_BUTTON, children: /* @__PURE__ */ jsx9(CaptionPlusGlyph, { className: "h-3.5 w-3.5" }) })
+        commitError ? /* @__PURE__ */ jsxs10("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-[hsl(var(--destructive)/0.3)] bg-[hsl(var(--destructive)/0.1)] px-3 py-1.5 text-xs text-[var(--text-danger)]", role: "alert", children: [
+          /* @__PURE__ */ jsx13("span", { className: "min-w-0 truncate", children: commitError }),
+          /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => setCommitError(null), className: "shrink-0 underline-offset-2 hover:underline", children: "Dismiss" })
         ] }) : null,
-        /* @__PURE__ */ jsx9("div", { className: "flex-1" }),
-        /* @__PURE__ */ jsx9(ZoomControl, { zoomMath, zoom, onZoomChange: setZoom })
-      ] }),
-      commitError ? /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-center justify-between gap-3 border-b border-[hsl(var(--destructive)/0.3)] bg-[hsl(var(--destructive)/0.1)] px-3 py-1.5 text-xs text-[var(--text-danger)]", role: "alert", children: [
-        /* @__PURE__ */ jsx9("span", { className: "min-w-0 truncate", children: commitError }),
-        /* @__PURE__ */ jsx9("button", { type: "button", onClick: () => setCommitError(null), className: "shrink-0 underline-offset-2 hover:underline", children: "Dismiss" })
-      ] }) : null,
-      props.renderAssetShelf ? /* @__PURE__ */ jsx9("div", { className: "shrink-0 border-b border-[var(--border-default)]", children: props.renderAssetShelf() }) : null,
-      /* @__PURE__ */ jsx9(
-        "div",
-        {
-          ref: trackViewportRef,
-          "data-timeline-tracks": true,
-          className: "relative max-h-60 min-h-[6rem] shrink-0 overflow-auto overscroll-x-contain",
-          onDragOver: handleTrackAreaDragOver,
-          onDrop: handleTrackAreaDrop,
-          children: /* @__PURE__ */ jsxs7("div", { className: "relative", style: { width: `${TRACK_HEADER_PX + timelineWidth}px`, minWidth: "100%" }, children: [
-            /* @__PURE__ */ jsxs7("div", { className: "sticky top-0 z-20 flex", children: [
-              /* @__PURE__ */ jsx9("div", { className: "sticky left-0 z-30 w-36 shrink-0 border-b border-r border-[var(--border-default)] bg-[var(--bg-input)]" }),
-              /* @__PURE__ */ jsx9(TimelineRuler, { fps, durationFrames: timeline.sequence.durationFrames, zoom, onScrub: (frame) => clock.seek(frame) })
-            ] }),
-            /* @__PURE__ */ jsxs7("div", { className: "relative", children: [
-              sortedTracks.length === 0 ? /* @__PURE__ */ jsxs7(
-                "div",
-                {
-                  "data-timeline-empty": true,
-                  className: "sticky left-0 flex min-h-[6rem] flex-col items-center justify-center gap-1.5 px-6 py-10 text-center",
-                  style: { width: "100%" },
-                  children: [
-                    /* @__PURE__ */ jsx9(FilmGlyph, { className: "h-6 w-6 text-[var(--text-muted)]" }),
-                    /* @__PURE__ */ jsx9("p", { className: "text-sm font-medium text-[var(--text-secondary)]", children: "This sequence has no tracks yet" }),
-                    /* @__PURE__ */ jsx9("p", { className: "max-w-xs text-xs text-[var(--text-muted)]", children: "Add a video, audio, or caption track to start placing clips." })
-                  ]
-                }
-              ) : null,
-              sortedTracks.map((track) => /* @__PURE__ */ jsx9(
-                TimelineTrackRow,
-                {
-                  track,
-                  clips: clipsByTrack.get(track.id) ?? [],
-                  fps,
-                  zoom,
-                  sequenceDurationFrames: timeline.sequence.durationFrames,
-                  selectedClipIds: new Set(selectedClipIds),
-                  tabbableClipId,
-                  canWrite,
-                  frameProvider,
-                  snapMove,
-                  snapEdge,
-                  onSnapPointChange: setActiveSnapPoint,
-                  onSelectClip: selectClip,
-                  onRequestDeleteClip: deleteClip,
-                  onFocusStepClip: focusStepClip,
-                  onCommitMove: handleCommitMove,
-                  onCommitTrim: handleCommitTrim,
-                  onCommitText: handleCommitText,
-                  onLaneSeek: (frame) => clock.seek(frame)
-                },
-                track.id
-              )),
-              /* @__PURE__ */ jsxs7("div", { className: "pointer-events-none absolute inset-y-0", style: { left: `${TRACK_HEADER_PX}px`, width: `${timelineWidth}px` }, children: [
-                /* @__PURE__ */ jsx9(TimelinePlayhead, { frame: playheadFrame, zoom }),
-                /* @__PURE__ */ jsx9(SnapIndicatorLine, { point: activeSnapPoint, zoom })
+        props.renderAssetShelf ? /* @__PURE__ */ jsx13("div", { className: "shrink-0 border-b border-[var(--border-default)]", children: props.renderAssetShelf() }) : null,
+        /* @__PURE__ */ jsx13(
+          "div",
+          {
+            ref: trackViewportRef,
+            "data-timeline-tracks": true,
+            className: "relative max-h-60 min-h-[6rem] shrink-0 overflow-auto overscroll-x-contain",
+            onDragOver: handleTrackAreaDragOver,
+            onDrop: handleTrackAreaDrop,
+            children: /* @__PURE__ */ jsxs10("div", { className: "relative", style: { width: `${TRACK_HEADER_PX + timelineWidth}px`, minWidth: "100%" }, children: [
+              /* @__PURE__ */ jsxs10("div", { className: "sticky top-0 z-20 flex", children: [
+                /* @__PURE__ */ jsx13("div", { className: "sticky left-0 z-30 w-36 shrink-0 border-b border-r border-[var(--border-default)] bg-[var(--bg-input)]" }),
+                /* @__PURE__ */ jsx13(TimelineRuler, { fps, durationFrames: timeline.sequence.durationFrames, zoom, onScrub: (frame) => clock.seek(frame) })
+              ] }),
+              /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+                sortedTracks.length === 0 ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
+                  /* @__PURE__ */ jsx13(
+                    TimelineGhostLanes,
+                    {
+                      laneWidth: timelineWidth,
+                      videoLabel: labels.ghostVideoLane,
+                      captionLabel: labels.ghostCaptionLane
+                    }
+                  ),
+                  /* @__PURE__ */ jsx13(
+                    TimelineEmptyState,
+                    {
+                      labels: props.labels,
+                      brandedExport: props.brandedExport,
+                      ...props.onStartFromTemplate ? { onStartFromTemplate: props.onStartFromTemplate } : {},
+                      ...props.onAddClip ? { onAddClip: props.onAddClip } : {},
+                      ...props.onAskAgent ? { onAskAgent: props.onAskAgent } : {}
+                    }
+                  )
+                ] }) : null,
+                sortedTracks.map((track) => /* @__PURE__ */ jsx13(
+                  TimelineTrackRow,
+                  {
+                    track,
+                    clips: clipsByTrack.get(track.id) ?? [],
+                    fps,
+                    zoom,
+                    sequenceDurationFrames: timeline.sequence.durationFrames,
+                    selectedClipIds: new Set(selectedClipIds),
+                    tabbableClipId,
+                    canWrite,
+                    frameProvider,
+                    snapMove,
+                    snapEdge,
+                    onSnapPointChange: setActiveSnapPoint,
+                    onSelectClip: selectClip,
+                    onRequestDeleteClip: deleteClip,
+                    onFocusStepClip: focusStepClip,
+                    onCommitMove: handleCommitMove,
+                    onCommitTrim: handleCommitTrim,
+                    onCommitText: handleCommitText,
+                    onLaneSeek: (frame) => clock.seek(frame)
+                  },
+                  track.id
+                )),
+                /* @__PURE__ */ jsxs10("div", { className: "pointer-events-none absolute inset-y-0", style: { left: `${TRACK_HEADER_PX}px`, width: `${timelineWidth}px` }, children: [
+                  /* @__PURE__ */ jsx13(TimelinePlayhead, { frame: playheadFrame, zoom }),
+                  /* @__PURE__ */ jsx13(SnapIndicatorLine, { point: activeSnapPoint, zoom })
+                ] })
               ] })
             ] })
-          ] })
-        }
-      )
-    ] }),
-    props.renderSidePanel ? /* @__PURE__ */ jsx9("aside", { className: "flex w-80 shrink-0 flex-col overflow-hidden border-l border-[var(--border-default)]", children: props.renderSidePanel({ selectedClips, playheadFrame }) }) : null
-  ] }) });
+          }
+        )
+      ] }),
+      props.renderSidePanel ? /* @__PURE__ */ jsx13("aside", { className: "flex max-h-72 shrink-0 flex-col overflow-hidden border-t border-[var(--border-default)] lg:max-h-none lg:w-80 lg:border-l lg:border-t-0", children: props.renderSidePanel({ selectedClips, playheadFrame }) }) : null
+    ] })
+  ] });
 }
 var TimelineEditor_default = TimelineEditor;
 
 export {
+  DEFAULT_TIMELINE_LABELS,
   COMMAND_HISTORY_LIMIT,
   createCommandStack,
   moveClipCommand,
@@ -2495,9 +2691,13 @@ export {
   TimelineRuler,
   TimelineClipChip,
   TimelineTrackRow,
+  BrandMark,
+  TimelineEmptyState,
+  TimelineGhostLanes,
+  TimelineSmallScreenGate,
   ZoomControl,
   SEQUENCE_MEDIA_DRAG_TYPE,
   TimelineEditor,
   TimelineEditor_default
 };
-//# sourceMappingURL=chunk-S6WS2B32.js.map
+//# sourceMappingURL=chunk-EX3LD5G6.js.map