{"version":3,"file":"useTimelineClipRects.mjs","names":[],"sources":["../../../src/hooks/clips/useTimelineClipRects.ts"],"sourcesContent":["import { useTimelineEngine } from '#react/hooks/core/useTimelineEngine';\nimport { useTimelineGeometryRevision } from '#react/hooks/core/useTimelineGeometryRevision';\nimport type {\n  TimelineClipGeometryOptions,\n  TimelineClipRect,\n} from '@techsquidtv/canvas-timeline-core';\nimport { useMemo } from 'react';\n/**\n * Options accepted by `useTimelineClipRects`.\n *\n * @remarks\n *\n * Pass the same ruler, track-height, and edge-threshold values used by your\n * renderer or interaction layer so DOM overlays line up with canvas-painted\n * clips. Leave options empty when using the default package geometry.\n *\n * @see {@link https://canvastimeline.com/docs/renderer-customization | Canvas renderer customization}\n */\nexport type UseTimelineClipRectsOptions = TimelineClipGeometryOptions;\n\n/**\n * Returns viewport-space geometry for every timeline clip.\n *\n * @remarks\n *\n * The hook subscribes to geometry-affecting timeline events and intentionally\n * does not subscribe to playhead-only updates. Use it for low-count DOM\n * overlays such as selected clip outlines, inline labels, or inspector hit\n * targets. For large custom renderers, prefer {@link useTimelineVisibleClips}\n * so offscreen clips are clipped or skipped.\n *\n * @param options - Optional ruler and track metrics aligned with the renderer.\n * @returns Clip entries with viewport rectangles and edit/display state.\n *\n * @example\n * ```tsx\n * import { useTimelineClipRects } from '@techsquidtv/canvas-timeline-react';\n *\n * export function SelectedClipBadges() {\n *   const rects = useTimelineClipRects();\n *\n *   return rects\n *     .filter((entry) => entry.selected)\n *     .map((entry) => (\n *       <span\n *         key={entry.clipId}\n *         style={{ left: entry.x, top: entry.y, width: entry.width, height: entry.height }}\n *       >\n *         {entry.clip.label ?? entry.clip.id}\n *       </span>\n *     ));\n * }\n * ```\n *\n * @see {@link useTimelineVisibleClips}\n * @see {@link https://canvastimeline.com/docs/react-hooks | React editor hooks}\n */\nexport function useTimelineClipRects(\n  options: UseTimelineClipRectsOptions = {}\n): TimelineClipRect<string>[] {\n  const engine = useTimelineEngine();\n  const revision = useTimelineGeometryRevision();\n  const { collapsedTrackHeight, edgeThreshold, rulerHeight, touchEdgeThreshold, trackHeight } =\n    options;\n\n  return useMemo(() => {\n    void revision;\n    return engine.geometry.getClipRects({\n      collapsedTrackHeight,\n      edgeThreshold,\n      rulerHeight,\n      touchEdgeThreshold,\n      trackHeight,\n    });\n  }, [\n    collapsedTrackHeight,\n    edgeThreshold,\n    engine,\n    revision,\n    rulerHeight,\n    touchEdgeThreshold,\n    trackHeight,\n  ]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,SAAgB,qBACd,UAAuC,CAAC,GACZ;CAC5B,MAAM,SAAS,kBAAkB;CACjC,MAAM,WAAW,4BAA4B;CAC7C,MAAM,EAAE,sBAAsB,eAAe,aAAa,oBAAoB,gBAC5E;CAEF,OAAO,cAAc;EAEnB,OAAO,OAAO,SAAS,aAAa;GAClC;GACA;GACA;GACA;GACA;EACF,CAAC;CACH,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;AACH"}