@mohasinac/appkit 4.71.0 → 4.71.2

package/dist/features/shell/useFieldVisibility.js

@@ -0,0 +1,126 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ADMIN_ENDPOINTS } from "../../constants/api-endpoints.js";
+import { normalizeError } from "../../errors/normalize.js";
+const PERSIST_DEBOUNCE_MS = 600;
+/**
+ * Admin field-visibility override (Phase 3B widget system) — the write-side
+ * counterpart to `getFieldVisibility()` (appkit `server.ts`). Same
+ * debounced-persist shape as `usePageRegion` for writes. Reads differ
+ * deliberately: `usePageRegion`'s caller is always SSR (an admin dashboard
+ * page), so it only ever needs `initialCards` server-rendered. This hook's
+ * real first consumer (`StoreCreateForm`, mounted from a fully `"use
+ * client"` page with no SSR data-fetch opportunity) has no such option, so
+ * this hook fetches on mount via `GET /api/admin/field-visibility/{id}`
+ * (open to any signed-in viewer — reading "what's hidden" is not
+ * sensitive) whenever `initial` is omitted. An SSR caller that DOES have a
+ * server-rendered value may still pass it as `initial` to skip the fetch
+ * and avoid a loading flash, same as `usePageRegion`'s own contract.
+ *
+ * `surfaceId` identifies which `fieldVisibility/{surfaceId}` document this
+ * hook reads and writes — a stable, hand-chosen id per form/display
+ * surface (e.g. `"store-create"`, `"admin-site-settings"`), same
+ * "not route-derived" rule `usePageRegion`'s own doc comment states.
+ *
+ * Consumed directly by `buildSectionsFromSchema`'s `fieldVisibility` option
+ * (`features/shell/build-sections.tsx`) for FORM fields, and by any
+ * read-only display surface that wants to hide a field row, via
+ * `isVisible(fieldName)` directly.
+ */
+export function useFieldVisibility(surfaceId, initial) {
+    const [fields, setFields] = useState(initial ?? {});
+    const [fieldOrder, setFieldOrderState] = useState([]);
+    const [customFields, setCustomFieldsState] = useState([]);
+    const [steps, setStepsState] = useState([]);
+    const [saving, setSaving] = useState(false);
+    const debounceRef = useRef(null);
+    // Same cleanup `usePageRegion` has — without it, a debounced write still
+    // fires its `setTimeout` callback after the component unmounts (e.g. the
+    // admin navigates away inside the 600ms window), calling `setSaving` on
+    // state nobody reads any more. Harmless in practice (React tolerates a
+    // state update on an unmounted hook; it just warns), but free to avoid.
+    useEffect(() => () => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+    }, []);
+    useEffect(() => {
+        if (initial !== undefined)
+            return;
+        let cancelled = false;
+        fetch(ADMIN_ENDPOINTS.FIELD_VISIBILITY_BY_ID(encodeURIComponent(surfaceId)))
+            .then((res) => (res.ok ? res.json() : null))
+            .then((data) => {
+            if (cancelled)
+                return;
+            if (data?.data?.fields)
+                setFields(data.data.fields);
+            if (data?.data?.fieldOrder)
+                setFieldOrderState(data.data.fieldOrder);
+            if (data?.data?.customFields)
+                setCustomFieldsState(data.data.customFields);
+            if (data?.data?.steps)
+                setStepsState(data.data.steps);
+        })
+            .catch((err) => void normalizeError(err));
+        return () => {
+            cancelled = true;
+        };
+        // `initial`'s presence (not its value) decides whether this fetches at
+        // all — re-running on every `surfaceId` change only.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [surfaceId]);
+    /**
+     * One debounced writer for all three keys — each setter below sends its
+     * OWN field plus whatever the other two currently hold, so two fields
+     * edited in quick succession (e.g. reordering, then adding a custom
+     * field) don't race each other's debounce window and overwrite one
+     * with a stale value. `merge: true` on the server side means sending
+     * all three every time is always safe, never destructive.
+     */
+    const persist = useCallback((next) => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+            setSaving(true);
+            fetch(ADMIN_ENDPOINTS.FIELD_VISIBILITY_BY_ID(encodeURIComponent(surfaceId)), {
+                method: "PATCH",
+                headers: { "content-type": "application/json" },
+                body: JSON.stringify(next),
+            })
+                .catch((err) => void normalizeError(err))
+                .finally(() => setSaving(false));
+        }, PERSIST_DEBOUNCE_MS);
+    }, [surfaceId]);
+    const setVisible = useCallback((fieldName, next) => {
+        setFields((prev) => {
+            const updated = { ...prev, [fieldName]: next };
+            persist({ fields: updated, fieldOrder, customFields, steps });
+            return updated;
+        });
+    }, [persist, fieldOrder, customFields, steps]);
+    const setFieldOrder = useCallback((next) => {
+        setFieldOrderState(next);
+        persist({ fields, fieldOrder: next, customFields, steps });
+    }, [persist, fields, customFields, steps]);
+    const setCustomFields = useCallback((next) => {
+        setCustomFieldsState(next);
+        persist({ fields, fieldOrder, customFields: next, steps });
+    }, [persist, fields, fieldOrder, steps]);
+    const setSteps = useCallback((next) => {
+        setStepsState(next);
+        persist({ fields, fieldOrder, customFields, steps: next });
+    }, [persist, fields, fieldOrder, customFields]);
+    const isVisible = useCallback((fieldName) => fields[fieldName] !== false, [fields]);
+    return {
+        fields,
+        isVisible,
+        setVisible,
+        fieldOrder,
+        setFieldOrder,
+        customFields,
+        setCustomFields,
+        steps,
+        setSteps,
+        saving,
+    };
+}

