@mohasinac/appkit 2.8.9 → 3.0.0

package/dist/features/admin/components/AdminSectionsView.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { ProductInlineSelect } from "../../seller/components/ProductInlineSelect";
 import { CategoryInlineSelect } from "../../seller/components/CategoryInlineSelect";
-import { Button, Checkbox, ConfirmDeleteModal, Div, Form, FormActions, Input, Modal, Select, Stack, Text, Textarea, useToast, } from "../../../ui";
+import { Button, Checkbox, ConfirmDeleteModal, Div, Form, FormActions, Input, Modal, Row, Select, Stack, Text, Textarea, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS, DEMO_ENDPOINTS } from "../../../constants";
 import { useAdminSectionsListing } from "../hooks/useAdminSectionsListing";
@@ -165,7 +166,7 @@ export function AdminSectionsView({ children }) {
         setReorderServerSnapshot(normalized);
         setReorderUndoStack([]);
     }, [sections]);
-    const saveSection = useMutation({
+    const saveSection = useApiMutation({
         mutationFn: async () => {
             let parsedConfig;
             try {
@@ -204,7 +205,7 @@ export function AdminSectionsView({ children }) {
             toast.showToast(error instanceof Error ? error.message : "Failed to save section.", "error");
         },
     });
-    const resetSeed = useMutation({
+    const resetSeed = useApiMutation({
         mutationFn: () => apiClient.post(DEMO_ENDPOINTS.SEED, {
             action: "load",
             collections: ["homepageSections"],
@@ -218,7 +219,7 @@ export function AdminSectionsView({ children }) {
             toast.showToast("Seed reset failed.", "error");
         },
     });
-    const reorderSections = useMutation({
+    const reorderSections = useApiMutation({
         mutationFn: async () => {
             await Promise.all(reorderDraft.map((item) => apiClient.patch(`${ADMIN_ENDPOINTS.SECTIONS}/${item.id}`, {
                 order: item.order,
@@ -499,13 +500,13 @@ export function AdminSectionsView({ children }) {
         setReorderDraft(cloneReorderItems(latest));
     }
     function renderProductsCategorySelectors() {
-        return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No categories available." })) : (_jsx(Div, { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: productsBuilder.selectedCategoryIds.includes(category.id), label: category.name, onChange: (event) => setProductsBuilder((prev) => ({
+        return (_jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { size: "sm", color: "muted", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { size: "sm", color: "muted", children: "No categories available." })) : (_jsx(Div, { layout: "grid", gap: "2", className: "grid-cols-1 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: productsBuilder.selectedCategoryIds.includes(category.id), label: category.name, onChange: (event) => setProductsBuilder((prev) => ({
                             ...prev,
                             selectedCategoryIds: toggleCategorySelection(prev.selectedCategoryIds, category.id, event.target.checked),
                         })) }, category.id))) }))] }));
     }
     function renderProductsBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Products Carousel Builder" }), _jsx(Input, { label: "Section title", value: productsBuilder.title, onChange: (event) => setProductsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: productsBuilder.subtitle, onChange: (event) => setProductsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max products", type: "number", min: 1, max: 50, value: String(productsBuilder.maxItems), onChange: (event) => setProductsBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Products Carousel Builder" }), _jsx(Input, { label: "Section title", value: productsBuilder.title, onChange: (event) => setProductsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: productsBuilder.subtitle, onChange: (event) => setProductsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max products", type: "number", min: 1, max: 50, value: String(productsBuilder.maxItems), onChange: (event) => setProductsBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Number(event.target.value) || 1),
                     })) }), _jsx(Select, { label: "Status filter", value: productsBuilder.status, onValueChange: (value) => setProductsBuilder((prev) => ({
@@ -536,13 +537,13 @@ export function AdminSectionsView({ children }) {
                     })) })] }));
     }
     function renderAuctionsCategorySelectors() {
-        return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No categories available." })) : (_jsx(Div, { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: auctionsBuilder.selectedCategoryIds.includes(category.id), label: category.name, onChange: (event) => setAuctionsBuilder((prev) => ({
+        return (_jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { size: "sm", color: "muted", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { size: "sm", color: "muted", children: "No categories available." })) : (_jsx(Div, { layout: "grid", gap: "2", className: "grid-cols-1 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: auctionsBuilder.selectedCategoryIds.includes(category.id), label: category.name, onChange: (event) => setAuctionsBuilder((prev) => ({
                             ...prev,
                             selectedCategoryIds: toggleCategorySelection(prev.selectedCategoryIds, category.id, event.target.checked),
                         })) }, category.id))) }))] }));
     }
     function renderAuctionsBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Auctions Carousel Builder" }), _jsx(Input, { label: "Section title", value: auctionsBuilder.title, onChange: (event) => setAuctionsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: auctionsBuilder.subtitle, onChange: (event) => setAuctionsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max auctions", type: "number", min: 1, max: 50, value: String(auctionsBuilder.maxItems), onChange: (event) => setAuctionsBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Auctions Carousel Builder" }), _jsx(Input, { label: "Section title", value: auctionsBuilder.title, onChange: (event) => setAuctionsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: auctionsBuilder.subtitle, onChange: (event) => setAuctionsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max auctions", type: "number", min: 1, max: 50, value: String(auctionsBuilder.maxItems), onChange: (event) => setAuctionsBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Number(event.target.value) || 1),
                     })) }), _jsx(Select, { label: "Status filter", value: auctionsBuilder.status, onValueChange: (value) => setAuctionsBuilder((prev) => ({
@@ -568,7 +569,7 @@ export function AdminSectionsView({ children }) {
                     })) })] }));
     }
     function renderStatsBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Stats Section Builder" }), _jsx(Input, { label: "Section title", value: statsBuilder.title, onChange: (event) => setStatsBuilder((prev) => ({ ...prev, title: event.target.value })), helperText: "Optional internal title for stats configuration." }), statsBuilder.stats.map((stat, index) => (_jsxs(Div, { className: `space-y-3 rounded-md border border-zinc-200 ${__P.p3} dark:border-slate-700`, children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Stat ", index + 1] }), _jsx(Input, { label: "Key", value: stat.key, onChange: (event) => setStatsBuilder((prev) => {
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Stats Section Builder" }), _jsx(Input, { label: "Section title", value: statsBuilder.title, onChange: (event) => setStatsBuilder((prev) => ({ ...prev, title: event.target.value })), helperText: "Optional internal title for stats configuration." }), statsBuilder.stats.map((stat, index) => (_jsxs(Stack, { className: `${__P.p3}`, gap: "3", rounded: "md", border: "default", children: [_jsxs(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: ["Stat ", index + 1] }), _jsx(Input, { label: "Key", value: stat.key, onChange: (event) => setStatsBuilder((prev) => {
                                 const next = [...prev.stats];
                                 next[index] = { ...next[index], key: event.target.value };
                                 return { ...prev, stats: next };
@@ -583,10 +584,10 @@ export function AdminSectionsView({ children }) {
                             }) })] }, `stat-row-${index}`)))] }));
     }
     function renderCategorySelector(selectedIds, onToggle) {
-        return (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No categories available." })) : (_jsx(Div, { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: selectedIds.includes(category.id), label: category.name, onChange: (event) => onToggle(category.id, event.target.checked) }, category.id))) }))] }));
+        return (_jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { size: "sm", color: "muted", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { size: "sm", color: "muted", children: "No categories available." })) : (_jsx(Div, { layout: "grid", gap: "2", className: "grid-cols-1 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: selectedIds.includes(category.id), label: category.name, onChange: (event) => onToggle(category.id, event.target.checked) }, category.id))) }))] }));
     }
     function renderPreOrdersBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Pre-Orders Carousel Builder" }), _jsx(Input, { label: "Section title", value: preOrdersBuilder.title, onChange: (event) => setPreOrdersBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: preOrdersBuilder.subtitle, onChange: (event) => setPreOrdersBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max pre-orders", type: "number", min: 1, max: 50, value: String(preOrdersBuilder.maxItems), onChange: (event) => setPreOrdersBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Pre-Orders Carousel Builder" }), _jsx(Input, { label: "Section title", value: preOrdersBuilder.title, onChange: (event) => setPreOrdersBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: preOrdersBuilder.subtitle, onChange: (event) => setPreOrdersBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max pre-orders", type: "number", min: 1, max: 50, value: String(preOrdersBuilder.maxItems), onChange: (event) => setPreOrdersBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Number(event.target.value) || 1),
                     })) }), _jsx(Select, { label: "Status filter", value: preOrdersBuilder.status, onValueChange: (value) => setPreOrdersBuilder((prev) => ({
@@ -617,7 +618,7 @@ export function AdminSectionsView({ children }) {
                     })) })] }));
     }
     function renderStoresBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Stores Section Builder" }), _jsx(Input, { label: "Section title", value: storesBuilder.title, onChange: (event) => setStoresBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: storesBuilder.subtitle, onChange: (event) => setStoresBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max stores", type: "number", min: 1, max: 30, value: String(storesBuilder.maxItems), onChange: (event) => setStoresBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Stores Section Builder" }), _jsx(Input, { label: "Section title", value: storesBuilder.title, onChange: (event) => setStoresBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: storesBuilder.subtitle, onChange: (event) => setStoresBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max stores", type: "number", min: 1, max: 30, value: String(storesBuilder.maxItems), onChange: (event) => setStoresBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Number(event.target.value) || 1),
                     })) }), _jsx(Select, { label: "Status filter", value: storesBuilder.status, onValueChange: (value) => setStoresBuilder((prev) => ({
@@ -654,7 +655,7 @@ export function AdminSectionsView({ children }) {
                     })) })] }));
     }
     function renderEventsBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Events Section Builder" }), _jsx(Input, { label: "Section title", value: eventsBuilder.title, onChange: (event) => setEventsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: eventsBuilder.subtitle, onChange: (event) => setEventsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max events", type: "number", min: 1, max: 30, value: String(eventsBuilder.maxItems), onChange: (event) => setEventsBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Events Section Builder" }), _jsx(Input, { label: "Section title", value: eventsBuilder.title, onChange: (event) => setEventsBuilder((prev) => ({ ...prev, title: event.target.value })) }), _jsx(Input, { label: "Subtitle", value: eventsBuilder.subtitle, onChange: (event) => setEventsBuilder((prev) => ({ ...prev, subtitle: event.target.value })) }), _jsx(Input, { label: "Max events", type: "number", min: 1, max: 30, value: String(eventsBuilder.maxItems), onChange: (event) => setEventsBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Number(event.target.value) || 1),
                     })) }), _jsx(Select, { label: "Status filter", value: eventsBuilder.status, onValueChange: (value) => setEventsBuilder((prev) => ({
@@ -691,7 +692,7 @@ export function AdminSectionsView({ children }) {
                     })) })] }));
     }
     function renderFAQBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "FAQ Section Builder" }), _jsx(Input, { label: "Section title", value: faqBuilder.title, onChange: (e) => setFaqBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: faqBuilder.subtitle, onChange: (e) => setFaqBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Input, { label: "Display count", type: "number", min: 1, max: 20, value: String(faqBuilder.displayCount), onChange: (e) => setFaqBuilder((prev) => ({ ...prev, displayCount: Math.min(20, Math.max(1, Number(e.target.value) || 1)) })) }), _jsx(Checkbox, { checked: faqBuilder.showOnHomepage, label: "Show on homepage", onChange: (e) => setFaqBuilder((prev) => ({ ...prev, showOnHomepage: e.target.checked })) }), _jsx(Checkbox, { checked: faqBuilder.expandedByDefault, label: "Expanded by default", onChange: (e) => setFaqBuilder((prev) => ({ ...prev, expandedByDefault: e.target.checked })) }), _jsx(Checkbox, { checked: faqBuilder.linkToFullPage, label: "Link to full FAQ page", onChange: (e) => setFaqBuilder((prev) => ({ ...prev, linkToFullPage: e.target.checked })) }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Categories" }), _jsx(Div, { className: "grid grid-cols-2 gap-2", children: FAQ_CATEGORY_OPTIONS.map((opt) => (_jsx(Checkbox, { checked: faqBuilder.categories.includes(opt.value), label: opt.label, onChange: (e) => setFaqBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "FAQ Section Builder" }), _jsx(Input, { label: "Section title", value: faqBuilder.title, onChange: (e) => setFaqBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: faqBuilder.subtitle, onChange: (e) => setFaqBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Input, { label: "Display count", type: "number", min: 1, max: 20, value: String(faqBuilder.displayCount), onChange: (e) => setFaqBuilder((prev) => ({ ...prev, displayCount: Math.min(20, Math.max(1, Number(e.target.value) || 1)) })) }), _jsx(Checkbox, { checked: faqBuilder.showOnHomepage, label: "Show on homepage", onChange: (e) => setFaqBuilder((prev) => ({ ...prev, showOnHomepage: e.target.checked })) }), _jsx(Checkbox, { checked: faqBuilder.expandedByDefault, label: "Expanded by default", onChange: (e) => setFaqBuilder((prev) => ({ ...prev, expandedByDefault: e.target.checked })) }), _jsx(Checkbox, { checked: faqBuilder.linkToFullPage, label: "Link to full FAQ page", onChange: (e) => setFaqBuilder((prev) => ({ ...prev, linkToFullPage: e.target.checked })) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Categories" }), _jsx(Div, { layout: "grid", gap: "2", className: "grid-cols-2", children: FAQ_CATEGORY_OPTIONS.map((opt) => (_jsx(Checkbox, { checked: faqBuilder.categories.includes(opt.value), label: opt.label, onChange: (e) => setFaqBuilder((prev) => ({
                                     ...prev,
                                     categories: e.target.checked
                                         ? [...prev.categories, opt.value]
@@ -699,40 +700,40 @@ export function AdminSectionsView({ children }) {
                                 })) }, opt.value))) })] })] }));
     }
     function renderBlogBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Blog Articles Builder" }), _jsx(Input, { label: "Section title", value: blogBuilder.title, onChange: (e) => setBlogBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Max articles", value: String(blogBuilder.maxArticles), onValueChange: (v) => setBlogBuilder((prev) => ({ ...prev, maxArticles: Number(v) })), options: [{ label: "3", value: "3" }, { label: "4", value: "4" }, { label: "6", value: "6" }] }), _jsx(Checkbox, { checked: blogBuilder.showReadTime, label: "Show read time", onChange: (e) => setBlogBuilder((prev) => ({ ...prev, showReadTime: e.target.checked })) }), _jsx(Checkbox, { checked: blogBuilder.showAuthor, label: "Show author", onChange: (e) => setBlogBuilder((prev) => ({ ...prev, showAuthor: e.target.checked })) }), _jsx(Checkbox, { checked: blogBuilder.showThumbnails, label: "Show thumbnails", onChange: (e) => setBlogBuilder((prev) => ({ ...prev, showThumbnails: e.target.checked })) })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Blog Articles Builder" }), _jsx(Input, { label: "Section title", value: blogBuilder.title, onChange: (e) => setBlogBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Max articles", value: String(blogBuilder.maxArticles), onValueChange: (v) => setBlogBuilder((prev) => ({ ...prev, maxArticles: Number(v) })), options: [{ label: "3", value: "3" }, { label: "4", value: "4" }, { label: "6", value: "6" }] }), _jsx(Checkbox, { checked: blogBuilder.showReadTime, label: "Show read time", onChange: (e) => setBlogBuilder((prev) => ({ ...prev, showReadTime: e.target.checked })) }), _jsx(Checkbox, { checked: blogBuilder.showAuthor, label: "Show author", onChange: (e) => setBlogBuilder((prev) => ({ ...prev, showAuthor: e.target.checked })) }), _jsx(Checkbox, { checked: blogBuilder.showThumbnails, label: "Show thumbnails", onChange: (e) => setBlogBuilder((prev) => ({ ...prev, showThumbnails: e.target.checked })) })] }));
     }
     function renderNewsletterBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Newsletter Section Builder" }), _jsx(Input, { label: "Title", value: newsletterBuilder.title, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Textarea, { label: "Description", value: newsletterBuilder.description, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 2 }), _jsx(Input, { label: "Email placeholder", value: newsletterBuilder.placeholder, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, placeholder: e.target.value })) }), _jsx(Input, { label: "Button text", value: newsletterBuilder.buttonText, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, buttonText: e.target.value })) }), _jsx(Input, { label: "Privacy text", value: newsletterBuilder.privacyText, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, privacyText: e.target.value })) }), _jsx(Input, { label: "Privacy link", value: newsletterBuilder.privacyLink, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, privacyLink: e.target.value })), placeholder: "/privacy" })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Newsletter Section Builder" }), _jsx(Input, { label: "Title", value: newsletterBuilder.title, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Textarea, { label: "Description", value: newsletterBuilder.description, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 2 }), _jsx(Input, { label: "Email placeholder", value: newsletterBuilder.placeholder, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, placeholder: e.target.value })) }), _jsx(Input, { label: "Button text", value: newsletterBuilder.buttonText, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, buttonText: e.target.value })) }), _jsx(Input, { label: "Privacy text", value: newsletterBuilder.privacyText, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, privacyText: e.target.value })) }), _jsx(Input, { label: "Privacy link", value: newsletterBuilder.privacyLink, onChange: (e) => setNewsletterBuilder((prev) => ({ ...prev, privacyLink: e.target.value })), placeholder: "/privacy" })] }));
     }
     function renderBannerBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Banner Section Builder" }), _jsx(Select, { label: "Height", value: bannerBuilder.height, onValueChange: (v) => setBannerBuilder((prev) => ({ ...prev, height: v })), options: [{ label: "Small (200px)", value: "sm" }, { label: "Medium (300px)", value: "md" }, { label: "Large (400px)", value: "lg" }, { label: "Extra Large (500px)", value: "xl" }] }), _jsx(Input, { label: "Background image URL", type: "url", value: bannerBuilder.backgroundImage, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, backgroundImage: e.target.value })), placeholder: "https://..." }), _jsx(Input, { label: "Background color (CSS token)", value: bannerBuilder.backgroundColor, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, backgroundColor: e.target.value })), placeholder: "var(--appkit-color-primary)" }), _jsx(Input, { label: "Gradient from (CSS token)", value: bannerBuilder.gradientFrom, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, gradientFrom: e.target.value })), placeholder: "var(--appkit-color-primary)" }), _jsx(Input, { label: "Gradient to (CSS token)", value: bannerBuilder.gradientTo, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, gradientTo: e.target.value })), placeholder: "var(--appkit-color-secondary)" }), _jsx(Input, { label: "Content title", value: bannerBuilder.contentTitle, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, contentTitle: e.target.value })) }), _jsx(Input, { label: "Content subtitle", value: bannerBuilder.contentSubtitle, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, contentSubtitle: e.target.value })) }), _jsx(Textarea, { label: "Content description", value: bannerBuilder.contentDescription, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, contentDescription: e.target.value })), rows: 2 }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Buttons (max 3)" }), bannerBuilder.buttons.map((btn, index) => (_jsxs(Div, { className: "space-y-2 rounded-md border border-zinc-200 p-2 dark:border-slate-700", children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: ["Button ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setBannerBuilder((prev) => ({ ...prev, buttons: prev.buttons.filter((_, i) => i !== index) })), children: "Remove" })] }), _jsx(Input, { label: "Text", value: btn.text, onChange: (e) => setBannerBuilder((prev) => { const next = [...prev.buttons]; next[index] = { ...next[index], text: e.target.value }; return { ...prev, buttons: next }; }) }), _jsx(Input, { label: "Link", value: btn.link, onChange: (e) => setBannerBuilder((prev) => { const next = [...prev.buttons]; next[index] = { ...next[index], link: e.target.value }; return { ...prev, buttons: next }; }) }), _jsx(Select, { label: "Variant", value: btn.variant, onValueChange: (v) => setBannerBuilder((prev) => { const next = [...prev.buttons]; next[index] = { ...next[index], variant: v }; return { ...prev, buttons: next }; }), options: [{ label: "Primary", value: "primary" }, { label: "Secondary", value: "secondary" }, { label: "Outline", value: "outline" }] })] }, `banner-btn-${index}`))), bannerBuilder.buttons.length < 3 ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setBannerBuilder((prev) => ({ ...prev, buttons: [...prev.buttons, { text: "", link: "", variant: "primary" }] })), children: "+ Add button" })) : null] }), _jsx(Checkbox, { checked: bannerBuilder.clickable, label: "Make entire banner clickable", onChange: (e) => setBannerBuilder((prev) => ({ ...prev, clickable: e.target.checked })) }), bannerBuilder.clickable ? (_jsx(Input, { label: "Click link", value: bannerBuilder.clickLink, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, clickLink: e.target.value })), placeholder: "/products" })) : null] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Banner Section Builder" }), _jsx(Select, { label: "Height", value: bannerBuilder.height, onValueChange: (v) => setBannerBuilder((prev) => ({ ...prev, height: v })), options: [{ label: "Small (200px)", value: "sm" }, { label: "Medium (300px)", value: "md" }, { label: "Large (400px)", value: "lg" }, { label: "Extra Large (500px)", value: "xl" }] }), _jsx(Input, { label: "Background image URL", type: "url", value: bannerBuilder.backgroundImage, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, backgroundImage: e.target.value })), placeholder: "https://..." }), _jsx(Input, { label: "Background color (CSS token)", value: bannerBuilder.backgroundColor, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, backgroundColor: e.target.value })), placeholder: "var(--appkit-color-primary)" }), _jsx(Input, { label: "Gradient from (CSS token)", value: bannerBuilder.gradientFrom, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, gradientFrom: e.target.value })), placeholder: "var(--appkit-color-primary)" }), _jsx(Input, { label: "Gradient to (CSS token)", value: bannerBuilder.gradientTo, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, gradientTo: e.target.value })), placeholder: "var(--appkit-color-secondary)" }), _jsx(Input, { label: "Content title", value: bannerBuilder.contentTitle, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, contentTitle: e.target.value })) }), _jsx(Input, { label: "Content subtitle", value: bannerBuilder.contentSubtitle, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, contentSubtitle: e.target.value })) }), _jsx(Textarea, { label: "Content description", value: bannerBuilder.contentDescription, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, contentDescription: e.target.value })), rows: 2 }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Buttons (max 3)" }), bannerBuilder.buttons.map((btn, index) => (_jsxs(Stack, { rounded: "md", padding: "xs", border: "default", gap: "sm", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Text, { size: "xs", color: "muted", children: ["Button ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setBannerBuilder((prev) => ({ ...prev, buttons: prev.buttons.filter((_, i) => i !== index) })), children: "Remove" })] }), _jsx(Input, { label: "Text", value: btn.text, onChange: (e) => setBannerBuilder((prev) => { const next = [...prev.buttons]; next[index] = { ...next[index], text: e.target.value }; return { ...prev, buttons: next }; }) }), _jsx(Input, { label: "Link", value: btn.link, onChange: (e) => setBannerBuilder((prev) => { const next = [...prev.buttons]; next[index] = { ...next[index], link: e.target.value }; return { ...prev, buttons: next }; }) }), _jsx(Select, { label: "Variant", value: btn.variant, onValueChange: (v) => setBannerBuilder((prev) => { const next = [...prev.buttons]; next[index] = { ...next[index], variant: v }; return { ...prev, buttons: next }; }), options: [{ label: "Primary", value: "primary" }, { label: "Secondary", value: "secondary" }, { label: "Outline", value: "outline" }] })] }, `banner-btn-${index}`))), bannerBuilder.buttons.length < 3 ? (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setBannerBuilder((prev) => ({ ...prev, buttons: [...prev.buttons, { text: "", link: "", variant: "primary" }] })), children: "+ Add button" })) : null] }), _jsx(Checkbox, { checked: bannerBuilder.clickable, label: "Make entire banner clickable", onChange: (e) => setBannerBuilder((prev) => ({ ...prev, clickable: e.target.checked })) }), bannerBuilder.clickable ? (_jsx(Input, { label: "Click link", value: bannerBuilder.clickLink, onChange: (e) => setBannerBuilder((prev) => ({ ...prev, clickLink: e.target.value })), placeholder: "/products" })) : null] }));
     }
     function renderFeaturesBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Features Section Builder" }), _jsx(Input, { label: "Section title", value: featuresBuilder.title, onChange: (e) => setFeaturesBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Feature items" }), featuresBuilder.features.map((feature, index) => (_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Input, { value: feature, onChange: (e) => setFeaturesBuilder((prev) => { const next = [...prev.features]; next[index] = e.target.value; return { ...prev, features: next }; }), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setFeaturesBuilder((prev) => ({ ...prev, features: prev.features.filter((_, i) => i !== index) })), children: "\u2715" })] }, `feat-${index}`))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setFeaturesBuilder((prev) => ({ ...prev, features: [...prev.features, ""] })), children: "+ Add feature" })] })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Features Section Builder" }), _jsx(Input, { label: "Section title", value: featuresBuilder.title, onChange: (e) => setFeaturesBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Feature items" }), featuresBuilder.features.map((feature, index) => (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Input, { value: feature, onChange: (e) => setFeaturesBuilder((prev) => { const next = [...prev.features]; next[index] = e.target.value; return { ...prev, features: next }; }), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setFeaturesBuilder((prev) => ({ ...prev, features: prev.features.filter((_, i) => i !== index) })), children: "\u2715" })] }, `feat-${index}`))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setFeaturesBuilder((prev) => ({ ...prev, features: [...prev.features, ""] })), children: "+ Add feature" })] })] }));
     }
     function renderReviewsBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Reviews Section Builder" }), _jsx(Input, { label: "Section title", value: reviewsBuilder.title, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Reviews source", value: reviewsBuilder.source, onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, source: v })), options: [
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Reviews Section Builder" }), _jsx(Input, { label: "Section title", value: reviewsBuilder.title, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Reviews source", value: reviewsBuilder.source, onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, source: v })), options: [
                         { label: "Platform reviews (LetItRip)", value: "platform" },
                         { label: "Google Business Reviews", value: "google" },
                     ] }), reviewsBuilder.source === "google" ? (_jsx(Input, { label: "Google Place ID", value: reviewsBuilder.placeId, onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at maps.google.com/placesinventory" })) : null, _jsx(Select, { label: "Max reviews", value: String(reviewsBuilder.maxReviews), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, maxReviews: Number(v) })), options: [{ label: "5", value: "5" }, { label: "10", value: "10" }, { label: "20", value: "20" }] }), _jsx(Select, { label: "Items per view", value: String(reviewsBuilder.itemsPerView), onValueChange: (v) => setReviewsBuilder((prev) => ({ ...prev, itemsPerView: Number(v) })), options: [{ label: "1", value: "1" }, { label: "2", value: "2" }, { label: "3", value: "3" }] }), _jsx(Checkbox, { checked: reviewsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(reviewsBuilder.scrollInterval), onChange: (e) => setReviewsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
     }
     function renderWhatsAppBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "WhatsApp Community Builder" }), _jsx(Input, { label: "Title", value: whatsappBuilder.title, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Textarea, { label: "Description", value: whatsappBuilder.description, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 2 }), _jsx(Input, { label: "WhatsApp group link", type: "url", value: whatsappBuilder.groupLink, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, groupLink: e.target.value })), placeholder: "https://chat.whatsapp.com/..." }), _jsx(Input, { label: "Member count", type: "number", min: 0, value: String(whatsappBuilder.memberCount), onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, memberCount: Math.max(0, Number(e.target.value) || 0) })) }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Benefits" }), whatsappBuilder.benefits.map((benefit, index) => (_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Input, { value: benefit, onChange: (e) => setWhatsappBuilder((prev) => { const next = [...prev.benefits]; next[index] = e.target.value; return { ...prev, benefits: next }; }), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setWhatsappBuilder((prev) => ({ ...prev, benefits: prev.benefits.filter((_, i) => i !== index) })), children: "\u2715" })] }, `wb-${index}`))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWhatsappBuilder((prev) => ({ ...prev, benefits: [...prev.benefits, ""] })), children: "+ Add benefit" })] }), _jsx(Input, { label: "Button text", value: whatsappBuilder.buttonText, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, buttonText: e.target.value })) }), _jsx(Input, { label: "Testimonial (optional)", value: whatsappBuilder.testimonial, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, testimonial: e.target.value })) })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "WhatsApp Community Builder" }), _jsx(Input, { label: "Title", value: whatsappBuilder.title, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Textarea, { label: "Description", value: whatsappBuilder.description, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 2 }), _jsx(Input, { label: "WhatsApp group link", type: "url", value: whatsappBuilder.groupLink, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, groupLink: e.target.value })), placeholder: "https://chat.whatsapp.com/..." }), _jsx(Input, { label: "Member count", type: "number", min: 0, value: String(whatsappBuilder.memberCount), onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, memberCount: Math.max(0, Number(e.target.value) || 0) })) }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Benefits" }), whatsappBuilder.benefits.map((benefit, index) => (_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Input, { value: benefit, onChange: (e) => setWhatsappBuilder((prev) => { const next = [...prev.benefits]; next[index] = e.target.value; return { ...prev, benefits: next }; }), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setWhatsappBuilder((prev) => ({ ...prev, benefits: prev.benefits.filter((_, i) => i !== index) })), children: "\u2715" })] }, `wb-${index}`))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setWhatsappBuilder((prev) => ({ ...prev, benefits: [...prev.benefits, ""] })), children: "+ Add benefit" })] }), _jsx(Input, { label: "Button text", value: whatsappBuilder.buttonText, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, buttonText: e.target.value })) }), _jsx(Input, { label: "Testimonial (optional)", value: whatsappBuilder.testimonial, onChange: (e) => setWhatsappBuilder((prev) => ({ ...prev, testimonial: e.target.value })) })] }));
     }
     function renderWelcomeBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Welcome Section Builder" }), _jsx(Input, { label: "Headline (h1)", value: welcomeBuilder.h1, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, h1: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: welcomeBuilder.subtitle, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Textarea, { label: "Description", value: welcomeBuilder.description, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 3 }), _jsx(Checkbox, { checked: welcomeBuilder.showCTA, label: "Show CTA button", onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, showCTA: e.target.checked })) }), welcomeBuilder.showCTA ? (_jsxs(_Fragment, { children: [_jsx(Input, { label: "CTA text", value: welcomeBuilder.ctaText, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, ctaText: e.target.value })) }), _jsx(Input, { label: "CTA link", value: welcomeBuilder.ctaLink, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, ctaLink: e.target.value })), placeholder: "/products" })] })) : null] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Welcome Section Builder" }), _jsx(Input, { label: "Headline (h1)", value: welcomeBuilder.h1, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, h1: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: welcomeBuilder.subtitle, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Textarea, { label: "Description", value: welcomeBuilder.description, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, description: e.target.value })), rows: 3 }), _jsx(Checkbox, { checked: welcomeBuilder.showCTA, label: "Show CTA button", onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, showCTA: e.target.checked })) }), welcomeBuilder.showCTA ? (_jsxs(_Fragment, { children: [_jsx(Input, { label: "CTA text", value: welcomeBuilder.ctaText, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, ctaText: e.target.value })) }), _jsx(Input, { label: "CTA link", value: welcomeBuilder.ctaLink, onChange: (e) => setWelcomeBuilder((prev) => ({ ...prev, ctaLink: e.target.value })), placeholder: "/products" })] })) : null] }));
     }
     function renderTrustIndicatorsBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Trust Indicators Builder" }), _jsx(Input, { label: "Section title", value: trustIndicatorsBuilder.title, onChange: (e) => setTrustIndicatorsBuilder((prev) => ({ ...prev, title: e.target.value })) }), trustIndicatorsBuilder.indicators.map((ind, index) => (_jsxs(Div, { className: `space-y-2 rounded-md border border-zinc-200 ${__P.p3} dark:border-slate-700`, children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Indicator ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setTrustIndicatorsBuilder((prev) => ({ ...prev, indicators: prev.indicators.filter((_, i) => i !== index) })), children: "Remove" })] }), _jsx(Input, { label: "Icon (emoji or text)", value: ind.icon, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], icon: e.target.value }; return { ...prev, indicators: next }; }) }), _jsx(Input, { label: "Title", value: ind.title, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], title: e.target.value }; return { ...prev, indicators: next }; }) }), _jsx(Input, { label: "Description", value: ind.description, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], description: e.target.value }; return { ...prev, indicators: next }; }) })] }, ind.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setTrustIndicatorsBuilder((prev) => ({ ...prev, indicators: [...prev.indicators, { id: `ti-${Date.now()}`, icon: "✨", title: "", description: "" }] })), children: "+ Add indicator" })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Trust Indicators Builder" }), _jsx(Input, { label: "Section title", value: trustIndicatorsBuilder.title, onChange: (e) => setTrustIndicatorsBuilder((prev) => ({ ...prev, title: e.target.value })) }), trustIndicatorsBuilder.indicators.map((ind, index) => (_jsxs(Stack, { className: `${__P.p3}`, gap: "sm", rounded: "md", border: "default", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: ["Indicator ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setTrustIndicatorsBuilder((prev) => ({ ...prev, indicators: prev.indicators.filter((_, i) => i !== index) })), children: "Remove" })] }), _jsx(Input, { label: "Icon (emoji or text)", value: ind.icon, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], icon: e.target.value }; return { ...prev, indicators: next }; }) }), _jsx(Input, { label: "Title", value: ind.title, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], title: e.target.value }; return { ...prev, indicators: next }; }) }), _jsx(Input, { label: "Description", value: ind.description, onChange: (e) => setTrustIndicatorsBuilder((prev) => { const next = [...prev.indicators]; next[index] = { ...next[index], description: e.target.value }; return { ...prev, indicators: next }; }) })] }, ind.id))), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setTrustIndicatorsBuilder((prev) => ({ ...prev, indicators: [...prev.indicators, { id: `ti-${Date.now()}`, icon: "✨", title: "", description: "" }] })), children: "+ Add indicator" })] }));
     }
     function renderCategoriesBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Categories Section Builder" }), _jsx(Input, { label: "Section title", value: categoriesBuilder.title, onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Max categories (4\u201312)", type: "number", min: 4, max: 12, value: String(categoriesBuilder.maxCategories), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, maxCategories: Math.min(12, Math.max(4, Number(e.target.value) || 4)) })) }), _jsx(Checkbox, { checked: categoriesBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(categoriesBuilder.scrollInterval), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Categories Section Builder" }), _jsx(Input, { label: "Section title", value: categoriesBuilder.title, onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Max categories (4\u201312)", type: "number", min: 4, max: 12, value: String(categoriesBuilder.maxCategories), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, maxCategories: Math.min(12, Math.max(4, Number(e.target.value) || 4)) })) }), _jsx(Checkbox, { checked: categoriesBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(categoriesBuilder.scrollInterval), onChange: (e) => setCategoriesBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
     }
     function renderBrandsBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Brands Section Builder" }), _jsx(Input, { label: "Section title", value: brandsBuilder.title, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: brandsBuilder.subtitle, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Input, { label: "Max brands", type: "number", min: 1, max: 30, value: String(brandsBuilder.maxBrands), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, maxBrands: Math.max(1, Number(e.target.value) || 1) })) }), _jsx(Checkbox, { checked: brandsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(brandsBuilder.scrollInterval), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Brands Section Builder" }), _jsx(Input, { label: "Section title", value: brandsBuilder.title, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Input, { label: "Subtitle", value: brandsBuilder.subtitle, onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, subtitle: e.target.value })) }), _jsx(Input, { label: "Max brands", type: "number", min: 1, max: 30, value: String(brandsBuilder.maxBrands), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, maxBrands: Math.max(1, Number(e.target.value) || 1) })) }), _jsx(Checkbox, { checked: brandsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(brandsBuilder.scrollInterval), onChange: (e) => setBrandsBuilder((prev) => ({ ...prev, scrollInterval: Math.max(1000, Number(e.target.value) || 1000) })) })] }));
     }
     function renderCarouselBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Carousel Section Builder" }), _jsx(Input, { label: "Section title", value: carouselBuilder.title, onChange: (e) => setCarouselBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Hero Carousel" }), _jsx(Select, { label: "Slide height", value: carouselBuilder.height, onValueChange: (value) => setCarouselBuilder((prev) => ({ ...prev, height: value })), options: [
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Carousel Section Builder" }), _jsx(Input, { label: "Section title", value: carouselBuilder.title, onChange: (e) => setCarouselBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Hero Carousel" }), _jsx(Select, { label: "Slide height", value: carouselBuilder.height, onValueChange: (value) => setCarouselBuilder((prev) => ({ ...prev, height: value })), options: [
                         { label: "Viewport (100vh)", value: "viewport" },
                         { label: "Tall (80vh)", value: "tall" },
                         { label: "Medium (60vh)", value: "medium" },
@@ -777,7 +778,7 @@ export function AdminSectionsView({ children }) {
             });
         }
         function renderCardFields(card, index) {
-            return (_jsxs(Div, { className: "space-y-3 rounded-md border border-zinc-200 p-3 dark:border-slate-700", children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Card ", index + 1] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => removeCard(index), children: "Remove" })] }), _jsx(Input, { label: "ID / slug", value: card.id, onChange: (e) => updateCard(index, { id: e.target.value }), placeholder: "card-1" }), _jsx(Input, { label: "Image URL", value: card.image, onChange: (e) => updateCard(index, { image: e.target.value }), placeholder: "https://..." }), _jsx(Input, { label: "Image alt text", value: card.imageAlt, onChange: (e) => updateCard(index, { imageAlt: e.target.value }) }), _jsx(Input, { label: "Eyebrow (small label above title)", value: card.eyebrow, onChange: (e) => updateCard(index, { eyebrow: e.target.value }) }), _jsx(Input, { label: "Title", value: card.title, onChange: (e) => updateCard(index, { title: e.target.value }) }), _jsx(Input, { label: "Body / description", value: card.body, onChange: (e) => updateCard(index, { body: e.target.value }) }), _jsx(Input, { label: "Link (href)", value: card.link, onChange: (e) => updateCard(index, { link: e.target.value }), placeholder: "/categories/..." }), _jsx(Input, { label: "Background colour", value: card.backgroundColor, onChange: (e) => updateCard(index, { backgroundColor: e.target.value }), placeholder: "#ffffff or var(--appkit-color-primary)" }), _jsx(Input, { label: "Text colour", value: card.textColor, onChange: (e) => updateCard(index, { textColor: e.target.value }), placeholder: "#000000" }), _jsx(Select, { label: "Border radius", value: card.borderRadius, onValueChange: (value) => updateCard(index, { borderRadius: value }), options: [
+            return (_jsxs(Stack, { rounded: "md", padding: "sm", border: "default", gap: "3", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: ["Card ", index + 1] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => removeCard(index), children: "Remove" })] }), _jsx(Input, { label: "ID / slug", value: card.id, onChange: (e) => updateCard(index, { id: e.target.value }), placeholder: "card-1" }), _jsx(Input, { label: "Image URL", value: card.image, onChange: (e) => updateCard(index, { image: e.target.value }), placeholder: "https://..." }), _jsx(Input, { label: "Image alt text", value: card.imageAlt, onChange: (e) => updateCard(index, { imageAlt: e.target.value }) }), _jsx(Input, { label: "Eyebrow (small label above title)", value: card.eyebrow, onChange: (e) => updateCard(index, { eyebrow: e.target.value }) }), _jsx(Input, { label: "Title", value: card.title, onChange: (e) => updateCard(index, { title: e.target.value }) }), _jsx(Input, { label: "Body / description", value: card.body, onChange: (e) => updateCard(index, { body: e.target.value }) }), _jsx(Input, { label: "Link (href)", value: card.link, onChange: (e) => updateCard(index, { link: e.target.value }), placeholder: "/categories/..." }), _jsx(Input, { label: "Background colour", value: card.backgroundColor, onChange: (e) => updateCard(index, { backgroundColor: e.target.value }), placeholder: "#ffffff or var(--appkit-color-primary)" }), _jsx(Input, { label: "Text colour", value: card.textColor, onChange: (e) => updateCard(index, { textColor: e.target.value }), placeholder: "#000000" }), _jsx(Select, { label: "Border radius", value: card.borderRadius, onValueChange: (value) => updateCard(index, { borderRadius: value }), options: [
                             { label: "None", value: "none" }, { label: "Small", value: "sm" }, { label: "Medium", value: "md" },
                             { label: "Large", value: "lg" }, { label: "XL", value: "xl" }, { label: "Full (pill)", value: "full" },
                         ] }), _jsx(Select, { label: "Shadow level", value: card.shadowLevel, onValueChange: (value) => updateCard(index, { shadowLevel: value }), options: [
@@ -785,7 +786,7 @@ export function AdminSectionsView({ children }) {
                             { label: "Medium", value: "md" }, { label: "Large", value: "lg" },
                         ] })] }, `custom-card-${index}`));
         }
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Custom Cards Builder" }), _jsx(Input, { label: "Section title", value: customCardsBuilder.title, onChange: (e) => setCustomCardsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Layout", value: customCardsBuilder.layout, onValueChange: (value) => setCustomCardsBuilder((prev) => ({ ...prev, layout: value })), options: [
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Custom Cards Builder" }), _jsx(Input, { label: "Section title", value: customCardsBuilder.title, onChange: (e) => setCustomCardsBuilder((prev) => ({ ...prev, title: e.target.value })) }), _jsx(Select, { label: "Layout", value: customCardsBuilder.layout, onValueChange: (value) => setCustomCardsBuilder((prev) => ({ ...prev, layout: value })), options: [
                         { label: "Grid", value: "grid" },
                         { label: "Row (horizontal scroll)", value: "row" },
                         { label: "Masonry", value: "masonry" },
@@ -797,10 +798,10 @@ export function AdminSectionsView({ children }) {
                     ] }), _jsx(Checkbox, { checked: customCardsBuilder.autoScroll, label: "Auto-scroll", onChange: (e) => setCustomCardsBuilder((prev) => ({ ...prev, autoScroll: e.target.checked })) }), _jsx(Input, { label: LBL_SCROLL_INTERVAL, type: "number", min: 1000, step: 500, value: String(customCardsBuilder.scrollIntervalMs), onChange: (e) => setCustomCardsBuilder((prev) => ({
                         ...prev,
                         scrollIntervalMs: Math.max(1000, Number(e.target.value) || 4000),
-                    })) }), _jsxs(Div, { className: "space-y-3", children: [_jsxs(Div, { className: "flex items-center justify-between", children: [_jsxs(Text, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: ["Cards (", customCardsBuilder.cards.length, ")"] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addCard, children: "Add card" })] }), customCardsBuilder.cards.map((card, index) => renderCardFields(card, index)), customCardsBuilder.cards.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No cards added yet. Click \"Add card\" to start." })) : null] })] }));
+                    })) }), _jsxs(Stack, { gap: "3", children: [_jsxs(Row, { align: "center", justify: "between", children: [_jsxs(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: ["Cards (", customCardsBuilder.cards.length, ")"] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: addCard, children: "Add card" })] }), customCardsBuilder.cards.map((card, index) => renderCardFields(card, index)), customCardsBuilder.cards.length === 0 ? (_jsx(Text, { size: "sm", color: "muted", children: "No cards added yet. Click \"Add card\" to start." })) : null] })] }));
     }
     function renderGoogleReviewsBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Google Reviews Builder" }), _jsx(Input, { label: "Google Place ID", value: googleReviewsBuilder.placeId, onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at developers.google.com/maps/documentation/places/web-service/place-id" }), _jsx(Input, { label: "Max reviews to show", type: "number", min: 1, max: 20, value: String(googleReviewsBuilder.maxReviews), onChange: (e) => setGoogleReviewsBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Google Reviews Builder" }), _jsx(Input, { label: "Google Place ID", value: googleReviewsBuilder.placeId, onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, placeId: e.target.value })), placeholder: "ChIJ...", helperText: "Find your Place ID at developers.google.com/maps/documentation/places/web-service/place-id" }), _jsx(Input, { label: "Max reviews to show", type: "number", min: 1, max: 20, value: String(googleReviewsBuilder.maxReviews), onChange: (e) => setGoogleReviewsBuilder((prev) => ({
                         ...prev,
                         maxReviews: Math.max(1, Math.min(20, Number(e.target.value) || 6)),
                     })) }), _jsx(Select, { label: "Minimum star rating to show", value: String(googleReviewsBuilder.minRating), onValueChange: (value) => setGoogleReviewsBuilder((prev) => ({ ...prev, minRating: Number(value) })), options: [
@@ -814,34 +815,34 @@ export function AdminSectionsView({ children }) {
                     ] }), _jsx(Checkbox, { checked: googleReviewsBuilder.showRating, label: "Show star rating on each review", onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, showRating: e.target.checked })) }), _jsx(Checkbox, { checked: googleReviewsBuilder.showDate, label: "Show review date", onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, showDate: e.target.checked })) }), _jsx(Checkbox, { checked: googleReviewsBuilder.linkToGoogleMaps, label: "Link to Google Maps listing", onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, linkToGoogleMaps: e.target.checked })) }), googleReviewsBuilder.linkToGoogleMaps ? (_jsx(Input, { label: "Google Maps URL", value: googleReviewsBuilder.googleMapsUrl, onChange: (e) => setGoogleReviewsBuilder((prev) => ({ ...prev, googleMapsUrl: e.target.value })), placeholder: "https://maps.google.com/..." })) : null] }));
     }
     function renderFeaturedBundlesBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Featured Bundles Builder" }), _jsx(Input, { label: "Section title", value: featuredBundlesBuilder.title, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Curated Bundles" }), _jsx(Input, { label: "Subtitle", value: featuredBundlesBuilder.subtitle, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Everything you need in one deal" }), _jsx(Input, { label: "Max items", type: "number", min: 1, max: 12, value: String(featuredBundlesBuilder.maxItems), onChange: (e) => setFeaturedBundlesBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Featured Bundles Builder" }), _jsx(Input, { label: "Section title", value: featuredBundlesBuilder.title, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Curated Bundles" }), _jsx(Input, { label: "Subtitle", value: featuredBundlesBuilder.subtitle, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Everything you need in one deal" }), _jsx(Input, { label: "Max items", type: "number", min: 1, max: 12, value: String(featuredBundlesBuilder.maxItems), onChange: (e) => setFeaturedBundlesBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Math.min(12, Number(e.target.value) || 8)),
                     })) }), _jsx(Input, { label: "Filter by store (storeId)", value: featuredBundlesBuilder.storeId, onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, storeId: e.target.value })), placeholder: "store-pokemon-palace", helperText: "Leave blank to show bundles from all stores." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: LBL_FILTER_BY_CATEGORY }), _jsx(CategoryInlineSelect, { value: featuredBundlesBuilder.categorySlug, onChange: (id) => setFeaturedBundlesBuilder((prev) => ({ ...prev, categorySlug: id })), placeholder: PH_FILTER_BY_CATEGORY }), _jsx(Text, { size: "xs", color: "muted", children: "Leave blank to show bundles from all categories." })] }), _jsx(Select, { label: "Sort by", value: featuredBundlesBuilder.sortBy, onValueChange: (value) => setFeaturedBundlesBuilder((prev) => ({ ...prev, sortBy: value })), options: [
                         { label: "Newest first", value: "newest" },
                         { label: "Biggest savings", value: "savings-desc" },
                         { label: "Price: low → high", value: "price-asc" },
-                    ] }), _jsx(Checkbox, { checked: featuredBundlesBuilder.showSavingsBadge, label: "Show savings % badge on each bundle", onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, showSavingsBadge: e.target.checked })) }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "The bundles collection lands later in the bundle / prize-draw work; until then this section renders an empty state." })] }));
+                    ] }), _jsx(Checkbox, { checked: featuredBundlesBuilder.showSavingsBadge, label: "Show savings % badge on each bundle", onChange: (e) => setFeaturedBundlesBuilder((prev) => ({ ...prev, showSavingsBadge: e.target.checked })) }), _jsx(Text, { size: "xs", color: "muted", children: "The bundles collection lands later in the bundle / prize-draw work; until then this section renders an empty state." })] }));
     }
     function renderPrizeDrawsBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Prize Draws Builder" }), _jsx(Input, { label: "Section title", value: prizeDrawsBuilder.title, onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Prize Draws" }), _jsx(Input, { label: "Subtitle", value: prizeDrawsBuilder.subtitle, onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Enter for a chance to win rare collectibles" }), _jsx(Input, { label: "Max items", type: "number", min: 1, max: 12, value: String(prizeDrawsBuilder.maxItems), onChange: (e) => setPrizeDrawsBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Prize Draws Builder" }), _jsx(Input, { label: "Section title", value: prizeDrawsBuilder.title, onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Prize Draws" }), _jsx(Input, { label: "Subtitle", value: prizeDrawsBuilder.subtitle, onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Enter for a chance to win rare collectibles" }), _jsx(Input, { label: "Max items", type: "number", min: 1, max: 12, value: String(prizeDrawsBuilder.maxItems), onChange: (e) => setPrizeDrawsBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Math.min(12, Number(e.target.value) || 6)),
                     })) }), _jsx(Input, { label: "Filter by store (storeId)", value: prizeDrawsBuilder.storeId, onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, storeId: e.target.value })), placeholder: "Leave blank for all stores" }), _jsx(Select, { label: "Reveal status", value: prizeDrawsBuilder.revealStatus, onValueChange: (value) => setPrizeDrawsBuilder((prev) => ({ ...prev, revealStatus: value })), options: [
                         { label: "All (pending + open)", value: "all" },
                         { label: "Pending only", value: "pending" },
                         { label: "Open only", value: "open" },
-                    ] }), _jsx(Checkbox, { checked: prizeDrawsBuilder.showCountdown, label: "Show countdown to reveal window", onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, showCountdown: e.target.checked })) }), _jsx(Checkbox, { checked: prizeDrawsBuilder.showEntriesRemaining, label: "Show entries-remaining bar", onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, showEntriesRemaining: e.target.checked })) }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Prize-draw listing type is added with the prize-draw feature; until then this section renders an empty state." })] }));
+                    ] }), _jsx(Checkbox, { checked: prizeDrawsBuilder.showCountdown, label: "Show countdown to reveal window", onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, showCountdown: e.target.checked })) }), _jsx(Checkbox, { checked: prizeDrawsBuilder.showEntriesRemaining, label: "Show entries-remaining bar", onChange: (e) => setPrizeDrawsBuilder((prev) => ({ ...prev, showEntriesRemaining: e.target.checked })) }), _jsx(Text, { size: "xs", color: "muted", children: "Prize-draw listing type is added with the prize-draw feature; until then this section renders an empty state." })] }));
     }
     function renderEventRafflesBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Event Raffles Builder" }), _jsx(Input, { label: "Section title", value: eventRafflesBuilder.title, onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Live Raffles & Spin Wheels" }), _jsx(Input, { label: "Subtitle", value: eventRafflesBuilder.subtitle, onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Participate in community events and win prizes" }), _jsx(Input, { label: "Max items", type: "number", min: 1, max: 8, value: String(eventRafflesBuilder.maxItems), onChange: (e) => setEventRafflesBuilder((prev) => ({
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Event Raffles Builder" }), _jsx(Input, { label: "Section title", value: eventRafflesBuilder.title, onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Live Raffles & Spin Wheels" }), _jsx(Input, { label: "Subtitle", value: eventRafflesBuilder.subtitle, onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Participate in community events and win prizes" }), _jsx(Input, { label: "Max items", type: "number", min: 1, max: 8, value: String(eventRafflesBuilder.maxItems), onChange: (e) => setEventRafflesBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(1, Math.min(8, Number(e.target.value) || 4)),
                     })) }), _jsx(Select, { label: "Raffle type", value: eventRafflesBuilder.raffleType, onValueChange: (value) => setEventRafflesBuilder((prev) => ({ ...prev, raffleType: value })), options: [
                         { label: "All raffles", value: "all" },
                         { label: "Raffle only", value: "raffle" },
                         { label: "Spin wheel only", value: "spin_wheel" },
-                    ] }), _jsx(Checkbox, { checked: eventRafflesBuilder.showEntryCount, label: "Show entry count on each event", onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, showEntryCount: e.target.checked })) }), _jsx(Checkbox, { checked: eventRafflesBuilder.showCountdown, label: "Show countdown to event start/end", onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, showCountdown: e.target.checked })) }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "The hasRaffle flag on events ships with the raffle feature; until then this section renders an empty state." })] }));
+                    ] }), _jsx(Checkbox, { checked: eventRafflesBuilder.showEntryCount, label: "Show entry count on each event", onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, showEntryCount: e.target.checked })) }), _jsx(Checkbox, { checked: eventRafflesBuilder.showCountdown, label: "Show countdown to event start/end", onChange: (e) => setEventRafflesBuilder((prev) => ({ ...prev, showCountdown: e.target.checked })) }), _jsx(Text, { size: "xs", color: "muted", children: "The hasRaffle flag on events ships with the raffle feature; until then this section renders an empty state." })] }));
     }
     const COLLECTION_CARD_TYPE_OPTIONS = [
         { label: "Products", value: "products" },
@@ -855,7 +856,7 @@ export function AdminSectionsView({ children }) {
         { label: "Categories", value: "categories" },
     ];
     function renderCollectionEntry(entry, idx) {
-        return (_jsxs(Div, { className: "space-y-2 rounded-lg border border-zinc-200 p-3 dark:border-slate-700", children: [_jsx(Select, { label: `Collection ${idx + 1} type`, value: entry.type, onValueChange: (value) => setCollectionCardsBuilder((prev) => ({
+        return (_jsxs(Stack, { rounded: "lg", padding: "sm", border: "default", gap: "sm", children: [_jsx(Select, { label: `Collection ${idx + 1} type`, value: entry.type, onValueChange: (value) => setCollectionCardsBuilder((prev) => ({
                         ...prev,
                         collections: prev.collections.map((c, i) => i === idx ? { ...c, type: value } : c),
                     })), options: COLLECTION_CARD_TYPE_OPTIONS }), _jsx(Input, { label: "Display label (optional)", value: entry.label, onChange: (e) => setCollectionCardsBuilder((prev) => ({
@@ -872,7 +873,7 @@ export function AdminSectionsView({ children }) {
     function renderCollectionCardsBuilder() {
         const entries = collectionCardsBuilder.collections;
         const canAdd = entries.length < 3;
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Collection Cards Builder" }), _jsx(Input, { label: "Section title", value: collectionCardsBuilder.title, onChange: (e) => setCollectionCardsBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Featured Collections" }), _jsx(Input, { label: "Subtitle", value: collectionCardsBuilder.subtitle, onChange: (e) => setCollectionCardsBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Hand-picked across the marketplace" }), _jsx(Select, { label: "Layout", value: collectionCardsBuilder.layout, onValueChange: (value) => setCollectionCardsBuilder((prev) => ({ ...prev, layout: value })), options: [
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Collection Cards Builder" }), _jsx(Input, { label: "Section title", value: collectionCardsBuilder.title, onChange: (e) => setCollectionCardsBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "Featured Collections" }), _jsx(Input, { label: "Subtitle", value: collectionCardsBuilder.subtitle, onChange: (e) => setCollectionCardsBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Hand-picked across the marketplace" }), _jsx(Select, { label: "Layout", value: collectionCardsBuilder.layout, onValueChange: (value) => setCollectionCardsBuilder((prev) => ({ ...prev, layout: value })), options: [
                         { label: "Carousel", value: "carousel" },
                         { label: "Grid", value: "grid" },
                         { label: "Mixed row", value: "mixed-row" },
@@ -886,16 +887,16 @@ export function AdminSectionsView({ children }) {
                     ] }), _jsx(Input, { label: "Max total items", type: "number", min: 4, max: 20, value: String(collectionCardsBuilder.maxItems), onChange: (e) => setCollectionCardsBuilder((prev) => ({
                         ...prev,
                         maxItems: Math.max(4, Math.min(20, Number(e.target.value) || 12)),
-                    })) }), _jsx(Checkbox, { checked: collectionCardsBuilder.showCollectionTabs, label: "Show collection tabs (filter chips)", onChange: (e) => setCollectionCardsBuilder((prev) => ({ ...prev, showCollectionTabs: e.target.checked })) }), _jsxs(Div, { className: "space-y-3", children: [_jsxs(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: ["Collections (", entries.length, "/3)"] }), entries.map((entry, idx) => renderCollectionEntry(entry, idx)), canAdd ? (_jsx(Button, { type: "button", variant: "secondary", onClick: () => setCollectionCardsBuilder((prev) => ({
+                    })) }), _jsx(Checkbox, { checked: collectionCardsBuilder.showCollectionTabs, label: "Show collection tabs (filter chips)", onChange: (e) => setCollectionCardsBuilder((prev) => ({ ...prev, showCollectionTabs: e.target.checked })) }), _jsxs(Stack, { gap: "3", children: [_jsxs(Text, { size: "sm", weight: "semibold", color: "primary", children: ["Collections (", entries.length, "/3)"] }), entries.map((entry, idx) => renderCollectionEntry(entry, idx)), canAdd ? (_jsx(Button, { type: "button", variant: "secondary", onClick: () => setCollectionCardsBuilder((prev) => ({
                                 ...prev,
                                 collections: [
                                     ...prev.collections,
                                     { type: "products", label: "", limit: 4, storeId: "", categorySlug: "", brandSlug: "", featuredOnly: false },
                                 ],
-                            })), children: "+ Add collection" })) : (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Maximum of 3 collections per section." }))] }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Data fetching wires into the per-resource repositories \u2014 the section renders an empty state until the wiring lands." })] }));
+                            })), children: "+ Add collection" })) : (_jsx(Text, { size: "xs", color: "muted", children: "Maximum of 3 collections per section." }))] }), _jsx(Text, { size: "xs", color: "muted", children: "Data fetching wires into the per-resource repositories \u2014 the section renders an empty state until the wiring lands." })] }));
     }
     function renderSocialFeedBuilder() {
-        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-800 dark:text-zinc-200", children: "Social Feed Builder" }), _jsx(Input, { label: "Section title", value: socialFeedBuilder.title, onChange: (e) => setSocialFeedBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "LetItRip on Instagram" }), _jsx(Input, { label: "Subtitle", value: socialFeedBuilder.subtitle, onChange: (e) => setSocialFeedBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Follow us for daily collection showcases" }), _jsx(Select, { label: "Platform", value: socialFeedBuilder.platform, onValueChange: (v) => setSocialFeedBuilder((prev) => ({ ...prev, platform: v })), options: [
+        return (_jsxs(Div, { className: CLS_SECTION_PANEL, children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Social Feed Builder" }), _jsx(Input, { label: "Section title", value: socialFeedBuilder.title, onChange: (e) => setSocialFeedBuilder((prev) => ({ ...prev, title: e.target.value })), placeholder: "LetItRip on Instagram" }), _jsx(Input, { label: "Subtitle", value: socialFeedBuilder.subtitle, onChange: (e) => setSocialFeedBuilder((prev) => ({ ...prev, subtitle: e.target.value })), placeholder: "Follow us for daily collection showcases" }), _jsx(Select, { label: "Platform", value: socialFeedBuilder.platform, onValueChange: (v) => setSocialFeedBuilder((prev) => ({ ...prev, platform: v })), options: [
                         { label: "Instagram", value: "instagram" },
                         { label: "Facebook", value: "facebook" },
                         { label: "TikTok", value: "tiktok" },
@@ -909,7 +910,7 @@ export function AdminSectionsView({ children }) {
                         { label: "Grid", value: "grid" },
                         { label: "Masonry", value: "masonry" },
                         { label: "Carousel (horizontal scroll)", value: "carousel" },
-                    ] }), _jsx(Checkbox, { checked: socialFeedBuilder.showCaption, label: "Show caption on hover", onChange: (e) => setSocialFeedBuilder((prev) => ({ ...prev, showCaption: e.target.checked })) }), _jsx(Checkbox, { checked: socialFeedBuilder.showStats, label: "Show like / view / comment counts on hover", onChange: (e) => setSocialFeedBuilder((prev) => ({ ...prev, showStats: e.target.checked })) }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Social platform credentials (access tokens, client IDs) must be set in \u2467 Integrations before this section will load live posts." })] }));
+                    ] }), _jsx(Checkbox, { checked: socialFeedBuilder.showCaption, label: "Show caption on hover", onChange: (e) => setSocialFeedBuilder((prev) => ({ ...prev, showCaption: e.target.checked })) }), _jsx(Checkbox, { checked: socialFeedBuilder.showStats, label: "Show like / view / comment counts on hover", onChange: (e) => setSocialFeedBuilder((prev) => ({ ...prev, showStats: e.target.checked })) }), _jsx(Text, { size: "xs", color: "muted", children: "Social platform credentials (access tokens, client IDs) must be set in \u2467 Integrations before this section will load live posts." })] }));
     }
     function renderTypedBuilder() {
         switch (sectionType) {
@@ -958,10 +959,10 @@ export function AdminSectionsView({ children }) {
     }, [sections]);
     const hasReorderChanges = reorderDraft.some((item) => sectionOrderMap.get(item.id) !== item.order);
     const canUndoReorderChanges = reorderUndoStack.length > 0;
-    return (_jsxs(_Fragment, { children: [_jsxs(Div, { className: "py-4 px-3 sm:px-4", children: [_jsxs(Div, { className: "mb-4 flex items-center justify-between gap-3", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Homepage Sections" }), _jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Manage homepage sections and their display order" })] }), _jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setSeedResetOpen(true), children: "Reset seed data" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => setIsModalOpen(true), children: "Manage Sections" })] })] }), errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-error/20 bg-error-surface px-4 py-3 text-sm text-error", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No sections found" })] }), _jsxs(Div, { className: `mt-4 space-y-3 rounded-xl border border-zinc-200 bg-white ${__P.p4} dark:border-slate-700 dark:bg-slate-900`, children: [_jsxs(Div, { className: "flex items-center justify-between gap-3", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Reorder Sections" }), _jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: reindexDraft, disabled: reorderSections.isPending || reorderDraft.length === 0, children: "Reindex 1..N" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: undoReorderChange, disabled: reorderSections.isPending || !canUndoReorderChanges, children: "Undo unsaved" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: resetToServerOrder, disabled: reorderSections.isPending || !hasReorderChanges, children: "Reset to server" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => reorderSections.mutate(), disabled: !hasReorderChanges || reorderSections.isPending, children: reorderSections.isPending ? "Saving order..." : "Save order" })] })] }), reorderDraft.length === 0 ? (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No sections to reorder." })) : (_jsx(Div, { className: "space-y-2", children: reorderDraft.map((item, index) => (_jsxs(Div, { className: "grid grid-cols-[auto_1fr_auto_auto_auto] items-center gap-2 rounded-md border border-zinc-200 p-2 dark:border-slate-700", draggable: true, onDragStart: () => setDragIndex(index), onDragOver: (event) => event.preventDefault(), onDrop: () => handleReorderDrop(index), onDragEnd: () => setDragIndex(null), children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-500 dark:text-zinc-400", children: "\u2261" }), _jsxs(Text, { className: "text-sm text-zinc-800 dark:text-zinc-200", children: [item.type, " #", item.order] }), _jsx(Input, { type: "number", min: 1, max: reorderDraft.length, value: String(item.order), onChange: (event) => updateReorderItemOrder(index, Number(event.target.value) || 1), className: "w-24" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, -1), disabled: index === 0, children: "Up" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, 1), disabled: index === reorderDraft.length - 1, children: "Down" })] }, `reorder-${item.id}`))) }))] }), _jsx(ConfirmDeleteModal, { isOpen: seedResetOpen, onClose: () => setSeedResetOpen(false), onConfirm: () => resetSeed.mutate(), title: "Reset homepage sections seed data?", message: "This will reload the 19 default homepage sections from seed data. Any manual changes made in Firestore will be overwritten.", confirmText: "Reset seed", cancelText: "Cancel", isDeleting: resetSeed.isPending, variant: "danger" }), _jsx(Modal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: "Manage Homepage Section", size: "lg", children: _jsxs(Form, { className: "space-y-4", onSubmit: (event) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Div, { paddingX: "x-sm-md", padding: "y-md", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "3", children: [_jsxs(Div, { children: [_jsx(Text, { size: "base", weight: "semibold", color: "primary", children: "Homepage Sections" }), _jsx(Text, { size: "sm", color: "muted", children: "Manage homepage sections and their display order" })] }), _jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setSeedResetOpen(true), children: "Reset seed data" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => setIsModalOpen(true), children: "Manage Sections" })] })] }), errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No sections found" })] }), _jsxs(Stack, { className: `mt-4 ${__P.p4}`, gap: "3", rounded: "xl", surface: "default", border: "default", children: [_jsxs(Row, { align: "center", justify: "between", gap: "3", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Reorder Sections" }), _jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: reindexDraft, disabled: reorderSections.isPending || reorderDraft.length === 0, children: "Reindex 1..N" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: undoReorderChange, disabled: reorderSections.isPending || !canUndoReorderChanges, children: "Undo unsaved" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: resetToServerOrder, disabled: reorderSections.isPending || !hasReorderChanges, children: "Reset to server" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => reorderSections.mutate(), disabled: !hasReorderChanges || reorderSections.isPending, children: reorderSections.isPending ? "Saving order..." : "Save order" })] })] }), reorderDraft.length === 0 ? (_jsx(Text, { size: "sm", color: "muted", children: "No sections to reorder." })) : (_jsx(Stack, { gap: "sm", children: reorderDraft.map((item, index) => (_jsxs(Div, { layout: "grid", gap: "2", align: "center", className: "grid-cols-[auto_1fr_auto_auto_auto]", rounded: "md", padding: "xs", border: "default", draggable: true, onDragStart: () => setDragIndex(index), onDragOver: (event) => event.preventDefault(), onDrop: () => handleReorderDrop(index), onDragEnd: () => setDragIndex(null), children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "\u2261" }), _jsxs(Text, { size: "sm", color: "primary", children: [item.type, " #", item.order] }), _jsx(Input, { type: "number", min: 1, max: reorderDraft.length, value: String(item.order), onChange: (event) => updateReorderItemOrder(index, Number(event.target.value) || 1), className: "w-24" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, -1), disabled: index === 0, children: "Up" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, 1), disabled: index === reorderDraft.length - 1, children: "Down" })] }, `reorder-${item.id}`))) }))] }), _jsx(ConfirmDeleteModal, { isOpen: seedResetOpen, onClose: () => setSeedResetOpen(false), onConfirm: () => resetSeed.mutate(), title: "Reset homepage sections seed data?", message: "This will reload the 19 default homepage sections from seed data. Any manual changes made in Firestore will be overwritten.", confirmText: "Reset seed", cancelText: "Cancel", isDeleting: resetSeed.isPending, variant: "danger" }), _jsx(Modal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: "Manage Homepage Section", size: "lg", children: _jsxs(Form, { onSubmit: (event) => {
                         event.preventDefault();
                         saveSection.mutate();
-                    }, children: [_jsx(Select, { label: "Mode", value: mode, onValueChange: (value) => setMode(value), options: [
+                    }, spacing: "md", children: [_jsx(Select, { label: "Mode", value: mode, onValueChange: (value) => setMode(value), options: [
                                 { label: "Create new section", value: "create" },
                                 { label: "Edit existing section", value: "edit" },
                             ] }), mode === "edit" ? (_jsx(Select, { label: "Section", value: selectedSectionId, onValueChange: setSelectedSectionId, placeholder: "Select section", options: sections.map((section) => ({

package/dist/features/admin/components/AdminSessionsManager.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Div } from "../../../ui";
+import { Stack } from "../../../ui";
 export function AdminSessionsManager({ renderHeader, renderStats, renderTable, renderConfirmModal, className = "", }) {
-    return (_jsxs(Div, { className: `space-y-6 ${className}`, children: [renderHeader?.(), renderStats(), renderTable(), renderConfirmModal?.()] }));
+    return (_jsxs(Stack, { className: `${className}`, gap: "lg", children: [renderHeader?.(), renderStats(), renderTable(), renderConfirmModal?.()] }));
 }

package/dist/features/admin/components/AdminSessionsView.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { useApiMutation } from "@mohasinac/appkit/client";
+import { Row, SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import React, { useState } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { ConfirmDeleteModal, Div, ListingLayout, RowActionMenu, Text, useToast } from "../../../ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { ConfirmDeleteModal, ListingLayout, RowActionMenu, Text, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
@@ -23,7 +24,7 @@ export function AdminSessionsView({ children, ...props }) {
     const queryClient = useQueryClient();
     const { showToast } = useToast();
     const [revokeTarget, setRevokeTarget] = useState(null);
-    const revokeMutation = useMutation({
+    const revokeMutation = useApiMutation({
         mutationFn: async (id) => {
             await apiClient.delete(ADMIN_ENDPOINTS.SESSION_BY_ID(id));
         },
@@ -90,7 +91,7 @@ export function AdminSessionsView({ children, ...props }) {
                     onClick: () => setRevokeTarget(row),
                 },
             ] })),
-        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx(Div, { className: "flex flex-wrap gap-2", children: [
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-widest", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Status" }), _jsx(Row, { wrap: true, gap: "sm", children: [
                         { label: "All", value: "" },
                         { label: "Active only", value: "true" },
                     ].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, isActive: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.isActive || "") === opt.value