@asteby/storefront-react 0.24.0 → 0.26.0

package/dist/subjects.d.ts

@@ -0,0 +1,178 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { SubjectKind, Subject, SubjectValues, SubjectInput, SubjectPatch, StorefrontClient } from '@asteby/storefront';
+import { a as SubjectErrorCode, S as SubjectActionData } from './fit-key-B9sYQVwG.js';
+export { b as SubjectIntent, s as subjectFromFitKey } from './fit-key-B9sYQVwG.js';
+
+/** Texts of the «My items» components. Spanish (es-MX) by default, English with `en*`, any locale with `messages`. */
+
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends Record<string, unknown> ? DeepPartial<T[K]> : T[K];
+};
+/**
+ * `{kind}` is the singular name the store gave the kind, lowercased («vehículo»); `{name}` the label of an item. Nothing
+ * here names a kind: the words come from the data the organization publishes.
+ */
+type SubjectMessages = {
+    garage: {
+        empty: string;
+        add: string;
+        active: string;
+        makeActive: string;
+        edit: string;
+        remove: string;
+        removeConfirm: string;
+        removeHint: string;
+        viewParts: string;
+        limit: string;
+        loadError: string;
+        retry: string;
+        saved: string;
+        removed: string;
+        privateLabel: string;
+    };
+    picker: {
+        choose: string;
+        chooseFirst: string;
+        nickname: string;
+        nicknameHint: string;
+        privateNote: string;
+        privateKeep: string;
+        privateClear: string;
+        makeActive: string;
+        save: string;
+        saving: string;
+        cancel: string;
+        refine: string;
+        errors: Record<'required' | 'unknown' | 'invalid' | 'not_in_catalog' | 'year_range' | 'catalog_unavailable', string> & Record<SubjectErrorCode, string>;
+    };
+    filter: {
+        forItem: string;
+        change: string;
+        choose: string;
+        onlyFits: string;
+        showAll: string;
+        save: string;
+    };
+    fit: {
+        fits: string;
+        universal: string;
+        no: string;
+        unknown: string;
+    };
+};
+/** Messages for a locale (`en*` → English, else Spanish), with the store's overrides on top. */
+declare function subjectMessages(locale?: string, overrides?: DeepPartial<SubjectMessages>): SubjectMessages;
+/** `{name}` placeholders. */
+declare function fill(template: string, values: Record<string, string | number>): string;
+
+type SubjectPickerClassNames = Partial<Record<'form' | 'field' | 'label' | 'control' | 'hint' | 'error' | 'actions' | 'submit' | 'cancel' | 'privateNote', string>>;
+type SubjectPickerProps = {
+    kind: SubjectKind;
+    /** The item being edited (its public values start the form); omit to add one. */
+    subject?: Subject | null;
+    /** Values to start with (what `SubjectActionData.values` returned after an error, or a refinement without JavaScript). */
+    values?: SubjectValues;
+    /** What the action answered: errors by field, refilled values. */
+    data?: SubjectActionData | null;
+    /** `action` of the form (default: the current URL). */
+    action?: string;
+    /** Field-name prefix (default `subject`: `subject.make`). */
+    namePrefix?: string;
+    /** With JavaScript: receives the validated input; the form does not post. Without it the form posts normally. */
+    onSubmit?: (input: SubjectInput, subject?: Subject | null) => void | Promise<void>;
+    onCancel?: () => void;
+    pending?: boolean;
+    /** Offer «use as active» (default true when the buyer already has items of this kind: the caller decides). */
+    offerDefault?: boolean;
+    locale?: string;
+    messages?: DeepPartial<SubjectMessages>;
+    classNames?: SubjectPickerClassNames;
+};
+declare function SubjectPicker(props: SubjectPickerProps): react.JSX.Element;
+
+type SubjectGarageClassNames = SubjectPickerClassNames & Partial<Record<'root' | 'header' | 'title' | 'list' | 'card' | 'cardTitle' | 'nickname' | 'badge' | 'meta' | 'cardActions' | 'button' | 'primary' | 'danger' | 'empty' | 'notice' | 'limit' | 'details' | 'summary', string>>;
+type SubjectGarageProps = {
+    kind: SubjectKind;
+    /** The buyer's items (any kind: only this kind's are shown). */
+    subjects: Subject[];
+    /** `error`: the read failed; the list is replaced by a retry. `ready` (default) shows the list. */
+    status?: 'ready' | 'error';
+    onRetry?: () => void;
+    /** `action` of the forms (default: the current URL). */
+    action?: string;
+    /** Where «see compatible parts» goes for an item (e.g. `/productos?para=<fit_key>`); `null`/omitted hides the link. */
+    partsHref?: (subject: Subject) => string | null | undefined;
+    /** What the action answered: errors and refilled values for the form it concerns, a notice after a save. */
+    data?: SubjectActionData | null;
+    /** Id of the item whose edit form is open without JavaScript (after a failed save); `'new'` for the add form. */
+    openId?: string | null;
+    onSave?: (input: SubjectInput, subject?: Subject | null) => void | Promise<void>;
+    onDelete?: (subject: Subject) => void | Promise<void>;
+    onMakeDefault?: (subject: Subject) => void | Promise<void>;
+    pending?: boolean;
+    headingLevel?: 2 | 3;
+    locale?: string;
+    messages?: DeepPartial<SubjectMessages>;
+    classNames?: SubjectGarageClassNames;
+};
+declare function SubjectGarage(props: SubjectGarageProps): react.JSX.Element;
+
+type SubjectFilterClassNames = Partial<Record<'root' | 'label' | 'link' | 'toggle', string>>;
+type SubjectFilterProps = {
+    kind: SubjectKind;
+    /** The item that applies, or `null` when the buyer has not chosen one. */
+    active: {
+        label: string;
+        fit_key: string;
+    } | null;
+    /** Showing the whole catalog (the buyer asked for it) instead of only what fits. */
+    showingAll?: boolean;
+    /** Where «Change» goes (the garage or the picker). Omit to hide it. */
+    changeHref?: string;
+    /** Where «Choose your …» goes when there is no active item. */
+    chooseHref?: string;
+    /** The same page showing only what fits / everything (e.g. with and without `?todo=1`). */
+    onlyFitsHref?: string;
+    showAllHref?: string;
+    locale?: string;
+    messages?: DeepPartial<SubjectMessages>;
+    classNames?: SubjectFilterClassNames;
+};
+declare function SubjectFilter(props: SubjectFilterProps): react.JSX.Element | null;
+type SubjectFitBadgeProps = {
+    kind: SubjectKind;
+    /** `fitState(product)` of `@asteby/storefront-react/fitment` (the state `withFit` resolved). */
+    state: 'fits' | 'universal' | 'no' | 'unknown';
+    /** Show the badge for `unknown` too (default: it is hidden: no data, no claim). */
+    showUnknown?: boolean;
+    locale?: string;
+    messages?: DeepPartial<SubjectMessages>;
+    className?: string;
+    children?: ReactNode;
+};
+/** «Fits your vehicle» / «Universal» / «Not for your vehicle». With no compatibility data it says nothing. */
+declare function SubjectFitBadge(props: SubjectFitBadgeProps): react.JSX.Element | null;
+
+/**
+ * Data hook of «My items» for stores that render on the client (the loader/action pair of `subjects/server` is the way on
+ * a server-rendered store). It talks to the client of the `StorefrontProvider` (or `client`), which must carry the buyer's
+ * session (`withCustomerToken`). It never throws: a failure is `status: 'error'` and `reload()` is the retry; a store that
+ * declares no kind is `status: 'unavailable'` and the section should not render.
+ */
+
+type UseSubjectsStatus = 'loading' | 'ready' | 'error' | 'unavailable';
+type UseSubjects = {
+    status: UseSubjectsStatus;
+    kinds: SubjectKind[];
+    subjects: Subject[];
+    error: Error | null;
+    reload: () => void;
+    create: (input: SubjectInput) => Promise<Subject>;
+    update: (id: string, patch: SubjectPatch) => Promise<Subject>;
+    remove: (id: string) => Promise<void>;
+    makeDefault: (id: string) => Promise<Subject>;
+};
+declare function useSubjects(client?: StorefrontClient | null): UseSubjects;
+
+export { type DeepPartial, SubjectActionData, SubjectErrorCode, SubjectFilter, type SubjectFilterClassNames, type SubjectFilterProps, SubjectFitBadge, type SubjectFitBadgeProps, SubjectGarage, type SubjectGarageClassNames, type SubjectGarageProps, type SubjectMessages, SubjectPicker, type SubjectPickerClassNames, type SubjectPickerProps, type UseSubjects, type UseSubjectsStatus, fill as fillSubjectMessage, subjectMessages, useSubjects };

