@mohasinac/appkit 4.10.0 → 4.11.1

package/dist/features/homepage/components/CharacterHotspotForm.js

@@ -1,11 +1,21 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize";
-import { useState, useRef } from "react";
+import { useEffect, useState, useRef } from "react";
+import { z } from "zod";
 import Image from "next/image";
 import { Button, Details, Div, Heading, Input, Label, Li, Row, Span, Stack, Summary, Text, Textarea, Ul } from "../../../ui";
+import { useFormShellState, FormShellContext, FormErrorSummary } from "../../../ui/forms";
 import { resolveMediaUrl } from "../../../utils/media-url";
 import { DEFAULT_ACCENT_HEX } from "../lib/franchise-colors";
+// Validates the "Pin Details" step's draft fields — mirrors the existing
+// `disabled={!draftName || !draftHref}` gates on that step's Save buttons.
+const pinDetailsSchema = z.object({
+    draftName: z.string().min(1, "Name is required"),
+    draftUniverse: z.string().min(1, "Universe/Category is required"),
+    draftDescription: z.string().min(1, "Description is required"),
+    draftHref: z.string().min(1, "Link (href) is required"),
+});
 function randomId() {
     return Math.random().toString(36).slice(2, 9);
 }
@@ -36,6 +46,11 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
     const [saving, setSaving] = useState(false);
     const [error, setError] = useState(null);
     const [success, setSuccess] = useState(false);
