@mohasinac/appkit 4.71.0 → 4.72.0

package/dist/ui/components/FormField.js

@@ -1,34 +1,59 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useId } from "react";
+import { useContext, useEffect, useId, useState } from "react";
 import { Input } from "./Input.js";
 import { Select } from "./Select.js";
 import { Textarea } from "./Textarea.js";
 import { Text } from "./Typography.js";
 import { FieldLabel } from "../forms/FieldLabel.js";
+import { FormShellContext } from "../forms/FormShell.js";
 /*
- * 🛑 FROM THE DEFINING MODULES, NOT the `features/media` barrel.
+ * 🛑 NO STATIC IMPORT OF ImageUpload/MediaUploadField HERE, EVER.
+ *
+ * This is a UI PRIMITIVE; those two are a features/media concern (crop,
+ * trim, YouTube embed). A prior static import reaching into the
+ * features/media barrel pulled in ImageEditor, which imports
+ * `react-advanced-cropper/dist/style.css` — Node cannot load CSS at any
+ * path, so that one line put a third-party stylesheet in appkit's SERVER
+ * graph: server.js -> GoogleReviewsSection -> ui/index -> FormField ->
+ * features/media/index -> ImageEditor -> …/style.css, which is what made
+ * `serverExternalPackages` fail with ERR_UNKNOWN_FILE_EXTENSION. It was
+ * also one of the edges in the 43-module `ui` <-> `features/media` import
+ * cycle audit-import-cycles.mjs tracks.
  *
- * This is a UI PRIMITIVE reaching into a feature barrel, and the barrel pulls
- * the whole media surface — including ImageEditor, which imports
- * `react-advanced-cropper/dist/style.css`. Node cannot load CSS at any path,
- * so that one line put a third-party stylesheet in appkit's SERVER graph:
- *   server.js -> GoogleReviewsSection -> ui/index -> FormField
- *             -> features/media/index -> ImageEditor -> …/style.css
- * which is what made `serverExternalPackages` fail with
- * ERR_UNKNOWN_FILE_EXTENSION.
+ * getFormFieldRenderer() calls into a runtime registry instead — zero
+ * STATIC imports from features/.
  *
- * It is also one of the edges in the 43-module `ui` <-> `features/media`
- * import cycle that audit-import-cycles.mjs tracks — a UI primitive and a
- * feature importing each other. Root Cause #18: import from the file that
- * defines the symbol.
+ * 🛑 THE REGISTRY IS FILLED BY A DYNAMIC import() BELOW, NOT BY SOME OTHER
+ * MODULE'S TOP-LEVEL SIDE EFFECT. That was the first design (wired from
+ * client.ts, then from ui/index.ts) and it does not survive Turbopack in
+ * the browser: confirmed live with a planted console.log that a barrel
+ * re-exporting FormField — even one with its OWN explicit top-level call to
+ * the registration function — never executes that call when the browser
+ * resolves FormField through it. A direct Node ESM import of the same
+ * compiled file runs it correctly, so this is specifically a bundler
+ * barrel-transparency optimization (consistent with this package's
+ * `"sideEffects": false`), not a module-evaluation-order bug. A dynamic
+ * `import()` called from inside a function body cannot be elided by that
+ * optimization — see ensureMediaFormFieldRenderers below.
  */
-import { ImageUpload } from "../../features/media/upload/ImageUpload.js";
-import { MediaUploadField } from "../../features/media/upload/MediaUploadField.js";
-import { FormShellContext } from "../forms/FormShell.js";
+import { getFormFieldRenderer } from "./form-field-registry.js";
+import { normalizeError } from "../../errors/normalize.js";
+let mediaRenderersPromise = null;
+/**
+ * Loads features/media's register-form-field-renderers module (which
+ * populates the registry as its own side effect) at most once, and caches
+ * the in-flight promise so concurrent FormField instances share one load.
+ */
+function ensureMediaFormFieldRenderers() {
+    if (!mediaRenderersPromise) {
+        mediaRenderersPromise = import("../../features/media/upload/register-form-field-renderers.js");
+    }
+    return mediaRenderersPromise;
+}
 const CARD_CLASS = "appkit-form-field appkit-form-field--card";
 const BASE_CLASS = "appkit-form-field";
