@mohasinac/appkit 2.7.27 → 2.7.31

package/dist/features/faq/schemas/index.d.ts

@@ -91,6 +91,7 @@ export declare const faqSchema: z.ZodObject<{
     };
     createdAt?: string | undefined;
     updatedAt?: string | undefined;
+    tags?: string[] | undefined;
     order?: number | undefined;
     priority?: number | undefined;
     stats?: {
@@ -99,7 +100,6 @@ export declare const faqSchema: z.ZodObject<{
         notHelpful?: number | undefined;
     } | undefined;
     isActive?: boolean | undefined;
-    tags?: string[] | undefined;
     seo?: {
         slug?: string | undefined;
     } | undefined;
@@ -117,6 +117,7 @@ export declare const faqSchema: z.ZodObject<{
     };
     createdAt?: string | undefined;
     updatedAt?: string | undefined;
+    tags?: string[] | undefined;
     order?: number | undefined;
     priority?: number | undefined;
     stats?: {
@@ -125,7 +126,6 @@ export declare const faqSchema: z.ZodObject<{
         notHelpful?: number | undefined;
     } | undefined;
     isActive?: boolean | undefined;
-    tags?: string[] | undefined;
     seo?: {
         slug?: string | undefined;
     } | undefined;
@@ -144,14 +144,14 @@ export declare const faqListParamsSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     perPage?: number | undefined;
     q?: string | undefined;
-    page?: number | undefined;
     category?: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general" | undefined;
+    page?: number | undefined;
     homepage?: boolean | undefined;
 }, {
     perPage?: number | undefined;
     q?: string | undefined;
-    page?: number | undefined;
     category?: "orders_payment" | "shipping_delivery" | "returns_refunds" | "product_information" | "account_security" | "technical_support" | "general" | undefined;
+    page?: number | undefined;
     homepage?: boolean | undefined;
 }>;
 export * from "./firestore";

package/dist/features/filters/AsyncFacetSection.d.ts

@@ -0,0 +1,18 @@
+import type { FacetOption } from "./FilterFacetSection";
+import type { AsyncPage } from "../../ui/components/DynamicSelect";
+export interface AsyncFacetSectionProps {
+    title: string;
+    selected: string[];
+    onChange: (selected: string[]) => void;
+    loadOptions: (query: string, page: number) => Promise<AsyncPage<FacetOption>>;
+    selectionMode?: "single" | "multi";
+    defaultCollapsed?: boolean;
+    onClear?: () => void;
+    className?: string;
+}
+/**
+ * AsyncFacetSection — collapsible filter section that loads options from the API
+ * with search + pagination. Replaces static `FilterFacetSection` for large datasets
+ * (>20 items). Uses the same accordion UX pattern for visual consistency.
+ */
+export declare function AsyncFacetSection({ title, selected, onChange, loadOptions, selectionMode, defaultCollapsed, onClear, className, }: AsyncFacetSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/filters/AsyncFacetSection.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button, Div, Input, Row, Span, Text } from "../../ui";
+import { cn } from "./filterUtils";
+/**
+ * AsyncFacetSection — collapsible filter section that loads options from the API
+ * with search + pagination. Replaces static `FilterFacetSection` for large datasets
+ * (>20 items). Uses the same accordion UX pattern for visual consistency.
+ */
+export function AsyncFacetSection({ title, selected, onChange, loadOptions, selectionMode = "multi", defaultCollapsed = true, onClear, className = "", }) {
+    const [collapsed, setCollapsed] = useState(defaultCollapsed);
+    const [query, setQuery] = useState("");
+    const [options, setOptions] = useState([]);
+    const [page, setPage] = useState(1);
+    const [hasMore, setHasMore] = useState(false);
+    const [loading, setLoading] = useState(false);
+    // label cache so chips show labels even after options change
+    const labelMap = useRef(new Map());
+    const load = useCallback(async (search, nextPage, reset = false) => {
+        setLoading(true);
+        try {
+            const res = await loadOptions(search, nextPage);
+            setOptions((prev) => {
+                const merged = reset ? res.items : [...prev, ...res.items];
+                merged.forEach((o) => labelMap.current.set(o.value, o.label));
+                return merged;
+            });
+            setPage(nextPage);
+            setHasMore(res.hasMore);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [loadOptions]);
+    // Load whenever the section is expanded or query changes
+    useEffect(() => {
+        if (collapsed)
+            return;
+        void load(query, 1, true);
+    }, [collapsed, query, load]);
+    function handleQueryChange(val) {
+        setQuery(val);
+        if (collapsed)
+            setCollapsed(false);
+    }
+    function toggle(value) {
+        if (selectionMode === "single") {
+            onChange(selected.includes(value) ? [] : [value]);
+        }
+        else {
+            onChange(selected.includes(value)
+                ? selected.filter((v) => v !== value)
+                : [...selected, value]);
+        }
+    }
+    const hasValue = selected.length > 0;
+    const selectedLabels = selected
+        .map((v) => labelMap.current.get(v) ?? v)
+        .slice(0, 3);
+    return (_jsxs(Div, { className: cn("p-4 border-b border-zinc-200 dark:border-slate-700 last:border-b-0", className), children: [_jsxs(Row, { gap: "xs", children: [_jsxs(Button, { type: "button", onClick: () => setCollapsed((c) => !c), variant: "ghost", size: "sm", className: "flex flex-1 items-center justify-between text-sm font-semibold text-zinc-900 dark:text-zinc-50 py-1 hover:opacity-80 transition-opacity", "aria-expanded": !collapsed, children: [_jsxs(Row, { as: Span, gap: "xs", children: [title, hasValue && (_jsx(Span, { className: "inline-flex items-center justify-center w-5 h-5 text-xs rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 ring-1 ring-emerald-600/20 dark:ring-emerald-400/20", children: selected.length }))] }), _jsx("svg", { className: cn("w-4 h-4 text-zinc-500 dark:text-zinc-400 transition-transform duration-200", collapsed ? "" : "rotate-180"), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), onClear && hasValue && (_jsx(Button, { type: "button", onClick: onClear, variant: "ghost", size: "sm", className: "inline-flex items-center justify-center w-5 h-5 p-0 text-zinc-500 dark:text-zinc-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-zinc-100 dark:hover:bg-slate-700 transition-colors rounded-full", "aria-label": "Clear filter", children: _jsx("svg", { className: "w-3 h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) }))] }), collapsed && hasValue && (_jsxs(Div, { className: "mt-2 flex flex-wrap gap-1", children: [selectedLabels.map((label) => (_jsx(Span, { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-zinc-100 dark:bg-slate-700 text-zinc-700 dark:text-zinc-300 border border-zinc-200 dark:border-slate-600", children: label }, label))), selected.length > 3 && (_jsxs(Span, { className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs text-zinc-400 dark:text-zinc-500", children: ["+", selected.length - 3, " more"] }))] })), _jsx(Div, { className: "mt-2", children: _jsx(Input, { type: "search", placeholder: "Search\u2026", value: query, onChange: (e) => handleQueryChange(e.target.value), className: "w-full rounded-md border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-2.5 py-1.5 text-xs text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-primary-500/20" }) }), !collapsed && (_jsxs(Div, { className: "mt-3 space-y-1", children: [options.map((opt) => {
+                        const isSelected = selected.includes(opt.value);
+                        return (_jsxs(Row, { gap: "2.5", className: "py-1 cursor-pointer group", children: [_jsx("input", { type: selectionMode === "single" ? "radio" : "checkbox", checked: isSelected, onChange: () => toggle(opt.value), "aria-label": opt.label, className: "flex-shrink-0 w-4 h-4 rounded border-zinc-300 dark:border-slate-600 cursor-pointer text-primary-600 dark:text-secondary-500" }), _jsx(Span, { className: "flex-1 text-sm text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors truncate", children: opt.label }), opt.count !== undefined && (_jsx(Span, { className: "text-xs text-zinc-400 dark:text-zinc-500 tabular-nums flex-shrink-0", children: opt.count }))] }, opt.value));
+                    }), options.length === 0 && !loading && (_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500 py-1", children: "No results" })), loading && (_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500 py-1 animate-pulse", children: "Loading\u2026" })), hasMore && !loading && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "w-full text-xs text-left text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 py-1", onClick: () => void load(query, page + 1), children: "Load more\u2026" }))] }))] }));
+}

package/dist/features/filters/index.d.ts

@@ -1,5 +1,7 @@
 export { FilterFacetSection } from "./FilterFacetSection";
 export type { FilterFacetSectionProps, FacetOption, } from "./FilterFacetSection";
+export { AsyncFacetSection } from "./AsyncFacetSection";
+export type { AsyncFacetSectionProps } from "./AsyncFacetSection";
 export { RangeFilter } from "./RangeFilter";
 export type { RangeFilterProps } from "./RangeFilter";
 export { SwitchFilter } from "./SwitchFilter";

package/dist/features/filters/index.js

@@ -1,5 +1,6 @@
 // Public API for @mohasinac/feat-filters
 export { FilterFacetSection } from "./FilterFacetSection";
+export { AsyncFacetSection } from "./AsyncFacetSection";
 export { RangeFilter } from "./RangeFilter";
 export { SwitchFilter } from "./SwitchFilter";
 export { FilterPanel } from "./FilterPanel";

package/dist/features/forms/Checkbox.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Div, Span } from "../../ui";
+import { Div, Span, Text } from "../../ui";
 import { cn, ERROR_BASE } from "./utils";
 export function Checkbox({ label, suffix, error, indeterminate, className = "", checked, ...props }) {
     const inputRef = React.useRef(null);
@@ -12,5 +12,5 @@ export function Checkbox({ label, suffix, error, indeterminate, className = "",
     }, [indeterminate]);
     return (_jsxs(Div, { className: "w-full", children: [_jsxs("label", { className: "flex flex-row items-center gap-3 cursor-pointer group", children: [_jsxs(Div, { className: "relative flex items-center justify-center flex-shrink-0", children: [_jsx("input", { ref: inputRef, type: "checkbox", checked: checked, className: cn("peer w-5 h-5 rounded-md border-2 cursor-pointer", "transition-all duration-200 appearance-none", error
                                     ? "border-red-400 dark:border-red-500"
-                                    : "border-zinc-300 dark:border-slate-600", "checked:bg-primary-600 checked:border-primary-600", "dark:checked:bg-secondary-500 dark:checked:border-secondary-500", "hover:border-primary-400 dark:hover:border-secondary-400", "focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-1", "dark:focus:ring-secondary-400/30 dark:focus:ring-offset-slate-900", "disabled:opacity-50 disabled:cursor-not-allowed", className), ...props }), _jsx("svg", { className: "absolute w-3 h-3 text-white pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity duration-150", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: indeterminate ? (_jsx("line", { x1: "2", y1: "6", x2: "10", y2: "6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })) : (_jsx("path", { d: "M2 6L5 9L10 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })) })] }), (label || suffix) && (_jsxs(Span, { className: "flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors", children: [label, suffix] }))] }), error && (_jsx("p", { className: cn(ERROR_BASE, "mt-1.5"), role: "alert", children: error }))] }));
+                                    : "border-zinc-300 dark:border-slate-600", "checked:bg-primary-600 checked:border-primary-600", "dark:checked:bg-secondary-500 dark:checked:border-secondary-500", "hover:border-primary-400 dark:hover:border-secondary-400", "focus:outline-none focus:ring-2 focus:ring-primary-500/30 focus:ring-offset-1", "dark:focus:ring-secondary-400/30 dark:focus:ring-offset-slate-900", "disabled:opacity-50 disabled:cursor-not-allowed", className), ...props }), _jsx("svg", { className: "absolute w-3 h-3 text-white pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity duration-150", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: indeterminate ? (_jsx("line", { x1: "2", y1: "6", x2: "10", y2: "6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })) : (_jsx("path", { d: "M2 6L5 9L10 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })) })] }), (label || suffix) && (_jsxs(Span, { className: "flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300 group-hover:text-zinc-900 dark:group-hover:text-zinc-100 transition-colors", children: [label, suffix] }))] }), error && (_jsx(Text, { className: cn(ERROR_BASE, "mt-1.5"), role: "alert", children: error }))] }));
 }