package/dist/features/shipments/components/AdminShipmentEditorView.d.ts

@@ -1,7 +1,12 @@
 import React from "react";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface AdminShipmentEditorViewProps {
     shipmentId?: string;
+    /** Page-region id for this screen (Phase 12) — required because this View is mounted from two different routes (new vs edit), each with its own id. */
+    pageId: string;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
     onSaved?: (id: string) => void;
     embedded?: boolean;
 }
-export declare function AdminShipmentEditorView({ shipmentId, onSaved }: AdminShipmentEditorViewProps): React.JSX.Element;
+export declare function AdminShipmentEditorView({ shipmentId, pageId, pageRegionCards, onSaved, }: AdminShipmentEditorViewProps): React.JSX.Element;

package/dist/features/shipments/components/AdminShipmentEditorView.js

@@ -24,6 +24,7 @@ import { createShipmentSchema } from "../schemas/validation.js";
 import { useShipment } from "../hooks/useShipments.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
 import { RecordStatusTimeline } from "../../status-history/components/RecordStatusTimeline.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const EMPTY_SHIPMENT = {
     shipmentNumber: "",
     supplierName: "",
@@ -45,7 +46,7 @@ function toDateInput(value) {
         return "";
     return new Date(value).toISOString().slice(0, 10);
 }