-export function FormField({ label, name, card = false, type = "text", value = "", onChange, onBlur, error: errorProp, touched: touchedProp, placeholder, required = false, disabled = false, autoComplete, rows, hint, helpText, options = [], onUpload, captureSource, captureMode, accept, maxSizeMB, }) {
+export function FormField({ label, name, card = false, type = "text", value = "", min, max, onChange, onBlur, error: errorProp, touched: touchedProp, placeholder, required = false, disabled = false, autoComplete, rows, hint, helpText, options = [], onUpload, captureSource, captureMode, accept, maxSizeMB, }) {
     // Falls back to FormShellContext (the same context FieldInput/FieldSelect
     // read) whenever the caller doesn't pass an explicit error/touched prop —
     // an explicit prop always wins, preserving back-compat for the handful of
@@ -57,6 +82,35 @@ export function FormField({ label, name, card = false, type = "text", value = ""
     const inputId = `field-${name}-${reactId}`;
     const errorId = `${inputId}-error`;
     const describedBy = showError ? errorId : undefined;
+    // Kicks off the dynamic import the first time this instance needs a
+    // renderer the registry doesn't have yet, then re-renders once it
+    // resolves. A no-op on every render after the registry is populated —
+    // `ensureMediaFormFieldRenderers()` caches its promise, so N mounted
+    // FormField instances share ONE dynamic import, not one each.
+    const [, forceRerender] = useState(0);
+    const needsMediaRenderer = (type === "image" || type === "media") && !!onUpload;
+    useEffect(() => {
+        if (!needsMediaRenderer)
+            return;
+        const alreadyRegistered = type === "image" ? getFormFieldRenderer("image") : getFormFieldRenderer("media");
+        if (alreadyRegistered)
+            return;
+        let cancelled = false;
+        ensureMediaFormFieldRenderers()
+            .then(() => {
+            if (!cancelled)
+                forceRerender((n) => n + 1);
+        })
+            .catch((err) => {
+            const normalized = normalizeError(err);
+            if (process.env.NODE_ENV !== "production") {
+                console.error("[FormField] failed to load the image/media renderer:", normalized.message);
+            }
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [needsMediaRenderer, type]);
     function handleFieldChange(newValue) {
         onChange?.(newValue);
         if (showError)
@@ -67,11 +121,24 @@ export function FormField({ label, name, card = false, type = "text", value = ""
         onBlur?.();
     }
     if (type === "image" && onUpload) {
-        return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-505", children: [_jsx("div", { "aria-disabled": disabled || undefined, className: disabled ? "pointer-events-none opacity-60" : undefined, children: _jsx(ImageUpload, { currentImage: value || undefined, onUpload: onUpload, onChange: (url) => handleFieldChange(url), label: label ? `${label}${required ? " *" : ""}` : undefined, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", accept: accept, maxSizeMB: maxSizeMB }) }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
+        const ImageRenderer = getFormFieldRenderer("image");
+        if (!ImageRenderer) {
+            // Brief and expected on first mount — the useEffect above just kicked
+            // off the dynamic import; a failure already logged to console.error
+            // there. Not an error state: a form can render several times before
+            // the registry is populated, same as any other lazy-loaded chunk.
+            return _jsx("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-505" });
+        }
+        return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-505", children: [_jsx("div", { "aria-disabled": disabled || undefined, className: disabled ? "pointer-events-none opacity-60" : undefined, children: _jsx(ImageRenderer, { currentImage: value || undefined, onUpload: onUpload, onChange: (url) => handleFieldChange(url), label: label ? `${label}${required ? " *" : ""}` : undefined, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", accept: accept, maxSizeMB: maxSizeMB }) }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
     }
     if (type === "media" && onUpload) {
-        return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-506", children: [_jsx(MediaUploadField, { label: `${label || name}${required ? " *" : ""}`, value: value, onChange: (url) => handleFieldChange(url), onUpload: onUpload, disabled: disabled, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", captureMode: captureMode ?? "both", accept: accept, maxSizeMB: maxSizeMB }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
+        const MediaRenderer = getFormFieldRenderer("media");
+        if (!MediaRenderer) {
+            // See the "image" branch above — same brief, expected lazy-load gap.
+            return _jsx("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-506" });
+        }
+        return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-506", children: [_jsx(MediaRenderer, { label: `${label || name}${required ? " *" : ""}`, value: value, onChange: (url) => handleFieldChange(url), onUpload: onUpload, disabled: disabled, helperText: hint ?? helpText, captureSource: captureSource ?? "file-only", captureMode: captureMode ?? "both", accept: accept, maxSizeMB: maxSizeMB }), showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
     }
