@cosmicdrift/kumiko-renderer 0.384.0 → 0.386.0

package/dist/web/primitives/row-actions.js

@@ -0,0 +1,178 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Loader2, MoreHorizontal } from "lucide-react";
+import { useState } from "react";
+import { needsActionConfirm, shouldRenderActionsIconOnly, useTranslation, WriteFailedError, } from "../../index.js";
+import { Icon } from "../icons.js";
+import { cn } from "../lib/cn.js";
+import { Button as UiButton } from "../ui/button.js";
+import { DefaultDialog } from "./dialog.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { useToast } from "./toast.js";
+import "../react-css-custom-properties.js";
+import { actionIconFor, SECONDARY_BUTTON_EXTRA_CLASSES } from "./button.js";
+// The primary row action is the one that always stays a visible text
+// button — `edit` if declared, else the first visible action (fw
+// bedienkonzept L3: "Bearbeiten steht in jeder Zeile, immer, als Text").
+function primaryRowAction(actions) {
+    return actions.find((a) => a.id === "edit") ?? actions[0];
+}
+// RowActionsCell renders the row actions depending on `mode`:
+//   - "adaptive" (default): when the row itself is the link (`rowIsLink`)
+//     every action sits in the kebab; otherwise the primary action (see
+//     `primaryRowAction`) is a link-button and the rest goes into the kebab.
+//     A single action never gets a kebab.
+//   - "inline": ALWAYS inline buttons, left-aligned + full-width, even for
+//     >2 (no kebab). `w-full justify-start` pins the first button to the
+//     column's left edge so it sits at the same position across rows
+//     (otherwise it would drift with differently-sized labels).
+// The isVisible filter runs here; an action hidden for a given row never
+// reaches render. If every action is hidden, the cell stays empty (no
+// phantom column).
+export function RowActionsCell({ row, actions, mode = "adaptive", rowIsLink = false, compact = false, }) {
+    const visible = actions.filter((a) => a.isVisible === undefined || a.isVisible(row));
+    if (visible.length === 0)
+        return null;
+    const hasExplicitDisplay = visible.some((a) => a.display !== undefined);
+    if (mode === "inline") {
+        // Teil C: >2 actions all carrying an icon collapse to icon-only —
+        // otherwise "inline" is exactly the wall-to-wall text-button problem
+        // this feature exists to fix. An author-set `display` takes that choice over.
+        const iconOnly = !hasExplicitDisplay && shouldRenderActionsIconOnly(visible);
+        return (_jsx("div", { className: "flex w-full items-center gap-1 justify-start", children: visible.map((a) => (_jsx(RowActionButton, { row: row, action: a, iconOnly: iconOnly, compact: compact }, a.id))) }));
+    }
+    if (hasExplicitDisplay) {
+        const inline = visible.filter((a) => a.display !== undefined);
+        const rest = visible.filter((a) => a.display === undefined);
+        return (_jsxs("div", { className: "inline-flex flex-wrap items-center gap-1 justify-end", children: [inline.map((a) => (_jsx(RowActionButton, { row: row, action: a, compact: compact }, a.id))), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
+    }
+    if (rowIsLink) {
+        return (_jsx("div", { className: "inline-flex items-center justify-end", children: _jsx(RowActionsKebab, { row: row, actions: visible }) }));
+    }
+    const primary = primaryRowAction(visible);
+    const rest = visible.filter((a) => a.id !== primary?.id);
+    return (_jsxs("div", { className: "inline-flex flex-wrap items-center gap-1 justify-end", children: [primary !== undefined && _jsx(RowActionButton, { row: row, action: primary, asLink: true }), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
+}
+// Shared trigger state between inline button + kebab item: busy flag
+// (while the async onTrigger runs) + confirm-pending action. Both
+// sub-components had duplicated the same state block in parallel to the
+// confirm dialog render logic; the hook consolidates that.
+function useRowActionTrigger(row) {
+    const [busy, setBusy] = useState(false);
+    const { toast } = useToast();
+    const t = useTranslation();
+    const triggerNow = async (action) => {
+        setBusy(true);
+        try {
+            await action.onTrigger(row);
+        }
+        catch (e) {
+            // Surface instead of swallow: a swallowed write error looked like
+            // "nothing happened" to the user (prod bug 2026-06-07).
+            const dispatcherError = e instanceof WriteFailedError ? e.dispatcherError : undefined;
+            const docsUrl = dispatcherError?.docsUrl;
+            const requestId = dispatcherError?.requestId;
+            toast({
+                title: t("kumiko.rowAction.failed"),
+                description: e instanceof Error ? e.message : String(e),
+                variant: "bad",
+                ...(docsUrl !== undefined && { docsUrl }),
+                ...(requestId !== undefined && { requestId }),
+            });
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return { busy, triggerNow };
+}
+// An icon-only form without a resolvable icon would render an empty button.
+// `compact` is the narrow card layout, where "responsive" collapses to its icon.
+function effectiveRowActionDisplay(display, hasIcon, compact) {
+    if (display === "responsive")
+        return hasIcon && compact ? "icon" : "button";
+    if (display === "icon" && !hasIcon)
+        return "link";
+    return display;
+}
+function RowActionButton({ row, action, iconOnly = false, asLink = false, compact = false, }) {
+    const { busy, triggerNow } = useRowActionTrigger(row);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const resolvedIcon = actionIconFor(action.icon);
+    const display = effectiveRowActionDisplay(action.display, resolvedIcon !== undefined, compact);
+    const isBorderedButton = display === "button";
+    const showIconOnly = display === "icon" || (display === undefined && iconOnly && resolvedIcon !== undefined);
+    const linkLike = display === "link" || (display === undefined && asLink);
+    const variantClass = isBorderedButton
+        ? action.style === "primary"
+            ? "border border-transparent bg-primary text-primary-foreground hover:bg-primary/90"
+            : action.style === "danger"
+                ? "border border-destructive/40 bg-card text-destructive hover:bg-destructive/10"
+                : "border border-border-strong bg-card text-foreground hover:bg-accent"
+        : action.style === "danger"
+            ? "text-destructive hover:bg-destructive/10"
+            : linkLike
+                ? "font-medium text-primary hover:bg-muted"
+                : action.style === "primary"
+                    ? "text-primary hover:bg-primary/10"
+                    : "text-foreground hover:bg-accent";
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "data-testid": `row-${row.id}-action-${action.id}`, disabled: busy, ...(showIconOnly && { "aria-label": action.label, title: action.label }), onClick: (e) => {
+                    e.stopPropagation();
+                    if (needsActionConfirm(action)) {
+                        setConfirmOpen(true);
+                    }
+                    else {
+                        void triggerNow(action);
+                    }
+                }, className: cn("inline-flex items-center justify-center gap-1.5 text-sm", isBorderedButton
+                    ? "h-8 rounded-md px-3 font-medium max-md:h-11"
+                    : linkLike
+                        ? "h-7 rounded-md px-2.5 max-md:h-11"
+                        : "h-8 rounded-sm max-md:h-11", showIconOnly ? "w-8 max-md:w-11" : !linkLike && !isBorderedButton && "px-2", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:opacity-50 disabled:pointer-events-none", variantClass), children: busy ? (_jsx(Loader2, { className: "size-3.5 animate-spin", "aria-hidden": "true" })) : resolvedIcon === undefined || (linkLike && !showIconOnly) ? (action.label) : showIconOnly ? (_jsx(Icon, { name: resolvedIcon, className: "size-4" })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: resolvedIcon, className: "size-4" }), action.label] })) }), _jsx(DefaultDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, title: action.label, ...(action.confirm !== undefined && { description: action.confirm }), confirmLabel: action.confirmLabel ?? action.label, ...(action.style === "danger" && { variant: "danger" }), onConfirm: () => triggerNow(action), testId: `row-${row.id}-action-${action.id}-dialog` })] }));
+}
+// Kebab dropdown for >2 actions, one inline confirm dialog per item like
+// the inline-button path. Menu is controlled so it closes explicitly on
+// select, instead of relying on Radix's auto-close, which preventDefault
+// below blocks.
+function RowActionsKebab({ row, actions, }) {
+    const { triggerNow } = useRowActionTrigger(row);
+    const t = useTranslation();
+    const [pendingConfirm, setPendingConfirm] = useState(null);
+    const [menuOpen, setMenuOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("kumiko.list.row-actions.more"), "data-testid": `row-${row.id}-actions-menu`, className: cn("inline-flex size-7 items-center justify-center rounded-md max-md:size-11", "hover:bg-accent text-muted-foreground hover:text-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"), children: _jsx(MoreHorizontal, { className: "size-4", "aria-hidden": "true" }) }) }), _jsx(DropdownMenuContent, { align: "end", 
+                        // Radix refocuses the trigger after the exit animation, which by then sits behind the confirm dialog's aria-hidden.
+                        onCloseAutoFocus: (e) => {
+                            if (pendingConfirm !== null)
+                                e.preventDefault();
+                        }, children: actions.map((action) => (_jsx(DropdownMenuItem, { "data-testid": `row-${row.id}-action-${action.id}`, onSelect: (e) => {
+                                e.preventDefault();
+                                setMenuOpen(false);
+                                if (needsActionConfirm(action)) {
+                                    setPendingConfirm(action);
+                                }
+                                else {
+                                    void triggerNow(action);
+                                }
+                            }, className: cn(action.style === "danger" && "text-destructive focus:text-destructive"), children: action.label }, action.id))) })] }), pendingConfirm !== null && (_jsx(DefaultDialog, { open: true, onOpenChange: (open) => {
+                    if (!open)
+                        setPendingConfirm(null);
+                }, title: pendingConfirm.label, ...(pendingConfirm.confirm !== undefined && { description: pendingConfirm.confirm }), confirmLabel: pendingConfirm.confirmLabel ?? pendingConfirm.label, ...(pendingConfirm.style === "danger" && { variant: "danger" }), onConfirm: async () => {
+                    const action = pendingConfirm;
+                    setPendingConfirm(null);
+                    await triggerNow(action);
+                }, testId: `row-${row.id}-action-${pendingConfirm.id}-dialog` }))] }));
+}
+// Header/row-actions overflow menu (A7): the trigger carries the classes of a
+// secondary icon Button so it matches neighbouring icon buttons, including
+// the 44 px touch size on phones. Generic ActionMenuItemSpec items instead of
+// the DataTableRowAction schema (callers own confirm/danger handling per item).
+export function ActionOverflowMenu({ items, label, testId }) {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(UiButton, { type: "button", variant: "outline", size: "icon", className: SECONDARY_BUTTON_EXTRA_CLASSES, "aria-label": label, "data-testid": testId ?? "action-overflow-menu-trigger", children: _jsx(MoreHorizontal, { className: "size-4", "aria-hidden": "true" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: items.map((item) => {
+                    const resolvedIcon = actionIconFor(item.icon);
+                    return (_jsxs(DropdownMenuItem, { "data-testid": item.testId ?? `${testId ?? "action-overflow-menu"}-item-${item.id}`, disabled: item.disabled === true, onSelect: (e) => {
+                            e.preventDefault();
+                            setOpen(false);
+                            item.onSelect();
+                        }, className: cn(item.variant === "danger" && "text-destructive focus:text-destructive"), children: [resolvedIcon !== undefined && _jsx(Icon, { name: resolvedIcon, className: "size-4" }), item.label] }, item.id));
+                }) })] }));
+}