-export function AdminShipmentEditorView({ shipmentId, onSaved }) {
+export function AdminShipmentEditorView({ shipmentId, pageId, pageRegionCards = [], onSaved, }) {
     const isCreate = !shipmentId;
     const queryClient = useQueryClient();
     const { shipment, lots, refetchLots } = useShipment(shipmentId);
@@ -125,7 +126,7 @@ export function AdminShipmentEditorView({ shipmentId, onSaved }) {
         }
         saveMutation.mutate();
     };
-    return (_jsxs(Stack, { gap: "md", children: [_jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: patch, onSubmit: handleSubmit, schema: createShipmentSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: saveMutation.isPending, submitLabel: isCreate ? "Create shipment" : "Save changes" })] }), !isCreate && shipmentId && (_jsx(ShipmentLotsSection, { shipmentId: shipmentId, lots: lots, onLotsChanged: refetchLots })), !isCreate && (_jsx(RecordStatusTimeline, { entries: shipment?.statusHistory, truncatedCount: shipment?.statusHistoryTruncated }))] }));
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(AdminComposableRegion, { pageId: pageId, initialCards: pageRegionCards }), _jsxs(FormShellContext.Provider, { value: shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: sections, values: form, onChange: patch, onSubmit: handleSubmit, schema: createShipmentSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, isLoading: saveMutation.isPending, submitLabel: isCreate ? "Create shipment" : "Save changes" })] }), !isCreate && shipmentId && (_jsx(ShipmentLotsSection, { shipmentId: shipmentId, lots: lots, onLotsChanged: refetchLots })), !isCreate && (_jsx(RecordStatusTimeline, { entries: shipment?.statusHistory, truncatedCount: shipment?.statusHistoryTruncated }))] }));
 }
 function ShipmentLotsSection({ shipmentId, lots, onLotsChanged, }) {
     const [showAddLot, setShowAddLot] = React.useState(false);

package/dist/features/shipments/components/AdminShipmentLotItemsView.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface AdminShipmentLotItemsViewProps {
     shipmentId: string;
     lotId: string;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function AdminShipmentLotItemsView({ shipmentId, lotId }: AdminShipmentLotItemsViewProps): React.JSX.Element;
+export declare function AdminShipmentLotItemsView({ shipmentId, lotId, pageRegionCards }: AdminShipmentLotItemsViewProps): React.JSX.Element;

package/dist/features/shipments/components/AdminShipmentLotItemsView.js

@@ -26,6 +26,7 @@ import { QuickEditMenu } from "../../admin/components/QuickEditMenu.js";
 import { useShipmentItems } from "../hooks/useShipments.js";
 import { ShipmentItemLinkModal } from "./ShipmentItemLinkModal.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 function parseBulkText(text) {
     return text
         .split("\n")
@@ -68,7 +69,7 @@ const SHIPMENT_ITEM_QUICK_FIELDS = [
         helperText: "Feeds this lot's projected revenue, and every profit figure on the projections screen.",
     },
 ];
-export function AdminShipmentLotItemsView({ shipmentId, lotId }) {
+export function AdminShipmentLotItemsView({ shipmentId, lotId, pageRegionCards = [] }) {
     const [page, setPage] = React.useState(1);
     const [pageSize, setPageSize] = React.useState(50);
     const { items, meta, isLoading, refetch } = useShipmentItems(shipmentId, lotId, { page, pageSize });
@@ -171,7 +172,7 @@ export function AdminShipmentLotItemsView({ shipmentId, lotId }) {
         }),
         onSuccess: () => refetch(),
     });
