@asteby/storefront-react 0.25.0 → 0.26.1

package/dist/subjects.cjs

@@ -0,0 +1,501 @@
+'use strict';
+
+var storefront = require('@asteby/storefront');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/subjects/subject-picker.tsx
+var StorefrontContext = react.createContext(null);
+function useOptionalStorefront() {
+  return react.useContext(StorefrontContext);
+}
+
+// src/locale.ts
+function useResolvedLocale(locale) {
+  const sf = useOptionalStorefront();
+  return locale ?? sf?.locale ?? "es-MX";
+}
+
+// src/subjects/messages.ts
+var ES = {
+  garage: {
+    empty: "A\xFAn no guardas ning\xFAn {kind}.",
+    add: "Agregar {kind}",
+    active: "Activo",
+    makeActive: "Hacer activo",
+    edit: "Editar",
+    remove: "Eliminar",
+    removeConfirm: "S\xED, eliminar {name}",
+    removeHint: "Se borra de verdad: no queda nada guardado.",
+    viewParts: "Ver piezas compatibles",
+    limit: "Llegaste al l\xEDmite ({max}). Elimina uno para agregar otro.",
+    loadError: "No pudimos cargar esto.",
+    retry: "Reintentar",
+    saved: "Guardado.",
+    removed: "Eliminado.",
+    privateLabel: "{field}: {value}"
+  },
+  picker: {
+    choose: "Elige\u2026",
+    chooseFirst: "Primero elige el campo anterior",
+    nickname: "Apodo (opcional)",
+    nicknameHint: "Para reconocerlo, por ejemplo \xABEl de diario\xBB.",
+    privateNote: "Solo t\xFA lo ves. No se usa para buscar piezas ni se comparte.",
+    privateKeep: "D\xE9jalo vac\xEDo para conservar el guardado.",
+    privateClear: "Quitar el guardado",
+    makeActive: "Usar como activo",
+    save: "Guardar",
+    saving: "Guardando\u2026",
+    cancel: "Cancelar",
+    refine: "Continuar",
+    errors: {
+      required: "Completa este campo.",
+      unknown: "Ese campo no existe.",
+      invalid: "El valor no es v\xE1lido.",
+      not_in_catalog: "Elige una opci\xF3n de la lista.",
+      year_range: "Ese a\xF1o no corresponde a lo que elegiste.",
+      catalog_unavailable: "El cat\xE1logo no est\xE1 disponible por ahora.",
+      validation: "Revisa los datos.",
+      duplicate: "Ya lo tienes guardado.",
+      limit: "Llegaste al l\xEDmite. Elimina uno para agregar otro.",
+      rate_limited: "Demasiados intentos. Espera un momento.",
+      unauthorized: "Inicia sesi\xF3n para continuar.",
+      not_found: "Ya no existe.",
+      unsupported: "Esta tienda no ofrece esto.",
+      store_misconfigured: "La tienda no est\xE1 configurada para esto. Av\xEDsale al negocio.",
+      unavailable: "No pudimos guardar. Intenta de nuevo."
+    }
+  },
+  filter: {
+    forItem: "Para: {name}",
+    change: "Cambiar",
+    choose: "Elige tu {kind} para ver solo lo que le queda",
+    onlyFits: "Solo lo compatible",
+    showAll: "Ver todo",
+    save: "Guardar en mi cuenta"
+  },
+  fit: { fits: "Compatible con tu {kind}", universal: "Universal", no: "No es para tu {kind}", unknown: "Sin datos de compatibilidad" }
+};
+var EN = {
+  garage: {
+    empty: "You have not saved any {kind} yet.",
+    add: "Add {kind}",
+    active: "Active",
+    makeActive: "Make active",
+    edit: "Edit",
+    remove: "Delete",
+    removeConfirm: "Yes, delete {name}",
+    removeHint: "It is really deleted: nothing is kept.",
+    viewParts: "See compatible parts",
+    limit: "You reached the limit ({max}). Delete one to add another.",
+    loadError: "We could not load this.",
+    retry: "Try again",
+    saved: "Saved.",
+    removed: "Deleted.",
+    privateLabel: "{field}: {value}"
+  },
+  picker: {
+    choose: "Choose\u2026",
+    chooseFirst: "Choose the previous field first",
+    nickname: "Nickname (optional)",
+    nicknameHint: "To recognize it, e.g. \u201CThe everyday one\u201D.",
+    privateNote: "Only you see it. It is not used to search parts and it is never shared.",
+    privateKeep: "Leave it empty to keep the saved one.",
+    privateClear: "Remove the saved one",
+    makeActive: "Use as active",
+    save: "Save",
+    saving: "Saving\u2026",
+    cancel: "Cancel",
+    refine: "Continue",
+    errors: {
+      required: "Fill in this field.",
+      unknown: "That field does not exist.",
+      invalid: "The value is not valid.",
+      not_in_catalog: "Choose an option from the list.",
+      year_range: "That year does not match what you chose.",
+      catalog_unavailable: "The catalog is not available right now.",
+      validation: "Check the details.",
+      duplicate: "You already saved this.",
+      limit: "You reached the limit. Delete one to add another.",
+      rate_limited: "Too many attempts. Wait a moment.",
+      unauthorized: "Sign in to continue.",
+      not_found: "It no longer exists.",
+      unsupported: "This store does not offer this.",
+      store_misconfigured: "The store is not set up for this. Let the business know.",
+      unavailable: "We could not save. Try again."
+    }
+  },
+  filter: {
+    forItem: "For: {name}",
+    change: "Change",
+    choose: "Choose your {kind} to see only what fits",
+    onlyFits: "Only what fits",
+    showAll: "Show all",
+    save: "Save to my account"
+  },
+  fit: { fits: "Fits your {kind}", universal: "Universal", no: "Not for your {kind}", unknown: "No compatibility data" }
+};
+function merge(base, over) {
+  if (!over) return base;
+  const out = { ...base };
+  for (const [k, v] of Object.entries(over)) {
+    if (v === void 0) continue;
+    const cur = out[k];
+    out[k] = cur && typeof cur === "object" && typeof v === "object" && v ? merge(cur, v) : v;
+  }
+  return out;
+}
+function subjectMessages(locale, overrides) {
+  return merge(locale?.toLowerCase().startsWith("en") ? EN : ES, overrides);
+}
+function fill(template, values) {
+  return template.replace(/\{(\w+)\}/g, (m, k) => k in values ? String(values[k]) : m);
+}
+var isYearField = (f) => f.type === "year";
+var initialValues = (kind, subject, values) => {
+  const out = {};
+  for (const f of kind.fields) {
+    if (f.private) continue;
+    const v = values?.[f.key] ?? subject?.attributes[f.key];
+    if (v !== void 0 && v !== null) out[f.key] = v;
+  }
+  return out;
+};
+function SubjectPicker(props) {
+  const { kind, subject, data, action, namePrefix = "subject", onSubmit, onCancel, pending, classNames: cx = {} } = props;
+  const locale = useResolvedLocale(props.locale);
+  const m = subjectMessages(locale, props.messages).picker;
+  const uid = react.useId().replace(/:/g, "");
+  const [values, setValues] = react.useState(() => initialValues(kind, subject, props.values ?? data?.values));
+  const [nickname, setNickname] = react.useState(subject?.nickname ?? "");
+  const [makeDefault, setMakeDefault] = react.useState(false);
+  const [clientProblems, setClientProblems] = react.useState(null);
+  const [clear, setClear] = react.useState({});
+  const [privates, setPrivates] = react.useState({});
+  const serverErrors = data?.fieldErrors ?? {};
+  const problemOf = (key) => clientProblems?.[key] ?? serverErrors[key];
+  const errorText = (code) => code ? m.errors[code] ?? m.errors.invalid : void 0;
+  const topError = !data?.ok && data?.error && !data.error.field ? errorText(data.error.code) : void 0;
+  const optionsOf = react.useMemo(() => (f) => f.source === "catalog" ? storefront.subjectOptions(kind, f.key, values) : [], [kind, values]);
+  const set = (key, value) => {
+    setClientProblems(null);
+    setValues((cur) => storefront.reconcileSubjectValues(kind, { ...cur, [key]: value }));
+  };
+  const submit = (e) => {
+    if (!onSubmit) return;
+    e.preventDefault();
+    const sent = { ...values };
+    for (const f of kind.fields) {
+      if (!f.private) continue;
+      if (clear[f.key]) sent[f.key] = null;
+      else if (privates[f.key]) sent[f.key] = privates[f.key];
+    }
+    const r = storefront.resolveSubject(kind, sent);
+    if (!r.ok) {
+      const privateKeys = new Set(kind.fields.filter((f) => f.private).map((f) => f.key));
+      const blocking = Object.fromEntries(Object.entries(r.problems).filter(([key, code]) => !(subject && code === "required" && privateKeys.has(key))));
+      if (Object.keys(blocking).length > 0) {
+        setClientProblems(blocking);
+        return;
+      }
+    }
+    const attributes = {};
+    for (const f of kind.fields) {
+      const v = sent[f.key];
+      if (v === null && f.private) attributes[f.key] = null;
+      else if (v !== void 0 && v !== null && v !== "") attributes[f.key] = v;
+    }
+    void onSubmit({ kind: kind.key, attributes, nickname: nickname.trim() || null, ...makeDefault ? { is_default: true } : {} }, subject);
+  };
+  const name = (key) => `${namePrefix}.${key}`;
+  const levelKeys = kind.fields.filter((f) => f.source === "catalog" && !isYearField(f)).map((f) => f.key);
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { method: "post", action, onSubmit: submit, className: cx.form, "data-sf-subject-picker": true, "data-sf-subject-kind": kind.key, noValidate: !!onSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "intent", value: "subject-save" }),
+    /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "kind", value: kind.key }),
+    subject ? /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "id", value: subject.id }) : null,
+    topError ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: cx.error, "data-sf-subject-error": true, children: topError }) : null,
+    kind.fields.map((f) => {
+      const id = `sf-subject-${uid}-${f.key}`;
+      const err = errorText(problemOf(f.key));
+      const opts = optionsOf(f);
+      const waiting = f.source === "catalog" && !isYearField(f) && levelKeys.indexOf(f.key) > 0 && opts.length === 0;
+      const describedBy = [err ? `${id}-err` : "", f.private ? `${id}-priv` : ""].filter(Boolean).join(" ") || void 0;
+      let control;
+      if (f.private) {
+        control = /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id,
+            name: name(f.key),
+            type: "text",
+            autoComplete: "off",
+            autoCapitalize: "characters",
+            spellCheck: false,
+            maxLength: f.max,
+            className: cx.control,
+            value: privates[f.key] ?? "",
+            onChange: (e) => setPrivates((cur) => ({ ...cur, [f.key]: e.target.value })),
+            "aria-describedby": describedBy,
+            "aria-invalid": err ? true : void 0,
+            placeholder: subject && typeof subject.attributes[f.key] === "string" ? String(subject.attributes[f.key]) : void 0,
+            "data-sf-private": true
+          }
+        );
+      } else if (f.source === "catalog" && opts.length > 0) {
+        control = /* @__PURE__ */ jsxRuntime.jsxs("select", { id, name: name(f.key), className: cx.control, value: String(values[f.key] ?? ""), onChange: (e) => set(f.key, e.target.value), required: f.required, "aria-describedby": describedBy, "aria-invalid": err ? true : void 0, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: m.choose }),
+          opts.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.value, children: o.label }, o.value))
+        ] });
+      } else if (f.source === "catalog" && !isYearField(f)) {
+        control = /* @__PURE__ */ jsxRuntime.jsx("select", { id, name: name(f.key), className: cx.control, value: "", disabled: true, "aria-describedby": describedBy, children: /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: waiting ? m.chooseFirst : m.choose }) });
+      } else {
+        control = /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            id,
+            name: name(f.key),
+            type: isYearField(f) ? "number" : "text",
+            inputMode: isYearField(f) ? "numeric" : void 0,
+            min: isYearField(f) ? 1900 : void 0,
+            max: isYearField(f) ? 2100 : void 0,
+            maxLength: f.max,
+            className: cx.control,
+            value: String(values[f.key] ?? ""),
+            onChange: (e) => set(f.key, e.target.value),
+            required: f.required,
+            "aria-describedby": describedBy,
+            "aria-invalid": err ? true : void 0
+          }
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.field, "data-sf-subject-field": f.key, "data-sf-subject-year": isYearField(f) ? "" : void 0, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: id, className: cx.label, children: [
+          f.label,
+          f.required ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " *" }) : null
+        ] }),
+        control,
+        f.private ? /* @__PURE__ */ jsxRuntime.jsxs("p", { id: `${id}-priv`, className: cx.privateNote ?? cx.hint, "data-sf-subject-private-note": true, children: [
+          m.privateNote,
+          subject && subject.attributes[f.key] !== void 0 ? ` ${m.privateKeep}` : ""
+        ] }) : null,
+        f.private && subject && subject.attributes[f.key] !== void 0 ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx.hint, "data-sf-subject-clear": true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", name: `${name(f.key)}.clear`, checked: !!clear[f.key], onChange: (e) => setClear((cur) => ({ ...cur, [f.key]: e.target.checked })) }),
+          " ",
+          m.privateClear
+        ] }) : null,
+        err ? /* @__PURE__ */ jsxRuntime.jsx("p", { id: `${id}-err`, role: "alert", className: cx.error, "data-sf-subject-error": true, children: err }) : null
+      ] }, f.key);
+    }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.field, "data-sf-subject-field": "nickname", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: `sf-subject-${uid}-nick`, className: cx.label, children: m.nickname }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { id: `sf-subject-${uid}-nick`, name: "nickname", type: "text", maxLength: 40, className: cx.control, value: nickname, onChange: (e) => setNickname(e.target.value), "aria-describedby": `sf-subject-${uid}-nick-h` }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { id: `sf-subject-${uid}-nick-h`, className: cx.hint, children: m.nicknameHint })
+    ] }),
+    props.offerDefault && !subject?.is_default ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx.hint, "data-sf-subject-default": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", name: "is_default", value: "1", checked: makeDefault, onChange: (e) => setMakeDefault(e.target.checked) }),
+      " ",
+      m.makeActive
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.actions, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: cx.submit, disabled: pending, "data-sf-subject-submit": true, children: pending ? m.saving : m.save }),
+      /* @__PURE__ */ jsxRuntime.jsx("noscript", { children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", name: "intent", value: "subject-refine", formNoValidate: true, "data-sf-subject-refine": true, children: m.refine }) }),
+      onCancel ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cx.cancel, onClick: onCancel, "data-sf-subject-cancel": true, children: m.cancel }) : null
+    ] })
+  ] });
+}
+function SubjectGarage(props) {
+  const { kind, status = "ready", action, partsHref, data, onSave, onDelete, onMakeDefault, pending, classNames: cx = {} } = props;
+  const locale = useResolvedLocale(props.locale);
+  const msgs = subjectMessages(locale, props.messages);
+  const m = msgs.garage;
+  const Heading = props.headingLevel === 3 ? "h3" : "h2";
+  const singular = kind.label.toLowerCase();
+  const mine = props.subjects.filter((s) => s.kind === kind.key);
+  const atLimit = mine.length >= kind.max_per_account;
+  const openId = props.openId ?? (data && !data.ok && (data.intent === "subject-save" || data.intent === "subject-refine") ? data.id ?? "new" : null);
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: cx.root, "data-sf-subject-garage": true, "data-sf-subject-kind": kind.key, "aria-labelledby": `sf-garage-${kind.key}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("header", { className: cx.header, children: /* @__PURE__ */ jsxRuntime.jsx(Heading, { id: `sf-garage-${kind.key}`, className: cx.title, children: kind.label_plural }) }),
+    data?.ok && data.intent && data.intent !== "subject-default" ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", className: cx.notice, "data-sf-subject-notice": true, children: data.intent === "subject-delete" ? m.removed : m.saved }) : null,
+    status === "error" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: cx.notice, "data-sf-subject-degraded": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: m.loadError }),
+      props.onRetry ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: cx.button, onClick: props.onRetry, children: m.retry }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: "", className: cx.button, children: m.retry })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      mine.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.empty, "data-sf-subject-empty": true, children: fill(m.empty, { kind: singular }) }) : /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cx.list, "data-sf-subject-list": true, children: mine.map((s) => {
+        const parts = partsHref?.(s);
+        const privates = kind.fields.filter((f) => f.private && s.attributes[f.key] !== void 0);
+        return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: cx.card, "data-sf-subject": s.id, "data-sf-subject-active": s.is_default ? "" : void 0, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cx.cardTitle, "data-sf-subject-label": true, children: [
+            s.label,
+            s.is_default ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.badge, "data-sf-subject-badge": true, children: m.active }) : null
+          ] }),
+          s.nickname ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.nickname, children: s.nickname }) : null,
+          privates.map((f) => /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.meta, "data-sf-subject-private-value": true, children: fill(m.privateLabel, { field: f.label, value: String(s.attributes[f.key]) }) }, f.key)),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.cardActions, children: [
+            parts ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: parts, className: `${cx.button ?? ""} ${cx.primary ?? ""}`.trim() || void 0, "data-sf-subject-parts": true, children: m.viewParts }) : null,
+            !s.is_default ? /* @__PURE__ */ jsxRuntime.jsxs("form", { method: "post", action, onSubmit: onMakeDefault ? (e) => {
+              e.preventDefault();
+              void onMakeDefault(s);
+            } : void 0, "data-sf-subject-default-form": true, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "intent", value: "subject-default" }),
+              /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "id", value: s.id }),
+              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: cx.button, disabled: pending, children: m.makeActive })
+            ] }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cx.details, open: openId === s.id || void 0, "data-sf-subject-edit": true, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("summary", { className: cx.summary, children: m.edit }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SubjectPicker,
+                {
+                  kind,
+                  subject: s,
+                  ...action ? { action } : {},
+                  data: openId === s.id ? data : null,
+                  ...onSave ? { onSubmit: onSave } : {},
+                  pending,
+                  locale,
+                  ...props.messages ? { messages: props.messages } : {},
+                  classNames: cx
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cx.details, "data-sf-subject-remove": true, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("summary", { className: cx.summary, children: m.remove }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.meta, children: m.removeHint }),
+              /* @__PURE__ */ jsxRuntime.jsxs("form", { method: "post", action, onSubmit: onDelete ? (e) => {
+                e.preventDefault();
+                void onDelete(s);
+              } : void 0, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "intent", value: "subject-delete" }),
+                /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name: "id", value: s.id }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: `${cx.button ?? ""} ${cx.danger ?? ""}`.trim() || void 0, disabled: pending, children: fill(m.removeConfirm, { name: s.label }) })
+              ] })
+            ] })
+          ] })
+        ] }, s.id);
+      }) }),
+      atLimit ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.limit, "data-sf-subject-limit": true, children: fill(m.limit, { max: kind.max_per_account }) }) : /* @__PURE__ */ jsxRuntime.jsxs("details", { className: cx.details, open: openId === "new" || void 0, "data-sf-subject-add": true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("summary", { className: cx.summary, children: fill(m.add, { kind: singular }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SubjectPicker,
+          {
+            kind,
+            ...action ? { action } : {},
+            data: openId === "new" ? data : null,
+            ...onSave ? { onSubmit: onSave } : {},
+            offerDefault: mine.length > 0,
+            pending,
+            locale,
+            ...props.messages ? { messages: props.messages } : {},
+            classNames: cx
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function SubjectFilter(props) {
+  const { kind, active, showingAll, classNames: cx = {} } = props;
+  const locale = useResolvedLocale(props.locale);
+  const m = subjectMessages(locale, props.messages).filter;
+  const singular = kind.label.toLowerCase();
+  if (!active) {
+    return props.chooseHref ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cx.root, "data-sf-subject-filter": true, "data-sf-subject-filter-empty": true, children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: props.chooseHref, className: cx.link, children: fill(m.choose, { kind: singular }) }) }) : null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx.root, "data-sf-subject-filter": true, "data-sf-subject-showing": showingAll ? "all" : "fits", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx.label, children: fill(m.forItem, { name: active.label }) }),
+    props.changeHref ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: props.changeHref, className: cx.link, children: m.change }) : null,
+    showingAll && props.onlyFitsHref ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: props.onlyFitsHref, className: cx.toggle ?? cx.link, children: m.onlyFits }) : null,
+    !showingAll && props.showAllHref ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: props.showAllHref, className: cx.toggle ?? cx.link, children: m.showAll }) : null
+  ] });
+}
+function SubjectFitBadge(props) {
+  const locale = useResolvedLocale(props.locale);
+  const m = subjectMessages(locale, props.messages).fit;
+  if (props.state === "unknown" && !props.showUnknown) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: props.className, "data-sf-subject-fit": props.state, children: [
+    fill(m[props.state], { kind: props.kind.label.toLowerCase() }),
+    props.children
+  ] });
+}
+function useSubjects(client) {
+  const ctx = useOptionalStorefront();
+  const sf = client ?? ctx?.client ?? null;
+  const [state, setState] = react.useState({ status: "loading", kinds: [], subjects: [], error: null });
+  const alive = react.useRef(null);
+  const load = react.useCallback(() => {
+    alive.current?.abort();
+    if (!sf) {
+      setState({ status: "loading", kinds: [], subjects: [], error: null });
+      return;
+    }
+    const ctl = new AbortController();
+    alive.current = ctl;
+    const opt = { signal: ctl.signal };
+    setState((s) => s.status === "ready" ? s : { status: "loading", kinds: [], subjects: [], error: null });
+    sf.content.subjectKinds(opt).then(
+      async (kinds) => {
+        if (ctl.signal.aborted) return;
+        if (kinds.length === 0) return setState({ status: "unavailable", kinds: [], subjects: [], error: null });
+        try {
+          const subjects = await sf.customer.subjects.list(void 0, opt);
+          if (!ctl.signal.aborted) setState({ status: "ready", kinds, subjects, error: null });
+        } catch (e) {
+          if (!ctl.signal.aborted) setState({ status: "error", kinds, subjects: [], error: e instanceof Error ? e : new Error("Request failed") });
+        }
+      },
+      (e) => !ctl.signal.aborted && setState({ status: "error", kinds: [], subjects: [], error: e instanceof Error ? e : new Error("Request failed") })
+    );
+  }, [sf]);
+  react.useEffect(() => {
+    load();
+    return () => alive.current?.abort();
+  }, [load]);
+  const need = () => {
+    if (!sf) throw new Error("useSubjects: no storefront client");
+    return sf;
+  };
+  const create = react.useCallback(async (input) => {
+    const saved = await need().customer.subjects.create(input);
+    load();
+    return saved;
+  }, [sf, load]);
+  const update = react.useCallback(async (id, patch) => {
+    const saved = await need().customer.subjects.update(id, patch);
+    load();
+    return saved;
+  }, [sf, load]);
+  const remove = react.useCallback(async (id) => {
+    await need().customer.subjects.delete(id);
+    load();
+  }, [sf, load]);
+  const makeDefault = react.useCallback((id) => update(id, { is_default: true }), [update]);
+  return { ...state, reload: load, create, update, remove, makeDefault };
+}
+var KEY_RE = /^[a-z0-9._+/-]{1,100}$/;
+var escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function subjectFromFitKey(kind, fitKey) {
+  if (!fitKey || !KEY_RE.test(fitKey) || !kind.fit_key_template) return null;
+  const names = [];
+  const pattern = kind.fit_key_template.split(/(\{[a-z][a-z0-9_]*\})/).map((part) => {
+    const m = /^\{([a-z][a-z0-9_]*)\}$/.exec(part);
+    if (!m) return escape(part);
+    names.push(m[1]);
+    return "([^/]+)";
+  }).join("");
+  const match = new RegExp(`^${pattern}$`).exec(fitKey);
+  if (!match) return null;
+  const values = {};
+  names.forEach((n, i) => values[n] = match[i + 1]);
+  const r = storefront.resolveSubject(kind, values);
+  return r.ok && r.subject.fit_key === fitKey ? r.subject : null;
+}
+
+exports.SubjectFilter = SubjectFilter;
+exports.SubjectFitBadge = SubjectFitBadge;
+exports.SubjectGarage = SubjectGarage;
+exports.SubjectPicker = SubjectPicker;
+exports.fillSubjectMessage = fill;
+exports.subjectFromFitKey = subjectFromFitKey;
+exports.subjectMessages = subjectMessages;
+exports.useSubjects = useSubjects;
+//# sourceMappingURL=subjects.cjs.map
+//# sourceMappingURL=subjects.cjs.map