@mohasinac/appkit 4.71.0 → 4.71.2

package/dist/features/account/components/BuyerAuctionsGuideView.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Gavel, TrendingUp, Trophy, AlertTriangle, Package, XCircle, ShieldCheck } from "lucide-react";
-import { Alert } from "../../../ui/components/Alert.js";
-import { Div } from "../../../ui/components/Div.js";
-import { Heading, Span, Text } from "../../../ui/components/Typography.js";
-import { Li, Section, Ul } from "../../../ui/components/Semantic.js";
-import { Row, Stack } from "../../../ui/components/Layout.js";
-import { GC } from "../../_guide-cls.js";
-import { resolvePublishedValues } from "../../../_internal/shared/content/published-values.js";
-import { getBrandName } from "../../../core/brand-resolver.js";
-/* Phase 9 — one definition of the refund timeline. See the 🛑 at the call site. */
-const { refundBusinessDaysMin: REFUND_DAYS_MIN, refundBusinessDaysMax: REFUND_DAYS_MAX } = resolvePublishedValues();
-const SECTIONS = [
-    {
-        Icon: Gavel, title: "How Auctions Work",
-        content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Reserve price" }), " \u2014 the minimum amount the seller will accept. If bidding ends below the reserve, no sale occurs. You'll see \"Reserve not met\" on the listing."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Bid increment" }), " \u2014 each new bid must exceed the current highest bid by at least the set increment. The increment is shown on the listing."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Auction end time" }), " \u2014 displayed in your local timezone. Countdown timer shows hours and minutes remaining."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Auto-extend" }), " \u2014 if a bid is placed within the last 5 minutes of an auction, the end time extends by 5 minutes. This prevents last-second sniping and gives all bidders a fair chance."] })] })),
-    },
-    {
-        Icon: TrendingUp, title: "Placing a Bid",
-        content: (_jsxs(_Fragment, { children: [_jsxs(Text, { className: `${GC.textMuted} mb-3`, children: ["Enter your bid amount \u2014 it must be at least the current high bid plus the increment \u2014 and click ", _jsx(Span, { weight: "bold", children: "Place Bid" }), ". You'll be asked to confirm."] }), _jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Outbid notification" }), " \u2014 you'll receive an in-app notification and email if someone outbids you."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Max bid (proxy bidding)" }), " \u2014 enter the maximum you're willing to pay. ", getBrandName(), " will automatically bid on your behalf up to that amount, in the minimum increments needed to keep you in the lead. Your max bid is never revealed to other bidders."] })] }), _jsxs(Text, { className: `${GC.textMuted} mt-3`, children: [_jsx(Span, { weight: "bold", children: "Example:" }), " Current bid is \u20B9500, increment is \u20B950. You set a max bid of \u20B9800. Your bid is placed at \u20B9550. If someone bids \u20B9600, the system auto-bids \u20B9650 for you \u2014 up to \u20B9800."] })] })),
-    },
-    {
-        Icon: Trophy, title: "Winning an Auction",
-        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: `${GC.textMuted} mb-3`, children: "When an auction ends and you're the highest bidder (above the reserve), you've won." }), _jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Payment window" }), " \u2014 you have ", _jsx(Span, { weight: "bold", children: "48 hours" }), " from the auction end time to complete payment."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "No payment" }), " \u2014 the order auto-cancels after 48 hours, you may receive a bid restriction, and the item may be offered to the next highest bidder."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Winner badge" }), " \u2014 your winning order gets an \"Auction Winner\" badge in My Orders."] })] })] })),
-    },
-    {
-        Icon: AlertTriangle, iconCls: "w-5 h-5 text-amber-500", title: "Bid Retraction Policy",
-        content: (_jsxs(Alert, { variant: "warning", children: ["Bids on ", getBrandName(), " are ", _jsx(Span, { weight: "bold", children: "binding" }), ". Only place a bid if you intend to pay. Retraction requires contacting support with a valid reason. Repeated retractions may result in a temporary restriction on placing new bids."] })),
-    },
-    {
-        Icon: Package, title: "Pre-orders",
-        content: (_jsxs(_Fragment, { children: [_jsx(Text, { className: `${GC.textMuted} mb-3`, children: "A pre-order is an item not yet in stock. The seller takes deposits or full payment upfront and orders from their supplier in bulk once demand is confirmed." }), _jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Deposit vs full price" }), " \u2014 check the listing. Some sellers take a partial deposit; others require full payment."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "Expected delivery date" }), " \u2014 shown on the listing. This is the seller's estimate based on supplier timelines \u2014 not a guaranteed date."] }), _jsxs(Li, { children: [_jsx(Span, { weight: "bold", className: GC.textStrong, children: "\"Confirmed supplier\" status" }), " \u2014 some listings show this badge, meaning the seller has placed the order with their supplier and stock is secured."] })] })] })),
-    },
-    {
-        Icon: XCircle, iconCls: "w-5 h-5 text-rose-500", title: "Pre-order Cancellations",
-        content: (_jsxs(_Fragment, { children: [_jsxs(Text, { className: `${GC.textMuted} mb-3`, children: ["To cancel a pre-order before the item is shipped, open a support ticket with category ", _jsx(Span, { weight: "bold", children: "Billing & Payment" }), " or ", _jsx(Span, { weight: "bold", children: "Order Issue" }), " and reference your order ID."] }), _jsxs(Text, { className: GC.textMuted, children: ["After cancellation is accepted, refunds follow the standard timeline:", " ", REFUND_DAYS_MIN, "\u2013", REFUND_DAYS_MAX, " business days to your original payment method."] })] })),
-    },
-    {
-        Icon: ShieldCheck, iconCls: "w-5 h-5 text-emerald-500", title: "Bidding Safety Tips",
-        content: (_jsx(Alert, { variant: "info", children: _jsxs(Ul, { spacing: "tight", size: "sm", children: [_jsx(Li, { children: "\u2713 Check the seller's rating and number of completed orders before bidding." }), _jsx(Li, { children: "\u2713 Read every product photo carefully \u2014 look for condition issues, especially on graded card slabs." }), _jsx(Li, { children: "\u2713 If authenticity is unclear, contact support before placing a bid \u2014 not after." }), _jsx(Li, { children: "\u2713 Set a max bid and stick to it. Bid heat is real \u2014 don't let excitement push you past your budget." })] }) })),
-    },
-];
-// ─── Component ────────────────────────────────────────────────────────────────
-export function BuyerAuctionsGuideView() {
-    return (_jsxs(Stack, { className: "max-w-3xl mx-auto", padding: "b-2xl", gap: "xl", children: [_jsxs(Section, { children: [_jsxs(Row, { className: "mb-2", align: "center", gap: "3", children: [_jsx(Row, { className: `flex-shrink-0 w-10 h-10 ${GC.iconBg}`, align: "center", justify: "center", rounded: "xl", children: _jsx(Gavel, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Buyer Guide" })] }), _jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)] mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "Auctions & Pre-orders" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", children: ["How bidding works, how to win, and everything you need to know about pre-orders on ", getBrandName(), "."] })] }), SECTIONS.map(({ Icon, iconCls, title, content }) => (_jsxs(Section, { className: GC.sectionWrap, children: [_jsxs(Div, { className: GC.sectionHeader, children: [_jsx(Icon, { className: iconCls ?? GC.iconPrimary }), _jsx(Heading, { level: 2, className: GC.sectionTitle, children: title })] }), _jsx(Div, { className: GC.sectionBody, children: content })] }, title)))] }));
-}

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

@@ -1,13 +0,0 @@
-/**
- * AdminArtView — admin browse of art listings.
- *
- * A thin wrapper over the shared per-listing-type config. This file (and its
- * four siblings) used to carry a full hand-written ListingViewConfig; all five
- * were the same config with a different listingType, and all five shipped
- * an empty filterKeys array — no filter drawer at all — plus their own copy
- * of a three-option sort array. See listing-type-listing-config.ts.
- */
-import React from "react";
-import type { ListingLayoutProps } from "../../../ui/components/ListingLayout";
-export type AdminArtViewProps = ListingLayoutProps;
-export declare function AdminArtView({ children, ...props }: AdminArtViewProps): React.JSX.Element;

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

@@ -1,31 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * AdminArtView — admin browse of art listings.
- *
- * A thin wrapper over the shared per-listing-type config. This file (and its
- * four siblings) used to carry a full hand-written ListingViewConfig; all five
- * were the same config with a different listingType, and all five shipped
- * an empty filterKeys array — no filter drawer at all — plus their own copy
- * of a three-option sort array. See listing-type-listing-config.ts.
- */
-import React from "react";
-import { ListingLayout } from "../../../ui/components/ListingLayout.js";
-import { buildListingTypeListingConfig } from "../../products/config/listing-type-listing-config.js";
-import { DataListingView } from "./DataListingView.js";
-import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope.js";
-const LISTING_TYPES = ["art"];
-const CONFIG_OPTS = {
-    title: "Art",
-    searchPlaceholder: "Search art prints by name or seller",
-    emptyLabel: "No art listings",
-};
-export function AdminArtView({ children, ...props }) {
-    const scope = useAvailabilityScope(LISTING_TYPES);
-    if (React.Children.count(children) > 0) {
-        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
-    }
-    // Built per-render rather than at module scope: the availability scope
-    // reads the URL through a hook, which cannot run outside a component.
-    return (_jsx(DataListingView, { config: buildListingTypeListingConfig("art", { ...CONFIG_OPTS, scope }) }));
-}

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

@@ -1,27 +0,0 @@
-/**
- * AdminBeysView — browse and correct the generated Beyblade database.
- *
- * ── 🛑 WHY THIS IS A CORRECTION SURFACE, NOT A CRUD SCREEN ────────────────
- *
- * `beys` is 1,988 rows built by committed generators from a crawled corpus. So
- * there is no "Add Beyblade" button: a row authored here would have no source,
- * would vanish on the next regeneration, and would make the claim "this dataset
- * rebuilds from `appkit/src/seed/` alone" false. Adding one is a change to the
- * generator.
- *
- * What this surface IS for is the thing the corpus demonstrably needs — fixing
- * a wrong extraction. On mode data alone the source was wrong five times in one
- * session: an inverted tip transition, a mechanism attributed to the wrong
- * part, a part with no modes at all, and two misexpanded abbreviations. A
- * correction made here survives the next reseed, field by field
- * (`adminEditedFields`).
- *
- * @tag domain:beys
- * @tag layer:feature
- * @tag access:client
- * @tag consumers:app/[locale]/admin/beys/page.tsx
- */
-import React from "react";
-import type { ListingLayoutProps } from "../../../ui/components/ListingLayout";
-export type AdminBeysViewProps = ListingLayoutProps;
-export declare function AdminBeysView({ children, ...props }: AdminBeysViewProps): React.JSX.Element;

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

@@ -1,180 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * AdminBeysView — browse and correct the generated Beyblade database.
- *
- * ── 🛑 WHY THIS IS A CORRECTION SURFACE, NOT A CRUD SCREEN ────────────────
- *
- * `beys` is 1,988 rows built by committed generators from a crawled corpus. So
- * there is no "Add Beyblade" button: a row authored here would have no source,
- * would vanish on the next regeneration, and would make the claim "this dataset
- * rebuilds from `appkit/src/seed/` alone" false. Adding one is a change to the
- * generator.
- *
- * What this surface IS for is the thing the corpus demonstrably needs — fixing
- * a wrong extraction. On mode data alone the source was wrong five times in one
- * session: an inverted tip transition, a mechanism attributed to the wrong
- * part, a part with no modes at all, and two misexpanded abbreviations. A
- * correction made here survives the next reseed, field by field
- * (`adminEditedFields`).
- *
- * @tag domain:beys
- * @tag layer:feature
- * @tag access:client
- * @tag consumers:app/[locale]/admin/beys/page.tsx
- */
-import React from "react";
-import { Heading, Text } from "../../../ui/components/Typography.js";
-import { ListingLayout } from "../../../ui/components/ListingLayout.js";
-import { Stack } from "../../../ui/components/Layout.js";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
-import { BEY_FIELDS } from "../../../constants/field-names.js";
-import { sortBy } from "../../../constants/sort.js";
-import { ROUTES } from "../../../next/routing/route-map.js";
-import { DataListingView } from "./DataListingView.js";
-/**
- * 🛑 Rows are read from WHICHEVER envelope shape arrives.
- *
- * `apiClient.get()` unwraps `{success, data}` and returns `data` itself, so an
- * endpoint that puts rows directly in `data` hands `mapRows` an ARRAY while one
- * that nests them hands it an object. Reading `.data` off an array yields
- * undefined — which is exactly how the categories listing rendered "No
- * categories found" against a 200 carrying 58 rows. This route returns the
- * object shape, and tolerating both is what keeps that from mattering.
- */
-function extractRows(response) {
-    if (Array.isArray(response))
-        return response;
-    if (!response || typeof response !== "object")
-        return [];
-    const obj = response;
-    if (Array.isArray(obj.data))
-        return obj.data;
-    return Array.isArray(obj.items) ? obj.items : [];
-}
-function extractTotal(response) {
-    if (Array.isArray(response) || !response || typeof response !== "object")
-        return undefined;
-    const total = response.total;
-    return typeof total === "number" ? total : undefined;
-}
-/*
- * audit-create-affordance-ok: this listing is deliberately inbound-only.
- * The 1,988 rows are produced by committed generators from a crawled
- * corpus, so there is no POST endpoint and no create route key to point a
- * button at — a Beyblade authored by hand would have no source, would vanish
- * on the next regeneration, and would make "this dataset rebuilds from
- * appkit/src/seed/ alone" false. Adding one is a change to the generator.
- * The surface exists to CORRECT a wrong extraction and to REMOVE a row that
- * should not exist, which are the two operations the data actually needs.
- */
-const COLUMNS = [
-    {
-        key: "primary",
-        header: "Beyblade",
-        sortable: true,
-        render: (row) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { weight: "semibold", color: "primary", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", children: row.secondary })] })),
-    },
-    {
-        key: "weight",
-        header: "Mass",
-        className: "w-28",
-        render: (row) => (_jsx(Text, { size: "sm", color: "muted", children: row.weight })),
-    },
-    {
-        key: "edited",
-        header: "Corrected",
-        className: "w-28",
-        /*
-         * 🛑 Shown as a COLUMN, because a hand-corrected row behaves differently
-         * from its neighbours — the generator no longer owns the fields somebody
-         * fixed. Leaving that invisible is how a later maintainer concludes the
-         * generator is producing a value it is actually being prevented from
-         * writing. Text, not a colour-only dot (colour is never the only signal).
-         */
-        render: (row) => row.edited ? (_jsx(Text, { size: "xs", weight: "medium", children: "By hand" })) : (_jsx(Text, { size: "xs", color: "faint", children: "Generated" })),
-    },
-];
-const ADMIN_BEYS_CONFIG = {
-    portal: "admin",
-    title: "Beyblades",
-    subtitle: "The generated Beyblade database. Corrections made here are kept when the database is regenerated.",
-    searchPlaceholder: "Search Beyblades by name — Dranzer F, Variares…",
-    /*
-     * 🛑 `searchCommit: "enter"`, not debounce. The route's search is an indexed
-     * PREFIX range, so a partial word is a different query rather than a
-     * narrowing one — debouncing would fire a range query per pause and show
-     * confusing intermediate results. Enter also makes the prefix-only behaviour
-     * legible: you typed a prefix and asked for it.
-     */
-    searchCommit: "enter",
-    /*
-     * 🛑 DECLARED, so the placeholder can be CHECKED rather than trusted.
-     * The route matches exactly one field — an indexed prefix range on
-     * `name` — and the placeholder must not imply more. It is a prefix and
-     * it is case-sensitive; `mode` says so where a reader will see it.
-     */
-    search: {
-        placeholder: "Search Beyblades by name — a prefix, case-sensitive",
-        fields: ["name"],
-    },
-    emptyLabel: "No Beyblade matches that name",
-    filterKeys: [],
-    /*
-     * 🛑 Through `sortBy`, not a bare "name". The route currently ALWAYS
-     * orders by name and ignores the `sorts` param, so this is the only
-     * option — but writing it as a literal is what lets a field rename
-     * leave a sort string that silently sorts nothing.
-     */
-    defaultSort: sortBy(BEY_FIELDS.NAME, "ASC"),
-    pageSize: 25,
-    queryKey: ["admin", "beys"],
-    endpoint: ADMIN_ENDPOINTS.BEYS,
-    sortOptions: [{ value: sortBy(BEY_FIELDS.NAME, "ASC"), label: "Name A-Z" }],
-    columns: COLUMNS,
-    buildFilters: () => undefined,
-    getTotal: (response, rows) => extractTotal(response) ?? rows.length,
-    mapRows: (response) => extractRows(response).map((raw) => {
-        const r = raw;
-        /*
-         * 🛑 `≈` when the mass was SUMMED from the parts rather than stated by
-         * the source. 93% of beys have a mass but only 248 state it, and a
-         * derived figure shown as an exact one is the easiest way for this
-         * dataset to start lying — the same marking the detail page and the OG
-         * card use.
-         */
-        const summed = typeof r.weightGFromParts === "number" ? r.weightGFromParts : null;
-        const weight = typeof r.weightG === "number"
-            ? `${r.weightG} g`
-            : summed !== null
-                ? `≈ ${Math.round(summed * 10) / 10} g`
-                : "—";
-        return {
-            id: String(r.id ?? ""),
-            primary: String(r.name ?? r.id ?? "Unnamed Beyblade"),
-            /*
-             * System first: it is the one line a collector uses to place a bey in
-             * time, and it is present on 94% of them. The product code follows
-             * because two vendor releases of one model differ by little else.
-             */
-            secondary: [r.system, Array.isArray(r.productCodes) ? r.productCodes[0] : null]
-                .filter(Boolean)
-                .join(" · ") || "—",
-            weight,
-            edited: r.adminEdited === true,
-        };
-    }),
-    /*
-     * 🛑 `rowHrefTemplate`, not `rowHref`. Verified against the interface
-     * rather than guessed — there is no `rowHref` field, and an unknown key on
-     * an object literal typed by an interface is a compile error I could not
-     * have seen under this session's no-build cap.
-     */
-    rowHrefTemplate: (row) => String(ROUTES.ADMIN.BEYS_EDIT(row.id)),
-};
-export function AdminBeysView({ children, ...props }) {
-    if (React.Children.count(children) > 0) {
-        return (_jsxs(ListingLayout, { portal: "admin", ...props, children: [_jsx(Heading, { level: 1, className: "sr-only", children: "Beyblades" }), children] }));
-    }
-    return _jsx(DataListingView, { config: ADMIN_BEYS_CONFIG });
-}

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

@@ -1,9 +0,0 @@
-import React from "react";
-import type { StackedViewShellProps } from "../../../ui/components/StackedViewShell";
-export interface AdminCarouselEditorViewProps extends Omit<StackedViewShellProps, "sections"> {
-    slideId?: string;
-    onSaved?: (id: string) => void;
-    onDeleted?: () => void;
-    onCancel?: () => void;
-}
-export declare function AdminCarouselEditorView({ slideId, onSaved, onDeleted, onCancel, ...rest }: AdminCarouselEditorViewProps): React.JSX.Element;

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

@@ -1,299 +0,0 @@
-"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 { useQuery } from "@tanstack/react-query";
-import { z } from "zod";
-import { Alert } from "../../../ui/components/Alert.js";
-import { Button } from "../../../ui/components/Button.js";
-import { ConfirmDeleteModal } from "../../../ui/components/ConfirmDeleteModal.js";
-import { Div } from "../../../ui/components/Div.js";
-import { Heading, Text } from "../../../ui/components/Typography.js";
-import { Input } from "../../../ui/components/Input.js";
-import { Row, Stack } from "../../../ui/components/Layout.js";
-import { Select } from "../../../ui/components/Select.js";
-import { Slider } from "../../../ui/components/Slider.js";
-import { StackedViewShell } from "../../../ui/components/StackedViewShell.js";
-import { Toggle } from "../../../ui/components/Toggle.js";
-import { FieldInput, FormErrorSummary } from "../../../ui/forms/index.js";
-import { apiClient } from "../../../http/index.js";
-import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
-import { ROUTES } from "../../../next/routing/route-map.js";
-import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
-import { SectionForm, useSectionFormNav } from "../../shell/SectionForm.js";
-import { useFormShellState, FormShellContext } from "../../../ui/forms/index.js";
-const __P = {
-    p3: "p-[var(--appkit-space-3)]",
-};
-const CLS_PANEL = "rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-[var(--appkit-space-4)] space-y-3";
-const CLS_ROW_BETWEEN = "flex items-center justify-between";
-const carouselSlideSchema = z.object({
-    title: z.string().min(1, "Slide title is required").max(150),
-    order: z.number().int().min(0),
-    active: z.boolean(),
-}).passthrough();
-function makeCard(zone = 1) {
-    return {
-        id: `card-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
-        zone,
-        background: { type: "color", color: "var(--appkit-color-primary)" },
-        content: { title: "", subtitle: "", textColor: "#ffffff", textAlign: "left" },
-        buttons: [],
-        hover: { effect: "scale" },
-    };
-}
-function makeButton() {
-    return { id: `btn-${Date.now()}`, text: "", href: "", variant: "primary", openInNewTab: false };
-}
-const HEIGHT_OPTIONS = [
-    { value: "tall", label: "Tall (80vh)" },
-    { value: "medium", label: "Medium (60vh)" },
-    { value: "viewport", label: "Full viewport (100vh)" },
-];
-const BG_TYPE_OPTIONS = [
-    { value: "image", label: "Image" },
-    { value: "video", label: "Video" },
-    { value: "color", label: "Solid colour" },
-    { value: "gradient", label: "Gradient" },
-];
-const HOVER_OPTIONS = [
-    { value: "none", label: "None" },
-    { value: "scale", label: "Scale up" },
-    { value: "glow", label: "Glow" },
-    { value: "color", label: "Colour shift" },
-];
-const VARIANT_OPTIONS = [
-    { value: "primary", label: "Primary" },
-    { value: "secondary", label: "Secondary" },
-    { value: "outline", label: "Outline" },
-    { value: "ghost", label: "Ghost" },
-    { value: "link", label: "Link" },
-];
-const TEXT_ALIGN_OPTIONS = [
-    { value: "left", label: "Left" },
-    { value: "center", label: "Center" },
-    { value: "right", label: "Right" },
-];
-// ── Zone Picker ──────────────────────────────────────────────────────────────
-function ZonePicker({ selected, onChange, disabled, }) {
-    const zones = [1, 2, 3, 4, 5, 6];
-    return (_jsxs(Div, { children: [_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: "Zone (row \u00D7 col grid)" }), _jsx(Div, { layout: "grid", gap: "1", className: "grid-rows-2 grid-cols-3 w-[150px]", children: zones.map((z) => {
-                    const isDisabled = disabled?.(z) ?? false;
-                    return (_jsx(Button, { type: "button", variant: selected === z ? "primary" : "outline", size: "sm", disabled: isDisabled, paddingY: "sm", textSize: "xs", className: "font-mono", onClick: () => !isDisabled && onChange(z), children: z }, z));
-                }) }), _jsx(Text, { className: "text-[10px] mt-1", color: "faint", children: "Row 1 = zones 1\u20133 \u00B7 Row 2 = zones 4\u20136" })] }));
-}
-// ── Background Editor ────────────────────────────────────────────────────────
-function BackgroundEditor({ value, onChange, }) {
-    const set = (patch) => onChange({ ...value, ...patch });
-    return (_jsxs(Stack, { gap: "3", children: [_jsx(Select, { label: "Background type", value: value.type, onChange: (e) => onChange({ type: e.target.value }), options: BG_TYPE_OPTIONS }), (value.type === "image" || value.type === "video") && (_jsxs(_Fragment, { children: [_jsx(Input, { label: `${value.type === "image" ? "Image" : "Video"} URL`, value: value.url ?? "", onChange: (e) => set({ url: e.target.value }), placeholder: "https://..." }), _jsx(Input, { label: "Mobile URL (optional)", value: value.mobileUrl ?? "", onChange: (e) => set({ mobileUrl: e.target.value || undefined }), placeholder: "https://... (portrait crop)" }), value.type === "video" && (_jsx(Input, { label: "Poster / thumbnail URL", value: value.thumbnail ?? "", onChange: (e) => set({ thumbnail: e.target.value || undefined }), placeholder: "https://..." })), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", rounded: "lg", border: "default", children: [_jsx(Toggle, { label: "Dim overlay", checked: value.dimOverlay?.enabled ?? false, onChange: (v) => set({ dimOverlay: { enabled: v, opacity: value.dimOverlay?.opacity ?? 40 } }) }), value.dimOverlay?.enabled && (_jsxs(Div, { children: [_jsxs(Text, { className: "mb-1", size: "sm", weight: "medium", children: ["Opacity (", value.dimOverlay.opacity, "%)"] }), _jsx(Slider, { "aria-label": `Dim overlay opacity, ${value.dimOverlay.opacity}%`, min: 0, max: 90, step: 5, value: value.dimOverlay.opacity, onChange: (opacity) => set({ dimOverlay: { enabled: true, opacity } }), showValue: false })] }))] })] })), value.type === "color" && (_jsx(Input, { label: "Colour (CSS token or hex)", value: value.color ?? "", onChange: (e) => set({ color: e.target.value }), placeholder: "var(--appkit-color-primary) or #1a1a2e" })), value.type === "gradient" && (_jsxs(_Fragment, { children: [_jsx(Input, { label: "From colour", value: value.gradientFrom ?? "", onChange: (e) => set({ gradientFrom: e.target.value }), placeholder: "var(--appkit-color-primary)" }), _jsx(Input, { label: "To colour", value: value.gradientTo ?? "", onChange: (e) => set({ gradientTo: e.target.value }), placeholder: "var(--appkit-color-secondary)" }), _jsx(Input, { label: "Angle (degrees)", type: "number", value: String(value.gradientAngle ?? 135), onChange: (e) => set({ gradientAngle: Number(e.target.value) }), min: 0, max: 360 })] }))] }));
-}
-// ── Card Editor ──────────────────────────────────────────────────────────────
-function CardEditor({ card, index, otherZones, onChange, onRemove, }) {
-    const set = (patch) => onChange({ ...card, ...patch });
-    const setContent = (patch) => onChange({ ...card, content: { ...card.content, ...patch } });
-    const isZoneDisabled = (z) => otherZones.includes(z);
-    const buttons = card.buttons ?? [];
-    return (_jsxs(Div, { className: CLS_PANEL, children: [_jsxs(Row, { className: CLS_ROW_BETWEEN, children: [_jsxs(Heading, { level: 4, size: "sm", weight: "semibold", children: ["Card ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onRemove, children: "Remove" })] }), _jsx(ZonePicker, { selected: card.zone, onChange: (z) => set({ zone: z }), disabled: isZoneDisabled }), _jsx(Select, { label: "Mobile zone", value: String(card.mobileZone ?? ""), onChange: (e) => set({ mobileZone: e.target.value ? Number(e.target.value) : undefined }), options: [
-                    { value: "", label: "— inherit desktop zone —" },
-                    { value: "2", label: "Zone 2 (row 1, center)" },
-                    { value: "5", label: "Zone 5 (row 2, center)" },
-                ] }), _jsxs(Div, { children: [_jsx(Text, { className: "mb-2", size: "sm", weight: "medium", children: "Background" }), _jsx(BackgroundEditor, { value: card.background, onChange: (bg) => set({ background: bg }) })] }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Content" }), _jsx(Input, { label: "Eyebrow", value: card.content?.eyebrow ?? "", onChange: (e) => setContent({ eyebrow: e.target.value || undefined }), placeholder: "New \u00B7 Limited \u00B7 Featured" }), _jsx(Input, { label: "Title", value: card.content?.title ?? "", onChange: (e) => setContent({ title: e.target.value }) }), _jsx(Input, { label: "Subtitle", value: card.content?.subtitle ?? "", onChange: (e) => setContent({ subtitle: e.target.value || undefined }) }), _jsx(Input, { label: "Description", value: card.content?.description ?? "", onChange: (e) => setContent({ description: e.target.value || undefined }) }), _jsx(Input, { label: "Text colour (CSS)", value: card.content?.textColor ?? "#ffffff", onChange: (e) => setContent({ textColor: e.target.value }) }), " ", _jsx(Select, { label: "Text align", value: card.content?.textAlign ?? "left", onChange: (e) => setContent({ textAlign: e.target.value }), options: TEXT_ALIGN_OPTIONS })] }), _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { className: CLS_ROW_BETWEEN, children: [_jsx(Text, { size: "sm", weight: "medium", children: "Buttons (max 3)" }), buttons.length < 3 && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => set({ buttons: [...buttons, makeButton()] }), children: "+ Add button" }))] }), buttons.map((btn, bi) => (_jsxs(Stack, { className: `${__P.p3}`, gap: "sm", rounded: "lg", border: "default", children: [_jsxs(Row, { className: CLS_ROW_BETWEEN, children: [_jsxs(Text, { size: "xs", weight: "medium", color: "muted", children: ["Button ", bi + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => set({ buttons: buttons.filter((_, i) => i !== bi) }), children: "\u2715" })] }), _jsx(Input, { label: "Label", value: btn.text, onChange: (e) => { const next = [...buttons]; next[bi] = { ...btn, text: e.target.value }; set({ buttons: next }); } }), _jsx(Input, { label: "Link (href)", value: btn.href, onChange: (e) => { const next = [...buttons]; next[bi] = { ...btn, href: e.target.value }; set({ buttons: next }); }, placeholder: "/products or https://..." }), _jsx(Select, { label: "Variant", value: btn.variant, onChange: (e) => { const next = [...buttons]; next[bi] = { ...btn, variant: e.target.value }; set({ buttons: next }); }, options: VARIANT_OPTIONS }), _jsx(Toggle, { label: "Open in new tab", checked: btn.openInNewTab ?? false, onChange: (v) => { const next = [...buttons]; next[bi] = { ...btn, openInNewTab: v }; set({ buttons: next }); } })] }, btn.id ?? bi)))] }), _jsxs(Stack, { gap: "sm", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Hover effect" }), _jsx(Select, { label: "Effect", value: card.hover?.effect ?? "none", onChange: (e) => set({ hover: { effect: e.target.value } }), options: HOVER_OPTIONS })] }), _jsx(Toggle, { label: "Button-only card (no text content)", checked: card.isButtonOnly ?? false, onChange: (v) => set({ isButtonOnly: v }) })] }));
-}
-// ── Main Editor ──────────────────────────────────────────────────────────────
-export function AdminCarouselEditorView({ slideId, onSaved, onDeleted, onCancel, ...rest }) {
-    const isEdit = Boolean(slideId);
-    const [title, setTitle] = React.useState("");
-    const [active, setActive] = React.useState(false);
-    const [order, setOrder] = React.useState("");
-    const [height, setHeight] = React.useState("tall");
-    const [autoplayDelayMs, setAutoplayDelayMs] = React.useState("4000");
-    const [background, setBackground] = React.useState({
-        type: "image",
-        url: "",
-        dimOverlay: { enabled: true, opacity: 40 },
-    });
-    const [cards, setCards] = React.useState([]);
-    const handleAddCard = React.useCallback(() => {
-        const usedZones = cards.map((c) => c.zone);
-        const freeZone = [1, 2, 3, 4, 5, 6].find((z) => !usedZones.includes(z)) ?? 1;
-        setCards([...cards, makeCard(freeZone)]);
-    }, [cards]);
-    const [overlayTitle, setOverlayTitle] = React.useState("");
-    const [overlaySubtitle, setOverlaySubtitle] = React.useState("");
-    const [overlayDesc, setOverlayDesc] = React.useState("");
-    const [overlayBtnText, setOverlayBtnText] = React.useState("");
-    const [overlayBtnLink, setOverlayBtnLink] = React.useState("");
-    const [overlayBtnVariant, setOverlayBtnVariant] = React.useState("primary");
-    const [overlayBtnNewTab, setOverlayBtnNewTab] = React.useState(false);
-    const [errorMsg, setErrorMsg] = React.useState("");
-    const [successMsg, setSuccessMsg] = React.useState("");
-    const [deleteConfirmOpen, setDeleteConfirmOpen] = React.useState(false);
-    const slideQuery = useQuery({
-        queryKey: ["admin", "carousel", slideId],
-        queryFn: async () => {
-            const res = await apiClient.get(ADMIN_ENDPOINTS.CAROUSEL_BY_ID(slideId));
-            return res?.data ?? res;
-        },
-        enabled: isEdit,
-    });
-    React.useEffect(() => {
-        const d = slideQuery.data;
-        if (!d)
-            return;
-        setTitle(String(d.title ?? ""));
-        setActive(Boolean(d.active));
-        setOrder(d.order !== undefined ? String(d.order) : "");
-        const s = d.settings;
-        setHeight(s?.height ?? "tall");
-        setAutoplayDelayMs(s?.autoplayDelayMs !== undefined ? String(s.autoplayDelayMs) : "4000");
-        if (d.background)
-            setBackground(d.background);
-        if (Array.isArray(d.cards))
-            setCards(d.cards);
-        const ov = d.overlay;
-        if (ov) {
-            setOverlayTitle(String(ov.title ?? ""));
-            setOverlaySubtitle(String(ov.subtitle ?? ""));
-            setOverlayDesc(String(ov.description ?? ""));
-            const btn = ov.button;
-            if (btn) {
-                setOverlayBtnText(String(btn.text ?? ""));
-                setOverlayBtnLink(String(btn.link ?? ""));
-                setOverlayBtnVariant(btn.variant ?? "primary");
-                setOverlayBtnNewTab(Boolean(btn.openInNewTab));
-            }
-        }
-    }, [slideQuery.data]);
-    const buildPayload = () => {
-        const overlay = overlayTitle || overlaySubtitle || overlayDesc
-            ? {
-                title: overlayTitle || undefined,
-                subtitle: overlaySubtitle || undefined,
-                description: overlayDesc || undefined,
-                button: overlayBtnText
-                    ? { text: overlayBtnText, link: overlayBtnLink, variant: overlayBtnVariant, openInNewTab: overlayBtnNewTab }
-                    : undefined,
-            }
-            : undefined;
-        return {
-            title,
-            active,
-            order: order !== "" ? Number(order) : undefined,
-            background,
-            settings: {
-                height,
-                autoplayDelayMs: Number(autoplayDelayMs) || 4000,
-            },
-            cards,
-            overlay,
-        };
-    };
-    const saveMutation = useApiMutation({
-        mutationFn: async () => {
-            const payload = buildPayload();
-            if (isEdit)
-                return apiClient.put(ADMIN_ENDPOINTS.CAROUSEL_BY_ID(slideId), payload);
-            return apiClient.post(ADMIN_ENDPOINTS.CAROUSEL, payload);
-        },
-        onSuccess: (res) => {
-            const id = res?.data?.id ?? slideId ?? "";
-            setSuccessMsg(isEdit ? "Slide saved." : "Slide created.");
-            setErrorMsg("");
-            if (onSaved && id)
-                onSaved(id);
-        },
-        onError: (err) => {
-            setErrorMsg(err?.message ?? "Failed to save slide.");
-            setSuccessMsg("");
-        },
-    });
-    const deleteMutation = useApiMutation({
-        mutationFn: () => apiClient.delete(ADMIN_ENDPOINTS.CAROUSEL_BY_ID(slideId)),
-        onSuccess: () => {
-            setSuccessMsg("Slide deleted.");
-            if (onDeleted)
-                onDeleted();
-        },
-        onError: (err) => setErrorMsg(err?.message ?? "Failed to delete."),
-    });
-    const occupiedZones = cards.map((c) => c.zone);
-    /*
-     * Hand-written sections around the JSX that was already here, which is the
-     * `AdminCategoryEditorView` pattern. Deriving is not available: `background`
-     * is a discriminated union with its own editor, `cards[].buttons[]` is two
-     * levels of array, and neither has a `FieldKind`.
-     *
-     * `fields` is what makes the error summary's jump links and the per-section
-     * error badge work — it maps a Zod path back to the panel holding that
-     * control.
-     */
-    const sections = React.useMemo(() => [
-        {
-            id: "info",
-            label: "Slide info",
-            required: true,
-            fields: ["title", "active", "order", "settings"],
-            render: () => (_jsxs(Stack, { gap: "md", children: [_jsx(FieldInput, { name: "title", label: "Title", value: title, onChange: (v) => setTitle(v), required: true, placeholder: "e.g. Hot Wheels RLC Exclusives" }), _jsx(Toggle, { label: "Active (visible on homepage)", checked: active, onChange: setActive }), _jsx(Input, { label: "Display order", error: form.shellCtx.errors.order, type: "number", value: order, onChange: (e) => setOrder(e.target.value), min: 0, placeholder: "1" }), _jsx(Select, { label: "Slide height", value: height, onChange: (e) => setHeight(e.target.value), options: HEIGHT_OPTIONS }), _jsx(Input, { label: "Autoplay delay (ms)", type: "number", value: autoplayDelayMs, onChange: (e) => setAutoplayDelayMs(e.target.value), min: 1000, max: 15000, placeholder: "4000", helperText: "How long this slide shows before auto-advancing. Default: 4000 ms." })] })),
-        },
-        {
-            id: "background",
-            label: "Background",
-            fields: ["background"],
-            render: () => _jsx(BackgroundEditor, { value: background, onChange: setBackground }),
-        },
-        {
-            id: "overlay",
-            label: "Overlay text",
-            fields: ["overlay"],
-            render: () => (_jsxs(Stack, { gap: "md", children: [_jsx(Text, { size: "sm", color: "muted", children: "Centred text layered over the background. Leave blank to use cards only." }), _jsx(Input, { label: "Heading", value: overlayTitle, onChange: (e) => setOverlayTitle(e.target.value), placeholder: "India's #1 Collectibles Marketplace" }), _jsx(Input, { label: "Subtitle", value: overlaySubtitle, onChange: (e) => setOverlaySubtitle(e.target.value), placeholder: "Pokemon TCG - Hot Wheels - Beyblade X" }), _jsx(Input, { label: "Description", value: overlayDesc, onChange: (e) => setOverlayDesc(e.target.value), placeholder: "One sentence description..." }), _jsxs(Stack, { className: `${__P.p3}`, gap: "sm", rounded: "lg", border: "default", children: [_jsx(Text, { size: "sm", weight: "medium", children: "CTA button" }), _jsx(Input, { label: "Button text", value: overlayBtnText, onChange: (e) => setOverlayBtnText(e.target.value), placeholder: "Shop Now" }), _jsx(Input, { label: "Button link", value: overlayBtnLink, onChange: (e) => setOverlayBtnLink(e.target.value), placeholder: String(ROUTES.PUBLIC.PRODUCTS) }), _jsx(Select, { label: "Variant", value: overlayBtnVariant, onChange: (e) => setOverlayBtnVariant(e.target.value), options: VARIANT_OPTIONS.filter((v) => ["primary", "secondary", "outline"].includes(v.value)) }), _jsx(Toggle, { label: "Open in new tab", checked: overlayBtnNewTab, onChange: setOverlayBtnNewTab })] })] })),
-        },
-        {
-            id: "cards",
-            label: "Cards (0-2)",
-            fields: ["cards"],
-            render: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Row, { className: CLS_ROW_BETWEEN, children: [_jsx(Text, { size: "sm", color: "muted", children: "A slide holds at most two cards." }), cards.length < 2 && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleAddCard, children: "+ Add card" }))] }), cards.length === 0 && (_jsx(Text, { size: "sm", color: "faint", children: "No cards - the overlay text covers the whole slide." })), cards.map((card, i) => (_jsx(CardEditor, { card: card, index: i, otherZones: occupiedZones.filter((z) => z !== card.zone), onChange: (updated) => setCards(cards.map((c, ci) => (ci === i ? updated : c))), onRemove: () => setCards(cards.filter((_, ci) => ci !== i)) }, card.id)))] })),
-        },
-    ], [
-        title, active, order, height, autoplayDelayMs, background, cards, occupiedZones,
-        overlayTitle, overlaySubtitle, overlayDesc, overlayBtnText, overlayBtnLink,
-        overlayBtnVariant, overlayBtnNewTab, handleAddCard,
-    ]);
-    /**
-     * The values the nav and the error summary key on. Not a draft the form
-     * writes through - see the `onChange` note at the SectionForm below.
-     */
-    const draftForNav = React.useMemo(() => ({ title, active, order, cards }), [title, active, order, cards]);
-    const nav = useSectionFormNav(sections, draftForNav, { scope: "admin:carousel-editor" });
-    const form = useFormShellState(carouselSlideSchema, {
-        sections: nav.sectionMeta,
-        onGoToSection: nav.goToSection,
-        fieldToSectionIndex: nav.fieldToSectionIndex,
-    });
-    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Carousel Slide" : "New Carousel Slide", sections: [
-            errorMsg ? _jsx(Alert, { variant: "error", children: errorMsg }, "err") : null,
-            successMsg ? _jsx(Alert, { variant: "success", children: successMsg }, "ok") : null,
-            _jsxs(FormShellContext.Provider, { value: form.shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: draftForNav, 
-                        /*
-                         * The sections render from this component's own state, so
-                         * `onChange` has nothing to route: every control already writes
-                         * through its own setter, and the values object exists to give the
-                         * error summary and the per-section badge a field map. Rebuilding
-                         * eighteen scalars into one draft object would be a second source
-                         * of truth for the same values.
-                         */
-                        onChange: () => undefined, onSubmit: () => {
-                            form.clearErrors();
-                            if (!title.trim()) {
-                                form.setFieldError("title", "Title is required");
-                                return;
-                            }
-                            saveMutation.mutate();
-                        }, schema: carouselSlideSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, submitLabel: isEdit ? "Save changes" : "Create slide", cancelLabel: "Cancel", onCancel: onCancel, isLoading: saveMutation.isPending, destructiveAction: isEdit
-                            ? {
-                                label: ACTIONS.ADMIN["delete-carousel"].label,
-                                onClick: () => setDeleteConfirmOpen(true),
-                                disabled: deleteMutation.isPending,
-                            }
-                            : undefined }), isEdit && (_jsx(ConfirmDeleteModal, { isOpen: deleteConfirmOpen, onClose: () => setDeleteConfirmOpen(false), onConfirm: () => { setDeleteConfirmOpen(false); deleteMutation.mutate(); }, title: ACTIONS.ADMIN["delete-carousel"].confirmation.title, message: ACTIONS.ADMIN["delete-carousel"].confirmation.body, isDeleting: deleteMutation.isPending }))] }, "slide-form"),
-        ] }));
-}