package/dist/subjects.js

@@ -0,0 +1,465 @@
+export { subjectFromFitKey } from './chunk-Z4C4LKXF.js';
+import { useResolvedLocale } from './chunk-T52H5HL3.js';
+import { useOptionalStorefront } from './chunk-DQBL2DFJ.js';
+import { subjectOptions, reconcileSubjectValues, resolveSubject } from '@asteby/storefront';
+import { useId, useState, useMemo, useRef, useCallback, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// 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 = useId().replace(/:/g, "");
+  const [values, setValues] = useState(() => initialValues(kind, subject, props.values ?? data?.values));
+  const [nickname, setNickname] = useState(subject?.nickname ?? "");
+  const [makeDefault, setMakeDefault] = useState(false);
+  const [clientProblems, setClientProblems] = useState(null);
+  const [clear, setClear] = useState({});
+  const [privates, setPrivates] = 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 = useMemo(() => (f) => f.source === "catalog" ? subjectOptions(kind, f.key, values) : [], [kind, values]);
+  const set = (key, value) => {
+    setClientProblems(null);
+    setValues((cur) => 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 = 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__ */ 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__ */ jsx("input", { type: "hidden", name: "intent", value: "subject-save" }),
+    /* @__PURE__ */ jsx("input", { type: "hidden", name: "kind", value: kind.key }),
+    subject ? /* @__PURE__ */ jsx("input", { type: "hidden", name: "id", value: subject.id }) : null,
+    topError ? /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("option", { value: "", children: m.choose }),
+          opts.map((o) => /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value))
+        ] });
+      } else if (f.source === "catalog" && !isYearField(f)) {
+        control = /* @__PURE__ */ jsx("select", { id, name: name(f.key), className: cx.control, value: "", disabled: true, "aria-describedby": describedBy, children: /* @__PURE__ */ jsx("option", { value: "", children: waiting ? m.chooseFirst : m.choose }) });
+      } else {
+        control = /* @__PURE__ */ 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__ */ jsxs("div", { className: cx.field, "data-sf-subject-field": f.key, "data-sf-subject-year": isYearField(f) ? "" : void 0, children: [
+        /* @__PURE__ */ jsxs("label", { htmlFor: id, className: cx.label, children: [
+          f.label,
+          f.required ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " *" }) : null
+        ] }),
+        control,
+        f.private ? /* @__PURE__ */ 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__ */ jsxs("label", { className: cx.hint, "data-sf-subject-clear": true, children: [
+          /* @__PURE__ */ 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__ */ jsx("p", { id: `${id}-err`, role: "alert", className: cx.error, "data-sf-subject-error": true, children: err }) : null
+      ] }, f.key);
+    }),
+    /* @__PURE__ */ jsxs("div", { className: cx.field, "data-sf-subject-field": "nickname", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: `sf-subject-${uid}-nick`, className: cx.label, children: m.nickname }),
+      /* @__PURE__ */ 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__ */ jsx("p", { id: `sf-subject-${uid}-nick-h`, className: cx.hint, children: m.nicknameHint })
+    ] }),
+    props.offerDefault && !subject?.is_default ? /* @__PURE__ */ jsxs("label", { className: cx.hint, "data-sf-subject-default": true, children: [
+      /* @__PURE__ */ jsx("input", { type: "checkbox", name: "is_default", value: "1", checked: makeDefault, onChange: (e) => setMakeDefault(e.target.checked) }),
+      " ",
+      m.makeActive
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: cx.actions, children: [
+      /* @__PURE__ */ jsx("button", { type: "submit", className: cx.submit, disabled: pending, "data-sf-subject-submit": true, children: pending ? m.saving : m.save }),
+      /* @__PURE__ */ jsx("noscript", { children: /* @__PURE__ */ jsx("button", { type: "submit", name: "intent", value: "subject-refine", formNoValidate: true, "data-sf-subject-refine": true, children: m.refine }) }),
+      onCancel ? /* @__PURE__ */ 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__ */ jsxs("section", { className: cx.root, "data-sf-subject-garage": true, "data-sf-subject-kind": kind.key, "aria-labelledby": `sf-garage-${kind.key}`, children: [
+    /* @__PURE__ */ jsx("header", { className: cx.header, children: /* @__PURE__ */ jsx(Heading, { id: `sf-garage-${kind.key}`, className: cx.title, children: kind.label_plural }) }),
+    data?.ok && data.intent && data.intent !== "subject-default" ? /* @__PURE__ */ 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__ */ jsxs("div", { role: "alert", className: cx.notice, "data-sf-subject-degraded": true, children: [
+      /* @__PURE__ */ jsx("p", { children: m.loadError }),
+      props.onRetry ? /* @__PURE__ */ jsx("button", { type: "button", className: cx.button, onClick: props.onRetry, children: m.retry }) : /* @__PURE__ */ jsx("a", { href: "", className: cx.button, children: m.retry })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      mine.length === 0 ? /* @__PURE__ */ jsx("p", { className: cx.empty, "data-sf-subject-empty": true, children: fill(m.empty, { kind: singular }) }) : /* @__PURE__ */ 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__ */ jsxs("li", { className: cx.card, "data-sf-subject": s.id, "data-sf-subject-active": s.is_default ? "" : void 0, children: [
+          /* @__PURE__ */ jsxs("p", { className: cx.cardTitle, "data-sf-subject-label": true, children: [
+            s.label,
+            s.is_default ? /* @__PURE__ */ jsx("span", { className: cx.badge, "data-sf-subject-badge": true, children: m.active }) : null
+          ] }),
+          s.nickname ? /* @__PURE__ */ jsx("p", { className: cx.nickname, children: s.nickname }) : null,
+          privates.map((f) => /* @__PURE__ */ 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__ */ jsxs("div", { className: cx.cardActions, children: [
+            parts ? /* @__PURE__ */ 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__ */ jsxs("form", { method: "post", action, onSubmit: onMakeDefault ? (e) => {
+              e.preventDefault();
+              void onMakeDefault(s);
+            } : void 0, "data-sf-subject-default-form": true, children: [
+              /* @__PURE__ */ jsx("input", { type: "hidden", name: "intent", value: "subject-default" }),
+              /* @__PURE__ */ jsx("input", { type: "hidden", name: "id", value: s.id }),
+              /* @__PURE__ */ jsx("button", { type: "submit", className: cx.button, disabled: pending, children: m.makeActive })
+            ] }) : null,
+            /* @__PURE__ */ jsxs("details", { className: cx.details, open: openId === s.id || void 0, "data-sf-subject-edit": true, children: [
+              /* @__PURE__ */ jsx("summary", { className: cx.summary, children: m.edit }),
+              /* @__PURE__ */ 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__ */ jsxs("details", { className: cx.details, "data-sf-subject-remove": true, children: [
+              /* @__PURE__ */ jsx("summary", { className: cx.summary, children: m.remove }),
+              /* @__PURE__ */ jsx("p", { className: cx.meta, children: m.removeHint }),
+              /* @__PURE__ */ jsxs("form", { method: "post", action, onSubmit: onDelete ? (e) => {
+                e.preventDefault();
+                void onDelete(s);
+              } : void 0, children: [
+                /* @__PURE__ */ jsx("input", { type: "hidden", name: "intent", value: "subject-delete" }),
+                /* @__PURE__ */ jsx("input", { type: "hidden", name: "id", value: s.id }),
+                /* @__PURE__ */ 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__ */ jsx("p", { className: cx.limit, "data-sf-subject-limit": true, children: fill(m.limit, { max: kind.max_per_account }) }) : /* @__PURE__ */ jsxs("details", { className: cx.details, open: openId === "new" || void 0, "data-sf-subject-add": true, children: [
+        /* @__PURE__ */ jsx("summary", { className: cx.summary, children: fill(m.add, { kind: singular }) }),
+        /* @__PURE__ */ 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__ */ jsx("p", { className: cx.root, "data-sf-subject-filter": true, "data-sf-subject-filter-empty": true, children: /* @__PURE__ */ jsx("a", { href: props.chooseHref, className: cx.link, children: fill(m.choose, { kind: singular }) }) }) : null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cx.root, "data-sf-subject-filter": true, "data-sf-subject-showing": showingAll ? "all" : "fits", children: [
+    /* @__PURE__ */ jsx("span", { className: cx.label, children: fill(m.forItem, { name: active.label }) }),
+    props.changeHref ? /* @__PURE__ */ jsx("a", { href: props.changeHref, className: cx.link, children: m.change }) : null,
+    showingAll && props.onlyFitsHref ? /* @__PURE__ */ jsx("a", { href: props.onlyFitsHref, className: cx.toggle ?? cx.link, children: m.onlyFits }) : null,
+    !showingAll && props.showAllHref ? /* @__PURE__ */ 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__ */ 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] = useState({ status: "loading", kinds: [], subjects: [], error: null });
+  const alive = useRef(null);
+  const load = 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]);
+  useEffect(() => {
+    load();
+    return () => alive.current?.abort();
+  }, [load]);
+  const need = () => {
+    if (!sf) throw new Error("useSubjects: no storefront client");
+    return sf;
+  };
+  const create = useCallback(async (input) => {
+    const saved = await need().customer.subjects.create(input);
+    load();
+    return saved;
+  }, [sf, load]);
+  const update = useCallback(async (id, patch) => {
+    const saved = await need().customer.subjects.update(id, patch);
+    load();
+    return saved;
+  }, [sf, load]);
+  const remove = useCallback(async (id) => {
+    await need().customer.subjects.delete(id);
+    load();
+  }, [sf, load]);
+  const makeDefault = useCallback((id) => update(id, { is_default: true }), [update]);
+  return { ...state, reload: load, create, update, remove, makeDefault };
+}
+
+export { SubjectFilter, SubjectFitBadge, SubjectGarage, SubjectPicker, fill as fillSubjectMessage, subjectMessages, useSubjects };
+//# sourceMappingURL=subjects.js.map
+//# sourceMappingURL=subjects.js.map