restaurant-kit 0.1.0

package/dist/menu-browser/MenuCartDrawer.js

@@ -0,0 +1,18 @@
+import { jsxs as u, Fragment as c, jsx as i } from "react/jsx-runtime";
+import { CartDrawer as p } from "../cart/CartDrawer.js";
+import { useCart as f } from "../cart/useCart.js";
+import { useMenuData as l } from "../menu/useMenuData.js";
+import { MenuItemSheet as I } from "./MenuItemSheet.js";
+import { useParkedSheet as C } from "./useParkedSheet.js";
+function w() {
+  const { menu: o } = l(), { openCart: m, closeCart: n } = f(), { value: e, open: s, close: d } = C(m), r = e ? o.items.find((t) => t.id === e.itemId) : void 0;
+  return /* @__PURE__ */ u(c, { children: [
+    /* @__PURE__ */ i(p, { onEditItem: (t) => {
+      o.items.some((a) => a.id === t.itemId) && (n(), s(t));
+    } }),
+    e && r ? /* @__PURE__ */ i(I, { item: r, editLine: e, onClose: d }) : null
+  ] });
+}
+export {
+  w as MenuCartDrawer
+};

package/dist/menu-browser/MenuCategoryBlock.js

@@ -0,0 +1,45 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { ChevronDown as h } from "lucide-react";
+import { cx as g } from "../utils.js";
+import e from "./MenuBrowser.module.css.js";
+import { MenuCard as f } from "./MenuCard.js";
+import { MenuItemSheet as y } from "./MenuItemSheet.js";
+import { MenuRow as C } from "./MenuRow.js";
+import { useMediaQuery as x } from "./useMediaQuery.js";
+import { useParkedSheet as N } from "./useParkedSheet.js";
+function $({ category: t, groupId: m, groupLabel: s, isOpen: i, items: a, onToggle: p }) {
+  const l = x("(max-width: 560px)"), { value: c, open: d, close: u } = N();
+  return /* @__PURE__ */ n(
+    "section",
+    {
+      className: g(e.categoryBlock, i && e.openCategory),
+      "aria-labelledby": `menu-category-${t.id}`,
+      "data-menu-category-block": !0,
+      "data-menu-category": t.id,
+      "data-menu-group": m,
+      children: [
+        /* @__PURE__ */ n("button", { className: e.categoryHeading, type: "button", "aria-expanded": i, onClick: p, children: [
+          /* @__PURE__ */ n("div", { children: [
+            /* @__PURE__ */ o("p", { children: s }),
+            /* @__PURE__ */ o("h3", { id: `menu-category-${t.id}`, children: t.title })
+          ] }),
+          /* @__PURE__ */ n("span", { className: e.toggleMeta, children: [
+            /* @__PURE__ */ n("span", { className: e.itemCount, children: [
+              a.length,
+              " ",
+              a.length === 1 ? "item" : "items"
+            ] }),
+            /* @__PURE__ */ o(h, { "aria-hidden": "true", className: e.chevron })
+          ] })
+        ] }),
+        /* @__PURE__ */ o("div", { className: e.categoryContent, children: /* @__PURE__ */ o("div", { className: l ? e.rowList : e.grid, children: a.map(
+          (r) => l ? /* @__PURE__ */ o(C, { item: r, onOpen: () => d(r) }, r.id) : /* @__PURE__ */ o(f, { item: r, onOpen: () => d(r) }, r.id)
+        ) }) }),
+        c ? /* @__PURE__ */ o(y, { item: c, onClose: u }) : null
+      ]
+    }
+  );
+}
+export {
+  $ as MenuCategoryBlock
+};

package/dist/menu-browser/MenuItemSheet.js

