@forgebuild/hotal-ui 0.8.2 → 0.9.0

package/dist/hotal-ui.js

@@ -13023,8 +13023,242 @@ var Fh, Ih, Lh, Rh, zh, Bh, Vh, Hh, Uh, Wh, Gh, Kh, qh, Jh, Yh = o((() => {
 		requestCancel: { type: "Object" },
 		confirmCancel: { type: "Object" }
 	}, [], [], { mode: "open" }));
+})), Xh = /* @__PURE__ */ c({ default: () => Zh });
+function Zh(e, t) {
+	dt(t, !0), Ea(e, cg);
+	let n = (e) => {
+		var t = $h();
+		let n;
+		var r = H(t), i = (e) => {
+			X(e, wi("Connecting…"));
+		}, a = (e) => {
+			X(e, wi("Live updates unavailable — showing loaded reservations only."));
+		}, o = (e) => {
+			var t = Qh();
+			Ye(), X(e, t);
+		};
+		Q(r, (e) => {
+			K(f) === "connecting" ? e(i) : K(f) === "error" ? e(a, 1) : e(o, -1);
+		}), P(t), W(() => n = Ia(t, 1, "lrf-status svelte-1d6cuoy", null, n, { "lrf-status-error": K(f) === "error" })), X(e, t);
+	}, r = $(t, "heading", 7), i = $(t, "channelName", 7), a = $(t, "ablyAuthUrl", 7), o = $(t, "fetchReservations", 7), s = $(t, "restaurants", 7), c = $(t, "maxItems", 7, 30), l = $(t, "emptyLabel", 7, "No reservations yet."), d = /* @__PURE__ */ B(Un([])), f = /* @__PURE__ */ B("connecting"), p = /* @__PURE__ */ nn(() => new Map((s() ?? []).map((e) => [e.id, e.name])));
+	function m(e) {
+		let t = K(d).filter((t) => t.id !== e.id);
+		V(d, [e, ...t].slice(0, c()), !0);
+	}
+	function h(e) {
+		try {
+			return (/* @__PURE__ */ new Date(`${e}T00:00:00`)).toLocaleDateString(void 0, {
+				month: "short",
+				day: "numeric",
+				year: "numeric"
+			});
+		} catch {
+			return e;
+		}
+	}
+	function g(e) {
+		let [t, n] = e.split(":"), r = Number(t);
+		if (Number.isNaN(r) || n === void 0) return e;
+		let i = r >= 12 ? "PM" : "AM";
+		return `${r % 12 == 0 ? 12 : r % 12}:${n} ${i}`;
+	}
+	function _(e) {
+		try {
+			return new Date(e).toLocaleString(void 0, {
+				month: "short",
+				day: "numeric",
+				hour: "numeric",
+				minute: "2-digit"
+			});
+		} catch {
+			return e;
+		}
+	}
+	fr(() => {
+		if (typeof window > "u" || !i() || !a()) return;
+		let e, t = !1;
+		return (async () => {
+			if (o()) try {
+				let e = await o()();
+				t || V(d, e.slice(0, c()), !0);
+			} catch (e) {
+				console.error("live-reservations-feed: failed to load existing reservations", e);
+			}
+			try {
+				let { default: n } = await Promise.resolve().then(() => /* @__PURE__ */ u(th()));
+				if (t) return;
+				e = new n.Realtime({ authUrl: a() });
+				let r = e.channels.get(i());
+				e.connection.on("connected", () => {
+					t || V(f, "connected");
+				}), e.connection.on("failed", () => {
+					t || V(f, "error");
+				}), await r.subscribe("new-reservation", (e) => {
+					t || m(e.data);
+				}), await r.subscribe("reservation-status-changed", (e) => {
+					t || m(e.data);
+				});
+			} catch (e) {
+				console.error("live-reservations-feed: Ably connection failed", e), t || V(f, "error");
+			}
+		})(), () => {
+			t = !0, e?.close();
+		};
+	});
+	var v = {
+		get heading() {
+			return r();
+		},
+		set heading(e) {
+			r(e), R();
+		},
+		get channelName() {
+			return i();
+		},
+		set channelName(e) {
+			i(e), R();
+		},
+		get ablyAuthUrl() {
+			return a();
+		},
+		set ablyAuthUrl(e) {
+			a(e), R();
+		},
+		get fetchReservations() {
+			return o();
+		},
+		set fetchReservations(e) {
+			o(e), R();
+		},
+		get restaurants() {
+			return s();
+		},
+		set restaurants(e) {
+			s(e), R();
+		},
+		get maxItems() {
+			return c();
+		},
+		set maxItems(e = 30) {
+			c(e), R();
+		},
+		get emptyLabel() {
+			return l();
+		},
+		set emptyLabel(e = "No reservations yet.") {
+			l(e), R();
+		}
+	}, y = sg(), b = H(y), x = (e) => {
+		var t = eg(), i = H(t), a = H(i, !0);
+		P(i);
+		var o = U(i, 2);
+		n(o), P(t), W(() => Z(a, r())), X(e, t);
+	}, S = (e) => {
+		n(e);
+	};
+	Q(b, (e) => {
+		r() ? e(x) : e(S, -1);
+	});
+	var C = U(b, 2), w = (e) => {
+		var t = tg(), n = H(t, !0);
+		P(t), W(() => Z(n, l())), X(e, t);
+	}, T = (e) => {
+		var t = og();
+		ua(t, 21, () => K(d), (e) => e.id, (e, t) => {
+			var n = ag(), r = H(n), i = H(r), a = H(i, !0);
+			P(i);
+			var o = U(i, 2), s = H(o);
+			let c;
+			var l = H(s, !0);
+			P(s);
+			var u = U(s, 2), d = H(u);
+			P(u), P(o), P(r);
+			var f = U(r, 2), m = H(f), v = U(H(m));
+			P(m);
+			var y = U(m, 2), b = U(H(y));
+			P(y);
+			var x = U(y, 2), S = U(H(x));
+			P(x);
+			var C = U(x, 2), w = (e) => {
+				var n = ng(), r = H(n, !0);
+				P(n), W((e) => Z(r, e), [() => K(p).get(K(t).restaurant_id)]), X(e, n);
+			}, T = /* @__PURE__ */ nn(() => K(t).restaurant_id && K(p).get(K(t).restaurant_id));
+			Q(C, (e) => {
+				K(T) && e(w);
+			});
+			var E = U(C, 2), D = (e) => {
+				var n = ng(), r = H(n);
+				P(n), W(() => Z(r, `Table ${K(t).table_number ?? ""}`)), X(e, n);
+			};
+			Q(E, (e) => {
+				K(t).table_number && e(D);
+			}), P(f);
+			var ee = U(f, 2), O = (e) => {
+				var n = ig(), r = H(n), i = (e) => {
+					var n = rg(), r = H(n, !0);
+					P(n), W(() => {
+						Ua(n, "href", `mailto:${K(t).contact_email}`), Z(r, K(t).contact_email);
+					}), X(e, n);
+				};
+				Q(r, (e) => {
+					K(t).contact_email && e(i);
+				});
+				var a = U(r, 2), o = (e) => {
+					var n = ng(), r = H(n, !0);
+					P(n), W(() => Z(r, K(t).contact_phone)), X(e, n);
+				};
+				Q(a, (e) => {
+					K(t).contact_phone && e(o);
+				}), P(n), X(e, n);
+			};
+			Q(ee, (e) => {
+				(K(t).contact_email || K(t).contact_phone) && e(O);
+			}), P(n), W((e, n, r) => {
+				Z(a, K(t).contact_name), c = Ia(s, 1, "lrf-item-status svelte-1d6cuoy", null, c, {
+					"lrf-status-cancelled": K(t).status === "cancelled",
+					"lrf-status-confirmed": K(t).status === "confirmed"
+				}), Z(l, K(t).status), Z(d, `Booked ${e ?? ""}`), Z(v, ` ${n ?? ""}`), Z(b, ` ${r ?? ""}`), Z(S, ` ${K(t).party_size ?? ""} guests`);
+			}, [
+				() => _(K(t).created_at),
+				() => h(K(t).reservation_date),
+				() => g(K(t).start_time)
+			]), X(e, n);
+		}), P(t), X(e, t);
+	};
+	return Q(C, (e) => {
+		K(d).length === 0 ? e(w) : e(T, -1);
+	}), P(y), X(e, y), I(v);
+}
+var Qh, $h, eg, tg, ng, rg, ig, ag, og, sg, cg, lg = o((() => {
+	f(), Do(), Qh = /* @__PURE__ */ Y("<span class=\"lrf-live-dot svelte-1d6cuoy\" aria-hidden=\"true\"></span> Live", 1), $h = /* @__PURE__ */ Y("<div><!></div>"), eg = /* @__PURE__ */ Y("<div class=\"lrf-header svelte-1d6cuoy\"><h2 class=\"lrf-heading svelte-1d6cuoy\"> </h2> <!></div>"), tg = /* @__PURE__ */ Y("<p class=\"lrf-empty svelte-1d6cuoy\"> </p>"), ng = /* @__PURE__ */ Y("<span class=\"svelte-1d6cuoy\"> </span>"), rg = /* @__PURE__ */ Y("<a class=\"svelte-1d6cuoy\"> </a>"), ig = /* @__PURE__ */ Y("<div class=\"lrf-item-contact svelte-1d6cuoy\"><!> <!></div>"), ag = /* @__PURE__ */ Y("<li class=\"lrf-item svelte-1d6cuoy\"><div class=\"lrf-item-header svelte-1d6cuoy\"><span class=\"lrf-item-name svelte-1d6cuoy\"> </span> <div class=\"lrf-item-header-right svelte-1d6cuoy\"><span> </span> <span class=\"lrf-item-received svelte-1d6cuoy\"> </span></div></div> <div class=\"lrf-item-meta svelte-1d6cuoy\"><span class=\"lrf-meta-item svelte-1d6cuoy\"><svg class=\"lrf-meta-icon svelte-1d6cuoy\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" class=\"svelte-1d6cuoy\"></rect><path d=\"M3 10h18M8 3v4M16 3v4\" stroke-linecap=\"round\" class=\"svelte-1d6cuoy\"></path></svg> </span> <span class=\"lrf-meta-item svelte-1d6cuoy\"><svg class=\"lrf-meta-icon svelte-1d6cuoy\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\" class=\"svelte-1d6cuoy\"></circle><path d=\"M12 7v5l3.5 2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"svelte-1d6cuoy\"></path></svg> </span> <span class=\"lrf-meta-item svelte-1d6cuoy\"><svg class=\"lrf-meta-icon svelte-1d6cuoy\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" aria-hidden=\"true\"><circle cx=\"9\" cy=\"8\" r=\"3\" class=\"svelte-1d6cuoy\"></circle><path d=\"M2 20c0-3.3 3.1-6 7-6s7 2.7 7 6\" stroke-linecap=\"round\" class=\"svelte-1d6cuoy\"></path><path d=\"M16 9a3 3 0 1 0 0-6\" stroke-linecap=\"round\" class=\"svelte-1d6cuoy\"></path><path d=\"M22 20c0-2.6-1.9-4.8-4.5-5.6\" stroke-linecap=\"round\" class=\"svelte-1d6cuoy\"></path></svg> </span> <!> <!></div> <!></li>"), og = /* @__PURE__ */ Y("<ul class=\"lrf-list svelte-1d6cuoy\"></ul>"), sg = /* @__PURE__ */ Y("<section class=\"lrf-root svelte-1d6cuoy\"><!> <!></section>"), cg = {
+		hash: "svelte-1d6cuoy",
+		code: ".lrf-root.svelte-1d6cuoy {display:block;font-family:inherit;color:var(--lrf-text-color, #1a1a1a);}.lrf-header.svelte-1d6cuoy {display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem;}.lrf-heading.svelte-1d6cuoy {margin:0;font-size:1.125rem;font-weight:700;}.lrf-status.svelte-1d6cuoy {display:flex;justify-content:flex-end;align-items:center;gap:0.375rem;margin-bottom:1rem;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--lrf-live-color, #1a7d3a);}.lrf-header.svelte-1d6cuoy .lrf-status:where(.svelte-1d6cuoy) {margin-bottom:0;}.lrf-status-error.svelte-1d6cuoy {color:var(--lrf-error-color, #b3261e);}.lrf-live-dot.svelte-1d6cuoy {position:relative;width:0.5rem;height:0.5rem;flex-shrink:0;border-radius:9999px;background:currentColor;}.lrf-live-dot.svelte-1d6cuoy::before {content:'';position:absolute;inset:0;border-radius:9999px;background:currentColor;\n		animation: svelte-1d6cuoy-lrf-pulse 1.8s ease-out infinite;}\n	@media (prefers-reduced-motion: reduce) {.lrf-live-dot.svelte-1d6cuoy::before {\n			animation: none;}\n	}\n	@keyframes svelte-1d6cuoy-lrf-pulse {\n		0% {\n			transform: scale(1);\n			opacity: 0.6;\n		}\n		100% {\n			transform: scale(2.5);\n			opacity: 0;\n		}\n	}.lrf-empty.svelte-1d6cuoy {opacity:0.6;font-size:0.875rem;}.lrf-list.svelte-1d6cuoy {display:flex;flex-direction:column;gap:0.75rem;margin:0;padding:0;list-style:none;}.lrf-item.svelte-1d6cuoy {border:1px solid var(--lrf-border-color, rgba(0, 0, 0, 0.1));border-radius:4px;padding:0.875rem 1rem;background:var(--lrf-item-bg, #fff);}.lrf-item-header.svelte-1d6cuoy {display:flex;align-items:flex-start;justify-content:space-between;gap:0.5rem;}.lrf-item-name.svelte-1d6cuoy {font-weight:700;}.lrf-item-header-right.svelte-1d6cuoy {display:flex;flex-direction:column;align-items:flex-end;gap:0.25rem;flex-shrink:0;}.lrf-item-status.svelte-1d6cuoy {font-size:0.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;padding:0.125rem 0.5rem;border-radius:2px;background:var(--lrf-status-bg, rgba(0, 0, 0, 0.06));}.lrf-status-confirmed.svelte-1d6cuoy {background:var(--lrf-status-confirmed-bg, #dcf5e3);color:var(--lrf-status-confirmed-text, #146c2e);}.lrf-status-cancelled.svelte-1d6cuoy {background:var(--lrf-status-cancelled-bg, #fbdcdc);color:var(--lrf-status-cancelled-text, #8a1c1c);}.lrf-item-received.svelte-1d6cuoy {font-size:0.6875rem;font-weight:400;text-transform:none;letter-spacing:normal;white-space:nowrap;opacity:0.55;}.lrf-item-meta.svelte-1d6cuoy,\n	.lrf-item-contact.svelte-1d6cuoy {display:flex;flex-wrap:wrap;gap:0.5rem 0.75rem;margin-top:0.375rem;font-size:0.8125rem;opacity:0.75;}.lrf-item-contact.svelte-1d6cuoy a:where(.svelte-1d6cuoy) {color:inherit;}.lrf-meta-item.svelte-1d6cuoy {display:inline-flex;align-items:center;gap:0.3125rem;}.lrf-meta-icon.svelte-1d6cuoy {width:0.875rem;height:0.875rem;flex-shrink:0;opacity:0.8;}"
+	}, customElements.define("live-reservations-feed", Co(Zh, {
+		heading: {
+			attribute: "heading",
+			type: "String"
+		},
+		channelName: {
+			attribute: "channel-name",
+			type: "String"
+		},
+		ablyAuthUrl: {
+			attribute: "ably-auth-url",
+			type: "String"
+		},
+		maxItems: {
+			attribute: "max-items",
+			type: "Number"
+		},
+		emptyLabel: {
+			attribute: "empty-label",
+			type: "String"
+		},
+		fetchReservations: {},
+		restaurants: {}
+	}, [], [], { mode: "open" }));
 }));
 //#endregion
 //#region src/index.ts
