@linker-design-plus/timeline-track 2.0.10 → 2.0.11

package/README.md

@@ -190,3 +190,4 @@ pnpm exec tsc -p tsconfig.json --noEmit
 - [docs/interaction-model.md](./docs/interaction-model.md): 指针交互分层和拖拽约束
 - [docs/refactor-roadmap.md](./docs/refactor-roadmap.md): 主线重构归档与后续收敛方向
 - [docs/maintenance-audit.md](./docs/maintenance-audit.md): 本轮仓库审计、验证结果和依赖建议
+- [docs/review-remediation-plan.md](./docs/review-remediation-plan.md): 基于审查结论的修复计划与阶段性落地建议

package/dist/components/panel/ClipConfigPanel.d.ts

@@ -19,52 +19,39 @@ export interface ClipConfigPanelConfig {
     theme?: ClipConfigPanelTheme;
     onClipUpdate?: (clipId: string, updates: Partial<Clip>) => void;
 }
+export declare const CSS_CLASSES: {
+    readonly container: "clip-config-panel";
+    readonly tabBar: "clip-config-tab-bar";
+    readonly tabButton: "clip-config-tab-button";
+    readonly content: "clip-config-content";
+    readonly visualPanel: "clip-config-visual-panel";
+    readonly audioPanel: "clip-config-audio-panel";
+    readonly actionBar: "clip-config-action-bar";
+    readonly section: "clip-config-section";
+    readonly sectionTitle: "clip-config-section-title";
+    readonly row: "clip-config-row";
+    readonly label: "clip-config-label";
+    readonly slider: "clip-config-slider";
+    readonly input: "clip-config-input";
+    readonly presetGrid: "clip-config-preset-grid";
+    readonly presetButton: "clip-config-preset-button";
+    readonly resetButton: "clip-config-reset-button";
+    readonly emptyState: "clip-config-empty-state";
+};
 export declare class ClipConfigPanel {
-    private container;
-    private rootElement;
-    private theme;
-    private onClipUpdate?;
+    private readonly container;
+    private readonly theme;
+    private readonly renderer;
+    private readonly onClipUpdate?;
     private currentClip;
     private activeTab;
-    private iconCache;
-    private tabBar;
-    private contentArea;
-    private visualPanel;
-    private audioPanel;
-    private xSlider;
-    private xInput;
-    private ySlider;
-    private yInput;
-    private scaleSlider;
-    private scaleInput;
-    private volumeSlider;
-    private volumeInput;
+    private readonly iconCache;
     constructor(config: ClipConfigPanelConfig);
     setClip(clip: Clip | null): void;
     destroy(): void;
-    private getAvailableTabs;
     private render;
-    private applyBaseTheme;
-    private renderEmptyState;
-    private renderPanel;
-    private renderTabBar;
-    private updateTabBarState;
-    private renderContentArea;
-    private updateContentVisibility;
-    private renderVisualPanel;
-    private renderAudioPanel;
-    private renderActionBar;
-    private renderPositionControl;
-    private renderPresetGrid;
-    private calculatePresetPosition;
-    private renderScaleControl;
-    private renderVolumeControl;
     private handleVolumeChange;
-    private updateVolumeControls;
     private clampValue;
-    private updateUIControls;
-    private updateSliderAndInput;
-    private updateSliderVisual;
     private handleTransformChange;
     private handleTransformChanges;
 }

package/dist/components/panel/ClipConfigPanelRenderer.d.ts

