@mohasinac/appkit 4.47.0 → 4.48.0

package/dist/features/categories/repository/price-index.repository.d.ts

@@ -100,6 +100,31 @@ export interface PriceIndexBand {
      * in unknown condition", and only the first is true.
      */
     byCondition?: Record<string, PriceIndexConditionBand>;
+    /**
+     * I9 — the per-COLOURWAY slice, for a part whose one glossary row is two
+     * physically different units.
+     *
+     * 🛑 Why colourway earns a dimension when nothing else does. This index
+     * already slices by condition precisely because condition is the dominant
+     * price variable — and here two units of ONE part differ by more than
+     * condition ever does: the silver Metal Ball ships with L-Drago Guardian and
+     * is *"very rare and costly"*, the transparent-black one ships with Poison
+     * Zurafa and is ordinary. Same mould, same weight, same stats, one code, two
+     * markets. A single band across both reports a median no buyer or seller of
+     * either can use.
+     *
+     * Keyed on the NORMALISED colourway (`normaliseColourway`), so "Transparent
+     * Black", "transparent-black" and sloppy spacing are one bucket rather than
+     * three single-sample ones.
+     *
+     * Absent — never `{}` — when no sale in the window recorded a colourway, for
+     * the same reason `byCondition` is: "we do not know" and "we measured and
+     * found none" are different statements and only the first is true. Most
+     * buckets will fall under `PRICE_INDEX_MIN_CONFIDENT_SAMPLES` and render as
+     * "not enough data yet", which is the honest outcome and already the
+     * behaviour.
+     */
+    byColourway?: Record<string, PriceIndexConditionBand>;
     lastSold?: {
         amount: number;
         at: Date;

package/dist/features/email/notification-templates.js

@@ -87,6 +87,10 @@ export const NOTIFICATION_EMAIL_TEMPLATES = {
      */
     support_ticket_update: { lead: "There's an update on your support ticket.", cta: "View ticket" },
     scam_report_update: { lead: "There's an update on a scam report you filed.", cta: "View report" },
+    // D9 — email-INELIGIBLE (EMAIL_ELIGIBLE_TYPES), same reasoning as
+    // support_ticket_update: the conversation lives in the UI. A real entry
+    // anyway, for the same future-override reason as scam_report_update.
+    message_received: { lead: "You have a new message.", cta: "View conversation" },
 };
 /**
  * Render one notification as an email.

package/dist/features/events/repository/events.repository.js

@@ -7,7 +7,7 @@ import { BaseRepository, prepareForFirestore, parseSieveDateValue, } from "../..
 import { EVENT_FIELDS, EVENTS_COLLECTION, } from "../schemas/index.js";
 import { increment } from "../../../contracts/field-ops.js";
 import { buildEventSearchTxt } from "../../../utils/search-txt-builders.js";
-import { planSearchTxt, refineSearchTxt, emptySearchResult, } from "../../../utils/search-txt-query.js";
+import { planSearchTxt, beginSearchWindow, emptySearchResult, } from "../../../utils/search-txt-query.js";
 class EventRepository extends BaseRepository {
     constructor() {
         super(EVENTS_COLLECTION);
@@ -29,8 +29,15 @@ class EventRepository extends BaseRepository {
         if (plan.head) {
             baseQuery = baseQuery.where(EVENT_FIELDS.SEARCH_TXT, "array-contains", plan.head);
         }
-        const result = await this.sieveQuery(model, EventRepository.SIEVE_FIELDS, { baseQuery });
-        return refineSearchTxt(result, plan.rest);
+        /*
+         * One bounded window, one raised `maxPageSize`, one page slice — see
+         * `beginSearchWindow`. Hand-writing the three is how the other ten
+         * repositories each ended up with two of them, which reads as a working
+         * multi-word search and silently cannot reach page 2.
+         */
+        const win = beginSearchWindow(model, plan);
+        const result = await this.sieveQuery(win.model, EventRepository.SIEVE_FIELDS, { baseQuery, maxPageSize: win.maxPageSize(100) });
+        return win.finish(result);
     }
     /**
      * How many events exist per `type` and per `status` — the numbers behind the

package/dist/features/faq/constants/read-caps.d.ts

@@ -0,0 +1,29 @@
+/**
+ * How many FAQ rows the homepage and footer reads may fetch — F1 #36.
+ *
+ * 🛑 `getHomepageFAQs()` had NO `.limit()`, so it fetched every
+ * `showOnHomepage` row and the section sliced to `displayCount` in memory: 20
+ * Firestore reads per render of `/` — the most-crawled route in the app — to
+ * display 10, growing with every FAQ anyone flags. A real Hobby cost item
+ * rather than a correctness one, on a project that has already been paused for
+ * exceeding its quota.
+ *
+ * 🛑 A cap rather than exactly `displayCount`, because the section renders a
+ * "+N" badge from the full count: reading only what it shows would make that
+ * badge permanently "+0". The cap bounds the cost, and the renderer stops
+ * CLAIMING a number once the read saturates — an unknown count must never
+ * render as a precise one (Root Cause #72's rule, one surface over).
+ *
+ * 🛑 It lives in `constants/` and NOT on the repository, even though the
+ * repository is its main consumer: the homepage section renderer needs the
+ * same number, and importing a repository module there would put
+ * `providers/db-firebase` — and therefore firebase-admin — into the import
+ * chain of a render module (Root Cause #6/#24).
+ *
+ * @tag domain:faq
+ * @tag layer:constant
+ * @tag access:isomorphic
+ */
+export declare const FAQ_HOMEPAGE_READ_CAP = 24;
+/** The same bound for the footer list, which renders a fixed handful of links. */
+export declare const FAQ_FOOTER_READ_CAP = 24;

package/dist/features/faq/constants/read-caps.js

@@ -0,0 +1,29 @@
+/**
+ * How many FAQ rows the homepage and footer reads may fetch — F1 #36.
+ *
+ * 🛑 `getHomepageFAQs()` had NO `.limit()`, so it fetched every
+ * `showOnHomepage` row and the section sliced to `displayCount` in memory: 20
+ * Firestore reads per render of `/` — the most-crawled route in the app — to
+ * display 10, growing with every FAQ anyone flags. A real Hobby cost item
+ * rather than a correctness one, on a project that has already been paused for
+ * exceeding its quota.
+ *
+ * 🛑 A cap rather than exactly `displayCount`, because the section renders a
+ * "+N" badge from the full count: reading only what it shows would make that
+ * badge permanently "+0". The cap bounds the cost, and the renderer stops
+ * CLAIMING a number once the read saturates — an unknown count must never
+ * render as a precise one (Root Cause #72's rule, one surface over).
+ *
+ * 🛑 It lives in `constants/` and NOT on the repository, even though the
+ * repository is its main consumer: the homepage section renderer needs the
+ * same number, and importing a repository module there would put
+ * `providers/db-firebase` — and therefore firebase-admin — into the import
+ * chain of a render module (Root Cause #6/#24).
+ *
+ * @tag domain:faq
+ * @tag layer:constant
+ * @tag access:isomorphic
+ */
+export const FAQ_HOMEPAGE_READ_CAP = 24;
+/** The same bound for the footer list, which renders a fixed handful of links. */
+export const FAQ_FOOTER_READ_CAP = 24;

package/dist/features/faq/repository/faqs.repository.d.ts

@@ -8,8 +8,6 @@ export declare class FAQsRepository {
     constructor(repo: IRepository<FAQ>);
     findAll(query?: SieveQuery): Promise<PagedResult<FAQ>>;
     findByCategory(category: FAQCategory): Promise<FAQ[]>;
-    findForHomepage(): Promise<FAQ[]>;
-    findForFooter(): Promise<FAQ[]>;
     findById(id: string): Promise<FAQ | null>;
     create(data: Omit<FAQ, "id">): Promise<FAQ>;
     update(id: string, data: Partial<FAQ>): Promise<FAQ>;

package/dist/features/faq/repository/faqs.repository.js

@@ -3,6 +3,7 @@ import { DatabaseError } from "../../../errors/index.js";
 import { increment } from "../../../contracts/field-ops.js";
 import { FAQ_FIELDS } from "../../../constants/field-names.js";
 import { buildSearchTxt, matchesAllSearchTerms, parseSearchTxtQuery, } from "../../../utils/search-txt.js";
+import { FAQ_HOMEPAGE_READ_CAP, FAQ_FOOTER_READ_CAP } from "../constants/read-caps.js";
 import { FAQS_COLLECTION, createFAQId, slugifyQuestion, } from "../schemas/index.js";
 export class FAQsRepository {
     constructor(repo) {
@@ -23,22 +24,22 @@ export class FAQsRepository {
         });
         return result.data;
     }
-    async findForHomepage() {
-        const result = await this.repo.findAll({
-            filters: "isActive==true,showOnHomepage==true",
-            sort: "priority",
-            perPage: 10,
-        });
-        return result.data;
-    }
-    async findForFooter() {
-        const result = await this.repo.findAll({
-            filters: "isActive==true,showInFooter==true",
-            sort: "order",
-            perPage: 20,
-        });
-        return result.data;
-    }
+    /*
+     * 🛑 `findForHomepage()` and `findForFooter()` DELETED — F1 #35.
+     *
+     * Both had zero callers across `appkit/src`, `src` and `functions/src`: the
+     * homepage really uses `getHomepageFAQs()` and the footer `getFooterFAQs()`,
+     * further down this file. And the first was not merely dead, it was a loaded
+     * gun: `sort: "priority"` with no `order` resolves to ASCENDING in
+     * `base.ts`, and `isActive + showOnHomepage + priority ASC` is not a
+     * declared composite (the DESC pairing is, twice), so it returned `code 9
+     * FAILED_PRECONDITION` when measured. Behind `safeRead`'s fallback that is
+     * an empty FAQ section with no error anywhere (Root Cause #59).
+     *
+     * Ascending was also wrong on its own terms — it puts the LEAST important
+     * FAQs on a homepage. Deleting both is the fix; adding an index for a query
+     * nothing runs would have made the dead code look supported.
+     */
     async findById(id) {
         return this.repo.findById(id);
     }
@@ -170,6 +171,7 @@ export class FirebaseFAQsRepository extends BaseRepository {
             .where(FAQ_FIELDS.SHOW_ON_HOMEPAGE, "==", true)
             .where(FAQ_FIELDS.IS_ACTIVE, "==", true)
             .orderBy(FAQ_FIELDS.PRIORITY, "desc")
+            .limit(FAQ_HOMEPAGE_READ_CAP)
             .get();
         return snapshot.docs.map((doc) => this.mapDoc(doc));
     }
@@ -179,6 +181,7 @@ export class FirebaseFAQsRepository extends BaseRepository {
             .where(FAQ_FIELDS.SHOW_IN_FOOTER, "==", true)
             .where(FAQ_FIELDS.IS_ACTIVE, "==", true)
             .orderBy(FAQ_FIELDS.ORDER, "asc")
+            .limit(FAQ_FOOTER_READ_CAP)
             .get();
         return snapshot.docs.map((doc) => this.mapDoc(doc));
     }

package/dist/features/homepage/components/AdSlot.js

@@ -56,7 +56,15 @@ function ManualAdBanner({ ad }) {
  */
 export function AdSlot({ id, manualContent, className = "" }) {
     const [hydrated, setHydrated] = useState(false);
-    const { ad: activeAd } = useActiveAd(id);
+    const slotRef = useRef(null);
+    /*
+     * H3 — `useActiveAd` takes the sentinel below and does not fetch until it is
+     * near the viewport. The sentinel has to be rendered BEFORE the fetch
+     * resolves, or there is nothing to observe and the slot could never become
+     * "near" — so the early returns below happen AFTER this hook runs, not
+     * before, and the sentinel wrapper renders unconditionally once hydrated.
+     */
+    const { ad: activeAd } = useActiveAd(id, slotRef);
     useEffect(() => {
         setHydrated(true);
     }, []);
@@ -70,9 +78,7 @@ export function AdSlot({ id, manualContent, className = "" }) {
     }
     const resolvedManualContent = manualContent ?? (activeAd ? _jsx(ManualAdBanner, { ad: activeAd }) : null);
     const content = renderProvider(config.provider, config, resolvedManualContent);
-    if (!content)
-        return null;
-    return (_jsx(Div, { className: className, "data-ad-slot-id": id, "aria-label": "Advertisement", children: content }));
+    return (_jsx(Div, { ref: slotRef, className: className, "data-ad-slot-id": id, "aria-label": "Advertisement", children: content }));
 }
 // ---------------------------------------------------------------------------
 // Provider dispatch

package/dist/features/homepage/hooks/useActiveAd.d.ts

@@ -15,7 +15,24 @@ export type ActiveAdRecord = {
     requiresConsent?: boolean;
     creative: ActiveAdCreative;
 };
-export declare function useActiveAd(slotId: AdSlotId): {
+/**
+ * H3 — fetch the slot's ad only once it is actually NEAR the viewport.
+ *
+ * 🛑 The gap this closes: every `<AdSlot>` called this on mount unconditionally
+ * — four on the homepage alone, more on auctions/blog/promotions/search — so an
+ * ad slot at the bottom of a page a visitor never scrolls to still fired its
+ * request on first paint. `/api/ads` is CDN-cached (`s-maxage=600`), so this was
+ * never a Firestore-read problem; it is a wasted-request problem on exactly the
+ * connections that feel it most — a mobile visitor on a metered connection pays
+ * for five ad lookups to see the one above the fold.
+ *
+ * "Lazy/below-the-fold" is enforced with `enabled`, not by delaying the mount:
+ * the slot still reserves no layout space until it has content (avoiding CLS),
+ * and the query simply does not fire until `near` flips true.
+ */
+export declare function useActiveAd(slotId: AdSlotId, ref: {
+    current: Element | null;
+}): {
     loading: boolean;
     ad: ActiveAdRecord | null;
 };

package/dist/features/homepage/hooks/useActiveAd.js

@@ -1,13 +1,53 @@
 "use client";
+import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { apiClient } from "../../../http/ApiClient.js";
 import { AD_ENDPOINTS } from "../../../constants/api-endpoints.js";
-export function useActiveAd(slotId) {
+/**
+ * H3 — fetch the slot's ad only once it is actually NEAR the viewport.
+ *
+ * 🛑 The gap this closes: every `<AdSlot>` called this on mount unconditionally
+ * — four on the homepage alone, more on auctions/blog/promotions/search — so an
+ * ad slot at the bottom of a page a visitor never scrolls to still fired its
+ * request on first paint. `/api/ads` is CDN-cached (`s-maxage=600`), so this was
+ * never a Firestore-read problem; it is a wasted-request problem on exactly the
+ * connections that feel it most — a mobile visitor on a metered connection pays
+ * for five ad lookups to see the one above the fold.
+ *
+ * "Lazy/below-the-fold" is enforced with `enabled`, not by delaying the mount:
+ * the slot still reserves no layout space until it has content (avoiding CLS),
+ * and the query simply does not fire until `near` flips true.
+ */
+export function useActiveAd(slotId, ref) {
+    const [near, setNear] = useState(false);
+    useEffect(() => {
+        if (near)
+            return;
+        const el = ref.current;
+        if (!el || typeof IntersectionObserver === "undefined") {
+            // No observer in this environment (old browser, SSR hydration edge) —
+            // fail OPEN to fetching immediately rather than never rendering an ad at
+            // all. A slightly early request is a better failure than a permanently
+            // silent slot.
+            setNear(true);
+            return;
+        }
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((e) => e.isIntersecting))
+                setNear(true);
+        }, 
+        // 200px below the current viewport, so the ad has time to resolve before
+        // a visitor actually scrolls to it — "lazy" is not the same as "late".
+        { rootMargin: "200px" });
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [near, ref]);
     const { data, isPending } = useQuery({
         queryKey: ["active-ad", slotId],
         queryFn: () => apiClient.get(AD_ENDPOINTS.ACTIVE_BY_SLOT(slotId)),
         staleTime: 60000,
         retry: 1,
+        enabled: near,
     });
-    return { loading: isPending, ad: data ?? null };
+    return { loading: near && isPending, ad: data ?? null };
 }

package/dist/features/homepage/lib/section-renderer.js

@@ -5,6 +5,7 @@ import { cleanTitle, parseWelcomeDescription } from "./section-helpers.js";
 import { DEFAULT_TRUST_FEATURES, DEFAULT_SECURITY_ITEMS } from "./section-defaults.js";
 import { SECTION_TITLE, SECTION_COPY, VIEW_MORE_LABEL, WELCOME_TRUST_CHIPS, } from "../constants/section-copy.js";
 import { FAQ_CATEGORY_LABELS } from "../constants/faq-category-labels.js";
+import { FAQ_HOMEPAGE_READ_CAP } from "../../faq/constants/read-caps.js";
 import { AnnouncementBar, hashBannerMessage } from "../components/AnnouncementBar.js";
 import { HeroCarousel } from "../components/HeroCarousel.js";
 import { StatsCounterSection } from "../components/StatsCounterSection.js";
@@ -164,9 +165,18 @@ function renderSectionElement(section, newsletterFormSlot, faqItems, slides, liv
                 label: FAQ_CATEGORY_LABELS[cat] ?? cat,
             }));
             const slicedItems = cfg?.displayCount ? faqItems.slice(0, cfg.displayCount) : faqItems;
+            /*
+             * 🛑 `totalFaqs` is only a REAL total while the repository read did not
+             * saturate its cap (F1 #36 bounded that read). At the cap the true count
+             * is unknown, so the "+N" badge must not state one — `moreCount: 0`
+             * suppresses the badge while the "See all" link still invites. An
+             * unknown count rendered as a precise one is the defect, not the missing
+             * badge.
+             */
+            const readSaturated = faqItems.length >= FAQ_HOMEPAGE_READ_CAP;
             const totalFaqs = faqItems.length;
-            const hasMore = totalFaqs > slicedItems.length;
-            return (_jsx(FAQSection, { title: cleanTitle(cfg?.title) || SECTION_TITLE.faq, subtitle: cfg?.subtitle, tabs: tabs, showCategoryTabs: cfg?.showCategoryTabs ?? false, allowMultipleOpen: cfg?.allowMultipleOpen ?? false, defaultOpenCount: cfg?.defaultOpenCount ?? 0, items: slicedItems, viewMoreHref: cfg?.linkToFullPage ? ROUTES.PUBLIC.FAQS : undefined, viewMoreLabel: cfg?.viewMoreLabel || VIEW_MORE_LABEL.faq, hasMore: hasMore, moreCount: totalFaqs - slicedItems.length }));
+            const hasMore = totalFaqs > slicedItems.length || readSaturated;
+            return (_jsx(FAQSection, { title: cleanTitle(cfg?.title) || SECTION_TITLE.faq, subtitle: cfg?.subtitle, tabs: tabs, showCategoryTabs: cfg?.showCategoryTabs ?? false, allowMultipleOpen: cfg?.allowMultipleOpen ?? false, defaultOpenCount: cfg?.defaultOpenCount ?? 0, items: slicedItems, viewMoreHref: cfg?.linkToFullPage ? ROUTES.PUBLIC.FAQS : undefined, viewMoreLabel: cfg?.viewMoreLabel || VIEW_MORE_LABEL.faq, hasMore: hasMore, moreCount: readSaturated ? 0 : totalFaqs - slicedItems.length }));
         }
         case "blog-articles": {
             const cfg = config;

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

@@ -37,6 +37,9 @@ export interface AppLayoutShellProps {
     promotionsHref?: string;
     cartHref: string;
     wishlistHref?: string;
+    /** D9 — chat. Absent entirely when `siteSettings.chat.enabled !== true`; the consumer decides, this shell only forwards. */
+    messagesHref?: string;
+    unreadMessageCount?: number;
     /** Auth UID passed through to TitleBar for wishlist merge-on-login and sync. */
     userId?: string | null;
     profileHref: string;
@@ -125,4 +128,4 @@ export interface AppLayoutShellProps {
         };
     };
 }
