@mohasinac/appkit 4.71.0 → 4.71.2

package/dist/features/layout/EditModeToggle.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEditMode } from "../../_internal/client/edit-mode/EditModeProvider.js";
+import { Toggle } from "../../ui/components/Toggle.js";
+/**
+ * Mounted via `TitleBarLayout`'s `editModeSlot`. Renders nothing for a
+ * session `useEditMode()` reports `canUseEditMode: false` for — which is
+ * every buyer and seller session, by construction (`EditModeProvider`'s
+ * `enabled` prop is the admin-role check, decided by the consumer before
+ * this ever mounts).
+ */
+export function EditModeToggle() {
+    const { editMode, toggleEditMode, canUseEditMode } = useEditMode();
+    if (!canUseEditMode)
+        return null;
+    return (_jsx(Toggle, { checked: editMode, onChange: toggleEditMode, size: "sm", ariaLabel: "Edit mode", label: "Edit" }));
+}

package/dist/features/layout/LanguageSwitcher.d.ts

@@ -0,0 +1,27 @@
+export interface LanguageSwitcherOption {
+    value: string;
+    /** Display label — the language's own name ("English", "हिन्दी"), not an ISO code. */
+    label: string;
+}
+export interface LanguageSwitcherProps {
+    options: LanguageSwitcherOption[];
+    value: string;
+    onChange: (next: string) => void;
+}
+/**
+ * Presentational only — mounted via `TitleBarLayout`'s `localeSlot`. The
+ * consumer's own wrapper supplies `options`/`value`/`onChange` from
+ * `src/i18n/routing.ts` and next-intl's `useRouter`/`usePathname`
+ * (`src/i18n/navigation.ts`), which are consumer-specific and cannot live in
+ * appkit (`createNavigation()` is called with THIS app's `routing` object).
+ *
+ * Renders nothing for a single-locale site — `options.length <= 1` has
+ * nothing to switch between, and a single-option dropdown is a control that
+ * does nothing. This is why it is currently invisible everywhere: `en` is
+ * the only entry in `routing.locales`. It activates automatically the day a
+ * second locale is added there — no second mount point to remember.
+ *
+ * `<Select>`, not `<PaginatedSelect>` — a language list is realistically
+ * under five entries (Rule #9's own ≤5 threshold).
+ */
+export declare function LanguageSwitcher({ options, value, onChange }: LanguageSwitcherProps): import("react").JSX.Element | null;

package/dist/features/layout/LanguageSwitcher.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select } from "../../ui/components/Select.js";
+/**
+ * Presentational only — mounted via `TitleBarLayout`'s `localeSlot`. The
+ * consumer's own wrapper supplies `options`/`value`/`onChange` from
+ * `src/i18n/routing.ts` and next-intl's `useRouter`/`usePathname`
+ * (`src/i18n/navigation.ts`), which are consumer-specific and cannot live in
+ * appkit (`createNavigation()` is called with THIS app's `routing` object).
+ *
+ * Renders nothing for a single-locale site — `options.length <= 1` has
+ * nothing to switch between, and a single-option dropdown is a control that
+ * does nothing. This is why it is currently invisible everywhere: `en` is
+ * the only entry in `routing.locales`. It activates automatically the day a
+ * second locale is added there — no second mount point to remember.
+ *
+ * `<Select>`, not `<PaginatedSelect>` — a language list is realistically
+ * under five entries (Rule #9's own ≤5 threshold).
+ */
+export function LanguageSwitcher({ options, value, onChange }) {
+    if (options.length <= 1)
+        return null;
+    const selectOptions = options.map((o) => ({
+        value: o.value,
+        label: o.label,
+    }));
+    return (_jsx(Select, { bare: true, "aria-label": "Language", options: selectOptions, value: value, onValueChange: onChange, wrapperClassName: "w-auto" }));
+}

package/dist/features/layout/NavbarLayout.js

