@r2digisolutions/components 0.2.0 → 0.3.1

package/dist/components/organisms/VideoEditor/VideoEditor.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type VideoSequence } from '../../../utils/videoSequence.js';
+import type { Component } from 'svelte';
 interface VideoEditorProps {
     value?: VideoSequence;
     class?: string;
@@ -8,6 +9,6 @@ interface VideoEditorProps {
         document: VideoSequence;
     }) => void;
 }
-declare const VideoEditor: import("svelte").Component<VideoEditorProps, {}, "value">;
+declare const VideoEditor: Component<VideoEditorProps, {}, "value">;
 type VideoEditor = ReturnType<typeof VideoEditor>;
 export default VideoEditor;

package/dist/components/organisms/VideoEditor/VideoEditorStory.svelte

@@ -5,6 +5,7 @@
 	let value = $state(createDemoVideoSequence());
 </script>
 
-<div class="h-[780px] w-full overflow-hidden rounded-xl border border-border">
-	<VideoEditor bind:value />
+<!-- Edge-to-edge in Storybook — same pattern as CanvasEditor -->
+<div class="fixed inset-0 overflow-hidden bg-surface">
+	<VideoEditor bind:value class="h-full" />
 </div>

package/dist/index.d.ts

@@ -95,6 +95,7 @@ export type { VersionTagTone, VersionTagSize } from './components/atoms/VersionT
 export { default as WaveBars } from './components/atoms/WaveBars/WaveBars.svelte';
 export { default as Playhead } from './components/atoms/Playhead/Playhead.svelte';
 export { default as TimeRuler } from './components/atoms/TimeRuler/TimeRuler.svelte';
+export { default as TimelineGrid } from './components/atoms/TimelineGrid/TimelineGrid.svelte';
 export { default as TrimHandle } from './components/atoms/TrimHandle/TrimHandle.svelte';
 export type { TrimHandleSide } from './components/atoms/TrimHandle/TrimHandle.svelte';
 export { default as MediaKindIcon } from './components/atoms/MediaKindIcon/MediaKindIcon.svelte';
@@ -606,6 +607,12 @@ export { default as MediaStage } from './components/molecules/MediaStage/MediaSt
 export { default as CanvasInspector } from './components/molecules/CanvasInspector/CanvasInspector.svelte';
 export { default as CanvasElementsPanel } from './components/molecules/CanvasElementsPanel/CanvasElementsPanel.svelte';
 export { CANVAS_ELEMENT_MIME, type CanvasElementDef } from './components/molecules/CanvasElementsPanel/CanvasElementsPanel.svelte';
+export { default as VideoComponentsPanel } from './components/molecules/VideoComponentsPanel/VideoComponentsPanel.svelte';
+export type { VideoComponentDef } from './components/molecules/VideoComponentsPanel/VideoComponentsPanel.svelte';
+export { default as VideoAnimationsPanel } from './components/molecules/VideoAnimationsPanel/VideoAnimationsPanel.svelte';
+export type { VideoAnimationDef } from './components/molecules/VideoAnimationsPanel/VideoAnimationsPanel.svelte';
+export { default as VideoTransitionsPanel } from './components/molecules/VideoTransitionsPanel/VideoTransitionsPanel.svelte';
+export type { VideoTransitionDef } from './components/molecules/VideoTransitionsPanel/VideoTransitionsPanel.svelte';
 export { default as ProgramMonitor } from './components/molecules/ProgramMonitor/ProgramMonitor.svelte';
 export { default as VideoTrackHeader } from './components/molecules/VideoTrackHeader/VideoTrackHeader.svelte';
 export { default as WaveformRegion } from './components/molecules/WaveformRegion/WaveformRegion.svelte';