+    const { shellCtx, validate: validatePinDetails } = useFormShellState(pinDetailsSchema);
+    useEffect(() => {
+        validatePinDetails({ draftName, draftUniverse, draftDescription, draftHref });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [draftName, draftUniverse, draftDescription, draftHref]);
     const containerRef = useRef(null);
     async function handleImageUpload(e) {
         const file = e.target.files?.[0];
@@ -119,204 +134,204 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
         { key: "review", label: "Review & Save" },
     ];
     const stepIndex = STEPS.findIndex((s) => s.key === step);
-    return (_jsxs(Stack, { className: "mx-auto max-w-3xl", gap: "lg", children: [error && (_jsx(Text, { className: CLS_ERROR_BANNER, children: error })), success && (_jsx(Text, { className: CLS_SUCCESS_BANNER, children: "Saved to database successfully!" })), _jsx(Row, { align: "start", children: STEPS.map((s, i) => (_jsxs(Stack, { className: "flex-1", align: "center", children: [_jsxs(Row, { className: "w-full", align: "center", children: [i > 0 && (_jsx(Div, { className: "h-0.5 flex-1", style: {
-                                        background: i <= stepIndex
-                                            ? "var(--color-black)"
-                                            : "var(--border-ink)",
-                                    } })), _jsx(Row, { textWeight: "bold", textSize: "sm", className: "h-8 w-8 shrink-0", align: "center", justify: "center", rounded: "full", style: {
-                                        background: i < stepIndex
-                                            ? "var(--color-black)"
-                                            : i === stepIndex
+    return (_jsx(FormShellContext.Provider, { value: shellCtx, children: _jsxs(Stack, { className: "mx-auto max-w-3xl", gap: "lg", children: [error && (_jsx(Text, { className: CLS_ERROR_BANNER, children: error })), success && (_jsx(Text, { className: CLS_SUCCESS_BANNER, children: "Saved to database successfully!" })), _jsx(Row, { align: "start", children: STEPS.map((s, i) => (_jsxs(Stack, { className: "flex-1", align: "center", children: [_jsxs(Row, { className: "w-full", align: "center", children: [i > 0 && (_jsx(Div, { className: "h-0.5 flex-1", style: {
+                                            background: i <= stepIndex
+                                                ? "var(--color-black)"
+                                                : "var(--border-ink)",
+                                        } })), _jsx(Row, { textWeight: "bold", textSize: "sm", className: "h-8 w-8 shrink-0", align: "center", justify: "center", rounded: "full", style: {
+                                            background: i < stepIndex
+                                                ? "var(--color-black)"
+                                                : i === stepIndex
+                                                    ? "var(--color-yellow)"
+                                                    : "var(--surface-elevated)",
+                                            color: i < stepIndex
                                                 ? "var(--color-yellow)"
-                                                : "var(--surface-elevated)",
-                                        color: i < stepIndex
-                                            ? "var(--color-yellow)"
-                                            : "var(--color-black)",
-                                        border: i <= stepIndex
-                                            ? "2px solid var(--color-black)"
-                                            : STY_BORDER_INK,
-                                    }, children: i < stepIndex ? "✓" : i + 1 }), i < STEPS.length - 1 && (_jsx(Div, { className: "h-0.5 flex-1", style: {
-                                        background: i < stepIndex
-                                            ? "var(--color-black)"
-                                            : "var(--border-ink)",
-                                    } }))] }), _jsx(Span, { weight: "medium", 
-                            // audit-content-alignment-ok: label under a small draggable marker dot, admin editor UI not marketing content
-                            className: "mt-1 text-center text-[10px]", style: { color: "var(--color-muted)" }, children: s.label })] }, s.key))) }), step === "image" && (_jsxs(Div, { className: CLS_STEP, style: {
-                    borderColor: "var(--border-ink)",
-                    background: "var(--surface-elevated)",
-                }, children: [_jsx(Heading, { level: 2, size: "lg", weight: "bold", children: "Upload Background Image" }), _jsx(Text, { style: { color: "var(--color-muted)" }, size: "sm", children: "Choose a wide panoramic image that shows all the characters. You will place pins on it in the next step." }), _jsxs(Label, { layout: "flex-col-center", gap: "md", rounded: "lg", padding: "xl", className: "cursor-pointer border-2 border-dashed transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Span, { size: "3xl", children: "\uD83D\uDDBC" }), _jsx(Span, { weight: "medium", children: uploading ? "Uploading…" : "Click to choose image" }), _jsx(Span, { size: "xs", style: { color: "var(--color-muted)" }, children: "JPG, PNG, WebP \u2014 wide landscape images work best" }), _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), imageUrl && (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: CLS_IMG_WRAP, style: { paddingTop: "37.5%" }, children: _jsx(Image, { src: resolveMediaUrl(imageUrl), alt: imageAlt, fill: true, className: "object-cover", sizes: "680px" }) }), _jsx(Text, { className: CLS_SUCCESS_TEXT, children: "\u2713 Image uploaded" })] })), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), placeholder: "DC, Marvel and Anime characters", className: CLS_INPUT, style: {
-                                    borderColor: "var(--border-ink)",
-                                    background: "var(--surface-elevated)",
-                                    color: "var(--color-black)",
-                                } })] }), _jsxs(Label, { layout: "inline-flex", gap: "md", className: "cursor-pointer", size: "sm", weight: "medium", children: [_jsx(Input, { type: "checkbox", checked: active, onChange: (e) => setActive(e.target.checked), className: "h-4 w-4 rounded" }), "Active (show on homepage)"] }), _jsxs(Row, { justify: "end", gap: "sm", className: "border-t", padding: "t-md", style: { borderColor: "var(--border-ink)" }, children: [(initial?.pins?.length ?? 0) > 0 && (_jsx(Button, { type: "button", onClick: () => setStep("review"), variant: "ghost", className: "px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium rounded transition-opacity hover:opacity-70", style: {
-                                    background: "transparent",
-                                    color: "var(--color-black)",
-                                }, children: "Skip to Review" })), _jsx(Button, { type: "button", onClick: () => setStep("place"), disabled: !imageUrl || uploading, variant: "primary", className: "px-[1rem] py-[0.5rem] text-[0.875rem] font-[700] rounded-[0.25rem] transition-opacity disabled:opacity-50", style: {
-                                    background: "var(--color-black)",
-                                    color: "var(--color-yellow)",
-                                }, children: "Next: Place Pins \u2192" })] })] })), step === "place" && (_jsxs(Div, { className: CLS_STEP, style: {
-                    borderColor: "var(--border-ink)",
-                    background: "var(--surface-elevated)",
-                }, children: [_jsx(Heading, { level: 2, size: "lg", weight: "bold", children: "Place a Pin" }), _jsxs(Text, { style: { color: "var(--color-muted)" }, size: "sm", children: [_jsx(Span, { weight: "bold", children: "Click anywhere on the image" }), " to drop a pin, or enter exact coordinates below."] }), _jsxs(Div, { ref: containerRef, className: CLS_IMG_WRAP, style: {
-                            paddingTop: "56.25%",
-                            cursor: "crosshair",
-                            background: "black",
-                        }, onClick: handleImageClick, children: [_jsx(Image, { src: resolveMediaUrl(imageUrl), alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 680px) 100vw" }), pins.map((pin) => (_jsxs(Div, { className: "pointer-events-none absolute", style: {
-                                    left: `${pin.xPct}%`,
-                                    top: `${pin.yPct}%`,
-                                    transform: STY_CENTERED,
-                                    zIndex: 10,
-                                }, children: [_jsx(Row, { textWeight: "bold", textSize: "xs", className: "text-white", align: "center", justify: "center", rounded: "full", style: {
-                                            width: 24,
-                                            height: 24,
-                                            background: pin.accent || DEFAULT_ACCENT_HEX,
-                                            border: "2px solid white",
-                                            boxShadow: "0 1px 4px rgba(0,0,0,0.5)",
-                                        }, children: "+" }), pin.name && (_jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-7 top-1/2 -translate-y-1/2 whitespace-nowrap text-[9px] text-white", rounded: "default", style: { paddingInline: "0.375rem", paddingBlock: "0.125rem", background: "black" }, children: pin.name }))] }, pin.id))), draftPos && (_jsxs(Div, { className: "absolute", style: {
-                                    left: `${draftPos.xPct}%`,
-                                    top: `${draftPos.yPct}%`,
-                                    transform: STY_CENTERED,
-                                    zIndex: 20,
-                                }, children: [_jsx(Span, { className: "absolute animate-ping", rounded: "full", style: {
-                                            inset: -6,
-                                            background: "rgba(255,228,0,0.4)",
-                                            pointerEvents: "none",
-                                        } }), _jsx(Row, { textWeight: "bold", className: "relative", align: "center", justify: "center", rounded: "full", style: {
-                                            width: 32,
-                                            height: 32,
-                                            background: "var(--color-yellow)",
-                                            border: "3px solid var(--color-black)",
-                                            boxShadow: "0 2px 8px rgba(0,0,0,0.55)",
-                                            color: "var(--color-black)",
-                                            fontSize: 18,
-                                        }, children: "\u2605" }), _jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-9 top-1/2 -translate-y-1/2 whitespace-nowrap text-[10px]", padding: "x-xs", rounded: "default", style: { paddingBlock: "0.125rem", background: "var(--color-black)", color: "var(--color-yellow)" }, children: "NEW PIN" })] }))] }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2", children: [
-                            {
-                                label: "X Position (%)",
-                                field: "xPct",
-                                value: draftPos?.xPct ?? "",
-                                onChange: (v) => setDraftPos((prev) => ({
-                                    id: prev?.id ?? randomId(),
-                                    xPct: Math.max(1, Math.min(99, v)),
-                                    yPct: prev?.yPct ?? 50,
-                                })),
-                            },
-                            {
-                                label: "Y Position (%)",
-                                field: "yPct",
-                                value: draftPos?.yPct ?? "",
-                                onChange: (v) => setDraftPos((prev) => ({
-                                    id: prev?.id ?? randomId(),
-                                    xPct: prev?.xPct ?? 50,
-                                    yPct: Math.max(1, Math.min(99, v)),
-                                })),
-                            },
-                        ].map(({ label, field, value, onChange }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: label }), _jsx(Input, { type: "number", min: 1, max: 99, step: 0.1, value: value, placeholder: "e.g. 42.5", onChange: (e) => {
-                                        const v = parseFloat(e.target.value);
-                                        if (!isNaN(v))
-                                            onChange(v);
-                                    }, className: CLS_INPUT, style: {
+                                                : "var(--color-black)",
+                                            border: i <= stepIndex
+                                                ? "2px solid var(--color-black)"
+                                                : STY_BORDER_INK,
+                                        }, children: i < stepIndex ? "✓" : i + 1 }), i < STEPS.length - 1 && (_jsx(Div, { className: "h-0.5 flex-1", style: {
+                                            background: i < stepIndex
+                                                ? "var(--color-black)"
+                                                : "var(--border-ink)",
+                                        } }))] }), _jsx(Span, { weight: "medium", 
+                                // audit-content-alignment-ok: label under a small draggable marker dot, admin editor UI not marketing content
+                                className: "mt-1 text-center text-[10px]", style: { color: "var(--color-muted)" }, children: s.label })] }, s.key))) }), step === "image" && (_jsxs(Div, { className: CLS_STEP, style: {
+                        borderColor: "var(--border-ink)",
+                        background: "var(--surface-elevated)",
+                    }, children: [_jsx(Heading, { level: 2, size: "lg", weight: "bold", children: "Upload Background Image" }), _jsx(Text, { style: { color: "var(--color-muted)" }, size: "sm", children: "Choose a wide panoramic image that shows all the characters. You will place pins on it in the next step." }), _jsxs(Label, { layout: "flex-col-center", gap: "md", rounded: "lg", padding: "xl", className: "cursor-pointer border-2 border-dashed transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Span, { size: "3xl", children: "\uD83D\uDDBC" }), _jsx(Span, { weight: "medium", children: uploading ? "Uploading…" : "Click to choose image" }), _jsx(Span, { size: "xs", style: { color: "var(--color-muted)" }, children: "JPG, PNG, WebP \u2014 wide landscape images work best" }), _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), imageUrl && (_jsxs(Stack, { gap: "xs", children: [_jsx(Div, { className: CLS_IMG_WRAP, style: { paddingTop: "37.5%" }, children: _jsx(Image, { src: resolveMediaUrl(imageUrl), alt: imageAlt, fill: true, className: "object-cover", sizes: "680px" }) }), _jsx(Text, { className: CLS_SUCCESS_TEXT, children: "\u2713 Image uploaded" })] })), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), placeholder: "DC, Marvel and Anime characters", className: CLS_INPUT, style: {
                                         borderColor: "var(--border-ink)",
                                         background: "var(--surface-elevated)",
                                         color: "var(--color-black)",
-                                    } })] }, field))) }), pins.length > 0 && (_jsxs(Text, { style: { color: "var(--color-muted)" }, size: "xs", children: [pins.length, " pin", pins.length !== 1 ? "s" : "", " already placed on this image."] })), _jsxs(Row, { justify: "between", className: "border-t", padding: "t-md", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => setStep("image"), variant: "ghost", className: "px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium rounded transition-opacity hover:opacity-70", style: { background: "transparent", color: "var(--color-black)" }, children: "\u2190 Back" }), _jsxs(Row, { gap: "sm", children: [pins.length > 0 && (_jsx(Button, { type: "button", onClick: () => setStep("review"), variant: "outline", className: "px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-bold rounded transition-opacity", style: {
-                                            background: "var(--surface-warm)",
+                                    } })] }), _jsxs(Label, { layout: "inline-flex", gap: "md", className: "cursor-pointer", size: "sm", weight: "medium", children: [_jsx(Input, { type: "checkbox", checked: active, onChange: (e) => setActive(e.target.checked), className: "h-4 w-4 rounded" }), "Active (show on homepage)"] }), _jsxs(Row, { justify: "end", gap: "sm", className: "border-t", padding: "t-md", style: { borderColor: "var(--border-ink)" }, children: [(initial?.pins?.length ?? 0) > 0 && (_jsx(Button, { type: "button", onClick: () => setStep("review"), variant: "ghost", className: "px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium rounded transition-opacity hover:opacity-70", style: {
+                                        background: "transparent",
+                                        color: "var(--color-black)",
+                                    }, children: "Skip to Review" })), _jsx(Button, { type: "button", onClick: () => setStep("place"), disabled: !imageUrl || uploading, variant: "primary", className: "px-[1rem] py-[0.5rem] text-[0.875rem] font-[700] rounded-[0.25rem] transition-opacity disabled:opacity-50", style: {
+                                        background: "var(--color-black)",
+                                        color: "var(--color-yellow)",
+                                    }, children: "Next: Place Pins \u2192" })] })] })), step === "place" && (_jsxs(Div, { className: CLS_STEP, style: {
+                        borderColor: "var(--border-ink)",
+                        background: "var(--surface-elevated)",
+                    }, children: [_jsx(Heading, { level: 2, size: "lg", weight: "bold", children: "Place a Pin" }), _jsxs(Text, { style: { color: "var(--color-muted)" }, size: "sm", children: [_jsx(Span, { weight: "bold", children: "Click anywhere on the image" }), " to drop a pin, or enter exact coordinates below."] }), _jsxs(Div, { ref: containerRef, className: CLS_IMG_WRAP, style: {
+                                paddingTop: "56.25%",
+                                cursor: "crosshair",
+                                background: "black",
+                            }, onClick: handleImageClick, children: [_jsx(Image, { src: resolveMediaUrl(imageUrl), alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 680px) 100vw" }), pins.map((pin) => (_jsxs(Div, { className: "pointer-events-none absolute", style: {
+                                        left: `${pin.xPct}%`,
+                                        top: `${pin.yPct}%`,
+                                        transform: STY_CENTERED,
+                                        zIndex: 10,
+                                    }, children: [_jsx(Row, { textWeight: "bold", textSize: "xs", className: "text-white", align: "center", justify: "center", rounded: "full", style: {
+                                                width: 24,
+                                                height: 24,
+                                                background: pin.accent || DEFAULT_ACCENT_HEX,
+                                                border: "2px solid white",
+                                                boxShadow: "0 1px 4px rgba(0,0,0,0.5)",
+                                            }, children: "+" }), pin.name && (_jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-7 top-1/2 -translate-y-1/2 whitespace-nowrap text-[9px] text-white", rounded: "default", style: { paddingInline: "0.375rem", paddingBlock: "0.125rem", background: "black" }, children: pin.name }))] }, pin.id))), draftPos && (_jsxs(Div, { className: "absolute", style: {
+                                        left: `${draftPos.xPct}%`,
+                                        top: `${draftPos.yPct}%`,
+                                        transform: STY_CENTERED,
+                                        zIndex: 20,
+                                    }, children: [_jsx(Span, { className: "absolute animate-ping", rounded: "full", style: {
+                                                inset: -6,
+                                                background: "rgba(255,228,0,0.4)",
+                                                pointerEvents: "none",
+                                            } }), _jsx(Row, { textWeight: "bold", className: "relative", align: "center", justify: "center", rounded: "full", style: {
+                                                width: 32,
+                                                height: 32,
+                                                background: "var(--color-yellow)",
+                                                border: "3px solid var(--color-black)",
+                                                boxShadow: "0 2px 8px rgba(0,0,0,0.55)",
+                                                color: "var(--color-black)",
+                                                fontSize: 18,
+                                            }, children: "\u2605" }), _jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-9 top-1/2 -translate-y-1/2 whitespace-nowrap text-[10px]", padding: "x-xs", rounded: "default", style: { paddingBlock: "0.125rem", background: "var(--color-black)", color: "var(--color-yellow)" }, children: "NEW PIN" })] }))] }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2", children: [
+                                {
+                                    label: "X Position (%)",
+                                    field: "xPct",
+                                    value: draftPos?.xPct ?? "",
+                                    onChange: (v) => setDraftPos((prev) => ({
+                                        id: prev?.id ?? randomId(),
+                                        xPct: Math.max(1, Math.min(99, v)),
+                                        yPct: prev?.yPct ?? 50,
+                                    })),
+                                },
+                                {
+                                    label: "Y Position (%)",
+                                    field: "yPct",
+                                    value: draftPos?.yPct ?? "",
+                                    onChange: (v) => setDraftPos((prev) => ({
+                                        id: prev?.id ?? randomId(),
+                                        xPct: prev?.xPct ?? 50,
+                                        yPct: Math.max(1, Math.min(99, v)),
+                                    })),
+                                },
+                            ].map(({ label, field, value, onChange }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: label }), _jsx(Input, { type: "number", min: 1, max: 99, step: 0.1, value: value, placeholder: "e.g. 42.5", onChange: (e) => {
+                                            const v = parseFloat(e.target.value);
+                                            if (!isNaN(v))
+                                                onChange(v);
+                                        }, className: CLS_INPUT, style: {
+                                            borderColor: "var(--border-ink)",
+                                            background: "var(--surface-elevated)",
                                             color: "var(--color-black)",
-                                            border: STY_BORDER_INK,
-                                        }, children: "Done Adding Pins" })), _jsx(Button, { type: "button", onClick: () => setStep("details"), disabled: !draftPos, variant: "primary", className: "px-[1rem] py-[0.5rem] text-[0.875rem] font-[700] rounded-[0.25rem] transition-opacity disabled:opacity-50", style: {
-                                            background: "var(--color-black)",
-                                            color: "var(--color-yellow)",
-                                        }, children: "Continue: Add Details \u2192" })] })] })] })), step === "details" && (_jsxs(Div, { className: CLS_STEP, style: {
-                    borderColor: "var(--border-ink)",
-                    background: "var(--surface-elevated)",
-                }, children: [_jsx(Heading, { level: 2, size: "lg", weight: "bold", children: "Pin Details" }), _jsxs(Text, { style: { color: "var(--color-muted)" }, size: "sm", children: ["Fill in the details for the pin at", " ", _jsxs(Span, { weight: "bold", children: [draftPos?.xPct, "%, ", draftPos?.yPct, "%"] }), "."] }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2", children: [
-                            {
-                                label: "Name *",
-                                value: draftName,
-                                onChange: setDraftName,
-                                placeholder: "SPIDER-MAN",
-                            },
-                            {
-                                label: "Universe / Category *",
-                                value: draftUniverse,
-                                onChange: setDraftUniverse,
-                                placeholder: "Marvel",
-                            },
-                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: CLS_INPUT, style: {
+                                        } })] }, field))) }), pins.length > 0 && (_jsxs(Text, { style: { color: "var(--color-muted)" }, size: "xs", children: [pins.length, " pin", pins.length !== 1 ? "s" : "", " already placed on this image."] })), _jsxs(Row, { justify: "between", className: "border-t", padding: "t-md", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => setStep("image"), variant: "ghost", className: "px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium rounded transition-opacity hover:opacity-70", style: { background: "transparent", color: "var(--color-black)" }, children: "\u2190 Back" }), _jsxs(Row, { gap: "sm", children: [pins.length > 0 && (_jsx(Button, { type: "button", onClick: () => setStep("review"), variant: "outline", className: "px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-bold rounded transition-opacity", style: {
+                                                background: "var(--surface-warm)",
+                                                color: "var(--color-black)",
+                                                border: STY_BORDER_INK,
+                                            }, children: "Done Adding Pins" })), _jsx(Button, { type: "button", onClick: () => setStep("details"), disabled: !draftPos, variant: "primary", className: "px-[1rem] py-[0.5rem] text-[0.875rem] font-[700] rounded-[0.25rem] transition-opacity disabled:opacity-50", style: {
+                                                background: "var(--color-black)",
+                                                color: "var(--color-yellow)",
+                                            }, children: "Continue: Add Details \u2192" })] })] })] })), step === "details" && (_jsxs(Div, { className: CLS_STEP, style: {
+                        borderColor: "var(--border-ink)",
+                        background: "var(--surface-elevated)",
+                    }, children: [_jsx(Heading, { level: 2, size: "lg", weight: "bold", children: "Pin Details" }), _jsxs(Text, { style: { color: "var(--color-muted)" }, size: "sm", children: ["Fill in the details for the pin at", " ", _jsxs(Span, { weight: "bold", children: [draftPos?.xPct, "%, ", draftPos?.yPct, "%"] }), "."] }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2", children: [
+                                {
+                                    label: "Name *",
+                                    value: draftName,
+                                    onChange: setDraftName,
+                                    placeholder: "SPIDER-MAN",
+                                },
+                                {
+                                    label: "Universe / Category *",
+                                    value: draftUniverse,
+                                    onChange: setDraftUniverse,
+                                    placeholder: "Marvel",
+                                },
+                            ].map(({ label, value, onChange, placeholder }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: CLS_INPUT, style: {
+                                            borderColor: "var(--border-ink)",
+                                            background: "var(--surface-elevated)",
+                                            color: "var(--color-black)",
+                                        } })] }, label))) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Description *" }), _jsx(Textarea, { rows: 3, value: draftDescription, onChange: (e) => setDraftDescription(e.target.value), className: "resize-none rounded border-2 px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] outline-none", style: {
                                         borderColor: "var(--border-ink)",
                                         background: "var(--surface-elevated)",
                                         color: "var(--color-black)",