-    return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-507", children: [label ? (_jsx(FieldLabel, { htmlFor: inputId, required: required, children: label })) : null, type === "select" ? (_jsx(Select, { id: inputId, name: name, value: value, onChange: (event) => handleFieldChange(event.target.value), onBlur: handleFieldBlur, disabled: disabled, options: options, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })) : type === "textarea" ? (_jsx(Textarea, { id: inputId, name: name, value: value, onChange: (event) => handleFieldChange(event.target.value), onBlur: handleFieldBlur, placeholder: placeholder, disabled: disabled, rows: rows, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })) : (_jsx(Input, { id: inputId, name: name, type: type, value: value, onChange: (event) => handleFieldChange(event.target.value), onBlur: handleFieldBlur, placeholder: placeholder, disabled: disabled, autoComplete: autoComplete, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })), !showError && (hint || helpText) ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint ?? helpText })) : null, showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
+    return (_jsxs("div", { className: card ? CARD_CLASS : BASE_CLASS, "data-section": "formfield-div-507", children: [label ? (_jsx(FieldLabel, { htmlFor: inputId, required: required, children: label })) : null, type === "select" ? (_jsx(Select, { id: inputId, name: name, value: value, onChange: (event) => handleFieldChange(event.target.value), onBlur: handleFieldBlur, disabled: disabled, options: options, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })) : type === "textarea" ? (_jsx(Textarea, { id: inputId, name: name, value: value, onChange: (event) => handleFieldChange(event.target.value), onBlur: handleFieldBlur, placeholder: placeholder, disabled: disabled, rows: rows, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })) : (_jsx(Input, { id: inputId, name: name, type: type, value: value, min: min, max: max, onChange: (event) => handleFieldChange(event.target.value), onBlur: handleFieldBlur, placeholder: placeholder, disabled: disabled, autoComplete: autoComplete, "aria-required": required || undefined, "aria-invalid": showError || undefined, "aria-describedby": describedBy })), !showError && (hint || helpText) ? (_jsx(Text, { size: "sm", variant: "secondary", className: "appkit-form-field__hint", children: hint ?? helpText })) : null, showError ? (_jsx(Text, { id: errorId, size: "sm", variant: "error", className: "appkit-form-field__error", role: "alert", children: error })) : null] }));
 }
 export default FormField;

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

@@ -2,7 +2,7 @@ import React from "react";
 /**
  * 🛑 CONTRACT WITH THE STRUCTURED DATA — do not rename.
  *
- * The Product/Auction JSON-LD declares this exact selector in its paywalled
+ * The Product/Collector Drop JSON-LD declares this exact selector in its paywalled
  * content markup (`hasPart.cssSelector`, see `appkit/src/seo/json-ld.ts`), which
  * is what tells Google the page legitimately carries an `offers.price` that an
  * anonymous visitor cannot see. Rename this and the selector silently matches

package/dist/ui/components/GatedPrice.js

@@ -12,7 +12,7 @@ import { useCanSeePrices } from "../../react/hooks/useCanSeePrices.js";
 /**
  * 🛑 CONTRACT WITH THE STRUCTURED DATA — do not rename.
  *
- * The Product/Auction JSON-LD declares this exact selector in its paywalled
+ * The Product/Collector Drop JSON-LD declares this exact selector in its paywalled
  * content markup (`hasPart.cssSelector`, see `appkit/src/seo/json-ld.ts`), which
  * is what tells Google the page legitimately carries an `offers.price` that an
  * anonymous visitor cannot see. Rename this and the selector silently matches

package/dist/ui/components/ImageGallery.js

@@ -10,7 +10,7 @@ import { HorizontalScroller } from "./HorizontalScroller.js";
 // by barrel hops, none of which needed the barrel.
 import { useSwipe } from "../../react/hooks/useSwipe.js";
 import { useGesture } from "../../react/hooks/useGesture.js";
-import { MediaImage } from "../../features/media/MediaImage.js";
+import { MediaImage } from "./MediaImage.js";
 import { FLEX_CENTER, THEMED_BG_SECONDARY, THEMED_BG_TERTIARY, THEMED_BORDER, THEMED_TEXT_MUTED, THEMED_TEXT_PRIMARY, THEMED_TEXT_SECONDARY, } from "../../_internal/shared/styles/themed.js";
 const themed = {
     bgSecondary: THEMED_BG_SECONDARY,

package/dist/ui/components/ImageLightbox.js

@@ -6,7 +6,7 @@ import { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut, RotateCw, Maximize2, Min
 import { Button } from "./Button.js";
 import { Div } from "./Div.js";
 import { Text, Span } from "./Typography.js";
-import { MediaImage } from "../../features/media/MediaImage.js";
+import { MediaImage } from "./MediaImage.js";
 import { getYouTubeVideoId } from "../../utils/media-url.js";
 const CLS_CLOSE_BTN = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-error-solid text-error-on-solid flex items-center justify-center";
 const MIN_ZOOM = 10;
@@ -18,6 +18,9 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, showTh
     const [rotation, setRotation] = useState(0);
     const [isFullscreen, setIsFullscreen] = useState(false);
     const overlayRef = useRef(null);
+    // Same SSR-safe-portal fix as Drawer.tsx/Modal.tsx — see that file's comment.
+    const [mounted, setMounted] = useState(false);
+    useEffect(() => setMounted(true), []);
     // Sync external activeIndex and reset transforms
     useEffect(() => {
         if (activeIndex !== null && activeIndex >= 0) {
@@ -141,7 +144,7 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, showTh
         if (isOpen)
             requestAnimationFrame(() => overlayRef.current?.focus());
     }, [isOpen]);
-    if (!isOpen || typeof document === "undefined")
+    if (!isOpen || !mounted)
         return null;
     const image = images[currentIndex];
     const hasMultiple = images.length > 1;

package/dist/ui/components/ImageMosaic.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MediaImage } from "../../features/media/MediaImage.js";
+import { MediaImage } from "./MediaImage.js";
 import { Div } from "./Div.js";
 /** How many tiles the mosaic draws. More than five reads as a grid, not a hero. */
 const MOSAIC_MAX = 5;

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

