@mohasinac/appkit 4.70.0 → 4.71.2

package/dist/ui/chrome/BottomActionsContext.js

@@ -0,0 +1,198 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * BottomActionsContext
+ *
+ * Provides a context for registering page-level mobile action bars.
+ * Features call `useBottomActions` to push actions; the `<BottomActions>`
+ * layout component reads this context and renders the bar above BottomNavbar.
+ *
+ * Supports two modes:
+ *  - Page mode: primary page actions (Add to Cart, Buy Now, Place Bid, etc.)
+ *  - Bulk mode: activated when sieveFilter("bulk.selectedCount", SIEVE_OP.GT, "0") — shows selection
+ *    count + custom bulk action buttons (Delete, Archive, Export, etc.)
+ *
+ * @example — product detail page
+ * ```tsx
+ * useBottomActions({
+ * actions: [
+ * { id: "wishlist", icon: <Heart className="w-4 h-4" />, label: t("wishlist"), variant: "ghost", onClick: handleWishlist },
+ * { id: "cart", label: t("addToCart"), variant: "outline", onClick: handleAddToCart },
+ * { id: "buy", label: t("buyNow"), variant: "primary", onClick: handleBuyNow },
+ * ],
+ * });
+ * ```
+ *
+ * @example — admin listing with bulk select
+ * ```tsx
+ * useBottomActions({
+ * bulk: {
+ * selectedCount: selectedIds.length,
+ * onClearSelection: () => setSelectedIds([]),
+ * actions: [
+ * { id: "delete", label: t("bulkDelete", { count: selectedIds.length }), variant: "danger", onClick: handleBulkDelete },
+ * ],
+ * },
+ * });
+ * ```
+ */
+import { createContext, useCallback, useContext, useMemo, useRef, useState, } from "react";
+import { sortByFieldOrder, filterByFieldVisibility } from "../../features/shell/field-ui-meta.js";
+/**
+ * 3B item 1b, bottom-bars subsystem. `BottomAction[]` is a plain data array
+ * each caller constructs, with a stable `id` (not a label, unlike
+ * `ListingToolbarToggle`) — the same shape `applyToggleVisibility`
+ * (`ui/components/ListingToolbar.tsx`) already handles for toolbar toggles,
+ * so admin hide/reorder needs no new derivation layer here either: filter
+ * then sort an array a caller was going to pass to `useBottomActions`/
+ * `BottomBulkConfig.actions` anyway, reusing the same `field-visibility.ts`
+ * `fields`/`fieldOrder` mechanism.
+ *
+ * Deliberately excludes admin-defined NEW actions, same reasoning as
+ * toolbars — a bulk action needs a real `onClick` tied to real behavior
+ * only the owning view can supply.
+ */
+// Generic over any `{id}`-keyed action array — `DataListingView.tsx`'s own
+// `BulkActionItem` (a different type, same shape) needs this too, and a
+// second copy for that one type would be the exact duplication this
+// mechanism elsewhere avoids by reusing one filter+sort function.
+export function applyBottomActionVisibility(actions, fields, fieldOrder) {
+    const getKey = (a) => a.id;
+    return sortByFieldOrder(filterByFieldVisibility(actions, fields, getKey), fieldOrder, getKey);
+}
+const EMPTY = { actions: [] };
+const BottomActionsContext = createContext(null);
+// --- Provider -----------------------------------------------------------------
+export function BottomActionsProvider({ children, }) {
+    const [state, setState] = useState(EMPTY);
+    // Callback refs — updated on every setActions call, so the component always
+    // dispatches the latest onClick regardless of when the state last diffed.
+    const actionCallbacksRef = useRef(new Map());
+    const bulkCallbacksRef = useRef(new Map());
+    const bulkClearRef = useRef(undefined);
+    // Stack of claimant ids, oldest first. The last entry owns the bar.
+    const claimsRef = useRef([]);
+    const [topClaimId, setTopClaimId] = useState(null);
+    const claim = useCallback((id) => {
+        if (claimsRef.current.includes(id))
+            return;
+        claimsRef.current = [...claimsRef.current, id];
+        setTopClaimId(id);
+    }, []);
+    const release = useCallback((id) => {
+        const next = claimsRef.current.filter((c) => c !== id);
+        if (next.length === claimsRef.current.length)
+            return;
+        claimsRef.current = next;
+        const newTop = next.length > 0 ? next[next.length - 1] : null;
+        setTopClaimId(newTop);
+        // Only blank the bar when nobody is left. Otherwise the newly-top
+        // consumer republishes on the very next effect pass, so clearing here
+        // would be a visible flicker of an empty bar.
+        if (newTop === null) {
+            actionCallbacksRef.current = new Map();
+            bulkCallbacksRef.current = new Map();
+            bulkClearRef.current = undefined;
+            setState(EMPTY);
+        }
+    }, []);
+    const setActions = useCallback((actions) => {
+        // Update callback map (always latest)
+        actionCallbacksRef.current = new Map(actions.map((a) => [a.id, a.onClick]));
+        // Update display state (strip onClick to avoid referential churn on stable data)
+        setState((prev) => ({
+            ...prev,
+            actions: actions.map(({ onClick: _onClick, ...rest }) => ({
+                ...rest,
+                onClick: _onClick, // kept for type compat, actual dispatch uses ref
+            })),
+        }));
+    }, []);
+    const setBulkConfig = useCallback((config) => {
+        if (config) {
+            bulkCallbacksRef.current = new Map(config.actions.map((a) => [a.id, a.onClick]));
+            bulkClearRef.current = config.onClearSelection;
+        }
+        else {
+            bulkCallbacksRef.current = new Map();
+            bulkClearRef.current = undefined;
+        }
+        setState((prev) => ({
+            ...prev,
+            bulk: config
+                ? {
+                    ...config,
+                    actions: config.actions.map(({ onClick: _onClick, ...rest }) => ({
+                        ...rest,
+                        onClick: _onClick,
+                    })),
+                }
+                : undefined,
+        }));
+    }, []);
+    const setInfoLabel = useCallback((infoLabel) => {
+        setState((prev) => ({ ...prev, infoLabel }));
+    }, []);
+    const setSecondaryLabel = useCallback((secondaryLabel) => {
+        setState((prev) => ({ ...prev, secondaryLabel }));
+    }, []);
+    const setInfoPanel = useCallback((infoPanel) => {
+        setState((prev) => ({ ...prev, infoPanel }));
+    }, []);
+    const setInfoOpenSignal = useCallback((infoOpenSignal) => {
+        setState((prev) => (prev.infoOpenSignal === infoOpenSignal ? prev : { ...prev, infoOpenSignal }));
+    }, []);
+    const setDesktopMode = useCallback((desktop) => {
+        setState((prev) => (prev.desktop === desktop ? prev : { ...prev, desktop }));
+    }, []);
+    const setCtaAnchorId = useCallback((ctaAnchorId) => {
+        setState((prev) => (prev.ctaAnchorId === ctaAnchorId ? prev : { ...prev, ctaAnchorId }));
+    }, []);
+    const clearAll = useCallback(() => {
+        actionCallbacksRef.current = new Map();
+        bulkCallbacksRef.current = new Map();
+        bulkClearRef.current = undefined;
+        setState(EMPTY);
+    }, []);
+    const value = useMemo(() => ({
+        state,
+        setActions,
+        actionCallbacksRef,
+        setBulkConfig,
+        bulkCallbacksRef,
+        bulkClearRef,
+        setInfoLabel,
+        setSecondaryLabel,
+        setInfoPanel,
+        setInfoOpenSignal,
+        setDesktopMode,
+        setCtaAnchorId,
+        clearAll,
+        claim,
+        release,
+        topClaimId,
+    }), [
+        state,
+        setActions,
+        setBulkConfig,
+        setInfoLabel,
+        setSecondaryLabel,
+        setInfoPanel,
+        setInfoOpenSignal,
+        setDesktopMode,
+        setCtaAnchorId,
+        clearAll,
+        claim,
+        release,
+        topClaimId,
+    ]);
+    return (_jsx(BottomActionsContext.Provider, { value: value, children: children }));
+}
+// --- Hook ---------------------------------------------------------------------
+export function useBottomActionsContext() {
+    const ctx = useContext(BottomActionsContext);
+    if (!ctx) {
+        throw new Error("useBottomActionsContext must be used within <BottomActionsProvider>");
+    }
+    return ctx;
+}

