storefront-layouts-staging 1.0.0-staging.0

package/dist/editor/payaza-form/PayazaFormEditorFullPage.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PayazaFormEditorProps } from './PayazaFormEditor';
+export interface PayazaFormEditorFullPageProps extends PayazaFormEditorProps {
+    onBackToSettings?: () => void;
+    onOpenAssets?: () => void;
+    onBackToTheme?: () => void;
+}
+export declare const PayazaFormEditorFullPage: React.FC<PayazaFormEditorFullPageProps>;
+//# sourceMappingURL=PayazaFormEditorFullPage.d.ts.map

package/dist/editor/payaza-form/PayazaFormEditorFullPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PayazaFormEditorFullPage.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/PayazaFormEditorFullPage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAG7E,MAAM,WAAW,6BAA8B,SAAQ,qBAAqB;IAE1E,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,eAAO,MAAM,wBAAwB,EAAE,KAAK,CAAC,EAAE,CAAC,6BAA6B,CAU5E,CAAC"}

package/dist/editor/payaza-form/PayazaFormEditorFullPage.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PayazaFormEditor } from './PayazaFormEditor.js';
+import { AlertModalProvider } from '../../components/ui/alert-modal.js';
+export const PayazaFormEditorFullPage = (props) => {
+    return (_jsx(AlertModalProvider, { children: _jsx("div", { className: "fixed inset-0 z-50 flex h-[100dvh] max-h-[100dvh] flex-col overflow-hidden bg-[#F7F5F0]", children: _jsx("main", { className: "relative flex min-h-0 flex-1 flex-col overflow-hidden", children: _jsx(PayazaFormEditor, { ...props }) }) }) }));
+};

package/dist/editor/payaza-form/SliderArrayEditor.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { SchemaField } from './engine';
+export interface SliderArrayEditorProps {
+    sectionKey: string;
+    arrayFieldKey: string;
+    items: Record<string, unknown>[];
+    itemSchema: Record<string, SchemaField>;
+    minSlides?: number;
+    maxSlides?: number;
+    onItemChange: (index: number, itemValue: Record<string, unknown>) => void;
+    onItemAdd: () => void;
+    onItemRemove: (index: number) => void;
+    onItemReorder: (fromIndex: number, toIndex: number) => void;
+    onItemDuplicate: (index: number) => void;
+}
+export declare const SliderArrayEditor: React.FC<SliderArrayEditorProps>;
+//# sourceMappingURL=SliderArrayEditor.d.ts.map

package/dist/editor/payaza-form/SliderArrayEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderArrayEditor.d.ts","sourceRoot":"","sources":["../../../src/editor/payaza-form/SliderArrayEditor.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA+C,MAAM,OAAO,CAAC;AAWpE,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAyCvC,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IAC1E,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmN9D,CAAC"}

package/dist/editor/payaza-form/SliderArrayEditor.js