-                                    } })] }, label))) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Description *" }), _jsx(Textarea, { rows: 3, value: draftDescription, onChange: (e) => setDraftDescription(e.target.value), className: "resize-none rounded border-2 px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] outline-none", style: {
-                                    borderColor: "var(--border-ink)",
-                                    background: "var(--surface-elevated)",
-                                    color: "var(--color-black)",
-                                }, placeholder: "Short description shown in the popup\u2026" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Link (href) *" }), _jsx(Input, { type: "text", value: draftHref, onChange: (e) => setDraftHref(e.target.value), placeholder: "/franchise/marvel", className: CLS_INPUT, style: {
-                                    borderColor: "var(--border-ink)",
-                                    background: "var(--surface-elevated)",
-                                    color: "var(--color-black)",
-                                } })] }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2", children: [
-                            {
-                                label: "Button Text *",
-                                value: draftBuyText,
-                                onChange: setDraftBuyText,
-                                placeholder: "Get Spider-Man Figures",
-                            },
-                            {
-                                label: "Badge Label",
-                                value: draftBadge,
-                                onChange: setDraftBadge,
-                                placeholder: "MARVEL",
-                            },
-                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: CLS_INPUT, style: {
+                                    }, placeholder: "Short description shown in the popup\u2026" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Link (href) *" }), _jsx(Input, { type: "text", value: draftHref, onChange: (e) => setDraftHref(e.target.value), placeholder: "/franchise/marvel", className: CLS_INPUT, style: {
                                         borderColor: "var(--border-ink)",
                                         background: "var(--surface-elevated)",
                                         color: "var(--color-black)",