package/dist/ui/chrome/useBottomActions.d.ts

@@ -0,0 +1,37 @@
+import type React from "react";
+import { type BottomAction, type BottomActionsDesktopMode, type BottomBulkConfig } from "./BottomActionsContext";
+export interface UseBottomActionsOptions {
+    actions?: BottomAction[];
+    bulk?: BottomBulkConfig;
+    infoLabel?: string;
+    /** Rendered as its own row above infoLabel. See BottomActionsState.secondaryLabel. */
+    secondaryLabel?: string;
+    /**
+     * Expandable detail revealed above the bar when the infoLabel row is tapped.
+     * See BottomActionsState.infoPanel.
+     */
+    infoPanel?: React.ReactNode;
+    /** Bump to force `infoPanel` open once. See BottomActionsState.infoOpenSignal. */
+    infoOpenSignal?: number;
+    /**
+     * Whether the bar may also show on desktop. Defaults to "hidden" (mobile/tablet only),
+     * so pages that don't opt in behave exactly as before.
+     */
+    desktop?: BottomActionsDesktopMode;
+    /**
+     * `id` of this page's inline primary CTA. The floating action dock stays
+     * hidden until that element has been seen and scrolled out of view. Omit it
+     * and the dock appears as soon as there is something to show — which is what
+     * every bulk-selection screen wants.
+     */
+    ctaAnchorId?: string;
+    /**
+     * Set false to opt out entirely — no claim is taken, so this consumer is
+     * invisible to the stack and cannot displace whoever currently owns the
+     * bar. Load-bearing: `useFormBottomActions` is called unconditionally from
+     * `<Form>`, which mounts on ~75 surfaces, and a claim from each of those
+     * would push a listing's bulk bar off the stack for nothing.
+     */
+    enabled?: boolean;
+}
+export declare function useBottomActions(options?: UseBottomActionsOptions): void;