@@ -0,0 +1,96 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useRef } from 'react';
+import { ChevronLeft, ChevronRight, Copy, Image as ImageIcon, Plus, Trash2, } from 'lucide-react';
+import { cn } from '../../lib/utils/index.js';
+import { getFieldRenderer } from './field-renderer-ref.js';
+import { useActiveArrayFocus } from './ActiveArrayFocusContext.js';
+function slideLabel(item, index) {
+    if (!item)
+        return `Slide ${index + 1}`;
+    const t = item.title ||
+        item.badge ||
+        item.name ||
+        item.label;
+    return t ? String(t) : `Slide ${index + 1}`;
+}
+function remapIndexAfterReorder(from, to, active) {
+    if (active === from)
+        return to;
+    if (from < active && to >= active)
+        return active - 1;
+    if (from > active && to <= active)
+        return active + 1;
+    return active;
+}
+function slideThumb(item) {
+    const img = item?.image;
+    return typeof img === 'string' && img.trim() ? img : null;
+}
+function AddSlideButton({ onAdd, canAdd }) {
+    if (!canAdd)
+        return null;
+    return (_jsxs("button", { type: "button", onClick: onAdd, className: "group flex h-11 w-full items-center justify-center gap-2.5 rounded-md border border-dashed border-black/[0.12] bg-white text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/45 shadow-[0_1px_2px_rgba(27,0,41,0.03)] transition-all hover:border-[#440066]/35 hover:bg-[#F7F5F0]/80 hover:text-[#440066]", children: [_jsx("span", { className: "flex h-7 w-7 items-center justify-center rounded-md border border-black/[0.06] bg-[#F7F5F0] text-[#440066]", children: _jsx(Plus, { size: 14, strokeWidth: 2.5 }) }), "Add slide"] }));
+}
+export const SliderArrayEditor = memo(({ sectionKey, arrayFieldKey, items, itemSchema, minSlides, maxSlides, onItemChange, onItemAdd, onItemRemove, onItemReorder, onItemDuplicate, }) => {
+    const FieldRenderer = getFieldRenderer();
+    const stripRef = useRef(null);
+    const { activeIndex, setActiveIndex } = useActiveArrayFocus(sectionKey, arrayFieldKey);
+    const count = items.length;
+    const safeIndex = count > 0 ? Math.min(activeIndex, count - 1) : 0;
+    useEffect(() => {
+        if (count > 0 && activeIndex >= count) {
+            setActiveIndex(count - 1);
+        }
+    }, [count, activeIndex, setActiveIndex]);
+    const activeItem = items[safeIndex] ?? {};
+    const handleFieldChange = useCallback((fieldKey, fieldValue) => {
+        onItemChange(safeIndex, { ...activeItem, [fieldKey]: fieldValue });
+    }, [activeItem, onItemChange, safeIndex]);
+    const goPrev = () => {
+        if (safeIndex > 0)
+            setActiveIndex(safeIndex - 1);
+    };
+    const goNext = () => {
+        if (safeIndex < count - 1)
+            setActiveIndex(safeIndex + 1);
+    };
+    const canRemove = minSlides === undefined ? count > 1 : count > minSlides;
+    const canAdd = maxSlides === undefined ? true : count < maxSlides;
+    const onKeyDownStrip = (e) => {
+        if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            goPrev();
+        }
+        else if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            goNext();
+        }
+    };
+    if (count === 0) {
+        return _jsx(AddSlideButton, { onAdd: onItemAdd, canAdd: canAdd });
+    }
+    return (_jsxs("div", { "data-section-key": sectionKey, "data-array-field": arrayFieldKey, className: "space-y-3", children: [_jsx("div", { ref: stripRef, role: "tablist", "aria-label": "Hero slides", tabIndex: 0, onKeyDown: onKeyDownStrip, className: "custom-scrollbar flex gap-2 overflow-x-auto pb-1", children: items.map((item, index) => {
+                    const thumb = slideThumb(item);
+                    const label = slideLabel(item, index);
+                    const selected = index === safeIndex;
+                    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": selected, "aria-label": label, onClick: () => setActiveIndex(index), className: cn('flex w-[88px] shrink-0 flex-col overflow-hidden rounded-md border bg-white text-left transition-colors', selected
+                            ? 'border-[#440066] shadow-[0_0_0_1px_#440066]'
+                            : 'border-black/[0.08] hover:border-[#440066]/35'), children: [_jsxs("div", { className: "relative flex h-14 w-full items-center justify-center bg-[#F7F5F0]", children: [thumb ? (
+                                    // eslint-disable-next-line @next/next/no-img-element
+                                    _jsx("img", { src: thumb, alt: "", className: "h-full w-full object-cover" })) : (_jsx(ImageIcon, { className: "h-5 w-5 text-[#787c82]/60", strokeWidth: 1.5, "aria-hidden": true })), _jsx("span", { className: "absolute bottom-1 right-1 rounded bg-[#1b0029]/75 px-1 text-[9px] font-semibold text-white", children: index + 1 })] }), _jsx("span", { className: cn('line-clamp-2 px-1.5 py-1 text-[10px] font-medium leading-tight', selected ? 'text-[#440066]' : 'text-[#50575e]'), children: label })] }, index));
+                }) }), _jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", disabled: safeIndex === 0, onClick: goPrev, className: "rounded p-1.5 text-[#1b0029]/50 hover:bg-[#F7F5F0] hover:text-[#440066] disabled:pointer-events-none disabled:opacity-25", "aria-label": "Previous slide", children: _jsx(ChevronLeft, { className: "h-4 w-4", strokeWidth: 2 }) }), _jsxs("span", { className: "min-w-[7rem] text-center text-[12px] font-medium text-[#1b0029]", children: ["Slide ", safeIndex + 1, " of ", count] }), _jsx("button", { type: "button", disabled: safeIndex >= count - 1, onClick: goNext, className: "rounded p-1.5 text-[#1b0029]/50 hover:bg-[#F7F5F0] hover:text-[#440066] disabled:pointer-events-none disabled:opacity-25", "aria-label": "Next slide", children: _jsx(ChevronRight, { className: "h-4 w-4", strokeWidth: 2 }) })] }), _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-0.5", children: [_jsx("button", { type: "button", disabled: safeIndex === 0, onClick: () => {
+                                    const to = safeIndex - 1;
+                                    onItemReorder(safeIndex, to);
+                                    setActiveIndex(remapIndexAfterReorder(safeIndex, to, safeIndex));
+                                }, className: "rounded px-2 py-1 text-[10px] font-medium text-[#1b0029]/45 hover:bg-[#F7F5F0] hover:text-[#440066] disabled:opacity-25", children: "Move left" }), _jsx("button", { type: "button", disabled: safeIndex >= count - 1, onClick: () => {
+                                    const to = safeIndex + 1;
+                                    onItemReorder(safeIndex, to);
+                                    setActiveIndex(remapIndexAfterReorder(safeIndex, to, safeIndex));
+                                }, className: "rounded px-2 py-1 text-[10px] font-medium text-[#1b0029]/45 hover:bg-[#F7F5F0] hover:text-[#440066] disabled:opacity-25", children: "Move right" }), _jsx("button", { type: "button", onClick: () => onItemDuplicate(safeIndex), className: "rounded p-1.5 text-[#1b0029]/40 hover:bg-[#F7F5F0] hover:text-[#440066]", title: "Duplicate slide", children: _jsx(Copy, { className: "h-3.5 w-3.5", strokeWidth: 2 }) }), _jsx("button", { type: "button", disabled: !canRemove, onClick: () => {
+                                    onItemRemove(safeIndex);
+                                    if (safeIndex >= count - 1 && safeIndex > 0) {
+                                        setActiveIndex(safeIndex - 1);
+                                    }
+                                }, className: "rounded p-1.5 text-[#1b0029]/40 hover:bg-[#D16253]/12 hover:text-[#D16253] disabled:opacity-25", title: "Delete slide", children: _jsx(Trash2, { className: "h-3.5 w-3.5", strokeWidth: 2 }) })] })] }), _jsx("div", { className: "overflow-hidden rounded-md border border-black/[0.08] bg-white shadow-[0_1px_2px_rgba(27,0,41,0.04)]", children: _jsxs("div", { className: "relative space-y-6 px-5 py-5 md:px-6", children: [_jsx("div", { className: "absolute bottom-0 left-0 top-0 w-px bg-gradient-to-b from-[#440066]/15 via-[#440066]/08 to-transparent" }), Object.entries(itemSchema).map(([fieldKey, fieldSchema]) => (_jsx(FieldRenderer, { schemaField: fieldSchema, value: activeItem[fieldKey], path: [String(safeIndex), fieldKey], onChange: (value) => handleFieldChange(fieldKey, value) }, `${safeIndex}-${fieldKey}`)))] }) }), _jsx(AddSlideButton, { onAdd: onItemAdd, canAdd: canAdd })] }));
+});

