@cosmicdrift/kumiko-renderer-web 0.334.0 → 0.336.0

package/dist/widgets/charts.js

@@ -31,7 +31,8 @@ export function StatusBarChart({ entries, ariaLabel, startLabel, endLabel, highl
     return (_jsxs("div", { "data-testid": testId, children: [_jsxs("svg", { viewBox: `0 0 ${totalWidth} ${chartHeight}`, preserveAspectRatio: dense ? undefined : "none", width: dense ? totalWidth : undefined, height: dense ? chartHeight : undefined, className: dense ? "block" : "block h-9 w-full", role: "img", "aria-label": ariaLabel, children: [_jsx("title", { children: ariaLabel }), entries.map((entry, idx) => {
                         const x = idx * (barWidth + barGap);
                         const level = Math.max(0, Math.min(1, entry.level));
-                        const barHeight = (chartHeight - tickHeight) * level;
+                        // Dense has no tick rect, so level 0 would otherwise render nothing and lose its tooltip.
+                        const barHeight = Math.max((chartHeight - tickHeight) * level, dense ? 1 : 0);
                         const barY = chartHeight - barHeight;
                         const isLast = highlightLast && idx === lastIdx;
                         const color = TONE_VAR[entry.tone];

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

@@ -3,17 +3,18 @@ export type DashboardListColumn = {
     readonly field: string;
     /** Translated by the caller. */
     readonly label: string;
-    readonly display?: "bar" | "badge";
+    readonly display?: "bar" | "badge" | "datetime";
     readonly badgeToneField?: string;
 };
 type Row = Readonly<Record<string, unknown>>;
 /** Compact 40px-row table for dashboard lists with optional bar/badge
  *  columns. */
-export declare function DashboardListTable({ columns, rows, formatPercent, formatNumber, translate, testId, }: {
+export declare function DashboardListTable({ columns, rows, formatPercent, formatNumber, formatDateTime, translate, testId, }: {
     readonly columns: readonly DashboardListColumn[];
     readonly rows: readonly Row[];
     readonly formatPercent: (fraction: number) => string;
     readonly formatNumber: (value: number) => string;
+    readonly formatDateTime: (atMs: number) => string;
     readonly translate: (key: string) => string;
     readonly testId?: string;
 }): ReactNode;

package/dist/widgets/dashboard-list.js

@@ -11,7 +11,7 @@ function fractionOf(raw) {
 }
 // Rows may carry i18n keys (quota labels, failure reasons); translate falls back to the key itself.
 const I18N_KEY_SHAPE = /^[a-z][\w-]*(?:[:.][\w-]+)+$/i;
-function Cell({ column, row, formatPercent, formatNumber, translate, }) {
+function Cell({ column, row, formatPercent, formatNumber, formatDateTime, translate, }) {
     const raw = row[column.field];
     if (column.display === "bar") {
         const fraction = fractionOf(raw);
@@ -24,6 +24,12 @@ function Cell({ column, row, formatPercent, formatNumber, translate, }) {
         const tone = (typeof toneKey === "string" ? BADGE_TONE[toneKey] : undefined) ?? "muted";
         return _jsx(StatusBadge, { tone: tone, children: String(raw) });
     }
+    if (column.display === "datetime") {
+        const atMs = typeof raw === "number" ? raw : typeof raw === "string" ? Date.parse(raw) : Number.NaN;
+        if (!Number.isFinite(atMs))
+            return "—";
+        return _jsx("span", { className: "tabular-nums", children: formatDateTime(atMs) });
+    }
     if (typeof raw === "number")
         return _jsx("span", { className: "tabular-nums", children: formatNumber(raw) });
     if (raw === undefined || raw === null || raw === "")
@@ -33,6 +39,6 @@ function Cell({ column, row, formatPercent, formatNumber, translate, }) {
 }
 /** Compact 40px-row table for dashboard lists with optional bar/badge
  *  columns. */
-export function DashboardListTable({ columns, rows, formatPercent, formatNumber, translate, testId, }) {
-    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { "data-testid": testId, className: "w-full text-sm", children: [_jsx("thead", { children: _jsx("tr", { className: "h-9 border-b border-border-row text-left text-xs text-muted-foreground", children: columns.map((column) => (_jsx("th", { scope: "col", className: "px-4 font-medium", children: column.label }, column.field))) }) }), _jsx("tbody", { children: rows.map((row, index) => (_jsx("tr", { className: "h-10 border-b border-border-row last:border-b-0", children: columns.map((column) => (_jsx("td", { className: "px-4", children: _jsx(Cell, { column: column, row: row, formatPercent: formatPercent, formatNumber: formatNumber, translate: translate }) }, column.field))) }, typeof row["id"] === "string" ? row["id"] : index))) })] }) }));
+export function DashboardListTable({ columns, rows, formatPercent, formatNumber, formatDateTime, translate, testId, }) {
+    return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { "data-testid": testId, className: "w-full text-sm", children: [_jsx("thead", { children: _jsx("tr", { className: "h-9 border-b border-border-row text-left text-xs text-muted-foreground", children: columns.map((column) => (_jsx("th", { scope: "col", className: "px-4 font-medium", children: column.label }, column.field))) }) }), _jsx("tbody", { children: rows.map((row, index) => (_jsx("tr", { className: "h-10 border-b border-border-row last:border-b-0", children: columns.map((column) => (_jsx("td", { className: "px-4", children: _jsx(Cell, { column: column, row: row, formatPercent: formatPercent, formatNumber: formatNumber, formatDateTime: formatDateTime, translate: translate }) }, column.field))) }, typeof row["id"] === "string" ? row["id"] : index))) })] }) }));
 }

package/dist/widgets/drawer.js

@@ -41,6 +41,8 @@ function normalizeWidth(width) {
 // Must match the static `max(600px,37.5vw)` in sidePanelClass — Tailwind's
 // JIT can't read DEFAULT_WIDTH_MIN_PX/DEFAULT_WIDTH_VIEWPORT_RATIO at
 // runtime, so the two are kept in sync by hand.
+// Same cap as WIDTH_CLASS: an explicit `width` must not outgrow the viewport.
+const MAX_VIEWPORT_WIDTH = "85vw";
 const WIDTH_CLASS = "w-[max(600px,37.5vw)] max-w-[85vw] sm:max-w-[max(600px,37.5vw)]";
 // "floating": 32px margin + 32px radius so the panel reads as detached from
 // the viewport edge, unlike the sheet primitive's flush-edge default.
@@ -54,18 +56,7 @@ function sidePanelClass(side, narrow, variant, belowHeader) {
         return "inset-0 h-full w-full max-w-none rounded-none border-0 overflow-hidden";
     if (variant === "flush") {
         switch (side) {
-            // left/right keep the `inset-y-0` class here even when belowHeader is
-            // set — DrawerSheetContent's own base className already carries
-            // `inset-y-0` for these sides, and tailwind-merge (v3.6, checked
-            // directly) does NOT dedupe `top-*`/`bottom-*` against it (unlike
-            // same-group `top-0` vs `top-(--x)`, which it does). Overriding top
-            // via inline `style` instead (Drawer's `verticalOffsetStyle`) always
-            // wins over both, without depending on that gap.
-            // `h-full` fights that same style override on height: it pins the
-            // panel to 100% of the viewport regardless of `top`, pushing the
-            // bottom edge (and the footer slot) past the viewport when belowHeader
-            // also shifts `top` down. `h-auto` lets `inset-y-0`'s `bottom-0` (kept
-            // in sync by the inline `bottom: 0`) determine the height instead.
+            // h-full would pin height to 100vh despite the shifted top; h-auto lets inset-y-0 size it.
             case "left":
                 return `inset-y-0 left-0 ${belowHeader ? "h-auto" : "h-full"} ${WIDTH_CLASS} border-r shadow-2xl overflow-hidden`;
             case "top":
@@ -95,7 +86,7 @@ export function Drawer({ open, onOpenChange, side = "right", title, description,
     const narrow = useIsNarrowViewport();
     const canResize = resize !== undefined && (side === "left" || side === "right");
     const customWidthStyle = !canResize && !narrow && (side === "left" || side === "right") && width !== undefined
-        ? { width: normalizeWidth(width), maxWidth: "none" }
+        ? { width: normalizeWidth(width), maxWidth: MAX_VIEWPORT_WIDTH }
         : undefined;
     const minWidthPx = resize?.minWidthPx ?? MIN_WIDTH_PX;
     const maxWidthPx = resize?.maxWidthPx ?? MAX_WIDTH_PX;
@@ -111,12 +102,8 @@ export function Drawer({ open, onOpenChange, side = "right", title, description,
         ...(blurPx > 0 ? { backdropFilter: `blur(${blurPx}px)` } : {}),
     };
     const effectiveWidthPx = maximized ? effectiveMaxWidthPx() : resizedWidthPx;
-    // Overrides the base className's `inset-y-0` (top:0) as inline style —
-    // tailwind-merge doesn't dedupe `top-*`/`bottom-*` against `inset-y-*`
-    // (verified directly against the pinned tailwind-merge), so a class-only
-    // override would leave both `inset-y-0` and the offset in the className,
-    // with the winner then depending on Tailwind's generated CSS order. style
-    // always wins over a class for the same property, no such dependency.
+    // Inline style because tailwind-merge doesn't dedupe `top-*`/`bottom-*` against the base `inset-y-0`;
+    // style wins over class regardless of generated CSS order.
     const verticalOffsetStyle = belowHeader && variant === "flush" && !narrow && (side === "left" || side === "right")
         ? { top: "var(--shell-header-height)", bottom: 0 }
         : undefined;

package/dist/widgets/step-bar.d.ts

@@ -1,7 +1,11 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 /** Wizard step overview — numbered chips with a connector line between
- *  them. With `onStepSelect`, done chips render as buttons for jumping back;
- *  current and upcoming chips never do. Three visual states, none conveyed by color alone:
+ *  them. With `onStepSelect`, done chips render as buttons for jumping back
+ *  (every non-current chip with `selectableSteps="all"`); the current chip
+ *  never does. `doneSteps` overrides the position-based done state. With
+ *  `onStepSelect` and `selectableSteps="all"` the narrow-viewport label becomes
+ *  a dropdown listing every step (same rows as the rail), so phones can jump
+ *  too. Three visual states, none conveyed by color alone:
  *  done (checkmark replaces the number, `aria-current` absent, a sr-only
  *  label says so since the number itself is gone), current (`aria-current
  *  ="step"`, own background), upcoming (dimmed, number visible). Below
@@ -9,11 +13,13 @@ import type { ReactNode } from "react";
  *  don't fit on a phone) — both live in the DOM, Tailwind's
  *  `hidden`/`sm:hidden` pair picks the visible one per viewport (same
  *  pattern as embedded-list-input.tsx's desktop/mobile split). */
-export declare function StepBar({ steps, currentIndex, compactLabel, onStepSelect, narrowLayout, orientation, heading, description, subtitles, upNext, testId, compactTestId, }: {
+export declare function StepBar({ steps, currentIndex, compactLabel, onStepSelect, doneSteps, selectableSteps, narrowLayout, orientation, heading, description, subtitles, upNext, testId, compactTestId, }: {
     readonly steps: readonly string[];
     readonly currentIndex: number;
     readonly compactLabel: string;
     readonly onStepSelect?: (index: number) => void;
+    readonly doneSteps?: readonly boolean[];
+    readonly selectableSteps?: "done" | "all";
     readonly narrowLayout?: "label" | "steps";
     readonly orientation?: "horizontal" | "vertical";
     readonly heading?: string;

package/dist/widgets/step-bar.js

@@ -1,14 +1,38 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from "@cosmicdrift/kumiko-renderer";
-import { Check } from "lucide-react";
+import { Check, ChevronDown } from "lucide-react";
+import { useId, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 const CHIP_CLASS = "flex items-center gap-1.5 rounded-full px-3 py-1 text-sm transition-colors";
 function chipTestId(testId, index) {
     return testId !== undefined ? `${testId}-step-${index}` : undefined;
 }
+function StepRailRow({ index, label, subtitle, subtitleTestId, rowTestId, state: { isCurrent, isDone, isSelectable }, onSelect, doneLabel, minHeightClass = "min-h-9", }) {
+    const rowClass = cn("flex w-full items-center gap-2.5 rounded-md px-2 py-1 text-left text-sm", minHeightClass, isCurrent && "bg-primary/10 font-semibold text-primary", isDone && "text-foreground", !isCurrent && !isDone && "text-foreground-secondary");
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: cn("flex size-[22px] shrink-0 items-center justify-center rounded-full border text-xs font-semibold", isCurrent && "border-primary bg-primary text-primary-foreground", isDone && "border-status-ok-surface bg-status-ok-surface text-status-ok", !isCurrent && !isDone && "border-input bg-card text-foreground-secondary"), children: isDone ? _jsx(Check, { className: "size-3" }) : index + 1 }), isDone && _jsx("span", { className: "sr-only", children: doneLabel }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: label }), subtitle !== undefined && (_jsx("span", { "data-testid": subtitleTestId, className: "truncate text-xs font-normal text-foreground-secondary", children: subtitle }))] })] }));
+    return isSelectable ? (_jsx("button", { type: "button", onClick: () => onSelect?.(index), "data-testid": rowTestId, className: cn(rowClass, "hover:bg-muted-foreground/10"), children: content })) : (_jsx("span", { "aria-current": isCurrent ? "step" : undefined, "data-testid": rowTestId, className: rowClass, children: content }));
+}
+function CompactStepPicker({ steps, compactLabel, subtitles, stepState, onStepSelect, compactTestId, doneLabel, }) {
+    const [open, setOpen] = useState(false);
+    const listId = useId();
+    const toggleRef = useRef(null);
+    return (_jsxs("div", { onKeyDown: (event) => {
+            if (event.key === "Escape" && open) {
+                setOpen(false);
+                toggleRef.current?.focus();
+            }
+        }, children: [_jsxs("button", { ref: toggleRef, type: "button", "aria-expanded": open, "aria-controls": listId, "data-testid": compactTestId, onClick: () => setOpen((wasOpen) => !wasOpen), className: "flex min-h-11 w-full items-center justify-between gap-2 rounded-md border border-border bg-card px-3 text-left text-sm font-medium text-foreground hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [compactLabel, _jsx(ChevronDown, { "aria-hidden": "true", className: cn("size-4 shrink-0 transition-transform", open && "rotate-180") })] }), open && (_jsx("ol", { id: listId, className: "m-0 mt-1 flex list-none flex-col gap-0.5 rounded-md border border-border bg-card p-1", children: steps.map((label, i) => (_jsx("li", { children: _jsx(StepRailRow, { index: i, label: label, subtitle: subtitles?.[i], subtitleTestId: undefined, rowTestId: chipTestId(compactTestId, i), state: stepState(i), onSelect: (index) => {
+                            setOpen(false);
+                            onStepSelect(index);
+                        }, doneLabel: doneLabel, minHeightClass: "min-h-11" }) }, `${i}-${label}`))) }))] }));
+}
 /** Wizard step overview — numbered chips with a connector line between
- *  them. With `onStepSelect`, done chips render as buttons for jumping back;
- *  current and upcoming chips never do. Three visual states, none conveyed by color alone:
+ *  them. With `onStepSelect`, done chips render as buttons for jumping back
+ *  (every non-current chip with `selectableSteps="all"`); the current chip
+ *  never does. `doneSteps` overrides the position-based done state. With
+ *  `onStepSelect` and `selectableSteps="all"` the narrow-viewport label becomes
+ *  a dropdown listing every step (same rows as the rail), so phones can jump
+ *  too. Three visual states, none conveyed by color alone:
  *  done (checkmark replaces the number, `aria-current` absent, a sr-only
  *  label says so since the number itself is gone), current (`aria-current
  *  ="step"`, own background), upcoming (dimmed, number visible). Below
@@ -16,20 +40,21 @@ function chipTestId(testId, index) {
  *  don't fit on a phone) — both live in the DOM, Tailwind's
  *  `hidden`/`sm:hidden` pair picks the visible one per viewport (same
  *  pattern as embedded-list-input.tsx's desktop/mobile split). */
-export function StepBar({ steps, currentIndex, compactLabel, onStepSelect, narrowLayout = "label", orientation = "horizontal", heading, description, subtitles, upNext, testId, compactTestId, }) {
+export function StepBar({ steps, currentIndex, compactLabel, onStepSelect, doneSteps, selectableSteps = "done", narrowLayout = "label", orientation = "horizontal", heading, description, subtitles, upNext, testId, compactTestId, }) {
     const t = useTranslation();
+    const stepState = (i) => {
+        const isCurrent = i === currentIndex;
+        const isDone = !isCurrent && (doneSteps !== undefined ? doneSteps[i] === true : i < currentIndex);
+        const isSelectable = onStepSelect !== undefined && !isCurrent && (selectableSteps === "all" || isDone);
+        return { isCurrent, isDone, isSelectable };
+    };
+    const compactPicker = onStepSelect !== undefined && selectableSteps === "all";
+    const pickerElement = compactPicker ? (_jsx(CompactStepPicker, { steps: steps, compactLabel: compactLabel, subtitles: subtitles, stepState: stepState, onStepSelect: onStepSelect, compactTestId: compactTestId, doneLabel: t("kumiko.widget.step-bar.done") })) : null;
     if (orientation === "vertical") {
-        return (_jsxs(_Fragment, { children: [_jsxs("nav", { className: "hidden w-[280px] shrink-0 flex-col gap-4 overflow-y-auto border-r border-border bg-muted px-6 py-7 lg:flex", children: [heading !== undefined && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-sm font-semibold text-foreground", children: heading }), description !== undefined && (_jsx("span", { className: "text-[13px] text-foreground-secondary", children: description }))] })), _jsx("ol", { "data-testid": testId, className: "m-0 flex list-none flex-col gap-0.5 p-0", children: steps.map((label, i) => {
-                                const isDone = i < currentIndex;
-                                const isCurrent = i === currentIndex;
-                                const rowClass = cn("flex min-h-9 w-full items-center gap-2.5 rounded-md px-2 py-1 text-left text-sm", isCurrent && "bg-primary/10 font-semibold text-primary", isDone && "text-foreground", !isCurrent && !isDone && "text-foreground-secondary");
-                                const content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: cn("flex size-[22px] shrink-0 items-center justify-center rounded-full border text-xs font-semibold", isCurrent && "border-primary bg-primary text-primary-foreground", isDone && "border-status-ok-surface bg-status-ok-surface text-status-ok", !isCurrent && !isDone && "border-input bg-card text-foreground-secondary"), children: isDone ? _jsx(Check, { className: "size-3" }) : i + 1 }), isDone && _jsx("span", { className: "sr-only", children: t("kumiko.widget.step-bar.done") }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: label }), subtitles?.[i] !== undefined && (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-subtitle-${i}` : undefined, className: "truncate text-xs font-normal text-foreground-secondary", children: subtitles[i] }))] })] }));
-                                return (_jsx("li", { children: isDone && onStepSelect !== undefined ? (_jsx("button", { type: "button", onClick: () => onStepSelect(i), "data-testid": chipTestId(testId, i), className: cn(rowClass, "hover:bg-muted-foreground/10"), children: content })) : (_jsx("span", { "aria-current": isCurrent ? "step" : undefined, "data-testid": chipTestId(testId, i), className: rowClass, children: content })) }, `${i}-${label}`));
-                            }) }), upNext !== undefined && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-up-next` : undefined, className: "mt-2 flex flex-col gap-1 rounded-md border border-border bg-card px-3 py-2.5", children: [_jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: upNext.heading }), _jsx("span", { className: "text-sm font-medium text-foreground", children: upNext.title }), upNext.subtitle !== undefined && (_jsx("span", { className: "text-xs text-foreground-secondary", children: upNext.subtitle }))] }))] }), _jsx("p", { "data-testid": compactTestId, className: "px-4 pt-3 text-sm text-muted-foreground lg:hidden", children: compactLabel })] }));
+        return (_jsxs(_Fragment, { children: [_jsxs("nav", { className: "hidden w-[280px] shrink-0 flex-col gap-4 overflow-y-auto border-r border-border bg-muted px-6 py-7 lg:flex", children: [heading !== undefined && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-sm font-semibold text-foreground", children: heading }), description !== undefined && (_jsx("span", { className: "text-[13px] text-foreground-secondary", children: description }))] })), _jsx("ol", { "data-testid": testId, className: "m-0 flex list-none flex-col gap-0.5 p-0", children: steps.map((label, i) => (_jsx("li", { children: _jsx(StepRailRow, { index: i, label: label, subtitle: subtitles?.[i], subtitleTestId: testId !== undefined ? `${testId}-subtitle-${i}` : undefined, rowTestId: chipTestId(testId, i), state: stepState(i), onSelect: onStepSelect, doneLabel: t("kumiko.widget.step-bar.done") }) }, `${i}-${label}`))) }), upNext !== undefined && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-up-next` : undefined, className: "mt-2 flex flex-col gap-1 rounded-md border border-border bg-card px-3 py-2.5", children: [_jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: upNext.heading }), _jsx("span", { className: "text-sm font-medium text-foreground", children: upNext.title }), upNext.subtitle !== undefined && (_jsx("span", { className: "text-xs text-foreground-secondary", children: upNext.subtitle }))] }))] }), compactPicker ? (_jsx("div", { className: "px-4 pt-3 lg:hidden", children: pickerElement })) : (_jsx("p", { "data-testid": compactTestId, className: "px-4 pt-3 text-sm text-muted-foreground lg:hidden", children: compactLabel }))] }));
     }
     return (_jsxs(_Fragment, { children: [_jsx("ol", { "data-testid": testId, className: cn("items-center gap-2", narrowLayout === "steps" ? "flex flex-wrap" : "hidden sm:flex sm:flex-wrap"), children: steps.map((label, i) => {
-                    const isDone = i < currentIndex;
-                    const isCurrent = i === currentIndex;
-                    return (_jsxs("li", { className: "flex items-center gap-2", children: [i > 0 && _jsx("span", { "aria-hidden": "true", className: "h-px w-4 bg-border" }), isDone && onStepSelect !== undefined ? (_jsxs("button", { type: "button", onClick: () => onStepSelect(i), "data-testid": chipTestId(testId, i), className: cn(CHIP_CLASS, "text-primary max-sm:min-h-11 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: [_jsx(Check, { "aria-hidden": "true", className: "size-3.5" }), _jsx("span", { className: "sr-only", children: t("kumiko.widget.step-bar.done") }), label] })) : (_jsxs("span", { "aria-current": isCurrent ? "step" : undefined, "data-testid": chipTestId(testId, i), className: cn(CHIP_CLASS, isCurrent && "bg-primary font-semibold text-primary-foreground", isDone && "text-primary", !isCurrent && !isDone && "text-muted-foreground"), children: [isDone ? (_jsxs(_Fragment, { children: [_jsx(Check, { "aria-hidden": "true", className: "size-3.5" }), _jsx("span", { className: "sr-only", children: t("kumiko.widget.step-bar.done") })] })) : (_jsx("span", { className: "text-xs font-semibold", children: i + 1 })), label] }))] }, `${i}-${label}`));
-                }) }), _jsx("p", { "data-testid": compactTestId, className: cn("text-sm text-muted-foreground", narrowLayout === "steps" ? "sr-only" : "sm:hidden"), children: compactLabel })] }));
+                    const { isCurrent, isDone, isSelectable } = stepState(i);
+                    return (_jsxs("li", { className: "flex items-center gap-2", children: [i > 0 && _jsx("span", { "aria-hidden": "true", className: "h-px w-4 bg-border" }), isSelectable ? (_jsxs("button", { type: "button", onClick: () => onStepSelect?.(i), "data-testid": chipTestId(testId, i), className: cn(CHIP_CLASS, isDone ? "text-primary" : "text-muted-foreground", "max-sm:min-h-11 hover:bg-primary/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), children: [isDone ? (_jsxs(_Fragment, { children: [_jsx(Check, { "aria-hidden": "true", className: "size-3.5" }), _jsx("span", { className: "sr-only", children: t("kumiko.widget.step-bar.done") })] })) : (_jsx("span", { className: "text-xs font-semibold", children: i + 1 })), label] })) : (_jsxs("span", { "aria-current": isCurrent ? "step" : undefined, "data-testid": chipTestId(testId, i), className: cn(CHIP_CLASS, isCurrent && "bg-primary font-semibold text-primary-foreground", isDone && "text-primary", !isCurrent && !isDone && "text-muted-foreground"), children: [isDone ? (_jsxs(_Fragment, { children: [_jsx(Check, { "aria-hidden": "true", className: "size-3.5" }), _jsx("span", { className: "sr-only", children: t("kumiko.widget.step-bar.done") })] })) : (_jsx("span", { className: "text-xs font-semibold", children: i + 1 })), label] }))] }, `${i}-${label}`));
+                }) }), compactPicker ? (_jsx("div", { className: narrowLayout === "steps" ? "hidden" : "sm:hidden", children: pickerElement })) : (_jsx("p", { "data-testid": compactTestId, className: cn("text-sm text-muted-foreground", narrowLayout === "steps" ? "hidden" : "sm:hidden"), children: compactLabel }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.334.0",
+  "version": "0.336.0",
   "description": "Web-platform bindings for @cosmicdrift/kumiko-renderer. HTML default-primitives, browser history-based navigation, EventSource-backed live events, and a one-call createKumikoApp that mounts the whole stack via react-dom.",
   "license": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -20,11 +20,11 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-dispatcher-live": "0.334.0",
-    "@cosmicdrift/kumiko-framework": "0.334.0",
-    "@cosmicdrift/kumiko-headless": "0.334.0",
-    "@cosmicdrift/kumiko-renderer": "0.334.0",
-    "@cosmicdrift/kumiko-types": "0.334.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.336.0",
+    "@cosmicdrift/kumiko-framework": "0.336.0",
+    "@cosmicdrift/kumiko-headless": "0.336.0",
+    "@cosmicdrift/kumiko-renderer": "0.336.0",
+    "@cosmicdrift/kumiko-types": "0.336.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -72,7 +72,7 @@
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4.3.0",
-    "@cosmicdrift/kumiko-locale-de": "0.334.0"
+    "@cosmicdrift/kumiko-locale-de": "0.336.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,83 @@
 [
+  {
+    "version": "0.336.0",
+    "type": "improvement",
+    "title": "EventSource live events parse the signal-only frame",
+    "detail": "`createEventSourceLiveEvents` forwards the new frame shape without payload and with `eventType`.",
+    "migration": "No code change needed."
+  },
+  {
+    "version": "0.336.0",
+    "type": "improvement",
+    "title": "Update-mode wizards get a step picker on narrow viewports; the pinned footer is a single fixed row on phones",
+    "detail": "`StepBar` with `onStepSelect` and `selectableSteps=\"all\"` renders the compact label as a dropdown listing every step. Below `sm` the pinned footer is one row: Back as icon, other actions in a \"…\" popover that only shows while one of them is enabled, primary action filling the rest. New renderer markers `FOOTER_ACTION_ROLE_PROP` and `NARROW_LABEL_PROP` classify custom footer buttons.",
+    "migration": "No code change needed."
+  },
+  {
+    "version": "0.335.0",
+    "type": "improvement",
+    "title": "Combobox options carry a value-based data-testid"
+  },
+  {
+    "version": "0.335.0",
+    "type": "fix",
+    "title": "Header-card detail screens default to a 4xl column; metric band aligns with the form column; explicit screen form widths left-align; password input keeps focus",
+    "detail": "A projectionDetail screen with a header card (headerRegion with metrics or header actions) on a full-height screen form without tabs now defaults to a `4xl` column instead of 640px, and the metric band lines up with the form column instead of carrying its own padding. An explicit `layout.width` still wins. Explicit screen form widths (`3xl`, `4xl`, `full`) now left-align with the form column instead of centering, which moves screens such as the showcase item edit. Typing into a password input that shows a clear or undo action no longer remounts the input and drops focus after the first character.\nThe secretMint reveal phase with a confirm step renders as one screen form. The reveal block (title, warning, secret) leads the confirm form through the new `RenderEdit` prop `leadContent`, and the confirm form no longer sits in a second card. The `kumiko-screen-secret-mint-card` test id now marks only that reveal block. The confirm step shows the parent screen's translated title (new `RenderEdit` prop `i18nScreenId`) instead of the raw key `<screen>:confirm`.\nText config keys stored encrypted at rest (`encrypted: true` or `backing: \"secrets\"`, such as the Stripe API key and webhook secret) are write-only on generated settings screens. The field shows whether this scope stores a value, keeps it unless a new one is typed, and resets it when cleared. Hand-written configEdit text fields over such keys become write-only as well, and form drafts never store write-only fields. `config:write:set` answers with the mask for these keys, and pattern, select option and extension validation errors no longer return the value. A hand-written configEdit screen may declare `writeOnly` only on a field whose key is encrypted at rest; other keys fail at boot."
+  },
+  {
+    "version": "0.335.0",
+    "type": "fix",
+    "title": "Page title stays visible on narrow screens",
+    "detail": "Wide header actions no longer push the page title out of the header on phones; the actions area shrinks instead."
+  },
+  {
+    "version": "0.335.0",
+    "type": "fix",
+    "title": "Dashboard list columns support display \"datetime\"; overview lists no longer show raw ISO timestamps",
+    "detail": "Dashboard list columns accept `display: \"datetime\"`, which formats an ISO string or epoch-ms value in the user's locale and time zone. The admin-shell overview lists use it for `startedAt` and `failedAt` instead of showing raw ISO strings."
+  },
+  {
+    "version": "0.335.0",
+    "type": "fix",
+    "title": "Dashboard time-range queries carry the user's time zone so day buckets match the axis labels",
+    "detail": "Dashboard time-range queries now send the user's time zone, so metric day buckets line up with the axis labels instead of being cut in UTC. `kumiko-bundled-features` declares `ioredis` and `hono`, which its emitted type declarations import."
+  },
+  {
+    "version": "0.335.0",
+    "type": "fix",
+    "title": "Labelled multiSelect checkbox group, mobile touch target for secondary form actions, bounded number unit suffix"
+  },
+  {
+    "version": "0.335.0",
+    "type": "fix",
+    "title": "Textarea respects preventDefault, Card data-slot is not overridable, degraded FormRoot scopes Enter and submit to its own inputs",
+    "detail": "A nested `Form` that degrades to a `<div>` now submits on Enter inside its own inputs and ignores submit buttons that belong to a portal or a deeper nested form. The textarea `onSubmitShortcut` no longer fires when the caller's `onKeyDown` called `preventDefault()`. `Card` no longer lets `dataAttributes` override `data-slot`."
+  },
+  {
+    "version": "0.335.0",
+    "type": "breaking",
+    "title": "InfinityList live defaults to false",
+    "detail": "Review round 2 fixes for renderer-web.\n- `InfinityList` now defaults `live` to `false` (it was `true`). Lists that relied on the implicit realtime refresh no longer update on SSE events until they pass `live={true}`.\n- A number input with a `unit` exposes the unit to screen readers through `aria-describedby` instead of hiding it with `aria-hidden`.\n- `Drawer` with an explicit `width` is capped at `85vw`, the same limit as the default width.",
+    "migration": "Pass `live={true}` to every `<InfinityList>` that should refresh from SSE events. Without it the list only loads on mount and on pagination."
+  },
+  {
+    "version": "0.335.0",
+    "type": "fix",
+    "title": "Number input unit is announced by screen readers and Drawer width is capped to the viewport"
+  },
+  {
+    "version": "0.335.0",
+    "type": "fix",
+    "title": "Row-actions kebab keeps focus in the confirm dialog, embedded-list headers truncate in fixed columns",
+    "detail": "The row-actions kebab no longer returns focus to its trigger while a confirm dialog is open, so keyboard and screen-reader users reach the dialog buttons. Column headers of the embedded-list desktop table truncate (with a `title`) inside their fixed-width column instead of overlapping the neighbouring header."
+  },
+  {
+    "version": "0.335.0",
+    "type": "improvement",
+    "title": "StepBar supports explicit done state and jumping to any non-current step",
+    "detail": "The default `StepBar` forwards the new `doneSteps` and `selectableSteps` props: an upcoming chip can be a button that shows its number, and done state no longer has to follow position.",
+    "migration": "No code change needed."
+  },
   {
     "version": "0.334.0",
     "type": "improvement",