{"version":3,"file":"Provider.mjs","names":[],"sources":["../src/Provider.tsx"],"sourcesContent":["import { TimelineContext } from '#react/context';\nimport type { TimelineEngine } from '@techsquidtv/canvas-timeline-core';\nimport React from 'react';\n/**\n * Props for wiring a {@link TimelineEngine} into React context.\n *\n * @remarks\n *\n * Pass one stable engine instance to {@link TimelineProvider}. Descendant hooks\n * such as {@link useTimeline} and {@link useTimelineState} read from this\n * context and receive synchronized `TimelineState` snapshots.\n *\n * @see {@link https://canvastimeline.com/docs/getting-started | Getting Started}\n * @see {@link https://canvastimeline.com/docs/react-hooks | React editor hooks}\n */\nexport interface TimelineProviderProps {\n  /** React subtree that should read from the provided engine. */\n  children?: React.ReactNode;\n  /** Engine instance that owns timeline state and editing operations. */\n  engine: TimelineEngine;\n}\n\n/**\n * Provides a {@link TimelineEngine} to React timeline hooks and components.\n *\n * @remarks\n *\n * `TimelineProvider` is the bridge between the event-driven engine model and\n * React layouts. It provides a stable engine reference; consuming hooks subscribe\n * to the state fields they need. Command-only consumers can use\n * {@link useTimelineEngine} without subscribing to state. Hooks such as {@link useTimeline} and\n * {@link useTimelineState} must run inside this provider.\n *\n * @param props - Provider configuration and child tree.\n *\n * @example\n * ```tsx\n * import { useMemo } from 'react';\n * import { TimelineEngine } from '@techsquidtv/canvas-timeline-core';\n * import {\n *   TimelineProvider,\n *   useTimelineState,\n * } from '@techsquidtv/canvas-timeline-react';\n * import { fromSeconds } from '@techsquidtv/canvas-timeline-utils';\n *\n * function TrackCount() {\n *   const state = useTimelineState();\n *\n *   return <span>{state.tracks.length} tracks</span>;\n * }\n *\n * export function EditorShell() {\n *   const engine = useMemo(\n *     () =>\n *       new TimelineEngine({\n *         duration: fromSeconds(30),\n *         tracks: [],\n *       }),\n *     []\n *   );\n *\n *   return (\n *     <TimelineProvider engine={engine}>\n *       <TrackCount />\n *     </TimelineProvider>\n *   );\n * }\n * ```\n *\n * @see {@link TimelineEngine}\n * @see `TimelineState`\n * @see {@link https://canvastimeline.com/docs/react-hooks | React editor hooks}\n */\nexport function TimelineProvider(props: TimelineProviderProps) {\n  const { children, engine } = props;\n  return <TimelineContext.Provider value={engine}>{children}</TimelineContext.Provider>;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyEA,SAAgB,iBAAiB,OAA8B;CAC7D,MAAM,EAAE,UAAU,WAAW;CAC7B,OAAO,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO;EAAS;CAAmC,CAAA;AACtF"}