@@ -0,0 +1,68 @@
+import React from "react";
+import type { DetailViewShellProps } from "./DetailViewShell";
+/**
+ * The one shell every listing detail page uses.
+ *
+ * Replaces `ProductDetailView`, `CollectorDropDetailView` and
+ * `PreOrderDetailView` — three files, 202 lines, ~22 render-prop slots each.
+ *
+ * ## 🛑 They were NOT duplicates, and the distinction matters
+ *
+ * A 2026-11-08 note called those three "near-identical duplicates, nobody knows
+ * why there are two" of their `*DetailPageView` counterparts. That was wrong:
+ * each was a SHELL and its counterpart was the PAGE that filled its slots. The
+ * error came from comparing filenames instead of reading files, and it nearly
+ * caused the shells to be deleted as redundant.
+ *
+ * What they actually were is three parameterisations of ONE layout:
+ *
+ * | | Product | CollectorDrop | PreOrder |
+ * |---|---|---|---|
+ * | layout | `grid-3` | `grid-3` | `grid-2` |
+ * | third slot | `renderActions`, sticky | `renderBidForm`, desktop-only | — |
+ * | afterMain | sublisting + group | mobile bid + sublisting | sublisting |
+ * | belowFold | tabs + bundle + related | tabs + bidHistory + related | tabs + related |
+ *
+ * Every difference above is a VALUE. So they are one component with props,
+ * which is the same argument the listing-type collapse makes one level up.
+ *
+ * ## Why slots are arrays rather than named props
+ *
+ * `renderBundleSection`, `renderBidHistory` and `renderGroupSection` were three
+ * names for "another thing below the tabs". Naming each one forced a new prop —
+ * and a new shell — every time a listing type wanted a different section. An
+ * ordered array takes any number of sections and needs no new prop, so adding a
+ * section to a type is a config change rather than an edit here.
+ *
+ * Falsy entries are dropped, so a caller can pass a conditional straight in
+ * without assembling the array itself.
+ */
+export interface ListingDetailShellProps extends Omit<DetailViewShellProps, "mainSlots" | "belowFold" | "layout" | "afterMain"> {
+    /** `grid-3` gives gallery | info | aside. `grid-2` drops the aside column. */
+    layout?: "grid-2" | "grid-3";
+    renderGallery?: (isLoading: boolean) => React.ReactNode;
+    renderInfo?: (isLoading: boolean) => React.ReactNode;
+    /**
+     * The third column — a buy bar, an action rail, a bid form. Ignored when
+     * `layout` is `grid-2`.
+     */
+    renderAside?: () => React.ReactNode;
+    /**
+     * Hide the aside below `lg`. Used where the same control is rendered again
+     * in `afterMain` for mobile (the collector-drop bid form does this), so the
+     * two would otherwise both show on a phone.
+     */
+    asideDesktopOnly?: boolean;
+    /** Sections between the main grid and the below-fold stack, in order. */
+    afterMain?: Array<React.ReactNode | false | null | undefined>;
+    /** Sections below the fold, in order — tabs, history, related, anything. */
+    belowFold?: Array<React.ReactNode | false | null | undefined>;
+    renderSublistingSection?: () => React.ReactNode;
+    renderGroupSection?: () => React.ReactNode;
+    renderTabs?: () => React.ReactNode;
+    renderRelated?: () => React.ReactNode;
+    /** Sticky aside on desktop. Only meaningful with `grid-3`. */
+    stickyActionRail?: boolean;
+    stickyRailOffset?: string;
+}
+export declare function ListingDetailShell({ layout, renderGallery, renderInfo, renderAside, asideDesktopOnly, afterMain, belowFold, renderSublistingSection, renderGroupSection, renderTabs, renderRelated, isLoading, stickyActionRail, stickyRailOffset, ...rest }: ListingDetailShellProps): React.JSX.Element;