@@ -0,0 +1,58 @@
+import { type TemplateResult } from 'lit';
+import type { Clip } from '../../core/models';
+import { LitDomRenderer } from '../../core/renderers/domRenderer';
+import type { ClipConfigPanelTheme } from './ClipConfigPanel';
+export type ClipConfigPanelTabKey = 'visual' | 'audio';
+export interface ClipConfigPanelCallbacks {
+    onTabChange: (tab: ClipConfigPanelTabKey) => void;
+    onTransformChange: (property: 'x' | 'y' | 'scale', value: number) => void;
+    onPresetSelect: (x: number, y: number) => void;
+    onVolumeChange: (value: number) => void;
+}
+export interface ClipConfigPanelViewModel {
+    clip: Clip | null;
+    activeTab: ClipConfigPanelTabKey;
+    theme: ClipConfigPanelTheme;
+    emptyStateIconSvg: string;
+    callbacks: ClipConfigPanelCallbacks;
+}
+export declare const CLIP_CONFIG_CSS_CLASSES: {
+    readonly container: "clip-config-panel";
+    readonly tabBar: "clip-config-tab-bar";
+    readonly tabButton: "clip-config-tab-button";
+    readonly content: "clip-config-content";
+    readonly visualPanel: "clip-config-visual-panel";
+    readonly audioPanel: "clip-config-audio-panel";
+    readonly actionBar: "clip-config-action-bar";
+    readonly section: "clip-config-section";
+    readonly sectionTitle: "clip-config-section-title";
+    readonly row: "clip-config-row";
+    readonly label: "clip-config-label";
+    readonly slider: "clip-config-slider";
+    readonly input: "clip-config-input";
+    readonly presetGrid: "clip-config-preset-grid";
+    readonly presetButton: "clip-config-preset-button";
+    readonly resetButton: "clip-config-reset-button";
+    readonly emptyState: "clip-config-empty-state";
+};
+export declare class ClipConfigPanelRenderer extends LitDomRenderer<ClipConfigPanelViewModel> {
+    protected renderTemplate(viewModel: ClipConfigPanelViewModel): TemplateResult;
+    private renderEmptyState;
+    private renderPanel;
+    private renderTabBar;
+    private renderVisualPanel;
+    private renderPositionSection;
+    private renderScaleSection;
+    private renderAudioPanel;
+    private renderPositionControl;
+    private renderPresetGrid;
+    private renderSectionTitle;
+    private renderRangeInput;
+    private renderNumberInput;
+    private getContainerStyle;
+    private getSliderStyle;
+    private getAvailableTabs;
+    private getTransform;
+    private calculatePresetPosition;
+    private resizeSvg;
+}

package/dist/components/panel/TrackInfoPanel.d.ts

