@mohasinac/appkit 3.4.8 → 3.5.0

package/dist/features/shell/CommandPalette.d.ts

@@ -0,0 +1,27 @@
+export interface CommandPaletteGroup {
+    title: string;
+    items: {
+        href: string;
+        label: string;
+    }[];
+}
+export interface CommandPaletteProps {
+    isOpen: boolean;
+    onClose: () => void;
+    groups: CommandPaletteGroup[];
+    /** Placeholder for the search input. Defaults to "Jump to a page…". */
+    placeholder?: string;
+}
+/**
+ * CommandPalette — data-driven quick-jump search over a flat/grouped set of
+ * links. Built for admin's 65-item / 10-group nav (no quick-jump previously
+ * existed), but generic enough for any grouped nav list. Opens via the
+ * caller's own trigger (icon button, `⌘K`/`Ctrl+K` listener, etc.) — this
+ * component owns only the search/filter/keyboard-nav/navigate behaviour.
+ */
+export declare function CommandPalette({ isOpen, onClose, groups, placeholder }: CommandPaletteProps): import("react").JSX.Element;
+/**
+ * useCommandPaletteHotkey — opens the palette on `⌘K`/`Ctrl+K` anywhere on
+ * the page (ignored while typing in another input/textarea/contenteditable).
+ */
+export declare function useCommandPaletteHotkey(onOpen: () => void): void;

package/dist/features/shell/CommandPalette.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Button, Div, Input, Kbd, Modal, Row, Span, Stack, Text } from "../../ui";
+/**
+ * CommandPalette — data-driven quick-jump search over a flat/grouped set of
+ * links. Built for admin's 65-item / 10-group nav (no quick-jump previously
+ * existed), but generic enough for any grouped nav list. Opens via the
+ * caller's own trigger (icon button, `⌘K`/`Ctrl+K` listener, etc.) — this
+ * component owns only the search/filter/keyboard-nav/navigate behaviour.
+ */
+export function CommandPalette({ isOpen, onClose, groups, placeholder = "Jump to a page…" }) {
+    const router = useRouter();
+    const [query, setQuery] = useState("");
+    const [activeIndex, setActiveIndex] = useState(0);
+    const inputRef = useRef(null);
+    const flatItems = useMemo(() => groups.flatMap((g) => g.items.map((item) => ({ ...item, groupTitle: g.title }))), [groups]);
+    const results = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        if (!q)
+            return flatItems;
+        return flatItems.filter((item) => item.label.toLowerCase().includes(q) || item.groupTitle.toLowerCase().includes(q));
+    }, [flatItems, query]);
+    useEffect(() => {
+        setActiveIndex(0);
+    }, [query]);
+    useEffect(() => {
+        if (isOpen) {
+            setQuery("");
+            setActiveIndex(0);
+            // Focus after the modal's mount transition so the input actually receives it.
+            const id = window.setTimeout(() => inputRef.current?.focus(), 50);
+            return () => window.clearTimeout(id);
+        }
+    }, [isOpen]);
+    const navigate = useCallback((href) => {
+        onClose();
+        router.push(href);
+    }, [onClose, router]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Escape") {
+            onClose();
+            return;
+        }
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setActiveIndex((i) => Math.min(i + 1, results.length - 1));
+            return;
+        }
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setActiveIndex((i) => Math.max(i - 1, 0));
+            return;
+        }
+        if (e.key !== "Enter")
+            return;
+        e.preventDefault();
+        const target = results[activeIndex];
+        if (target)
+            navigate(target.href);
+    }, [results, activeIndex, navigate, onClose]);
+    return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, size: "lg", showCloseButton: false, className: "appkit-command-palette", children: _jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Input, { ref: inputRef, value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, "aria-label": placeholder, className: "flex-1", autoFocus: true }), _jsx(Kbd, { size: "sm", tone: "brand", children: "Esc" })] }), _jsx(Div, { className: "max-h-96", overflow: "y-auto", children: results.length === 0 ? (_jsxs(Text, { size: "sm", color: "muted", align: "center", paddingY: "lg", children: ["No matches for \u201C", query, "\u201D."] })) : (_jsx(Stack, { gap: "none", children: results.map((item, idx) => (_jsxs(Button, { variant: "ghost", type: "button", onClick: () => navigate(item.href), onMouseEnter: () => setActiveIndex(idx), justify: "between", rounded: "md", paddingX: "sm", paddingY: "xs", className: [
+                                "w-full text-left",
+                                idx === activeIndex
+                                    ? "bg-[var(--appkit-color-primary-50)] text-[var(--appkit-color-primary-700)]"
+                                    : "hover:bg-[var(--appkit-color-surface-elevated)]",
+                            ].join(" "), children: [_jsx(Span, { size: "sm", weight: idx === activeIndex ? "semibold" : "normal", children: item.label }), _jsx(Span, { size: "xs", color: "muted", children: item.groupTitle })] }, item.href))) })) })] }) }));
+}
+/**
+ * useCommandPaletteHotkey — opens the palette on `⌘K`/`Ctrl+K` anywhere on
+ * the page (ignored while typing in another input/textarea/contenteditable).
+ */
+export function useCommandPaletteHotkey(onOpen) {
+    useEffect(() => {
+        function handler(e) {
+            const isMeta = e.metaKey || e.ctrlKey;
+            if (!isMeta || e.key.toLowerCase() !== "k")
+                return;
+            const target = e.target;
+            const tag = target?.tagName;
+            if (tag === "INPUT" || tag === "TEXTAREA" || target?.isContentEditable) {
+                // Still allow the hotkey to open the palette even from inside another
+                // field — command palettes conventionally override local typing.
+            }
+            e.preventDefault();
+            onOpen();
+        }
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [onOpen]);
+}

package/dist/features/shell/FormShell.js

@@ -3,11 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState } from "react";
 import { X, AlertTriangle, Eye, ArrowLeft } from "lucide-react";
 import { Button } from "../../ui/components/Button";