package/dist/ui/components/ListingDetailShell.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { DetailViewShell } from "./DetailViewShell.js";
+import { Div } from "./Div.js";
+/** Drop falsy slots so callers can pass conditionals directly. */
+function present(nodes = []) {
+    return nodes.filter(Boolean);
+}
+export function ListingDetailShell({ layout = "grid-3", renderGallery, renderInfo, renderAside, asideDesktopOnly = false, afterMain, belowFold, renderSublistingSection, renderGroupSection, renderTabs, renderRelated, isLoading = false, stickyActionRail = true, stickyRailOffset = "top-[var(--header-height,0px)]", ...rest }) {
+    const asideNode = layout === "grid-3" ? renderAside?.() : undefined;
+    const mainSlots = [
+        renderGallery?.(isLoading),
+        renderInfo?.(isLoading),
+    ];
+    if (layout === "grid-3") {
+        mainSlots.push(asideDesktopOnly ? (_jsx(Div, { className: "hidden lg:block", children: asideNode }, "aside")) : (asideNode));
+    }
+    const after = present([
+        renderSublistingSection?.(),
+        renderGroupSection?.(),
+        ...(afterMain ?? []),
+    ]);
+    const below = present([renderTabs?.(), ...(belowFold ?? []), renderRelated?.()]);
+    return (_jsx(DetailViewShell, { portal: "public", ...rest, layout: layout, isLoading: isLoading, stickyActionRail: layout === "grid-3" ? stickyActionRail : false, stickyRailOffset: stickyRailOffset, mainSlots: mainSlots, 
+        /*
+         * `undefined`, not an empty fragment, when there is nothing — the shell
+         * renders a wrapper for a truthy `afterMain`, and an empty fragment
+         * would leave an empty bordered band on every page that has no
+         * sublisting or group section.
+         */
+        afterMain: after.length ? _jsx(React.Fragment, { children: after }) : undefined, belowFold: below }));
+}

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

@@ -7,7 +7,52 @@ export interface ListingToolbarToggle {
     label: string;
     active: boolean;
     onChange: (next: boolean) => void;
+    /**
+     * Present only on an admin-ADDED toggle (built via `buildCustomToggles`
+     * below) — the `CustomFieldDef.key` the edit-mode remove control needs.
+     * A hand-coded, built-in toggle never sets this, and only a toggle that
+     * sets it gets a remove (×) affordance when `editMode` is on.
+     */
+    customKey?: string;
+}
+/** A boolean field the owning view has already confirmed is real and
+ * filterable — the closed vocabulary an admin picks from, same trust
+ * boundary `AdminFilterFacets.AvailableFacet` already uses. */
+export interface AvailableToggleField {
+    key: string;
+    label: string;
 }
