@mohasinac/appkit 4.30.19 → 4.31.1

package/dist/features/admin/actions/notification-actions.js

@@ -7,7 +7,7 @@ import { isChannelHealthy, withChannelRetry } from "../../../_internal/server/no
 import { enqueueJob } from "../../jobs/actions/enqueue-job";
 import { serverLogger } from "../../../monitoring";
 import { decryptPii } from "../../../security/index";
-import { resolveNotificationActionUrl, } from "../../../_internal/shared/features/notifications/action-url";
+import { resolveNotificationActionUrl, TYPE_AUDIENCE, } from "../../../_internal/shared/features/notifications/action-url";
 import { renderNotificationEmail } from "../../email/notification-templates";
 /**
  * A notification's `actionUrl` is a site-relative path — correct for the
@@ -100,46 +100,6 @@ export async function listNotifications(userId, limit = 20) {
 export async function getUnreadNotificationCount(userId) {
     return notificationRepository.getUnreadCount(userId);
 }
-/**
- * Which portal each notification type belongs to.
- *
- * `Record<NotificationType, …>`, so a new type cannot compile without an
- * answer — the same discipline `typeToPrefsKey` needed after it silently
- * omitted three types and ignored those users' opt-outs.
- */
-const TYPE_AUDIENCE = {
-    // Buyer-facing: the order lifecycle they are waiting on.
-    order_placed: "buyer",
-    order_confirmed: "buyer",
-    order_shipped: "buyer",
-    order_delivered: "buyer",
-    order_cancelled: "buyer",
-    refund_initiated: "buyer",
-    payment_review: "buyer",
-    emi_installment_due_soon: "buyer",
-    emi_installment_overdue: "buyer",
-    prize_won: "buyer",
-    prize_reveal_expired: "buyer",
-    product_available: "buyer",
-    bid_placed: "buyer",
-    bid_outbid: "buyer",
-    bid_won: "buyer",
-    bid_lost: "buyer",
-    offer_responded: "buyer",
-    offer_counter_accepted: "buyer",
-    offer_expired: "buyer",
-    review_replied: "buyer",
-    catalogue_images_stale: "buyer",
-    // Seller-facing.
-    auction_ended: "seller", // "your auction closed with no winner"
-    offer_received: "seller",
-    review_approved: "seller",
-    // Account-level, which lives in the user portal for everyone.
-    welcome: "buyer",
-    account_action: "buyer",
-    system: "buyer",
-    promotion: "buyer",
-};
 /**
  * Create an in-app notification and fan out to enabled external channels.
  *

package/dist/features/admin/components/AdminActionIndexView.d.ts

@@ -0,0 +1,32 @@
+/**
+ * AdminActionIndexView — the one control plane for "what can a user do here,
+ * and where is it" (D7).
+ *
+ * ## It absorbs two editors that reached nothing
+ *
+ * `/admin/navigation` (CRUD over a Firestore collection) and
+ * `/admin/settings/navigation` (toggles over `siteSettings.navConfig`, seeded
+ * from an 11-item hardcoded array) both existed, and **neither one's data
+ * reached any sidebar** — because `filterNavItems` short-circuits on a missing
+ * `id` and no nav item had one until W6. Two admin screens editing settings
+ * nothing read.
+ *
+ * This screen lists every entry with its kind, portal, route, deep link and
+ * required permission, and the toggle here does reach the sidebar.
+ *
+ * ## What an admin may change, and what they may not
+ *
+ * Label, description, keywords, weight and enabled — content. Not `href`, not
+ * `kind`, not any permission field: repointing a built-in route is routing,
+ * and relaxing a permission is access control. An admin-authored entry brings
+ * its own href and is validated at SAVE time, because the audit runs on CI and
+ * a runtime-written bad link would 404 until the next run.
+ */
+import React from "react";
+import type { StackedViewShellProps } from "../../../ui";
+export interface AdminActionIndexViewProps extends Omit<StackedViewShellProps, "sections"> {
+    labels?: {
+        title?: string;
+    };
+}
+export declare function AdminActionIndexView({ labels }: AdminActionIndexViewProps): React.JSX.Element;

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

