@mohasinac/appkit 4.52.5 → 4.53.1

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

@@ -0,0 +1,235 @@
+/*
+ * OverflowRow — pill row that becomes a searchable dropdown when it overflows.
+ *
+ * All tokens live here rather than on the call site's className. The expanded
+ * and collapsed states are selected by `[data-collapsed]` written from JS, NOT
+ * by a media query: the decision is a width MEASUREMENT against the row's own
+ * content, which no breakpoint can express (four long labels overflow a phone;
+ * eight short ones fit a desktop).
+ *
+ * 🛑 Do not express the two states as Tailwind `md:`/`lg:` overrides. appkit's
+ * Tailwind build emits NO variant-prefixed utility (see the measured note in
+ * src/tailwind-input.css), so such a rule compiles to nothing and the element
+ * silently keeps its base style.
+ */
+
+.appkit-overflow-row {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+}
+
+/* ── Expanded ─────────────────────────────────────────────────────────── */
+
+.appkit-overflow-row__row {
+  display: flex;
+  align-items: center;
+  gap: var(--appkit-space-2);
+  min-width: 0;
+  /*
+   * No `overflow-x: auto`. A scrollbar here would let the row satisfy its
+   * container at any width, so `scrollWidth` would still exceed `clientWidth`
+   * but nothing would ever look broken enough to collapse — the measurement
+   * and the visible truth must agree.
+   */
+}
+
+.appkit-overflow-row__pill {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: var(--appkit-space-1-5);
+  padding: var(--appkit-space-1-5) var(--appkit-space-4);
+  border: 1px solid var(--appkit-color-border);
+  border-radius: var(--appkit-radius-full);
+  background: var(--appkit-color-surface-elevated);
+  color: var(--appkit-color-text-muted);
+  font-size: var(--appkit-text-sm);
+  font-weight: 500;
+  line-height: 1.25;
+  white-space: nowrap;
+  text-decoration: none;
+  transition: color var(--appkit-duration-fast) var(--appkit-ease-out),
+    border-color var(--appkit-duration-fast) var(--appkit-ease-out),
+    background-color var(--appkit-duration-fast) var(--appkit-ease-out);
+}
+
+.appkit-overflow-row__pill:hover {
+  border-color: var(--appkit-color-primary);
+  color: var(--appkit-color-primary);
+}
+
+.appkit-overflow-row__pill:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.appkit-overflow-row__pill--active {
+  border-color: var(--appkit-color-primary);
+  background: var(--appkit-color-primary-surface);
+  color: var(--appkit-color-primary);
+}
+
+/* ── Leading visuals ──────────────────────────────────────────────────── */
+
+/*
+ * Sized here rather than by Avatar's own `--xs`, which is a face-sized box.
+ * A pill's visual is an identifying mark at text scale: it must not grow the
+ * pill's line-box, or every row in the app gets taller.
+ */
+.appkit-overflow-row__visual {
+  width: 1.125rem;
+  height: 1.125rem;
+  flex-shrink: 0;
+  font-size: var(--appkit-text-2xs);
+}
+
+.appkit-overflow-row__emoji {
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.appkit-overflow-row__dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: var(--appkit-radius-full);
+  flex-shrink: 0;
+  background: var(--appkit-color-text-faint);
+}
+
+.appkit-overflow-row__dot[data-tone="primary"] { background: var(--appkit-color-primary); }
+.appkit-overflow-row__dot[data-tone="success"] { background: var(--appkit-color-success); }
+.appkit-overflow-row__dot[data-tone="warning"] { background: var(--appkit-color-warning); }
+.appkit-overflow-row__dot[data-tone="error"]   { background: var(--appkit-color-error); }
+.appkit-overflow-row__dot[data-tone="info"]    { background: var(--appkit-color-info); }
+.appkit-overflow-row__dot[data-tone="muted"]   { background: var(--appkit-color-text-faint); }
+
+/*
+ * `opacity` rather than a literal colour so the count stays legible on both
+ * the inactive (surface) and active (primary tint) pill — a fixed colour is
+ * invisible against one of them in some theme (Root Cause #67).
+ */
+.appkit-overflow-row__count {
+  font-size: var(--appkit-text-xs);
+  font-variant-numeric: tabular-nums;
+  opacity: 0.7;
+}
+
+/* ── Collapsed trigger ────────────────────────────────────────────────── */
+
+.appkit-overflow-row__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--appkit-space-2);
+  max-width: 100%;
+  padding: var(--appkit-space-2) var(--appkit-space-3);
+  border: 1px solid var(--appkit-color-border);
+  border-radius: var(--appkit-radius-lg);
+  background: var(--appkit-color-surface-elevated);
+  color: var(--appkit-color-text);
+  font-size: var(--appkit-text-sm);
+  font-weight: 500;
+  line-height: 1.25;
+  cursor: pointer;
+}
+
+.appkit-overflow-row__trigger:hover {
+  border-color: var(--appkit-color-primary);
+}
+
+.appkit-overflow-row__trigger-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+/* ── Popover ──────────────────────────────────────────────────────────── */
+
+.appkit-overflow-row__popover {
+  position: absolute;
+  z-index: var(--appkit-z-dropdown);
+  top: calc(100% + var(--appkit-space-1));
+  left: 0;
+  width: min(22rem, 100%);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--appkit-color-border);
+  border-radius: var(--appkit-radius-lg);
+  background: var(--appkit-color-surface-elevated);
+  box-shadow: var(--appkit-shadow-lg);
+  overflow: hidden;
+}
+
+.appkit-overflow-row__search {
+  padding: var(--appkit-space-2);
+  border-bottom: 1px solid var(--appkit-color-border-subtle);
+}
+
+.appkit-overflow-row__list {
+  max-height: 18rem;
+  overflow-y: auto;
+  padding: var(--appkit-space-1);
+}
+
+.appkit-overflow-row__option {
+  display: flex;
+  align-items: center;
+  gap: var(--appkit-space-2);
+  width: 100%;
+  padding: var(--appkit-space-2) var(--appkit-space-2-5);
+  border: 0;
+  border-radius: var(--appkit-radius-md);
+  background: transparent;
+  color: var(--appkit-color-text);
+  font-size: var(--appkit-text-sm);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.appkit-overflow-row__option:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/*
+ * Hover and keyboard focus resolve to the SAME class, set from `activeIndex`
+ * on both `onMouseEnter` and the arrow keys — two different highlights in one
+ * list is what makes a combobox feel like it has two cursors.
+ */
+.appkit-overflow-row__option--active {
+  background: var(--appkit-color-surface-hover);
+}
+
+.appkit-overflow-row__option--selected {
+  color: var(--appkit-color-primary);
+  font-weight: 600;
+}
+
+.appkit-overflow-row__option-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.appkit-overflow-row__option-count {
+  font-size: var(--appkit-text-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--appkit-color-text-muted);
+  flex-shrink: 0;
+}
+
+.appkit-overflow-row__check {
+  flex-shrink: 0;
+  color: var(--appkit-color-primary);
+}
+
+.appkit-overflow-row__empty {
+  padding: var(--appkit-space-4);
+  text-align: center;
+  font-size: var(--appkit-text-sm);
+  color: var(--appkit-color-text-muted);
+}

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/RecordDetailModal.js

@@ -1,6 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ActionRow, Anchor, Badge, Code, Div, Modal, Row, Stack, Text } from "../index.js";
+/*
+ * 🛑 This was `from "../index"` — the component importing its own barrel,
+ * while also importing `features/media/MediaImage`. That made `ui/index.ts`
+ * depend on a module that depends on it, the last two-module knot in
+ * `audit-import-cycles`. Every symbol is one directory away.
+ */
+import { ActionRow } from "./ActionRow.js";
+import { Anchor } from "./Anchor.js";
+import { Badge } from "./Badge.js";
+import { Code } from "./Semantic.js";
+import { Div } from "./Div.js";
+import { Modal } from "./Modal.js";
+import { Row, Stack } from "./Layout.js";
+import { Text } from "./Typography.js";
 import { MediaImage } from "../../features/media/MediaImage.js";
 export function RecordDetailModal({ isOpen, onClose, title, badges, description, fields, items, extra, metadata, footer, }) {
     const hasMetadata = Boolean(metadata && Object.keys(metadata).length > 0);

package/dist/ui/components/RowActionMenu.js

@@ -5,7 +5,11 @@ import { createPortal } from "react-dom";
 import { MoreHorizontal } from "lucide-react";
 import { Button } from "./Button.js";
 import { Span } from "./Typography.js";
-import { useKeyPress } from "../../react/index.js";
+// Defining modules, not the sibling barrel — Root Cause #18. `ui/index.ts` and
+// `react/index.ts` re-exported into each other, which is the whole of
+// `audit-import-cycles` component 1: an 18-module knot held together entirely
+// by barrel hops, none of which needed the barrel.
+import { useKeyPress } from "../../react/hooks/useKeyPress.js";
 export function RowActionMenu({ actions, align = "right", }) {
     const [open, setOpen] = useState(false);
     const [pos, setPos] = useState(null);

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/SideDrawer.js

@@ -7,7 +7,11 @@ import { Button } from "./Button.js";
 import { ActionRow } from "./ActionRow.js";
 import { Row } from "./Layout.js";
 import { Heading, Span } from "./Typography.js";
-import { useSwipe } from "../../react/index.js";
+// Defining modules, not the sibling barrel — Root Cause #18. `ui/index.ts` and
+// `react/index.ts` re-exported into each other, which is the whole of
+// `audit-import-cycles` component 1: an 18-module knot held together entirely
+// by barrel hops, none of which needed the barrel.
+import { useSwipe } from "../../react/hooks/useSwipe.js";
 import { Text } from "./Typography.js";
 import { SPRING_SNAPPY } from "../../tokens/motion.js";
 import { useHandMode } from "../../_internal/client/hand-mode/index.js";

package/dist/ui/components/SideModal.js

@@ -2,7 +2,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { motion, AnimatePresence, useReducedMotion } from "motion/react";
-import { Button, Div, Heading } from "../index.js";
+/*
+ * 🛑 This was `from ".."` — a component importing its own barrel, which is the
+ * tightest possible cycle: `ui/index.ts` exports `SideModal`, so the module
+ * depended on the file that depends on it. Nothing needed the barrel; all
+ * three symbols are one directory away.
+ */
+import { Button } from "./Button.js";
+import { Div } from "./Div.js";
+import { Heading } from "./Typography.js";
 import { ActionRow } from "./ActionRow.js";
 import { SPRING_SNAPPY } from "../../tokens/motion.js";
 import { useHandMode } from "../../_internal/client/hand-mode/index.js";

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 })] }));
 }