+/**
+ * 3B item 1b, toolbars subsystem (2026-11-03, extended 2026-11-05).
+ * `toggles` is a plain data array each caller hand-constructs, unlike
+ * `renderFilterPanel`'s hand-written JSX, so admin hide/reorder needs no
+ * new derivation layer: `label` is already the toggle's stable identity
+ * (`key={t.label}` in this file's own render loop), so the SAME
+ * `field-visibility.ts` mechanism `fieldOrder`/`customFields` already use
+ * for forms applies here unchanged — just filter-then-sort the array a
+ * caller was going to pass anyway.
+ *
+ * `fields`/`fieldOrder` come straight from `useFieldVisibility(surfaceId)` —
+ * callers pass the same two values they already compute for any other
+ * SurfaceTemplate-driven part of the same view.
+ */
+export declare function applyToggleVisibility(toggles: ListingToolbarToggle[], fields: Record<string, boolean>, fieldOrder: string[]): ListingToolbarToggle[];
+/**
+ * 2026-11-05 — admin-DEFINED new toggles, built generically after all.
+ * The premise that blocked this ("a toggle needs a real `onChange` only
+ * the owning view can supply") turns out to be avoidable the same way
+ * `AdminFilterFacets`'s boolean facets already are: flipping a URL-table
+ * boolean value on a pre-declared, already-SIEVE_FIELDS-filterable key
+ * needs no bespoke per-field logic at all. `table` is the minimal shape
+ * every caller's `useUrlTable()`/`usePendingTable()` result already is.
+ */
+export declare function buildCustomToggles(customFields: {
+    key: string;
+    label: string;
+}[], table: {
+    get: (key: string) => string;
+    set: (key: string, value: string) => void;
+}): ListingToolbarToggle[];
 export interface ListingToolbarLabels {
     search?: string;
     filters?: string;
@@ -55,6 +100,16 @@ export interface ListingToolbarProps {
     onBulkClear?: () => void;
     /** Pill-style filter toggles rendered between view controls and extra */
     toggles?: ListingToolbarToggle[];
+    /**
+     * Admin-defined NEW toggles (2026-11-05). All three required together to
+     * show the "add toggle" control; omitted (the default) renders exactly
+     * as before this existed. `editMode` also gates a remove (×) affordance
+     * on any toggle carrying `customKey`.
+     */
+    editMode?: boolean;
+    availableToggleFields?: AvailableToggleField[];
+    onAddToggle?: (field: AvailableToggleField) => void;
+    onRemoveToggle?: (key: string) => void;
     /** Any extra action buttons placed after the view toggle */
     extra?: React.ReactNode;
     /** Overridable text labels for i18n */
@@ -78,4 +133,4 @@ export interface ListingToolbarProps {
     /** Accessible label for the collapse/expand control. Default "Toolbar". */
     collapseLabel?: string;
 }
-export declare function ListingToolbar({ filterCount, onFiltersClick, searchValue, searchPlaceholder, onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view, onViewChange, hideViewToggle, showTableView, onResetAll, hasActiveState, bulkMode, bulkSelectedCount, bulkTotalCount, onBulkSelectAll, onBulkClear, toggles, extra, labels, className, dismissible, toolbarId, collapseLabel, }: ListingToolbarProps): React.JSX.Element;
+export declare function ListingToolbar({ filterCount, onFiltersClick, searchValue, searchPlaceholder, onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view, onViewChange, hideViewToggle, showTableView, onResetAll, hasActiveState, bulkMode, bulkSelectedCount, bulkTotalCount, onBulkSelectAll, onBulkClear, toggles, editMode, availableToggleFields, onAddToggle, onRemoveToggle, extra, labels, className, dismissible, toolbarId, collapseLabel, }: ListingToolbarProps): React.JSX.Element;

package/dist/ui/components/ListingToolbar.js

@@ -1,13 +1,53 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 import { usePathname } from "next/navigation.js";
 import { CheckSquare, Search, SlidersHorizontal, LayoutGrid, List, Table2, RotateCcw, Square, } from "lucide-react";
 import { SortDropdown } from "./SortDropdown.js";
 import { Div } from "./Div.js";
 import { Span } from "./Typography.js";
+import { IconButton } from "./IconButton.js";
+import { Icon } from "./Icon.js";
+import { FieldSelect } from "../forms/FieldSelect.js";
 import { StickyToolbar } from "./StickyToolbar.js";
+import { sortByFieldOrder, filterByFieldVisibility } from "../../features/shell/field-ui-meta.js";
 const CLS_CLEAR_LINK = "text-xs hover:text-error text-[var(--appkit-color-text-muted)] transition-colors";
 const CLS_CLEAR_ICON_BTN = "flex shrink-0 items-center justify-center rounded-lg border border-[var(--appkit-color-border)] p-1.5 sm:p-2 text-[var(--appkit-color-text-muted)] hover:bg-surface-hover hover:text-error dark:hover:text-error transition-colors";
+/**
+ * 3B item 1b, toolbars subsystem (2026-11-03, extended 2026-11-05).
+ * `toggles` is a plain data array each caller hand-constructs, unlike
+ * `renderFilterPanel`'s hand-written JSX, so admin hide/reorder needs no
+ * new derivation layer: `label` is already the toggle's stable identity
+ * (`key={t.label}` in this file's own render loop), so the SAME
+ * `field-visibility.ts` mechanism `fieldOrder`/`customFields` already use
+ * for forms applies here unchanged — just filter-then-sort the array a
+ * caller was going to pass anyway.
+ *
+ * `fields`/`fieldOrder` come straight from `useFieldVisibility(surfaceId)` —
+ * callers pass the same two values they already compute for any other
+ * SurfaceTemplate-driven part of the same view.
+ */
+export function applyToggleVisibility(toggles, fields, fieldOrder) {
+    const getKey = (t) => t.label;
+    return sortByFieldOrder(filterByFieldVisibility(toggles, fields, getKey), fieldOrder, getKey);
+}
+/**
+ * 2026-11-05 — admin-DEFINED new toggles, built generically after all.
+ * The premise that blocked this ("a toggle needs a real `onChange` only
+ * the owning view can supply") turns out to be avoidable the same way
+ * `AdminFilterFacets`'s boolean facets already are: flipping a URL-table
+ * boolean value on a pre-declared, already-SIEVE_FIELDS-filterable key
+ * needs no bespoke per-field logic at all. `table` is the minimal shape
+ * every caller's `useUrlTable()`/`usePendingTable()` result already is.
+ */
+export function buildCustomToggles(customFields, table) {
+    return customFields.map((f) => ({
+        label: f.label,
+        active: table.get(f.key) === "true",
+        onChange: (next) => table.set(f.key, next ? "true" : ""),
+        customKey: f.key,
+    }));
+}
 const DEFAULT_LABELS = {
     search: "Search",
     filters: "Filters",
@@ -24,10 +64,14 @@ const DEFAULT_LABELS = {
 const VIEW_BTN_BASE = "p-1.5 sm:p-2 transition-colors";
 const VIEW_BTN_ACTIVE = "bg-[var(--appkit-color-primary)] text-white";
 const VIEW_BTN_INACTIVE = "hover:bg-surface-hover text-[var(--appkit-color-text-muted)]";
-export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue = "", searchPlaceholder = "Search…", onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view = "grid", onViewChange, hideViewToggle = false, showTableView = false, onResetAll, hasActiveState = false, bulkMode = false, bulkSelectedCount = 0, bulkTotalCount = 0, onBulkSelectAll, onBulkClear, toggles, extra, labels, className = "", dismissible = true, toolbarId, collapseLabel = "Toolbar", }) {
+export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue = "", searchPlaceholder = "Search…", onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view = "grid", onViewChange, hideViewToggle = false, showTableView = false, onResetAll, hasActiveState = false, bulkMode = false, bulkSelectedCount = 0, bulkTotalCount = 0, onBulkSelectAll, onBulkClear, toggles, editMode = false, availableToggleFields, onAddToggle, onRemoveToggle, extra, labels, className = "", dismissible = true, toolbarId, collapseLabel = "Toolbar", }) {
     const l = { ...DEFAULT_LABELS, ...labels };
     const pathname = usePathname();
     const resolvedToolbarId = toolbarId ?? `listing-toolbar${pathname ? `:${pathname}` : ""}`;
+    const [addingToggleKey, setAddingToggleKey] = React.useState("");
+    const canAddToggle = editMode && Boolean(onAddToggle) && Boolean(availableToggleFields?.length);
+    const existingCustomKeys = new Set((toggles ?? []).map((t) => t.customKey).filter(Boolean));
+    const remainingToggleFields = (availableToggleFields ?? []).filter((f) => !existingCustomKeys.has(f.key));
     const handleKeyDown = (e) => {
         if (onSearchKeyDown) {
             onSearchKeyDown(e);
@@ -39,7 +83,13 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
     return (_jsx(StickyToolbar, { dataTestId: "listing-toolbar", offset: "header", tone: "translucent", border: true, padding: "none", z: "above-toolbar", className: `py-3 px-3 sm:py-3.5 sm:px-4 shadow-sm ${className}`, dismissible: dismissible, id: resolvedToolbarId, label: collapseLabel, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2.5 sm:gap-3", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-3 py-1.5 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-surface-hover transition-colors", children: [allSelected
                                     ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary)]" })
-                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary)] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2 sm:shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-surface-hover transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary)] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
-                                    ? "border-transparent bg-[var(--appkit-color-primary)] text-white"
-                                    : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-surface-hover"}`, children: t.label }, t.label))) })), extra] })] }) }));
+                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary)] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex flex-wrap items-center gap-1.5 sm:gap-2 sm:shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-surface-hover transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary)] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsxs("div", { className: "relative inline-flex items-center", children: [_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
+                                            ? "border-transparent bg-[var(--appkit-color-primary)] text-white"
+                                            : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-surface-hover"}`, children: t.label }), editMode && t.customKey && onRemoveToggle ? (_jsx(IconButton, { "aria-label": `Remove toggle "${t.label}"`, icon: _jsx(Icon, { name: "close", size: "sm" }), size: "sm", variant: "ghost", onClick: () => onRemoveToggle(t.customKey) })) : null] }, t.label))) })), canAddToggle && remainingToggleFields.length > 0 && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(FieldSelect, { name: "newToolbarToggle", label: "Add toggle", value: addingToggleKey, options: remainingToggleFields.map((f) => ({ value: f.key, label: f.label })), onChange: setAddingToggleKey }), _jsx(IconButton, { "aria-label": "Add toggle", icon: _jsx(Icon, { name: "create", size: "sm" }), size: "sm", variant: "outline", disabled: !addingToggleKey, onClick: () => {
+                                        const field = remainingToggleFields.find((f) => f.key === addingToggleKey);
+                                        if (!field)
+                                            return;
+                                        onAddToggle?.(field);
+                                        setAddingToggleKey(remainingToggleFields.find((f) => f.key !== field.key)?.key ?? "");
+                                    } })] })), extra] })] }) }));
 }

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