@@ -0,0 +1,132 @@
+import { jsxs as n, jsx as t, Fragment as j } from "react/jsx-runtime";
+import { X as Q, Expand as K, Minus as U, Plus as X } from "lucide-react";
+import { useState as c, useRef as R, useEffect as _ } from "react";
+import { useCart as G } from "../cart/useCart.js";
+import { OrderIcon as J } from "../components/OrderIcon.js";
+import { useOrdering as W } from "../config/useOrdering.js";
+import { formatPriceTotal as Y, formatPrice as q } from "../menu/priceFormat.js";
+import { cx as N } from "../utils.js";
+import a from "./MenuBrowser.module.css.js";
+import { sortedSizes as Z, imageSrc as M, variationLabel as ee } from "./menuItemDisplay.js";
+import { MenuLightbox as te } from "./MenuLightbox.js";
+function me({ item: l, editLine: r, onClose: o }) {
+  const v = !!l.image, i = Z(l), m = l.removableIngredients ?? [], [g, L] = c(r?.variationId ?? i[0]?.id ?? ""), [d, I] = c(r?.quantity ?? 1), [p, P] = c(r?.note ?? ""), [b, T] = c(
+    (r?.removedIngredients ?? []).filter((e) => m.includes(e))
+  ), f = i.find((e) => e.id === g) ?? i[0], k = f?.price ?? l.price, S = i.length > 1, { addItem: $, replaceItem: A, items: B, openCart: F } = G(), h = W(), { cartEnabled: u } = h, x = R(null), C = Y(k, d), O = B.filter((e) => e.itemId === l.id).reduce((e, s) => e + s.quantity, 0), [z, D] = c(!1), w = R(!1), E = (e) => {
+    w.current = e, D(e);
+  };
+  _(() => {
+    x.current?.focus();
+    const e = (y) => {
+      y.key === "Escape" && !w.current && o();
+    }, s = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", document.addEventListener("keydown", e), () => {
+      document.body.style.overflow = s, document.removeEventListener("keydown", e);
+    };
+  }, [o]);
+  const H = (e) => {
+    T((s) => s.includes(e) ? s.filter((y) => y !== e) : [...s, e]);
+  }, V = () => {
+    const e = {
+      itemId: l.id,
+      itemName: l.title,
+      variationId: f?.id,
+      variationName: f?.label,
+      ...b.length ? { removedIngredients: b } : {}
+    };
+    r ? A(r.key, e, { quantity: d, note: p }) : $(e, { quantity: d, note: p }), o();
+  };
+  return /* @__PURE__ */ n("div", { className: a.sheetLayer, role: "dialog", "aria-modal": "true", "aria-label": l.title, children: [
+    /* @__PURE__ */ t("div", { className: a.sheetVeil, onClick: o }),
+    /* @__PURE__ */ n("div", { className: a.sheet, children: [
+      /* @__PURE__ */ t("button", { className: a.sheetClose, type: "button", ref: x, onClick: o, "aria-label": "Close", children: /* @__PURE__ */ t(Q, { "aria-hidden": "true" }) }),
+      /* @__PURE__ */ n("div", { className: a.sheetScroll, children: [
+        v ? /* @__PURE__ */ n("button", { className: a.sheetHero, type: "button", onClick: () => E(!0), "aria-label": `View photo of ${l.title}`, children: [
+          /* @__PURE__ */ t("img", { src: M(l.image), alt: l.title }),
+          /* @__PURE__ */ t("span", { className: a.zoomHint, "aria-hidden": "true", children: /* @__PURE__ */ t(K, {}) })
+        ] }) : null,
+        /* @__PURE__ */ n("div", { className: N(a.sheetBody, !v && a.plainSheetBody), children: [
+          /* @__PURE__ */ n("header", { className: a.sheetHeader, children: [
+            /* @__PURE__ */ t("h3", { children: l.title }),
+            S ? null : /* @__PURE__ */ t("span", { className: a.price, children: q(k) || "M.P." })
+          ] }),
+          l.description ? /* @__PURE__ */ t("p", { className: a.sheetDesc, children: l.description }) : null,
+          u && O && !r ? /* @__PURE__ */ n("p", { className: a.sheetInCart, children: [
+            "In your cart: ",
+            O,
+            " — this adds another.",
+            " ",
+            /* @__PURE__ */ t(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  o(), F();
+                },
+                children: "Edit cart"
+              }
+            )
+          ] }) : null,
+          S ? /* @__PURE__ */ t("div", { className: a.variationTabs, "aria-label": `${l.title} size`, children: i.map((e) => {
+            const s = e.id === g;
+            return /* @__PURE__ */ n(
+              "button",
+              {
+                className: N(a.variationTab, s && a.selectedVariationTab),
+                type: "button",
+                "aria-pressed": s,
+                onClick: () => L(e.id),
+                children: [
+                  /* @__PURE__ */ t("span", { children: ee(e) }),
+                  /* @__PURE__ */ t("strong", { children: q(e.price) })
+                ]
+              },
+              e.id
+            );
+          }) }) : null,
+          u && m.length ? /* @__PURE__ */ n("fieldset", { className: a.sheetRemovables, children: [
+            /* @__PURE__ */ t("legend", { className: a.sheetNoteLabel, children: "Remove ingredients" }),
+            m.map((e) => /* @__PURE__ */ n("label", { className: a.sheetRemovable, children: [
+              /* @__PURE__ */ t("span", { children: e }),
+              /* @__PURE__ */ t("input", { type: "checkbox", checked: b.includes(e), onChange: () => H(e) })
+            ] }, e))
+          ] }) : null,
+          u ? /* @__PURE__ */ n(j, { children: [
+            /* @__PURE__ */ t("label", { className: a.sheetNoteLabel, htmlFor: `sheet-note-${l.id}`, children: "Special instructions" }),
+            /* @__PURE__ */ t(
+              "textarea",
+              {
+                className: a.sheetNote,
+                id: `sheet-note-${l.id}`,
+                value: p,
+                onChange: (e) => P(e.target.value),
+                placeholder: "e.g. no pickles, sauce on the side…"
+              }
+            )
+          ] }) : null
+        ] })
+      ] }),
+      u ? /* @__PURE__ */ n("footer", { className: a.sheetFooter, children: [
+        /* @__PURE__ */ n("div", { className: a.sheetStepper, "aria-label": `${l.title} quantity`, children: [
+          /* @__PURE__ */ t("button", { type: "button", onClick: () => I((e) => Math.max(1, e - 1)), "aria-label": "Decrease quantity", children: /* @__PURE__ */ t(U, { "aria-hidden": "true" }) }),
+          /* @__PURE__ */ t("span", { children: d }),
+          /* @__PURE__ */ t("button", { type: "button", onClick: () => I((e) => e + 1), "aria-label": "Increase quantity", children: /* @__PURE__ */ t(X, { "aria-hidden": "true" }) })
+        ] }),
+        /* @__PURE__ */ n("button", { className: a.sheetAdd, type: "button", onClick: V, children: [
+          /* @__PURE__ */ t("span", { children: r ? "Update cart" : "Add to cart" }),
+          C ? /* @__PURE__ */ t("span", { className: a.sheetTotal, children: C }) : null
+        ] })
+      ] }) : h.href ? (
+        // Browse-only menu: the sheet is a detail view and hands off to the ordering app.
+        /* @__PURE__ */ t("footer", { className: a.sheetFooter, children: /* @__PURE__ */ n("a", { className: N(a.sheetAdd, a.sheetOrderLink), href: h.href, target: "_blank", rel: "noreferrer", children: [
+          /* @__PURE__ */ t("span", { children: h.label }),
+          /* @__PURE__ */ t(J, { className: a.sheetOrderIcon })
+        ] }) })
+      ) : null
+    ] }),
+    z ? /* @__PURE__ */ t(te, { alt: l.title, imageSrc: M(l.image), onClose: () => E(!1) }) : null
+  ] });
+}
+export {
+  me as MenuItemSheet
+};

