@seatlayer/react 0.4.1 → 0.6.0

package/dist/index.cjs

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   EmbeddedDesigner: () => EmbeddedDesigner,
+  SeatPicker: () => SeatPicker,
   SeatingChart: () => SeatingChart
 });
 module.exports = __toCommonJS(index_exports);
@@ -78,7 +79,10 @@ var SeatingChart = (0, import_react.forwardRef)(
         setSeatTier: (seatId, tierId) => chartRef.current?.setSeatTier(seatId, tierId),
         getFloors: () => chartRef.current?.getFloors() ?? [],
         setFloor: (floorId) => chartRef.current?.setFloor(floorId),
-        setColorblindSafe: (on) => chartRef.current?.setColorblindSafe(on)
+        setColorblindSafe: (on) => chartRef.current?.setColorblindSafe(on),
+        zoomIn: () => chartRef.current?.zoomIn(),
+        zoomOut: () => chartRef.current?.zoomOut(),
+        zoomToFit: () => chartRef.current?.zoomToFit()
       }),
       []
     );
@@ -131,9 +135,61 @@ var EmbeddedDesigner = (0, import_react2.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref: containerRef, className: props.className, style: props.style });
   }
 );
+
+// src/SeatPicker.tsx
+var import_react3 = require("react");
+var import_js3 = require("@seatlayer/js");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var SeatPicker = (0, import_react3.forwardRef)(
+  function SeatPicker2(props, ref) {
+    const { className, style, event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe, holdTtlMs } = props;
+    const containerRef = (0, import_react3.useRef)(null);
+    const pickerRef = (0, import_react3.useRef)(null);
+    const callbacks = (0, import_react3.useRef)(props);
+    callbacks.current = props;
+    (0, import_react3.useEffect)(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const picker = new import_js3.SeatPicker({
+        container: el,
+        event,
+        apiBase,
+        maxSelection,
+        publicKey,
+        locale,
+        currency,
+        colorblindSafe,
+        holdTtlMs,
+        theme: callbacks.current.theme,
+        messages: callbacks.current.messages,
+        onCheckout: (hold, seats) => callbacks.current.onCheckout?.(hold, seats),
+        onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),
+        onHoldExpired: () => callbacks.current.onHoldExpired?.(),
+        onError: (err) => callbacks.current.onError?.(err)
+      });
+      pickerRef.current = picker;
+      void picker.render();
+      return () => {
+        picker.destroy();
+        pickerRef.current = null;
+      };
+    }, [event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe, holdTtlMs]);
+    (0, import_react3.useImperativeHandle)(
+      ref,
+      () => ({
+        getSelection: () => pickerRef.current?.getSelection() ?? [],
+        bestAvailable: (qty, categoryKey) => pickerRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),
+        release: () => pickerRef.current?.release() ?? Promise.resolve()
+      }),
+      []
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { ref: containerRef, className, style });
+  }
+);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   EmbeddedDesigner,
+  SeatPicker,
   SeatingChart
 });
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/SeatingChart.tsx","../src/EmbeddedDesigner.tsx"],"sourcesContent":["/**\n * @seatlayer/react — the React wrapper for the SeatLayer embed SDK.\n */\nexport { SeatingChart } from './SeatingChart';\nexport { EmbeddedDesigner } from './EmbeddedDesigner';\nexport type {\n  SeatingChartProps,\n  SeatingChartHandle,\n  SelectedSeat,\n  HoldResult,\n  BestAvailableResult,\n  GAAreaAvailability,\n  HoldLineItem,\n} from './SeatingChart';\nexport type { EmbeddedDesignerProps, EmbeddedDesignerHandle, EmbeddedDesignerMessage } from './EmbeddedDesigner';\n","import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react';\nimport {\n  SeatingChart as CoreSeatingChart,\n  type SeatingChartOptions,\n  type SelectedSeat,\n  type HoldResult,\n  type BestAvailableResult,\n  type GAAreaAvailability,\n  type HoldLineItem,\n} from '@seatlayer/js';\n\nexport type { SelectedSeat, HoldResult, BestAvailableResult, GAAreaAvailability, HoldLineItem } from '@seatlayer/js';\nexport type { SeatHoverDetails } from '@seatlayer/js';\n\n/** Imperative handle exposed via `ref` — call these to drive the picker from your app. */\nexport interface SeatingChartHandle {\n  /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */\n  hold(options?: { ttlMs?: number }): Promise<HoldResult | null>;\n  /** GA areas with live remaining capacity. */\n  getGAAreas(): GAAreaAvailability[];\n  /** Atomically hold a quantity from one GA area. */\n  holdGA(areaId: string, qty: number, options?: { tierId?: string | null; ttlMs?: number }): Promise<HoldResult | null>;\n  /** Ask the server for the `qty` best free seats and hold them atomically. */\n  bestAvailable(qty: number, categoryKey?: string): Promise<BestAvailableResult | null>;\n  /** Release the current hold (if any). */\n  release(): Promise<void>;\n  /** The current selection, with prices resolved from the chart categories. */\n  getSelection(): SelectedSeat[];\n  /**\n   * Choose a ticket tier for a selected seat (e.g. Adult → Child). Available\n   * `tiers` are on each `SelectedSeat`; `tierId=null` reverts to the default.\n   */\n  setSeatTier(seatId: string, tierId: string | null): void;\n  /**\n   * Floors of a multi-floor chart — `[{ id, name }]` (single-floor charts\n   * return one entry; empty before render()). Pair with setFloor().\n   */\n  getFloors(): { id: string; name: string }[];\n  /** Switch the shown floor (2D). Warns + no-ops on single-floor charts. */\n  setFloor(floorId: string): void;\n  /** Toggle colorblind-safe rendering at runtime (see the `colorblindSafe` prop). */\n  setColorblindSafe(on: boolean): void;\n}\n\nexport interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * React wrapper around the framework-agnostic `@seatlayer/js` SDK.\n *\n * The underlying canvas is created once and torn down on unmount. Callback props\n * (`onSelectionChange`, `onHold`, `onError`, `onDeckTap`, `onHint`) may change\n * freely between renders without re-mounting the canvas — only `event`,\n * `apiBase`, `maxSelection`, `publicKey`, `locale`, `currency`, and\n * `colorblindSafe` trigger a rebuild. (`messages` is read once per mount;\n * changing it alone does not re-apply.)\n */\nexport const SeatingChart = forwardRef<SeatingChartHandle, SeatingChartProps>(\n  function SeatingChart(props, ref) {\n    const { className, style, event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe } = props;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const chartRef = useRef<CoreSeatingChart | null>(null);\n\n    // Always call the latest callbacks without rebuilding the chart.\n    const callbacks = useRef(props);\n    callbacks.current = props;\n\n    useEffect(() => {\n      const el = containerRef.current;\n      if (!el) return;\n\n      const chart = new CoreSeatingChart({\n        container: el,\n        event,\n        apiBase,\n        maxSelection,\n        publicKey,\n        locale,\n        currency,\n        colorblindSafe,\n        messages: callbacks.current.messages,\n        onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),\n        onHold: (result) => callbacks.current.onHold?.(result),\n        onHoldExpired: () => callbacks.current.onHoldExpired?.(),\n        onGAClick: (area) => callbacks.current.onGAClick?.(area),\n        onError: (err) => callbacks.current.onError?.(err),\n        onDeckTap: (floorId) => callbacks.current.onDeckTap?.(floorId),\n        onHint: (message) => callbacks.current.onHint?.(message),\n        seatTooltip: props.seatTooltip,\n        onSeatHover: (details) => callbacks.current.onSeatHover?.(details),\n      });\n      chartRef.current = chart;\n      void chart.render();\n\n      return () => {\n        chart.destroy();\n        chartRef.current = null;\n      };\n      // Rebuild only when the identity of the chart changes.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe]);\n\n    useImperativeHandle(\n      ref,\n      (): SeatingChartHandle => ({\n        hold: (options) => chartRef.current?.hold(options) ?? Promise.resolve(null),\n        getGAAreas: () => chartRef.current?.getGAAreas() ?? [],\n        holdGA: (areaId, qty, options) => chartRef.current?.holdGA(areaId, qty, options) ?? Promise.resolve(null),\n        bestAvailable: (qty, categoryKey) =>\n          chartRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),\n        release: () => chartRef.current?.release() ?? Promise.resolve(),\n        getSelection: () => chartRef.current?.getSelection() ?? [],\n        setSeatTier: (seatId, tierId) => chartRef.current?.setSeatTier(seatId, tierId),\n        getFloors: () => chartRef.current?.getFloors() ?? [],\n        setFloor: (floorId) => chartRef.current?.setFloor(floorId),\n        setColorblindSafe: (on) => chartRef.current?.setColorblindSafe(on),\n      }),\n      [],\n    );\n\n    return <div ref={containerRef} className={className} style={style} />;\n  },\n);\n","import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react';\nimport {\n  EmbeddedDesigner as CoreEmbeddedDesigner,\n  type EmbeddedDesignerMessage,\n} from '@seatlayer/js';\n\nexport type { EmbeddedDesignerMessage } from '@seatlayer/js';\n\nexport interface EmbeddedDesignerHandle {\n  /** Recreate the iframe with a newly-minted session URL. */\n  setDesignerUrl(designerUrl: string): void;\n  /** The currently mounted iframe, if any. */\n  getIframe(): HTMLIFrameElement | null;\n}\n\nexport interface EmbeddedDesignerProps {\n  /** Short-lived `designerUrl` returned by your backend. Never pass an `sk_` key. */\n  designerUrl: string;\n  expectedChartId?: string;\n  expectedWorkspaceId?: string;\n  title?: string;\n  className?: string;\n  style?: CSSProperties;\n  iframeClassName?: string;\n  iframeStyle?: Partial<CSSStyleDeclaration>;\n  allow?: string;\n  referrerPolicy?: ReferrerPolicy;\n  onReady?: (message: EmbeddedDesignerMessage) => void;\n  onSaved?: (message: EmbeddedDesignerMessage) => void;\n  onPublished?: (message: EmbeddedDesignerMessage) => void;\n  onClose?: (message: EmbeddedDesignerMessage) => void;\n  onError?: (message: EmbeddedDesignerMessage) => void;\n}\n\n/**\n * Native-feeling React host for the secure SeatLayer Designer iframe.\n * A new `designerUrl` always recreates the iframe, so a new fragment token can\n * never retain state from an earlier chart session.\n */\nexport const EmbeddedDesigner = forwardRef<EmbeddedDesignerHandle, EmbeddedDesignerProps>(\n  function EmbeddedDesigner(props, ref) {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const designerRef = useRef<CoreEmbeddedDesigner | null>(null);\n    const callbacks = useRef(props);\n    callbacks.current = props;\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n      const designer = new CoreEmbeddedDesigner({\n        designerUrl: props.designerUrl,\n        container,\n        expectedChartId: props.expectedChartId,\n        expectedWorkspaceId: props.expectedWorkspaceId,\n        title: props.title,\n        className: props.iframeClassName,\n        style: props.iframeStyle,\n        allow: props.allow,\n        referrerPolicy: props.referrerPolicy,\n        onReady: (message) => callbacks.current.onReady?.(message),\n        onSaved: (message) => callbacks.current.onSaved?.(message),\n        onPublished: (message) => callbacks.current.onPublished?.(message),\n        onClose: (message) => callbacks.current.onClose?.(message),\n        onError: (message) => callbacks.current.onError?.(message),\n      });\n      designer.mount();\n      designerRef.current = designer;\n      return () => {\n        designer.destroy();\n        designerRef.current = null;\n      };\n      // Session/chart identity changes must recreate the iframe. Callback changes are\n      // picked up from the ref without reloading an in-progress Designer session.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [props.designerUrl, props.expectedChartId, props.expectedWorkspaceId, props.title, props.iframeClassName, props.iframeStyle, props.allow, props.referrerPolicy]);\n\n    useImperativeHandle(ref, () => ({\n      setDesignerUrl: (designerUrl) => { designerRef.current?.setDesignerUrl(designerUrl); },\n      getIframe: () => designerRef.current?.getIframe() ?? null,\n    }), []);\n\n    return <div ref={containerRef} className={props.className} style={props.style} />;\n  },\n);\n"],"mappings":"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","names":["SeatingChart","CoreSeatingChart","import_react","import_js","import_jsx_runtime","EmbeddedDesigner","CoreEmbeddedDesigner"]}
+{"version":3,"sources":["../src/index.ts","../src/SeatingChart.tsx","../src/EmbeddedDesigner.tsx","../src/SeatPicker.tsx"],"sourcesContent":["/**\n * @seatlayer/react — the React wrapper for the SeatLayer embed SDK.\n */\nexport { SeatingChart } from './SeatingChart';\nexport { EmbeddedDesigner } from './EmbeddedDesigner';\nexport type {\n  SeatingChartProps,\n  SeatingChartHandle,\n  SelectedSeat,\n  HoldResult,\n  BestAvailableResult,\n  GAAreaAvailability,\n  HoldLineItem,\n} from './SeatingChart';\nexport type { EmbeddedDesignerProps, EmbeddedDesignerHandle, EmbeddedDesignerMessage } from './EmbeddedDesigner';\nexport { SeatPicker } from './SeatPicker';\nexport type { SeatPickerHandle, SeatPickerProps, SeatPickerOptions, SeatPickerTheme } from './SeatPicker';\n","import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react';\nimport {\n  SeatingChart as CoreSeatingChart,\n  type SeatingChartOptions,\n  type SelectedSeat,\n  type HoldResult,\n  type BestAvailableResult,\n  type GAAreaAvailability,\n  type HoldLineItem,\n} from '@seatlayer/js';\n\nexport type { SelectedSeat, HoldResult, BestAvailableResult, GAAreaAvailability, HoldLineItem } from '@seatlayer/js';\nexport type { SeatHoverDetails } from '@seatlayer/js';\n\n/** Imperative handle exposed via `ref` — call these to drive the picker from your app. */\nexport interface SeatingChartHandle {\n  /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */\n  hold(options?: { ttlMs?: number }): Promise<HoldResult | null>;\n  /** GA areas with live remaining capacity. */\n  getGAAreas(): GAAreaAvailability[];\n  /** Atomically hold a quantity from one GA area. */\n  holdGA(areaId: string, qty: number, options?: { tierId?: string | null; ttlMs?: number }): Promise<HoldResult | null>;\n  /** Ask the server for the `qty` best free seats and hold them atomically. */\n  bestAvailable(qty: number, categoryKey?: string): Promise<BestAvailableResult | null>;\n  /** Release the current hold (if any). */\n  release(): Promise<void>;\n  /** The current selection, with prices resolved from the chart categories. */\n  getSelection(): SelectedSeat[];\n  /**\n   * Choose a ticket tier for a selected seat (e.g. Adult → Child). Available\n   * `tiers` are on each `SelectedSeat`; `tierId=null` reverts to the default.\n   */\n  setSeatTier(seatId: string, tierId: string | null): void;\n  /**\n   * Floors of a multi-floor chart — `[{ id, name }]` (single-floor charts\n   * return one entry; empty before render()). Pair with setFloor().\n   */\n  getFloors(): { id: string; name: string }[];\n  /** Switch the shown floor (2D). Warns + no-ops on single-floor charts. */\n  setFloor(floorId: string): void;\n  /** Toggle colorblind-safe rendering at runtime (see the `colorblindSafe` prop). */\n  setColorblindSafe(on: boolean): void;\n  /** Zoom in one step (same increment as the wheel/pinch gesture). */\n  zoomIn(): void;\n  /** Zoom out one step. */\n  zoomOut(): void;\n  /** Reset the camera so the whole chart fits the container. */\n  zoomToFit(): void;\n}\n\nexport interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * React wrapper around the framework-agnostic `@seatlayer/js` SDK.\n *\n * The underlying canvas is created once and torn down on unmount. Callback props\n * (`onSelectionChange`, `onHold`, `onError`, `onDeckTap`, `onHint`) may change\n * freely between renders without re-mounting the canvas — only `event`,\n * `apiBase`, `maxSelection`, `publicKey`, `locale`, `currency`, and\n * `colorblindSafe` trigger a rebuild. (`messages` is read once per mount;\n * changing it alone does not re-apply.)\n */\nexport const SeatingChart = forwardRef<SeatingChartHandle, SeatingChartProps>(\n  function SeatingChart(props, ref) {\n    const { className, style, event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe } = props;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const chartRef = useRef<CoreSeatingChart | null>(null);\n\n    // Always call the latest callbacks without rebuilding the chart.\n    const callbacks = useRef(props);\n    callbacks.current = props;\n\n    useEffect(() => {\n      const el = containerRef.current;\n      if (!el) return;\n\n      const chart = new CoreSeatingChart({\n        container: el,\n        event,\n        apiBase,\n        maxSelection,\n        publicKey,\n        locale,\n        currency,\n        colorblindSafe,\n        messages: callbacks.current.messages,\n        onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),\n        onHold: (result) => callbacks.current.onHold?.(result),\n        onHoldExpired: () => callbacks.current.onHoldExpired?.(),\n        onGAClick: (area) => callbacks.current.onGAClick?.(area),\n        onError: (err) => callbacks.current.onError?.(err),\n        onDeckTap: (floorId) => callbacks.current.onDeckTap?.(floorId),\n        onHint: (message) => callbacks.current.onHint?.(message),\n        seatTooltip: props.seatTooltip,\n        onSeatHover: (details) => callbacks.current.onSeatHover?.(details),\n      });\n      chartRef.current = chart;\n      void chart.render();\n\n      return () => {\n        chart.destroy();\n        chartRef.current = null;\n      };\n      // Rebuild only when the identity of the chart changes.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe]);\n\n    useImperativeHandle(\n      ref,\n      (): SeatingChartHandle => ({\n        hold: (options) => chartRef.current?.hold(options) ?? Promise.resolve(null),\n        getGAAreas: () => chartRef.current?.getGAAreas() ?? [],\n        holdGA: (areaId, qty, options) => chartRef.current?.holdGA(areaId, qty, options) ?? Promise.resolve(null),\n        bestAvailable: (qty, categoryKey) =>\n          chartRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),\n        release: () => chartRef.current?.release() ?? Promise.resolve(),\n        getSelection: () => chartRef.current?.getSelection() ?? [],\n        setSeatTier: (seatId, tierId) => chartRef.current?.setSeatTier(seatId, tierId),\n        getFloors: () => chartRef.current?.getFloors() ?? [],\n        setFloor: (floorId) => chartRef.current?.setFloor(floorId),\n        setColorblindSafe: (on) => chartRef.current?.setColorblindSafe(on),\n        zoomIn: () => chartRef.current?.zoomIn(),\n        zoomOut: () => chartRef.current?.zoomOut(),\n        zoomToFit: () => chartRef.current?.zoomToFit(),\n      }),\n      [],\n    );\n\n    return <div ref={containerRef} className={className} style={style} />;\n  },\n);\n","import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react';\nimport {\n  EmbeddedDesigner as CoreEmbeddedDesigner,\n  type EmbeddedDesignerMessage,\n} from '@seatlayer/js';\n\nexport type { EmbeddedDesignerMessage } from '@seatlayer/js';\n\nexport interface EmbeddedDesignerHandle {\n  /** Recreate the iframe with a newly-minted session URL. */\n  setDesignerUrl(designerUrl: string): void;\n  /** The currently mounted iframe, if any. */\n  getIframe(): HTMLIFrameElement | null;\n}\n\nexport interface EmbeddedDesignerProps {\n  /** Short-lived `designerUrl` returned by your backend. Never pass an `sk_` key. */\n  designerUrl: string;\n  expectedChartId?: string;\n  expectedWorkspaceId?: string;\n  title?: string;\n  className?: string;\n  style?: CSSProperties;\n  iframeClassName?: string;\n  iframeStyle?: Partial<CSSStyleDeclaration>;\n  allow?: string;\n  referrerPolicy?: ReferrerPolicy;\n  onReady?: (message: EmbeddedDesignerMessage) => void;\n  onSaved?: (message: EmbeddedDesignerMessage) => void;\n  onPublished?: (message: EmbeddedDesignerMessage) => void;\n  onClose?: (message: EmbeddedDesignerMessage) => void;\n  onError?: (message: EmbeddedDesignerMessage) => void;\n}\n\n/**\n * Native-feeling React host for the secure SeatLayer Designer iframe.\n * A new `designerUrl` always recreates the iframe, so a new fragment token can\n * never retain state from an earlier chart session.\n */\nexport const EmbeddedDesigner = forwardRef<EmbeddedDesignerHandle, EmbeddedDesignerProps>(\n  function EmbeddedDesigner(props, ref) {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const designerRef = useRef<CoreEmbeddedDesigner | null>(null);\n    const callbacks = useRef(props);\n    callbacks.current = props;\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n      const designer = new CoreEmbeddedDesigner({\n        designerUrl: props.designerUrl,\n        container,\n        expectedChartId: props.expectedChartId,\n        expectedWorkspaceId: props.expectedWorkspaceId,\n        title: props.title,\n        className: props.iframeClassName,\n        style: props.iframeStyle,\n        allow: props.allow,\n        referrerPolicy: props.referrerPolicy,\n        onReady: (message) => callbacks.current.onReady?.(message),\n        onSaved: (message) => callbacks.current.onSaved?.(message),\n        onPublished: (message) => callbacks.current.onPublished?.(message),\n        onClose: (message) => callbacks.current.onClose?.(message),\n        onError: (message) => callbacks.current.onError?.(message),\n      });\n      designer.mount();\n      designerRef.current = designer;\n      return () => {\n        designer.destroy();\n        designerRef.current = null;\n      };\n      // Session/chart identity changes must recreate the iframe. Callback changes are\n      // picked up from the ref without reloading an in-progress Designer session.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [props.designerUrl, props.expectedChartId, props.expectedWorkspaceId, props.title, props.iframeClassName, props.iframeStyle, props.allow, props.referrerPolicy]);\n\n    useImperativeHandle(ref, () => ({\n      setDesignerUrl: (designerUrl) => { designerRef.current?.setDesignerUrl(designerUrl); },\n      getIframe: () => designerRef.current?.getIframe() ?? null,\n    }), []);\n\n    return <div ref={containerRef} className={props.className} style={props.style} />;\n  },\n);\n","import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react';\nimport {\n  SeatPicker as CoreSeatPicker,\n  type SeatPickerOptions,\n  type SeatPickerTheme,\n  type SelectedSeat,\n  type HoldResult,\n} from '@seatlayer/js';\n\nexport type { SeatPickerOptions, SeatPickerTheme } from '@seatlayer/js';\n\n/** Imperative handle for the full-experience picker widget. */\nexport interface SeatPickerHandle {\n  /** Current selection with resolved prices. */\n  getSelection(): SelectedSeat[];\n  /** Server-side best seats + hold, reflected in the widget tray. */\n  bestAvailable(qty: number, categoryKey?: string): Promise<HoldResult | null>;\n  /** Release the current hold (if any) and reset the tray. */\n  release(): Promise<void>;\n}\n\nexport interface SeatPickerProps extends Omit<SeatPickerOptions, 'container'> {\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * React wrapper around the full SeatPicker widget (header · live price panel ·\n * tray · GA · hold countdown · toasts). The widget is container-adaptive: give\n * the wrapping div a size and it lays itself out for that box (side panel wide,\n * bottom sheet narrow). For the one-call modal, use `SeatPicker.open()` from\n * `@seatlayer/js` directly.\n */\nexport const SeatPicker = forwardRef<SeatPickerHandle, SeatPickerProps>(\n  function SeatPicker(props, ref) {\n    const { className, style, event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe, holdTtlMs } = props;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const pickerRef = useRef<CoreSeatPicker | null>(null);\n\n    // Always call the latest callbacks without rebuilding the widget.\n    const callbacks = useRef(props);\n    callbacks.current = props;\n\n    useEffect(() => {\n      const el = containerRef.current;\n      if (!el) return;\n\n      const picker = new CoreSeatPicker({\n        container: el,\n        event,\n        apiBase,\n        maxSelection,\n        publicKey,\n        locale,\n        currency,\n        colorblindSafe,\n        holdTtlMs,\n        theme: callbacks.current.theme,\n        messages: callbacks.current.messages,\n        onCheckout: (hold, seats) => callbacks.current.onCheckout?.(hold, seats),\n        onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),\n        onHoldExpired: () => callbacks.current.onHoldExpired?.(),\n        onError: (err) => callbacks.current.onError?.(err),\n      });\n      pickerRef.current = picker;\n      void picker.render();\n\n      return () => {\n        picker.destroy();\n        pickerRef.current = null;\n      };\n      // Rebuild only when the identity of the event/config changes.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe, holdTtlMs]);\n\n    useImperativeHandle(\n      ref,\n      (): SeatPickerHandle => ({\n        getSelection: () => pickerRef.current?.getSelection() ?? [],\n        bestAvailable: (qty, categoryKey) => pickerRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),\n        release: () => pickerRef.current?.release() ?? Promise.resolve(),\n      }),\n      [],\n    );\n\n    return <div ref={containerRef} className={className} style={style} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAMO;AACP,gBAQO;AA2HI;AAnEJ,IAAM,mBAAe;AAAA,EAC1B,SAASA,cAAa,OAAO,KAAK;AAChC,UAAM,EAAE,WAAW,OAAO,OAAO,SAAS,cAAc,WAAW,QAAQ,UAAU,eAAe,IAAI;AAExG,UAAM,mBAAe,qBAA8B,IAAI;AACvD,UAAM,eAAW,qBAAgC,IAAI;AAGrD,UAAM,gBAAY,qBAAO,KAAK;AAC9B,cAAU,UAAU;AAEpB,gCAAU,MAAM;AACd,YAAM,KAAK,aAAa;AACxB,UAAI,CAAC,GAAI;AAET,YAAM,QAAQ,IAAI,UAAAC,aAAiB;AAAA,QACjC,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,UAAU,QAAQ;AAAA,QAC5B,mBAAmB,CAAC,UAAU,UAAU,QAAQ,oBAAoB,KAAK;AAAA,QACzE,QAAQ,CAAC,WAAW,UAAU,QAAQ,SAAS,MAAM;AAAA,QACrD,eAAe,MAAM,UAAU,QAAQ,gBAAgB;AAAA,QACvD,WAAW,CAAC,SAAS,UAAU,QAAQ,YAAY,IAAI;AAAA,QACvD,SAAS,CAAC,QAAQ,UAAU,QAAQ,UAAU,GAAG;AAAA,QACjD,WAAW,CAAC,YAAY,UAAU,QAAQ,YAAY,OAAO;AAAA,QAC7D,QAAQ,CAAC,YAAY,UAAU,QAAQ,SAAS,OAAO;AAAA,QACvD,aAAa,MAAM;AAAA,QACnB,aAAa,CAAC,YAAY,UAAU,QAAQ,cAAc,OAAO;AAAA,MACnE,CAAC;AACD,eAAS,UAAU;AACnB,WAAK,MAAM,OAAO;AAElB,aAAO,MAAM;AACX,cAAM,QAAQ;AACd,iBAAS,UAAU;AAAA,MACrB;AAAA,IAGF,GAAG,CAAC,OAAO,SAAS,cAAc,WAAW,QAAQ,UAAU,cAAc,CAAC;AAE9E;AAAA,MACE;AAAA,MACA,OAA2B;AAAA,QACzB,MAAM,CAAC,YAAY,SAAS,SAAS,KAAK,OAAO,KAAK,QAAQ,QAAQ,IAAI;AAAA,QAC1E,YAAY,MAAM,SAAS,SAAS,WAAW,KAAK,CAAC;AAAA,QACrD,QAAQ,CAAC,QAAQ,KAAK,YAAY,SAAS,SAAS,OAAO,QAAQ,KAAK,OAAO,KAAK,QAAQ,QAAQ,IAAI;AAAA,QACxG,eAAe,CAAC,KAAK,gBACnB,SAAS,SAAS,cAAc,KAAK,WAAW,KAAK,QAAQ,QAAQ,IAAI;AAAA,QAC3E,SAAS,MAAM,SAAS,SAAS,QAAQ,KAAK,QAAQ,QAAQ;AAAA,QAC9D,cAAc,MAAM,SAAS,SAAS,aAAa,KAAK,CAAC;AAAA,QACzD,aAAa,CAAC,QAAQ,WAAW,SAAS,SAAS,YAAY,QAAQ,MAAM;AAAA,QAC7E,WAAW,MAAM,SAAS,SAAS,UAAU,KAAK,CAAC;AAAA,QACnD,UAAU,CAAC,YAAY,SAAS,SAAS,SAAS,OAAO;AAAA,QACzD,mBAAmB,CAAC,OAAO,SAAS,SAAS,kBAAkB,EAAE;AAAA,QACjE,QAAQ,MAAM,SAAS,SAAS,OAAO;AAAA,QACvC,SAAS,MAAM,SAAS,SAAS,QAAQ;AAAA,QACzC,WAAW,MAAM,SAAS,SAAS,UAAU;AAAA,MAC/C;AAAA,MACA,CAAC;AAAA,IACH;AAEA,WAAO,4CAAC,SAAI,KAAK,cAAc,WAAsB,OAAc;AAAA,EACrE;AACF;;;AC5IA,IAAAC,gBAMO;AACP,IAAAC,aAGO;AA6EI,IAAAC,sBAAA;AA1CJ,IAAM,uBAAmB;AAAA,EAC9B,SAASC,kBAAiB,OAAO,KAAK;AACpC,UAAM,mBAAe,sBAA8B,IAAI;AACvD,UAAM,kBAAc,sBAAoC,IAAI;AAC5D,UAAM,gBAAY,sBAAO,KAAK;AAC9B,cAAU,UAAU;AAEpB,iCAAU,MAAM;AACd,YAAM,YAAY,aAAa;AAC/B,UAAI,CAAC,UAAW;AAChB,YAAM,WAAW,IAAI,WAAAC,iBAAqB;AAAA,QACxC,aAAa,MAAM;AAAA,QACnB;AAAA,QACA,iBAAiB,MAAM;AAAA,QACvB,qBAAqB,MAAM;AAAA,QAC3B,OAAO,MAAM;AAAA,QACb,WAAW,MAAM;AAAA,QACjB,OAAO,MAAM;AAAA,QACb,OAAO,MAAM;AAAA,QACb,gBAAgB,MAAM;AAAA,QACtB,SAAS,CAAC,YAAY,UAAU,QAAQ,UAAU,OAAO;AAAA,QACzD,SAAS,CAAC,YAAY,UAAU,QAAQ,UAAU,OAAO;AAAA,QACzD,aAAa,CAAC,YAAY,UAAU,QAAQ,cAAc,OAAO;AAAA,QACjE,SAAS,CAAC,YAAY,UAAU,QAAQ,UAAU,OAAO;AAAA,QACzD,SAAS,CAAC,YAAY,UAAU,QAAQ,UAAU,OAAO;AAAA,MAC3D,CAAC;AACD,eAAS,MAAM;AACf,kBAAY,UAAU;AACtB,aAAO,MAAM;AACX,iBAAS,QAAQ;AACjB,oBAAY,UAAU;AAAA,MACxB;AAAA,IAIF,GAAG,CAAC,MAAM,aAAa,MAAM,iBAAiB,MAAM,qBAAqB,MAAM,OAAO,MAAM,iBAAiB,MAAM,aAAa,MAAM,OAAO,MAAM,cAAc,CAAC;AAElK,2CAAoB,KAAK,OAAO;AAAA,MAC9B,gBAAgB,CAAC,gBAAgB;AAAE,oBAAY,SAAS,eAAe,WAAW;AAAA,MAAG;AAAA,MACrF,WAAW,MAAM,YAAY,SAAS,UAAU,KAAK;AAAA,IACvD,IAAI,CAAC,CAAC;AAEN,WAAO,6CAAC,SAAI,KAAK,cAAc,WAAW,MAAM,WAAW,OAAO,MAAM,OAAO;AAAA,EACjF;AACF;;;ACzFA,IAAAC,gBAMO;AACP,IAAAC,aAMO;AA+EI,IAAAC,sBAAA;AArDJ,IAAM,iBAAa;AAAA,EACxB,SAASC,YAAW,OAAO,KAAK;AAC9B,UAAM,EAAE,WAAW,OAAO,OAAO,SAAS,cAAc,WAAW,QAAQ,UAAU,gBAAgB,UAAU,IAAI;AAEnH,UAAM,mBAAe,sBAA8B,IAAI;AACvD,UAAM,gBAAY,sBAA8B,IAAI;AAGpD,UAAM,gBAAY,sBAAO,KAAK;AAC9B,cAAU,UAAU;AAEpB,iCAAU,MAAM;AACd,YAAM,KAAK,aAAa;AACxB,UAAI,CAAC,GAAI;AAET,YAAM,SAAS,IAAI,WAAAC,WAAe;AAAA,QAChC,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,OAAO,UAAU,QAAQ;AAAA,QACzB,UAAU,UAAU,QAAQ;AAAA,QAC5B,YAAY,CAAC,MAAM,UAAU,UAAU,QAAQ,aAAa,MAAM,KAAK;AAAA,QACvE,mBAAmB,CAAC,UAAU,UAAU,QAAQ,oBAAoB,KAAK;AAAA,QACzE,eAAe,MAAM,UAAU,QAAQ,gBAAgB;AAAA,QACvD,SAAS,CAAC,QAAQ,UAAU,QAAQ,UAAU,GAAG;AAAA,MACnD,CAAC;AACD,gBAAU,UAAU;AACpB,WAAK,OAAO,OAAO;AAEnB,aAAO,MAAM;AACX,eAAO,QAAQ;AACf,kBAAU,UAAU;AAAA,MACtB;AAAA,IAGF,GAAG,CAAC,OAAO,SAAS,cAAc,WAAW,QAAQ,UAAU,gBAAgB,SAAS,CAAC;AAEzF;AAAA,MACE;AAAA,MACA,OAAyB;AAAA,QACvB,cAAc,MAAM,UAAU,SAAS,aAAa,KAAK,CAAC;AAAA,QAC1D,eAAe,CAAC,KAAK,gBAAgB,UAAU,SAAS,cAAc,KAAK,WAAW,KAAK,QAAQ,QAAQ,IAAI;AAAA,QAC/G,SAAS,MAAM,UAAU,SAAS,QAAQ,KAAK,QAAQ,QAAQ;AAAA,MACjE;AAAA,MACA,CAAC;AAAA,IACH;AAEA,WAAO,6CAAC,SAAI,KAAK,cAAc,WAAsB,OAAc;AAAA,EACrE;AACF;","names":["SeatingChart","CoreSeatingChart","import_react","import_js","import_jsx_runtime","EmbeddedDesigner","CoreEmbeddedDesigner","import_react","import_js","import_jsx_runtime","SeatPicker","CoreSeatPicker"]}

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { CSSProperties } from 'react';
-import { SeatingChartOptions, HoldResult, GAAreaAvailability, BestAvailableResult, SelectedSeat, EmbeddedDesignerMessage } from '@seatlayer/js';
-export { BestAvailableResult, EmbeddedDesignerMessage, GAAreaAvailability, HoldLineItem, HoldResult, SelectedSeat } from '@seatlayer/js';
+import { SeatingChartOptions, HoldResult, GAAreaAvailability, BestAvailableResult, SelectedSeat, EmbeddedDesignerMessage, SeatPickerOptions } from '@seatlayer/js';
+export { BestAvailableResult, EmbeddedDesignerMessage, GAAreaAvailability, HoldLineItem, HoldResult, SeatPickerOptions, SeatPickerTheme, SelectedSeat } from '@seatlayer/js';
 
 /** Imperative handle exposed via `ref` — call these to drive the picker from your app. */
 interface SeatingChartHandle {
@@ -39,6 +39,12 @@ interface SeatingChartHandle {
     setFloor(floorId: string): void;
     /** Toggle colorblind-safe rendering at runtime (see the `colorblindSafe` prop). */
     setColorblindSafe(on: boolean): void;
+    /** Zoom in one step (same increment as the wheel/pinch gesture). */
+    zoomIn(): void;
+    /** Zoom out one step. */
+    zoomOut(): void;
+    /** Reset the camera so the whole chart fits the container. */
+    zoomToFit(): void;
 }
 interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {
     className?: string;
@@ -87,4 +93,26 @@ interface EmbeddedDesignerProps {
  */
 declare const EmbeddedDesigner: react.ForwardRefExoticComponent<EmbeddedDesignerProps & react.RefAttributes<EmbeddedDesignerHandle>>;
 
-export { EmbeddedDesigner, type EmbeddedDesignerHandle, type EmbeddedDesignerProps, SeatingChart, type SeatingChartHandle, type SeatingChartProps };
+/** Imperative handle for the full-experience picker widget. */
+interface SeatPickerHandle {
+    /** Current selection with resolved prices. */
+    getSelection(): SelectedSeat[];
+    /** Server-side best seats + hold, reflected in the widget tray. */
+    bestAvailable(qty: number, categoryKey?: string): Promise<HoldResult | null>;
+    /** Release the current hold (if any) and reset the tray. */
+    release(): Promise<void>;
+}
+interface SeatPickerProps extends Omit<SeatPickerOptions, 'container'> {
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * React wrapper around the full SeatPicker widget (header · live price panel ·
+ * tray · GA · hold countdown · toasts). The widget is container-adaptive: give
+ * the wrapping div a size and it lays itself out for that box (side panel wide,
+ * bottom sheet narrow). For the one-call modal, use `SeatPicker.open()` from
+ * `@seatlayer/js` directly.
+ */
+declare const SeatPicker: react.ForwardRefExoticComponent<SeatPickerProps & react.RefAttributes<SeatPickerHandle>>;
+
+export { EmbeddedDesigner, type EmbeddedDesignerHandle, type EmbeddedDesignerProps, SeatPicker, type SeatPickerHandle, type SeatPickerProps, SeatingChart, type SeatingChartHandle, type SeatingChartProps };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { CSSProperties } from 'react';
-import { SeatingChartOptions, HoldResult, GAAreaAvailability, BestAvailableResult, SelectedSeat, EmbeddedDesignerMessage } from '@seatlayer/js';
-export { BestAvailableResult, EmbeddedDesignerMessage, GAAreaAvailability, HoldLineItem, HoldResult, SelectedSeat } from '@seatlayer/js';
+import { SeatingChartOptions, HoldResult, GAAreaAvailability, BestAvailableResult, SelectedSeat, EmbeddedDesignerMessage, SeatPickerOptions } from '@seatlayer/js';
+export { BestAvailableResult, EmbeddedDesignerMessage, GAAreaAvailability, HoldLineItem, HoldResult, SeatPickerOptions, SeatPickerTheme, SelectedSeat } from '@seatlayer/js';
 
 /** Imperative handle exposed via `ref` — call these to drive the picker from your app. */
 interface SeatingChartHandle {
@@ -39,6 +39,12 @@ interface SeatingChartHandle {
     setFloor(floorId: string): void;
     /** Toggle colorblind-safe rendering at runtime (see the `colorblindSafe` prop). */
     setColorblindSafe(on: boolean): void;
+    /** Zoom in one step (same increment as the wheel/pinch gesture). */
+    zoomIn(): void;
+    /** Zoom out one step. */
+    zoomOut(): void;
+    /** Reset the camera so the whole chart fits the container. */
+    zoomToFit(): void;
 }
 interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {
     className?: string;
@@ -87,4 +93,26 @@ interface EmbeddedDesignerProps {
  */
 declare const EmbeddedDesigner: react.ForwardRefExoticComponent<EmbeddedDesignerProps & react.RefAttributes<EmbeddedDesignerHandle>>;
 
-export { EmbeddedDesigner, type EmbeddedDesignerHandle, type EmbeddedDesignerProps, SeatingChart, type SeatingChartHandle, type SeatingChartProps };
+/** Imperative handle for the full-experience picker widget. */
+interface SeatPickerHandle {
+    /** Current selection with resolved prices. */
+    getSelection(): SelectedSeat[];
+    /** Server-side best seats + hold, reflected in the widget tray. */
+    bestAvailable(qty: number, categoryKey?: string): Promise<HoldResult | null>;
+    /** Release the current hold (if any) and reset the tray. */
+    release(): Promise<void>;
+}
+interface SeatPickerProps extends Omit<SeatPickerOptions, 'container'> {
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * React wrapper around the full SeatPicker widget (header · live price panel ·
+ * tray · GA · hold countdown · toasts). The widget is container-adaptive: give
+ * the wrapping div a size and it lays itself out for that box (side panel wide,
+ * bottom sheet narrow). For the one-call modal, use `SeatPicker.open()` from
+ * `@seatlayer/js` directly.
+ */
+declare const SeatPicker: react.ForwardRefExoticComponent<SeatPickerProps & react.RefAttributes<SeatPickerHandle>>;
+
+export { EmbeddedDesigner, type EmbeddedDesignerHandle, type EmbeddedDesignerProps, SeatPicker, type SeatPickerHandle, type SeatPickerProps, SeatingChart, type SeatingChartHandle, type SeatingChartProps };

package/dist/index.js

@@ -58,7 +58,10 @@ var SeatingChart = forwardRef(
         setSeatTier: (seatId, tierId) => chartRef.current?.setSeatTier(seatId, tierId),
         getFloors: () => chartRef.current?.getFloors() ?? [],
         setFloor: (floorId) => chartRef.current?.setFloor(floorId),
-        setColorblindSafe: (on) => chartRef.current?.setColorblindSafe(on)
+        setColorblindSafe: (on) => chartRef.current?.setColorblindSafe(on),
+        zoomIn: () => chartRef.current?.zoomIn(),
+        zoomOut: () => chartRef.current?.zoomOut(),
+        zoomToFit: () => chartRef.current?.zoomToFit()
       }),
       []
     );
@@ -118,8 +121,67 @@ var EmbeddedDesigner = forwardRef2(
     return /* @__PURE__ */ jsx2("div", { ref: containerRef, className: props.className, style: props.style });
   }
 );
+
+// src/SeatPicker.tsx
+import {
+  forwardRef as forwardRef3,
+  useEffect as useEffect3,
+  useImperativeHandle as useImperativeHandle3,
+  useRef as useRef3
+} from "react";
+import {
+  SeatPicker as CoreSeatPicker
+} from "@seatlayer/js";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var SeatPicker = forwardRef3(
+  function SeatPicker2(props, ref) {
+    const { className, style, event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe, holdTtlMs } = props;
+    const containerRef = useRef3(null);
+    const pickerRef = useRef3(null);
+    const callbacks = useRef3(props);
+    callbacks.current = props;
+    useEffect3(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const picker = new CoreSeatPicker({
+        container: el,
+        event,
+        apiBase,
+        maxSelection,
+        publicKey,
+        locale,
+        currency,
+        colorblindSafe,
+        holdTtlMs,
+        theme: callbacks.current.theme,
+        messages: callbacks.current.messages,
+        onCheckout: (hold, seats) => callbacks.current.onCheckout?.(hold, seats),
+        onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),
+        onHoldExpired: () => callbacks.current.onHoldExpired?.(),
+        onError: (err) => callbacks.current.onError?.(err)
+      });
+      pickerRef.current = picker;
+      void picker.render();
+      return () => {
+        picker.destroy();
+        pickerRef.current = null;
+      };
+    }, [event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe, holdTtlMs]);
+    useImperativeHandle3(
+      ref,
+      () => ({
+        getSelection: () => pickerRef.current?.getSelection() ?? [],
+        bestAvailable: (qty, categoryKey) => pickerRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),
+        release: () => pickerRef.current?.release() ?? Promise.resolve()
+      }),
+      []
+    );
+    return /* @__PURE__ */ jsx3("div", { ref: containerRef, className, style });
+  }
+);
 export {
   EmbeddedDesigner,
+  SeatPicker,
   SeatingChart
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SeatingChart.tsx","../src/EmbeddedDesigner.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react';\nimport {\n  SeatingChart as CoreSeatingChart,\n  type SeatingChartOptions,\n  type SelectedSeat,\n  type HoldResult,\n  type BestAvailableResult,\n  type GAAreaAvailability,\n  type HoldLineItem,\n} from '@seatlayer/js';\n\nexport type { SelectedSeat, HoldResult, BestAvailableResult, GAAreaAvailability, HoldLineItem } from '@seatlayer/js';\nexport type { SeatHoverDetails } from '@seatlayer/js';\n\n/** Imperative handle exposed via `ref` — call these to drive the picker from your app. */\nexport interface SeatingChartHandle {\n  /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */\n  hold(options?: { ttlMs?: number }): Promise<HoldResult | null>;\n  /** GA areas with live remaining capacity. */\n  getGAAreas(): GAAreaAvailability[];\n  /** Atomically hold a quantity from one GA area. */\n  holdGA(areaId: string, qty: number, options?: { tierId?: string | null; ttlMs?: number }): Promise<HoldResult | null>;\n  /** Ask the server for the `qty` best free seats and hold them atomically. */\n  bestAvailable(qty: number, categoryKey?: string): Promise<BestAvailableResult | null>;\n  /** Release the current hold (if any). */\n  release(): Promise<void>;\n  /** The current selection, with prices resolved from the chart categories. */\n  getSelection(): SelectedSeat[];\n  /**\n   * Choose a ticket tier for a selected seat (e.g. Adult → Child). Available\n   * `tiers` are on each `SelectedSeat`; `tierId=null` reverts to the default.\n   */\n  setSeatTier(seatId: string, tierId: string | null): void;\n  /**\n   * Floors of a multi-floor chart — `[{ id, name }]` (single-floor charts\n   * return one entry; empty before render()). Pair with setFloor().\n   */\n  getFloors(): { id: string; name: string }[];\n  /** Switch the shown floor (2D). Warns + no-ops on single-floor charts. */\n  setFloor(floorId: string): void;\n  /** Toggle colorblind-safe rendering at runtime (see the `colorblindSafe` prop). */\n  setColorblindSafe(on: boolean): void;\n}\n\nexport interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * React wrapper around the framework-agnostic `@seatlayer/js` SDK.\n *\n * The underlying canvas is created once and torn down on unmount. Callback props\n * (`onSelectionChange`, `onHold`, `onError`, `onDeckTap`, `onHint`) may change\n * freely between renders without re-mounting the canvas — only `event`,\n * `apiBase`, `maxSelection`, `publicKey`, `locale`, `currency`, and\n * `colorblindSafe` trigger a rebuild. (`messages` is read once per mount;\n * changing it alone does not re-apply.)\n */\nexport const SeatingChart = forwardRef<SeatingChartHandle, SeatingChartProps>(\n  function SeatingChart(props, ref) {\n    const { className, style, event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe } = props;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const chartRef = useRef<CoreSeatingChart | null>(null);\n\n    // Always call the latest callbacks without rebuilding the chart.\n    const callbacks = useRef(props);\n    callbacks.current = props;\n\n    useEffect(() => {\n      const el = containerRef.current;\n      if (!el) return;\n\n      const chart = new CoreSeatingChart({\n        container: el,\n        event,\n        apiBase,\n        maxSelection,\n        publicKey,\n        locale,\n        currency,\n        colorblindSafe,\n        messages: callbacks.current.messages,\n        onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),\n        onHold: (result) => callbacks.current.onHold?.(result),\n        onHoldExpired: () => callbacks.current.onHoldExpired?.(),\n        onGAClick: (area) => callbacks.current.onGAClick?.(area),\n        onError: (err) => callbacks.current.onError?.(err),\n        onDeckTap: (floorId) => callbacks.current.onDeckTap?.(floorId),\n        onHint: (message) => callbacks.current.onHint?.(message),\n        seatTooltip: props.seatTooltip,\n        onSeatHover: (details) => callbacks.current.onSeatHover?.(details),\n      });\n      chartRef.current = chart;\n      void chart.render();\n\n      return () => {\n        chart.destroy();\n        chartRef.current = null;\n      };\n      // Rebuild only when the identity of the chart changes.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe]);\n\n    useImperativeHandle(\n      ref,\n      (): SeatingChartHandle => ({\n        hold: (options) => chartRef.current?.hold(options) ?? Promise.resolve(null),\n        getGAAreas: () => chartRef.current?.getGAAreas() ?? [],\n        holdGA: (areaId, qty, options) => chartRef.current?.holdGA(areaId, qty, options) ?? Promise.resolve(null),\n        bestAvailable: (qty, categoryKey) =>\n          chartRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),\n        release: () => chartRef.current?.release() ?? Promise.resolve(),\n        getSelection: () => chartRef.current?.getSelection() ?? [],\n        setSeatTier: (seatId, tierId) => chartRef.current?.setSeatTier(seatId, tierId),\n        getFloors: () => chartRef.current?.getFloors() ?? [],\n        setFloor: (floorId) => chartRef.current?.setFloor(floorId),\n        setColorblindSafe: (on) => chartRef.current?.setColorblindSafe(on),\n      }),\n      [],\n    );\n\n    return <div ref={containerRef} className={className} style={style} />;\n  },\n);\n","import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react';\nimport {\n  EmbeddedDesigner as CoreEmbeddedDesigner,\n  type EmbeddedDesignerMessage,\n} from '@seatlayer/js';\n\nexport type { EmbeddedDesignerMessage } from '@seatlayer/js';\n\nexport interface EmbeddedDesignerHandle {\n  /** Recreate the iframe with a newly-minted session URL. */\n  setDesignerUrl(designerUrl: string): void;\n  /** The currently mounted iframe, if any. */\n  getIframe(): HTMLIFrameElement | null;\n}\n\nexport interface EmbeddedDesignerProps {\n  /** Short-lived `designerUrl` returned by your backend. Never pass an `sk_` key. */\n  designerUrl: string;\n  expectedChartId?: string;\n  expectedWorkspaceId?: string;\n  title?: string;\n  className?: string;\n  style?: CSSProperties;\n  iframeClassName?: string;\n  iframeStyle?: Partial<CSSStyleDeclaration>;\n  allow?: string;\n  referrerPolicy?: ReferrerPolicy;\n  onReady?: (message: EmbeddedDesignerMessage) => void;\n  onSaved?: (message: EmbeddedDesignerMessage) => void;\n  onPublished?: (message: EmbeddedDesignerMessage) => void;\n  onClose?: (message: EmbeddedDesignerMessage) => void;\n  onError?: (message: EmbeddedDesignerMessage) => void;\n}\n\n/**\n * Native-feeling React host for the secure SeatLayer Designer iframe.\n * A new `designerUrl` always recreates the iframe, so a new fragment token can\n * never retain state from an earlier chart session.\n */\nexport const EmbeddedDesigner = forwardRef<EmbeddedDesignerHandle, EmbeddedDesignerProps>(\n  function EmbeddedDesigner(props, ref) {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const designerRef = useRef<CoreEmbeddedDesigner | null>(null);\n    const callbacks = useRef(props);\n    callbacks.current = props;\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n      const designer = new CoreEmbeddedDesigner({\n        designerUrl: props.designerUrl,\n        container,\n        expectedChartId: props.expectedChartId,\n        expectedWorkspaceId: props.expectedWorkspaceId,\n        title: props.title,\n        className: props.iframeClassName,\n        style: props.iframeStyle,\n        allow: props.allow,\n        referrerPolicy: props.referrerPolicy,\n        onReady: (message) => callbacks.current.onReady?.(message),\n        onSaved: (message) => callbacks.current.onSaved?.(message),\n        onPublished: (message) => callbacks.current.onPublished?.(message),\n        onClose: (message) => callbacks.current.onClose?.(message),\n        onError: (message) => callbacks.current.onError?.(message),\n      });\n      designer.mount();\n      designerRef.current = designer;\n      return () => {\n        designer.destroy();\n        designerRef.current = null;\n      };\n      // Session/chart identity changes must recreate the iframe. Callback changes are\n      // picked up from the ref without reloading an in-progress Designer session.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [props.designerUrl, props.expectedChartId, props.expectedWorkspaceId, props.title, props.iframeClassName, props.iframeStyle, props.allow, props.referrerPolicy]);\n\n    useImperativeHandle(ref, () => ({\n      setDesignerUrl: (designerUrl) => { designerRef.current?.setDesignerUrl(designerUrl); },\n      getIframe: () => designerRef.current?.getIframe() ?? null,\n    }), []);\n\n    return <div ref={containerRef} className={props.className} style={props.style} />;\n  },\n);\n"],"mappings":"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","names":["SeatingChart","forwardRef","useEffect","useImperativeHandle","useRef","jsx","EmbeddedDesigner"]}
+{"version":3,"sources":["../src/SeatingChart.tsx","../src/EmbeddedDesigner.tsx","../src/SeatPicker.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react';\nimport {\n  SeatingChart as CoreSeatingChart,\n  type SeatingChartOptions,\n  type SelectedSeat,\n  type HoldResult,\n  type BestAvailableResult,\n  type GAAreaAvailability,\n  type HoldLineItem,\n} from '@seatlayer/js';\n\nexport type { SelectedSeat, HoldResult, BestAvailableResult, GAAreaAvailability, HoldLineItem } from '@seatlayer/js';\nexport type { SeatHoverDetails } from '@seatlayer/js';\n\n/** Imperative handle exposed via `ref` — call these to drive the picker from your app. */\nexport interface SeatingChartHandle {\n  /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */\n  hold(options?: { ttlMs?: number }): Promise<HoldResult | null>;\n  /** GA areas with live remaining capacity. */\n  getGAAreas(): GAAreaAvailability[];\n  /** Atomically hold a quantity from one GA area. */\n  holdGA(areaId: string, qty: number, options?: { tierId?: string | null; ttlMs?: number }): Promise<HoldResult | null>;\n  /** Ask the server for the `qty` best free seats and hold them atomically. */\n  bestAvailable(qty: number, categoryKey?: string): Promise<BestAvailableResult | null>;\n  /** Release the current hold (if any). */\n  release(): Promise<void>;\n  /** The current selection, with prices resolved from the chart categories. */\n  getSelection(): SelectedSeat[];\n  /**\n   * Choose a ticket tier for a selected seat (e.g. Adult → Child). Available\n   * `tiers` are on each `SelectedSeat`; `tierId=null` reverts to the default.\n   */\n  setSeatTier(seatId: string, tierId: string | null): void;\n  /**\n   * Floors of a multi-floor chart — `[{ id, name }]` (single-floor charts\n   * return one entry; empty before render()). Pair with setFloor().\n   */\n  getFloors(): { id: string; name: string }[];\n  /** Switch the shown floor (2D). Warns + no-ops on single-floor charts. */\n  setFloor(floorId: string): void;\n  /** Toggle colorblind-safe rendering at runtime (see the `colorblindSafe` prop). */\n  setColorblindSafe(on: boolean): void;\n  /** Zoom in one step (same increment as the wheel/pinch gesture). */\n  zoomIn(): void;\n  /** Zoom out one step. */\n  zoomOut(): void;\n  /** Reset the camera so the whole chart fits the container. */\n  zoomToFit(): void;\n}\n\nexport interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * React wrapper around the framework-agnostic `@seatlayer/js` SDK.\n *\n * The underlying canvas is created once and torn down on unmount. Callback props\n * (`onSelectionChange`, `onHold`, `onError`, `onDeckTap`, `onHint`) may change\n * freely between renders without re-mounting the canvas — only `event`,\n * `apiBase`, `maxSelection`, `publicKey`, `locale`, `currency`, and\n * `colorblindSafe` trigger a rebuild. (`messages` is read once per mount;\n * changing it alone does not re-apply.)\n */\nexport const SeatingChart = forwardRef<SeatingChartHandle, SeatingChartProps>(\n  function SeatingChart(props, ref) {\n    const { className, style, event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe } = props;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const chartRef = useRef<CoreSeatingChart | null>(null);\n\n    // Always call the latest callbacks without rebuilding the chart.\n    const callbacks = useRef(props);\n    callbacks.current = props;\n\n    useEffect(() => {\n      const el = containerRef.current;\n      if (!el) return;\n\n      const chart = new CoreSeatingChart({\n        container: el,\n        event,\n        apiBase,\n        maxSelection,\n        publicKey,\n        locale,\n        currency,\n        colorblindSafe,\n        messages: callbacks.current.messages,\n        onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),\n        onHold: (result) => callbacks.current.onHold?.(result),\n        onHoldExpired: () => callbacks.current.onHoldExpired?.(),\n        onGAClick: (area) => callbacks.current.onGAClick?.(area),\n        onError: (err) => callbacks.current.onError?.(err),\n        onDeckTap: (floorId) => callbacks.current.onDeckTap?.(floorId),\n        onHint: (message) => callbacks.current.onHint?.(message),\n        seatTooltip: props.seatTooltip,\n        onSeatHover: (details) => callbacks.current.onSeatHover?.(details),\n      });\n      chartRef.current = chart;\n      void chart.render();\n\n      return () => {\n        chart.destroy();\n        chartRef.current = null;\n      };\n      // Rebuild only when the identity of the chart changes.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe]);\n\n    useImperativeHandle(\n      ref,\n      (): SeatingChartHandle => ({\n        hold: (options) => chartRef.current?.hold(options) ?? Promise.resolve(null),\n        getGAAreas: () => chartRef.current?.getGAAreas() ?? [],\n        holdGA: (areaId, qty, options) => chartRef.current?.holdGA(areaId, qty, options) ?? Promise.resolve(null),\n        bestAvailable: (qty, categoryKey) =>\n          chartRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),\n        release: () => chartRef.current?.release() ?? Promise.resolve(),\n        getSelection: () => chartRef.current?.getSelection() ?? [],\n        setSeatTier: (seatId, tierId) => chartRef.current?.setSeatTier(seatId, tierId),\n        getFloors: () => chartRef.current?.getFloors() ?? [],\n        setFloor: (floorId) => chartRef.current?.setFloor(floorId),\n        setColorblindSafe: (on) => chartRef.current?.setColorblindSafe(on),\n        zoomIn: () => chartRef.current?.zoomIn(),\n        zoomOut: () => chartRef.current?.zoomOut(),\n        zoomToFit: () => chartRef.current?.zoomToFit(),\n      }),\n      [],\n    );\n\n    return <div ref={containerRef} className={className} style={style} />;\n  },\n);\n","import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react';\nimport {\n  EmbeddedDesigner as CoreEmbeddedDesigner,\n  type EmbeddedDesignerMessage,\n} from '@seatlayer/js';\n\nexport type { EmbeddedDesignerMessage } from '@seatlayer/js';\n\nexport interface EmbeddedDesignerHandle {\n  /** Recreate the iframe with a newly-minted session URL. */\n  setDesignerUrl(designerUrl: string): void;\n  /** The currently mounted iframe, if any. */\n  getIframe(): HTMLIFrameElement | null;\n}\n\nexport interface EmbeddedDesignerProps {\n  /** Short-lived `designerUrl` returned by your backend. Never pass an `sk_` key. */\n  designerUrl: string;\n  expectedChartId?: string;\n  expectedWorkspaceId?: string;\n  title?: string;\n  className?: string;\n  style?: CSSProperties;\n  iframeClassName?: string;\n  iframeStyle?: Partial<CSSStyleDeclaration>;\n  allow?: string;\n  referrerPolicy?: ReferrerPolicy;\n  onReady?: (message: EmbeddedDesignerMessage) => void;\n  onSaved?: (message: EmbeddedDesignerMessage) => void;\n  onPublished?: (message: EmbeddedDesignerMessage) => void;\n  onClose?: (message: EmbeddedDesignerMessage) => void;\n  onError?: (message: EmbeddedDesignerMessage) => void;\n}\n\n/**\n * Native-feeling React host for the secure SeatLayer Designer iframe.\n * A new `designerUrl` always recreates the iframe, so a new fragment token can\n * never retain state from an earlier chart session.\n */\nexport const EmbeddedDesigner = forwardRef<EmbeddedDesignerHandle, EmbeddedDesignerProps>(\n  function EmbeddedDesigner(props, ref) {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const designerRef = useRef<CoreEmbeddedDesigner | null>(null);\n    const callbacks = useRef(props);\n    callbacks.current = props;\n\n    useEffect(() => {\n      const container = containerRef.current;\n      if (!container) return;\n      const designer = new CoreEmbeddedDesigner({\n        designerUrl: props.designerUrl,\n        container,\n        expectedChartId: props.expectedChartId,\n        expectedWorkspaceId: props.expectedWorkspaceId,\n        title: props.title,\n        className: props.iframeClassName,\n        style: props.iframeStyle,\n        allow: props.allow,\n        referrerPolicy: props.referrerPolicy,\n        onReady: (message) => callbacks.current.onReady?.(message),\n        onSaved: (message) => callbacks.current.onSaved?.(message),\n        onPublished: (message) => callbacks.current.onPublished?.(message),\n        onClose: (message) => callbacks.current.onClose?.(message),\n        onError: (message) => callbacks.current.onError?.(message),\n      });\n      designer.mount();\n      designerRef.current = designer;\n      return () => {\n        designer.destroy();\n        designerRef.current = null;\n      };\n      // Session/chart identity changes must recreate the iframe. Callback changes are\n      // picked up from the ref without reloading an in-progress Designer session.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [props.designerUrl, props.expectedChartId, props.expectedWorkspaceId, props.title, props.iframeClassName, props.iframeStyle, props.allow, props.referrerPolicy]);\n\n    useImperativeHandle(ref, () => ({\n      setDesignerUrl: (designerUrl) => { designerRef.current?.setDesignerUrl(designerUrl); },\n      getIframe: () => designerRef.current?.getIframe() ?? null,\n    }), []);\n\n    return <div ref={containerRef} className={props.className} style={props.style} />;\n  },\n);\n","import {\n  forwardRef,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  type CSSProperties,\n} from 'react';\nimport {\n  SeatPicker as CoreSeatPicker,\n  type SeatPickerOptions,\n  type SeatPickerTheme,\n  type SelectedSeat,\n  type HoldResult,\n} from '@seatlayer/js';\n\nexport type { SeatPickerOptions, SeatPickerTheme } from '@seatlayer/js';\n\n/** Imperative handle for the full-experience picker widget. */\nexport interface SeatPickerHandle {\n  /** Current selection with resolved prices. */\n  getSelection(): SelectedSeat[];\n  /** Server-side best seats + hold, reflected in the widget tray. */\n  bestAvailable(qty: number, categoryKey?: string): Promise<HoldResult | null>;\n  /** Release the current hold (if any) and reset the tray. */\n  release(): Promise<void>;\n}\n\nexport interface SeatPickerProps extends Omit<SeatPickerOptions, 'container'> {\n  className?: string;\n  style?: CSSProperties;\n}\n\n/**\n * React wrapper around the full SeatPicker widget (header · live price panel ·\n * tray · GA · hold countdown · toasts). The widget is container-adaptive: give\n * the wrapping div a size and it lays itself out for that box (side panel wide,\n * bottom sheet narrow). For the one-call modal, use `SeatPicker.open()` from\n * `@seatlayer/js` directly.\n */\nexport const SeatPicker = forwardRef<SeatPickerHandle, SeatPickerProps>(\n  function SeatPicker(props, ref) {\n    const { className, style, event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe, holdTtlMs } = props;\n\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const pickerRef = useRef<CoreSeatPicker | null>(null);\n\n    // Always call the latest callbacks without rebuilding the widget.\n    const callbacks = useRef(props);\n    callbacks.current = props;\n\n    useEffect(() => {\n      const el = containerRef.current;\n      if (!el) return;\n\n      const picker = new CoreSeatPicker({\n        container: el,\n        event,\n        apiBase,\n        maxSelection,\n        publicKey,\n        locale,\n        currency,\n        colorblindSafe,\n        holdTtlMs,\n        theme: callbacks.current.theme,\n        messages: callbacks.current.messages,\n        onCheckout: (hold, seats) => callbacks.current.onCheckout?.(hold, seats),\n        onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),\n        onHoldExpired: () => callbacks.current.onHoldExpired?.(),\n        onError: (err) => callbacks.current.onError?.(err),\n      });\n      pickerRef.current = picker;\n      void picker.render();\n\n      return () => {\n        picker.destroy();\n        pickerRef.current = null;\n      };\n      // Rebuild only when the identity of the event/config changes.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [event, apiBase, maxSelection, publicKey, locale, currency, colorblindSafe, holdTtlMs]);\n\n    useImperativeHandle(\n      ref,\n      (): SeatPickerHandle => ({\n        getSelection: () => pickerRef.current?.getSelection() ?? [],\n        bestAvailable: (qty, categoryKey) => pickerRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),\n        release: () => pickerRef.current?.release() ?? Promise.resolve(),\n      }),\n      [],\n    );\n\n    return <div ref={containerRef} className={className} style={style} />;\n  },\n);\n"],"mappings":"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","names":["SeatingChart","forwardRef","useEffect","useImperativeHandle","useRef","jsx","EmbeddedDesigner","forwardRef","useEffect","useImperativeHandle","useRef","jsx","SeatPicker"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seatlayer/react",
-  "version": "0.4.1",
+  "version": "0.6.0",
   "description": "React component for the SeatLayer embed SDK — render an interactive seat picker and hold seats.",
   "license": "MIT",
   "homepage": "https://docs.seatlayer.io",
@@ -35,7 +35,7 @@
     "ticketing"
   ],
   "dependencies": {
-    "@seatlayer/js": "^0.4.1"
+    "@seatlayer/js": "^0.6.0"
   },
   "peerDependencies": {
     "react": ">=17.0.0"