-                                    } })] }, label))) }), _jsxs(Row, { align: "end", gap: "sm", children: [_jsxs(Stack, { className: "flex-1", gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Accent Colour (hex)" }), _jsx(Input, { type: "text", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), placeholder: DEFAULT_ACCENT_HEX, className: CLS_INPUT, style: {
+                                    } })] }), _jsx(Div, { layout: "grid", gap: "3", className: "grid-cols-2", children: [
+                                {
+                                    label: "Button Text *",
+                                    value: draftBuyText,
+                                    onChange: setDraftBuyText,
+                                    placeholder: "Get Spider-Man Figures",
+                                },
+                                {
+                                    label: "Badge Label",
+                                    value: draftBadge,
+                                    onChange: setDraftBadge,
+                                    placeholder: "MARVEL",
+                                },
+                            ].map(({ label, value, onChange, placeholder }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: CLS_INPUT, style: {
                                             borderColor: "var(--border-ink)",
                                             background: "var(--surface-elevated)",
                                             color: "var(--color-black)",
-                                        } })] }), _jsx(Input, { type: "color", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), className: "mb-0.5 h-10 w-10 cursor-pointer rounded border-2", style: { borderColor: "var(--border-ink)" }, title: "Pick colour" })] }), _jsxs(Row, { justify: "between", className: "border-t", padding: "t-md", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => setStep("place"), variant: "ghost", className: "px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium rounded transition-opacity hover:opacity-70", style: { background: "transparent", color: "var(--color-black)" }, children: "\u2190 Back" }), _jsxs(Row, { gap: "sm", children: [_jsx(Button, { type: "button", disabled: !draftName || !draftHref, onClick: () => {
-                                            commitDraftPin();
-                                            setStep("review");
-                                        }, variant: "outline", className: "px-[1rem] py-[0.5rem] text-[0.875rem] font-[700] rounded-[0.25rem] transition-opacity disabled:opacity-50", style: {
-                                            background: "var(--surface-warm)",
-                                            color: "var(--color-black)",
-                                            border: STY_BORDER_INK,
-                                        }, children: "Save Pin & Finish" }), _jsx(Button, { type: "button", disabled: !draftName || !draftHref, onClick: () => {
-                                            commitDraftPin();
-                                            setStep("place");
-                                        }, variant: "primary", className: "px-[1rem] py-[0.5rem] text-[0.875rem] font-[700] rounded-[0.25rem] transition-opacity disabled:opacity-50", style: {
-                                            background: "var(--color-black)",
-                                            color: "var(--color-yellow)",
-                                        }, children: "Save Pin & Add Another \u2192" })] })] })] })), step === "review" && (_jsxs(Div, { className: CLS_STEP, style: {
-                    borderColor: "var(--border-ink)",
-                    background: "var(--surface-elevated)",
-                }, children: [_jsxs(Row, { justify: "between", children: [_jsx(Heading, { level: 2, size: "lg", weight: "bold", children: "Review & Save" }), _jsxs(Span, { rounded: "full", padding: "pill-md", size: "sm", weight: "bold", style: { background: "var(--surface-warm)" }, children: [pins.length, " pin", pins.length !== 1 ? "s" : ""] })] }), _jsxs(Div, { className: CLS_IMG_WRAP, style: { paddingTop: "56.25%", background: "black" }, children: [_jsx(Image, { src: resolveMediaUrl(imageUrl), alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 680px) 100vw" }), pins.map((pin) => (_jsxs(Div, { className: "pointer-events-none absolute", style: {
-                                    left: `${pin.xPct}%`,
-                                    top: `${pin.yPct}%`,
-                                    transform: STY_CENTERED,
-                                    zIndex: 10,
-                                }, children: [_jsx(Row, { textWeight: "bold", textSize: "xs", className: "text-white", align: "center", justify: "center", rounded: "full", style: {
-                                            width: 28,
-                                            height: 28,
-                                            background: pin.accent || DEFAULT_ACCENT_HEX,
-                                            border: "2px solid white",
-                                            boxShadow: "0 2px 6px rgba(0,0,0,0.55)",
-                                        }, children: "+" }), pin.name && (_jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-8 top-1/2 -translate-y-1/2 whitespace-nowrap text-[9px] text-white", rounded: "default", style: { paddingInline: "0.375rem", paddingBlock: "0.125rem", background: "black" }, children: pin.name }))] }, pin.id)))] }), pins.length > 0 ? (_jsx(Ul, { rounded: "lg", className: "divide-y border", style: { borderColor: "var(--border-ink)" }, children: pins.map((pin, i) => (_jsx(Li, { padding: "inline", children: _jsxs(Row, { gap: "sm", children: [_jsx(Span, { layout: "flex-center", color: "inverse", className: "h-6 w-6 shrink-0", rounded: "full", size: "xs", weight: "bold", style: { background: pin.accent || DEFAULT_ACCENT_HEX }, children: i + 1 }), _jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "truncate", size: "sm", weight: "bold", children: pin.name || (_jsx(Span, { className: "italic", style: { color: "var(--color-muted)" }, children: "Unnamed" })) }), _jsxs(Text, { style: { color: "var(--color-muted)" }, size: "xs", children: [pin.universe, " \u00B7 ", pin.xPct.toFixed(0), "%,", " ", pin.yPct.toFixed(0), "%"] })] }), _jsx(Button, { type: "button", onClick: () => deletePin(pin.id), variant: "ghost", className: CLS_DELETE_PIN, title: "Remove pin", children: "\u2715" })] }) }, pin.id))) })) : (_jsx(Div, { textSize: "sm", className: "border-2 border-dashed text-left", rounded: "lg", padding: "xl", style: {
-                            borderColor: "var(--border-ink)",
-                            color: "var(--color-muted)",
-                        }, children: "No pins yet \u2014 add some using the button below." })), _jsxs(Details, { rounded: "lg", padding: "md", className: "border", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Summary, { size: "sm", weight: "medium", children: "Image Settings" }), _jsxs(Stack, { className: "mt-3", gap: "3", children: [_jsxs(Label, { layout: "inline-flex", gap: "md", rounded: "default", padding: "toolbar", className: "cursor-pointer border-2 border-dashed transition-colors hover:opacity-80", size: "sm", weight: "medium", style: { borderColor: "var(--border-ink)" }, children: [uploading ? "Uploading…" : "Replace Image", _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), className: CLS_INPUT, style: {
-                                                    borderColor: "var(--border-ink)",
-                                                    background: "var(--surface-elevated)",
-                                                    color: "var(--color-black)",
-                                                } })] }), _jsxs(Label, { layout: "inline-flex", gap: "md", className: "cursor-pointer", size: "sm", weight: "medium", children: [_jsx(Input, { type: "checkbox", checked: active, onChange: (e) => setActive(e.target.checked), className: "h-4 w-4 rounded" }), "Active (show on homepage)"] })] })] }), _jsxs(Row, { justify: "between", className: "border-t", padding: "t-md", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => {
-                                    setDraftPos(null);
-                                    setStep("place");
-                                }, variant: "outline", className: "px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-bold rounded transition-opacity", style: {
-                                    background: "var(--surface-warm)",
-                                    color: "var(--color-black)",
-                                    border: STY_BORDER_INK,
-                                }, children: "+ Add Another Pin" }), _jsx(Button, { type: "button", onClick: handleSave, disabled: !imageUrl || saving || pins.length === 0, rounded: "default", variant: "primary", className: "px-[1rem] py-[0.5rem] text-[0.875rem] font-[700] transition-opacity disabled:opacity-50", style: {
-                                    background: "var(--color-black)",
-                                    color: "var(--color-yellow)",
-                                }, children: saving ? "Saving…" : "Save to Database" })] })] }))] }));
+                                        } })] }, label))) }), _jsxs(Row, { align: "end", gap: "sm", children: [_jsxs(Stack, { className: "flex-1", gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Accent Colour (hex)" }), _jsx(Input, { type: "text", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), placeholder: DEFAULT_ACCENT_HEX, className: CLS_INPUT, style: {
+                                                borderColor: "var(--border-ink)",
+                                                background: "var(--surface-elevated)",
+                                                color: "var(--color-black)",
+                                            } })] }), _jsx(Input, { type: "color", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), className: "mb-0.5 h-10 w-10 cursor-pointer rounded border-2", style: { borderColor: "var(--border-ink)" }, title: "Pick colour" })] }), _jsx(FormErrorSummary, {}), _jsxs(Row, { justify: "between", className: "border-t", padding: "t-md", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => setStep("place"), variant: "ghost", className: "px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-medium rounded transition-opacity hover:opacity-70", style: { background: "transparent", color: "var(--color-black)" }, children: "\u2190 Back" }), _jsxs(Row, { gap: "sm", children: [_jsx(Button, { type: "button", disabled: !draftName || !draftHref, onClick: () => {
+                                                commitDraftPin();
+                                                setStep("review");
+                                            }, variant: "outline", className: "px-[1rem] py-[0.5rem] text-[0.875rem] font-[700] rounded-[0.25rem] transition-opacity disabled:opacity-50", style: {
+                                                background: "var(--surface-warm)",
+                                                color: "var(--color-black)",
+                                                border: STY_BORDER_INK,
+                                            }, children: "Save Pin & Finish" }), _jsx(Button, { type: "button", disabled: !draftName || !draftHref, onClick: () => {
+                                                commitDraftPin();
+                                                setStep("place");
+                                            }, variant: "primary", className: "px-[1rem] py-[0.5rem] text-[0.875rem] font-[700] rounded-[0.25rem] transition-opacity disabled:opacity-50", style: {
+                                                background: "var(--color-black)",
+                                                color: "var(--color-yellow)",
+                                            }, children: "Save Pin & Add Another \u2192" })] })] })] })), step === "review" && (_jsxs(Div, { className: CLS_STEP, style: {
+                        borderColor: "var(--border-ink)",
+                        background: "var(--surface-elevated)",
+                    }, children: [_jsxs(Row, { justify: "between", children: [_jsx(Heading, { level: 2, size: "lg", weight: "bold", children: "Review & Save" }), _jsxs(Span, { rounded: "full", padding: "pill-md", size: "sm", weight: "bold", style: { background: "var(--surface-warm)" }, children: [pins.length, " pin", pins.length !== 1 ? "s" : ""] })] }), _jsxs(Div, { className: CLS_IMG_WRAP, style: { paddingTop: "56.25%", background: "black" }, children: [_jsx(Image, { src: resolveMediaUrl(imageUrl), alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 680px) 100vw" }), pins.map((pin) => (_jsxs(Div, { className: "pointer-events-none absolute", style: {
+                                        left: `${pin.xPct}%`,
+                                        top: `${pin.yPct}%`,
+                                        transform: STY_CENTERED,
+                                        zIndex: 10,
+                                    }, children: [_jsx(Row, { textWeight: "bold", textSize: "xs", className: "text-white", align: "center", justify: "center", rounded: "full", style: {
+                                                width: 28,
+                                                height: 28,
+                                                background: pin.accent || DEFAULT_ACCENT_HEX,
+                                                border: "2px solid white",
+                                                boxShadow: "0 2px 6px rgba(0,0,0,0.55)",
+                                            }, children: "+" }), pin.name && (_jsx(Div, { textWeight: "bold", className: "pointer-events-none absolute left-8 top-1/2 -translate-y-1/2 whitespace-nowrap text-[9px] text-white", rounded: "default", style: { paddingInline: "0.375rem", paddingBlock: "0.125rem", background: "black" }, children: pin.name }))] }, pin.id)))] }), pins.length > 0 ? (_jsx(Ul, { rounded: "lg", className: "divide-y border", style: { borderColor: "var(--border-ink)" }, children: pins.map((pin, i) => (_jsx(Li, { padding: "inline", children: _jsxs(Row, { gap: "sm", children: [_jsx(Span, { layout: "flex-center", color: "inverse", className: "h-6 w-6 shrink-0", rounded: "full", size: "xs", weight: "bold", style: { background: pin.accent || DEFAULT_ACCENT_HEX }, children: i + 1 }), _jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "truncate", size: "sm", weight: "bold", children: pin.name || (_jsx(Span, { className: "italic", style: { color: "var(--color-muted)" }, children: "Unnamed" })) }), _jsxs(Text, { style: { color: "var(--color-muted)" }, size: "xs", children: [pin.universe, " \u00B7 ", pin.xPct.toFixed(0), "%,", " ", pin.yPct.toFixed(0), "%"] })] }), _jsx(Button, { type: "button", onClick: () => deletePin(pin.id), variant: "ghost", className: CLS_DELETE_PIN, title: "Remove pin", children: "\u2715" })] }) }, pin.id))) })) : (_jsx(Div, { textSize: "sm", className: "border-2 border-dashed text-left", rounded: "lg", padding: "xl", style: {
+                                borderColor: "var(--border-ink)",
+                                color: "var(--color-muted)",
+                            }, children: "No pins yet \u2014 add some using the button below." })), _jsxs(Details, { rounded: "lg", padding: "md", className: "border", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Summary, { size: "sm", weight: "medium", children: "Image Settings" }), _jsxs(Stack, { className: "mt-3", gap: "3", children: [_jsxs(Label, { layout: "inline-flex", gap: "md", rounded: "default", padding: "toolbar", className: "cursor-pointer border-2 border-dashed transition-colors hover:opacity-80", size: "sm", weight: "medium", style: { borderColor: "var(--border-ink)" }, children: [uploading ? "Uploading…" : "Replace Image", _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), className: CLS_INPUT, style: {
+                                                        borderColor: "var(--border-ink)",
+                                                        background: "var(--surface-elevated)",
+                                                        color: "var(--color-black)",
+                                                    } })] }), _jsxs(Label, { layout: "inline-flex", gap: "md", className: "cursor-pointer", size: "sm", weight: "medium", children: [_jsx(Input, { type: "checkbox", checked: active, onChange: (e) => setActive(e.target.checked), className: "h-4 w-4 rounded" }), "Active (show on homepage)"] })] })] }), _jsxs(Row, { justify: "between", className: "border-t", padding: "t-md", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => {
+                                        setDraftPos(null);
+                                        setStep("place");
+                                    }, variant: "outline", className: "px-[var(--appkit-space-4)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] font-bold rounded transition-opacity", style: {
+                                        background: "var(--surface-warm)",
+                                        color: "var(--color-black)",
+                                        border: STY_BORDER_INK,
+                                    }, children: "+ Add Another Pin" }), _jsx(Button, { type: "button", onClick: handleSave, disabled: !imageUrl || saving || pins.length === 0, rounded: "default", variant: "primary", className: "px-[1rem] py-[0.5rem] text-[0.875rem] font-[700] transition-opacity disabled:opacity-50", style: {
+                                        background: "var(--color-black)",
+                                        color: "var(--color-yellow)",
+                                    }, children: saving ? "Saving…" : "Save to Database" })] })] }))] }) }));
 }