package/dist/menu-browser/MenuLightbox.js

@@ -0,0 +1,33 @@
+import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { X as m } from "lucide-react";
+import { useRef as f, useEffect as b } from "react";
+import r from "./MenuBrowser.module.css.js";
+function v({ addLabel: n, alt: l, imageSrc: c, onAdd: i, onClose: e }) {
+  const s = f(null);
+  return b(() => {
+    s.current?.focus();
+    const o = (u) => {
+      u.key === "Escape" && e();
+    }, a = document.body.style.overflow;
+    return document.body.style.overflow = "hidden", document.addEventListener("keydown", o), () => {
+      document.body.style.overflow = a, document.removeEventListener("keydown", o);
+    };
+  }, [e]), /* @__PURE__ */ d("div", { className: r.lightbox, role: "dialog", "aria-modal": "true", "aria-label": l, onClick: e, children: [
+    /* @__PURE__ */ t("button", { className: r.lightboxClose, type: "button", ref: s, onClick: e, "aria-label": "Close photo", children: /* @__PURE__ */ t(m, { "aria-hidden": "true" }) }),
+    /* @__PURE__ */ t("img", { className: r.lightboxImage, src: c, alt: l }),
+    n && i ? /* @__PURE__ */ t(
+      "button",
+      {
+        className: r.lightboxAdd,
+        type: "button",
+        onClick: (o) => {
+          o.stopPropagation(), i();
+        },
+        children: n
+      }
+    ) : null
+  ] });
+}
+export {
+  v as MenuLightbox
+};

