@merchi/product-form-sdk 1.0.9

package/dist/components/context.js

@@ -0,0 +1,198 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { buildProductFormJob, jobToFormState, } from '../helpers/buildJob';
+import { OPTION_FIELD_TYPES } from '../helpers/constants';
+import { groupFieldsOf, independentFieldsOf, isOptionQuantityGridProduct, productHasGroups, } from '../helpers/product';
+import { normalizeFooterActions, } from './footerActions';
+export { OPTION_FIELD_TYPES };
+const Ctx = createContext(null);
+export function useProductForm() {
+    const ctx = useContext(Ctx);
+    if (!ctx) {
+        throw new Error('Merchi form components must be rendered inside <ProductFormProvider>.');
+    }
+    return ctx;
+}
+function initialSelectionsForFields(fields) {
+    const out = {};
+    for (const f of fields) {
+        if (f?.id === undefined)
+            continue;
+        if (OPTION_FIELD_TYPES.has(Number(f.fieldType)) && f.fieldType !== 6) {
+            const opt = (f.options || []).find((o) => o?.isVisible !== false && o?.available !== false);
+            if (opt?.id !== undefined) {
+                out[f.id] = { value: String(opt.id), selectedOptionIds: [opt.id] };
+            }
+        }
+    }
+    return out;
+}
+function initialGroupRow(product) {
+    const minQty = Number(product.minOrderQuantity ?? product.minimum) || 1;
+    return {
+        quantity: minQty,
+        selections: initialSelectionsForFields(groupFieldsOf(product)),
+    };
+}
+export function ProductFormProvider({ product, pricing, actions, helpers, children, initialJob = null, actionLabels, footerActions: footerActionsProp = null, }) {
+    const hasGroups = productHasGroups(product);
+    const optionQuantityGrid = hasGroups && isOptionQuantityGridProduct(product);
+    const groupFields = groupFieldsOf(product);
+    const independentFields = independentFieldsOf(product);
+    const minQty = Number(product.minOrderQuantity ?? product.minimum) || 1;
+    const hydrated = jobToFormState(product, initialJob);
+    const [quantity, setQuantity] = useState(() => (initialJob ? hydrated.quantity : minQty));
+    const [selections, setSelections] = useState(() => initialJob
+        ? hydrated.selections
+        : initialSelectionsForFields(independentFields));
+    const [groups, setGroups] = useState(() => initialJob
+        ? hydrated.groups
+        : hasGroups && !optionQuantityGrid
+            ? [initialGroupRow(product)]
+            : []);
+    const [optionQuantities, setOptionQuantities] = useState(() => {
+        if (initialJob)
+            return hydrated.optionQuantities;
+        if (!optionQuantityGrid)
+            return {};
+        const field = groupFields[0];
+        const out = {};
+        for (const opt of field?.options || []) {
+            if (opt?.id !== undefined)
+                out[opt.id] = 0;
+        }
+        return out;
+    });
+    const [quote, setQuote] = useState(null);
+    const [loading, setLoading] = useState(false);
+    const [footerActionsOverride, setFooterActionsState] = useState(null);
+    const debounceRef = useRef(null);
+    const reqIdRef = useRef(0);
+    const setFieldSelection = useCallback((fieldId, sel) => {
+        setSelections((prev) => ({ ...prev, [fieldId]: sel }));
+    }, []);
+    const setGroupQuantity = useCallback((index, qty) => {
+        setGroups((prev) => prev.map((row, i) => (i === index ? { ...row, quantity: qty } : row)));
+    }, []);
+    const setGroupFieldSelection = useCallback((groupIndex, fieldId, sel) => {
+        setGroups((prev) => prev.map((row, i) => i === groupIndex
+            ? { ...row, selections: { ...row.selections, [fieldId]: sel } }
+            : row));
+    }, []);
+    const addGroup = useCallback(() => {
+        setGroups((prev) => [...prev, initialGroupRow(product)]);
+    }, [product]);
+    const removeGroup = useCallback((index) => {
+        setGroups((prev) => (prev.length <= 1 ? prev : prev.filter((_, i) => i !== index)));
+    }, []);
+    const setOptionQuantity = useCallback((optionId, qty) => {
+        setOptionQuantities((prev) => ({ ...prev, [optionId]: Math.max(0, qty) }));
+    }, []);
+    const buildJob = useCallback(() => buildProductFormJob({
+        product,
+        quantity,
+        selections,
+        groups: hasGroups && !optionQuantityGrid ? groups : undefined,
+        optionQuantities: optionQuantityGrid ? optionQuantities : undefined,
+    }), [
+        product,
+        quantity,
+        selections,
+        groups,
+        optionQuantities,
+        hasGroups,
+        optionQuantityGrid,
+    ]);
+    const pricingRef = useRef(pricing);
+    pricingRef.current = pricing;
+    useEffect(() => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(async () => {
+            const reqId = ++reqIdRef.current;
+            setLoading(true);
+            try {
+                const priced = await pricingRef.current.getQuote(buildJob());
+                if (reqId === reqIdRef.current)
+                    setQuote(priced);
+            }
+            catch {
+                /* keep the previous quote on failure */
+            }
+            finally {
+                if (reqId === reqIdRef.current)
+                    setLoading(false);
+            }
+        }, 300);
+        return () => {
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+        };
+    }, [buildJob]);
+    const submit = useCallback((action) => {
+        const fn = actions[action];
+        if (fn)
+            fn(buildJob());
+    }, [actions, buildJob]);
+    const setFooterActions = useCallback((next) => {
+        setFooterActionsState(normalizeFooterActions(next));
+    }, []);
+    const footerActions = footerActionsOverride ?? normalizeFooterActions(footerActionsProp);
+    const value = useMemo(() => ({
+        product,
+        hasGroups,
+        optionQuantityGrid,
+        groupFields,
+        independentFields,
+        quantity,
+        setQuantity,
+        selections,
+        setFieldSelection,
+        groups,
+        setGroupQuantity,
+        setGroupFieldSelection,
+        addGroup,
+        removeGroup,
+        optionQuantities,
+        setOptionQuantity,
+        quote,
+        loading,
+        currency: quote?.currency,
+        helpers,
+        available: {
+            addToCart: !!actions.addToCart,
+            buyNow: !!actions.buyNow,
+            getQuote: !!actions.getQuote,
+        },
+        actionLabels: actionLabels || {},
+        footerActions,
+        setFooterActions,
+        submit,
+    }), [
+        product,
+        hasGroups,
+        optionQuantityGrid,
+        groupFields,
+        independentFields,
+        quantity,
+        selections,
+        groups,
+        optionQuantities,
+        quote,
+        loading,
+        helpers,
+        actions,
+        actionLabels,
+        footerActions,
+        setFooterActions,
+        submit,
+        setQuantity,
+        setFieldSelection,
+        setGroupQuantity,
+        setGroupFieldSelection,
+        addGroup,
+        removeGroup,
+        setOptionQuantity,
+    ]);
+    return _jsx(Ctx.Provider, { value: value, children: children });
+}