@@ -0,0 +1,29 @@
+import { type ReactNode } from "react";
+export interface LiveEditableRegionProps {
+    /** The provider's own vocabulary — e.g. `"faq"`. Passed through to `ILiveEditProvider.save`. */
+    contentType: string;
+    id: string;
+    field: string;
+    /** The RAW, stored value — what gets edited and saved. */
+    value: string;
+    /**
+     * How to render `value` when not editing. Defaults to plain text. Pass
+     * this for content that goes through its own pipeline before display —
+     * e.g. FAQ answers run through `resolvePublishedCopy()` token
+     * substitution, and editing must act on the raw `{{token}}`-bearing
+     * text, not the substituted result.
+     */
+    renderValue?: (value: string) => ReactNode;
+}
+/**
+ * Point 7 of the overhaul brief. Outside edit mode (every buyer/seller
+ * session, and an admin who has not flipped the toggle) this renders
+ * `value` and NOTHING else — same markup a buyer gets, which is what makes
+ * the toggle double as a "does this content actually look the way I
+ * expect" check.
+ *
+ * Inside edit mode with no `liveEdit` provider registered, it renders a
+ * disabled pencil rather than a control that would silently do nothing —
+ * a provider-less install gets an honest "not wired yet", not a dead button.
+ */
+export declare function LiveEditableRegion({ contentType, id, field, value, renderValue }: LiveEditableRegionProps): import("react").JSX.Element;