package/dist/editor/payaza-form/components/ArrayField.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SchemaField } from '../engine';
+interface ArrayFieldProps {
+    label: string;
+    value: any[];
+    onChange: (value: any[]) => void;
+    itemSchema: Record<string, SchemaField>;
+    itemEditor?: string;
+    sectionKey?: string;
+    arrayFieldKey?: string;
+    minSlides?: number;
+    maxSlides?: number;
+    onItemChange: (index: number, itemValue: any) => void;
+    onItemAdd: () => void;
+    onItemRemove: (index: number) => void;
+    onItemReorder: (fromIndex: number, toIndex: number) => void;
+    onItemDuplicate?: (index: number) => void;
+}
+export declare const ArrayField: React.FC<ArrayFieldProps>;
+export {};
+//# sourceMappingURL=ArrayField.d.ts.map

package/dist/editor/payaza-form/components/ArrayField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrayField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/ArrayField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,GAAG,EAAE,CAAC;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC;IACjC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,IAAI,CAAC;IACtD,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,aAAa,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3C;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyDhD,CAAC"}

package/dist/editor/payaza-form/components/ArrayField.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import { List } from 'lucide-react';
+import { ArrayItemManager } from '../ArrayItemManager.js';
+export const ArrayField = memo(({ label, value, onChange, itemSchema, itemEditor, sectionKey, arrayFieldKey, minSlides, maxSlides, onItemChange, onItemAdd, onItemRemove, onItemReorder, onItemDuplicate, }) => {
+    const handleItemDuplicate = (index) => {
+        if (onItemDuplicate) {
+            onItemDuplicate(index);
+        }
+        else {
+            const itemToDuplicate = value[index];
+            const newArray = [...(value || [])];
+            newArray.splice(index + 1, 0, typeof itemToDuplicate === 'object' ? { ...itemToDuplicate } : itemToDuplicate);
+            onChange(newArray);
+        }
+    };
+    return (_jsxs("div", { className: "group", children: [_jsxs("div", { className: "mb-2 flex items-center gap-2", children: [_jsx(List, { className: "h-3.5 w-3.5 shrink-0 text-[#440066]", strokeWidth: 2, "aria-hidden": true }), _jsx("label", { className: "text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/75", children: label })] }), _jsx(ArrayItemManager, { items: value || [], itemSchema: itemSchema, itemEditor: itemEditor, sectionKey: sectionKey, arrayFieldKey: arrayFieldKey, minSlides: minSlides, maxSlides: maxSlides, onItemChange: onItemChange, onItemAdd: onItemAdd, onItemRemove: onItemRemove, onItemReorder: onItemReorder, onItemDuplicate: handleItemDuplicate })] }));
+});

package/dist/editor/payaza-form/components/BlockStylesInspector.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PayazaStyleSupports } from '../../alignment-schemas/types';
+export interface BlockStylesInspectorProps {
+    supports: PayazaStyleSupports | undefined;
+    value: Record<string, string>;
+    onChange: (next: Record<string, string>) => void;
+}
+export declare const BlockStylesInspector: React.FC<BlockStylesInspectorProps>;
+//# sourceMappingURL=BlockStylesInspector.d.ts.map

package/dist/editor/payaza-form/components/BlockStylesInspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockStylesInspector.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/BlockStylesInspector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAgEzE,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAC1C,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAyWpE,CAAC"}

