@cosmicdrift/kumiko-renderer-web 0.335.0 → 0.336.0

package/dist/primitives/index.js

@@ -33,6 +33,7 @@ import { LocatedTimestampInput } from "./located-timestamp-input.js";
 import { DefaultMetric, DefaultMetricBand, InsideScreenFormColumnContext } from "./metric.js";
 import { DefaultModal } from "./modal.js";
 import { currencyDecimals, formatMoney, MoneyInput } from "./money-input.js";
+import { NarrowPinnedFooter } from "./narrow-pinned-footer.js";
 import { NumberInput } from "./number-input.js";
 import { groupOptions, hasDescriptionOrGroup } from "./option-groups.js";
 import { DefaultPageHeader } from "./page-header.js";
@@ -44,7 +45,7 @@ import { DefaultTabs } from "./tabs.js";
 import { TimestampInput } from "./timestamp-input.js";
 import { useToast } from "./toast.js";
 import { TzInput } from "./tz-input.js";
-import { useIsNarrowViewport } from "./use-narrow-viewport.js";
+import { useIsBelowSmViewport, useIsNarrowViewport } from "./use-narrow-viewport.js";
 // ---- Card-Chrome (eine Definition für Form/Section/Card) ----
 // Die eine Card-Surface. Maße (Padding/Radius/Shadow) kommen aus --card-*
 // CSS-Tokens (Defaults in styles.css), damit eine App sie einmal zentral in
@@ -1405,10 +1406,18 @@ function flattenActionNodes(node) {
     }
     return Children.toArray(node);
 }