package/dist/features/homepage/components/SectionCarousel.d.ts

@@ -62,16 +62,10 @@ export interface SectionCarouselProps<T = unknown> {
      * Defaults to `true` when `backgroundImage` is provided, `false` otherwise.
      */
     lightText?: boolean;
-    /**
-     * When `true`, adds a negative right margin to the scroller wrapper so the
-     * last visible item peeks at the edge.
-     * Default: false
-     */
-    showPeek?: boolean;
     /**
      * Minimum item width in px.
      * Default: 220
      */
     minItemWidth?: number;
 }
-export declare function SectionCarousel<T = unknown>({ title, description, headingVariant, pillLabel, backgroundImage, viewMoreHref, viewMoreLabel, items, renderItem, perView, gap, autoScroll, autoScrollInterval, loop, keyExtractor, rows, className, isLoading, skeletonCount, lightText, showPeek: _showPeek, minItemWidth, }: SectionCarouselProps<T>): React.JSX.Element | null;
+export declare function SectionCarousel<T = unknown>({ title, description, headingVariant, pillLabel, backgroundImage, viewMoreHref, viewMoreLabel, items, renderItem, perView, gap, autoScroll, autoScrollInterval, loop, keyExtractor, rows, className, isLoading, skeletonCount, lightText, minItemWidth, }: SectionCarouselProps<T>): React.JSX.Element | null;