package/dist/editor/payaza-form/components/BlockStylesInspector.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from 'react';
+import { resolveStyleSupports, sanitizePayazaStyleMap } from '../payaza-style-sanitize.js';
+const inputCls = 'w-full rounded-[2px] border border-[#dcdcde] bg-white px-2 py-1.5 text-[13px] text-[#1b0029] outline-none focus-visible:ring-2 focus-visible:ring-[#440066]/35';
+const labelCls = 'mb-1 block text-[11px] font-medium text-[#646970]';
+const sectionTitle = 'text-[11px] font-semibold uppercase tracking-[0.08em] text-[#787c82]';
+function stripSpacingKeys(m) {
+    const next = { ...m };
+    const keys = [
+        'padding',
+        'paddingTop',
+        'paddingRight',
+        'paddingBottom',
+        'paddingLeft',
+        'margin',
+        'marginTop',
+        'marginRight',
+        'marginBottom',
+        'marginLeft',
+    ];
+    for (const k of keys)
+        delete next[k];
+    return next;
+}
+function stripColorKeys(m) {
+    const next = { ...m };
+    delete next.backgroundColor;
+    delete next.color;
+    return next;
+}
+function stripBorderKeys(m) {
+    const next = { ...m };
+    const keys = [
+        'borderWidth',
+        'borderTopWidth',
+        'borderRightWidth',
+        'borderBottomWidth',
+        'borderLeftWidth',
+        'borderStyle',
+        'borderTopStyle',
+        'borderRightStyle',
+        'borderBottomStyle',
+        'borderLeftStyle',
+        'borderColor',
+        'borderTopColor',
+        'borderRightColor',
+        'borderBottomColor',
+        'borderLeftColor',
+        'borderRadius',
+    ];
+    for (const k of keys)
+        delete next[k];
+    return next;
+}
+function stripTypographyKeys(m) {
+    const next = { ...m };
+    delete next.textAlign;
+    return next;
+}
+export const BlockStylesInspector = ({ supports, value, onChange, }) => {
+    const sup = useMemo(() => resolveStyleSupports(supports), [supports]);
+    const commit = useCallback((mutate) => {
+        const raw = mutate({ ...value });
+        onChange(sanitizePayazaStyleMap(raw));
+    }, [onChange, value]);
+    const readAxisValue = useCallback((base, axis) => {
+        const fallback = 0;
+        const keys = axis === 'horizontal'
+            ? [`${base}Left`, `${base}Right`]
+            : [`${base}Top`, `${base}Bottom`];
+        for (const key of keys) {
+            const raw = value[key];
+            if (!raw)
+                continue;
+            const match = raw.trim().match(/^(-?\d+(?:\.\d+)?)px$/i);
+            if (match)
+                return Number(match[1]);
+        }
+        return fallback;
+    }, [value]);
+    const setAxis = useCallback((base, axis, px) => {
+        const nextValue = `${Math.round(px)}px`;
+        commit((prev) => {
+            const next = { ...prev };
+            if (axis === 'horizontal') {
+                next[`${base}Left`] = nextValue;
+                next[`${base}Right`] = nextValue;
+            }
+            else {
+                next[`${base}Top`] = nextValue;
+                next[`${base}Bottom`] = nextValue;
+            }
+            return next;
+        });
+    }, [commit]);
+    const visible = sup.spacing || sup.colors || sup.border || sup.typography;
+    if (!visible) {
+        return (_jsx("div", { className: "border-t border-[#e8e9ec] px-3 py-8", children: _jsx("p", { className: "text-[13px] leading-relaxed text-[#646970]", children: "This block does not expose style controls yet." }) }));
+    }
+    return (_jsxs("div", { className: "border-t border-[#e8e9ec] px-3 py-4 space-y-6", children: [(sup.spacing || sup.colors || sup.border || sup.typography) && (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: _jsx("button", { type: "button", onClick: () => onChange({}), className: "rounded-[2px] border border-[#dcdcde] bg-white px-2 py-1 text-[12px] font-medium text-[#50575e] hover:bg-[#f6f7f7]", children: "Clear all styles" }) })), sup.spacing ? (_jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: sectionTitle, children: "Layout" }), _jsxs("div", { className: "space-y-3", children: [_jsx("span", { className: "text-[12px] font-medium text-[#1b0029]", children: "Padding" }), _jsxs("div", { className: "space-y-2 rounded-[2px] border border-[#e8e9ec] bg-[#fdfdfe] p-2.5", children: [_jsx("label", { className: labelCls, children: "Horizontal" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "range", min: 0, max: 120, step: 1, value: readAxisValue('padding', 'horizontal'), onChange: (e) => setAxis('padding', 'horizontal', Number(e.target.value)), className: "h-2 w-full cursor-pointer accent-[#3858e9]" }), _jsxs("span", { className: "w-12 text-right text-[11px] font-medium text-[#1b0029]", children: [readAxisValue('padding', 'horizontal'), "px"] })] })] }), _jsxs("div", { className: "space-y-2 rounded-[2px] border border-[#e8e9ec] bg-[#fdfdfe] p-2.5", children: [_jsx("label", { className: labelCls, children: "Vertical" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "range", min: 0, max: 120, step: 1, value: readAxisValue('padding', 'vertical'), onChange: (e) => setAxis('padding', 'vertical', Number(e.target.value)), className: "h-2 w-full cursor-pointer accent-[#3858e9]" }), _jsxs("span", { className: "w-12 text-right text-[11px] font-medium text-[#1b0029]", children: [readAxisValue('padding', 'vertical'), "px"] })] })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsx("span", { className: "text-[12px] font-medium text-[#1b0029]", children: "Margin" }), _jsxs("div", { className: "space-y-2 rounded-[2px] border border-[#e8e9ec] bg-[#fdfdfe] p-2.5", children: [_jsx("label", { className: labelCls, children: "Horizontal" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "range", min: 0, max: 120, step: 1, value: readAxisValue('margin', 'horizontal'), onChange: (e) => setAxis('margin', 'horizontal', Number(e.target.value)), className: "h-2 w-full cursor-pointer accent-[#3858e9]" }), _jsxs("span", { className: "w-12 text-right text-[11px] font-medium text-[#1b0029]", children: [readAxisValue('margin', 'horizontal'), "px"] })] })] }), _jsxs("div", { className: "space-y-2 rounded-[2px] border border-[#e8e9ec] bg-[#fdfdfe] p-2.5", children: [_jsx("label", { className: labelCls, children: "Vertical" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "range", min: 0, max: 120, step: 1, value: readAxisValue('margin', 'vertical'), onChange: (e) => setAxis('margin', 'vertical', Number(e.target.value)), className: "h-2 w-full cursor-pointer accent-[#3858e9]" }), _jsxs("span", { className: "w-12 text-right text-[11px] font-medium text-[#1b0029]", children: [readAxisValue('margin', 'vertical'), "px"] })] })] })] }), _jsx("div", { className: "flex flex-wrap gap-2", children: _jsx("button", { type: "button", className: "text-[11px] font-medium text-[#440066] hover:underline", onClick: () => commit((p) => stripSpacingKeys(p)), children: "Reset spacing" }) })] })) : null, sup.colors ? (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: sectionTitle, children: "Colours" }), _jsxs("div", { children: [_jsx("label", { className: labelCls, children: "Background" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "color", className: "h-9 w-12 cursor-pointer rounded-[2px] border border-[#dcdcde] bg-white p-0.5", value: /^#[0-9A-Fa-f]{6}$/.test(value.backgroundColor || '') ? value.backgroundColor : '#ffffff', onChange: (e) => commit((p) => ({ ...p, backgroundColor: e.target.value })) }), _jsx("input", { className: inputCls, placeholder: "#FFFFFF", value: value.backgroundColor || '', onChange: (e) => commit((p) => {
+                                            const next = { ...p };
+                                            if (!e.target.value.trim())
+                                                delete next.backgroundColor;
+                                            else
+                                                next.backgroundColor = e.target.value.trim();
+                                            return next;
+                                        }) })] })] }), _jsxs("div", { children: [_jsx("label", { className: labelCls, children: "Text" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "color", className: "h-9 w-12 cursor-pointer rounded-[2px] border border-[#dcdcde] bg-white p-0.5", value: /^#[0-9A-Fa-f]{6}$/.test(value.color || '') ? value.color : '#1b0029', onChange: (e) => commit((p) => ({ ...p, color: e.target.value })) }), _jsx("input", { className: inputCls, placeholder: "#1b0029", value: value.color || '', onChange: (e) => commit((p) => {
+                                            const next = { ...p };
+                                            if (!e.target.value.trim())
+                                                delete next.color;
+                                            else
+                                                next.color = e.target.value.trim();
+                                            return next;
+                                        }) })] })] }), _jsx("button", { type: "button", className: "text-[11px] font-medium text-[#440066] hover:underline", onClick: () => commit((p) => stripColorKeys(p)), children: "Reset colours" })] })) : null, sup.border ? (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: sectionTitle, children: "Border and radius" }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { children: [_jsx("label", { className: labelCls, children: "Width" }), _jsx("input", { className: inputCls, placeholder: "1px", value: value.borderWidth || '', onChange: (e) => commit((p) => {
+                                            const next = { ...p };
+                                            if (!e.target.value.trim())
+                                                delete next.borderWidth;
+                                            else
+                                                next.borderWidth = e.target.value.trim();
+                                            return next;
+                                        }) })] }), _jsxs("div", { children: [_jsx("label", { className: labelCls, children: "Radius" }), _jsx("input", { className: inputCls, placeholder: "8px", value: value.borderRadius || '', onChange: (e) => commit((p) => {
+                                            const next = { ...p };
+                                            if (!e.target.value.trim())
+                                                delete next.borderRadius;
+                                            else
+                                                next.borderRadius = e.target.value.trim();
+                                            return next;
+                                        }) })] }), _jsxs("div", { children: [_jsx("label", { className: labelCls, children: "Style" }), _jsxs("select", { className: inputCls, value: value.borderStyle || '', onChange: (e) => commit((p) => {
+                                            const next = { ...p };
+                                            if (!e.target.value)
+                                                delete next.borderStyle;
+                                            else
+                                                next.borderStyle = e.target.value;
+                                            return next;
+                                        }), children: [_jsx("option", { value: "", children: "Default" }), _jsx("option", { value: "solid", children: "Solid" }), _jsx("option", { value: "dashed", children: "Dashed" }), _jsx("option", { value: "dotted", children: "Dotted" }), _jsx("option", { value: "none", children: "None" })] })] }), _jsxs("div", { children: [_jsx("label", { className: labelCls, children: "Border colour" }), _jsxs("div", { className: "flex gap-2", children: [_jsx("input", { type: "color", className: "h-9 w-12 cursor-pointer rounded-[2px] border border-[#dcdcde] bg-white p-0.5", value: /^#[0-9A-Fa-f]{6}$/.test(value.borderColor || '') ? value.borderColor : '#dcdcde', onChange: (e) => commit((p) => ({ ...p, borderColor: e.target.value })) }), _jsx("input", { className: inputCls, placeholder: "#E5E5E5", value: value.borderColor || '', onChange: (e) => commit((p) => {
+                                                    const next = { ...p };
+                                                    if (!e.target.value.trim())
+                                                        delete next.borderColor;
+                                                    else
+                                                        next.borderColor = e.target.value.trim();
+                                                    return next;
+                                                }) })] })] })] }), _jsx("button", { type: "button", className: "text-[11px] font-medium text-[#440066] hover:underline", onClick: () => commit((p) => stripBorderKeys(p)), children: "Reset border" })] })) : null, sup.typography ? (_jsxs("div", { className: "space-y-3", children: [_jsx("p", { className: sectionTitle, children: "Typography" }), _jsxs("div", { children: [_jsx("label", { className: labelCls, children: "Text align" }), _jsxs("select", { className: inputCls, value: value.textAlign || '', onChange: (e) => commit((p) => {
+                                    const next = { ...p };
+                                    if (!e.target.value)
+                                        delete next.textAlign;
+                                    else
+                                        next.textAlign = e.target.value;
+                                    return next;
+                                }), children: [_jsx("option", { value: "", children: "Default" }), _jsx("option", { value: "left", children: "Left" }), _jsx("option", { value: "center", children: "Center" }), _jsx("option", { value: "right", children: "Right" }), _jsx("option", { value: "justify", children: "Justify" })] })] }), _jsx("button", { type: "button", className: "text-[11px] font-medium text-[#440066] hover:underline", onClick: () => commit((p) => stripTypographyKeys(p)), children: "Reset typography" })] })) : null] }));
+};

