import { UseTimelineTrackResult } from "./useTimelineTrack.mjs";
import { HTMLAttributes } from "react";
import { TimelineTrackGeometryOptions } from "@techsquidtv/canvas-timeline-core";
//#region src/hooks/tracks/useTimelineTrackHeader.d.ts
/**
 * DOM props returned for a track header row.
 *
 * @remarks
 *
 * These props provide semantic grouping, track data attributes, disabled state,
 * and renderer-aligned height. Spread them onto the outer header row before
 * layering app-specific buttons or labels inside.
 */
type TimelineTrackHeaderRootProps = HTMLAttributes<HTMLDivElement>;
/**
 * Result returned by `useTimelineTrackHeader`.
 *
 * @remarks
 *
 * This result extends {@link UseTimelineTrackResult} with a computed display
 * label and DOM root props. It is the hook behind `Timeline.TrackHeader` and is
 * useful when building custom shadcn-like header rows.
 *
 */
interface UseTimelineTrackHeaderResult extends UseTimelineTrackResult {
  /** Human-readable label for the header row. */
  label: string;
  /** Props for the root track header row element. */
  rootProps: TimelineTrackHeaderRootProps;
}
/**
 * Adapts one timeline track into DOM-ready track header state.
 *
 * @remarks
 *
 * Use this hook for custom track header columns that should remain aligned with
 * canvas row geometry. It reads row state from {@link useTimelineTrack}, derives
 * a stable label, and returns root props with data attributes for styling
 * selected, muted, locked, visible, targeted, and collapsed states.
 *
 * @param trackId - Track id to bind.
 * @param options - Optional track geometry overrides matching the renderer.
 * @returns Track row state plus header label and root DOM props.
 *
 * @example
 * ```tsx
 * import { useTimelineTrackHeader } from '@techsquidtv/canvas-timeline-react';
 *
 * export function CustomTrackHeader({ trackId }: { trackId: string }) {
 *   const header = useTimelineTrackHeader(trackId);
 *
 *   return (
 *     <div {...header.rootProps}>
 *       <span>{header.label}</span>
 *       <button type="button" aria-pressed={header.locked} onClick={() => header.toggleLock()}>
 *         Lock
 *       </button>
 *     </div>
 *   );
 * }
 * ```
 *
 * @see {@link useTimelineTrack}
 * @see {@link https://canvastimeline.com/demos/timeline-editor-controls | Timeline editor controls demo}
 */
declare function useTimelineTrackHeader(trackId: string, options?: TimelineTrackGeometryOptions): UseTimelineTrackHeaderResult;
//#endregion
export { TimelineTrackHeaderRootProps, UseTimelineTrackHeaderResult, useTimelineTrackHeader };
//# sourceMappingURL=useTimelineTrackHeader.d.mts.map