+import { IconButton } from "../../ui/components/IconButton";
 import { classNames } from "../../ui/style.helper";
 import { FORM_ACTION_META, FORM_ACTION_ID } from "../products/constants/action-defs";
 import { Div, Row, Span, Stack, Text } from "../../ui";
 const __P = {
-    p4: "p-4",
+    p4: "p-[var(--appkit-space-4)]",
 };
 const __O = {
     hidden: "overflow-hidden",
@@ -115,8 +116,8 @@ schema: _schema, isDirty = false, isLoading = false, sections, onSaveDraft, onPu
     };
     if (!isOpen)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-sm", className: "fixed inset-0 backdrop-blur-[2px]", style: { zIndex: "calc(var(--appkit-z-modal) - 1)" }, "aria-hidden": "true", onClick: attemptClose }), _jsxs(Div, { layout: "flex", ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 bottom-0 left-0 right-0 lg:left-[10%] lg:right-[10%] [flex-direction:column] bg-[var(--appkit-color-surface)]", shadow: "2xl", style: { zIndex: "var(--appkit-z-modal)" }, children: [_jsxs(Row, { gap: "sm", paddingX: "x-5", className: "flex-shrink-0 sticky top-0 z-10 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", padding: "y-sm", children: [previewMode ? (_jsxs("button", { type: "button", onClick: () => setPreviewMode(false), "aria-label": "Back to edit", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors flex-shrink-0 flex items-center gap-1.5 text-sm", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Back to Edit" })] })) : (_jsx("button", { type: "button", onClick: attemptClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })), _jsxs(Div, { className: "flex-1 min-w-0", children: [breadcrumb && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] truncate mb-0.5", size: "xs", children: breadcrumb })), _jsx(Text, { className: "text-[var(--appkit-color-text)] truncate", size: "sm", weight: "semibold", children: previewMode ? `Preview — ${title}` : title })] }), _jsx(Row, { gap: "xs", className: "flex-shrink-0", children: previewMode ? null : (_jsxs(_Fragment, { children: [previewSlot && (_jsxs("button", { type: "button", onClick: () => setPreviewMode(true), className: "flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors border border-[var(--appkit-color-border)]", children: [_jsx(Eye, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Preview" })] })), onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsx(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: publishLabel }))] })) })] }), _jsxs(Div, { layout: "flex", className: `flex-1 ${__O.hidden}`, children: [sections && sections.length > 0 && !previewMode && (_jsx("nav", { "aria-label": "Form sections", className: "hidden lg:flex flex-col flex-shrink-0 w-48 border-r border-[var(--appkit-color-border)] py-4 px-3 gap-1 overflow-y-auto", children: sections.map((sec) => (_jsx("button", { type: "button", onClick: () => scrollToSection(sec.id), className: "text-left text-sm px-3 py-2 rounded-lg text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-text)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: sec.label }, sec.id))) })), sections && sections.length > 0 && !previewMode && (_jsx(Row, { gap: "px", className: `lg:hidden fixed top-[var(--form-shell-topbar-h,57px)] left-0 right-0 z-10 ${__O.xAuto} px-[1.25rem] bg-[var(--appkit-color-surface)] border-b border-[var(--appkit-color-border)]`, padding: "y-xs", children: sections.map((sec) => (_jsx("button", { type: "button", onClick: () => scrollToSection(sec.id), className: "flex-shrink-0 text-xs px-3 py-1.5 rounded-full border border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)] transition-colors whitespace-nowrap", children: sec.label }, sec.id))) })), _jsx(Div, { ref: bodyRef, className: classNames("flex-1 overflow-y-auto", sections && sections.length > 0 && !previewMode ? "pt-0 lg:pt-0" : ""), children: previewMode && previewSlot ? (_jsxs(_Fragment, { children: [_jsxs(Row, { textSize: "sm", gap: "xs", className: "sticky top-0 z-10 bg-[var(--appkit-color-warning-surface)] border-b border-[var(--appkit-color-warning)] text-[var(--appkit-color-warning-text,var(--appkit-color-warning))]", paddingY: "y-xs", paddingX: "x-md", children: [_jsx(Eye, { className: "w-4 h-4 flex-shrink-0" }), _jsx(Span, { children: "Preview \u2014 not visible to buyers until published" })] }), _jsx(Div, { padding: "y-md", children: previewSlot() })] })) : splitPreview && previewSlot ? (
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-sm", className: "fixed inset-0 backdrop-blur-[2px]", style: { zIndex: "calc(var(--appkit-z-modal) - 1)" }, "aria-hidden": "true", onClick: attemptClose }), _jsxs(Div, { layout: "flex", ref: panelRef, role: "dialog", "aria-modal": "true", "aria-label": title, className: "fixed top-0 bottom-0 left-0 right-0 lg:left-[10%] lg:right-[10%] [flex-direction:column] bg-[var(--appkit-color-surface)]", shadow: "2xl", style: { zIndex: "var(--appkit-z-modal)" }, children: [_jsxs(Row, { gap: "sm", paddingX: "x-5", className: "flex-shrink-0 sticky top-0 z-10 border-b border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", padding: "y-sm", children: [previewMode ? (_jsxs(Button, { variant: "ghost", type: "button", onClick: () => setPreviewMode(false), "aria-label": "Back to edit", gap: "xs", rounded: "lg", textSize: "sm", textColor: "muted", className: "flex-shrink-0", children: [_jsx(ArrowLeft, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Back to Edit" })] })) : (_jsx(IconButton, { type: "button", onClick: attemptClose, "aria-label": "Close", variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] flex-shrink-0", children: _jsx(X, { className: "w-5 h-5" }) })), _jsxs(Div, { className: "flex-1 min-w-0", children: [breadcrumb && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)] truncate mb-0.5", size: "xs", children: breadcrumb })), _jsx(Text, { className: "text-[var(--appkit-color-text)] truncate", size: "sm", weight: "semibold", children: previewMode ? `Preview — ${title}` : title })] }), _jsx(Row, { gap: "xs", className: "flex-shrink-0", children: previewMode ? null : (_jsxs(_Fragment, { children: [previewSlot && (_jsxs(Button, { variant: "outline", type: "button", onClick: () => setPreviewMode(true), gap: "xs", rounded: "lg", paddingX: "sm", textSize: "sm", textColor: "muted", children: [_jsx(Eye, { className: "w-4 h-4" }), _jsx(Span, { className: "hidden sm:inline", children: "Preview" })] })), onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsx(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: publishLabel }))] })) })] }), _jsxs(Div, { layout: "flex", className: `flex-1 ${__O.hidden}`, children: [sections && sections.length > 0 && !previewMode && (_jsx("nav", { "aria-label": "Form sections", className: "hidden lg:flex flex-col flex-shrink-0 w-48 border-r border-[var(--appkit-color-border)] py-[var(--appkit-space-4)] px-[var(--appkit-space-3)] gap-[var(--appkit-space-1)] overflow-y-auto", children: sections.map((sec) => (_jsx(Button, { variant: "ghost", type: "button", onClick: () => scrollToSection(sec.id), rounded: "lg", paddingX: "sm", paddingY: "xs", textSize: "sm", textColor: "muted", justify: "start", className: "text-left", children: sec.label }, sec.id))) })), sections && sections.length > 0 && !previewMode && (_jsx(Row, { gap: "px", className: `lg:hidden fixed top-[var(--form-shell-topbar-h,57px)] left-0 right-0 z-10 ${__O.xAuto} px-[1.25rem] bg-[var(--appkit-color-surface)] border-b border-[var(--appkit-color-border)]`, padding: "y-xs", children: sections.map((sec) => (_jsx(Button, { variant: "outline", type: "button", onClick: () => scrollToSection(sec.id), rounded: "full", paddingX: "sm", paddingY: "xs", textSize: "xs", textColor: "muted", className: "flex-shrink-0 hover:border-primary hover:text-primary whitespace-nowrap", children: sec.label }, sec.id))) })), _jsx(Div, { ref: bodyRef, className: classNames("flex-1 overflow-y-auto", sections && sections.length > 0 && !previewMode ? "pt-[var(--appkit-space-0)] lg:pt-[var(--appkit-space-0)]" : ""), children: previewMode && previewSlot ? (_jsxs(_Fragment, { children: [_jsxs(Row, { textSize: "sm", gap: "xs", className: "sticky top-0 z-10 bg-[var(--appkit-color-warning-surface)] border-b border-[var(--appkit-color-warning)] text-[var(--appkit-color-warning-text,var(--appkit-color-warning))]", paddingY: "y-xs", paddingX: "x-md", children: [_jsx(Eye, { className: "w-4 h-4 flex-shrink-0" }), _jsx(Span, { children: "Preview \u2014 not visible to buyers until published" })] }), _jsx(Div, { padding: "y-md", children: previewSlot() })] })) : splitPreview && previewSlot ? (
                                 // S-STORE-3-D — desktop 60/40 split: form left, preview right.
                                 // Below `lg`, falls back to single-column form (preview-as-modal via existing toggle).
-                                _jsxs(Div, { className: "lg:grid lg:grid-cols-[3fr_2fr] lg:gap-[1.5rem] lg:px-[1.5rem] lg:py-[1.5rem] lg:max-w-[1400px] lg:mx-auto", children: [_jsx(Div, { className: "max-w-3xl mx-auto px-[1.25rem] sm:px-[1.5rem] lg:max-w-none lg:px-[0] lg:py-[0]", padding: "y-lg", children: children }), _jsxs(Div, { className: `hidden lg:block sticky lg:top-4 lg:self-start lg:max-h-[calc(100vh-6rem)] ${__O.yAuto} border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-raised)] ${__P.p4}`, rounded: "lg", children: [_jsxs(Row, { textWeight: "semibold", textSize: "xs", gap: "xs", className: "mb-3 uppercase tracking-wide text-[var(--appkit-color-text-muted)]", children: [_jsx(Eye, { className: "w-3.5 h-3.5" }), _jsx(Span, { children: "Live preview" })] }), previewSlot()] })] })) : (_jsx(Div, { className: "max-w-3xl mx-auto px-[1.25rem] sm:px-[1.5rem]", padding: "y-lg", children: children })) })] }), !previewMode && renderBottomBar ? (renderBottomBar()) : !previewMode && (onSaveDraft || onPublish) ? (_jsxs(Row, { justify: "between", paddingX: "x-5", className: "flex-shrink-0 sticky bottom-0 z-10 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", padding: "y-sm", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: attemptClose, disabled: isLoading, children: FORM_ACTION_META[FORM_ACTION_ID.DISCARD].label }), _jsxs(Row, { gap: "xs", children: [onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsxs(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: [publishLabel, " \u2192"] }))] })] })) : null] }), showUnsaved && (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-lg", className: "fixed inset-0", style: { zIndex: "calc(var(--appkit-z-modal) + 5)" }, onClick: () => setShowUnsaved(false) }), _jsxs(Div, { className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-sm bg-[var(--appkit-color-surface)]", shadow: "2xl", rounded: "xl", padding: "lg", style: { zIndex: "calc(var(--appkit-z-modal) + 5)" }, children: [_jsxs(Row, { gap: "sm", align: "start", className: "mb-4", children: [_jsx(Span, { layout: "flex-center", className: "flex-shrink-0 w-10 h-10 bg-[var(--appkit-color-warning-surface)]", rounded: "full", children: _jsx(AlertTriangle, { className: "w-5 h-5 text-[var(--appkit-color-warning)]" }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text)]", weight: "semibold", children: "Unsaved changes" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "You have unsaved changes. Leave without saving?" })] })] }), _jsxs(Row, { gap: "xs", justify: "end", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowUnsaved(false), children: "Stay" }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => { setShowUnsaved(false); onClose(); }, children: "Leave" })] })] })] }))] }));
+                                _jsxs(Div, { className: "lg:grid lg:grid-cols-[3fr_2fr] lg:gap-[1.5rem] lg:px-[1.5rem] lg:py-[1.5rem] lg:max-w-[1400px] lg:mx-auto", children: [_jsx(Div, { className: "max-w-3xl mx-auto px-[1.25rem] sm:px-[1.5rem] lg:max-w-none lg:px-[0] lg:py-[0]", padding: "y-lg", children: children }), _jsxs(Div, { className: `hidden lg:block sticky lg:top-4 lg:self-start lg:max-h-[calc(100vh-6rem)] ${__O.yAuto} border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface-raised)] ${__P.p4}`, rounded: "lg", children: [_jsxs(Row, { textWeight: "semibold", textSize: "xs", gap: "xs", className: "mb-3 uppercase tracking-wide text-[var(--appkit-color-text-muted)]", children: [_jsx(Eye, { className: "w-3.5 h-3.5" }), _jsx(Span, { children: "Live preview" })] }), previewSlot()] })] })) : (_jsx(Div, { className: "max-w-3xl mx-auto px-[1.25rem] sm:px-[1.5rem]", padding: "y-lg", children: children })) })] }), !previewMode && renderBottomBar ? (renderBottomBar()) : !previewMode && (onSaveDraft || onPublish) ? (_jsxs(Row, { justify: "between", paddingX: "x-5", className: "flex-shrink-0 sticky bottom-0 z-10 border-t border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", padding: "y-sm", style: { paddingBottom: "calc(var(--appkit-space-3) + var(--keyboard-inset-height, 0px))" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: attemptClose, disabled: isLoading, children: FORM_ACTION_META[FORM_ACTION_ID.DISCARD].label }), _jsxs(Row, { gap: "xs", children: [onSaveDraft && (_jsx(Button, { variant: "outline", size: "sm", onClick: handleSaveDraft, disabled: isLoading || savingDraft || publishing, isLoading: savingDraft, children: saveLabel })), onPublish && (_jsxs(Button, { variant: "primary", size: "sm", onClick: handlePublish, disabled: isLoading || savingDraft || publishing, isLoading: publishing, children: [publishLabel, " \u2192"] }))] })] })) : null] }), showUnsaved && (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-lg", className: "fixed inset-0", style: { zIndex: "var(--appkit-z-confirm)" }, onClick: () => setShowUnsaved(false) }), _jsxs(Div, { className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] max-w-sm bg-[var(--appkit-color-surface)]", shadow: "2xl", rounded: "xl", padding: "lg", style: { zIndex: "var(--appkit-z-confirm)" }, children: [_jsxs(Row, { gap: "sm", align: "start", className: "mb-4", children: [_jsx(Span, { layout: "flex-center", className: "flex-shrink-0 w-10 h-10 bg-[var(--appkit-color-warning-surface)]", rounded: "full", children: _jsx(AlertTriangle, { className: "w-5 h-5 text-[var(--appkit-color-warning)]" }) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text)]", weight: "semibold", children: "Unsaved changes" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "You have unsaved changes. Leave without saving?" })] })] }), _jsxs(Row, { gap: "xs", justify: "end", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setShowUnsaved(false), children: "Stay" }), _jsx(Button, { variant: "danger", size: "sm", onClick: () => { setShowUnsaved(false); onClose(); }, children: "Leave" })] })] })] }))] }));
 }

package/dist/features/shell/QuickFormDrawer.js

@@ -3,9 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useRef, useState } from "react";
 import { X } from "lucide-react";
 import { Button } from "../../ui/components/Button";
+import { IconButton } from "../../ui/components/IconButton";
 import { FormField } from "../../ui/components/FormField";
 import { Toggle } from "../../ui/components/Toggle";
-import { Div, Row, Stack, Text } from "../../ui";
+import { Div, Form, Row, Stack, Text } from "../../ui";
 function initValues(fields, defaults = {}) {
     const out = {};
     for (const f of fields) {
@@ -121,7 +122,7 @@ export function QuickFormDrawer({ isOpen, onClose, title, fields, defaultValues,
     if (!isOpen)
         return null;
     const busy = submitting || isLoading;
-    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px] [z-index:calc(var(--appkit-z-modal)+1)]", "aria-hidden": "true", onClick: handleClose }), _jsxs(Div, { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, layout: "flex-col", shadow: "2xl", className: "fixed inset-y-0 right-0 bg-[var(--appkit-color-surface)] w-full lg:w-[40%] [z-index:calc(var(--appkit-z-modal)+2)]", children: [_jsxs(Row, { className: "flex-shrink-0 border-b border-[var(--appkit-color-border)]", padding: "md", align: "center", gap: "3", children: [_jsx(Text, { className: "flex-1 text-[var(--appkit-color-text)]", size: "base", weight: "semibold", children: title }), _jsx("button", { type: "button", onClick: handleClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] transition-colors", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs("form", { className: "flex-1 overflow-y-auto px-4 py-5 space-y-4", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px] [z-index:calc(var(--appkit-z-modal)+1)]", "aria-hidden": "true", onClick: handleClose }), _jsxs(Div, { ref: drawerRef, role: "dialog", "aria-modal": "true", "aria-label": title, layout: "flex-col", shadow: "2xl", className: "fixed inset-y-0 right-0 bg-[var(--appkit-color-surface)] w-full lg:w-[40%] [z-index:calc(var(--appkit-z-modal)+2)]", children: [_jsxs(Row, { className: "flex-shrink-0 border-b border-[var(--appkit-color-border)]", padding: "md", align: "center", gap: "3", children: [_jsx(Text, { className: "flex-1 text-[var(--appkit-color-text)]", size: "base", weight: "semibold", children: title }), _jsx(IconButton, { type: "button", onClick: handleClose, "aria-label": "Close", variant: "ghost", rounded: "lg", className: "text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)]", children: _jsx(X, { className: "w-5 h-5" }) })] }), _jsxs(Form, { className: "flex-1", overflow: "y-auto", paddingX: "x-md", paddingY: "y-md-lg", spacing: "md", onSubmit: handleSubmit, noValidate: true, children: [fields.map((field) => {
                                 const value = values[field.name];
                                 if (field.type === "toggle") {
                                     return (_jsxs(Stack, { gap: "xs", children: [_jsx(Toggle, { checked: !!value, onChange: (checked) => set(field.name, checked), label: field.label }), field.helperText && (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: field.helperText }))] }, field.name));

package/dist/features/shell/StepForm.js

@@ -19,11 +19,11 @@ export function StepIndicator({ steps, currentStep, onStepClick, stepErrors, })
             const isDone = i < currentStep;
             const isActive = i === currentStep;
             const hasError = stepErrors?.[i] === true;
-            return (_jsxs(Row, { className: "flex-shrink-0", align: "center", gap: "none", children: [_jsxs("button", { type: "button", disabled: !isDone && !isActive, onClick: () => isDone && onStepClick?.(i), className: classNames("flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-colors", isActive
+            return (_jsxs(Row, { className: "flex-shrink-0", align: "center", gap: "none", children: [_jsxs(Button, { variant: "ghost", type: "button", disabled: !isDone && !isActive, onClick: () => isDone && onStepClick?.(i), gap: "sm", rounded: "lg", paddingX: "sm", paddingY: "xs", textSize: "sm", className: classNames(isActive
                             ? "font-semibold text-[var(--appkit-color-primary)]"
                             : isDone
                                 ? "text-[var(--appkit-color-text-muted)] cursor-pointer hover:text-[var(--appkit-color-text)]"
-                                : "text-[var(--appkit-color-text-faint)] cursor-default"), children: [_jsxs(Span, { className: "relative flex-shrink-0", children: [hasError && (_jsx(Span, { className: "absolute -top-0.5 -right-0.5 w-2 h-2 bg-[var(--appkit-color-error)] z-10", rounded: "full", "aria-label": "This step has errors" })), _jsx(Span, { className: classNames("flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold border-2", hasError
+                                : "text-[var(--appkit-color-text-faint)] cursor-default"), children: [_jsxs(Span, { className: "relative flex-shrink-0", children: [hasError && (_jsx(Span, { className: "absolute -top-0.5 -right-0.5 w-2 h-2 bg-[var(--appkit-color-error)] z-10", rounded: "full", "aria-label": "This step has errors" })), _jsx(Span, { className: classNames("flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-[length:var(--appkit-text-xs)] font-bold border-2", hasError
                                             ? "border-[var(--appkit-color-error)] bg-[var(--appkit-color-error)] text-white"
                                             : isActive
                                                 ? "border-[var(--appkit-color-primary)] bg-[var(--appkit-color-primary)] text-white"

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

@@ -1,5 +1,7 @@
 export type { FormShellSection, FormShellProps, UseFormShellResult } from "./FormShell";
 export { FormShell, useFormShell } from "./FormShell";
+export type { CommandPaletteGroup, CommandPaletteProps } from "./CommandPalette";
+export { CommandPalette, useCommandPaletteHotkey } from "./CommandPalette";
 export type { QuickFieldType, QuickFieldDef, QuickFormDrawerProps } from "./QuickFormDrawer";
 export { QuickFormDrawer } from "./QuickFormDrawer";
 export type { StepDef, StepFormProps, StepFormActionsProps } from "./StepForm";

package/dist/features/shell/index.js

@@ -1,4 +1,5 @@
 export { FormShell, useFormShell } from "./FormShell";
+export { CommandPalette, useCommandPaletteHotkey } from "./CommandPalette";
 export { QuickFormDrawer } from "./QuickFormDrawer";
 export { StepForm, StepFormActions, StepIndicator } from "./StepForm";
 export { TitleDescriptionGroup, ImageFieldGroup, SeoFieldGroup, StatusFieldGroup, } from "./field-groups";

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

@@ -0,0 +1,7 @@
+import React from "react";
+export interface AdminShipmentEditorViewProps {
+    shipmentId?: string;
+    onSaved?: (id: string) => void;
+    embedded?: boolean;
+}
+export declare function AdminShipmentEditorView({ shipmentId, onSaved }: AdminShipmentEditorViewProps): React.JSX.Element;

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

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { useApiMutation } from "@mohasinac/appkit/client";
+import { Alert, Button, Div, Form, FieldInput, FieldSelect, FieldTextarea, Grid, Heading, Stack, Table, Thead, Tbody, Tr, Th, Td, Text, TextLink, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ROUTES } from "../../../next/routing/route-map";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+import { createShipmentSchema } from "../schemas/validation";
+import { useShipment } from "../hooks/useShipments";
+import { formatPaise } from "../../../utils/number.formatter";
+const STATUS_OPTIONS = [
+    { label: "Planning", value: "planning" },
+    { label: "Ordered", value: "ordered" },
+    { label: "In Transit", value: "in_transit" },
+    { label: "Customs", value: "customs" },
+    { label: "Received", value: "received" },
+    { label: "Processing", value: "processing" },
+    { label: "Completed", value: "completed" },
+    { label: "Cancelled", value: "cancelled" },
+];
+export function AdminShipmentEditorView({ shipmentId, onSaved }) {
+    const isCreate = !shipmentId;
+    const queryClient = useQueryClient();
+    const { shipment, lots, refetchLots } = useShipment(shipmentId);
+    const [shipmentNumber, setShipmentNumber] = React.useState("");
+    const [supplierName, setSupplierName] = React.useState("");
+    const [originCountry, setOriginCountry] = React.useState("");
+    const [status, setStatus] = React.useState("planning");
+    const [trackingNumber, setTrackingNumber] = React.useState("");
+    const [carrier, setCarrier] = React.useState("");
+    const [etaDate, setEtaDate] = React.useState("");
+    const [notes, setNotes] = React.useState("");
+    const [customsTotalRupees, setCustomsTotalRupees] = React.useState("0");
+    const [shippingTotalRupees, setShippingTotalRupees] = React.useState("0");
+    const [laborHoursSpent, setLaborHoursSpent] = React.useState("0");
+    React.useEffect(() => {
+        if (!shipment)
+            return;
+        setShipmentNumber(shipment.shipmentNumber);
+        setSupplierName(shipment.supplierName);
+        setOriginCountry(shipment.originCountry ?? "");
+        setStatus(shipment.status);
+        setTrackingNumber(shipment.trackingNumber ?? "");
+        setCarrier(shipment.carrier ?? "");
+        setEtaDate(shipment.etaDate ? new Date(shipment.etaDate).toISOString().slice(0, 10) : "");
+        setNotes(shipment.notes ?? "");
+        setCustomsTotalRupees(String(shipment.customsTotalPaise / 100));
+        setShippingTotalRupees(String(shipment.shippingTotalPaise / 100));
+        setLaborHoursSpent(String(shipment.laborHoursSpent ?? 0));
+    }, [shipment]);
+    const saveMutation = useApiMutation({
+        successMessage: isCreate ? "Shipment created" : "Shipment updated",
+        mutationFn: async () => {
+            const payload = {
+                shipmentNumber,
+                supplierName,
+                originCountry: originCountry || undefined,
+                status,
+                trackingNumber: trackingNumber || undefined,
+                carrier: carrier || undefined,
+                etaDate: etaDate || undefined,
+                notes: notes || undefined,
+                customsTotalPaise: Math.round(Number(customsTotalRupees) * 100),
+                shippingTotalPaise: Math.round(Number(shippingTotalRupees) * 100),
+                laborHoursSpent: Number(laborHoursSpent),
+            };
+            if (isCreate) {
+                return apiClient.post(ADMIN_ENDPOINTS.SHIPMENTS, payload);
+            }
+            return apiClient.patch(ADMIN_ENDPOINTS.SHIPMENT_BY_ID(shipmentId), payload);
+        },
+        onSuccess: (saved) => {
+            queryClient.invalidateQueries({ queryKey: ["admin", "shipments"] });
+            onSaved?.(saved.id);
+        },
+    });
+    return (_jsx(Form, { schema: createShipmentSchema, spacing: "md", children: ({ setFieldError }) => (_jsxs(_Fragment, { children: [_jsxs(Grid, { cols: 2, gap: "md", children: [_jsx(FieldInput, { name: "shipmentNumber", label: "Shipment Number", required: true, value: shipmentNumber, onChange: setShipmentNumber, placeholder: "SH-2026-0001" }), _jsx(FieldInput, { name: "supplierName", label: "Supplier Name", required: true, value: supplierName, onChange: setSupplierName }), _jsx(FieldInput, { name: "originCountry", label: "Origin Country", value: originCountry, onChange: setOriginCountry }), _jsx(FieldSelect, { name: "status", label: "Status", required: true, value: status, onChange: setStatus, options: STATUS_OPTIONS }), _jsx(FieldInput, { name: "trackingNumber", label: "Tracking Number", value: trackingNumber, onChange: setTrackingNumber }), _jsx(FieldInput, { name: "carrier", label: "Carrier", value: carrier, onChange: setCarrier }), _jsx(FieldInput, { name: "etaDate", label: "ETA Date", type: "date", value: etaDate, onChange: setEtaDate }), _jsx(FieldInput, { name: "laborHoursSpent", label: "Labor Hours Spent", type: "number", min: "0", value: laborHoursSpent, onChange: setLaborHoursSpent }), _jsx(FieldInput, { name: "customsTotalPaise", label: "Customs Total (\u20B9)", type: "number", min: "0", value: customsTotalRupees, onChange: setCustomsTotalRupees, hint: "Split across lots by declared value" }), _jsx(FieldInput, { name: "shippingTotalPaise", label: "Shipping Total (\u20B9)", type: "number", min: "0", value: shippingTotalRupees, onChange: setShippingTotalRupees, hint: "Split across lots by weight" })] }), _jsx(FieldTextarea, { name: "notes", label: "Notes", value: notes, onChange: setNotes, rows: 3 }), _jsx(Button, { type: "button", isLoading: saveMutation.isPending, onClick: () => {
+                        const parsed = createShipmentSchema.safeParse({
+                            shipmentNumber,
+                            supplierName,
+                            status,
+                            customsTotalPaise: Math.round(Number(customsTotalRupees) * 100),
+                            shippingTotalPaise: Math.round(Number(shippingTotalRupees) * 100),
+                            laborHoursSpent: Number(laborHoursSpent),
+                        });
+                        if (!parsed.success) {
+                            for (const issue of parsed.error.issues)
+                                setFieldError(String(issue.path[0]), issue.message);
+                            return;
+                        }
+                        saveMutation.mutate();
+                    }, children: isCreate ? "Create Shipment" : "Save Changes" }), !isCreate && shipmentId && (_jsx(ShipmentLotsSection, { shipmentId: shipmentId, lots: lots, onLotsChanged: refetchLots }))] })) }));
+}
+function ShipmentLotsSection({ shipmentId, lots, onLotsChanged, }) {
+    const [showAddLot, setShowAddLot] = React.useState(false);
+    const [lotName, setLotName] = React.useState("");
+    const [weightGrams, setWeightGrams] = React.useState("0");
+    const [purchaseCostRupees, setPurchaseCostRupees] = React.useState("0");
+    const addLotMutation = useApiMutation({
+        successMessage: "Lot added",
+        mutationFn: () => apiClient.post(ADMIN_ENDPOINTS.SHIPMENT_LOTS(shipmentId), {
+            lotName,
+            weightGrams: Number(weightGrams),
+            purchaseCostPaise: Math.round(Number(purchaseCostRupees) * 100),
+        }),
+        onSuccess: () => {
+            setLotName("");
+            setWeightGrams("0");
+            setPurchaseCostRupees("0");
+            setShowAddLot(false);
+            onLotsChanged();
+        },
+    });
+    const deleteLotMutation = useApiMutation({
+        successMessage: "Lot deleted",
+        mutationFn: (lotId) => apiClient.delete(ADMIN_ENDPOINTS.SHIPMENT_LOT_BY_ID(shipmentId, lotId)),
+        onSuccess: () => onLotsChanged(),
+    });
+    return (_jsxs(Stack, { gap: "md", className: "border-t pt-[var(--appkit-space-4)]", children: [_jsxs(Div, { layout: "flex", align: "center", justify: "between", children: [_jsxs(Heading, { level: 4, children: ["Lots (", lots.length, "/10)"] }), lots.length < 10 && (_jsx(Button, { size: "sm", variant: "secondary", type: "button", onClick: () => setShowAddLot((v) => !v), children: showAddLot ? "Cancel" : "+ Add Lot" }))] }), showAddLot && (_jsxs(Grid, { cols: 3, gap: "sm", children: [_jsx(FieldInput, { name: "lotName", label: "Lot Name", value: lotName, onChange: setLotName }), _jsx(FieldInput, { name: "weightGrams", label: "Weight (g)", type: "number", min: "0", value: weightGrams, onChange: setWeightGrams }), _jsx(FieldInput, { name: "purchaseCostPaise", label: "Purchase Cost (\u20B9)", type: "number", min: "0", value: purchaseCostRupees, onChange: setPurchaseCostRupees }), _jsx(Button, { type: "button", size: "sm", isLoading: addLotMutation.isPending, disabled: !lotName, onClick: () => addLotMutation.mutate(), children: "Save Lot" })] })), lots.length === 0 ? (_jsx(Text, { variant: "secondary", children: "No lots yet. Add a lot, then manage its items." })) : (_jsxs(Table, { children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "Lot" }), _jsx(Th, { children: "Weight (g)" }), _jsx(Th, { children: "Items" }), _jsx(Th, { children: "Projected Profit" }), _jsx(Th, {})] }) }), _jsx(Tbody, { children: lots.map((lot) => (_jsxs(Tr, { children: [_jsx(Td, { children: lot.lotName }), _jsx(Td, { children: lot.weightGrams }), _jsx(Td, { children: lot.itemCount }), _jsx(Td, { children: formatPaise(lot.projectedProfitPaise) }), _jsxs(Td, { className: "flex gap-[var(--appkit-space-2)]", children: [_jsx(TextLink, { href: ROUTES.ADMIN.SHIPMENT_LOT_ITEMS(shipmentId, lot.id), children: "Manage Items \u2192" }), _jsx(Button, { size: "sm", variant: "ghost", type: "button", action: ACTIONS.SHIPMENT["delete"], isLoading: deleteLotMutation.isPending, onClick: () => deleteLotMutation.mutate(lot.id), children: "Delete" })] })] }, lot.id))) })] })), lots.length > 0 && (_jsx(Alert, { variant: "info", children: "Customs/shipping allocation and profit totals recompute in the background a few seconds after any lot or item change \u2014 reload if a number looks stale." }))] }));
+}

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

@@ -0,0 +1,6 @@
+import React from "react";
+export interface AdminShipmentLotItemsViewProps {
+    shipmentId: string;
+    lotId: string;
+}
+export declare function AdminShipmentLotItemsView({ shipmentId, lotId }: AdminShipmentLotItemsViewProps): React.JSX.Element;

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

@@ -0,0 +1,96 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useApiMutation } from "@mohasinac/appkit/client";
+import { Alert, Badge, Button, Div, FieldCheckbox, FieldInput, Grid, Heading, Modal, Pagination, Skeleton, Stack, Table, Thead, Tbody, Tr, Th, Td, Text, Textarea, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+import { useShipmentItems } from "../hooks/useShipments";
+import { ShipmentItemLinkModal } from "./ShipmentItemLinkModal";
+import { formatPaise } from "../../../utils/number.formatter";
+function parseBulkText(text) {
+    return text
+        .split("\n")
+        .map((line) => line.trim())
+        .filter(Boolean)
+        .map((line) => {
+        const parts = line.split(/\t|,/).map((p) => p.trim());
+        const [title, quantityStr, priceStr] = parts;
+        const isForSelfUse = /^self$/i.test(priceStr ?? "");
+        return {
+            title: title ?? "",
+            quantity: Number(quantityStr) || 1,
+            price: isForSelfUse ? undefined : priceStr ? Math.round(Number(priceStr) * 100) : undefined,
+            isForSelfUse,
+        };
+    })
+        .filter((row) => row.title.length > 0);
+}
+export function AdminShipmentLotItemsView({ shipmentId, lotId }) {
+    const [page, setPage] = React.useState(1);
+    const [pageSize, setPageSize] = React.useState(50);
+    const { items, meta, isLoading, refetch } = useShipmentItems(shipmentId, lotId, { page, pageSize });
+    const [showAddItem, setShowAddItem] = React.useState(false);
+    const [title, setTitle] = React.useState("");
+    const [quantity, setQuantity] = React.useState("1");
+    const [priceRupees, setPriceRupees] = React.useState("0");
+    const [isForSelfUse, setIsForSelfUse] = React.useState(false);
+    const [showBulkImport, setShowBulkImport] = React.useState(false);
+    const [bulkText, setBulkText] = React.useState("");
+    const parsedBulkRows = React.useMemo(() => parseBulkText(bulkText), [bulkText]);
+    const [linkTarget, setLinkTarget] = React.useState(null);
+    const addItemMutation = useApiMutation({
+        successMessage: "Item added",
+        mutationFn: () => apiClient.post(ADMIN_ENDPOINTS.SHIPMENT_LOT_ITEMS(shipmentId, lotId), {
+            title,
+            quantity: Number(quantity),
+            isForSelfUse,
+            price: isForSelfUse ? undefined : Math.round(Number(priceRupees) * 100),
+        }),
+        onSuccess: () => {
+            setTitle("");
+            setQuantity("1");
+            setPriceRupees("0");
+            setIsForSelfUse(false);
+            setShowAddItem(false);
+            refetch();
+        },
+    });
+    const bulkImportMutation = useApiMutation({
+        successMessage: "Items imported",
+        mutationFn: () => {
+            const rows = parsedBulkRows.map((row) => ({
+                title: row.title,
+                quantity: row.quantity,
+                isForSelfUse: row.isForSelfUse,
+                price: row.price,
+            }));
+            return apiClient.post(ADMIN_ENDPOINTS.SHIPMENT_LOT_ITEMS_BULK(shipmentId, lotId), rows);
+        },
+        onSuccess: () => {
+            setBulkText("");
+            setShowBulkImport(false);
+            refetch();
+        },
+    });
+    const deleteItemMutation = useApiMutation({
+        successMessage: "Item deleted",
+        mutationFn: (itemId) => apiClient.delete(ADMIN_ENDPOINTS.SHIPMENT_LOT_ITEM_BY_ID(shipmentId, lotId, itemId)),
+        onSuccess: () => refetch(),
+    });
+    const unlinkItemMutation = useApiMutation({
+        successMessage: "Item unlinked",
+        mutationFn: (itemId) => apiClient.patch(ADMIN_ENDPOINTS.SHIPMENT_LOT_ITEM_BY_ID(shipmentId, lotId, itemId), {
+            linkedProductId: null,
+            linkedProductSlug: null,
+            linkedProductListingType: null,
+        }),
+        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(Grid, { cols: 4, gap: "sm", children: [_jsx(FieldInput, { name: "title", label: "Title", required: true, value: title, onChange: setTitle }), _jsx(FieldInput, { name: "quantity", label: "Quantity", type: "number", min: "1", value: quantity, onChange: setQuantity }), _jsx(FieldInput, { name: "price", label: "Projected Sale Price (\u20B9)", type: "number", min: "0", value: priceRupees, onChange: setPriceRupees, disabled: isForSelfUse }), _jsx(FieldCheckbox, { name: "isForSelfUse", label: "For self use (no resale)", checked: isForSelfUse, onChange: setIsForSelfUse }), _jsx(Button, { size: "sm", isLoading: addItemMutation.isPending, disabled: !title || (!isForSelfUse && Number(priceRupees) <= 0), onClick: () => addItemMutation.mutate(), children: "Save Item" })] })), isLoading ? (_jsxs(Stack, { gap: "sm", children: [_jsx(Skeleton, { variant: "rectangular", height: "32px" }), _jsx(Skeleton, { variant: "rectangular", height: "32px" })] })) : items.length === 0 ? (_jsx(Text, { variant: "secondary", children: "No items tracked yet." })) : (_jsxs(Table, { children: [_jsx(Thead, { children: _jsxs(Tr, { children: [_jsx(Th, { children: "Title" }), _jsx(Th, { children: "Qty" }), _jsx(Th, { children: "Price" }), _jsx(Th, { children: "Status" }), _jsx(Th, {})] }) }), _jsx(Tbody, { children: items.map((item) => (_jsxs(Tr, { children: [_jsx(Td, { children: item.title }), _jsx(Td, { children: item.quantity }), _jsx(Td, { children: item.isForSelfUse ? "—" : formatPaise(item.price ?? 0) }), _jsx(Td, { children: item.isForSelfUse ? (_jsx(Badge, { variant: "secondary", children: "Self use" })) : item.linkedProductId ? (_jsx(Badge, { variant: "success", children: "Linked" })) : (_jsx(Badge, { variant: "default", children: "Unlinked" })) }), _jsxs(Td, { className: "flex gap-[var(--appkit-space-2)]", children: [!item.isForSelfUse &&
+                                            (item.linkedProductId ? (_jsx(Button, { size: "sm", variant: "ghost", isLoading: unlinkItemMutation.isPending, onClick: () => unlinkItemMutation.mutate(item.id), children: "Unlink" })) : (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => setLinkTarget({ itemId: item.id, title: item.title }), children: "Create pre-order link" }))), _jsx(Button, { size: "sm", variant: "ghost", action: ACTIONS.SHIPMENT["delete"], isLoading: deleteItemMutation.isPending, onClick: () => deleteItemMutation.mutate(item.id), children: "Delete" })] })] }, item.id))) })] })), meta && meta.totalPages > 1 && (_jsx(Pagination, { currentPage: page, totalPages: meta.totalPages, onPageChange: setPage, pageSize: pageSize, onPageSizeChange: (size) => {
+                    setPageSize(size);
+                    setPage(1);
+                } })), _jsx(Modal, { isOpen: showBulkImport, onClose: () => setShowBulkImport(false), title: "Bulk import items", size: "lg", children: _jsxs(Stack, { gap: "md", children: [_jsxs(Text, { variant: "secondary", children: ["Paste one item per line: ", _jsx("code", { children: "title, quantity, price" }), " \u2014 use ", _jsx("code", { children: "self" }), " instead of a price for self-use items. Up to 500 rows per lot."] }), _jsx(Textarea, { value: bulkText, onChange: (e) => setBulkText(e.target.value), rows: 10, placeholder: "Charizard PSA9, 1, 25000\nBooster box (assorted), 6, 3500\nMy personal grail card, 1, self" }), _jsxs(Text, { variant: "secondary", children: [parsedBulkRows.length, " row(s) parsed"] }), _jsxs(Button, { isLoading: bulkImportMutation.isPending, disabled: parsedBulkRows.length === 0, onClick: () => bulkImportMutation.mutate(), children: ["Import ", parsedBulkRows.length, " item(s)"] })] }) }), linkTarget && (_jsx(ShipmentItemLinkModal, { shipmentId: shipmentId, lotId: lotId, itemId: linkTarget.itemId, itemTitle: linkTarget.title, isOpen: !!linkTarget, onClose: () => setLinkTarget(null), onLinked: () => refetch() }))] }));
+}

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

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * 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 declare function AdminShipmentProjectionsView(): React.JSX.Element;

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

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Button, Div, Heading, Modal, Pagination, Select, Skeleton, Stack, Table, Thead, Tbody, Tr, Th, Td, Text } from "../../../ui";
+import { useShipmentProjections, useShipmentItems } from "../hooks/useShipments";
+import { ShipmentItemLinkModal } from "./ShipmentItemLinkModal";
+import { formatPaise } from "../../../utils/number.formatter";
+import { sortBy } from "../../../constants/sort";
+const SORT_OPTIONS = [
+    { value: sortBy("projectedProfitPaise", "DESC"), label: "Highest projected profit" },
+    { value: sortBy("projectedProfitPaise", "ASC"), label: "Lowest projected profit" },
+    { value: sortBy("projectedRevenuePaise", "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() {
+    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: lot.lotName }), _jsx(Td, { children: lot.itemCount }), _jsx(Td, { children: formatPaise(lot.totalLandedCostPaise) }), _jsx(Td, { children: formatPaise(lot.projectedRevenuePaise) }), _jsx(Td, { className: lot.projectedProfitPaise < 0 ? "text-error" : "text-success", children: formatPaise(lot.projectedProfitPaise) }), _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 }))] }));
+}
+function LotItemPickerModal({ lot, onClose, onLinked, }) {
+    const { items, refetch } = useShipmentItems(lot.shipmentId, lot.id, { pageSize: 100 });
+    const [linkTarget, setLinkTarget] = React.useState(null);
+    const unlinkedItems = items.filter((item) => !item.isForSelfUse && !item.linkedProductId);
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { isOpen: !linkTarget, onClose: onClose, title: `Link an item from "${lot.lotName}"`, size: "md", children: _jsx(Stack, { gap: "sm", children: unlinkedItems.length === 0 ? (_jsx(Text, { variant: "secondary", children: "No unlinked, resale-eligible items in this lot." })) : (unlinkedItems.map((item) => (_jsxs(Div, { layout: "flex", align: "center", justify: "between", children: [_jsx(Text, { children: item.title }), _jsx(Button, { size: "sm", onClick: () => setLinkTarget({ itemId: item.id, title: item.title }), children: "Link" })] }, item.id)))) }) }), linkTarget && (_jsx(ShipmentItemLinkModal, { shipmentId: lot.shipmentId, lotId: lot.id, itemId: linkTarget.itemId, itemTitle: linkTarget.title, isOpen: !!linkTarget, onClose: () => {
+                    setLinkTarget(null);
+                    onClose();
+                }, onLinked: () => {
+                    refetch();
+                    onLinked();
+                } }))] }));
+}

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

@@ -0,0 +1,8 @@
+import React from "react";
+import type { ListingLayoutProps } from "../../../ui";
+export interface AdminShipmentsViewProps extends ListingLayoutProps {
+    getRowHref?: (row: {
+        id: string;
+    }) => string;
+}
+export declare function AdminShipmentsView({ children, ...props }: AdminShipmentsViewProps): React.JSX.Element;