package/dist/components/footerActions.d.ts

@@ -0,0 +1,18 @@
+export type SubmitAction = 'addToCart' | 'buyNow' | 'getQuote';
+/** One host-footer button. `getQuote` opens the Get quote modal. */
+export interface FooterAction {
+    action: SubmitAction;
+    label?: string;
+    primary?: boolean;
+}
+export declare const DEFAULT_FOOTER_LABELS: Record<SubmitAction, string>;
+export declare const DEFAULT_FOOTER_ORDER: SubmitAction[];
+export declare function isSubmitAction(value: unknown): value is SubmitAction;
+/** Keep only well-formed footer actions. Empty / invalid input → null (use defaults). */
+export declare function normalizeFooterActions(raw: unknown): FooterAction[] | null;
+export declare function footerActionsFromComponent(type: unknown): FooterAction[] | null;
+export declare function resolveFooterActions(options: {
+    available: Record<SubmitAction, boolean>;
+    actionLabels?: Partial<Record<SubmitAction, string>>;
+    footerActions?: FooterAction[] | null;
+}): FooterAction[];

package/dist/components/footerActions.js

@@ -0,0 +1,67 @@
+export const DEFAULT_FOOTER_LABELS = {
+    getQuote: 'Get quote',
+    buyNow: 'Buy now',
+    addToCart: 'Add to cart',
+};
+export const DEFAULT_FOOTER_ORDER = [
+    'getQuote',
+    'buyNow',
+    'addToCart',
+];
+export function isSubmitAction(value) {
+    return value === 'addToCart' || value === 'buyNow' || value === 'getQuote';
+}
+/** Keep only well-formed footer actions. Empty / invalid input → null (use defaults). */
+export function normalizeFooterActions(raw) {
+    if (!Array.isArray(raw) || raw.length === 0)
+        return null;
+    const out = [];
+    for (const item of raw) {
+        if (!item || typeof item !== 'object')
+            continue;
+        const action = item.action;
+        if (!isSubmitAction(action))
+            continue;
+        const label = item.label;
+        out.push({
+            action,
+            label: typeof label === 'string' && label.trim() ? label : undefined,
+            primary: !!item.primary,
+        });
+    }
+    return out.length ? out : null;
+}
+export function footerActionsFromComponent(type) {
+    if (type == null || (typeof type !== 'function' && typeof type !== 'object')) {
+        return null;
+    }
+    return normalizeFooterActions(type.footerActions);
+}
+export function resolveFooterActions(options) {
+    const { available, actionLabels = {}, footerActions } = options;
+    const labelFor = (action, override) => actionLabels[action] || override || DEFAULT_FOOTER_LABELS[action];
+    const fromConfig = normalizeFooterActions(footerActions);
+    if (fromConfig) {
+        const resolved = fromConfig
+            .filter((item) => available[item.action])
+            .map((item) => ({
+            ...item,
+            label: labelFor(item.action, item.label),
+        }));
+        if (resolved.length) {
+            if (!resolved.some((item) => item.primary)) {
+                resolved[resolved.length - 1] = {
+                    ...resolved[resolved.length - 1],
+                    primary: true,
+                };
+            }
+            return resolved;
+        }
+    }
+    return DEFAULT_FOOTER_ORDER.filter((action) => available[action]).map((action, index, list) => ({
+        action,
+        label: labelFor(action),
+        primary: action === 'addToCart' ||
+            (index === list.length - 1 && !available.addToCart),
+    }));
+}