@@ -827,9 +834,10 @@ export { tokenizeQuery, validateQuery, parseSimpleClauses, fieldIdsFromDefs, DEF
 export type { QueryToken, QueryTokenKind, QueryExample } from './utils/queryBar.js';
 export { queryStringToGroup, groupToQueryString, groupToFilterItems, removeRuleFromGroup, setFlatRules } from './utils/queryBridge.js';
 export { emptyBlogDocument, createBlock, createComponentBlock, serializeBlogDocument, parseBlogDocument, registerBlogComponent, unregisterBlogComponent, getBlogComponent, listBlogComponents, clearBlogComponentRegistry, NATIVE_BLOCK_TYPES, defaultDataForType, blogWidthClass, blogAlignClass, blogAspectPadding } from './utils/blogDocument.js';
-export { msToPx, pxToMs, pxPerMsFromZoom, snapMs, clampMs, formatTimecode, ticksForDuration } from './utils/mediaTime.js';
-export { uid, createMediaClip, createMediaTrack, createMediaAsset, clipDurationMs, moveClip, trimClipStart, trimClipEnd, isClipActiveAt, findClipAt, updateClipInTracks, removeClipFromTracks, kindFromFile } from './utils/mediaTracks.js';
-export type { MediaAsset, MediaAssetKind, MediaClip, MediaTrack, MediaTrackKind } from './utils/mediaTracks.js';
+export { msToPx, pxToMs, pxPerMsFromZoom, snapMs, clampMs, formatTimecode, ticksForDuration, snapStepForZoom } from './utils/mediaTime.js';
+export type { TimeTick, TimeTickLevel } from './utils/mediaTime.js';
+export type { MediaAsset, MediaAssetKind, MediaClip, MediaClipAlign, MediaClipRect, MediaClipResettableField, MediaClipRectAxis, MediaTransitionPlayback, MediaTrack, MediaTrackKind } from './utils/mediaTracks.js';
+export { uid, createMediaClip, createMediaTrack, createMediaAsset, clipDurationMs, moveClip, trimClipStart, trimClipEnd, isClipActiveAt, findClipAt, updateClipInTracks, removeClipFromTracks, removeClipsFromTracks, splitClipAt, splitClipsAt, duplicateClipInTracks, mergeClipsInTracks, canMergeMediaClips, moveClipsByDelta, findClipById, nextTrackName, reorderTracks, moveTrack, removeTrack, removeTracks, defaultOverlayRect, defaultMediaClipRect, resolveClipRect, alignClipRect, alignMediaRect, clipHasSpatialRect, isMediaClipFieldModified, resetMediaClipField, findTransitionAt, transitionLayerStyle, transitionDipOverlay, resolvePreviewOpacity, resolveClipOpacity, MEDIA_CLIP_DEFAULTS, kindFromFile, probeMediaSrc } from './utils/mediaTracks.js';
 export { emptyCanvasDocument, createCanvasLayer, createCanvasGuide, createPathFromDocPoints, rebakePathLayer, pathPointsToDoc, reorderCanvasLayers, updateCanvasLayer, updateCanvasLayers, alignLayerRect, snapLayerRect, snapRectToGuides, migrateCanvasDocument, defaultSlotFromRect, rectFromSlot, ensureLayerSlot, canvasLayerFieldDefault, isCanvasFieldModified, resetCanvasField, CANVAS_PRESETS, presetIdForSize } from './utils/canvasDocument.js';
 export type { CanvasDocument, CanvasLayer, CanvasLayerKind, CanvasLayerRect, CanvasPoint, CanvasObjectFit, CanvasTextAlign, CanvasResettableField, CanvasAlign, CanvasFontStyle, CanvasTextDecoration, CanvasGuide, CanvasGuideOrientation, CanvasAnchors, CanvasSlot, CanvasExposedProp, CanvasWidgetDefinition } from './utils/canvasDocument.js';
 export { isContainerKind, canHaveChildren, getChildren, getDescendantIds, getSubtreeIds, getAncestors, isEffectivelyVisible, paintTransformForLayer, isDescendant, canReparent, ANCHOR_PRESETS, resolveSlotRect, slotFromLocalRect, computeAbsoluteRects, absoluteRectFor, reparentLayer, wrapSelection, groupLayers, ungroupLayers, deleteSubtree, duplicateSubtree, reorderSiblings, clipPathForLayer, scrollBoxOverflow, scrollBarMetrics, applyScrollBoxOffsets } from './utils/canvasHierarchy.js';

package/dist/index.js

@@ -82,6 +82,7 @@ export { default as VersionTag } from './components/atoms/VersionTag/VersionTag.
 export { default as WaveBars } from './components/atoms/WaveBars/WaveBars.svelte';
 export { default as Playhead } from './components/atoms/Playhead/Playhead.svelte';
 export { default as TimeRuler } from './components/atoms/TimeRuler/TimeRuler.svelte';
+export { default as TimelineGrid } from './components/atoms/TimelineGrid/TimelineGrid.svelte';
 export { default as TrimHandle } from './components/atoms/TrimHandle/TrimHandle.svelte';
 export { default as MediaKindIcon } from './components/atoms/MediaKindIcon/MediaKindIcon.svelte';
 export { default as PanKnob } from './components/atoms/PanKnob/PanKnob.svelte';
@@ -419,6 +420,9 @@ export { default as MediaStage } from './components/molecules/MediaStage/MediaSt
 export { default as CanvasInspector } from './components/molecules/CanvasInspector/CanvasInspector.svelte';
 export { default as CanvasElementsPanel } from './components/molecules/CanvasElementsPanel/CanvasElementsPanel.svelte';
 export { CANVAS_ELEMENT_MIME } from './components/molecules/CanvasElementsPanel/CanvasElementsPanel.svelte';
+export { default as VideoComponentsPanel } from './components/molecules/VideoComponentsPanel/VideoComponentsPanel.svelte';
+export { default as VideoAnimationsPanel } from './components/molecules/VideoAnimationsPanel/VideoAnimationsPanel.svelte';
+export { default as VideoTransitionsPanel } from './components/molecules/VideoTransitionsPanel/VideoTransitionsPanel.svelte';
 export { default as ProgramMonitor } from './components/molecules/ProgramMonitor/ProgramMonitor.svelte';
 export { default as VideoTrackHeader } from './components/molecules/VideoTrackHeader/VideoTrackHeader.svelte';
 export { default as WaveformRegion } from './components/molecules/WaveformRegion/WaveformRegion.svelte';
@@ -563,8 +567,8 @@ export { parseFilterSchema, emptyFilterValues, clearFilterValues, countActiveFil
 export { tokenizeQuery, validateQuery, parseSimpleClauses, fieldIdsFromDefs, DEFAULT_QUERY_EXAMPLES, operatorSuggestionsForField } from './utils/queryBar.js';
 export { queryStringToGroup, groupToQueryString, groupToFilterItems, removeRuleFromGroup, setFlatRules } from './utils/queryBridge.js';
 export { emptyBlogDocument, createBlock, createComponentBlock, serializeBlogDocument, parseBlogDocument, registerBlogComponent, unregisterBlogComponent, getBlogComponent, listBlogComponents, clearBlogComponentRegistry, NATIVE_BLOCK_TYPES, defaultDataForType, blogWidthClass, blogAlignClass, blogAspectPadding } from './utils/blogDocument.js';
-export { msToPx, pxToMs, pxPerMsFromZoom, snapMs, clampMs, formatTimecode, ticksForDuration } from './utils/mediaTime.js';
-export { uid, createMediaClip, createMediaTrack, createMediaAsset, clipDurationMs, moveClip, trimClipStart, trimClipEnd, isClipActiveAt, findClipAt, updateClipInTracks, removeClipFromTracks, kindFromFile } from './utils/mediaTracks.js';
+export { msToPx, pxToMs, pxPerMsFromZoom, snapMs, clampMs, formatTimecode, ticksForDuration, snapStepForZoom } from './utils/mediaTime.js';
+export { uid, createMediaClip, createMediaTrack, createMediaAsset, clipDurationMs, moveClip, trimClipStart, trimClipEnd, isClipActiveAt, findClipAt, updateClipInTracks, removeClipFromTracks, removeClipsFromTracks, splitClipAt, splitClipsAt, duplicateClipInTracks, mergeClipsInTracks, canMergeMediaClips, moveClipsByDelta, findClipById, nextTrackName, reorderTracks, moveTrack, removeTrack, removeTracks, defaultOverlayRect, defaultMediaClipRect, resolveClipRect, alignClipRect, alignMediaRect, clipHasSpatialRect, isMediaClipFieldModified, resetMediaClipField, findTransitionAt, transitionLayerStyle, transitionDipOverlay, resolvePreviewOpacity, resolveClipOpacity, MEDIA_CLIP_DEFAULTS, kindFromFile, probeMediaSrc } from './utils/mediaTracks.js';
 export { emptyCanvasDocument, createCanvasLayer, createCanvasGuide, createPathFromDocPoints, rebakePathLayer, pathPointsToDoc, reorderCanvasLayers, updateCanvasLayer, updateCanvasLayers, alignLayerRect, snapLayerRect, snapRectToGuides, migrateCanvasDocument, defaultSlotFromRect, rectFromSlot, ensureLayerSlot, canvasLayerFieldDefault, isCanvasFieldModified, resetCanvasField, CANVAS_PRESETS, presetIdForSize } from './utils/canvasDocument.js';
 export { isContainerKind, canHaveChildren, getChildren, getDescendantIds, getSubtreeIds, getAncestors, isEffectivelyVisible, paintTransformForLayer, isDescendant, canReparent, ANCHOR_PRESETS, resolveSlotRect, slotFromLocalRect, computeAbsoluteRects, absoluteRectFor, reparentLayer, wrapSelection, groupLayers, ungroupLayers, deleteSubtree, duplicateSubtree, reorderSiblings, clipPathForLayer, scrollBoxOverflow, scrollBarMetrics, applyScrollBoxOffsets } from './utils/canvasHierarchy.js';
 export { createWidgetDefinition, createWidgetFromSelection, placeWidgetInstance, resolveWidgetInstance, flattenLayersWithWidgets, breakWidgetInstance, updateWidgetDefinition, deleteWidgetDefinition, renameWidgetDefinition, duplicateWidgetDefinition, syncInstanceSizesToDefinition, setExposedProp, isPropExposed, getExposedProp, getExposedFieldDefault, resolveExposedPropValue, groupExposedPropsByLayer, setInstanceOverride, getNamedSlotsFromDefinition, listFillableSlotsForInstance } from './utils/canvasWidget.js';

package/dist/styles.css

@@ -0,0 +1,237 @@
+/* Scan this package so consumers only need to @import this file (no extra @source) */
+@source './components/**/*.{svelte,js}';
+@source './utils/**/*.{svelte,js}';
+
+/* Match theme tokens (:root.dark) — not prefers-color-scheme alone */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   R2DigiSolutions Design System — Tailwind 4 @theme
+   ─────────────────────────────────────────────────────────────────────────── */
+
+@theme {
+  /* Brand colors */
+  --color-brand-50: oklch(97% 0.02 265);
+  --color-brand-100: oklch(93% 0.05 265);
+  --color-brand-200: oklch(86% 0.1 265);
+  --color-brand-300: oklch(76% 0.15 265);
+  --color-brand-400: oklch(65% 0.2 265);
+  --color-brand-500: oklch(55% 0.25 265);
+  --color-brand-600: oklch(47% 0.26 265);
+  --color-brand-700: oklch(39% 0.24 265);
+  --color-brand-800: oklch(31% 0.2 265);
+  --color-brand-900: oklch(22% 0.14 265);
+  --color-brand-950: oklch(15% 0.08 265);
+
+  /* Semantic surface tokens */
+  --color-surface: var(--surface);
+  --color-surface-elevated: var(--surface-elevated);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-border: var(--border);
+  --color-border-strong: var(--border-strong);
+  --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
+  --color-text-muted: var(--text-muted);
+  --color-text-inverse: var(--text-inverse);
+
+  /* Typography */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  /* Radii */
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 3px 0 oklch(0% 0 0 / 0.08), 0 1px 2px -1px oklch(0% 0 0 / 0.06);
+  --shadow-md: 0 4px 6px -1px oklch(0% 0 0 / 0.1), 0 2px 4px -2px oklch(0% 0 0 / 0.08);
+  --shadow-lg: 0 10px 15px -3px oklch(0% 0 0 / 0.12), 0 4px 6px -4px oklch(0% 0 0 / 0.08);
+  --shadow-xl: 0 20px 25px -5px oklch(0% 0 0 / 0.14), 0 8px 10px -6px oklch(0% 0 0 / 0.08);
+
+  /* Transitions */
+  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Light mode (default)
+   ─────────────────────────────────────────────────────────────────────────── */
+
+:root {
+  color-scheme: light;
+
+  --surface: oklch(99% 0.005 265);
+  --surface-elevated: oklch(100% 0 0);
+  --surface-overlay: oklch(97% 0.01 265);
+  --border: oklch(88% 0.02 265);
+  --border-strong: oklch(75% 0.04 265);
+  --text-primary: oklch(15% 0.02 265);
+  --text-secondary: oklch(35% 0.03 265);
+  --text-muted: oklch(45% 0.02 265);
+  --text-inverse: oklch(99% 0 0);
+
+  /* Alert tones */
+  --alert-info-bg: oklch(96% 0.03 240);
+  --alert-info-border: oklch(82% 0.06 240);
+  --alert-info-fg: oklch(28% 0.08 240);
+  --alert-info-muted: oklch(40% 0.06 240);
+  --alert-info-icon: oklch(52% 0.14 240);
+  --alert-info-accent: oklch(55% 0.16 240);
+
+  --alert-success-bg: oklch(96% 0.04 150);
+  --alert-success-border: oklch(82% 0.07 150);
+  --alert-success-fg: oklch(28% 0.08 150);
+  --alert-success-muted: oklch(38% 0.06 150);
+  --alert-success-icon: oklch(50% 0.14 150);
+  --alert-success-accent: oklch(55% 0.16 150);
+
+  --alert-warning-bg: oklch(96% 0.05 85);
+  --alert-warning-border: oklch(84% 0.1 85);
+  --alert-warning-fg: oklch(30% 0.08 75);
+  --alert-warning-muted: oklch(42% 0.07 75);
+  --alert-warning-icon: oklch(58% 0.15 75);
+  --alert-warning-accent: oklch(68% 0.16 75);
+
+  --alert-error-bg: oklch(96% 0.03 25);
+  --alert-error-border: oklch(84% 0.08 25);
+  --alert-error-fg: oklch(30% 0.1 25);
+  --alert-error-muted: oklch(42% 0.08 25);
+  --alert-error-icon: oklch(55% 0.18 25);
+  --alert-error-accent: oklch(58% 0.2 25);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Dark mode
+   ─────────────────────────────────────────────────────────────────────────── */
+
+:root.dark {
+  color-scheme: dark;
+
+  --surface: oklch(14% 0.02 265);
+  --surface-elevated: oklch(18% 0.025 265);
+  --surface-overlay: oklch(20% 0.03 265);
+  --border: oklch(28% 0.03 265);
+  --border-strong: oklch(40% 0.04 265);
+  --text-primary: oklch(96% 0.01 265);
+  --text-secondary: oklch(75% 0.03 265);
+  --text-muted: oklch(55% 0.03 265);
+  --text-inverse: oklch(15% 0.02 265);
+
+  /* Alert tones */
+  --alert-info-bg: oklch(24% 0.04 240);
+  --alert-info-border: oklch(38% 0.06 240);
+  --alert-info-fg: oklch(92% 0.03 240);
+  --alert-info-muted: oklch(78% 0.04 240);
+  --alert-info-icon: oklch(72% 0.12 240);
+  --alert-info-accent: oklch(65% 0.14 240);
+
+  --alert-success-bg: oklch(24% 0.04 150);
+  --alert-success-border: oklch(38% 0.06 150);
+  --alert-success-fg: oklch(92% 0.03 150);
+  --alert-success-muted: oklch(78% 0.04 150);
+  --alert-success-icon: oklch(72% 0.12 150);
+  --alert-success-accent: oklch(65% 0.14 150);
+
+  --alert-warning-bg: oklch(25% 0.04 85);
+  --alert-warning-border: oklch(40% 0.07 85);
+  --alert-warning-fg: oklch(93% 0.03 85);
+  --alert-warning-muted: oklch(80% 0.04 85);
+  --alert-warning-icon: oklch(78% 0.12 85);
+  --alert-warning-accent: oklch(72% 0.14 85);
+
+  --alert-error-bg: oklch(24% 0.05 25);
+  --alert-error-border: oklch(40% 0.08 25);
+  --alert-error-fg: oklch(93% 0.03 25);
+  --alert-error-muted: oklch(80% 0.04 25);
+  --alert-error-icon: oklch(72% 0.14 25);
+  --alert-error-accent: oklch(65% 0.18 25);
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Base styles
+   ─────────────────────────────────────────────────────────────────────────── */
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    scroll-behavior: smooth;
+  }
+
+  body {
+    margin: 0;
+    background-color: var(--surface);
+    color: var(--text-primary);
+    font-family: var(--font-sans);
+    line-height: 1.6;
+    transition:
+      background-color 0.2s var(--ease-smooth),
+      color 0.2s var(--ease-smooth);
+  }
+
+  /* Focus visible styles */
+  :focus-visible {
+    outline: 2px solid oklch(55% 0.25 265);
+    outline-offset: 2px;
+    border-radius: var(--radius-sm);
+  }
+
+  /* Selection */
+  ::selection {
+    background-color: oklch(55% 0.25 265 / 0.25);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Utility layer
+   ─────────────────────────────────────────────────────────────────────────── */
+
+@layer utilities {
+  /* Touch-friendly minimum tap target */
+  .touch-target {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  /* Smooth transitions */
+  .transition-smooth {
+    transition: all 0.2s var(--ease-smooth);
+  }
+
+  .transition-spring {
+    transition: all 0.3s var(--ease-spring);
+  }
+
+  /* Glass morphism */
+  .glass {
+    backdrop-filter: blur(12px) saturate(180%);
+    background-color: oklch(100% 0 0 / 0.08);
+    border: 1px solid oklch(100% 0 0 / 0.12);
+  }
+
+  .dark .glass {
+    background-color: oklch(0% 0 0 / 0.2);
+    border-color: oklch(100% 0 0 / 0.08);
+  }
+
+  /* Surface utilities */
+  .bg-surface { background-color: var(--surface); }
+  .bg-surface-elevated { background-color: var(--surface-elevated); }
+  .bg-surface-overlay { background-color: var(--surface-overlay); }
+  .border-border { border-color: var(--border); }
+  .border-border-strong { border-color: var(--border-strong); }
+  .text-primary { color: var(--text-primary); }
+  .text-secondary { color: var(--text-secondary); }
+  .text-muted { color: var(--text-muted); }
+}

package/dist/utils/mediaTime.d.ts

@@ -1,4 +1,11 @@
 /** Milliseconds ↔ pixels and timecode helpers for media timelines. */
+export type TimeTickLevel = 'major' | 'mid' | 'minor';
+export interface TimeTick {
+    ms: number;
+    level: TimeTickLevel;
+    /** @deprecated Prefer `level === 'major'` */
+    major: boolean;
+}
 export declare function msToPx(ms: number, pxPerMs: number): number;
 export declare function pxToMs(px: number, pxPerMs: number): number;
 /** px per ms from a zoom level (1 = 0.05 px/ms ≈ 50px/s). */
@@ -10,7 +17,10 @@ export declare function formatTimecode(ms: number, opts?: {
     showMs?: boolean;
     fps?: number;
 }): string;
-export declare function ticksForDuration(durationMs: number, pxPerMs: number, minTickPx?: number): {
-    ms: number;
-    major: boolean;
-}[];
+/**
+ * Major / mid / minor ticks for a duration (same hierarchy idea as MediaStage rulers).
+ * mid = major/2, minor = major/10.
+ */
+export declare function ticksForDuration(durationMs: number, pxPerMs: number, minTickPx?: number): TimeTick[];
+/** Suggested snap interval from current zoom (mid tick step). */
+export declare function snapStepForZoom(pxPerMs: number, minTickPx?: number): number;

package/dist/utils/mediaTime.js

@@ -40,18 +40,37 @@ export function formatTimecode(ms, opts) {
     }
     return `${hh}${mm}:${ss}`;
 }
-export function ticksForDuration(durationMs, pxPerMs, minTickPx = 60) {
+/** Nice major step so major labels sit ~minTickPx apart on screen. */
+function majorStepForPxPerMs(pxPerMs, minTickPx = 64) {
     const candidates = [100, 250, 500, 1000, 2000, 5000, 10_000, 30_000, 60_000, 120_000, 300_000];
-    let step = candidates[candidates.length - 1];
     for (const c of candidates) {
-        if (msToPx(c, pxPerMs) >= minTickPx) {
-            step = c;
-            break;
-        }
+        if (msToPx(c, pxPerMs) >= minTickPx)
+            return c;
     }
+    return candidates[candidates.length - 1];
+}
+/**
+ * Major / mid / minor ticks for a duration (same hierarchy idea as MediaStage rulers).
+ * mid = major/2, minor = major/10.
+ */
+export function ticksForDuration(durationMs, pxPerMs, minTickPx = 64) {
+    const major = majorStepForPxPerMs(pxPerMs, minTickPx);
+    const mid = major / 2;
+    const minor = major / 10;
     const ticks = [];
-    for (let t = 0; t <= durationMs + 0.5; t += step) {
-        ticks.push({ ms: t, major: t % (step * 2) === 0 || t === 0 });
+    const eps = minor / 4;
+    for (let t = 0; t <= durationMs + eps; t += minor) {
+        const ms = Math.round(t * 1000) / 1000;
+        if (ms > durationMs)
+            break;
+        const nearMajor = Math.abs(ms % major) < eps || Math.abs((ms % major) - major) < eps;
+        const nearMid = Math.abs(ms % mid) < eps || Math.abs((ms % mid) - mid) < eps;
+        const level = nearMajor ? 'major' : nearMid ? 'mid' : 'minor';
+        ticks.push({ ms, level, major: level === 'major' });
     }
     return ticks;
 }
+/** Suggested snap interval from current zoom (mid tick step). */
+export function snapStepForZoom(pxPerMs, minTickPx = 64) {
+    return majorStepForPxPerMs(pxPerMs, minTickPx) / 2;
+}

package/dist/utils/mediaTracks.d.ts

@@ -1,5 +1,13 @@
 /** Shared track/clip types and helpers for Video / Audio editors. */
 export type MediaAssetKind = 'image' | 'video' | 'audio' | 'text';
+/** Spatial rect on the program frame (document px). */
+export interface MediaClipRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export type MediaClipAlign = 'left' | 'center-h' | 'right' | 'top' | 'center-v' | 'bottom' | 'center' | 'full';
 export interface MediaAsset {
     id: string;
     kind: MediaAssetKind;
@@ -26,6 +34,32 @@ export interface MediaClip {
     /** Source trim out (absolute in source) */
     trimOutMs?: number;
     color?: string;
+    /** Overlay / title text */
+    text?: string;
+    /** Timeline clip block opacity (0–1). Does not affect program preview. */
+    opacity?: number;
+    /** Program monitor / render opacity (0–1). */
+    previewOpacity?: number;
+    volume?: number;
+    fontSize?: number;
+    fontWeight?: number | string;
+    fontFamily?: string;
+    textAlign?: 'left' | 'center' | 'right';
+    textColor?: string;
+    /** Position on program monitor (document px). Overlays / positioned media. */
+    rect?: MediaClipRect;
+    animationIn?: {
+        type: string;
+        durationMs: number;
+    };
+    animationOut?: {
+        type: string;
+        durationMs: number;
+    };
+    transitionOut?: {
+        type: string;
+        durationMs: number;
+    };
 }
 export type MediaTrackKind = 'video' | 'audio' | 'image';
 export interface MediaTrack {
@@ -43,6 +77,24 @@ export declare function uid(prefix?: string): string;
 export declare function createMediaClip(partial: Omit<MediaClip, 'id'> & {
     id?: string;
 }): MediaClip;
+/** Default overlay rect for text / plates on a program frame. */
+export declare function defaultOverlayRect(frame: {
+    width: number;
+    height: number;
+}, preset?: 'center' | 'lower-third' | 'top' | 'watermark' | 'full' | 'badge' | 'ticker' | 'side'): MediaClipRect;
+export declare function clipHasSpatialRect(clip: MediaClip): boolean;
+export declare function resolveClipRect(clip: MediaClip, frame: {
+    width: number;
+    height: number;
+}): MediaClipRect;
+export declare function alignClipRect(clip: MediaClip, frame: {
+    width: number;
+    height: number;
+}, align: MediaClipAlign): MediaClip;
+export declare function alignMediaRect(rect: MediaClipRect, bounds: {
+    width: number;
+    height: number;
+}, align: MediaClipAlign): MediaClipRect;
 export declare function createMediaTrack(partial: Omit<MediaTrack, 'id' | 'clips'> & {
     id?: string;
     clips?: MediaClip[];
@@ -52,10 +104,112 @@ export declare function moveClip(clip: MediaClip, newStartMs: number, durationMs
 export declare function trimClipStart(clip: MediaClip, newStartMs: number, minDur?: number): MediaClip;
 export declare function trimClipEnd(clip: MediaClip, newEndMs: number, minDur?: number): MediaClip;
 export declare function isClipActiveAt(clip: MediaClip, timeMs: number): boolean;
+/** Active CapCut-style transition: straddles the cut of a clip with `transitionOut`. */
+export interface MediaTransitionPlayback {
+    from: MediaClip;
+    to: MediaClip | null;
+    trackId: string;
+    type: string;
+    /** 0 at transition start → 1 at end of transition */
+    progress: number;
+    durationMs: number;
+    windowStartMs: number;
+    windowEndMs: number;
+}
+export declare function findTransitionAt(tracks: MediaTrack[], timeMs: number): MediaTransitionPlayback | null;
+/** Geometry for overflow-based wipes (reliable vs clip-path). */
+export interface TransitionWipeBox {
+    box: {
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+    };
+    content: {
+        left: string;
+        top: string;
+        width: string;
+        height: string;
+    };
+}
+export interface TransitionLayerStyle {
+    opacity: number;
+    transform: string;
+    clipPath?: string;
+    filter?: string;
+    transformOrigin?: string;
+    /** CSS mask-image (and -webkit-mask-image) */
+    maskImage?: string;
+    /** Prefer this for hard directional wipes */
+    wipe?: TransitionWipeBox;
+}
+/** CSS bits for outgoing / incoming layers during a transition. */
+export declare function transitionLayerStyle(role: 'from' | 'to', type: string, progress: number): TransitionLayerStyle;
+export declare function transitionDipOverlay(type: string, progress: number): {
+    color: string;
+    opacity: number;
+} | null;
 export declare function findClipAt(tracks: MediaTrack[], timeMs: number, kind?: MediaTrackKind): MediaClip | null;
+export declare function findClipById(tracks: MediaTrack[], clipId: string): MediaClip | null;
 export declare function updateClipInTracks(tracks: MediaTrack[], clipId: string, updater: (c: MediaClip) => MediaClip): MediaTrack[];
 export declare function removeClipFromTracks(tracks: MediaTrack[], clipId: string): MediaTrack[];
+export declare function removeClipsFromTracks(tracks: MediaTrack[], clipIds: string[]): MediaTrack[];
+/** Split a clip at timeMs; returns updated tracks (no-op if playhead not inside clip). */
+export declare function splitClipAt(tracks: MediaTrack[], clipId: string, timeMs: number, minDur?: number): MediaTrack[];
+/** Split every selected clip that contains timeMs. */
+export declare function splitClipsAt(tracks: MediaTrack[], clipIds: string[], timeMs: number, minDur?: number): MediaTrack[];
+export declare function duplicateClipInTracks(tracks: MediaTrack[], clipId: string): MediaTrack[];
+/**
+ * Merge 2+ clips of the same kind into one spanning earliest start → latest end.
+ * Clips may live on different tracks; the result is placed on the earliest clip's track.
+ * Returns null if merge is not possible.
+ */
+export declare function canMergeMediaClips(tracks: MediaTrack[], clipIds: string[]): boolean;
+export declare function mergeClipsInTracks(tracks: MediaTrack[], clipIds: string[]): MediaTrack[] | null;
+/** Shift one or more clips in time by the same delta (clamped so none go before 0). */
+export declare function moveClipsByDelta(tracks: MediaTrack[], clipIds: string[], deltaMs: number): MediaTrack[];
+export declare function nextTrackName(tracks: MediaTrack[], kind: MediaTrackKind): string;
+/** Reorder tracks by id list (ids not listed keep relative order at the end). */
+export declare function reorderTracks(tracks: MediaTrack[], orderedIds: string[]): MediaTrack[];
+/** Move a track from one index to another. */
+export declare function moveTrack(tracks: MediaTrack[], fromIndex: number, toIndex: number): MediaTrack[];
+export declare function removeTrack(tracks: MediaTrack[], trackId: string): MediaTrack[];
+export declare function removeTracks(tracks: MediaTrack[], trackIds: string[]): MediaTrack[];
+/** Defaults for inspector reset (Unreal-style). */
+export declare const MEDIA_CLIP_DEFAULTS: {
+    opacity: number;
+    previewOpacity: number;
+    volume: number;
+    fontSize: number;
+    fontWeight: number | string;
+    textAlign: "center";
+    textColor: string;
+    color: string;
+    trimInMs: number;
+    trimOutMs: number | undefined;
+};
+export type MediaClipRectAxis = 'x' | 'y' | 'w' | 'h';
+export type MediaClipResettableField = keyof typeof MEDIA_CLIP_DEFAULTS | 'rect' | `rect.${MediaClipRectAxis}`;
+/** Default rect used by inspector reset (must stay in sync with `resetMediaClipField`). */
+export declare function defaultMediaClipRect(clip: MediaClip, frame: {
+    width: number;
+    height: number;
+}): MediaClipRect;
+export declare function isMediaClipFieldModified(clip: MediaClip, field: MediaClipResettableField, frame?: {
+    width: number;
+    height: number;
+}): boolean;
+export declare function resetMediaClipField(clip: MediaClip, field: MediaClipResettableField, frame?: {
+    width: number;
+    height: number;
+}): MediaClip;
+/** Effective program-monitor opacity (ignores timeline clip opacity). */
+export declare function resolvePreviewOpacity(clip: MediaClip): number;
+/** Effective timeline block opacity. */
+export declare function resolveClipOpacity(clip: MediaClip): number;
 export declare function createMediaAsset(partial: Omit<MediaAsset, 'id'> & {
     id?: string;
 }): MediaAsset;
 export declare function kindFromFile(file: File): MediaAssetKind;
+/** Probe width/height/duration from a local media URL. */
+export declare function probeMediaSrc(src: string, kind: MediaAssetKind): Promise<Pick<MediaAsset, 'width' | 'height' | 'durationMs'>>;