@keplar-404/react-timeline-editor 1.0.6

package/dist/interface/common_prop.d.ts

@@ -0,0 +1,12 @@
+import { RequiredEditData } from './timeline';
+/** Common component parameters */
+export interface CommonProp extends RequiredEditData {
+    /** Scale count */
+    scaleCount: number;
+    /** Set scale count */
+    setScaleCount: (scaleCount: number) => void;
+    /** Cursor time */
+    cursorTime: number;
+    /** Current timeline width */
+    timelineWidth: number;
+}

package/dist/interface/const.d.ts

@@ -0,0 +1,28 @@
+export declare const PREFIX = "timeline-editor";
+/** Cursor time at start */
+export declare const START_CURSOR_TIME = 0;
+/** Default scale */
+export declare const DEFAULT_SCALE = 1;
+/** Default scale split count */
+export declare const DEFAULT_SCALE_SPLIT_COUNT = 10;
+/** Default scale display width */
+export declare const DEFAULT_SCALE_WIDTH = 160;
+/** Default scale start distance from left */
+export declare const DEFAULT_START_LEFT = 20;
+/** Default minimum movement in pixels */
+export declare const DEFAULT_MOVE_GRID = 1;
+/** Default adsorption distance in pixels */
+export declare const DEFAULT_ADSORPTION_DISTANCE = 8;
+/** Default action row height */
+export declare const DEFAULT_ROW_HEIGHT = 32;
+/** Minimum scale count */
+export declare const MIN_SCALE_COUNT = 20;
+/** Maximum scale count */
+export declare const MAX_SCALE_COUNT: number;
+/** Number of scale marks to add each time */
+export declare const ADD_SCALE_COUNT = 5;
+/** Error messages */
+export declare const ERROR: {
+    START_TIME_LESS_THEN_ZERO: string;
+    END_TIME_LESS_THEN_START_TIME: string;
+};

package/dist/interface/timeline.d.ts