package/dist/ui/components/LiveEditableRegion.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { normalizeError } from "../../errors/normalize.js";
+import { useEditMode } from "../../_internal/client/edit-mode/EditModeProvider.js";
+import { getClientLiveEditProvider } from "../../contracts/client-live-edit.js";
+import { useInlineTextEdit } from "../../react/hooks/useInlineRowEdit.js";
+import { Row, Stack } from "./Layout.js";
+import { Text } from "./Typography.js";
+import { IconButton } from "./IconButton.js";
+import { Textarea } from "./Textarea.js";
+import { Icon } from "./Icon.js";
+/**
+ * Point 7 of the overhaul brief. Outside edit mode (every buyer/seller
+ * session, and an admin who has not flipped the toggle) this renders
+ * `value` and NOTHING else — same markup a buyer gets, which is what makes
+ * the toggle double as a "does this content actually look the way I
+ * expect" check.
+ *
+ * Inside edit mode with no `liveEdit` provider registered, it renders a
+ * disabled pencil rather than a control that would silently do nothing —
+ * a provider-less install gets an honest "not wired yet", not a dead button.
+ */
+export function LiveEditableRegion({ contentType, id, field, value, renderValue }) {
+    const { editMode } = useEditMode();
+    const [saveError, setSaveError] = useState(null);
+    const providerRegistered = !!getClientLiveEditProvider();
+    const render = renderValue ?? ((v) => _jsx(Text, { children: v }));
+    const edit = useInlineTextEdit({
+        rowId: id,
+        field,
+        initialValue: value,
+        save: async (rowId, f, next) => {
+            setSaveError(null);
+            const provider = getClientLiveEditProvider();
+            if (!provider) {
+                setSaveError("No live-edit provider registered.");
+                throw new Error("liveEdit provider not registered");
+            }
+            await provider.save({ contentType, id: rowId, field: f, value: next });
+        },
+        onError: (err) => {
+            void normalizeError(err);
+            setSaveError("Could not save — please try again.");
+        },
+    });
+    if (!editMode) {
+        return _jsx(_Fragment, { children: render(value) });
+    }
+    if (!edit.isEditing) {
+        return (_jsxs(Row, { gap: "xs", align: "start", children: [render(edit.value), _jsx(IconButton, { size: "sm", "aria-label": `Edit ${field}`, onClick: edit.startEdit, disabled: !providerRegistered, title: providerRegistered ? undefined : "No live-edit provider registered for this install", children: _jsx(Icon, { name: "edit", size: "sm" }) })] }));
+    }
+    return (_jsxs(Stack, { gap: "xs", children: [_jsx(Textarea, { value: edit.draft, onChange: (e) => edit.setDraft(e.target.value), disabled: edit.isSaving, rows: 3 }), _jsxs(Row, { gap: "xs", children: [_jsx(IconButton, { size: "sm", "aria-label": "Save", onClick: edit.commitEdit, disabled: edit.isSaving, children: _jsx(Icon, { name: "confirm", size: "sm" }) }), _jsx(IconButton, { size: "sm", "aria-label": "Cancel", onClick: edit.cancelEdit, disabled: edit.isSaving, children: _jsx(Icon, { name: "cancel", size: "sm" }) })] }), saveError ? _jsx(Text, { size: "xs", color: "error", children: saveError }) : null] }));
+}

package/dist/ui/components/MediaAvatar.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MediaImage } from "./MediaImage.js";
+import { Div } from "./Div.js";
+const sizeClasses = {
+    sm: "w-8 h-8",
+    md: "w-10 h-10",
+    lg: "w-14 h-14",
+    xl: "w-20 h-20",
+};
+export function MediaAvatar({ src, alt, size = "md", className = "", }) {
+    return (_jsx(Div, { className: `relative ${sizeClasses[size]} overflow-hidden flex-shrink-0 ${className}`, rounded: "full", children: _jsx(MediaImage, { src: src, alt: alt, size: "avatar", objectFit: "cover", fill: true }) }));
+}
+export default MediaAvatar;