@@ -0,0 +1,128 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * AdminActionIndexView — the one control plane for "what can a user do here,
+ * and where is it" (D7).
+ *
+ * ## It absorbs two editors that reached nothing
+ *
+ * `/admin/navigation` (CRUD over a Firestore collection) and
+ * `/admin/settings/navigation` (toggles over `siteSettings.navConfig`, seeded
+ * from an 11-item hardcoded array) both existed, and **neither one's data
+ * reached any sidebar** — because `filterNavItems` short-circuits on a missing
+ * `id` and no nav item had one until W6. Two admin screens editing settings
+ * nothing read.
+ *
+ * This screen lists every entry with its kind, portal, route, deep link and
+ * required permission, and the toggle here does reach the sidebar.
+ *
+ * ## What an admin may change, and what they may not
+ *
+ * Label, description, keywords, weight and enabled — content. Not `href`, not
+ * `kind`, not any permission field: repointing a built-in route is routing,
+ * and relaxing a permission is access control. An admin-authored entry brings
+ * its own href and is validated at SAVE time, because the audit runs on CI and
+ * a runtime-written bad link would 404 until the next run.
+ */
+import React from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useApiMutation } from "@mohasinac/appkit/client";
+import { Alert, Badge, Row, Span, Stack, Text, Toggle, useToast } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { DataListingView } from "./DataListingView";
+const ENDPOINT = ADMIN_ENDPOINTS.ACTION_INDEX;
+export function AdminActionIndexView({ labels = {} }) {
+    const queryClient = useQueryClient();
+    const { showToast } = useToast();
+    const query = useQuery({
+        queryKey: ["admin", "action-index"],
+        queryFn: () => apiClient.get(ENDPOINT),
+        staleTime: 60000,
+    });
+    const payload = query.data?.data;
+    const overrides = payload?.control?.entries ?? {};
+    const toggleMutation = useApiMutation({
+        errorMessage: "Could not update that entry.",
+        mutationFn: async (vars) => apiClient.patch(ENDPOINT, {
+            entryId: vars.entryId,
+            override: { ...overrides[vars.entryId], enabled: vars.enabled },
+        }),
+        onSuccess: () => {
+            showToast("Saved.", "success");
+            void queryClient.invalidateQueries({ queryKey: ["admin", "action-index"] });
+        },
+    });
+    /*
+     * Ordered by weight, then label — the same ranking `matchesNavQuery` gives
+     * the search, so the admin reading this list sees entries in the order a
+     * user would meet them.
+     */
+    const rows = React.useMemo(() => [...(payload?.entries ?? [])]
+        .sort((a, b) => (b.weight ?? 0) - (a.weight ?? 0) || a.label.localeCompare(b.label))
+        .map((entry) => ({
+        id: entry.id,
+        primary: entry.label,
+        secondary: entry.description ?? entry.sectionPath ?? "",
+        kind: entry.kind,
+        portal: entry.portal,
+        href: `${entry.href}${entry.deepLink ?? ""}`,
+        permission: entry.requiredPermission ?? "—",
+        enabled: overrides[entry.id]?.enabled !== false,
+    })), [payload?.entries, overrides]);
+    const sync = payload?.sync;
+    return (_jsxs(Stack, { gap: "md", children: [sync && sync.orphanedOverrides.length > 0 && (_jsxs(Alert, { variant: "warning", title: "Overrides with no entry", children: [sync.orphanedOverrides.length, " saved override", sync.orphanedOverrides.length === 1 ? "" : "s", " point at entries the code no longer has (", sync.orphanedOverrides.slice(0, 4).join(", "), sync.orphanedOverrides.length > 4 ? "…" : "", "). They are ignored \u2014 clear them when convenient."] })), _jsx(DataListingView, { config: {
+                    portal: "admin",
+                    title: labels.title ?? "Action index",
+                    subtitle: "Every page, setting and toggle a user can reach — and what the search finds them by.",
+                    search: {
+                        placeholder: "Search by label, description or keyword…",
+                        mode: "partial",
+                        fields: ["label", "description", "keywords"],
+                        commit: "debounce",
+                    },
+                    emptyLabel: "No entries match.",
+                    queryKey: ["admin", "action-index", "listing"],
+                    endpoint: ENDPOINT,
+                    filterKeys: ["portal", "kind"],
+                    defaultSort: "",
+                    /*
+                     * 🛑 No sort dropdown, on purpose.
+                     *
+                     * This endpoint returns ONE document — the whole index, ~380 entries
+                     * — and does not sort. Offering a dropdown here would be Root Cause
+                     * #63 exactly: an option whose field the query never applies, so the
+                     * control reorders nothing and says nothing about it. The rows are
+                     * ordered by weight then label below, which is the ranking the
+                     * search itself uses.
+                     */
+                    sortOptions: [],
+                    mapRows: () => rows,
+                    getTotal: () => rows.length,
+                    buildFilters: () => undefined,
+                    columns: [
+                        { key: "primary", header: "Entry" },
+                        {
+                            key: "kind",
+                            header: "Kind",
+                            render: (row) => _jsx(Badge, { variant: "default", children: row.kind }),
+                        },
+                        { key: "portal", header: "Portal" },
+                        {
+                            key: "href",
+                            header: "Goes to",
+                            render: (row) => (_jsx(Span, { size: "xs", family: "mono", color: "muted", children: row.href })),
+                        },
+                        {
+                            key: "permission",
+                            header: "Needs",
+                            render: (row) => (_jsx(Span, { size: "xs", color: "muted", children: row.permission })),
+                        },
+                        {
+                            key: "enabled",
+                            header: "Shown",
+                            render: (row) => (_jsx(Row, { align: "center", gap: "sm", children: _jsx(Toggle, { checked: row.enabled, size: "sm", "aria-label": `Show ${row.primary}`, onChange: (next) => toggleMutation.mutate({ entryId: row.id, enabled: next }) }) })),
+                        },
+                    ],
+                } }), _jsx(Text, { size: "xs", color: "muted", children: "Hiding an entry removes it from the sidebar, the header search and the command palette at once. Labels, descriptions and keywords can be edited here; a route and its required permission belong to the code." })] }));
+}

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