@@ -256,7 +256,7 @@ export function NavbarLayout({ items, activeHref, id = "main-navbar", ariaLabel
     //
     // The sidebars and the mobile drawer were always correct, because they
     // already called this helper — which is why the mobile bottom nav highlighted
-    // "Auctions" on /auctions while the desktop navbar above it highlighted
+    // "Collector Drops" on /collector-drops while the desktop navbar above it highlighted
     // nothing. One algorithm, four surfaces.
     //
     // `findActiveNavItem` prefix-matches (`activeHref.startsWith(`${href}/`)`) and
@@ -264,7 +264,7 @@ export function NavbarLayout({ items, activeHref, id = "main-navbar", ariaLabel
     // every page and a more specific entry always beats a shorter one.
     //
     // 🛑 CHILDREN COUNT. A dropdown parent links to one page and stands for
-    // several — "Products" owns /auctions, /bundles and the rest — so resolving
+    // several — "Products" owns /collector-drops, /bundles and the rest — so resolving
     // against top-level hrefs alone would mark NOTHING on four of the six pages
     // the parent represents, which is the same lost-your-place bug described
     // above, just one level down. Each child is resolved as a candidate carrying

package/dist/features/layout/SideActionDock.js

@@ -49,7 +49,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useEffect, useId, useRef, useState } from "react";
 import { ChevronDown, ChevronUp, Check, X } from "lucide-react";
-import { useBottomActionsContext } from "./BottomActionsContext.js";
+import { useBottomActionsContext } from "../../ui/chrome/BottomActionsContext.js";
 import { useClickOutside } from "../../react/index.js";
 import { useHandMode } from "../../_internal/client/hand-mode/index.js";
 import { useCtaReveal } from "./useCtaReveal.js";
@@ -270,7 +270,7 @@ export default function SideActionDock() {
                  */
                 "bottom-[calc(var(--keyboard-inset-height,0px)+var(--bottom-nav-height,4rem)+var(--bottom-chrome-height,0px)+var(--appkit-space-4)+3.5rem)]",
                 "transition-[bottom] duration-300 ease-out",
-            ].join(" "), "data-section": "back-to-cta", children: _jsxs(Button, { type: "button", variant: "primary", size: "sm", onClick: scrollToAnchor, "aria-label": `Back to ${primaryAction?.label ?? "the buy button"}`, children: [_jsx(ChevronUp, { "aria-hidden": "true", size: ICON_SIZE.sm }), `Back to ${primaryAction?.label ?? "buy"}`] }) }));
+            ].join(" "), "data-section": "back-to-cta", children: _jsxs(Button, { type: "button", variant: "primary", size: "sm", onClick: scrollToAnchor, "aria-label": `Back to ${primaryAction?.label ?? "the buy button"}`, children: [_jsx(ChevronUp, { "aria-hidden": "true", className: ICON_SIZE.sm }), `Back to ${primaryAction?.label ?? "buy"}`] }) }));
     }
     return (_jsxs(Div, { ref: containerRef, role: "toolbar", "aria-label": isBulkMode ? "Bulk actions" : "Page actions", className: [
             "fixed z-[var(--appkit-z-overlay)] pointer-events-auto flex flex-col",

package/dist/features/layout/SidebarLayout.js

@@ -24,6 +24,16 @@ export const SidebarLayout = forwardRef(function SidebarLayout({ isOpen, ariaLab
     const edgeClass = hand === "left" ? "left-0" : "right-0";
     const borderClass = hand === "left" ? "border-r" : "border-l";
     const closedTransform = hand === "left" ? "-translate-x-full" : "translate-x-full";
-    return (_jsxs(_Fragment, { children: [isOpen && (_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px] z-[var(--appkit-z-overlay)] transition-opacity duration-300", onClick: onClose, "aria-hidden": "true" })), _jsx(Aside, { border: "default", ref: ref, id: id, "aria-label": ariaLabel, className: `fixed inset-y-0 ${edgeClass} w-80 bg-[var(--appkit-color-surface)] ${borderClass} border-[var(--appkit-color-border-subtle)] shadow-2xl transform duration-300 ease-in-out z-50 ${isOpen ? "translate-x-0" : closedTransform} flex flex-col`, children: _jsxs(Section, { tone: "plain", background: background, className: "flex flex-col flex-1 min-h-0", children: [_jsx(Div, { border: "default", className: "flex-shrink-0 py-[var(--appkit-space-5)] border-b border-[var(--appkit-color-border-subtle)]", padding: "x-lg", surface: "muted", children: header }), _jsx(Div, { className: `flex-1 ${__O.yAuto} scrollbar-thin`, padding: "inlineLg", children: children })] }) })] }));
+    return (_jsxs(_Fragment, { children: [isOpen && (_jsx(Div, { surface: "overlay-xs", className: "fixed inset-0 backdrop-blur-[2px] z-[var(--appkit-z-overlay)] transition-opacity duration-300", onClick: onClose, "aria-hidden": "true" })), _jsx(Aside, { border: "default", ref: ref, id: id, "aria-label": ariaLabel, 
+                /*
+                 * 🛑 `z-[var(--appkit-z-sidebar)]`, not raw `z-50`. The sticky
+                 * title bar wrapper (AppLayoutShell.tsx) ALSO hardcoded raw
+                 * `z-50` — an accidental tie the project's own token scale
+                 * (`--appkit-z-title-bar: 42` < `--appkit-z-sidebar: 50`)
+                 * already exists to prevent. Under the tie, this panel's own
+                 * header strip visually collided with the title bar instead of
+                 * sitting cleanly above it. Found live, 2026-11-01.
+                 */
+                className: `fixed inset-y-0 ${edgeClass} w-80 bg-[var(--appkit-color-surface)] ${borderClass} border-[var(--appkit-color-border-subtle)] shadow-2xl transform duration-300 ease-in-out z-[var(--appkit-z-sidebar)] ${isOpen ? "translate-x-0" : closedTransform} flex flex-col`, children: _jsxs(Section, { tone: "plain", background: background, className: "flex flex-col flex-1 min-h-0", children: [_jsx(Div, { border: "default", className: "flex-shrink-0 py-[var(--appkit-space-5)] border-b border-[var(--appkit-color-border-subtle)]", padding: "x-lg", surface: "muted", children: header }), _jsx(Div, { className: `flex-1 ${__O.yAuto} scrollbar-thin`, padding: "inlineLg", children: children })] }) })] }));
 });
 SidebarLayout.displayName = "SidebarLayout";

package/dist/features/layout/TitleBarLayout.d.ts

@@ -50,6 +50,19 @@ export interface TitleBarLayoutProps {
     notificationSlot?: React.ReactNode;
     /** Optional dev-only action slot rendered in the right-side action group. */
     devSlot?: React.ReactNode;
+    /**
+     * Optional language-switcher slot. The consumer mounts its own
+     * locale-aware wrapper here (next-intl's `useRouter`/`usePathname` are
+     * consumer-specific, created from the consumer's own `routing` object) —
+     * appkit only renders whatever is passed, same pattern as `devSlot`.
+     */
+    localeSlot?: React.ReactNode;
+    /**
+     * Optional admin edit-mode toggle slot (Phase 3). The consumer decides
+     * whether to render anything here based on the session's role — appkit
+     * never makes that decision itself, same pattern as `devSlot`/`localeSlot`.
+     */
+    editModeSlot?: React.ReactNode;
     /** Optional nav slot rendered between logo and right action icons (desktop only). */
     navSlot?: React.ReactNode;
     /** When set, renders a dismissable promo micro-strip above the header. */
@@ -81,4 +94,4 @@ export interface TitleBarLayoutProps {
  *
  * Receives all domain data as props — zero domain imports.
  */
-export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandTld, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, unreadNotificationCount, notificationsHref, messagesHref, unreadMessageCount, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): React.JSX.Element;
+export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandTld, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, unreadNotificationCount, notificationsHref, messagesHref, unreadMessageCount, loginHref, registerHref, user, notificationSlot, devSlot, localeSlot, editModeSlot, navSlot, promoStripText, isDark, onToggleTheme, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): React.JSX.Element;

package/dist/features/layout/TitleBarLayout.js

@@ -56,7 +56,7 @@ const nudgeWhenCarrying = (count) => count > 0 ? "appkit-nav-icon--has-items" :
  *
  * Receives all domain data as props — zero domain imports.
  */
-export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandTld, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, unreadNotificationCount = 0, notificationsHref, messagesHref, unreadMessageCount = 0, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
+export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandTld, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, unreadNotificationCount = 0, notificationsHref, messagesHref, unreadMessageCount = 0, loginHref, registerHref, user, notificationSlot, devSlot, localeSlot, editModeSlot, navSlot, promoStripText, isDark = false, onToggleTheme, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
     // ── Element builders ────────────────────────────────────────────────────────
     const promotionsEl = promotionsHref ? (_jsxs(Link, { href: promotionsHref, "aria-label": "Today's deals", className: "flex items-center gap-[var(--appkit-space-1)] px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] rounded-full text-[length:var(--appkit-text-xs)] font-bold bg-primary-100 text-primary-700 dark:bg-secondary-900/40 dark:text-secondary-400 hover:bg-primary-surface transition-colors border border-primary-200/60 dark:border-secondary-700/40", children: [_jsx(Icon, { name: "deals", size: "md", filled: true }), _jsx(Span, { className: "hidden sm:inline", children: "Today's Deals" })] })) : null;
     const themeBtn = onToggleTheme ? (_jsx(IconButton, { size: "touch", variant: "ghost", "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode", onClick: onToggleTheme, className: iconBtn, icon: _jsx(Icon, { name: isDark ? "themeLight" : "themeDark", size: "lg" }) })) : null;
@@ -81,7 +81,7 @@ export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, s
     _jsxs(Row, { gap: "xs", reverse: "hand", className: "hidden lg:flex", children: [loginHref && (_jsx(Link, { href: loginHref, className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text-muted)] hover:text-primary-700 dark:hover:text-secondary-400 transition-colors rounded-lg hover:bg-primary-surface", children: "Sign in" })), registerHref && (_jsx(Link, { href: registerHref, className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-sm)] font-semibold rounded-lg bg-primary text-white hover:bg-primary/90 transition-colors btn-glow shadow-sm", children: "Register" }))] })) : null;
     const hasTb2 = !!(notificationsEl || messagesEl || wishlistEl || cartEl || profileEl);
     // ── Render ───────────────────────────────────────────────────────────────────
-    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-[var(--appkit-color-bg)]/95 backdrop-blur-md border-b border-[var(--appkit-color-border-subtle)] shadow-sm ${className}`, children: [promoStripText && (_jsx(Section, { color: "inverse", tone: "accent-banner", className: "text-[length:var(--appkit-text-xs)] text-center font-medium", padding: "y-2xs", children: promoStripText })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: [_jsxs(Row, { gap: "none", reverse: "hand", className: "relative h-14", children: [_jsx(Row, { gap: "3", reverse: "hand", className: "flex-1", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center gap-[var(--appkit-space-2)] transition-opacity hover:opacity-80", children: _jsx(SiteLogo, { title: brandName, wordmark: brandName, tld: brandTld, size: "md" }) }) }), _jsx(Row, { className: "flex flex-none", align: "center", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteMark, { src: siteLogoUrl, title: brandShortName ?? brandName, size: "lg" }) }) }), _jsxs(Row, { gap: "xs", reverse: "hand", justify: "end", className: "flex-1", children: [devSlot, navSlot, compareEl, notificationSlot, notificationsEl && _jsx(Div, { className: "hidden lg:flex", children: notificationsEl }), messagesEl && _jsx(Div, { className: "hidden lg:flex", children: messagesEl }), wishlistEl && _jsx(Div, { className: "hidden lg:flex", children: wishlistEl }), cartEl && _jsx(Div, { className: "hidden lg:flex", children: cartEl }), user
+    return (_jsxs(BlockHeader, { id: id, className: `sticky top-0 z-50 bg-[var(--appkit-color-bg)]/95 backdrop-blur-md border-b border-[var(--appkit-color-border-subtle)] shadow-sm ${className}`, children: [promoStripText && (_jsx(Section, { color: "inverse", tone: "accent-banner", className: "text-[length:var(--appkit-text-xs)] text-center font-medium", padding: "y-2xs", children: promoStripText })), _jsxs(Div, { paddingX: "x-page", className: "container mx-auto max-w-[1920px]", children: [_jsxs(Row, { gap: "none", reverse: "hand", className: "relative h-14", children: [_jsx(Row, { gap: "3", reverse: "hand", className: "flex-1", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center gap-[var(--appkit-space-2)] transition-opacity hover:opacity-80", children: _jsx(SiteLogo, { title: brandName, wordmark: brandName, tld: brandTld, size: "md" }) }) }), _jsx(Row, { className: "flex flex-none", align: "center", children: _jsx(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center transition-opacity hover:opacity-80", children: _jsx(SiteMark, { src: siteLogoUrl, title: brandShortName ?? brandName, size: "lg" }) }) }), _jsxs(Row, { gap: "xs", reverse: "hand", justify: "end", className: "flex-1", children: [devSlot, editModeSlot, localeSlot, navSlot, compareEl, notificationSlot, notificationsEl && _jsx(Div, { className: "hidden lg:flex", children: notificationsEl }), messagesEl && _jsx(Div, { className: "hidden lg:flex", children: messagesEl }), wishlistEl && _jsx(Div, { className: "hidden lg:flex", children: wishlistEl }), cartEl && _jsx(Div, { className: "hidden lg:flex", children: cartEl }), user
                                         ? profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })
                                         : authButtonsEl ?? (profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })), searchBtn, _jsx(Div, { className: "hidden sm:flex", children: promotionsEl }), themeBtn, hamburgerBtn] })] }), hasTb2 && (
                     // `justify="end"` is CORRECT alongside `reverse="hand"` — do not

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

@@ -26,12 +26,12 @@ export { LayoutClient } from "./LayoutClient";
 export type { LayoutClientProps, LayoutProvider } from "./LayoutClient";
 export { AppLayoutShell } from "./AppLayoutShell";
 export type { AppLayoutShellProps, AppLayoutShellSidebarLink, AppLayoutShellSidebarSection, SidebarItemActionRenderer } from "./AppLayoutShell";
-export { BottomActionsProvider, useBottomActionsContext, } from "./BottomActionsContext";
-export type { BottomAction, BottomBulkConfig, BottomActionsState, BottomActionsDesktopMode, } from "./BottomActionsContext";
-export { useBottomActions } from "./hooks/useBottomActions";
-export type { UseBottomActionsOptions } from "./hooks/useBottomActions";
-export { useFormBottomActions } from "./hooks/useFormBottomActions";
-export type { UseFormBottomActionsOptions } from "./hooks/useFormBottomActions";
+export { BottomActionsProvider, useBottomActionsContext, } from "../../ui/chrome/BottomActionsContext";
+export type { BottomAction, BottomBulkConfig, BottomActionsState, BottomActionsDesktopMode, } from "../../ui/chrome/BottomActionsContext";
+export { useBottomActions } from "../../ui/chrome/useBottomActions";
+export type { UseBottomActionsOptions } from "../../ui/chrome/useBottomActions";
+export { useFormBottomActions } from "../../ui/forms/useFormBottomActions";
+export type { UseFormBottomActionsOptions } from "../../ui/forms/useFormBottomActions";
 export { default as SideActionDock } from "./SideActionDock";
 export { default as BottomActions } from "./BottomActions";
 export { useIsDesktop, DESKTOP_QUERY } from "./useIsDesktop";

package/dist/features/layout/index.js

@@ -14,9 +14,9 @@ export { LocaleSwitcher } from "./LocaleSwitcher.js";
 export { BackToTop, SkipToMain } from "./BackToTop.js";
 export { LayoutClient } from "./LayoutClient.js";
 export { AppLayoutShell } from "./AppLayoutShell.js";
-export { BottomActionsProvider, useBottomActionsContext, } from "./BottomActionsContext.js";
-export { useBottomActions } from "./hooks/useBottomActions.js";
-export { useFormBottomActions } from "./hooks/useFormBottomActions.js";
+export { BottomActionsProvider, useBottomActionsContext, } from "../../ui/chrome/BottomActionsContext.js";
+export { useBottomActions } from "../../ui/chrome/useBottomActions.js";
+export { useFormBottomActions } from "../../ui/forms/useFormBottomActions.js";
 /*
  * The two presentations of one control. `AppLayoutShell` mounts both and
  * `useIsDesktop` lets exactly one render — do not mount either directly, or a

package/dist/features/live/components/LiveItemDetailPageView.d.ts

@@ -1,9 +1,12 @@
 import type { ProductDocument } from "../../products/schemas/firestore";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface LiveItemDetailPageViewProps {
     slug: string;
     /** Pre-fetched product document — dedupes with generateMetadata() via React.cache(). */
     initialProduct?: ProductDocument | null;
     /** Render-prop for the add-to-cart CTA — wired by the page shim (carries the vendor-verification gate). */
     renderActions?: (product: ProductDocument) => React.ReactNode;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function LiveItemDetailPageView({ slug, initialProduct, renderActions }: LiveItemDetailPageViewProps): Promise<import("react").JSX.Element>;
+export declare function LiveItemDetailPageView({ slug, initialProduct, renderActions, pageRegionCards }: LiveItemDetailPageViewProps): Promise<import("react").JSX.Element>;

package/dist/features/live/components/LiveItemDetailPageView.js

@@ -2,6 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import Link from "next/link.js";
 import { OwnerQuickActions } from "../../../features/admin/components/OwnerQuickActions.js";
 import { getLiveItemForDetail } from "../../../_internal/server/features/live/data.js";
+import { getFieldVisibility } from "../../../_internal/server/features/forms/field-visibility.js";
+import { SectionVisibilityGate } from "../../shell/SectionVisibilityGate.js";
 const CLS_BREADCRUMB_LINK = "hover:text-primary-600 dark:hover:text-primary-400 transition-colors";
 const CLS_LIVE_ITEM_BADGE = "inline-block rounded-full bg-lime-100 dark:bg-lime-900/30 px-[var(--appkit-space-2-5)] py-[var(--appkit-space-0-5)] text-lime-700 dark:text-lime-300";
 const CLS_WARN_BOX = "rounded-lg border border-warning bg-warning-surface p-[var(--appkit-space-4)] text-[length:var(--appkit-text-sm)]";
@@ -33,7 +35,8 @@ import { ReviewsListingPanel } from "../../reviews/components/ReviewsListingPane
 import { ListingBottomActions } from "../../products/components/ListingBottomActions.js";
 import { productImageUrls } from "../../products/schemas/firestore.js";
 import { PurchaseReviewAffordance } from "../../reviews/components/PurchaseReviewAffordance.js";
-export async function LiveItemDetailPageView({ slug, initialProduct, renderActions }) {
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
+export async function LiveItemDetailPageView({ slug, initialProduct, renderActions, pageRegionCards = [] }) {
     const product = initialProduct !== undefined
         ? (initialProduct ?? undefined)
         // The listing IS this page's subject — a read failure must surface rather
@@ -69,16 +72,31 @@ export async function LiveItemDetailPageView({ slug, initialProduct, renderActio
     const storeHref = storeSlug ? String(ROUTES.PUBLIC.STORE_DETAIL(storeSlug)) : null;
     const specs = Array.isArray(p.specifications) ? p.specifications : [];
     const descriptionHtml = toDescriptionHtml(p.description);
-    const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups, initialReviews] = await Promise.all([
+    const [{ relatedItems, relatedByBrand, relatedByTags, relatedByStore }, groups, initialReviews, pdpSectionVisibility] = await Promise.all([
         computeRelatedItems(product),
         getGroupsWithItemsForProduct(product.id),
         getReviewPageForProduct(product.id),
+        // Same shared "pdp-sections" surface as every other listing type's
+        // detail-page component — one admin decision applies across all of them.
+        getFieldVisibility("pdp-sections"),
     ]);
+    /*
+     * `functionalSlot` (2026-11-05) — Live has no separate offer path (no
+     * `renderOfferAction`/`allowOffers` anywhere on this component), so
+     * `renderActions` fills the SAME role `renderPrimaryActions` does on the
+     * standard PDP/Digital Code — it IS the sole buy control, just with a
+     * simpler single-argument signature. Mapped onto the EXISTING
+     * `"pdp-primary-actions"` slot id rather than inventing a third, since
+     * the role is identical. Same hoist/suppress pattern as Digital Code:
+     * single call site, plain DOM-id anchor (`live-item-buy-bar`).
+     */
+    const primaryActionsNode = renderActions?.(product);
+    const hasPrimaryActionsSlotOverride = pageRegionCards.some((card) => card.elements.some((el) => el.kind === "functionalSlot" && el.slotId === "pdp-primary-actions"));
     return (_jsxs(Main, { children: [_jsx(HistoryTracker, { productId: String(p.id ?? p.slug ?? ""), productType: "product", snapshot: {
                     title,
                     thumb: images[0],
                     price: price ?? undefined,
                     storeId: typeof p.storeId === "string" ? p.storeId : undefined,
                     storeName: storeName ?? undefined,
-                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.LIVE), className: CLS_BREADCRUMB_LINK, children: "Live" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(PreOrderDetailView, { renderGallery: () => _jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title }), renderInfo: () => (_jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_ITEM_BADGE, children: "Live Item" }), meta?.vendorVerified && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Verified Seller" })), meta?.cites && (_jsxs(Span, { color: "warning", surface: "warning-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: ["CITES: ", meta.cites] }))] }), _jsx(OwnerQuickActions, { resource: "PRODUCT", placement: "detail", recordLabel: String(p.title ?? p.slug ?? p.id), storeId: p.storeId ? String(p.storeId) : undefined, editHref: String(ROUTES.STORE.PRODUCTS_EDIT(String(p.id))) }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title }), meta?.species && (_jsxs(Text, { className: "italic mt-1", color: "muted", size: "sm", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] }))] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { children: formatCurrency(price, currency) }) })), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Transport" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", children: ["Method: ", transport.method, transport.handlingFee !== undefined && (_jsx(PricesOnly, { children: ` · Handling: ${formatCurrency(transport.handlingFee, "INR")}` })), transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", children: meta.careInfo })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] })), renderTabs: () => (_jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(SpecTable, { rows: specs })) : undefined, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: toCustomSectionTabs(p.customSections) })), renderBuyBar: () => _jsx(Div, { id: "live-item-buy-bar", children: renderActions?.(product) }), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(PurchaseReviewAffordance, { productId: String(product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsx(GroupedListingsCarousel, { groups: groups }), _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand, storeLabel: storeName ?? undefined })] })) }), _jsx(ListingBottomActions, { listingType: "live", anchorId: "live-item-buy-bar", price: price, currency: currency })] })] }));
+                } }), _jsxs(Container, { size: "xl", padding: "y-lg", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsxs(Nav, { "aria-label": "Breadcrumb", layout: "flex-wrap", gap: "2xs", textSize: "xs", color: "muted", children: [_jsx(Link, { href: String(ROUTES.HOME), className: CLS_BREADCRUMB_LINK, children: "Home" }), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.LIVE), className: CLS_BREADCRUMB_LINK, children: "Live" }), category && (_jsxs(_Fragment, { children: [_jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Link, { href: String(ROUTES.PUBLIC.CATEGORY_DETAIL(category)), className: CLS_BREADCRUMB_LINK, children: categoryName || category })] })), _jsx(Span, { "aria-hidden": true, children: "/" }), _jsx(Span, { className: "truncate max-w-[200px]", color: "muted", children: title })] }), _jsx(ShareButton, { title: title })] }), _jsx(AdminComposableRegion, { pageId: "live-slug", initialCards: pageRegionCards, functionalSlots: { "pdp-primary-actions": primaryActionsNode } }), _jsx(PreOrderDetailView, { renderGallery: () => (_jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "gallery", initialVisible: pdpSectionVisibility.gallery !== false, children: _jsx(ProductGalleryClient, { images: images, video: productVideo, productName: title }) })), renderInfo: () => (_jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "info", initialVisible: pdpSectionVisibility.info !== false, children: _jsxs(Stack, { gap: "md", children: [_jsxs(Div, { children: [_jsxs(Row, { gap: "xs", wrap: true, className: "mb-2", children: [_jsx(Span, { size: "xs", weight: "semibold", className: CLS_LIVE_ITEM_BADGE, children: "Live Item" }), meta?.vendorVerified && (_jsx(Span, { color: "success", surface: "success-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: "Verified Seller" })), meta?.cites && (_jsxs(Span, { color: "warning", surface: "warning-surface", size: "xs", weight: "medium", className: "inline-block", padding: "pill-sm", rounded: "full", children: ["CITES: ", meta.cites] }))] }), _jsx(OwnerQuickActions, { resource: "PRODUCT", placement: "detail", recordLabel: String(p.title ?? p.slug ?? p.id), storeId: p.storeId ? String(p.storeId) : undefined, editHref: String(ROUTES.STORE.PRODUCTS_EDIT(String(p.id))) }), _jsx(Heading, { level: 1, className: "leading-snug", smSize: "2xl", color: "primary", size: "xl", weight: "bold", children: title }), meta?.species && (_jsxs(Text, { className: "italic mt-1", color: "muted", size: "sm", children: [meta.species, meta.sex && meta.sex !== "n/a" && ` · ${meta.sex}`, meta.ageMonths !== undefined && ` · ${meta.ageMonths}mo`] }))] }), price !== null && (_jsx(Text, { size: "2xl", weight: "bold", color: "primary", children: _jsx(GatedPrice, { children: formatCurrency(price, currency) }) })), jurisdictions.length > 0 && (_jsxs(Div, { className: CLS_WARN_BOX, children: [_jsx(Text, { className: CLS_WARN_TITLE, children: "Delivery restrictions" }), _jsxs(Text, { className: CLS_WARN_BODY, children: ["This item can only be shipped to: ", jurisdictions.join(", ")] })] })), transport && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Transport" }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", children: ["Method: ", transport.method, transport.handlingFee !== undefined && (_jsx(PricesOnly, { children: ` · Handling: ${formatCurrency(transport.handlingFee, "INR")}` })), transport.insuranceIncluded && " · Insurance included"] })] })), meta?.careInfo && (_jsxs(Div, { textSize: "sm", border: "subtle", surface: "muted", padding: "md", rounded: "lg", children: [_jsx(Text, { weight: "medium", children: "Care information" }), _jsx(Text, { className: "mt-1 text-[var(--appkit-color-text-muted)]", children: meta.careInfo })] })), descriptionHtml && (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm max-w-none dark:prose-invert prose-p:my-0", className: "text-[length:var(--appkit-text-sm)] leading-relaxed text-[var(--appkit-color-text-muted)] line-clamp-4" })), safeSeller && (_jsx(Div, { border: "subtle", rounded: "xl", surface: "muted", padding: "md", children: _jsxs(Row, { justify: "between", align: "center", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-[10px] tracking-wide mb-0.5", color: "faint", transform: "uppercase", children: "Sold by" }), _jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: safeSeller })] }), storeHref && (_jsx(Link, { href: storeHref, className: "shrink-0 rounded-lg bg-primary/10 dark:bg-primary/20 px-[var(--appkit-space-3)] py-[var(--appkit-space-1-5)] text-[length:var(--appkit-text-xs)] font-semibold text-primary-700 dark:text-primary-300 hover:bg-primary/20 dark:hover:bg-primary/30 transition-colors", children: "Visit Store \u2192" }))] }) }))] }) })), renderTabs: () => (_jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "tabs", initialVisible: pdpSectionVisibility.tabs !== false, children: _jsx(ProductTabsShell, { descriptionContent: descriptionHtml ? (_jsx(RichText, { html: descriptionHtml, proseClass: "prose prose-sm sm:prose max-w-none dark:prose-invert", className: "text-[var(--appkit-color-text-muted)]" })) : undefined, specsContent: specs.length > 0 ? (_jsx(SpecTable, { rows: specs })) : undefined, reviewsContent: _jsx(ReviewsListingPanel, { source: { kind: "product", productId: product.id }, stateMode: "local", context: "listing", initialData: initialReviews, emptyLabel: "No reviews yet \u2014 be the first to review this product." }), customTabs: toCustomSectionTabs(p.customSections) }) })), renderBuyBar: () => (_jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "actions", initialVisible: pdpSectionVisibility.actions !== false, children: _jsx(Div, { id: "live-item-buy-bar", children: !hasPrimaryActionsSlotOverride && primaryActionsNode }) })), renderRelated: () => (_jsxs(Stack, { gap: "xl", children: [_jsx(PurchaseReviewAffordance, { productId: String(product.id), storeId: product.storeId ? String(product.storeId) : undefined }), _jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "grouped-listings", initialVisible: pdpSectionVisibility["grouped-listings"] !== false, children: _jsx(GroupedListingsCarousel, { groups: groups }) }), _jsx(SectionVisibilityGate, { surfaceId: "pdp-sections", sectionKey: "related", initialVisible: pdpSectionVisibility.related !== false, children: _jsx(RelatedItemsSection, { relatedItems: relatedItems, relatedByBrand: relatedByBrand, relatedByTags: relatedByTags, relatedByStore: relatedByStore, categoryLabel: categoryName || category || undefined, brandLabel: brand, storeLabel: storeName ?? undefined }) })] })) }), _jsx(ListingBottomActions, { listingType: "live", anchorId: "live-item-buy-bar", price: price, currency: currency })] })] }));
 }

package/dist/features/media/MediaPickerModal.js

@@ -9,7 +9,7 @@ import { Input } from "../../ui/components/Input.js";
 import { Label, Text } from "../../ui/components/Typography.js";
 import { Row, Stack } from "../../ui/components/Layout.js";
 import { Alert } from "../../ui/components/Alert.js";
-import { MediaImage } from "./MediaImage.js";
+import { MediaImage } from "../../ui/components/MediaImage.js";
 import { MediaUploadField } from "./upload/MediaUploadField.js";
 /*
  * The DEFINING module, not `./index` — Root Cause #18. The barrel re-exports

package/dist/features/media/hooks/useMedia.d.ts

@@ -10,7 +10,7 @@
  * is unchanged so existing field components (MediaUploadField, MediaUploadList,
  * ImageUpload, MediaPickerModal) keep working without modification.
  */
-import type { JsonValue } from "@mohasinac/appkit";
+import type { JsonValue } from "../../../schemas/types";
 import type { MediaFilenameContext } from "../../../utils/id-generators";
 export interface MediaUploadResult {
     url: string;

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

@@ -1,11 +1,3 @@
-export { MediaImage } from "./MediaImage";
-export type { MediaImageProps, MediaImageSize } from "./MediaImage";
-export { MediaVideo } from "./MediaVideo";
-export type { MediaVideoProps } from "./MediaVideo";
-export { MediaAvatar } from "./MediaAvatar";
-export type { MediaAvatarProps } from "./MediaAvatar";
-export { MediaLightbox } from "./MediaLightbox";
-export type { MediaLightboxProps, LightboxItem, LightboxLabels, } from "./MediaLightbox";
 export { MediaSlider } from "./components/MediaSlider";
 export type { MediaSliderProps } from "./components/MediaSlider";
 export { useMediaUpload, useMediaAbort, useMediaCrop, useMediaTrim, useMediaCleanup, } from "./hooks/useMedia";

package/dist/features/media/index.js

@@ -1,9 +1,6 @@
 // Public API for @mohasinac/feat-media
-// Core media display components
-export { MediaImage } from "./MediaImage.js";
-export { MediaVideo } from "./MediaVideo.js";
-export { MediaAvatar } from "./MediaAvatar.js";
-export { MediaLightbox } from "./MediaLightbox.js";
+// MediaImage/MediaVideo/MediaAvatar/MediaLightbox moved to ui/components/
+// (appkit barrel-perf plan, Phase 4b) -- import them from there directly.
 // Internal slider (re-exported for advanced use)
 export { MediaSlider } from "./components/MediaSlider.js";
 // Hooks

package/dist/features/media/modals/ImageCropModal.d.ts

@@ -5,14 +5,8 @@
  * (display-only focal-point). No pixel cropping — use useMediaCrop for that.
  */
 import React from "react";
-export interface ImageCropData {
-    url: string;
-    position: {
-        x: number;
-        y: number;
-    };
-    zoom: number;
-}
+import type { ImageCropData } from "../../../ui/types/image-crop";
+export type { ImageCropData } from "../../../ui/types/image-crop";
 export interface ImageCropModalProps {
     isOpen: boolean;
     imageUrl: string;

package/dist/features/media/types/index.d.ts

@@ -29,19 +29,19 @@ export declare const mediaFieldSchema: z.ZodObject<{
     youtubeId: z.ZodOptional<z.ZodString>;
     duration: z.ZodOptional<z.ZodNumber>;
 }, "strip", z.ZodTypeAny, {
-    type: "image" | "video" | "file";
     url: string;
+    type: "video" | "image" | "file";
+    source?: "upload" | "youtube" | "external" | undefined;
     alt?: string | undefined;
     thumbnailUrl?: string | undefined;
-    source?: "upload" | "youtube" | "external" | undefined;
     youtubeId?: string | undefined;
     duration?: number | undefined;
 }, {
-    type: "image" | "video" | "file";
     url: string;
+    type: "video" | "image" | "file";
+    source?: "upload" | "youtube" | "external" | undefined;
     alt?: string | undefined;
     thumbnailUrl?: string | undefined;
-    source?: "upload" | "youtube" | "external" | undefined;
     youtubeId?: string | undefined;
     duration?: number | undefined;
 }>;

package/dist/features/media/upload/ImageUpload.js

@@ -32,7 +32,7 @@ import { Progress } from "../../../ui/components/Progress.js";
 import { Spinner } from "../../../ui/components/Spinner.js";
 import { Label, Text } from "../../../ui/components/Typography.js";
 import { useToast } from "../../../ui/components/toast-context.js";
-import { MediaImage } from "../MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 import CameraCapture from "./CameraCapture.js";
 // Crop/editor modals pull in image-manipulation libraries (react-advanced-cropper
 // and friends) that most upload sessions never open — lazy-load so that weight

package/dist/features/media/upload/MediaUploadField.js

@@ -26,8 +26,8 @@ import { Div } from "../../../ui/components/Div.js";
 import { Row, Stack } from "../../../ui/components/Layout.js";
 import { Spinner } from "../../../ui/components/Spinner.js";
 import { Label, Span, Text } from "../../../ui/components/Typography.js";
-import { MediaImage } from "../MediaImage.js";
-import { MediaVideo } from "../MediaVideo.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
+import { MediaVideo } from "../../../ui/components/MediaVideo.js";
 import dynamic from "next/dynamic.js";
 import { VideoThumbnailSelector } from "../modals/VideoThumbnailSelector.js";
 import CameraCapture from "./CameraCapture.js";

package/dist/features/media/upload/MediaUploadList.js

@@ -8,8 +8,8 @@ import { Div } from "../../../ui/components/Div.js";
 import { Label, Text } from "../../../ui/components/Typography.js";
 import { Row, Stack } from "../../../ui/components/Layout.js";
 import { Spinner } from "../../../ui/components/Spinner.js";
-import { MediaImage } from "../MediaImage.js";
-import { MediaVideo } from "../MediaVideo.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
+import { MediaVideo } from "../../../ui/components/MediaVideo.js";
 import { inferMediaTypeFromMime } from "../types/index.js";
 import { normalizeError } from "../../../errors/normalize.js";
 import { toUserMessage } from "../../../errors/error-display-map.js";

package/dist/features/media/upload/register-form-field-renderers.d.ts

@@ -0,0 +1 @@
+export declare function registerMediaFormFieldRenderers(): void;

package/dist/features/media/upload/register-form-field-renderers.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Registers the features/media renderers for FormField.tsx's "image"/"media"
+ * branches into ui/components/form-field-registry.ts, so FormField never
+ * statically imports from features/ directly (see that file's own header
+ * comment for the incident this closes).
+ *
+ * Loaded ONLY via the dynamic `import()` inside FormField.tsx itself, not
+ * wired from any barrel's top-level code. A barrel-level side effect
+ * (tried first from client.ts, then from ui/index.ts) does not survive
+ * Turbopack in the browser — confirmed live with a planted console.log
+ * that neither barrel's explicit top-level call to
+ * registerMediaFormFieldRenderers() ever actually ran when the browser
+ * resolved FormField through it, even though a direct Node ESM import of
+ * the same compiled file ran it correctly. A dynamic import() called from
+ * inside a function body is not subject to that elision.
+ *
+ * Idempotency-guarded regardless: FormField.tsx already caches the
+ * `import()` promise so this only loads once, but the guard here is cheap
+ * insurance against any other future caller.
+ */
+import { registerFormFieldRenderer } from "../../../ui/components/form-field-registry.js";
+import { ImageUpload } from "./ImageUpload.js";
+import { MediaUploadField } from "./MediaUploadField.js";
+let registered = false;
+export function registerMediaFormFieldRenderers() {
+    if (registered)
+        return;
+    registered = true;
+    registerFormFieldRenderer("image", (props) => _jsx(ImageUpload, { ...props }));
+    registerFormFieldRenderer("media", (props) => _jsx(MediaUploadField, { ...props }));
+}
+registerMediaFormFieldRenderers();

package/dist/features/messages/components/ConversationThreadView.d.ts

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

package/dist/features/messages/components/ConversationThreadView.js

@@ -10,11 +10,12 @@ import { Heading, Span, Text } from "../../../ui/components/Typography.js";
 import { Button } from "../../../ui/components/Button.js";
 import { FieldTextarea } from "../../../ui/forms/FieldTextarea.js";
 import { EmptyState } from "../../../ui/components/EmptyState.js";
-import { MediaImage } from "../../media/MediaImage.js";
+import { MediaImage } from "../../../ui/components/MediaImage.js";
 import { TextLink } from "../../../ui/components/TextLink.js";
 import { pluginFor } from "../../../_internal/shared/listing-types/_registry.js";
 import { isListingType } from "../../../_internal/shared/listing-types/feature-flags.js";
 import { formatCurrency } from "../../../utils/number.formatter.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 function newClientMessageId() {
     // crypto.randomUUID is available in every browser this app targets; a
     // retry reuses the SAME id generated at compose time, not a fresh one per
@@ -54,7 +55,7 @@ function MessageBubble({ message, isSelf }) {
                         ? message.productRef.listingType
                         : "standard").detailRoute(message.productRef.productId)), layout: "flex-col", rounded: "md", children: _jsxs(Row, { gap: "sm", surface: "card", padding: "xs", rounded: "md", align: "center", children: [message.productRef.image && (_jsx(Div, { className: "relative h-10 w-10 flex-shrink-0", rounded: "default", overflow: "hidden", children: _jsx(MediaImage, { src: message.productRef.image, alt: message.productRef.title, size: "thumbnail" }) })), _jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { size: "xs", weight: "semibold", className: "truncate", children: message.productRef.title }), typeof message.productRef.price === "number" && (_jsx(Text, { size: "xs", color: "muted", children: formatCurrency(message.productRef.price, "INR") }))] })] }) })), _jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words", children: message.body })] }) }));
 }
-export function ConversationThreadView({ conversationId }) {
+export function ConversationThreadView({ conversationId, pageRegionCards = [], }) {
     const { user, loading } = useAuth();
     const { data, isPending, isError, channelError } = useConversationThread(user ? conversationId : null);
     const { mutate: send, isPending: isSending, pending, retry } = useSendMessage(conversationId);
@@ -109,7 +110,7 @@ export function ConversationThreadView({ conversationId }) {
                             if (confirm("Block this person from messaging you in this conversation?")) {
                                 block.mutate({ conversationId });
                             }
-                        }, children: "Block" })] }), channelError && (_jsx(Div, { padding: "sm", surface: "warning-surface", children: _jsxs(Text, { size: "xs", color: "warning", children: [channelError, " New messages may not appear until you reload."] }) })), _jsxs(Div, { className: "flex-1", overflow: "y-auto", padding: "md", children: [isPending && _jsx(Text, { color: "muted", children: "Loading messages\u2026" }), isError && _jsx(Text, { color: "danger", children: "Could not load this conversation." }), _jsxs(Stack, { gap: "sm", children: [items.map((m) => (_jsx(MessageBubble, { message: m, isSelf: m.authorId === user.uid }, m.id))), pending.map((p) => (_jsx(Row, { justify: "end", children: _jsxs(Stack, { gap: "xs", surface: "interactive", padding: "sm", rounded: "lg", className: "max-w-[75%] opacity-70", children: [_jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words", children: p.body }), p.status === "failed" && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => retry(p), children: "Failed \u2014 tap to retry" })), p.status === "pending" && (_jsx(Span, { size: "xs", color: "muted", children: "Sending\u2026" }))] }) }, p.clientMessageId)))] }), _jsx(Div, { ref: bottomRef })] }), _jsxs(Row, { padding: "md", gap: "sm", className: "border-t border-[var(--appkit-color-border-subtle)]", children: [_jsx(Div, { className: "flex-1", children: _jsx(FieldTextarea, { name: "message-composer", "aria-label": "Message", value: draft, onChange: setDraft, onKeyDown: (e) => {
+                        }, children: "Block" })] }), _jsx(AdminComposableRegion, { pageId: "messages-conversationid", initialCards: pageRegionCards }), channelError && (_jsx(Div, { padding: "sm", surface: "warning-surface", children: _jsxs(Text, { size: "xs", color: "warning", children: [channelError, " New messages may not appear until you reload."] }) })), _jsxs(Div, { className: "flex-1", overflow: "y-auto", padding: "md", children: [isPending && _jsx(Text, { color: "muted", children: "Loading messages\u2026" }), isError && _jsx(Text, { color: "danger", children: "Could not load this conversation." }), _jsxs(Stack, { gap: "sm", children: [items.map((m) => (_jsx(MessageBubble, { message: m, isSelf: m.authorId === user.uid }, m.id))), pending.map((p) => (_jsx(Row, { justify: "end", children: _jsxs(Stack, { gap: "xs", surface: "interactive", padding: "sm", rounded: "lg", className: "max-w-[75%] opacity-70", children: [_jsx(Text, { size: "sm", className: "whitespace-pre-wrap break-words", children: p.body }), p.status === "failed" && (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => retry(p), children: "Failed \u2014 tap to retry" })), p.status === "pending" && (_jsx(Span, { size: "xs", color: "muted", children: "Sending\u2026" }))] }) }, p.clientMessageId)))] }), _jsx(Div, { ref: bottomRef })] }), _jsxs(Row, { padding: "md", gap: "sm", className: "border-t border-[var(--appkit-color-border-subtle)]", children: [_jsx(Div, { className: "flex-1", children: _jsx(FieldTextarea, { name: "message-composer", "aria-label": "Message", value: draft, onChange: setDraft, onKeyDown: (e) => {
                                 if (e.key === "Enter" && !e.shiftKey) {
                                     e.preventDefault();
                                     handleSend();

package/dist/features/messages/components/ConversationsInboxView.d.ts

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