+function unsavedStatusText(t, unsavedCount) {
+    if (unsavedCount === 0)
+        return t("kumiko.form.noUnsavedChanges");
+    if (unsavedCount === 1)
+        return t("kumiko.form.unsaved.one");
+    return t("kumiko.form.unsaved.other", { count: unsavedCount });
+}
 // Footer wrapper for DefaultForm's card and chromeless layouts alike — only
 // the card-derived horizontal padding/border differs between them.
 function FormFooter({ actions, secondaryActions, testId, chromeless, stickyActions, fillHeight, unsavedCount, railed = false, }) {
     const t = useTranslation();
+    const isBelowSm = useIsBelowSmViewport();
     if (actions === undefined && secondaryActions === undefined)
         return null;
     // Only split when sticky: the non-sticky (regular, non-wizard) footer must
@@ -1429,16 +1438,17 @@ function FormFooter({ actions, secondaryActions, testId, chromeless, stickyActio
     const hasNonPrimaryOverflow = nonPrimaryActionNodes !== undefined && nonPrimaryActionNodes.length > 0;
     const renderedSecondary = stickyActions === true && hasPrimaryAction ? (_jsxs(_Fragment, { children: [secondaryActions, nonPrimaryActionNodes] })) : (secondaryActions);
     const pinned = isPinnedFooter(stickyActions, fillHeight);
+    if (pinned && isBelowSm) {
+        return (_jsx(NarrowPinnedFooter, { nodes: [...flattenActionNodes(secondaryActions), ...flattenActionNodes(actions)], overflowLabel: unsavedCount !== undefined && unsavedCount > 0
+                ? `${t("kumiko.list.row-actions.more")}, ${unsavedStatusText(t, unsavedCount)}`
+                : t("kumiko.list.row-actions.more"), unsavedCount: unsavedCount, testId: testId }));
+    }
     return (_jsxs("div", { className: cn(pinned
             ? cn("flex h-14 shrink-0 items-center justify-end gap-2 border-t border-border bg-card px-6", !railed && "md:pl-10")
             : "flex flex-col-reverse gap-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:py-4", !pinned && !chromeless && "px-[var(--card-padding)]", !pinned && !chromeless && cardFooterBorder, !pinned && fillHeight === true && "shrink-0"), children: [unsavedCount !== undefined && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-unsaved` : undefined, className: cn("mr-auto flex min-w-0 items-center gap-2 text-[13px]", 
                 // Only the stacked (flex-col-reverse) footer moves the status above the
                 // actions; the pinned single-row footer keeps it on the left.
-                !pinned && "max-sm:order-last", unsavedCount > 0 ? "text-foreground-secondary" : "text-muted-foreground"), children: [unsavedCount > 0 && (_jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-status-active", "aria-hidden": "true" })), _jsx("span", { className: "truncate", children: unsavedCount === 0
-                            ? t("kumiko.form.noUnsavedChanges")
-                            : unsavedCount === 1
-                                ? t("kumiko.form.unsaved.one")
-                                : t("kumiko.form.unsaved.other", { count: unsavedCount }) })] })), (secondaryActions !== undefined || hasNonPrimaryOverflow) && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions-secondary` : undefined, className: cn(
+                !pinned && "max-sm:order-last", unsavedCount > 0 ? "text-foreground-secondary" : "text-muted-foreground"), children: [unsavedCount > 0 && (_jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-status-active", "aria-hidden": "true" })), _jsx("span", { className: "truncate", children: unsavedStatusText(t, unsavedCount) })] })), (secondaryActions !== undefined || hasNonPrimaryOverflow) && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions-secondary` : undefined, className: cn(
                 // min-h-11: link-variant buttons (Copy link) are h-auto and would fall
                 // below the 24px touch-target minimum on narrow viewports.
                 "flex flex-wrap items-center gap-2 max-sm:[&_button]:min-h-11 max-sm:[&_button]:px-2 max-sm:[&_button]:text-xs", pinned && hasNonPrimaryOverflow && "mr-auto"), children: renderedSecondary })), renderedActions !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, className: cn("flex items-center gap-2", pinned

package/dist/primitives/narrow-pinned-footer.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+/** Pinned footer below `sm`: always one fixed-height row, Back as icon on the left,
+ *  everything else in a "…" popover (hidden while none of it is enabled), the primary
+ *  action filling the rest. */
+export declare function NarrowPinnedFooter({ nodes, overflowLabel, unsavedCount, testId, }: {
+    readonly nodes: readonly ReactNode[];
+    readonly overflowLabel: string;
+    readonly unsavedCount: number | undefined;
+    readonly testId: string | undefined;
+}): ReactNode;

package/dist/primitives/narrow-pinned-footer.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FOOTER_ACTION_ROLE_PROP, NARROW_LABEL_PROP, STICKY_PRIMARY_ACTION_PROP, } from "@cosmicdrift/kumiko-renderer";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { MoreHorizontal } from "lucide-react";
+import { cloneElement, isValidElement, useLayoutEffect, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Button as UiButton } from "../ui/button.js";
+function asFooterElement(node) {
+    return isValidElement(node) ? node : undefined;
+}
+function isBackNode(node) {
+    return asFooterElement(node)?.props[FOOTER_ACTION_ROLE_PROP] === "back";
+}
+function isPrimaryNode(node) {
+    const props = asFooterElement(node)?.props;
+    return props?.[FOOTER_ACTION_ROLE_PROP] === "primary" || props?.type === "submit";
+}
+function isStickyMarkedNode(node) {
+    return asFooterElement(node)?.props[STICKY_PRIMARY_ACTION_PROP] === true;
+}
+function lastOf(items) {
+    return items[items.length - 1];
+}
+function splitNarrowFooterNodes(nodes) {
+    const back = nodes.find(isBackNode);
+    const primary = lastOf(nodes.filter(isPrimaryNode)) ?? lastOf(nodes.filter(isStickyMarkedNode));
+    return {
+        back,
+        primary,
+        overflow: nodes.filter((node) => node !== back && node !== primary),
+    };
+}
+function BackIconButton({ node }) {
+    const { children, ariaLabel } = node.props;
+    return cloneElement(node, {
+        size: "icon",
+        ariaLabel: typeof children === "string" ? children : ariaLabel,
+        children: null,
+    });
+}
+function PrimaryButton({ node }) {
+    const element = asFooterElement(node);
+    if (element === undefined || !isPrimaryNode(node)) {
+        return _jsx("div", { className: "min-w-0 flex-1 [&>button]:w-full", children: node });
+    }
+    const narrowLabel = element.props[NARROW_LABEL_PROP];
+    return cloneElement(element, {
+        className: "min-w-0 flex-1",
+        children: _jsx("span", { className: "min-w-0 truncate", children: narrowLabel ?? element.props.children }),
+    });
+}
+// Overflow nodes are arbitrary (slot mounts may render nothing, buttons may be disabled),
+// so "has something to offer" is read from the mounted DOM, not from the elements.
+const ENABLED_ACTION_SELECTOR = "button:not(:disabled):not([aria-disabled='true']), a[href]:not([aria-disabled='true'])";
+function useContainsEnabledAction(container) {
+    const [containsEnabledAction, setContainsEnabledAction] = useState(false);
+    useLayoutEffect(() => {
+        if (container === null)
+            return;
+        const update = () => setContainsEnabledAction(container.querySelector(ENABLED_ACTION_SELECTOR) !== null);
+        update();
+        const observer = new MutationObserver(update);
+        observer.observe(container, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ["disabled", "aria-disabled", "href"],
+        });
+        return () => observer.disconnect();
+    }, [container]);
+    return containsEnabledAction;
+}
+function OverflowPopover({ nodes, label, unsavedCount, testId, }) {
+    const [open, setOpen] = useState(false);
+    const [content, setContent] = useState(null);
+    const hasEnabledAction = useContainsEnabledAction(content);
+    const isDirty = unsavedCount !== undefined && unsavedCount > 0;
+    return (_jsxs(PopoverPrimitive.Root, { open: open && hasEnabledAction, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs(UiButton, { type: "button", variant: "outline", size: "icon", className: cn("relative shrink-0 border-input hover:bg-muted", !hasEnabledAction && "hidden"), "aria-label": label, "data-testid": testId !== undefined ? `${testId}-overflow` : undefined, children: [_jsx(MoreHorizontal, { className: "size-4", "aria-hidden": "true" }), isDirty && (_jsx("span", { "aria-hidden": "true", "data-testid": testId !== undefined ? `${testId}-overflow-badge` : undefined, className: "absolute top-1 right-1 size-2 rounded-full bg-status-active" }))] }) }), _jsx(PopoverPrimitive.Portal, { forceMount: true, children: _jsx(PopoverPrimitive.Content, { ref: setContent, forceMount: true, side: "top", align: "center", sideOffset: 8, onClick: (event) => {
+                        if (event.target.closest("button") !== null)
+                            setOpen(false);
+                    }, className: cn("z-50 flex w-[calc(100vw-2rem)] flex-col gap-1 rounded-md border border-border bg-card p-1 shadow-md", "[&_button]:w-full [&_button]:justify-start [&_button]:text-left", "data-[state=closed]:hidden"), children: nodes }) })] }));
+}
+/** Pinned footer below `sm`: always one fixed-height row, Back as icon on the left,
+ *  everything else in a "…" popover (hidden while none of it is enabled), the primary
+ *  action filling the rest. */
+export function NarrowPinnedFooter({ nodes, overflowLabel, unsavedCount, testId, }) {
+    const { back, primary, overflow } = splitNarrowFooterNodes(nodes);
+    const backElement = asFooterElement(back);
+    return (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, className: "flex h-14 shrink-0 items-center gap-2 border-t border-border bg-card px-4", children: [backElement !== undefined && _jsx(BackIconButton, { node: backElement }), overflow.length > 0 && (_jsx(OverflowPopover, { nodes: overflow, label: overflowLabel, unsavedCount: unsavedCount, testId: testId })), primary !== undefined && _jsx(PrimaryButton, { node: primary })] }));
+}