@@ -1,55 +1,60 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { normalizeError } from "../../../errors/normalize";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Alert, Button, Checkbox, Div, Form, FormActions, Input, Select, Span, Stack, StackedViewShell, Text, Toggle, useToast } from "../../../ui";
+import { Alert, Checkbox, Div, Span, Stack, StackedViewShell, Text, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { adminAdFormSchema } from "../schemas/admin-ops-forms";
 import { FormErrorSummary } from "../../../ui/forms/FormErrorSummary";
+import { FormShellContext, useFormShellState } from "../../../ui/forms/FormShell";
+import { applyZodIssues } from "../../../ui/forms/apply-zod-issues";
+import { buildSectionsFromSchema, visibleValues } from "../../shell/build-sections";
+import { SectionForm, useSectionFormNav } from "../../shell/SectionForm";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
 };
-function validateThirdPartyUrl(url, issues) {
-    if (!url.trim()) {
-        issues.push("Third-party ads require a third-party URL");
-        return;
-    }
-    try {
-        const parsed = new URL(url.trim());
-        if (parsed.protocol !== "https:") {
-            issues.push("Third-party ad URL must be https");
-        }
-    }
-    catch (_err) {
-        void normalizeError(_err);
-        issues.push("Third-party ad URL must be a valid URL");
-    }
-}
-function renderAdScheduleSection({ startAt, setStartAt, endAt, setEndAt }) {
-    return (_jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-1 md:grid-cols-2", children: [_jsx(Input, { label: "Start at (ISO)", value: startAt, onChange: (event) => setStartAt(event.target.value), placeholder: "2026-05-01T00:00:00.000Z" }), _jsx(Input, { label: "End at (ISO)", value: endAt, onChange: (event) => setEndAt(event.target.value), placeholder: "2026-05-30T23:59:59.000Z" })] }));
-}
-function renderAdCreativeSection({ title, setTitle, body, setBody, imageUrl, setImageUrl, ctaLabel, setCtaLabel, ctaHref, setCtaHref, adsenseSlot, setAdsenseSlot, thirdPartyUrl, setThirdPartyUrl, provider, }) {
-    return (_jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-1 md:grid-cols-2", children: [_jsx(Input, { label: "Creative title", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Catch the mega sale" }), _jsx(Input, { label: "Creative body", value: body, onChange: (e) => setBody(e.target.value), placeholder: "Up to 40% off this weekend" }), _jsx(Input, { label: "Image URL", value: imageUrl, onChange: (e) => setImageUrl(e.target.value), placeholder: "https://..." }), _jsx(Input, { label: "CTA label", value: ctaLabel, onChange: (e) => setCtaLabel(e.target.value), placeholder: "Shop now" }), _jsx(Input, { label: "CTA URL", value: ctaHref, onChange: (e) => setCtaHref(e.target.value), placeholder: "/promotions/deals" }), provider === "adsense" ? (_jsx(Input, { label: "AdSense slot", value: adsenseSlot, onChange: (e) => setAdsenseSlot(e.target.value), placeholder: "1234567890" })) : null, provider === "thirdParty" ? (_jsx(Input, { label: "Third-party URL", value: thirdPartyUrl, onChange: (e) => setThirdPartyUrl(e.target.value), placeholder: "https://adnetwork.example/slot" })) : null] }));
+const PROVIDER_OPTIONS = [
+    { label: "Manual", value: "manual" },
+    { label: "AdSense", value: "adsense" },
+    { label: "Third Party", value: "thirdParty" },
+];
+const STATUS_OPTIONS = [
+    { label: "Draft", value: "draft" },
+    { label: "Active", value: "active" },
+    { label: "Scheduled", value: "scheduled" },
+    { label: "Paused", value: "paused" },
+];
+const EMPTY_AD = {
+    name: "",
+    provider: "manual",
+    status: "draft",
+    priority: 0,
+    placementIds: [],
+    requiresConsent: false,
+    startAt: "",
+    endAt: "",
+    creativeTitle: "",
+    creativeBody: "",
+    creativeImageUrl: "",
+    ctaLabel: "",
+    ctaHref: "",
+    adsenseSlot: "",
+    thirdPartyUrl: "",
+};
+/**
+ * The placement checkboxes.
+ *
+ * Its options come from a live query, so it cannot be a generated select;
+ * module level rather than inline for the DEEP_NESTING reason.
+ */
+function PlacementChecklist({ placements, selected, onToggle, }) {
+    return (_jsx(Stack, { gap: "sm", children: _jsx(Div, { layout: "grid", gap: "2", className: "grid-cols-1 md:grid-cols-2", children: placements.map((placement) => (_jsxs("label", { className: "flex items-center gap-[var(--appkit-space-2)] rounded-md border border-[var(--appkit-color-border)] px-[var(--appkit-space-3)] py-[var(--appkit-space-2)]", children: [_jsx(Checkbox, { bare: true, checked: selected.includes(placement.id), onChange: () => onToggle(placement.id) }), _jsx(Span, { size: "sm", children: placement.label })] }, placement.id))) }) }));
 }
 export function AdminAdEditorView({ adId, endpointBase = ADMIN_ENDPOINTS.ADS, labels = {}, onSaved, ...rest }) {
-    const [name, setName] = React.useState("");
-    const [provider, setProvider] = React.useState("manual");
-    const [status, setStatus] = React.useState("draft");
-    const [priority, setPriority] = React.useState(0);
-    const [requiresConsent, setRequiresConsent] = React.useState(false);
-    const [selectedPlacements, setSelectedPlacements] = React.useState([]);
-    const [startAt, setStartAt] = React.useState("");
-    const [endAt, setEndAt] = React.useState("");
-    const [title, setTitle] = React.useState("");
-    const [body, setBody] = React.useState("");
-    const [imageUrl, setImageUrl] = React.useState("");
-    const [ctaLabel, setCtaLabel] = React.useState("");
-    const [ctaHref, setCtaHref] = React.useState("");
-    const [adsenseSlot, setAdsenseSlot] = React.useState("");
-    const [thirdPartyUrl, setThirdPartyUrl] = React.useState("");
+    const [form, setForm] = React.useState(EMPTY_AD);
+    const patch = (partial) => setForm((prev) => Object.assign({}, prev, partial));
     const { showToast } = useToast();
     const metaQuery = useQuery({
         queryKey: ["admin-ads-editor-meta", endpointBase],
@@ -63,45 +68,59 @@ export function AdminAdEditorView({ adId, endpointBase = ADMIN_ENDPOINTS.ADS, la
         staleTime: 15000,
     });
     React.useEffect(() => {
-        if (!adQuery.data?.item)
+        const item = adQuery.data?.item;
+        if (!item)
             return;
-        const item = adQuery.data.item;
-        setName(item.name || "");
-        setProvider(item.provider || "manual");
-        setStatus(item.status || "draft");
-        setPriority(item.priority ?? 0);
-        setRequiresConsent(Boolean(item.requiresConsent));
-        setSelectedPlacements(item.placementIds ?? []);
-        setStartAt(item.startAt || "");
-        setEndAt(item.endAt || "");
-        setTitle(item.creative?.title || "");
-        setBody(item.creative?.body || "");
-        setImageUrl(item.creative?.imageUrl || "");
-        setCtaLabel(item.creative?.ctaLabel || "");
-        setCtaHref(item.creative?.ctaHref || "");
-        setAdsenseSlot(item.creative?.adsenseSlot || "");
-        setThirdPartyUrl(item.creative?.thirdPartyUrl || "");
+        patch({
+            name: item.name || "",
+            provider: item.provider || "manual",
+            status: item.status || "draft",
+            priority: item.priority ?? 0,
+            requiresConsent: Boolean(item.requiresConsent),
+            placementIds: item.placementIds ?? [],
+            startAt: item.startAt || "",
+            endAt: item.endAt || "",
+            creativeTitle: item.creative?.title || "",
+            creativeBody: item.creative?.body || "",
+            creativeImageUrl: item.creative?.imageUrl || "",
+            ctaLabel: item.creative?.ctaLabel || "",
+            ctaHref: item.creative?.ctaHref || "",
+            adsenseSlot: item.creative?.adsenseSlot || "",
+            thirdPartyUrl: item.creative?.thirdPartyUrl || "",
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [adQuery.data]);
     const saveMutation = useApiMutation({
         errorMessage: "Save failed",
         mutationFn: async () => {
+            /*
+             * `visibleValues` is what keeps a provider-specific field out of the
+             * payload when its input is not on screen.
+             *
+             * Both `adsenseSlot` and `thirdPartyUrl` used to go out unconditionally
+             * while their inputs unmount on a provider switch — so an ad created as
+             * AdSense and switched to "manual" shipped a stale slot nothing could
+             * show or clear. The rule was then restated as a ternary right here; it
+             * now lives once, on the schema, as the same predicate that hides them.
+             */
+            const draft = visibleValues(adminAdFormSchema, form);
             const payload = {
-                name,
-                provider,
-                status,
-                priority,
-                requiresConsent,
-                placementIds: selectedPlacements,
-                startAt: startAt || undefined,
-                endAt: endAt || undefined,
+                name: draft.name,
+                provider: draft.provider,
+                status: draft.status,
+                priority: draft.priority,
+                requiresConsent: draft.requiresConsent,
+                placementIds: draft.placementIds,
+                startAt: draft.startAt || undefined,
+                endAt: draft.endAt || undefined,
                 creative: {
-                    title: title || undefined,
-                    body: body || undefined,
-                    imageUrl: imageUrl || undefined,
-                    ctaLabel: ctaLabel || undefined,
-                    ctaHref: ctaHref || undefined,
-                    adsenseSlot: adsenseSlot || undefined,
-                    thirdPartyUrl: thirdPartyUrl || undefined,
+                    title: draft.creativeTitle || undefined,
+                    body: draft.creativeBody || undefined,
+                    imageUrl: draft.creativeImageUrl || undefined,
+                    ctaLabel: draft.ctaLabel || undefined,
+                    ctaHref: draft.ctaHref || undefined,
+                    adsenseSlot: draft.adsenseSlot || undefined,
+                    thirdPartyUrl: draft.thirdPartyUrl || undefined,
                 },
             };
             if (adId) {
@@ -120,49 +139,35 @@ export function AdminAdEditorView({ adId, endpointBase = ADMIN_ENDPOINTS.ADS, la
     });
     const placements = adQuery.data?.placements ?? metaQuery.data?.placements ?? [];
     const providerCredentialStatus = metaQuery.data?.providerCredentialStatus;
+    /*
+     * What remains of `publishIssues` after the schema took its share.
+     *
+     * The name, the placement count, the date order, "a scheduled ad needs a
+     * start date" and the three provider rules all moved to the schema, where
+     * they reach the field that is wrong instead of a warning banner that only
+     * appeared once the status was already publish-ready. What is left cannot
+     * live there: it depends on the LIVE placement list and on whether the
+     * provider's credentials are configured in site settings — neither of which
+     * a schema can see.
+     */
     const publishIssues = React.useMemo(() => {
         const issues = [];
         const now = Date.now();
-        if (!name.trim()) {
-            issues.push("Ad name is required");
-        }
-        if (selectedPlacements.length === 0) {
-            issues.push("Select at least one placement");
-        }
         const knownPlacementIds = new Set(placements.map((placement) => placement.id));
         const enabledPlacementIds = new Set(placements.filter((placement) => placement.enabled).map((placement) => placement.id));
-        const unknownPlacements = selectedPlacements.filter((placementId) => !knownPlacementIds.has(placementId));
-        if (unknownPlacements.length > 0) {
-            issues.push(`Unknown placements: ${unknownPlacements.join(", ")}`);
-        }
-        const disabledPlacements = selectedPlacements.filter((placementId) => !enabledPlacementIds.has(placementId));
-        if (disabledPlacements.length > 0) {
-            issues.push(`Selected placements are disabled: ${disabledPlacements.join(", ")}`);
+        const unknown = form.placementIds.filter((id) => !knownPlacementIds.has(id));
+        if (unknown.length > 0)
+            issues.push(`Unknown placements: ${unknown.join(", ")}`);
+        const disabled = form.placementIds.filter((id) => !enabledPlacementIds.has(id));
+        if (disabled.length > 0) {
+            issues.push(`Selected placements are disabled: ${disabled.join(", ")}`);
         }
-        const startMs = startAt ? new Date(startAt).getTime() : null;
-        const endMs = endAt ? new Date(endAt).getTime() : null;
-        if (startAt && Number.isNaN(startMs)) {
-            issues.push("Start date must be a valid ISO timestamp");
+        const startMs = form.startAt ? new Date(form.startAt).getTime() : null;
+        const endMs = form.endAt ? new Date(form.endAt).getTime() : null;
+        if (form.status === "scheduled" && startMs !== null && !Number.isNaN(startMs) && startMs <= now) {
+            issues.push("Scheduled ads must start in the future");
         }
-        if (endAt && Number.isNaN(endMs)) {
-            issues.push("End date must be a valid ISO timestamp");
-        }
-        if (startMs !== null &&
-            endMs !== null &&
-            !Number.isNaN(startMs) &&
-            !Number.isNaN(endMs) &&
-            endMs <= startMs) {
-            issues.push("End date must be after start date");
-        }
-        if (status === "scheduled") {
-            if (!startAt || startMs === null || Number.isNaN(startMs)) {
-                issues.push("Scheduled ads require a valid start date");
-            }
-            else if (startMs <= now) {
-                issues.push("Scheduled ads must start in the future");
-            }
-        }
-        if (status === "active") {
+        if (form.status === "active") {
             if (startMs !== null && !Number.isNaN(startMs) && startMs > now) {
                 issues.push("Active ads cannot have a future start date");
             }
@@ -170,75 +175,66 @@ export function AdminAdEditorView({ adId, endpointBase = ADMIN_ENDPOINTS.ADS, la
                 issues.push("Active ads cannot have an end date in the past");
             }
         }
-        if (provider === "manual") {
-            if (!title.trim() && !body.trim() && !imageUrl.trim() && !ctaHref.trim()) {
-                issues.push("Manual ads need at least one creative field (title, body, image, or CTA URL)");
-            }
+        if (form.provider === "adsense" && !providerCredentialStatus?.hasAdsenseClientId) {
+            issues.push("AdSense provider credentials are missing in ad settings");
         }
-        if (provider === "adsense") {
-            if (!adsenseSlot.trim()) {
-                issues.push("AdSense ads require an AdSense slot id");
-            }
-            if (!providerCredentialStatus?.hasAdsenseClientId) {
-                issues.push("AdSense provider credentials are missing in ad settings");
-            }
-        }
-        if (provider === "thirdParty") {
-            validateThirdPartyUrl(thirdPartyUrl, issues);
-            if (!providerCredentialStatus?.hasThirdPartyScriptUrl) {
-                issues.push("Third-party provider script URL is missing in ad settings");
-            }
+        if (form.provider === "thirdParty" && !providerCredentialStatus?.hasThirdPartyScriptUrl) {
+            issues.push("Third-party provider script URL is missing in ad settings");
         }
         return issues;
     }, [
-        adsenseSlot,
-        body,
-        ctaHref,
-        endAt,
-        imageUrl,
-        name,
+        form.endAt,
+        form.placementIds,
+        form.provider,
+        form.startAt,
+        form.status,
         placements,
-        provider,
         providerCredentialStatus?.hasAdsenseClientId,
         providerCredentialStatus?.hasThirdPartyScriptUrl,
-        selectedPlacements,
-        startAt,
-        status,
-        thirdPartyUrl,
-        title,
     ]);
-    const publishHardeningRequired = status === "active" || status === "scheduled";
+    const publishHardeningRequired = form.status === "active" || form.status === "scheduled";
     const blockedByPublishValidation = publishHardeningRequired && publishIssues.length > 0;
-    const togglePlacement = (placementId) => {
-        setSelectedPlacements((prev) => prev.includes(placementId)
-            ? prev.filter((id) => id !== placementId)
-            : [...prev, placementId]);
-    };
-    const scheduleSection = renderAdScheduleSection({ startAt, setStartAt, endAt, setEndAt });
-    const creativeSection = renderAdCreativeSection({
-        title, setTitle, body, setBody, imageUrl, setImageUrl,
-        ctaLabel, setCtaLabel, ctaHref, setCtaHref,
-        adsenseSlot, setAdsenseSlot, thirdPartyUrl, setThirdPartyUrl, provider,
+    const togglePlacement = (placementId) => setForm((prev) => ({
+        ...prev,
+        placementIds: prev.placementIds.includes(placementId)
+            ? prev.placementIds.filter((id) => id !== placementId)
+            : [...prev.placementIds, placementId],
+    }));
+    const sections = React.useMemo(() => buildSectionsFromSchema(adminAdFormSchema, {
+        options: {
+            provider: PROVIDER_OPTIONS,
+            status: STATUS_OPTIONS,
+        },
+        renderers: {
+            placementIds: ({ values }) => (_jsx(PlacementChecklist, { placements: placements, selected: values.placementIds, onToggle: togglePlacement })),
+        },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [placements]);
+    const nav = useSectionFormNav(sections, form, { scope: "admin:ad-editor" });
+    const { shellCtx, setFieldError, clearErrors } = useFormShellState(adminAdFormSchema, {
+        sections: nav.sectionMeta,
+        onGoToSection: nav.goToSection,
+        fieldToSectionIndex: nav.fieldToSectionIndex,
     });
+    const handleSubmit = () => {
+        clearErrors();
+        const parsed = adminAdFormSchema.safeParse(visibleValues(adminAdFormSchema, form));
+        if (!parsed.success) {
+            applyZodIssues(parsed.error.issues, setFieldError);
+            return;
+        }
+        if (blockedByPublishValidation) {
+            showToast("Cannot save in publish-ready status until the readiness issues are fixed.", "warning");
+            return;
+        }
+        saveMutation.mutate();
+    };
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? (adId ? "Edit Ad" : "Create Ad"), sections: [
             metaQuery.error ? (_jsx(Alert, { variant: "error", title: "Could not load ad metadata", children: metaQuery.error instanceof Error ? metaQuery.error.message : "Unknown error" })) : null,
             adQuery.error ? (_jsx(Alert, { variant: "error", title: "Could not load ad", children: adQuery.error instanceof Error ? adQuery.error.message : "Unknown error" })) : null,
-            _jsxs(Form, { schema: adminAdFormSchema, onSubmit: (event) => {
-                    event.preventDefault();
-                    if (blockedByPublishValidation) {
-                        showToast("Cannot save in publish-ready status until validation issues are fixed.", "warning");
-                        return;
-                    }
-                    saveMutation.mutate();
-                }, spacing: "md", children: [_jsx(FormErrorSummary, {}), _jsx(Input, { label: "Ad name", value: name, onChange: (event) => setName(event.target.value), placeholder: "Summer Campaign" }), _jsxs(Div, { layout: "grid", gap: "3", className: "grid-cols-1 md:grid-cols-3", children: [_jsx(Select, { label: "Provider", value: provider, options: [
-                                    { label: "Manual", value: "manual" },
-                                    { label: "AdSense", value: "adsense" },
-                                    { label: "Third Party", value: "thirdParty" },
-                                ], onChange: (event) => setProvider(event.target.value) }), _jsx(Select, { label: "Status", value: status, options: [
-                                    { label: "Draft", value: "draft" },
-                                    { label: "Active", value: "active" },
-                                    { label: "Scheduled", value: "scheduled" },
-                                    { label: "Paused", value: "paused" },
-                                ], onChange: (event) => setStatus(event.target.value) }), _jsx(Input, { label: "Priority", type: "number", value: String(priority), onChange: (event) => setPriority(Number(event.target.value || 0)) })] }), _jsx(Toggle, { checked: requiresConsent, onChange: setRequiresConsent, label: "Require user ad-consent for this ad" }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Placements" }), _jsx(Div, { layout: "grid", gap: "2", className: "grid-cols-1 md:grid-cols-2", children: placements.map((placement) => (_jsxs("label", { className: "flex items-center gap-[var(--appkit-space-2)] rounded-md border border-[var(--appkit-color-border)] px-[var(--appkit-space-3)] py-[var(--appkit-space-2)]", children: [_jsx(Checkbox, { bare: true, checked: selectedPlacements.includes(placement.id), onChange: () => togglePlacement(placement.id) }), _jsx(Span, { size: "sm", children: placement.label })] }, placement.id))) })] }), scheduleSection, creativeSection, _jsxs(Div, { border: "default", className: __P.p3, rounded: "lg", children: [_jsx(Text, { className: "mb-1", size: "sm", weight: "medium", children: "Preview" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: title || name || "Untitled ad" }), body ? _jsx(Text, { className: "mt-1", size: "sm", children: body }) : null, ctaLabel ? _jsxs(Text, { className: "mt-1", size: "xs", children: ["CTA: ", ctaLabel, " (", ctaHref || "#", ")"] }) : null] }), publishHardeningRequired && publishIssues.length > 0 ? (_jsx(Alert, { variant: "warning", title: "Publish readiness issues", children: publishIssues.join("; ") })) : null, _jsx(FormActions, { align: "right", children: _jsx(Button, { type: "submit", disabled: saveMutation.isPending || blockedByPublishValidation || !name.trim() || selectedPlacements.length === 0, children: saveMutation.isPending ? "Saving..." : status === "active" ? "Publish ad" : adId ? "Save changes" : "Create ad" }) })] }),
+            _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: patch, onSubmit: handleSubmit, schema: adminAdFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: saveMutation.isPending, submitLabel: form.status === "active" ? "Publish ad" : adId ? "Save changes" : "Create ad" })] }, "ad-form"),
+            _jsxs(Div, { border: "default", className: __P.p3, rounded: "lg", children: [_jsx(Text, { className: "mb-1", size: "sm", weight: "medium", children: "Preview" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: form.creativeTitle || form.name || "Untitled ad" }), form.creativeBody ? _jsx(Text, { className: "mt-1", size: "sm", children: form.creativeBody }) : null, form.ctaLabel ? (_jsxs(Text, { className: "mt-1", size: "xs", children: ["CTA: ", form.ctaLabel, " (", form.ctaHref || "#", ")"] })) : null] }, "ad-preview"),
+            publishHardeningRequired && publishIssues.length > 0 ? (_jsx(Alert, { variant: "warning", title: "Publish readiness issues", children: publishIssues.join("; ") }, "ad-publish-issues")) : null,
         ] }));
 }