package/dist/features/forms/Input.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Div, Span } from "../../ui";
+import { Div, Span, Text } from "../../ui";
 import { cn, INPUT_BASE, INPUT_ERROR, INPUT_SUCCESS, INPUT_DISABLED, INPUT_WITH_ICON, LABEL_BASE, HELPER_BASE, ERROR_BASE, } from "./utils";
 export const Input = React.forwardRef(function Input({ label, error, helperText, icon, rightIcon, success, className = "", required, disabled, ...props }, ref) {
     const stateClasses = error
@@ -18,6 +18,6 @@ export const Input = React.forwardRef(function Input({ label, error, helperText,
                                 ? `${props.id}-helper`
                                 : undefined, ...props }), rightIcon && (_jsx(Div, { className: cn("absolute right-3 top-1/2 -translate-y-1/2 transition-colors duration-150", error
                             ? "text-red-600 dark:text-red-400"
-                            : "text-zinc-400 dark:text-zinc-500"), children: rightIcon }))] }), error && (_jsx("p", { id: `${props.id}-error`, className: ERROR_BASE, role: "alert", children: error })), !error && helperText && (_jsx("p", { id: `${props.id}-helper`, className: HELPER_BASE, children: helperText }))] }));
+                            : "text-zinc-400 dark:text-zinc-500"), children: rightIcon }))] }), error && (_jsx(Text, { id: `${props.id}-error`, className: ERROR_BASE, role: "alert", children: error })), !error && helperText && (_jsx(Text, { id: `${props.id}-helper`, className: HELPER_BASE, children: helperText }))] }));
 });
 Input.displayName = "Input";