package/dist/primitives/use-narrow-viewport.d.ts

@@ -1 +1,2 @@
 export declare function useIsNarrowViewport(): boolean;
+export declare function useIsBelowSmViewport(): boolean;

package/dist/primitives/use-narrow-viewport.js

@@ -3,14 +3,22 @@ import { useSyncExternalStore } from "react";
 // because that file is vendored shadcn (regenerated via scripts/sync-shadcn.ts)
 // and cannot be imported from without risking a future overwrite.
 const MOBILE_BREAKPOINT = 768;
-function subscribe(callback) {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    mql.addEventListener("change", callback);
-    return () => mql.removeEventListener("change", callback);
-}
-function getSnapshot() {
-    return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches;
+const SM_BREAKPOINT = 640;
+// Module-level stores keep subscribe stable, so useSyncExternalStore does not
+// resubscribe on every render (FormFooter re-renders on each keystroke).
+function createBelowBreakpointStore(breakpoint) {
+    const query = `(max-width: ${breakpoint - 1}px)`;
+    return {
+        subscribe: (callback) => {
+            const mql = window.matchMedia(query);
+            mql.addEventListener("change", callback);
+            return () => mql.removeEventListener("change", callback);
+        },
+        getSnapshot: () => window.matchMedia(query).matches,
+    };
 }
+const belowMobileStore = createBelowBreakpointStore(MOBILE_BREAKPOINT);
+const belowSmStore = createBelowBreakpointStore(SM_BREAKPOINT);
 function getServerSnapshot() {
     return false;
 }
@@ -19,5 +27,9 @@ function getServerSnapshot() {
 // render regardless of actual viewport, this reads the real value up front
 // via `useSyncExternalStore` — no wrong-then-corrected first render.
 export function useIsNarrowViewport() {
-    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    return useSyncExternalStore(belowMobileStore.subscribe, belowMobileStore.getSnapshot, getServerSnapshot);
+}
+// Tailwind's `sm` boundary: true below 640px.
+export function useIsBelowSmViewport() {
+    return useSyncExternalStore(belowSmStore.subscribe, belowSmStore.getSnapshot, getServerSnapshot);
 }

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

@@ -1,8 +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
  *  (every non-current chip with `selectableSteps="all"`); the current chip
- *  never does. `doneSteps` overrides the position-based done state. Three visual states, none conveyed by color alone:
+ *  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

package/dist/widgets/step-bar.js

@@ -1,15 +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
  *  (every non-current chip with `selectableSteps="all"`); the current chip
- *  never does. `doneSteps` overrides the position-based done state. Three visual states, none conveyed by color alone:
+ *  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
@@ -25,16 +48,13 @@ export function StepBar({ steps, currentIndex, compactLabel, onStepSelect, doneS
         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 { isCurrent, isDone, isSelectable } = stepState(i);
-                                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: isSelectable ? (_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 { 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}`));
-                }) }), _jsx("p", { "data-testid": compactTestId, className: cn("text-sm text-muted-foreground", narrowLayout === "steps" ? "hidden" : "sm:hidden"), children: compactLabel })] }));
+                }) }), 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.335.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.335.0",
-    "@cosmicdrift/kumiko-framework": "0.335.0",
-    "@cosmicdrift/kumiko-headless": "0.335.0",
-    "@cosmicdrift/kumiko-renderer": "0.335.0",
-    "@cosmicdrift/kumiko-types": "0.335.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.335.0"
+    "@cosmicdrift/kumiko-locale-de": "0.336.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,18 @@
 [
+  {
+    "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",