package/dist/features/homepage/components/SectionCarousel.js

@@ -14,7 +14,7 @@ function CarouselSkeleton({ count }) {
     return (_jsx(Div, { layout: "flex", gap: "4", className: `${__O.hidden}`, padding: "x-md", children: Array.from({ length: count }).map((_, i) => (_jsxs(Stack, { className: "flex-none min-w-[clamp(150px,18vw,260px)] max-w-[clamp(240px,36vw,380px)] h-[clamp(180px,26vh,260px)]", gap: "sm", children: [_jsx(Div, { className: `aspect-square ${skeleton.image}`, rounded: "xl" }), _jsx(Div, { className: `${skeleton.text} w-3/4` }), _jsx(Div, { className: `${skeleton.text} w-1/2` })] }, i))) }));
 }
 // --- Component ---------------------------------------------------------------
-export function SectionCarousel({ title, description, headingVariant = "editorial", pillLabel, backgroundImage, viewMoreHref, viewMoreLabel = "View all →", items, renderItem, perView = CAROUSEL_PER_VIEW.standard, gap = 16, autoScroll = false, autoScrollInterval = 3500, loop = true, keyExtractor, rows = 1, className = "", isLoading = false, skeletonCount = 4, lightText, showPeek: _showPeek = false, minItemWidth = 220, }) {
+export function SectionCarousel({ title, description, headingVariant = "editorial", pillLabel, backgroundImage, viewMoreHref, viewMoreLabel = "View all →", items, renderItem, perView = CAROUSEL_PER_VIEW.standard, gap = 16, autoScroll = false, autoScrollInterval = 3500, loop = true, keyExtractor, rows = 1, className = "", isLoading = false, skeletonCount = 4, lightText, minItemWidth = 220, }) {
     const { hand } = useHandMode();
     if (!isLoading && items.length === 0)
         return null;

package/dist/features/layout/TitleBarLayout.d.ts

@@ -66,4 +66,4 @@ export interface TitleBarLayoutProps {
  *
  * Receives all domain data as props — zero domain imports.
  */
-export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen: _searchOpen, brandName, brandShortName: _brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, unreadNotificationCount, notificationsHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot: _navSlot, promoStripText, isDark, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): React.JSX.Element;
+export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, unreadNotificationCount, notificationsHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): React.JSX.Element;

package/dist/features/layout/TitleBarLayout.js

@@ -14,7 +14,7 @@ const countBadge = "absolute -top-0.5 -right-0.5 flex items-center justify-cente
  *
  * Receives all domain data as props — zero domain imports.
  */
-export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen: _searchOpen, brandName, brandShortName: _brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, unreadNotificationCount = 0, notificationsHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot: _navSlot, promoStripText, isDark = false, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
+export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, unreadNotificationCount = 0, notificationsHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
     // ── Element builders ────────────────────────────────────────────────────────
     const promotionsEl = promotionsHref ? (_jsxs(Link, { href: promotionsHref, "aria-label": "Today's deals", className: "flex items-center gap-[var(--appkit-space-1)] px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] rounded-full text-[length:var(--appkit-text-xs)] font-bold bg-primary-100 text-primary-700 dark:bg-secondary-900/40 dark:text-secondary-400 hover:bg-primary-200 dark:hover:bg-secondary-900/60 transition-colors border border-primary-200/60 dark:border-secondary-700/40", children: [_jsx("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.37.86.58 1.41.58.55 0 1.05-.21 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z" }) }), _jsx(Span, { className: "hidden sm:inline", children: "Today's Deals" })] })) : null;
     const themeBtn = onToggleTheme ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", onClick: onToggleTheme, className: iconBtn, children: isDark ? (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m8.66-9h-1M4.34 12h-1m15.07-6.07-.71.71M6.34 17.66l-.71.71m12.73 0-.71-.71M6.34 6.34l-.71-.71M12 5a7 7 0 1 0 0 14A7 7 0 0 0 12 5z" }) })) : (_jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79z" }) })) })) : null;
@@ -22,7 +22,7 @@ export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, s
     const hamburgerBtn = !hideSidebarToggle ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": sidebarOpen ? "Close menu" : hasDashboardNav ? "Open dashboard navigation" : "Open menu", "aria-expanded": sidebarOpen, "aria-controls": "secondary-sidebar", onClick: hasDashboardNav && onToggleDashboardNav ? onToggleDashboardNav : onToggleSidebar, className: iconBtn, children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: sidebarOpen ? (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" })) : (_jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" })) }) })) : null;
     // Compare is always lg+ (desktop-only feature, less critical on mobile)
     const compareEl = compareHref ? (_jsx(Link, { href: compareHref, "aria-label": "Compare items", className: `${iconBtn} hidden lg:flex`, children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" }) }) })) : null;
-    const searchBtn = (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Search", onClick: onSearchToggle, className: iconBtn, "data-tour": "nav-search", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" }) }) }));
+    const searchBtn = (_jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": "Search", "aria-pressed": searchOpen, onClick: onSearchToggle, className: iconBtn, "data-tour": "nav-search", children: _jsx("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-4.35-4.35M17 11A6 6 0 1 1 5 11a6 6 0 0 1 12 0z" }) }) }));
     // Dedicated notification bell — rendered immediately before the wishlist
     // icon (per layout request). Falls back to invisible when no href is set;
     // the count badge mirrors the wishlist/cart pattern.
@@ -33,7 +33,7 @@ export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, s
     const authButtonsEl = !user && (loginHref || registerHref) ? (_jsxs(Row, { gap: "xs", className: "hidden lg:flex", children: [loginHref && (_jsx(Link, { href: loginHref, className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] hover:text-primary-700 dark:hover:text-secondary-400 transition-colors rounded-lg hover:bg-primary-50 dark:hover:bg-[var(--appkit-color-surface-elevated)]", children: "Sign in" })), registerHref && (_jsx(Link, { href: registerHref, className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-semibold rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors btn-glow shadow-sm", children: "Register" }))] })) : null;
     const hasTb2 = !!(notificationsEl || wishlistEl || cartEl || profileEl);
     // ── Render ───────────────────────────────────────────────────────────────────