package/dist/features/forms/Radio.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Span } from "../../ui";
+import { Div, Span, Text } from "../../ui";
 import { cn, LABEL_BASE, ERROR_BASE } from "./utils";
 export function RadioGroup({ name, options, value, onChange, label, error, orientation = "vertical", variant = "toggle", }) {
     if (variant === "classic") {
-        return (_jsxs(Div, { className: "w-full", children: [label && _jsx("p", { className: LABEL_BASE, children: label }), _jsx(Div, { className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), children: options.map((option) => {
+        return (_jsxs(Div, { className: "w-full", children: [label && _jsx(Text, { className: LABEL_BASE, children: label }), _jsx(Div, { className: cn("flex gap-3", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), children: options.map((option) => {
                         const isSelected = value === option.value;
                         return (_jsxs("label", { className: cn("flex items-center gap-2.5 cursor-pointer", option.disabled && "opacity-50 cursor-not-allowed"), children: [_jsx("input", { type: "radio", name: name, value: option.value, checked: isSelected, disabled: option.disabled, onChange: () => !option.disabled && onChange?.(option.value), className: "w-4 h-4 text-primary-600 dark:text-secondary-500 border-zinc-300 dark:border-slate-600 focus:ring-primary-500/30 dark:focus:ring-secondary-400/30" }), _jsx(Span, { className: "text-sm text-zinc-700 dark:text-zinc-300", children: option.label })] }, option.value));
-                    }) }), error && (_jsx("p", { className: ERROR_BASE, role: "alert", children: error }))] }));
+                    }) }), error && (_jsx(Text, { className: ERROR_BASE, role: "alert", children: error }))] }));
     }
     // Toggle variant — pill style
-    return (_jsxs(Div, { className: "w-full", children: [label && _jsx("p", { className: LABEL_BASE, children: label }), _jsx(Div, { className: cn("flex gap-2", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), role: "radiogroup", "aria-label": label, children: options.map((option) => {
+    return (_jsxs(Div, { className: "w-full", children: [label && _jsx(Text, { className: LABEL_BASE, children: label }), _jsx(Div, { className: cn("flex gap-2", orientation === "vertical" ? "flex-col" : "flex-row flex-wrap"), role: "radiogroup", "aria-label": label, children: options.map((option) => {
                     const isSelected = value === option.value;
                     return (_jsxs("label", { className: cn("flex items-center justify-center px-4 py-2.5 rounded-xl border text-sm font-medium cursor-pointer transition-all duration-200", isSelected
                             ? "bg-primary-600 dark:bg-secondary-500 border-primary-600 dark:border-secondary-500 text-white shadow-sm"
                             : "border-zinc-200 dark:border-slate-700 text-zinc-700 dark:text-zinc-300 hover:border-primary-400 dark:hover:border-secondary-400 hover:bg-primary-50/50 dark:hover:bg-secondary-900/20", option.disabled && "opacity-50 cursor-not-allowed"), children: [_jsx("input", { type: "radio", name: name, value: option.value, checked: isSelected, disabled: option.disabled, onChange: () => !option.disabled && onChange?.(option.value), className: "sr-only" }), option.label] }, option.value));
-                }) }), error && (_jsx("p", { className: ERROR_BASE, role: "alert", children: error }))] }));
+                }) }), error && (_jsx(Text, { className: ERROR_BASE, role: "alert", children: error }))] }));
 }

