@seatlayer/vue 0.35.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 SeatLayer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,113 @@
+# @seatlayer/vue
+
+[![npm](https://img.shields.io/npm/v/@seatlayer/vue)](https://www.npmjs.com/package/@seatlayer/vue)
+[![npm downloads](https://img.shields.io/npm/dm/@seatlayer/vue)](https://www.npmjs.com/package/@seatlayer/vue)
+[![Vue](https://img.shields.io/badge/Vue-%E2%89%A53.3-42B883.svg)](https://vuejs.org/)
+[![License: MIT](https://img.shields.io/badge/license-MIT-111827.svg)](../../LICENSE)
+
+The official Vue 3 components for SeatLayer reserved seating. Render an
+interactive chart, hold inventory in the browser, and complete the booking from
+your trusted server.
+
+[Package on npm](https://www.npmjs.com/package/@seatlayer/vue) ·
+[SeatPicker docs](https://docs.seatlayer.io/buyer-sdk/seat-picker/) ·
+[Live demo](https://app.seatlayer.io/demo/play) ·
+[Website](https://seatlayer.io/developers/)
+
+## Install
+
+```bash
+npm install @seatlayer/vue
+```
+
+Requires Vue 3.3 or newer. Components are shipped as render functions, so you
+need no Vue compiler plugin to consume this package.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { SeatingChart, type SeatingChartExposed, type SelectedSeat } from '@seatlayer/vue';
+
+const chart = ref<SeatingChartExposed | null>(null);
+
+function onSelectionChange(seats: SelectedSeat[]) {
+  console.log('selected', seats);
+}
+
+async function checkout() {
+  const held = await chart.value?.hold();
+  if (held) await bookOnYourServer(held.holdId);
+}
+</script>
+
+<template>
+  <SeatingChart
+    ref="chart"
+    event="ev_9f3a"
+    style="width: 100%; height: 520px"
+    @selection-change="onSelectionChange"
+    @hold="({ holdId }) => bookOnYourServer(holdId)"
+  />
+  <button @click="checkout">Continue</button>
+</template>
+```
+
+## Props
+
+| Prop | Type | Notes |
+| --- | --- | --- |
+| `event` | `string` | **Required.** Changing it rebuilds the chart. |
+| `apiBase` | `string` | Defaults to the public API. |
+| `maxSelection` | `number` | Cap on how many seats a buyer may select. |
+| `publicKey` | `string` | Publishable key, when your integration uses one. |
+| `locale` | `string` | BCP-47 locale for built-in copy. |
+| `currency` | `string` | ISO currency for price formatting. |
+| `colorblindSafe` | `boolean` | Render colorblind-safe seat glyphs. |
+| `seatTooltip` | `boolean` | Set `false` to draw your own popover from `@seat-hover`. |
+| `messages` | `object` | Copy overrides. Read once per rebuild. |
+
+Only `event`, `apiBase`, `maxSelection`, `publicKey`, `locale`, `currency` and
+`colorblindSafe` rebuild the canvas. Everything else is read live, so a parent
+re-render never destroys the chart mid-selection.
+
+## Events
+
+| Event | Payload |
+| --- | --- |
+| `@selection-change` | `SelectedSeat[]` |
+| `@hold` | `HoldResult` |
+| `@hold-restored` | `HoldResult` |
+| `@hold-expired` | — |
+| `@ga-click` | `GAAreaAvailability` |
+| `@error` | `unknown` |
+| `@deck-tap` | `string` (floor id) |
+| `@hint` | `string \| null` — `null` clears the hint |
+| `@seat-hover` | `SeatHoverDetails \| null` — `null` when the pointer leaves |
+
+## Imperative API
+
+Everything on the template ref, typed as `SeatingChartExposed`:
+
+`hold` · `resumeHold` · `getCurrentHold` · `getGAAreas` · `holdGA` ·
+`bestAvailable` · `release` · `releaseLabels` · `getSelection` · `setSeatTier` ·
+`getFloors` · `setFloor` · `setColorblindSafe` · `zoomIn` · `zoomOut` ·
+`zoomToFit`
+
+## Also exported
+
+- `SeatPickerWidget` — the framework-agnostic one-call modal (`SeatPickerWidget.open()`).
+- `attachPickerFrame` — host-side iframe helper; grows on `seatlayer:height` and
+  pins on `seatlayer:fullscreen`.
+
+## Related
+
+- [`@seatlayer/react`](https://www.npmjs.com/package/@seatlayer/react) — React components
+- [`@seatlayer/angular`](https://www.npmjs.com/package/@seatlayer/angular) — Angular component
+- [`@seatlayer/js`](https://www.npmjs.com/package/@seatlayer/js) — framework-agnostic core
+- [Server SDKs](https://docs.seatlayer.io/server-sdk/install/) — Node.js, Python, PHP, Java, Go, Ruby, .NET
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,171 @@
+"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, {
+  SeatPickerWidget: () => import_js2.SeatPicker,
+  SeatingChart: () => SeatingChart,
+  attachPickerFrame: () => import_js3.attachPickerFrame
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/SeatingChart.ts
+var import_vue = require("vue");
+var import_js = require("@seatlayer/js");
+var SeatingChart = (0, import_vue.defineComponent)({
+  name: "SeatLayerSeatingChart",
+  props: {
+    /** Event key to render. Changing it rebuilds the chart. */
+    event: { type: String, required: true },
+    /** API base URL. Defaults to the public API. */
+    apiBase: { type: String, default: void 0 },
+    /** Cap on how many seats a buyer may select. */
+    maxSelection: { type: Number, default: void 0 },
+    /** Publishable key, when your integration uses one. */
+    publicKey: { type: String, default: void 0 },
+    /** BCP-47 locale for built-in copy. */
+    locale: { type: String, default: void 0 },
+    /** ISO currency for price formatting. */
+    currency: { type: String, default: void 0 },
+    /** Render with colorblind-safe seat glyphs. */
+    colorblindSafe: { type: Boolean, default: void 0 },
+    /** Copy overrides, read once per mount. */
+    messages: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Show the built-in seat tooltip. Set false to draw your own popover from
+     * the `seat-hover` event.
+     */
+    seatTooltip: { type: Boolean, default: void 0 }
+  },
+  emits: {
+    /** The buyer's selection changed. */
+    "selection-change": (_seats) => true,
+    /** A hold succeeded. */
+    hold: (_result) => true,
+    /** A previous hold was restored on mount. */
+    "hold-restored": (_result) => true,
+    /** The active hold lapsed. */
+    "hold-expired": () => true,
+    /** A GA area was clicked. */
+    "ga-click": (_area) => true,
+    /** Something failed — a network error, a rejected hold. */
+    error: (_error) => true,
+    /** A floor deck was tapped in the 3D view. */
+    "deck-tap": (_floorId) => true,
+    /** A transient hint worth showing the buyer, or `null` to clear it. */
+    hint: (_message) => true,
+    /** The pointer moved onto a seat, or off one (`null`). */
+    "seat-hover": (_details) => true
+  },
+  setup(props, { emit, expose }) {
+    const container = (0, import_vue.ref)(null);
+    const chart = (0, import_vue.shallowRef)(null);
+    const destroy = () => {
+      chart.value?.destroy();
+      chart.value = null;
+    };
+    const build = () => {
+      const element = container.value;
+      if (!element) return;
+      destroy();
+      const onSelectionChange = (seats) => emit("selection-change", seats);
+      const onHold = (result) => emit("hold", result);
+      const onHoldRestored = (result) => emit("hold-restored", result);
+      const onHoldExpired = () => emit("hold-expired");
+      const onGAClick = (area) => emit("ga-click", area);
+      const onError = (error) => emit("error", error);
+      const onDeckTap = (floorId) => emit("deck-tap", floorId);
+      const onHint = (message) => emit("hint", message);
+      const onSeatHover = (details) => emit("seat-hover", details);
+      const instance = new import_js.SeatingChart({
+        container: element,
+        event: props.event,
+        apiBase: props.apiBase,
+        maxSelection: props.maxSelection,
+        publicKey: props.publicKey,
+        locale: props.locale,
+        currency: props.currency,
+        colorblindSafe: props.colorblindSafe,
+        messages: props.messages,
+        seatTooltip: props.seatTooltip,
+        onSelectionChange,
+        onHold,
+        onHoldRestored,
+        onHoldExpired,
+        onGAClick,
+        onError,
+        onDeckTap,
+        onHint,
+        onSeatHover
+      });
+      chart.value = instance;
+      void instance.render();
+    };
+    (0, import_vue.watch)(
+      () => [
+        container.value,
+        props.event,
+        props.apiBase,
+        props.maxSelection,
+        props.publicKey,
+        props.locale,
+        props.currency,
+        props.colorblindSafe
+      ],
+      build,
+      { immediate: true, flush: "post" }
+    );
+    (0, import_vue.onBeforeUnmount)(destroy);
+    const exposed = {
+      hold: (options) => chart.value?.hold(options) ?? Promise.resolve(null),
+      resumeHold: (holdId) => chart.value?.resumeHold(holdId) ?? Promise.resolve(null),
+      getCurrentHold: () => chart.value?.getCurrentHold() ?? null,
+      getGAAreas: () => chart.value?.getGAAreas() ?? [],
+      holdGA: (areaId, qty, options) => chart.value?.holdGA(areaId, qty, options) ?? Promise.resolve(null),
+      bestAvailable: (qty, categoryKey) => chart.value?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),
+      release: () => chart.value?.release() ?? Promise.resolve(),
+      releaseLabels: (labels) => chart.value?.releaseLabels(labels) ?? Promise.resolve(false),
+      getSelection: () => chart.value?.getSelection() ?? [],
+      setSeatTier: (seatId, tierId) => chart.value?.setSeatTier(seatId, tierId),
+      getFloors: () => chart.value?.getFloors() ?? [],
+      setFloor: (floorId) => chart.value?.setFloor(floorId),
+      setColorblindSafe: (on) => chart.value?.setColorblindSafe(on),
+      zoomIn: () => chart.value?.zoomIn(),
+      zoomOut: () => chart.value?.zoomOut(),
+      zoomToFit: () => chart.value?.zoomToFit()
+    };
+    expose(exposed);
+    return () => (0, import_vue.h)("div", { ref: container });
+  }
+});
+
+// src/index.ts
+var import_js2 = require("@seatlayer/js");
+var import_js3 = require("@seatlayer/js");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SeatPickerWidget,
+  SeatingChart,
+  attachPickerFrame
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/SeatingChart.ts"],"sourcesContent":["/**\n * @seatlayer/vue — the Vue 3 wrapper for the SeatLayer embed SDK.\n *\n * Components are written as render functions rather than SFCs, so installing\n * this package needs no Vue compiler plugin.\n */\nexport { SeatingChart } from './SeatingChart';\nexport type { SeatingChartExposed } from './SeatingChart';\n\nexport type {\n  SelectedSeat,\n  HoldResult,\n  BestAvailableResult,\n  GAAreaAvailability,\n  HoldLineItem,\n  SeatHoverDetails,\n} from '@seatlayer/js';\n\n// The framework-agnostic widget class — for the one-call modal (SeatPickerWidget.open()).\nexport { SeatPicker as SeatPickerWidget } from '@seatlayer/js';\n\n// Host-side embed helper: grows the iframe on `seatlayer:height` and pins it on\n// `seatlayer:fullscreen`. Vue hosts depend on this package alone, so it has to be\n// reachable here rather than only from @seatlayer/js.\nexport { attachPickerFrame } from '@seatlayer/js';\n","import {\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  watch,\n  type PropType,\n  type Ref,\n} from 'vue';\nimport {\n  SeatingChart as CoreSeatingChart,\n  type SeatingChartOptions,\n  type SelectedSeat,\n  type HoldResult,\n  type BestAvailableResult,\n  type GAAreaAvailability,\n  type SeatHoverDetails,\n} from '@seatlayer/js';\n\n/**\n * What `ref=\"chart\"` gives you — call these to drive the picker from your app.\n *\n * Vue exposes these through `defineExpose`, so a template ref is typed as this\n * rather than as the raw component instance.\n */\nexport interface SeatingChartExposed {\n  /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */\n  hold(options?: { ttlMs?: number }): Promise<HoldResult | null>;\n  /** Restore an active hold by its opaque id. */\n  resumeHold(holdId: string): Promise<HoldResult | null>;\n  /** Current active hold known to the chart. */\n  getCurrentHold(): 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  /** Release some held labels while keeping the remainder active. */\n  releaseLabels(labels: string[]): Promise<boolean>;\n  /** The current selection, with prices resolved from the chart categories. */\n  getSelection(): SelectedSeat[];\n  /** Choose a ticket tier for a selected seat; `null` reverts to the default. */\n  setSeatTier(seatId: string, tierId: string | null): void;\n  /** Floors of a multi-floor chart. Empty before the first render. */\n  getFloors(): { id: string; name: string }[];\n  /** Switch the shown floor (2D). No-ops on single-floor charts. */\n  setFloor(floorId: string): void;\n  /** Toggle colorblind-safe rendering at runtime. */\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\n/**\n * Vue 3 wrapper around the framework-agnostic `@seatlayer/js` SDK.\n *\n * The canvas is created once and torn down on unmount. Only the props that\n * change the chart's identity — `event`, `apiBase`, `maxSelection`, `publicKey`,\n * `locale`, `currency`, `colorblindSafe` — trigger a rebuild; everything else is\n * read live, so a parent re-render never destroys the canvas mid-selection.\n *\n * Written as a render function rather than an SFC so the package builds with\n * plain TypeScript — a consumer needs no Vue compiler plugin to install it.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * import { ref } from 'vue';\n * import { SeatingChart, type SeatingChartExposed } from '@seatlayer/vue';\n *\n * const chart = ref<SeatingChartExposed | null>(null);\n * const checkout = async () => {\n *   const held = await chart.value?.hold();\n *   if (held) await pay(held.holdId);\n * };\n * </script>\n *\n * <template>\n *   <SeatingChart ref=\"chart\" event=\"summer-gala\" @selection-change=\"onChange\" />\n * </template>\n * ```\n */\nexport const SeatingChart = defineComponent({\n  name: 'SeatLayerSeatingChart',\n\n  props: {\n    /** Event key to render. Changing it rebuilds the chart. */\n    event: { type: String, required: true },\n    /** API base URL. Defaults to the public API. */\n    apiBase: { type: String, default: undefined },\n    /** Cap on how many seats a buyer may select. */\n    maxSelection: { type: Number, default: undefined },\n    /** Publishable key, when your integration uses one. */\n    publicKey: { type: String, default: undefined },\n    /** BCP-47 locale for built-in copy. */\n    locale: { type: String, default: undefined },\n    /** ISO currency for price formatting. */\n    currency: { type: String, default: undefined },\n    /** Render with colorblind-safe seat glyphs. */\n    colorblindSafe: { type: Boolean, default: undefined },\n    /** Copy overrides, read once per mount. */\n    messages: {\n      type: Object as PropType<SeatingChartOptions['messages']>,\n      default: undefined,\n    },\n    /**\n     * Show the built-in seat tooltip. Set false to draw your own popover from\n     * the `seat-hover` event.\n     */\n    seatTooltip: { type: Boolean, default: undefined },\n  },\n\n  emits: {\n    /** The buyer's selection changed. */\n    'selection-change': (_seats: SelectedSeat[]) => true,\n    /** A hold succeeded. */\n    hold: (_result: HoldResult) => true,\n    /** A previous hold was restored on mount. */\n    'hold-restored': (_result: HoldResult) => true,\n    /** The active hold lapsed. */\n    'hold-expired': () => true,\n    /** A GA area was clicked. */\n    'ga-click': (_area: GAAreaAvailability) => true,\n    /** Something failed — a network error, a rejected hold. */\n    error: (_error: unknown) => true,\n    /** A floor deck was tapped in the 3D view. */\n    'deck-tap': (_floorId: string) => true,\n    /** A transient hint worth showing the buyer, or `null` to clear it. */\n    hint: (_message: string | null) => true,\n    /** The pointer moved onto a seat, or off one (`null`). */\n    'seat-hover': (_details: SeatHoverDetails | null) => true,\n  },\n\n  setup(props, { emit, expose }) {\n    const container: Ref<HTMLDivElement | null> = ref(null);\n    // shallowRef: the chart owns a canvas and a large scene graph, and making it\n    // deeply reactive would have Vue walk all of it on every touch.\n    const chart = shallowRef<CoreSeatingChart | null>(null);\n\n    const destroy = () => {\n      chart.value?.destroy();\n      chart.value = null;\n    };\n\n    const build = () => {\n      const element = container.value;\n      if (!element) return;\n\n      destroy();\n\n      // Handlers are bound here rather than inline in the options literal.\n      // Inline, TypeScript has to resolve `emit`'s overloads while it is still\n      // contextually typing the literal against SeatingChartOptions, and it\n      // gives up — collapsing to the last emit signature. Naming them first\n      // separates the two inference problems, and reads better besides.\n      const onSelectionChange = (seats: SelectedSeat[]) => emit('selection-change', seats);\n      const onHold = (result: HoldResult) => emit('hold', result);\n      const onHoldRestored = (result: HoldResult) => emit('hold-restored', result);\n      const onHoldExpired = () => emit('hold-expired');\n      const onGAClick = (area: GAAreaAvailability) => emit('ga-click', area);\n      const onError = (error: unknown) => emit('error', error);\n      const onDeckTap = (floorId: string) => emit('deck-tap', floorId);\n      const onHint = (message: string | null) => emit('hint', message);\n      const onSeatHover = (details: SeatHoverDetails | null) => emit('seat-hover', details);\n\n      const instance = new CoreSeatingChart({\n        container: element,\n        event: props.event,\n        apiBase: props.apiBase,\n        maxSelection: props.maxSelection,\n        publicKey: props.publicKey,\n        locale: props.locale,\n        currency: props.currency,\n        colorblindSafe: props.colorblindSafe,\n        messages: props.messages,\n        seatTooltip: props.seatTooltip,\n        onSelectionChange,\n        onHold,\n        onHoldRestored,\n        onHoldExpired,\n        onGAClick,\n        onError,\n        onDeckTap,\n        onHint,\n        onSeatHover,\n      });\n\n      chart.value = instance;\n      void instance.render();\n    };\n\n    // `flush: 'post'` so the container element exists on the first run — a\n    // pre-flush watcher would fire before the DOM node is attached.\n    watch(\n      () => [\n        container.value,\n        props.event,\n        props.apiBase,\n        props.maxSelection,\n        props.publicKey,\n        props.locale,\n        props.currency,\n        props.colorblindSafe,\n      ],\n      build,\n      { immediate: true, flush: 'post' },\n    );\n\n    onBeforeUnmount(destroy);\n\n    const exposed: SeatingChartExposed = {\n      hold: (options) => chart.value?.hold(options) ?? Promise.resolve(null),\n      resumeHold: (holdId) => chart.value?.resumeHold(holdId) ?? Promise.resolve(null),\n      getCurrentHold: () => chart.value?.getCurrentHold() ?? null,\n      getGAAreas: () => chart.value?.getGAAreas() ?? [],\n      holdGA: (areaId, qty, options) => chart.value?.holdGA(areaId, qty, options) ?? Promise.resolve(null),\n      bestAvailable: (qty, categoryKey) =>\n        chart.value?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),\n      release: () => chart.value?.release() ?? Promise.resolve(),\n      releaseLabels: (labels) => chart.value?.releaseLabels(labels) ?? Promise.resolve(false),\n      getSelection: () => chart.value?.getSelection() ?? [],\n      setSeatTier: (seatId, tierId) => chart.value?.setSeatTier(seatId, tierId),\n      getFloors: () => chart.value?.getFloors() ?? [],\n      setFloor: (floorId) => chart.value?.setFloor(floorId),\n      setColorblindSafe: (on) => chart.value?.setColorblindSafe(on),\n      zoomIn: () => chart.value?.zoomIn(),\n      zoomOut: () => chart.value?.zoomOut(),\n      zoomToFit: () => chart.value?.zoomToFit(),\n    };\n    expose(exposed);\n\n    return () => h('div', { ref: container });\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,iBASO;AACP,gBAQO;AAwEA,IAAM,mBAAe,4BAAgB;AAAA,EAC1C,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA,IAEL,OAAO,EAAE,MAAM,QAAQ,UAAU,KAAK;AAAA;AAAA,IAEtC,SAAS,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA;AAAA,IAE5C,cAAc,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA;AAAA,IAEjD,WAAW,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA;AAAA,IAE9C,QAAQ,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA;AAAA,IAE3C,UAAU,EAAE,MAAM,QAAQ,SAAS,OAAU;AAAA;AAAA,IAE7C,gBAAgB,EAAE,MAAM,SAAS,SAAS,OAAU;AAAA;AAAA,IAEpD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACX;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAa,EAAE,MAAM,SAAS,SAAS,OAAU;AAAA,EACnD;AAAA,EAEA,OAAO;AAAA;AAAA,IAEL,oBAAoB,CAAC,WAA2B;AAAA;AAAA,IAEhD,MAAM,CAAC,YAAwB;AAAA;AAAA,IAE/B,iBAAiB,CAAC,YAAwB;AAAA;AAAA,IAE1C,gBAAgB,MAAM;AAAA;AAAA,IAEtB,YAAY,CAAC,UAA8B;AAAA;AAAA,IAE3C,OAAO,CAAC,WAAoB;AAAA;AAAA,IAE5B,YAAY,CAAC,aAAqB;AAAA;AAAA,IAElC,MAAM,CAAC,aAA4B;AAAA;AAAA,IAEnC,cAAc,CAAC,aAAsC;AAAA,EACvD;AAAA,EAEA,MAAM,OAAO,EAAE,MAAM,OAAO,GAAG;AAC7B,UAAM,gBAAwC,gBAAI,IAAI;AAGtD,UAAM,YAAQ,uBAAoC,IAAI;AAEtD,UAAM,UAAU,MAAM;AACpB,YAAM,OAAO,QAAQ;AACrB,YAAM,QAAQ;AAAA,IAChB;AAEA,UAAM,QAAQ,MAAM;AAClB,YAAM,UAAU,UAAU;AAC1B,UAAI,CAAC,QAAS;AAEd,cAAQ;AAOR,YAAM,oBAAoB,CAAC,UAA0B,KAAK,oBAAoB,KAAK;AACnF,YAAM,SAAS,CAAC,WAAuB,KAAK,QAAQ,MAAM;AAC1D,YAAM,iBAAiB,CAAC,WAAuB,KAAK,iBAAiB,MAAM;AAC3E,YAAM,gBAAgB,MAAM,KAAK,cAAc;AAC/C,YAAM,YAAY,CAAC,SAA6B,KAAK,YAAY,IAAI;AACrE,YAAM,UAAU,CAAC,UAAmB,KAAK,SAAS,KAAK;AACvD,YAAM,YAAY,CAAC,YAAoB,KAAK,YAAY,OAAO;AAC/D,YAAM,SAAS,CAAC,YAA2B,KAAK,QAAQ,OAAO;AAC/D,YAAM,cAAc,CAAC,YAAqC,KAAK,cAAc,OAAO;AAEpF,YAAM,WAAW,IAAI,UAAAA,aAAiB;AAAA,QACpC,WAAW;AAAA,QACX,OAAO,MAAM;AAAA,QACb,SAAS,MAAM;AAAA,QACf,cAAc,MAAM;AAAA,QACpB,WAAW,MAAM;AAAA,QACjB,QAAQ,MAAM;AAAA,QACd,UAAU,MAAM;AAAA,QAChB,gBAAgB,MAAM;AAAA,QACtB,UAAU,MAAM;AAAA,QAChB,aAAa,MAAM;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC;AAED,YAAM,QAAQ;AACd,WAAK,SAAS,OAAO;AAAA,IACvB;AAIA;AAAA,MACE,MAAM;AAAA,QACJ,UAAU;AAAA,QACV,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,MACA;AAAA,MACA,EAAE,WAAW,MAAM,OAAO,OAAO;AAAA,IACnC;AAEA,oCAAgB,OAAO;AAEvB,UAAM,UAA+B;AAAA,MACnC,MAAM,CAAC,YAAY,MAAM,OAAO,KAAK,OAAO,KAAK,QAAQ,QAAQ,IAAI;AAAA,MACrE,YAAY,CAAC,WAAW,MAAM,OAAO,WAAW,MAAM,KAAK,QAAQ,QAAQ,IAAI;AAAA,MAC/E,gBAAgB,MAAM,MAAM,OAAO,eAAe,KAAK;AAAA,MACvD,YAAY,MAAM,MAAM,OAAO,WAAW,KAAK,CAAC;AAAA,MAChD,QAAQ,CAAC,QAAQ,KAAK,YAAY,MAAM,OAAO,OAAO,QAAQ,KAAK,OAAO,KAAK,QAAQ,QAAQ,IAAI;AAAA,MACnG,eAAe,CAAC,KAAK,gBACnB,MAAM,OAAO,cAAc,KAAK,WAAW,KAAK,QAAQ,QAAQ,IAAI;AAAA,MACtE,SAAS,MAAM,MAAM,OAAO,QAAQ,KAAK,QAAQ,QAAQ;AAAA,MACzD,eAAe,CAAC,WAAW,MAAM,OAAO,cAAc,MAAM,KAAK,QAAQ,QAAQ,KAAK;AAAA,MACtF,cAAc,MAAM,MAAM,OAAO,aAAa,KAAK,CAAC;AAAA,MACpD,aAAa,CAAC,QAAQ,WAAW,MAAM,OAAO,YAAY,QAAQ,MAAM;AAAA,MACxE,WAAW,MAAM,MAAM,OAAO,UAAU,KAAK,CAAC;AAAA,MAC9C,UAAU,CAAC,YAAY,MAAM,OAAO,SAAS,OAAO;AAAA,MACpD,mBAAmB,CAAC,OAAO,MAAM,OAAO,kBAAkB,EAAE;AAAA,MAC5D,QAAQ,MAAM,MAAM,OAAO,OAAO;AAAA,MAClC,SAAS,MAAM,MAAM,OAAO,QAAQ;AAAA,MACpC,WAAW,MAAM,MAAM,OAAO,UAAU;AAAA,IAC1C;AACA,WAAO,OAAO;AAEd,WAAO,UAAM,cAAE,OAAO,EAAE,KAAK,UAAU,CAAC;AAAA,EAC1C;AACF,CAAC;;;AD9ND,IAAAC,aAA+C;AAK/C,IAAAA,aAAkC;","names":["CoreSeatingChart","import_js"]}

package/dist/index.d.cts

@@ -0,0 +1,224 @@
+import * as _seatlayer_core from '@seatlayer/core';
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { SeatingChartOptions, SelectedSeat, HoldResult, GAAreaAvailability, SeatHoverDetails, BestAvailableResult } from '@seatlayer/js';
+export { BestAvailableResult, GAAreaAvailability, HoldLineItem, HoldResult, SeatHoverDetails, SeatPicker as SeatPickerWidget, SelectedSeat, attachPickerFrame } from '@seatlayer/js';
+
+/**
+ * What `ref="chart"` gives you — call these to drive the picker from your app.
+ *
+ * Vue exposes these through `defineExpose`, so a template ref is typed as this
+ * rather than as the raw component instance.
+ */
+interface SeatingChartExposed {
+    /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */
+    hold(options?: {
+        ttlMs?: number;
+    }): Promise<HoldResult | null>;
+    /** Restore an active hold by its opaque id. */
+    resumeHold(holdId: string): Promise<HoldResult | null>;
+    /** Current active hold known to the chart. */
+    getCurrentHold(): HoldResult | null;
+    /** GA areas with live remaining capacity. */
+    getGAAreas(): GAAreaAvailability[];
+    /** Atomically hold a quantity from one GA area. */
+    holdGA(areaId: string, qty: number, options?: {
+        tierId?: string | null;
+        ttlMs?: number;
+    }): 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>;
+    /** Release some held labels while keeping the remainder active. */
+    releaseLabels(labels: string[]): Promise<boolean>;
+    /** The current selection, with prices resolved from the chart categories. */
+    getSelection(): SelectedSeat[];
+    /** Choose a ticket tier for a selected seat; `null` reverts to the default. */
+    setSeatTier(seatId: string, tierId: string | null): void;
+    /** Floors of a multi-floor chart. Empty before the first render. */
+    getFloors(): {
+        id: string;
+        name: string;
+    }[];
+    /** Switch the shown floor (2D). No-ops on single-floor charts. */
+    setFloor(floorId: string): void;
+    /** Toggle colorblind-safe rendering at runtime. */
+    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;
+}
+/**
+ * Vue 3 wrapper around the framework-agnostic `@seatlayer/js` SDK.
+ *
+ * The canvas is created once and torn down on unmount. Only the props that
+ * change the chart's identity — `event`, `apiBase`, `maxSelection`, `publicKey`,
+ * `locale`, `currency`, `colorblindSafe` — trigger a rebuild; everything else is
+ * read live, so a parent re-render never destroys the canvas mid-selection.
+ *
+ * Written as a render function rather than an SFC so the package builds with
+ * plain TypeScript — a consumer needs no Vue compiler plugin to install it.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { SeatingChart, type SeatingChartExposed } from '@seatlayer/vue';
+ *
+ * const chart = ref<SeatingChartExposed | null>(null);
+ * const checkout = async () => {
+ *   const held = await chart.value?.hold();
+ *   if (held) await pay(held.holdId);
+ * };
+ * </script>
+ *
+ * <template>
+ *   <SeatingChart ref="chart" event="summer-gala" @selection-change="onChange" />
+ * </template>
+ * ```
+ */
+declare const SeatingChart: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Event key to render. Changing it rebuilds the chart. */
+    event: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** API base URL. Defaults to the public API. */
+    apiBase: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Cap on how many seats a buyer may select. */
+    maxSelection: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** Publishable key, when your integration uses one. */
+    publicKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** BCP-47 locale for built-in copy. */
+    locale: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** ISO currency for price formatting. */
+    currency: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Render with colorblind-safe seat glyphs. */
+    colorblindSafe: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Copy overrides, read once per mount. */
+    messages: {
+        type: PropType<SeatingChartOptions["messages"]>;
+        default: undefined;
+    };
+    /**
+     * Show the built-in seat tooltip. Set false to draw your own popover from
+     * the `seat-hover` event.
+     */
+    seatTooltip: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    /** The buyer's selection changed. */
+    'selection-change': (_seats: SelectedSeat[]) => true;
+    /** A hold succeeded. */
+    hold: (_result: HoldResult) => true;
+    /** A previous hold was restored on mount. */
+    'hold-restored': (_result: HoldResult) => true;
+    /** The active hold lapsed. */
+    'hold-expired': () => true;
+    /** A GA area was clicked. */
+    'ga-click': (_area: GAAreaAvailability) => true;
+    /** Something failed — a network error, a rejected hold. */
+    error: (_error: unknown) => true;
+    /** A floor deck was tapped in the 3D view. */
+    'deck-tap': (_floorId: string) => true;
+    /** A transient hint worth showing the buyer, or `null` to clear it. */
+    hint: (_message: string | null) => true;
+    /** The pointer moved onto a seat, or off one (`null`). */
+    'seat-hover': (_details: SeatHoverDetails | null) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Event key to render. Changing it rebuilds the chart. */
+    event: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** API base URL. Defaults to the public API. */
+    apiBase: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Cap on how many seats a buyer may select. */
+    maxSelection: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** Publishable key, when your integration uses one. */
+    publicKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** BCP-47 locale for built-in copy. */
+    locale: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** ISO currency for price formatting. */
+    currency: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Render with colorblind-safe seat glyphs. */
+    colorblindSafe: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Copy overrides, read once per mount. */
+    messages: {
+        type: PropType<SeatingChartOptions["messages"]>;
+        default: undefined;
+    };
+    /**
+     * Show the built-in seat tooltip. Set false to draw your own popover from
+     * the `seat-hover` event.
+     */
+    seatTooltip: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onSelection-change"?: ((_seats: _seatlayer_core.PickerSeat[]) => any) | undefined;
+    onHold?: ((_result: HoldResult) => any) | undefined;
+    "onHold-restored"?: ((_result: HoldResult) => any) | undefined;
+    "onHold-expired"?: (() => any) | undefined;
+    "onGa-click"?: ((_area: GAAreaAvailability) => any) | undefined;
+    onError?: ((_error: unknown) => any) | undefined;
+    "onDeck-tap"?: ((_floorId: string) => any) | undefined;
+    onHint?: ((_message: string | null) => any) | undefined;
+    "onSeat-hover"?: ((_details: SeatHoverDetails | null) => any) | undefined;
+}>, {
+    messages: Record<string, string> | undefined;
+    apiBase: string;
+    maxSelection: number;
+    publicKey: string;
+    locale: string;
+    currency: string;
+    colorblindSafe: boolean;
+    seatTooltip: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { SeatingChart, type SeatingChartExposed };

package/dist/index.d.ts

@@ -0,0 +1,224 @@
+import * as _seatlayer_core from '@seatlayer/core';
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { SeatingChartOptions, SelectedSeat, HoldResult, GAAreaAvailability, SeatHoverDetails, BestAvailableResult } from '@seatlayer/js';
+export { BestAvailableResult, GAAreaAvailability, HoldLineItem, HoldResult, SeatHoverDetails, SeatPicker as SeatPickerWidget, SelectedSeat, attachPickerFrame } from '@seatlayer/js';
+
+/**
+ * What `ref="chart"` gives you — call these to drive the picker from your app.
+ *
+ * Vue exposes these through `defineExpose`, so a template ref is typed as this
+ * rather than as the raw component instance.
+ */
+interface SeatingChartExposed {
+    /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */
+    hold(options?: {
+        ttlMs?: number;
+    }): Promise<HoldResult | null>;
+    /** Restore an active hold by its opaque id. */
+    resumeHold(holdId: string): Promise<HoldResult | null>;
+    /** Current active hold known to the chart. */
+    getCurrentHold(): HoldResult | null;
+    /** GA areas with live remaining capacity. */
+    getGAAreas(): GAAreaAvailability[];
+    /** Atomically hold a quantity from one GA area. */
+    holdGA(areaId: string, qty: number, options?: {
+        tierId?: string | null;
+        ttlMs?: number;
+    }): 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>;
+    /** Release some held labels while keeping the remainder active. */
+    releaseLabels(labels: string[]): Promise<boolean>;
+    /** The current selection, with prices resolved from the chart categories. */
+    getSelection(): SelectedSeat[];
+    /** Choose a ticket tier for a selected seat; `null` reverts to the default. */
+    setSeatTier(seatId: string, tierId: string | null): void;
+    /** Floors of a multi-floor chart. Empty before the first render. */
+    getFloors(): {
+        id: string;
+        name: string;
+    }[];
+    /** Switch the shown floor (2D). No-ops on single-floor charts. */
+    setFloor(floorId: string): void;
+    /** Toggle colorblind-safe rendering at runtime. */
+    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;
+}
+/**
+ * Vue 3 wrapper around the framework-agnostic `@seatlayer/js` SDK.
+ *
+ * The canvas is created once and torn down on unmount. Only the props that
+ * change the chart's identity — `event`, `apiBase`, `maxSelection`, `publicKey`,
+ * `locale`, `currency`, `colorblindSafe` — trigger a rebuild; everything else is
+ * read live, so a parent re-render never destroys the canvas mid-selection.
+ *
+ * Written as a render function rather than an SFC so the package builds with
+ * plain TypeScript — a consumer needs no Vue compiler plugin to install it.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from 'vue';
+ * import { SeatingChart, type SeatingChartExposed } from '@seatlayer/vue';
+ *
+ * const chart = ref<SeatingChartExposed | null>(null);
+ * const checkout = async () => {
+ *   const held = await chart.value?.hold();
+ *   if (held) await pay(held.holdId);
+ * };
+ * </script>
+ *
+ * <template>
+ *   <SeatingChart ref="chart" event="summer-gala" @selection-change="onChange" />
+ * </template>
+ * ```
+ */
+declare const SeatingChart: vue.DefineComponent<vue.ExtractPropTypes<{
+    /** Event key to render. Changing it rebuilds the chart. */
+    event: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** API base URL. Defaults to the public API. */
+    apiBase: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Cap on how many seats a buyer may select. */
+    maxSelection: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** Publishable key, when your integration uses one. */
+    publicKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** BCP-47 locale for built-in copy. */
+    locale: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** ISO currency for price formatting. */
+    currency: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Render with colorblind-safe seat glyphs. */
+    colorblindSafe: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Copy overrides, read once per mount. */
+    messages: {
+        type: PropType<SeatingChartOptions["messages"]>;
+        default: undefined;
+    };
+    /**
+     * Show the built-in seat tooltip. Set false to draw your own popover from
+     * the `seat-hover` event.
+     */
+    seatTooltip: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    /** The buyer's selection changed. */
+    'selection-change': (_seats: SelectedSeat[]) => true;
+    /** A hold succeeded. */
+    hold: (_result: HoldResult) => true;
+    /** A previous hold was restored on mount. */
+    'hold-restored': (_result: HoldResult) => true;
+    /** The active hold lapsed. */
+    'hold-expired': () => true;
+    /** A GA area was clicked. */
+    'ga-click': (_area: GAAreaAvailability) => true;
+    /** Something failed — a network error, a rejected hold. */
+    error: (_error: unknown) => true;
+    /** A floor deck was tapped in the 3D view. */
+    'deck-tap': (_floorId: string) => true;
+    /** A transient hint worth showing the buyer, or `null` to clear it. */
+    hint: (_message: string | null) => true;
+    /** The pointer moved onto a seat, or off one (`null`). */
+    'seat-hover': (_details: SeatHoverDetails | null) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    /** Event key to render. Changing it rebuilds the chart. */
+    event: {
+        type: StringConstructor;
+        required: true;
+    };
+    /** API base URL. Defaults to the public API. */
+    apiBase: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Cap on how many seats a buyer may select. */
+    maxSelection: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    /** Publishable key, when your integration uses one. */
+    publicKey: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** BCP-47 locale for built-in copy. */
+    locale: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** ISO currency for price formatting. */
+    currency: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    /** Render with colorblind-safe seat glyphs. */
+    colorblindSafe: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Copy overrides, read once per mount. */
+    messages: {
+        type: PropType<SeatingChartOptions["messages"]>;
+        default: undefined;
+    };
+    /**
+     * Show the built-in seat tooltip. Set false to draw your own popover from
+     * the `seat-hover` event.
+     */
+    seatTooltip: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onSelection-change"?: ((_seats: _seatlayer_core.PickerSeat[]) => any) | undefined;
+    onHold?: ((_result: HoldResult) => any) | undefined;
+    "onHold-restored"?: ((_result: HoldResult) => any) | undefined;
+    "onHold-expired"?: (() => any) | undefined;
+    "onGa-click"?: ((_area: GAAreaAvailability) => any) | undefined;
+    onError?: ((_error: unknown) => any) | undefined;
+    "onDeck-tap"?: ((_floorId: string) => any) | undefined;
+    onHint?: ((_message: string | null) => any) | undefined;
+    "onSeat-hover"?: ((_details: SeatHoverDetails | null) => any) | undefined;
+}>, {
+    messages: Record<string, string> | undefined;
+    apiBase: string;
+    maxSelection: number;
+    publicKey: string;
+    locale: string;
+    currency: string;
+    colorblindSafe: boolean;
+    seatTooltip: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { SeatingChart, type SeatingChartExposed };

package/dist/index.js

@@ -0,0 +1,151 @@
+// src/SeatingChart.ts
+import {
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  watch
+} from "vue";
+import {
+  SeatingChart as CoreSeatingChart
+} from "@seatlayer/js";
+var SeatingChart = defineComponent({
+  name: "SeatLayerSeatingChart",
+  props: {
+    /** Event key to render. Changing it rebuilds the chart. */
+    event: { type: String, required: true },
+    /** API base URL. Defaults to the public API. */
+    apiBase: { type: String, default: void 0 },
+    /** Cap on how many seats a buyer may select. */
+    maxSelection: { type: Number, default: void 0 },
+    /** Publishable key, when your integration uses one. */
+    publicKey: { type: String, default: void 0 },
+    /** BCP-47 locale for built-in copy. */
+    locale: { type: String, default: void 0 },
+    /** ISO currency for price formatting. */
+    currency: { type: String, default: void 0 },
+    /** Render with colorblind-safe seat glyphs. */
+    colorblindSafe: { type: Boolean, default: void 0 },
+    /** Copy overrides, read once per mount. */
+    messages: {
+      type: Object,
+      default: void 0
+    },
+    /**
+     * Show the built-in seat tooltip. Set false to draw your own popover from
+     * the `seat-hover` event.
+     */
+    seatTooltip: { type: Boolean, default: void 0 }
+  },
+  emits: {
+    /** The buyer's selection changed. */
+    "selection-change": (_seats) => true,
+    /** A hold succeeded. */
+    hold: (_result) => true,
+    /** A previous hold was restored on mount. */
+    "hold-restored": (_result) => true,
+    /** The active hold lapsed. */
+    "hold-expired": () => true,
+    /** A GA area was clicked. */
+    "ga-click": (_area) => true,
+    /** Something failed — a network error, a rejected hold. */
+    error: (_error) => true,
+    /** A floor deck was tapped in the 3D view. */
+    "deck-tap": (_floorId) => true,
+    /** A transient hint worth showing the buyer, or `null` to clear it. */
+    hint: (_message) => true,
+    /** The pointer moved onto a seat, or off one (`null`). */
+    "seat-hover": (_details) => true
+  },
+  setup(props, { emit, expose }) {
+    const container = ref(null);
+    const chart = shallowRef(null);
+    const destroy = () => {
+      chart.value?.destroy();
+      chart.value = null;
+    };
+    const build = () => {
+      const element = container.value;
+      if (!element) return;
+      destroy();
+      const onSelectionChange = (seats) => emit("selection-change", seats);
+      const onHold = (result) => emit("hold", result);
+      const onHoldRestored = (result) => emit("hold-restored", result);
+      const onHoldExpired = () => emit("hold-expired");
+      const onGAClick = (area) => emit("ga-click", area);
+      const onError = (error) => emit("error", error);
+      const onDeckTap = (floorId) => emit("deck-tap", floorId);
+      const onHint = (message) => emit("hint", message);
+      const onSeatHover = (details) => emit("seat-hover", details);
+      const instance = new CoreSeatingChart({
+        container: element,
+        event: props.event,
+        apiBase: props.apiBase,
+        maxSelection: props.maxSelection,
+        publicKey: props.publicKey,
+        locale: props.locale,
+        currency: props.currency,
+        colorblindSafe: props.colorblindSafe,
+        messages: props.messages,
+        seatTooltip: props.seatTooltip,
+        onSelectionChange,
+        onHold,
+        onHoldRestored,
+        onHoldExpired,
+        onGAClick,
+        onError,
+        onDeckTap,
+        onHint,
+        onSeatHover
+      });
+      chart.value = instance;
+      void instance.render();
+    };
+    watch(
+      () => [
+        container.value,
+        props.event,
+        props.apiBase,
+        props.maxSelection,
+        props.publicKey,
+        props.locale,
+        props.currency,
+        props.colorblindSafe
+      ],
+      build,
+      { immediate: true, flush: "post" }
+    );
+    onBeforeUnmount(destroy);
+    const exposed = {
+      hold: (options) => chart.value?.hold(options) ?? Promise.resolve(null),
+      resumeHold: (holdId) => chart.value?.resumeHold(holdId) ?? Promise.resolve(null),
+      getCurrentHold: () => chart.value?.getCurrentHold() ?? null,
+      getGAAreas: () => chart.value?.getGAAreas() ?? [],
+      holdGA: (areaId, qty, options) => chart.value?.holdGA(areaId, qty, options) ?? Promise.resolve(null),
+      bestAvailable: (qty, categoryKey) => chart.value?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),
+      release: () => chart.value?.release() ?? Promise.resolve(),
+      releaseLabels: (labels) => chart.value?.releaseLabels(labels) ?? Promise.resolve(false),
+      getSelection: () => chart.value?.getSelection() ?? [],
+      setSeatTier: (seatId, tierId) => chart.value?.setSeatTier(seatId, tierId),
+      getFloors: () => chart.value?.getFloors() ?? [],
+      setFloor: (floorId) => chart.value?.setFloor(floorId),
+      setColorblindSafe: (on) => chart.value?.setColorblindSafe(on),
+      zoomIn: () => chart.value?.zoomIn(),
+      zoomOut: () => chart.value?.zoomOut(),
+      zoomToFit: () => chart.value?.zoomToFit()
+    };
+    expose(exposed);
+    return () => h("div", { ref: container });
+  }
+});
+
+// src/index.ts
+import { SeatPicker } from "@seatlayer/js";
+import { attachPickerFrame } from "@seatlayer/js";
+export {
+  SeatPicker as SeatPickerWidget,
+  SeatingChart,
+  attachPickerFrame
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SeatingChart.ts","../src/index.ts"],"sourcesContent":["import {\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  ref,\n  shallowRef,\n  watch,\n  type PropType,\n  type Ref,\n} from 'vue';\nimport {\n  SeatingChart as CoreSeatingChart,\n  type SeatingChartOptions,\n  type SelectedSeat,\n  type HoldResult,\n  type BestAvailableResult,\n  type GAAreaAvailability,\n  type SeatHoverDetails,\n} from '@seatlayer/js';\n\n/**\n * What `ref=\"chart\"` gives you — call these to drive the picker from your app.\n *\n * Vue exposes these through `defineExpose`, so a template ref is typed as this\n * rather than as the raw component instance.\n */\nexport interface SeatingChartExposed {\n  /** Hold the current selection. Resolves the hold, or `null` on a 409 conflict. */\n  hold(options?: { ttlMs?: number }): Promise<HoldResult | null>;\n  /** Restore an active hold by its opaque id. */\n  resumeHold(holdId: string): Promise<HoldResult | null>;\n  /** Current active hold known to the chart. */\n  getCurrentHold(): 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  /** Release some held labels while keeping the remainder active. */\n  releaseLabels(labels: string[]): Promise<boolean>;\n  /** The current selection, with prices resolved from the chart categories. */\n  getSelection(): SelectedSeat[];\n  /** Choose a ticket tier for a selected seat; `null` reverts to the default. */\n  setSeatTier(seatId: string, tierId: string | null): void;\n  /** Floors of a multi-floor chart. Empty before the first render. */\n  getFloors(): { id: string; name: string }[];\n  /** Switch the shown floor (2D). No-ops on single-floor charts. */\n  setFloor(floorId: string): void;\n  /** Toggle colorblind-safe rendering at runtime. */\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\n/**\n * Vue 3 wrapper around the framework-agnostic `@seatlayer/js` SDK.\n *\n * The canvas is created once and torn down on unmount. Only the props that\n * change the chart's identity — `event`, `apiBase`, `maxSelection`, `publicKey`,\n * `locale`, `currency`, `colorblindSafe` — trigger a rebuild; everything else is\n * read live, so a parent re-render never destroys the canvas mid-selection.\n *\n * Written as a render function rather than an SFC so the package builds with\n * plain TypeScript — a consumer needs no Vue compiler plugin to install it.\n *\n * @example\n * ```vue\n * <script setup lang=\"ts\">\n * import { ref } from 'vue';\n * import { SeatingChart, type SeatingChartExposed } from '@seatlayer/vue';\n *\n * const chart = ref<SeatingChartExposed | null>(null);\n * const checkout = async () => {\n *   const held = await chart.value?.hold();\n *   if (held) await pay(held.holdId);\n * };\n * </script>\n *\n * <template>\n *   <SeatingChart ref=\"chart\" event=\"summer-gala\" @selection-change=\"onChange\" />\n * </template>\n * ```\n */\nexport const SeatingChart = defineComponent({\n  name: 'SeatLayerSeatingChart',\n\n  props: {\n    /** Event key to render. Changing it rebuilds the chart. */\n    event: { type: String, required: true },\n    /** API base URL. Defaults to the public API. */\n    apiBase: { type: String, default: undefined },\n    /** Cap on how many seats a buyer may select. */\n    maxSelection: { type: Number, default: undefined },\n    /** Publishable key, when your integration uses one. */\n    publicKey: { type: String, default: undefined },\n    /** BCP-47 locale for built-in copy. */\n    locale: { type: String, default: undefined },\n    /** ISO currency for price formatting. */\n    currency: { type: String, default: undefined },\n    /** Render with colorblind-safe seat glyphs. */\n    colorblindSafe: { type: Boolean, default: undefined },\n    /** Copy overrides, read once per mount. */\n    messages: {\n      type: Object as PropType<SeatingChartOptions['messages']>,\n      default: undefined,\n    },\n    /**\n     * Show the built-in seat tooltip. Set false to draw your own popover from\n     * the `seat-hover` event.\n     */\n    seatTooltip: { type: Boolean, default: undefined },\n  },\n\n  emits: {\n    /** The buyer's selection changed. */\n    'selection-change': (_seats: SelectedSeat[]) => true,\n    /** A hold succeeded. */\n    hold: (_result: HoldResult) => true,\n    /** A previous hold was restored on mount. */\n    'hold-restored': (_result: HoldResult) => true,\n    /** The active hold lapsed. */\n    'hold-expired': () => true,\n    /** A GA area was clicked. */\n    'ga-click': (_area: GAAreaAvailability) => true,\n    /** Something failed — a network error, a rejected hold. */\n    error: (_error: unknown) => true,\n    /** A floor deck was tapped in the 3D view. */\n    'deck-tap': (_floorId: string) => true,\n    /** A transient hint worth showing the buyer, or `null` to clear it. */\n    hint: (_message: string | null) => true,\n    /** The pointer moved onto a seat, or off one (`null`). */\n    'seat-hover': (_details: SeatHoverDetails | null) => true,\n  },\n\n  setup(props, { emit, expose }) {\n    const container: Ref<HTMLDivElement | null> = ref(null);\n    // shallowRef: the chart owns a canvas and a large scene graph, and making it\n    // deeply reactive would have Vue walk all of it on every touch.\n    const chart = shallowRef<CoreSeatingChart | null>(null);\n\n    const destroy = () => {\n      chart.value?.destroy();\n      chart.value = null;\n    };\n\n    const build = () => {\n      const element = container.value;\n      if (!element) return;\n\n      destroy();\n\n      // Handlers are bound here rather than inline in the options literal.\n      // Inline, TypeScript has to resolve `emit`'s overloads while it is still\n      // contextually typing the literal against SeatingChartOptions, and it\n      // gives up — collapsing to the last emit signature. Naming them first\n      // separates the two inference problems, and reads better besides.\n      const onSelectionChange = (seats: SelectedSeat[]) => emit('selection-change', seats);\n      const onHold = (result: HoldResult) => emit('hold', result);\n      const onHoldRestored = (result: HoldResult) => emit('hold-restored', result);\n      const onHoldExpired = () => emit('hold-expired');\n      const onGAClick = (area: GAAreaAvailability) => emit('ga-click', area);\n      const onError = (error: unknown) => emit('error', error);\n      const onDeckTap = (floorId: string) => emit('deck-tap', floorId);\n      const onHint = (message: string | null) => emit('hint', message);\n      const onSeatHover = (details: SeatHoverDetails | null) => emit('seat-hover', details);\n\n      const instance = new CoreSeatingChart({\n        container: element,\n        event: props.event,\n        apiBase: props.apiBase,\n        maxSelection: props.maxSelection,\n        publicKey: props.publicKey,\n        locale: props.locale,\n        currency: props.currency,\n        colorblindSafe: props.colorblindSafe,\n        messages: props.messages,\n        seatTooltip: props.seatTooltip,\n        onSelectionChange,\n        onHold,\n        onHoldRestored,\n        onHoldExpired,\n        onGAClick,\n        onError,\n        onDeckTap,\n        onHint,\n        onSeatHover,\n      });\n\n      chart.value = instance;\n      void instance.render();\n    };\n\n    // `flush: 'post'` so the container element exists on the first run — a\n    // pre-flush watcher would fire before the DOM node is attached.\n    watch(\n      () => [\n        container.value,\n        props.event,\n        props.apiBase,\n        props.maxSelection,\n        props.publicKey,\n        props.locale,\n        props.currency,\n        props.colorblindSafe,\n      ],\n      build,\n      { immediate: true, flush: 'post' },\n    );\n\n    onBeforeUnmount(destroy);\n\n    const exposed: SeatingChartExposed = {\n      hold: (options) => chart.value?.hold(options) ?? Promise.resolve(null),\n      resumeHold: (holdId) => chart.value?.resumeHold(holdId) ?? Promise.resolve(null),\n      getCurrentHold: () => chart.value?.getCurrentHold() ?? null,\n      getGAAreas: () => chart.value?.getGAAreas() ?? [],\n      holdGA: (areaId, qty, options) => chart.value?.holdGA(areaId, qty, options) ?? Promise.resolve(null),\n      bestAvailable: (qty, categoryKey) =>\n        chart.value?.bestAvailable(qty, categoryKey) ?? Promise.resolve(null),\n      release: () => chart.value?.release() ?? Promise.resolve(),\n      releaseLabels: (labels) => chart.value?.releaseLabels(labels) ?? Promise.resolve(false),\n      getSelection: () => chart.value?.getSelection() ?? [],\n      setSeatTier: (seatId, tierId) => chart.value?.setSeatTier(seatId, tierId),\n      getFloors: () => chart.value?.getFloors() ?? [],\n      setFloor: (floorId) => chart.value?.setFloor(floorId),\n      setColorblindSafe: (on) => chart.value?.setColorblindSafe(on),\n      zoomIn: () => chart.value?.zoomIn(),\n      zoomOut: () => chart.value?.zoomOut(),\n      zoomToFit: () => chart.value?.zoomToFit(),\n    };\n    expose(exposed);\n\n    return () => h('div', { ref: container });\n  },\n});\n","/**\n * @seatlayer/vue — the Vue 3 wrapper for the SeatLayer embed SDK.\n *\n * Components are written as render functions rather than SFCs, so installing\n * this package needs no Vue compiler plugin.\n */\nexport { SeatingChart } from './SeatingChart';\nexport type { SeatingChartExposed } from './SeatingChart';\n\nexport type {\n  SelectedSeat,\n  HoldResult,\n  BestAvailableResult,\n  GAAreaAvailability,\n  HoldLineItem,\n  SeatHoverDetails,\n} from '@seatlayer/js';\n\n// The framework-agnostic widget class — for the one-call modal (SeatPickerWidget.open()).\nexport { SeatPicker as SeatPickerWidget } from '@seatlayer/js';\n\n// Host-side embed helper: grows the iframe on `seatlayer:height` and pins it on\n// `seatlayer:fullscreen`. Vue hosts depend on this package alone, so it has to be\n// reachable here rather than only from @seatlayer/js.\nexport { attachPickerFrame } from '@seatlayer/js';\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@seatlayer/vue",
+  "version": "0.35.0",
+  "description": "Vue 3 components for the SeatLayer embed SDK — render an interactive seat picker and hold seats.",
+  "license": "MIT",
+  "homepage": "https://docs.seatlayer.io/buyer-sdk/seat-picker/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/seatlayer/seatlayer-sdk.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/seatlayer/seatlayer-sdk/issues"
+  },
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "keywords": [
+    "seating",
+    "seat-map",
+    "seating-chart",
+    "seat-picker",
+    "seatlayer",
+    "vue",
+    "vue3",
+    "ticketing"
+  ],
+  "dependencies": {
+    "@seatlayer/js": "0.35.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3.3.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.0",
+    "vue": "^3.5.13"
+  },
+  "scripts": {
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  }
+}