-typeof customElements < "u" && (Promise.resolve().then(() => (Pc(), Ec)), Promise.resolve().then(() => (xl(), sl)), Promise.resolve().then(() => (eh(), Pm)), Promise.resolve().then(() => (hh(), nh)), Promise.resolve().then(() => (Mh(), gh)), Promise.resolve().then(() => (Yh(), Nh)));
+typeof customElements < "u" && (Promise.resolve().then(() => (Pc(), Ec)), Promise.resolve().then(() => (xl(), sl)), Promise.resolve().then(() => (eh(), Pm)), Promise.resolve().then(() => (hh(), nh)), Promise.resolve().then(() => (Mh(), gh)), Promise.resolve().then(() => (Yh(), Nh)), Promise.resolve().then(() => (lg(), Xh)));
 //#endregion

package/dist/index.d.ts

@@ -152,6 +152,36 @@ export interface ReservationCancelElement extends HTMLElement {
 	confirmCancel?: (payload: { token: string }) => Promise<CancelActionResult>;
 }
 
+export interface LiveReservation {
+	id: string;
+	restaurant_id?: string | null;
+	reservation_date: string;
+	start_time: string;
+	party_size: number;
+	status: string;
+	contact_name: string;
+	contact_email?: string | null;
+	contact_phone?: string | null;
+	table_number?: string | null;
+	location?: string | null;
+	created_at: string;
+}
+
+export interface LiveReservationRestaurantRef {
+	id: string;
+	name: string;
+}
+
+export interface LiveReservationsFeedElement extends HTMLElement {
+	heading?: string;
+	channelName?: string;
+	ablyAuthUrl?: string;
+	fetchReservations?: () => Promise<LiveReservation[]>;
+	restaurants?: LiveReservationRestaurantRef[];
+	maxItems?: number;
+	emptyLabel?: string;
+}
+
 declare global {
 	interface HTMLElementTagNameMap {
 		'reservation-bar': ReservationBarElement;
@@ -160,6 +190,7 @@ declare global {
 		'event-inquiries-feed': EventInquiriesFeedElement;
 		'event-contact-form': EventContactFormElement;
 		'reservation-cancel': ReservationCancelElement;
+		'live-reservations-feed': LiveReservationsFeedElement;
 	}
 
 	interface HTMLElementEventMap {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forgebuild/hotal-ui",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "description": "Reusable Svelte UI components for booking and reservation experiences.",
   "type": "module",
   "license": "MIT",