@cosmicdrift/kumiko-renderer 0.399.0 → 0.401.0

package/dist/web/primitives/segmented-select.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
+import { statusToneForOptionTone } from "../../index.js";
 import { cn } from "../lib/cn.js";
+import { TONE_PILL } from "../widgets/status-badge.js";
 const EQUAL_WIDTH_MAX_SEGMENTS = 4;
 // WAI-ARIA radiogroup pattern (role="radiogroup" + role="radio" children):
 // arrow keys move focus AND selection in the same step, only the checked
 // segment (or the first when none is checked) sits in the tab order.
-export function SegmentedControl({ id, name, value, onChange, options, disabled, required, hasError, labelProps, }) {
+export function SegmentedControl({ id, name, value, onChange, options, disabled, required, hasError, labelProps, tones, size, }) {
     const buttonRefs = useRef([]);
     // An unknown/legacy value checks no segment; the first one must still be tabbable.
     const selectedIndex = options.findIndex((opt) => opt.value === value);
@@ -41,8 +43,10 @@ export function SegmentedControl({ id, name, value, onChange, options, disabled,
         // their segment instead of leaving one tall and its siblings short.
         options.length <= EQUAL_WIDTH_MAX_SEGMENTS
             ? "inline-grid max-w-full grid-flow-col auto-cols-fr"
-            : "inline-flex w-fit flex-wrap", "min-h-9 overflow-hidden rounded-md border", hasError === true ? "border-destructive" : "border-input"), children: [_jsx("input", { type: "hidden", name: name, value: value }), options.map((opt, index) => {
+            : "inline-flex w-fit flex-wrap", size === "touch" ? "min-h-11" : "min-h-9", "overflow-hidden rounded-md border", hasError === true ? "border-destructive" : "border-input"), children: [_jsx("input", { type: "hidden", name: name, value: value }), options.map((opt, index) => {
                 const checked = opt.value === value;
+                const declaredTone = tones !== undefined && Object.hasOwn(tones, opt.value) ? tones[opt.value] : undefined;
+                const badgeTone = declaredTone !== undefined ? statusToneForOptionTone(declaredTone) : undefined;
                 return (_jsx("button", { ref: (node) => {
                         buttonRefs.current[index] = node;
                     }, type: "button", role: "radio", "aria-checked": checked, tabIndex: index === tabStopIndex ? 0 : -1, disabled: disabled === true || opt.disabled === true, "data-testid": `segmented-${id}-${opt.value}`, onClick: () => onChange(opt.value), onKeyDown: (e) => handleKeyDown(e, index), className: cn(
@@ -61,8 +65,8 @@ export function SegmentedControl({ id, name, value, onChange, options, disabled,
                     // and the next row's top border cut a notch into the row above.
                     // Harmless on a single-row layout: there's no leftover space to
                     // grow into, so `w-fit` on the container still holds.
-                    "-ml-px -mt-px grow border-l border-t px-3 py-1.5 text-center text-sm transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50", hasError === true ? "border-destructive/50" : "border-border", checked
-                        ? "bg-primary/10 font-semibold text-primary"
+                    "-ml-px -mt-px grow border-l border-t px-3 py-1.5 text-center text-sm transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50", hasError === true ? "border-destructive/50" : "border-border", size === "touch" && "min-h-11", checked
+                        ? cn("font-semibold", badgeTone !== undefined ? TONE_PILL[badgeTone] : "bg-primary/10 text-primary")
                         : "bg-transparent font-medium text-foreground hover:bg-accent"), children: opt.label }, opt.value));
             })] }));
 }

package/dist/web/widgets/dashboard-list.d.ts

@@ -5,6 +5,8 @@ export type DashboardListColumn = {
     readonly label: string;
     readonly display?: "bar" | "badge" | "datetime";
     readonly badgeToneField?: string;
+    /** Resolves the raw cell value to display text, e.g. a reference id to its label. */
+    readonly renderValue?: (value: unknown, row: Readonly<Record<string, unknown>>) => string;
 };
 type Row = Readonly<Record<string, unknown>>;
 /** Compact 40px-row table for dashboard lists with optional bar/badge

package/dist/web/widgets/dashboard-list.js

@@ -31,6 +31,8 @@ function Cell({ column, row, formatPercent, formatNumber, formatDateTime, transl
             return EMPTY_VALUE_PLACEHOLDER;
         return _jsx("span", { className: "tabular-nums", children: formatDateTime(atMs) });
     }
+    if (column.renderValue !== undefined)
+        return column.renderValue(raw, row);
     if (typeof raw === "number")
         return _jsx("span", { className: "tabular-nums", children: formatNumber(raw) });
     if (raw === undefined || raw === null || raw === "")

package/dist/web/widgets/status-badge.d.ts

@@ -4,6 +4,7 @@ export declare const STATUS_TONE_TEXT: Record<StatusTone, string>;
 /** `accent` is a brand-colored call-out (e.g. "3 suggestions"), not a status —
  *  hence not part of `StatusTone`, which toasts and select options share. */
 export type StatusBadgeTone = StatusTone | "accent";
+export declare const TONE_PILL: Record<StatusBadgeTone, string>;
 /** Pill badge with a status dot. Caller maps domain values to a tone
  *  (e.g. operational→ok, investigating→warn) and passes the translated
  *  label as children. */

package/dist/web/widgets/status-badge.js

@@ -8,7 +8,7 @@ export const STATUS_TONE_TEXT = {
     muted: "text-muted-foreground",
 };
 // `muted` maps to the neutral tokens, not a status-* palette.
-const TONE_PILL = {
+export const TONE_PILL = {
     accent: "bg-primary/10 text-primary",
     ok: "bg-status-ok-surface text-status-ok",
     warn: "bg-status-warn-surface text-status-warn",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.399.0",
+  "version": "0.401.0",
   "description": "React renderer for Kumiko screens. The root export holds the platform-agnostic logic (primitives contract, hooks, KumikoScreen, navigation and SSE abstractions); ./headless the DOM-free UI logic, ./live the HTTP dispatcher, ./web the browser bindings (HTML primitives, history navigation, EventSource live events, createKumikoApp).",
   "license": "MIT",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -48,8 +48,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.399.0",
-    "@cosmicdrift/kumiko-types": "0.399.0",
+    "@cosmicdrift/kumiko-framework": "0.401.0",
+    "@cosmicdrift/kumiko-types": "0.401.0",
     "@types/qrcode": "^1.5.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -79,8 +79,8 @@
     }
   },
   "devDependencies": {
-    "@cosmicdrift/kumiko-locale-de": "0.399.0",
-    "@cosmicdrift/kumiko-testing": "0.399.0",
+    "@cosmicdrift/kumiko-locale-de": "0.401.0",
+    "@cosmicdrift/kumiko-testing": "0.401.0",
     "@tailwindcss/cli": "^4.3.3",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.8",

package/src/changes.json

@@ -1,4 +1,10 @@
 [
+  {
+    "version": "0.401.0",
+    "type": "fix",
+    "title": "Dashboard list panels show the target's label for reference columns",
+    "detail": "A reference column in a dashboard list panel showed the stored id. It now resolves the target record's label and links to it, using the same lookup as entity lists."
+  },
   {
     "version": "0.399.0",
     "type": "improvement",