@waveform-playlist/browser 5.0.0-alpha.14 → 5.0.0-alpha.16

package/dist/index.d.ts

@@ -59,6 +59,19 @@ export declare interface AnnotationData {
     language?: string;
 }
 
+/**
+ * Shared annotation types used across Waveform components
+ */
+/**
+ * Base annotation data structure
+ */
+declare interface AnnotationData_2 {
+    id: string;
+    start: number;
+    end: number;
+    lines: string[];
+}
+
 /**
  * Represents a single audio clip on the timeline
  *
@@ -411,6 +424,21 @@ export declare const FastForwardButton: default_2.FC<{
     className?: string;
 }>;
 
+/**
+ * Custom function to generate the label shown on annotation boxes in the waveform.
+ * Receives the annotation data and its index in the list, returns a string label.
+ * Default behavior: displays annotation.id
+ *
+ * @example
+ * // Show sequence numbers
+ * getAnnotationBoxLabel={(annotation, index) => String(index + 1)}
+ *
+ * @example
+ * // Show formatted time
+ * getAnnotationBoxLabel={(annotation) => formatTime(annotation.start)}
+ */
+export declare type GetAnnotationBoxLabelFn = (annotation: AnnotationData_2, index: number) => string;
+
 export declare const getEffectDefinition: (id: string) => EffectDefinition | undefined;
 
 export declare const getEffectsByCategory: (category: EffectDefinition["category"]) => EffectDefinition[];
@@ -651,18 +679,20 @@ export declare interface MediaElementWaveformProps {
     /** Height in pixels for the annotation text list */
     annotationTextHeight?: number;
     /** Custom function to generate the label shown on annotation boxes */
-    getAnnotationBoxLabel?: (annotation: {
-        id: string;
-        start: number;
-        end: number;
-        lines: string[];
-    }) => string;
+    getAnnotationBoxLabel?: GetAnnotationBoxLabelFn;
     /**
      * Custom render function for annotation items in the text list.
      * When provided, completely replaces the default annotation item rendering.
      * Use this to customize the appearance of each annotation (e.g., add furigana).
      */
     renderAnnotationItem?: (props: RenderAnnotationItemProps) => default_2.ReactNode;
+    /** Whether annotation boundaries can be edited by dragging. Defaults to false. */
+    editable?: boolean;
+    /**
+     * Callback when annotations are updated (e.g., boundaries dragged).
+     * Called with the full updated annotations array.
+     */
+    onAnnotationUpdate?: OnAnnotationUpdateFn;
     className?: string;
 }
 
@@ -672,6 +702,12 @@ declare interface MicrophoneDevice {
     groupId: string;
 }
 
+/**
+ * Callback when annotations are updated (e.g., boundaries dragged).
+ * Called with the full updated annotations array.
+ */
+export declare type OnAnnotationUpdateFn = (annotations: AnnotationData_2[]) => void;
+
 /**
  * Effect definitions for all available Tone.js effects
  * Each effect has parameters with min/max/default values for UI controls
@@ -1815,15 +1851,10 @@ export declare interface WaveformProps {
     renderAnnotationItem?: (props: RenderAnnotationItemProps) => ReactNode;
     /**
      * Custom function to generate the label shown on annotation boxes in the waveform.
-     * Receives the annotation data and should return a string label.
+     * Receives the annotation data and its index, returns a string label.
      * Default: annotation.id
      */
-    getAnnotationBoxLabel?: (annotation: {
-        id: string;
-        start: number;
-        end: number;
-        lines: string[];
-    }) => string;
+    getAnnotationBoxLabel?: GetAnnotationBoxLabelFn;
     className?: string;
     showClipHeaders?: boolean;
     interactiveClips?: boolean;