@mohasinac/appkit 4.71.0 → 4.71.2

package/dist/ui/components/Modal.js

@@ -1,14 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { createPortal } from "react-dom";
-import { motion, AnimatePresence, useReducedMotion } from "motion/react";
 import { Heading } from "./Typography.js";
 import { Button } from "./Button.js";
 import { ActionRow } from "./ActionRow.js";
-import { SPRING_GENTLE } from "../../tokens/motion.js";
 import { useHandMode } from "../../_internal/client/hand-mode/index.js";
-import { OverlayContext } from "./overlay-context.js";
+import { DialogShell } from "./dialog-shell.js";
 const SIZE_CLASSES = {
     sm: "appkit-modal__panel--sm",
     md: "appkit-modal__panel--md",
@@ -19,9 +16,19 @@ const SIZE_CLASSES = {
 export function Modal({ isOpen, open, onClose, title, children, size = "md", showCloseButton = true, actions, className = "", }) {
     const visible = open ?? isOpen ?? false;
     const { hand } = useHandMode();
-    const titleId = React.useId();
-    const panelRef = React.useRef(null);
-    const previousFocusRef = React.useRef(null);
+    /*
+     * 🛑 `useState(false)` + `useEffect`, NOT `typeof document === "undefined"`
+     * at render time — same fix, same root cause, as `Drawer.tsx` (found
+     * 2026-11-02 via a real, reproducible hydration mismatch site-wide). See
+     * that file's comment for the full explanation: branching on `document`
+     * directly makes the server render `null` and the client's FIRST render
+     * (before hydration settles) render the full portal, which is exactly
+     * what hydration compares and rejects. Kept even though
+     * `@radix-ui/react-portal` carries its own mount guard — redundant is
+     * fine, dropping it unverified is how the bug comes back.
+     */
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => setMounted(true), []);
     React.useEffect(() => {
         if (!visible) {
             return;
@@ -32,48 +39,12 @@ export function Modal({ isOpen, open, onClose, title, children, size = "md", sho
             document.body.style.overflow = previousOverflow;
         };
     }, [visible]);
-    React.useEffect(() => {
-        if (visible) {
-            previousFocusRef.current = document.activeElement;
-            requestAnimationFrame(() => panelRef.current?.focus());
-            return;
-        }
-        previousFocusRef.current?.focus();
-    }, [visible]);
-    const handleKeyDown = (event) => {
-        if (event.key === "Escape") {
-            onClose();
-            return;
-        }
-        if (event.key !== "Tab") {
-            return;
-        }
-        const panel = panelRef.current;
-        if (!panel) {
-            return;
-        }
-        const focusable = Array.from(panel.querySelectorAll('a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"])'));
-        if (!focusable.length) {
-            return;
-        }
-        const first = focusable[0];
-        const last = focusable[focusable.length - 1];
-        if (event.shiftKey && document.activeElement === first) {
-            event.preventDefault();
-            last.focus();
-        }
-        else if (!event.shiftKey && document.activeElement === last) {
-            event.preventDefault();
-            first.focus();
-        }
-    };
-    const reduced = useReducedMotion();
-    if (typeof document === "undefined") {
+    if (!mounted) {
         return null;
     }
-    return createPortal(_jsx(OverlayContext.Provider, { value: true, children: _jsx(AnimatePresence, { children: visible && (_jsxs(motion.div, { className: "appkit-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, onKeyDown: handleKeyDown, initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, "data-section": "modal-div-561", children: [_jsx("div", { className: "appkit-modal__backdrop", "aria-hidden": "true", onClick: onClose }), _jsxs(motion.div, { ref: panelRef, tabIndex: -1, className: ["appkit-modal__panel", SIZE_CLASSES[size], className]
-                            .filter(Boolean)
-                            .join(" "), initial: reduced ? false : { opacity: 0, scale: 0.95, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.95, y: 8 }, transition: SPRING_GENTLE, "data-section": "modal-div-562", children: [(title || showCloseButton) && (_jsxs("div", { className: hand === "left" ? "appkit-modal__header flex-row-reverse" : "appkit-modal__header", "data-section": "modal-div-563", children: [title ? (_jsx(Heading, { level: 2, id: titleId, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", "data-section": "modal-div-564", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] })] })) }) }), document.body);
+    return (_jsxs(DialogShell, { open: visible, onClose: onClose, dialogLabel: typeof title === "string" ? title : "Dialog", wrapperClassName: "appkit-modal", overlayClassName: "appkit-modal__backdrop", contentClassName: ["appkit-modal__panel", SIZE_CLASSES[size], className]
+            .filter(Boolean)
+            .join(" "), children: [(title || showCloseButton) && (_jsxs("div", { className: hand === "left" ? "appkit-modal__header flex-row-reverse" : "appkit-modal__header", "data-section": "modal-div-563", children: [title ? (_jsx(Heading, { level: 2, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", "data-section": "modal-div-564", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] }));
 }
 /**
  * A dialog's action row.

package/dist/ui/components/Modal.style.css

@@ -15,6 +15,14 @@
   backdrop-filter: blur(4px);
 }
 
+.appkit-modal__backdrop[data-state="open"] {
+  animation: appkit-modal-backdrop-in 0.15s ease forwards;
+}
+
+.appkit-modal__backdrop[data-state="closed"] {
+  animation: appkit-modal-backdrop-out 0.15s ease forwards;
+}
+
 .appkit-modal__panel {
   position: relative;
   width: 100%;
@@ -26,9 +34,23 @@
   background: var(--appkit-color-surface);
   box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.45);
   border: 1px solid var(--appkit-color-border);
+}
+
+.appkit-modal__panel[data-state="open"] {
   animation: appkit-modal-fade-up 0.15s ease forwards;
 }
 
+.appkit-modal__panel[data-state="closed"] {
+  animation: appkit-modal-fade-down 0.15s ease forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .appkit-modal__backdrop,
+  .appkit-modal__panel {
+    animation: none;
+  }
+}
+
 .dark .appkit-modal__panel {
   background: var(--appkit-color-surface);
   border-color: var(--appkit-color-border);
@@ -104,3 +126,24 @@
     transform: translateY(0);
   }
 }
+
+@keyframes appkit-modal-fade-down {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@keyframes appkit-modal-backdrop-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes appkit-modal-backdrop-out {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}

package/dist/ui/components/PaginatedSelect.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode } from "react";
-import type { QuickFieldDef } from "../../features/shell/QuickFormDrawer";
+import type { QuickFieldDef } from "../types/quick-field";
 import type { FirestoreDocument, FormValues } from "../../schemas/types";
 export interface PaginatedSelectOption<V = string> {
     value: V;

package/dist/ui/components/QuickCreateModal.js

@@ -11,6 +11,9 @@ export function QuickCreateModal({ isOpen, title, onSave, onSaved, onCancel, chi
     const [busy, setBusy] = React.useState(false);
     const titleId = React.useId();
     const panelRef = React.useRef(null);
+    // Same SSR-safe-portal fix as Drawer.tsx/Modal.tsx — see that file's comment.
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => setMounted(true), []);
     React.useEffect(() => {
         if (!isOpen)
             return;
@@ -42,7 +45,7 @@ export function QuickCreateModal({ isOpen, title, onSave, onSaved, onCancel, chi
             setBusy(false);
         }
     };
-    if (!isOpen || typeof document === "undefined")
+    if (!isOpen || !mounted)
         return null;
     const saving = busy || isSaving;
     return createPortal(_jsxs(Div, { className: "appkit-quick-create-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [_jsx(Div, { className: "appkit-quick-create-modal__backdrop", "aria-hidden": "true", onClick: () => !saving && onCancel() }), _jsxs(Div, { ref: panelRef, tabIndex: -1, className: "appkit-quick-create-modal__panel", children: [_jsxs(Div, { className: "appkit-quick-create-modal__header", children: [_jsx(Heading, { level: 2, id: titleId, className: "appkit-quick-create-modal__title", children: title }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onCancel, "aria-label": "Close", disabled: saving, children: "\u00D7" })] }), _jsx(Div, { className: "appkit-quick-create-modal__body", children: children }), _jsxs(ActionRow, { align: "end", gap: "md", className: "appkit-quick-create-modal__footer", anchor: fullPageHref ? (_jsx(TextLink, { variant: "none", href: fullPageHref, target: "_blank", rel: "noreferrer", className: "appkit-quick-create-modal__full-link", children: "Add more details \u2192" })) : undefined, children: [_jsx(Button, { variant: "ghost", type: "button", onClick: onCancel, disabled: saving, children: cancelLabel }), _jsx(Button, { variant: "primary", type: "button", onClick: handleSave, disabled: saving || saveDisabled, isLoading: saving, children: saveLabel })] })] })] }), document.body);

package/dist/ui/components/RecordDetailModal.js

@@ -14,7 +14,7 @@ import { Div } from "./Div.js";
 import { Modal } from "./Modal.js";
 import { Row, Stack } from "./Layout.js";
 import { Text } from "./Typography.js";
-import { MediaImage } from "../../features/media/MediaImage.js";
+import { MediaImage } from "./MediaImage.js";
 export function RecordDetailModal({ isOpen, onClose, title, badges, description, fields, items, extra, metadata, footer, }) {
     const hasMetadata = Boolean(metadata && Object.keys(metadata).length > 0);
     return (_jsx(Modal, { isOpen: isOpen, onClose: onClose, title: title, children: _jsxs(Stack, { gap: "md", children: [badges && badges.length > 0 && (_jsx(Row, { gap: "sm", align: "center", wrap: true, children: badges.map((b) => (_jsx(Badge, { variant: b.variant ?? "default", children: b.label }, b.label))) })), description && (_jsx(Div, { rounded: "lg", padding: "sm", surface: "muted", border: "default", children: _jsx(Text, { size: "sm", children: description }) })), fields && fields.length > 0 && (_jsx(Stack, { gap: "xs", children: fields.map((f) => (_jsxs(Row, { justify: "between", gap: "md", children: [_jsx(Text, { size: "sm", color: "muted", children: f.label }), _jsx(Text, { size: "sm", weight: "medium", className: "text-right", children: f.value })] }, f.label))) })), items && items.entries.length > 0 && (_jsxs(Stack, { gap: "xs", children: [_jsxs(Text, { size: "xs", weight: "semibold", color: "muted", children: [items.heading, " (", items.entries.length, ")"] }), _jsx(Div, { className: "divide-y divide-[var(--appkit-color-border)] border border-[var(--appkit-color-border)]", rounded: "lg", children: items.entries.map((entry, i) => (_jsxs(Row, { gap: "sm", align: "center", justify: "between", paddingY: "y-xs-tall", padding: "x-sm", children: [_jsxs(Row, { gap: "sm", align: "center", className: "min-w-0", children: [_jsx(Div, { className: "h-10 w-10 shrink-0", rounded: "md", overflow: "hidden", children: _jsx(MediaImage, { src: entry.image, alt: entry.title, size: "thumbnail" }) }), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [entry.href ? (_jsx(Anchor, { href: entry.href, tone: "brand", size: "sm", weight: "medium", children: entry.title })) : (_jsx(Text, { size: "sm", weight: "medium", className: "truncate", children: entry.title })), entry.subtitle && (_jsx(Text, { size: "xs", color: "muted", children: entry.subtitle }))] })] }), entry.trailing && (_jsx(Text, { size: "sm", weight: "medium", className: "shrink-0", children: entry.trailing }))] }, `${entry.title}-${i}`))) })] })), extra, hasMetadata && (_jsxs(Div, { rounded: "lg", padding: "sm", surface: "muted", border: "default", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", className: "mb-1", children: "Details" }), _jsx(Code, { size: "xs", className: "block whitespace-pre-wrap font-mono", children: JSON.stringify(metadata, null, 2) })] })), footer && _jsx(ActionRow, { align: "end", children: footer })] }) }));

package/dist/ui/components/RowActionMenu.js

@@ -1,58 +1,18 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
+import React from "react";
+import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
 import { MoreHorizontal } from "lucide-react";
 import { Button } from "./Button.js";
 import { Span } from "./Typography.js";
-// Defining modules, not the sibling barrel — Root Cause #18. `ui/index.ts` and
-// `react/index.ts` re-exported into each other, which is the whole of
-// `audit-import-cycles` component 1: an 18-module knot held together entirely
-// by barrel hops, none of which needed the barrel.
-import { useKeyPress } from "../../react/hooks/useKeyPress.js";
+const ALIGN_MAP = {
+    left: "start",
+    right: "end",
+};
 export function RowActionMenu({ actions, align = "right", }) {
-    const [open, setOpen] = useState(false);
-    const [pos, setPos] = useState(null);
-    const wrapperRef = useRef(null);
-    const dropdownRef = useRef(null);
-    const [mounted, setMounted] = useState(false);
-    useEffect(() => setMounted(true), []);
-    useKeyPress("Escape", () => setOpen(false), { enabled: open });
-    // Close on outside click — exclude both trigger wrapper and portal dropdown
-    useEffect(() => {
-        if (!open)
-            return;
-        const handler = (e) => {
-            const t = e.target;
-            if (!wrapperRef.current?.contains(t) && !dropdownRef.current?.contains(t)) {
-                setOpen(false);
-            }
-        };
-        document.addEventListener("mousedown", handler);
-        return () => document.removeEventListener("mousedown", handler);
-    }, [open]);
-    const handleToggle = useCallback(() => {
-        if (!open && wrapperRef.current) {
-            const rect = wrapperRef.current.getBoundingClientRect();
-            const top = rect.bottom + 4;
-            setPos(align === "right"
-                ? { top, right: window.innerWidth - rect.right }
-                : { top, left: rect.left });
-        }
-        setOpen((v) => !v);
-    }, [open, align]);
-    const dropdown = open && pos && mounted
-        ? createPortal(_jsx("div", { ref: dropdownRef, role: "menu", className: "appkit-row-action-menu__dropdown", style: {
-                position: "fixed",
-                zIndex: "var(--appkit-z-confirm)",
-                top: pos.top,
-                ...(pos.right !== undefined ? { right: pos.right } : { left: pos.left }),
-            }, onClick: (e) => e.stopPropagation(), children: actions.map((action, idx) => (_jsxs("div", { children: [action.separator && idx > 0 ? (_jsx("div", { className: "appkit-row-action-menu__separator" })) : null, _jsxs(Button, { type: "button", role: "menuitem", variant: "ghost", disabled: action.disabled, onClick: () => {
-                            if (action.disabled)
-                                return;
-                            action.onClick();
-                            setOpen(false);
-                        }, className: `appkit-row-action-menu__item ${action.destructive ? "appkit-row-action-menu__item--destructive" : ""} ${action.disabled ? "opacity-40 cursor-not-allowed" : ""}`, children: [action.icon ? (_jsx(Span, { className: "appkit-row-action-menu__icon", children: action.icon })) : null, action.label] })] }, `${action.label}-${idx}`))) }), document.body)
-        : null;
-    return (_jsxs("div", { ref: wrapperRef, className: "appkit-row-action-menu", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { type: "button", variant: "ghost", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": open, onClick: handleToggle, className: "appkit-row-action-menu__trigger", children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1.5 }) }), dropdown] }));
+    return (_jsxs(RadixDropdownMenu.Root, { children: [_jsx(RadixDropdownMenu.Trigger, { asChild: true, children: _jsx(Button, { type: "button", variant: "ghost", "aria-label": "Row actions", className: "appkit-row-action-menu appkit-row-action-menu__trigger", onClick: (e) => e.stopPropagation(), children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1.5 }) }) }), _jsx(RadixDropdownMenu.Portal, { children: _jsx(RadixDropdownMenu.Content, { className: "appkit-row-action-menu__dropdown", align: ALIGN_MAP[align], sideOffset: 4, onClick: (e) => e.stopPropagation(), children: actions.map((action, idx) => (_jsxs(React.Fragment, { children: [action.separator && idx > 0 ? (_jsx(RadixDropdownMenu.Separator, { className: "appkit-row-action-menu__separator" })) : null, _jsxs(RadixDropdownMenu.Item, { disabled: action.disabled, onSelect: () => {
+                                    if (action.disabled)
+                                        return;
+                                    action.onClick();
+                                }, className: `appkit-row-action-menu__item ${action.destructive ? "appkit-row-action-menu__item--destructive" : ""}`, children: [action.icon ? (_jsx(Span, { className: "appkit-row-action-menu__icon", children: action.icon })) : null, action.label] })] }, `${action.label}-${idx}`))) }) })] }));
 }

package/dist/ui/components/RowActionMenu.style.css

@@ -11,15 +11,14 @@
 }
 
 .appkit-row-action-menu__dropdown {
-  position: absolute;
   z-index: var(--appkit-z-confirm);
-  margin-top: 0.25rem;
   min-width: 160px;
   border-radius: 0.75rem;
   border: 1px solid var(--appkit-color-border);
   background: var(--appkit-color-surface);
   padding-block: 0.375rem;
   box-shadow: var(--appkit-shadow-xl);
+  outline: none;
 }
 
 :is(.dark) .appkit-row-action-menu__dropdown {
@@ -27,12 +26,19 @@
   background: var(--appkit-color-surface);
 }
 
-.appkit-row-action-menu__dropdown--left {
-  left: 0;
+.appkit-row-action-menu__dropdown[data-state="open"] {
+  animation: appkit-row-action-menu-in 0.12s ease forwards;
 }
 
-.appkit-row-action-menu__dropdown--right {
-  right: 0;
+@media (prefers-reduced-motion: reduce) {
+  .appkit-row-action-menu__dropdown {
+    animation: none;
+  }
+}
+
+@keyframes appkit-row-action-menu-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .appkit-row-action-menu__separator {
@@ -54,9 +60,12 @@
   text-align: left;
   font-size: 0.875rem;
   color: var(--appkit-color-zinc-700);
+  cursor: pointer;
+  outline: none;
 }
 
-.appkit-row-action-menu__item:hover {
+.appkit-row-action-menu__item:hover,
+.appkit-row-action-menu__item[data-highlighted] {
   background: var(--appkit-color-surface-hover);
 }
 
@@ -64,15 +73,22 @@
   color: var(--appkit-color-zinc-100);
 }
 
-:is(.dark) .appkit-row-action-menu__item:hover {
+:is(.dark) .appkit-row-action-menu__item:hover,
+:is(.dark) .appkit-row-action-menu__item[data-highlighted] {
   background: var(--appkit-color-slate-800);
 }
 
+.appkit-row-action-menu__item[data-disabled] {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 .appkit-row-action-menu__item--destructive {
   color: var(--appkit-color-error);
 }
 
-.appkit-row-action-menu__item--destructive:hover {
+.appkit-row-action-menu__item--destructive:hover,
+.appkit-row-action-menu__item--destructive[data-highlighted] {
   background: var(--appkit-color-error-surface);
 }
 
@@ -80,7 +96,8 @@
   color: var(--appkit-color-rose-400);
 }
 
-:is(.dark) .appkit-row-action-menu__item--destructive:hover {
+:is(.dark) .appkit-row-action-menu__item--destructive:hover,
+:is(.dark) .appkit-row-action-menu__item--destructive[data-highlighted] {
   background: rgba(127, 29, 29, 0.4);
 }
 
@@ -89,3 +106,40 @@
   width: 1rem;
   flex-shrink: 0;
 }
+
+/*
+ * `QuickEditMenu.tsx` (features/admin) — a separate, still hand-rolled
+ * dropdown (not Radix, no portal), previously styled by BORROWING these
+ * same `appkit-row-action-menu__*` classes. That coupling broke when
+ * `RowActionMenu.tsx` above moved to Radix DropdownMenu (2026-11-05):
+ * Radix owns its own portal/popper positioning, so `__dropdown` lost its
+ * `position: absolute`/`margin-top`, and the `--left`/`--right` variants
+ * were deleted as genuinely dead FOR RowActionMenu — but QuickEditMenu's
+ * non-portaled dropdown still needs exactly that positioning. Own
+ * namespace from here on so the two can evolve independently; CSS
+ * is otherwise identical to what `__dropdown`/`__item` used to be.
+ */
+.appkit-quick-edit-menu__dropdown {
+  position: absolute;
+  z-index: var(--appkit-z-confirm);
+  margin-top: 0.25rem;
+  min-width: 160px;
+  border-radius: 0.75rem;
+  border: 1px solid var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  padding-block: 0.375rem;
+  box-shadow: var(--appkit-shadow-xl);
+}
+
+:is(.dark) .appkit-quick-edit-menu__dropdown {
+  border-color: var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+}
+
+.appkit-quick-edit-menu__dropdown--left {
+  left: 0;
+}
+
+.appkit-quick-edit-menu__dropdown--right {
+  right: 0;
+}

package/dist/ui/components/SideDrawer.style.css

@@ -43,22 +43,17 @@
   position: relative;
 }
 
-/* 3-px brand-gradient rule at the very top of the drawer */
-.appkit-side-drawer__header::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-  background: linear-gradient(
-    to right,
-    var(--appkit-color-primary-700) 0%,
-    var(--appkit-color-primary)      55%,
-    var(--appkit-color-secondary-400) 100%
-  );
-  pointer-events: none;
-}
+/*
+ * 🛑 REMOVED 2026-11-05 — the 3px multi-hue gradient top-accent bar every
+ * drawer header carried via this `::before`. Same defect class already
+ * found and fixed on `AdminStatCard`/`DashboardStats`/GuideHub banners
+ * (owner's direct correction: a row of per-surface rainbow accents reads
+ * as decoration, not a design system). Those fixes landed on a ONE
+ * restrained, theme-safe treatment with NO top accent bar at all
+ * (`AdminStatCard.tsx`'s own comment: "no 3px top accent") — this
+ * component just hadn't been swept yet. Confirmed live on the Team/Users/
+ * Stores "view"-variant drawers before removal.
+ */
 
 .appkit-side-drawer__header--view {
   background: var(--appkit-color-surface);

package/dist/ui/components/SiteLogo.js

@@ -22,7 +22,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * className overrides on primitive components.
  */
 import { useId } from "react";
-import { MediaImage } from "../../features/media/MediaImage.js";
+import { MediaImage } from "./MediaImage.js";
 // Gradient ID prefix — made unique per instance via useId() to prevent
 // cross-SVG id conflicts when multiple SiteLogo components share the page.
 // An SVG <linearGradient> ID prefix, not a class — suffixed with useId()

package/dist/ui/components/SiteMark.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useId } from "react";
 import { getBrandName } from "../../core/brand-resolver.js";
-import { MediaImage } from "../../features/media/MediaImage.js";
+import { MediaImage } from "./MediaImage.js";
 // An SVG <linearGradient> ID prefix, not a class — suffixed with useId()
 // and referenced as fill="url(#…)".
 // audit-dead-css-ok: SVG gradient id, not a class

package/dist/ui/components/SpecTable.d.ts

@@ -4,7 +4,7 @@
  * ── 🛑 WHY THIS EXISTS: EIGHT BYTE-IDENTICAL COPIES ────────────────────────
  *
  * This exact `Dl` / `Row` / `Dt` / `Dd` composition was pasted at eight call
- * sites — `ProductDetailPageView`, `AuctionDetailPageView`,
+ * sites — `ProductDetailPageView`, `CollectorDropDetailPageView`,
  * `ClassifiedDetailPageView`, `DigitalCodeDetailPageView`,
  * `LiveItemDetailPageView`, `PreOrderDetailPageView`, `BrandDetailPageView`
  * and `CustomSectionTabContent` — with the same variants and the same

package/dist/ui/components/SplitTile.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Anchor } from "./Anchor.js";
 import { Div } from "./Div.js";
 import { Heading, Span } from "./Typography.js";
-import { MediaImage } from "../../features/media/MediaImage.js";
+import { MediaImage } from "./MediaImage.js";
 /**
  * D3 — two real options, side by side, each a real photo and a real count.
  *

package/dist/ui/components/dialog-shell.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+export interface DialogShellProps {
+    open: boolean;
+    onClose: () => void;
+    /**
+     * The dialog's accessible name, independent of whatever visible heading
+     * the caller renders inside `children`. Radix requires a `Dialog.Title`;
+     * this keeps that requirement decoupled from each caller's own visual
+     * header so no caller ends up with two titles on screen.
+     */
+    dialogLabel: string;
+    wrapperClassName: string;
+    overlayClassName: string;
+    contentClassName: string;
+    contentRef?: React.Ref<HTMLDivElement>;
+    onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement>;
+    children: React.ReactNode;
+}
+/**
+ * Shared Radix Dialog composition for `Modal`, `ConfirmDeleteModal`, and
+ * `Button`'s internal confirmation dialog — the only three overlay surfaces
+ * that actually render anywhere in this app (Phase 3a measurement: every
+ * `<Tooltip`/`<Dropdown`/`<Menu` hit in the repo was dead or belonged to a
+ * different library). Owns focus trap, Escape, outside-click, and portal
+ * mounting so each caller's own component stops hand-rolling those.
+ *
+ * Callers keep their existing BEM classes on the wrapper/overlay/content —
+ * only who owns `role`/`aria-modal`/focus changes, not the DOM class names,
+ * so existing CSS needs only `[data-state]` animation variants added, not a
+ * rewrite.
+ */
+export declare function DialogShell({ open, onClose, dialogLabel, wrapperClassName, overlayClassName, contentClassName, contentRef, onKeyDownCapture, children, }: DialogShellProps): React.JSX.Element;

package/dist/ui/components/dialog-shell.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixDialog from "@radix-ui/react-dialog";
+import { OverlayContext } from "./overlay-context.js";
+/**
+ * Shared Radix Dialog composition for `Modal`, `ConfirmDeleteModal`, and
+ * `Button`'s internal confirmation dialog — the only three overlay surfaces
+ * that actually render anywhere in this app (Phase 3a measurement: every
+ * `<Tooltip`/`<Dropdown`/`<Menu` hit in the repo was dead or belonged to a
+ * different library). Owns focus trap, Escape, outside-click, and portal
+ * mounting so each caller's own component stops hand-rolling those.
+ *
+ * Callers keep their existing BEM classes on the wrapper/overlay/content —
+ * only who owns `role`/`aria-modal`/focus changes, not the DOM class names,
+ * so existing CSS needs only `[data-state]` animation variants added, not a
+ * rewrite.
+ */
+export function DialogShell({ open, onClose, dialogLabel, wrapperClassName, overlayClassName, contentClassName, contentRef, onKeyDownCapture, children, }) {
+    return (_jsx(RadixDialog.Root, { open: open, onOpenChange: (next) => {
+            if (!next)
+                onClose();
+        }, children: _jsx(RadixDialog.Portal, { children: _jsx(OverlayContext.Provider, { value: true, children: _jsxs("div", { className: wrapperClassName, children: [_jsx(RadixDialog.Overlay, { className: overlayClassName }), _jsxs(RadixDialog.Content, { ref: contentRef, className: contentClassName, "aria-describedby": undefined, onKeyDownCapture: onKeyDownCapture, children: [_jsx(RadixDialog.Title, { className: "appkit-sr-only", children: dialogLabel }), children] })] }) }) }) }));
+}

package/dist/ui/components/form-field-registry.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+/**
+ * Runtime renderer registry for FormField.tsx's "image"/"media" branches.
+ *
+ * FormField.tsx is a ui/ primitive, but the image/video upload widgets it
+ * renders for those two types are a features/media concern (crop, trim,
+ * YouTube embed, etc.) -- a static import there is the edge that put
+ * react-advanced-cropper's CSS into appkit's server graph (see FormField.tsx's
+ * own header comment). This registry lets FormField call a renderer without
+ * importing from features/ at all; features/media registers itself into it.
+ *
+ * Right-sized for "2 branches, same default behavior at every call site" --
+ * a per-call-site render-prop would force every one of FormField's existing
+ * callers to start passing a slot just to keep working.
+ */
+export interface FormFieldImageRendererProps {
+    currentImage: string | undefined;
+    onUpload: (file: File) => Promise<string>;
+    onChange: (url: string) => void;
+    label: string | undefined;
+    helperText: string | undefined;
+    captureSource: "file-only" | "camera-only" | "both";
+    accept: string | undefined;
+    maxSizeMB: number | undefined;
+}
+export interface FormFieldMediaRendererProps {
+    label: string;
+    value: string;
+    onChange: (url: string) => void;
+    onUpload: (file: File) => Promise<string>;
+    disabled: boolean;
+    helperText: string | undefined;
+    captureSource: "file-only" | "camera-only" | "both";
+    captureMode: "photo" | "video" | "both";
+    accept: string | undefined;
+    maxSizeMB: number | undefined;
+}
+export type FormFieldImageRenderer = (props: FormFieldImageRendererProps) => ReactNode;
+export type FormFieldMediaRenderer = (props: FormFieldMediaRendererProps) => ReactNode;
+export declare function registerFormFieldRenderer(type: "image", renderer: FormFieldImageRenderer): void;
+export declare function registerFormFieldRenderer(type: "media", renderer: FormFieldMediaRenderer): void;
+export declare function getFormFieldRenderer(type: "image"): FormFieldImageRenderer | undefined;
+export declare function getFormFieldRenderer(type: "media"): FormFieldMediaRenderer | undefined;

package/dist/ui/components/form-field-registry.js

@@ -0,0 +1,7 @@
+const registry = new Map();
+export function registerFormFieldRenderer(type, renderer) {
+    registry.set(type, renderer);
+}
+export function getFormFieldRenderer(type) {
+    return registry.get(type);
+}

package/dist/ui/components/surface-tokens.d.ts

@@ -60,7 +60,7 @@ export declare const PADDING_MAP: {
     readonly inline: "px-[var(--appkit-space-4)] py-[var(--appkit-space-3)]";
     readonly inlineSm: "px-[var(--appkit-space-3)] py-[var(--appkit-space-2)]";
     readonly inlineLg: "px-[var(--appkit-space-6)] py-[var(--appkit-space-4)]";
-    /** Tiny pill chip — `px-1.5 py-0.5`. Used by Bundle/PrizeDraw badge labels. */
+    /** Tiny pill chip — `px-1.5 py-0.5`. Used by Bundle/Clearance badge labels. */
     readonly "chip-2xs": "px-[var(--appkit-space-1-5)] py-[var(--appkit-space-0-5)]";
     readonly "y-2xs": "py-[var(--appkit-space-1)]";
     readonly "y-xs": "py-[var(--appkit-space-2)]";
@@ -89,6 +89,8 @@ export declare const PADDING_MAP: {
     readonly "b-lg": "pb-[var(--appkit-space-6)]";
     readonly "b-xl": "pb-[var(--appkit-space-8)]";
     readonly "b-2xl": "pb-[var(--appkit-space-10)]";
+    /** Right-only — clears room for an absolutely-positioned icon cluster overlaid on a card's top-right corner. */
+    readonly "r-xl": "pr-[var(--appkit-space-14)]";
     readonly "y-2-5xl": "py-[var(--appkit-space-14)]";
     readonly "y-5xl": "py-[var(--appkit-space-20)]";
     readonly "y-6xl": "py-[var(--appkit-space-24)]";
@@ -190,7 +192,7 @@ export declare const PADDING_PRESETS: {
     readonly inline: "px-[var(--appkit-space-4)] py-[var(--appkit-space-3)]";
     readonly inlineSm: "px-[var(--appkit-space-3)] py-[var(--appkit-space-2)]";
     readonly inlineLg: "px-[var(--appkit-space-6)] py-[var(--appkit-space-4)]";
-    /** Tiny pill chip — `px-1.5 py-0.5`. Used by Bundle/PrizeDraw badge labels. */
+    /** Tiny pill chip — `px-1.5 py-0.5`. Used by Bundle/Clearance badge labels. */
     readonly "chip-2xs": "px-[var(--appkit-space-1-5)] py-[var(--appkit-space-0-5)]";
     readonly "y-2xs": "py-[var(--appkit-space-1)]";
     readonly "y-xs": "py-[var(--appkit-space-2)]";
@@ -219,6 +221,8 @@ export declare const PADDING_PRESETS: {
     readonly "b-lg": "pb-[var(--appkit-space-6)]";
     readonly "b-xl": "pb-[var(--appkit-space-8)]";
     readonly "b-2xl": "pb-[var(--appkit-space-10)]";
+    /** Right-only — clears room for an absolutely-positioned icon cluster overlaid on a card's top-right corner. */
+    readonly "r-xl": "pr-[var(--appkit-space-14)]";
     readonly "y-2-5xl": "py-[var(--appkit-space-14)]";
     readonly "y-5xl": "py-[var(--appkit-space-20)]";
     readonly "y-6xl": "py-[var(--appkit-space-24)]";

package/dist/ui/components/surface-tokens.js

@@ -73,7 +73,7 @@ export const PADDING_MAP = {
     inline: "px-[var(--appkit-space-4)] py-[var(--appkit-space-3)]",
     inlineSm: "px-[var(--appkit-space-3)] py-[var(--appkit-space-2)]",
     inlineLg: "px-[var(--appkit-space-6)] py-[var(--appkit-space-4)]",
-    /** Tiny pill chip — `px-1.5 py-0.5`. Used by Bundle/PrizeDraw badge labels. */
+    /** Tiny pill chip — `px-1.5 py-0.5`. Used by Bundle/Clearance badge labels. */
     "chip-2xs": "px-[var(--appkit-space-1-5)] py-[var(--appkit-space-0-5)]",
     // Vertical-only presets — the variant-catalogue codemod migrates raw
     // `py-N` / `py-N md:py-M` className tokens into these names.
@@ -106,6 +106,8 @@ export const PADDING_MAP = {
     "b-lg": "pb-[var(--appkit-space-6)]",
     "b-xl": "pb-[var(--appkit-space-8)]",
     "b-2xl": "pb-[var(--appkit-space-10)]",
+    /** Right-only — clears room for an absolutely-positioned icon cluster overlaid on a card's top-right corner. */
+    "r-xl": "pr-[var(--appkit-space-14)]",
     // Fill-in vertical sizes.
     "y-2-5xl": "py-[var(--appkit-space-14)]",
     "y-5xl": "py-[var(--appkit-space-20)]",