package/dist/features/forms/Select.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Div, Span } from "../../ui";
+import { Div, Span, Text } from "../../ui";
 import { cn, INPUT_BASE, INPUT_ERROR, LABEL_BASE, HELPER_BASE, ERROR_BASE, } from "./utils";
 export function Select({ label, error, helperText, options, placeholder, className = "", required, ...props }) {
     return (_jsxs(Div, { className: "w-full", children: [label && (_jsxs("label", { className: LABEL_BASE, children: [label, required && (_jsx(Span, { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" }))] })), _jsxs(Div, { className: "relative group", children: [_jsxs("select", { className: cn(INPUT_BASE, "pr-10 appearance-none cursor-pointer", error ? INPUT_ERROR : "", className), "aria-invalid": error ? "true" : undefined, ...props, children: [placeholder && (_jsx("option", { value: "", disabled: true, children: placeholder })), options.map((option) => (_jsx("option", { value: option.value, children: option.label }, option.value)))] }), _jsx(Div, { className: "absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none transition-colors duration-150", children: _jsx("svg", { className: cn("w-5 h-5 transition-transform duration-200", error
                                 ? "text-red-500 dark:text-red-400"
-                                : "text-zinc-400 dark:text-zinc-500"), viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error && (_jsx("p", { className: ERROR_BASE, role: "alert", children: error })), !error && helperText && _jsx("p", { className: HELPER_BASE, children: helperText })] }));
+                                : "text-zinc-400 dark:text-zinc-500"), viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", clipRule: "evenodd" }) }) })] }), error && (_jsx(Text, { className: ERROR_BASE, role: "alert", children: error })), !error && helperText && _jsx(Text, { className: HELPER_BASE, children: helperText })] }));
 }

package/dist/features/forms/Slider.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Div, Row, Span } from "../../ui";
+import { Div, Row, Span, Text } from "../../ui";
 import { cn, LABEL_BASE, ERROR_BASE } from "./utils";
 /**
  * Slider — single-thumb range slider.
@@ -18,5 +18,5 @@ export function Slider({ value: controlledValue, defaultValue = 0, min = 0, max
         onChange?.(newVal);
     };
     const displayValue = formatValue ? formatValue(value) : String(value);
-    return (_jsxs(Div, { className: cn("w-full space-y-2", className), children: [(label || showValue) && (_jsxs(Row, { justify: "between", children: [label && (_jsx("label", { htmlFor: sliderId, className: LABEL_BASE, children: label })), showValue && (_jsx(Span, { className: "text-sm font-semibold tabular-nums text-zinc-900 dark:text-zinc-100", children: displayValue }))] })), _jsxs(Row, { className: "relative h-5", children: [_jsx(Div, { className: "absolute inset-y-0 flex items-center w-full", children: _jsx(Div, { className: "w-full h-1.5 rounded-full bg-zinc-200 dark:bg-slate-700", children: _jsx(Div, { className: "h-full rounded-full bg-primary-500 dark:bg-secondary-500 transition-all", style: { width: `${pct}%` } }) }) }), _jsx("input", { type: "range", id: sliderId, min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, className: cn("relative w-full appearance-none bg-transparent cursor-pointer", "focus:outline-none", "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4", "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-500 dark:[&::-webkit-slider-thumb]:border-secondary-500", "[&::-webkit-slider-thumb]:shadow-sm", "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4", "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white", "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary-500 dark:[&::-moz-range-thumb]:border-secondary-500", disabled && "opacity-50 cursor-not-allowed") })] }), _jsxs(Row, { justify: "between", className: "text-xs text-zinc-400 dark:text-zinc-500", children: [_jsx(Span, { children: formatValue ? formatValue(min) : min }), _jsx(Span, { children: formatValue ? formatValue(max) : max })] }), error && (_jsx("p", { className: ERROR_BASE, role: "alert", children: error }))] }));
+    return (_jsxs(Div, { className: cn("w-full space-y-2", className), children: [(label || showValue) && (_jsxs(Row, { justify: "between", children: [label && (_jsx("label", { htmlFor: sliderId, className: LABEL_BASE, children: label })), showValue && (_jsx(Span, { className: "text-sm font-semibold tabular-nums text-zinc-900 dark:text-zinc-100", children: displayValue }))] })), _jsxs(Row, { className: "relative h-5", children: [_jsx(Div, { className: "absolute inset-y-0 flex items-center w-full", children: _jsx(Div, { className: "w-full h-1.5 rounded-full bg-zinc-200 dark:bg-slate-700", children: _jsx(Div, { className: "h-full rounded-full bg-primary-500 dark:bg-secondary-500 transition-all", style: { width: `${pct}%` } }) }) }), _jsx("input", { type: "range", id: sliderId, min: min, max: max, step: step, value: value, disabled: disabled, onChange: handleChange, className: cn("relative w-full appearance-none bg-transparent cursor-pointer", "focus:outline-none", "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4", "[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-white", "[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary-500 dark:[&::-webkit-slider-thumb]:border-secondary-500", "[&::-webkit-slider-thumb]:shadow-sm", "[&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4", "[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-white", "[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary-500 dark:[&::-moz-range-thumb]:border-secondary-500", disabled && "opacity-50 cursor-not-allowed") })] }), _jsxs(Row, { justify: "between", className: "text-xs text-zinc-400 dark:text-zinc-500", children: [_jsx(Span, { children: formatValue ? formatValue(min) : min }), _jsx(Span, { children: formatValue ? formatValue(max) : max })] }), error && (_jsx(Text, { className: ERROR_BASE, role: "alert", children: error }))] }));
 }

package/dist/features/forms/Textarea.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { Div, Span } from "../../ui";
+import { Div, Span, Text } from "../../ui";
 import { cn, INPUT_BASE, INPUT_ERROR, LABEL_BASE, HELPER_BASE, ERROR_BASE, } from "./utils";
 export const Textarea = React.forwardRef(function Textarea({ label, error, helperText, showCharCount, className = "", required, maxLength, value, defaultValue, ...props }, ref) {
     const charCount = typeof value === "string"
@@ -8,7 +8,7 @@ export const Textarea = React.forwardRef(function Textarea({ label, error, helpe
         : typeof defaultValue === "string"
             ? defaultValue.length
             : 0;
-    return (_jsxs(Div, { className: "w-full", children: [label && (_jsxs("label", { className: LABEL_BASE, children: [label, required && (_jsx(Span, { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" }))] })), _jsx("textarea", { ref: ref, className: cn(INPUT_BASE, "resize-y min-h-[80px]", error ? INPUT_ERROR : "", className), "aria-invalid": error ? "true" : undefined, maxLength: maxLength, value: value, defaultValue: defaultValue, ...props }), _jsxs(Div, { className: "flex items-center justify-between mt-1.5", children: [_jsxs(Div, { className: "flex-1", children: [error && (_jsx("p", { className: ERROR_BASE, role: "alert", children: error })), !error && helperText && (_jsx("p", { className: HELPER_BASE, children: helperText }))] }), showCharCount && maxLength && (_jsxs("p", { className: cn("text-xs tabular-nums ml-2 flex-shrink-0", charCount >= maxLength
+    return (_jsxs(Div, { className: "w-full", children: [label && (_jsxs("label", { className: LABEL_BASE, children: [label, required && (_jsx(Span, { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" }))] })), _jsx("textarea", { ref: ref, className: cn(INPUT_BASE, "resize-y min-h-[80px]", error ? INPUT_ERROR : "", className), "aria-invalid": error ? "true" : undefined, maxLength: maxLength, value: value, defaultValue: defaultValue, ...props }), _jsxs(Div, { className: "flex items-center justify-between mt-1.5", children: [_jsxs(Div, { className: "flex-1", children: [error && (_jsx(Text, { className: ERROR_BASE, role: "alert", children: error })), !error && helperText && (_jsx(Text, { className: HELPER_BASE, children: helperText }))] }), showCharCount && maxLength && (_jsxs("p", { className: cn("text-xs tabular-nums ml-2 flex-shrink-0", charCount >= maxLength
                             ? "text-red-500 dark:text-red-400"
                             : "text-zinc-400 dark:text-zinc-500"), children: [charCount, " / ", maxLength] }))] })] }));
 });

package/dist/features/homepage/api/[id]/route.js

@@ -12,6 +12,7 @@ import { NextResponse } from "next/server.js";
 import { z } from "zod";
 import { getProviders } from "../../../../contracts";
 import { createRouteHandler } from "../../../../next";
+const ERR_SECTION_NOT_FOUND = "Section not found";
 // ---- GET /api/homepage-sections/[id] ----------------------------------------
 export async function GET(_request, context) {
     try {
@@ -23,7 +24,7 @@ export async function GET(_request, context) {
         const repo = db.getRepository("homepageSections");
         const section = await repo.findById(id);
         if (!section) {
-            return NextResponse.json({ success: false, error: "Section not found" }, { status: 404 });
+            return NextResponse.json({ success: false, error: ERR_SECTION_NOT_FOUND }, { status: 404 });
         }
         return NextResponse.json({ success: true, data: section });
     }
@@ -71,7 +72,7 @@ export const homepageSectionItemPATCH = createRouteHandler({
         const repo = db.getRepository("homepageSections");
         const section = await repo.findById(id);
         if (!section)
-            return NextResponse.json({ success: false, error: "Section not found" }, { status: 404 });
+            return NextResponse.json({ success: false, error: ERR_SECTION_NOT_FOUND }, { status: 404 });
         const updated = await repo.update(id, {
             ...body,
             updatedAt: new Date().toISOString(),
@@ -93,7 +94,7 @@ export const homepageSectionItemDELETE = createRouteHandler({
         const repo = db.getRepository("homepageSections");
         const section = await repo.findById(id);
         if (!section)
-            return NextResponse.json({ success: false, error: "Section not found" }, { status: 404 });
+            return NextResponse.json({ success: false, error: ERR_SECTION_NOT_FOUND }, { status: 404 });
         await repo.delete(id);
         return NextResponse.json({ success: true });
     },

package/dist/features/homepage/api/sections/[id]/route.js

@@ -10,15 +10,18 @@
  */
 import { NextResponse } from "next/server.js";
 import { getProviders } from "../../../../../contracts";
+const ERR_SECTION_ID_REQUIRED = "Section ID is required";
+const ERR_DB_NOT_CONFIGURED = "Database provider not configured";
+const ERR_INTERNAL_SERVER_ERROR = "Internal server error";
 export async function GET(request, { params }) {
     try {
         const { id } = await params;
         if (!id) {
-            return NextResponse.json({ success: false, error: "Section ID required" }, { status: 400 });
+            return NextResponse.json({ success: false, error: ERR_SECTION_ID_REQUIRED }, { status: 400 });
         }
         const { db } = getProviders();
         if (!db)
-            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_CONFIGURED }, { status: 503 });
         const repo = db.getRepository("homepage_sections");
         const section = await repo.findById(id);
         if (!section) {
@@ -32,7 +35,7 @@ export async function GET(request, { params }) {
     catch (error) {
         return NextResponse.json({
             success: false,
-            error: error instanceof Error ? error.message : "Internal server error",
+            error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
         }, { status: 500 });
     }
 }
@@ -40,12 +43,12 @@ export async function PATCH(request, { params }) {
     try {
         const { id } = await params;
         if (!id) {
-            return NextResponse.json({ success: false, error: "Section ID required" }, { status: 400 });
+            return NextResponse.json({ success: false, error: ERR_SECTION_ID_REQUIRED }, { status: 400 });
         }
         const body = await request.json();
         const { db } = getProviders();
         if (!db)
-            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_CONFIGURED }, { status: 503 });
         const repo = db.getRepository("homepage_sections");
         const updated = await repo.update(id, body);
         if (!updated) {
@@ -59,7 +62,7 @@ export async function PATCH(request, { params }) {
     catch (error) {
         return NextResponse.json({
             success: false,
-            error: error instanceof Error ? error.message : "Internal server error",
+            error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
         }, { status: 500 });
     }
 }
@@ -67,11 +70,11 @@ export async function DELETE(request, { params }) {
     try {
         const { id } = await params;
         if (!id) {
-            return NextResponse.json({ success: false, error: "Section ID required" }, { status: 400 });
+            return NextResponse.json({ success: false, error: ERR_SECTION_ID_REQUIRED }, { status: 400 });
         }
         const { db } = getProviders();
         if (!db)
-            return NextResponse.json({ success: false, error: "DB not configured" }, { status: 503 });
+            return NextResponse.json({ success: false, error: ERR_DB_NOT_CONFIGURED }, { status: 503 });
         const repo = db.getRepository("homepage_sections");
         await repo.delete(id);
         return NextResponse.json({
@@ -82,7 +85,7 @@ export async function DELETE(request, { params }) {
     catch (error) {
         return NextResponse.json({
             success: false,
-            error: error instanceof Error ? error.message : "Internal server error",
+            error: error instanceof Error ? error.message : ERR_INTERNAL_SERVER_ERROR,
         }, { status: 500 });
     }
 }

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

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import { getAdSlot, isAdSlotRenderable } from "../ad-registry";
 import { useActiveAd } from "../hooks/useActiveAd";
+import { Text } from "../../../ui";
 // ---------------------------------------------------------------------------
 // Sub-renderers
 // ---------------------------------------------------------------------------
@@ -31,7 +32,7 @@ function ManualAdBanner({ ad }) {
     const { creative } = ad;
     if (!creative)
         return null;
-    return (_jsxs("a", { href: creative.ctaHref || "#", target: creative.ctaHref ? "_blank" : undefined, rel: "noopener noreferrer", className: "flex items-center gap-3 w-full overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800 px-4 py-3 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors no-underline", children: [creative.imageUrl ? (_jsx("img", { src: creative.imageUrl, alt: creative.title || "Advertisement", className: "h-14 w-14 rounded object-cover flex-shrink-0", loading: "lazy" })) : null, _jsxs("div", { className: "flex-1 min-w-0", children: [creative.title ? (_jsx("p", { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 truncate", children: creative.title })) : null, creative.body ? (_jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: creative.body })) : null] }), creative.ctaLabel ? (_jsx("span", { className: "flex-shrink-0 rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-white", children: creative.ctaLabel })) : null] }));
+    return (_jsxs("a", { href: creative.ctaHref || "#", target: creative.ctaHref ? "_blank" : undefined, rel: "noopener noreferrer", className: "flex items-center gap-3 w-full overflow-hidden rounded-lg bg-zinc-100 dark:bg-zinc-800 px-4 py-3 hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-colors no-underline", children: [creative.imageUrl ? (_jsx("img", { src: creative.imageUrl, alt: creative.title || "Advertisement", className: "h-14 w-14 rounded object-cover flex-shrink-0", loading: "lazy" })) : null, _jsxs("div", { className: "flex-1 min-w-0", children: [creative.title ? (_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100 truncate", children: creative.title })) : null, creative.body ? (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: creative.body })) : null] }), creative.ctaLabel ? (_jsx("span", { className: "flex-shrink-0 rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-white", children: creative.ctaLabel })) : null] }));
 }
 // ---------------------------------------------------------------------------
 // Primary component

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

@@ -3,18 +3,20 @@ import { THEME_CONSTANTS } from "../../../tokens";
 import { Button, Heading, Row, Section, Span, Text } from "../../../ui";
 import { MediaImage } from "../../media/MediaImage";
 import { ArrowRight, Sparkles } from "lucide-react";
+// --- Constants ---------------------------------------------------------------
+const CLS_CONTAINER = "w-full max-w-7xl mx-auto";
 // --- Component ---------------------------------------------------------------
 export function AdvertisementBanner({ title, subtitle, ctaLabel = "Shop now", onCtaClick, backgroundImage, backgroundColor, tagLabel, isLoading = false, compact = false, className = "", }) {
     const wrapClass = "bg-gradient-to-br from-amber-50/40 to-orange-50/20 dark:from-amber-950/10 dark:to-orange-950/5";
     if (isLoading) {
-        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", "data-section": "advertisementbanner-div-297", children: _jsx("div", { className: "h-72 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" }) }) }));
+        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: CLS_CONTAINER, "data-section": "advertisementbanner-div-297", children: _jsx("div", { className: "h-72 bg-zinc-200 dark:bg-slate-700 rounded-2xl animate-pulse" }) }) }));
     }
     // -- Split layout: when a backgroundImage is provided --
     if (backgroundImage) {
-        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", "data-section": "advertisementbanner-div-298", children: _jsx("div", { className: "relative overflow-hidden rounded-2xl bg-zinc-900 shadow-xl", "data-section": "advertisementbanner-div-299", children: _jsxs("div", { className: `${THEME_CONSTANTS.grid.cols2Md} min-h-[clamp(300px,40vh,420px)]`, "data-section": "advertisementbanner-div-300", children: [_jsxs("div", { className: `relative ${THEME_CONSTANTS.card.aspectBanner} order-last md:order-first min-h-0 min-h-[clamp(300px,40vh,420px)]`, "data-section": "advertisementbanner-div-301", children: [_jsx(MediaImage, { src: backgroundImage, alt: title, size: "banner", priority: true }), _jsx("div", { className: "hidden md:block absolute inset-y-0 right-0 w-24 bg-gradient-to-r from-transparent to-zinc-900/60 pointer-events-none" })] }), _jsxs("div", { className: "relative flex flex-col justify-center px-8 py-10 md:px-12 md:py-14", "data-section": "advertisementbanner-div-302", children: [_jsx("div", { className: "absolute top-0 right-0 w-32 h-32 opacity-10 pointer-events-none bg-[radial-gradient(circle,_white_1px,_transparent_1px)] bg-[length:12px_12px]", "aria-hidden": true }), tagLabel && (_jsxs("div", { className: "inline-flex items-center gap-1.5 self-start bg-white/10 text-white/80 text-xs font-semibold uppercase tracking-widest px-3 py-1 rounded-full mb-5 backdrop-blur-sm", "data-section": "advertisementbanner-div-303", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4 leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/75 text-base md:text-lg mb-8 leading-relaxed", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: "self-start bg-white text-zinc-900 hover:bg-zinc-100 font-semibold shadow-lg gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
+        return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: CLS_CONTAINER, "data-section": "advertisementbanner-div-298", children: _jsx("div", { className: "relative overflow-hidden rounded-2xl bg-zinc-900 shadow-xl", "data-section": "advertisementbanner-div-299", children: _jsxs("div", { className: `${THEME_CONSTANTS.grid.cols2Md} min-h-[clamp(300px,40vh,420px)]`, "data-section": "advertisementbanner-div-300", children: [_jsxs("div", { className: `relative ${THEME_CONSTANTS.card.aspectBanner} order-last md:order-first min-h-0 min-h-[clamp(300px,40vh,420px)]`, "data-section": "advertisementbanner-div-301", children: [_jsx(MediaImage, { src: backgroundImage, alt: title, size: "banner", priority: true }), _jsx("div", { className: "hidden md:block absolute inset-y-0 right-0 w-24 bg-gradient-to-r from-transparent to-zinc-900/60 pointer-events-none" })] }), _jsxs("div", { className: "relative flex flex-col justify-center px-8 py-10 md:px-12 md:py-14", "data-section": "advertisementbanner-div-302", children: [_jsx("div", { className: "absolute top-0 right-0 w-32 h-32 opacity-10 pointer-events-none bg-[radial-gradient(circle,_white_1px,_transparent_1px)] bg-[length:12px_12px]", "aria-hidden": true }), tagLabel && (_jsxs("div", { className: "inline-flex items-center gap-1.5 self-start bg-white/10 text-white/80 text-xs font-semibold uppercase tracking-widest px-3 py-1 rounded-full mb-5 backdrop-blur-sm", "data-section": "advertisementbanner-div-303", children: [_jsx(Sparkles, { className: "w-3.5 h-3.5" }), tagLabel] })), _jsx(Heading, { level: 2, variant: "none", className: "text-3xl md:text-4xl lg:text-5xl font-extrabold text-white mb-4 leading-tight", children: title }), subtitle && (_jsx(Text, { variant: "none", className: "text-white/75 text-base md:text-lg mb-8 leading-relaxed", children: subtitle })), ctaLabel && onCtaClick && (_jsxs(Button, { variant: "secondary", size: "lg", onClick: onCtaClick, className: "self-start bg-white text-zinc-900 hover:bg-zinc-100 font-semibold shadow-lg gap-2", children: [ctaLabel, _jsx(ArrowRight, { className: "w-4 h-4" })] }))] })] }) }) }) }));
     }
     // -- Full-width gradient layout --
-    return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: "w-full max-w-7xl mx-auto", "data-section": "advertisementbanner-div-304", children: _jsxs("div", { className: [
+    return (_jsx(Section, { className: `p-8 ${wrapClass} ${className}`, children: _jsx("div", { className: CLS_CONTAINER, "data-section": "advertisementbanner-div-304", children: _jsxs("div", { className: [
                     "relative overflow-hidden rounded-2xl flex items-center",
                     compact
                         ? "h-[clamp(112px,16vh,160px)]"

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

@@ -1,5 +1,5 @@
 "use client";
-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 { useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
@@ -39,5 +39,5 @@ export function BrandsSection({ title = "Top Brands", subtitle, limit = 12, view
     });
     if (!isLoading && allBrands.length === 0)
         return null;
-    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1 text-sm", children: subtitle }))] }), !cta && viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel }))] }), showFeaturedChip && !isLoading && (_jsxs("div", { className: "mb-4 flex flex-wrap gap-2", children: [_jsx(BrandFilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), _jsx(BrandFilterChip, { label: "Featured", active: activeFilter === "featured", onClick: () => setActiveFilter(activeFilter === "featured" ? "all" : "featured") })] })), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-hidden", children: Array.from({ length: 8 }).map((_, i) => (_jsx("div", { className: "h-24 w-28 flex-none animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false })), cta && !isLoading && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) }))] }) }));
+    return (_jsx(Section, { className: `py-12 px-4 ${themed.bgSecondary} ${className}`, children: _jsxs("div", { className: "mx-auto max-w-7xl", children: [_jsxs("div", { className: "mb-6 flex items-center justify-between", children: [_jsxs(_Fragment, { children: [_jsx(Heading, { level: 2, className: `text-2xl font-bold md:text-3xl ${themed.textPrimary}`, children: title }), subtitle && (_jsx(Text, { variant: "secondary", className: "mt-1 text-sm", children: subtitle }))] }), !cta && viewMoreHref && (_jsx(Link, { href: viewMoreHref, className: "text-sm font-medium text-[var(--appkit-color-primary)] hover:underline", children: viewMoreLabel }))] }), showFeaturedChip && !isLoading && (_jsxs("div", { className: "mb-4 flex flex-wrap gap-2", children: [_jsx(BrandFilterChip, { label: "All", active: activeFilter === "all", onClick: () => setActiveFilter("all") }), _jsx(BrandFilterChip, { label: "Featured", active: activeFilter === "featured", onClick: () => setActiveFilter(activeFilter === "featured" ? "all" : "featured") })] })), isLoading ? (_jsx("div", { className: "flex gap-3 overflow-hidden", children: Array.from({ length: 8 }).map((_, i) => (_jsx("div", { className: "h-24 w-28 flex-none animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700" }, i))) })) : (_jsx(HorizontalScroller, { items: brands, renderItem: (brand) => _jsx(BrandLogo, { brand: brand }), keyExtractor: (brand) => brand.id, gap: 12, showArrows: true, showScrollbar: false })), cta && !isLoading && (_jsx("div", { className: "mt-6 text-center", children: _jsx(Link, { href: cta.href, className: CTA_CLASSES[cta.variant], children: cta.label }) }))] }) }));
 }

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link";
-import { Section } from "../../../ui";
+import { Heading, Section, Text } from "../../../ui";
 export function CTABannerSection({ title = "Thousands of collectibles. One marketplace.", subtitle, primaryLabel = "Shop All Products →", primaryHref = "/products", secondaryLabel = "Browse Auctions →", secondaryHref = "/auctions", className = "", }) {
-    return (_jsx(Section, { className: `bg-gradient-to-r from-primary-600 to-primary-700 py-16 px-4 ${className}`, children: _jsxs("div", { className: "mx-auto max-w-3xl text-center", "data-section": "ctabannersection-div-313", children: [_jsx("span", { className: "mb-4 inline-block text-2xl", "aria-hidden": "true", children: "\u2728" }), _jsx("h2", { className: "text-2xl font-bold text-white md:text-3xl lg:text-4xl", children: title }), subtitle && (_jsx("p", { className: "mt-3 text-base text-white/80", children: subtitle })), _jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-4", "data-section": "ctabannersection-div-314", children: [_jsx(Link, { href: primaryHref, className: "inline-flex items-center rounded-full bg-white px-8 py-3 text-sm font-semibold text-primary-700 shadow-sm transition-all hover:bg-zinc-50 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: primaryLabel }), secondaryHref && (_jsx(Link, { href: secondaryHref, className: "inline-flex items-center rounded-full border-2 border-white/80 px-8 py-3 text-sm font-semibold text-white transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: secondaryLabel }))] })] }) }));
+    return (_jsx(Section, { className: `bg-gradient-to-r from-primary-600 to-primary-700 py-16 px-4 ${className}`, children: _jsxs("div", { className: "mx-auto max-w-3xl text-center", "data-section": "ctabannersection-div-313", children: [_jsx("span", { className: "mb-4 inline-block text-2xl", "aria-hidden": "true", children: "\u2728" }), _jsx(Heading, { level: 2, className: "text-2xl font-bold text-white md:text-3xl lg:text-4xl", children: title }), subtitle && (_jsx(Text, { className: "mt-3 text-base text-white/80", children: subtitle })), _jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-4", "data-section": "ctabannersection-div-314", children: [_jsx(Link, { href: primaryHref, className: "inline-flex items-center rounded-full bg-white px-8 py-3 text-sm font-semibold text-primary-700 shadow-sm transition-all hover:bg-zinc-50 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: primaryLabel }), secondaryHref && (_jsx(Link, { href: secondaryHref, className: "inline-flex items-center rounded-full border-2 border-white/80 px-8 py-3 text-sm font-semibold text-white transition-all hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600", children: secondaryLabel }))] })] }) }));
 }

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

@@ -1,11 +1,11 @@
-import type { CharacterHotspotConfig, HotspotPin } from "../types";
+import type { CharacterHotspotConfig, HotspotPin as HotspotPinData } from "../types";
 export interface CharacterHotspotProps {
     config?: CharacterHotspotConfig | null;
     /**
      * Override the default fallback hotspot pins shown when no config is supplied.
      * Useful for non-collectibles storefronts.
      */
-    defaultHotspots?: HotspotPin[];
+    defaultHotspots?: HotspotPinData[];
     /** Universe quick-browse links shown below the panorama. */
     universeLinks?: {
         label: string;