package/dist/menu-browser/MenuRow.js

@@ -0,0 +1,43 @@
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { Plus as w } from "lucide-react";
+import { useCart as b } from "../cart/useCart.js";
+import { useOrdering as N } from "../config/useOrdering.js";
+import { cx as f } from "../utils.js";
+import e from "./MenuBrowser.module.css.js";
+import { sortedSizes as g, variationLabel as y, imageSrc as I } from "./menuItemDisplay.js";
+import { formatPrice as x } from "../menu/priceFormat.js";
+function A({ item: a, onOpen: s }) {
+  const l = !!a.image, t = g(a), n = t[0], m = n?.price ?? a.price, { addItem: u, items: p } = b(), { cartEnabled: c } = N(), d = p.filter((o) => o.itemId === a.id).reduce((o, h) => o + h.quantity, 0);
+  return /* @__PURE__ */ i("article", { className: e.row, children: [
+    /* @__PURE__ */ r("button", { className: e.rowMain, type: "button", onClick: s, children: /* @__PURE__ */ i("span", { className: e.rowText, children: [
+      /* @__PURE__ */ r("span", { className: e.rowTitle, children: a.title }),
+      a.description ? /* @__PURE__ */ r("span", { className: e.rowDesc, children: a.description }) : null,
+      /* @__PURE__ */ i("span", { className: e.rowPrice, children: [
+        x(m) || "M.P.",
+        t.length > 1 ? /* @__PURE__ */ i("span", { className: e.rowSizeHint, children: [
+          " · ",
+          t.map(y).join(" / ")
+        ] }) : null
+      ] })
+    ] }) }),
+    l || c ? /* @__PURE__ */ i("div", { className: e.rowMediaCell, children: [
+      l ? /* @__PURE__ */ r("button", { className: e.rowThumb, type: "button", onClick: s, tabIndex: -1, "aria-label": `View ${a.title}`, children: /* @__PURE__ */ r("img", { src: I(a.image), alt: "", loading: "lazy" }) }) : null,
+      c ? /* @__PURE__ */ i(
+        "button",
+        {
+          className: f(e.rowAdd, !l && e.rowAddInline),
+          type: "button",
+          onClick: () => u({ itemId: a.id, itemName: a.title, variationId: n?.id, variationName: n?.label }),
+          "aria-label": `Add ${a.title} to cart`,
+          children: [
+            /* @__PURE__ */ r(w, { "aria-hidden": "true" }),
+            d ? /* @__PURE__ */ r("span", { className: e.rowQty, children: d }) : null
+          ]
+        }
+      ) : null
+    ] }) : null
+  ] });
+}
+export {
+  A as MenuRow
+};

