@seatlayer/react 0.1.0

package/README.md

@@ -0,0 +1,62 @@
+# @seatlayer/react
+
+React component for the [SeatLayer](https://seatlayer.io) embed SDK. Render an
+interactive seat map, let buyers select and **hold** seats in the browser, then
+**book** them from your server. Full docs: <https://docs.seatlayer.io>
+
+```bash
+npm install @seatlayer/react
+```
+
+## Usage
+
+```tsx
+import { useRef } from 'react';
+import { SeatingChart, type SeatingChartHandle } from '@seatlayer/react';
+
+export function Checkout() {
+  const chart = useRef<SeatingChartHandle>(null);
+
+  return (
+    <SeatingChart
+      ref={chart}
+      event="ev_9f3a"
+      style={{ width: '100%', height: 520 }}
+      onSelectionChange={(seats) => console.log('selected', seats)}
+      onHold={({ holdId }) => bookOnYourServer(holdId)}
+    />
+  );
+}
+```
+
+Drive it imperatively through the ref:
+
+```tsx
+const hold = await chart.current?.hold();              // hold the selection (null on conflict)
+const best = await chart.current?.bestAvailable(4);    // auto-pick 4 seats and hold them
+await chart.current?.release();                        // release the current hold
+```
+
+## Props
+
+Extends the vanilla SDK options minus `container` (the component owns its own mount).
+
+| Prop | Type | Notes |
+| --- | --- | --- |
+| `event` | `string` | **Required.** The event key, e.g. `ev_9f3a`. |
+| `apiBase` | `string?` | API origin. Defaults to the SeatLayer production API. |
+| `maxSelection` | `number?` | Max seats selectable at once (default 10). |
+| `onSelectionChange` | `(seats) => void` | Fires when the selection changes. |
+| `onHold` | `(result) => void` | Fires when seats are held; hand `holdId` to your server. |
+| `onError` | `(err) => void` | Fires on errors. |
+| `className` / `style` | — | Applied to the container element. |
+
+Changing a callback prop does **not** rebuild the canvas; only `event`, `apiBase`,
+`maxSelection`, and `publicKey` do.
+
+## The model
+
+The browser **holds**; your **server books** with a secret key — a browser never
+books directly. See the [integration guide](https://docs.seatlayer.io/getting-started/how-it-works/).
+
+Built on [`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js).

package/dist/index.cjs

@@ -0,0 +1,75 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SeatingChart: () => SeatingChart
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/SeatingChart.tsx
+var import_react = require("react");
+var import_js = require("@seatlayer/js");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SeatingChart = (0, import_react.forwardRef)(
+  function SeatingChart2(props, ref) {
+    const { className, style, event, apiBase, maxSelection, publicKey } = props;
+    const containerRef = (0, import_react.useRef)(null);
+    const chartRef = (0, import_react.useRef)(null);
+    const callbacks = (0, import_react.useRef)(props);
+    callbacks.current = props;
+    (0, import_react.useEffect)(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const chart = new import_js.SeatingChart({
+        container: el,
+        event,
+        apiBase,
+        maxSelection,
+        publicKey,
+        onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),
+        onHold: (result) => callbacks.current.onHold?.(result),
+        onError: (err) => callbacks.current.onError?.(err)
+      });
+      chartRef.current = chart;
+      void chart.render();
+      return () => {
+        chart.destroy();
+        chartRef.current = null;
+      };
+    }, [event, apiBase, maxSelection, publicKey]);
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        hold: () => chartRef.current?.hold() ?? Promise.resolve(null),
+        bestAvailable: (qty, categoryKey) => chartRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),
+        release: () => chartRef.current?.release() ?? Promise.resolve(),
+        getSelection: () => chartRef.current?.getSelection() ?? []
+      }),
+      []
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: containerRef, className, style });
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SeatingChart
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/SeatingChart.tsx"],"sourcesContent":["/**\n * @seatlayer/react — the React wrapper for the SeatLayer embed SDK.\n */\nexport { SeatingChart } from './SeatingChart';\nexport type {\n  SeatingChartProps,\n  SeatingChartHandle,\n  SelectedSeat,\n  HoldResult,\n  BestAvailableResult,\n} from './SeatingChart';\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} from '@seatlayer/js';\n\nexport type { SelectedSeat, HoldResult, BestAvailableResult } 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(): 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\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`) may change freely between renders\n * without re-mounting the canvas — only `event`, `apiBase`, `maxSelection`, and\n * `publicKey` trigger a rebuild.\n */\nexport const SeatingChart = forwardRef<SeatingChartHandle, SeatingChartProps>(\n  function SeatingChart(props, ref) {\n    const { className, style, event, apiBase, maxSelection, publicKey } = 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        onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),\n        onHold: (result) => callbacks.current.onHold?.(result),\n        onError: (err) => callbacks.current.onError?.(err),\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]);\n\n    useImperativeHandle(\n      ref,\n      (): SeatingChartHandle => ({\n        hold: () => chartRef.current?.hold() ?? 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      }),\n      [],\n    );\n\n    return <div ref={containerRef} className={className} style={style} />;\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAMO;AACP,gBAMO;AA6EI;AAhDJ,IAAM,mBAAe;AAAA,EAC1B,SAASA,cAAa,OAAO,KAAK;AAChC,UAAM,EAAE,WAAW,OAAO,OAAO,SAAS,cAAc,UAAU,IAAI;AAEtE,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,mBAAmB,CAAC,UAAU,UAAU,QAAQ,oBAAoB,KAAK;AAAA,QACzE,QAAQ,CAAC,WAAW,UAAU,QAAQ,SAAS,MAAM;AAAA,QACrD,SAAS,CAAC,QAAQ,UAAU,QAAQ,UAAU,GAAG;AAAA,MACnD,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,SAAS,CAAC;AAE5C;AAAA,MACE;AAAA,MACA,OAA2B;AAAA,QACzB,MAAM,MAAM,SAAS,SAAS,KAAK,KAAK,QAAQ,QAAQ,IAAI;AAAA,QAC5D,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,MAC3D;AAAA,MACA,CAAC;AAAA,IACH;AAEA,WAAO,4CAAC,SAAI,KAAK,cAAc,WAAsB,OAAc;AAAA,EACrE;AACF;","names":["SeatingChart","CoreSeatingChart"]}

package/dist/index.d.cts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { SeatingChartOptions, HoldResult, BestAvailableResult, SelectedSeat } from '@seatlayer/js';
+export { BestAvailableResult, HoldResult, SelectedSeat } from '@seatlayer/js';
+
+/** Imperative handle exposed via `ref` — call these to drive the picker from your app. */
+interface SeatingChartHandle {
+    /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */
+    hold(): Promise<HoldResult | null>;
+    /** Ask the server for the `qty` best free seats and hold them atomically. */
+    bestAvailable(qty: number, categoryKey?: string): Promise<BestAvailableResult | null>;
+    /** Release the current hold (if any). */
+    release(): Promise<void>;
+    /** The current selection, with prices resolved from the chart categories. */
+    getSelection(): SelectedSeat[];
+}
+interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * React wrapper around the framework-agnostic `@seatlayer/js` SDK.
+ *
+ * The underlying canvas is created once and torn down on unmount. Callback props
+ * (`onSelectionChange`, `onHold`, `onError`) may change freely between renders
+ * without re-mounting the canvas — only `event`, `apiBase`, `maxSelection`, and
+ * `publicKey` trigger a rebuild.
+ */
+declare const SeatingChart: react.ForwardRefExoticComponent<SeatingChartProps & react.RefAttributes<SeatingChartHandle>>;
+
+export { SeatingChart, type SeatingChartHandle, type SeatingChartProps };

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { SeatingChartOptions, HoldResult, BestAvailableResult, SelectedSeat } from '@seatlayer/js';
+export { BestAvailableResult, HoldResult, SelectedSeat } from '@seatlayer/js';
+
+/** Imperative handle exposed via `ref` — call these to drive the picker from your app. */
+interface SeatingChartHandle {
+    /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */
+    hold(): Promise<HoldResult | null>;
+    /** Ask the server for the `qty` best free seats and hold them atomically. */
+    bestAvailable(qty: number, categoryKey?: string): Promise<BestAvailableResult | null>;
+    /** Release the current hold (if any). */
+    release(): Promise<void>;
+    /** The current selection, with prices resolved from the chart categories. */
+    getSelection(): SelectedSeat[];
+}
+interface SeatingChartProps extends Omit<SeatingChartOptions, 'container'> {
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * React wrapper around the framework-agnostic `@seatlayer/js` SDK.
+ *
+ * The underlying canvas is created once and torn down on unmount. Callback props
+ * (`onSelectionChange`, `onHold`, `onError`) may change freely between renders
+ * without re-mounting the canvas — only `event`, `apiBase`, `maxSelection`, and
+ * `publicKey` trigger a rebuild.
+ */
+declare const SeatingChart: react.ForwardRefExoticComponent<SeatingChartProps & react.RefAttributes<SeatingChartHandle>>;
+
+export { SeatingChart, type SeatingChartHandle, type SeatingChartProps };

package/dist/index.js

@@ -0,0 +1,55 @@
+// src/SeatingChart.tsx
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef
+} from "react";
+import {
+  SeatingChart as CoreSeatingChart
+} from "@seatlayer/js";
+import { jsx } from "react/jsx-runtime";
+var SeatingChart = forwardRef(
+  function SeatingChart2(props, ref) {
+    const { className, style, event, apiBase, maxSelection, publicKey } = props;
+    const containerRef = useRef(null);
+    const chartRef = useRef(null);
+    const callbacks = useRef(props);
+    callbacks.current = props;
+    useEffect(() => {
+      const el = containerRef.current;
+      if (!el) return;
+      const chart = new CoreSeatingChart({
+        container: el,
+        event,
+        apiBase,
+        maxSelection,
+        publicKey,
+        onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),
+        onHold: (result) => callbacks.current.onHold?.(result),
+        onError: (err) => callbacks.current.onError?.(err)
+      });
+      chartRef.current = chart;
+      void chart.render();
+      return () => {
+        chart.destroy();
+        chartRef.current = null;
+      };
+    }, [event, apiBase, maxSelection, publicKey]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        hold: () => chartRef.current?.hold() ?? Promise.resolve(null),
+        bestAvailable: (qty, categoryKey) => chartRef.current?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),
+        release: () => chartRef.current?.release() ?? Promise.resolve(),
+        getSelection: () => chartRef.current?.getSelection() ?? []
+      }),
+      []
+    );
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, className, style });
+  }
+);
+export {
+  SeatingChart
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SeatingChart.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} from '@seatlayer/js';\n\nexport type { SelectedSeat, HoldResult, BestAvailableResult } 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(): 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\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`) may change freely between renders\n * without re-mounting the canvas — only `event`, `apiBase`, `maxSelection`, and\n * `publicKey` trigger a rebuild.\n */\nexport const SeatingChart = forwardRef<SeatingChartHandle, SeatingChartProps>(\n  function SeatingChart(props, ref) {\n    const { className, style, event, apiBase, maxSelection, publicKey } = 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        onSelectionChange: (seats) => callbacks.current.onSelectionChange?.(seats),\n        onHold: (result) => callbacks.current.onHold?.(result),\n        onError: (err) => callbacks.current.onError?.(err),\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]);\n\n    useImperativeHandle(\n      ref,\n      (): SeatingChartHandle => ({\n        hold: () => chartRef.current?.hold() ?? 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      }),\n      [],\n    );\n\n    return <div ref={containerRef} className={className} style={style} />;\n  },\n);\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP;AAAA,EACE,gBAAgB;AAAA,OAKX;AA6EI;AAhDJ,IAAM,eAAe;AAAA,EAC1B,SAASA,cAAa,OAAO,KAAK;AAChC,UAAM,EAAE,WAAW,OAAO,OAAO,SAAS,cAAc,UAAU,IAAI;AAEtE,UAAM,eAAe,OAA8B,IAAI;AACvD,UAAM,WAAW,OAAgC,IAAI;AAGrD,UAAM,YAAY,OAAO,KAAK;AAC9B,cAAU,UAAU;AAEpB,cAAU,MAAM;AACd,YAAM,KAAK,aAAa;AACxB,UAAI,CAAC,GAAI;AAET,YAAM,QAAQ,IAAI,iBAAiB;AAAA,QACjC,WAAW;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,mBAAmB,CAAC,UAAU,UAAU,QAAQ,oBAAoB,KAAK;AAAA,QACzE,QAAQ,CAAC,WAAW,UAAU,QAAQ,SAAS,MAAM;AAAA,QACrD,SAAS,CAAC,QAAQ,UAAU,QAAQ,UAAU,GAAG;AAAA,MACnD,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,SAAS,CAAC;AAE5C;AAAA,MACE;AAAA,MACA,OAA2B;AAAA,QACzB,MAAM,MAAM,SAAS,SAAS,KAAK,KAAK,QAAQ,QAAQ,IAAI;AAAA,QAC5D,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,MAC3D;AAAA,MACA,CAAC;AAAA,IACH;AAEA,WAAO,oBAAC,SAAI,KAAK,cAAc,WAAsB,OAAc;AAAA,EACrE;AACF;","names":["SeatingChart"]}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@seatlayer/react",
+  "version": "0.1.0",
+  "description": "React component for the SeatLayer embed SDK — render an interactive seat picker and hold seats.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": ["dist"],
+  "sideEffects": false,
+  "keywords": ["seating", "seat-map", "seatlayer", "react", "ticketing"],
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@seatlayer/js": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.0"
+  }
+}