@godxjp/ui 18.4.0 → 18.6.0

package/README.md

@@ -144,12 +144,20 @@ per-layer files you need (mirrors the JS subpaths — the CSS tree-shakes too):
 @import "@godxjp/ui/styles/form-layout"; /* FormField */
 @import "@godxjp/ui/styles/dialog-layout"; /* Dialog */
 /* …only the layers you use. Layer files need `base` first (they use @layer/@apply). */
+@import "@godxjp/ui/styles/fonts"; /* optional bundled faces — MUST come after `base` */
 ```
 
 Skip `@godxjp/ui/styles/fonts` when you manage fonts yourself (next/font, etc.)
 and set the font tokens instead (see below). A marketing site using ~10
 components typically drops component CSS from ~142K → ~26K gzip.
 
+> **Import order rule — `fonts` after `base`.** `styles/base` pulls in the token
+> layers, whose font-agnostic `:root { --font-sans-base: <system stack> }` sits at
+> the same specificity (0,1,0) as the bundle's fill, so the later import wins.
+> Import `styles/fonts` first and the bundled faces silently never apply while the
+> ~800 KB of `@font-face` still ships. The all-in-one `@godxjp/ui/styles` entry
+> already orders this correctly.
+
 ### Fonts — token-driven, per-language, no library hardcoding
 
 The base ships NO hardcoded brand face. Supply your own faces and set tokens —
@@ -165,7 +173,14 @@ one face everywhere, or per-language (no `[lang]` selectors to write):
 ```
 
 `styles/base.css` wires each `[lang]` to its slot (falling back to
-`--font-sans-base`); `styles/fonts` fills these slots for the bundled faces.
+`--font-sans-base`); the opt-in `styles/fonts` overwrites `--font-sans-base` (and
+`--font-sans-vi`) with the bundled DXS stack — **M PLUS 2** primary with **Noto
+Sans JP** as the CJK fallback.
+
+> **The bundled faces changed in v18.** v16 bundled Noto Sans JP + Montserrat;
+> v18 bundles M PLUS 2 (primary, incl. Vietnamese coverage) + Noto Sans JP (CJK
+> fallback). If your design spec named the v16 faces, set the tokens yourself
+> instead of relying on the bundle.
 
 ```tsx
 import { AppProvider } from "@godxjp/ui/app"; // locale, tz, date/time format

package/dist/app/theme-axes.d.ts

@@ -1,14 +1,22 @@
 import type { PageDensityProp } from "../props/vocabulary/layout.prop.js";
 /** Light / dark spine — `data-theme` (alias of the legacy `.dark` class). */
 export type AppTheme = "light" | "dark";
-/** Primary-palette preset — `data-brand`. `null` = keep the app's own `--primary`. */
-export type AppBrand = "brand" | "crm" | "logistics" | "partner" | "slate";
+/**
+ * Primary-palette preset — `data-brand`. `null` = keep the app's own `--primary`.
+ *
+ * `"dxs"` is the CANONICAL DXS preset: unlike the per-vertical tints it also binds the canonical
+ * hosted-identity surface contract (auth measure/density/insets + the brand-green identity mark),
+ * so every surface matches the canonical artboards with no consumer page CSS (gh#214). See
+ * `src/tokens/axes.css` for the bindings and `@godxjp/ui/theme/dxs.canonical.css` for the
+ * copy-free stylesheet entry point.
+ */
+export type AppBrand = "brand" | "crm" | "logistics" | "partner" | "slate" | "dxs";
 /** Control / table / spacing density — `data-density` (same vocab as PageContainer). */
 export type AppDensity = PageDensityProp;
 /** Base type size — `data-font-size`; a preset rescales the whole golden scale. */
 export type AppFontSize = "sm" | "default" | "lg";
 export declare const APP_THEMES: readonly ["light", "dark"];
-export declare const APP_BRANDS: readonly ["brand", "crm", "logistics", "partner", "slate"];
+export declare const APP_BRANDS: readonly ["brand", "crm", "logistics", "partner", "slate", "dxs"];
 export declare const APP_DENSITIES: readonly ["compact", "default", "comfortable"];
 export declare const APP_FONT_SIZES: readonly ["sm", "default", "lg"];
 /** The axes as held by AppProvider. `brand: null` opts out (app token wins).

package/dist/app/theme-axes.js

@@ -4,7 +4,8 @@ const APP_BRANDS = [
   "crm",
   "logistics",
   "partner",
-  "slate"
+  "slate",
+  "dxs"
 ];
 const APP_DENSITIES = [
   "compact",

package/dist/components/charts/chart-frame.d.ts

@@ -30,15 +30,29 @@ type ChartFrameProps = {
     imgSummary: string;
     /** True when there is data to plot (otherwise children render an empty state). */
     hasData: boolean;
-    height: number;
+    /**
+     * Canvas height in px. OPTIONAL: recharts needs a measured pixel box, but a
+     * CSS-drawn chart leaves it undefined and sizes its plot from a token tier
+     * instead (`size` → `data-size` → `--*-plot-height`), so no geometry is baked
+     * into an inline style.
+     */
+    height?: number;
+    /** Mirrored onto the figure as `data-size` so CSS can pick a token height tier. */
+    size?: "xs" | "sm" | "md" | "lg";
+    /**
+     * Content rendered BELOW the plot, outside the `role="img"` canvas — an activity
+     * footer, a delta, a link. Kept outside so interactive children stay reachable.
+     */
+    footer?: React.ReactNode;
     className?: string;
     id?: string;
     children: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
 };
 /**
- * The accessible figure wrapper. The recharts SVG passed as `children` is wrapped
+ * The accessible figure wrapper. The chart body passed as `children` is wrapped
  * in a `role="img"` element with a short `aria-label`; the full data is exposed as
  * a sibling visually-hidden list referenced by the figure's `aria-describedby`.
  */
-export declare function ChartFrame({ label, description, summaryRows, imgSummary, hasData, height, className, id, children, }: ChartFrameProps): React.JSX.Element;
+export declare function ChartFrame({ label, description, summaryRows, imgSummary, hasData, height, size, footer, className, id, children, ref, }: ChartFrameProps): React.JSX.Element;
 export {};

package/dist/components/charts/chart-frame.js

@@ -34,9 +34,12 @@ function ChartFrame({
   imgSummary,
   hasData,
   height,
+  size,
+  footer,
   className,
   id,
-  children
+  children,
+  ref
 }) {
   const reactId = React.useId();
   const titleId = `${id ?? reactId}-title`;
@@ -44,14 +47,17 @@ function ChartFrame({
   return /* @__PURE__ */ jsxs(
     "figure",
     {
+      ref,
       id,
       "data-slot": "chart",
+      "data-size": size,
       className: cn("ui-chart", className),
       "aria-labelledby": titleId,
       "aria-describedby": descId,
       children: [
         /* @__PURE__ */ jsx("figcaption", { id: titleId, className: "ui-chart-title", children: label }),
         /* @__PURE__ */ jsx("div", { className: "ui-chart-canvas", style: { height }, role: "img", "aria-label": imgSummary, children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "ui-chart-footer", children: footer }) : null,
         /* @__PURE__ */ jsxs("p", { id: descId, className: "sr-only", children: [
           description ? /* @__PURE__ */ jsxs(Fragment, { children: [
             description,

package/dist/components/charts/chart-summary.d.ts

@@ -14,8 +14,29 @@ export declare function buildCartesianSummary(data: ChartDatum[], series: ChartS
     series: number;
     points: number;
 }) => string): ChartSummary;
+/**
+ * Build the "category: value" rows for a SINGLE-series chart (pie slices, a
+ * compact bar trend…). `annotate` decorates the row of a highlighted datum —
+ * a text alternative for an emphasis that is otherwise colour-only (WCAG 1.4.1).
+ */
+export declare function buildSeriesRows(data: ChartDatum[], categoryKey: string, valueKey: string, fmt: Formatter, annotate?: (index: number) => string | undefined): string[];
 /** Build the per-slice rows + a one-line summary for a pie chart. */
 export declare function buildPieSummary(data: ChartDatum[], dataKey: string, nameKey: string, fmt: Formatter, summaryLine: (counts: {
     slices: number;
 }) => string): ChartSummary;
+/** Build the per-category rows + a one-line summary for a single-series trend. */
+export declare function buildTrendSummary(data: ChartDatum[], categoryKey: string, valueKey: string, fmt: Formatter, summaryLine: (counts: {
+    points: number;
+}) => string, annotate?: (index: number) => string | undefined): ChartSummary;
+/**
+ * Normalize raw values to 0..1 bar ratios against the largest magnitude.
+ * Negative values plot at the baseline (a compact trend has no negative axis) but
+ * still read their true figure in the text alternative.
+ */
+export declare function trendRatios(data: ChartDatum[], valueKey: string): number[];
+/**
+ * Resolve `emphasizedIndex` against a row count. Negative counts from the end
+ * (`-1` = the latest datum). Out-of-range → no emphasis.
+ */
+export declare function resolveEmphasizedIndex(index: number | undefined, length: number): number;
 export {};

package/dist/components/charts/chart-summary.js

@@ -11,13 +11,40 @@ function buildCartesianSummary(data, series, categoryKey, fmt, list, summaryLine
   });
   return { rows, img: summaryLine({ series: series.length, points: data.length }) };
 }
+function buildSeriesRows(data, categoryKey, valueKey, fmt, annotate) {
+  return data.map((datum, index) => {
+    const row = `${String(datum[categoryKey] ?? "")}: ${fmt.format(numeric(datum[valueKey]))}`;
+    const note = annotate?.(index);
+    return note ? `${row} (${note})` : row;
+  });
+}
 function buildPieSummary(data, dataKey, nameKey, fmt, summaryLine) {
-  const rows = data.map(
-    (datum) => `${String(datum[nameKey] ?? "")}: ${fmt.format(numeric(datum[dataKey]))}`
-  );
-  return { rows, img: summaryLine({ slices: data.length }) };
+  return {
+    rows: buildSeriesRows(data, nameKey, dataKey, fmt),
+    img: summaryLine({ slices: data.length })
+  };
+}
+function buildTrendSummary(data, categoryKey, valueKey, fmt, summaryLine, annotate) {
+  return {
+    rows: buildSeriesRows(data, categoryKey, valueKey, fmt, annotate),
+    img: summaryLine({ points: data.length })
+  };
+}
+function trendRatios(data, valueKey) {
+  const values = data.map((datum) => Math.max(0, numeric(datum[valueKey])));
+  const max = values.reduce((acc, value) => value > acc ? value : acc, 0);
+  return values.map((value) => max > 0 ? value / max : 0);
+}
+function resolveEmphasizedIndex(index, length) {
+  if (index === void 0 || !Number.isInteger(index) || length === 0) return -1;
+  const resolved = index < 0 ? length + index : index;
+  return resolved >= 0 && resolved < length ? resolved : -1;
 }
 export {
   buildCartesianSummary,
-  buildPieSummary
+  buildPieSummary,
+  buildSeriesRows,
+  buildTrendSummary,
+  resolveEmphasizedIndex,
+  trendRatios
 };

package/dist/components/charts/compact-bar-trend.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+import type { CompactBarTrendProp } from "../../props/components/charts.prop.js";
+export type { CompactBarTrendProp, CompactBarTrendProp as CompactBarTrendProps, } from "../../props/components/charts.prop.js";
+/**
+ * CompactBarTrend — a **dependency-free** compact vertical bar trend for dashboard
+ * summary cards (a seven-day "new organizations" strip, a weekly activity pulse…).
+ *
+ * Unlike `BarChart` it does NOT need the `recharts` optional peer: the marks are
+ * token-sized CSS blocks, so a consumer that may not add dependencies still gets a
+ * real framework chart instead of a page-local grid with inline heights.
+ *
+ * - **Geometry is entirely token-owned** — `--chart-trend-plot-height-{xs,sm,md,lg}`,
+ *   `--chart-trend-bar-{gap,radius,max-width,min-height}`. The only inline value is
+ *   the datum itself (`--chart-trend-bar-value`, a 0..1 ratio of the largest bar).
+ * - **Colour is token-owned** — muted marks read `--chart-trend-bar-background`
+ *   (default `hsl(var(--muted-foreground) / .75)`), the emphasized mark reads
+ *   `--chart-trend-bar-emphasis-background` (default `hsl(var(--primary))`).
+ * - **a11y** — reuses `ChartFrame`: a `<figure>` with a visible `<figcaption>`, a
+ *   `role="img"` plot named by a localized one-line summary, and a visually-hidden
+ *   per-category value list referenced through `aria-describedby` (WCAG 1.1.1). The
+ *   emphasized bar is ALSO named in that list, so the highlight is never
+ *   colour-only (WCAG 1.4.1). The graphic holds no focusable elements — anything
+ *   interactive belongs in `footer`, which renders outside the graphic.
+ * - **i18n** — values are formatted with the active locale's `Intl.NumberFormat`;
+ *   every generated string comes from `t()`.
+ *
+ * Import from `@godxjp/ui/charts/compact-bar-trend`. The isolated public entry keeps
+ * consumers without the optional `recharts` peer away from the peer-backed charts barrel.
+ */
+export declare function CompactBarTrend({ data, categoryKey, valueKey, label, description, size, emphasizedIndex, showCategoryLabels, numberFormat, footer, emptyMessage, className, id, ref, }: CompactBarTrendProp): React.JSX.Element;

package/dist/components/charts/compact-bar-trend.js

@@ -0,0 +1,74 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { EmptyState } from "../data-display/empty-state.js";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { ChartFrame, useChartNumberFormat } from "./chart-frame.js";
+import { buildTrendSummary, resolveEmphasizedIndex, trendRatios } from "./chart-summary.js";
+function CompactBarTrend({
+  data,
+  categoryKey,
+  valueKey,
+  label,
+  description,
+  size = "xs",
+  emphasizedIndex,
+  showCategoryLabels = true,
+  numberFormat,
+  footer,
+  emptyMessage,
+  className,
+  id,
+  ref
+}) {
+  const { t } = useTranslation();
+  const fmt = useChartNumberFormat(numberFormat);
+  const hasData = data.length > 0;
+  const emphasized = resolveEmphasizedIndex(emphasizedIndex, data.length);
+  const ratios = React.useMemo(() => trendRatios(data, valueKey), [data, valueKey]);
+  const summary = buildTrendSummary(
+    data,
+    categoryKey,
+    valueKey,
+    fmt,
+    (counts) => t("chart.summaryTrend", { points: fmt.format(counts.points) }),
+    (index) => index === emphasized ? t("chart.trendCurrent") : void 0
+  );
+  return /* @__PURE__ */ jsx(
+    ChartFrame,
+    {
+      ref,
+      label,
+      description,
+      summaryRows: summary.rows,
+      imgSummary: summary.img,
+      hasData,
+      size,
+      footer,
+      className: cn("ui-chart-trend", className),
+      id,
+      children: hasData ? /* @__PURE__ */ jsxs("div", { className: "ui-chart-trend-body", children: [
+        /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-plot", "aria-hidden": "true", children: data.map((datum, index) => /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-column", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "ui-chart-trend-bar",
+            "data-emphasized": index === emphasized ? "true" : void 0,
+            style: { "--chart-trend-bar-value": ratios[index] }
+          }
+        ) }, `${String(datum[categoryKey])}-${index}`)) }),
+        showCategoryLabels ? /* @__PURE__ */ jsx("div", { className: "ui-chart-trend-ticks", "aria-hidden": "true", children: data.map((datum, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "ui-chart-trend-tick",
+            children: String(datum[categoryKey] ?? "")
+          },
+          `${String(datum[categoryKey])}-${index}`
+        )) }) : null
+      ] }) : /* @__PURE__ */ jsx(EmptyState, { title: emptyMessage ?? t("chart.empty") })
+    }
+  );
+}
+export {
+  CompactBarTrend
+};

package/dist/components/charts/index.d.ts

@@ -8,6 +8,12 @@ export { LineChart } from "./line-chart.js";
 export type { LineChartProp, LineChartProps } from "./line-chart.js";
 export { BarChart } from "./bar-chart.js";
 export type { BarChartProp, BarChartProps } from "./bar-chart.js";
+/**
+ * Dependency-free compact trend. Consumers without recharts should use the isolated
+ * `@godxjp/ui/charts/compact-bar-trend` entry so this barrel does not link peer-backed charts.
+ */
+export { CompactBarTrend } from "./compact-bar-trend.js";
+export type { CompactBarTrendProp, CompactBarTrendProps } from "./compact-bar-trend.js";
 export { AreaChart } from "./area-chart.js";
 export type { AreaChartProp, AreaChartProps } from "./area-chart.js";
 export { PieChart } from "./pie-chart.js";

package/dist/components/charts/index.js

@@ -1,5 +1,6 @@
 import { LineChart } from "./line-chart.js";
 import { BarChart } from "./bar-chart.js";
+import { CompactBarTrend } from "./compact-bar-trend.js";
 import { AreaChart } from "./area-chart.js";
 import { PieChart } from "./pie-chart.js";
 import { CHART_COLORS } from "./chart-frame.js";
@@ -7,6 +8,7 @@ export {
   AreaChart,
   BarChart,
   CHART_COLORS,
+  CompactBarTrend,
   LineChart,
   PieChart
 };

package/dist/components/data-display/badge.d.ts

@@ -24,4 +24,12 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
     children?: React.ReactNode;
 }
 export declare function Badge({ className, variant, shape, tone, icon, status, children, ...props }: BadgeProps): React.JSX.Element;
+/**
+ * Status-aware badge with the shared domain-status-to-tone mapping.
+ *
+ * `Badge` remains the general-purpose primitive. Prefer `StatusBadge` when the
+ * `status` prop drives presentation so status colours remain consistent across
+ * products.
+ */
+export declare const StatusBadge: typeof Badge;
 export {};

package/dist/components/data-display/badge.js

@@ -29,6 +29,10 @@ const STATUS_MAP = {
   done: { tone: "success", icon: CheckCircle2 },
   permanent: { tone: "success", icon: CheckCircle2 },
   succeeded: { tone: "success", icon: CheckCircle2 },
+  trialing: { tone: "info", icon: Clock },
+  past_due: { tone: "warning", icon: AlertCircle },
+  incomplete: { tone: "default", icon: Circle },
+  canceled: { tone: "destructive", icon: XCircle },
   draft: { tone: "neutral", icon: Circle },
   pending: { tone: "warning", icon: Clock },
   scheduled: { tone: "info", icon: Clock },
@@ -109,6 +113,8 @@ function Badge({
     }
   );
 }
+const StatusBadge = Badge;
 export {
-  Badge
+  Badge,
+  StatusBadge
 };

package/dist/components/data-display/data-table.d.ts

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { flexRender, type OnChangeFn, type PaginationState, type RowData, type VisibilityState } from "@tanstack/react-table";
-import type { ColumnDefProp, DensityProp, SortStateProp } from "../../props/vocabulary/index.js";
+import type { BreakpointProp, ColumnDefProp, DensityProp, SortStateProp, TablePresetProp } from "../../props/vocabulary/index.js";
 export type Density = DensityProp;
 /**
  * Lean column definition — the simple, common-case column API. `render` shapes
  * a cell; `sortable` opts the column into the sort cycle; `align` / `width` /
- * `pin` / `hiddenOnMobile` tune layout; `enableHiding` (default true) lists the
- * column in DataTable.ViewOptions. Adapted to a TanStack column internally.
+ * `pin` / `hiddenOnMobile` / `priority` tune layout; `enableHiding` (default true)
+ * lists the column in DataTable.ViewOptions. Adapted to a TanStack column internally.
  */
 export type ColumnDef<T> = ColumnDefProp<T>;
 declare module "@tanstack/react-table" {
@@ -52,12 +52,48 @@ interface DataTableProps<T> {
     loading?: boolean;
     /** Custom empty content when `data` is empty; defaults to a built-in EmptyState. */
     empty?: React.ReactNode;
+    /**
+     * Failure state (#216). `true` renders the built-in localized error message; any other node
+     * REPLACES it (e.g. an `Alert` carrying an error code + request id). Pass `undefined`/`false`
+     * when the read succeeded. Never pass a raw `Error` object — it is not renderable.
+     * Announced via `role="alert"`; precedence is loading → denied → error → empty → rows.
+     */
+    error?: React.ReactNode;
+    /**
+     * Permission-denied state (#216) — the read was refused, not failed. `true` renders the
+     * built-in localized "no access" message; any other node replaces it. Distinct from `error`
+     * so a 403 never offers a pointless retry.
+     */
+    denied?: React.ReactNode;
+    /** Retry handler for the built-in `error` state; omit to hide the retry action. */
+    onRetry?: () => void;
     /** Zebra-stripe the body rows (even rows get a subtle fill). */
     striped?: boolean;
     /** Highlight a row on hover even when it is not clickable (no `onRowClick`). */
     hoverable?: boolean;
     /** Pin the header to the top while the body scrolls. Default true. */
     stickyHeader?: boolean;
+    /**
+     * Named collection contract (gh#253) — the SAME preset the `Table` primitive owns, forwarded to
+     * the table DataTable renders, so a TanStack-driven queue gets the identical responsive contract.
+     * `"default"` (the default) emits no attribute and matches no selector: an existing DataTable is
+     * byte-identical. `"action-collection"` is the canonical dense approval / action queue: below
+     * `collapseBelow` the desktop intrinsic column widths give way to the token-owned column-PRIORITY
+     * measures (`--table-action-collection-*`) under `table-layout: fixed`, cells wrap, and the
+     * bordered surface drops its `--table-surface-min-inline-size` floor — so requester · target ·
+     * reason · requested date · row actions all stay inside a 390px frame with no horizontal scroll.
+     * Mark each column with `priority` on its `ColumnDef`; DataTable stamps it on the `<th>` AND the
+     * `<td>` for you. The table stays a REAL table: no `display` change, no role rewriting, no card
+     * swap, so header association, `aria-sort` and screen-reader navigation are identical at 1440.
+     */
+    preset?: TablePresetProp;
+    /**
+     * Step at which `preset="action-collection"` switches to the compact priority measures, measured
+     * against the TABLE's own container (a container query), not the viewport — a table inside a
+     * master rail collapses before the page does. Default `"sm"`. Ignored while `preset` is
+     * `"default"`.
+     */
+    collapseBelow?: BreakpointProp;
     /**
      * Per-row className for state-based row tinting (e.g. flag an invalid or
      * empty record). Returned classes are appended last, so they win over the
@@ -67,7 +103,7 @@ interface DataTableProps<T> {
     className?: string;
     children?: React.ReactNode;
 }
-export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: controlledPagination, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, striped, hoverable, stickyHeader, rowClassName, className, children, }: DataTableProps<T>): React.JSX.Element;
+export declare function DataTable<T>({ data, columns, getRowId, selectable, selected: controlledSelected, onSelectChange, onRowClick, density: controlledDensity, onDensityChange, sort, onSortChange, globalFilter: controlledGlobalFilter, onGlobalFilterChange, pagination: controlledPagination, onPaginationChange, rowCount, columnVisibility: controlledVisibility, onColumnVisibilityChange, manualSorting, manualFiltering, manualPagination, loading, empty, error, denied, onRetry, striped, hoverable, stickyHeader, preset, collapseBelow, rowClassName, className, children, }: DataTableProps<T>): React.JSX.Element;
 export declare namespace DataTable {
     var Toolbar: ({ children, className, }: {
         children?: React.ReactNode;

package/dist/components/data-display/data-table.js

@@ -10,6 +10,7 @@ import {
   useReactTable
 } from "@tanstack/react-table";
 import {
+  AlertCircle,
   ArrowDown,
   ArrowUp,
   ChevronLeft,
@@ -18,6 +19,8 @@ import {
   Layers,
   Layers2,
   MoreHorizontal,
+  RefreshCw,
+  ShieldAlert,
   SlidersHorizontal
 } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
@@ -113,9 +116,14 @@ function DataTable({
   manualPagination = false,
   loading = false,
   empty,
+  error,
+  denied,
+  onRetry,
   striped = false,
   hoverable = false,
   stickyHeader = true,
+  preset = "default",
+  collapseBelow = "sm",
   rowClassName,
   className,
   children
@@ -207,9 +215,14 @@ function DataTable({
     onRowClick,
     loading,
     empty,
+    error,
+    denied,
+    onRetry,
     striped,
     hoverable,
     stickyHeader,
+    preset,
+    collapseBelow,
     rowClassName
   };
   const hasContent = React.Children.toArray(children).some(
@@ -378,12 +391,20 @@ DataTable.Content = function DataTableContent() {
     onRowClick,
     loading,
     empty,
+    error,
+    denied,
+    onRetry,
     striped,
     hoverable,
     stickyHeader,
+    preset,
+    collapseBelow,
     rowClassName
   } = useDataTableContext();
   const { t } = useTranslation();
+  const presetAttr = preset === "default" ? void 0 : preset;
+  const isDenied = denied != null && denied !== false;
+  const isError = !isDenied && error != null && error !== false;
   const rowPadding = tableRowHeightClass;
   const cellPadding = tableCellPaddingClass;
   const visibleColumns = table.getVisibleLeafColumns().map((c) => c.columnDef.meta?.lean).filter((c) => !!c);
@@ -425,10 +446,11 @@ DataTable.Content = function DataTableContent() {
       children: /* @__PURE__ */ jsx(
         "div",
         {
-          className: "ui-data-table-surface min-w-[640px] sm:min-w-0",
+          className: "ui-data-table-surface",
+          "data-preset": presetAttr,
           "data-striped": striped ? "" : void 0,
           "data-hoverable": hoverable ? "" : void 0,
-          children: /* @__PURE__ */ jsxs(Table, { scrollable: false, children: [
+          children: /* @__PURE__ */ jsxs(Table, { scrollable: false, preset, collapseBelow, children: [
             /* @__PURE__ */ jsx(TableHeader, { className: cn("bg-secondary", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs(TableRow, { children: [
               selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
               visibleColumns.map((col) => {
@@ -444,6 +466,7 @@ DataTable.Content = function DataTableContent() {
                 return /* @__PURE__ */ jsx(
                   TableHead,
                   {
+                    priority: col.priority,
                     "data-empty": headerEmpty || void 0,
                     "aria-sort": isSortable ? isActiveSort ? activeSort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
                     className: cn(
@@ -480,6 +503,7 @@ DataTable.Content = function DataTableContent() {
                 visibleColumns.map((col, j) => /* @__PURE__ */ jsx(
                   TableCell,
                   {
+                    priority: col.priority,
                     className: cn(
                       cellPadding,
                       col.width,
@@ -503,6 +527,48 @@ DataTable.Content = function DataTableContent() {
                   col.key
                 ))
               ] }, `skeleton-${i}`))
+            ) : isDenied ? (
+              // DENIED (#216): the read was REFUSED, not failed — no retry is offered, because
+              // repeating a 403 cannot succeed. `warning` (not destructive) keeps it a policy
+              // statement rather than a system fault. Announced politely: a permission boundary
+              // is expected information, not an interruption.
+              /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  colSpan: emptyColSpan,
+                  className: "ui-data-table-empty",
+                  "aria-live": "polite",
+                  children: denied === true ? /* @__PURE__ */ jsx(
+                    EmptyState,
+                    {
+                      icon: ShieldAlert,
+                      tone: "warning",
+                      title: t("dataTable.denied"),
+                      description: t("dataTable.deniedDescription"),
+                      titleAs: "p"
+                    }
+                  ) : denied
+                }
+              ) })
+            ) : isError ? (
+              // ERROR (#216): a failed read. Announced assertively (`role="alert"`) because the
+              // user's request did not complete — unlike empty/denied, which are states of the data
+              // itself. The role sits on an inner wrapper, never on the <td>: overriding a cell's
+              // role would strip it out of the table's grid semantics for AT.
+              /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: emptyColSpan, className: "ui-data-table-empty", children: /* @__PURE__ */ jsx("div", { role: "alert", children: error === true ? /* @__PURE__ */ jsx(
+                EmptyState,
+                {
+                  icon: AlertCircle,
+                  tone: "destructive",
+                  title: t("dataTable.error"),
+                  description: t("dataTable.errorDescription"),
+                  titleAs: "p",
+                  action: onRetry ? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
+                    /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }),
+                    t("common.retry")
+                  ] }) : void 0
+                }
+              ) : error }) }) })
             ) : rowCount === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
               TableCell,
               {
@@ -559,6 +625,7 @@ DataTable.Content = function DataTableContent() {
                     visibleColumns.map((col) => /* @__PURE__ */ jsx(
                       TableCell,
                       {
+                        priority: col.priority,
                         className: cn(
                           cellPadding,
                           col.width,

package/dist/components/data-display/empty-state.js

@@ -22,7 +22,7 @@ function EmptyState({
       role: "status",
       className: cn("ui-empty-state", className),
       children: [
-        Icon && variant !== "compact" && /* @__PURE__ */ jsx("div", { className: "ui-empty-state-icon", children: /* @__PURE__ */ jsx(Icon, { className: "text-muted-foreground size-6", "aria-hidden": "true" }) }),
+        Icon && variant !== "compact" && /* @__PURE__ */ jsx("div", { className: "ui-empty-state-icon", children: /* @__PURE__ */ jsx(Icon, { className: "size-6", "aria-hidden": "true" }) }),
         createElement(TitleTag, { className: "ui-empty-state-title" }, title),
         description && /* @__PURE__ */ jsx("p", { className: "ui-empty-state-description", children: description }),
         action && /* @__PURE__ */ jsx("div", { children: action })

package/dist/components/data-display/index.d.ts

@@ -1,7 +1,7 @@
-export { Badge } from "./badge.js";
+export { Badge, StatusBadge } from "./badge.js";
 export type { BadgeProps } from "./badge.js";
 export { ListRow } from "./list-row.js";
-export type { ListRowProps } from "./list-row.js";
+export type { ListRowProps, ListRowDensity } from "./list-row.js";
 export { CredentialReveal } from "./credential-reveal.js";
 export type { CredentialRevealProp, CredentialRevealProps, CredentialRevealTone, } from "./credential-reveal.js";
 export { QrCode } from "./qr-code.js";
@@ -10,6 +10,8 @@ export type { QrCodeProp } from "../../props/components/data-display.prop.js";
 export { Avatar, AvatarImage, AvatarFallback } from "./avatar.js";
 export { Card, CardBar, CardContent, CardCover, CardDescription, CardFooter, CardHeader, CardTitle, CardAction, StatCard, } from "./card.js";
 export type { StatCardProps, CardBarProps } from "./card.js";
+export { ServiceCatalogCta, ServiceLauncherCard, ServiceLauncherCardSkeleton, } from "./service-launcher-card.js";
+export type { ServiceCatalogCtaProps, ServiceLauncherCardProps, ServiceLauncherCardSkeletonProps, ServiceLauncherStatusTone, } from "./service-launcher-card.js";
 export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 export { Descriptions } from "./descriptions.js";
 export { DataTable, flexRender } from "./data-table.js";