package/dist/web/primitives/secret-reveal.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from "react";
+import type { SecretRevealProps } from "../../index.ts";
+import "../react-css-custom-properties.ts";
+export declare function DefaultSecretReveal({ values, copyLabel, copiedLabel, testId, }: SecretRevealProps): ReactNode;

package/dist/web/primitives/secret-reveal.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/// <reference path="../qrcode-browser.d.ts" />
+import { useEffect, useState } from "react";
+import { Button as UiButton } from "../ui/button.js";
+import "../react-css-custom-properties.js";
+// otpauth:// enrollment URI → scannable QR (errorCorrectionLevel "H", ~30%
+// redundancy — more resilient to camera/lighting issues than the default, no
+// downside for a code this short-lived). Own component (not inline in
+// values.map) because QRCode.toString is async — a hook inside .map would
+// violate the rules of hooks.
+function QrSecretValue({ value }) {
+    const [svg, setSvg] = useState(null);
+    const [failed, setFailed] = useState(false);
+    useEffect(() => {
+        let cancelled = false;
+        setFailed(false);
+        // Loaded on first QR render, not with the primitives. The main entry pulls
+        // Node-only deps (yargs/pngjs) under bundlers that ignore package.json#browser
+        // (Metro), hence the explicit browser subpath.
+        import("qrcode/lib/browser.js")
+            .then(({ default: QRCode }) => QRCode.toString(value, { type: "svg", errorCorrectionLevel: "H" }))
+            .then((result) => {
+            if (!cancelled)
+                setSvg(result);
+        })
+            .catch(() => {
+            // A generic `qr` field may have no separate text display, so fall back to the plain value.
+            if (!cancelled)
+                setFailed(true);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [value]);
+    if (failed) {
+        return (_jsx("code", { className: "flex-1 overflow-x-auto whitespace-pre-wrap break-all rounded bg-muted px-3 py-2 font-mono text-sm", children: value }));
+    }
+    if (svg === null)
+        return null;
+    return (_jsx("div", { className: "h-40 w-40", 
+        // qrcode's own SVG string output, not user input — safe to inline
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: qrcode-generated SVG, no user input
+        dangerouslySetInnerHTML: { __html: svg } }));
+}
+// One-time secret reveal (fw#2548, secretMint confirm phase) — monospaced
+// per-value display with a copy button that flips to `copiedLabel` on
+// success. Silent-catch on clipboard error mirrors the copy-link pattern in
+// create-app.tsx.
+export function DefaultSecretReveal({ values, copyLabel, copiedLabel, testId, }) {
+    const [copiedIndex, setCopiedIndex] = useState(null);
+    // Labels are not unique per reveal; suffix repeats so React keys stay distinct.
+    const seenLabels = new Map();
+    const rowKeys = values.map((v) => {
+        const occurrence = seenLabels.get(v.label) ?? 0;
+        seenLabels.set(v.label, occurrence + 1);
+        return `${v.label}#${occurrence}`;
+    });
+    return (_jsx("div", { "data-testid": testId, className: "flex flex-col gap-3", children: values.map((v, i) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-sm font-medium text-muted-foreground", children: v.label }), _jsxs("div", { className: "flex items-start gap-2", children: [v.qr === true ? (_jsx(QrSecretValue, { value: v.value })) : v.multiline ? (_jsx("pre", { className: "flex-1 overflow-x-auto whitespace-pre-wrap break-all rounded bg-muted px-3 py-2 font-mono text-sm", children: v.value })) : (_jsx("code", { className: "flex-1 overflow-x-auto whitespace-pre-wrap break-all rounded bg-muted px-3 py-2 font-mono text-sm", children: v.value })), v.copyable && (_jsx(UiButton, { type: "button", variant: "outline", size: "sm", onClick: async () => {
+                                try {
+                                    await navigator.clipboard.writeText(v.value);
+                                    setCopiedIndex(i);
+                                }
+                                catch {
+                                    // clipboard blocked (non-secure context) — no fallback UI needed here
+                                }
+                            }, children: copiedIndex === i ? copiedLabel : copyLabel }))] })] }, rowKeys[i]))) }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.384.0",
+  "version": "0.386.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": "BUSL-1.1",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -48,8 +48,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.384.0",
-    "@cosmicdrift/kumiko-types": "0.384.0",
+    "@cosmicdrift/kumiko-framework": "0.386.0",
+    "@cosmicdrift/kumiko-types": "0.386.0",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -92,8 +92,8 @@
     }
   },
   "devDependencies": {
-    "@cosmicdrift/kumiko-locale-de": "0.384.0",
-    "@cosmicdrift/kumiko-testing": "0.384.0",
+    "@cosmicdrift/kumiko-locale-de": "0.386.0",
+    "@cosmicdrift/kumiko-testing": "0.386.0",
     "@tailwindcss/cli": "^4.3.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

package/src/changes.json

@@ -1,4 +1,10 @@
 [
+  {
+    "version": "0.385.0",
+    "type": "improvement",
+    "title": "View-model inputs take only the entity parts they read",
+    "detail": "ComputeEditViewModelInput.entity and ComputeListViewModelInput.entity are typed as the Pick of EntityDefinition they actually read, so synthesized entities need no cast. Passing a full EntityDefinition keeps working. Renderer console output goes through one dev-console module."
+  },
   {
     "version": "0.384.0",
     "type": "fix",