@cosmicdrift/kumiko-renderer-web 0.349.0 → 0.350.0

package/dist/app/nav.js

@@ -121,25 +121,34 @@ function applySearchParamUpdates(updates) {
     for (const l of listeners)
         l();
 }
-function pushPath(path) {
+// undefined = the caller passed no search params; "" = an explicitly empty query.
+function formatSearch(options) {
+    if (options?.searchParams === undefined)
+        return undefined;
+    const query = new URLSearchParams(options.searchParams).toString();
+    return query === "" ? "" : `?${query}`;
+}
+function pushPath(path, search) {
     if (typeof window === "undefined")
         return;
-    // Nur pushen wenn sich der Pfad wirklich ändert — doppelte navigate()
-    // Aufrufe mit demselben Ziel sollen nicht die History fluten.
-    if (window.location.pathname === path)
+    // Repeated navigate() calls to the same URL must not flood the history.
+    // Without explicit search params the current query counts as unchanged.
+    const unchanged = window.location.pathname === path &&
+        (search === undefined || window.location.search === search);
+    if (unchanged)
         return;
-    window.history.pushState(null, "", path);
+    window.history.pushState(null, "", `${path}${search ?? ""}`);
     for (const l of listeners)
         l();
 }
-function replacePath(path) {
+function replacePath(path, search) {
     if (typeof window === "undefined")
         return;
     // No path-change short-circuit here: callers explicitly chose replace
     // to avoid creating a history entry, even when the URL is identical.
     // (pushPath skips no-op pushes; replacePath honors the call so the
     // entry-stack semantics stay predictable.)
-    window.history.replaceState(null, "", path);
+    window.history.replaceState(null, "", `${path}${search ?? ""}`);
     for (const l of listeners)
         l();
 }
@@ -197,9 +206,9 @@ export function useBrowserNavApi(options) {
         const toPath = (target) => prependBasePath(formatPath(inCurrentWorkspace(resolveTarget(features, target))), basePath);
         return {
             route,
-            navigate: (target) => pushPath(toPath(target)),
-            replace: (target) => replacePath(toPath(target)),
-            hrefFor: (target) => toPath(target),
+            navigate: (target, navigateOptions) => pushPath(toPath(target), formatSearch(navigateOptions)),
+            replace: (target, navigateOptions) => replacePath(toPath(target), formatSearch(navigateOptions)),
+            hrefFor: (target, navigateOptions) => `${toPath(target)}${formatSearch(navigateOptions) ?? ""}`,
             searchParams,
             setSearchParams: applySearchParamUpdates,
         };

package/dist/primitives/index.js

@@ -504,7 +504,7 @@ const EXPAND_TOGGLE_CELL_CLASS = "w-10 px-1! py-0!";
 const EXPANSION_CELL_CLASS = "whitespace-normal bg-muted p-0! align-top md:[&_td:last-child]:bg-muted";
 const EXPANSION_CONTENT_CLASS = "pt-1 pr-4 pb-3.5 pl-[52px]";
 function RowExpandToggle({ expanded, controlsId, label, onToggle, testId, }) {
-    return (_jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0", "aria-expanded": expanded, ...(expanded && { "aria-controls": controlsId }), "aria-label": label, "data-testid": testId, onClick: (e) => {
+    return (_jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0 max-md:size-11", "aria-expanded": expanded, ...(expanded && { "aria-controls": controlsId }), "aria-label": label, "data-testid": testId, onClick: (e) => {
             e.stopPropagation();
             onToggle();
         }, onKeyDown: (e) => e.stopPropagation(), children: _jsx(ChevronRight, { className: cn("size-4 transition-transform", expanded && "rotate-90"), "aria-hidden": "true" }) }));
@@ -670,7 +670,7 @@ function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange, empty
                         e.preventDefault();
                         e.stopPropagation();
                         onRowClick(row);
-                    }, children: body })) : (body), hasMenu && (_jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(RowActionsCell, { row: row, actions: menuActions, mode: rowActionMode, rowIsLink: rowIsLink }) }))] }, row.id));
+                    }, children: body })) : (body), hasMenu && (_jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(RowActionsCell, { row: row, actions: menuActions, mode: rowActionMode, rowIsLink: rowIsLink, compact: true }) }))] }, row.id));
         if (!isRowExpandable)
             return rowItem;
         // The expansion is a sibling <li>, outside the row's click target, so