@@ -20,8 +20,9 @@ export declare class TrackInfoPanel {
     private width;
     private timeScaleHeight;
     private includeTimeScaleSpacer;
-    private trackList;
-    private iconCache;
+    private scrollTop;
+    private readonly renderer;
+    private readonly iconCache;
     private onMuteTrack?;
     constructor(config: TrackInfoPanelConfig, _onRenameTrack?: (trackId: string, newName: string) => void, _onDeleteTrack?: (trackId: string) => void, onMuteTrack?: (trackId: string, isMuted: boolean) => void);
     private init;
@@ -29,6 +30,5 @@ export declare class TrackInfoPanel {
     getTracks(): Track[];
     render(): void;
     setScrollTop(scrollTop: number): void;
-    private createTrackItem;
     destroy(): void;
 }

package/dist/components/panel/TrackInfoPanelRenderer.d.ts

@@ -0,0 +1,30 @@
+import { type TemplateResult } from 'lit';
+import { Track } from '../../core/models';
+import { LitDomRenderer } from '../../core/renderers/domRenderer';
+export interface TrackInfoPanelTheme {
+    background: string;
+    border: string;
+    text: string;
+    buttonBackground: string;
+    buttonHover: string;
+    buttonDanger: string;
+}
+export interface TrackInfoPanelViewModel {
+    tracks: Track[];
+    scrollTop: number;
+    theme: TrackInfoPanelTheme;
+    timeScaleHeight: number;
+    includeTimeScaleSpacer: boolean;
+    onMuteTrack?: (trackId: string, isMuted: boolean) => void;
+    icons: {
+        videoTrack: string;
+        audioTrack: string;
+        volume: string;
+        volumeMuted: string;
+    };
+}
+export declare class TrackInfoPanelRenderer extends LitDomRenderer<TrackInfoPanelViewModel> {
+    protected renderTemplate(viewModel: TrackInfoPanelViewModel): TemplateResult;
+    private renderTrackItem;
+    private resizeSvg;
+}

package/dist/core/commands/timelineCommands.d.ts

@@ -61,6 +61,7 @@ export type TrackPlacementCommandResult = {
     status: 'create_track';
     trackType: TrackType;
     suggestedTrackName: string;
+    insertionPlacement: TrackInsertionPlacement;
 };
 export type CrossTrackMoveCommandResult = {
     status: 'missing_target_track_by_position';

package/dist/core/controllers/previewBackend.d.ts

@@ -1,4 +1,5 @@
 import type { ActiveClipPlaybackInfo, Clip, ClipVisualTransform, PlayState, PreviewAspectRatio, PreviewMediaSource, PreviewSourceResolver, TimeMs } from '../models/types';
+import type { SourceMediaRegistry } from '../resources/sourceMediaRegistry';
 export interface TimelinePreviewSyncPayload {
     activeClips: ActiveClipPlaybackInfo[];
     nextClips: ActiveClipPlaybackInfo[];
@@ -66,6 +67,7 @@ export interface PreviewBackendClockState {
 export interface TimelinePreviewBackendOptions {
     callbacks?: TimelinePreviewBackendCallbacks;
     previewSourceResolver?: PreviewSourceResolver;
+    sourceMediaRegistry?: SourceMediaRegistry;
     rootClassName?: string;
     frameClassName?: string;
     slotClassNamePrefix?: string;

package/dist/core/controllers/previewPendingOverlayRenderer.d.ts

@@ -0,0 +1,17 @@
+import type { PreviewPendingState, PreviewRuntimeState } from './previewBackend';
+import type { DomRenderer } from '../renderers/domRenderer';
+export interface PreviewPendingOverlayViewModel {
+    pendingState: PreviewPendingState | null;
+    runtimeState: PreviewRuntimeState;
+}
+export declare class PreviewPendingOverlayRenderer implements DomRenderer<PreviewPendingOverlayViewModel> {
+    private container;
+    private statusElement;
+    private detailElement;
+    private actionElement;
+    private readonly onRetry;
+    constructor(onRetry: () => void);
+    mount(container: HTMLElement): void;
+    update(viewModel: PreviewPendingOverlayViewModel): void;
+    destroy(): void;
+}

package/dist/core/controllers/timelineClipEventController.d.ts

@@ -1,6 +1,7 @@
 import type { Clip, PlayState } from '../models/types';
 export interface ClipMutationEffectHandlers {
     notifySelectionChange: () => void;
+    emitSelectionChangeEvent?: () => void;
     emitSelectedClipChangeIfNeeded: () => void;
     handleClipChange: () => void;
     checkTrackDurationChange?: () => void;

package/dist/core/controllers/timelinePreviewSession.d.ts

@@ -1,4 +1,5 @@
 import type { ActiveClipPlaybackInfo, ClipVisualTransform, PlayState, PreviewAspectRatio, PreviewSourceResolver, TimeMs, TrackType } from '../models/types';
+import type { SourceMediaRegistry } from '../resources/sourceMediaRegistry';
 import type { PreviewPendingState, PreviewRuntimeState } from './previewBackend';
 interface TimelinePreviewSessionCallbacks {
     onBufferingStateChange?: (isBuffering: boolean) => void;
@@ -17,6 +18,7 @@ interface TimelinePreviewSessionDependencies {
     frameClassName?: string;
     slotClassNamePrefix?: string;
     previewSourceResolver?: PreviewSourceResolver;
+    sourceMediaRegistry?: SourceMediaRegistry;
 }
 export interface TimelinePreviewSyncPayload {
     activeClips: ActiveClipPlaybackInfo[];
@@ -34,9 +36,7 @@ export declare class TimelinePreviewSession {
     private rootElement;
     private frameElement;
     private pendingOverlayElement;
-    private pendingOverlayStatusElement;
-    private pendingOverlayDetailElement;
-    private pendingOverlayActionElement;
+    private readonly pendingOverlayRenderer;
     private resizeObserver;
     private readonly trackSlots;
     private audioContext;
@@ -96,6 +96,7 @@ export declare class TimelinePreviewSession {
     private updateFrameLayout;
     private maybeResolveAutoAspectRatio;
     private resolveAspectRatioProbeSource;
+    private buildPreviewSourceCacheKey;
     private getAspectRatioProbe;
     private tryResolveAutoAspectRatioFromSlot;
     private handleResolvedAutoAspectRatio;

package/dist/core/controllers/timelineSelectionController.d.ts

@@ -1,4 +1,4 @@
-import type { Clip } from '../models/types';
+import type { Clip, SelectedClipAudioAction, SelectionChangeData } from '../models/types';
 export interface SelectedClipSnapshot {
     clip: Clip | null;
     hasSelectedClip: boolean;
@@ -7,11 +7,17 @@ interface ResolveSelectedClipOptions {
     getPrimarySelectedClip: () => Clip | null;
     findFallbackSelectedClip?: () => Clip | null;
 }
+interface ResolveSelectionChangeOptions extends ResolveSelectedClipOptions {
+    getSelectedClipIds: () => string[];
+    canSplitSelectedClip: () => boolean;
+    getSelectedClipAudioAction: () => SelectedClipAudioAction;
+}
 interface EmitSelectedClipChangeOptions {
     lastSelectedClipId: string | null;
     resolveSelectedClip: () => SelectedClipSnapshot;
     emitSelectedClipChange: (payload: SelectedClipSnapshot) => void;
 }
 export declare function resolveSelectedClipSnapshot(options: ResolveSelectedClipOptions): SelectedClipSnapshot;
+export declare function resolveSelectionChangeData(options: ResolveSelectionChangeOptions): SelectionChangeData;
 export declare function emitSelectedClipChangeIfNeeded(options: EmitSelectedClipChangeOptions): string | null;
 export {};

package/dist/core/controllers/timelineTrackMutationController.d.ts

@@ -1,8 +1,8 @@
 import type { MoveClipToTrackCommandResult, RemoveClipCommandResult, TrackPlacementCommandResult } from '../commands/timelineCommands';
-import type { Clip, TrackType } from '../models/types';
+import type { Clip, TrackInsertionPlacement, TrackType } from '../models/types';
 import type { TimelineTrackCollection } from '../tracks/timelineTrackCollection';
 interface CreateTrackHandler {
-    (type: TrackType, name?: string): string;
+    (type: TrackType, name?: string, insertionPlacement?: TrackInsertionPlacement, referenceTrackId?: string): string;
 }
 interface ApplyClipPlacementOptions {
     clip: Clip;

package/dist/core/facade/timelineManager.d.ts

@@ -1,5 +1,5 @@
 import { type TimelinePreviewBackend } from '../controllers';
-import { TimelineConfig, Clip, ClipConfig, TimeMs, PlayState, Action, TimelineEvent, EventListener as TimelineEventListener, TimelineExportData, Track as TrackEntity, ThumbnailProvider, TrackInsertionPlacement, TrackType, ActiveClipPlaybackInfo, PreviewAspectRatio, PreviewMountConfig, PreviewBackendType } from '../models';
+import { TimelineConfig, Clip, ClipConfig, TimeMs, PlayState, Action, TimelineEvent, EventListener as TimelineEventListener, TimelineExportData, Track as TrackEntity, ThumbnailProvider, TrackInsertionPlacement, TrackType, ActiveClipPlaybackInfo, PreviewAspectRatio, PreviewMountConfig, PreviewBackendType, SelectedClipAudioAction } from '../models';
 import type { ResolvedPlaybackPlan } from '../controllers/timelinePlaybackResolver';
 import { TimelineClipConfigController } from '../controllers/timelineClipConfigController';
 export declare class TimelineManager {
@@ -38,8 +38,10 @@ export declare class TimelineManager {
     private verticalScrollbar;
     private isExecutingHistoryAction;
     private lastTrackDuration;
-    private lastEffectiveTrackDuration;
+    private lastReportedTrackDuration;
     private thumbnailProvider;
+    private clipThumbnailLoadStates;
+    private sourceMediaRegistry;
     private canPlay;
     private sourceLoadingCount;
     private timelineStore?;
@@ -64,6 +66,7 @@ export declare class TimelineManager {
     private selectionStore;
     private multiDragSession;
     private clipRemovalBatchDepth;
+    private splitOperationDepth;
     constructor(config?: Partial<TimelineConfig>);
     private getTimelineStore;
     private getTimelineCommands;
@@ -261,6 +264,9 @@ export declare class TimelineManager {
      * 批量添加片段。批量模式下仅维护一段连续的视频源加载状态。
      */
     addClips(clipConfigs: ClipConfig[]): Promise<string[]>;
+    private resolveBatchClipConfig;
+    private resolveBatchAppendTrackId;
+    private getTrackTimelineExtentById;
     private addClipInternal;
     removeClip(clipId: string): void;
     removeClipsByExternalId(externalId: string): boolean;
@@ -269,6 +275,7 @@ export declare class TimelineManager {
     splitCurrentClip(): void;
     getClips(): Clip[];
     private getExportComposition;
+    private getExportCoverUrl;
     exportTimeline(): TimelineExportData;
     importTimeline(data: TimelineExportData): Promise<void>;
     private resolveImportedTrackRoles;
@@ -304,6 +311,14 @@ export declare class TimelineManager {
      * 更新 canPlay 状态
      */
     private updateCanPlayState;
+    private findClipById;
+    private primeOrLoadClipThumbnails;
+    private markClipThumbnailLoadCompleted;
+    private buildClipThumbnailLoadSignature;
+    private buildSourceMediaKey;
+    private buildClipThumbnailResourceKey;
+    private isClipThumbnailLoadCurrent;
+    private areThumbnailArraysEqual;
     private handleClipSplit;
     private handleClipSelect;
     private handleActionUndo;
@@ -379,7 +394,8 @@ export declare class TimelineManager {
     getPrimarySelectedClip(): Clip | null;
     getSelectedClips(): Clip[];
     canDeleteSelectedClips(): boolean;
-    getSelectedClipAudioAction(): 'separate' | 'restore' | null;
+    canSplitSelectedClip(): boolean;
+    getSelectedClipAudioAction(): SelectedClipAudioAction;
     canToggleSelectedClipsAudio(): boolean;
     toggleSelectedClipsAudio(): Promise<boolean>;
     getCurrentActiveClips(): ActiveClipPlaybackInfo[];
@@ -418,8 +434,8 @@ export declare class TimelineManager {
     moveClipToTrack(clipId: string, targetTrackId: string): boolean;
     private moveClipToTrackWithHistorySnapshot;
     /**
-     * 获取轨道内的有效总时长（去除首尾空白）
-     * @returns 最早 clip 起点到最晚 clip 终点的时长（毫秒）
+     * 获取时间轴总时长
+     * @returns 从 0 到最后一个音视频 clip 终点的时长（毫秒）
      */
     getTrackTotalDuration(): TimeMs;
     destroy(): void;
@@ -427,6 +443,7 @@ export declare class TimelineManager {
     clearHistory(): void;
     private handleClipChange;
     private withClipRemovalBatch;
+    private withSplitOperation;
     private resolveClipIdsForExternalIdRemoval;
     private shouldClearSelectionForClipIds;
     private resolveSelectedClipAtTime;
@@ -479,6 +496,7 @@ export declare class TimelineManager {
      */
     private checkTrackDurationChange;
     private resolveSelectedClipSnapshot;
+    private resolveSelectionChangeData;
     private commitPreviewVisualTransform;
     clearAllTracksAndClips(): void;
 }

package/dist/core/layout/TimelineManagerLayoutRenderer.d.ts

@@ -0,0 +1,25 @@
+import type { Theme } from '../models/types';
+export interface TimelineManagerLayoutElements {
+    headerCorner: HTMLDivElement;
+    headerViewport: HTMLDivElement;
+    headerCanvasHost: HTMLDivElement;
+    trackInfoViewport: HTMLDivElement;
+    bodyViewport: HTMLDivElement;
+    bodyCanvasHost: HTMLDivElement;
+    verticalScrollbarCanvasHost: HTMLDivElement;
+    horizontalScrollbarCanvasHost: HTMLDivElement;
+    playheadOverlay: HTMLDivElement;
+}
+export interface CreateTimelineManagerLayoutOptions {
+    theme: Theme;
+    timeScaleHeight: number;
+    leftPanelWidth: number;
+    scrollbarSize: number;
+}
+export declare class TimelineManagerLayoutRenderer {
+    private container;
+    mount(container: HTMLElement, options: CreateTimelineManagerLayoutOptions): TimelineManagerLayoutElements;
+    destroy(): void;
+    private renderTemplate;
+    private requireElement;
+}

package/dist/core/layout/timelineManagerDom.d.ts

@@ -1,17 +1,8 @@
 import type { Theme } from '../models/types';
+import { type TimelineManagerLayoutElements } from './TimelineManagerLayoutRenderer';
 export declare const TIMELINE_MANAGER_LEFT_PANEL_WIDTH = 200;
 export declare const TIMELINE_MANAGER_SCROLLBAR_SIZE = 8;
-export interface TimelineManagerLayoutElements {
-    headerCorner: HTMLDivElement;
-    headerViewport: HTMLDivElement;
-    headerCanvasHost: HTMLDivElement;
-    trackInfoViewport: HTMLDivElement;
-    bodyViewport: HTMLDivElement;
-    bodyCanvasHost: HTMLDivElement;
-    verticalScrollbarCanvasHost: HTMLDivElement;
-    horizontalScrollbarCanvasHost: HTMLDivElement;
-    playheadOverlay: HTMLDivElement;
-}
+export type { TimelineManagerLayoutElements };
 export interface CreateTimelineManagerLayoutOptions {
     theme: Theme;
     timeScaleHeight: number;

package/dist/core/models/types.d.ts

@@ -347,6 +347,16 @@ export interface SelectedClipChangeData {
     clip: Clip | null;
     hasSelectedClip: boolean;
 }
+export type SelectedClipAudioAction = 'separate' | 'restore' | null;
+export interface SelectionChangeData {
+    clip: Clip | null;
+    hasSelectedClip: boolean;
+    selectedClipIds: string[];
+    canDeleteSelectedClips: boolean;
+    canSplitSelectedClip: boolean;
+    selectedClipAudioAction: SelectedClipAudioAction;
+    canToggleSelectedClipsAudio: boolean;
+}
 export interface ClipRemovedEventData {
     clipId: string;
 }

package/dist/core/renderers/domRenderer.d.ts

@@ -0,0 +1,17 @@
+import { type TemplateResult } from 'lit';
+export interface DomRenderer<TViewModel> {
+    mount(container: HTMLElement): void;
+    update(viewModel: TViewModel): void;
+    destroy(): void;
+}
+export declare abstract class LitDomRenderer<TViewModel> implements DomRenderer<TViewModel> {
+    private container;
+    private viewModel;
+    mount(container: HTMLElement): void;
+    update(viewModel: TViewModel): void;
+    destroy(): void;
+    protected get mountedContainer(): HTMLElement | null;
+    protected abstract renderTemplate(viewModel: TViewModel): TemplateResult;
+    protected afterRender(_container: HTMLElement, _viewModel: TViewModel): void;
+    private renderCurrent;
+}

package/dist/core/resources/sourceMediaRegistry.d.ts

@@ -0,0 +1,24 @@
+import type { Clip, ClipConfig, PreviewMediaSource } from '../models/types';
+type SourceLike = Pick<Clip, 'src' | 'externalId'> | Pick<ClipConfig, 'src' | 'externalId'>;
+type ThumbnailLike = Pick<Clip, 'src' | 'externalId' | 'startTimeAtSource' | 'endTimeAtSource' | 'duration' | 'type'>;
+export declare class SourceMediaRegistry {
+    private readonly durationCache;
+    private readonly thumbnailCache;
+    private readonly previewSourceCache;
+    static buildSourceKey(source: SourceLike): string;
+    static buildThumbnailKey(clip: ThumbnailLike): string;
+    getDuration(sourceKey: string, loader: () => Promise<number>, options?: {
+        force?: boolean;
+    }): Promise<number>;
+    primeDuration(sourceKey: string, duration: number): void;
+    getThumbnails(thumbnailKey: string, loader: () => Promise<string[]>, options?: {
+        force?: boolean;
+    }): Promise<string[]>;
+    primeThumbnails(thumbnailKey: string, thumbnails: string[]): void;
+    clearThumbnailCache(): void;
+    getPreviewSource(sourceKey: string, loader: () => PreviewMediaSource | null | Promise<PreviewMediaSource | null>, options?: {
+        force?: boolean;
+    }): PreviewMediaSource | null | Promise<PreviewMediaSource | null>;
+    primePreviewSource(sourceKey: string, value: PreviewMediaSource | null): void;
+}
+export {};

package/dist/core/theme/colorTokens.d.ts

@@ -0,0 +1,150 @@
+export declare const SHARED_COLOR_TOKENS: {
+    readonly transparent: "transparent";
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+    readonly panelSurface: "#0f0f0f";
+    readonly panelSurfaceAlt: "#1e1e1e";
+    readonly audioTrackSurface: "#252525";
+    readonly buttonSurface: "#2a2a2a";
+    readonly inputSurface: "#2d2d2d";
+    readonly clipSurface: "#2e2e2e";
+    readonly selectedTrackSurface: "#292929";
+    readonly borderStrong: "#333333";
+    readonly borderMedium: "#444444";
+    readonly borderSubtle: "#555555";
+    readonly textPrimary: "#ffffff";
+    readonly textSecondary: "#e0e0e0";
+    readonly textMuted: "#cccccc";
+    readonly textSubtle: "#aaaaaa";
+    readonly textHint: "#999999";
+    readonly textAudio: "#d0d0d0";
+    readonly textInactive: "#b5b6bf";
+    readonly accentFocus: "#409eff";
+    readonly accentSelectedFill: "#b5baff";
+    readonly accentSelectedBorder: "#50E3C2";
+    readonly accentSelectionBox: "#5082e6";
+    readonly accentAction: "#4c8dff";
+    readonly accentDanger: "#dc3545";
+    readonly accentPlayheadGrip: "#8c90ff";
+    readonly accentCoverFallback: "#FFF2A0";
+    readonly accentAudioPreview: "#b5baff";
+    readonly activeTabBackground: "#595A5D";
+    readonly gridLine: "#E0E0E0";
+    readonly playheadMarker: "#FF0000";
+    readonly overlayPreview: "rgba(0, 0, 0, 0.56)";
+    readonly overlayShadow: "rgba(0, 0, 0, 0.22)";
+    readonly overlayTransformHandle: "rgba(80, 227, 194, 0.95)";
+    readonly overlaySelectionBoxFill: "rgba(80, 130, 230, 0.15)";
+    readonly overlayVideoDropPreview: "rgba(80, 227, 194, 0.18)";
+    readonly overlayAudioDropPreview: "rgba(181, 186, 255, 0.18)";
+    readonly overlayHitArea: "rgba(0, 0, 0, 0.001)";
+    readonly sliderFillStart: "#f6f8ff";
+    readonly sliderFillEnd: "#dfe4f2";
+    readonly sliderRoad: "rgba(116, 128, 163, 0.26)";
+    readonly sliderThumbBorder: "rgba(230, 236, 250, 0.96)";
+    readonly sliderThumbGlowStart: "#ffffff";
+    readonly sliderThumbGlowEnd: "#eef2fb";
+    readonly sliderThumbInnerShadow: "rgba(255, 255, 255, 0.92)";
+    readonly sliderThumbShadow: "rgba(8, 24, 56, 0.24)";
+    readonly demoSliderThumbShadow: "rgba(8, 24, 56, 0.18)";
+};
+export declare const TIMELINE_DEFAULT_THEME_COLORS: {
+    readonly background: "#000000";
+    readonly border: "#333333";
+    readonly timeTick: "#e0e0e0";
+    readonly timeText: "#aaaaaa";
+    readonly trackBackground: "#000000";
+    readonly trackSelectedBackground: "#292929";
+    readonly trackBorder: "#333333";
+    readonly clipBackground: "#2e2e2e";
+    readonly clipBorder: "#000000";
+    readonly clipName: "#ffffff";
+    readonly clipDuration: "#cccccc";
+    readonly clipHandle: "#ffffff";
+    readonly clipSelectedBackground: "#b5baff";
+    readonly clipSelectedBorder: "#50E3C2";
+    readonly clipSelectedName: "#ffffff";
+    readonly clipSelectedDuration: "#ffffff";
+    readonly clipSelectedHandle: "#ffffff";
+    readonly clipSelectedCoverBackground: "#444444";
+    readonly clipCoverBackground: "#333333";
+    readonly audioClipBackground: "#252525";
+    readonly audioClipText: "#d0d0d0";
+    readonly audioClipAccent: "#b8b8c0";
+    readonly playhead: "#ffffff";
+    readonly grid: "#333333";
+    readonly snapGuideLineColor: "#50E3C2";
+    readonly scrollbarBackground: "#333333";
+    readonly scrollbarBorder: "#555555";
+    readonly scrollbarThumb: "#444444";
+};
+export declare const CLIP_CONFIG_PANEL_DEFAULT_THEME: {
+    readonly backgroundColor: "#0f0f0f";
+    readonly borderColor: "#333333";
+    readonly textColor: "#e0e0e0";
+    readonly labelColor: "#999999";
+    readonly inputBackground: "#2d2d2d";
+    readonly inputBorder: "#444444";
+    readonly inputFocusBorder: "#409eff";
+    readonly buttonBackground: "#2d2d2d";
+    readonly buttonBorder: "#444444";
+    readonly buttonActiveBackground: "#409eff";
+    readonly buttonActiveBorder: "#409eff";
+    readonly buttonActiveText: "#ffffff";
+};
+export declare const TRACK_INFO_PANEL_DEFAULT_THEME: {
+    readonly background: "#0f0f0f";
+    readonly border: "#333333";
+    readonly text: "#ffffff";
+    readonly buttonBackground: "#2a2a2a";
+    readonly buttonHover: "#3a3a3a";
+    readonly buttonDanger: "#dc3545";
+};
+export declare const SCROLLBAR_DEFAULT_COLORS: {
+    readonly background: "#333333";
+    readonly border: "#555555";
+    readonly thumb: "#444444";
+    readonly hitArea: "rgba(0, 0, 0, 0.001)";
+};
+export declare const KONVA_DEFAULT_COLORS: {
+    readonly fill: "#ffffff";
+    readonly stroke: "#000000";
+    readonly text: "#000000";
+};
+export declare const CLIP_CONFIG_PANEL_RENDERER_COLORS: {
+    readonly tabBarBackground: "#2a2a2a";
+    readonly actionBarBackground: "#2a2a2a";
+    readonly activeTabBackground: "#595A5D";
+    readonly activeTabText: "#ffffff";
+    readonly inactiveTabText: "#b5b6bf";
+    readonly sliderThumbShadow: "0 8px 20px rgba(8, 24, 56, 0.24)";
+    readonly sliderThumbInnerShadow: "inset 0 1px 1px rgba(255, 255, 255, 0.92)";
+};
+export declare const PLAYHEAD_DEFAULT_COLORS: {
+    readonly grip: "#8c90ff";
+    readonly shadow: "rgba(0, 0, 0, 0.22)";
+    readonly marker: "#FF0000";
+};
+export declare const PREVIEW_PENDING_OVERLAY_COLORS: {
+    readonly background: "rgba(0, 0, 0, 0.56)";
+    readonly text: "#ffffff";
+    readonly actionBackground: "#4c8dff";
+    readonly actionText: "#ffffff";
+};
+export declare const PREVIEW_TRANSFORM_OVERLAY_COLORS: {
+    readonly border: "rgba(80, 227, 194, 0.95)";
+    readonly handleBackground: "#000000";
+};
+export declare const SELECTION_BOX_COLORS: {
+    readonly fill: "rgba(80, 130, 230, 0.15)";
+    readonly stroke: "#5082e6";
+};
+export declare const DROP_PREVIEW_COLORS: {
+    readonly videoFill: "rgba(80, 227, 194, 0.18)";
+    readonly videoStroke: "#50E3C2";
+    readonly audioFill: "rgba(181, 186, 255, 0.18)";
+    readonly audioStroke: "#b5baff";
+};
+export declare const GRID_DEFAULT_COLORS: {
+    readonly line: "#E0E0E0";
+};