@lifestreamdynamics/booking-widget 0.1.0

package/dist/lsv-booking.js

@@ -0,0 +1,784 @@
+var v = Object.defineProperty;
+var y = (p, u, e) => u in p ? v(p, u, { enumerable: !0, configurable: !0, writable: !0, value: e }) : p[u] = e;
+var d = (p, u, e) => y(p, typeof u != "symbol" ? u + "" : u, e);
+const k = `
+  :host {
+    display: block;
+    font-family: system-ui, -apple-system, sans-serif;
+    --lsv-primary-color: #06b6d4;
+    --lsv-border-radius: 0.5rem;
+  }
+
+  :host([theme="light"]) {
+    --lsv-bg-color: #ffffff;
+    --lsv-text-color: #1e293b;
+    --lsv-surface-color: #f8fafc;
+    --lsv-border-color: #e2e8f0;
+    --lsv-muted-color: #64748b;
+    --lsv-input-bg: #ffffff;
+  }
+
+  :host([theme="dark"]), :host {
+    --lsv-bg-color: #0f172a;
+    --lsv-text-color: #e2e8f0;
+    --lsv-surface-color: #1e293b;
+    --lsv-border-color: #334155;
+    --lsv-muted-color: #94a3b8;
+    --lsv-input-bg: #0f172a;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :host([theme="auto"]) {
+      --lsv-bg-color: #ffffff;
+      --lsv-text-color: #1e293b;
+      --lsv-surface-color: #f8fafc;
+      --lsv-border-color: #e2e8f0;
+      --lsv-muted-color: #64748b;
+      --lsv-input-bg: #ffffff;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host([theme="auto"]) {
+      --lsv-bg-color: #0f172a;
+      --lsv-text-color: #e2e8f0;
+      --lsv-surface-color: #1e293b;
+      --lsv-border-color: #334155;
+      --lsv-muted-color: #94a3b8;
+      --lsv-input-bg: #0f172a;
+    }
+  }
+
+  * { box-sizing: border-box; }
+
+  .widget {
+    background: var(--lsv-bg-color);
+    color: var(--lsv-text-color);
+    border: 1px solid var(--lsv-border-color);
+    border-radius: var(--lsv-border-radius);
+    padding: 1.5rem;
+    max-width: 480px;
+    margin: 0 auto;
+  }
+
+  .widget-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 0 0 1rem;
+  }
+
+  .step-indicator {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .step-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--lsv-border-color);
+    transition: background 0.2s;
+  }
+
+  .step-dot.active {
+    background: var(--lsv-primary-color);
+  }
+
+  .step-dot.done {
+    background: var(--lsv-primary-color);
+    opacity: 0.5;
+  }
+
+  /* Loading */
+  .loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 2rem 0;
+    color: var(--lsv-muted-color);
+    font-size: 0.875rem;
+  }
+
+  .spinner {
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--lsv-border-color);
+    border-top-color: var(--lsv-primary-color);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to { transform: rotate(360deg); }
+  }
+
+  /* Error */
+  .error-box {
+    background: rgba(239, 68, 68, 0.1);
+    border: 1px solid rgba(239, 68, 68, 0.4);
+    border-radius: var(--lsv-border-radius);
+    padding: 0.875rem 1rem;
+    font-size: 0.875rem;
+    color: #f87171;
+    margin-bottom: 0.75rem;
+  }
+
+  .btn-retry {
+    display: inline-block;
+    margin-top: 0.75rem;
+    padding: 0.5rem 1rem;
+    background: var(--lsv-surface-color);
+    border: 1px solid var(--lsv-border-color);
+    border-radius: var(--lsv-border-radius);
+    color: var(--lsv-text-color);
+    font-size: 0.8125rem;
+    cursor: pointer;
+  }
+
+  .btn-retry:hover { opacity: 0.8; }
+
+  /* Slot cards */
+  .slot-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+  }
+
+  .slot-card {
+    background: var(--lsv-surface-color);
+    border: 1px solid var(--lsv-border-color);
+    border-radius: var(--lsv-border-radius);
+    padding: 0.875rem 1rem;
+    cursor: pointer;
+    transition: border-color 0.15s;
+    text-align: left;
+    width: 100%;
+    color: var(--lsv-text-color);
+  }
+
+  .slot-card:hover {
+    border-color: var(--lsv-primary-color);
+  }
+
+  .slot-card-title {
+    font-weight: 500;
+    font-size: 0.9375rem;
+    margin: 0 0 0.25rem;
+  }
+
+  .slot-card-meta {
+    font-size: 0.8125rem;
+    color: var(--lsv-muted-color);
+    margin: 0;
+  }
+
+  /* Date picker */
+  .date-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0.25rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .date-header {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    text-align: center;
+    color: var(--lsv-muted-color);
+    padding: 0.25rem 0;
+  }
+
+  .date-cell {
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(var(--lsv-border-radius) * 0.5);
+    font-size: 0.8125rem;
+    cursor: pointer;
+    border: 1px solid transparent;
+    background: transparent;
+    color: var(--lsv-text-color);
+    transition: background 0.15s, border-color 0.15s;
+  }
+
+  .date-cell:hover:not(.disabled) {
+    background: var(--lsv-surface-color);
+    border-color: var(--lsv-border-color);
+  }
+
+  .date-cell.selected {
+    background: var(--lsv-primary-color);
+    color: #0f172a;
+    font-weight: 600;
+  }
+
+  .date-cell.disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .date-cell.empty {
+    cursor: default;
+  }
+
+  /* Time slots */
+  .time-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.5rem;
+  }
+
+  .time-btn {
+    padding: 0.5rem 0.25rem;
+    border: 1px solid var(--lsv-border-color);
+    border-radius: var(--lsv-border-radius);
+    background: var(--lsv-surface-color);
+    color: var(--lsv-text-color);
+    font-size: 0.8125rem;
+    cursor: pointer;
+    transition: border-color 0.15s, background 0.15s;
+  }
+
+  .time-btn:hover {
+    border-color: var(--lsv-primary-color);
+  }
+
+  .time-btn.selected {
+    background: var(--lsv-primary-color);
+    border-color: var(--lsv-primary-color);
+    color: #0f172a;
+    font-weight: 600;
+  }
+
+  /* Form */
+  .form-group {
+    margin-bottom: 0.875rem;
+  }
+
+  .form-label {
+    display: block;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    margin-bottom: 0.375rem;
+    color: var(--lsv-text-color);
+  }
+
+  .form-input, .form-textarea {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    background: var(--lsv-input-bg);
+    border: 1px solid var(--lsv-border-color);
+    border-radius: var(--lsv-border-radius);
+    color: var(--lsv-text-color);
+    font-size: 0.875rem;
+    font-family: inherit;
+    transition: border-color 0.15s;
+  }
+
+  .form-input:focus, .form-textarea:focus {
+    outline: none;
+    border-color: var(--lsv-primary-color);
+  }
+
+  .form-textarea {
+    resize: vertical;
+    min-height: 80px;
+  }
+
+  /* Buttons */
+  .btn-primary {
+    display: block;
+    width: 100%;
+    padding: 0.625rem 1rem;
+    background: var(--lsv-primary-color);
+    border: none;
+    border-radius: var(--lsv-border-radius);
+    color: #0f172a;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: opacity 0.15s;
+    font-family: inherit;
+  }
+
+  .btn-primary:hover:not(:disabled) { opacity: 0.85; }
+  .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+
+  .btn-back {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.375rem 0;
+    background: transparent;
+    border: none;
+    color: var(--lsv-muted-color);
+    font-size: 0.8125rem;
+    cursor: pointer;
+    margin-bottom: 0.75rem;
+    font-family: inherit;
+  }
+
+  .btn-back:hover { color: var(--lsv-text-color); }
+
+  /* Summary */
+  .booking-summary {
+    background: var(--lsv-surface-color);
+    border: 1px solid var(--lsv-border-color);
+    border-radius: var(--lsv-border-radius);
+    padding: 0.75rem 1rem;
+    margin-bottom: 1rem;
+    font-size: 0.8125rem;
+    color: var(--lsv-muted-color);
+  }
+
+  .booking-summary strong {
+    color: var(--lsv-text-color);
+    display: block;
+    font-size: 0.9375rem;
+    margin-bottom: 0.25rem;
+  }
+
+  /* Success */
+  .success-view {
+    text-align: center;
+    padding: 1.5rem 0;
+  }
+
+  .success-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: rgba(6, 182, 212, 0.15);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1rem;
+    font-size: 1.5rem;
+  }
+
+  .success-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 0 0 0.5rem;
+  }
+
+  .success-msg {
+    font-size: 0.875rem;
+    color: var(--lsv-muted-color);
+    margin: 0;
+  }
+
+  .section-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--lsv-muted-color);
+    margin: 0 0 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .empty-msg {
+    padding: 1.5rem 0;
+    text-align: center;
+    color: var(--lsv-muted-color);
+    font-size: 0.875rem;
+  }
+
+  .actions {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
+`, C = ["sun", "mon", "tue", "wed", "thu", "fri", "sat"], x = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+class f extends HTMLElement {
+  constructor() {
+    super();
+    d(this, "root");
+    d(this, "step", "slots");
+    d(this, "slots", []);
+    d(this, "selectedSlot", null);
+    d(this, "selectedDate", "");
+    d(this, "selectedTime", "");
+    d(this, "availableTimes", []);
+    d(this, "isLoading", !1);
+    d(this, "errorMsg", "");
+    this.root = this.attachShadow({ mode: "open" });
+  }
+  connectedCallback() {
+    this.render(), this.loadSlots();
+  }
+  attributeChangedCallback(e, t, r) {
+    t !== r && (e === "theme" ? this.render() : this.isConnected && this.reset());
+  }
+  // ── Getters ──────────────────────────────────────────────────────────────
+  get apiUrl() {
+    return (this.getAttribute("api-url") ?? "").replace(/\/$/, "");
+  }
+  get profileSlug() {
+    return this.getAttribute("profile-slug") ?? "";
+  }
+  get vaultSlug() {
+    return this.getAttribute("vault-slug") ?? "";
+  }
+  get baseApiPath() {
+    return `${this.apiUrl}/api/v1/public/vaults/${this.profileSlug}/${this.vaultSlug}`;
+  }
+  // ── State helpers ────────────────────────────────────────────────────────
+  reset() {
+    this.step = "slots", this.slots = [], this.selectedSlot = null, this.selectedDate = "", this.selectedTime = "", this.availableTimes = [], this.isLoading = !1, this.errorMsg = "", this.render(), this.loadSlots();
+  }
+  setLoading(e) {
+    this.isLoading = e, this.render();
+  }
+  setError(e) {
+    this.errorMsg = e, this.isLoading = !1, this.render();
+  }
+  // ── API calls ─────────────────────────────────────────────────────────────
+  async loadSlots() {
+    this.setLoading(!0);
+    try {
+      const e = await fetch(`${this.baseApiPath}/booking-slots`);
+      if (!e.ok) throw new Error(`HTTP ${e.status}`);
+      const t = await e.json();
+      this.slots = t.slots, this.errorMsg = "";
+    } catch {
+      this.setError("Failed to load booking slots. Please try again.");
+      return;
+    }
+    this.isLoading = !1, this.render();
+  }
+  async loadTimes(e, t) {
+    this.setLoading(!0);
+    try {
+      const r = await fetch(
+        `${this.baseApiPath}/booking-slots/${e}/availability?date=${t}`
+      );
+      if (!r.ok) throw new Error(`HTTP ${r.status}`);
+      const o = await r.json();
+      this.availableTimes = o.times, this.errorMsg = "";
+    } catch {
+      this.setError("Failed to load available times. Please try again.");
+      return;
+    }
+    this.isLoading = !1, this.step = "time", this.render();
+  }
+  async submitBooking(e, t, r, o) {
+    if (!this.selectedSlot || !this.selectedDate || !this.selectedTime) return;
+    this.setLoading(!0);
+    const s = (/* @__PURE__ */ new Date(`${this.selectedDate}T${this.selectedTime}`)).toISOString(), a = this.selectedSlot.id, n = {
+      guestName: e,
+      guestEmail: t,
+      startAt: s
+    };
+    r && (n.guestPhone = r), o && (n.notes = o);
+    try {
+      const c = await fetch(
+        `${this.baseApiPath}/booking-slots/${a}/book`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(n)
+        }
+      );
+      if (!c.ok) {
+        const l = await c.json().catch(() => ({}));
+        throw new Error(l.error ?? l.message ?? `HTTP ${c.status}`);
+      }
+      const i = await c.json();
+      this.isLoading = !1, this.step = "success", this.render(), this.dispatchEvent(new CustomEvent("lsv-booking-submitted", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          bookingId: "",
+          startAt: i.startAt,
+          endAt: "",
+          slotTitle: this.selectedSlot.title
+        }
+      }));
+    } catch (c) {
+      const i = c instanceof Error ? c.message : "Booking failed. Please try again.";
+      this.dispatchEvent(new CustomEvent("lsv-booking-error", {
+        bubbles: !0,
+        composed: !0,
+        detail: { message: i, step: "form" }
+      })), this.setError(i);
+    }
+  }
+  // ── Date helpers ──────────────────────────────────────────────────────────
+  getNextDates() {
+    const e = [], t = /* @__PURE__ */ new Date();
+    t.setHours(0, 0, 0, 0);
+    for (let r = 0; r < 14; r++) {
+      const o = new Date(t);
+      o.setDate(t.getDate() + r);
+      const s = o.toISOString().split("T")[0], a = o.toLocaleDateString("en-US", { month: "short", day: "numeric" });
+      e.push({ date: s, label: a, dayOfWeek: o.getDay() });
+    }
+    return e;
+  }
+  isDateAllowed(e) {
+    if (!this.selectedSlot) return !1;
+    const t = C[e];
+    return this.selectedSlot.daysOfWeek.includes(t);
+  }
+  formatTime(e) {
+    try {
+      if (e.includes("T"))
+        return new Date(e).toLocaleTimeString("en-US", {
+          hour: "numeric",
+          minute: "2-digit",
+          hour12: !0
+        });
+      const [t, r] = e.split(":").map(Number), o = /* @__PURE__ */ new Date();
+      return o.setHours(t, r, 0, 0), o.toLocaleTimeString("en-US", { hour: "numeric", minute: "2-digit", hour12: !0 });
+    } catch {
+      return e;
+    }
+  }
+  formatDate(e) {
+    try {
+      return (/* @__PURE__ */ new Date(`${e}T12:00:00`)).toLocaleDateString("en-US", { weekday: "short", month: "short", day: "numeric" });
+    } catch {
+      return e;
+    }
+  }
+  // ── Render ────────────────────────────────────────────────────────────────
+  render() {
+    const e = document.createElement("style");
+    e.textContent = k;
+    const t = document.createElement("div");
+    if (t.className = "widget", this.step === "success")
+      t.appendChild(this.renderSuccess());
+    else if (t.appendChild(this.renderStepIndicator()), this.isLoading)
+      t.appendChild(this.renderLoading());
+    else if (this.errorMsg)
+      t.appendChild(this.renderError());
+    else
+      switch (this.step) {
+        case "slots":
+          t.appendChild(this.renderSlots());
+          break;
+        case "date":
+          t.appendChild(this.renderDate());
+          break;
+        case "time":
+          t.appendChild(this.renderTime());
+          break;
+        case "form":
+          t.appendChild(this.renderForm());
+          break;
+      }
+    this.root.replaceChildren(e, t), this.attachEvents();
+  }
+  renderStepIndicator() {
+    const e = ["slots", "date", "time", "form"], t = e.indexOf(this.step), r = document.createElement("div");
+    return r.className = "step-indicator", e.forEach((o, s) => {
+      const a = document.createElement("div");
+      a.className = `step-dot${s === t ? " active" : s < t ? " done" : ""}`, r.appendChild(a);
+    }), r;
+  }
+  renderLoading() {
+    const e = document.createElement("div");
+    e.className = "loading";
+    const t = document.createElement("div");
+    t.className = "spinner";
+    const r = document.createElement("span");
+    return r.textContent = "Loading…", e.appendChild(t), e.appendChild(r), e;
+  }
+  renderError() {
+    const e = document.createDocumentFragment(), t = document.createElement("div");
+    t.className = "error-box", t.textContent = this.errorMsg, e.appendChild(t);
+    const r = document.createElement("button");
+    r.className = "btn-retry", r.dataset.action = "retry", r.textContent = "Try again", e.appendChild(r);
+    const o = document.createElement("div");
+    return o.appendChild(e), o;
+  }
+  renderSlots() {
+    const e = document.createDocumentFragment(), t = document.createElement("p");
+    if (t.className = "section-title", t.textContent = "Choose a booking type", e.appendChild(t), this.slots.length === 0) {
+      const o = document.createElement("p");
+      o.className = "empty-msg", o.textContent = "No booking slots available.", e.appendChild(o);
+    } else {
+      const o = document.createElement("div");
+      o.className = "slot-list", this.slots.forEach((s) => {
+        const a = document.createElement("button");
+        a.className = "slot-card", a.dataset.action = "select-slot", a.dataset.slotId = s.id;
+        const n = document.createElement("p");
+        n.className = "slot-card-title", n.textContent = s.title;
+        const c = document.createElement("p");
+        c.className = "slot-card-meta";
+        const i = this.formatDayList(s.daysOfWeek);
+        if (c.textContent = `${s.durationMin} min  ·  ${i}  ·  ${s.startTime}–${s.endTime}`, a.appendChild(n), s.description) {
+          const l = document.createElement("p");
+          l.className = "slot-card-meta", l.style.marginTop = "0.25rem", l.textContent = s.description, a.appendChild(l);
+        }
+        a.appendChild(c), o.appendChild(a);
+      }), e.appendChild(o);
+    }
+    const r = document.createElement("div");
+    return r.appendChild(e), r;
+  }
+  formatDayList(e) {
+    if (e.length === 7) return "Every day";
+    if (e.length === 5 && !e.includes("sat") && !e.includes("sun")) return "Weekdays";
+    if (e.length === 2 && e.includes("sat") && e.includes("sun")) return "Weekends";
+    const t = {
+      mon: "Mon",
+      tue: "Tue",
+      wed: "Wed",
+      thu: "Thu",
+      fri: "Fri",
+      sat: "Sat",
+      sun: "Sun"
+    };
+    return e.map((r) => t[r] ?? r).join(", ");
+  }
+  renderDate() {
+    var c;
+    const e = document.createDocumentFragment(), t = document.createElement("button");
+    t.className = "btn-back", t.dataset.action = "back-to-slots", t.textContent = "← Back", e.appendChild(t);
+    const r = document.createElement("p");
+    r.className = "section-title", r.textContent = "Select a date", e.appendChild(r);
+    const o = this.getNextDates(), s = document.createElement("div");
+    s.className = "date-grid", x.forEach((i) => {
+      const l = document.createElement("div");
+      l.className = "date-header", l.textContent = i, s.appendChild(l);
+    });
+    const a = ((c = o[0]) == null ? void 0 : c.dayOfWeek) ?? 0;
+    for (let i = 0; i < a; i++) {
+      const l = document.createElement("div");
+      l.className = "date-cell empty", s.appendChild(l);
+    }
+    o.forEach(({ date: i, label: l, dayOfWeek: h }) => {
+      const m = document.createElement("button"), g = this.isDateAllowed(h);
+      m.className = `date-cell${g ? "" : " disabled"}${i === this.selectedDate ? " selected" : ""}`, m.textContent = (/* @__PURE__ */ new Date(`${i}T12:00:00`)).getDate().toString(), m.title = l, g ? (m.dataset.action = "select-date", m.dataset.date = i) : m.disabled = !0, s.appendChild(m);
+    }), e.appendChild(s);
+    const n = document.createElement("div");
+    return n.appendChild(e), n;
+  }
+  renderTime() {
+    const e = document.createDocumentFragment(), t = document.createElement("button");
+    t.className = "btn-back", t.dataset.action = "back-to-date", t.textContent = "← Back", e.appendChild(t);
+    const r = document.createElement("p");
+    if (r.className = "section-title", r.textContent = `Available times · ${this.formatDate(this.selectedDate)}`, e.appendChild(r), this.availableTimes.length === 0) {
+      const s = document.createElement("p");
+      s.className = "empty-msg", s.textContent = "No times available on this date. Try another day.", e.appendChild(s);
+    } else {
+      const s = document.createElement("div");
+      s.className = "time-grid", this.availableTimes.forEach((a) => {
+        const n = document.createElement("button");
+        n.className = `time-btn${a === this.selectedTime ? " selected" : ""}`, n.dataset.action = "select-time", n.dataset.time = a, n.textContent = this.formatTime(a), s.appendChild(n);
+      }), e.appendChild(s);
+    }
+    if (this.selectedTime) {
+      const s = document.createElement("div");
+      s.className = "actions";
+      const a = document.createElement("button");
+      a.className = "btn-primary", a.dataset.action = "go-to-form", a.textContent = "Continue", s.appendChild(a), e.appendChild(s);
+    }
+    const o = document.createElement("div");
+    return o.appendChild(e), o;
+  }
+  renderForm() {
+    var g, b;
+    const e = document.createDocumentFragment(), t = document.createElement("button");
+    t.className = "btn-back", t.dataset.action = "back-to-time", t.textContent = "← Back", e.appendChild(t);
+    const r = document.createElement("div");
+    r.className = "booking-summary";
+    const o = document.createElement("strong");
+    o.textContent = ((g = this.selectedSlot) == null ? void 0 : g.title) ?? "", r.appendChild(o);
+    const s = document.createElement("span");
+    s.textContent = `${this.formatDate(this.selectedDate)} at ${this.formatTime(this.selectedTime)}`, r.appendChild(s), e.appendChild(r);
+    const a = document.createElement("form");
+    a.id = "lsv-booking-form", a.appendChild(this.makeField("guestName", "Full name", "text", !0)), a.appendChild(this.makeField("guestEmail", "Email address", "email", !0)), (b = this.selectedSlot) != null && b.requirePhone && a.appendChild(this.makeField("guestPhone", "Phone number", "tel", !0));
+    const n = document.createElement("div");
+    n.className = "form-group";
+    const c = document.createElement("label");
+    c.className = "form-label", c.setAttribute("for", "lsv-notes"), c.textContent = "Notes (optional)";
+    const i = document.createElement("textarea");
+    i.className = "form-textarea", i.id = "lsv-notes", i.name = "notes", i.rows = 3, i.placeholder = "Anything you'd like to share…", n.appendChild(c), n.appendChild(i), a.appendChild(n);
+    const l = document.createElement("div");
+    l.className = "actions";
+    const h = document.createElement("button");
+    h.type = "submit", h.className = "btn-primary", h.textContent = "Confirm Booking", l.appendChild(h), a.appendChild(l), e.appendChild(a);
+    const m = document.createElement("div");
+    return m.appendChild(e), m;
+  }
+  makeField(e, t, r, o) {
+    const s = document.createElement("div");
+    s.className = "form-group";
+    const a = document.createElement("label");
+    a.className = "form-label", a.setAttribute("for", `lsv-${e}`), a.textContent = o ? `${t} *` : t;
+    const n = document.createElement("input");
+    return n.className = "form-input", n.type = r, n.id = `lsv-${e}`, n.name = e, n.required = o, n.autocomplete = e === "guestName" ? "name" : e === "guestEmail" ? "email" : e === "guestPhone" ? "tel" : "off", s.appendChild(a), s.appendChild(n), s;
+  }
+  renderSuccess() {
+    const e = document.createElement("div");
+    e.className = "success-view";
+    const t = document.createElement("div");
+    t.className = "success-icon", t.textContent = "✓";
+    const r = document.createElement("p");
+    r.className = "success-title", r.textContent = "Booking requested!";
+    const o = document.createElement("p");
+    return o.className = "success-msg", o.textContent = "Check your email to confirm your booking.", e.appendChild(t), e.appendChild(r), e.appendChild(o), e;
+  }
+  // ── Event handling ────────────────────────────────────────────────────────
+  attachEvents() {
+    this.root.addEventListener("click", (t) => {
+      const o = t.target.closest("[data-action]");
+      o && this.handleAction(o.dataset.action ?? "", o);
+    });
+    const e = this.root.querySelector("#lsv-booking-form");
+    e && e.addEventListener("submit", (t) => {
+      t.preventDefault();
+      const r = new FormData(e), o = (r.get("guestName") ?? "").trim(), s = (r.get("guestEmail") ?? "").trim(), a = (r.get("guestPhone") ?? "").trim(), n = (r.get("notes") ?? "").trim();
+      !o || !s || this.submitBooking(o, s, a, n);
+    });
+  }
+  handleAction(e, t) {
+    switch (e) {
+      case "retry":
+        this.errorMsg = "", this.step === "slots" ? this.loadSlots() : this.step === "time" && this.selectedSlot ? this.loadTimes(this.selectedSlot.id, this.selectedDate) : this.render();
+        break;
+      case "select-slot": {
+        const r = t.dataset.slotId, o = this.slots.find((s) => s.id === r);
+        if (!o) return;
+        this.selectedSlot = o, this.step = "date", this.render();
+        break;
+      }
+      case "back-to-slots":
+        this.selectedSlot = null, this.selectedDate = "", this.selectedTime = "", this.step = "slots", this.render();
+        break;
+      case "select-date": {
+        const r = t.dataset.date;
+        if (!r || !this.selectedSlot) return;
+        this.selectedDate = r, this.selectedTime = "", this.loadTimes(this.selectedSlot.id, r);
+        break;
+      }
+      case "back-to-date":
+        this.selectedTime = "", this.step = "date", this.render();
+        break;
+      case "select-time": {
+        const r = t.dataset.time;
+        if (!r) return;
+        this.selectedTime = r, this.render();
+        break;
+      }
+      case "go-to-form":
+        this.selectedTime && (this.step = "form", this.render());
+        break;
+      case "back-to-time":
+        this.step = "time", this.render();
+        break;
+    }
+  }
+}
+d(f, "observedAttributes", ["api-url", "profile-slug", "vault-slug", "theme"]);
+customElements.get("lsv-booking") || customElements.define("lsv-booking", f);
+export {
+  f as LsvBooking
+};