package/dist/editor/payaza-form/components/BlocksField.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { PayazaSerializedBlock } from '../../blocks/types';
+type Props = {
+    label: string;
+    description?: string;
+    value: PayazaSerializedBlock[] | undefined;
+    pathPrefix: string[];
+    allowedBlockNames: string[];
+    onChange: (next: PayazaSerializedBlock[]) => void;
+    /** When true, label/description are rendered by the parent (SectionSchemaInspector). */
+    hideHeader?: boolean;
+    /** Full-bleed list: block dividers span sidebar width. */
+    fullBleed?: boolean;
+};
+export declare const BlocksField: React.FC<Props>;
+export {};
+//# sourceMappingURL=BlocksField.d.ts.map

package/dist/editor/payaza-form/components/BlocksField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlocksField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/BlocksField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,KAAK,EAAmB,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAUjF,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,qBAAqB,EAAE,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,IAAI,EAAE,qBAAqB,EAAE,KAAK,IAAI,CAAC;IAClD,wFAAwF;IACxF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAYF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAoFvC,CAAC"}

package/dist/editor/payaza-form/components/BlocksField.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { memo, useCallback } from 'react';
+import { ChevronDown, ChevronRight, Plus, Trash2 } from 'lucide-react';
+import { cn } from '../../../lib/utils/index.js';
+import { createPayazaEmptyBlock, getPayazaBlockDefinition } from '../../blocks/registry.js';
+import { deepClone } from '../../../lib/utils/index.js';
+import { RichTextField } from './RichTextField.js';
+import { TextField } from './TextField.js';
+import { ImageField } from './ImageField.js';
+import { NumberField } from './NumberField.js';
+import { IconField } from './IconField.js';
+import { FieldDensityProvider } from './FieldDensityContext.js';
+function normalizeBlocks(v) {
+    if (!Array.isArray(v))
+        return [];
+    return v;
+}
+function attrOf(b) {
+    const a = (b.attributes && typeof b.attributes === 'object') ? b.attributes : {};
+    return { ...a };
+}
+export const BlocksField = memo(({ label, description, value, pathPrefix: _pathPrefix, allowedBlockNames, onChange, hideHeader, fullBleed }) => {
+    void _pathPrefix;
+    const blocks = normalizeBlocks(value);
+    const mutate = useCallback((next) => {
+        onChange(deepClone(next));
+    }, [onChange]);
+    const move = (from, to) => {
+        if (to < 0 || to >= blocks.length)
+            return;
+        const next = [...blocks];
+        const [x] = next.splice(from, 1);
+        next.splice(to, 0, x);
+        mutate(next);
+    };
+    const removeAt = (i) => {
+        mutate(blocks.filter((_, j) => j !== i));
+    };
+    const addBlock = (name) => {
+        mutate([...blocks, createPayazaEmptyBlock(name)]);
+    };
+    return (_jsx(FieldDensityProvider, { density: "compact", children: _jsxs("div", { className: cn(fullBleed && '-mx-4'), children: [!hideHeader && (label || description) ? (_jsxs("div", { className: "mb-3", children: [label ? (_jsx("p", { className: "text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/75", children: label })) : null, description ? _jsx("p", { className: "mt-0.5 text-[11px] text-[#646970]", children: description }) : null] })) : null, _jsx("ul", { className: "divide-y divide-[#f0f0f1]", children: blocks.map((block, index) => (_jsx(BlockRow, { depth: 0, index: index, siblingsCount: blocks.length, block: block, allowedBlockNames: allowedBlockNames, onMoveUp: () => move(index, index - 1), onMoveDown: () => move(index, index + 1), onRemove: () => removeAt(index), onUpdate: (nextBlock) => {
+                            const nb = [...blocks];
+                            nb[index] = nextBlock;
+                            mutate(nb);
+                        } }, block.clientId || `${block.name}-${index}`))) }), _jsxs("div", { className: cn('flex flex-wrap items-center gap-2 border-t border-[#f0f0f1] pt-3', fullBleed ? 'px-4' : 'mt-1'), children: [_jsx(Plus, { className: "h-3.5 w-3.5 shrink-0 text-[#440066]", "aria-hidden": true }), _jsx("span", { className: "text-[11px] text-[#646970]", children: "Add" }), allowedBlockNames.map((raw) => (_jsx("button", { type: "button", onClick: () => addBlock(raw), className: "rounded-full px-2.5 py-0.5 text-[11px] font-medium text-[#440066] transition-colors hover:bg-[#440066]/08", children: getPayazaBlockDefinition(raw)?.label || raw.replace('payaza/', '') }, raw)))] })] }) }));
+});
+BlocksField.displayName = 'BlocksField';
+const BlockRow = memo(({ depth, index, siblingsCount, block, allowedBlockNames, onMoveUp, onMoveDown, onRemove, onUpdate, }) => {
+    const [open, setOpen] = React.useState(index === 0);
+    const def = getPayazaBlockDefinition(block.name);
+    const attrs = attrOf(block);
+    const inner = block.innerBlocks && block.innerBlocks.length > 0 ? block.innerBlocks : [];
+    const isGroup = block.name === 'payaza/group';
+    const setAttr = (key, val) => {
+        onUpdate({
+            ...block,
+            attributes: { ...attrs, [key]: val },
+        });
+    };
+    const mutateInner = (next) => {
+        onUpdate({
+            ...block,
+            innerBlocks: [...next],
+        });
+    };
+    const moveInner = (from, to) => {
+        if (to < 0 || to >= inner.length)
+            return;
+        const next = [...inner];
+        const [x] = next.splice(from, 1);
+        next.splice(to, 0, x);
+        mutateInner(next);
+    };
+    const removeInner = (i) => mutateInner(inner.filter((_, j) => j !== i));
+    const addInner = (name) => mutateInner([...inner, createPayazaEmptyBlock(name)]);
+    return (_jsxs("li", { children: [_jsxs("div", { className: "flex items-center gap-1 px-4 py-2.5", children: [_jsxs("button", { type: "button", "aria-expanded": open, className: "flex min-w-0 flex-1 items-center gap-1.5 text-left", onClick: () => setOpen((o) => !o), children: [open ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5 shrink-0 text-[#787c82]" })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5 shrink-0 text-[#787c82]" })), _jsxs("span", { className: "truncate text-[12px] font-semibold text-[#1b0029]", children: [def?.label ?? block.name, _jsxs("span", { className: "ml-1 font-normal text-[#787c82]", children: ["#", index + 1] })] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-0.5", children: [_jsx("button", { type: "button", "aria-label": "Move up", disabled: index <= 0, onClick: (e) => {
+                                    e.stopPropagation();
+                                    onMoveUp();
+                                }, className: "rounded px-1.5 py-1 text-[11px] text-[#787c82] hover:bg-[#f0f0f1] disabled:opacity-30", children: "\u2191" }), _jsx("button", { type: "button", "aria-label": "Move down", disabled: index >= siblingsCount - 1, onClick: (e) => {
+                                    e.stopPropagation();
+                                    onMoveDown();
+                                }, className: "rounded px-1.5 py-1 text-[11px] text-[#787c82] hover:bg-[#f0f0f1] disabled:opacity-30", children: "\u2193" }), _jsx("button", { type: "button", "aria-label": "Remove block", onClick: (e) => {
+                                    e.stopPropagation();
+                                    onRemove();
+                                }, className: "rounded p-1 text-[#D16253] hover:bg-[#D16253]/08", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] })] }), open && (_jsxs("div", { className: "space-y-4 px-4 pb-4 pt-0", children: [def?.attrFields?.map((f) => {
+                        const fv = attrs[f.key];
+                        if (f.editor === 'image') {
+                            return (_jsx(ImageField, { label: f.label, value: fv || '', onChange: (v) => setAttr(f.key, v) }, f.key));
+                        }
+                        if (f.editor === 'number') {
+                            return (_jsx(NumberField, { label: f.label, value: fv != null ? Number(fv) : 1, onChange: (v) => setAttr(f.key, v) }, f.key));
+                        }
+                        if (f.editor === 'icon') {
+                            return (_jsx(IconField, { label: f.label, value: fv || '', onChange: (v) => setAttr(f.key, v) }, f.key));
+                        }
+                        if (f._inlineRichText && (f.editor === 'text' || f.editor === 'multiline_text')) {
+                            return (_jsx(RichTextField, { label: f.label, multiline: f.editor === 'multiline_text', value: fv, onChange: (nv) => setAttr(f.key, nv) }, f.key));
+                        }
+                        return (_jsx(TextField, { label: f.label, value: fv != null ? String(fv) : '', onChange: (v) => setAttr(f.key, v) }, f.key));
+                    }), isGroup ? (_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-[10px] font-semibold uppercase tracking-wider text-[#646970]", children: "Inner blocks" }), _jsx("ul", { className: "divide-y divide-[#f0f0f1]", children: inner.map((ch, chi) => (_jsx(BlockRow, { depth: depth + 1, index: chi, siblingsCount: inner.length, block: ch, allowedBlockNames: allowedBlockNames, onMoveUp: () => moveInner(chi, chi - 1), onMoveDown: () => moveInner(chi, chi + 1), onRemove: () => removeInner(chi), onUpdate: (nextCh) => {
+                                        const nb = [...inner];
+                                        nb[chi] = nextCh;
+                                        mutateInner(nb);
+                                    } }, ch.clientId || `${ch.name}-${chi}-${depth}`))) }), _jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-[10px] text-[#787c82]", children: "Add" }), allowedBlockNames.map((raw) => (_jsx("button", { type: "button", onClick: () => addInner(raw), className: "rounded-full px-2 py-0.5 text-[10px] font-medium text-[#440066] hover:bg-[#440066]/08", children: raw.replace('payaza/', '') }, raw)))] })] })) : null] }))] }));
+});
+BlockRow.displayName = 'BlockRow';

package/dist/editor/payaza-form/components/ButtonField.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ButtonFieldProps {
+    label: string;
+    value: {
+        text: string;
+        link: string;
+    };
+    onChange: (value: {
+        text: string;
+        link: string;
+    }) => void;
+}
+export declare const ButtonField: React.FC<ButtonFieldProps>;
+export {};
+//# sourceMappingURL=ButtonField.d.ts.map

package/dist/editor/payaza-form/components/ButtonField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonField.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/ButtonField.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE;QACL,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;IACF,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAC3D;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0DlD,CAAC"}

package/dist/editor/payaza-form/components/ButtonField.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link2 } from 'lucide-react';
+import { TextField } from './TextField.js';
+import { useEditorLayout } from '../EditorLayoutContext.js';
+import { getTemplatePages } from '../../../lib/template-pages.js';
+export const ButtonField = ({ label, value, onChange }) => {
+    const { layoutId } = useEditorLayout();
+    const pages = getTemplatePages(layoutId);
+    const handleTextChange = (text) => {
+        onChange({ ...value, text });
+    };
+    const handleLinkChange = (link) => {
+        onChange({ ...value, link });
+    };
+    return (_jsxs("div", { className: "group/btn-field border-b border-black/[0.06] pb-5 last:border-b-0 last:pb-0", children: [_jsxs("div", { className: "mb-3 flex items-center gap-2", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-black/[0.06] bg-[#F7F5F0] text-[#440066] transition-colors group-focus-within/btn-field:border-[#440066]/25", children: _jsx(Link2, { className: "h-4 w-4", strokeWidth: 2, "aria-hidden": true }) }), _jsx("label", { className: "text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/75", children: label })] }), _jsxs("div", { className: "space-y-5 rounded-md border border-black/[0.06] bg-white px-3 py-4 md:px-3.5", children: [_jsx(TextField, { label: "Label", value: value?.text || '', onChange: handleTextChange, placeholder: "e.g. Shop Now" }), pages.length > 0 ? (_jsxs("div", { className: "space-y-1.5", children: [_jsx("label", { className: "block text-[11px] font-semibold uppercase tracking-[0.06em] text-[#1b0029]/60", children: "Destination page" }), _jsxs("select", { value: value?.link || '', onChange: (e) => handleLinkChange(e.target.value), className: "w-full rounded-md border border-black/[0.1] bg-[#FAFAF9] px-3 py-2 text-sm text-[#1b0029] outline-none transition-colors focus:border-[#440066]/40 focus:ring-1 focus:ring-[#440066]/20", children: [_jsx("option", { value: "", children: "\u2014 Select a page \u2014" }), pages.map((page) => (_jsx("option", { value: page.path, children: page.label }, page.path)))] })] })) : (_jsx(TextField, { label: "Action link", value: value?.link || '', onChange: handleLinkChange, placeholder: "e.g. /products or https://\u2026" }))] })] }));
+};

package/dist/editor/payaza-form/components/CanvasGranularInspector.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { OverlayLayoutJSON } from '../engine';
+import { type CanvasInspectorElementKind } from '../../alignment-schemas/resolve-canvas-inspector-leaf';
+export interface CanvasGranularInspectorProps {
+    layoutJson: OverlayLayoutJSON;
+    activePageId: string;
+    sectionKey: string;
+    fieldPath: string[];
+    elementKind: CanvasInspectorElementKind;
+    pageSchemaRecord: Record<string, unknown>;
+    /** `page.data[sectionKey]` snapshot for block registry resolution */
+    sectionData: unknown;
+    onChange: (sectionKey: string, fieldPath: string[], value: unknown) => void;
+}
+export declare const CanvasGranularInspector: React.FC<CanvasGranularInspectorProps>;
+//# sourceMappingURL=CanvasGranularInspector.d.ts.map

package/dist/editor/payaza-form/components/CanvasGranularInspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasGranularInspector.d.ts","sourceRoot":"","sources":["../../../../src/editor/payaza-form/components/CanvasGranularInspector.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAEnD,OAAO,EAEL,KAAK,0BAA0B,EAChC,MAAM,uDAAuD,CAAC;AAW/D,MAAM,WAAW,4BAA4B;IAC3C,UAAU,EAAE,iBAAiB,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,WAAW,EAAE,0BAA0B,CAAC;IACxC,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C,qEAAqE;IACrE,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7E;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA4H1E,CAAC"}

package/dist/editor/payaza-form/components/CanvasGranularInspector.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { readOverlayFieldValue } from '../data-transformer.js';
+import { resolveCanvasInspectorLeaf, } from '../../alignment-schemas/resolve-canvas-inspector-leaf.js';
+import { coerceRichSidebarEditorString } from '../../../lib/rich-html.js';
+import { TextField } from './TextField.js';
+import { TextareaField } from './TextareaField.js';
+import { RichTextField } from './RichTextField.js';
+import { ImageField } from './ImageField.js';
+import { IconField } from './IconField.js';
+import { NumberField } from './NumberField.js';
+import { StarRatingField } from './StarRatingField.js';
+import { ToggleField } from './ToggleField.js';
+export const CanvasGranularInspector = memo(({ layoutJson, activePageId, sectionKey, fieldPath, elementKind, pageSchemaRecord, sectionData, onChange, }) => {
+    const meta = useMemo(() => resolveCanvasInspectorLeaf(pageSchemaRecord, sectionKey, fieldPath, sectionData, elementKind), [pageSchemaRecord, sectionKey, fieldPath, sectionData, elementKind]);
+    const rawValue = useMemo(() => readOverlayFieldValue(layoutJson, activePageId, sectionKey, fieldPath), [layoutJson, activePageId, sectionKey, fieldPath]);
+    if (!meta) {
+        return (_jsx("div", { className: "border-t border-dashed border-[#e8e9ec] px-3 py-8 text-center text-[13px] text-[#646970]", children: _jsx("p", { children: "Could not resolve this field for the sidebar. Try editing inline on the preview." }) }));
+    }
+    const flush = (value) => onChange(sectionKey, fieldPath, value);
+    return (_jsxs("div", { className: "border-t border-[#e8e9ec] px-3 py-4", "data-payaza-granular-inspector": true, children: [meta.description && (_jsx("p", { className: "mb-3 text-[12px] leading-snug text-[#50575e]", children: meta.description })), meta.widget === 'toggle' && (_jsx(ToggleField, { label: meta.label, value: rawValue, onChange: (v) => flush(v) })), meta.widget === 'image' && (_jsx(ImageField, { label: meta.label, value: typeof rawValue === 'string' ? rawValue : String(rawValue ?? ''), onChange: (v) => flush(v) })), meta.widget === 'number' && (_jsx(NumberField, { label: meta.label, value: typeof rawValue === 'number' && Number.isFinite(rawValue)
+                    ? rawValue
+                    : Number(rawValue) || 0, onChange: (v) => flush(v) })), meta.widget === 'rating' && (_jsx(StarRatingField, { label: meta.label, value: typeof rawValue === 'number' && Number.isFinite(rawValue)
+                    ? rawValue
+                    : Number(rawValue) || 5, onChange: (v) => flush(v) })), meta.widget === 'text' && !meta.multiline && (_jsx(TextField, { label: meta.label, value: typeof rawValue === 'string'
+                    ? rawValue
+                    : coerceRichSidebarEditorString(rawValue), onChange: (v) => flush(v), type: "text" })), meta.widget === 'text' && meta.multiline && (_jsx(TextareaField, { label: meta.label, value: typeof rawValue === 'string'
+                    ? rawValue
+                    : coerceRichSidebarEditorString(rawValue), onChange: (v) => flush(v) })), meta.widget === 'icon' && (_jsx(IconField, { label: meta.label, value: typeof rawValue === 'string' ? rawValue : String(rawValue ?? ''), onChange: (v) => flush(v) })), meta.widget === 'richText' && (_jsx(RichTextField, { label: meta.label, value: rawValue, multiline: meta.multiline, onChange: (next) => flush(next) }))] }));
+});
+CanvasGranularInspector.displayName = 'CanvasGranularInspector';

package/dist/editor/payaza-form/components/FieldDensityContext.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type FieldDensity = 'default' | 'compact';
+export declare const FieldDensityProvider: React.FC<{
+    density: FieldDensity;
+    children: React.ReactNode;
+}>;
+export declare function useFieldDensity(): FieldDensity;
+/** Resolve explicit prop over context. */
+export declare function resolveFieldDensity(explicit?: FieldDensity): FieldDensity;
+//# sourceMappingURL=FieldDensityContext.d.ts.map