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

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, ClipConfigVoicePanelOptions } from '../models';
 import type { ResolvedPlaybackPlan } from '../controllers/timelinePlaybackResolver';
 import { TimelineClipConfigController } from '../controllers/timelineClipConfigController';
 export declare class TimelineManager {
@@ -38,8 +38,11 @@ export declare class TimelineManager {
     private verticalScrollbar;
     private isExecutingHistoryAction;
     private lastTrackDuration;
-    private lastEffectiveTrackDuration;
+    private lastReportedTrackDuration;
     private thumbnailProvider;
+    private thumbnailProviderVersion;
+    private clipThumbnailLoadStates;
+    private sourceMediaRegistry;
     private canPlay;
     private sourceLoadingCount;
     private timelineStore?;
@@ -59,11 +62,13 @@ export declare class TimelineManager {
     private readonly bodyViewportScrollListener;
     private readonly bodyCanvasHostClickListener;
     private readonly rootWheelListener;
+    private keyboardShortcutsController;
     private mountManager;
     private pendingDraftData;
     private selectionStore;
     private multiDragSession;
     private clipRemovalBatchDepth;
+    private splitOperationDepth;
     constructor(config?: Partial<TimelineConfig>);
     private getTimelineStore;
     private getTimelineCommands;
@@ -169,6 +174,7 @@ export declare class TimelineManager {
     private renderBodyBackground;
     private handleBodyBackgroundClick;
     private handleBodyCanvasHostClick;
+    private getSnapGuideAccentColor;
     private ensureSnapGuideLine;
     private refreshSnapGuideLine;
     private updateSnapGuideLine;
@@ -261,6 +267,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 +278,7 @@ export declare class TimelineManager {
     splitCurrentClip(): void;
     getClips(): Clip[];
     private getExportComposition;
+    private getExportCoverUrl;
     exportTimeline(): TimelineExportData;
     importTimeline(data: TimelineExportData): Promise<void>;
     private resolveImportedTrackRoles;
@@ -304,6 +314,24 @@ export declare class TimelineManager {
      * 更新 canPlay 状态
      */
     private updateCanPlayState;
+    private findClipById;
+    private buildGeneratedAudioClipName;
+    private normalizeGeneratedAudioDuration;
+    private getVoiceLinkedAudioClips;
+    private applyGeneratedAudioClipResult;
+    private syncTextClipDurationToAudio;
+    private doesClipOverlapOnTrack;
+    private findNearestAvailableTrackForClip;
+    private relocateGeneratedAudioClipIfNeeded;
+    private regenerateVoiceLinkedAudioClips;
+    private handleVoiceGenerateAction;
+    private primeOrLoadClipThumbnails;
+    private markClipThumbnailLoadCompleted;
+    private buildClipThumbnailLoadSignature;
+    private buildSourceMediaKey;
+    private buildClipThumbnailResourceKey;
+    private isClipThumbnailLoadCurrent;
+    private areThumbnailArraysEqual;
     private handleClipSplit;
     private handleClipSelect;
     private handleActionUndo;
@@ -379,7 +407,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[];
@@ -388,7 +417,7 @@ export declare class TimelineManager {
     getActiveClipsAtTime(time: TimeMs): ActiveClipPlaybackInfo[];
     attachPreview(containerOrConfig: HTMLElement | PreviewMountConfig): void;
     detachPreview(): void;
-    attachClipConfig(container: HTMLElement): TimelineClipConfigController;
+    attachClipConfig(container: HTMLElement, options?: ClipConfigVoicePanelOptions): TimelineClipConfigController;
     getPreviewBackendType(): Exclude<PreviewBackendType, 'auto'>;
     hasAttachedPreview(): boolean;
     getPreviewAspectRatio(): PreviewAspectRatio;
@@ -418,15 +447,17 @@ export declare class TimelineManager {
     moveClipToTrack(clipId: string, targetTrackId: string): boolean;
     private moveClipToTrackWithHistorySnapshot;
     /**
-     * 获取轨道内的有效总时长（去除首尾空白）
-     * @returns 最早 clip 起点到最晚 clip 终点的时长（毫秒）
+     * 获取时间轴总时长
+     * @returns 从 0 到最后一个音视频 clip 终点的时长（毫秒）
      */
     getTrackTotalDuration(): TimeMs;
     destroy(): void;
+    private initKeyboardShortcuts;
     /** 清除历史堆栈 */
     clearHistory(): void;
     private handleClipChange;
     private withClipRemovalBatch;
+    private withSplitOperation;
     private resolveClipIdsForExternalIdRemoval;
     private shouldClearSelectionForClipIds;
     private resolveSelectedClipAtTime;
@@ -479,6 +510,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/constants.d.ts

@@ -21,6 +21,7 @@ export declare const TIME_SCALE: {
 export declare const TIMELINE_LEFT_PADDING = 15;
 export declare const MIN_CLIP_LINE_WIDTH = 6;
 export declare const TRACK_HEIGHT: {
+    TEXT: number;
     VIDEO: number;
     AUDIO: number;
 };

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

@@ -1,4 +1,4 @@
-export type TrackType = 'video' | 'audio';
+export type TrackType = 'video' | 'audio' | 'text';
 export type PlayState = 'playing' | 'paused';
 export type TimeMs = number;
 export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
@@ -20,6 +20,17 @@ export interface ClipVisualTransform {
     y: number;
     scale: number;
 }
+export interface TextClipStyle {
+    fontSize: number;
+    color: string;
+    rotation: number;
+    strokeColor: string;
+    strokeWidth: number;
+    lineHeight: number;
+    paddingX: number;
+}
+export declare const DEFAULT_TEXT_CLIP_STYLE: TextClipStyle;
+export declare function resolveTextClipStyle(style?: Partial<TextClipStyle> | null): TextClipStyle;
 export type PreviewBackendType = 'dom' | 'canvas' | 'auto';
 export interface Mp4PreviewMediaSource {
     url: string;
@@ -33,15 +44,49 @@ export interface HlsFmp4PreviewMediaSource {
 }
 export type PreviewMediaSource = Mp4PreviewMediaSource | HlsFmp4PreviewMediaSource;
 export type PreviewSourceResolver = (clip: Clip) => PreviewMediaSource | null | Promise<PreviewMediaSource | null>;
+export interface TextPreviewFontConfig {
+    fontName: string;
+    fontSourceUrl: string;
+}
+export interface VoiceOption {
+    id: string;
+    name: string;
+    lang: string;
+    emotion: string;
+    tags: string[];
+    avatar?: string;
+    audiofile?: string;
+    source?: Record<string, unknown>;
+}
+export interface GenerateVoiceRequest {
+    requestId: string;
+    sourceTextClipId: string;
+    targetAudioClipId?: string;
+    text: string;
+    voiceId: string;
+    followTextUpdates: boolean;
+    mode: 'create' | 'replace';
+}
+export interface GenerateVoiceResult {
+    requestId: string;
+    audioSrc: string;
+    duration: number;
+    voiceId: string;
+    voiceName: string;
+}
+export interface ClipConfigVoicePanelOptions {
+    voiceCatalog?: VoiceOption[];
+    generateVoiceBatch?: (requests: GenerateVoiceRequest[]) => Promise<GenerateVoiceResult[]>;
+}
 export interface ClipConfig {
     id?: string;
     type?: TrackType;
     externalId?: string;
-    src: string;
-    name: string;
+    src?: string;
+    name?: string;
     isMuted?: boolean;
     startTime?: TimeMs;
-    duration: TimeMs;
+    duration?: TimeMs;
     startTimeAtSource?: TimeMs;
     endTimeAtSource?: TimeMs;
     sourceDuration?: TimeMs;
@@ -52,6 +97,12 @@ export interface ClipConfig {
     separatedFromVideoClipId?: string;
     trackId?: string;
     volume?: number;
+    textContent?: string;
+    textStyle?: Partial<TextClipStyle>;
+    ttsSourceTextClipId?: string;
+    ttsVoiceId?: string;
+    ttsVoiceName?: string;
+    ttsFollowTextUpdates?: boolean;
 }
 export interface ClipEntity {
     id: string;
@@ -72,6 +123,12 @@ export interface ClipEntity {
     separatedAudioClipId?: string;
     separatedFromVideoClipId?: string;
     volume?: number;
+    textContent?: string;
+    textStyle?: TextClipStyle;
+    ttsSourceTextClipId?: string;
+    ttsVoiceId?: string;
+    ttsVoiceName?: string;
+    ttsFollowTextUpdates?: boolean;
 }
 export interface ClipViewState {
     isDragging: boolean;
@@ -114,15 +171,9 @@ export interface Theme {
     clipDuration: string;
     clipHandle: string;
     clipCoverBackground: string;
-    audioClipBackground?: string;
     audioClipText?: string;
     audioClipAccent?: string;
-    clipSelectedBackground: string;
     clipSelectedBorder: string;
-    clipSelectedName: string;
-    clipSelectedDuration: string;
-    clipSelectedHandle: string;
-    clipSelectedCoverBackground: string;
     playhead: string;
     grid: string;
     snapGuideLineColor?: string;
@@ -136,6 +187,12 @@ export type ThemeConfig = Partial<Theme>;
 export type ResolvedTimelineConfig = Omit<TimelineConfig, 'theme'> & {
     theme: Theme;
 };
+export type TimelineKeyboardShortcutAction = 'togglePlay' | 'deleteSelectedClips' | 'toggleSelectedClipsAudio' | 'splitCurrentClip' | 'undo' | 'redo';
+export type TimelineKeyboardShortcutBindings = Partial<Record<TimelineKeyboardShortcutAction, string | string[]>>;
+export interface TimelineKeyboardShortcutsConfig {
+    enabled?: boolean;
+    bindings?: TimelineKeyboardShortcutBindings;
+}
 export declare const defaultDarkTheme: Theme;
 export declare function resolveTheme(theme?: ThemeConfig): Theme;
 export interface TimelineConfig {
@@ -154,7 +211,9 @@ export interface TimelineConfig {
     thumbnailProvider?: ThumbnailProvider;
     previewBackend?: PreviewBackendType;
     previewSourceResolver?: PreviewSourceResolver;
+    textPreviewFont?: TextPreviewFontConfig | null;
     draftData?: TimelineExportData;
+    keyboardShortcuts?: false | TimelineKeyboardShortcutsConfig;
 }
 export type PreviewAspectRatioMode = 'auto-first-added-video' | 'auto-first-video' | 'manual';
 export interface PreviewAspectRatio {
@@ -167,11 +226,16 @@ export interface PreviewAspectRatioPreset {
     label: string;
     aspectRatio: PreviewAspectRatio;
 }
+export declare const ASPECT_RATIO_BASELINE_SHORT_EDGE_PX = 720;
 export declare const DEFAULT_PREVIEW_ASPECT_RATIO: PreviewAspectRatio;
 export declare const PREVIEW_ASPECT_RATIO_PRESETS: PreviewAspectRatioPreset[];
 export declare function normalizePreviewAspectRatioMode(mode?: PreviewAspectRatioMode | null): PreviewAspectRatioMode;
 export declare function isAutoPreviewAspectRatioMode(mode?: PreviewAspectRatioMode | null): boolean;
 export declare function normalizePreviewAspectRatio(aspectRatio?: Partial<PreviewAspectRatio> | null): PreviewAspectRatio;
+export declare function resolveAspectRatioBaselineDimensions(aspectRatio: Pick<PreviewAspectRatio, 'width' | 'height'>, shortEdge?: number): {
+    width: number;
+    height: number;
+};
 export interface PreviewMountConfig {
     container: HTMLElement;
     aspectRatio?: {
@@ -347,6 +411,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;
 }
@@ -422,4 +496,10 @@ export interface ClipExportData {
     separatedAudioClipId?: string;
     separatedFromVideoClipId?: string;
     volume?: number;
+    textContent?: string;
+    textStyle?: TextClipStyle;
+    ttsSourceTextClipId?: string;
+    ttsVoiceId?: string;
+    ttsVoiceName?: string;
+    ttsFollowTextUpdates?: boolean;
 }

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/testing/konva-test-stub.d.ts

@@ -18,6 +18,8 @@ declare class MockNode {
     cornerRadius(value?: number): any;
     text(value?: string): any;
     ellipsis(value?: boolean): any;
+    lineHeight(value?: number): any;
+    wrap(value?: string): any;
     points(value?: number[]): any;
     setAttr(key: string, value: any): void;
     getAttr(key: string): any;

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

@@ -0,0 +1,147 @@
+export declare const SHARED_COLOR_TOKENS: {
+    readonly transparent: "transparent";
+    readonly white: "#ffffff";
+    readonly black: "#000000";
+    readonly panelSurface: "#0f0f0f";
+    readonly panelSurfaceAlt: "#1e1e1e";
+    readonly buttonSurface: "#2a2a2a";
+    readonly inputSurface: "#2d2d2d";
+    readonly clipSurface: "#2e2e2e";
+    readonly videoClipBackground: "#1e5679";
+    readonly textClipBackground: "#604c32";
+    readonly audioClipBackground: "#254428";
+    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 audioClipAccent: "#b8b8c0";
+    readonly accentFocus: "#409eff";
+    readonly accentSelectedBorder: "#50E3C2";
+    readonly clipSelectedBorder: "#ffffff";
+    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 clipSelectedBorder: "#ffffff";
+    readonly clipCoverBackground: "#333333";
+    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";
+};