@mohasinac/appkit 2.7.27 → 2.7.30

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

@@ -6,6 +6,11 @@ import { Button, Div, Heading, Input, Label, Li, Row, Span, Text, Textarea, Ul,
 function randomId() {
     return Math.random().toString(36).slice(2, 9);
 }
+const CLS_STEP = "space-y-4 rounded-lg border-2 p-6";
+const CLS_IMG_WRAP = "relative w-full overflow-hidden rounded-lg";
+const CLS_INPUT = "rounded border-2 px-3 py-2 text-sm outline-none";
+const STY_BORDER_INK = "2px solid var(--border-ink)";
+const STY_CENTERED = "translate(-50%, -50%)";
 export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSave, }) {
     const [imageUrl, setImageUrl] = useState(initial?.imageUrl ?? "");
     const [imageAlt, setImageAlt] = useState(initial?.imageAlt ?? "DC, Marvel and Anime characters");
@@ -120,15 +125,15 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                             : "var(--color-black)",
                                         border: i <= stepIndex
                                             ? "2px solid var(--color-black)"
-                                            : "2px solid var(--border-ink)",
+                                            : 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, { className: "mt-1 text-center text-[10px] font-medium", style: { color: "var(--color-muted)" }, children: s.label })] }, s.key))) }), step === "image" && (_jsxs(Div, { className: "space-y-4 rounded-lg border-2 p-6", style: {
+                                    } }))] }), _jsx(Span, { className: "mt-1 text-center text-[10px] font-medium", 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, className: "text-lg font-bold", children: "Upload Background Image" }), _jsx(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: "Choose a wide panoramic image that shows all the characters. You will place pins on it in the next step." }), _jsxs(Label, { className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-8 transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Span, { className: "text-3xl", children: "\uD83D\uDDBC" }), _jsx(Span, { className: "font-medium", children: uploading ? "Uploading…" : "Click to choose image" }), _jsx(Span, { className: "text-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(Div, { className: "space-y-1", children: [_jsx(Div, { className: "relative w-full overflow-hidden rounded-lg", style: { paddingTop: "37.5%" }, children: _jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "680px" }) }), _jsx(Text, { className: "text-xs font-medium text-green-700", children: "\u2713 Image uploaded" })] })), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), placeholder: "DC, Marvel and Anime characters", className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Upload Background Image" }), _jsx(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: "Choose a wide panoramic image that shows all the characters. You will place pins on it in the next step." }), _jsxs(Label, { className: "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-8 transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Span, { className: "text-3xl", children: "\uD83D\uDDBC" }), _jsx(Span, { className: "font-medium", children: uploading ? "Uploading…" : "Click to choose image" }), _jsx(Span, { className: "text-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(Div, { className: "space-y-1", children: [_jsx(Div, { className: CLS_IMG_WRAP, style: { paddingTop: "37.5%" }, children: _jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "680px" }) }), _jsx(Text, { className: "text-xs font-medium text-green-700", children: "\u2713 Image uploaded" })] })), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-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)",
@@ -138,17 +143,17 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                 }, children: "Skip to Review" })), _jsx(Button, { type: "button", onClick: () => setStep("place"), disabled: !imageUrl || uploading, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
                                     background: "var(--color-black)",
                                     color: "var(--color-yellow)",
-                                }, children: "Next: Place Pins \u2192" })] })] })), step === "place" && (_jsxs(Div, { className: "space-y-4 rounded-lg border-2 p-6", style: {
+                                }, 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, className: "text-lg font-bold", children: "Place a Pin" }), _jsxs(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: [_jsx("strong", { children: "Click anywhere on the image" }), " to drop a pin, or enter exact coordinates below."] }), _jsxs(Div, { ref: containerRef, className: "relative w-full overflow-hidden rounded-lg", style: {
+                }, children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Place a Pin" }), _jsxs(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: [_jsx("strong", { 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: "#111",
                         }, onClick: handleImageClick, children: [_jsx(Image, { src: 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: "translate(-50%, -50%)",
+                                    transform: STY_CENTERED,
                                     zIndex: 10,
                                 }, children: [_jsx(Div, { className: "flex items-center justify-center rounded-full text-xs font-bold text-white", style: {
                                             width: 24,
@@ -159,7 +164,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                         }, children: "+" }), pin.name && (_jsx(Div, { className: "pointer-events-none absolute left-7 top-1/2 -translate-y-1/2 whitespace-nowrap rounded px-1.5 py-0.5 text-[9px] font-bold text-white", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id))), draftPos && (_jsxs(Div, { className: "absolute", style: {
                                     left: `${draftPos.xPct}%`,
                                     top: `${draftPos.yPct}%`,
-                                    transform: "translate(-50%, -50%)",
+                                    transform: STY_CENTERED,
                                     zIndex: 20,
                                 }, children: [_jsx(Span, { className: "absolute animate-ping rounded-full", style: {
                                             inset: -6,
@@ -201,18 +206,18 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                         const v = parseFloat(e.target.value);
                                         if (!isNaN(v))
                                             onChange(v);
-                                    }, className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                    }, className: CLS_INPUT, style: {
                                         borderColor: "var(--border-ink)",
                                         background: "var(--surface-elevated)",
                                         color: "var(--color-black)",
                                     } })] }, field))) }), pins.length > 0 && (_jsxs(Text, { className: "text-xs", style: { color: "var(--color-muted)" }, children: [pins.length, " pin", pins.length !== 1 ? "s" : "", " already placed on this image."] })), _jsxs(Row, { justify: "between", className: "border-t pt-4", style: { borderColor: "var(--border-ink)" }, children: [_jsx(Button, { type: "button", onClick: () => setStep("image"), variant: "ghost", className: "px-4 py-2 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-4 py-2 text-sm font-bold rounded transition-opacity", style: {
                                             background: "var(--surface-warm)",
                                             color: "var(--color-black)",
-                                            border: "2px solid var(--border-ink)",
+                                            border: STY_BORDER_INK,
                                         }, children: "Done Adding Pins" })), _jsx(Button, { type: "button", onClick: () => setStep("details"), disabled: !draftPos, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
                                             background: "var(--color-black)",
                                             color: "var(--color-yellow)",
-                                        }, children: "Continue: Add Details \u2192" })] })] })] })), step === "details" && (_jsxs(Div, { className: "space-y-4 rounded-lg border-2 p-6", style: {
+                                        }, 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, className: "text-lg font-bold", children: "Pin Details" }), _jsxs(Text, { className: "text-sm", style: { color: "var(--color-muted)" }, children: ["Fill in the details for the pin at", " ", _jsxs("strong", { children: [draftPos?.xPct, "%, ", draftPos?.yPct, "%"] }), "."] }), _jsx(Div, { className: "grid grid-cols-2 gap-3", children: [
@@ -228,7 +233,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                 onChange: setDraftUniverse,
                                 placeholder: "Marvel",
                             },
-                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-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)",
@@ -236,7 +241,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                     borderColor: "var(--border-ink)",
                                     background: "var(--surface-elevated)",
                                     color: "var(--color-black)",
-                                }, placeholder: "Short description shown in the popup\u2026" })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Link (href) *" }), _jsx(Input, { type: "text", value: draftHref, onChange: (e) => setDraftHref(e.target.value), placeholder: "/franchise/marvel", className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                }, placeholder: "Short description shown in the popup\u2026" })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-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)",
@@ -253,11 +258,11 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                 onChange: setDraftBadge,
                                 placeholder: "MARVEL",
                             },