@@ -0,0 +1,342 @@
+import { Emitter, EventTypes, ITimelineEngine, TimelineAction, TimelineRow, TimelineEffect } from '@keplar-404/timeline-engine';
+import { default as React, ReactNode } from 'react';
+import { OnScrollParams } from 'react-virtualized';
+export interface EditData {
+    /**
+     * @description Timeline editing data
+     */
+    editorData: TimelineRow[];
+    /**
+     * @description Timeline action effect map
+     */
+    effects: Record<string, TimelineEffect>;
+    /**
+     * @description Scaling factor for individual scale marks (>0)
+     * @default 1
+     */
+    scale?: number;
+    /**
+     * @description Minimum number of scale marks (>=1)
+     * @default 20
+     */
+    minScaleCount?: number;
+    /**
+     * @description Maximum number of scale marks (>=minScaleCount)
+     * @default Infinity
+     */
+    maxScaleCount?: number;
+    /**
+     * @description Number of subdivision units for a single scale mark (integer >0)
+     * @default 10
+     */
+    scaleSplitCount?: number;
+    /**
+     * @description Display width of a single scale mark (>0, unit: px)
+     * @default 160
+     */
+    scaleWidth?: number;
+    /**
+     * @description Distance from the start of the scale to the left edge (>=0, unit: px)
+     * @default 20
+     */
+    startLeft?: number;
+    /**
+     * @description Default height for each editing row (>0, unit: px)
+     * @default 32
+     */
+    rowHeight?: number;
+    /**
+     * @description Whether to enable grid movement snapping
+     * @default false
+     */
+    gridSnap?: boolean;
+    /**
+     * @description Enable snapping to drag auxiliary lines
+     * @default false
+     */
+    dragLine?: boolean;
+    /**
+     * @description Whether to hide the cursor
+     * @default false
+     */
+    hideCursor?: boolean;
+    /**
+     * @description Prevent dragging in all action areas
+     * @default false
+     */
+    disableDrag?: boolean;
+    /**
+     * @description Prevent dragging of all rows
+     * @default false
+     */
+    enableRowDrag?: boolean;
+    /**
+     * @description Enable dragging action blocks between different rows
+     * @default false
+     */
+    enableCrossRowDrag?: boolean;
+    /**
+     * @description Show a ghost/preview element following the cursor during cross-row block drag.
+     * Set to `false` to disable the ghost entirely, or use `getGhostPreview` for a custom component.
+     * @default true
+     */
+    enableGhostPreview?: boolean;
+    /**
+     * @description Custom render function for the drag ghost/preview element shown while
+     * dragging a block across rows. When provided, replaces the default blue glowing box.
+     *
+     * The function receives the action being dragged and its source row, so you can
+     * render a fully custom preview that matches your block's actual appearance.
+     *
+     * @param params - The action being dragged and the row it originated from
+     * @returns A React node to render inside the ghost container
+     *
+     * @example
+     * ```tsx
+     * <Timeline
+     *   enableCrossRowDrag
+     *   getGhostPreview={({ action, row }) => (
+     *     <div style={{ background: '#1a3a5c', border: '2px solid #3b82f6', height: '100%', borderRadius: 4, padding: '0 8px', display: 'flex', alignItems: 'center' }}>
+     *       <span style={{ color: '#3b82f6', fontSize: 12 }}>{action.id}</span>
+     *     </div>
+     *   )}
+     * />
+     * ```
+     */
+    getGhostPreview?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+    }) => ReactNode;
+    /**
+     * @description Timeline engine; uses the built-in engine if not provided
+     */
+    engine?: ITimelineEngine;
+    /**
+     * @description Custom action area rendering
+     */
+    getActionRender?: (action: TimelineAction, row: TimelineRow) => ReactNode;
+    /**
+     * @description Custom scale rendering
+     */
+    getScaleRender?: (scale: number) => ReactNode;
+    /**
+     * @description Callback when movement starts
+     */
+    onActionMoveStart?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+    }) => void;
+    /**
+     * @description Movement callback (return false to prevent movement)
+     */
+    onActionMoving?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+        start: number;
+        end: number;
+    }) => void | boolean;
+    /**
+     * @description Movement end callback (return false to prevent onChange from triggering)
+     */
+    onActionMoveEnd?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+        start: number;
+        end: number;
+    }) => void;
+    /**
+     * @description Callback when resizing starts
+     */
+    onActionResizeStart?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+        dir: 'right' | 'left';
+    }) => void;
+    /**
+     * @description Resizing callback (return false to prevent change)
+     */
+    onActionResizing?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+        start: number;
+        end: number;
+        dir: 'right' | 'left';
+    }) => void | boolean;
+    /**
+     * @description Callback when resizing ends (return false to prevent onChange from triggering)
+     */
+    onActionResizeEnd?: (params: {
+        action: TimelineAction;
+        row: TimelineRow;
+        start: number;
+        end: number;
+        dir: 'right' | 'left';
+    }) => void;
+    /**
+     * @description Callback when a row is clicked
+     */
+    onClickRow?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description Callback when an action is clicked
+     */
+    onClickAction?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        action: TimelineAction;
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description Callback when an action is clicked (not executed when drag is triggered)
+     */
+    onClickActionOnly?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        action: TimelineAction;
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description Callback when a row is double-clicked
+     */
+    onDoubleClickRow?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description Callback when an action is double-clicked
+     */
+    onDoubleClickAction?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        action: TimelineAction;
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description Callback when a row is right-clicked
+     */
+    onContextMenuRow?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description Callback when an action is right-clicked
+     */
+    onContextMenuAction?: (e: React.MouseEvent<HTMLElement, MouseEvent>, param: {
+        action: TimelineAction;
+        row: TimelineRow;
+        time: number;
+    }) => void;
+    /**
+     * @description Get a list of action IDs for auxiliary lines, calculated at move/resize start; defaults to all except the current moving action
+     */
+    getAssistDragLineActionIds?: (params: {
+        action: TimelineAction;
+        editorData: TimelineRow[];
+        row: TimelineRow;
+    }) => string[];
+    /**
+     * @description Cursor start drag event
+     */
+    onCursorDragStart?: (time: number) => void;
+    /**
+     * @description Cursor end drag event
+     */
+    onCursorDragEnd?: (time: number) => void;
+    /**
+     * @description Cursor drag event
+     */
+    onCursorDrag?: (time: number) => void;
+    /**
+     * @description Click on time area event; return false to prevent setting time
+     */
+    onClickTimeArea?: (time: number, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => boolean | undefined;
+    /**
+     * @description Row drag start callback
+     * @param params row is the data of the row being dragged
+     */
+    onRowDragStart?: (params: {
+        row: TimelineRow;
+    }) => void;
+    /**
+     * @description Row drag end callback
+     * @param params row is the data of the row being dragged; editorData is the new data arrangement after the row is dragged
+     * @returns
+     */
+    onRowDragEnd?: (params: {
+        row: TimelineRow;
+        editorData: TimelineRow[];
+    }) => void;
+}
+export interface TimelineState {
+    /** DOM node */
+    target: HTMLElement | null;
+    /** Execution listener */
+    listener: Emitter<EventTypes>;
+    /** Whether it is playing */
+    isPlaying: boolean;
+    /** Whether it is paused */
+    isPaused: boolean;
+    /** Set current playback time */
+    setTime: (time: number) => void;
+    /** Get current playback time */
+    getTime: () => number;
+    /** Set playback rate */
+    setPlayRate: (rate: number) => void;
+    /** Get playback rate */
+    getPlayRate: () => number;
+    /** Re-render current time */
+    reRender: () => void;
+    /** Play */
+    play: (param: {
+        /** Default run from start to end, priority greater than autoEnd */
+        toTime?: number;
+        /** Whether it is automatically end after playback */
+        autoEnd?: boolean;
+        /** List of actionIds to run; runs all by default if not provided */
+        runActionIds?: string[];
+    }) => boolean;
+    /** Pause */
+    pause: () => void;
+    /** Set scroll left */
+    setScrollLeft: (val: number) => void;
+    /** Set scroll top */
+    setScrollTop: (val: number) => void;
+}
+/**
+ * Animation editor parameters
+ * @export
+ * @interface TimelineProp
+ */
+export interface TimelineEditor extends EditData {
+    /**
+     * @description Scroll distance of the editing area from the top (please use ref.setScrollTop instead)
+     * @deprecated
+     */
+    scrollTop?: number;
+    /**
+     * @description Scroll callback for the editing area (used to control synchronization with scroll of editing rows)
+     */
+    onScroll?: (params: OnScrollParams) => void;
+    /**
+     * @description Whether to enable automatic scrolling during dragging
+     * @default false
+     */
+    autoScroll?: boolean;
+    /**
+     * @description Custom timeline style
+     */
+    style?: React.CSSProperties;
+    /**
+     * @description Whether to re-render automatically (update tick when data changes or cursor time changes)
+     * @default true
+     */
+    autoReRender?: boolean;
+    /**
+     * @description Data change callback, triggered after the end of an action operation changes data (returning false will prevent automatic engine synchronization, used to reduce performance overhead)
+     */
+    onChange?: (editorData: TimelineRow[]) => void | boolean;
+}
+export type RequiredPick<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+export type RequiredEditData = RequiredPick<EditData, 'editorData' | 'effects' | 'scale' | 'scaleSplitCount' | 'scaleWidth' | 'startLeft' | 'minScaleCount' | 'maxScaleCount' | 'rowHeight'>;
+export type RequiredTimelineEditor = RequiredPick<TimelineEditor, 'scrollTop'> & RequiredEditData;