-export declare function AppLayoutShell({ children, navItems, sidebarItems, sidebarSections, sidebarPrimaryActions, sidebarTitle, hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, registerHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle, suppressDashboardNav, hideSidebarToggle, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar, sidebarProfileLabels, eventBannerSlot, showBottomNav, onTourStart, contentClassName, lightBackground, darkBackground, }: AppLayoutShellProps): React.JSX.Element;
+export declare function AppLayoutShell({ children, navItems, sidebarItems, sidebarSections, sidebarPrimaryActions, sidebarTitle, hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, messagesHref, unreadMessageCount, userId, profileHref, loginHref, registerHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle, suppressDashboardNav, hideSidebarToggle, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar, sidebarProfileLabels, eventBannerSlot, showBottomNav, onTourStart, contentClassName, lightBackground, darkBackground, }: AppLayoutShellProps): React.JSX.Element;

package/dist/features/layout/AppLayoutShell.js

@@ -127,7 +127,7 @@ function SidebarContent({ sidebarItems, sidebarSections, sidebarPrimaryActions,
                     ].join(" "), children: action.label }, `${action.href}-${action.label}`))) })), isAuthenticated && (_jsx(CollapsibleNavGroup, { title: labels.sectionTitle, hasActive: !!activeProfileLink, children: _jsxs(Ul, { spacing: "2xs", children: [_jsx(Li, { children: _jsx(TextLink, { href: profileHref, variant: "none", className: activeProfileLink?.href === profileHref ? navItemActiveClass : navItemClass, "aria-current": activeProfileLink?.href === profileHref ? "page" : undefined, children: labels.profile }) }), userOrdersHref && (_jsx(Li, { children: _jsx(TextLink, { href: userOrdersHref, variant: "none", className: activeProfileLink?.href === userOrdersHref ? navItemActiveClass : navItemClass, "aria-current": activeProfileLink?.href === userOrdersHref ? "page" : undefined, children: labels.orders }) })), userWishlistHref && (_jsx(Li, { children: _jsx(TextLink, { href: userWishlistHref, variant: "none", className: activeProfileLink?.href === userWishlistHref ? navItemActiveClass : navItemClass, "aria-current": activeProfileLink?.href === userWishlistHref ? "page" : undefined, children: labels.wishlist }) })), userSettingsHref && (_jsx(Li, { children: _jsx(TextLink, { href: userSettingsHref, variant: "none", className: activeProfileLink?.href === userSettingsHref ? navItemActiveClass : navItemClass, "aria-current": activeProfileLink?.href === userSettingsHref ? "page" : undefined, children: labels.settings }) }))] }) })), isAuthenticated && user?.stats && (_jsxs(Div, { layout: "grid", gap: "2", className: "grid-cols-2", children: [user.stats.totalOrders != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "leading-none", color: "primary", size: "lg", weight: "bold", children: user.stats.totalOrders }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Orders" })] })), user.stats.reviewsCount != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "leading-none", color: "primary", size: "lg", weight: "bold", children: user.stats.reviewsCount }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Reviews" })] })), user.stats.auctionsWon != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "leading-none", color: "primary", size: "lg", weight: "bold", children: user.stats.auctionsWon }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Auctions Won" })] })), user.stats.itemsSold != null && (_jsxs(Div, { className: CLS_STAT_BOX, children: [_jsx(Text, { className: "leading-none", color: "primary", size: "lg", weight: "bold", children: user.stats.itemsSold }), _jsx(Text, { className: CLS_STAT_LABEL, children: "Items Sold" })] }))] })), isAuthenticated && isAdminOrSeller && (adminHref || resolvedStoreHref) && (_jsx(CollapsibleNavGroup, { title: labels.dashboardSectionTitle, hasActive: !!activeDashboardLink, children: _jsxs(Ul, { spacing: "2xs", children: [adminHref && role === "admin" && (_jsx(Li, { children: _jsx(TextLink, { href: adminHref, variant: "none", className: activeDashboardLink?.href === adminHref ? navItemActiveClass : navItemClass, "aria-current": activeDashboardLink?.href === adminHref ? "page" : undefined, children: labels.adminDashboard }) })), resolvedStoreHref && isAdminOrSeller && (_jsx(Li, { children: _jsx(TextLink, { href: resolvedStoreHref, variant: "none", className: activeDashboardLink?.href === resolvedStoreHref ? navItemActiveClass : navItemClass, "aria-current": activeDashboardLink?.href === resolvedStoreHref ? "page" : undefined, children: labels.storeDashboard }) }))] }) })), normalizedSections.map((section, sectionIndex) => (_jsx(CollapsibleSidebarSection, { section: section, navItemClass: navItemClass, navItemActiveClass: navItemActiveClass, activeHref: activeHref }, `sidebar-section-${sectionIndex}`))), (sidebarLocaleSlot || showThemeToggleInSidebar || (isAuthenticated && onLogout)) && (_jsxs(Stack, { border: "default", className: "border-t border-[var(--appkit-color-border-subtle)]", padding: "t-md", gap: "3", children: [sidebarLocaleSlot, showThemeToggleInSidebar && (_jsxs("button", { type: "button", onClick: toggleTheme, className: "flex w-full items-center justify-end gap-[var(--appkit-space-3)] rounded-lg px-[var(--appkit-space-3)] py-[var(--appkit-space-2)] text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text-muted)] transition-colors hover:bg-primary-surface hover:text-primary-800", children: [_jsx(Span, { "aria-hidden": "true", children: theme === "dark" ? "☀️" : "🌙" }), activeThemeName] })), isAuthenticated && onLogout && (_jsx("button", { type: "button", onClick: () => { onLogout(); onAfterLogout(); }, className: CLS_LOGOUT_BTN, children: labels.logout }))] }))] }));
 }
 // ─── Main component ────────────────────────────────────────────────────────────