package/dist/ui/chrome/useBottomActions.js

@@ -0,0 +1,86 @@
+"use client";
+import { useEffect, useId, useRef } from "react";
+import { useBottomActionsContext, } from "./BottomActionsContext.js";
+export function useBottomActions(options = {}) {
+    const { setActions, setBulkConfig, setInfoLabel, setSecondaryLabel, setInfoPanel, setInfoOpenSignal, setDesktopMode, setCtaAnchorId, claim, release, topClaimId, } = useBottomActionsContext();
+    /*
+     * One bar, many potential claimants. `DataListingView` already holds it on
+     * ~70 admin screens, so a form opened in a drawer over a listing used to
+     * overwrite the listing's bar and blank it on close.
+     *
+     * Claim on mount, release on unmount. `isTop` gates every publish below, so
+     * a backgrounded consumer stops writing — and because `isTop` is a
+     * dependency of each effect, regaining the top re-publishes everything
+     * automatically. That is what restores the listing's bar when the form
+     * closes, with no cooperation needed from either side.
+     */
+    const enabled = options.enabled !== false;
+    const claimId = useId();
+    useEffect(() => {
+        if (!enabled)
+            return;
+        claim(claimId);
+        return () => release(claimId);
+    }, [claim, release, claimId, enabled]);
+    const isTop = enabled && topClaimId === claimId;
+    const actionsRef = useRef(options.actions ?? []);
+    actionsRef.current = options.actions ?? [];
+    const bulkRef = useRef(options.bulk);
+    bulkRef.current = options.bulk;
+    const actionKey = (options.actions ?? [])
+        .map(({ id, label, variant, badge, disabled, loading }) => `${id}|${label}|${variant}|${badge}|${disabled}|${loading}`)
+        .join(",");
+    const bulkCountKey = options.bulk
+        ? `${options.bulk.selectedCount}|${options.bulk.actions.map((a) => `${a.id}|${a.label}|${a.variant}|${a.badge}|${a.disabled}|${a.loading}`).join(",")}`
+        : "";
+    useEffect(() => {
+        if (!isTop)
+            return;
+        setActions(actionsRef.current);
+    }, [setActions, actionKey, isTop]);
+    useEffect(() => {
+        if (!isTop)
+            return;
+        setBulkConfig(bulkRef.current);
+    }, [setBulkConfig, bulkCountKey, isTop]);
+    useEffect(() => {
+        if (!isTop)
+            return;
+        setInfoLabel(options.infoLabel);
+    }, [setInfoLabel, options.infoLabel, isTop]);
+    useEffect(() => {
+        if (!isTop)
+            return;
+        setSecondaryLabel(options.secondaryLabel);
+    }, [setSecondaryLabel, options.secondaryLabel, isTop]);
+    // A ReactNode is a fresh object on every render, so it can't be a dependency
+    // without looping. Mirror it through a ref and re-publish whenever anything
+    // the panel actually derives from changes — callers pass `infoLabel`, which
+    // moves with the same data the panel shows.
+    const infoPanelRef = useRef(options.infoPanel);
+    infoPanelRef.current = options.infoPanel;
+    const hasInfoPanel = options.infoPanel != null;
+    useEffect(() => {
+        if (!isTop)
+            return;
+        setInfoPanel(infoPanelRef.current);
+    }, [setInfoPanel, hasInfoPanel, options.infoLabel, options.secondaryLabel, isTop]);
+    useEffect(() => {
+        if (!isTop)
+            return;
+        setInfoOpenSignal(options.infoOpenSignal);
+    }, [setInfoOpenSignal, options.infoOpenSignal, isTop]);
+    useEffect(() => {
+        if (!isTop)
+            return;
+        setDesktopMode(options.desktop);
+    }, [setDesktopMode, options.desktop, isTop]);
+    useEffect(() => {
+        if (!isTop)
+            return;
+        setCtaAnchorId(options.ctaAnchorId);
+    }, [setCtaAnchorId, options.ctaAnchorId, isTop]);
+    // NOTE: no clearAll() on unmount any more — `release()` above owns that, and
+    // only blanks the bar when the stack empties. Clearing here would flash an
+    // empty bar between a drawer closing and the listing behind it republishing.
+}