package/dist/react-timeline-editor.css

@@ -0,0 +1 @@
+.timeline-editor-cursor{cursor:ew-resize;position:absolute;top:32px;height:calc(100% - 32px);box-sizing:border-box;border-left:1px solid #5297FF;border-right:1px solid #5297FF;transform:translate(-25%) scaleX(.5)}.timeline-editor-cursor-top{position:absolute;top:0;left:50%;transform:translate(-50%) scaleX(2);margin:auto}.timeline-editor-cursor-area{width:16px;height:100%;cursor:ew-resize;position:absolute;top:0;left:50%;transform:translate(-50%)}.timeline-editor-drag-line-container{position:absolute;height:100%;top:0;left:0}.timeline-editor-drag-line{width:0;position:absolute;top:0;height:99%;border-left:1px dashed rgba(82,151,255,.6)}.timeline-editor:hover .timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar{height:4px}.timeline-editor-edit-area{flex:1 1 auto;margin-top:10px;overflow:hidden;position:relative}.timeline-editor-edit-area .ReactVirtualized__Grid{outline:none!important;overflow:overlay!important}.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar{width:0;height:0}.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-track{background-color:transparent!important}.timeline-editor-edit-area .ReactVirtualized__Grid::-webkit-scrollbar-thumb{background:#313132;border-radius:16px}.timeline-editor-action{position:absolute;left:0;top:0;background-color:#2f3134;cursor:default;transition:box-shadow .15s ease}.timeline-editor-action.action-cross-row-dragging{box-shadow:0 0 0 2px #63b3edcc,0 0 16px #63b3ed99,0 0 32px #63b3ed4d;opacity:.75;z-index:10}.timeline-editor-action.action-movable{cursor:move}.timeline-editor-action .timeline-editor-action-left-stretch,.timeline-editor-action .timeline-editor-action-right-stretch{position:absolute;top:0;width:10px;border-radius:4px;height:100%;overflow:hidden}.timeline-editor-action .timeline-editor-action-left-stretch:after,.timeline-editor-action .timeline-editor-action-right-stretch:after{position:absolute;top:0;bottom:0;margin:auto;border-radius:4px;border-top:28px solid transparent;border-bottom:28px solid transparent}.timeline-editor-action .timeline-editor-action-left-stretch{left:0;cursor:w-resize}.timeline-editor-action .timeline-editor-action-left-stretch:after{left:0;content:"";border-left:7px solid rgba(255,255,255,.1);border-right:7px solid transparent}.timeline-editor-action .timeline-editor-action-right-stretch{right:0;cursor:e-resize}.timeline-editor-action .timeline-editor-action-right-stretch:after{right:0;content:"";border-right:7px solid rgba(255,255,255,.1);border-left:7px solid transparent}.timeline-editor-edit-row-dragging{opacity:.5}.timeline-editor-edit-row{background-repeat:no-repeat,repeat;background-image:linear-gradient(#191b1d,#191b1d),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 0);display:flex;flex-direction:row;box-sizing:border-box;position:relative;transition:opacity .2s ease,transform .2s ease}.timeline-editor-edit-row-drag-handle{position:absolute;left:4px;top:50%;transform:translateY(-50%);width:16px;height:16px;cursor:grab;display:flex;align-items:center;justify-content:center;color:#666;font-size:12px;-webkit-user-select:none;user-select:none;z-index:10;opacity:.6;transition:opacity .2s ease}.timeline-editor-edit-row-drag-handle:hover{opacity:1;color:#999}.timeline-editor-edit-row-drag-handle:active{cursor:grabbing}.timeline-editor-edit-row-dragged{opacity:.5;transform:scale(.98);pointer-events:none;z-index:1000;position:relative}.timeline-editor-edit-row-dragging{cursor:grabbing}.timeline-editor-edit-row-placeholder{background:#4a90e21a;border:2px dashed #4a90e2;height:4px;min-height:4px;margin:2px 0;opacity:.8}.timeline-editor-edit-row-placeholder .timeline-editor-edit-row-drag-handle,.timeline-editor-edit-row-placeholder .timeline-editor-edit-action{display:none}.timeline-editor-edit-row:before{content:"";position:absolute;left:0;right:0;height:2px;background:#4a90e2;z-index:100;opacity:0;transition:opacity .2s ease}.timeline-editor-edit-row[data-insert-position=top]:before{top:-1px;opacity:1}.timeline-editor-edit-row[data-insert-position=bottom]:before{bottom:-1px;opacity:1}.timeline-editor-time-area{position:relative;height:32px;flex:0 0 auto}.timeline-editor-time-area .ReactVirtualized__Grid{outline:none}.timeline-editor-time-area .ReactVirtualized__Grid::-webkit-scrollbar{display:none}.timeline-editor-time-area-interact{position:absolute;cursor:pointer;left:0;top:0}.timeline-editor-time-unit{border-right:1px solid rgba(255,255,255,.2);position:relative;box-sizing:content-box;height:4px!important;bottom:0!important;top:auto!important}.timeline-editor-time-unit-big{height:8px!important}.timeline-editor-time-unit-scale{color:#fff9;position:absolute;right:0;top:0;transform:translate(50%,-100%)}.timeline-editor{height:600px;width:600px;min-height:32px;position:relative;font-size:12px;font-family:PingFang SC;background-color:#191b1d;display:flex;flex-direction:column;overflow:hidden}.cut-overlay{position:absolute;inset:0;z-index:20;pointer-events:auto;-webkit-user-select:none;user-select:none}.cut-block-clip{position:absolute;pointer-events:none;border-radius:3px;box-sizing:border-box;overflow:visible}.cut-blade{position:absolute;top:0;width:2px;height:100%;transform:translate(-50%);border-radius:1px;pointer-events:none;z-index:2;animation:cut-blade-in .1s ease-out}@keyframes cut-blade-in{0%{opacity:0;transform:translate(-50%) scaleY(.3)}to{opacity:1;transform:translate(-50%) scaleY(1)}}.cut-pill{position:absolute;bottom:calc(100% + 5px);transform:translate(-50%);font-size:10px;font-weight:700;font-family:SF Mono,Cascadia Code,Fira Code,monospace;letter-spacing:.04em;padding:2px 7px;border-radius:4px;white-space:nowrap;pointer-events:none;animation:cut-pill-in .1s ease-out;z-index:25}@keyframes cut-pill-in{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.loop-zone-overlay{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;z-index:4;overflow:visible}.loop-zone-band{position:absolute;top:0;height:100%;pointer-events:none;border-left:1px solid transparent;border-right:1px solid transparent;border-top:2px solid transparent}.loop-zone-handle{position:absolute;top:0;height:100%;transform:translate(-50%);pointer-events:none;-webkit-user-select:none;user-select:none}.loop-zone-handle__line{position:absolute;top:32px;bottom:0;left:50%;transform:translate(-50%);width:1px;pointer-events:none;border-left:1px dashed transparent;background:currentColor;opacity:.5}.loop-zone-handle__grip{position:absolute;top:6px;left:50%;transform:translate(-50%);pointer-events:auto;cursor:ew-resize;-webkit-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;padding:5px 7px;border-radius:5px;transition:filter .12s,transform .1s}.loop-zone-handle__grip:hover{filter:brightness(1.2);transform:translate(-50%) scaleY(1.1)}.loop-zone-handle__grip:active{transform:translate(-50%) scale(.94)}.loop-zone-handle__grip svg{display:block;flex-shrink:0}.timeline-transport-bar{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:48px;background:#0a0a14d9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06);gap:16px;box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Inter,Segoe UI,sans-serif}.timeline-transport-controls{display:flex;align-items:center;gap:4px}.timeline-transport-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;border:1px solid rgba(255,255,255,.07);background:#ffffff08;color:#64748b;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.timeline-transport-btn:hover{background:#ffffff14;color:#94a3b8;border-color:#ffffff1f}.timeline-transport-btn--primary{color:#c4c9d4}.timeline-transport-btn--primary:hover{background:#ffffff1a;color:#e2e8f0}.timeline-transport-btn--stop:hover{background:#ef44441f;border-color:#ef44444d;color:#ef4444}.timeline-transport-btn--loop{font-size:14px;line-height:1;width:auto;padding:0 6px;color:#4b5563}.timeline-transport-btn--loop:hover{background:#10b9811a;border-color:#10b9814d;color:#10b981}.timeline-transport-btn--loop-active{background:#10b9812e!important;border-color:#10b98180!important;color:#10b981!important;box-shadow:0 0 10px #10b98140!important}.timeline-transport-divider{width:1px;height:20px;background:#ffffff14;margin:0 4px;flex-shrink:0}.timeline-transport-loop-inputs{display:flex;align-items:center;gap:4px;margin-left:4px}.timeline-transport-loop-input{width:52px;background:#00000059;border:1px solid rgba(16,185,129,.3);border-radius:5px;color:#10b981;font-size:12px;font-family:SF Mono,Cascadia Code,Fira Code,monospace;font-weight:600;padding:2px 6px;text-align:center;outline:none;transition:border-color .12s}.timeline-transport-loop-input:focus{border-color:#10b981b3;box-shadow:0 0 6px #10b98133}.timeline-transport-loop-input::-webkit-inner-spin-button,.timeline-transport-loop-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.timeline-transport-loop-arrow{font-size:11px;color:#334155}.timeline-transport-loop-unit{font-size:10px;color:#334155;font-family:SF Mono,Cascadia Code,monospace}.timeline-transport-time{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:100px}.timeline-transport-time-value{font-size:22px;font-weight:700;font-family:SF Mono,Cascadia Code,Fira Code,monospace;color:#e2e8f0;letter-spacing:.05em;line-height:1}.timeline-transport-time-label{font-size:9px;font-weight:600;letter-spacing:.15em;color:#475569;text-transform:uppercase}.timeline-transport-rate{display:flex;align-items:center;gap:8px}.timeline-transport-rate-label{font-size:9px;font-weight:600;letter-spacing:.15em;color:#475569;text-transform:uppercase}.timeline-transport-rate-buttons{display:flex;gap:3px}.timeline-transport-rate-btn{padding:3px 8px;border-radius:5px;border:1px solid rgba(255,255,255,.07);background:#ffffff08;color:#475569;font-size:11px;font-weight:600;font-family:SF Mono,Cascadia Code,monospace;cursor:pointer;transition:all .12s}.timeline-transport-rate-btn:hover{background:#ffffff12;color:#94a3b8}.timeline-transport-rate-btn--active{background:#3b82f626;border-color:#3b82f666;color:#3b82f6;box-shadow:0 0 6px #3b82f626}

package/dist/utils/check_props.d.ts

@@ -0,0 +1,2 @@
+import { RequiredTimelineEditor, TimelineEditor } from '../interface/timeline';
+export declare function checkProps(props: TimelineEditor): RequiredTimelineEditor;

package/dist/utils/deal_class_prefix.d.ts

@@ -0,0 +1 @@
+export declare function prefix(...classNames: string[]): string;

package/dist/utils/deal_data.d.ts

@@ -0,0 +1,58 @@
+import { TimelineAction, TimelineRow } from '@keplar-404/timeline-engine';
+/** Time to pixel */
+export declare function parserTimeToPixel(data: number, param: {
+    startLeft: number;
+    scale: number;
+    scaleWidth: number;
+}): number;
+/** Pixel to time */
+export declare function parserPixelToTime(data: number, param: {
+    startLeft: number;
+    scale: number;
+    scaleWidth: number;
+}): number;
+/** Position + Width to Start + End */
+export declare function parserTransformToTime(data: {
+    left: number;
+    width: number;
+}, param: {
+    startLeft: number;
+    scale: number;
+    scaleWidth: number;
+}): {
+    start: number;
+    end: number;
+};
+/** Start + End to Position + Width */
+export declare function parserTimeToTransform(data: {
+    start: number;
+    end: number;
+}, param: {
+    startLeft: number;
+    scale: number;
+    scaleWidth: number;
+}): {
+    left: number;
+    width: number;
+};
+/** Get number of scale marks based on data */
+export declare function getScaleCountByRows(data: TimelineRow[], param: {
+    scale: number;
+}): number;
+/** Get current number of scale marks based on time */
+export declare function getScaleCountByPixel(data: number, param: {
+    startLeft: number;
+    scaleWidth: number;
+    scaleCount: number;
+}): number;
+/** Get collection of positions for all action times */
+export declare function parserActionsToPositions(actions: TimelineAction[], param: {
+    startLeft: number;
+    scale: number;
+    scaleWidth: number;
+}): number[];
+/**
+ * Split an action in a row at a given time.
+ * Automatically updates start/end times and creates a new adjacent action.
+ */
+export declare function splitActionInRow(data: TimelineRow[], rowId: string, actionId: string, cutTime: number): TimelineRow[];

package/dist/utils/logger.d.ts

@@ -0,0 +1,132 @@
+export declare enum LogLevel {
+    VERBOSE = 0,
+    LOG = 1,
+    INFO = 2,
+    WARN = 3,
+    ERROR = 4,
+    FATAL = 5,
+    SILENT = Infinity
+}
+export declare const LogLevels: {
+    VERBOSE: LogLevel;
+    LOG: LogLevel;
+    INFO: LogLevel;
+    WARN: LogLevel;
+    ERROR: LogLevel;
+    SILENT: LogLevel;
+};
+export default class ConsoleLogger {
+    static readonly instances: ConsoleLogger[];
+    static level: LogLevel;
+    static Levels: {
+        VERBOSE: LogLevel;
+        LOG: LogLevel;
+        INFO: LogLevel;
+        WARN: LogLevel;
+        ERROR: LogLevel;
+        SILENT: LogLevel;
+    };
+    static noColor: boolean;
+    Levels: {
+        VERBOSE: LogLevel;
+        LOG: LogLevel;
+        INFO: LogLevel;
+        WARN: LogLevel;
+        ERROR: LogLevel;
+        SILENT: LogLevel;
+    };
+    level: LogLevel;
+    prefix: string;
+    enabled: boolean;
+    debugColor: string;
+    logColor: string;
+    infoColor: string;
+    warnColor: string;
+    errorColor: string;
+    fatalColor: string;
+    /**
+     * ConsoleLogger
+     * @param   {string}  prefix  Logger prefix
+     * @return  {ConsoleLogger}
+     */
+    constructor(prefix: string);
+    static setLevel(level: LogLevel): void;
+    static enable(level?: LogLevel): void;
+    static disable(): void;
+    /**
+     * set logger prefix
+     * @param prefix
+     */
+    setPrefix(prefix: string): void;
+    /**
+     * enable logger with optional log level
+     * @param level
+     */
+    enable(level?: LogLevel): void;
+    /**
+     * disable logger
+     */
+    disable(): void;
+    /**
+     * Set log level
+     * @param   {LogLevel}  level
+     * @return  {void}
+     */
+    setLevel(level: LogLevel): void;
+    /**
+     * trace
+     * @param title
+     * @param args
+     */
+    trace(title: string, ...args: any[]): void;
+    /**
+     * debug
+     * @param title
+     * @param args
+     */
+    debug(title: string, ...args: any[]): void;
+    /**
+     * log
+     * @param title
+     * @param args
+     */
+    log(title: string, ...args: any[]): void;
+    /**
+     * info
+     * @param title
+     * @param args
+     */
+    info(title: string, ...args: any[]): void;
+    /**
+     * warn
+     * @param title
+     * @param args
+     */
+    warn(title: string, ...args: any[]): void;
+    /**
+     * error
+     * @param title
+     * @param args
+     */
+    error(title: string, ...args: any[]): void;
+    /**
+     * fatal error
+     * @param title
+     * @param args
+     */
+    fatal(title: string, ...args: any[]): void;
+    /**
+     * start a group with label
+     * @param label
+     */
+    group(...label: any[]): void;
+    /**
+     * end a group
+     */
+    groupEnd(): void;
+    /**
+     * collapse log group
+     * @param label
+     */
+    groupCollapsed(...label: any[]): void;
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@keplar-404/react-timeline-editor",
+  "version": "1.0.6",
+  "author": "keplar-404",
+  "license": "MIT",
+  "keywords": [
+    "timeline",
+    "animation",
+    "editor",
+    "react",
+    "typescript"
+  ],
+  "bugs": {
+    "url": "https://github.com/keplar-404/react-timeline-editor/issues"
+  },
+  "homepage": "https://github.com/keplar-404/react-timeline-editor#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/keplar-404/react-timeline-editor.git"
+  },
+  "scripts": {
+    "build": "bun run clean && vite build",
+    "clean": "rm -rf dist"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "main": "src/index.tsx",
+  "module": "src/index.tsx",
+  "typings": "src/index.tsx",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "@interactjs/types": "^1.10.11",
+    "@keplar-404/timeline-engine": "workspace:*",
+    "@types/react-virtualized": "^9.21.14",
+    "framework-utils": "^1.1.0",
+    "interactjs": "^1.10.11",
+    "react-virtualized": "^9.22.3"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.177",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@umijs/test": "^3.0.5",
+    "@vitejs/plugin-react": "^4.2.0",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "lint-staged": "^10.0.7",
+    "lodash": "^4.17.21",
+    "prettier": "^2.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^7.0.0",
+    "vite-plugin-dts": "^4.5.4",
+    "yorkie": "^2.0.0"
+  },
+  "conditions": {
+    "USE_SRC": [
+      null,
+      {
+        "main": "dist/index.es.js",
+        "module": "dist/index.es.js",
+        "typings": "dist/index.d.ts"
+      }
+    ]
+  }
+}

package/src/components/control_area/index.tsx

@@ -0,0 +1 @@
+// TODO: default control components (currently customized by users as needed)