{"version":3,"file":"useTimelineTrackHeader.mjs","names":[],"sources":["../../../src/hooks/tracks/useTimelineTrackHeader.ts"],"sourcesContent":["import { getTimelineTrackLabel } from '#react/hooks/tracks/timelineTrackLabel';\nimport { useTimelineTrack } from '#react/hooks/tracks/useTimelineTrack';\nimport type { UseTimelineTrackResult } from '#react/hooks/tracks/useTimelineTrack';\nimport type { TimelineTrackGeometryOptions } from '@techsquidtv/canvas-timeline-core';\nimport { useMemo } from 'react';\nimport type { HTMLAttributes } from 'react';\n/**\n * DOM props returned for a track header row.\n *\n * @remarks\n *\n * These props provide semantic grouping, track data attributes, disabled state,\n * and renderer-aligned height. Spread them onto the outer header row before\n * layering app-specific buttons or labels inside.\n */\nexport type TimelineTrackHeaderRootProps = HTMLAttributes<HTMLDivElement>;\n\n/**\n * Result returned by `useTimelineTrackHeader`.\n *\n * @remarks\n *\n * This result extends {@link UseTimelineTrackResult} with a computed display\n * label and DOM root props. It is the hook behind `Timeline.TrackHeader` and is\n * useful when building custom shadcn-like header rows.\n *\n */\nexport interface UseTimelineTrackHeaderResult extends UseTimelineTrackResult {\n  /** Human-readable label for the header row. */\n  label: string;\n  /** Props for the root track header row element. */\n  rootProps: TimelineTrackHeaderRootProps;\n}\n\n/**\n * Adapts one timeline track into DOM-ready track header state.\n *\n * @remarks\n *\n * Use this hook for custom track header columns that should remain aligned with\n * canvas row geometry. It reads row state from {@link useTimelineTrack}, derives\n * a stable label, and returns root props with data attributes for styling\n * selected, muted, locked, visible, targeted, and collapsed states.\n *\n * @param trackId - Track id to bind.\n * @param options - Optional track geometry overrides matching the renderer.\n * @returns Track row state plus header label and root DOM props.\n *\n * @example\n * ```tsx\n * import { useTimelineTrackHeader } from '@techsquidtv/canvas-timeline-react';\n *\n * export function CustomTrackHeader({ trackId }: { trackId: string }) {\n *   const header = useTimelineTrackHeader(trackId);\n *\n *   return (\n *     <div {...header.rootProps}>\n *       <span>{header.label}</span>\n *       <button type=\"button\" aria-pressed={header.locked} onClick={() => header.toggleLock()}>\n *         Lock\n *       </button>\n *     </div>\n *   );\n * }\n * ```\n *\n * @see {@link useTimelineTrack}\n * @see {@link https://canvastimeline.com/demos/timeline-editor-controls | Timeline editor controls demo}\n */\nexport function useTimelineTrackHeader(\n  trackId: string,\n  options: TimelineTrackGeometryOptions = {}\n): UseTimelineTrackHeaderResult {\n  const trackState = useTimelineTrack(trackId, options);\n  const label = getTimelineTrackLabel(trackState.track, trackState.trackIndex, trackId);\n\n  const rootProps = useMemo<TimelineTrackHeaderRootProps>(\n    () => ({\n      role: 'group',\n      'aria-label': label,\n      'aria-disabled': trackState.locked || undefined,\n      'data-track-id': trackId,\n      'data-track-kind': trackState.kind ?? undefined,\n      'data-track-visible': String(trackState.visible),\n      'data-track-muted': String(trackState.muted),\n      'data-track-locked': String(trackState.locked),\n      'data-track-selected': String(trackState.selected),\n      'data-track-targeted': String(trackState.targeted),\n      'data-track-collapsed': String(trackState.collapsed),\n      style: {\n        height: `${trackState.height}px`,\n      },\n    }),\n    [\n      label,\n      trackId,\n      trackState.collapsed,\n      trackState.height,\n      trackState.kind,\n      trackState.locked,\n      trackState.muted,\n      trackState.selected,\n      trackState.targeted,\n      trackState.visible,\n    ]\n  );\n\n  return useMemo(\n    () => ({\n      ...trackState,\n      label,\n      rootProps,\n    }),\n    [label, rootProps, trackState]\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,SAAgB,uBACd,SACA,UAAwC,CAAC,GACX;CAC9B,MAAM,aAAa,iBAAiB,SAAS,OAAO;CACpD,MAAM,QAAQ,sBAAsB,WAAW,OAAO,WAAW,YAAY,OAAO;CAEpF,MAAM,YAAY,eACT;EACL,MAAM;EACN,cAAc;EACd,iBAAiB,WAAW,UAAU,KAAA;EACtC,iBAAiB;EACjB,mBAAmB,WAAW,QAAQ,KAAA;EACtC,sBAAsB,OAAO,WAAW,OAAO;EAC/C,oBAAoB,OAAO,WAAW,KAAK;EAC3C,qBAAqB,OAAO,WAAW,MAAM;EAC7C,uBAAuB,OAAO,WAAW,QAAQ;EACjD,uBAAuB,OAAO,WAAW,QAAQ;EACjD,wBAAwB,OAAO,WAAW,SAAS;EACnD,OAAO,EACL,QAAQ,GAAG,WAAW,OAAO,IAC/B;CACF,IACA;EACE;EACA;EACA,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;CACb,CACF;CAEA,OAAO,eACE;EACL,GAAG;EACH;EACA;CACF,IACA;EAAC;EAAO;EAAW;CAAU,CAC/B;AACF"}