package/dist/components/groups.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { VariationFieldJson } from '../types/variation';
+/**
+ * Per-option quantity grid for products with a single group variation field
+ * (e.g. Size or Colour). Wired to useProductForm() for live quoting.
+ */
+export declare function OptionQuantityGrid({ field, title, showCost, showInventory, optionColumnLabel, }: {
+    /** Defaults to product.groupVariationFields[0]. */
+    field?: VariationFieldJson | null;
+    title?: string;
+    /** Show per-row cost from the live quote (default true). */
+    showCost?: boolean;
+    /** Show inventory status per row (defaults to product.needsInventory). */
+    showInventory?: boolean;
+    /** Header for the option/colour column (defaults to the field name). */
+    optionColumnLabel?: string;
+}): React.JSX.Element | null;
+/**
+ * Multi-batch group variation UI: each batch has its own quantity and group-field
+ * selections. Use for products with multiple groupVariationFields or free-text
+ * group fields.
+ */
+export declare function GroupRows({ addLabel }: {
+    addLabel?: string;
+}): React.JSX.Element | null;

package/dist/components/groups.js

@@ -0,0 +1,204 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { useProductForm } from './context';
+import { Field } from './Field';
+import { Card, Heading, Stack, theme } from './layout';
+import { inventoryStatusText, quoteGroupForOption } from '../helpers/gridQuote';
+const COLOUR_SELECT = 11;
+const IMAGE_SELECT = 9;
+function qtyInputStyle(disabled) {
+    return {
+        width: 88,
+        padding: '8px 10px',
+        fontFamily: theme.font,
+        fontSize: 14,
+        color: theme.text,
+        background: theme.card,
+        border: `1px solid ${theme.border}`,
+        borderRadius: 8,
+        outline: 'none',
+        boxSizing: 'border-box',
+        opacity: disabled ? 0.55 : 1,
+    };
+}
+const headerCell = {
+    fontFamily: theme.font,
+    fontSize: 11,
+    fontWeight: 800,
+    textTransform: 'uppercase',
+    letterSpacing: '0.06em',
+    color: theme.muted,
+    padding: '0 0 8px',
+};
+const inventoryToneColor = {
+    ok: '#65cf85',
+    warn: '#ffc928',
+    error: theme.primary,
+};
+/** Quantity input that allows clearing the field while typing (empty → 0 on blur). */
+function QuantityInput({ value, onChange, disabled, ariaLabel, placeholder = '0', style, }) {
+    const [draft, setDraft] = React.useState(null);
+    const displayValue = draft !== null ? draft : value === 0 ? '' : String(value);
+    return (_jsx("input", { type: "number", min: 0, disabled: disabled, placeholder: placeholder, value: displayValue, onChange: (e) => {
+            const raw = e.target.value;
+            if (raw === '') {
+                setDraft('');
+                onChange(0);
+                return;
+            }
+            const parsed = Number(raw);
+            if (!Number.isNaN(parsed) && parsed >= 0) {
+                setDraft(null);
+                onChange(parsed);
+            }
+        }, onBlur: () => setDraft(null), style: style, "aria-label": ariaLabel }));
+}
+function OptionSwatch({ option, fieldType, }) {
+    if (fieldType === IMAGE_SELECT && option.linkedFile?.viewUrl) {
+        return (_jsx("img", { src: option.linkedFile.viewUrl, alt: "", style: {
+                width: 36,
+                height: 36,
+                objectFit: 'contain',
+                borderRadius: 6,
+                border: `1px solid ${theme.border}`,
+                flexShrink: 0,
+            } }));
+    }
+    if (option.colour) {
+        return (_jsx("span", { "aria-hidden": true, style: {
+                width: 28,
+                height: 28,
+                borderRadius: '50%',
+                background: option.colour,
+                border: `1px solid ${theme.border}`,
+                flexShrink: 0,
+                boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.06)',
+            } }));
+    }
+    if (fieldType === COLOUR_SELECT) {
+        return (_jsx("span", { "aria-hidden": true, style: {
+                width: 28,
+                height: 28,
+                borderRadius: '50%',
+                background: theme.surface,
+                border: `1px solid ${theme.border}`,
+                flexShrink: 0,
+            } }));
+    }
+    return null;
+}
+function InventoryLine({ needsInventory, group, }) {
+    const status = inventoryStatusText(group, needsInventory);
+    if (!status)
+        return null;
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+            marginTop: 4,
+            fontFamily: theme.font,
+            fontSize: 12,
+            color: theme.muted,
+        }, children: [_jsx("span", { "aria-hidden": true, style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: '50%',
+                    background: inventoryToneColor[status.tone],
+                    flexShrink: 0,
+                } }), _jsxs("span", { children: ["Inventory: ", status.label] })] }));
+}
+/**
+ * Per-option quantity grid for products with a single group variation field
+ * (e.g. Size or Colour). Wired to useProductForm() for live quoting.
+ */
+export function OptionQuantityGrid({ field, title, showCost = true, showInventory, optionColumnLabel, }) {
+    const { product, groupFields, optionQuantities, setOptionQuantity, quote, loading, currency, helpers, } = useProductForm();
+    const groupField = field ?? groupFields[0];
+    if (!groupField?.options?.length || groupField.id === undefined)
+        return null;
+    const fieldType = Number(groupField.fieldType);
+    const fieldId = groupField.id;
+    const needsInventory = showInventory ?? Boolean(product?.needsInventory);
+    const optionLabel = optionColumnLabel ?? groupField.name ?? 'Option';
+    const options = groupField.options.filter((o) => o?.isVisible !== false && o?.id !== undefined);
+    const fmtCost = (amount) => {
+        if (typeof amount !== 'number')
+            return '—';
+        return helpers.formatCurrency(amount, currency);
+    };
+    return (_jsxs(Stack, { gap: 12, children: [title ? _jsx(Heading, { style: { fontSize: 15 }, children: title }) : null, _jsx("div", { style: { width: '100%', overflowX: 'auto' }, children: _jsxs("div", { style: {
+                        display: 'grid',
+                        gridTemplateColumns: showCost ? '1fr 96px 112px' : '1fr 96px',
+                        gap: '12px 16px',
+                        alignItems: 'center',
+                        minWidth: 320,
+                    }, children: [_jsx("div", { style: headerCell, children: optionLabel }), _jsx("div", { style: { ...headerCell, textAlign: 'center' }, children: "Quantity" }), showCost ? _jsx("div", { style: { ...headerCell, textAlign: 'right' }, children: "Cost" }) : null, options.map((opt) => {
+                            const optionId = opt.id;
+                            const quotedGroup = quoteGroupForOption(quote, fieldId, optionId);
+                            const qty = optionQuantities[optionId] ?? 0;
+                            const unavailable = opt.available === false;
+                            const rowCost = quotedGroup?.groupCost;
+                            const displayCost = typeof rowCost === 'number' ? rowCost : 0;
+                            return (_jsxs(React.Fragment, { children: [_jsxs("div", { style: {
+                                            display: 'flex',
+                                            alignItems: 'flex-start',
+                                            gap: 12,
+                                            minWidth: 0,
+                                        }, children: [_jsx(OptionSwatch, { option: opt, fieldType: fieldType }), _jsxs("div", { style: { minWidth: 0 }, children: [_jsx("div", { style: {
+                                                            fontFamily: theme.font,
+                                                            fontSize: 14,
+                                                            fontWeight: 600,
+                                                            color: theme.text,
+                                                            lineHeight: 1.35,
+                                                        }, children: opt.value }), _jsx(InventoryLine, { needsInventory: needsInventory, group: quotedGroup })] })] }), _jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx(QuantityInput, { value: qty, disabled: unavailable, onChange: (next) => setOptionQuantity(optionId, next), style: qtyInputStyle(unavailable), ariaLabel: `Quantity for ${opt.value ?? 'option'}` }) }), showCost ? (_jsx("div", { style: {
+                                            fontFamily: theme.font,
+                                            fontSize: 14,
+                                            fontWeight: 600,
+                                            color: theme.text,
+                                            textAlign: 'right',
+                                            opacity: loading && qty > 0 ? 0.55 : 1,
+                                        }, children: fmtCost(displayCost) })) : null] }, optionId));
+                        })] }) })] }));
+}
+/**
+ * Multi-batch group variation UI: each batch has its own quantity and group-field
+ * selections. Use for products with multiple groupVariationFields or free-text
+ * group fields.
+ */
+export function GroupRows({ addLabel = 'Add another batch' }) {
+    const { groupFields, groups, setGroupQuantity, addGroup, removeGroup, } = useProductForm();
+    if (!groupFields.length)
+        return null;
+    return (_jsxs(Stack, { gap: 20, children: [groups.map((row, index) => (_jsx(Card, { children: _jsxs(Stack, { gap: 16, children: [_jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                gap: 12,
+                            }, children: [_jsxs(Heading, { style: { fontSize: 15 }, children: ["Batch ", index + 1] }), groups.length > 1 ? (_jsx("button", { type: "button", onClick: () => removeGroup(index), style: {
+                                        fontFamily: theme.font,
+                                        fontSize: 13,
+                                        color: theme.muted,
+                                        background: 'none',
+                                        border: 'none',
+                                        cursor: 'pointer',
+                                        textDecoration: 'underline',
+                                    }, children: "Remove" })) : null] }), _jsxs("div", { children: [_jsx("label", { style: {
+                                        display: 'block',
+                                        fontFamily: theme.font,
+                                        fontSize: 14,
+                                        fontWeight: 700,
+                                        color: theme.text,
+                                        marginBottom: 8,
+                                    }, children: "Quantity" }), _jsx(QuantityInput, { value: row.quantity, onChange: (next) => setGroupQuantity(index, next), style: qtyInputStyle(), ariaLabel: `Quantity for batch ${index + 1}` })] }), groupFields.map((gf) => (_jsx(Field, { field: gf, groupIndex: index }, gf.id)))] }) }, index))), _jsx("button", { type: "button", onClick: addGroup, style: {
+                    alignSelf: 'flex-start',
+                    padding: '8px 14px',
+                    fontFamily: theme.font,
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: theme.primary,
+                    background: theme.card,
+                    border: `1px solid ${theme.border}`,
+                    borderRadius: 8,
+                    cursor: 'pointer',
+                }, children: addLabel })] }));
+}