@@ -764,7 +764,7 @@ function primaryRowAction(actions) {
 // 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).
-function RowActionsCell({ row, actions, mode = "adaptive", rowIsLink = false, }) {
+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;
@@ -774,12 +774,12 @@ function RowActionsCell({ row, actions, mode = "adaptive", rowIsLink = false, })
         // 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 }, a.id))) }));
+        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 items-center gap-1 justify-end", children: [inline.map((a) => (_jsx(RowActionButton, { row: row, action: a }, a.id))), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
+        return (_jsxs("div", { className: "inline-flex 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 }) }));
@@ -890,12 +890,20 @@ function useRowActionTrigger(row) {
     };
     return { busy, triggerNow };
 }
-function RowActionButton({ row, action, iconOnly = false, asLink = false, }) {
+// 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);
-    // "icon" without a resolvable icon would render an empty button.
-    const display = action.display === "icon" && resolvedIcon === undefined ? "link" : action.display;
+    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);
@@ -924,7 +932,7 @@ function RowActionButton({ row, action, iconOnly = false, asLink = false, }) {
                     ? "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", showIconOnly ? "w-8" : !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` })] }));
+                        : "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

package/dist/primitives/lightbox.js

@@ -6,7 +6,7 @@ import { cn } from "../lib/cn.js";
 import { ModalShell } from "./modal-shell.js";
 const NAV_BUTTON_CLASS = "absolute top-1/2 -translate-y-1/2 flex size-9 items-center justify-center rounded-full border border-border bg-card text-foreground opacity-80 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring";
 export function DefaultLightbox(props) {
-    const { open, onOpenChange, testId } = props;
+    const { open, onOpenChange, testId, actions, showPosition = true } = props;
     const t = useTranslation();
     const images = "images" in props ? props.images : [{ src: props.src, alt: props.alt }];
     const onIndexChange = "images" in props ? props.onIndexChange : undefined;
@@ -31,5 +31,5 @@ export function DefaultLightbox(props) {
             goTo(index - 1);
         }
     };
-    return (_jsxs(ModalShell, { open: open, onOpenChange: onOpenChange, testId: testId, closeLabel: t("kumiko.dialog.close"), noAriaDescription: true, ...(canNavigate && { onContentKeyDown: handleKeyDown }), contentClassName: cn("border-0 bg-transparent p-0 shadow-none", "max-w-[95vw] max-h-[90vh] w-auto"), children: [_jsx(DialogPrimitive.Title, { className: "sr-only", children: current.alt }), _jsx("img", { src: current.src, alt: current.alt, className: "block max-h-[85vh] max-w-[90vw] w-auto rounded-lg border border-border bg-card shadow-lg" }), canNavigate && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": t("kumiko.lightbox.previous"), onClick: () => goTo(index - 1), className: cn(NAV_BUTTON_CLASS, "left-2"), children: _jsx(ChevronLeft, { className: "size-5" }) }), _jsx("button", { type: "button", "aria-label": t("kumiko.lightbox.next"), onClick: () => goTo(index + 1), className: cn(NAV_BUTTON_CLASS, "right-2"), children: _jsx(ChevronRight, { className: "size-5" }) }), _jsx("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-card px-3 py-1 text-xs text-foreground shadow-sm", children: t("kumiko.lightbox.position", { current: index + 1, total }) })] }))] }));
+    return (_jsxs(ModalShell, { open: open, onOpenChange: onOpenChange, testId: testId, closeLabel: t("kumiko.dialog.close"), noAriaDescription: true, ...(canNavigate && { onContentKeyDown: handleKeyDown }), contentClassName: cn("border-0 bg-transparent p-0 shadow-none", "max-w-[95vw] max-h-[90vh] w-auto"), children: [_jsx(DialogPrimitive.Title, { className: "sr-only", children: current.alt }), _jsx("img", { src: current.src, alt: current.alt, className: "block max-h-[85vh] max-w-[90vw] w-auto rounded-lg border border-border bg-card shadow-lg" }), canNavigate && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": t("kumiko.lightbox.previous"), onClick: () => goTo(index - 1), className: cn(NAV_BUTTON_CLASS, "left-2"), children: _jsx(ChevronLeft, { className: "size-5" }) }), _jsx("button", { type: "button", "aria-label": t("kumiko.lightbox.next"), onClick: () => goTo(index + 1), className: cn(NAV_BUTTON_CLASS, "right-2"), children: _jsx(ChevronRight, { className: "size-5" }) }), showPosition && (_jsx("div", { className: "absolute bottom-2 left-1/2 -translate-x-1/2 rounded-full bg-card px-3 py-1 text-xs text-foreground shadow-sm", children: t("kumiko.lightbox.position", { current: index + 1, total }) }))] })), actions !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, className: "absolute left-2 top-2 flex items-center gap-2", children: actions }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer-web",
-  "version": "0.349.0",
+  "version": "0.350.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.349.0",
-    "@cosmicdrift/kumiko-framework": "0.349.0",
-    "@cosmicdrift/kumiko-headless": "0.349.0",
-    "@cosmicdrift/kumiko-renderer": "0.349.0",
-    "@cosmicdrift/kumiko-types": "0.349.0",
+    "@cosmicdrift/kumiko-dispatcher-live": "0.350.0",
+    "@cosmicdrift/kumiko-framework": "0.350.0",
+    "@cosmicdrift/kumiko-headless": "0.350.0",
+    "@cosmicdrift/kumiko-renderer": "0.350.0",
+    "@cosmicdrift/kumiko-types": "0.350.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.349.0"
+    "@cosmicdrift/kumiko-locale-de": "0.350.0"
   },
   "repository": {
     "type": "git",

package/src/changes.json

@@ -1,4 +1,10 @@
 [
+  {
+    "version": "0.350.0",
+    "type": "improvement",
+    "title": "Row actions with display \"responsive\", Lightbox actions and showPosition, navigate with searchParams, facet counts refresh after writes",
+    "detail": "Responsive row actions, Lightbox actions, navigate with search params, fresh facet counts\n`RowActionDisplay` gets `\"responsive\"`: a labelled button with icon in the table (768px and up), icon only in the narrow card layout with the label as accessible name. Without an icon it stays a button. Existing values keep their look. Below 768px, icon-only row actions and the row expand arrow have a 44px touch target.\n`Lightbox` takes `actions` (nodes in the top-left corner, e.g. a download button) and `showPosition` (default `true`; `false` hides the `{current} / {total}` counter).\n`NavApi.navigate`, `replace` and `hrefFor` take an optional `{ searchParams }` (`NavigateOptions`). Without it the query is dropped as before. `listFilterUrlKey(screenId, field)` builds the URL key a list reads a facet filter from.\nFacet chip counts refetch after a write from a row action, toolbar action, drawer or expanded row, and follow the entity's live events. Before, they kept the count from the first load."
+  },
   {
     "version": "0.349.0",
     "type": "improvement",