package/dist/ui/columns/cell-renderers.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { type BadgeVariant } from "../components/Badge";
 import { type StatusTone } from "./column-renderers";
 /**
  * The single tone→class map.
@@ -77,12 +78,16 @@ export declare function renderCountPill(count: number | null | undefined, opts?:
 /**
  * A listing type as its registry badge.
  *
- * Goes through `listingBadgeVariant()`, not `LISTING_BADGE_VARIANT[kind]` — the
- * accessor tolerates a non-`ListingType` string (a raw API value, a UI
- * sentinel like `"all"`) while the map itself stays exhaustively typed, so a
- * new listing type is a compile error there rather than a silent fallthrough.
+ * Takes the Badge variant pre-resolved rather than importing the
+ * listingType -> variant mapping function itself — that mapping is a
+ * products-feature concern (`listingBadgeVariant()` in
+ * `features/products/utils/listing-badge-variant.ts`), and a ui/ primitive
+ * reaching into features/ for it is exactly the cross-layer edge the
+ * appkit barrel-perf plan's Phase 4 removes. Callers resolve the variant
+ * themselves and pass it in.
  */
-export declare function renderTypeChip(listingType: string | null | undefined, opts?: {
+export declare function renderTypeChip(listingType: string | null | undefined, opts: {
+    variant: BadgeVariant;
     label?: string;
 }): React.ReactNode;
 export {};

package/dist/ui/columns/cell-renderers.js

@@ -4,9 +4,8 @@ import { Badge } from "../components/Badge.js";
 import { Row, Stack } from "../components/Layout.js";
 import { Div } from "../components/Div.js";
 import { Span, Text } from "../components/Typography.js";
-import { MediaImage } from "../../features/media/MediaImage.js";
+import { MediaImage } from "../components/MediaImage.js";
 import { getStatusTone, renderCurrency } from "./column-renderers.js";
-import { listingBadgeVariant } from "../../features/products/utils/listing-badge-variant.js";
 /**
  * The single tone→class map.
  *
@@ -124,13 +123,16 @@ export function renderCountPill(count, opts) {
 /**
  * A listing type as its registry badge.
  *
- * Goes through `listingBadgeVariant()`, not `LISTING_BADGE_VARIANT[kind]` — the
- * accessor tolerates a non-`ListingType` string (a raw API value, a UI
- * sentinel like `"all"`) while the map itself stays exhaustively typed, so a
- * new listing type is a compile error there rather than a silent fallthrough.
+ * Takes the Badge variant pre-resolved rather than importing the
+ * listingType -> variant mapping function itself — that mapping is a
+ * products-feature concern (`listingBadgeVariant()` in
+ * `features/products/utils/listing-badge-variant.ts`), and a ui/ primitive
+ * reaching into features/ for it is exactly the cross-layer edge the
+ * appkit barrel-perf plan's Phase 4 removes. Callers resolve the variant
+ * themselves and pass it in.
  */
 export function renderTypeChip(listingType, opts) {
     if (!listingType)
         return null;
-    return (_jsx(Badge, { variant: listingBadgeVariant(listingType), children: opts?.label ?? listingType }));
+    return _jsx(Badge, { variant: opts.variant, children: opts.label ?? listingType });
 }

package/dist/ui/columns/column-renderers.js

@@ -77,7 +77,6 @@ const STATUS_TONE_MAP = {
     success: "success",
     // warning
     pending: "warning",
-    processing: "warning",
     draft: "warning",
     low_stock: "warning",
     waitlisted: "warning",
@@ -104,6 +103,17 @@ const STATUS_TONE_MAP = {
     // info
     scheduled: "info",
     closed: "info",
+    /*
+     * 🛑 `processing` moved out of the `warning` group it shared with
+     * `pending`, 2026-11-05 (owner's direct correction) — two real payout
+     * lifecycle stages (not yet started vs. actively being worked on)
+     * rendered the identical amber badge in every generic status column,
+     * `/admin/payouts` and `/store/payouts` confirmed live. Matches the
+     * already-established "processing = info" convention this same tone
+     * already uses elsewhere (`ui/components/StatusBadge.tsx`'s own
+     * order/payment tone map).
+     */
+    processing: "info",
 };
 /** Map a raw status string to a semantic tone for badge coloring. */
 export function getStatusTone(status) {
@@ -131,13 +141,12 @@ const RESOURCE_ICON_MAP = {
     stores: "🏪",
     products: "📦",
     art: "🎨",
-    stickers: "🏷️",
     "live-items": "🔴",
     "digital-codes": "🔑",
     classified: "📋",
     "pre-orders": "🕓",
-    "prize-draws": "🎁",
-    auctions: "🔨",
+    "clearance": "🎁",
+    collectorDrops: "🔨",
     bundles: "🎀",
     bids: "🔨",
     orders: "🧾",

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

@@ -0,0 +1,37 @@
+import type { CustomFieldDef } from "../../features/shell/field-ui-meta";
+export type { CustomFieldDef } from "../../features/shell/field-ui-meta";
+/**
+ * The apply-side half of this subsystem. `AdminFilterFacets` renders the
+ * control and writes typed values into the view's own `pendingFilters`
+ * state, but that alone is cosmetic — `ListingViewConfig.buildFilters` is
+ * what decides which keys actually reach the Sieve query, and it has no way
+ * to know about a facet an admin added at runtime. Every call site's own
+ * `buildFilters` must fold this in (`parts.push(...buildAdminFacetFilters(...))`
+ * before `parts.join(",")`), or the control renders, accepts input, and
+ * silently filters nothing — the exact failure shape Root Cause #33/#62
+ * documents for a mismatched facet key, except self-inflicted by the UI
+ * itself rather than by a stale filterKeys/SIEVE_FIELDS mismatch.
+ */
+export declare function buildAdminFacetFilters(facets: CustomFieldDef[], pendingFilters: Record<string, string>): string[];
+/** A field the view's own author has declared legal to filter on. */
+export interface AvailableFacet {
+    key: string;
+    label: string;
+}
+export interface AdminFilterFacetsProps {
+    /** Admin-defined facets currently configured for this surface. */
+    facets: CustomFieldDef[];
+    pendingFilters: Record<string, string>;
+    setPendingFilters: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+    /** Edit-mode-only — fields the owning view says are legal to add a facet for. */
+    availableFacets: AvailableFacet[];
+    editMode: boolean;
+    onAddFacet?: (facet: CustomFieldDef) => void;
+    onRemoveFacet?: (key: string) => void;
+}
+/**
+ * Appended after a view's own `renderFilterPanel` output. Renders nothing
+ * when `facets` is empty and `editMode` is off — the unconfigured, default
+ * state every 3B-1b subsystem guarantees.
+ */
+export declare function AdminFilterFacets({ facets, pendingFilters, setPendingFilters, availableFacets, editMode, onAddFacet, onRemoveFacet, }: AdminFilterFacetsProps): import("react").JSX.Element | null;

package/dist/ui/components/AdminFilterFacets.js

@@ -0,0 +1,126 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * 3B item 1b, search/facets subsystem (2026-11-04).
+ *
+ * WHY THIS SHAPE, NOT A SCHEMA-DERIVED GENERATOR: every admin filter panel
+ * in this codebase is hand-written JSX (`ListingViewConfig.renderFilterPanel`
+ * — confirmed by reading `DataListingView.tsx` and `AdminOrdersView.tsx` in
+ * full), and `filterKeys: string[]` only tracks which URL params COUNT as
+ * active filters, it renders nothing. A true schema-derived generator (the
+ * `build-sections.tsx` equivalent for filter panels) would need every
+ * repository's `SIEVE_FIELDS` widened with rich per-field UI metadata
+ * (control kind, options, etc.) across ~50 files — its own large migration,
+ * not a quick wire-up.
+ *
+ * What ships here instead is real, bounded, and safe against this
+ * codebase's own documented failure mode (Root Cause #33/#62 — a filter key
+ * that does not match a real, backend-recognised field silently returns
+ * zero rows or filters nothing, with no error): an admin may ADD a filter
+ * control for any field the VIEW'S OWN AUTHOR already named as legal
+ * (`availableFacets`, passed by the view — the same "author already knows
+ * their own SIEVE_FIELDS" trust boundary `filterKeys` itself already uses),
+ * never a freely-typed field name. The control TYPE (text/select/boolean/
+ * date) is admin-chosen, reusing `CustomFieldDef` from `field-ui-meta.ts`
+ * verbatim — the exact same shape forms already use for custom fields, not
+ * a second type invented for this context.
+ *
+ * Hide/reorder of the resulting facet set uses the same `field-visibility.ts`
+ * mechanism as every other 3B-1b subsystem. An unconfigured surface renders
+ * nothing extra — the view's own hand-written `renderFilterPanel` output is
+ * completely untouched; this is an ADDITIVE block appended after it.
+ *
+ * 🛑 TWO WIRES, BOTH REQUIRED, OR THE FACET RENDERS AND SILENTLY FILTERS
+ * NOTHING (found live 2026-11-04, same failure shape Root Cause #33/#62
+ * describes, one layer up):
+ *
+ *   1. `buildFilters` must fold in `buildAdminFacetFilters(adminFacets, f)`
+ *      — this is what turns a typed value into an actual Sieve clause.
+ *   2. The view's OWN `filterKeys` array (passed to `useAdminListing`) must
+ *      include `...adminFacets.map((f) => f.key)`. `useAdminListing`'s
+ *      `applyFilters()`/`currentFilterState` only promote keys named in
+ *      `filterKeys` from `pendingFilters` into the query (see
+ *      `useAdminListing.ts`) — a facet key absent from that array renders,
+ *      accepts input, and round-trips through `pendingFilters` on drawer
+ *      reopen, but "Apply Filters" never reaches the actual request. (1)
+ *      alone looked complete because a direct `fetch` against the endpoint
+ *      with the filter param honours it — the gap is client-side only.
+ */
+import { useState } from "react";
+import { Div } from "./Div.js";
+import { Row, Stack } from "./Layout.js";
+import { Text } from "./Typography.js";
+import { Icon } from "./Icon.js";
+import { IconButton } from "./IconButton.js";
+import { FieldInput } from "../forms/FieldInput.js";
+import { FieldSelect } from "../forms/FieldSelect.js";
+import { FieldCheckbox } from "../forms/FieldCheckbox.js";
+import { sieveFilter, SIEVE_OP } from "../../utils/sieve-builder.js";
+/**
+ * The apply-side half of this subsystem. `AdminFilterFacets` renders the
+ * control and writes typed values into the view's own `pendingFilters`
+ * state, but that alone is cosmetic — `ListingViewConfig.buildFilters` is
+ * what decides which keys actually reach the Sieve query, and it has no way
+ * to know about a facet an admin added at runtime. Every call site's own
+ * `buildFilters` must fold this in (`parts.push(...buildAdminFacetFilters(...))`
+ * before `parts.join(",")`), or the control renders, accepts input, and
+ * silently filters nothing — the exact failure shape Root Cause #33/#62
+ * documents for a mismatched facet key, except self-inflicted by the UI
+ * itself rather than by a stale filterKeys/SIEVE_FIELDS mismatch.
+ */
+export function buildAdminFacetFilters(facets, pendingFilters) {
+    return facets
+        .map((facet) => {
+        const value = pendingFilters[facet.key];
+        if (value === undefined || value === "")
+            return undefined;
+        return sieveFilter(facet.key, SIEVE_OP.EQ, value);
+    })
+        .filter((clause) => clause !== undefined);
+}
+function renderFacetControl(facet, value, onChange) {
+    switch (facet.type) {
+        case "boolean":
+            return (_jsx(FieldCheckbox, { name: facet.key, label: facet.label, checked: value === "true", onChange: (checked) => onChange(checked ? "true" : "") }));
+        case "select":
+            return (_jsx(FieldSelect, { name: facet.key, label: facet.label, value: value, options: (facet.options ?? []).map((o) => ({ value: o, label: o })), onChange: onChange }));
+        case "date":
+            return _jsx(FieldInput, { name: facet.key, type: "date", label: facet.label, value: value, onChange: onChange });
+        case "number":
+            return _jsx(FieldInput, { name: facet.key, type: "number", label: facet.label, value: value, onChange: onChange });
+        default:
+            return _jsx(FieldInput, { name: facet.key, type: "text", label: facet.label, value: value, onChange: onChange });
+    }
+}
+/**
+ * Appended after a view's own `renderFilterPanel` output. Renders nothing
+ * when `facets` is empty and `editMode` is off — the unconfigured, default
+ * state every 3B-1b subsystem guarantees.
+ */
+export function AdminFilterFacets({ facets, pendingFilters, setPendingFilters, availableFacets, editMode, onAddFacet, onRemoveFacet, }) {
+    if (facets.length === 0 && !editMode)
+        return null;
+    return (_jsxs(Stack, { gap: "sm", children: [facets.map((facet) => (_jsxs(Row, { gap: "xs", align: "start", children: [_jsx(Div, { className: "flex-1", children: renderFacetControl(facet, pendingFilters[facet.key] ?? "", (next) => setPendingFilters((prev) => ({ ...prev, [facet.key]: next }))) }), editMode && (_jsx(IconButton, { "aria-label": `Remove facet "${facet.label}"`, icon: _jsx(Icon, { name: "delete", size: "sm" }), size: "sm", variant: "ghost", onClick: () => onRemoveFacet?.(facet.key) }))] }, facet.key))), editMode && onAddFacet && (_jsx(AddFacetRow, { availableFacets: availableFacets, existingKeys: facets.map((f) => f.key), onAdd: onAddFacet }))] }));
+}
+function AddFacetRow({ availableFacets, existingKeys, onAdd, }) {
+    const remaining = availableFacets.filter((f) => !existingKeys.includes(f.key));
+    const [selectedKey, setSelectedKey] = useState(remaining[0]?.key ?? "");
+    const [type, setType] = useState("text");
+    if (remaining.length === 0) {
+        return _jsx(Text, { size: "xs", color: "muted", children: "Every available facet is already added." });
+    }
+    const submit = () => {
+        const field = remaining.find((f) => f.key === selectedKey);
+        if (!field)
+            return;
+        onAdd({ key: field.key, label: field.label, type });
+        setSelectedKey(remaining.find((f) => f.key !== field.key)?.key ?? "");
+    };
+    return (_jsxs(Stack, { gap: "xs", surface: "subtle", padding: "sm", rounded: "md", children: [_jsx(Text, { size: "xs", weight: "medium", color: "muted", children: "Add a filter facet" }), _jsxs(Row, { gap: "xs", wrap: true, children: [_jsx(FieldSelect, { name: "newFacetKey", label: "Field", value: selectedKey, options: remaining.map((f) => ({ value: f.key, label: f.label })), onChange: setSelectedKey }), _jsx(FieldSelect, { name: "newFacetType", label: "Control", value: type, options: [
+                            { value: "text", label: "Text" },
+                            { value: "number", label: "Number" },
+                            { value: "select", label: "Select" },
+                            { value: "boolean", label: "Toggle" },
+                            { value: "date", label: "Date" },
+                        ], onChange: (v) => setType(v) })] }), _jsx(IconButton, { "aria-label": "Add facet", icon: _jsx(Icon, { name: "create", size: "sm" }), size: "sm", variant: "outline", onClick: submit })] }));
+}

package/dist/ui/components/Avatar.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";
 const UI_AVATAR = {
     base: "appkit-avatar",
     fallback: "appkit-avatar--fallback",

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ImageCropData } from "../../features/media";
+import type { ImageCropData } from "../types/image-crop";
 export interface AvatarDisplayProps {
     cropData: ImageCropData | null;
     size?: "sm" | "md" | "lg" | "xl" | "2xl";

package/dist/ui/components/BaseListingCard.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 { Span } from "./Typography.js";
 function BaseListingCardRoot({ className = "", isSelected, isDisabled, variant = "grid", onClick, onMouseDown, onMouseUp, onMouseLeave, onTouchStart, onTouchEnd, onTouchCancel, children, }) {
     return (_jsx("div", { onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseLeave: onMouseLeave, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, onTouchCancel: onTouchCancel, className: [

package/dist/ui/components/Button.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useState } from "react";
-import { createPortal } from "react-dom";
 import { twMerge } from "tailwind-merge";
+import { DialogShell } from "./dialog-shell.js";
 import { Loader2 } from "lucide-react";
 import { surfaceError } from "../../client/api/surface-error.js";
 /*
@@ -269,18 +269,7 @@ export function Button({ variant, size = "md", className = "", isLoading = false
     // one of those two branches, or the other branch can never open a
     // confirmation dialog at all (this was the actual asChild bug: the early
     // return happened before this JSX was ever reached).
-    const confirmPortal = confirmOpen && confirmDef && typeof document !== "undefined" && createPortal(_jsx("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "appkit-action-confirm-title", style: {
-            position: "fixed", inset: 0, zIndex: "var(--appkit-z-confirm, 1000)",
-            display: "flex", alignItems: "center", justifyContent: "center",
-            background: "rgba(0,0,0,0.45)", backdropFilter: "blur(2px)",
-        }, onClick: (e) => { if (e.target === e.currentTarget)
-            setConfirmOpen(false); }, children: _jsxs("div", { style: {
-                background: "var(--appkit-color-surface)",
-                borderRadius: "var(--appkit-radius-lg, 12px)",
-                padding: "1.5rem",
-                maxWidth: "380px", width: "calc(100% - 2rem)",
-                boxShadow: "var(--appkit-shadow-lg, 0 20px 60px rgba(0,0,0,0.2))",
-            }, children: [_jsx("p", { id: "appkit-action-confirm-title", style: { fontWeight: 600, marginBottom: "0.5rem", fontSize: "1rem" }, children: confirmDef.title }), _jsx("p", { style: { fontSize: "0.875rem", color: "var(--appkit-color-text-muted)", marginBottom: "1.25rem" }, children: confirmBody }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", justifyContent: "flex-end" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(false), children: confirmDef.cancelLabel ?? "Cancel" }), _jsx(Button, { variant: confirmVariant, size: "sm", onClick: handleConfirm, children: confirmDef.confirmLabel })] })] }) }), document.body);
+    const confirmPortal = confirmOpen && confirmDef && (_jsxs(DialogShell, { open: confirmOpen, onClose: () => setConfirmOpen(false), dialogLabel: confirmDef.title, wrapperClassName: "appkit-action-confirm", overlayClassName: "appkit-action-confirm__backdrop", contentClassName: "appkit-action-confirm__panel", children: [_jsx("p", { className: "appkit-action-confirm__title", children: confirmDef.title }), _jsx("p", { className: "appkit-action-confirm__body", children: confirmBody }), _jsxs("div", { className: "appkit-action-confirm__actions", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(false), children: confirmDef.cancelLabel ?? "Cancel" }), _jsx(Button, { variant: confirmVariant, size: "sm", onClick: handleConfirm, children: confirmDef.confirmLabel })] })] }));
     if (asChild && React.isValidElement(resolvedChildren)) {
         const child = resolvedChildren;
         // Never spread the caller's raw onClick here — it must go through