@zappie/theme-base 0.1.0 → 0.1.2

package/dist/item/configurator.js

@@ -0,0 +1,135 @@
+"use client";
+
+// src/item/configurator.tsx
+import { ItemForm, Money, Quantity } from "@zappie/foundations";
+import { useZappie } from "@zappie/sdk/react";
+import { countEvent } from "@zappie/sdk/visits";
+import { Fragment, useState } from "react";
+import { LineOptions } from "../cart/line-options.js";
+import { createConfiguratorCommit } from "./configurator-commit.js";
+import { useConfiguratorDraft } from "./configurator-draft.js";
+import { ItemNote } from "./note.js";
+import { VariantStatus } from "./variant-status.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ItemConfigurator({
+  item,
+  menuId,
+  line,
+  onComplete,
+  scope,
+  showPrice = false,
+  introduction
+}) {
+  const client = useZappie();
+  const { clear, restored, setValue, value } = useConfiguratorDraft({
+    item,
+    ...menuId !== void 0 ? { menuId } : {},
+    ...line !== void 0 ? { line } : {},
+    scope
+  });
+  const [error, setError] = useState();
+  const onCommit = createConfiguratorCommit(client, line);
+  return /* @__PURE__ */ jsx(
+    ItemForm.Root,
+    {
+      item,
+      value,
+      onValueChange: (next) => {
+        const nextValue = { ...next };
+        delete nextValue.variantId;
+        setValue(nextValue);
+        setError(void 0);
+      },
+      ...onCommit ? { onCommit } : {},
+      onAdded: () => {
+        if (!line) {
+          countEvent("add");
+        }
+        clear();
+        onComplete();
+      },
+      className: "z-base-configurator",
+      children: (configuration) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "z-base-item-summary", children: [
+          showPrice && /* @__PURE__ */ jsxs("p", { className: "z-base-item-price", children: [
+            /* @__PURE__ */ jsx(Money, { value: configuration.unitPrice }),
+            item.compareAtPrice && /* @__PURE__ */ jsx("del", { children: /* @__PURE__ */ jsx(Money, { value: item.compareAtPrice }) })
+          ] }),
+          !line && /* @__PURE__ */ jsx(
+            ItemNote,
+            {
+              id: item.id,
+              value: value.note ?? "",
+              onChange: (note) => configuration.setValue({ ...value, note })
+            }
+          )
+        ] }),
+        line && /* @__PURE__ */ jsxs("label", { className: "z-base-field", children: [
+          "Note",
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              className: "z-base-input",
+              maxLength: line ? 280 : Math.max(35, value.note?.length ?? 0),
+              value: value.note ?? "",
+              onChange: (event) => configuration.setValue({ ...value, note: event.target.value })
+            }
+          )
+        ] }),
+        showPrice && /* @__PURE__ */ jsx(VariantStatus, { item, value: configuration.value }),
+        introduction,
+        /* @__PURE__ */ jsx(LineOptions, {}),
+        configuration.issues.length > 0 && /* @__PURE__ */ jsx("div", { role: "alert", children: configuration.issues.map((issue, index) => /* @__PURE__ */ jsx("p", { children: issue.message }, `${issue.code}:${issue.groupId}:${index}`)) }),
+        error && /* @__PURE__ */ jsx("p", { role: "alert", children: error }),
+        line && /* @__PURE__ */ jsxs("p", { "aria-live": "polite", children: [
+          "Estimated total: ",
+          /* @__PURE__ */ jsx(Money, { value: configuration.total })
+        ] }),
+        /* @__PURE__ */ jsxs("footer", { className: "z-base-item-purchase", children: [
+          /* @__PURE__ */ jsxs(
+            Quantity.Root,
+            {
+              className: "z-base-quantity",
+              value: configuration.quantity,
+              min: item.quantity.min,
+              max: Math.min(item.quantity.max ?? 99, 99),
+              step: item.quantity.step,
+              onValueChange: configuration.setQuantity,
+              children: [
+                /* @__PURE__ */ jsx(Quantity.Decrement, { "aria-label": "Decrease quantity", children: "\u2212" }),
+                /* @__PURE__ */ jsx(Quantity.Value, { "aria-label": "Item quantity" }),
+                /* @__PURE__ */ jsx(Quantity.Increment, { "aria-label": "Increase quantity", children: "+" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "z-base-button",
+              disabled: !restored || !item.isAvailable,
+              onClick: () => {
+                try {
+                  configuration.add();
+                } catch (failure) {
+                  setError(
+                    failure instanceof Error ? failure.message : "Unable to save this item. Please try again."
+                  );
+                }
+              },
+              children: [
+                item.isAvailable ? line ? "Save changes" : "Add" : item.stockLabel ?? "Unavailable",
+                " ",
+                !line && /* @__PURE__ */ jsx(Money, { value: configuration.total })
+              ]
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+export {
+  ItemConfigurator
+};
+//# sourceMappingURL=configurator.js.map

package/dist/item/configurator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/item/configurator.tsx"],
+  "sourcesContent": ["\"use client\";\nimport { ItemForm, Money, Quantity } from \"@zappie/foundations\";\nimport type { CartLine, Item } from \"@zappie/sdk\";\nimport { useZappie } from \"@zappie/sdk/react\";\nimport { countEvent } from \"@zappie/sdk/visits\";\nimport { Fragment, useState, type ReactNode } from \"react\";\nimport { LineOptions } from \"../cart/line-options\";\nimport { createConfiguratorCommit } from \"./configurator-commit\";\nimport { useConfiguratorDraft } from \"./configurator-draft\";\nimport { ItemNote } from \"./note\";\nimport { VariantStatus } from \"./variant-status\";\n\n/** The same draft and validation workflow for an item, an inline row and a cart edit. */\nexport function ItemConfigurator({\n  item,\n  menuId,\n  line,\n  onComplete,\n  scope,\n  showPrice = false,\n  introduction,\n}: {\n  item: Item;\n  menuId?: string;\n  line?: CartLine;\n  onComplete(): void;\n  scope: string;\n  showPrice?: boolean;\n  introduction?: ReactNode;\n}) {\n  const client = useZappie();\n  const { clear, restored, setValue, value } = useConfiguratorDraft({\n    item,\n    ...(menuId !== undefined ? { menuId } : {}),\n    ...(line !== undefined ? { line } : {}),\n    scope,\n  });\n  const [error, setError] = useState<string>();\n  const onCommit = createConfiguratorCommit(client, line);\n  return (\n    <ItemForm.Root\n      item={item}\n      value={value}\n      onValueChange={(next) => {\n        const nextValue = { ...next };\n        delete nextValue.variantId;\n        setValue(nextValue);\n        setError(undefined);\n      }}\n      {...(onCommit ? { onCommit } : {})}\n      onAdded={() => {\n        if (!line) {\n          countEvent(\"add\");\n        }\n        clear();\n        onComplete();\n      }}\n      className=\"z-base-configurator\"\n    >\n      {(configuration) => (\n        <Fragment>\n          <div className=\"z-base-item-summary\">\n            {showPrice && (\n              <p className=\"z-base-item-price\">\n                <Money value={configuration.unitPrice} />\n                {item.compareAtPrice && (\n                  <del>\n                    <Money value={item.compareAtPrice} />\n                  </del>\n                )}\n              </p>\n            )}\n            {!line && (\n              <ItemNote\n                id={item.id}\n                value={value.note ?? \"\"}\n                onChange={(note) => configuration.setValue({ ...value, note })}\n              />\n            )}\n          </div>\n          {line && (\n            <label className=\"z-base-field\">\n              Note\n              <textarea\n                className=\"z-base-input\"\n                maxLength={line ? 280 : Math.max(35, value.note?.length ?? 0)}\n                value={value.note ?? \"\"}\n                onChange={(event) =>\n                  configuration.setValue({ ...value, note: event.target.value })\n                }\n              />\n            </label>\n          )}\n          {showPrice && (\n            <VariantStatus item={item} value={configuration.value} />\n          )}\n          {introduction}\n          <LineOptions />\n          {configuration.issues.length > 0 && (\n            <div role=\"alert\">\n              {configuration.issues.map((issue, index) => (\n                <p key={`${issue.code}:${issue.groupId}:${index}`}>\n                  {issue.message}\n                </p>\n              ))}\n            </div>\n          )}\n          {error && <p role=\"alert\">{error}</p>}\n          {line && (\n            <p aria-live=\"polite\">\n              Estimated total: <Money value={configuration.total} />\n            </p>\n          )}\n          <footer className=\"z-base-item-purchase\">\n            <Quantity.Root\n              className=\"z-base-quantity\"\n              value={configuration.quantity}\n              min={item.quantity.min}\n              max={Math.min(item.quantity.max ?? 99, 99)}\n              step={item.quantity.step}\n              onValueChange={configuration.setQuantity}\n            >\n              <Quantity.Decrement aria-label=\"Decrease quantity\">\n                \u2212\n              </Quantity.Decrement>\n              <Quantity.Value aria-label=\"Item quantity\" />\n              <Quantity.Increment aria-label=\"Increase quantity\">\n                +\n              </Quantity.Increment>\n            </Quantity.Root>\n            <button\n              type=\"button\"\n              className=\"z-base-button\"\n              disabled={!restored || !item.isAvailable}\n              onClick={() => {\n                try {\n                  configuration.add();\n                } catch (failure) {\n                  setError(\n                    failure instanceof Error\n                      ? failure.message\n                      : \"Unable to save this item. Please try again.\",\n                  );\n                }\n              }}\n            >\n              {item.isAvailable\n                ? line\n                  ? \"Save changes\"\n                  : \"Add\"\n                : (item.stockLabel ?? \"Unavailable\")}{\" \"}\n              {!line && <Money value={configuration.total} />}\n            </button>\n          </footer>\n        </Fragment>\n      )}\n    </ItemForm.Root>\n  );\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/item/note.js

@@ -0,0 +1,65 @@
+"use client";
+
+// src/item/note.tsx
+import { Overlay, useOverlay } from "@zappie/foundations";
+import { useThemeClass } from "../cart/theme-class.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ItemNote({
+  id,
+  value,
+  onChange
+}) {
+  const overlay = useOverlay("product_note", id);
+  const themeClass = useThemeClass("z-base-cart z-base-note");
+  return /* @__PURE__ */ jsxs(
+    Overlay.Root,
+    {
+      param: "product_note",
+      id,
+      presentation: { base: "drawer", lg: "dialog" },
+      children: [
+        /* @__PURE__ */ jsx(Overlay.Trigger, { className: "z-base-button-secondary", children: value ? "Edit Note" : "Add Note" }),
+        /* @__PURE__ */ jsxs(Overlay.Content, { "data-zappie-theme": "base", className: themeClass, children: [
+          /* @__PURE__ */ jsxs("header", { className: "z-base-cart-header", children: [
+            /* @__PURE__ */ jsx(Overlay.Title, { children: "Add a note" }),
+            /* @__PURE__ */ jsx(
+              Overlay.Close,
+              {
+                className: "z-base-button-secondary",
+                "aria-label": "Close note",
+                children: "\u2715"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "z-base-cart-body", children: [
+            /* @__PURE__ */ jsxs("label", { className: "z-base-field", children: [
+              "Note",
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  className: "z-base-input",
+                  maxLength: Math.max(35, value.length),
+                  value,
+                  onChange: (event) => onChange(event.target.value)
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "z-base-button",
+                onClick: overlay.close,
+                children: "Add note"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ItemNote
+};
+//# sourceMappingURL=note.js.map

package/dist/item/note.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/item/note.tsx"],
+  "sourcesContent": ["\"use client\";\nimport { Overlay, useOverlay } from \"@zappie/foundations\";\nimport { useThemeClass } from \"../cart/theme-class\";\nexport function ItemNote({\n  id,\n  value,\n  onChange,\n}: {\n  id: string;\n  value: string;\n  onChange(value: string): void;\n}) {\n  const overlay = useOverlay(\"product_note\", id);\n  const themeClass = useThemeClass(\"z-base-cart z-base-note\");\n  return (\n    <Overlay.Root\n      param=\"product_note\"\n      id={id}\n      presentation={{ base: \"drawer\", lg: \"dialog\" }}\n    >\n      <Overlay.Trigger className=\"z-base-button-secondary\">\n        {value ? \"Edit Note\" : \"Add Note\"}\n      </Overlay.Trigger>\n      <Overlay.Content data-zappie-theme=\"base\" className={themeClass}>\n        <header className=\"z-base-cart-header\">\n          <Overlay.Title>Add a note</Overlay.Title>\n          <Overlay.Close\n            className=\"z-base-button-secondary\"\n            aria-label=\"Close note\"\n          >\n            \u2715\n          </Overlay.Close>\n        </header>\n        <div className=\"z-base-cart-body\">\n          <label className=\"z-base-field\">\n            Note\n            <textarea\n              className=\"z-base-input\"\n              maxLength={Math.max(35, value.length)}\n              value={value}\n              onChange={(event) => onChange(event.target.value)}\n            />\n          </label>\n          <button\n            type=\"button\"\n            className=\"z-base-button\"\n            onClick={overlay.close}\n          >\n            Add note\n          </button>\n        </div>\n      </Overlay.Content>\n    </Overlay.Root>\n  );\n}\n"],
+  "mappings": ";;;AACA,SAAS,SAAS,kBAAkB;AACpC,SAAS,qBAAqB;AAkBxB,cAIE,YAJF;AAjBC,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,UAAU,WAAW,gBAAgB,EAAE;AAC7C,QAAM,aAAa,cAAc,yBAAyB;AAC1D,SACE;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA,cAAc,EAAE,MAAM,UAAU,IAAI,SAAS;AAAA,MAE7C;AAAA,4BAAC,QAAQ,SAAR,EAAgB,WAAU,2BACxB,kBAAQ,cAAc,YACzB;AAAA,QACA,qBAAC,QAAQ,SAAR,EAAgB,qBAAkB,QAAO,WAAW,YACnD;AAAA,+BAAC,YAAO,WAAU,sBAChB;AAAA,gCAAC,QAAQ,OAAR,EAAc,wBAAU;AAAA,YACzB;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,WAAU;AAAA,gBACV,cAAW;AAAA,gBACZ;AAAA;AAAA,YAED;AAAA,aACF;AAAA,UACA,qBAAC,SAAI,WAAU,oBACb;AAAA,iCAAC,WAAM,WAAU,gBAAe;AAAA;AAAA,cAE9B;AAAA,gBAAC;AAAA;AAAA,kBACC,WAAU;AAAA,kBACV,WAAW,KAAK,IAAI,IAAI,MAAM,MAAM;AAAA,kBACpC;AAAA,kBACA,UAAU,CAAC,UAAU,SAAS,MAAM,OAAO,KAAK;AAAA;AAAA,cAClD;AAAA,eACF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,SAAS,QAAQ;AAAA,gBAClB;AAAA;AAAA,YAED;AAAA,aACF;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "names": []
+}

package/dist/item/variant-status.js

@@ -0,0 +1,23 @@
+// src/item/variant-status.tsx
+import { jsx } from "react/jsx-runtime";
+function VariantStatus({
+  item,
+  value
+}) {
+  const matches = item.variants.filter(
+    (variant) => Object.entries(variant.attributeChoices).every(
+      ([groupId, choiceId]) => value.choices?.some(
+        (choice) => choice.groupId === groupId && choice.choiceId === choiceId
+      )
+    )
+  );
+  const selected = matches.length === 1 ? matches[0] : void 0;
+  if (!item.isAvailable || !selected) {
+    return null;
+  }
+  return !selected.isAvailable ? /* @__PURE__ */ jsx("p", { role: "status", children: "Out of stock" }) : selected.lowStock ? /* @__PURE__ */ jsx("p", { role: "status", children: "Low stock" }) : null;
+}
+export {
+  VariantStatus
+};
+//# sourceMappingURL=variant-status.js.map

package/dist/item/variant-status.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/item/variant-status.tsx"],
+  "sourcesContent": ["import type { CartLineInput, Item } from \"@zappie/sdk\";\n\nexport function VariantStatus({\n  item,\n  value,\n}: {\n  item: Item;\n  value: CartLineInput;\n}) {\n  const matches = item.variants.filter((variant) =>\n    Object.entries(variant.attributeChoices).every(([groupId, choiceId]) =>\n      value.choices?.some(\n        (choice) => choice.groupId === groupId && choice.choiceId === choiceId,\n      ),\n    ),\n  );\n  const selected = matches.length === 1 ? matches[0] : undefined;\n  if (!item.isAvailable || !selected) {\n    return null;\n  }\n  return !selected.isAvailable ? (\n    <p role=\"status\">Out of stock</p>\n  ) : selected.lowStock ? (\n    <p role=\"status\">Low stock</p>\n  ) : null;\n}\n"],
+  "mappings": ";AAqBI;AAnBG,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AACF,GAGG;AACD,QAAM,UAAU,KAAK,SAAS;AAAA,IAAO,CAAC,YACpC,OAAO,QAAQ,QAAQ,gBAAgB,EAAE;AAAA,MAAM,CAAC,CAAC,SAAS,QAAQ,MAChE,MAAM,SAAS;AAAA,QACb,CAAC,WAAW,OAAO,YAAY,WAAW,OAAO,aAAa;AAAA,MAChE;AAAA,IACF;AAAA,EACF;AACA,QAAM,WAAW,QAAQ,WAAW,IAAI,QAAQ,CAAC,IAAI;AACrD,MAAI,CAAC,KAAK,eAAe,CAAC,UAAU;AAClC,WAAO;AAAA,EACT;AACA,SAAO,CAAC,SAAS,cACf,oBAAC,OAAE,MAAK,UAAS,0BAAY,IAC3B,SAAS,WACX,oBAAC,OAAE,MAAK,UAAS,uBAAS,IACxB;AACN;",
+  "names": []
+}

package/dist/item-frame.js

@@ -1,5 +1,62 @@
 "use client";
-export { ItemEscapeContext, ItemFrame } from './chunk-VIAJ27YC.js';
-import './chunk-JFEI2OUZ.js';
+
+// src/item/frame.tsx
+import { Overlay } from "@zappie/foundations";
+import { createContext, useRef } from "react";
+import { ThemeClassProvider } from "./cart/theme-class.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ItemEscapeContext = createContext(null);
+function ItemFrame({
+  id,
+  name,
+  hasImages,
+  navigation,
+  themeClass,
+  children
+}) {
+  const escape = useRef(void 0);
+  const classes = [
+    "z-base-cart z-base-item",
+    hasImages ? "z-base-item-with-media" : "",
+    themeClass
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(ItemEscapeContext.Provider, { value: escape, children: /* @__PURE__ */ jsx(ThemeClassProvider, { value: themeClass, children: /* @__PURE__ */ jsx(
+    Overlay.Root,
+    {
+      param: "modal_id",
+      id: `product_${id}`,
+      navigation,
+      presentation: { base: "drawer", lg: "dialog" },
+      children: /* @__PURE__ */ jsxs(
+        Overlay.Content,
+        {
+          "data-zappie-theme": "base",
+          className: classes,
+          "aria-label": name,
+          onEscape: (event) => {
+            if (escape.current) {
+              event.preventDefault();
+              escape.current();
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsx("header", { className: "z-base-item-header", children: /* @__PURE__ */ jsx(
+              Overlay.Close,
+              {
+                className: "z-base-button-secondary",
+                "aria-label": "Close product",
+                children: "\u2715"
+              }
+            ) }),
+            children
+          ]
+        }
+      )
+    }
+  ) }) });
+}
+export {
+  ItemEscapeContext,
+  ItemFrame
+};
 //# sourceMappingURL=item-frame.js.map
-//# sourceMappingURL=item-frame.js.map

package/dist/item-frame.js.map

@@ -1 +1,7 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"item-frame.js"}
+{
+  "version": 3,
+  "sources": ["../src/item/frame.tsx"],
+  "sourcesContent": ["\"use client\";\nimport { Overlay } from \"@zappie/foundations\";\nimport { createContext, useRef, type ReactNode, type RefObject } from \"react\";\nimport { ThemeClassProvider } from \"../cart/theme-class\";\nexport const ItemEscapeContext = createContext<RefObject<\n  (() => void) | undefined\n> | null>(null);\n/** The eager modal frame stays mounted while the configurator chunk loads. */\nexport function ItemFrame({\n  id,\n  name,\n  hasImages,\n  navigation,\n  themeClass,\n  children,\n}: {\n  id: string;\n  name: string;\n  hasImages?: boolean;\n  themeClass?: string | undefined;\n  children: ReactNode;\n  navigation: { isOpen: boolean; open(): void; close(): void };\n}) {\n  const escape = useRef<(() => void) | undefined>(undefined);\n  const classes = [\n    \"z-base-cart z-base-item\",\n    hasImages ? \"z-base-item-with-media\" : \"\",\n    themeClass,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n  return (\n    <ItemEscapeContext.Provider value={escape}>\n      <ThemeClassProvider value={themeClass}>\n        <Overlay.Root\n          param=\"modal_id\"\n          id={`product_${id}`}\n          navigation={navigation}\n          presentation={{ base: \"drawer\", lg: \"dialog\" }}\n        >\n          <Overlay.Content\n            data-zappie-theme=\"base\"\n            className={classes}\n            aria-label={name}\n            onEscape={(event) => {\n              if (escape.current) {\n                event.preventDefault();\n                escape.current();\n              }\n            }}\n          >\n            <header className=\"z-base-item-header\">\n              <Overlay.Close\n                className=\"z-base-button-secondary\"\n                aria-label=\"Close product\"\n              >\n                \u2715\n              </Overlay.Close>\n            </header>\n            {children}\n          </Overlay.Content>\n        </Overlay.Root>\n      </ThemeClassProvider>\n    </ItemEscapeContext.Provider>\n  );\n}\n"],
+  "mappings": ";;;AACA,SAAS,eAAe;AACxB,SAAS,eAAe,cAA8C;AACtE,SAAS,0BAA0B;AAqCzB,SAYI,KAZJ;AApCH,IAAM,oBAAoB,cAEvB,IAAI;AAEP,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,SAAS,OAAiC,MAAS;AACzD,QAAM,UAAU;AAAA,IACd;AAAA,IACA,YAAY,2BAA2B;AAAA,IACvC;AAAA,EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AACX,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,QACjC,8BAAC,sBAAmB,OAAO,YACzB;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACC,OAAM;AAAA,MACN,IAAI,WAAW,EAAE;AAAA,MACjB;AAAA,MACA,cAAc,EAAE,MAAM,UAAU,IAAI,SAAS;AAAA,MAE7C;AAAA,QAAC,QAAQ;AAAA,QAAR;AAAA,UACC,qBAAkB;AAAA,UAClB,WAAW;AAAA,UACX,cAAY;AAAA,UACZ,UAAU,CAAC,UAAU;AACnB,gBAAI,OAAO,SAAS;AAClB,oBAAM,eAAe;AACrB,qBAAO,QAAQ;AAAA,YACjB;AAAA,UACF;AAAA,UAEA;AAAA,gCAAC,YAAO,WAAU,sBAChB;AAAA,cAAC,QAAQ;AAAA,cAAR;AAAA,gBACC,WAAU;AAAA,gBACV,cAAW;AAAA,gBACZ;AAAA;AAAA,YAED,GACF;AAAA,YACC;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EACF,GACF,GACF;AAEJ;",
+  "names": []
+}

package/dist/item.js

@@ -1,13 +1,12 @@
 "use client";
-import { ItemFrame, ItemEscapeContext } from './chunk-VIAJ27YC.js';
-import { ItemImage, Description } from './chunk-USSLDBDY.js';
-import { ItemConfigurator } from './chunk-2MV6KU3R.js';
-import './chunk-QWST2TA2.js';
-import './chunk-JFEI2OUZ.js';
-import { Overlay } from '@zappie/foundations';
-import { useState, useContext, useEffect, Fragment } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
 
+// src/item/item-detail.tsx
+import { Overlay } from "@zappie/foundations";
+import { Fragment, useContext, useEffect, useState } from "react";
+import { Description, ItemImage } from "./catalogue/presentation.js";
+import { ItemConfigurator } from "./item/configurator.js";
+import { ItemEscapeContext, ItemFrame } from "./item-frame.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 function ItemDetail(props) {
   return /* @__PURE__ */ jsx(
     ItemFrame,
@@ -147,7 +146,8 @@ function ItemContent({
     }
   );
 }
-
-export { ItemContent, ItemDetail };
+export {
+  ItemContent,
+  ItemDetail
+};
 //# sourceMappingURL=item.js.map
-//# sourceMappingURL=item.js.map

package/dist/item.js.map

@@ -1 +1,7 @@
-{"version":3,"sources":["../src/item/item-detail.tsx"],"names":[],"mappings":"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","file":"item.js","sourcesContent":["\"use client\";\nimport { Overlay } from \"@zappie/foundations\";\nimport type { Item } from \"@zappie/sdk\";\nimport { Fragment, useContext, useEffect, useState } from \"react\";\nimport { Description, ItemImage } from \"../catalogue/presentation\";\nimport { ItemConfigurator } from \"./configurator\";\nimport { ItemEscapeContext, ItemFrame } from \"./frame\";\n\nexport type ItemDetailProps = {\n  item: Item;\n  menuId: string;\n  scope: string;\n  href: string;\n  themeClass?: string;\n  navigation: { isOpen: boolean; open(): void; close(): void };\n};\n/** Framework-independent SDK item screen, reusable through themeClass. */\nexport function ItemDetail(props: ItemDetailProps) {\n  return (\n    <ItemFrame\n      id={props.item.id}\n      name={props.item.name}\n      hasImages={props.item.images.length > 0}\n      navigation={props.navigation}\n      themeClass={props.themeClass}\n    >\n      <ItemContent key={props.item.id} {...props} />\n    </ItemFrame>\n  );\n}\nexport function ItemContent({\n  item,\n  menuId,\n  scope,\n  href,\n  navigation,\n}: ItemDetailProps) {\n  const [image, setImage] = useState(0);\n  const [lightbox, setLightbox] = useState(false);\n  const [shareMessage, setShareMessage] = useState(\"\");\n  const escape = useContext(ItemEscapeContext);\n  useEffect(() => {\n    if (!escape) {\n      return;\n    }\n    escape.current = lightbox ? () => setLightbox(false) : undefined;\n    return () => {\n      escape.current = undefined;\n    };\n  }, [escape, lightbox]);\n  return (\n    <div\n      className={`z-base-item-layout ${lightbox ? \"z-base-item-lightbox\" : \"\"}`}\n    >\n      {item.images.length > 0 && (\n        <section className=\"z-base-item-media\" aria-label=\"Product images\">\n          <button\n            type=\"button\"\n            className=\"z-base-item-photo\"\n            aria-label={\n              lightbox ? \"Close enlarged image\" : \"Enlarge product image\"\n            }\n            onClick={() => setLightbox(!lightbox)}\n          >\n            <ItemImage\n              key={image}\n              src={item.images[image] ?? item.images[0] ?? \"\"}\n              sizes=\"(min-width: 768px) 450px, 100vw\"\n              priority\n            />\n          </button>\n          {item.images.length > 1 && (\n            <nav aria-label=\"Image gallery\">\n              <button\n                type=\"button\"\n                onClick={() =>\n                  setImage(\n                    (image + item.images.length - 1) % item.images.length,\n                  )\n                }\n                aria-label=\"Previous image\"\n              >\n                ←\n              </button>\n              <span>\n                {image + 1} / {item.images.length}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setImage((image + 1) % item.images.length)}\n                aria-label=\"Next image\"\n              >\n                →\n              </button>\n            </nav>\n          )}\n          {lightbox && (\n            <button\n              type=\"button\"\n              className=\"z-base-button-secondary\"\n              onClick={() => setLightbox(false)}\n            >\n              Back to product\n            </button>\n          )}\n        </section>\n      )}\n      {!lightbox && (\n        <div className=\"z-base-item-details\">\n          <button\n            type=\"button\"\n            className=\"z-base-button-secondary\"\n            aria-label=\"Share product\"\n            onClick={() => {\n              const url = new URL(href, window.location.origin).href;\n              void Promise.resolve()\n                .then(() =>\n                  navigator.share\n                    ? navigator.share({ title: item.name, url })\n                    : navigator.clipboard\n                        .writeText(url)\n                        .then(() => setShareMessage(\"Link copied\")),\n                )\n                .catch((failure) => {\n                  if (failure?.name !== \"AbortError\") {\n                    setShareMessage(\n                      \"Could not share the link. Please try again.\",\n                    );\n                  }\n                });\n            }}\n          >\n            Share\n          </button>\n          <Overlay.Title>{item.name}</Overlay.Title>\n          {!item.isAvailable && (\n            <p role=\"status\">{item.stockLabel ?? \"Unavailable\"}</p>\n          )}\n          {shareMessage && <p role=\"status\">{shareMessage}</p>}\n          <ItemConfigurator\n            showPrice\n            introduction={\n              <Fragment>\n                {item.promo && <p>{item.promo.name}</p>}\n                {item.description && <Description value={item.description} />}\n              </Fragment>\n            }\n            key={`${scope}:${item.id}:${menuId}`}\n            item={item}\n            menuId={menuId}\n            scope={scope}\n            onComplete={navigation.close}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"]}
+{
+  "version": 3,
+  "sources": ["../src/item/item-detail.tsx"],
+  "sourcesContent": ["\"use client\";\nimport { Overlay } from \"@zappie/foundations\";\nimport type { Item } from \"@zappie/sdk\";\nimport { Fragment, useContext, useEffect, useState } from \"react\";\nimport { Description, ItemImage } from \"../catalogue/presentation\";\nimport { ItemConfigurator } from \"./configurator\";\nimport { ItemEscapeContext, ItemFrame } from \"./frame\";\n\nexport type ItemDetailProps = {\n  item: Item;\n  menuId: string;\n  scope: string;\n  href: string;\n  themeClass?: string;\n  navigation: { isOpen: boolean; open(): void; close(): void };\n};\n/** Framework-independent SDK item screen, reusable through themeClass. */\nexport function ItemDetail(props: ItemDetailProps) {\n  return (\n    <ItemFrame\n      id={props.item.id}\n      name={props.item.name}\n      hasImages={props.item.images.length > 0}\n      navigation={props.navigation}\n      themeClass={props.themeClass}\n    >\n      <ItemContent key={props.item.id} {...props} />\n    </ItemFrame>\n  );\n}\nexport function ItemContent({\n  item,\n  menuId,\n  scope,\n  href,\n  navigation,\n}: ItemDetailProps) {\n  const [image, setImage] = useState(0);\n  const [lightbox, setLightbox] = useState(false);\n  const [shareMessage, setShareMessage] = useState(\"\");\n  const escape = useContext(ItemEscapeContext);\n  useEffect(() => {\n    if (!escape) {\n      return;\n    }\n    escape.current = lightbox ? () => setLightbox(false) : undefined;\n    return () => {\n      escape.current = undefined;\n    };\n  }, [escape, lightbox]);\n  return (\n    <div\n      className={`z-base-item-layout ${lightbox ? \"z-base-item-lightbox\" : \"\"}`}\n    >\n      {item.images.length > 0 && (\n        <section className=\"z-base-item-media\" aria-label=\"Product images\">\n          <button\n            type=\"button\"\n            className=\"z-base-item-photo\"\n            aria-label={\n              lightbox ? \"Close enlarged image\" : \"Enlarge product image\"\n            }\n            onClick={() => setLightbox(!lightbox)}\n          >\n            <ItemImage\n              key={image}\n              src={item.images[image] ?? item.images[0] ?? \"\"}\n              sizes=\"(min-width: 768px) 450px, 100vw\"\n              priority\n            />\n          </button>\n          {item.images.length > 1 && (\n            <nav aria-label=\"Image gallery\">\n              <button\n                type=\"button\"\n                onClick={() =>\n                  setImage(\n                    (image + item.images.length - 1) % item.images.length,\n                  )\n                }\n                aria-label=\"Previous image\"\n              >\n                \u2190\n              </button>\n              <span>\n                {image + 1} / {item.images.length}\n              </span>\n              <button\n                type=\"button\"\n                onClick={() => setImage((image + 1) % item.images.length)}\n                aria-label=\"Next image\"\n              >\n                \u2192\n              </button>\n            </nav>\n          )}\n          {lightbox && (\n            <button\n              type=\"button\"\n              className=\"z-base-button-secondary\"\n              onClick={() => setLightbox(false)}\n            >\n              Back to product\n            </button>\n          )}\n        </section>\n      )}\n      {!lightbox && (\n        <div className=\"z-base-item-details\">\n          <button\n            type=\"button\"\n            className=\"z-base-button-secondary\"\n            aria-label=\"Share product\"\n            onClick={() => {\n              const url = new URL(href, window.location.origin).href;\n              void Promise.resolve()\n                .then(() =>\n                  navigator.share\n                    ? navigator.share({ title: item.name, url })\n                    : navigator.clipboard\n                        .writeText(url)\n                        .then(() => setShareMessage(\"Link copied\")),\n                )\n                .catch((failure) => {\n                  if (failure?.name !== \"AbortError\") {\n                    setShareMessage(\n                      \"Could not share the link. Please try again.\",\n                    );\n                  }\n                });\n            }}\n          >\n            Share\n          </button>\n          <Overlay.Title>{item.name}</Overlay.Title>\n          {!item.isAvailable && (\n            <p role=\"status\">{item.stockLabel ?? \"Unavailable\"}</p>\n          )}\n          {shareMessage && <p role=\"status\">{shareMessage}</p>}\n          <ItemConfigurator\n            showPrice\n            introduction={\n              <Fragment>\n                {item.promo && <p>{item.promo.name}</p>}\n                {item.description && <Description value={item.description} />}\n              </Fragment>\n            }\n            key={`${scope}:${item.id}:${menuId}`}\n            item={item}\n            menuId={menuId}\n            scope={scope}\n            onComplete={navigation.close}\n          />\n        </div>\n      )}\n    </div>\n  );\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/navigation.js

@@ -1,4 +1,41 @@
 "use client";
-export { CatalogueNavigationProvider, createUrlNavigation, useCatalogueNavigation } from './chunk-ILOCSCZL.js';
+
+// src/navigation.tsx
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState
+} from "react";
+import { createUrlNavigation } from "./url-navigation.js";
+import { jsx } from "react/jsx-runtime";
+var Context = createContext(null);
+function CatalogueNavigationProvider({
+  navigation,
+  children
+}) {
+  const [, refresh] = useState(0);
+  useEffect(() => {
+    const update = () => refresh((value) => value + 1);
+    window.addEventListener("popstate", update);
+    return () => {
+      window.removeEventListener("popstate", update);
+    };
+  }, [navigation]);
+  return /* @__PURE__ */ jsx(Context.Provider, { value: navigation, children });
+}
+function useCatalogueNavigation() {
+  const navigation = useContext(Context);
+  if (!navigation) {
+    throw new Error(
+      "useCatalogueNavigation requires CatalogueNavigationProvider"
+    );
+  }
+  return navigation;
+}
+export {
+  CatalogueNavigationProvider,
+  createUrlNavigation,
+  useCatalogueNavigation
+};
 //# sourceMappingURL=navigation.js.map
-//# sourceMappingURL=navigation.js.map

package/dist/navigation.js.map

@@ -1 +1,7 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"navigation.js"}
+{
+  "version": 3,
+  "sources": ["../src/navigation.tsx"],
+  "sourcesContent": ["\"use client\";\n\nimport type { Item } from \"@zappie/sdk\";\nimport type { StorefrontUrlOptions } from \"@zappie/sdk/url\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useState,\n  type ReactNode,\n} from \"react\";\n\n/** URL-owned selection, shared by template routers and reusable base screens. */\nexport type CatalogueLocation = {\n  pathname: string;\n  menuId?: string;\n  categoryId?: string;\n  menuLayout?: \"GRID\" | \"LIST\" | \"CARD\";\n  item?: { id: string; path: string; presentation: \"path\" | \"query\" };\n};\n\n/** Stable identities, not host selectors or retained DOM nodes. */\nexport type CatalogueFocusTarget = { itemId?: string; fallback: \"catalogue\" };\n\nexport type CatalogueNavigationTarget = {\n  type: \"item\";\n  itemId: string;\n  menuId?: string;\n  categoryId?: string;\n};\n\nexport type CatalogueNavigation = {\n  /** Fresh URL snapshot on every read; providers re-render on history changes. */\n  readonly location: CatalogueLocation;\n  hrefFor(target: CatalogueNavigationTarget): string;\n  selectMenu(menuId: string): void;\n  selectCategory(categoryId: string): void;\n  setLayout(layout: NonNullable<CatalogueLocation[\"menuLayout\"]>): void;\n  openItem(input: {\n    itemId: string;\n    /** Already normalized catalogue/search item; opening it must not fetch it again. */\n    item?: Item;\n    menuId: string;\n    categoryId?: string;\n  }): Promise<void>;\n  /** Resolves after history changes and the item releases its modal/focus lock. */\n  closeItem(): Promise<void>;\n  /** Close the active item/base overlay before opening another surface. */\n  openCart(): Promise<void>;\n  openBranchFinder(): Promise<void>;\n  openBranchDetails?(): Promise<void>;\n  switchFulfilment(mode: \"delivery\" | \"pickup\"): Promise<boolean>;\n  /** Called after close settles; use a registered trigger, or the catalogue heading. */\n  restoreFocus(target: CatalogueFocusTarget): void;\n};\n\nexport type UrlNavigationOptions = StorefrontUrlOptions & {\n  window?: Window & typeof globalThis;\n};\nconst Context = createContext<CatalogueNavigation | null>(null);\n\nexport function CatalogueNavigationProvider({\n  navigation,\n  children,\n}: {\n  navigation: CatalogueNavigation;\n  children: ReactNode;\n}) {\n  const [, refresh] = useState(0);\n  useEffect(() => {\n    const update = () => refresh((value) => value + 1);\n    window.addEventListener(\"popstate\", update);\n    return () => {\n      window.removeEventListener(\"popstate\", update);\n    };\n  }, [navigation]);\n  return <Context.Provider value={navigation}>{children}</Context.Provider>;\n}\n\nexport function useCatalogueNavigation() {\n  const navigation = useContext(Context);\n  if (!navigation) {\n    throw new Error(\n      \"useCatalogueNavigation requires CatalogueNavigationProvider\",\n    );\n  }\n  return navigation;\n}\n\nexport { createUrlNavigation } from \"./url-navigation\";\n"],
+  "mappings": ";;;AAIA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA+EP,SAAS,2BAA2B;AAb3B;AAjBT,IAAM,UAAU,cAA0C,IAAI;AAEvD,SAAS,4BAA4B;AAAA,EAC1C;AAAA,EACA;AACF,GAGG;AACD,QAAM,CAAC,EAAE,OAAO,IAAI,SAAS,CAAC;AAC9B,YAAU,MAAM;AACd,UAAM,SAAS,MAAM,QAAQ,CAAC,UAAU,QAAQ,CAAC;AACjD,WAAO,iBAAiB,YAAY,MAAM;AAC1C,WAAO,MAAM;AACX,aAAO,oBAAoB,YAAY,MAAM;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AACf,SAAO,oBAAC,QAAQ,UAAR,EAAiB,OAAO,YAAa,UAAS;AACxD;AAEO,SAAS,yBAAyB;AACvC,QAAM,aAAa,WAAW,OAAO;AACrC,MAAI,CAAC,YAAY;AACf,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/url-navigation-state.js

@@ -0,0 +1,61 @@
+// src/url-navigation-state.ts
+var NAVIGATION_ENTRY = "zappie:storefront-navigation-entry";
+var routeBase = (route) => {
+  if (route.type === "item" || route.type === "order-menu") {
+    return {
+      business: route.business,
+      ...route.branch !== void 0 ? { branch: route.branch } : {}
+    };
+  }
+  return null;
+};
+var stateWith = (state, values) => {
+  const query = { ...state.query };
+  const next = { ...state, query };
+  const update = (property, key, value) => {
+    if (!Object.hasOwn(values, property)) {
+      return;
+    }
+    if (value === void 0) {
+      delete query[key];
+      delete next[property];
+      return;
+    }
+    query[key] = property === "mode" ? String(value === "pickup") : value;
+    if (property === "mode") {
+      next.mode = value === "pickup" ? "pickup" : "delivery";
+    } else if (property === "menuId") {
+      next.menuId = value;
+    } else if (property === "categoryId") {
+      next.categoryId = value;
+    } else if (property === "menuLayout") {
+      next.menuLayout = value;
+    } else {
+      next.modalId = value;
+    }
+  };
+  update("menuId", "menu_id", values.menuId);
+  update("categoryId", "category_id", values.categoryId);
+  update("menuLayout", "menu_layout", values.menuLayout);
+  update("modalId", "modal_id", values.modalId);
+  update("mode", "pickup", values.mode);
+  return next;
+};
+var catalogueRoute = (route, state) => {
+  const base = routeBase(route);
+  if (!base) {
+    return route;
+  }
+  return {
+    type: "order-menu",
+    ...base,
+    state
+  };
+};
+export {
+  NAVIGATION_ENTRY,
+  catalogueRoute,
+  routeBase,
+  stateWith
+};
+//# sourceMappingURL=url-navigation-state.js.map

package/dist/url-navigation-state.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/url-navigation-state.ts"],
+  "sourcesContent": ["import type { StorefrontPageState, StorefrontRoute } from \"@zappie/sdk/url\";\n\n/** History-state key marking entries this provider pushed, so close can go Back. */\nexport const NAVIGATION_ENTRY = \"zappie:storefront-navigation-entry\";\n\nexport const routeBase = (route: StorefrontRoute) => {\n  if (route.type === \"item\" || route.type === \"order-menu\") {\n    return {\n      business: route.business,\n      ...(route.branch !== undefined ? { branch: route.branch } : {}),\n    };\n  }\n  return null;\n};\n\nexport const stateWith = (\n  state: StorefrontPageState,\n  values: {\n    menuId?: string | undefined;\n    categoryId?: string | undefined;\n    menuLayout?: string | undefined;\n    modalId?: string | undefined;\n    mode?: \"delivery\" | \"pickup\" | undefined;\n  },\n): StorefrontPageState => {\n  const query = { ...state.query };\n  const next: StorefrontPageState = { ...state, query };\n  const update = (\n    property: \"menuId\" | \"categoryId\" | \"menuLayout\" | \"modalId\" | \"mode\",\n    key: string,\n    value: string | undefined,\n  ) => {\n    if (!Object.hasOwn(values, property)) {\n      return;\n    }\n    if (value === undefined) {\n      delete query[key];\n      delete next[property];\n      return;\n    }\n    query[key] = property === \"mode\" ? String(value === \"pickup\") : value;\n    if (property === \"mode\") {\n      next.mode = value === \"pickup\" ? \"pickup\" : \"delivery\";\n    } else if (property === \"menuId\") {\n      next.menuId = value;\n    } else if (property === \"categoryId\") {\n      next.categoryId = value;\n    } else if (property === \"menuLayout\") {\n      next.menuLayout = value;\n    } else {\n      next.modalId = value;\n    }\n  };\n  update(\"menuId\", \"menu_id\", values.menuId);\n  update(\"categoryId\", \"category_id\", values.categoryId);\n  update(\"menuLayout\", \"menu_layout\", values.menuLayout);\n  update(\"modalId\", \"modal_id\", values.modalId);\n  update(\"mode\", \"pickup\", values.mode);\n  return next;\n};\n\nexport const catalogueRoute = (\n  route: StorefrontRoute,\n  state: StorefrontPageState,\n): StorefrontRoute => {\n  const base = routeBase(route);\n  if (!base) {\n    return route;\n  }\n  return {\n    type: \"order-menu\",\n    ...base,\n    state,\n  };\n};\n"],
+  "mappings": ";AAGO,IAAM,mBAAmB;AAEzB,IAAM,YAAY,CAAC,UAA2B;AACnD,MAAI,MAAM,SAAS,UAAU,MAAM,SAAS,cAAc;AACxD,WAAO;AAAA,MACL,UAAU,MAAM;AAAA,MAChB,GAAI,MAAM,WAAW,SAAY,EAAE,QAAQ,MAAM,OAAO,IAAI,CAAC;AAAA,IAC/D;AAAA,EACF;AACA,SAAO;AACT;AAEO,IAAM,YAAY,CACvB,OACA,WAOwB;AACxB,QAAM,QAAQ,EAAE,GAAG,MAAM,MAAM;AAC/B,QAAM,OAA4B,EAAE,GAAG,OAAO,MAAM;AACpD,QAAM,SAAS,CACb,UACA,KACA,UACG;AACH,QAAI,CAAC,OAAO,OAAO,QAAQ,QAAQ,GAAG;AACpC;AAAA,IACF;AACA,QAAI,UAAU,QAAW;AACvB,aAAO,MAAM,GAAG;AAChB,aAAO,KAAK,QAAQ;AACpB;AAAA,IACF;AACA,UAAM,GAAG,IAAI,aAAa,SAAS,OAAO,UAAU,QAAQ,IAAI;AAChE,QAAI,aAAa,QAAQ;AACvB,WAAK,OAAO,UAAU,WAAW,WAAW;AAAA,IAC9C,WAAW,aAAa,UAAU;AAChC,WAAK,SAAS;AAAA,IAChB,WAAW,aAAa,cAAc;AACpC,WAAK,aAAa;AAAA,IACpB,WAAW,aAAa,cAAc;AACpC,WAAK,aAAa;AAAA,IACpB,OAAO;AACL,WAAK,UAAU;AAAA,IACjB;AAAA,EACF;AACA,SAAO,UAAU,WAAW,OAAO,MAAM;AACzC,SAAO,cAAc,eAAe,OAAO,UAAU;AACrD,SAAO,cAAc,eAAe,OAAO,UAAU;AACrD,SAAO,WAAW,YAAY,OAAO,OAAO;AAC5C,SAAO,QAAQ,UAAU,OAAO,IAAI;AACpC,SAAO;AACT;AAEO,IAAM,iBAAiB,CAC5B,OACA,UACoB;AACpB,QAAM,OAAO,UAAU,KAAK;AAC5B,MAAI,CAAC,MAAM;AACT,WAAO;AAAA,EACT;AACA,SAAO;AAAA,IACL,MAAM;AAAA,IACN,GAAG;AAAA,IACH;AAAA,EACF;AACF;",
+  "names": []
+}