-    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { layout: "flex", align: "center", justify: "between", children: [_jsxs(Heading, { level: 3, children: ["Lot Items (", meta?.total ?? items.length, "/500)"] }), _jsxs(Div, { className: "flex gap-[var(--appkit-space-2)]", children: [_jsx(Button, { size: "sm", variant: "secondary", onClick: () => setShowAddItem((v) => !v), children: showAddItem ? "Cancel" : "+ Add Item" }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setShowBulkImport(true), children: "Bulk Import" })] })] }), _jsx(Alert, { variant: "info", children: "Only individually notable \"main\" items need a row here \u2014 everything else in the lot can be captured as a single remainder estimate on the lot itself. Linking an item to a product does not sync future edits either way." }), showAddItem && (_jsxs(FormShellContext.Provider, { value: itemForm.shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: itemSections, values: itemDraft, onChange: (partial) => setItemDraft((d) => ({ ...d, ...partial })), onSubmit: () => {
+    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { layout: "flex", align: "center", justify: "between", children: [_jsxs(Heading, { level: 3, children: ["Lot Items (", meta?.total ?? items.length, "/500)"] }), _jsxs(Div, { className: "flex gap-[var(--appkit-space-2)]", children: [_jsx(Button, { size: "sm", variant: "secondary", onClick: () => setShowAddItem((v) => !v), children: showAddItem ? "Cancel" : "+ Add Item" }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => setShowBulkImport(true), children: "Bulk Import" })] })] }), _jsx(AdminComposableRegion, { pageId: "admin-shipments-id-lots-lotid-items", initialCards: pageRegionCards }), _jsx(Alert, { variant: "info", children: "Only individually notable \"main\" items need a row here \u2014 everything else in the lot can be captured as a single remainder estimate on the lot itself. Linking an item to a product does not sync future edits either way." }), showAddItem && (_jsxs(FormShellContext.Provider, { value: itemForm.shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: itemSections, values: itemDraft, onChange: (partial) => setItemDraft((d) => ({ ...d, ...partial })), onSubmit: () => {
                             /*
                              * The guard lives here: SectionForm surfaces errors and scrolls to
                              * them, then calls onSubmit unconditionally.

package/dist/features/shipments/components/AdminShipmentProjectionsView.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 /**
  * A real, paginated, persisted list of lots across every non-cancelled
  * shipment — reads the rollup fields the Firestore Function cascade already
@@ -6,4 +7,8 @@ import React from "react";
  * resolved" note in the shipments plan for why this is dynamic-query, not
  * materialized, and why it's still "saved" rather than computed live.
  */
-export declare function AdminShipmentProjectionsView(): React.JSX.Element;
+export interface AdminShipmentProjectionsViewProps {
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
+}
+export declare function AdminShipmentProjectionsView({ pageRegionCards }?: AdminShipmentProjectionsViewProps): React.JSX.Element;

package/dist/features/shipments/components/AdminShipmentProjectionsView.js

@@ -16,26 +16,20 @@ import { useShipmentProjections, useShipmentItems } from "../hooks/useShipments.
 import { ShipmentItemLinkModal } from "./ShipmentItemLinkModal.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
 import { sortBy } from "../../../constants/sort.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const SORT_OPTIONS = [
     { value: sortBy("projectedProfit", "DESC"), label: "Highest projected profit" },
     { value: sortBy("projectedProfit", "ASC"), label: "Lowest projected profit" },
     { value: sortBy("projectedRevenue", "DESC"), label: "Highest projected revenue" },
     { value: sortBy("createdAt", "DESC"), label: "Newest" },
 ];
-/**
- * A real, paginated, persisted list of lots across every non-cancelled
- * shipment — reads the rollup fields the Firestore Function cascade already
- * wrote, never recomputed on load. See CLAUDE.md's "Open design question,
- * resolved" note in the shipments plan for why this is dynamic-query, not
- * materialized, and why it's still "saved" rather than computed live.
- */
-export function AdminShipmentProjectionsView() {
+export function AdminShipmentProjectionsView({ pageRegionCards = [] } = {}) {
     const [page, setPage] = React.useState(1);
     const [pageSize, setPageSize] = React.useState(25);
     const [sorts, setSorts] = React.useState(SORT_OPTIONS[0].value);
     const { lots, meta, isLoading, refetch } = useShipmentProjections({ page, pageSize, sorts });
     const [pickerLot, setPickerLot] = React.useState(null);
-    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { layout: "flex", align: "center", justify: "between", children: [_jsx(Heading, { level: 2, children: "Projections" }), _jsx(Select, { "aria-label": "Sort by", value: sorts, onValueChange: setSorts, options: SORT_OPTIONS })] }), isLoading ? (_jsxs(Stack, { gap: "sm", children: [_jsx(Skeleton, { variant: "rectangular", height: "32px" }), _jsx(Skeleton, { variant: "rectangular", height: "32px" }), _jsx(Skeleton, { variant: "rectangular", height: "32px" })] })) : lots.length === 0 ? (_jsx(Text, { variant: "secondary", children: "No lots to project yet." })) : (_jsxs(Table, { children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "Lot" }), _jsx(Th, { children: "Items" }), _jsx(Th, { children: "Landed Cost" }), _jsx(Th, { children: "Projected Revenue" }), _jsx(Th, { children: "Projected Profit" }), _jsx(Th, {})] }) }), _jsx(Tbody, { children: lots.map((lot) => (_jsxs(Tr, { children: [_jsx(Td, { children: _jsx(TextLink, { href: String(ROUTES.ADMIN.SHIPMENT_LOT_ITEMS(lot.shipmentId, lot.id)), children: lot.lotName }) }), _jsx(Td, { children: lot.itemCount }), _jsx(Td, { children: formatCurrency(lot.totalLandedCost) }), _jsx(Td, { children: formatCurrency(lot.projectedRevenue) }), _jsx(Td, { className: lot.projectedProfit < 0 ? "text-error" : "text-success", children: formatCurrency(lot.projectedProfit) }), _jsx(Td, { children: _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setPickerLot(lot), children: "Create pre-order link" }) })] }, lot.id))) })] })), meta && meta.totalPages > 1 && (_jsx(Pagination, { currentPage: page, totalPages: meta.totalPages, onPageChange: setPage, pageSize: pageSize, onPageSizeChange: (size) => {
+    return (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { layout: "flex", align: "center", justify: "between", children: [_jsx(Heading, { level: 2, children: "Projections" }), _jsx(Select, { "aria-label": "Sort by", value: sorts, onValueChange: setSorts, options: SORT_OPTIONS, wrapperClassName: "w-auto min-w-[14rem] flex-shrink-0" })] }), _jsx(AdminComposableRegion, { pageId: "admin-shipments-projections", initialCards: pageRegionCards }), isLoading ? (_jsxs(Stack, { gap: "sm", children: [_jsx(Skeleton, { variant: "rectangular", height: "32px" }), _jsx(Skeleton, { variant: "rectangular", height: "32px" }), _jsx(Skeleton, { variant: "rectangular", height: "32px" })] })) : lots.length === 0 ? (_jsx(Text, { variant: "secondary", children: "No lots to project yet." })) : (_jsxs(Table, { children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "Lot" }), _jsx(Th, { children: "Items" }), _jsx(Th, { children: "Landed Cost" }), _jsx(Th, { children: "Projected Revenue" }), _jsx(Th, { children: "Projected Profit" }), _jsx(Th, {})] }) }), _jsx(Tbody, { children: lots.map((lot) => (_jsxs(Tr, { children: [_jsx(Td, { children: _jsx(TextLink, { href: String(ROUTES.ADMIN.SHIPMENT_LOT_ITEMS(lot.shipmentId, lot.id)), children: lot.lotName }) }), _jsx(Td, { children: lot.itemCount }), _jsx(Td, { children: formatCurrency(lot.totalLandedCost) }), _jsx(Td, { children: formatCurrency(lot.projectedRevenue) }), _jsx(Td, { className: lot.projectedProfit < 0 ? "text-error" : "text-success", children: formatCurrency(lot.projectedProfit) }), _jsx(Td, { children: _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setPickerLot(lot), children: "Create pre-order link" }) })] }, lot.id))) })] })), meta && meta.totalPages > 1 && (_jsx(Pagination, { currentPage: page, totalPages: meta.totalPages, onPageChange: setPage, pageSize: pageSize, onPageSizeChange: (size) => {
                     setPageSize(size);
                     setPage(1);
                 } })), pickerLot && (_jsx(LotItemPickerModal, { lot: pickerLot, onClose: () => setPickerLot(null), onLinked: refetch }))] }));