package/dist/components/index.d.ts

@@ -0,0 +1,8 @@
+export { Section, Stack, Card, Heading, Text, Divider, theme } from './layout';
+export { Field } from './Field';
+export { GroupRows, OptionQuantityGrid } from './groups';
+export { ProductFormProvider, useProductForm, OPTION_FIELD_TYPES, } from './context';
+export type { ProductFormContextValue, ProductFormProviderProps, FieldSelection, SubmitAction, FooterAction, GroupRow, } from './context';
+export { ProductFormShell } from './shell';
+export { ProductFormActions } from './ProductFormActions';
+export { normalizeFooterActions, resolveFooterActions, footerActionsFromComponent, } from './footerActions';

package/dist/components/index.js

@@ -0,0 +1,7 @@
+export { Section, Stack, Card, Heading, Text, Divider, theme } from './layout';
+export { Field } from './Field';
+export { GroupRows, OptionQuantityGrid } from './groups';
+export { ProductFormProvider, useProductForm, OPTION_FIELD_TYPES, } from './context';
+export { ProductFormShell } from './shell';
+export { ProductFormActions } from './ProductFormActions';
+export { normalizeFooterActions, resolveFooterActions, footerActionsFromComponent, } from './footerActions';

package/dist/components/layout.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+/**
+ * Presentational building blocks for custom product forms. Self-styled with
+ * inline styles so they render consistently in any host (dashboard preview or
+ * the embed) without depending on an external stylesheet.
+ */
+export declare const theme: {
+    text: string;
+    muted: string;
+    border: string;
+    primary: string;
+    primaryText: string;
+    card: string;
+    surface: string;
+    radius: number;
+    font: string;
+};
+export declare function Stack({ children, gap, style, }: {
+    children?: React.ReactNode;
+    gap?: number;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare function Section({ title, children, style, }: {
+    title?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare function Card({ children, style, }: {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare function Heading({ children, style, }: {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare function Text({ children, muted, style, }: {
+    children?: React.ReactNode;
+    muted?: boolean;
+    style?: React.CSSProperties;
+}): React.JSX.Element;
+export declare function Divider({ style }: {
+    style?: React.CSSProperties;
+}): React.JSX.Element;

package/dist/components/layout.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Presentational building blocks for custom product forms. Self-styled with
+ * inline styles so they render consistently in any host (dashboard preview or
+ * the embed) without depending on an external stylesheet.
+ */
+export const theme = {
+    text: '#32325d',
+    muted: '#8898aa',
+    border: '#e9ecef',
+    primary: '#ff4449',
+    primaryText: '#ffffff',
+    card: '#ffffff',
+    surface: '#f6f9fc',
+    radius: 12,
+    font: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+};
+export function Stack({ children, gap = 12, style, }) {
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap, ...style }, children: children }));
+}
+export function Section({ title, children, style, }) {
+    return (_jsxs("section", { style: { display: 'flex', flexDirection: 'column', gap: 12, ...style }, children: [title ? (_jsx("h3", { style: {
+                    margin: 0,
+                    fontFamily: theme.font,
+                    fontSize: 13,
+                    fontWeight: 800,
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.06em',
+                    color: theme.muted,
+                }, children: title })) : null, children] }));
+}
+export function Card({ children, style, }) {
+    return (_jsx("div", { style: {
+            background: theme.card,
+            border: `1px solid ${theme.border}`,
+            borderRadius: theme.radius,
+            padding: 20,
+            boxShadow: '0 1px 2px rgba(50,50,93,0.06)',
+            ...style,
+        }, children: children }));
+}
+export function Heading({ children, style, }) {
+    return (_jsx("h2", { style: {
+            margin: 0,
+            fontFamily: theme.font,
+            fontSize: 18,
+            fontWeight: 800,
+            color: theme.text,
+            ...style,
+        }, children: children }));
+}
+export function Text({ children, muted, style, }) {
+    return (_jsx("p", { style: {
+            margin: 0,
+            fontFamily: theme.font,
+            fontSize: 14,
+            lineHeight: 1.5,
+            color: muted ? theme.muted : theme.text,
+            ...style,
+        }, children: children }));
+}
+export function Divider({ style }) {
+    return (_jsx("hr", { style: {
+            border: 'none',
+            borderTop: `1px solid ${theme.border}`,
+            margin: '4px 0',
+            ...style,
+        } }));
+}

package/dist/components/shell.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ProductFormProviderProps } from './context';
+/**
+ * Wraps a custom form: provides the form context (state + live pricing) and
+ * renders a quantity control above and a total + submit footer below the form's
+ * own content. Hosts render this around the form's default export.
+ *
+ * If `product` is omitted, render children only. AI-built forms sometimes nest
+ * `<ProductFormShell>` without props; the host already provided the real shell,
+ * so a second Provider with undefined product would crash and fall back to the
+ * default GroupRows form.
+ */
+export declare function ProductFormShell({ product, pricing, actions, helpers, children, initialJob, actionLabels, footerActions: footerActionsProp, }: Partial<Omit<ProductFormProviderProps, 'children'>> & {
+    children?: React.ReactNode;
+}): React.JSX.Element;