@mohasinac/appkit 4.53.0 → 4.53.1

package/dist/ui/components/Accordion.js

@@ -12,7 +12,7 @@ function toArray(value) {
     return Array.isArray(value) ? value : [value];
 }
 function renderLegacyAccordion({ title, children, open, className = "", titleClassName = "", contentClassName = "", }) {
-    return (_jsxs("details", { open: open, className: `appkit-accordion appkit-accordion--legacy ${className}`, children: [_jsxs("summary", { className: `appkit-accordion__summary ${titleClassName}`, children: [title, _jsx("span", { className: "appkit-accordion__chevron", "aria-hidden": "true", children: "\u25BE" })] }), _jsx("div", { className: `appkit-accordion__content ${contentClassName}`, "data-section": "accordion-div-447", children: children })] }));
+    return (_jsxs("details", { open: open, className: `appkit-accordion ${className}`, children: [_jsxs("summary", { className: `appkit-accordion__summary ${titleClassName}`, children: [title, _jsx("span", { className: "appkit-accordion__chevron", "aria-hidden": "true", children: "\u25BE" })] }), _jsx("div", { className: `appkit-accordion__content ${contentClassName}`, "data-section": "accordion-div-447", children: children })] }));
 }
 export function Accordion({ title, children, open = false, className = "", titleClassName = "", contentClassName = "", type = "single", defaultValue, value, onChange, }) {
     // useMemo/useState must run unconditionally on every render — they were

package/dist/ui/components/Breadcrumb.js

@@ -4,7 +4,7 @@ import { Nav, Ol, Li } from "./Semantic.js";
 import { Span } from "./Typography.js";
 import { TextLink } from "./TextLink.js";
 export function Breadcrumb({ items, className = "", tone = "default" }) {
-    return (_jsx(Nav, { "aria-label": "Breadcrumb", className: `appkit-breadcrumb ${tone === "on-media" ? "appkit-breadcrumb--on-media" : ""} ${className}`, children: _jsx(Ol, { className: "appkit-breadcrumb__list", children: items.map((item, i) => {
+    return (_jsx(Nav, { "aria-label": "Breadcrumb", className: `${tone === "on-media" ? "appkit-breadcrumb--on-media" : ""} ${className}`, children: _jsx(Ol, { className: "appkit-breadcrumb__list", children: items.map((item, i) => {
                 const isLast = i === items.length - 1;
                 return (_jsxs(Li, { className: "appkit-breadcrumb__item", children: [i > 0 && (_jsx(ChevronRight, { className: "appkit-breadcrumb__separator", "aria-hidden": "true" })), isLast || !item.href ? (_jsx(Span, { className: isLast
                                 ? "appkit-breadcrumb__current"

package/dist/ui/components/DetailPageGallery.js

@@ -24,7 +24,6 @@ export function DetailPageGallery({ images, title, aspect = "square", fallback,
     const [activeIndex, setActiveIndex] = useState(Math.min(Math.max(initialIndex, 0), Math.max(images.length - 1, 0)));
     if (!images.length) {
         return (_jsx(Div, { className: [
-                "appkit-detail-gallery",
                 "w-full overflow-hidden rounded-2xl bg-[var(--appkit-color-surface)]",
                 ASPECT_CLASS[aspect],
                 className,
@@ -34,7 +33,6 @@ export function DetailPageGallery({ images, title, aspect = "square", fallback,
     }
     const active = images[activeIndex] ?? images[0];
     return (_jsxs(Div, { className: [
-            "appkit-detail-gallery",
             "w-full space-y-2",
             className,
         ]

package/dist/ui/components/DetailPageHero.js

@@ -13,7 +13,6 @@ import { Heading, Text } from "./Typography.js";
  */
 export function DetailPageHero({ title, eyebrow, subtitle, metaRow, description, mediaSlot, actionsSlot, belowActions, className, }) {
     return (_jsxs(Row, { gap: "lg", align: "start", className: [
-            "appkit-detail-hero",
             "flex-col md:flex-row",
             className,
         ]

package/dist/ui/components/DetailPageTabs.js

@@ -11,7 +11,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
  * W1-14 — extracted 2026-05-23.
  */
 export function DetailPageTabs({ tabs, activeTab, defaultTab, onTabChange, className, }) {
-    return (_jsxs(Tabs, { value: activeTab, defaultValue: defaultTab ?? tabs[0]?.id ?? "", onChange: onTabChange, className: ["appkit-detail-tabs", "space-y-4", className].filter(Boolean).join(" "), children: [_jsx(TabsList, { children: tabs.map((tab) => {
+    return (_jsxs(Tabs, { value: activeTab, defaultValue: defaultTab ?? tabs[0]?.id ?? "", onChange: onTabChange, className: ["space-y-4", className].filter(Boolean).join(" "), children: [_jsx(TabsList, { children: tabs.map((tab) => {
                     const label = typeof tab.label === "string" ? tab.label : undefined;
                     return (_jsx(TabsTrigger, { value: tab.id, disabled: tab.disabled, badge: tab.count, label: label, children: tab.label }, tab.id));
                 }) }), tabs.map((tab) => (_jsx(TabsContent, { value: tab.id, children: _jsx(Div, { children: tab.content }) }, tab.id)))] }));

package/dist/ui/components/Divider.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Span } from "./Typography.js";
 export function Divider({ label, orientation = "horizontal", className = "", }) {
     if (orientation === "vertical") {
-        return (_jsx("div", { className: `appkit-divider appkit-divider--vertical ${className}`, role: "separator", "aria-orientation": "vertical" }));
+        return (_jsx("div", { className: `appkit-divider--vertical ${className}`, role: "separator", "aria-orientation": "vertical" }));
     }
     if (label) {
-        return (_jsxs("div", { className: `appkit-divider appkit-divider--labeled ${className}`, role: "separator", "data-section": "divider-div-479", children: [_jsx("div", { className: "appkit-divider__line" }), _jsx(Span, { className: "appkit-divider__label", children: label }), _jsx("div", { className: "appkit-divider__line" })] }));
+        return (_jsxs("div", { className: `appkit-divider--labeled ${className}`, role: "separator", "data-section": "divider-div-479", children: [_jsx("div", { className: "appkit-divider__line" }), _jsx(Span, { className: "appkit-divider__label", children: label }), _jsx("div", { className: "appkit-divider__line" })] }));
     }
-    return (_jsx("div", { className: `appkit-divider appkit-divider--horizontal ${className}`, role: "separator", "aria-orientation": "horizontal" }));
+    return (_jsx("div", { className: `appkit-divider--horizontal ${className}`, role: "separator", "aria-orientation": "horizontal" }));
 }

package/dist/ui/components/GatedPrice.js

@@ -18,6 +18,10 @@ import { useCanSeePrices } from "../../react/hooks/useCanSeePrices.js";
  * It is rendered in EVERY state — signed in, signed out and resolving — because
  * the markup describes the region, not the refusal.
  */
+// A SELECTOR TARGET, not a style — gatedPriceWebPageJsonLd names it in
+// `hasPart.cssSelector` so a crawler can see the gate is declared. It must
+// stay rule-less: styling it would change what the markup describes.
+// audit-dead-css-ok: selector target for the paywall JSON-LD, never styled
 export const GATED_PRICE_CLASS = "appkit-gated-price";
 const DEFAULT_LABEL = "Sign in to see price";
 /**
@@ -76,5 +80,5 @@ export function GatedPrice({ amount, currency = getDefaultCurrency(), originalAm
     const originalClass = variant === "detail"
         ? "appkit-price-display__original appkit-price-display__original--detail"
         : "appkit-price-display__original appkit-price-display__original--compact";
-    return (_jsxs(Row, { wrap: true, align: "baseline", gap: "xs", className: `appkit-price-display ${rootClass}`, children: [_jsx(Span, { className: priceClass, children: formatCurrency(amount, currency) }), hasDiscount && (_jsxs(_Fragment, { children: [_jsx(Span, { className: originalClass, children: formatCurrency(originalAmount, currency) }), _jsxs(Span, { className: "appkit-price-display__discount", children: ["-", formatPercentage(discountPct, 0)] })] }))] }));
+    return (_jsxs(Row, { wrap: true, align: "baseline", gap: "xs", className: rootClass, children: [_jsx(Span, { className: priceClass, children: formatCurrency(amount, currency) }), hasDiscount && (_jsxs(_Fragment, { children: [_jsx(Span, { className: originalClass, children: formatCurrency(originalAmount, currency) }), _jsxs(Span, { className: "appkit-price-display__discount", children: ["-", formatPercentage(discountPct, 0)] })] }))] }));
 }

package/dist/ui/components/HorizontalScroller.js

@@ -153,7 +153,7 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
     // Grid mode: group items into slides of (rows × colCount) cards.
     Array.from({ length: gridSlideCount }, (_, slideIndex) => {
         const slideItems = normalizedItems.slice(slideIndex * gridCardsPerSlide, (slideIndex + 1) * gridCardsPerSlide);
-        return (_jsx("div", { className: "appkit-hscroller__slide", style: {
+        return (_jsx("div", { style: {
                 display: "grid",
                 gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
                 gap: `${gap}px`,

package/dist/ui/components/ListingLayout.js

@@ -95,10 +95,10 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
                     effectiveIsDashboard
                         ? "appkit-listing-layout__toolbar--dashboard"
                         : "appkit-listing-layout__toolbar--page",
-                ].join(" "), children: [_jsxs(Div, { className: "appkit-listing-layout__toolbar-row appkit-listing-layout__toolbar-row--desktop", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setSidebarOpen((prev) => !prev), "aria-label": sidebarOpen ? l.hideFilters : l.showFilters, "aria-expanded": sidebarOpen, className: [
+                ].join(" "), children: [_jsxs(Div, { className: "appkit-listing-layout__toolbar-row--desktop", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setSidebarOpen((prev) => !prev), "aria-label": sidebarOpen ? l.hideFilters : l.showFilters, "aria-expanded": sidebarOpen, className: [
                                     "appkit-listing-layout__filter-btn",
                                     sidebarOpen ? "appkit-listing-layout__filter-btn--active" : "",
-                                ].join(" "), children: [_jsx(FilterIcon, {}), l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "appkit-listing-layout__filter-badge", "aria-label": l.filterActiveCount(filterActiveCount), children: filterActiveCount }))] })), searchSlot && (_jsx(Div, { className: "appkit-listing-layout__search", children: searchSlot })), _jsxs(Div, { className: "appkit-listing-layout__toolbar-actions", children: [sortSlot, viewToggleSlot && (_jsx(Div, { className: "appkit-listing-layout__view-toggle-wrap", children: viewToggleSlot })), actionsSlot] }), toolbarPaginationSlot && (_jsx(Div, { className: "appkit-listing-layout__toolbar-pagination", children: toolbarPaginationSlot }))] }), !mobileToolbarCollapsed && (_jsxs(Div, { className: "appkit-listing-layout__toolbar-row appkit-listing-layout__toolbar-row--mobile", children: [_jsxs(Div, { className: "appkit-listing-layout__mobile-row-1", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setMobileFilterOpen(true), "aria-label": l.filtersTitle, className: [
+                                ].join(" "), children: [_jsx(FilterIcon, {}), l.filtersTitle, filterActiveCount > 0 && (_jsx(Span, { className: "appkit-listing-layout__filter-badge", "aria-label": l.filterActiveCount(filterActiveCount), children: filterActiveCount }))] })), searchSlot && (_jsx(Div, { className: "appkit-listing-layout__search", children: searchSlot })), _jsxs(Div, { className: "appkit-listing-layout__toolbar-actions", children: [sortSlot, viewToggleSlot && (_jsx(Div, { className: "appkit-listing-layout__view-toggle-wrap", children: viewToggleSlot })), actionsSlot] }), toolbarPaginationSlot && (_jsx(Div, { className: "appkit-listing-layout__toolbar-pagination", children: toolbarPaginationSlot }))] }), !mobileToolbarCollapsed && (_jsxs(Div, { className: "appkit-listing-layout__toolbar-row--mobile", children: [_jsxs(Div, { className: "appkit-listing-layout__mobile-row-1", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setMobileFilterOpen(true), "aria-label": l.filtersTitle, className: [
                                             "appkit-listing-layout__filter-btn",
                                             filterActiveCount > 0
                                                 ? "appkit-listing-layout__filter-btn--active"
@@ -117,7 +117,7 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
                                 : "appkit-listing-layout__sidebar--collapsed",
                         ].join(" "), children: _jsxs(Div, { className: "appkit-listing-layout__sidebar-panel", children: [_jsxs(Div, { className: "appkit-listing-layout__sidebar-header", children: [_jsx(Text, { weight: "semibold", size: "sm", children: panelTitle }), filterActiveCount > 0 && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onFilterClear, className: "text-xs text-primary hover:text-primary/80 hover:underline p-0 h-auto leading-none font-medium", children: l.clearAll }))] }), _jsx(Div, { className: "appkit-listing-layout__sidebar-facets", children: filterContent }), _jsx(Div, { className: "appkit-listing-layout__sidebar-footer", children: _jsx(Button, { type: "button", variant: "primary", className: "w-full rounded-xl", size: "sm", onClick: onFilterApply, children: filterPendingCount != null && filterPendingCount > 0
                                             ? `${l.applyFilters} (${filterPendingCount})`
-                                            : l.applyFilters }) })] }) })), _jsxs(Div, { className: "appkit-listing-layout__content", children: [activeFiltersSlot, resultCountSlot && (_jsx(Div, { className: "appkit-listing-layout__result-count", children: resultCountSlot })), errorSlot ? (errorSlot) : (_jsxs(_Fragment, { children: [children, paginationSlot && (_jsx(Div, { className: "appkit-listing-layout__pagination", children: paginationSlot }))] }))] })] }), toolbarPaginationSlot &&
+                                            : l.applyFilters }) })] }) })), _jsxs(Div, { className: "appkit-listing-layout__content", children: [activeFiltersSlot, resultCountSlot && (_jsx(Div, { children: resultCountSlot })), errorSlot ? (errorSlot) : (_jsxs(_Fragment, { children: [children, paginationSlot && (_jsx(Div, { className: "appkit-listing-layout__pagination", children: paginationSlot }))] }))] })] }), toolbarPaginationSlot &&
                 bottomChromeSlot &&
                 createPortal(_jsx(Nav, { "aria-label": "Pagination", className: "appkit-listing-layout__mobile-pagination", children: toolbarPaginationSlot }), bottomChromeSlot), hasFilter && (_jsx(Drawer, { isOpen: mobileFilterOpen, onClose: () => setMobileFilterOpen(false), side: "bottom", title: filterActiveCount > 0
                     ? `${panelTitle} (${filterActiveCount})`

package/dist/ui/components/MediaTabs.style.css

@@ -0,0 +1,81 @@
+/*
+ * Media source/segment tab strips — MediaPickerModal and MediaUploadField.
+ *
+ * 🛑 Both strips shipped with NO rules at all. `MediaPickerModal` ("Upload file"
+ * / "Choose existing") and `MediaUploadField` ("Upload" / "YouTube" /
+ * "External URL") each render raw `<button>`s carrying `appkit-media-*` class
+ * names, and no stylesheet ever defined them — so the one control that tells a
+ * seller which media SOURCE they are using rendered as bare browser buttons,
+ * with no indication of which was active. Found 2026-10-19 by
+ * `audit-dead-css-classes` once the blanket `appkit-` exemption came off.
+ *
+ * The two families are kept DISTINCT rather than collapsed into one
+ * `appkit-tab-strip`: renaming would mean editing both components plus any
+ * consumer override keyed on the old names, for no behavioural gain. They
+ * share declarations through the selector lists below instead, so the two
+ * strips cannot drift apart visually.
+ *
+ * Colours come from tokens, never a palette literal — a hardcoded `zinc-100`
+ * fill is the same near-white in every theme (Recurrent Root Cause #79).
+ */
+
+.appkit-media-picker__tabs,
+.appkit-media-upload__source-tabs {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  border: 1px solid var(--appkit-color-border);
+  border-radius: var(--appkit-radius-lg);
+  background: var(--appkit-color-surface-input);
+  padding: 2px;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.appkit-media-picker__tab-btn,
+.appkit-media-upload__source-tab {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  padding: var(--appkit-space-1-5) var(--appkit-space-3);
+  border-radius: var(--appkit-radius-md);
+  font-size: var(--appkit-text-sm);
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: var(--appkit-color-text-muted);
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.appkit-media-picker__tab-btn:hover:not(:disabled),
+.appkit-media-upload__source-tab:hover:not(:disabled) {
+  background: var(--appkit-color-surface-hover);
+  color: var(--appkit-color-text);
+}
+
+.appkit-media-picker__tab-btn:focus-visible,
+.appkit-media-upload__source-tab:focus-visible {
+  outline: 2px solid var(--appkit-color-focus-ring);
+  outline-offset: -2px;
+}
+
+/*
+ * The active tab is the only one that gets a raised surface. `--active` must
+ * win over `:hover` for the selected tab, so it is declared after the hover
+ * rule rather than relying on specificity.
+ */
+.appkit-media-picker__tab-btn--active,
+.appkit-media-upload__source-tab--active,
+.appkit-media-picker__tab-btn--active:hover,
+.appkit-media-upload__source-tab--active:hover {
+  background: var(--appkit-color-surface);
+  color: var(--appkit-color-text);
+  box-shadow: var(--appkit-shadow-sm);
+}
+
+.appkit-media-picker__tab-btn:disabled,
+.appkit-media-upload__source-tab:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}

package/dist/ui/components/Pagination.js

@@ -58,5 +58,5 @@ export function Pagination({ currentPage, totalPages, onPageChange, paginationCo
         return `${base} appkit-pagination__button--default`;
     };
     const pages = getPageNumbers(currentPage, totalPages, maxVisible);
-    return (_jsxs("nav", { className: `appkit-pagination ${className}`, "aria-label": "Pagination", children: [showFirstLast && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === 1), onClick: () => handle(1), disabled: disabled || currentPage === 1, "aria-label": "First page", children: "\u00AB" })), showPrevNext && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === 1), onClick: () => handle(currentPage - 1), disabled: disabled || currentPage === 1, "aria-label": "Previous page", children: "\u2039" })), pages.map((page, i) => page === "..." ? (_jsx("span", { className: `appkit-pagination__ellipsis ${SIZE_CLASSES[size]}`, "aria-hidden": "true", children: "\u2026" }, `ellipsis-${i}`)) : (_jsx("button", { type: "button", className: btnClass(page === currentPage, disabled && page !== currentPage), onClick: () => handle(page), disabled: disabled, "aria-label": `Page ${page}`, "aria-current": page === currentPage ? "page" : undefined, children: page }, page))), showPrevNext && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === totalPages), onClick: () => handle(currentPage + 1), disabled: disabled || currentPage === totalPages, "aria-label": "Next page", children: "\u203A" })), showFirstLast && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === totalPages), onClick: () => handle(totalPages), disabled: disabled || currentPage === totalPages, "aria-label": "Last page", children: "\u00BB" })), showPageSizeSelector && (_jsx(Select, { "aria-label": "Rows per page", value: String(pageSize), onValueChange: (next) => onPageSizeChange(Number(next)), options: resolved.pageSizeOptions.map((n) => ({ label: `${n} / page`, value: String(n) })), disabled: disabled, className: "appkit-pagination__page-size" }))] }));
+    return (_jsxs("nav", { className: `appkit-pagination ${className}`, "aria-label": "Pagination", children: [showFirstLast && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === 1), onClick: () => handle(1), disabled: disabled || currentPage === 1, "aria-label": "First page", children: "\u00AB" })), showPrevNext && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === 1), onClick: () => handle(currentPage - 1), disabled: disabled || currentPage === 1, "aria-label": "Previous page", children: "\u2039" })), pages.map((page, i) => page === "..." ? (_jsx("span", { className: `appkit-pagination__ellipsis ${SIZE_CLASSES[size]}`, "aria-hidden": "true", children: "\u2026" }, `ellipsis-${i}`)) : (_jsx("button", { type: "button", className: btnClass(page === currentPage, disabled && page !== currentPage), onClick: () => handle(page), disabled: disabled, "aria-label": `Page ${page}`, "aria-current": page === currentPage ? "page" : undefined, children: page }, page))), showPrevNext && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === totalPages), onClick: () => handle(currentPage + 1), disabled: disabled || currentPage === totalPages, "aria-label": "Next page", children: "\u203A" })), showFirstLast && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === totalPages), onClick: () => handle(totalPages), disabled: disabled || currentPage === totalPages, "aria-label": "Last page", children: "\u00BB" })), showPageSizeSelector && (_jsx(Select, { "aria-label": "Rows per page", value: String(pageSize), onValueChange: (next) => onPageSizeChange(Number(next)), options: resolved.pageSizeOptions.map((n) => ({ label: `${n} / page`, value: String(n) })), disabled: disabled }))] }));
 }

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

@@ -0,0 +1,45 @@
+import type { ReactNode } from "react";
+/**
+ * PendingValue — renders a value, or a VISIBLY incomplete marker when it is
+ * not yet decided.
+ *
+ * ## Why a marker and not a blank
+ *
+ * This exists for the statutory disclosure fields in `appkit.config.js` →
+ * `business`: support email, grievance officer, cancellation window, refund
+ * timeline. Each is `null` until someone decides it, and each appears on a
+ * page whose entire purpose is to publish it.
+ *
+ * Rendering `null` as an empty string makes an undisclosed legal obligation
+ * look like a design choice — the row is there, the label is there, and the
+ * value is simply missing in a way nobody notices. This renders
+ * `[to be confirmed]` in a warning chip instead, so the gap is obvious to
+ * whoever opens the page.
+ *
+ * 🛑 The alternative that must NOT be taken is inventing a plausible default.
+ * A made-up support phone number or a guessed return window on a published
+ * policy page is worse than an obviously missing one: it is wrong, it looks
+ * authoritative, and a customer may rely on it.
+ *
+ * ## Pairing
+ *
+ * `bg-warning-surface` with `text-warning` — the inline-chip pairing from
+ * CLAUDE.md Root Cause #67. Both tokens invert together with the theme, so
+ * this stays readable in light and dark. Never `text-white` against a
+ * `-surface` background; that is invisible in exactly one theme.
+ */
+export interface PendingValueProps {
+    /** The resolved value. `null` / `undefined` / `""` all render the marker. */
+    value?: string | null;
+    /**
+     * What is missing, e.g. "Support email".
+     *
+     * Used for the accessible label so a screen reader hears
+     * "Support email: to be confirmed" rather than a bare "to be confirmed"
+     * detached from the row it belongs to.
+     */
+    label: string;
+    /** Rendered instead of the raw value when present — e.g. a `mailto:` link. */
+    children?: ReactNode;
+}
+export declare function PendingValue({ value, label, children }: PendingValueProps): import("react").JSX.Element;

package/dist/ui/components/PendingValue.js

@@ -0,0 +1,7 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+export function PendingValue({ value, label, children }) {
+    if (value) {
+        return _jsx(_Fragment, { children: children ?? value });
+    }
+    return (_jsx("span", { className: "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium bg-warning-surface text-warning", "aria-label": `${label}: to be confirmed`, children: "[to be confirmed]" }));
+}

package/dist/ui/components/Radio.style.css

@@ -151,3 +151,122 @@
 .dark .appkit-radio-toggle__dot-inner {
   background: var(--appkit-color-bg);
 }
+
+/* ──────────────────────────────────────────────────────────────────────────
+   RadioItem — the standalone single radio, a structural MIRROR of Checkbox.
+   `RadioItem` was written by copying `Checkbox.tsx` element-for-element
+   (`__label`, `__label--disabled`, `__box-wrap`, `__input`, `__input--error`,
+   `__content`, `__text`, `__error`) and the stylesheet half was never written,
+   so every one of those classes resolved to NO rule — a bare browser-default
+   radio with no spacing, no disabled dimming and no error state. It shipped
+   that way to the live poll on `/events/[id]`, its only call site.
+   Found 2026-10-19 by `audit-dead-css-classes` once the blanket `appkit-`
+   exemption was removed from NON_TAILWIND_PREFIXES.
+
+   Kept deliberately 1:1 with Checkbox.style.css rather than folded into the
+   `radio-classic` family above: that family is driven by RadioGroup's own
+   `UI_RADIO` class map with a JS-rendered dot, while this one styles a NATIVE
+   `<input type="radio">`. Two different mechanisms, two rule sets.
+   ────────────────────────────────────────────────────────────────────────── */
+
+.appkit-radio-item {
+  width: 100%;
+}
+
+.appkit-radio-item__label {
+  display: inline-flex;
+  width: 100%;
+  cursor: pointer;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+.appkit-radio-item__label--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.appkit-radio-item__box-wrap {
+  position: relative;
+  display: inline-flex;
+  margin-top: 2px;
+  height: 1.25rem;
+  width: 1.25rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+/*
+ * `appearance: none` plus an inset box-shadow for the dot — the same technique
+ * Checkbox uses for its tick, and the reason the control can be themed at all.
+ * A native radio ignores `background-color` on most platforms.
+ */
+.appkit-radio-item__input {
+  height: 1.25rem;
+  width: 1.25rem;
+  appearance: none;
+  border-radius: 9999px;
+  border: 1px solid var(--appkit-color-zinc-300);
+  background: var(--appkit-color-surface);
+  transition: all 0.15s ease;
+  cursor: pointer;
+}
+.appkit-radio-item__input:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.3), 0 0 0 4px var(--appkit-color-surface);
+}
+.appkit-radio-item__input:not(:disabled):hover {
+  border-color: var(--appkit-color-secondary);
+}
+.appkit-radio-item__input:checked {
+  border-color: var(--appkit-color-secondary);
+  box-shadow: inset 0 0 0 4px var(--appkit-color-surface),
+    inset 0 0 0 1rem var(--appkit-color-secondary);
+}
+.appkit-radio-item__input:disabled {
+  cursor: not-allowed;
+}
+.appkit-radio-item__input--error {
+  border-color: var(--appkit-color-error);
+}
+
+.appkit-radio-item__content {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.appkit-radio-item__text {
+  padding-top: 2px;
+  font-size: 0.875rem;
+  /* `--appkit-color-text-muted` inverts per theme — no `.dark` override is
+     needed, unlike the raw zinc-700/zinc-200 pair this was copied from. */
+  color: var(--appkit-color-text-muted);
+}
+
+.appkit-radio-item__error {
+  margin-top: 0.375rem;
+  padding-left: 2rem;
+}
+
+.dark .appkit-radio-item__input {
+  border-color: var(--appkit-color-slate-600);
+  background: var(--appkit-color-surface);
+}
+.dark .appkit-radio-item__input:focus-visible {
+  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3), 0 0 0 4px var(--appkit-color-bg);
+}
+.dark .appkit-radio-item__input:not(:disabled):hover {
+  border-color: var(--appkit-color-primary);
+}
+.dark .appkit-radio-item__input:checked {
+  border-color: var(--appkit-color-primary);
+  box-shadow: inset 0 0 0 4px var(--appkit-color-surface),
+    inset 0 0 0 1rem var(--appkit-color-primary);
+}
+.dark .appkit-radio-item__input--error {
+  border-color: var(--appkit-color-error);
+}

package/dist/ui/components/RatingDisplay.js

@@ -9,6 +9,6 @@ const sizeClass = {
 export function RatingDisplay({ rating, maxRating = 5, size = "sm", showValue = false, className, }) {
     const starSize = sizeClass[size];
     return (_jsxs("div", { className: classNames("appkit-rating-display", className), "data-section": "ratingdisplay-div-576", children: [_jsx("div", { className: "appkit-rating-display__stars", "data-section": "ratingdisplay-div-577", children: Array.from({ length: maxRating }, (_, i) => i + 1).map((star) => (_jsx("svg", { className: classNames(starSize, star <= rating
-                        ? "appkit-rating-display__star appkit-rating-display__star--active"
-                        : "appkit-rating-display__star appkit-rating-display__star--inactive"), fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, star))) }), showValue && (_jsx(Span, { className: "appkit-rating-display__value", children: rating.toFixed(1) }))] }));
+                        ? "appkit-rating-display__star--active"
+                        : "appkit-rating-display__star--inactive"), fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", children: _jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, star))) }), showValue && (_jsx(Span, { className: "appkit-rating-display__value", children: rating.toFixed(1) }))] }));
 }

package/dist/ui/components/SettingsSection.js

@@ -12,7 +12,6 @@ import { Toggle } from "./Toggle.js";
  */
 export function SettingsSection({ title, description, action, children, className, }) {
     return (_jsxs("section", { className: [
-            "appkit-settings-section",
             "space-y-3 rounded-lg border border-[var(--appkit-color-border)] p-4",
             className,
         ]
@@ -29,7 +28,6 @@ export function SettingsSection({ title, description, action, children, classNam
  */
 export function ToggleRow({ label, description, checked, onChange, disabled = false, size = "md", className, }) {
     return (_jsxs("div", { className: [
-            "appkit-toggle-row",
             "flex items-start justify-between gap-3 py-1",
             className,
         ]

package/dist/ui/components/SiteLogo.js

@@ -14,6 +14,9 @@ import { useId } from "react";
 import { MediaImage } from "../../features/media/MediaImage.js";
 // Gradient ID prefix — made unique per instance via useId() to prevent
 // cross-SVG id conflicts when multiple SiteLogo components share the page.
+// An SVG <linearGradient> ID prefix, not a class — suffixed with useId()
+// and referenced as fill="url(#…)".
+// audit-dead-css-ok: SVG gradient id, not a class
 const GRADIENT_ID_PREFIX = "appkit-logo-gradient";
 const SIZE_HEIGHTS = {
     sm: "h-5",

package/dist/ui/components/SiteMark.js

@@ -11,6 +11,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useId } from "react";
 import { MediaImage } from "../../features/media/MediaImage.js";
+// An SVG <linearGradient> ID prefix, not a class — suffixed with useId()
+// and referenced as fill="url(#…)".
+// audit-dead-css-ok: SVG gradient id, not a class
 const GRADIENT_ID_PREFIX = "appkit-mark-gradient";
 const SIZE_HEIGHTS = {
     sm: "h-5",

package/dist/ui/components/SortDropdown.js

@@ -3,5 +3,5 @@ import { Row } from "./Layout.js";
 import { Select } from "./Select.js";
 import { Span } from "./Typography.js";
 export function SortDropdown({ value, onChange, options, label, className = "", countText, }) {
-    return (_jsxs(Row, { gap: "sm", className: ["appkit-sort-dropdown", className].filter(Boolean).join(" "), children: [countText && (_jsx(Span, { variant: "secondary", size: "sm", className: "appkit-sort-dropdown__count", children: countText })), label && (_jsx(Span, { variant: "secondary", size: "sm", className: "appkit-sort-dropdown__label", children: label })), _jsx(Select, { value: value ?? "", onValueChange: onChange, options: options, className: "appkit-sort-dropdown__select", "aria-label": label ?? "Sort by" })] }));
+    return (_jsxs(Row, { gap: "sm", className: ["appkit-sort-dropdown", className].filter(Boolean).join(" "), children: [countText && (_jsx(Span, { variant: "secondary", size: "sm", children: countText })), label && (_jsx(Span, { variant: "secondary", size: "sm", className: "appkit-sort-dropdown__label", children: label })), _jsx(Select, { value: value ?? "", onValueChange: onChange, options: options, className: "appkit-sort-dropdown__select", "aria-label": label ?? "Sort by" })] }));
 }

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

@@ -0,0 +1,58 @@
+/**
+ * A labelled key/value specification table.
+ *
+ * ── 🛑 WHY THIS EXISTS: EIGHT BYTE-IDENTICAL COPIES ────────────────────────
+ *
+ * This exact `Dl` / `Row` / `Dt` / `Dd` composition was pasted at eight call
+ * sites — `ProductDetailPageView`, `AuctionDetailPageView`,
+ * `ClassifiedDetailPageView`, `DigitalCodeDetailPageView`,
+ * `LiveItemDetailPageView`, `PreOrderDetailPageView`, `BrandDetailPageView`
+ * and `CustomSectionTabContent` — with the same variants and the same
+ * `w-36 flex-shrink-0` label column in every one. The Duplication Decision
+ * Framework's Rule of Three was overshot nearly 3×, every copy accepts the
+ * same `{name, value, unit?}` row shape, and a styling fix had to be made
+ * eight times.
+ *
+ * ── 🛑 IT RENDERS NOTHING FOR AN EMPTY LIST, DELIBERATELY ──────────────────
+ *
+ * `bit-chip` and `face-bolt` parts have no specifications in any source we
+ * hold — 0 of 66 and 0 of 42, measured, and that is a fact about the sources
+ * rather than missing data. A table of em-dashes would claim we looked each
+ * value up and found none. The caller still decides whether to render a
+ * heading; this only guarantees the table itself is absent rather than empty.
+ *
+ * ── 🛑 `w-36` IS KEPT, NOT CONVERTED TO A VARIANT ──────────────────────────
+ *
+ * It is a fixed label-column width shared by all eight original call sites, so
+ * it belongs INSIDE the primitive — which is exactly where `audit-variant-ok`
+ * permits a raw utility. Converting it to a prop would re-open the question at
+ * every call site for no behaviour.
+ *
+ * @tag domain:ui
+ * @tag layer:primitive
+ * @tag pattern:none
+ * @tag access:server
+ */
+import React from "react";
+export interface SpecTableRow {
+    /** The label. "Weight", "Material", "Released (JP)". */
+    name: string;
+    /** The value, already formatted. */
+    value: string;
+    /** Appended after a space when present. "g", "mm". */
+    unit?: string;
+    /**
+     * Marks the value as approximate, rendered as a leading `≈`.
+     *
+     * 🛑 A per-row CONFIDENCE BADGE was the first design and is wrong: in a
+     * ten-row table it is noise that crowds out the values themselves. One
+     * glyph on the value plus a single footnote under the table says the same
+     * thing and stays readable — the caller owns the footnote.
+     */
+    approximate?: boolean;
+}
+export interface SpecTableProps {
+    rows: readonly SpecTableRow[];
+    className?: string;
+}
+export declare function SpecTable({ rows, className }: SpecTableProps): React.JSX.Element | null;

package/dist/ui/components/SpecTable.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dl, Dt, Dd } from "./Semantic.js";
+import { Row } from "./Layout.js";
+export function SpecTable({ rows, className }) {
+    if (!rows.length)
+        return null;
+    return (_jsx(Dl, { divide: "subtle", rounded: "xl", border: "subtle", className: `overflow-hidden${className ? ` ${className}` : ""}`, children: rows.map((s, i) => (_jsxs(Row, { gap: "md", oddEven: "zebra", surface: "default", padding: "inline", children: [_jsx(Dt, { className: "w-36 flex-shrink-0", color: "primary", weight: "medium", children: s.name }), _jsxs(Dd, { className: "flex-1", color: "muted", children: [s.approximate ? "≈ " : "", s.value, s.unit ? ` ${s.unit}` : ""] })] }, `${s.name}-${i}`))) }));
+}

package/dist/ui/components/StarRating.js

@@ -9,9 +9,7 @@ export function StarRating({ value = 0, onChange, max = 5, size = "md", readOnly
     return (_jsxs(Span, { className: [
             "appkit-star-rating",
             `appkit-star-rating--${size}`,
-            readOnly
-                ? "appkit-star-rating--readonly"
-                : "appkit-star-rating--interactive",
+            readOnly ? "" : "appkit-star-rating--interactive",
             className,
         ]
             .filter(Boolean)

package/dist/ui/components/SummaryCard.js

@@ -10,5 +10,5 @@ const SUMMARY_CARD_VARIANT_CLASS = {
 export function SummaryCard({ lines, total, action, variant = "standalone", className, }) {
     return (_jsxs(Div, { className: classNames("appkit-summary-card", SUMMARY_CARD_VARIANT_CLASS[variant], className), children: [_jsx(Div, { className: "appkit-summary-card__lines", children: lines.map((line, i) => (_jsxs(Div, { className: "appkit-summary-card__line", children: [_jsx(Span, { className: "appkit-summary-card__label", children: line.label }), _jsx(Span, { className: line.muted
                                 ? "appkit-summary-card__value appkit-summary-card__value--muted"
-                                : "appkit-summary-card__value", children: line.value })] }, i))) }), _jsx(Divider, {}), _jsxs(Div, { className: "appkit-summary-card__total", children: [_jsx(Span, { className: "appkit-summary-card__total-label", children: total.label }), _jsx(Span, { className: "appkit-summary-card__total-value", children: total.value })] }), action && _jsx(Div, { className: "appkit-summary-card__action", children: action })] }));
+                                : "appkit-summary-card__value", children: line.value })] }, i))) }), _jsx(Divider, {}), _jsxs(Div, { className: "appkit-summary-card__total", children: [_jsx(Span, { className: "appkit-summary-card__total-label", children: total.label }), _jsx(Span, { className: "appkit-summary-card__total-value", children: total.value })] }), action && _jsx(Div, { children: action })] }));
 }

package/dist/ui/components/index.style.css

@@ -75,6 +75,7 @@
 @import "./Div.style.css";
 @import "./Menu.style.css";
 @import "./OverflowRow.style.css";
+@import "./MediaTabs.style.css";
 @import "./Semantic.style.css";
 @import "./UnsavedChangesModal.style.css";
 @import "../DataTable.style.css";

package/dist/ui/icons/icon-registry.d.ts

@@ -63,6 +63,7 @@ export declare const ICONS: {
     readonly digitalCode: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly art: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly stickers: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly spares: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
     readonly live: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
 };
 /** Every valid `iconKey`. A typo is a compile error, not a silent blank. */

package/dist/ui/icons/icon-registry.js

@@ -39,7 +39,7 @@
  * @tag consumers:Button,RowActionMenu,BulkActionBar,action-registry
  * @tag sideEffects:none
  */
-import { Archive, ArrowLeft, Ban, Bell, Check, CheckCircle, ChevronDown, Copy, Download, Edit, Eye, EyeOff, FileDown, Filter, Flag, Gavel, HelpCircle, Heart, Link as LinkIcon, Lock, Mail, Menu, MessageSquare, Moon, Package, Pause, Play, Plus, RefreshCw, Reply, RotateCcw, Save, Search, Send, Settings, Share2, ShieldCheck, ShoppingCart, Star, Sun, Scale, Tag, Trash2, TrendingUp, Truck, Upload, User, X, XCircle, CalendarClock, Gift, KeyRound, Palette, Sticker, PawPrint, } from "lucide-react";
+import { Archive, ArrowLeft, Ban, Bell, Check, CheckCircle, ChevronDown, Copy, Download, Edit, Eye, EyeOff, FileDown, Filter, Flag, Gavel, HelpCircle, Heart, Link as LinkIcon, Lock, Mail, Menu, MessageSquare, Moon, Package, Pause, Play, Plus, RefreshCw, Reply, RotateCcw, Save, Search, Send, Settings, Share2, ShieldCheck, ShoppingCart, Star, Sun, Scale, Tag, Trash2, TrendingUp, Truck, Upload, User, X, XCircle, CalendarClock, Gift, KeyRound, Palette, Sticker, Puzzle, PawPrint, } from "lucide-react";
 /**
  * Semantic name → component.
  *
@@ -125,6 +125,14 @@ export const ICONS = {
     digitalCode: KeyRound,
     art: Palette,
     stickers: Sticker,
+    /*
+     * Nothing in the registry meant "a part", so this is minted rather than
+     * reused. `Puzzle` over `Cog`/`Wrench` because the semantic is "a piece that
+     * fits into something" — which is exactly what the spares feature is about,
+     * right down to the glossary's "Fits: …" cross-sell. A cog reads as
+     * machinery or settings, and `settings` already owns that glyph.
+     */
+    spares: Puzzle,
     live: PawPrint,
 };
 /**

package/dist/ui/index.d.ts

@@ -16,6 +16,8 @@ export type { SectionProps, SectionBackgroundConfig, ArticleProps, MainProps, As
 export { Section, sectionBackgroundStyle, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic";
 export type { DivProps } from "./components/Div";
 export { Div } from "./components/Div";
+export type { SpecTableProps, SpecTableRow } from "./components/SpecTable";
+export { SpecTable } from "./components/SpecTable";
 export type { ColorVariant } from "./components/Typography";
 export { Heading, Text, Label, Caption, Span } from "./components/Typography";
 export { FilterChipGroup } from "./components/FilterChipGroup";
@@ -243,6 +245,8 @@ export { Scrim } from "./components/Scrim";
 export type { ScrimProps, ScrimDirection, ScrimIntensity } from "./components/Scrim";
 export { Kbd } from "./components/Kbd";
 export type { KbdProps, KbdSize, KbdTone } from "./components/Kbd";
+export { PendingValue } from "./components/PendingValue";
+export type { PendingValueProps } from "./components/PendingValue";
 export { StickyToolbar } from "./components/StickyToolbar";
 export type { StickyToolbarProps, StickyToolbarOffset, StickyToolbarTone, StickyToolbarPadding, } from "./components/StickyToolbar";
 export { Show, Hide } from "./components/Responsive";