package/dist/features/shipments/components/AdminShipmentsView.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui/components/ListingLayout";
-export type AdminShipmentsViewProps = ListingLayoutProps;
-export declare function AdminShipmentsView({ children, ...props }: AdminShipmentsViewProps): React.JSX.Element;
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
+export type AdminShipmentsViewProps = ListingLayoutProps & {
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
+};
+export declare function AdminShipmentsView({ children, pageRegionCards, ...props }: AdminShipmentsViewProps): React.JSX.Element;

package/dist/features/shipments/components/AdminShipmentsView.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React from "react";
@@ -17,6 +17,7 @@ import { DataListingView } from "../../admin/components/DataListingView.js";
 import { AdminShipmentEditorView } from "./AdminShipmentEditorView.js";
 import { ADMIN_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/action-defs.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const STATUS_OPTIONS = [
     { id: "All", label: "All" },
     { id: "planning", label: "Planning" },
@@ -28,7 +29,7 @@ const STATUS_OPTIONS = [
     { id: "completed", label: "Completed" },
     { id: "cancelled", label: "Cancelled" },
 ];
-export function AdminShipmentsView({ children, ...props }) {
+export function AdminShipmentsView({ children, pageRegionCards = [], ...props }) {
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
@@ -92,8 +93,8 @@ export function AdminShipmentsView({ children, ...props }) {
          * shipment; a nav entry would have to ask which.
          */
         renderRowActions: (row) => (_jsx(TextLink, { href: String(ROUTES.ADMIN.SHIPMENT_RECEIVE(row.id)), children: "Receive" })),
-        renderEditor: ({ editId, closePanel }) => (_jsx(AdminShipmentEditorView, { shipmentId: editId ?? undefined, onSaved: closePanel, embedded: true })),
+        renderEditor: ({ editId, closePanel }) => (_jsx(AdminShipmentEditorView, { shipmentId: editId ?? undefined, onSaved: closePanel, embedded: true, pageId: editId ? "admin-shipments-id-edit" : "admin-shipments-new" })),
         resolveEditorTitle: ({ isCreate }) => (isCreate ? "New Shipment" : "Edit Shipment"),
     };
-    return _jsx(DataListingView, { config: config });
+    return (_jsxs(_Fragment, { children: [_jsx(AdminComposableRegion, { pageId: "admin-shipments", initialCards: pageRegionCards }), _jsx(DataListingView, { config: config })] }));
 }

package/dist/features/shipments/schemas/validation.d.ts

@@ -100,19 +100,19 @@ export declare const createShipmentLotSchema: z.ZodObject<{
         youtubeId: z.ZodOptional<z.ZodString>;
         duration: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
-        type: "image" | "video" | "file";
         url: string;
+        type: "video" | "image" | "file";
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
-        source?: "upload" | "youtube" | "external" | undefined;
         youtubeId?: string | undefined;
         duration?: number | undefined;
     }, {
-        type: "image" | "video" | "file";
         url: string;
+        type: "video" | "image" | "file";
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
-        source?: "upload" | "youtube" | "external" | undefined;
         youtubeId?: string | undefined;
         duration?: number | undefined;
     }>, "many">>>;
@@ -120,11 +120,11 @@ export declare const createShipmentLotSchema: z.ZodObject<{
     remainderEstimatedValue: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
     images: {
-        type: "image" | "video" | "file";
         url: string;
+        type: "video" | "image" | "file";
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
-        source?: "upload" | "youtube" | "external" | undefined;
         youtubeId?: string | undefined;
         duration?: number | undefined;
     }[];
@@ -139,11 +139,11 @@ export declare const createShipmentLotSchema: z.ZodObject<{
     weightGrams: number;
     purchaseCost: number;
     images?: {
-        type: "image" | "video" | "file";
         url: string;
+        type: "video" | "image" | "file";
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
-        source?: "upload" | "youtube" | "external" | undefined;
         youtubeId?: string | undefined;
         duration?: number | undefined;
     }[] | undefined;
@@ -165,19 +165,19 @@ export declare const updateShipmentLotSchema: z.ZodObject<{
         youtubeId: z.ZodOptional<z.ZodString>;
         duration: z.ZodOptional<z.ZodNumber>;
     }, "strip", z.ZodTypeAny, {
-        type: "image" | "video" | "file";
         url: string;
+        type: "video" | "image" | "file";
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
-        source?: "upload" | "youtube" | "external" | undefined;
         youtubeId?: string | undefined;
         duration?: number | undefined;
     }, {
-        type: "image" | "video" | "file";
         url: string;
+        type: "video" | "image" | "file";
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
-        source?: "upload" | "youtube" | "external" | undefined;
         youtubeId?: string | undefined;
         duration?: number | undefined;
     }>, "many">>>>;
@@ -185,11 +185,11 @@ export declare const updateShipmentLotSchema: z.ZodObject<{
     remainderEstimatedValue: z.ZodOptional<z.ZodOptional<z.ZodNumber>>;
 }, "strip", z.ZodTypeAny, {
     images?: {
-        type: "image" | "video" | "file";
         url: string;
+        type: "video" | "image" | "file";
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
-        source?: "upload" | "youtube" | "external" | undefined;
         youtubeId?: string | undefined;
         duration?: number | undefined;
     }[] | undefined;
@@ -201,11 +201,11 @@ export declare const updateShipmentLotSchema: z.ZodObject<{
     remainderEstimatedValue?: number | undefined;
 }, {
     images?: {
-        type: "image" | "video" | "file";
         url: string;
+        type: "video" | "image" | "file";
+        source?: "upload" | "youtube" | "external" | undefined;
         alt?: string | undefined;
         thumbnailUrl?: string | undefined;
-        source?: "upload" | "youtube" | "external" | undefined;
         youtubeId?: string | undefined;
         duration?: number | undefined;
     }[] | undefined;
@@ -315,7 +315,7 @@ export declare const updateShipmentItemSchema: z.ZodObject<{
 } & {
     linkedProductId: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     linkedProductSlug: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-    linkedProductListingType: z.ZodOptional<z.ZodNullable<z.ZodEnum<["standard", "auction", "pre-order", "prize-draw", "classified", "digital-code", "live", "art", "stickers"]>>>;
+    linkedProductListingType: z.ZodOptional<z.ZodNullable<z.ZodEnum<["standard", "collector-drop", "pre-order", "clearance", "classified", "digital-code", "live", "art-and-stickers"]>>>;
 }, "strip", z.ZodTypeAny, {
     title?: string | undefined;
     categorySlugs?: string[] | undefined;
@@ -327,7 +327,7 @@ export declare const updateShipmentItemSchema: z.ZodObject<{
     isForSelfUse?: boolean | undefined;
     linkedProductId?: string | null | undefined;
     linkedProductSlug?: string | null | undefined;
-    linkedProductListingType?: "standard" | "auction" | "pre-order" | "prize-draw" | "classified" | "digital-code" | "live" | "art" | "stickers" | null | undefined;
+    linkedProductListingType?: "standard" | "collector-drop" | "pre-order" | "clearance" | "classified" | "digital-code" | "live" | "art-and-stickers" | null | undefined;
 }, {
     title?: string | undefined;
     categorySlugs?: string[] | undefined;
@@ -339,7 +339,7 @@ export declare const updateShipmentItemSchema: z.ZodObject<{
     isForSelfUse?: boolean | undefined;
     linkedProductId?: string | null | undefined;
     linkedProductSlug?: string | null | undefined;
-    linkedProductListingType?: "standard" | "auction" | "pre-order" | "prize-draw" | "classified" | "digital-code" | "live" | "art" | "stickers" | null | undefined;
+    linkedProductListingType?: "standard" | "collector-drop" | "pre-order" | "clearance" | "classified" | "digital-code" | "live" | "art-and-stickers" | null | undefined;
 }>;
 /**
  * Bulk paste-import payload — capped at MAX_ITEMS_PER_LOT (500), matching

package/dist/features/shipments/schemas/validation.js

@@ -27,14 +27,13 @@ const productConditionSchema = z.enum([
 // linked-product type a main item can be turned into via the link route.
 const listingTypeSchema = z.enum([
     "standard",
-    "auction",
+    "collector-drop",
     "pre-order",
-    "prize-draw",
+    "clearance",
     "classified",
     "digital-code",
     "live",
-    "art",
-    "stickers",
+    "art-and-stickers",
 ]);
 export const createShipmentSchema = z.object({
     shipmentNumber: annotate(z.string().min(1, "Shipment number is required"), {

package/dist/features/site-settings/components/ActionPermissionsManager.js

@@ -14,6 +14,12 @@ const __O = {
     hidden: "overflow-hidden",
 };
 const CLS_CUSTOM_PILL = "inline-block rounded-full bg-warning-surface px-[var(--appkit-space-2)] py-[var(--appkit-space-0-5)] text-[length:var(--appkit-text-xs)] font-medium text-warning dark:bg-warning-surface dark:text-warning";
+/**
+ * Named once because it is BOTH a value in `CATEGORY_LABELS` and a key in
+ * `CATEGORY_COLORS` — two maps that must agree exactly, or the group renders
+ * with no colour and no error.
+ */
+const COLLECTOR_DROP_CTA = "Collector Drop CTA";
 const CATEGORY_LABELS = {
     "buy-now": "Public CTA",
     "add-to-cart": "Public CTA",
@@ -22,15 +28,17 @@ const CATEGORY_LABELS = {
     "make-offer": "Public CTA",
     "share": "Public CTA",
     "compare": "Public CTA",
-    "place-bid": "Auction CTA",
-    "buy-now-auction": "Auction CTA",
-    "watch-auction": "Auction CTA",
-    "unwatch-auction": "Auction CTA",
+    "place-bid": COLLECTOR_DROP_CTA,
+    "buy-now-collectorDrop": COLLECTOR_DROP_CTA,
+    "watch-collectorDrop": COLLECTOR_DROP_CTA,
+    "unwatch-collectorDrop": COLLECTOR_DROP_CTA,
     "reserve-now": "Pre-order CTA",
     "cancel-reservation": "Pre-order CTA",
     "checkout": "Checkout",
-    "enter-prize-draw": "Prize Draw",
-    "enter-raffle": "Raffle",
+    "enter-clearance": "Clearance",
+    // 🛑 The KEY is the action id and is persisted in
+    // `siteSettings.actionPermissions`; only the display VALUE is renamed.
+    "enter-raffle": "Giveaway",
     "report-listing": "Moderation",
     "follow-store": "Social",
     "write-review": "Reviews",
@@ -51,11 +59,15 @@ const CATEGORY_LABELS = {
 };
 const CATEGORY_COLORS = {
     "Public CTA": "bg-info-surface text-info dark:bg-info-surface dark:text-info",
-    "Auction CTA": "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
+    [COLLECTOR_DROP_CTA]: "bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300",
     "Pre-order CTA": "bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300",
     "Checkout": "bg-success-surface text-success dark:bg-success-surface dark:text-success",
-    "Prize Draw": "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning",
-    "Raffle": "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning",
+    // 🛑 These keys are the VALUES of CATEGORY_LABELS above, not action ids —
+    // they must be renamed in lockstep or the group falls through to the grey
+    // "Account" colour with no error (Root Cause #33). "Prize Draw" and
+    // "Giveaway" were left here when the labels became "Clearance"/"Giveaway".
+    "Clearance": "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning",
+    "Giveaway": "bg-warning-surface text-warning dark:bg-warning-surface dark:text-warning",
     "Moderation": "bg-error-surface text-error dark:bg-error-surface dark:text-error",
     "Social": "bg-pink-100 text-pink-800 dark:bg-pink-900/30 dark:text-pink-300",
     "Reviews": "bg-success-surface text-success dark:bg-success-surface dark:text-success",

package/dist/features/site-settings/components/NavPermissionsManager.d.ts

@@ -12,8 +12,27 @@ export interface NavGroup {
 export interface NavPermissionsManagerProps {
     initialConfig: Record<string, {
         enabled: boolean;
+        order?: number;
     }>;
     navGroups: NavGroup[];
     onUpdate: (navId: string, enabled: boolean) => Promise<void>;
+    /**
+     * Bulk-writes a whole group's reordered id list. Omit to leave that
+     * group's items at their original order with no reorder UI — matching
+     * every other 3B-1b subsystem's "unconfigured = today's behaviour" rule.
+     */
+    onReorder?: (orderedIds: string[]) => Promise<void>;
+    /**
+     * Admin-created NEW nav entries (overhaul brief, Table D — safe version).
+     * `availableToAdd` is the closed vocabulary — pre-registered `ActionDef`s
+     * the caller has already vetted, never a free-typed href/permission. All
+     * three required together to show the "add entry" control per group;
+     * omitted (the default) renders exactly as before this existed.
+     */
+    availableToAdd?: NavItem[];
+    onAdd?: (groupLabel: string, item: NavItem) => Promise<void>;
+    onRemove?: (navId: string) => Promise<void>;
+    /** Which `navId`s were admin-added — only these get a remove (×) control. */
+    customNavIds?: Set<string>;
 }
-export declare function NavPermissionsManager({ initialConfig, navGroups, onUpdate, }: NavPermissionsManagerProps): React.JSX.Element;
+export declare function NavPermissionsManager({ initialConfig, navGroups, onUpdate, onReorder, availableToAdd, onAdd, onRemove, customNavIds, }: NavPermissionsManagerProps): React.JSX.Element;