@mohasinac/appkit 4.53.0 → 4.53.1

package/dist/features/price-index/components/PriceIndexToolView.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Search, TrendingUp } from "lucide-react";
 import { Container, Div, Heading, Row, Section, Span, Stack, Text } from "../../../ui/index.js";
@@ -11,6 +11,7 @@ import { FieldInput } from "../../../ui/forms/FieldInput.js";
 import { MediaImage } from "../../media/MediaImage.js";
 import { TOOL_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { apiClient } from "../../../http/ApiClient.js";
+import { useSiteSearch } from "../../search/hooks/useSiteSearch.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
 import { normalizeError } from "../../../errors/normalize.js";
 import { toUserMessage } from "../../../errors/error-display-map.js";
@@ -87,7 +88,14 @@ function ResultCard({ row, threshold }) {
              */
             _jsx(Text, { size: "sm", color: "muted", children: "No completed sales recorded here yet. Prices appear once something sells on LetItRip." }))] }));
 }
-export function PriceIndexToolView({ initialQuery = "", initialData = null }) {
+/** Stable identity — a `useMemo` dependency inside `useSiteSearch`. */
+const identityLabel = (typeKey) => typeKey;
+/** `/categories/{slug}` -> `{slug}`. Category documents are pure slugs (id === slug). */
+function categoryIdFromHref(href) {
+    const m = /^\/categories\/([^/?#]+)/.exec(href);
+    return m ? m[1] : null;
+}
+export function PriceIndexToolView({ initialQuery = "", initialData = null, searchIndexEnabled, }) {
     const [draft, setDraft] = useState(initialQuery);
     /**
      * The SUBMITTED term, distinct from `draft`.
@@ -100,26 +108,97 @@ export function PriceIndexToolView({ initialQuery = "", initialData = null }) {
      */
     const [term, setTerm] = useState(initialQuery.trim());
     /*
-     * `useQuery` + `apiClient`, not a hand-rolled `fetch` with its own loading
-     * and error state — which is what this had, and what `audit-form-mutation-hook`
-     * correctly rejected. It also deletes three `useState`s: React Query already
-     * owns in-flight, error and the response, and it dedupes the identical lookup
-     * rather than issuing it twice.
+     * 🛑 TIER 1 ADOPTION. `searchPriceIndex` (the fallback below) pays a
+     * `searchTxt` push-down query to turn `term` into category leaves —
+     * exactly the resolution `useSiteSearch` already does in the browser, at
+     * zero reads, for every other search surface on the site. Resolving here
+     * removes that query from the HOT path; the server is left with only the
+     * one multi-get it cannot avoid.
+     *
+     * `active` mirrors `term`'s own gate (2+ chars) rather than firing on
+     * mount — consistent with every other `useSiteSearch` caller, which loads
+     * the ~420 KB artifact only once intent is shown.
+     */
+    const local = useSiteSearch(term, {
+        active: term.length >= 2,
+        indexEnabled: searchIndexEnabled,
+        types: ["model", "category"],
+        label: identityLabel,
+    });
+    const localIds = React.useMemo(() => {
+        if (!local.result)
+            return [];
+        const ids = new Set();
+        for (const group of local.result.groups) {
+            for (const hit of group.hits) {
+                const id = categoryIdFromHref(hit.href);
+                if (id)
+                    ids.add(id);
+            }
+        }
+        return [...ids];
+    }, [local.result]);
+    const localReady = local.status === "ready";
+    /*
+     * The bands-only request. Enabled ONLY once local resolution has actually
+     * produced something — an empty `localIds` with the gate open would be a
+     * request shaped `?ids=`, which the route already treats as "no results"
+     * but which is still a request worth not making.
+     */
+    const bandsQuery = useQuery({
+        queryKey: ["tool", "price-index", "bands", localIds],
+        queryFn: () => apiClient.get(TOOL_ENDPOINTS.PRICE_INDEX_BANDS(localIds)),
+        enabled: localReady && localIds.length > 0,
+        staleTime: Infinity,
+        refetchOnWindowFocus: false,
+    });
+    /*
+     * The FALLBACK. Fires only when the local index is off, failed, or
+     * (rarely) resolved to nothing — never alongside the local path, so a
+     * working index never pays for both. Same cache posture as it always had.
      */
-    const query = useQuery({
+    const fallbackEnabled = term.length >= 2 && (local.status === "failed" || local.status === "disabled" ||
+        (localReady && localIds.length === 0));
+    const fallbackQuery = useQuery({
         queryKey: ["tool", "price-index", term],
         queryFn: () => apiClient.get(TOOL_ENDPOINTS.PRICE_INDEX_SEARCH(term)),
-        enabled: term.length >= 2,
-        /*
-         * The endpoint is edge-cached for an hour over a day-stale aggregate, so
-         * refetching on focus or remount would spend invocations to learn nothing.
-         */
+        enabled: fallbackEnabled,
         staleTime: Infinity,
         refetchOnWindowFocus: false,
         ...(initialData && initialData.query === initialQuery.trim()
             ? { initialData }
             : {}),
     });
+    /*
+     * One shape out, regardless of which path answered. `truncated` is always
+     * `false` on the local path — `PRICE_INDEX_SEARCH_LIMIT` already bounded
+     * how many ids were resolved, so there is nothing left uncounted the way
+     * the query-based path's search step could leave behind.
+     */
+    const query = localReady && localIds.length > 0
+        ? {
+            data: bandsQuery.data
+                ? {
+                    query: term,
+                    results: bandsQuery.data.results,
+                    truncated: false,
+                    /*
+                     * The confidence threshold is a server-side constant
+                     * (`PRICE_INDEX_MIN_CONFIDENT_SAMPLES = 3`), not something
+                     * resolved per-request — the bands endpoint does not echo it
+                     * back because it is already baked into each band's own
+                     * `confident` flag. Hardcoded to match the renderer's own
+                     * existing fallback below (`data?.minConfidentSamples ?? 3`),
+                     * so the two paths show the same explanatory copy.
+                     */
+                    minConfidentSamples: 3,
+                }
+                : undefined,
+            isFetching: bandsQuery.isFetching,
+            isError: bandsQuery.isError,
+            error: bandsQuery.error,
+        }
+        : fallbackQuery;
     const run = useCallback((q) => setTerm(q.trim()), []);
     const data = query.data ?? null;
     const loading = query.isFetching;

package/dist/features/products/components/CompareOverlay.d.ts

@@ -60,6 +60,8 @@ export interface CompareOverlayLabels {
     close?: string;
     remove?: string;
     view?: string;
+    /** Placeholder/aria-label for the "add another" typeahead. Only rendered when `onAdd` is passed. */
+    addAnother?: string;
     field?: Partial<CompareFieldLabels>;
 }
 export interface CompareOverlayProps {
@@ -73,7 +75,22 @@ export interface CompareOverlayProps {
     onClose: () => void;
     /** Called when a column's Remove button is clicked. */
     onRemove?: (id: string) => void;
+    /**
+     * Called with a resolved slug when the user picks a result from the
+     * "Add another" typeahead. Omit to leave the overlay exactly as it was —
+     * every existing caller keeps working unchanged.
+     *
+     * 🛑 Resolution only, no fetch. The overlay already knows how to turn an
+     * id into a full `CompareProductLike` via `productIds` (`useFetchedProducts`
+     * fetches `/api/products?ids=…`); this hands back ONE more id for that same
+     * mechanism, rather than teaching the overlay a second way to load a
+     * product. The caller decides whether to append to its own `productIds`
+     * state or ignore it.
+     */
+    onAdd?: (id: string) => void;
+    /** `siteSettings.search?.indexEnabled`. Threaded through to the typeahead. */
+    searchIndexEnabled?: boolean;
     labels?: CompareOverlayLabels;
 }
-export declare function CompareOverlay({ isOpen, items: passedItems, productIds, productType, onClose, onRemove, labels: labelOverrides, }: CompareOverlayProps): import("react").JSX.Element | null;
+export declare function CompareOverlay({ isOpen, items: passedItems, productIds, productType, onClose, onRemove, onAdd, searchIndexEnabled, labels: labelOverrides, }: CompareOverlayProps): import("react").JSX.Element | null;
 export {};

package/dist/features/products/components/CompareOverlay.js

@@ -20,12 +20,14 @@ import { COMPARE_MAX_ITEMS } from "../constants/action-defs.js";
 import { normalizeListingType } from "../utils/listing-type.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 import { PRODUCT_ENDPOINTS } from "../../../constants/api-endpoints.js";
+import { EntityTypeahead } from "../../search/components/EntityTypeahead.js";
 const DEFAULT_LABELS = {
     title: "Compare items",
     empty: "Select up to 4 items from the listing to compare.",
     close: "Close",
     remove: "Remove",
     view: "View",
+    addAnother: "Add another to compare",
     field: {
         image: "Photo",
         price: "Price",
@@ -35,6 +37,12 @@ const DEFAULT_LABELS = {
         store: "Store",
     },
 };
+/** Index type keys for each `productType` discriminator the overlay accepts. */
+const TYPEAHEAD_TYPES = {
+    product: ["standard"],
+    auction: ["auction"],
+    preorder: ["pre-order"],
+};
 const OVERLAY_CLASS = "fixed inset-0 flex flex-col bg-[var(--appkit-color-bg)] overflow-hidden z-[var(--appkit-z-modal,60)]";
 const HEADER_CLASS = "flex items-center justify-between gap-[var(--appkit-space-3)] border-b border-[var(--appkit-color-border-subtle)] px-[var(--appkit-space-4)] py-[var(--appkit-space-3)]";
 const FIELD_LABEL_CLASS = "text-[length:var(--appkit-text-xs)] font-medium uppercase tracking-wider text-[var(--appkit-color-text-muted)]";
@@ -108,7 +116,7 @@ function useFetchedProducts(productIds, passedItems, isOpen) {
         isLoading: !passedItems && isLoading,
     };
 }
-export function CompareOverlay({ isOpen, items: passedItems, productIds, productType = "product", onClose, onRemove, labels: labelOverrides, }) {
+export function CompareOverlay({ isOpen, items: passedItems, productIds, productType = "product", onClose, onRemove, onAdd, searchIndexEnabled, labels: labelOverrides, }) {
     const labels = useMemo(() => ({
         ...DEFAULT_LABELS,
         ...labelOverrides,
@@ -167,7 +175,18 @@ export function CompareOverlay({ isOpen, items: passedItems, productIds, product
     }, [onRemove]);
     if (!isOpen)
         return null;
-    return (_jsxs(Div, { className: OVERLAY_CLASS, role: "dialog", "aria-modal": "true", "aria-label": labels.title, children: [_jsxs(Row, { justify: "between", align: "center", className: HEADER_CLASS, children: [_jsx(Heading, { level: 2, size: "base", weight: "semibold", children: labels.title }), _jsx(IconButton, { type: "button", onClick: onClose, "aria-label": labels.close, variant: "ghost", rounded: "full", className: "text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)]", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx(Div, { className: `flex-1 ${__O.auto} ${__P.p4}`, children: isLoading ? (
+    return (_jsxs(Div, { className: OVERLAY_CLASS, role: "dialog", "aria-modal": "true", "aria-label": labels.title, children: [_jsxs(Row, { justify: "between", align: "center", className: HEADER_CLASS, children: [_jsx(Heading, { level: 2, size: "base", weight: "semibold", children: labels.title }), _jsx(IconButton, { type: "button", onClick: onClose, "aria-label": labels.close, variant: "ghost", rounded: "full", className: "text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-surface-elevated)]", children: _jsx(X, { className: "h-5 w-5" }) })] }), onAdd && trimmed.length < COMPARE_MAX_ITEMS && (_jsx(Div, { className: `${__P.p4} border-b border-[var(--appkit-color-border-subtle)]`, children: _jsx(EntityTypeahead, { types: TYPEAHEAD_TYPES[productType], indexEnabled: searchIndexEnabled, label: labels.addAnother, placeholder: labels.addAnother, limit: 5, onPick: (pick) => {
+                        /*
+                         * The LAST path segment, not a type-specific pattern. The
+                         * three listing types this overlay accepts have three
+                         * different detail routes (/products, /auctions,
+                         * /pre-orders), and every one of them ends in the slug — the
+                         * same thing `productIds` already expects.
+                         */
+                        const slug = pick.href.split("/").filter(Boolean).pop();
+                        if (slug)
+                            onAdd(slug);
+                    } }) })), _jsx(Div, { className: `flex-1 ${__O.auto} ${__P.p4}`, children: isLoading ? (
                 // audit-content-alignment-ok: loading-state text inside a transient overlay panel, not marketing content
                 _jsx(Text, { paddingY: "3xl", variant: "secondary", align: "center", children: "Loading\u00E2\u20AC\u00A6" })) : trimmed.length === 0 ? (
                 // audit-content-alignment-ok: empty-state inside a transient overlay panel, not marketing content

package/dist/features/products/components/CustomSectionTabContent.d.ts

@@ -1,5 +1,36 @@
 import React from "react";
 import type { CustomSection } from "../schemas/firestore";
+/**
+ * Shape `ProductTabsShell` expects for `customTabs`. Duplicated here rather
+ * than imported from `ProductTabsShell.tsx` — that file is `"use client"` and
+ * this one is a plain function, so importing its type keeps this module
+ * server-renderable. The two must stay structurally compatible; they already
+ * do (`{ id, label, content }`).
+ */
+interface CustomSectionTab {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+}
+/**
+ * `customSections` → `ProductTabsShell`'s `customTabs` prop, in one place.
+ *
+ * Six detail views (`ProductDetailPageView`, `AuctionDetailPageView`,
+ * `PreOrderDetailPageView`, `ClassifiedDetailPageView`,
+ * `DigitalCodeDetailPageView`, `LiveItemDetailPageView`) had this EXACT
+ * five-line block — the same `Array.isArray` guard and the same `.map` —
+ * copy-pasted six times. Rule-of-Three material by the Duplication Decision
+ * Framework (same prop surface, same shape, a bug fix would have needed six
+ * commits), consolidated here rather than left as six places that could
+ * silently drift the next time one of them is touched and the other five are
+ * not.
+ *
+ * Takes the raw, possibly-untyped `customSections` field directly (every call
+ * site reads it off a cast Firestore document) so callers do one line instead
+ * of two: `customTabs={toCustomSectionTabs(p.customSections)}`.
+ */
+export declare function toCustomSectionTabs(input: unknown): CustomSectionTab[];
 export declare function CustomSectionTabContent({ section }: {
     section: CustomSection;
 }): React.JSX.Element;
+export {};

package/dist/features/products/components/CustomSectionTabContent.js

@@ -1,14 +1,40 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Row } from "@mohasinac/appkit/ui";
-import { Anchor, Dd, Dl, Dt, RichText, Stack, Text } from "../../../ui/index.js";
+import { RichText, SpecTable, Stack, Text } from "../../../ui/index.js";
 import { normalizeRichTextHtml } from "../../../utils/string.formatter.js";
 function renderFieldValue(f) {
     if (f.type === "boolean")
         return f.value === "true" ? "Yes" : "No";
     return f.value + (f.unit ? ` ${f.unit}` : "");
 }
+/**
+ * `customSections` → `ProductTabsShell`'s `customTabs` prop, in one place.
+ *
+ * Six detail views (`ProductDetailPageView`, `AuctionDetailPageView`,
+ * `PreOrderDetailPageView`, `ClassifiedDetailPageView`,
+ * `DigitalCodeDetailPageView`, `LiveItemDetailPageView`) had this EXACT
+ * five-line block — the same `Array.isArray` guard and the same `.map` —
+ * copy-pasted six times. Rule-of-Three material by the Duplication Decision
+ * Framework (same prop surface, same shape, a bug fix would have needed six
+ * commits), consolidated here rather than left as six places that could
+ * silently drift the next time one of them is touched and the other five are
+ * not.
+ *
+ * Takes the raw, possibly-untyped `customSections` field directly (every call
+ * site reads it off a cast Firestore document) so callers do one line instead
+ * of two: `customTabs={toCustomSectionTabs(p.customSections)}`.
+ */
+export function toCustomSectionTabs(input) {
+    const sections = Array.isArray(input)
+        ? input
+        : [];
+    return sections.map((s) => ({
+        id: s.id,
+        label: s.title,
+        content: _jsx(CustomSectionTabContent, { section: s }),
+    }));
+}
 export function CustomSectionTabContent({ section }) {
     const html = section.text ? normalizeRichTextHtml(section.text) : null;
     const fields = section.fields?.filter((f) => f.key && f.value) ?? [];
-    return (_jsxs(Stack, { gap: "md", children: [html && (_jsx(RichText, { html: html, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })), fields.length > 0 && (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: "overflow-hidden", children: fields.map((f, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { weight: "medium", className: "w-36 flex-shrink-0 capitalize", color: "primary", children: f.key }), _jsx(Dd, { className: "flex-1", color: "muted", children: f.type === "url" ? (_jsx(Anchor, { href: f.value, tone: "none", underline: "hover", className: "text-primary-600 dark:text-primary-400 break-all", children: f.value })) : (renderFieldValue(f)) })] }, i))) })), !html && fields.length === 0 && (_jsx(Text, { size: "sm", color: "faint", children: "No content in this section." }))] }));
+    return (_jsxs(Stack, { gap: "md", children: [html && (_jsx(RichText, { html: html, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })), fields.length > 0 && (_jsx(SpecTable, { rows: fields.map((f) => ({ name: f.key, value: String(f.value), unit: f.unit })) })), !html && fields.length === 0 && (_jsx(Text, { size: "sm", color: "faint", children: "No content in this section." }))] }));
 }

package/dist/features/products/components/GroupMemberPicker.d.ts

@@ -16,6 +16,7 @@
  * consumer pages untouched.
  */
 import React from "react";
+import { type GroupRules } from "../../../_internal/shared/features/products/group-rules";
 import type { ListingType } from "../types";
 export interface GroupPickerMember {
     id: string;
@@ -29,6 +30,14 @@ export interface GroupPickerMember {
     isGroupParent?: boolean;
     condition?: string;
     availableQuantity?: number;
+    /**
+     * Printed or built when ordered — no stock ceiling.
+     *
+     * 🛑 Both the "Out of stock" refusal and the stepper's `max` read
+     * `availableQuantity`, so without this a print-on-demand member at quantity 0
+     * renders as unselectable while being perfectly buyable.
+     */
+    madeToOrder?: boolean;
     storeId?: string;
     storeName?: string;
     isSold?: boolean;
@@ -38,9 +47,18 @@ export interface GroupMemberPickerProps {
     groupId: string;
     groupSource: "product-group" | "grouped-listing";
     members: GroupPickerMember[];
+    /**
+     * The group's own selection rules, from whichever home owns them.
+     *
+     * 🛑 Absent means UNRESTRICTED, which is what every group that exists today
+     * is. The server enforces the same rules through `checkGroupRules` whatever
+     * is passed here, so omitting them costs correctness nothing — the buyer just
+     * finds out on submit instead of while choosing.
+     */
+    rules?: GroupRules;
     /** Called after a successful add so the host can close its overlay. */
     onAdded?: () => void;
     /** Called when the API reports the caller isn't signed in. */
     onAuthRequired?: () => void;
 }
-export declare function GroupMemberPicker({ groupId, groupSource, members, onAdded, onAuthRequired, }: GroupMemberPickerProps): React.JSX.Element;
+export declare function GroupMemberPicker({ groupId, groupSource, members, rules, onAdded, onAuthRequired, }: GroupMemberPickerProps): React.JSX.Element;

package/dist/features/products/components/GroupMemberPicker.js

@@ -27,10 +27,10 @@ import { CART_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { normalizeError } from "../../../errors/normalize.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 import { normalizeListingType } from "../utils/listing-type.js";
+import { resolveGroupMemberImage } from "../utils/group-member-image.js";
+import { checkGroupRules, describeGroupRules, EMPTY_GROUP_RULES, } from "../../../_internal/shared/features/products/group-rules.js";
 const __O = { xAuto: "overflow-x-auto", hidden: "overflow-hidden" };
-function memberImage(m) {
-    return m.image ?? m.images?.[0] ?? "";
-}
+const memberImage = resolveGroupMemberImage;
 function memberHref(m) {
     return pluginFor(normalizeListingType(m)).detailRoute(m.slug ?? m.id);
 }
@@ -40,7 +40,10 @@ function blockedReason(m) {
         return "Sold";
     if (m.status && m.status !== "published")
         return "Unavailable";
-    if ((m.availableQuantity ?? 0) <= 0)
+    // Made to order has no stock to be out of — checked BEFORE the quantity
+    // test, and after `isSold`, which stays the seller's kill switch whatever
+    // the production model.
+    if (m.madeToOrder !== true && (m.availableQuantity ?? 0) <= 0)
         return "Out of stock";
     // `cartLine: "blocked"` is how a classified / live listing says "contact the
     // seller instead" — those can never join a cart line.
@@ -48,7 +51,7 @@ function blockedReason(m) {
         return "Not purchasable here";
     return null;
 }
-export function GroupMemberPicker({ groupId, groupSource, members, onAdded, onAuthRequired, }) {
+export function GroupMemberPicker({ groupId, groupSource, members, rules = EMPTY_GROUP_RULES, onAdded, onAuthRequired, }) {
     const [qty, setQty] = useState({});
     const [isSaving, setIsSaving] = useState(false);
     const [error, setError] = useState(null);
@@ -64,6 +67,32 @@ export function GroupMemberPicker({ groupId, groupSource, members, onAdded, onAu
     const selectedTotal = selected.reduce((sum, s) => sum + s.member.price * s.quantity, 0);
     const selectedUnits = selected.reduce((sum, s) => sum + s.quantity, 0);
     const currency = members[0]?.currency ?? "INR";
+    /*
+     * The SAME predicate the server applies, so the button's enabled state and
+     * the API's answer cannot disagree about what a valid selection is. A
+     * server-only rule reads as a broken button; a client-only one is not a rule.
+     */
+    const violations = useMemo(() => checkGroupRules(rules, selected.map((s) => ({
+        productId: s.member.id,
+        quantity: s.quantity,
+        title: s.member.title,
+    }))), [rules, selected]);
+    /*
+     * The discount, shown but NOT the number charged.
+     *
+     * 🛑 This is display arithmetic over a quoted percentage; the authoritative
+     * price is computed server-side inside `deriveLinePrice`, the single writer
+     * of a grouped line's `price`. Showing it here is honest (it is the figure
+     * the buyer is being offered) and computing it here is unavoidable (there is
+     * no cart line yet) — but it must never become a second money rule. The 2dp
+     * rounding deliberately matches `deriveLinePrice`'s so the two agree to the
+     * paisa rather than drifting by a rounding step.
+     */
+    const discountPercent = Math.min(100, Math.max(0, rules.groupDiscountPercent ?? 0));
+    const discountedTotal = discountPercent > 0
+        ? Math.round(selectedTotal * (1 - discountPercent / 100) * 100) / 100
+        : selectedTotal;
+    const ruleNotes = useMemo(() => describeGroupRules(rules), [rules]);
     const handleAdd = async () => {
         setError(null);
         setIsSaving(true);
@@ -101,8 +130,17 @@ export function GroupMemberPicker({ groupId, groupSource, members, onAdded, onAu
     };
     return (_jsxs(Stack, { gap: "sm", children: [isCrossStore && (_jsx(Alert, { variant: "info", children: "These items are sold by different sellers, so they can't be combined into one cart line. Open an item to buy it on its own." })), _jsx(Div, { className: __O.xAuto, children: _jsxs(Table, { className: "text-left min-w-[440px]", children: [_jsx(Thead, { children: _jsxs(Tr, { border: "default", children: [_jsx(Th, { paddingY: "sm", paddingSide: "pr-sm", color: "muted", size: "xs", weight: "semibold", children: "Image" }), _jsx(Th, { paddingY: "sm", paddingSide: "pr-sm", color: "muted", size: "xs", weight: "semibold", children: "Name" }), _jsx(Th, { paddingY: "sm", paddingSide: "pr-sm", color: "muted", size: "xs", weight: "semibold", children: "Price" }), !isCrossStore && (_jsx(Th, { paddingY: "sm", paddingSide: "pr-sm", color: "muted", size: "xs", weight: "semibold", children: "Qty" })), _jsx(Th, { paddingY: "sm", paddingSide: "pb-sm", color: "muted", size: "xs", weight: "semibold" })] }) }), _jsx(Tbody, { children: members.map((m) => {
                                 const blocked = blockedReason(m);
-                                return (_jsxs(Tr, { className: "last:border-0", border: "subtle", children: [_jsx(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: _jsx(Div, { className: `w-10 h-10 ${__O.hidden}`, rounded: "full", border: "default", children: _jsx(MediaImage, { src: memberImage(m), alt: m.title, size: "thumbnail" }) }) }), _jsxs(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: [_jsx(Text, { className: "line-clamp-2", color: "primary", size: "sm", weight: "medium", children: m.title }), m.isGroupParent && (_jsx(Span, { weight: "semibold", className: "text-[10px] text-[var(--appkit-color-primary)]", children: "Parent" }))] }), _jsx(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: _jsx(Text, { size: "sm", color: "muted", children: _jsx(GatedPrice, { children: formatCurrency(m.price, m.currency ?? currency) }) }) }), !isCrossStore && (_jsx(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: blocked ? (_jsx(Span, { size: "xs", color: "muted", surface: "muted", rounded: "default", padding: "pill-2xs", children: blocked })) : (_jsx(QuantityStepper, { value: qty[m.id] ?? 0, onChange: (next) => setQty((prev) => ({ ...prev, [m.id]: next })), min: 0, max: m.availableQuantity, ariaLabel: `Quantity for ${m.title}`, decrementLabel: ACTIONS.CART["decrease-quantity"].ariaLabel, incrementLabel: ACTIONS.CART["increase-quantity"].ariaLabel })) })), _jsx(Td, { padding: "xs-tall", children: _jsx("a", { href: memberHref(m), className: "text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-primary)] hover:underline", children: "View \u2192" }) })] }, m.id));
-                            }) })] }) }), !isCrossStore && (_jsxs(_Fragment, { children: [error && _jsx(Alert, { variant: "error", children: error }), _jsxs(Row, { justify: "between", align: "center", gap: "sm", className: "min-w-0", children: [_jsxs(Text, { size: "sm", color: "muted", children: [selectedUnits > 0
+                                return (_jsxs(Tr, { className: "last:border-0", border: "subtle", children: [_jsx(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: _jsx(Div, { className: `w-10 h-10 ${__O.hidden}`, rounded: "full", border: "default", children: _jsx(MediaImage, { src: memberImage(m), alt: m.title, size: "thumbnail" }) }) }), _jsxs(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: [_jsx(Text, { className: "line-clamp-2", color: "primary", size: "sm", weight: "medium", children: m.title }), m.isGroupParent && (_jsx(Span, { weight: "semibold", className: "text-[10px] text-[var(--appkit-color-primary)]", children: "Parent" }))] }), _jsx(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: _jsx(Text, { size: "sm", color: "muted", children: _jsx(GatedPrice, { children: formatCurrency(m.price, m.currency ?? currency) }) }) }), !isCrossStore && (_jsx(Td, { paddingSide: "pr-sm", padding: "xs-tall", children: blocked ? (_jsx(Span, { size: "xs", color: "muted", surface: "muted", rounded: "default", padding: "pill-2xs", children: blocked })) : (_jsx(QuantityStepper, { value: qty[m.id] ?? 0, onChange: (next) => setQty((prev) => ({ ...prev, [m.id]: next })), min: 0, 
+                                                /*
+                                                 * `undefined` means uncapped — `QuantityStepper`
+                                                 * only disables its increment when a `max` is given.
+                                                 * A made-to-order member has no ceiling; the line's
+                                                 * own 99-per-line cap still applies at the cart.
+                                                 */
+                                                max: m.madeToOrder === true ? undefined : m.availableQuantity, ariaLabel: `Quantity for ${m.title}`, decrementLabel: ACTIONS.CART["decrease-quantity"].ariaLabel, incrementLabel: ACTIONS.CART["increase-quantity"].ariaLabel })) })), _jsx(Td, { padding: "xs-tall", children: _jsx("a", { href: memberHref(m), className: "text-[length:var(--appkit-text-xs)] text-[var(--appkit-color-primary)] hover:underline", children: "View \u2192" }) })] }, m.id));
+                            }) })] }) }), !isCrossStore && (_jsxs(_Fragment, { children: [ruleNotes.length > 0 && (_jsx(Text, { size: "xs", color: "muted", children: ruleNotes.join(" · ") })), error && _jsx(Alert, { variant: "error", children: error }), selectedUnits > 0 && violations.length > 0 && (_jsx(Alert, { variant: "warning", children: _jsx(Stack, { gap: "dense", children: violations.map((v) => (_jsx(Text, { size: "sm", children: v.message }, v.code + v.message))) }) })), _jsxs(Row, { justify: "between", align: "center", gap: "sm", className: "min-w-0", children: [_jsxs(Text, { size: "sm", color: "muted", children: [selectedUnits > 0
                                         ? `${selectedUnits} item${selectedUnits === 1 ? "" : "s"}`
-                                        : "Nothing selected yet", selectedUnits > 0 && (_jsx(PricesOnly, { children: ` · ${formatCurrency(selectedTotal, currency)}` }))] }), _jsx(Button, { action: ACTIONS.CART["add-group-to-cart"], disabled: selectedUnits === 0, isLoading: isSaving, onClick: handleAdd })] })] }))] }));
+                                        : "Nothing selected yet", selectedUnits > 0 && (_jsx(PricesOnly, { children: discountPercent > 0
+                                            ? ` · ${formatCurrency(discountedTotal, currency)} (${discountPercent}% off ${formatCurrency(selectedTotal, currency)})`
+                                            : ` · ${formatCurrency(selectedTotal, currency)}` }))] }), _jsx(Button, { action: ACTIONS.CART["add-group-to-cart"], disabled: selectedUnits === 0 || violations.length > 0, isLoading: isSaving, onClick: handleAdd })] })] }))] }));
 }

package/dist/features/products/components/GroupSettingsPanel.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { GroupRules } from "../../../_internal/shared/features/products/group-rules";
 export interface GroupSettingsPanelProps {
     productId: string;
     productSlug: string;
@@ -7,8 +8,17 @@ export interface GroupSettingsPanelProps {
     groupParentSlug?: string;
     groupChildSlugs?: string[];
     groupTitle?: string;
+    /**
+     * The group's current selection rules, for seeding the form.
+     *
+     * 🛑 Seeded from the PARENT PRODUCT the editor is already showing — not
+     * re-fetched. The rules live on the parent and this panel is mounted from the
+     * parent's own editor, so the values are already in hand; a second read would
+     * be a second source of truth for the same five fields.
+     */
+    groupRules?: GroupRules;
     isAuction?: boolean;
     storeProductsEndpoint: string;
     onGroupChanged: () => void;
 }
-export declare function GroupSettingsPanel({ productId, productSlug, groupId, isGroupParent, groupParentSlug, groupChildSlugs, groupTitle, isAuction, storeProductsEndpoint, onGroupChanged, }: GroupSettingsPanelProps): React.JSX.Element | null;
+export declare function GroupSettingsPanel({ productId, productSlug, groupId, isGroupParent, groupParentSlug, groupChildSlugs, groupTitle, groupRules, isAuction, storeProductsEndpoint, onGroupChanged, }: GroupSettingsPanelProps): React.JSX.Element | null;