@mohasinac/appkit 4.58.0 → 4.60.0

package/dist/features/layout/AutoBreadcrumbs.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Link from "next/link.js";
 import { usePathname } from "next/navigation.js";
+import { LISTING_TYPE_REGISTRY } from "../../_internal/shared/listing-types/_registry.js";
 import { Div, Li, Nav, Ol, Span } from "../../ui/index.js";
 /** Map of path segments → human-readable labels. */
 const DEFAULT_PATH_LABELS = {
@@ -28,6 +29,36 @@ const DEFAULT_PATH_LABELS = {
     view: "View",
     add: "Add",
     edit: "Edit",
+    /*
+     * Real public route segments whose title-cased form is wrong or ugly.
+     * Anything absent here still renders — `capitalize()` title-cases every
+     * word, so `digital-codes` reads "Digital Codes" unaided. These are only the
+     * ones where casing alone does not get there (`faqs` -> "Faqs",
+     * `pre-orders` -> "Pre Orders").
+     */
+    faqs: "FAQs",
+    "pre-orders": "Pre-Orders",
+    "prize-draws": "Prize Draws",
+    "digital-codes": "Digital Codes",
+    beys: "Beyblades",
+    parts: "Parts",
+    brands: "Brands",
+    franchise: "Franchise",
+    bundles: "Bundles",
+    stores: "Stores",
+    sellers: "Sellers",
+    events: "Events",
+    reviews: "Reviews",
+    auctions: "Auctions",
+    promotions: "Promotions",
+    classified: "Classified",
+    live: "Live Items",
+    art: "Art",
+    stickers: "Stickers",
+    catalogue: "Catalogue",
+    credits: "Credits",
+    about: "About",
+    contact: "Contact",
 };
 // Common locale codes filtered out of path segments
 const LOCALE_CODES = new Set([
@@ -51,8 +82,89 @@ const LOCALE_CODES = new Set([
     "pa",
     "ur",
 ]);
+/*
+ * ── 🛑 THE LAST SEGMENT OF A DETAIL ROUTE IS DATA, NOT A LABEL ─────────────
+ *
+ * This component only sees `usePathname()`, so it cannot know which segments
+ * are dynamic. Title-casing one anyway produced, verbatim in production:
+ *
+ *     Home / Products / Product beyblade x xtreme stadium bx 10
+ *
+ * while the page's OWN breadcrumb, rendered directly beneath it, correctly
+ * read `Xtreme Stadiums › Beyblade X Xtreme Stadium (BX-10)`. Only the page
+ * holds the real title; a pathname cannot be turned into one.
+ *
+ * So an entity id is OMITTED rather than guessed at — the breadcrumb simply
+ * ends at `Home / Products`, which is true, useful and navigable.
+ *
+ * 🛑 CORRECTED 2026-10-21 — this read "Every detail page in this app renders
+ * its own trail with real titles, which is why dropping the crumb loses
+ * nothing", and that is FALSE. Measured across five detail views: only
+ * `ProductDetailPageView` renders one. `AuctionDetailPageView`,
+ * `StoreDetailLayoutView`, `BlogPostView` and `BrandDetailPageView` render
+ * NONE, so on those four the shortened trail above is the only breadcrumb
+ * there is.
+ *
+ * That does not change the decision — a trail ending at `Home / Auctions` is
+ * still correct, and title-casing an id produced
+ * `Product beyblade x xtreme stadium bx 10`, which was not. But the
+ * justification matters, because the false version invites the obvious next
+ * move: "detail pages have their own trail, so suppress this component on
+ * detail routes entirely". That would strip the breadcrumb from those four
+ * surfaces. The duplicate is handled by `:has()` in
+ * `AutoBreadcrumbs.style.css`, which fires only where a page actually
+ * renders its own.
+ *
+ * 🛑 The listing prefixes are READ FROM `LISTING_TYPE_REGISTRY`, never
+ * re-listed here. Two enumerations of one union always drift (Root Cause #42 /
+ * #61), and that registry is already the single source for all nine listing
+ * types' `slugPrefix`.
+ *
+ * The non-listing prefixes below cannot come from there because no registry
+ * covers them; they are the documented slug-prefix system in CLAUDE.md, and
+ * only the ones that actually appear in a PUBLIC url are listed — an
+ * `order-`/`payout-`/`notif-` id never reaches a public breadcrumb.
+ *
+ * 🛑 This does NOT catch a prefix-less slug: `/beys/variares-d-d` still renders
+ * "Variares D D". That is a known, accepted limitation rather than an
+ * oversight — it is readable, it is not an id-shaped string, and the bey page's
+ * own breadcrumb carries the proper name. Fixing it properly means the page
+ * supplying its leaf label, which is plumbing this component cannot do alone.
+ */
+const NON_LISTING_PUBLIC_PREFIXES = [
+    "category-",
+    "brand-",
+    "store-",
+    "blog-",
+    "event-",
+    "review-",
+    "faq-",
+    "coupon-",
+    "group-",
+    "sublisting-",
+    "user-",
+    "mycatalog-",
+    "catalog-",
+    "scammer-",
+];
+function isOpaqueEntityId(seg) {
+    const listingPrefixes = Object.values(LISTING_TYPE_REGISTRY)
+        .map((p) => p.slugPrefix)
+        .filter((p) => Boolean(p));
+    return [...listingPrefixes, ...NON_LISTING_PUBLIC_PREFIXES].some((p) => seg.startsWith(p));
+}
+/**
+ * Title-case a hyphenated path segment — EVERY word, not just the first.
+ *
+ * The previous implementation uppercased only `charAt(0)`, so a multi-word
+ * segment came out as sentence-case mush ("Pre orders", "Digital codes").
+ */
 function capitalize(s) {
-    return s.charAt(0).toUpperCase() + s.slice(1).replace(/-/g, " ");
+    return s
+        .split("-")
+        .filter(Boolean)
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(" ");
 }
 /**
  * AutoBreadcrumbs — generates breadcrumb navigation automatically from the
@@ -69,15 +181,62 @@ export function AutoBreadcrumbs({ pathLabels, separator = "/", className = "", r
     const localePrefix = hasLocalePrefix ? `/${rawSegments[0]}` : "";
     const segments = rawSegments.filter((seg) => !LOCALE_CODES.has(seg.toLowerCase()) &&
         !/^[0-9a-f-]{8,}$/.test(seg) &&
-        !/^\d+$/.test(seg));
+        !/^\d+$/.test(seg) &&
+        /* An entity id carries no label a pathname can recover — see above. */
+        !isOpaqueEntityId(seg));
     if (segments.length === 0)
         return null;
+    /*
+     * 🛑 NOT RENDERED INSIDE A DASHBOARD, and the argument is redundancy rather
+     * than taste.
+     *
+     * On `/admin/products` this band reads "Home / Admin / Products" directly
+     * above an `<h1>Products</h1>` — which `DataListingView` and `FormShell`
+     * both render now — while the sidebar has that group open and its link
+     * marked via `activePath`. Three statements of the same position, in a
+     * ~38px strip that is NOT sticky, so it scrolls away and contributes
+     * nothing after the first screen. It is pure fold cost: measured, the
+     * dashboard chrome ran to ~243px before the first row of content.
+     *
+     * 🛑 The suppression is keyed on being INSIDE A DASHBOARD, never on "is a
+     * detail route". A previous version of this file claimed every detail page
+     * renders its own trail; measured, only 1 of 5 does — auction, store, blog
+     * and brand render none, so a detail-route rule would have stripped the
+     * breadcrumb from four public pages that have nothing else. A dashboard has
+     * a sidebar and an h1; a public detail page has neither.
+     *
+     * The regex matches the LOCALE-STRIPPED segments, so it is unaffected by
+     * whether a `/en` prefix is present.
+     */
+    const isDashboard = ["admin", "store", "user"].includes(segments[0]?.toLowerCase() ?? "");
+    if (isDashboard)
+        return null;
     const crumbs = segments.map((seg, i) => ({
         label: labels[seg] ?? capitalize(seg),
         href: `${localePrefix}/${segments.slice(0, i + 1).join("/")}`,
     }));
     const allCrumbs = [{ label: "Home", href: localePrefix || "/" }, ...crumbs];
-    return (_jsx(Div, { border: "default", className: "border-y /80 backdrop-blur supports-[backdrop-filter]:bg-white/90 dark:supports-[backdrop-filter]:bg-slate-950/85", surface: "default", children: _jsx(Div, { className: "container mx-auto max-w-[1920px] px-[var(--appkit-space-5)] sm:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)]", padding: "y-xs", children: _jsx(Nav, { "aria-label": "Breadcrumb", className: className, children: _jsx(Ol, { className: "flex items-center gap-[var(--appkit-space-2)] flex-wrap", size: "sm", children: allCrumbs.map((crumb, index) => {
+    /*
+     * 🛑 The `/80` that used to sit in the root className was NOT leading,
+     * which is why the hand-sweep that fixed the other 28 missed it and
+     * `audit-dead-css-classes` caught it: the regexes assumed
+     * `className="/80 …"`, and this was `className="border-y /80 …"`.
+     *
+     * It is the same codemod residue — a stripped `bg-white/80` leaving its
+     * modifier — and the same silent no-op. Dropped rather than restored: the
+     * element already takes `surface="default"`, so the translucency it was
+     * reaching for belongs in that token, and the two `supports-[…]` rules
+     * beside it already handle the backdrop-filter case with their own alphas.
+     *
+     * 🛑 AND THIS COMMENT LIVES HERE, ABOVE `return`, FOR A REASON. It was
+     * written as a `{/* … *␣/}` block between `return (` and the root element —
+     * i.e. in EXPRESSION position, where JSX comment syntax is not valid. That
+     * does not parse, and it took the whole appkit build down (TS1005 ×3,
+     * TS1128, TS1109). A brace-balance check passed it, because `{/* … *␣/}` is
+     * brace-balanced; only `tsc` sees it. Never open a JSX comment before the
+     * first element.
+     */
+    return (_jsx(Div, { border: "default", className: "appkit-auto-breadcrumbs border-y backdrop-blur supports-[backdrop-filter]:bg-white/90 dark:supports-[backdrop-filter]:bg-slate-950/85", surface: "default", children: _jsx(Div, { className: "container mx-auto max-w-[1920px] px-[var(--appkit-space-5)] sm:px-[var(--appkit-space-6)] lg:px-[var(--appkit-space-8)]", padding: "y-xs", children: _jsx(Nav, { "aria-label": "Breadcrumb", className: className, children: _jsx(Ol, { className: "flex items-center gap-[var(--appkit-space-2)] flex-wrap", size: "sm", children: allCrumbs.map((crumb, index) => {
                         const isLast = index === allCrumbs.length - 1;
                         return (_jsxs(Li, { layout: "flex-center", gap: "2", children: [isLast ? (_jsx(Span, { "aria-current": "page", color: "primary", children: crumb.label })) : renderLink ? (renderLink(crumb.href, crumb.label)) : (_jsx(Link, { href: crumb.href, className: "text-[var(--appkit-color-text-muted)] hover:text-zinc-950 dark:hover:text-white transition-colors", children: crumb.label })), !isLast && (_jsx(Span, { className: "text-[var(--appkit-color-text-muted)]/90 select-none", color: "muted", "aria-hidden": "true", children: separator }))] }, crumb.href));
                     }) }) }) }) }));

package/dist/features/layout/AutoBreadcrumbs.style.css

@@ -0,0 +1,45 @@
+/*
+ * One breadcrumb per page.
+ *
+ * `AppLayoutShell` renders `<AutoBreadcrumbs>` on every route, derived from
+ * `usePathname()`. Some pages ALSO render their own trail with real entity
+ * titles — `ProductDetailPageView`, `CategoryDetailPageView`, the scam
+ * registry — and those pages showed two breadcrumbs stacked. `AutoBreadcrumbs`'
+ * own header records seeing exactly that in production:
+ *
+ *     Home / Products / Product beyblade x xtreme stadium bx 10
+ *     Xtreme Stadiums › Beyblade X Xtreme Stadium (BX-10)
+ *
+ * and responded by shortening the top one rather than hiding it.
+ *
+ * ── 🛑 WHY CSS AND NOT REACT ────────────────────────────────────────────────
+ *
+ * A child cannot hide an already-rendered ancestor's sibling. The shell
+ * renders `<AutoBreadcrumbs>` BEFORE `{children}`, so a context or a state
+ * flag the page sets arrives a frame late — and hiding a full-width strip one
+ * frame after paint is a layout shift at the top of the document, which is the
+ * exact defect just fixed on the announcement bar (CLS 0.822). The fix cannot
+ * be allowed to become the same bug.
+ *
+ * `:has()` resolves it during the first style pass: no state, no effect, no
+ * frame where both are visible.
+ *
+ * 🛑 AND IT DEGRADES SAFELY. Where `:has()` is unsupported the rule simply
+ * does not match and both breadcrumbs render — today's behaviour. That is the
+ * right direction for a progressive enhancement: the failure mode is
+ * redundancy, never a missing breadcrumb.
+ *
+ * 🛑 SCOPED TO THE AUTOMATIC ONE. The page's trail is the one with real
+ * titles, so the generic one yields. Suppressing by ROUTE instead would have
+ * been wrong: only one of five detail views measured actually renders its own
+ * trail, so a route-shaped rule would strip the breadcrumb entirely from
+ * auction, store, blog and brand pages — see the correction in
+ * `AutoBreadcrumbs.tsx`'s header.
+ *
+ * @tag domain:layout
+ * @tag layer:feature
+ */
+
+body:has(.appkit-page-breadcrumb) .appkit-auto-breadcrumbs {
+  display: none;
+}

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

@@ -72,7 +72,7 @@ export interface BottomNavbarProps {
     onMoreToggle?: () => void;
     /** CSS class applied to the active nav item. Default: "text-primary-600 dark:text-primary-400" */
     activeClassName?: string;
-    /** CSS class applied to inactive nav items. Default: "text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)]" */
+    /** CSS class applied to inactive nav items. Default: "text-[var(--appkit-color-text-muted)]" */
     inactiveClassName?: string;
     /** CSS class applied to nav icons */
     iconClassName?: string;

package/dist/features/layout/BottomNavbar.js

@@ -45,7 +45,7 @@ function BottomNavSlot({ item, isActive, onOpenChildren, activeClassName, inacti
  *
  * Pass `user` from your auth context to render the profile slot with avatar.
  */
-export function BottomNavbar({ user, userId, homeHref, shopHref, cartHref, wishlistHref, profileHref, loginHref, onSearchToggle, navItems, onMoreToggle, activeClassName = "text-primary-600 dark:text-primary-400", inactiveClassName = "text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)]", iconClassName, labelClassName = "text-[11px] leading-tight font-medium", getRoleBadgeClass, }) {
+export function BottomNavbar({ user, userId, homeHref, shopHref, cartHref, wishlistHref, profileHref, loginHref, onSearchToggle, navItems, onMoreToggle, activeClassName = "text-primary-600 dark:text-primary-400", inactiveClassName = "text-[var(--appkit-color-text-muted)]", iconClassName, labelClassName = "text-[11px] leading-tight font-medium", getRoleBadgeClass, }) {
     const pathname = usePathname();
     const wishlistCount = useWishlistCount(userId);
     const cartCount = useCartCount(!!userId);
@@ -90,5 +90,5 @@ export function BottomNavbar({ user, userId, homeHref, shopHref, cartHref, wishl
         return (_jsxs(_Fragment, { children: [_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [visibleItems.map((item) => (_jsx(Li, { className: "flex-1", children: _jsx(BottomNavSlot, { item: item, isActive: isSlotActive(item), onOpenChildren: (it) => setOpenKey(it.key), activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName, fallbackIcon: defaultIcon }) }, item.key))), cartHref && (_jsx(Li, { className: "flex-1", children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": cartCount > 0 ? `${labels.cart}, ${cartCount} items` : labels.cart, children: [_jsxs(Span, { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" }) }), cartCount > 0 && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_COUNT_BADGE, children: cartCount > 9 ? "9+" : cartCount }))] }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) })), _jsx(Li, { className: "flex-1", children: _jsxs("button", { type: "button", onClick: onMoreToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.more, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) }), _jsx(Span, { className: labelClassName, children: labels.more })] }) })] }), _jsx(Drawer, { isOpen: !!openItem, onClose: () => setOpenKey(null), title: openItem?.label, side: "bottom", children: _jsxs(Ul, { className: "list-none", children: [openItem && (_jsx(Li, { children: _jsx(TextLink, { href: openItem.href, variant: "none", className: "block rounded-md px-[var(--appkit-space-3)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] font-medium text-[var(--appkit-color-text)]", children: openItem.label }) })), (openItem?.children ?? []).map((child) => (_jsx(Li, { children: _jsxs(TextLink, { href: child.href, variant: "none", className: "flex items-start gap-[var(--appkit-space-2)] rounded-md px-[var(--appkit-space-3)] py-[var(--appkit-space-3)] text-[length:var(--appkit-text-sm)] text-[var(--appkit-color-text)]", children: [child.icon && (_jsx(Span, { className: "flex-shrink-0 mt-[var(--appkit-space-0-5)]", "aria-hidden": "true", children: child.icon })), _jsxs(Span, { className: "block", children: [_jsx(Span, { weight: "medium", className: "block", children: child.label }), child.description && (_jsx(Span, { size: "xs", color: "muted", className: "block mt-[var(--appkit-space-0-5)] whitespace-normal", children: child.description }))] })] }) }, child.href)))] }) })] }));
     }
     return (_jsxs(BottomNavLayout, { ariaLabel: labels.mobileNav, children: [_jsx(Li, { className: "flex-1", children: _jsx(NavItem, { href: homeHref, label: labels.home, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), isActive: pathname === homeHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", children: _jsx(NavItem, { href: shopHref, label: labels.products, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }), isActive: pathname === shopHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName }) }), _jsx(Li, { className: "flex-1", children: _jsxs("button", { type: "button", onClick: onSearchToggle, className: `${slotClassName} ${inactiveClassName}`, "aria-label": labels.search, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }), _jsx(Span, { className: labelClassName, children: labels.search })] }) }), _jsx(Li, { className: "flex-1", children: _jsxs(TextLink, { href: cartHref, variant: "none", className: `${slotClassName} ${pathname === cartHref ? activeClassName : inactiveClassName}`, "aria-label": cartCount > 0 ? `${labels.cart}, ${cartCount} items` : labels.cart, children: [_jsxs(Span, { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" }) }), cartCount > 0 && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_COUNT_BADGE, children: cartCount > 9 ? "9+" : cartCount }))] }), _jsx(Span, { className: labelClassName, children: labels.cart })] }) }), wishlistHref && (_jsx(Li, { className: "flex-1", children: _jsxs(TextLink, { href: wishlistHref, variant: "none", className: `${slotClassName} ${pathname === wishlistHref ? activeClassName : inactiveClassName}`, "aria-label": wishlistCount > 0 ? `${labels.wishlist}, ${wishlistCount} items` : labels.wishlist, children: [_jsxs(Span, { className: "relative", children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4.318 6.318a4.5 4.5 0 0 0 0 6.364L12 20.364l7.682-7.682a4.5 4.5 0 0 0-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 0 0-6.364 0z" }) }), wishlistCount > 0 && (_jsx(Span, { size: "xs", weight: "semibold", className: CLS_COUNT_BADGE, children: wishlistCount > 9 ? "9+" : wishlistCount }))] }), _jsx(Span, { className: labelClassName, children: labels.wishlist })] }) })), _jsx(Li, { className: "flex-1", children: user ? (_jsxs(TextLink, { href: profileHref, variant: "none", className: `${slotClassName} ${pathname === profileHref ? activeClassName : inactiveClassName}`, "aria-label": labels.profile, children: [_jsx(AvatarDisplay, { cropData: user.avatarMetadata ||
-                                (user.photoURL ? { url: user.photoURL, position: { x: 50, y: 50 }, zoom: 1 } : null), size: "sm", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && (_jsx(Span, { className: `text-[7px] uppercase leading-none ${getRoleBadgeClass ? getRoleBadgeClass(user.role) : "text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)]"}`, weight: "semibold", children: user.role }))] })) : (_jsx(NavItem, { href: loginHref, label: labels.profile, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }), isActive: pathname === loginHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName })) })] }));
+                                (user.photoURL ? { url: user.photoURL, position: { x: 50, y: 50 }, zoom: 1 } : null), size: "sm", alt: user.displayName || "User", displayName: user.displayName, email: user.email }), user.role && (_jsx(Span, { className: `text-[7px] uppercase leading-none ${getRoleBadgeClass ? getRoleBadgeClass(user.role) : "text-[var(--appkit-color-text-muted)]"}`, weight: "semibold", children: user.role }))] })) : (_jsx(NavItem, { href: loginHref, label: labels.profile, icon: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" }) }), isActive: pathname === loginHref, variant: "vertical", activeClassName: activeClassName, inactiveClassName: inactiveClassName, iconClassName: iconClassName, labelClassName: labelClassName })) })] }));
 }

package/dist/features/media/MediaAvatar.js

@@ -8,6 +8,6 @@ const sizeClasses = {
     xl: "w-20 h-20",
 };
 export function MediaAvatar({ src, alt, size = "md", className = "", }) {
-    return (_jsx(Div, { className: `relative ${sizeClasses[size]} overflow-hidden flex-shrink-0 ${className}`, rounded: "full", children: _jsx(MediaImage, { src: src, alt: alt, size: "avatar", objectFit: "cover" }) }));
+    return (_jsx(Div, { className: `relative ${sizeClasses[size]} overflow-hidden flex-shrink-0 ${className}`, rounded: "full", children: _jsx(MediaImage, { src: src, alt: alt, size: "avatar", objectFit: "cover", fill: true }) }));
 }
 export default MediaAvatar;

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

@@ -38,11 +38,31 @@ export interface MediaImageProps {
      *
      * Pass `'cover'` explicitly where a FILLED box is the component's contract
      * rather than a preference — a full-bleed backdrop with text over it, or a
-     * circular avatar. Three call sites do: `MediaAvatar`, and the slide and
-     * card backgrounds in `HeroCarousel`. A letterboxed backdrop there would put
-     * the dim overlay and the headline on bare surface.
+     * circular avatar. A letterboxed backdrop would put the dim overlay and the
+     * headline on bare surface.
+     *
+     * 🛑 Counted 2026-10-21: **six** call sites, not the three this said —
+     * `MediaAvatar`, both `HeroCarousel` backgrounds, `CTABannerSection`,
+     * `CustomCardsSection` and `PublicCatalogueItemDetailView`'s thumbnail
+     * strip. Four of them also pass `fill`; the two that do not sit in parents
+     * whose shape already matches the size's own box.
      */
     objectFit?: "cover" | "contain";
+    /**
+     * Fill the parent's box instead of establishing one from `size`.
+     *
+     * 🛑 Only for a parent that ALREADY has a definite height — a full-bleed
+     * backdrop, a fixed-size avatar circle, a carousel slide. In an auto-height
+     * parent this reproduces the exact bug `SIZE_BOX` exists to fix: the image
+     * collapses to zero and renders as empty space.
+     *
+     * The call sites that need it are close to the ones already passing
+     * `objectFit="cover"` — a filled box and a cropped fit are usually the same
+     * contract stated twice — but the two are NOT the same decision, so they are
+     * separate props. `cover` says how to fit; `fill` says where the box comes
+     * from.
+     */
+    fill?: boolean;
     /**
      * Emoji or text to show when `src` is undefined.
      * Falls back to the per-size default icon.
@@ -92,5 +112,5 @@ export interface MediaImageProps {
         media?: string;
     }>;
 }
-export declare function MediaImage({ src, alt, size, priority, loading, fetchPriority, objectFit, fallback, className, rounded, shadow, style, sources, onError, }: MediaImageProps): import("react").JSX.Element;
+export declare function MediaImage({ src, alt, size, priority, loading, fetchPriority, objectFit, fallback, className, rounded, shadow, style, sources, onError, fill, }: MediaImageProps): import("react").JSX.Element;
 export default MediaImage;

package/dist/features/media/MediaImage.js

@@ -19,6 +19,38 @@ const SIZE_HINTS = {
     gallery: "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw",
     avatar: "(max-width: 640px) 48px, 56px",
 };
+/**
+ * The BOX each size establishes on the wrapper.
+ *
+ * 🛑 THIS IS THE FIX FOR A DEFECT THAT MADE `size` A LIE. Until 2026-10-21 the
+ * `size` prop fed exactly two things — `SIZE_HINTS` (the `sizes` download
+ * attribute) and `FALLBACK_ICONS` (which emoji) — and **neither affected
+ * layout**. Every render branch was `relative w-full h-full` around an
+ * `<Image fill>`, so the component had an unstated contract: the PARENT must
+ * supply a definite height. `h-full` against an auto-height parent is 0, and a
+ * `fill` child is absolutely positioned and contributes none of its own, so
+ * the whole thing collapsed to zero and rendered as blank space.
+ *
+ * `size="hero"` therefore read as "this is hero-shaped" and produced **zero
+ * pixels**. `ProductGrid` worked only because its own call site wraps the
+ * image in `aspect-square` — so `card` was correct BY ACCIDENT OF WHERE IT WAS
+ * USED, which is why the reported symptom was "anything which is not a card".
+ *
+ * Same mechanism as Root Cause #68, one component over, and fixed the same
+ * way: at the primitive, not at ~100 call sites. A `Record<MediaImageSize, …>`
+ * means a seventh size cannot be added without declaring its shape.
+ *
+ * Call sites that must genuinely fill a parent they have already sized pass
+ * `fill` — see that prop.
+ */
+const SIZE_BOX = {
+    thumbnail: "aspect-square",
+    card: "aspect-square",
+    gallery: "aspect-square",
+    avatar: "aspect-square",
+    hero: "aspect-video",
+    banner: "aspect-[3/1]",
+};
 const FALLBACK_ICONS = {
     thumbnail: "📦",
     card: "📦",
@@ -67,7 +99,7 @@ function resolveSrcSet(input) {
         .filter(Boolean)
         .join(", ");
 }
-export function MediaImage({ src, alt, size = "card", priority = false, loading, fetchPriority, objectFit = "contain", fallback, className, rounded, shadow, style, sources, onError, }) {
+export function MediaImage({ src, alt, size = "card", priority = false, loading, fetchPriority, objectFit = "contain", fallback, className, rounded, shadow, style, sources, onError, fill = false, }) {
     const [hasError, setHasError] = useState(false);
     const [isLoaded, setIsLoaded] = useState(false);
     const [retryCount, setRetryCount] = useState(0);
@@ -75,6 +107,14 @@ export function MediaImage({ src, alt, size = "card", priority = false, loading,
     const icon = fallback ?? FALLBACK_ICONS[size];
     const fitClass = objectFit === "contain" ? "object-contain" : "object-cover";
     const resolvedSrc = resolveMediaUrl(src);
+    /*
+     * The wrapper's box: the size's own shape by default, the parent's when the
+     * caller opts in with `fill`. Shared by all three render branches below so
+     * the placeholder, the `<picture>` and the plain `<Image>` cannot disagree
+     * about their dimensions — a fallback that occupies a different box from the
+     * image it replaces makes a grid jump as things load.
+     */
+    const boxClass = fill ? "h-full" : SIZE_BOX[size];
     // Reset error/load/retry state whenever the resolved src actually changes.
     // Without this, a component instance that hit a load failure once (e.g.
     // lost the post-upload propagation race above) latches hasError forever,
@@ -106,7 +146,7 @@ export function MediaImage({ src, alt, size = "card", priority = false, loading,
         onError?.();
     };
     if (!resolvedSrc || hasError) {
-        return (_jsx(Row, { className: `relative w-full h-full overflow-hidden text-zinc-400 text-[length:var(--appkit-text-4xl)]${wrapperExtra ? ` ${wrapperExtra}` : ""}`, align: "center", justify: "center", surface: "subtle", role: "img", "aria-label": alt, children: _jsx(Span, { "aria-hidden": "true", children: icon }) }));
+        return (_jsx(Row, { className: `relative w-full ${boxClass} overflow-hidden text-zinc-400 text-[length:var(--appkit-text-4xl)]${wrapperExtra ? ` ${wrapperExtra}` : ""}`, align: "center", justify: "center", surface: "subtle", role: "img", "aria-label": alt, children: _jsx(Span, { "aria-hidden": "true", children: icon }) }));
     }
     const isSvg = resolvedSrc.toLowerCase().endsWith(".svg") ||
         resolvedSrc.includes("image/svg") ||
@@ -123,11 +163,11 @@ export function MediaImage({ src, alt, size = "card", priority = false, loading,
     // browser must pick the matching `<source>` itself. Loading + decoding hints
     // come from the consumer's preset.
     if (sources && sources.length > 0) {
-        return (_jsxs(Div, { className: `relative w-full h-full overflow-hidden${wrapperExtra ? ` ${wrapperExtra}` : ""}`, style: style, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 animate-pulse", surface: "subtle", "aria-hidden": "true" })), _jsxs("picture", { children: [sources.map((source, index) => (_jsx("source", { srcSet: resolveSrcSet(source.srcSet), type: source.type, media: source.media }, `${source.media ?? ""}-${source.type ?? ""}-${index}`))), _jsx("img", { src: requestSrc, alt: alt, loading: loading ?? (priority ? "eager" : "lazy"), fetchPriority: resolvedFetchPriority, decoding: "async", 
+        return (_jsxs(Div, { className: `relative w-full ${boxClass} overflow-hidden${wrapperExtra ? ` ${wrapperExtra}` : ""}`, style: style, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 animate-pulse", surface: "subtle", "aria-hidden": "true" })), _jsxs("picture", { children: [sources.map((source, index) => (_jsx("source", { srcSet: resolveSrcSet(source.srcSet), type: source.type, media: source.media }, `${source.media ?? ""}-${source.type ?? ""}-${index}`))), _jsx("img", { src: requestSrc, alt: alt, loading: loading ?? (priority ? "eager" : "lazy"), fetchPriority: resolvedFetchPriority, decoding: "async", 
                             // catalogued primitive for media (variant catalogue allows the inner
                             // <img> here). Object-fit + className come from typed props.
                             className: `absolute inset-0 w-full h-full ${fitClass}`, onLoad: () => setIsLoaded(true), onError: handleError })] })] }));
     }
-    return (_jsxs(Div, { className: `relative w-full h-full overflow-hidden${wrapperExtra ? ` ${wrapperExtra}` : ""}`, style: style, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 animate-pulse", surface: "subtle", "aria-hidden": "true" })), _jsx(Image, { src: requestSrc, alt: alt, fill: true, priority: priority, fetchPriority: resolvedFetchPriority, loading: loading ?? (priority ? "eager" : "lazy"), className: fitClass, sizes: SIZE_HINTS[size], onLoad: () => setIsLoaded(true), onError: handleError, unoptimized: isSvg })] }));
+    return (_jsxs(Div, { className: `relative w-full ${boxClass} overflow-hidden${wrapperExtra ? ` ${wrapperExtra}` : ""}`, style: style, children: [!isLoaded && (_jsx(Div, { className: "absolute inset-0 animate-pulse", surface: "subtle", "aria-hidden": "true" })), _jsx(Image, { src: requestSrc, alt: alt, fill: true, priority: priority, fetchPriority: resolvedFetchPriority, loading: loading ?? (priority ? "eager" : "lazy"), className: fitClass, sizes: SIZE_HINTS[size], onLoad: () => setIsLoaded(true), onError: handleError, unoptimized: isSvg })] }));
 }
 export default MediaImage;

package/dist/features/media/MediaLightbox.js

@@ -31,7 +31,7 @@ function IconBtn({ onClick, disabled, ariaLabel, ariaCurrent, className, childre
 }
 // --- Controls bar sub-components ---------------------------------------------
 function LightboxControlsBar({ items, index, zoom, isFullscreen, L, goPrev, goNext, zoomIn, zoomOut, resetZoom, toggleFullscreen, onClose, }) {
-    return (_jsxs(Row, { gap: "xs", className: "bg-black/85 backdrop-blur-sm shrink-0 border-t border-white/10", padding: "inline", align: "center", justify: "center", wrap: true, children: [items.length > 1 && (_jsx(IconBtn, { onClick: (e) => { e.stopPropagation(); goPrev(); }, ariaLabel: L.prevImage, children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsx(IconBtn, { onClick: zoomOut, disabled: zoom <= MIN_ZOOM, ariaLabel: L.zoomOut, children: _jsx(ZoomOut, { className: "w-7 h-7" }) }), _jsxs(Span, { color: "inverse", size: "xs", className: "/70 w-14 tabular-nums", align: "center", children: [Math.round(zoom * 100), "%"] }), _jsx(IconBtn, { onClick: zoomIn, disabled: zoom >= MAX_ZOOM, ariaLabel: L.zoomIn, children: _jsx(ZoomIn, { className: "w-7 h-7" }) }), zoom > 1 && (_jsx(IconBtn, { onClick: resetZoom, ariaLabel: L.resetZoom, children: _jsx(RotateCcw, { className: "w-7 h-7" }) })), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsxs(Span, { color: "inverse", size: "xs", className: "/60 w-12 tabular-nums", align: "center", children: [index + 1, " / ", items.length] }), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsx(IconBtn, { onClick: toggleFullscreen, ariaLabel: isFullscreen ? L.exitFullscreen : L.enterFullscreen, children: isFullscreen ? _jsx(Minimize, { className: "w-6 h-6" }) : _jsx(Maximize, { className: "w-6 h-6" }) }), _jsx(IconBtn, { onClick: onClose, ariaLabel: L.close, className: CLS_CLOSE_HOVER, children: _jsx(X, { className: "w-7 h-7" }) }), items.length > 1 && (_jsx(IconBtn, { onClick: (e) => { e.stopPropagation(); goNext(); }, ariaLabel: L.nextImage, children: _jsx(ChevronRight, { className: "w-7 h-7" }) }))] }));
+    return (_jsxs(Row, { gap: "xs", className: "bg-black/85 backdrop-blur-sm shrink-0 border-t border-white/10", padding: "inline", align: "center", justify: "center", wrap: true, children: [items.length > 1 && (_jsx(IconBtn, { onClick: (e) => { e.stopPropagation(); goPrev(); }, ariaLabel: L.prevImage, children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsx(IconBtn, { onClick: zoomOut, disabled: zoom <= MIN_ZOOM, ariaLabel: L.zoomOut, children: _jsx(ZoomOut, { className: "w-7 h-7" }) }), _jsxs(Span, { color: "inverse-muted", size: "xs", className: "w-14 tabular-nums", align: "center", children: [Math.round(zoom * 100), "%"] }), _jsx(IconBtn, { onClick: zoomIn, disabled: zoom >= MAX_ZOOM, ariaLabel: L.zoomIn, children: _jsx(ZoomIn, { className: "w-7 h-7" }) }), zoom > 1 && (_jsx(IconBtn, { onClick: resetZoom, ariaLabel: L.resetZoom, children: _jsx(RotateCcw, { className: "w-7 h-7" }) })), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsxs(Span, { color: "inverse-muted", size: "xs", className: "w-12 tabular-nums", align: "center", children: [index + 1, " / ", items.length] }), _jsx(Span, { className: "w-px h-6 bg-white/15 mx-1 shrink-0", "aria-hidden": "true" }), _jsx(IconBtn, { onClick: toggleFullscreen, ariaLabel: isFullscreen ? L.exitFullscreen : L.enterFullscreen, children: isFullscreen ? _jsx(Minimize, { className: "w-6 h-6" }) : _jsx(Maximize, { className: "w-6 h-6" }) }), _jsx(IconBtn, { onClick: onClose, ariaLabel: L.close, className: CLS_CLOSE_HOVER, children: _jsx(X, { className: "w-7 h-7" }) }), items.length > 1 && (_jsx(IconBtn, { onClick: (e) => { e.stopPropagation(); goNext(); }, ariaLabel: L.nextImage, children: _jsx(ChevronRight, { className: "w-7 h-7" }) }))] }));
 }
 function LightboxThumbnailStrip({ items, index, onSelect, resetZoom, L, }) {
     return (_jsx(Row, { surface: "overlay-xl", className: "backdrop-blur-sm overflow-x-auto shrink-0", padding: "inline", justify: "center", gap: "sm", style: { paddingBottom: "calc(0.75rem + env(safe-area-inset-bottom, 0px))" }, children: items.map((item, i) => (_jsx(Button, { type: "button", onClick: () => { onSelect(i); resetZoom(); }, "aria-label": L.imageThumbnail(i + 1), "aria-current": i === index ? "true" : undefined, className: cn("relative shrink-0 w-14 h-14 p-[var(--appkit-space-0)] overflow-hidden rounded-lg border-2 transition-all active:scale-95", i === index ? "border-white opacity-100" : "border-transparent opacity-40 hover:opacity-75"), children: _jsx(MediaImage, { src: item.src, alt: item.alt, size: "thumbnail" }) }, i))) }));

package/dist/features/media/modals/ImageCropModal.js

@@ -95,5 +95,5 @@ export function ImageCropModal({ isOpen, imageUrl, onClose, onSave, initialCropD
                                 left: `${position.x}%`,
                                 top: `${position.y}%`,
                                 transform: "translate(-50%, -50%)",
-                            } }), _jsxs(Div, { className: "absolute inset-0 pointer-events-none", children: [_jsx(Div, { layout: "grid", className: "absolute w-full h-full grid-cols-3 grid-rows-3", children: Array.from({ length: 9 }).map((_, i) => (_jsx(Div, { className: "border border-white/20 border-[var(--appkit-color-border)]/30" }, i))) }), _jsxs(Row, { className: "absolute inset-0", align: "center", justify: "center", children: [_jsx(Div, { className: "w-6 h-px", surface: "default" }), _jsx(Div, { className: "absolute h-6 w-px", surface: "default" })] })] })] }), _jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "xs", weight: "medium", children: t("cropZoom") }), _jsxs(Text, { size: "xs", color: "muted", children: [Math.round(zoom * 100), "%"] })] }), _jsxs(Row, { gap: "3", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setZoom(Math.max(0.1, zoom - 0.1)), "aria-label": t("cropZoomOut"), children: _jsx("svg", { className: "w-4 h-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" }) }) }), _jsx(MediaSlider, { value: zoom, min: 0.1, max: 3, step: 0.01, onChange: (v) => setZoom(v), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setZoom(Math.min(3, zoom + 0.1)), "aria-label": t("cropZoomIn"), children: _jsx("svg", { className: "w-4 h-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" }) }) })] }), _jsx(Row, { gap: "sm", children: [0.5, 1, 1.5, 2].map((preset) => (_jsxs(Button, { rounded: "lg", type: "button", variant: "ghost", size: "sm", onClick: () => setZoom(preset), className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface-elevated)]", children: [preset * 100, "%"] }, preset))) })] }), showZoomWarning && (_jsxs(Alert, { variant: "warning", children: [_jsx(Span, { weight: "bold", children: t("cropWarningTitle") }), " ", t("cropWarningMessage")] })), _jsxs(Row, { textSize: "xs", justify: "between", className: "text-[var(--appkit-color-text-muted)] text-[var(--appkit-color-text-muted)]", children: [_jsxs(Span, { children: [t("cropPosition"), ": ", Math.round(position.x), "%, ", Math.round(position.y), "%"] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleReset, className: "text-primary-600 dark:text-primary-400 hover:underline", children: t("cropReset") })] }), _jsxs(Row, { gap: "sm", padding: "t-xs", children: [_jsx(Button, { onClick: handleSave, variant: "primary", className: "flex-1", children: t("cropSave") }), _jsx(Button, { onClick: onClose, variant: "secondary", className: "flex-1", children: t("cropCancel") })] })] }) }));
+                            } }), _jsxs(Div, { className: "absolute inset-0 pointer-events-none", children: [_jsx(Div, { layout: "grid", className: "absolute w-full h-full grid-cols-3 grid-rows-3", children: Array.from({ length: 9 }).map((_, i) => (_jsx(Div, { className: "border border-white/20 border-[var(--appkit-color-border)]/30" }, i))) }), _jsxs(Row, { className: "absolute inset-0", align: "center", justify: "center", children: [_jsx(Div, { className: "w-6 h-px", surface: "default" }), _jsx(Div, { className: "absolute h-6 w-px", surface: "default" })] })] })] }), _jsxs(Stack, { gap: "xs", children: [_jsxs(Row, { justify: "between", children: [_jsx(Text, { size: "xs", weight: "medium", children: t("cropZoom") }), _jsxs(Text, { size: "xs", color: "muted", children: [Math.round(zoom * 100), "%"] })] }), _jsxs(Row, { gap: "3", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setZoom(Math.max(0.1, zoom - 0.1)), "aria-label": t("cropZoomOut"), children: _jsx("svg", { className: "w-4 h-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7" }) }) }), _jsx(MediaSlider, { value: zoom, min: 0.1, max: 3, step: 0.01, onChange: (v) => setZoom(v), className: "flex-1" }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setZoom(Math.min(3, zoom + 0.1)), "aria-label": t("cropZoomIn"), children: _jsx("svg", { className: "w-4 h-4 shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" }) }) })] }), _jsx(Row, { gap: "sm", children: [0.5, 1, 1.5, 2].map((preset) => (_jsxs(Button, { rounded: "lg", type: "button", variant: "ghost", size: "sm", onClick: () => setZoom(preset), className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] bg-[var(--appkit-color-surface-elevated)]", children: [preset * 100, "%"] }, preset))) })] }), showZoomWarning && (_jsxs(Alert, { variant: "warning", children: [_jsx(Span, { weight: "bold", children: t("cropWarningTitle") }), " ", t("cropWarningMessage")] })), _jsxs(Row, { textSize: "xs", justify: "between", className: "text-[var(--appkit-color-text-muted)]", children: [_jsxs(Span, { children: [t("cropPosition"), ": ", Math.round(position.x), "%, ", Math.round(position.y), "%"] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handleReset, className: "text-primary-600 dark:text-primary-400 hover:underline", children: t("cropReset") })] }), _jsxs(Row, { gap: "sm", padding: "t-xs", children: [_jsx(Button, { onClick: handleSave, variant: "primary", className: "flex-1", children: t("cropSave") }), _jsx(Button, { onClick: onClose, variant: "secondary", className: "flex-1", children: t("cropCancel") })] })] }) }));
 }

package/dist/features/media/modals/ImageEditor.js

@@ -94,5 +94,5 @@ outputFormat = IMAGE_DOWNSCALE_FORMAT, outputQuality = IMAGE_DOWNSCALE_QUALITY,
                         { label: "4:3", ratio: 4 / 3 },
                         { label: "16:9", ratio: 16 / 9 },
                         { label: "3:2", ratio: 3 / 2 },
-                    ].map((preset) => (_jsx(Button, { rounded: "lg", type: "button", variant: "ghost", size: "sm", onClick: () => applyAspectRatio(preset.ratio), className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] bg-[var(--appkit-color-surface)] bg-[var(--appkit-color-surface-elevated)]", children: preset.label }, preset.label))) })), _jsxs(Row, { gap: "sm", padding: "t-xs", children: [_jsx(Button, { onClick: handleSave, variant: "primary", className: "flex-1", disabled: saving, children: saving ? t("cropSaving") : t("cropSave") }), _jsx(Button, { onClick: onClose, variant: "secondary", className: "flex-1", children: t("cropCancel") })] })] }) }));
+                    ].map((preset) => (_jsx(Button, { rounded: "lg", type: "button", variant: "ghost", size: "sm", onClick: () => applyAspectRatio(preset.ratio), className: "px-[var(--appkit-space-3)] py-[var(--appkit-space-1)] text-[length:var(--appkit-text-xs)] bg-[var(--appkit-color-surface-elevated)]", children: preset.label }, preset.label))) })), _jsxs(Row, { gap: "sm", padding: "t-xs", children: [_jsx(Button, { onClick: handleSave, variant: "primary", className: "flex-1", disabled: saving, children: saving ? t("cropSaving") : t("cropSave") }), _jsx(Button, { onClick: onClose, variant: "secondary", className: "flex-1", children: t("cropCancel") })] })] }) }));
 }