-                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: label }), _jsx(Input, { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                        ].map(({ label, value, onChange, placeholder }) => (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-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(Row, { align: "end", gap: "sm", children: [_jsxs(Div, { className: "flex-1 flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Accent Colour (hex)" }), _jsx(Input, { type: "text", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), placeholder: "#E8001C", className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                                    } })] }, label))) }), _jsxs(Row, { align: "end", gap: "sm", children: [_jsxs(Div, { className: "flex-1 flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Accent Colour (hex)" }), _jsx(Input, { type: "text", value: draftAccent, onChange: (e) => setDraftAccent(e.target.value), placeholder: "#E8001C", className: CLS_INPUT, style: {
                                             borderColor: "var(--border-ink)",
                                             background: "var(--surface-elevated)",
                                             color: "var(--color-black)",
@@ -267,20 +272,20 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                         }, variant: "outline", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
                                             background: "var(--surface-warm)",
                                             color: "var(--color-black)",
-                                            border: "2px solid var(--border-ink)",
+                                            border: STY_BORDER_INK,
                                         }, children: "Save Pin & Finish" }), _jsx(Button, { type: "button", disabled: !draftName || !draftHref, onClick: () => {
                                             commitDraftPin();
                                             setStep("place");
                                         }, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded 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: "space-y-4 rounded-lg border-2 p-6", style: {
+                                        }, 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, className: "text-lg font-bold", children: "Review & Save" }), _jsxs(Span, { className: "rounded-full px-3 py-1 text-sm font-bold", style: { background: "var(--surface-warm)" }, children: [pins.length, " pin", pins.length !== 1 ? "s" : ""] })] }), _jsxs(Div, { className: "relative w-full overflow-hidden rounded-lg", style: { paddingTop: "56.25%", background: "#111" }, children: [_jsx(Image, { src: imageUrl, alt: imageAlt, fill: true, className: "object-cover", sizes: "(max-width: 680px) 100vw" }), pins.map((pin) => (_jsxs(Div, { className: "pointer-events-none absolute", style: {
+                }, children: [_jsxs(Row, { justify: "between", children: [_jsx(Heading, { level: 2, className: "text-lg font-bold", children: "Review & Save" }), _jsxs(Span, { className: "rounded-full px-3 py-1 text-sm font-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: "#111" }, children: [_jsx(Image, { src: 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: "translate(-50%, -50%)",
+                                    transform: STY_CENTERED,
                                     zIndex: 10,
                                 }, children: [_jsx(Div, { className: "flex items-center justify-center rounded-full text-xs font-bold text-white", style: {
                                             width: 28,
@@ -291,7 +296,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                         }, children: "+" }), pin.name && (_jsx(Div, { className: "pointer-events-none absolute left-8 top-1/2 -translate-y-1/2 whitespace-nowrap rounded px-1.5 py-0.5 text-[9px] font-bold text-white", style: { background: "#0D0D0D" }, children: pin.name }))] }, pin.id)))] }), pins.length > 0 ? (_jsx(Ul, { className: "divide-y rounded-lg border", style: { borderColor: "var(--border-ink)" }, children: pins.map((pin, i) => (_jsx(Li, { className: "px-4 py-3", children: _jsxs(Row, { gap: "sm", children: [_jsx(Span, { className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-bold text-white", style: { background: pin.accent || "#E8001C" }, children: i + 1 }), _jsxs(Div, { className: "min-w-0 flex-1", children: [_jsx(Text, { className: "truncate text-sm font-bold", children: pin.name || (_jsx(Span, { className: "italic", style: { color: "var(--color-muted)" }, children: "Unnamed" })) }), _jsxs(Text, { className: "text-xs", style: { color: "var(--color-muted)" }, children: [pin.universe, " \u00B7 ", pin.xPct.toFixed(0), "%,", " ", pin.yPct.toFixed(0), "%"] })] }), _jsx(Button, { type: "button", onClick: () => deletePin(pin.id), variant: "ghost", className: "shrink-0 rounded p-1 text-xs text-red-500 hover:bg-red-50", title: "Remove pin", children: "\u2715" })] }) }, pin.id))) })) : (_jsx(Div, { className: "rounded-lg border-2 border-dashed p-8 text-center text-sm", style: {
                             borderColor: "var(--border-ink)",
                             color: "var(--color-muted)",
-                        }, children: "No pins yet \u2014 add some using the button below." })), _jsxs("details", { className: "rounded-lg border p-3", style: { borderColor: "var(--border-ink)" }, children: [_jsx("summary", { className: "cursor-pointer text-sm font-medium", children: "Image Settings" }), _jsxs(Div, { className: "mt-3 space-y-3", children: [_jsxs(Label, { className: "inline-flex cursor-pointer items-center gap-2 rounded border-2 border-dashed px-3 py-1.5 text-sm font-medium transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [uploading ? "Uploading…" : "Replace Image", _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-bold", children: "Image Alt Text" }), _jsx(Input, { type: "text", value: imageAlt, onChange: (e) => setImageAlt(e.target.value), className: "rounded border-2 px-3 py-2 text-sm outline-none", style: {
+                        }, children: "No pins yet \u2014 add some using the button below." })), _jsxs("details", { className: "rounded-lg border p-3", style: { borderColor: "var(--border-ink)" }, children: [_jsx("summary", { className: "cursor-pointer text-sm font-medium", children: "Image Settings" }), _jsxs(Div, { className: "mt-3 space-y-3", children: [_jsxs(Label, { className: "inline-flex cursor-pointer items-center gap-2 rounded border-2 border-dashed px-3 py-1.5 text-sm font-medium transition-colors hover:opacity-80", style: { borderColor: "var(--border-ink)" }, children: [uploading ? "Uploading…" : "Replace Image", _jsx(Input, { type: "file", accept: "image/*", className: "hidden", onChange: handleImageUpload, disabled: uploading })] }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-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)",
@@ -301,7 +306,7 @@ export function CharacterHotspotForm({ initial, onUploadImage, onSave, onAfterSa
                                 }, variant: "outline", className: "px-4 py-2 text-sm font-bold rounded transition-opacity", style: {
                                     background: "var(--surface-warm)",
                                     color: "var(--color-black)",
-                                    border: "2px solid var(--border-ink)",
+                                    border: STY_BORDER_INK,
                                 }, children: "+ Add Another Pin" }), _jsx(Button, { type: "button", onClick: handleSave, disabled: !imageUrl || saving || pins.length === 0, variant: "primary", className: "px-4 py-2 text-sm font-bold rounded transition-opacity disabled:opacity-50", style: {
                                     background: "var(--color-black)",
                                     color: "var(--color-yellow)",

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

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading, HorizontalScroller, Section } from "../../../ui";
+import { Heading, HorizontalScroller, Section, Text } from "../../../ui";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { SectionCarousel } from "./SectionCarousel";
 import { MediaImage } from "../../media/MediaImage";
+// --- Constants ---------------------------------------------------------------
+const CLS_CONTAINER = "w-full max-w-7xl mx-auto px-4";
 // --- Helpers -----------------------------------------------------------------
 const COLS_CLASS = {
     1: "grid-cols-1",
@@ -39,7 +41,7 @@ function CardItem({ card }) {
         cardStyle.backgroundColor = card.backgroundColor;
     if (card.textColor)
         cardStyle.color = card.textColor;
-    return (_jsxs("div", { className: `flex flex-col overflow-hidden ${radiusClass} ${shadowClass} bg-[var(--appkit-color-surface)]`, style: cardStyle, children: [card.image && (_jsx("div", { className: "relative w-full aspect-video overflow-hidden", children: _jsx(MediaImage, { src: card.image, alt: card.imageAlt ?? "", size: "card" }) })), _jsxs("div", { className: "flex flex-col gap-2 p-4 flex-1", children: [card.eyebrow && (_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest opacity-70", children: card.eyebrow })), card.title && (_jsx("p", { className: "text-base font-bold leading-snug", children: card.title })), card.body && (_jsx("p", { className: "text-sm opacity-80 leading-relaxed flex-1", children: card.body })), card.buttons && card.buttons.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: card.buttons.map((btn, i) => (_jsx("a", { href: btn.href, target: btn.target ?? "_self", rel: btn.target === "_blank" ? "noopener noreferrer" : undefined, className: VARIANT_CLASS[btn.variant] ?? VARIANT_CLASS.primary, children: btn.label }, i))) })), card.formEmbed && (_jsx("iframe", { src: card.formEmbed, sandbox: "allow-forms allow-scripts", loading: "lazy", className: "w-full mt-3 border-0 rounded-md", style: { minHeight: "200px" }, title: "Embedded form" }))] })] }));
+    return (_jsxs("div", { className: `flex flex-col overflow-hidden ${radiusClass} ${shadowClass} bg-[var(--appkit-color-surface)]`, style: cardStyle, children: [card.image && (_jsx("div", { className: "relative w-full aspect-video overflow-hidden", children: _jsx(MediaImage, { src: card.image, alt: card.imageAlt ?? "", size: "card" }) })), _jsxs("div", { className: "flex flex-col gap-2 p-4 flex-1", children: [card.eyebrow && (_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest opacity-70", children: card.eyebrow })), card.title && (_jsx(Text, { className: "text-base font-bold leading-snug", children: card.title })), card.body && (_jsx(Text, { className: "text-sm opacity-80 leading-relaxed flex-1", children: card.body })), card.buttons && card.buttons.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2 mt-2", children: card.buttons.map((btn, i) => (_jsx("a", { href: btn.href, target: btn.target ?? "_self", rel: btn.target === "_blank" ? "noopener noreferrer" : undefined, className: VARIANT_CLASS[btn.variant] ?? VARIANT_CLASS.primary, children: btn.label }, i))) })), card.formEmbed && (_jsx("iframe", { src: card.formEmbed, sandbox: "allow-forms allow-scripts", loading: "lazy", className: "w-full mt-3 border-0 rounded-md", style: { minHeight: "200px" }, title: "Embedded form" }))] })] }));
 }
 // --- Section Header ----------------------------------------------------------
 function SectionHeader({ title }) {
@@ -55,11 +57,11 @@ export function CustomCardsSection(config) {
         return null;
     // autoScroll: wrap all cards in SectionCarousel (client carousel)
     if (autoScroll) {
-        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto px-4", children: _jsx(SectionCarousel, { title: title ?? "", items: cards, renderItem: (card) => _jsx(CardItem, { card: card }), keyExtractor: (card) => card.id, autoScroll: true, autoScrollInterval: scrollIntervalMs ?? 3500, perView: { base: 1, sm: 2, md: columns } }) }) }));
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsx("div", { className: CLS_CONTAINER, children: _jsx(SectionCarousel, { title: title ?? "", items: cards, renderItem: (card) => _jsx(CardItem, { card: card }), keyExtractor: (card) => card.id, autoScroll: true, autoScrollInterval: scrollIntervalMs ?? 3500, perView: { base: 1, sm: 2, md: columns } }) }) }));
     }
     // Row layout: horizontal scroller
     if (layout === "row") {
-        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, children: cards.map((card) => (_jsx("div", { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx(HorizontalScroller, { gap: 16, showArrows: true, snapToItems: true, children: cards.map((card) => (_jsx("div", { className: "w-72 flex-shrink-0", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
     }
     // Masonry layout: CSS columns
     if (layout === "masonry") {
@@ -68,9 +70,9 @@ export function CustomCardsSection(config) {
             .split(" ")
             .map((c) => c.replace("grid-cols-", "columns-"))
             .join(" ");
-        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsx(SectionHeader, { title: title }), _jsx("div", { className: `${masonryClass} gap-4 space-y-4`, children: cards.map((card) => (_jsx("div", { className: "break-inside-avoid", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
+        return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx("div", { className: `${masonryClass} gap-4 space-y-4`, children: cards.map((card) => (_jsx("div", { className: "break-inside-avoid", children: _jsx(CardItem, { card: card }) }, card.id))) })] }) }));
     }
     // Grid layout (default)
     const colsClass = COLS_CLASS[columns] ?? COLS_CLASS[3];
-    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsx(SectionHeader, { title: title }), _jsx("div", { className: `grid ${colsClass} gap-4`, children: cards.map((card) => (_jsx(CardItem, { card: card }, card.id))) })] }) }));
+    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: CLS_CONTAINER, children: [_jsx(SectionHeader, { title: title }), _jsx("div", { className: `grid ${colsClass} gap-4`, children: cards.map((card) => (_jsx(CardItem, { card: card }, card.id))) })] }) }));
 }

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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { SectionCarousel } from "./SectionCarousel";
@@ -32,7 +32,7 @@ function ProductGrid({ items, rows, maxItems, pagination, viewMoreHref, viewMore
         return () => { if (timerRef.current)
             clearInterval(timerRef.current); };
     }, [pagination, pageSize, totalItems]);
-    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgPrimary}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), description && (_jsx(Text, { variant: "muted", className: "mt-1 text-sm", children: description }))] }), pagination === "arrows" && (_jsxs("div", { className: "flex shrink-0 gap-2", children: [_jsx("button", { type: "button", onClick: prev, disabled: !canPrev, "aria-label": "Previous", className: "flex h-9 w-9 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-600 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] disabled:opacity-40 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300", children: "\u2039" }), _jsx("button", { type: "button", onClick: next, disabled: !canNext, "aria-label": "Next", className: "flex h-9 w-9 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-600 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] disabled:opacity-40 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300", children: "\u203A" })] }))] }), _jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", children: visible.map((product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id ?? "")) }, product.id))) }), pagination === "load-more" && canNext && (_jsx("div", { className: "mt-8 text-center", children: _jsx("button", { type: "button", onClick: next, className: "rounded-lg border border-zinc-300 bg-white px-6 py-2 text-sm font-medium text-zinc-700 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] dark:border-slate-600 dark:bg-slate-900 dark:text-zinc-300", children: "Load more" }) })), viewMoreHref && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
+    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgPrimary}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-end justify-between gap-4", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), description && (_jsx(Text, { variant: "muted", className: "mt-1 text-sm", children: description }))] }), pagination === "arrows" && (_jsxs("div", { className: "flex shrink-0 gap-2", children: [_jsx("button", { type: "button", onClick: prev, disabled: !canPrev, "aria-label": "Previous", className: "flex h-9 w-9 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-600 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] disabled:opacity-40 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300", children: "\u2039" }), _jsx("button", { type: "button", onClick: next, disabled: !canNext, "aria-label": "Next", className: "flex h-9 w-9 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-600 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] disabled:opacity-40 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300", children: "\u203A" })] }))] }), _jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5", children: visible.map((product) => (_jsx(InteractiveProductCard, { product: product, href: String(ROUTES.PUBLIC.PRODUCT_DETAIL(product.slug ?? product.id ?? "")) }, product.id))) }), pagination === "load-more" && canNext && (_jsx("div", { className: "mt-8 text-center", children: _jsx("button", { type: "button", onClick: next, className: "rounded-lg border border-zinc-300 bg-white px-6 py-2 text-sm font-medium text-zinc-700 hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] dark:border-slate-600 dark:bg-slate-900 dark:text-zinc-300", children: "Load more" }) })), viewMoreHref && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: viewMoreLabel }) }))] }) }));
 }
 // --- Main component -----------------------------------------------------------
 export function FeaturedProductsSection({ title = "Featured Products", description, viewMoreHref, viewMoreLabel = "View all products →", className = "", filterByBrand, initialItems, rows = 1, maxItems, pagination = "load-more", }) {

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Heading, Section, Text } from "../../../ui";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { siteSettingsRepository } from "../../admin/repository/site-settings.repository";
@@ -20,7 +20,7 @@ function ReviewCard({ review, showRating, showDate, }) {
             day: "numeric",
         })
         : null;
-    return (_jsxs("div", { className: "flex flex-col gap-3 p-4 rounded-xl bg-[var(--appkit-color-surface)] shadow-sm border border-[var(--appkit-color-border)]", children: [_jsxs("div", { className: "flex items-center gap-3", children: [review.authorPhotoUrl ? (_jsx("img", { src: review.authorPhotoUrl, alt: review.authorName, className: "w-9 h-9 rounded-full object-cover flex-shrink-0", loading: "lazy", referrerPolicy: "no-referrer" })) : (_jsx("div", { className: "w-9 h-9 rounded-full bg-[var(--appkit-color-primary)] flex items-center justify-center flex-shrink-0", children: _jsx("span", { className: "text-white text-sm font-bold", children: review.authorName.charAt(0).toUpperCase() }) })), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-sm font-semibold truncate", children: review.authorName }), dateStr && (_jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: dateStr }))] })] }), showRating && _jsx(StarRating, { rating: review.rating }), review.text && (_jsx("p", { className: "text-sm leading-relaxed text-zinc-700 dark:text-zinc-300 line-clamp-4", children: review.text })), _jsx(GoogleBadge, {})] }));
+    return (_jsxs("div", { className: "flex flex-col gap-3 p-4 rounded-xl bg-[var(--appkit-color-surface)] shadow-sm border border-[var(--appkit-color-border)]", children: [_jsxs("div", { className: "flex items-center gap-3", children: [review.authorPhotoUrl ? (_jsx("img", { src: review.authorPhotoUrl, alt: review.authorName, className: "w-9 h-9 rounded-full object-cover flex-shrink-0", loading: "lazy", referrerPolicy: "no-referrer" })) : (_jsx("div", { className: "w-9 h-9 rounded-full bg-[var(--appkit-color-primary)] flex items-center justify-center flex-shrink-0", children: _jsx("span", { className: "text-white text-sm font-bold", children: review.authorName.charAt(0).toUpperCase() }) })), _jsxs("div", { className: "min-w-0", children: [_jsx(Text, { className: "text-sm font-semibold truncate", children: review.authorName }), dateStr && (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: dateStr }))] })] }), showRating && _jsx(StarRating, { rating: review.rating }), review.text && (_jsx(Text, { className: "text-sm leading-relaxed text-zinc-700 dark:text-zinc-300 line-clamp-4", children: review.text })), _jsx(GoogleBadge, {})] }));
 }
 // --- Empty / Not Configured States -------------------------------------------
 function NotConfiguredState() {
@@ -61,5 +61,5 @@ export async function GoogleReviewsSection(config) {
         : "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4";
     const cardClass = layout === "carousel" ? "flex-shrink-0 w-72 snap-start" : "";
     const mapsHref = googleMapsUrl || (placeId ? `https://search.google.com/local/reviews?placeid=${placeId}` : "");
-    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsxs("div", { className: "mb-8 flex items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx(Heading, { level: 2, children: "What Our Customers Say" }), aggregateRating > 0 && (_jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx(StarRating, { rating: Math.round(aggregateRating) }), _jsxs(Text, { size: "sm", variant: "muted", children: [aggregateRating.toFixed(1), " \u00B7 ", totalRatings.toLocaleString(), " reviews"] })] }))] }), linkToGoogleMaps && mapsHref && (_jsx("a", { href: mapsHref, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline", children: "View on Google \u2192" }))] }), reviews.length === 0 ? (_jsx(EmptyState, {})) : (_jsx("div", { className: gridClass, children: reviews.map((review, i) => (_jsx("div", { className: cardClass, children: _jsx(ReviewCard, { review: review, showRating: showRating, showDate: showDate }) }, `${review.authorName}-${i}`))) }))] }) }));
+    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsxs("div", { className: "mb-8 flex items-end justify-between gap-4", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, children: "What Our Customers Say" }), aggregateRating > 0 && (_jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx(StarRating, { rating: Math.round(aggregateRating) }), _jsxs(Text, { size: "sm", variant: "muted", children: [aggregateRating.toFixed(1), " \u00B7 ", totalRatings.toLocaleString(), " reviews"] })] }))] }), linkToGoogleMaps && mapsHref && (_jsx("a", { href: mapsHref, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-sm font-medium text-blue-600 dark:text-blue-400 hover:underline", children: "View on Google \u2192" }))] }), reviews.length === 0 ? (_jsx(EmptyState, {})) : (_jsx("div", { className: gridClass, children: reviews.map((review, i) => (_jsx("div", { className: cardClass, children: _jsx(ReviewCard, { review: review, showRating: showRating, showDate: showDate }) }, `${review.authorName}-${i}`))) }))] }) }));
 }

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

@@ -4,6 +4,7 @@ import { useState, useEffect, useCallback } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { Button, Div, Heading, Row, Span } from "../../../ui";
+const FONT_BANGERS = "var(--font-bangers, Bangers, cursive)";
 export function HeroBanner({ banners, autoplayMs = 5000 }) {
     const [current, setCurrent] = useState(0);
     const [animating, setAnimating] = useState(false);
@@ -45,16 +46,16 @@ export function HeroBanner({ banners, autoplayMs = 5000 }) {
                 }, children: [banner.subtitle && (_jsx(Div, { className: "mb-3", children: _jsx(Span, { className: "inline-block px-3 py-1 text-xs font-black uppercase tracking-[0.18em]", style: {
                                 background: "var(--color-red)",
                                 color: "#FFFFFF",
-                                fontFamily: "var(--font-bangers, Bangers, cursive)",
+                                fontFamily: FONT_BANGERS,
                                 letterSpacing: "0.16em",
                             }, children: banner.subtitle }) })), _jsx(Heading, { level: 2, className: "mb-5 max-w-xl leading-none", style: {
-                            fontFamily: "var(--font-bangers, Bangers, cursive)",
+                            fontFamily: FONT_BANGERS,
                             fontSize: "clamp(3rem, 9vw, 6.5rem)",
                             letterSpacing: "0.04em",
                             color: banner.textColor ?? "#FFFFFF",
                             textShadow: "0 4px 32px rgba(0,0,0,0.5)",
                         }, children: banner.title }), banner.ctaLabel && banner.ctaUrl && (_jsx(Row, { wrap: true, gap: "md", children: _jsxs(Link, { href: banner.ctaUrl, className: "inline-flex items-center gap-2 sm:gap-3 px-5 py-3 sm:px-8 sm:py-3.5 font-black uppercase transition-all hover:-translate-y-0.5", style: {
-                                fontFamily: "var(--font-bangers, Bangers, cursive)",
+                                fontFamily: FONT_BANGERS,
                                 letterSpacing: "0.1em",
                                 fontSize: "clamp(0.85rem, 2.5vw, 1.1rem)",
                                 background: "var(--color-yellow)",
@@ -78,7 +79,7 @@ export function HeroBanner({ banners, autoplayMs = 5000 }) {
                             backdropFilter: "blur(6px)",
                         }, children: _jsx("svg", { className: "h-4 w-4 sm:h-5 sm:w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2.5, d: "M9 5l7 7-7 7" }) }) })] })), banners.length > 1 && (_jsxs(Row, { className: "absolute bottom-8 right-6 sm:right-12 gap-3", style: { zIndex: 15 }, children: [_jsxs(Span, { className: "text-xs font-black tabular-nums", style: {
                             color: "rgba(255,255,255,0.6)",
-                            fontFamily: "var(--font-bangers, Bangers, cursive)",
+                            fontFamily: FONT_BANGERS,
                             letterSpacing: "0.1em",
                         }, children: [String(current + 1).padStart(2, "0"), " /", " ", String(banners.length).padStart(2, "0")] }), _jsx(Div, { className: "flex gap-1.5", children: banners.map((_, i) => (_jsx(Button, { onClick: () => goTo(i), "aria-label": `Go to slide ${i + 1}`, variant: "ghost", size: "sm", className: "transition-all", style: {
                                 height: 3,

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

@@ -8,6 +8,16 @@ import { MediaImage } from "../../media/MediaImage";
 import { MediaVideo } from "../../media/MediaVideo";
 import { useHeroCarousel } from "../hooks/useHeroCarousel";
 const { flex, position } = THEME_CONSTANTS;
+function makeButtonClickHandler(href, openInNewTab, push) {
+    return () => {
+        if (openInNewTab) {
+            window.open(href, "_blank", "noopener,noreferrer");
+        }
+        else {
+            navigate(href, push);
+        }
+    };
+}
 function navigate(href, push) {
     if (push) {
         push(href);
@@ -94,23 +104,8 @@ function CarouselCardRenderer({ card, isMobile, push, }) {
                             const variant = btn.variant === "link" || btn.variant === "ghost"
                                 ? "ghost"
                                 : btn.variant;
-                            return (_jsx(Button, { variant: variant, size: "sm", onClick: () => {
-                                    if (btn.openInNewTab) {
-                                        window.open(btn.href, "_blank", "noopener,noreferrer");
-                                    }
-                                    else {
-                                        navigate(btn.href, push);
-                                    }
-                                }, children: btn.text }, btn.id ?? i));
-                        }) }))] })), card.isButtonOnly && card.buttons?.[0] && (_jsx(Button, { variant: "ghost", className: `${position.fill} ${flex.center} font-semibold text-white hover:bg-black/20 transition-colors rounded-none p-0`, onClick: () => {
-                    const btn = card.buttons[0];
-                    if (btn.openInNewTab) {
-                        window.open(btn.href, "_blank", "noopener,noreferrer");
-                    }
-                    else {
-                        navigate(btn.href, push);
-                    }
-                }, children: _jsx(Span, { className: "text-lg md:text-2xl", children: card.buttons[0].text }) }))] }));
+                            return (_jsx(Button, { variant: variant, size: "sm", onClick: makeButtonClickHandler(btn.href, btn.openInNewTab, push), children: btn.text }, btn.id ?? i));
+                        }) }))] })), card.isButtonOnly && card.buttons?.[0] && (_jsx(Button, { variant: "ghost", className: `${position.fill} ${flex.center} font-semibold text-white hover:bg-black/20 transition-colors rounded-none p-0`, onClick: makeButtonClickHandler(card.buttons[0].href, card.buttons[0].openInNewTab, push), children: _jsx(Span, { className: "text-lg md:text-2xl", children: card.buttons[0].text }) }))] }));
 }
 export function HeroCarousel({ initialSlides, push } = {}) {
     const [currentSlide, setCurrentSlide] = useState(0);
@@ -174,15 +169,7 @@ export function HeroCarousel({ initialSlides, push } = {}) {
     return (_jsxs(Section, { ref: sectionRef, className: `relative w-full ${heightClass} overflow-hidden`, "aria-roledescription": "carousel", "aria-label": "Hero carousel", onKeyDown: handleKeyDown, onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false), onFocus: () => setIsPaused(true), onBlur: () => setIsPaused(false), tabIndex: 0, children: [_jsx(Div, { "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: `Slide ${currentSlide + 1} of ${slides.length}` }), _jsx(Div, { className: position.fill, children: _jsx(Div, { ref: slidesRef, onScroll: handleSlidesScroll, className: "flex h-full overflow-x-auto scroll-smooth snap-x snap-mandatory [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", style: { gap: 0 }, children: slides.map((slide, slideIndex) => {
                         const slideHeightClass = getSlideHeightClass(slide.settings?.height);
                         const hasCards = slide.cards && slide.cards.length > 0;
-                        return (_jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-zinc-900 ${slideHeightClass}`, children: [_jsx(Div, { className: position.fill, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (_jsxs(Div, { className: `${position.fill} ${flex.center} flex-col text-center px-6 md:px-16 lg:px-32`, children: [slide.overlay.subtitle && (_jsx(Text, { className: "stagger-1 text-xs md:text-sm !text-white/80 mb-1 md:mb-2 drop-shadow-sm uppercase tracking-widest", children: slide.overlay.subtitle })), slide.overlay.title && (_jsx(Heading, { level: 1, className: "stagger-2 font-display text-4xl md:text-6xl lg:text-8xl !text-white drop-shadow-2xl mb-2 md:mb-4", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { className: "stagger-3 text-sm md:text-lg lg:text-xl !text-white/90 mb-4 md:mb-8 drop-shadow-sm max-w-2xl mx-auto", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: () => {
-                                                    const btn = slide.overlay.button;
-                                                    if (btn.openInNewTab) {
-                                                        window.open(btn.link, "_blank", "noopener,noreferrer");
-                                                    }
-                                                    else {
-                                                        navigate(btn.link, push);
-                                                    }
-                                                }, children: slide.overlay.button.text }) }))] })), hasCards && (_jsx(Div, { className: `${position.fill} grid gap-2 md:gap-4 p-4 md:p-8`, style: {
+                        return (_jsxs(Div, { className: `snap-start flex-none w-full relative self-stretch bg-zinc-900 ${slideHeightClass}`, children: [_jsx(Div, { className: position.fill, children: _jsx(SlideBackground, { bg: slide.background, legacy: slide.media, mobileLegacy: slide.mobileMedia, isMobile: isMobile, priority: slideIndex === 0 }) }), slide.overlay && (_jsxs(Div, { className: `${position.fill} ${flex.center} flex-col text-center px-6 md:px-16 lg:px-32`, children: [slide.overlay.subtitle && (_jsx(Text, { className: "stagger-1 text-xs md:text-sm !text-white/80 mb-1 md:mb-2 drop-shadow-sm uppercase tracking-widest", children: slide.overlay.subtitle })), slide.overlay.title && (_jsx(Heading, { level: 1, className: "stagger-2 font-display text-4xl md:text-6xl lg:text-8xl !text-white drop-shadow-2xl mb-2 md:mb-4", children: slide.overlay.title })), slide.overlay.description && (_jsx(Text, { className: "stagger-3 text-sm md:text-lg lg:text-xl !text-white/90 mb-4 md:mb-8 drop-shadow-sm max-w-2xl mx-auto", children: slide.overlay.description })), slide.overlay.button && (_jsx(Div, { className: "stagger-4", children: _jsx(Button, { variant: slide.overlay.button.variant, size: "sm", onClick: makeButtonClickHandler(slide.overlay.button.link, slide.overlay.button.openInNewTab, push), children: slide.overlay.button.text }) }))] })), hasCards && (_jsx(Div, { className: `${position.fill} grid gap-2 md:gap-4 p-4 md:p-8`, style: {
                                         gridTemplateRows: "repeat(2, 1fr)",
                                         gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
                                         alignContent: "center",

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

@@ -3,6 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { Button, Div, Grid, Heading, Section, Text } from "../../../ui";
+// --- Constants ---------------------------------------------------------------
+const CLS_VISIBLE = "opacity-100 translate-y-0";
 // --- Single step card ---------------------------------------------------------
 function StepCard({ step, visible, delay, }) {
     const { badgeBg = "bg-primary", iconColor = "text-primary", iconBg = "bg-primary/5 dark:bg-primary/10", } = step;
@@ -11,7 +13,7 @@ function StepCard({ step, visible, delay, }) {
             "bg-white dark:bg-slate-900",
             "shadow-md group hover:-translate-y-2 hover:shadow-xl",
             "transition-all duration-300",
-            visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8",
+            visible ? CLS_VISIBLE : "opacity-0 translate-y-8",
         ].join(" "), style: { transitionDelay: `${delay}ms` }, "data-section": "howitworkssection-div-340", children: [_jsx("div", { className: "absolute top-4 right-5 font-display text-7xl bg-gradient-to-br from-primary to-cobalt opacity-10 bg-clip-text text-transparent select-none pointer-events-none leading-none", "aria-hidden": "true", "data-section": "howitworkssection-div-341", children: step.number }), _jsx("div", { className: `relative z-10 w-10 h-10 rounded-full ${badgeBg} text-white font-bold text-sm flex items-center justify-center mb-5 shadow-md`, "data-section": "howitworkssection-div-342", children: step.number }), step.renderIcon && (_jsx("div", { className: `relative z-10 w-14 h-14 rounded-2xl ${iconBg} flex items-center justify-center mb-4 border border-white/80 dark:border-slate-700/50`, "data-section": "howitworkssection-div-343", children: _jsx("span", { className: `${iconColor}`, "aria-hidden": "true", children: step.renderIcon({ className: "w-6 h-6" }) }) })), _jsx(Heading, { level: 3, className: `relative z-10 text-base font-semibold ${THEME_CONSTANTS.themed.textPrimary} mb-2`, children: step.title }), _jsx(Text, { className: `relative z-10 text-sm ${THEME_CONSTANTS.themed.textSecondary} leading-relaxed`, children: step.desc })] }));
 }
 // --- Section -----------------------------------------------------------------
@@ -32,5 +34,5 @@ export function HowItWorksSection({ title, subtitle, pillLabel, ctaLabel, onCtaC
         observer.observe(el);
         return () => observer.disconnect();
     }, []);
-    return (_jsx(Section, { ref: sectionRef, className: `p-8 ${themed.bgPrimary} ${className}`, children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: `text-center mb-12 transition-all duration-700 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, "data-section": "howitworkssection-div-344", children: [pillLabel && (_jsx("div", { className: "inline-block mb-4 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", "data-section": "howitworkssection-div-345", children: pillLabel })), _jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary} max-w-xl mx-auto`, children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 mb-10", children: steps.map((step, i) => (_jsx(StepCard, { step: step, visible: visible, delay: i * 150 }, step.number))) }), ctaLabel && onCtaClick && (_jsx("div", { className: `text-center transition-all duration-700 delay-500 ${visible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"}`, "data-section": "howitworkssection-div-346", children: _jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel }) }))] }) }));
+    return (_jsx(Section, { ref: sectionRef, className: `p-8 ${themed.bgPrimary} ${className}`, children: _jsxs(Div, { className: "max-w-6xl mx-auto", children: [_jsxs("div", { className: `text-center mb-12 transition-all duration-700 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, "data-section": "howitworkssection-div-344", children: [pillLabel && (_jsx("div", { className: "inline-block mb-4 inline-flex items-center gap-2 rounded-full border border-primary-500/30 bg-primary-500/10 px-5 py-1.5 text-xs font-medium tracking-[0.2em] uppercase text-primary-700 dark:text-primary-400 backdrop-blur-sm", "data-section": "howitworkssection-div-345", children: pillLabel })), _jsx(Heading, { level: 2, className: `text-3xl md:text-4xl font-bold ${themed.textPrimary} mb-3`, children: title }), subtitle && (_jsx(Text, { className: `text-base ${themed.textSecondary} max-w-xl mx-auto`, children: subtitle }))] }), _jsx(Grid, { gap: "lg", className: "grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 mb-10", children: steps.map((step, i) => (_jsx(StepCard, { step: step, visible: visible, delay: i * 150 }, step.number))) }), ctaLabel && onCtaClick && (_jsx("div", { className: `text-center transition-all duration-700 delay-500 ${visible ? CLS_VISIBLE : "opacity-0 translate-y-4"}`, "data-section": "howitworkssection-div-346", children: _jsx(Button, { variant: "primary", size: "lg", onClick: onCtaClick, children: ctaLabel }) }))] }) }));
 }

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

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Heading, Section, Text } from "../../../ui";
 import { THEME_CONSTANTS } from "../../../tokens";
 import { SocialPostCard } from "./SocialPostCard";
@@ -102,5 +102,5 @@ export async function SocialFeedSection(config) {
         : layout === "masonry"
             ? "break-inside-avoid"
             : "";
-    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsxs("div", { className: "mb-8 flex items-end justify-between gap-4", children: [_jsxs("div", { children: [_jsx(Heading, { level: 2, className: "mb-1", children: title || `${PLATFORM_LABELS[platform]} Feed` }), subtitle && (_jsx(Text, { size: "sm", variant: "muted", children: subtitle }))] }), profileUrl && (_jsxs("a", { href: profileUrl, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: ["Follow on ", PLATFORM_LABELS[platform], " \u2192"] }))] }), error ? (_jsx("div", { className: "py-12 text-center text-zinc-400 text-sm", children: error })) : posts.length === 0 ? (_jsx(SocialFeedEmpty, { platform: platform })) : (_jsx("div", { className: gridClass, children: posts.slice(0, count).map((post) => (_jsx("div", { className: cardClass, children: _jsx(SocialPostCard, { post: post, showCaption: showCaption, showStats: showStats }) }, post.id))) }))] }) }));
+    return (_jsx(Section, { className: `py-12 ${themed.bgPrimary}`, children: _jsxs("div", { className: "w-full max-w-7xl mx-auto px-4", children: [_jsxs("div", { className: "mb-8 flex items-end justify-between gap-4", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: "mb-1", children: title || `${PLATFORM_LABELS[platform]} Feed` }), subtitle && (_jsx(Text, { size: "sm", variant: "muted", children: subtitle }))] }), profileUrl && (_jsxs("a", { href: profileUrl, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-sm font-medium text-[var(--appkit-color-primary)] hover:opacity-80", children: ["Follow on ", PLATFORM_LABELS[platform], " \u2192"] }))] }), error ? (_jsx("div", { className: "py-12 text-center text-zinc-400 text-sm", children: error })) : posts.length === 0 ? (_jsx(SocialFeedEmpty, { platform: platform })) : (_jsx("div", { className: gridClass, children: posts.slice(0, count).map((post) => (_jsx("div", { className: cardClass, children: _jsx(SocialPostCard, { post: post, showCaption: showCaption, showStats: showStats }) }, post.id))) }))] }) }));
 }

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from "../../../ui";
 // --- Platform brand colours & icons ------------------------------------------
 const PLATFORM_META = {
     instagram: {
@@ -43,12 +44,12 @@ function YouTubeCard({ post, showCaption }) {
     const thumbnail = `https://img.youtube.com/vi/${post.videoId}/maxresdefault.jpg`;
     const href = `https://youtu.be/${post.videoId}`;
     const meta = PLATFORM_META.youtube;
-    return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "group relative block aspect-video w-full overflow-hidden rounded-xl bg-zinc-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-youtube,#FF0000)]", "aria-label": post.caption ?? `Watch on YouTube`, children: [_jsx("img", { src: thumbnail, alt: post.caption ?? "YouTube video", className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-[var(--appkit-color-youtube,#FF0000)] shadow-lg transition-transform duration-200 group-hover:scale-110", children: _jsx("svg", { className: "ml-1 h-6 w-6 text-white", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) }), _jsxs("div", { className: `absolute right-2 top-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs font-medium text-white ${meta.colorClass}`, children: [meta.icon, _jsx("span", { className: "hidden sm:inline", children: meta.label })] }), post.channelName && (_jsx("div", { className: "absolute bottom-2 left-2 rounded bg-black/60 px-2 py-0.5 text-xs text-white backdrop-blur-sm", children: post.channelName })), showCaption && post.caption && (_jsx("div", { className: "absolute inset-0 flex flex-col justify-end bg-black/60 p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: _jsx("p", { className: "line-clamp-2 text-xs text-white", children: post.caption }) }))] }));
+    return (_jsxs("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: "group relative block aspect-video w-full overflow-hidden rounded-xl bg-zinc-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-youtube,#FF0000)]", "aria-label": post.caption ?? `Watch on YouTube`, children: [_jsx("img", { src: thumbnail, alt: post.caption ?? "YouTube video", className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-[var(--appkit-color-youtube,#FF0000)] shadow-lg transition-transform duration-200 group-hover:scale-110", children: _jsx("svg", { className: "ml-1 h-6 w-6 text-white", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) }), _jsxs("div", { className: `absolute right-2 top-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs font-medium text-white ${meta.colorClass}`, children: [meta.icon, _jsx("span", { className: "hidden sm:inline", children: meta.label })] }), post.channelName && (_jsx("div", { className: "absolute bottom-2 left-2 rounded bg-black/60 px-2 py-0.5 text-xs text-white backdrop-blur-sm", children: post.channelName })), showCaption && post.caption && (_jsx("div", { className: "absolute inset-0 flex flex-col justify-end bg-black/60 p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: _jsx(Text, { className: "line-clamp-2 text-xs text-white", children: post.caption }) }))] }));
 }
 export function SocialPostCard({ post, showCaption = true, showStats = true }) {
     if (post.platform === "youtube") {
         return _jsx(YouTubeCard, { post: post, showCaption: showCaption });
     }
     const meta = PLATFORM_META[post.platform];
-    return (_jsxs("a", { href: post.permalink, target: "_blank", rel: "noopener noreferrer", className: "group relative block aspect-square overflow-hidden rounded-xl bg-zinc-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-primary)] dark:bg-zinc-800", "aria-label": post.caption ?? `View on ${meta.label}`, children: [post.imageUrl ? (_jsx("img", { src: post.imageUrl, alt: post.caption ?? `${meta.label} post`, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-zinc-200 dark:bg-zinc-700", children: _jsx("span", { className: "text-sm text-zinc-400", children: "No preview" }) })), post.mediaType === "video" && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm", children: _jsx("svg", { className: "ml-1 h-5 w-5 text-white", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) })), post.mediaType === "carousel" && (_jsx("div", { className: "pointer-events-none absolute right-2 top-2", children: _jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-black/50 backdrop-blur-sm", children: _jsxs("svg", { className: "h-3.5 w-3.5 text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "2", y: "3", width: "15", height: "15", rx: "2" }), _jsx("path", { d: "M7 8h14M7 12h14M7 16h14" })] }) }) })), _jsxs("div", { className: `absolute left-2 top-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs font-medium text-white ${meta.colorClass}`, children: [meta.icon, _jsx("span", { className: "hidden sm:inline", children: meta.label })] }), _jsxs("div", { className: "pointer-events-none absolute inset-0 flex flex-col justify-end bg-black/70 p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: [showCaption && post.caption && (_jsx("p", { className: "mb-2 line-clamp-3 text-xs text-white", children: post.caption })), showStats && (_jsxs("div", { className: "flex items-center gap-3 text-xs text-white/80", children: [post.stats.likes != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" }) }), formatCount(post.stats.likes)] })), post.stats.views != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }) }), formatCount(post.stats.views)] })), post.stats.comments != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }), formatCount(post.stats.comments)] }))] }))] })] }));
+    return (_jsxs("a", { href: post.permalink, target: "_blank", rel: "noopener noreferrer", className: "group relative block aspect-square overflow-hidden rounded-xl bg-zinc-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--appkit-color-primary)] dark:bg-zinc-800", "aria-label": post.caption ?? `View on ${meta.label}`, children: [post.imageUrl ? (_jsx("img", { src: post.imageUrl, alt: post.caption ?? `${meta.label} post`, className: "h-full w-full object-cover transition-transform duration-300 group-hover:scale-105", loading: "lazy" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-zinc-200 dark:bg-zinc-700", children: _jsx("span", { className: "text-sm text-zinc-400", children: "No preview" }) })), post.mediaType === "video" && (_jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm", children: _jsx("svg", { className: "ml-1 h-5 w-5 text-white", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M8 5v14l11-7z" }) }) }) })), post.mediaType === "carousel" && (_jsx("div", { className: "pointer-events-none absolute right-2 top-2", children: _jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded bg-black/50 backdrop-blur-sm", children: _jsxs("svg", { className: "h-3.5 w-3.5 text-white", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("rect", { x: "2", y: "3", width: "15", height: "15", rx: "2" }), _jsx("path", { d: "M7 8h14M7 12h14M7 16h14" })] }) }) })), _jsxs("div", { className: `absolute left-2 top-2 flex items-center gap-1 rounded px-1.5 py-1 text-xs font-medium text-white ${meta.colorClass}`, children: [meta.icon, _jsx("span", { className: "hidden sm:inline", children: meta.label })] }), _jsxs("div", { className: "pointer-events-none absolute inset-0 flex flex-col justify-end bg-black/70 p-3 opacity-0 transition-opacity duration-200 group-hover:opacity-100", children: [showCaption && post.caption && (_jsx(Text, { className: "mb-2 line-clamp-3 text-xs text-white", children: post.caption })), showStats && (_jsxs("div", { className: "flex items-center gap-3 text-xs text-white/80", children: [post.stats.likes != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" }) }), formatCount(post.stats.likes)] })), post.stats.views != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }) }), formatCount(post.stats.views)] })), post.stats.comments != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "currentColor", children: _jsx("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" }) }), formatCount(post.stats.comments)] }))] }))] })] }));
 }

package/dist/features/homepage/lib/social-feed-fetcher.js

@@ -2,6 +2,9 @@
 function clamp(n, min, max) {
     return Math.max(min, Math.min(max, n));
 }
+function isVideoOrReels(postType) {
+    return ["videos", "reels"].includes(postType);
+}
 // --- Instagram (Meta Graph API v19) ------------------------------------------
 export async function fetchInstagramPosts(handle, postType, count, accessToken) {
     const fields = "id,caption,media_type,media_url,thumbnail_url,permalink,timestamp,like_count,comments_count";
@@ -19,7 +22,7 @@ export async function fetchInstagramPosts(handle, postType, count, accessToken)
         const m = item;
         if (postType === "images")
             return m.media_type === "IMAGE";
-        if (postType === "videos" || postType === "reels")
+        if (isVideoOrReels(postType))
             return m.media_type === "VIDEO";
         return true;
     })
@@ -65,7 +68,7 @@ export async function fetchFacebookPosts(handle, postType, count, accessToken) {
         const mtype = attachType?.media_type;
         if (postType === "images")
             return mtype !== "video";
-        if (postType === "videos" || postType === "reels")
+        if (isVideoOrReels(postType))
             return mtype === "video";
         return true;
     })
@@ -155,7 +158,7 @@ async function getDeviantArtToken(clientId, clientSecret) {
     return json.access_token;
 }
 export async function fetchDeviantArtPosts(handle, postType, count, clientId, clientSecret) {
-    if (postType === "videos" || postType === "reels")
+    if (isVideoOrReels(postType))
         return [];
     const token = await getDeviantArtToken(clientId, clientSecret);
     const url = new URL("https://www.deviantart.com/api/v1/oauth2/gallery/all");

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

@@ -18,7 +18,7 @@ export interface AppLayoutShellSidebarSection {
 export interface AppLayoutShellSidebarAction {
     href: string;
     label: string;
-    variant?: "solid" | "outline";
+    variant?: "primary" | "outline";
 }
 export interface AppLayoutShellProps {
     children: React.ReactNode;
@@ -88,6 +88,12 @@ export interface AppLayoutShellProps {
         logout?: string;
     };
     eventBannerSlot?: React.ReactNode;
+    /**
+     * Override className for the main content wrapper div.
+     * When set, replaces the default `container mx-auto w-full max-w-screen-2xl px-4 py-6 …`
+     * Use `"w-full"` for dashboard layouts that provide their own padding via DashboardLayoutClient.
+     */
+    contentClassName?: string;
     lightBackground?: {
         type: "color" | "image" | "gradient" | "video";
         value: string;
@@ -107,4 +113,4 @@ export interface AppLayoutShellProps {
         };
     };
 }
-export declare function AppLayoutShell({ children, navItems, sidebarItems, sidebarSections, sidebarPrimaryActions, sidebarTitle, hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, registerHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle, suppressDashboardNav, hideSidebarToggle, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar, sidebarProfileLabels, eventBannerSlot, lightBackground, darkBackground, }: AppLayoutShellProps): import("react/jsx-runtime").JSX.Element;
+export declare function AppLayoutShell({ children, navItems, sidebarItems, sidebarSections, sidebarPrimaryActions, sidebarTitle, hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, registerHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle, suppressDashboardNav, hideSidebarToggle, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar, sidebarProfileLabels, eventBannerSlot, contentClassName, lightBackground, darkBackground, }: AppLayoutShellProps): import("react/jsx-runtime").JSX.Element;