@seatlayer/vue 0.56.0 → 0.57.0

package/README.md

@@ -65,6 +65,7 @@ async function checkout() {
 | `selectedObjects` | `string[]` | Initial object ids or public labels. |
 | `selectableObjects` | `string[] \| null` | Buyer-selectable allow-list. |
 | `numberOfPlacesToSelect` | `number` | Exact count required for a valid selection. |
+| `selectionValidators` | `PickerSelectionValidator[]` | Minimum, consecutive-seat, and no-orphan guards. |
 | `publicKey` | `string` | Reserved compatibility input; stored by the chart but not transmitted to SeatLayer. |
 | `locale` | `string` | BCP-47 locale for built-in copy. |
 | `currency` | `string` | ISO currency for price formatting. |
@@ -72,7 +73,7 @@ async function checkout() {
 | `seatTooltip` | `boolean` | Set `false` to draw your own popover from `@seat-hover`. |
 | `messages` | `object` | Copy overrides. Read once per rebuild. |
 
-`numberOfPlacesToSelect` and the other primitive identity props rebuild the
+`numberOfPlacesToSelect`, `selectionValidators`, and the other identity props rebuild the
 canvas. `selectedObjects` and `selectableObjects` are initial values; use the
 imperative methods for later changes so a new array identity cannot remount the
 chart mid-selection.
@@ -82,8 +83,8 @@ chart mid-selection.
 | Event | Payload |
 | --- | --- |
 | `@selection-change` | `SelectedSeat[]` |
-| `@selection-validity-change` | Exact-count state |
-| `@selection-valid` / `@selection-invalid` | Exact-count transition |
+| `@selection-validity-change` | Rule state with typed `violations` |
+| `@selection-valid` / `@selection-invalid` | Rule-validity transition |
 | `@selection-limit` | Active numeric cap |
 | `@hold` | `HoldResult` |
 | `@hold-restored` | `HoldResult` |

package/dist/index.cjs

@@ -44,6 +44,8 @@ var SeatingChart = (0, import_vue.defineComponent)({
     selectableObjects: { type: Array, default: void 0 },
     /** Exact ticket count required for a valid selection. */
     numberOfPlacesToSelect: { type: Number, default: void 0 },
+    /** Local buyer selection guards. Changing them rebuilds the chart. */
+    selectionValidators: { type: Array, default: void 0 },
     /** Publishable key, when your integration uses one. */
     publicKey: { type: String, default: void 0 },
     /** BCP-47 locale for built-in copy. */
@@ -166,6 +168,7 @@ var SeatingChart = (0, import_vue.defineComponent)({
           selectedObjects: props.selectedObjects,
           selectableObjects: props.selectableObjects,
           numberOfPlacesToSelect: props.numberOfPlacesToSelect,
+          selectionValidators: props.selectionValidators,
           publicKey: props.publicKey,
           locale: props.locale,
           currency: props.currency,

package/dist/index.cjs.map

@@ -1 +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// Sales Channels — buyer access sessions for private channel inventory.\nexport type {\n  BuyerAccessToken,\n  BuyerAccessTokenProvider,\n  BuyerAccessRefreshReason,\n  BuyerAccessUnavailableReason,\n  BuyerAccessExpiredEvent,\n  BuyerAccessUnavailableEvent,\n  SelectedObjectUnavailableEvent,\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';\nexport type { AttachPickerFrameOptions } 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  SEATING_CHART_IDENTITY_PROPS,\n  bindSeatingChartHandle,\n  buildSeatingChartOptions,\n  type RendererViewMode,\n  type SeatingChartHandle,\n  type SeatingChartOptions,\n  type SelectedSeat,\n  type HoldResult,\n  type BestAvailableResult,\n  type GAAreaAvailability,\n  type SeatHoverDetails,\n  type PickerSelectionValidity,\n  type BuyerAccessToken,\n  type BuyerAccessTokenProvider,\n  type BuyerAccessExpiredEvent,\n  type BuyerAccessUnavailableEvent,\n  type SelectedObjectUnavailableEvent,\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. It is the shared\n * `SeatingChartHandle` from `@seatlayer/js`: the same 17 methods React's `ref`\n * and Angular's component expose, from one declaration, so the three wrappers\n * cannot drift apart again.\n */\nexport type SeatingChartExposed = SeatingChartHandle;\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 (`SEATING_CHART_IDENTITY_PROPS`: `event`,\n * `apiBase`, `maxSelection`, `numberOfPlacesToSelect`, `publicKey`, `locale`, `currency`,\n * `colorblindSafe`, `initialView`, `errorDisplay`) trigger a rebuild;\n * everything else is read live, so a parent re-render never destroys the canvas\n * 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    /** Object ids or public labels selected after availability loads. */\n    selectedObjects: { type: Array as PropType<string[]>, default: undefined },\n    /** Object ids or public labels the buyer may select. */\n    selectableObjects: { type: Array as PropType<string[] | null>, default: undefined },\n    /** Exact ticket count required for a valid selection. */\n    numberOfPlacesToSelect: { 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    /**\n     * Initial canvas projection. Read once when the chart is built, so\n     * changing it rebuilds.\n     * @deprecated `'isometric'` and `'perspective'` are retired in favour of\n     * the real 3D venue view; use `'flat'`.\n     */\n    initialView: {\n      type: String as PropType<RendererViewMode>,\n      default: undefined,\n    },\n    /**\n     * What the BUYER sees when the chart cannot load: `'message'` (default) is\n     * a styleable notice with a Try again button, `'none'` is silent for hosts\n     * that render their own failure UI from the `error` event.\n     */\n    errorDisplay: {\n      type: String as PropType<'message' | 'none'>,\n      default: undefined,\n    },\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     * Sales Channels: mint a buyer access session on demand. Called with a\n     * `reason`; returns `{ token, expiresAt }` from YOUR backend. The token is\n     * held in memory only — never storage, never a URL, never a log.\n     */\n    buyerAccessTokenProvider: {\n      type: Function as PropType<BuyerAccessTokenProvider>,\n      default: undefined,\n    },\n    /** One-shot session for hosts that own the lifecycle. Cannot be renewed. */\n    buyerAccessToken: {\n      type: [String, Object] as PropType<string | BuyerAccessToken>,\n      default: undefined,\n    },\n  },\n\n  emits: {\n    /** The buyer's selection changed. */\n    'selection-change': (_seats: SelectedSeat[]) => true,\n    /** Exact-count state changed. */\n    'selection-validity-change': (_state: PickerSelectionValidity) => true,\n    /** The exact count was reached. */\n    'selection-valid': (_seats: SelectedSeat[]) => true,\n    /** The selection is not at the exact count. */\n    'selection-invalid': (_state: PickerSelectionValidity) => true,\n    /** The active selection cap was reached. */\n    'selection-limit': (_max: number) => 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    /** The buyer access session lapsed; `refreshed` says whether it recovered. */\n    'access-expired': (_event: BuyerAccessExpiredEvent) => true,\n    /** Private inventory is unavailable and refreshing will not fix it. */\n    'access-unavailable': (_event: BuyerAccessUnavailableEvent) => true,\n    /** Selected-but-unheld units stopped being selectable. */\n    'selected-object-unavailable': (_event: SelectedObjectUnavailableEvent) => 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 onSelectionValidityChange = (state: PickerSelectionValidity) => emit('selection-validity-change', state);\n      const onSelectionValid = (seats: SelectedSeat[]) => emit('selection-valid', seats);\n      const onSelectionInvalid = (state: PickerSelectionValidity) => emit('selection-invalid', state);\n      const onSelectionLimit = (max: number) => emit('selection-limit', max);\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      const onAccessExpired = (state: BuyerAccessExpiredEvent) => emit('access-expired', state);\n      const onAccessUnavailable = (state: BuyerAccessUnavailableEvent) =>\n        emit('access-unavailable', state);\n      const onSelectedObjectUnavailable = (state: SelectedObjectUnavailableEvent) =>\n        emit('selected-object-unavailable', state);\n\n      const instance = new CoreSeatingChart(buildSeatingChartOptions(\n        element,\n        {\n          event: props.event,\n          apiBase: props.apiBase,\n          maxSelection: props.maxSelection,\n          selectedObjects: props.selectedObjects,\n          selectableObjects: props.selectableObjects,\n          numberOfPlacesToSelect: props.numberOfPlacesToSelect,\n          publicKey: props.publicKey,\n          locale: props.locale,\n          currency: props.currency,\n          colorblindSafe: props.colorblindSafe,\n          initialView: props.initialView,\n          errorDisplay: props.errorDisplay,\n          messages: props.messages,\n          seatTooltip: props.seatTooltip,\n          buyerAccessTokenProvider: props.buyerAccessTokenProvider,\n          buyerAccessToken: props.buyerAccessToken,\n        },\n        {\n          onAccessExpired,\n          onAccessUnavailable,\n          onSelectedObjectUnavailable,\n          onSelectionChange,\n          onSelectionValidityChange,\n          onSelectionValid,\n          onSelectionInvalid,\n          onSelectionLimit,\n          onHold,\n          onHoldRestored,\n          onHoldExpired,\n          onGAClick,\n          onError,\n          onDeckTap,\n          onHint,\n          onSeatHover,\n        },\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        // The shared identity list, not a hand-copied one — this is exactly the\n        // place Vue fell two props behind React.\n        ...SEATING_CHART_IDENTITY_PROPS.map((prop) => props[prop]),\n      ],\n      build,\n      { immediate: true, flush: 'post' },\n    );\n\n    onBeforeUnmount(destroy);\n\n    // Built once and read live: the handle must survive every rebuild, so it\n    // asks for the current instance on each call rather than capturing one.\n    const exposed: SeatingChartExposed = bindSeatingChartHandle(() => chart.value);\n    expose(exposed);\n\n    return () => h('div', { ref: container });\n  },\n});\n"],"mappings":"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","names":["CoreSeatingChart","import_js"]}
+{"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// Sales Channels — buyer access sessions for private channel inventory.\nexport type {\n  BuyerAccessToken,\n  BuyerAccessTokenProvider,\n  BuyerAccessRefreshReason,\n  BuyerAccessUnavailableReason,\n  BuyerAccessExpiredEvent,\n  BuyerAccessUnavailableEvent,\n  SelectedObjectUnavailableEvent,\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';\nexport type { AttachPickerFrameOptions } 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  SEATING_CHART_IDENTITY_PROPS,\n  bindSeatingChartHandle,\n  buildSeatingChartOptions,\n  type RendererViewMode,\n  type SeatingChartHandle,\n  type SeatingChartOptions,\n  type SelectedSeat,\n  type HoldResult,\n  type BestAvailableResult,\n  type GAAreaAvailability,\n  type SeatHoverDetails,\n  type PickerSelectionValidity,\n  type PickerSelectionValidator,\n  type BuyerAccessToken,\n  type BuyerAccessTokenProvider,\n  type BuyerAccessExpiredEvent,\n  type BuyerAccessUnavailableEvent,\n  type SelectedObjectUnavailableEvent,\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. It is the shared\n * `SeatingChartHandle` from `@seatlayer/js`: the same 17 methods React's `ref`\n * and Angular's component expose, from one declaration, so the three wrappers\n * cannot drift apart again.\n */\nexport type SeatingChartExposed = SeatingChartHandle;\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 (`SEATING_CHART_IDENTITY_PROPS`: `event`,\n * `apiBase`, `maxSelection`, `numberOfPlacesToSelect`, `publicKey`, `locale`, `currency`,\n * `colorblindSafe`, `initialView`, `errorDisplay`) trigger a rebuild;\n * everything else is read live, so a parent re-render never destroys the canvas\n * 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    /** Object ids or public labels selected after availability loads. */\n    selectedObjects: { type: Array as PropType<string[]>, default: undefined },\n    /** Object ids or public labels the buyer may select. */\n    selectableObjects: { type: Array as PropType<string[] | null>, default: undefined },\n    /** Exact ticket count required for a valid selection. */\n    numberOfPlacesToSelect: { type: Number, default: undefined },\n    /** Local buyer selection guards. Changing them rebuilds the chart. */\n    selectionValidators: { type: Array as PropType<PickerSelectionValidator[]>, 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    /**\n     * Initial canvas projection. Read once when the chart is built, so\n     * changing it rebuilds.\n     * @deprecated `'isometric'` and `'perspective'` are retired in favour of\n     * the real 3D venue view; use `'flat'`.\n     */\n    initialView: {\n      type: String as PropType<RendererViewMode>,\n      default: undefined,\n    },\n    /**\n     * What the BUYER sees when the chart cannot load: `'message'` (default) is\n     * a styleable notice with a Try again button, `'none'` is silent for hosts\n     * that render their own failure UI from the `error` event.\n     */\n    errorDisplay: {\n      type: String as PropType<'message' | 'none'>,\n      default: undefined,\n    },\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     * Sales Channels: mint a buyer access session on demand. Called with a\n     * `reason`; returns `{ token, expiresAt }` from YOUR backend. The token is\n     * held in memory only — never storage, never a URL, never a log.\n     */\n    buyerAccessTokenProvider: {\n      type: Function as PropType<BuyerAccessTokenProvider>,\n      default: undefined,\n    },\n    /** One-shot session for hosts that own the lifecycle. Cannot be renewed. */\n    buyerAccessToken: {\n      type: [String, Object] as PropType<string | BuyerAccessToken>,\n      default: undefined,\n    },\n  },\n\n  emits: {\n    /** The buyer's selection changed. */\n    'selection-change': (_seats: SelectedSeat[]) => true,\n    /** Exact-count state changed. */\n    'selection-validity-change': (_state: PickerSelectionValidity) => true,\n    /** The exact count was reached. */\n    'selection-valid': (_seats: SelectedSeat[]) => true,\n    /** The selection is not at the exact count. */\n    'selection-invalid': (_state: PickerSelectionValidity) => true,\n    /** The active selection cap was reached. */\n    'selection-limit': (_max: number) => 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    /** The buyer access session lapsed; `refreshed` says whether it recovered. */\n    'access-expired': (_event: BuyerAccessExpiredEvent) => true,\n    /** Private inventory is unavailable and refreshing will not fix it. */\n    'access-unavailable': (_event: BuyerAccessUnavailableEvent) => true,\n    /** Selected-but-unheld units stopped being selectable. */\n    'selected-object-unavailable': (_event: SelectedObjectUnavailableEvent) => 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 onSelectionValidityChange = (state: PickerSelectionValidity) => emit('selection-validity-change', state);\n      const onSelectionValid = (seats: SelectedSeat[]) => emit('selection-valid', seats);\n      const onSelectionInvalid = (state: PickerSelectionValidity) => emit('selection-invalid', state);\n      const onSelectionLimit = (max: number) => emit('selection-limit', max);\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      const onAccessExpired = (state: BuyerAccessExpiredEvent) => emit('access-expired', state);\n      const onAccessUnavailable = (state: BuyerAccessUnavailableEvent) =>\n        emit('access-unavailable', state);\n      const onSelectedObjectUnavailable = (state: SelectedObjectUnavailableEvent) =>\n        emit('selected-object-unavailable', state);\n\n      const instance = new CoreSeatingChart(buildSeatingChartOptions(\n        element,\n        {\n          event: props.event,\n          apiBase: props.apiBase,\n          maxSelection: props.maxSelection,\n          selectedObjects: props.selectedObjects,\n          selectableObjects: props.selectableObjects,\n          numberOfPlacesToSelect: props.numberOfPlacesToSelect,\n          selectionValidators: props.selectionValidators,\n          publicKey: props.publicKey,\n          locale: props.locale,\n          currency: props.currency,\n          colorblindSafe: props.colorblindSafe,\n          initialView: props.initialView,\n          errorDisplay: props.errorDisplay,\n          messages: props.messages,\n          seatTooltip: props.seatTooltip,\n          buyerAccessTokenProvider: props.buyerAccessTokenProvider,\n          buyerAccessToken: props.buyerAccessToken,\n        },\n        {\n          onAccessExpired,\n          onAccessUnavailable,\n          onSelectedObjectUnavailable,\n          onSelectionChange,\n          onSelectionValidityChange,\n          onSelectionValid,\n          onSelectionInvalid,\n          onSelectionLimit,\n          onHold,\n          onHoldRestored,\n          onHoldExpired,\n          onGAClick,\n          onError,\n          onDeckTap,\n          onHint,\n          onSeatHover,\n        },\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        // The shared identity list, not a hand-copied one — this is exactly the\n        // place Vue fell two props behind React.\n        ...SEATING_CHART_IDENTITY_PROPS.map((prop) => props[prop]),\n      ],\n      build,\n      { immediate: true, flush: 'post' },\n    );\n\n    onBeforeUnmount(destroy);\n\n    // Built once and read live: the handle must survive every rebuild, so it\n    // asks for the current instance on each call rather than capturing one.\n    const exposed: SeatingChartExposed = bindSeatingChartHandle(() => chart.value);\n    expose(exposed);\n\n    return () => h('div', { ref: container });\n  },\n});\n"],"mappings":"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","names":["CoreSeatingChart","import_js"]}

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as _seatlayer_core from '@seatlayer/core';
 import * as vue from 'vue';
 import { PropType } from 'vue';
-import { RendererViewMode, SeatingChartOptions, BuyerAccessTokenProvider, BuyerAccessToken, SelectedSeat, PickerSelectionValidity, HoldResult, GAAreaAvailability, SeatHoverDetails, BuyerAccessExpiredEvent, BuyerAccessUnavailableEvent, SelectedObjectUnavailableEvent, SeatingChartHandle } from '@seatlayer/js';
+import { PickerSelectionValidator, RendererViewMode, SeatingChartOptions, BuyerAccessTokenProvider, BuyerAccessToken, SelectedSeat, PickerSelectionValidity, HoldResult, GAAreaAvailability, SeatHoverDetails, BuyerAccessExpiredEvent, BuyerAccessUnavailableEvent, SelectedObjectUnavailableEvent, SeatingChartHandle } from '@seatlayer/js';
 export { AttachPickerFrameOptions, BestAvailableResult, BuyerAccessExpiredEvent, BuyerAccessRefreshReason, BuyerAccessToken, BuyerAccessTokenProvider, BuyerAccessUnavailableEvent, BuyerAccessUnavailableReason, GAAreaAvailability, HoldLineItem, HoldResult, SeatHoverDetails, SeatPicker as SeatPickerWidget, SelectedObjectUnavailableEvent, SelectedSeat, attachPickerFrame } from '@seatlayer/js';
 
 /**
@@ -76,6 +76,11 @@ declare const SeatingChart: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: undefined;
     };
+    /** Local buyer selection guards. Changing them rebuilds the chart. */
+    selectionValidators: {
+        type: PropType<PickerSelectionValidator[]>;
+        default: undefined;
+    };
     /** Publishable key, when your integration uses one. */
     publicKey: {
         type: StringConstructor;
@@ -208,6 +213,11 @@ declare const SeatingChart: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: undefined;
     };
+    /** Local buyer selection guards. Changing them rebuilds the chart. */
+    selectionValidators: {
+        type: PropType<PickerSelectionValidator[]>;
+        default: undefined;
+    };
     /** Publishable key, when your integration uses one. */
     publicKey: {
         type: StringConstructor;
@@ -298,6 +308,7 @@ declare const SeatingChart: vue.DefineComponent<vue.ExtractPropTypes<{
     selectedObjects: string[];
     selectableObjects: string[] | null;
     numberOfPlacesToSelect: number;
+    selectionValidators: PickerSelectionValidator[];
     publicKey: string;
     locale: string;
     currency: string;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _seatlayer_core from '@seatlayer/core';
 import * as vue from 'vue';
 import { PropType } from 'vue';
-import { RendererViewMode, SeatingChartOptions, BuyerAccessTokenProvider, BuyerAccessToken, SelectedSeat, PickerSelectionValidity, HoldResult, GAAreaAvailability, SeatHoverDetails, BuyerAccessExpiredEvent, BuyerAccessUnavailableEvent, SelectedObjectUnavailableEvent, SeatingChartHandle } from '@seatlayer/js';
+import { PickerSelectionValidator, RendererViewMode, SeatingChartOptions, BuyerAccessTokenProvider, BuyerAccessToken, SelectedSeat, PickerSelectionValidity, HoldResult, GAAreaAvailability, SeatHoverDetails, BuyerAccessExpiredEvent, BuyerAccessUnavailableEvent, SelectedObjectUnavailableEvent, SeatingChartHandle } from '@seatlayer/js';
 export { AttachPickerFrameOptions, BestAvailableResult, BuyerAccessExpiredEvent, BuyerAccessRefreshReason, BuyerAccessToken, BuyerAccessTokenProvider, BuyerAccessUnavailableEvent, BuyerAccessUnavailableReason, GAAreaAvailability, HoldLineItem, HoldResult, SeatHoverDetails, SeatPicker as SeatPickerWidget, SelectedObjectUnavailableEvent, SelectedSeat, attachPickerFrame } from '@seatlayer/js';
 
 /**
@@ -76,6 +76,11 @@ declare const SeatingChart: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: undefined;
     };
+    /** Local buyer selection guards. Changing them rebuilds the chart. */
+    selectionValidators: {
+        type: PropType<PickerSelectionValidator[]>;
+        default: undefined;
+    };
     /** Publishable key, when your integration uses one. */
     publicKey: {
         type: StringConstructor;
@@ -208,6 +213,11 @@ declare const SeatingChart: vue.DefineComponent<vue.ExtractPropTypes<{
         type: NumberConstructor;
         default: undefined;
     };
+    /** Local buyer selection guards. Changing them rebuilds the chart. */
+    selectionValidators: {
+        type: PropType<PickerSelectionValidator[]>;
+        default: undefined;
+    };
     /** Publishable key, when your integration uses one. */
     publicKey: {
         type: StringConstructor;
@@ -298,6 +308,7 @@ declare const SeatingChart: vue.DefineComponent<vue.ExtractPropTypes<{
     selectedObjects: string[];
     selectableObjects: string[] | null;
     numberOfPlacesToSelect: number;
+    selectionValidators: PickerSelectionValidator[];
     publicKey: string;
     locale: string;
     currency: string;

package/dist/index.js

@@ -28,6 +28,8 @@ var SeatingChart = defineComponent({
     selectableObjects: { type: Array, default: void 0 },
     /** Exact ticket count required for a valid selection. */
     numberOfPlacesToSelect: { type: Number, default: void 0 },
+    /** Local buyer selection guards. Changing them rebuilds the chart. */
+    selectionValidators: { type: Array, default: void 0 },
     /** Publishable key, when your integration uses one. */
     publicKey: { type: String, default: void 0 },
     /** BCP-47 locale for built-in copy. */
@@ -150,6 +152,7 @@ var SeatingChart = defineComponent({
           selectedObjects: props.selectedObjects,
           selectableObjects: props.selectableObjects,
           numberOfPlacesToSelect: props.numberOfPlacesToSelect,
+          selectionValidators: props.selectionValidators,
           publicKey: props.publicKey,
           locale: props.locale,
           currency: props.currency,

package/dist/index.js.map

@@ -1 +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  SEATING_CHART_IDENTITY_PROPS,\n  bindSeatingChartHandle,\n  buildSeatingChartOptions,\n  type RendererViewMode,\n  type SeatingChartHandle,\n  type SeatingChartOptions,\n  type SelectedSeat,\n  type HoldResult,\n  type BestAvailableResult,\n  type GAAreaAvailability,\n  type SeatHoverDetails,\n  type PickerSelectionValidity,\n  type BuyerAccessToken,\n  type BuyerAccessTokenProvider,\n  type BuyerAccessExpiredEvent,\n  type BuyerAccessUnavailableEvent,\n  type SelectedObjectUnavailableEvent,\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. It is the shared\n * `SeatingChartHandle` from `@seatlayer/js`: the same 17 methods React's `ref`\n * and Angular's component expose, from one declaration, so the three wrappers\n * cannot drift apart again.\n */\nexport type SeatingChartExposed = SeatingChartHandle;\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 (`SEATING_CHART_IDENTITY_PROPS`: `event`,\n * `apiBase`, `maxSelection`, `numberOfPlacesToSelect`, `publicKey`, `locale`, `currency`,\n * `colorblindSafe`, `initialView`, `errorDisplay`) trigger a rebuild;\n * everything else is read live, so a parent re-render never destroys the canvas\n * 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    /** Object ids or public labels selected after availability loads. */\n    selectedObjects: { type: Array as PropType<string[]>, default: undefined },\n    /** Object ids or public labels the buyer may select. */\n    selectableObjects: { type: Array as PropType<string[] | null>, default: undefined },\n    /** Exact ticket count required for a valid selection. */\n    numberOfPlacesToSelect: { 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    /**\n     * Initial canvas projection. Read once when the chart is built, so\n     * changing it rebuilds.\n     * @deprecated `'isometric'` and `'perspective'` are retired in favour of\n     * the real 3D venue view; use `'flat'`.\n     */\n    initialView: {\n      type: String as PropType<RendererViewMode>,\n      default: undefined,\n    },\n    /**\n     * What the BUYER sees when the chart cannot load: `'message'` (default) is\n     * a styleable notice with a Try again button, `'none'` is silent for hosts\n     * that render their own failure UI from the `error` event.\n     */\n    errorDisplay: {\n      type: String as PropType<'message' | 'none'>,\n      default: undefined,\n    },\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     * Sales Channels: mint a buyer access session on demand. Called with a\n     * `reason`; returns `{ token, expiresAt }` from YOUR backend. The token is\n     * held in memory only — never storage, never a URL, never a log.\n     */\n    buyerAccessTokenProvider: {\n      type: Function as PropType<BuyerAccessTokenProvider>,\n      default: undefined,\n    },\n    /** One-shot session for hosts that own the lifecycle. Cannot be renewed. */\n    buyerAccessToken: {\n      type: [String, Object] as PropType<string | BuyerAccessToken>,\n      default: undefined,\n    },\n  },\n\n  emits: {\n    /** The buyer's selection changed. */\n    'selection-change': (_seats: SelectedSeat[]) => true,\n    /** Exact-count state changed. */\n    'selection-validity-change': (_state: PickerSelectionValidity) => true,\n    /** The exact count was reached. */\n    'selection-valid': (_seats: SelectedSeat[]) => true,\n    /** The selection is not at the exact count. */\n    'selection-invalid': (_state: PickerSelectionValidity) => true,\n    /** The active selection cap was reached. */\n    'selection-limit': (_max: number) => 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    /** The buyer access session lapsed; `refreshed` says whether it recovered. */\n    'access-expired': (_event: BuyerAccessExpiredEvent) => true,\n    /** Private inventory is unavailable and refreshing will not fix it. */\n    'access-unavailable': (_event: BuyerAccessUnavailableEvent) => true,\n    /** Selected-but-unheld units stopped being selectable. */\n    'selected-object-unavailable': (_event: SelectedObjectUnavailableEvent) => 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 onSelectionValidityChange = (state: PickerSelectionValidity) => emit('selection-validity-change', state);\n      const onSelectionValid = (seats: SelectedSeat[]) => emit('selection-valid', seats);\n      const onSelectionInvalid = (state: PickerSelectionValidity) => emit('selection-invalid', state);\n      const onSelectionLimit = (max: number) => emit('selection-limit', max);\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      const onAccessExpired = (state: BuyerAccessExpiredEvent) => emit('access-expired', state);\n      const onAccessUnavailable = (state: BuyerAccessUnavailableEvent) =>\n        emit('access-unavailable', state);\n      const onSelectedObjectUnavailable = (state: SelectedObjectUnavailableEvent) =>\n        emit('selected-object-unavailable', state);\n\n      const instance = new CoreSeatingChart(buildSeatingChartOptions(\n        element,\n        {\n          event: props.event,\n          apiBase: props.apiBase,\n          maxSelection: props.maxSelection,\n          selectedObjects: props.selectedObjects,\n          selectableObjects: props.selectableObjects,\n          numberOfPlacesToSelect: props.numberOfPlacesToSelect,\n          publicKey: props.publicKey,\n          locale: props.locale,\n          currency: props.currency,\n          colorblindSafe: props.colorblindSafe,\n          initialView: props.initialView,\n          errorDisplay: props.errorDisplay,\n          messages: props.messages,\n          seatTooltip: props.seatTooltip,\n          buyerAccessTokenProvider: props.buyerAccessTokenProvider,\n          buyerAccessToken: props.buyerAccessToken,\n        },\n        {\n          onAccessExpired,\n          onAccessUnavailable,\n          onSelectedObjectUnavailable,\n          onSelectionChange,\n          onSelectionValidityChange,\n          onSelectionValid,\n          onSelectionInvalid,\n          onSelectionLimit,\n          onHold,\n          onHoldRestored,\n          onHoldExpired,\n          onGAClick,\n          onError,\n          onDeckTap,\n          onHint,\n          onSeatHover,\n        },\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        // The shared identity list, not a hand-copied one — this is exactly the\n        // place Vue fell two props behind React.\n        ...SEATING_CHART_IDENTITY_PROPS.map((prop) => props[prop]),\n      ],\n      build,\n      { immediate: true, flush: 'post' },\n    );\n\n    onBeforeUnmount(destroy);\n\n    // Built once and read live: the handle must survive every rebuild, so it\n    // asks for the current instance on each call rather than capturing one.\n    const exposed: SeatingChartExposed = bindSeatingChartHandle(() => chart.value);\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// Sales Channels — buyer access sessions for private channel inventory.\nexport type {\n  BuyerAccessToken,\n  BuyerAccessTokenProvider,\n  BuyerAccessRefreshReason,\n  BuyerAccessUnavailableReason,\n  BuyerAccessExpiredEvent,\n  BuyerAccessUnavailableEvent,\n  SelectedObjectUnavailableEvent,\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';\nexport type { AttachPickerFrameOptions } from '@seatlayer/js';\n"],"mappings":"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","names":[]}
+{"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  SEATING_CHART_IDENTITY_PROPS,\n  bindSeatingChartHandle,\n  buildSeatingChartOptions,\n  type RendererViewMode,\n  type SeatingChartHandle,\n  type SeatingChartOptions,\n  type SelectedSeat,\n  type HoldResult,\n  type BestAvailableResult,\n  type GAAreaAvailability,\n  type SeatHoverDetails,\n  type PickerSelectionValidity,\n  type PickerSelectionValidator,\n  type BuyerAccessToken,\n  type BuyerAccessTokenProvider,\n  type BuyerAccessExpiredEvent,\n  type BuyerAccessUnavailableEvent,\n  type SelectedObjectUnavailableEvent,\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. It is the shared\n * `SeatingChartHandle` from `@seatlayer/js`: the same 17 methods React's `ref`\n * and Angular's component expose, from one declaration, so the three wrappers\n * cannot drift apart again.\n */\nexport type SeatingChartExposed = SeatingChartHandle;\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 (`SEATING_CHART_IDENTITY_PROPS`: `event`,\n * `apiBase`, `maxSelection`, `numberOfPlacesToSelect`, `publicKey`, `locale`, `currency`,\n * `colorblindSafe`, `initialView`, `errorDisplay`) trigger a rebuild;\n * everything else is read live, so a parent re-render never destroys the canvas\n * 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    /** Object ids or public labels selected after availability loads. */\n    selectedObjects: { type: Array as PropType<string[]>, default: undefined },\n    /** Object ids or public labels the buyer may select. */\n    selectableObjects: { type: Array as PropType<string[] | null>, default: undefined },\n    /** Exact ticket count required for a valid selection. */\n    numberOfPlacesToSelect: { type: Number, default: undefined },\n    /** Local buyer selection guards. Changing them rebuilds the chart. */\n    selectionValidators: { type: Array as PropType<PickerSelectionValidator[]>, 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    /**\n     * Initial canvas projection. Read once when the chart is built, so\n     * changing it rebuilds.\n     * @deprecated `'isometric'` and `'perspective'` are retired in favour of\n     * the real 3D venue view; use `'flat'`.\n     */\n    initialView: {\n      type: String as PropType<RendererViewMode>,\n      default: undefined,\n    },\n    /**\n     * What the BUYER sees when the chart cannot load: `'message'` (default) is\n     * a styleable notice with a Try again button, `'none'` is silent for hosts\n     * that render their own failure UI from the `error` event.\n     */\n    errorDisplay: {\n      type: String as PropType<'message' | 'none'>,\n      default: undefined,\n    },\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     * Sales Channels: mint a buyer access session on demand. Called with a\n     * `reason`; returns `{ token, expiresAt }` from YOUR backend. The token is\n     * held in memory only — never storage, never a URL, never a log.\n     */\n    buyerAccessTokenProvider: {\n      type: Function as PropType<BuyerAccessTokenProvider>,\n      default: undefined,\n    },\n    /** One-shot session for hosts that own the lifecycle. Cannot be renewed. */\n    buyerAccessToken: {\n      type: [String, Object] as PropType<string | BuyerAccessToken>,\n      default: undefined,\n    },\n  },\n\n  emits: {\n    /** The buyer's selection changed. */\n    'selection-change': (_seats: SelectedSeat[]) => true,\n    /** Exact-count state changed. */\n    'selection-validity-change': (_state: PickerSelectionValidity) => true,\n    /** The exact count was reached. */\n    'selection-valid': (_seats: SelectedSeat[]) => true,\n    /** The selection is not at the exact count. */\n    'selection-invalid': (_state: PickerSelectionValidity) => true,\n    /** The active selection cap was reached. */\n    'selection-limit': (_max: number) => 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    /** The buyer access session lapsed; `refreshed` says whether it recovered. */\n    'access-expired': (_event: BuyerAccessExpiredEvent) => true,\n    /** Private inventory is unavailable and refreshing will not fix it. */\n    'access-unavailable': (_event: BuyerAccessUnavailableEvent) => true,\n    /** Selected-but-unheld units stopped being selectable. */\n    'selected-object-unavailable': (_event: SelectedObjectUnavailableEvent) => 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 onSelectionValidityChange = (state: PickerSelectionValidity) => emit('selection-validity-change', state);\n      const onSelectionValid = (seats: SelectedSeat[]) => emit('selection-valid', seats);\n      const onSelectionInvalid = (state: PickerSelectionValidity) => emit('selection-invalid', state);\n      const onSelectionLimit = (max: number) => emit('selection-limit', max);\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      const onAccessExpired = (state: BuyerAccessExpiredEvent) => emit('access-expired', state);\n      const onAccessUnavailable = (state: BuyerAccessUnavailableEvent) =>\n        emit('access-unavailable', state);\n      const onSelectedObjectUnavailable = (state: SelectedObjectUnavailableEvent) =>\n        emit('selected-object-unavailable', state);\n\n      const instance = new CoreSeatingChart(buildSeatingChartOptions(\n        element,\n        {\n          event: props.event,\n          apiBase: props.apiBase,\n          maxSelection: props.maxSelection,\n          selectedObjects: props.selectedObjects,\n          selectableObjects: props.selectableObjects,\n          numberOfPlacesToSelect: props.numberOfPlacesToSelect,\n          selectionValidators: props.selectionValidators,\n          publicKey: props.publicKey,\n          locale: props.locale,\n          currency: props.currency,\n          colorblindSafe: props.colorblindSafe,\n          initialView: props.initialView,\n          errorDisplay: props.errorDisplay,\n          messages: props.messages,\n          seatTooltip: props.seatTooltip,\n          buyerAccessTokenProvider: props.buyerAccessTokenProvider,\n          buyerAccessToken: props.buyerAccessToken,\n        },\n        {\n          onAccessExpired,\n          onAccessUnavailable,\n          onSelectedObjectUnavailable,\n          onSelectionChange,\n          onSelectionValidityChange,\n          onSelectionValid,\n          onSelectionInvalid,\n          onSelectionLimit,\n          onHold,\n          onHoldRestored,\n          onHoldExpired,\n          onGAClick,\n          onError,\n          onDeckTap,\n          onHint,\n          onSeatHover,\n        },\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        // The shared identity list, not a hand-copied one — this is exactly the\n        // place Vue fell two props behind React.\n        ...SEATING_CHART_IDENTITY_PROPS.map((prop) => props[prop]),\n      ],\n      build,\n      { immediate: true, flush: 'post' },\n    );\n\n    onBeforeUnmount(destroy);\n\n    // Built once and read live: the handle must survive every rebuild, so it\n    // asks for the current instance on each call rather than capturing one.\n    const exposed: SeatingChartExposed = bindSeatingChartHandle(() => chart.value);\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// Sales Channels — buyer access sessions for private channel inventory.\nexport type {\n  BuyerAccessToken,\n  BuyerAccessTokenProvider,\n  BuyerAccessRefreshReason,\n  BuyerAccessUnavailableReason,\n  BuyerAccessExpiredEvent,\n  BuyerAccessUnavailableEvent,\n  SelectedObjectUnavailableEvent,\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';\nexport type { AttachPickerFrameOptions } from '@seatlayer/js';\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seatlayer/vue",
-  "version": "0.56.0",
+  "version": "0.57.0",
   "description": "Vue 3 SeatLayer SDK — one native SeatingChart wrapper plus raw JS SeatPickerWidget and iframe helper.",
   "license": "MIT",
   "homepage": "https://docs.seatlayer.io/buyer-sdk/seat-picker/",
@@ -43,8 +43,8 @@
     "ticketing"
   ],
   "dependencies": {
-    "@seatlayer/core": "0.56.0",
-    "@seatlayer/js": "0.56.0"
+    "@seatlayer/core": "0.57.0",
+    "@seatlayer/js": "0.57.0"
   },
   "peerDependencies": {
     "vue": ">=3.3.0"