@elabs-ai/components-ui 4.2.0 → 5.1.0

package/src/components/integration-matrix/integration-matrix.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+/**
+ * IntegrationMatrix — every agent-facing integration unit, as installable rows.
+ *
+ * Ships no site copy, no URL and no install command of its own (`i18n-strings`,
+ * `remote-origins`): every string, host and command text is a prop. A single host
+ * selector at the top swaps every row's copy action at once, so a visitor picks
+ * their tool once instead of re-reading each row for it.
+ */
+import { forwardRef, type HTMLAttributes } from "react";
+import { ArrowRight } from "lucide-react";
+import { cn } from "../../lib/cn";
+import { useControllableState } from "../../lib/use-controllable-state";
+import { Button } from "../button";
+import { CommandChip } from "../command-chip";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../tooltip";
+
+/** One host the visitor can pick — the selection swaps every row's copy action. */
+export interface IntegrationMatrixHost {
+  /** Stable id, matched against each action's `value` map. */
+  id: string;
+  /** Shown in the selector. */
+  label: string;
+}
+
+/** One action a row offers: copy a command, or follow a link. */
+export interface IntegrationMatrixAction {
+  /** Shown on the link button, or as the copy button's accessible name suffix. */
+  label: string;
+  kind: "copy" | "link";
+  /**
+   * `kind: "copy"` — the exact text per host id (a row that never changes by host
+   * repeats the same string under every id). `kind: "link"` — a single href string.
+   */
+  value: string | Record<string, string>;
+}
+
+/** One installable unit — hosted MCP, local MCP + CLI, the plugin, `llms.txt`, … */
+export interface IntegrationMatrixRow {
+  id: string;
+  unit: string;
+  gives: string;
+  actions: IntegrationMatrixAction[];
+}
+
+/** One step of the routine line below the matrix (`info → search → docs → …`). */
+export interface IntegrationMatrixRoutineStep {
+  verb: string;
+  /** Tooltip body — what the verb does. */
+  does: string;
+}
+
+export interface IntegrationMatrixLabels {
+  /** Visible label beside the host selector. */
+  hostSelectLabel: string;
+  /** `aria-label` of the host `Select` trigger. */
+  hostSelectAriaLabel: string;
+  unitHeading: string;
+  givesHeading: string;
+  actionsHeading: string;
+  /** Heading above the routine chips. */
+  routineHeading: string;
+}
+
+export const DEFAULT_INTEGRATION_MATRIX_LABELS: IntegrationMatrixLabels = {
+  hostSelectLabel: "Show commands for",
+  hostSelectAriaLabel: "Host to show commands for",
+  unitHeading: "Unit",
+  givesHeading: "Gives you",
+  actionsHeading: "Actions",
+  routineHeading: "The daily routine",
+};
+
+export interface IntegrationMatrixProps extends HTMLAttributes<HTMLDivElement> {
+  hosts: IntegrationMatrixHost[];
+  rows: IntegrationMatrixRow[];
+  /** The routine strip below the matrix; omitted entirely when empty. */
+  routine?: IntegrationMatrixRoutineStep[];
+  /** Selected host id (controlled). */
+  value?: string;
+  /** Initially selected host id (uncontrolled). Default: the first host. */
+  defaultValue?: string;
+  /** Fires when the visitor picks another host. */
+  onValueChange?: (id: string) => void;
+  /** Fires after a copy attempt with the row id, the action label and the text. */
+  onCopyAction?: (rowId: string, actionLabel: string, text: string, copied: boolean) => void;
+  labels?: Partial<IntegrationMatrixLabels>;
+}
+
+function resolveCopyValue(value: string | Record<string, string>, hostId: string): string {
+  if (typeof value === "string") return value;
+  return value[hostId] ?? Object.values(value)[0] ?? "";
+}
+
+export const IntegrationMatrix = forwardRef<HTMLDivElement, IntegrationMatrixProps>(
+  function IntegrationMatrix(
+    {
+      hosts,
+      rows,
+      routine,
+      value,
+      defaultValue,
+      onValueChange,
+      onCopyAction,
+      labels: labelsProp,
+      className,
+      ...props
+    },
+    ref,
+  ) {
+    const labels = { ...DEFAULT_INTEGRATION_MATRIX_LABELS, ...labelsProp };
+    const [hostId, setHostId] = useControllableState(
+      value,
+      defaultValue ?? hosts[0]?.id ?? "",
+      onValueChange,
+    );
+
+    return (
+      <div
+        ref={ref}
+        data-slot="integration-matrix"
+        className={cn("flex flex-col gap-6", className)}
+        {...props}
+      >
+        {hosts.length > 1 ? (
+          <div className="flex items-center gap-3">
+            <span className="text-body text-muted-foreground">{labels.hostSelectLabel}</span>
+            <Select value={hostId} onValueChange={setHostId}>
+              <SelectTrigger
+                data-slot="integration-matrix-host"
+                aria-label={labels.hostSelectAriaLabel}
+                className="min-w-40"
+              >
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {hosts.map((host) => (
+                  <SelectItem key={host.id} value={host.id}>
+                    {host.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        ) : null}
+
+        {/* md+: a 3-column grid with a header row. Below md: stacked cards, one per row. */}
+        <div className="flex flex-col gap-4 md:gap-0">
+          <div className="hidden grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)_minmax(0,1.6fr)] gap-4 border-b border-border-strong pb-2 md:grid">
+            <span className="text-caption font-semibold text-muted-foreground">
+              {labels.unitHeading}
+            </span>
+            <span className="text-caption font-semibold text-muted-foreground">
+              {labels.givesHeading}
+            </span>
+            <span className="text-caption font-semibold text-muted-foreground">
+              {labels.actionsHeading}
+            </span>
+          </div>
+          {rows.map((row) => (
+            <div
+              key={row.id}
+              data-slot="integration-matrix-row"
+              className="grid grid-cols-1 gap-3 border-b py-4 last:border-b-0 md:grid-cols-[minmax(0,1fr)_minmax(0,1.2fr)_minmax(0,1.6fr)] md:items-center md:gap-4"
+            >
+              <span className="text-body font-medium text-foreground">{row.unit}</span>
+              <span className="text-body text-muted-foreground">{row.gives}</span>
+              <div
+                data-slot="integration-matrix-actions"
+                className="flex flex-wrap items-center gap-2"
+              >
+                {row.actions.map((action) =>
+                  action.kind === "copy" ? (
+                    <CommandChip
+                      key={action.label}
+                      className="max-w-full"
+                      hosts={[
+                        {
+                          id: "value",
+                          label: action.label,
+                          command: resolveCopyValue(action.value, hostId),
+                        },
+                      ]}
+                      onCopyCommand={(text, copied) =>
+                        onCopyAction?.(row.id, action.label, text, copied)
+                      }
+                    />
+                  ) : (
+                    <Button key={action.label} variant="link" size="sm" asChild>
+                      <a href={resolveCopyValue(action.value, hostId)}>{action.label}</a>
+                    </Button>
+                  ),
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {routine && routine.length > 0 ? (
+          <div className="flex flex-col gap-3">
+            <h3 className="text-caption font-semibold text-muted-foreground">
+              {labels.routineHeading}
+            </h3>
+            <TooltipProvider>
+              <div
+                data-slot="integration-matrix-routine"
+                className="flex flex-wrap items-center gap-2"
+              >
+                {routine.map((step, index) => (
+                  <div key={step.verb} className="flex items-center gap-2">
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <span
+                          data-slot="integration-matrix-routine-step"
+                          tabIndex={0}
+                          className="inline-flex items-center rounded-md border border-input bg-card px-2.5 py-1 font-mono text-code text-foreground focus-ring"
+                        >
+                          {step.verb}
+                        </span>
+                      </TooltipTrigger>
+                      <TooltipContent>{step.does}</TooltipContent>
+                    </Tooltip>
+                    {index < routine.length - 1 ? (
+                      <ArrowRight aria-hidden="true" className="size-4 text-muted-foreground" />
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            </TooltipProvider>
+          </div>
+        ) : null}
+      </div>
+    );
+  },
+);

package/src/components/locale-provider/messages.ts

@@ -170,6 +170,11 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "ui.themeSwitcher.light": "Light",
   "ui.themeSwitcher.dark": "Dark",
   "ui.navNotifications.label": "Notifications",
+  // NavUser — the standard sidebar footer: account menu group label and its
+  // two default actions.
+  "ui.navUser.label": "Account",
+  "ui.navUser.settings": "Settings",
+  "ui.navUser.signOut": "Sign out",
   "ui.teamSwitcher.label": "Teams",
   "ui.teamSwitcher.addTeam": "Add team",
   // Table's own scroll wrapper (#366). Rendered ONLY when the wrapper actually
@@ -300,6 +305,16 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   // override renders locale-appropriate digits/grouping instead of a raw
   // Latin-digit JS number).
   "data.table.resizeColumnValue": { one: "{size} pixel", other: "{size} pixels" },
+  // `showRanks` (RM-123). The printed number is the row's position in the DATA
+  // AS SUPPLIED, not its position on screen: it travels with its row through
+  // sorting, filtering and paging, so beside a sorted column it legitimately
+  // reads 2, 1, 6, 4. That rule is invisible in a column headed by a bare "#",
+  // which reads as a broken ranking — so it is said twice: `rankHeader` is the
+  // column's accessible NAME (the "#" glyph is decorative beside it), and
+  // `rankKey` is the one-line key printed above the table for everyone else.
+  "data.table.rankHeader": "Position in the data as supplied",
+  "data.table.rankKey":
+    "# is each row’s position in the data as supplied, not its position in this view — sorting never renumbers it.",
   // Row drag-reorder (#13). `reorderHandle`/`reorderColumnHeader` name the
   // grip control and its column; the four `reorder*` announcement keys back
   // the aria-live region dnd-kit's `accessibility.announcements` renders on
@@ -338,6 +353,11 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   // (ChartFrame, ChartCard, AutoChart all show the same "a chart is loading"
   // concept — one key, reused, rather than three near-duplicate strings).
   "charts.chart.loading": "Loading chart…",
+  // ChartFallback's default copy per `kind` (#304). Written for the reader of
+  // the page, not the developer: the unsupported chart type name goes to a
+  // dev-only console warning, never into this string.
+  "charts.chart.empty": "No data to display",
+  "charts.chart.unsupported": "This chart can’t be displayed.",
   "charts.metricGrid.loading": "Loading metrics…",
   // Chart drill-down (#349). The chart SVG is aria-hidden, so these names are
   // the ONLY thing AT reads for an interactive datapoint — there is no
@@ -345,9 +365,24 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "charts.datapointLayer.label": "Chart data points",
   "charts.datapoint.label": "{series}, {category}: {value}",
   "charts.datapoint.labelNoSeries": "{category}: {value}",
+  // A target with no value (a tree node, a parallel-coordinates line, an empty
+  // heatmap cell) drops the separator rather than announcing a dangling ":".
+  "charts.datapoint.labelNoValue": "{series}, {category}",
+  "charts.datapoint.labelNoSeriesNoValue": "{category}",
+  // Stands in for {category} when a target has none, so the name is never a
+  // bare value or an empty string. {position} is 1-based.
+  "charts.datapoint.position": "Data point {position}",
+  // DumbbellChart: a target spans two values, so both ends are announced.
+  "charts.datapoint.labelRange": "{category}: {start} to {end}",
   // Announced when `copyValueOnActivate` puts a datapoint's exact value on the
   // clipboard — the recovery path for a compact axis label.
   "charts.datapoint.copied": "Exact value copied",
+  // chart selection — RM-073
+  // Appended to a datapoint's name when a host's `selectionStates` resolves it,
+  // so the selection tri-state never rides on colour/opacity alone (WCAG 1.4.1).
+  // `associated` is the resting state and adds nothing.
+  "charts.datapoint.selected": "{label}, selected",
+  "charts.datapoint.excluded": "{label}, excluded",
   // ChartFrame's SVG/PNG export actions (RM-025). Each string is used twice —
   // as the icon button's `aria-label` (its ONLY accessible name) and as the
   // tooltip a sighted user reads — so one key serves both and they cannot
@@ -364,6 +399,9 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "charts.chartFrame.noDataToSummarize": "No data to summarize.",
   "charts.chartFrame.defaultTitle": "Chart",
   "charts.chartFrame.summaryDetailLabel": "Chart summary",
+  // ChartFrame's scrollable body (#432 round 3, WCAG 2.1.1): only set as
+  // `aria-label`/`tabIndex` while the body actually overflows its box.
+  "charts.chartFrame.scrollableRegion": "Scrollable chart: {title}",
   "charts.legend.label": "Chart legend",
   "charts.gantt.timeline": "Timeline",
   "charts.gantt.dragToResizeColumn": "Drag to resize column",
@@ -381,11 +419,151 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "charts.gantt.unitMinute": "Minute",
   "charts.gantt.unitSecond": "Second",
   "charts.gantt.unitMillisecond": "Millisecond",
+  // BulletChart (Few's bullet graph, RM-061). The SVG is aria-hidden, so this
+  // sentence — built from these fragments — is the ONLY thing AT reads: it
+  // states the value, its relationship to the target, and which qualitative
+  // band it falls in. {value}/{target} already carry a caller-supplied name
+  // via `labels` when one was given (composed before interpolation), so the
+  // template itself stays name-agnostic.
+  "charts.bulletChart.noData": "No data",
+  "charts.bulletChart.valueOfTarget": "{value} of {target} target",
+  "charts.bulletChart.gapAbove": "{amount} above target",
+  "charts.bulletChart.gapBelow": "{amount} below target",
+  "charts.bulletChart.onTarget": "on target",
+  "charts.bulletChart.band": "in band {band}",
+  "charts.bulletChart.comparative": "compared to {value}",
+  // RM-075 follow-up: `container` dashboard tile's default tablist name when the tile
+  // has no `title`.
+  "charts.dashboard.containerTabs": "Container tabs",
+  // dashboard edit — RM-078: edit-layer handles, size badge and screen-reader announcements.
+  // Columns and rows are announced 1-based; the badge shows the same numbers.
+  "charts.dashboard.edit.instructions":
+    "To pick up a tile, press Enter. Use the arrow keys to move it one cell, or four cells with Shift. Press Enter to drop it, or Escape to cancel. On a resize handle, the arrow keys resize directly.",
+  "charts.dashboard.edit.moveTile": "Move {title}",
+  "charts.dashboard.edit.resizeTile": "Resize {title} from {edge}",
+  "charts.dashboard.edit.edgeTop": "top",
+  "charts.dashboard.edit.edgeTopRight": "top-right",
+  "charts.dashboard.edit.edgeRight": "right",
+  "charts.dashboard.edit.edgeBottomRight": "bottom-right",
+  "charts.dashboard.edit.edgeBottom": "bottom",
+  "charts.dashboard.edit.edgeBottomLeft": "bottom-left",
+  "charts.dashboard.edit.edgeLeft": "left",
+  "charts.dashboard.edit.edgeTopLeft": "top-left",
+  "charts.dashboard.edit.sizeBadge": "({x},{y}) ⤢ {w} × {h}",
+  "charts.dashboard.edit.pickedUp": "Picked up {title} at column {x}, row {y}",
+  "charts.dashboard.edit.moved": "Moved to column {x}, row {y}",
+  "charts.dashboard.edit.dropped": "Dropped {title} at column {x}, row {y}, size {w} by {h}",
+  "charts.dashboard.edit.rejected": "Cannot place here — not enough room",
+  "charts.dashboard.edit.resizing": "Resizing {title}: {w} by {h}",
+  "charts.dashboard.edit.resized": "Resized {title} to {w} by {h}",
+  // dashboard edit — RM-078 (follow-up 5): a clamped keyboard step (grid edge or a tile's own
+  // min/max size) now announces once per key press instead of staying silent once the layout
+  // stops changing; cancel (Escape, or tabbing off a resize handle mid-gesture) says which
+  // gesture was cancelled and where it was restored to.
+  "charts.dashboard.edit.clampedEdge": "At the {edge} edge. ({x},{y}) {w} × {h}",
+  "charts.dashboard.edit.moveCancelled": "Move cancelled. Restored to column {x}, row {y}",
+  "charts.dashboard.edit.resizeCancelled":
+    "Resize cancelled. Restored to column {x}, row {y}, size {w} by {h}",
+  // dashboard toolbar — RM-079: mode switch, undo/redo, grid settings, save/discard, shortcuts.
+  "charts.dashboard.toolbar.ariaLabel": "Dashboard toolbar",
+  "charts.dashboard.toolbar.viewMode": "View",
+  "charts.dashboard.toolbar.editMode": "Edit",
+  "charts.dashboard.toolbar.editDisabledNarrow": "Editing needs a wider screen",
+  "charts.dashboard.toolbar.undo": "Undo",
+  "charts.dashboard.toolbar.redo": "Redo",
+  "charts.dashboard.toolbar.add": "Add",
+  "charts.dashboard.toolbar.grid": "Grid",
+  "charts.dashboard.toolbar.gridSettings": "Grid settings",
+  "charts.dashboard.toolbar.save": "Save",
+  "charts.dashboard.toolbar.discard": "Discard",
+  "charts.dashboard.toolbar.unsavedChanges": "Unsaved changes",
+  "charts.dashboard.toolbar.discardTitle": "Discard changes?",
+  "charts.dashboard.toolbar.discardDescription":
+    "Your edits since the last save will be lost. This cannot be undone.",
+  "charts.dashboard.toolbar.discardConfirm": "Discard changes",
+  "charts.dashboard.toolbar.shortcuts": "Keyboard shortcuts",
+  "charts.dashboard.toolbar.shortcutsDescription":
+    "Every shortcut available while this sheet is focused.",
+  "charts.dashboard.toolbar.shortcutsGroup": "Dashboard",
+  "charts.dashboard.toolbar.shortcutUndo": "Undo",
+  "charts.dashboard.toolbar.shortcutRedo": "Redo",
+  "charts.dashboard.toolbar.shortcutToggleEdit": "Toggle edit mode",
+  "charts.dashboard.toolbar.shortcutDelete": "Delete focused tiles",
+  "charts.dashboard.toolbar.shortcutDuplicate": "Duplicate focused tiles",
+  "charts.dashboard.toolbar.shortcutClearFocus": "Clear focus",
+  "charts.dashboard.toolbar.shortcutSave": "Save",
+  // tile operations — RM-081 follow-up 1: labels for the 5 shortcuts RM-081 added
+  // (dashboardShortcutDescriptors); the shortcuts sheet fell back to the raw action key
+  // without these.
+  "charts.dashboard.toolbar.shortcutCopy": "Copy focused tiles",
+  "charts.dashboard.toolbar.shortcutCut": "Cut focused tiles",
+  "charts.dashboard.toolbar.shortcutPaste": "Paste tiles",
+  "charts.dashboard.toolbar.shortcutSelectAll": "Select all tiles",
+  "charts.dashboard.toolbar.shortcutContextMenu": "Open the focused tile’s context menu",
+  // dashboard toolbar export — RM-084: the "Export sheet…" menu (SVG, PNG).
+  "charts.dashboard.toolbar.export": "Export sheet…",
+  "charts.dashboard.toolbar.exportSvg": "Export as SVG",
+  "charts.dashboard.toolbar.exportPng": "Export as PNG",
+  "charts.dashboard.grid.mode": "Layout mode",
+  "charts.dashboard.grid.modeFit": "Fit to screen",
+  "charts.dashboard.grid.modeFlow": "Flow",
+  "charts.dashboard.grid.density": "Density",
+  "charts.dashboard.grid.densityWide": "Wide",
+  "charts.dashboard.grid.densityMedium": "Medium",
+  "charts.dashboard.grid.densityNarrow": "Narrow",
+  "charts.dashboard.grid.densityCustom": "Custom",
+  "charts.dashboard.grid.columns": "Columns",
+  "charts.dashboard.grid.rows": "Rows",
+  "charts.dashboard.grid.rowHeight": "Row height",
+  "charts.dashboard.grid.gap": "Gap",
+  "charts.dashboard.grid.extendable": "Extend sheet",
+  "charts.dashboard.grid.extendableDescription":
+    "Adds 50 % more rows so it never runs out of room.",
+  // dashboard tile ops — RM-081: the tile context menu (right-click, header kebab, Shift+F10)
+  // and its "Replace with…" submenu, plus the toast on a destructive multi-tile delete.
+  "charts.dashboard.tileOps.menuLabel": "Tile actions",
+  "charts.dashboard.tileOps.duplicate": "Duplicate",
+  "charts.dashboard.tileOps.replaceWith": "Replace with…",
+  "charts.dashboard.tileOps.addToLibrary": "Add to library",
+  "charts.dashboard.tileOps.copy": "Copy",
+  "charts.dashboard.tileOps.cut": "Cut",
+  "charts.dashboard.tileOps.paste": "Paste",
+  "charts.dashboard.tileOps.pasteAndReplace": "Paste and replace",
+  "charts.dashboard.tileOps.bringForward": "Bring forward",
+  "charts.dashboard.tileOps.sendBackward": "Send backward",
+  "charts.dashboard.tileOps.delete": "Delete",
+  "charts.dashboard.tileOps.deletedOne": "Tile deleted",
+  "charts.dashboard.tileOps.deletedMany": "{count} tiles deleted",
+  "charts.dashboard.tileOps.undo": "Undo",
+  // tile operations — RM-081 follow-up 1: the header-kebab entry that opens the same context
+  // menu, and the floating align/distribute toolbar over a multi-selection.
+  "charts.dashboard.tileOps.openTileMenu": "Tile actions…",
+  "charts.dashboard.tileOps.selectionToolbarLabel": "Align selection",
+  "charts.dashboard.tileOps.alignLeft": "Align left edges",
+  "charts.dashboard.tileOps.alignCenterH": "Align horizontal centers",
+  "charts.dashboard.tileOps.alignRight": "Align right edges",
+  "charts.dashboard.tileOps.alignTop": "Align top edges",
+  "charts.dashboard.tileOps.alignCenterV": "Align vertical centers",
+  "charts.dashboard.tileOps.alignBottom": "Align bottom edges",
+  "charts.dashboard.tileOps.distributeHorizontal": "Distribute horizontally",
+  "charts.dashboard.tileOps.distributeVertical": "Distribute vertically",
+  // Dual-axis — RM-121
+  "charts.axis.leftScale": "Left scale",
+  "charts.axis.rightScale": "Right scale",
 
   // ── @elabs-ai/components-maps ─────────────────────────────────────────────────────────────
   "maps.popup.close": "Close popup",
+  "maps.marker.drag": "Draggable marker. Arrow keys move it, Shift for a larger step.",
   "maps.canvas.unavailableTitle": "Map unavailable",
   "maps.canvas.unavailableDescription": "This browser can’t render WebGL maps.",
+  "maps.canvas.loading": "Loading map",
+  "maps.controls.zoomIn": "Zoom in",
+  "maps.controls.zoomOut": "Zoom out",
+  "maps.controls.resetBearing": "Reset bearing to north",
+  "maps.controls.locate": "Find my location",
+  "maps.controls.locating": "Locating",
+  "maps.controls.fullscreen": "Toggle fullscreen",
+  "maps.controls.fit": "Fit the whole plan",
 
   // ── @elabs-ai/components-flow ─────────────────────────────────────────────────────────────
   "flow.inspectorPanel.close": "Close inspector",
@@ -585,6 +763,8 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "ai.tool.showTechnicalDetails": "Show technical details",
   "ai.tool.error": "Error",
   "ai.tool.result": "Result",
+  // PackageInfo.
+  "ai.packageInfo.dependencies": "Dependencies",
   // AssetPreview.
   "ai.assetPreview.rowCount": { one: "{count} row", other: "{count} rows" },
   "ai.assetPreview.noPreview": "No preview available…",
@@ -592,6 +772,10 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "ai.assetPreview.raw": "Raw",
   // WebPreview's sandboxed iframe accessible name.
   "ai.webPreview.previewTitle": "Preview",
+  // A2UI surface (D2 — an agent-designed screen rendered from data)
+  "ai.a2ui.loading": "Loading surface…",
+  "ai.a2ui.invalid": "This surface can’t be shown — it doesn’t match the catalog.",
+  "ai.a2ui.moreErrors": { one: "…and {count} more problem", other: "…and {count} more problems" },
   // FileTree's expand/collapse chevron control.
   "ai.fileTree.expandFolder": "Expand {name}",
   "ai.fileTree.collapseFolder": "Collapse {name}",
@@ -1117,4 +1301,72 @@ export const DEFAULT_MESSAGES: Record<string, MessageValue> = {
   "process.kpiStrip.trendRising": "rising",
   "process.kpiStrip.trendFalling": "falling",
   "process.kpiStrip.trendSteady": "steady",
+  // ProcessFilterBar (RM-056, #205). Filter-chain breadcrumb chip labels — label-in-value
+  // text, one key per `FilterIntent["kind"]` — the "Clear all" action, the chip's own
+  // "excluded" count label, and the summary line's two independently-omittable clauses
+  // (see `process-filter-bar.tsx`'s module docblock for why they are composed, not merged).
+  "process.filterBar.label": "Active filters",
+  "process.filterBar.with": "Contains {activity}",
+  "process.filterBar.without": "Excludes {activity}",
+  "process.filterBar.startsWith": "Starts with {activity}",
+  "process.filterBar.endsWith": "Ends with {activity}",
+  "process.filterBar.variant": {
+    one: "{count} variant selected",
+    other: "{count} variants selected",
+  },
+  "process.filterBar.cases": {
+    one: "{count} case selected",
+    other: "{count} cases selected",
+  },
+  "process.filterBar.filter": "Filter",
+  "process.filterBar.excludedLabel": "excluded",
+  "process.filterBar.clearAll": "Clear all",
+  "process.filterBar.showingAll": {
+    one: "Showing all {total} case",
+    other: "Showing all {total} cases",
+  },
+  "process.filterBar.showing": "Showing {filtered} of {total} cases",
+  "process.filterBar.hiddenByAbstraction": {
+    one: "{count} activity hidden by abstraction",
+    other: "{count} activities hidden by abstraction",
+  },
+  // CaseTable (RM-055, issue #204). A column configuration over `data`'s
+  // DataTable — see `.claude/rules/data.md`'s "primitives go down, compositions
+  // go up". `conformance*` labels the three-state badge; `conformance` itself
+  // is host-supplied (never fabricated here — same rule as `ProcessKpiStrip`'s
+  // own conformance tile).
+  "process.caseTable.columnCaseId": "Case",
+  "process.caseTable.columnStart": "Start",
+  "process.caseTable.columnEnd": "End",
+  "process.caseTable.columnDuration": "Duration",
+  "process.caseTable.columnEventCount": "Events",
+  "process.caseTable.columnVariant": "Variant",
+  "process.caseTable.columnConformance": "Conformance",
+  "process.caseTable.conformanceConforming": "Conforming",
+  "process.caseTable.conformanceNonConforming": "Non-conforming",
+  "process.caseTable.conformanceUnknown": "Unknown",
+  "process.caseTable.exportCsv": "Export CSV",
+  "process.caseTable.empty": "No cases to display.",
+  "process.caseTable.tableLabel": "Cases",
+  // CaseTimeline (RM-055, issue #204). A thin `charts/Gantt` wrapper — one row
+  // per activity instance, waiting time as gap bands, overlapping instances
+  // flagged parallel. `parallelLabel` is the non-colour channel WCAG 1.4.1
+  // requires alongside the `info` tone the bar itself carries.
+  "process.caseTimeline.label": "Case timeline",
+  "process.caseTimeline.parallelLabel": "Parallel",
+  "process.caseTimeline.parallelSuffix": "parallel with another activity",
+  "process.caseTimeline.gapLabel": "Waiting, {duration}",
+  // ProcessCompare (RM-064, issue #211). `{label}` is the HOST-supplied side name
+  // ("Before"/"After", a log's own file name, …), not a fixed "A"/"B" — see
+  // `process-compare.tsx`'s module docblock for why the diff-state words name the
+  // owning side instead of a generic letter.
+  "process.compare.label": "Process comparison",
+  "process.compare.tableView": "Table view",
+  "process.compare.mapLabel": "Process map — {label}",
+  "process.compare.superimposedMapLabel": "Process map — {aLabel} vs {bLabel}",
+  "process.compare.legendTitle": "Comparison",
+  "process.compare.diffSuffixCommon": "common",
+  "process.compare.diffSuffixOnly": "{label} only",
+  "process.compare.cases": "{label} — cases",
+  "process.compare.medianThroughput": "{label} — median throughput",
 };

package/src/components/mention-input/mention-input.tsx

@@ -983,7 +983,7 @@ export const MentionInputContent = forwardRef<
       // an axe `aria-dialog-name` violation (serious). The panel is a plain
       // container — the `role="listbox"` inside carries all the semantics.
       role="presentation"
-      // No border, no ring: PopoverContent already carries `shadow-ring-md`.
+      // No border, no ring: PopoverContent already carries `shadow-popover`.
       className={cn("w-72 p-0", className)}
       onOpenAutoFocus={(event) => event.preventDefault()}
       onCloseAutoFocus={(event) => event.preventDefault()}

package/src/components/menubar/menubar.stories.tsx

@@ -65,3 +65,28 @@ export const Default: Story = {
     await userEvent.keyboard("{Escape}");
   },
 };
+
+/**
+ * Locks WCAG 1.4.11 keyboard-focus contrast (#308): a menu item's
+ * `focus:bg-accent` fill alone is not a visible indicator (~1.17–1.40:1
+ * against `--popover`). Moving focus with the keyboard must additionally
+ * paint a compound ring (`focus-ring-inset`): a real `boxShadow` layer, or a
+ * non-zero, non-`none` `outline`.
+ */
+export const KeyboardFocusIndicator: Story = {
+  name: "Keyboard focus",
+  render: Default.render,
+  play: async ({ canvas, canvasElement, userEvent }) => {
+    await userEvent.click(canvas.getByRole("menuitem", { name: /file/i }));
+    const body = within(canvasElement.ownerDocument.body);
+    await body.findByRole("menu");
+    await userEvent.keyboard("{ArrowDown}");
+    const focused = canvasElement.ownerDocument.activeElement as HTMLElement;
+    await expect(focused).toHaveAttribute("role", "menuitem");
+    const style = getComputedStyle(focused);
+    const hasRing = style.boxShadow !== "none";
+    const hasOutline = style.outlineStyle !== "none" && parseFloat(style.outlineWidth) > 0;
+    await expect(hasRing || hasOutline).toBe(true);
+    await userEvent.keyboard("{Escape}");
+  },
+};

package/src/components/menubar/menubar.tsx

@@ -41,7 +41,7 @@ export const MenubarTrigger = forwardRef<
       ref={ref}
       data-slot="menubar-trigger"
       className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-body font-medium outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
+        "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-body font-medium outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset data-[state=open]:bg-accent",
         className,
       )}
       {...props}
@@ -65,7 +65,7 @@ export const MenubarContent = forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
+          "z-50 min-w-[12rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-popover",
           "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
           "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
           className,
@@ -85,7 +85,7 @@ export const MenubarItem = forwardRef<
       ref={ref}
       data-slot="menubar-item"
       className={cn(
-        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         inset && "ps-8",
         className,
       )}
@@ -103,7 +103,7 @@ export const MenubarSubTrigger = forwardRef<
       ref={ref}
       data-slot="menubar-sub-trigger"
       className={cn(
-        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent data-[state=open]:bg-accent",
+        "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset data-[state=open]:bg-accent",
         inset && "ps-8",
         className,
       )}
@@ -124,7 +124,7 @@ export const MenubarSubContent = forwardRef<
       ref={ref}
       data-slot="menubar-sub-content"
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-ring-md",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md bg-popover p-1 text-popover-foreground shadow-popover",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
         "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
         className,
@@ -144,7 +144,7 @@ export const MenubarCheckboxItem = forwardRef<
       data-slot="menubar-checkbox-item"
       checked={checked}
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset",
         className,
       )}
       {...props}
@@ -168,7 +168,7 @@ export const MenubarRadioItem = forwardRef<
       ref={ref}
       data-slot="menubar-radio-item"
       className={cn(
-        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent",
+        "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-body outline-none transition-colors duration-fast focus:bg-accent focus:text-accent-foreground focus-ring-inset",
         className,
       )}
       {...props}