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

package/README.md

@@ -39,7 +39,12 @@ const timeline = new TimelineManager({
   container,
   zoom: 100,
   currentTime: 0,
-  previewBackend: 'dom'
+  previewBackend: 'dom',
+  keyboardShortcuts: {
+    bindings: {
+      togglePlay: 'Mod+Alt+P'
+    }
+  }
 });
 
 timeline.attachPreview(preview);
@@ -88,6 +93,21 @@ timeline.on('history_change', (_event, data) => {
 - `attachPreview(containerOrConfig)` / `detachPreview()`
 - `exportTimeline()` / `loadDraft(data)`
 
+快捷键配置：
+
+- `keyboardShortcuts: false` 可彻底关闭快捷键
+- `keyboardShortcuts.bindings` 可按动作覆盖默认键位
+- 时间轴挂载后默认在当前页面生效
+
+默认快捷键：
+
+- 播放 / 暂停：`Space`
+- 删除片段：`Delete` / `Backspace`
+- 分离 / 还原音频：`Mod+Alt+A`
+- 分割片段：`Mod+B`
+- 撤销：`Mod+Z`
+- 还原：`Mod+Shift+Z`，Windows 另支持 `Ctrl+Y`
+
 常用事件：
 
 - `time_change`

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

@@ -1,4 +1,4 @@
-import type { Clip } from '../../core/models';
+import { type Clip, type VoiceOption } from '../../core/models';
 export interface ClipConfigPanelTheme {
     backgroundColor: string;
     borderColor: string;
@@ -17,7 +17,9 @@ export declare const defaultDarkTheme: ClipConfigPanelTheme;
 export interface ClipConfigPanelConfig {
     container: HTMLElement;
     theme?: ClipConfigPanelTheme;
+    voiceCatalog?: VoiceOption[];
     onClipUpdate?: (clipId: string, updates: Partial<Clip>) => void;
+    onGenerateVoice?: (clip: Clip, voice: VoiceOption, followTextUpdates: boolean) => Promise<void>;
 }
 export declare const CSS_CLASSES: {
     readonly container: "clip-config-panel";
@@ -26,6 +28,8 @@ export declare const CSS_CLASSES: {
     readonly content: "clip-config-content";
     readonly visualPanel: "clip-config-visual-panel";
     readonly audioPanel: "clip-config-audio-panel";
+    readonly textPanel: "clip-config-text-panel";
+    readonly voicePanel: "clip-config-voice-panel";
     readonly actionBar: "clip-config-action-bar";
     readonly section: "clip-config-section";
     readonly sectionTitle: "clip-config-section-title";
@@ -33,25 +37,72 @@ export declare const CSS_CLASSES: {
     readonly label: "clip-config-label";
     readonly slider: "clip-config-slider";
     readonly input: "clip-config-input";
+    readonly textarea: "clip-config-textarea";
+    readonly colorInput: "clip-config-color-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";
+    readonly filterGroup: "clip-config-filter-group";
+    readonly filterButton: "clip-config-filter-button";
+    readonly voiceCardGrid: "clip-config-voice-grid";
+    readonly voiceCard: "clip-config-voice-card";
+    readonly voiceCardAvatar: "clip-config-voice-avatar";
+    readonly voiceCardMeta: "clip-config-voice-meta";
+    readonly voiceCardTitle: "clip-config-voice-title";
+    readonly voiceCardSubtitle: "clip-config-voice-subtitle";
+    readonly voiceCardCheck: "clip-config-voice-check";
+    readonly voiceCheckbox: "clip-config-voice-checkbox";
+    readonly primaryButton: "clip-config-primary-button";
+    readonly errorText: "clip-config-error-text";
+    readonly voiceLoadingOverlay: "clip-config-voice-loading-overlay";
+    readonly voiceLoadingCard: "clip-config-voice-loading-card";
+    readonly voiceLoadingIcon: "clip-config-voice-loading-icon";
+    readonly voiceLoadingText: "clip-config-voice-loading-text";
 };
 export declare class ClipConfigPanel {
     private readonly container;
     private readonly theme;
     private readonly renderer;
     private readonly onClipUpdate?;
+    private readonly onGenerateVoice?;
+    private readonly voiceCatalog;
     private currentClip;
     private activeTab;
     private readonly iconCache;
+    private pendingPreferredTab;
+    private selectedVoiceId;
+    private activeVoiceFilterTag;
+    private textDraftContent;
+    private followTextUpdates;
+    private voiceLoadingBusyCount;
+    private isVoiceLoadingOverlayRendered;
+    private isVoiceLoadingOverlayExiting;
+    private voiceLoadingOverlayHideTimer;
+    private voiceErrorMessage;
     constructor(config: ClipConfigPanelConfig);
     setClip(clip: Clip | null): void;
+    setPreferredTab(tab: 'voice' | null): void;
+    setVoiceGenerationBusy(isBusy: boolean): void;
     destroy(): void;
     private render;
+    private getAvailableTabs;
+    private resetVoiceState;
+    private syncVoiceStateForClip;
+    private syncActiveTab;
+    private supportsVoicePanel;
+    private resolveDefaultVoiceFilterTag;
+    private getVisibleVoiceOptions;
+    private ensureVoiceFilters;
+    private handleVoiceFilterChange;
+    private handleVoiceSelect;
+    private handleVoiceFollowTextUpdatesChange;
+    private handleGenerateVoice;
     private handleVolumeChange;
     private clampValue;
     private handleTransformChange;
     private handleTransformChanges;
+    private handleTextContentInput;
+    private handleTextContentCommit;
+    private handleTextStyleChange;
 }

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

@@ -1,19 +1,36 @@
 import { type TemplateResult } from 'lit';
-import type { Clip } from '../../core/models';
+import { type Clip, type VoiceOption } from '../../core/models';
 import { LitDomRenderer } from '../../core/renderers/domRenderer';
 import type { ClipConfigPanelTheme } from './ClipConfigPanel';
-export type ClipConfigPanelTabKey = 'visual' | 'audio';
+export type ClipConfigPanelTabKey = 'visual' | 'audio' | 'text' | 'voice';
 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;
+    onTextContentInput: (value: string) => void;
+    onTextContentCommit: () => void;
+    onTextStyleChange: (property: 'fontSize' | 'color' | 'rotation' | 'x' | 'y', value: number | string) => void;
+    onVoiceFilterChange: (tag: string) => void;
+    onVoiceSelect: (voiceId: string) => void;
+    onVoiceFollowTextUpdatesChange: (value: boolean) => void;
+    onGenerateVoice: () => Promise<void>;
 }
 export interface ClipConfigPanelViewModel {
     clip: Clip | null;
     activeTab: ClipConfigPanelTabKey;
     theme: ClipConfigPanelTheme;
     emptyStateIconSvg: string;
+    loadingIconSvg: string;
+    selectedIconSvg: string;
+    textDraftContent: string;
+    voiceCatalog: VoiceOption[];
+    selectedVoiceId: string | null;
+    activeVoiceFilterTag: string | null;
+    followTextUpdates: boolean;
+    isVoiceLoadingOverlayVisible: boolean;
+    isVoiceLoadingOverlayExiting: boolean;
+    voiceErrorMessage: string | null;
     callbacks: ClipConfigPanelCallbacks;
 }
 export declare const CLIP_CONFIG_CSS_CLASSES: {
@@ -23,6 +40,8 @@ export declare const CLIP_CONFIG_CSS_CLASSES: {
     readonly content: "clip-config-content";
     readonly visualPanel: "clip-config-visual-panel";
     readonly audioPanel: "clip-config-audio-panel";
+    readonly textPanel: "clip-config-text-panel";
+    readonly voicePanel: "clip-config-voice-panel";
     readonly actionBar: "clip-config-action-bar";
     readonly section: "clip-config-section";
     readonly sectionTitle: "clip-config-section-title";
@@ -30,28 +49,55 @@ export declare const CLIP_CONFIG_CSS_CLASSES: {
     readonly label: "clip-config-label";
     readonly slider: "clip-config-slider";
     readonly input: "clip-config-input";
+    readonly textarea: "clip-config-textarea";
+    readonly colorInput: "clip-config-color-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";
+    readonly filterGroup: "clip-config-filter-group";
+    readonly filterButton: "clip-config-filter-button";
+    readonly voiceCardGrid: "clip-config-voice-grid";
+    readonly voiceCard: "clip-config-voice-card";
+    readonly voiceCardAvatar: "clip-config-voice-avatar";
+    readonly voiceCardMeta: "clip-config-voice-meta";
+    readonly voiceCardTitle: "clip-config-voice-title";
+    readonly voiceCardSubtitle: "clip-config-voice-subtitle";
+    readonly voiceCardCheck: "clip-config-voice-check";
+    readonly voiceCheckbox: "clip-config-voice-checkbox";
+    readonly primaryButton: "clip-config-primary-button";
+    readonly errorText: "clip-config-error-text";
+    readonly voiceLoadingOverlay: "clip-config-voice-loading-overlay";
+    readonly voiceLoadingCard: "clip-config-voice-loading-card";
+    readonly voiceLoadingIcon: "clip-config-voice-loading-icon";
+    readonly voiceLoadingText: "clip-config-voice-loading-text";
 };
 export declare class ClipConfigPanelRenderer extends LitDomRenderer<ClipConfigPanelViewModel> {
     protected renderTemplate(viewModel: ClipConfigPanelViewModel): TemplateResult;
+    private renderVoiceLoadingOverlay;
     private renderEmptyState;
     private renderPanel;
     private renderTabBar;
+    private renderActionBar;
+    private renderVoiceActionBar;
     private renderVisualPanel;
     private renderPositionSection;
     private renderScaleSection;
     private renderAudioPanel;
+    private renderTextPanel;
+    private renderVoicePanel;
+    private renderFilterButton;
+    private renderVoiceCard;
     private renderPositionControl;
     private renderPresetGrid;
     private renderSectionTitle;
     private renderRangeInput;
     private renderNumberInput;
+    private renderLabeledNumberInput;
     private getContainerStyle;
     private getSliderStyle;
     private getAvailableTabs;
+    private supportsVoicePanel;
     private getTransform;
     private calculatePresetPosition;
     private resizeSvg;

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

@@ -17,8 +17,11 @@ export interface TrackInfoPanelViewModel {
     includeTimeScaleSpacer: boolean;
     onMuteTrack?: (trackId: string, isMuted: boolean) => void;
     icons: {
+        textTrack: string;
         videoTrack: string;
         audioTrack: string;
+        display: string;
+        hide: string;
         volume: string;
         volumeMuted: string;
     };

package/dist/components/track/Track.d.ts

@@ -99,6 +99,9 @@ export declare class Track {
     private readonly handleEdgeAutoScrollFrame;
     private handleTrackBackgroundClick;
     private handleTrackBackgroundMouseDown;
+    private getClipDisplayLabel;
+    private getClipAudioBadgeText;
+    private isSourceBoundClip;
     updateClipSelection(clipId: string, isSelected: boolean): void;
     private createClipGroup;
     private handleClipClick;
@@ -130,6 +133,7 @@ export declare class Track {
     setCurrentTime(_time: TimeMs): void;
     setScrollLeft(scrollLeft: number): void;
     private updateClipVisibility;
+    private updateClipViewportState;
     setTrackY(trackY: number): void;
     setTrackStackOrder(order: number): void;
     setDragOverlayLayer(layer: Konva.Layer | null): void;

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

@@ -10,6 +10,7 @@ export { TimelinePlaybackResolver } from './timelinePlaybackResolver';
 export { TimelinePreviewSession } from './timelinePreviewSession';
 export { TimelinePreviewRuntimeController } from './timelinePreviewRuntimeController';
 export { TimelinePreviewStateController, type TimelinePendingPreviewState } from './timelinePreviewStateController';
+export { TimelineKeyboardShortcutsController, type TimelineKeyboardShortcutsControllerCallbacks } from './timelineKeyboardShortcutsController';
 export * from './timelineSelectionController';
 export * from './timelineTrackMutationController';
 export { TimelineTrackInfoPanelController } from './timelineTrackInfoPanelController';

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

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

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

@@ -1,9 +1,11 @@
-import { Theme, Clip } from '../models';
+import { Theme, Clip, type VoiceOption } from '../models';
 export interface TimelineClipConfigControllerConfig {
     container: HTMLElement;
     theme: Theme;
     getPrimarySelectedClip: () => Clip | null;
+    voiceCatalog: VoiceOption[];
     updateClip: (clipId: string, updates: Partial<Clip>) => void;
+    onGenerateVoice?: (clip: Clip, voice: VoiceOption, followTextUpdates: boolean) => Promise<void>;
 }
 export declare class TimelineClipConfigController {
     private panel;
@@ -13,5 +15,7 @@ export declare class TimelineClipConfigController {
     update(): void;
     updateFromExternal(): void;
     destroy(): void;
+    setPreferredTab(tab: 'voice' | null): void;
+    setVoiceGenerationBusy(isBusy: boolean): void;
     private convertTheme;
 }

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

@@ -0,0 +1,29 @@
+import type { TimelineKeyboardShortcutsConfig } from '../models';
+export interface TimelineKeyboardShortcutsControllerCallbacks {
+    togglePlay(): void;
+    deleteSelectedClips(): void;
+    toggleSelectedClipsAudio(): Promise<boolean>;
+    splitCurrentClip(): void;
+    undo(): boolean;
+    redo(): boolean;
+    canDeleteSelectedClips(): boolean;
+    canSplitSelectedClip(): boolean;
+    canToggleSelectedClipsAudio(): boolean;
+}
+export interface TimelineKeyboardShortcutsControllerOptions {
+    root: HTMLElement;
+    config?: false | TimelineKeyboardShortcutsConfig;
+    callbacks: TimelineKeyboardShortcutsControllerCallbacks;
+    isMacLike?: boolean;
+}
+export declare class TimelineKeyboardShortcutsController {
+    private readonly callbacks;
+    private readonly bindings;
+    private readonly enabled;
+    private readonly keydownListener;
+    constructor(options: TimelineKeyboardShortcutsControllerOptions);
+    init(): void;
+    destroy(): void;
+    private handleKeydown;
+    private dispatchAction;
+}

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

@@ -1,4 +1,4 @@
-import type { ActiveClipPlaybackInfo, ClipVisualTransform, PlayState, PreviewAspectRatio, PreviewSourceResolver, TimeMs, TrackType } from '../models/types';
+import type { ActiveClipPlaybackInfo, ClipVisualTransform, PlayState, PreviewAspectRatio, PreviewSourceResolver, TextPreviewFontConfig, TimeMs, TrackType } from '../models/types';
 import type { SourceMediaRegistry } from '../resources/sourceMediaRegistry';
 import type { PreviewPendingState, PreviewRuntimeState } from './previewBackend';
 interface TimelinePreviewSessionCallbacks {
@@ -18,6 +18,7 @@ interface TimelinePreviewSessionDependencies {
     frameClassName?: string;
     slotClassNamePrefix?: string;
     previewSourceResolver?: PreviewSourceResolver;
+    textPreviewFont?: TextPreviewFontConfig | null;
     sourceMediaRegistry?: SourceMediaRegistry;
 }
 export interface TimelinePreviewSyncPayload {
@@ -35,10 +36,12 @@ export declare class TimelinePreviewSession {
     private container;
     private rootElement;
     private frameElement;
+    private textOverlayRoot;
     private pendingOverlayElement;
     private readonly pendingOverlayRenderer;
     private resizeObserver;
     private readonly trackSlots;
+    private readonly textPreviewEntries;
     private audioContext;
     private masterGainNode;
     private loadingCount;
@@ -49,9 +52,18 @@ export declare class TimelinePreviewSession {
     private lastSettledSyncRequestId;
     private primarySelectedClipId;
     private transientVisualTransform;
+    private textPreviewDragState;
+    private textPreviewFontStyleElement;
+    private textPreviewFontSignature;
+    private textPreviewFontLoadState;
+    private textPreviewFontLoadToken;
     private readonly callbacks;
     private readonly dependencies;
     private readonly transformOverlay;
+    private readonly boundTextPreviewPointerMove;
+    private readonly boundTextPreviewPointerUp;
+    private readonly boundTextPreviewVisibilityChange;
+    private readonly boundTextPreviewWindowBlur;
     private requestedAspectRatio;
     private resolvedAutoAspectRatio;
     private aspectRatioProbe;
@@ -106,9 +118,28 @@ export declare class TimelinePreviewSession {
     private refreshPendingOverlay;
     private handlePreviewTransformChange;
     private refreshVisualLayout;
+    private syncTextPreviewEntries;
+    private clearTextPreviewEntries;
+    private removeTextPreviewEntry;
+    private applyTextPreviewEntry;
+    private refreshTextPreviewLayout;
+    private refreshTextPreviewEntries;
+    private createTextPreviewPointerDownHandler;
+    private bindTextPreviewDocumentListeners;
+    private unbindTextPreviewDocumentListeners;
+    private handleTextPreviewPointerMove;
+    private finishTextPreviewDrag;
+    private refreshTextPreviewInteractionState;
+    private getTextPreviewFontConfig;
+    private getTextPreviewFontFamily;
+    private ensureTextPreviewFontReady;
+    private resetTextPreviewFontState;
     private refreshSlotVisualLayout;
     private buildSelectedOverlayState;
     private getFrameSize;
+    private getDocument;
+    private toFrameLocalPoint;
+    private getTextPreviewBaselineMetrics;
     private getMediaSize;
     private getEffectiveVisualTransform;
 }

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, SelectedClipAudioAction } 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 {
@@ -40,6 +40,7 @@ export declare class TimelineManager {
     private lastTrackDuration;
     private lastReportedTrackDuration;
     private thumbnailProvider;
+    private thumbnailProviderVersion;
     private clipThumbnailLoadStates;
     private sourceMediaRegistry;
     private canPlay;
@@ -61,6 +62,7 @@ export declare class TimelineManager {
     private readonly bodyViewportScrollListener;
     private readonly bodyCanvasHostClickListener;
     private readonly rootWheelListener;
+    private keyboardShortcutsController;
     private mountManager;
     private pendingDraftData;
     private selectionStore;
@@ -172,6 +174,7 @@ export declare class TimelineManager {
     private renderBodyBackground;
     private handleBodyBackgroundClick;
     private handleBodyCanvasHostClick;
+    private getSnapGuideAccentColor;
     private ensureSnapGuideLine;
     private refreshSnapGuideLine;
     private updateSnapGuideLine;
@@ -312,6 +315,16 @@ export declare class TimelineManager {
      */
     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;
@@ -404,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;
@@ -439,6 +452,7 @@ export declare class TimelineManager {
      */
     getTrackTotalDuration(): TimeMs;
     destroy(): void;
+    private initKeyboardShortcuts;
     /** 清除历史堆栈 */
     clearHistory(): void;
     private handleClipChange;

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?: {
@@ -432,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/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;