package/dist/menu-browser/MenuSection.js

@@ -0,0 +1,10 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useMenuData as e } from "../menu/useMenuData.js";
+import { MenuBrowser as n } from "./MenuBrowser.js";
+function i() {
+  const { menu: o } = e();
+  return /* @__PURE__ */ r(n, { menu: o });
+}
+export {
+  i as MenuSection
+};

package/dist/menu-browser/menuItemDisplay.js

@@ -0,0 +1,19 @@
+import { sortByOrder as e } from "../menu/menuOrdering.js";
+import { formatPrice as i } from "../menu/priceFormat.js";
+function l(r) {
+  const t = r.label.trim().toLowerCase();
+  return t === "small" ? "S" : t === "medium" ? "M" : t === "large" ? "L" : r.label.trim() || i(r.price);
+}
+function u(r) {
+  return e(r.sizes.filter((t) => t.label.trim() && t.price));
+}
+const n = /^(https?:|data:|blob:)/i;
+function f(r) {
+  return r ? r.startsWith("/") || n.test(r) ? r : `/${r}` : "";
+}
+export {
+  i as formatPrice,
+  f as imageSrc,
+  u as sortedSizes,
+  l as variationLabel
+};

package/dist/menu-browser/useMediaQuery.js

@@ -0,0 +1,19 @@
+import { useCallback as r, useSyncExternalStore as c } from "react";
+function i() {
+  return typeof window < "u" && typeof window.matchMedia == "function";
+}
+function d(e) {
+  const a = r(
+    (n) => {
+      if (!i()) return () => {
+      };
+      const t = window.matchMedia(e);
+      return t.addEventListener("change", n), () => t.removeEventListener("change", n);
+    },
+    [e]
+  );
+  return c(a, () => i() ? window.matchMedia(e).matches : !1);
+}
+export {
+  d as useMediaQuery
+};

package/dist/menu-browser/useMenuBrowserState.js