-export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarSections, sidebarPrimaryActions, sidebarTitle = "Navigation", hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, userId, profileHref, loginHref, registerHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle = false, suppressDashboardNav = false, hideSidebarToggle = false, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar = false, sidebarProfileLabels, eventBannerSlot, showBottomNav = true, onTourStart, contentClassName, lightBackground = DEFAULT_LIGHT_BG, darkBackground = DEFAULT_DARK_BG, }) {
+export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarSections, sidebarPrimaryActions, sidebarTitle = "Navigation", hiddenNavItems, user, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, cartHref, wishlistHref, messagesHref, unreadMessageCount, userId, profileHref, loginHref, registerHref, homeHref, shopHref, footer, searchSlot, searchSlotRenderer, titleBarNavSlot, titleBarNotificationSlot, titleBarDevSlot, titleBarPromoStripText, showThemeToggle = false, suppressDashboardNav = false, hideSidebarToggle = false, onLogout, adminHref, storeHref, sellerHref, userOrdersHref, userWishlistHref, userSettingsHref, sidebarLocaleSlot, showThemeToggleInSidebar = false, sidebarProfileLabels, eventBannerSlot, showBottomNav = true, onTourStart, contentClassName, lightBackground = DEFAULT_LIGHT_BG, darkBackground = DEFAULT_DARK_BG, }) {
     // QueryClientProvider used to be created here so AppLayoutShell could stand
     // alone. The real cause of the 2026-06-10/11 "No QueryClient set" prod crash
     // turned out to be a peer-dep duplicate of @tanstack/query-core under
@@ -194,7 +194,7 @@ export function AppLayoutShell({ children, navItems, sidebarItems = [], sidebarS
             opacity: darkBackground.overlay?.opacity ?? 0,
         },
     };
-    return (_jsx(_Fragment, { children: _jsxs(Stack, { className: "min-h-screen w-full overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, siteLogoUrl: siteLogoUrl, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, userId: userId, profileHref: profileHref, loginHref: loginHref, registerHref: registerHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onTourStart: onTourStart, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(NavbarWithSettings, { navItems: navItems, hiddenNavItems: hiddenNavItems, permissions: authUser?.permissions }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot), eventBannerSlot] }), _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { layout: "flex", className: "relative w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsx(SidebarUserHeader, { user: user, onClose: () => setSidebarOpen(false) })) : (_jsx(SidebarGuestHeader, { sidebarTitle: sidebarTitle, onClose: () => setSidebarOpen(false) })), onClose: () => setSidebarOpen(false), children: sidebarContent }), _jsx(Main, { id: "main-content", 
+    return (_jsx(_Fragment, { children: _jsxs(Stack, { className: "min-h-screen w-full overflow-x-clip transition-colors duration-300", children: [_jsx(BackgroundRenderer, { mode: theme === "dark" ? "dark" : "light", lightMode: normalizedLightBackground, darkMode: normalizedDarkBackground }), _jsxs(Div, { ref: headerRef, className: "sticky top-0 z-50 w-full", children: [_jsx(TitleBar, { onToggleSidebar: handleTogglePublicSidebar, sidebarOpen: sidebarOpen, onSearchToggle: () => setSearchOpen((prev) => !prev), searchOpen: searchOpen, brandName: brandName, brandShortName: brandShortName, siteLogoUrl: siteLogoUrl, logoHref: logoHref, promotionsHref: promotionsHref, cartHref: cartHref, wishlistHref: wishlistHref, messagesHref: messagesHref, unreadMessageCount: unreadMessageCount, userId: userId, profileHref: profileHref, loginHref: loginHref, registerHref: registerHref, user: user, navSlot: titleBarNavSlot, notificationSlot: titleBarNotificationSlot, devSlot: titleBarDevSlot, promoStripText: titleBarPromoStripText, isDark: theme === "dark", onToggleTheme: showThemeToggle ? toggleTheme : undefined, onTourStart: onTourStart, onBeforeToggleDashboardNav: handleBeforeDashboardNavToggle, suppressDashboardNav: suppressDashboardNav, hideSidebarToggle: hideSidebarToggle }), _jsx(NavbarWithSettings, { navItems: navItems, hiddenNavItems: hiddenNavItems, permissions: authUser?.permissions }), searchOpen && (searchSlotRenderer ? searchSlotRenderer(() => setSearchOpen(false)) : searchSlot), eventBannerSlot] }), _jsx(AutoBreadcrumbs, {}), _jsxs(Div, { layout: "flex", className: "relative w-full flex-1 overflow-x-clip", children: [_jsx(SidebarLayout, { isOpen: sidebarOpen, ariaLabel: "Secondary navigation", header: user ? (_jsx(SidebarUserHeader, { user: user, onClose: () => setSidebarOpen(false) })) : (_jsx(SidebarGuestHeader, { sidebarTitle: sidebarTitle, onClose: () => setSidebarOpen(false) })), onClose: () => setSidebarOpen(false), children: sidebarContent }), _jsx(Main, { id: "main-content", 
                             // No bottom-chrome clearance here on purpose. FooterLayout is a
                             // SIBLING rendered after <Main>, so a margin here only gaps
                             // main-to-footer — it never clears the bottom of the page, which is

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

@@ -33,6 +33,9 @@ export interface TitleBarLayoutProps {
      * navigates to the user notifications page by default.
      */
     notificationsHref?: string;
+    /** D9 — chat. Rendered beside the notification bell when provided; absent entirely when chat is off (`siteSettings.chat.enabled !== true`), not merely empty. */
+    messagesHref?: string;
+    unreadMessageCount?: number;
     loginHref?: string;
     registerHref?: string;
     user?: TitleBarUser | null;
@@ -73,4 +76,4 @@ export interface TitleBarLayoutProps {
  *
  * Receives all domain data as props — zero domain imports.
  */
-export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, unreadNotificationCount, notificationsHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): React.JSX.Element;
+export declare function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount, cartHref, cartCount, profileHref, unreadNotificationCount, notificationsHref, messagesHref, unreadMessageCount, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle, id, className, }: TitleBarLayoutProps): React.JSX.Element;

package/dist/features/layout/TitleBarLayout.js

@@ -39,7 +39,7 @@ const countBadge = "appkit-hand-badge absolute -top-0.5 flex items-center justif
  *
  * Receives all domain data as props — zero domain imports.
  */
-export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, brandShortName, siteLogoUrl, logoHref, promotionsHref, compareHref, wishlistHref, wishlistCount = 0, cartHref, cartCount = 0, profileHref, unreadNotificationCount = 0, notificationsHref, loginHref, registerHref, user, notificationSlot, devSlot, navSlot, promoStripText, isDark = false, onToggleTheme, onTourStart, hasDashboardNav, onToggleDashboardNav, hideSidebarToggle = false, id = "titlebar", className = "", }) {
+export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, searchOpen, brandName, 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, onTourStart, 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;
@@ -52,6 +52,10 @@ export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, s
     // icon (per layout request). Falls back to invisible when no href is set;
     // the count badge mirrors the wishlist/cart pattern.
     const notificationsEl = notificationsHref ? (_jsxs(Link, { href: notificationsHref, "aria-label": `Notifications${unreadNotificationCount > 0 ? `, ${unreadNotificationCount} unread` : ""}`, className: `relative ${iconBtn}`, children: [_jsx(Icon, { name: "notification", size: "lg" }), unreadNotificationCount > 0 && (_jsx(Span, { className: countBadge, children: unreadNotificationCount > 99 ? "99+" : unreadNotificationCount }))] })) : null;
+    // D9 — chat. Same shape as the notification bell: absent entirely when no
+    // href is supplied (the consumer only passes one when
+    // `siteSettings.chat.enabled === true`), never rendered-but-disabled.
+    const messagesEl = messagesHref ? (_jsxs(Link, { href: messagesHref, "aria-label": `Messages${unreadMessageCount > 0 ? `, ${unreadMessageCount} unread` : ""}`, className: `relative ${iconBtn}`, children: [_jsx(Icon, { name: "message", size: "lg" }), unreadMessageCount > 0 && (_jsx(Span, { className: countBadge, children: unreadMessageCount > 99 ? "99+" : unreadMessageCount }))] })) : null;
     const wishlistEl = wishlistHref ? (_jsxs(Link, { href: wishlistHref, "aria-label": `Wishlist${wishlistCount > 0 ? `, ${wishlistCount} items` : ""}`, className: `relative ${iconBtn}`, "data-tour": "nav-wishlist", children: [_jsx(Icon, { name: "wishlist", size: "lg" }), wishlistCount > 0 && (_jsx(Span, { className: countBadge, children: wishlistCount > 9 ? "9+" : wishlistCount }))] })) : null;
     const cartEl = cartHref ? (_jsxs(Link, { href: cartHref, "aria-label": `Cart${cartCount > 0 ? `, ${cartCount} items` : ""}`, className: `relative ${iconBtn}`, "data-tour": "nav-cart", children: [_jsx(Icon, { name: "cart", size: "lg" }), cartCount > 0 && (_jsx(Span, { className: countBadge, children: cartCount > 9 ? "9+" : cartCount }))] })) : null;
     const profileEl = profileHref ? (_jsx(Link, { href: profileHref, "aria-label": user ? `Profile — ${user.displayName ?? user.email}` : "Sign in", className: `relative ${iconBtn}`, "data-tour": "nav-profile", children: _jsx(Avatar, { src: user?.photoURL ?? undefined, name: user?.displayName ?? user?.email ?? undefined, alt: user?.displayName ?? "Profile", size: "sm" }) })) : null;
@@ -59,9 +63,9 @@ export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, s
     // Mirrors with TB1 so Register (the primary CTA) keeps the outer, more
     // reachable edge instead of ending up tucked inside after the flip.
     _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 || wishlistEl || cartEl || profileEl);
+    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, { justify: "between", gap: "none", reverse: "hand", className: "relative h-14", children: [_jsx(Row, { gap: "3", children: _jsxs(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center gap-[var(--appkit-space-2)] transition-opacity hover:opacity-80", children: [_jsx(Div, { className: "flex md:hidden", children: _jsx(SiteMark, { title: brandShortName ?? brandName, size: "sm" }) }), _jsx(SiteLogo, { title: brandName, size: "md" })] }) }), _jsx(Row, { className: "hidden md:flex absolute inset-y-0 left-1/2 -translate-x-1/2", 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: brandName, size: "lg" }) }) }), _jsxs(Row, { gap: "xs", reverse: "hand", children: [devSlot, navSlot, compareEl, notificationSlot, notificationsEl && _jsx(Div, { className: "hidden lg:flex", children: notificationsEl }), 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, { justify: "between", gap: "none", reverse: "hand", className: "relative h-14", children: [_jsx(Row, { gap: "3", children: _jsxs(Link, { href: logoHref, "aria-label": brandName, className: "flex items-center gap-[var(--appkit-space-2)] transition-opacity hover:opacity-80", children: [_jsx(Div, { className: "flex md:hidden", children: _jsx(SiteMark, { title: brandShortName ?? brandName, size: "sm" }) }), _jsx(SiteLogo, { title: brandName, size: "md" })] }) }), _jsx(Row, { className: "hidden md:flex absolute inset-y-0 left-1/2 -translate-x-1/2", 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: brandName, size: "lg" }) }) }), _jsxs(Row, { gap: "xs", reverse: "hand", 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
                                         ? profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })
                                         : authButtonsEl ?? (profileEl && _jsx(Div, { className: "hidden lg:flex", children: profileEl })), searchBtn, promotionsEl, tourBtn, themeBtn, hamburgerBtn] })] }), hasTb2 && (
                     // `justify="end"` is CORRECT alongside `reverse="hand"` — do not
@@ -70,5 +74,5 @@ export function TitleBarLayout({ onToggleSidebar, sidebarOpen, onSearchToggle, s
                     // left-hand mode, in mirrored order (profile leftmost). Adding a raw
                     // `justify-start` className would also trip audit-inline-styles'
                     // RAW_JUSTIFY_ON_ROW.
-                    _jsxs(Row, { border: "subtle", as: "nav", "aria-label": "Account actions", justify: "end", gap: "xs", reverse: "hand", className: "flex lg:hidden h-10 border-t px-[var(--appkit-space-1)]", children: [notificationsEl, wishlistEl, cartEl, profileEl] }))] })] }));
+                    _jsxs(Row, { border: "subtle", as: "nav", "aria-label": "Account actions", justify: "end", gap: "xs", reverse: "hand", className: "flex lg:hidden h-10 border-t px-[var(--appkit-space-1)]", children: [notificationsEl, messagesEl, wishlistEl, cartEl, profileEl] }))] })] }));
 }

