@bookitive/widget-js 0.1.0

package/README.md

@@ -0,0 +1,50 @@
+# @bookitive/widget-js
+
+Typed loader for the embeddable **Bookitive** seat-map widget — the same pattern
+as [`@stripe/stripe-js`](https://github.com/stripe/stripe-js).
+
+The widget is a UI runtime (seat map, live availability, checkout) served from a
+versioned CDN bundle. **Don't bundle it** — this package injects that `<script>`
+for you and returns a fully typed `mount()`, so you get type-safety and clean
+imports while the runtime keeps auto-updating from the CDN.
+
+```bash
+npm i @bookitive/widget-js
+```
+
+```ts
+import { loadBookitive, type BookitiveCustomEvent } from "@bookitive/widget-js";
+
+const bk = await loadBookitive(); // injects events.bookitive.com/widget/v1.js
+const el = document.getElementById("seatmap")!;
+
+const controller = bk.mount(el, {
+  org: "purples",
+  event: "purples-2026",
+  legend: true,
+});
+
+el.addEventListener("bookitive:selectionchanged", (e) => {
+  const { selection, totalCents } = (
+    e as BookitiveCustomEvent<"bookitive:selectionchanged">
+  ).detail;
+  // update your cart…
+});
+
+// later
+controller.destroy();
+```
+
+### `loadBookitive(options?)`
+
+- `scriptOrigin` — origin serving the bundle (default `https://events.bookitive.com`).
+- `version` — widget runtime major (default `"v1"`).
+
+Idempotent: repeated calls reuse the in-flight promise / already-loaded global.
+Rejects during SSR (no `window`), so call it from `onMount`/`useEffect`.
+
+The host page owns tabs, cart and the checkout button; the widget reports
+everything through bubbling `CustomEvent`s (`bookitive:ready`,
+`bookitive:selectionchanged`, `bookitive:seatselected`,
+`bookitive:seatdeselected`, `bookitive:error`) — all typed via
+`BookitiveCustomEvent<'…'>`.

package/dist/index.d.ts

@@ -0,0 +1,99 @@
+interface WidgetOptions {
+    /** API origin; defaults to the production API. */
+    baseUrl?: string;
+    /** Organization slug. */
+    org: string;
+    /** Event slug. */
+    event: string;
+    /** Floor id to render first (from bookitive:ready → event.floors); default first. */
+    floor?: string;
+    /** Show seat code labels on the map. */
+    showLabels?: boolean;
+    /** Render a legend (ticket-type colours + seat statuses) above the map. */
+    legend?: boolean;
+    /** Show the "Powered by Bookitive" credit below the map (default true). */
+    credit?: boolean;
+}
+interface SelectionItem {
+    seatId: string;
+    code: string;
+    /** Pretty localized label, e.g. "Stůl A7 · Místo 3". */
+    label: string;
+    ticketTypeId: string;
+    ticketTypeName: string;
+    priceCents: number;
+}
+interface CheckoutInput {
+    customer: {
+        name: string;
+        email: string;
+        phone?: string;
+    };
+    /** Standing/GA quantities the host sells outside the map. */
+    extraItems?: {
+        ticketTypeId: string;
+        gaAreaId?: string;
+        quantity: number;
+    }[];
+    captchaToken?: string;
+}
+interface CheckoutResult {
+    reference?: string;
+    status?: string;
+    totalCents?: number;
+    currency?: string;
+    expiresAt?: string;
+    payment?: {
+        bankAccount?: string;
+        variableSymbol?: string;
+    };
+}
+/** The handle mount() returns. */
+interface WidgetController {
+    setFloor: (floorId: string) => void;
+    getSelection: () => SelectionItem[];
+    clearSelection: () => void;
+    checkout: (input: CheckoutInput) => Promise<CheckoutResult>;
+    destroy: () => void;
+}
+/** The global the CDN runtime installs on `window`. */
+interface Bookitive {
+    mount: (el: HTMLElement, options: WidgetOptions) => WidgetController;
+}
+interface BookitiveEventDetail {
+    "bookitive:ready": {
+        event: unknown;
+    };
+    "bookitive:selectionchanged": {
+        selection: SelectionItem[];
+        totalCents: number;
+    };
+    "bookitive:seatselected": {
+        seatId: string;
+        code?: string;
+    };
+    "bookitive:seatdeselected": {
+        seatId: string;
+        code?: string;
+        reason?: "taken";
+    };
+    "bookitive:error": {
+        message: string;
+    };
+}
+type BookitiveEventName = keyof BookitiveEventDetail;
+type BookitiveCustomEvent<K extends BookitiveEventName> = CustomEvent<BookitiveEventDetail[K]>;
+interface LoadBookitiveOptions {
+    /** Origin serving the widget bundle. Default: https://events.bookitive.com */
+    scriptOrigin?: string;
+    /** Major version of the widget runtime. Default: "v1". */
+    version?: string;
+}
+/**
+ * Inject the Bookitive widget runtime from the CDN (once) and resolve to the
+ * typed global. Safe to call repeatedly — subsequent calls reuse the same
+ * in-flight promise / already-loaded global. Rejects during SSR (no `window`).
+ */
+declare function loadBookitive(options?: LoadBookitiveOptions): Promise<Bookitive>;
+
+export { type Bookitive, type BookitiveCustomEvent, type BookitiveEventDetail, type BookitiveEventName, type CheckoutInput, type CheckoutResult, type LoadBookitiveOptions, type SelectionItem, type WidgetController, type WidgetOptions, loadBookitive };

package/dist/index.js

@@ -0,0 +1,53 @@
+// src/index.ts
+var SCRIPT_ATTR = "data-bookitive-widget";
+var pending = null;
+function existingGlobal() {
+  if (typeof window === "undefined") return null;
+  return window.Bookitive ?? null;
+}
+function loadBookitive(options = {}) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return Promise.reject(new Error("loadBookitive() must run in the browser"));
+  }
+  const already = existingGlobal();
+  if (already) return Promise.resolve(already);
+  if (pending) return pending;
+  const origin = (options.scriptOrigin ?? "https://events.bookitive.com").replace(/\/+$/, "");
+  const version = options.version ?? "v1";
+  const src = `${origin}/widget/${version}.js`;
+  pending = new Promise((resolve, reject) => {
+    const settle = () => {
+      const bk = existingGlobal();
+      if (bk) resolve(bk);
+      else
+        reject(
+          new Error("Bookitive global missing after the widget script loaded")
+        );
+    };
+    const fail = () => {
+      pending = null;
+      reject(new Error(`Failed to load the Bookitive widget from ${src}`));
+    };
+    const existing = document.querySelector(
+      `script[${SCRIPT_ATTR}]`
+    );
+    if (existing) {
+      if (existingGlobal()) return settle();
+      existing.addEventListener("load", settle, { once: true });
+      existing.addEventListener("error", fail, { once: true });
+      return;
+    }
+    const s = document.createElement("script");
+    s.src = src;
+    s.async = true;
+    s.setAttribute(SCRIPT_ATTR, "");
+    s.addEventListener("load", settle, { once: true });
+    s.addEventListener("error", fail, { once: true });
+    document.head.appendChild(s);
+  });
+  return pending;
+}
+export {
+  loadBookitive
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// @bookitive/widget-js — a thin, typed loader for the embeddable Bookitive\n// seat-map widget, in the spirit of @stripe/stripe-js.\n//\n// The widget itself is a UI runtime (Svelte + the seat-map renderer + live\n// availability) served from a versioned CDN bundle — you should NOT bundle it\n// into your app. This package injects that <script> for you and hands back a\n// fully typed `Bookitive.mount()`, so hosts get type-safety and clean imports\n// while the runtime keeps auto-updating from the CDN.\n//\n//   import { loadBookitive } from '@bookitive/widget-js';\n//   const bk = await loadBookitive();\n//   const controller = bk.mount(el, { org: 'purples', event: 'purples-2026', legend: true });\n//   el.addEventListener('bookitive:selectionchanged', (e) => {\n//     const { selection, totalCents } = (e as BookitiveCustomEvent<'bookitive:selectionchanged'>).detail;\n//   });\n\n// --- mount surface (mirrors the widget's public API) -------------------------\n\nexport interface WidgetOptions {\n  /** API origin; defaults to the production API. */\n  baseUrl?: string;\n  /** Organization slug. */\n  org: string;\n  /** Event slug. */\n  event: string;\n  /** Floor id to render first (from bookitive:ready → event.floors); default first. */\n  floor?: string;\n  /** Show seat code labels on the map. */\n  showLabels?: boolean;\n  /** Render a legend (ticket-type colours + seat statuses) above the map. */\n  legend?: boolean;\n  /** Show the \"Powered by Bookitive\" credit below the map (default true). */\n  credit?: boolean;\n}\n\nexport interface SelectionItem {\n  seatId: string;\n  code: string;\n  /** Pretty localized label, e.g. \"Stůl A7 · Místo 3\". */\n  label: string;\n  ticketTypeId: string;\n  ticketTypeName: string;\n  priceCents: number;\n}\n\nexport interface CheckoutInput {\n  customer: { name: string; email: string; phone?: string };\n  /** Standing/GA quantities the host sells outside the map. */\n  extraItems?: { ticketTypeId: string; gaAreaId?: string; quantity: number }[];\n  captchaToken?: string;\n}\n\nexport interface CheckoutResult {\n  reference?: string;\n  status?: string;\n  totalCents?: number;\n  currency?: string;\n  expiresAt?: string;\n  payment?: { bankAccount?: string; variableSymbol?: string };\n}\n\n/** The handle mount() returns. */\nexport interface WidgetController {\n  setFloor: (floorId: string) => void;\n  getSelection: () => SelectionItem[];\n  clearSelection: () => void;\n  checkout: (input: CheckoutInput) => Promise<CheckoutResult>;\n  destroy: () => void;\n}\n\n/** The global the CDN runtime installs on `window`. */\nexport interface Bookitive {\n  mount: (el: HTMLElement, options: WidgetOptions) => WidgetController;\n}\n\n// --- CustomEvents the widget dispatches (bubble from the mount element) -------\n\nexport interface BookitiveEventDetail {\n  \"bookitive:ready\": { event: unknown };\n  \"bookitive:selectionchanged\": {\n    selection: SelectionItem[];\n    totalCents: number;\n  };\n  \"bookitive:seatselected\": { seatId: string; code?: string };\n  \"bookitive:seatdeselected\": {\n    seatId: string;\n    code?: string;\n    reason?: \"taken\";\n  };\n  \"bookitive:error\": { message: string };\n}\nexport type BookitiveEventName = keyof BookitiveEventDetail;\nexport type BookitiveCustomEvent<K extends BookitiveEventName> = CustomEvent<\n  BookitiveEventDetail[K]\n>;\n\n// --- loader ------------------------------------------------------------------\n\nexport interface LoadBookitiveOptions {\n  /** Origin serving the widget bundle. Default: https://events.bookitive.com */\n  scriptOrigin?: string;\n  /** Major version of the widget runtime. Default: \"v1\". */\n  version?: string;\n}\n\nconst SCRIPT_ATTR = \"data-bookitive-widget\";\nlet pending: Promise<Bookitive> | null = null;\n\nfunction existingGlobal(): Bookitive | null {\n  if (typeof window === \"undefined\") return null;\n  return (window as unknown as { Bookitive?: Bookitive }).Bookitive ?? null;\n}\n\n/**\n * Inject the Bookitive widget runtime from the CDN (once) and resolve to the\n * typed global. Safe to call repeatedly — subsequent calls reuse the same\n * in-flight promise / already-loaded global. Rejects during SSR (no `window`).\n */\nexport function loadBookitive(\n  options: LoadBookitiveOptions = {},\n): Promise<Bookitive> {\n  if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n    return Promise.reject(new Error(\"loadBookitive() must run in the browser\"));\n  }\n  const already = existingGlobal();\n  if (already) return Promise.resolve(already);\n  if (pending) return pending;\n\n  const origin = (\n    options.scriptOrigin ?? \"https://events.bookitive.com\"\n  ).replace(/\\/+$/, \"\");\n  const version = options.version ?? \"v1\";\n  const src = `${origin}/widget/${version}.js`;\n\n  pending = new Promise<Bookitive>((resolve, reject) => {\n    const settle = () => {\n      const bk = existingGlobal();\n      if (bk) resolve(bk);\n      else\n        reject(\n          new Error(\"Bookitive global missing after the widget script loaded\"),\n        );\n    };\n    const fail = () => {\n      pending = null;\n      reject(new Error(`Failed to load the Bookitive widget from ${src}`));\n    };\n\n    // Reuse a script tag another loadBookitive() (or a manual embed) added.\n    const existing = document.querySelector<HTMLScriptElement>(\n      `script[${SCRIPT_ATTR}]`,\n    );\n    if (existing) {\n      if (existingGlobal()) return settle();\n      existing.addEventListener(\"load\", settle, { once: true });\n      existing.addEventListener(\"error\", fail, { once: true });\n      return;\n    }\n\n    const s = document.createElement(\"script\");\n    s.src = src;\n    s.async = true;\n    s.setAttribute(SCRIPT_ATTR, \"\");\n    s.addEventListener(\"load\", settle, { once: true });\n    s.addEventListener(\"error\", fail, { once: true });\n    document.head.appendChild(s);\n  });\n  return pending;\n}\n"],"mappings":";AAyGA,IAAM,cAAc;AACpB,IAAI,UAAqC;AAEzC,SAAS,iBAAmC;AAC1C,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAQ,OAAgD,aAAa;AACvE;AAOO,SAAS,cACd,UAAgC,CAAC,GACb;AACpB,MAAI,OAAO,WAAW,eAAe,OAAO,aAAa,aAAa;AACpE,WAAO,QAAQ,OAAO,IAAI,MAAM,yCAAyC,CAAC;AAAA,EAC5E;AACA,QAAM,UAAU,eAAe;AAC/B,MAAI,QAAS,QAAO,QAAQ,QAAQ,OAAO;AAC3C,MAAI,QAAS,QAAO;AAEpB,QAAM,UACJ,QAAQ,gBAAgB,gCACxB,QAAQ,QAAQ,EAAE;AACpB,QAAM,UAAU,QAAQ,WAAW;AACnC,QAAM,MAAM,GAAG,MAAM,WAAW,OAAO;AAEvC,YAAU,IAAI,QAAmB,CAAC,SAAS,WAAW;AACpD,UAAM,SAAS,MAAM;AACnB,YAAM,KAAK,eAAe;AAC1B,UAAI,GAAI,SAAQ,EAAE;AAAA;AAEhB;AAAA,UACE,IAAI,MAAM,yDAAyD;AAAA,QACrE;AAAA,IACJ;AACA,UAAM,OAAO,MAAM;AACjB,gBAAU;AACV,aAAO,IAAI,MAAM,4CAA4C,GAAG,EAAE,CAAC;AAAA,IACrE;AAGA,UAAM,WAAW,SAAS;AAAA,MACxB,UAAU,WAAW;AAAA,IACvB;AACA,QAAI,UAAU;AACZ,UAAI,eAAe,EAAG,QAAO,OAAO;AACpC,eAAS,iBAAiB,QAAQ,QAAQ,EAAE,MAAM,KAAK,CAAC;AACxD,eAAS,iBAAiB,SAAS,MAAM,EAAE,MAAM,KAAK,CAAC;AACvD;AAAA,IACF;AAEA,UAAM,IAAI,SAAS,cAAc,QAAQ;AACzC,MAAE,MAAM;AACR,MAAE,QAAQ;AACV,MAAE,aAAa,aAAa,EAAE;AAC9B,MAAE,iBAAiB,QAAQ,QAAQ,EAAE,MAAM,KAAK,CAAC;AACjD,MAAE,iBAAiB,SAAS,MAAM,EAAE,MAAM,KAAK,CAAC;AAChD,aAAS,KAAK,YAAY,CAAC;AAAA,EAC7B,CAAC;AACD,SAAO;AACT;","names":[]}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@bookitive/widget-js",
+  "version": "0.1.0",
+  "description": "Loader + TypeScript types for the embeddable Bookitive seat-map widget. Injects the CDN runtime (like @stripe/stripe-js) and returns a typed mount().",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "keywords": [
+    "bookitive",
+    "seatmap",
+    "tickets",
+    "widget",
+    "embed"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "prettier": "^3.4.2",
+    "tsup": "^8.5.1",
+    "typescript": "^5.7.3"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --sourcemap",
+    "check": "tsc --noEmit",
+    "lint": "prettier --check src"
+  }
+}