@@ -0,0 +1,82 @@
+import { useState as R, useRef as s, useMemo as u, useEffect as k, useCallback as g } from "react";
+import { getOrderedMenu as W } from "../menu/menuOrdering.js";
+function P(B) {
+  const [b, h] = R("all"), [E, C] = R([]), [x, G] = R(!1), c = s(/* @__PURE__ */ new Set()), v = s(!1), r = s(null), S = s(null), a = s(null), l = s(null), d = u(() => W(B, { includeHidden: !1, includeEmptySections: !1 }), [B]), M = u(() => d.groups.map(({ group: e }) => e), [d]), A = u(() => new Map(M.map((e) => [e.id, e.label])), [M]), T = u(() => d.sections.map(({ section: e, items: t }) => ({ category: e, items: t })), [d.sections]), m = u(() => T.map(({ category: e }) => e.id), [T]), f = m[0] ?? "";
+  k(() => {
+    C((e) => {
+      const t = new Set(m), n = e.filter((o) => t.has(o)), i = m.filter((o) => !n.includes(o) && !c.current.has(o));
+      return [...n, ...i];
+    });
+  }, [m]), k(() => {
+    const e = l.current?.querySelector(`[data-group="${b}"]`);
+    if (!e || !l.current) return;
+    const t = e.offsetLeft - l.current.clientWidth / 2 + e.clientWidth / 2;
+    l.current.scrollTo({ left: Math.max(0, t), behavior: "smooth" });
+  }, [b]);
+  const p = g((e, t = {}) => {
+    if (e) {
+      if (t.force) c.current.delete(e);
+      else if (c.current.has(e)) return;
+      C((n) => n.includes(e) ? n : [...n, e]);
+    }
+  }, []), F = g((e) => {
+    C((t) => t.includes(e) ? (c.current.add(e), t.filter((n) => n !== e)) : (c.current.delete(e), [...t, e]));
+  }, []), w = g(() => {
+    if (v.current) return;
+    const e = Array.from(S.current?.querySelectorAll("[data-menu-category-block]") ?? []);
+    if (!e.length) return;
+    const n = (a.current?.getBoundingClientRect()?.bottom ?? 0) + 56;
+    let i = e[0];
+    if (e[0].getBoundingClientRect().top > n) {
+      h("all");
+      return;
+    }
+    for (const o of e)
+      o.getBoundingClientRect().top <= n && (i = o);
+    h(i.dataset.menuGroup ?? "all"), p(i.dataset.menuCategory ?? f);
+  }, [f, p]);
+  k(() => {
+    const e = () => {
+      const t = window.matchMedia("(max-width: 980px)").matches;
+      G(!!(t && a.current && a.current.getBoundingClientRect().top <= 0)), w();
+    };
+    return e(), window.addEventListener("scroll", e, { passive: !0 }), window.addEventListener("resize", e), () => {
+      window.removeEventListener("scroll", e), window.removeEventListener("resize", e), r.current && window.clearTimeout(r.current);
+    };
+  }, [w]);
+  const O = g(
+    (e) => {
+      const t = e === "all" ? document.querySelector("#menu") : S.current?.querySelector(`[data-menu-group="${e}"]`);
+      if (!t) return;
+      r.current && window.clearTimeout(r.current), v.current = !0, h(e), p(t instanceof HTMLElement && t.dataset.menuCategory ? t.dataset.menuCategory : f, { force: !0 });
+      const n = Number.parseFloat(window.getComputedStyle(t).scrollMarginTop || "0"), i = t.getBoundingClientRect().top + window.scrollY - (Number.isFinite(n) ? n : 0);
+      window.scrollTo({ top: Math.max(0, i), behavior: "smooth" });
+      const o = window.performance.now(), L = () => {
+        const q = t.getBoundingClientRect().top, y = Number.parseFloat(window.getComputedStyle(t).scrollMarginTop || "0"), H = Number.isFinite(y) ? y : 0, N = window.performance.now() - o > 1800;
+        if (!(Math.abs(q - H) < 4 || window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2 || N)) {
+          r.current = window.setTimeout(L, 80);
+          return;
+        }
+        v.current = !1, r.current = null, w();
+      };
+      r.current = window.setTimeout(L, 120);
+    },
+    [f, p, w]
+  );
+  return {
+    activeGroup: b,
+    catalogRef: S,
+    controlStripRef: a,
+    groupLabels: A,
+    handleGroupClick: O,
+    isTabsStuck: x,
+    openCategories: E,
+    tabsRef: l,
+    toggleCategory: F,
+    visibleCategories: T,
+    visibleGroups: M
+  };
+}
+export {
+  P as useMenuBrowserState
+};

package/dist/menu-browser/useParkedSheet.js

@@ -0,0 +1,32 @@
+import { useState as w, useRef as s, useEffect as c } from "react";
+function i(e) {
+  return e !== 0 && window.history.state?.parkedSheet === e;
+}
+function f(e) {
+  const [r, o] = w(null), u = s(e);
+  u.current = e;
+  const t = s(0), a = (n) => {
+    t.current = Date.now(), window.history.pushState({ parkedSheet: t.current }, ""), o(n);
+  }, d = () => {
+    if (i(t.current)) {
+      window.history.back();
+      return;
+    }
+    o(null), u.current?.();
+  };
+  return c(
+    () => () => {
+      i(t.current) && window.history.back();
+    },
+    []
+  ), c(() => {
+    if (r === null) return;
+    const n = () => {
+      o(null), u.current?.();
+    };
+    return window.addEventListener("popstate", n), () => window.removeEventListener("popstate", n);
+  }, [r]), { value: r, open: a, close: d };
+}
+export {
+  f as useParkedSheet
+};