package/dist/features/media/AvatarUpload.js

@@ -2,7 +2,14 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { IMAGE_ACCEPT_ATTR } from "../../_internal/shared/media/limits.js";
 import { useEffect, useRef, useState } from "react";
-import { Alert, Button, Div, Input, Progress, Row, Stack, Text, useToast } from "../../ui/index.js";
+import { Alert } from "../../ui/components/Alert.js";
+import { Button } from "../../ui/components/Button.js";
+import { Div } from "../../ui/components/Div.js";
+import { Input } from "../../ui/components/Input.js";
+import { Progress } from "../../ui/components/Progress.js";
+import { Row, Stack } from "../../ui/components/Layout.js";
+import { Text } from "../../ui/components/Typography.js";
+import { useToast } from "../../ui/components/Toast.js";
 import { useMediaUpload } from "./hooks/useMedia.js";
 import { ImageCropModal } from "./modals/ImageCropModal.js";
 import { AvatarDisplay } from "../../ui/components/AvatarDisplay.js";

package/dist/features/media/MediaAvatar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { MediaImage } from "./MediaImage.js";
-import { Div } from "../../ui/index.js";
+import { Div } from "../../ui/components/Div.js";
 const sizeClasses = {
     sm: "w-8 h-8",
     md: "w-10 h-10",

package/dist/features/media/MediaImage.js

@@ -2,7 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from "next/image.js";
 import { useEffect, useRef, useState } from "react";
-import { Div, Row, Span } from "../../ui/index.js";
+import { Div } from "../../ui/components/Div.js";
+import { Row } from "../../ui/components/Layout.js";
+import { Span } from "../../ui/components/Typography.js";
 import { ROUNDED_MAP, SHADOW_MAP } from "../../ui/components/surface-tokens.js";
 import { MEDIA_PROXY_PREFIX, resolveMediaUrl } from "../../utils/media-url.js";
 const SIZE_HINTS = {

package/dist/features/media/MediaLightbox.js

@@ -3,7 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useCallback, useRef, useState } from "react";
 import { X, ZoomIn, ZoomOut, Maximize, Minimize, ChevronLeft, ChevronRight, RotateCcw, } from "lucide-react";
 import { MediaImage } from "./MediaImage.js";
-import { Button, Div, Row, Span } from "../../ui/index.js";
+import { Button } from "../../ui/components/Button.js";
+import { Div } from "../../ui/components/Div.js";
+import { Row } from "../../ui/components/Layout.js";
+import { Span } from "../../ui/components/Typography.js";
 const CLS_CLOSE_HOVER = "hover:!bg-error-surface";
 const MIN_ZOOM = 1;
 const MAX_ZOOM = 4;

package/dist/features/media/MediaPickerModal.js

@@ -3,7 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeError } from "../../errors/normalize.js";
 import React, { useState, useCallback } from "react";
 import { Modal } from "../../ui/components/Modal.js";
-import { Button, Div, Input, Label, Row, Stack, Text, Alert } from "../../ui/index.js";
+import { Button } from "../../ui/components/Button.js";
+import { Div } from "../../ui/components/Div.js";
+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 { MediaUploadField } from "./upload/MediaUploadField.js";
 import { useMediaUpload, useMediaCleanup } from "./index.js";

package/dist/features/media/MediaVideo.js

@@ -1,7 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useEffect } from "react";
-import { Div, Row, Span } from "../../ui/index.js";
+import { Div } from "../../ui/components/Div.js";
+import { Row } from "../../ui/components/Layout.js";
+import { Span } from "../../ui/components/Typography.js";
 import { resolveMediaUrl, resolveVideoUrl, getYouTubeVideoId } from "../../utils/media-url.js";
 import { useSiteSettings } from "../../core/hooks/useSiteSettings.js";
 export function MediaVideo({ src, thumbnailUrl, alt = "Video", controls = true, autoPlayMuted = false, loop = false, trimStart, trimEnd, objectFit = "cover", watermark, }) {

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

@@ -0,0 +1,3 @@
+export declare function ConversationThreadView({ conversationId }: {
+    conversationId: string;
+}): import("react").JSX.Element | null;