-    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-[var(--appkit-color-bg)]/95 backdrop-blur-md border-b border-[var(--appkit-color-border-subtle)] shadow-sm ${className}`, children: [promoStripText && (_jsx(Section, { color: "inverse", tone: "accent-banner", className: "text-[length:var(--appkit-text-xs)] text-center font-medium", padding: "y-2xs", children: promoStripText })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: [_jsxs(Row, { justify: "between", gap: "none", className: "relative h-14", children: [_jsx(Row, { gap: "3", children: _jsxs(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center gap-[var(--appkit-space-2)] transition-opacity hover:opacity-80", children: [_jsx(Div, { className: "flex md:hidden", children: _jsx(SiteMark, { title: brandName, size: "sm" }) }), _jsx(SiteLogo, { title: brandName, size: "md" })] }) }), _jsx(Row, { className: "hidden md:flex absolute inset-y-0 left-1/2 -translate-x-1/2", align: "center", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteMark, { src: siteLogoUrl, title: brandName, size: "lg" }) }) }), _jsxs(Row, { gap: "xs", children: [devSlot, compareEl, notificationSlot, notificationsEl && _jsx(Div, { className: "hidden lg:flex", children: notificationsEl }), wishlistEl && _jsx(Div, { className: "hidden lg:flex", children: wishlistEl }), cartEl && _jsx(Div, { className: "hidden lg:flex", children: cartEl }), user
+    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-[var(--appkit-color-bg)]/95 backdrop-blur-md border-b border-[var(--appkit-color-border-subtle)] shadow-sm ${className}`, children: [promoStripText && (_jsx(Section, { color: "inverse", tone: "accent-banner", className: "text-[length:var(--appkit-text-xs)] text-center font-medium", padding: "y-2xs", children: promoStripText })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: [_jsxs(Row, { justify: "between", gap: "none", className: "relative h-14", children: [_jsx(Row, { gap: "3", children: _jsxs(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center gap-[var(--appkit-space-2)] transition-opacity hover:opacity-80", children: [_jsx(Div, { className: "flex md:hidden", children: _jsx(SiteMark, { title: brandShortName ?? brandName, size: "sm" }) }), _jsx(SiteLogo, { title: brandName, size: "md" })] }) }), _jsx(Row, { className: "hidden md:flex absolute inset-y-0 left-1/2 -translate-x-1/2", align: "center", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteMark, { src: siteLogoUrl, title: brandName, size: "lg" }) }) }), _jsxs(Row, { gap: "xs", children: [devSlot, navSlot, compareEl, notificationSlot, notificationsEl && _jsx(Div, { className: "hidden lg:flex", children: notificationsEl }), wishlistEl && _jsx(Div, { className: "hidden lg:flex", children: wishlistEl }), cartEl && _jsx(Div, { className: "hidden lg:flex", children: cartEl }), user
                                         ? profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })
                                         : authButtonsEl ?? (profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })), searchBtn, promotionsEl, tourBtn, themeBtn, hamburgerBtn] })] }), hasTb2 && (_jsxs(Row, { border: "subtle", as: "nav", "aria-label": "Account actions", justify: "end", gap: "xs", className: "flex lg:hidden h-10 border-t px-[var(--appkit-space-1)]", children: [notificationsEl, wishlistEl, cartEl, profileEl] }))] })] }));
 }