@cosmicdrift/kumiko-renderer-web 0.336.1 → 0.338.0

package/dist/app/create-app.js

@@ -233,7 +233,7 @@ function KumikoAppRoot(props) {
             warnMissingCustomScreens(loaded, props.customScreens);
             setApp(loaded);
         }, schemaIsRoleProjected: isFetchMode, ...(isFetchMode && { onUnmountResetSchema: () => setApp(undefined) }), ...(props.translate !== undefined && { translate: props.translate }), ...(props.onRowClick !== undefined && { onRowClick: props.onRowClick }), ...(props.shell !== undefined && { shell: props.shell }) }));
-    return (_jsx(TokensBoot, { children: _jsxs(LocaleProvider, { resolver: props.localeResolver, fallbackBundles: fallbackBundles, children: [_jsx(DocumentLangSync, { resolver: props.localeResolver }), _jsx(PrimitivesProvider, { value: props.primitives, children: _jsx(ScreenWidthProvider, { width: props.screenWidth ?? "4xl", children: _jsx(AppFeaturesProvider, { features: app?.features ?? EMPTY_FEATURES, children: _jsx(DispatcherProvider, { dispatcher: props.dispatcher, children: _jsx(DraftStorageProvider, { value: props.draftStorage, children: _jsx(LiveEventsProvider, { value: props.liveEvents, children: _jsx(DashboardBodyProvider, { value: WebDashboardBody, children: _jsx(CustomScreensProvider, { value: props.customScreens, children: _jsx(ColumnRenderersProvider, { value: props.columnRenderers, children: _jsx(ContentEditorsProvider, { value: props.contentEditors, children: _jsx(ExtensionSectionsProvider, { value: props.extensionSectionComponents, children: _jsx(NavProvidersProvider, { value: navProviders, entities: navEntities, children: _jsx(ResolversProvider, { resolvers: props.resolvers, children: _jsxs(ToastProvider, { children: [_jsx(UpdateChecker, {}), _jsx(SessionEndedSignalProvider, { signal: props.sessionEndedSignal, children: stackWrappers(props.providers, stackWrappers(props.gates, screenNode)) })] }) }) }) }) }) }) }) }) }) }) }) }) }) })] }) }));
+    return (_jsx(TokensBoot, { children: _jsxs(LocaleProvider, { resolver: props.localeResolver, fallbackBundles: fallbackBundles, children: [_jsx(DocumentLangSync, { resolver: props.localeResolver }), _jsx(PrimitivesProvider, { value: props.primitives, children: _jsx(ScreenWidthProvider, { width: props.screenWidth, children: _jsx(AppFeaturesProvider, { features: app?.features ?? EMPTY_FEATURES, children: _jsx(DispatcherProvider, { dispatcher: props.dispatcher, children: _jsx(DraftStorageProvider, { value: props.draftStorage, children: _jsx(LiveEventsProvider, { value: props.liveEvents, children: _jsx(DashboardBodyProvider, { value: WebDashboardBody, children: _jsx(CustomScreensProvider, { value: props.customScreens, children: _jsx(ColumnRenderersProvider, { value: props.columnRenderers, children: _jsx(ContentEditorsProvider, { value: props.contentEditors, children: _jsx(ExtensionSectionsProvider, { value: props.extensionSectionComponents, children: _jsx(NavProvidersProvider, { value: navProviders, entities: navEntities, children: _jsx(ResolversProvider, { resolvers: props.resolvers, children: _jsxs(ToastProvider, { children: [_jsx(UpdateChecker, {}), _jsx(SessionEndedSignalProvider, { signal: props.sessionEndedSignal, children: stackWrappers(props.providers, stackWrappers(props.gates, screenNode)) })] }) }) }) }) }) }) }) }) }) }) }) }) }) })] }) }));
 }
 // Sits INSIDE the clientFeature gates (e.g. an auth gate) — a gate that
 // renders a login placeholder instead of children keeps this component
@@ -288,7 +288,9 @@ export function createKumikoApp(options = {}) {
     const dispatcher = withSessionEndedDetection(options.dispatcher ?? createLiveDispatcher(), sessionEndedSignal);
     const draftStorage = options.draftStorage ?? createBrowserDraftStorage();
     const primitives = { ...defaultPrimitives, ...(options.primitives ?? {}) };
-    const liveEvents = createEventSourceLiveEvents();
+    const liveEvents = createEventSourceLiveEvents({
+        onSessionEnded: () => sessionEndedSignal.notify(),
+    });
     // Feature plugins: providers stack outermost (every gate + screen sees
     // every provider), gates stack between the renderer providers and the
     // shell/screen. Array order: first element = outermost wrapper.

package/dist/app/dashboard-body.js

@@ -307,9 +307,7 @@ function useTimeRange(screen, translate) {
     if (timeRange === undefined)
         return { params: {}, control: null };
     const fromUrl = nav.searchParams[timeRange.id];
-    const value = timeRange.options.some((o) => o.value === fromUrl)
-        ? fromUrl
-        : timeRange.default;
+    const value = timeRange.options.find((o) => o.value === fromUrl)?.value ?? timeRange.default;
     return {
         // Metric buckets are cut server-side; without the user's zone they default
         // to UTC while the axis labels are formatted in the user's zone.

package/dist/layout/nav-tree.js

@@ -300,18 +300,22 @@ function ActionGlyph({ icon }) {
 // provider-emitted TreeNode reaches here without going through boot — warn
 // once per label instead of rendering a dead button.
 const warnedTreeActionLabels = new Set();
-function warnTreeActionDropped(label) {
-    // skip: already warned for this label — suppresses the repeat, not the warning itself.
-    if (warnedTreeActionLabels.has(label))
+function warnTreeActionMisconfigured(label, problem) {
+    const key = `${label}:${problem}`;
+    // skip: already warned for this label and problem — suppresses the repeat, not the warning itself.
+    if (warnedTreeActionLabels.has(key))
         return;
-    warnedTreeActionLabels.add(label);
+    warnedTreeActionLabels.add(key);
     // biome-ignore lint/suspicious/noConsole: dev-warning for a setup error
-    console.warn(`[kumiko] Nav action "${label}" has neither "screen" nor "target" set — it will not render.`);
+    console.warn(`[kumiko] Nav action "${label}" ${problem}`);
 }
 // An action button carries screen XOR target (see TreeAction) — `screen`
 // renders a KumikoLink to the route, `target` a dispatch button. Same
 // classes/size either way, only the element changes.
 function TreeActionControl({ action, ariaLabel, className, dispatch, workspaceId, children, }) {
+    if (action.screen !== undefined && action.target !== undefined) {
+        warnTreeActionMisconfigured(action.label, 'has both "screen" and "target" set — using "screen", "target" is ignored.');
+    }
     if (action.screen !== undefined) {
         const screenId = lastSegment(action.screen);
         return (_jsx(KumikoLink, { to: { ...(workspaceId !== undefined && { workspaceId }), screenId }, "aria-label": ariaLabel, className: className, onClick: (e) => e.stopPropagation(), children: children }));
@@ -323,7 +327,7 @@ function TreeActionControl({ action, ariaLabel, className, dispatch, workspaceId
                 dispatch(target);
             }, children: children }));
     }
-    warnTreeActionDropped(action.label);
+    warnTreeActionMisconfigured(action.label, 'has neither "screen" nor "target" set — it will not render.');
     return null;
 }
 // Hover-actions + the "+" affordance, positioned absolute right.

package/dist/lib/resize-image.js

@@ -38,8 +38,10 @@ export async function resizeImageBeforeUpload(file, maxEdge = DEFAULT_MAX_EDGE)
         const height = Math.round(bitmap.height * scale);
         const canvas = new OffscreenCanvas(width, height);
         const ctx = canvas.getContext("2d");
-        if (ctx === null)
+        if (ctx === null) {
+            bitmap.close();
             return file;
+        }
         ctx.drawImage(bitmap, 0, 0, width, height);
         bitmap.close();
         const blob = await canvas.convertToBlob({ type: pickOutputType(file.type), quality: 0.85 });

package/dist/primitives/index.d.ts

@@ -14,7 +14,7 @@ export declare function BareFormProvider({ children }: {
     children: ReactNode;
 }): ReactNode;
 export declare function ScreenWidthProvider({ width, children, }: {
-    readonly width: FormWidth;
+    readonly width: FormWidth | undefined;
     readonly children: ReactNode;
 }): ReactNode;
 export type FormScreenShellWidth = FormWidth;

package/dist/primitives/index.js

@@ -3,7 +3,9 @@ import { applyFormatSpec, isSafeHref } from "@cosmicdrift/kumiko-headless";
 import { InsideDrawerProvider, needsActionConfirm, STICKY_PRIMARY_ACTION_PROP, shouldRenderActionsIconOnly, statusToneForOptionTone, statusToneForValue, useColumnRenderer, useInsideDrawer, useOptionalLocale, useOptionalTranslation, useTranslation, WriteFailedError, } from "@cosmicdrift/kumiko-renderer";
 import { cva } from "class-variance-authority";
 import { ArrowDown, ArrowUp, ArrowUpDown, Building, CalendarDays, ChevronDown, ChevronLeft, ChevronRight, Globe, Hash, KeyRound, Link, Loader2, Lock, Mail, MapPin, MoreHorizontal, Phone, Search, SlidersHorizontal, Tag, Undo2, User, X, } from "lucide-react";
-import QRCode from "qrcode";
+// The main entry pulls Node-only deps (yargs/pngjs) under bundlers that ignore
+// package.json#browser (Metro), hence the explicit browser subpath.
+import QRCode from "qrcode/lib/browser.js";
 import { Children, createContext, Fragment, isValidElement, useContext, useEffect, useId, useRef, useState, } from "react";
 import { Icon, NAV_ICONS } from "../icons.js";
 import { cn } from "../lib/cn.js";
@@ -191,25 +193,18 @@ function fieldIconFor(icon) {
 // `icon` carries a known FIELD_ICONS key. `pl-8` overrides (via
 // tailwind-merge) only the left padding of the vendored ui/input.tsx —
 // right padding and other defaults stay untouched.
+const FIELD_ICON_CLASS = "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground";
 function withFieldIcon(icon, input) {
     const Icon = fieldIconFor(icon);
     if (Icon === undefined)
         return input;
-    return (_jsxs("div", { className: "relative", children: [_jsx(Icon, { "aria-hidden": "true", className: "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), input] }));
+    return (_jsxs("div", { className: "relative", children: [_jsx(Icon, { "aria-hidden": "true", className: FIELD_ICON_CLASS }), input] }));
 }
-// Mirrors withFieldIcon on the right side: a muted, non-interactive unit
-// suffix rendered inside the input's visual box. Pure decoration — never
-// focusable, never touches the input's value.
 // The unit changes the meaning of the value ("58 mi" vs "58 km"), so it is
 // exposed as the input's description rather than hidden from assistive tech.
 function unitSuffixId(inputId) {
     return `${inputId}-unit`;
 }
-function withUnitSuffix(inputId, unit, input) {
-    if (unit === undefined)
-        return input;
-    return (_jsxs("div", { className: "relative", children: [input, _jsx("span", { id: unitSuffixId(inputId), className: "pointer-events-none absolute right-2.5 top-1/2 max-w-[40%] -translate-y-1/2 truncate text-sm text-muted-foreground", children: unit })] }));
-}
 const TRAILING_ACTION_ICONS = { clear: X, undo: Undo2 };
 // In-field icon button on the right (same look as the date input's calendar
 // trigger). The wrapped input must reserve the room itself (`pr-9`).
@@ -336,8 +331,13 @@ function DefaultInput(props) {
             return (_jsx(UiInput, { type: "email", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "email" }));
         case "password":
             return withTrailingAction(props.trailingAction, _jsx(UiInput, { type: "password", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "current-password", className: props.trailingAction !== undefined ? "pr-9" : undefined }), true);
-        case "number":
-            return withUnitSuffix(props.id, props.unit, withFieldIcon(props.icon, _jsx(NumberInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, disabled: props.disabled, required: props.required, hasError: props.hasError, testId: props.testId, ...(props.unit !== undefined && { ariaDescribedBy: unitSuffixId(props.id) }), ...(props.locale !== undefined && { locale: props.locale }), ...(props.grouping !== undefined && { grouping: props.grouping }), ...(props.integer !== undefined && { integer: props.integer }), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), className: cn(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined, props.unit !== undefined ? "pr-8" : undefined) })));
+        case "number": {
+            const NumberIcon = fieldIconFor(props.icon);
+            // Icon, input and unit share this one box, and the grid cell sizes the
+            // box rather than the bare input: anchored to a wider wrapper, the unit
+            // would sit next to a narrower input instead of inside it.
+            return (_jsxs("div", { "data-slot": "number-field", className: "relative", children: [NumberIcon !== undefined && (_jsx(NumberIcon, { "aria-hidden": "true", className: FIELD_ICON_CLASS })), _jsx(NumberInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, disabled: props.disabled, required: props.required, hasError: props.hasError, testId: props.testId, ...(props.unit !== undefined && { ariaDescribedBy: unitSuffixId(props.id) }), ...(props.locale !== undefined && { locale: props.locale }), ...(props.grouping !== undefined && { grouping: props.grouping }), ...(props.integer !== undefined && { integer: props.integer }), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), className: cn(NumberIcon !== undefined ? "pl-8" : undefined, props.unit !== undefined ? "pr-8" : undefined) }), props.unit !== undefined && (_jsx("span", { id: unitSuffixId(props.id), className: "pointer-events-none absolute right-2.5 top-1/2 max-w-[40%] -translate-y-1/2 truncate text-sm text-muted-foreground", children: props.unit }))] }));
+        }
         case "range":
             return (_jsx("input", { type: "range", ...common, min: props.min, max: props.max, step: props.step ?? 1, value: props.value, onChange: (e) => props.onChange(Number(e.target.value)), className: "w-full accent-primary" }));
         case "boolean":
@@ -658,7 +658,7 @@ function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange, empty
         const hasMenu = menuActions !== undefined && menuActions.length > 0;
         const body = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-2", children: [cardTitleColumn !== undefined && (_jsx("span", { "data-testid": getCellTestId?.(row, cardTitleColumn.field) ??
                                         `cell-${row.id}-${cardTitleColumn.field}`, className: "min-w-0 truncate text-base font-semibold text-foreground", children: cardCell(row, cardTitleColumn) })), showStatus && (_jsx("span", { "data-testid": getCellTestId?.(row, cardStatusColumn.field) ??
-                                        `cell-${row.id}-${cardStatusColumn.field}`, className: "shrink-0", children: cardCell(row, cardStatusColumn) }))] }), metaColumns.length > 0 && (_jsx("div", { className: "min-w-0 max-h-10 overflow-hidden text-[13px] leading-5 tabular-nums text-foreground-secondary", children: _jsx("div", { "data-testid": `card-meta-${row.id}`, className: "-ml-3 flex flex-wrap items-center", children: metaColumns.map((col) => (_jsxs("span", { className: "flex min-w-0 max-w-full items-center", children: [_jsx("span", { "aria-hidden": "true", className: "w-3 shrink-0 text-center", children: "\u00B7" }), _jsx("span", { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, className: "min-w-0 truncate", children: isBadgeColumn(col) ? (_jsx("span", { className: "inline-flex align-middle", children: cardCell(row, col) })) : (cardCell(row, col)) })] }, col.field))) }) }))] }), rowIsLink && (_jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }))] }));
+                                        `cell-${row.id}-${cardStatusColumn.field}`, className: "shrink-0", children: cardCell(row, cardStatusColumn) }))] }), metaColumns.length > 0 && (_jsx("div", { className: "min-w-0 max-h-10 overflow-hidden text-[13px] leading-5 tabular-nums text-foreground-secondary", children: _jsx("div", { "data-testid": `card-meta-${row.id}`, className: "-ms-3 flex flex-wrap items-center", children: metaColumns.map((col) => (_jsxs("span", { className: "flex min-w-0 max-w-full items-center", children: [_jsx("span", { "aria-hidden": "true", className: "w-3 shrink-0 text-center", children: "\u00B7" }), _jsx("span", { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, className: "min-w-0 truncate", children: isBadgeColumn(col) ? (_jsx("span", { className: "inline-flex align-middle", children: cardCell(row, col) })) : (cardCell(row, col)) })] }, col.field))) }) }))] }), rowIsLink && (_jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }))] }));
         const rowItem = (_jsxs("li", { "data-testid": rowTestId(row), "data-tone": rowTone?.(row), className: cn("flex min-h-[72px] items-center gap-2 border-b border-border-row py-3", rowToneClass(rowTone?.(row)), isRowExpandable ? "pl-2" : "pl-4", hasMenu ? "pr-2" : "pr-4"), ...(rowIsLink && { onClick: () => onRowClick(row) }), children: [renderExpandToggle(row), rowIsLink ? (_jsx("button", { type: "button", className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 bg-transparent p-0 text-left", onKeyDown: (e) => {
                         if (e.key !== "Enter")
                             return;
@@ -681,17 +681,21 @@ function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange, empty
             }) ?? `Sorted by ${sort.field}`)
             : (tableTranslate?.("kumiko.list.sort.unsorted") ?? "Unsorted");
         const SortArrow = sort?.dir === "desc" ? ArrowDown : ArrowUp;
-        return (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-cards` : "render-list-cards", className: "flex flex-col", children: [onSortChange !== undefined && sortableColumns.length > 0 && (_jsxs("div", { className: "relative flex h-9 items-center gap-1.5 px-4 text-[13px] text-foreground-secondary", children: [_jsx("span", { "aria-hidden": "true", children: sortLabel }), sort !== undefined && sort !== null && (_jsx(SortArrow, { className: "size-3.5", "aria-hidden": "true" })), _jsxs("select", { "aria-label": tableTranslate?.("kumiko.list.sort.label") ?? "Sort", "data-testid": testId !== undefined ? `${testId}-sort` : "render-list-sort", value: sort !== undefined && sort !== null ? `${sort.field}:${sort.dir}` : "", onChange: (e) => {
-                                const raw = e.target.value;
-                                if (raw === "") {
-                                    onSortChange(null);
-                                    return;
-                                }
-                                const picked = sortOptions.find((o) => o.value === raw);
-                                if (picked === undefined)
-                                    return;
-                                onSortChange({ field: picked.field, dir: picked.dir });
-                            }, className: "absolute inset-0 size-full cursor-pointer opacity-0", children: [_jsx("option", { value: "", children: tableTranslate?.("kumiko.list.sort.unsorted") ?? "Unsorted" }), sortOptions.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value)))] })] })), _jsx("ul", { className: "m-0 list-none border-t border-border-row p-0", children: tableItems.map((item) => item.kind === "group" ? (_jsx("li", { "data-testid": `row-group-${item.key}`, className: "border-b border-border-row bg-muted/40", children: renderGroupToggle(item) }, `group-${item.key}`)) : (renderCard(item.row))) })] }));
+        // URL state can carry a sort on a column that is not sortable; without an
+        // option for it the select would claim "Unsorted" while the list is sorted.
+        const currentSortValue = sort !== undefined && sort !== null ? `${sort.field}:${sort.dir}` : "";
+        const currentSortIsUnlisted = sort !== undefined && sort !== null && !sortOptions.some((o) => o.value === currentSortValue);
+        return (_jsx("div", { "data-testid": testId, className: "contents", children: _jsxs("div", { "data-testid": testId !== undefined ? `${testId}-cards` : "render-list-cards", className: "flex flex-col", children: [onSortChange !== undefined && sortableColumns.length > 0 && (_jsxs("div", { className: "relative flex h-9 items-center gap-1.5 px-4 text-[13px] text-foreground-secondary", children: [_jsx("span", { "aria-hidden": "true", children: sortLabel }), sort !== undefined && sort !== null && (_jsx(SortArrow, { className: "size-3.5", "aria-hidden": "true" })), _jsxs("select", { "aria-label": tableTranslate?.("kumiko.list.sort.label") ?? "Sort", "data-testid": testId !== undefined ? `${testId}-sort` : "render-list-sort", value: currentSortValue, onChange: (e) => {
+                                    const raw = e.target.value;
+                                    if (raw === "") {
+                                        onSortChange(null);
+                                        return;
+                                    }
+                                    const picked = sortOptions.find((o) => o.value === raw);
+                                    if (picked === undefined)
+                                        return;
+                                    onSortChange({ field: picked.field, dir: picked.dir });
+                                }, className: "absolute inset-0 size-full cursor-pointer opacity-0", children: [_jsx("option", { value: "", children: tableTranslate?.("kumiko.list.sort.unsorted") ?? "Unsorted" }), currentSortIsUnlisted && (_jsx("option", { value: currentSortValue, children: `${columns.find((col) => col.field === sort.field)?.label ?? sort.field} ${sort.dir === "desc" ? "↓" : "↑"}` })), sortOptions.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value)))] })] })), _jsx("ul", { className: "m-0 list-none border-t border-border-row p-0", children: tableItems.map((item) => item.kind === "group" ? (_jsx("li", { "data-testid": `row-group-${item.key}`, className: "border-b border-border-row bg-muted/40", children: renderGroupToggle(item) }, `group-${item.key}`)) : (renderCard(item.row))) })] }) }));
     }
     const tableContent = isNarrow ? cardsInner() : tableInner();
     // Pager wird IMMER unter der Tabelle gerendert (auch bei rows=[]),
@@ -919,7 +923,7 @@ function RowActionsKebab({ row, actions, }) {
                             }, 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.label, ...(pendingConfirm.style === "danger" && { variant: "danger" }), onConfirm: async () => {
+                }, 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);
@@ -1182,9 +1186,12 @@ function buildTableItems(rows, grouping, toggledGroups) {
             members.push(row);
     }
     return [...groups].flatMap(([key, members]) => {
+        const label = grouping.headerLabel(key, members);
+        if (label === undefined)
+            return members.map((row) => ({ kind: "row", row }));
         const collapsed = grouping.startsCollapsed(key) !== toggledGroups.has(key);
         return [
-            { kind: "group", key, label: grouping.headerLabel(key, members), collapsed },
+            { kind: "group", key, label, collapsed },
             ...(collapsed ? [] : members.map((row) => ({ kind: "row", row }))),
         ];
     });
@@ -1225,7 +1232,8 @@ function DataTableCell({ value, row, field, type, renderer, optionLabels, option
         return (_jsx("span", { "data-empty-cell": "true", className: "text-muted-foreground", children: EMPTY_CELL_PLACEHOLDER }));
     }
     if (typeof renderer === "object" && renderer !== null && "format" in renderer) {
-        return applyFormatSpec({ locale, ...renderer }, value, translate);
+        const spec = renderer;
+        return applyFormatSpec({ ...spec, locale: spec.locale ?? locale }, value, translate);
     }
     if (typeof renderer === "function") {
         const fn = renderer;
@@ -1293,9 +1301,10 @@ export function BareFormProvider({ children }) {
     return _jsx(BareFormContext.Provider, { value: true, children: children });
 }
 // App-wide default for FormScreenShell's width when a screen doesn't set its
-// own `layout.width`. Default "4xl" keeps today's behavior for apps that
-// don't opt into `createKumikoApp({ screenWidth })` (fw#2656).
-const ScreenWidthContext = createContext("4xl");
+// own `layout.width`. Undefined (no `createKumikoApp({ screenWidth })`) lets each
+// shell keep its own default: "4xl" for FormScreenShell, 640px for the
+// screen-form column.
+const ScreenWidthContext = createContext(undefined);
 export function ScreenWidthProvider({ width, children, }) {
     return _jsx(ScreenWidthContext.Provider, { value: width, children: children });
 }
@@ -1307,6 +1316,12 @@ export function ScreenWidthProvider({ width, children, }) {
 // into the URL (fw#2312, fw#2705). Degrading to a <div> when already inside
 // a form avoids the nesting; the captured click still routes to THIS form's
 // onSubmit instead of activating the real ancestor <form>.
+const SUBMIT_CONTROL_SELECTOR = [
+    "button[type=submit]:not(:disabled)",
+    "button:not([type]):not(:disabled)",
+    "input[type=submit]:not(:disabled)",
+    "input[type=image]:not(:disabled)",
+].join(", ");
 function FormRoot({ onSubmit, testId, className, children, }) {
     if (useContext(InsideFormContext)) {
         return (_jsx("div", { "data-kumiko-form-root": "", onKeyDownCapture: (e) => {
@@ -1327,7 +1342,7 @@ function FormRoot({ onSubmit, testId, className, children, }) {
             }, onClickCapture: (e) => {
                 // @cast-boundary dom-event-target: closest() needs an Element, and
                 // click targets are always one in the browser/happy-dom.
-                const submitButton = e.target.closest("button[type=submit], button:not([type])");
+                const submitButton = e.target.closest(SUBMIT_CONTROL_SELECTOR);
                 if (submitButton === null)
                     return;
                 // React events bubble through portals and nested degraded roots; a
@@ -1514,13 +1529,14 @@ function DrawerFormLayout({ onSubmit, subtitle, actions, secondaryActions, summa
 function DefaultForm({ onSubmit, children, title, subtitle, actions, secondaryActions, testId, width, stickyActions, headerRegion, titleAction, fillHeight, chromeless, screenForm, unsavedCount, sectionNav, sideRail, summary, }) {
     const insideDrawer = useInsideDrawer();
     const isEmbeddedForm = useContext(EmbeddedFormContext);
+    const contextWidth = useContext(ScreenWidthContext);
     // Eingebettet (AuthCard etc.): nacktes <form>, gestapelte Felder mit gap —
     // der Container trägt Card/Titel selbst, sonst Card-in-Card.
     if (useContext(BareFormContext)) {
         return (_jsxs(FormRoot, { onSubmit: onSubmit, testId: testId, className: cn("flex flex-col gap-4", 
             // Bare forms stack sections without a card; without a divider a
             // section boundary reads as a layout gap, not structure.
-            "[&>section:not(:first-child)]:border-t"), children: [_jsx(InsideFormContext.Provider, { value: true, children: children }), (secondaryActions !== undefined || actions !== undefined) && (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [secondaryActions, actions] }))] }));
+            "[&>section:not(:first-child)]:border-t"), children: [headerRegion, _jsx(InsideFormContext.Provider, { value: true, children: children }), (secondaryActions !== undefined || actions !== undefined) && (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [secondaryActions, actions] }))] }));
     }
     if (insideDrawer) {
         return (_jsx(DrawerFormLayout, { onSubmit: onSubmit, subtitle: subtitle, actions: actions, secondaryActions: secondaryActions, summary: summary, testId: testId, children: children }));
@@ -1529,13 +1545,16 @@ function DefaultForm({ onSubmit, children, title, subtitle, actions, secondaryAc
         return (_jsxs(FormRoot, { onSubmit: onSubmit, testId: testId, className: "flex w-full flex-col gap-6", children: [_jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: false }), _jsx(FormSections, { chromeless: true, stickyActions: undefined, fillHeight: false, screenForm: true, children: children }), (actions !== undefined || secondaryActions !== undefined) && (_jsx("div", { className: "max-w-4xl border-t border-border", children: _jsx(FormFooter, { actions: actions, secondaryActions: secondaryActions, testId: testId, chromeless: true, stickyActions: undefined, fillHeight: false, ...(unsavedCount !== undefined && { unsavedCount }) }) }))] }));
     }
     const isScreenForm = screenForm === true && fillHeight === true && chromeless !== true;
+    const screenFormWidth = width ?? contextWidth;
     const sections = (_jsx(FormSections, { chromeless: chromeless === true, stickyActions: stickyActions, fillHeight: fillHeight, screenForm: isScreenForm, children: children }));
     const footer = (_jsx(FormFooter, { actions: actions, secondaryActions: secondaryActions, testId: testId, chromeless: chromeless === true, stickyActions: stickyActions, fillHeight: fillHeight, ...(unsavedCount !== undefined && { unsavedCount }), railed: sideRail !== undefined }));
     // Screen form: no card. A padded scroll surface holds the form column and,
     // from xl, the section navigation; the footer stays pinned below it.
     if (isScreenForm) {
         const showsSectionNav = sectionNav !== undefined && sectionNav.length >= SECTION_NAV_MIN_ITEMS;
-        return (_jsxs(FormRoot, { onSubmit: onSubmit, testId: testId, className: "flex h-full min-h-0 w-full flex-col", children: [_jsxs("div", { className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: [sideRail, _jsx("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : undefined, className: cn("min-h-0 flex-1 overflow-y-auto", screenPaddingClassName), children: _jsxs("div", { className: "flex gap-18", children: [_jsxs("div", { className: cn("flex w-full min-w-0 flex-col gap-9", width !== undefined ? screenFormColumnWidthClassName[width] : "max-w-[640px]"), children: [_jsx(InsideScreenFormColumnContext.Provider, { value: true, children: headerRegion }), _jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: false }), sections] }), showsSectionNav && _jsx(FormSectionNav, { items: sectionNav })] }) })] }), footer] }));
+        return (_jsxs(FormRoot, { onSubmit: onSubmit, testId: testId, className: "flex h-full min-h-0 w-full flex-col", children: [_jsxs("div", { className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: [sideRail, _jsx("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : undefined, className: cn("min-h-0 flex-1 overflow-y-auto", screenPaddingClassName), children: _jsxs("div", { className: "flex gap-18", children: [_jsxs("div", { className: cn("flex w-full min-w-0 flex-col gap-9", screenFormWidth !== undefined
+                                            ? screenFormColumnWidthClassName[screenFormWidth]
+                                            : "max-w-[640px]"), children: [_jsx(InsideScreenFormColumnContext.Provider, { value: true, children: headerRegion }), _jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: false }), sections] }), showsSectionNav && _jsx(FormSectionNav, { items: sectionNav })] }) })] }), footer] }));
     }
     // Pinned footer (fillHeight + stickyActions): the footer is a full-bleed
     // sibling BELOW the padded shell, so the shell's bottom inset does not float
@@ -1569,7 +1588,7 @@ function DefaultForm({ onSubmit, children, title, subtitle, actions, secondaryAc
 }
 export function FormScreenShell({ children, className, testId, maxWidth, fillHeight, }) {
     const contextWidth = useContext(ScreenWidthContext);
-    const width = maxWidth ?? contextWidth;
+    const width = maxWidth ?? contextWidth ?? "4xl";
     return (_jsx("div", { "data-testid": testId, className: cn(screenPaddingClassName, "w-full", screenWidthClassName[width], fillHeight === true && "h-full flex flex-col min-h-0", className), children: children }));
 }
 function DefaultSection({ id, title, subtitle, children, actions, variant = "default", layout = "stacked", testId, icon, }) {
@@ -1619,7 +1638,7 @@ const DRAWER_FIELD_CELL_WIDTH_CLASS = {
 };
 const FIELD_CELL_WIDTH_CLASS = {
     text: "w-full sm:w-60",
-    number: "w-fit min-w-24 shrink-0 [&_label]:whitespace-nowrap [&_input]:w-32",
+    number: "w-fit min-w-24 shrink-0 [&_label]:whitespace-nowrap [&_[data-slot=number-field]]:w-32",
     money: "w-40 shrink-0 [&_label]:whitespace-nowrap",
     date: "w-full sm:w-[200px]",
     timestamp: "w-full sm:w-[328px]",
@@ -1656,7 +1675,7 @@ function DefaultGrid({ columns, children, testId, maxRows, flow, list, ariaLabel
     // CSS-Variable; Tailwind-Klasse liest die Variable mit
     // `grid-template-columns: var(--grid-cols)`. Saubere Lösung weil
     // Tailwind JIT keinen dynamischen `grid-cols-${N}` auflösen kann.
-    const rowCount = Math.ceil(Children.count(children) / columns);
+    const rowCount = Math.ceil(Children.toArray(children).length / columns);
     const clipped = maxRows !== undefined && rowCount > maxRows;
     // gridAutoRows is a minmax MIN, not a fixed height, so wrapped labels grow
     // their row instead of being clipped mid-row. maxHeight is therefore only
@@ -1672,12 +1691,12 @@ function DefaultGrid({ columns, children, testId, maxRows, flow, list, ariaLabel
         "--grid-cols": `repeat(${columns}, minmax(0, 1fr))`,
         ...(clipped && {
             gridAutoRows: "minmax(var(--kumiko-grid-row-h, 2.5rem), auto)",
-            maxHeight: `calc(${maxRows} * var(--kumiko-grid-row-h, 2.5rem) + ${maxRows - 1} * 1rem)`,
+            maxHeight: `calc(${maxRows} * var(--kumiko-grid-row-h, 2.5rem) + ${maxRows - 1} * var(--kumiko-grid-gap, 1rem))`,
             overflowY: "auto",
         }),
         // workaround: duplicate @types/react instances break direct CSSProperties cast
     };
-    return (_jsx("div", { ...groupProps, "data-testid": testId, className: "grid gap-4 grid-cols-1 sm:[grid-template-columns:var(--grid-cols)]", style: style, children: children }));
+    return (_jsx("div", { ...groupProps, "data-testid": testId, className: "grid gap-[var(--kumiko-grid-gap,1rem)] grid-cols-1 sm:[grid-template-columns:var(--grid-cols)]", style: style, children: children }));
 }
 function DefaultGridCell({ span, width, children }) {
     const insideDrawerBody = useContext(DrawerBodyContext);
@@ -1824,6 +1843,13 @@ function QrSecretValue({ value }) {
 // create-app.tsx.
 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);
@@ -1832,7 +1858,7 @@ function DefaultSecretReveal({ values, copyLabel, copiedLabel, testId, }) {
                                 catch {
                                     // clipboard blocked (non-secure context) — no fallback UI needed here
                                 }
-                            }, children: copiedIndex === i ? copiedLabel : copyLabel }))] })] }, v.label))) }));
+                            }, children: copiedIndex === i ? copiedLabel : copyLabel }))] })] }, rowKeys[i]))) }));
 }
 export const defaultPrimitives = {
     Button: DefaultButton,

package/dist/sse/live-events.d.ts

@@ -1,9 +1,12 @@
-import type { LiveEventSubscriber } from "@cosmicdrift/kumiko-renderer";
+import { type LiveEventSubscriber } from "@cosmicdrift/kumiko-renderer";
 export type CreateEventSourceLiveEventsOptions = {
     /** URL des SSE-Endpoints. Default: /api/sse (das ist wo
      *  createSseRoute im Kumiko-Server mountet). Override wenn der
      *  Mountpath divergiert. */
     readonly url?: string;
+    /** Fires when the server refuses the SSE handshake because the session
+     *  ended (same 401 codes as the dispatcher path). */
+    readonly onSessionEnded?: () => void;
 };
 /** Liefert einen `LiveEventSubscriber` der EventSource-backed ist.
  *  Normalerweise einmal im App-Bootstrap gerufen und als value an

package/dist/sse/live-events.js

@@ -1,3 +1,35 @@
+import { isSessionEndedError, } from "@cosmicdrift/kumiko-renderer";
+function hasErrorCode(body) {
+    if (typeof body !== "object" || body === null || !("error" in body))
+        return false;
+    const { error } = body;
+    return (typeof error === "object" && error !== null && "code" in error && typeof error.code === "string");
+}
+// EventSource never exposes the HTTP status, so one plain fetch of the same
+// URL tells a session end apart from an outage. Aborted right after the
+// headers/body so a 200 doesn't hold a second stream open.
+async function isSessionEndedRejection(url) {
+    const controller = new AbortController();
+    try {
+        // guard-allow: same-origin fetch
+        const res = await fetch(url, {
+            credentials: "same-origin",
+            headers: { Accept: "text/event-stream" },
+            signal: controller.signal,
+        });
+        if (res.status !== 401)
+            return false;
+        const body = await res.json();
+        return hasErrorCode(body) && isSessionEndedError({ code: body.error.code, httpStatus: 401 });
+    }
+    catch {
+        // skip: probe failed (offline, unparseable body) — not evidence of a session end
+        return false;
+    }
+    finally {
+        controller.abort();
+    }
+}
 /** Liefert einen `LiveEventSubscriber` der EventSource-backed ist.
  *  Normalerweise einmal im App-Bootstrap gerufen und als value an
  *  `<LiveEventsProvider>` durchgereicht — createKumikoApp tut das. */
@@ -32,7 +64,22 @@ export function createEventSourceLiveEvents(options = {}) {
         // skip: no window/EventSource available (SSR/non-browser), nothing to connect
         if (typeof window === "undefined" || typeof EventSource === "undefined")
             return;
-        source = new EventSource(url);
+        const connection = new EventSource(url);
+        source = connection;
+        const { onSessionEnded } = options;
+        // skip: no session-end consumer, a refused handshake needs no probe
+        if (onSessionEnded === undefined)
+            return;
+        connection.addEventListener("error", () => {
+            // skip: CONNECTING means a dropped stream the browser retries itself;
+            // only a refused handshake (non-200) closes the EventSource for good.
+            if (connection.readyState !== EventSource.CLOSED)
+                return;
+            void isSessionEndedRejection(url).then((sessionEnded) => {
+                if (sessionEnded)
+                    onSessionEnded();
+            });
+        });
     };
     const ensureListenersForEntity = (entityName) => {
         // skip: not connected yet, listeners get wired once ensureConnected runs

package/dist/widgets/drawer.js

@@ -107,6 +107,10 @@ export function Drawer({ open, onOpenChange, side = "right", title, description,
     const verticalOffsetStyle = belowHeader && variant === "flush" && !narrow && (side === "left" || side === "right")
         ? { top: "var(--shell-header-height)", bottom: 0 }
         : undefined;
+    const widthStyle = canResize && !narrow ? { width: effectiveWidthPx, maxWidth: "none" } : customWidthStyle;
+    const sheetStyle = widthStyle === undefined && verticalOffsetStyle === undefined
+        ? undefined
+        : { ...widthStyle, ...verticalOffsetStyle };
     const handleDrag = usePointerDrag({
         onStart: () => {
             setMaximized(false);
@@ -134,10 +138,5 @@ export function Drawer({ open, onOpenChange, side = "right", title, description,
             // Radix already drops the overlay and the focus trap for a
             // non-modal Root; only the dismiss-on-outside-interaction is left
             // to suppress, so a click into the page behind keeps the panel open.
-            onInteractOutside: modal ? undefined : (event) => event.preventDefault(), showCloseButton: showCloseButton, className: cn(sidePanelClass(side, narrow, variant, belowHeader), fillBody && "gap-0", !narrow && panelClassName), style: {
-                ...(canResize && !narrow
-                    ? { width: effectiveWidthPx, maxWidth: "none" }
-                    : customWidthStyle),
-                ...verticalOffsetStyle,
-            }, children: [canResize && !narrow && (_jsx("button", { type: "button", onClick: () => setMaximized((m) => !m), "aria-pressed": maximized, "aria-label": maximized ? t("kumiko.widget.drawer.restore") : t("kumiko.widget.drawer.maximize"), className: "absolute top-4 right-14 z-10 rounded-xs p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 hover:bg-secondary focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden", children: maximized ? (_jsx(Minimize2Icon, { className: "size-4" })) : (_jsx(Maximize2Icon, { className: "size-4" })) })), (title !== undefined || description !== undefined) && (_jsxs(SheetHeader, { children: [title !== undefined && _jsx(SheetTitle, { children: title }), description !== undefined && _jsx(SheetDescription, { children: description })] })), _jsx("div", { className: fillBody ? "flex min-h-0 flex-1 flex-col" : "flex-1 overflow-y-auto px-4", children: children }), footer !== undefined && (_jsx(SheetFooter, { className: DRAWER_FOOTER_CLASS, children: footer })), canResize && !narrow && (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": t("kumiko.widget.drawer.resize"), "aria-valuenow": effectiveWidthPx, "aria-valuemin": minWidthPx, "aria-valuemax": effectiveMaxWidthPx(), tabIndex: 0, ...handleDrag, onKeyDown: onHandleKeyDown, className: cn("absolute inset-y-0 z-10 w-1 cursor-col-resize touch-none after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 hover:bg-border", side === "right" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2") }))] }) }));
+            onInteractOutside: modal ? undefined : (event) => event.preventDefault(), showCloseButton: showCloseButton, className: cn(sidePanelClass(side, narrow, variant, belowHeader), fillBody && "gap-0", !narrow && panelClassName), style: sheetStyle, children: [canResize && !narrow && (_jsx("button", { type: "button", onClick: () => setMaximized((m) => !m), "aria-pressed": maximized, "aria-label": maximized ? t("kumiko.widget.drawer.restore") : t("kumiko.widget.drawer.maximize"), className: "absolute top-4 right-14 z-10 rounded-xs p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 hover:bg-secondary focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden", children: maximized ? (_jsx(Minimize2Icon, { className: "size-4" })) : (_jsx(Maximize2Icon, { className: "size-4" })) })), (title !== undefined || description !== undefined) && (_jsxs(SheetHeader, { children: [title !== undefined && _jsx(SheetTitle, { children: title }), description !== undefined && _jsx(SheetDescription, { children: description })] })), _jsx("div", { className: fillBody ? "flex min-h-0 flex-1 flex-col" : "flex-1 overflow-y-auto px-4", children: children }), footer !== undefined && (_jsx(SheetFooter, { className: DRAWER_FOOTER_CLASS, children: footer })), canResize && !narrow && (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": t("kumiko.widget.drawer.resize"), "aria-valuenow": effectiveWidthPx, "aria-valuemin": minWidthPx, "aria-valuemax": effectiveMaxWidthPx(), tabIndex: 0, ...handleDrag, onKeyDown: onHandleKeyDown, className: cn("absolute inset-y-0 z-10 w-1 cursor-col-resize touch-none after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2 hover:bg-border", side === "right" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2") }))] }) }));
 }

package/dist/widgets/floating-panel.js

@@ -42,6 +42,7 @@ const EDGE_LABEL_KEYS = {
     bottom: "kumiko.widget.floatingPanel.resizeBottom",
     left: "kumiko.widget.floatingPanel.resizeLeft",
 };
+const DRAG_HANDLE_SELECTOR = "[data-drag-handle]";
 const INTERACTIVE_HEADER_TARGET = "button, a, input, select, textarea, [role=button]";
 function readLimits(options) {
     const viewportWidth = window.innerWidth;
@@ -182,8 +183,11 @@ export function FloatingPanel({ title, headerActions, children, storageKey, defa
         // React events from portalled children (menus) bubble through the header although their DOM is elsewhere.
         if (!(event.target instanceof Node) || !event.currentTarget.contains(event.target))
             return;
-        if (event.target instanceof Element && event.target.closest(INTERACTIVE_HEADER_TARGET))
+        if (event.target instanceof Element &&
+            event.target.closest(INTERACTIVE_HEADER_TARGET) &&
+            !event.target.closest(DRAG_HANDLE_SELECTOR)) {
             return;
+        }
         moveDrag.onPointerDown(event);
     };
     const onGripKeyDown = (event) => {
@@ -212,7 +216,7 @@ export function FloatingPanel({ title, headerActions, children, storageKey, defa
             top: geometry.y,
             width: geometry.width,
             height: geometry.height,
-        }, children: [_jsxs("div", { ...moveDrag, onPointerDown: onHeaderPointerDown, className: "flex shrink-0 cursor-grab touch-none select-none items-center gap-2 border-b bg-muted px-3 py-2 active:cursor-grabbing", children: [_jsx("button", { type: "button", "aria-label": t("kumiko.widget.floatingPanel.move"), onKeyDown: onGripKeyDown, className: "rounded-xs p-1 text-muted-foreground hover:bg-secondary focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden", children: _jsx(GripVerticalIcon, { className: "size-4" }) }), _jsx("div", { id: titleId, className: "min-w-0 flex-1 truncate font-medium", children: title }), headerActions] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: children }), EDGES.map((edge) => (_jsx(PanelResizeHandle, { edges: [edge], className: EDGE_HANDLE_CLASS[edge], context: handleContext, separator: { label: t(EDGE_LABEL_KEYS[edge]), geometry, limits } }, edge))), CORNER_HANDLES.map((corner) => (_jsx(PanelResizeHandle, { edges: corner.edges, className: corner.className, context: handleContext }, corner.edges.join("-"))))] }), document.body);
+        }, children: [_jsxs("div", { ...moveDrag, onPointerDown: onHeaderPointerDown, className: "flex shrink-0 cursor-grab touch-none select-none items-center gap-2 border-b bg-muted px-3 py-2 active:cursor-grabbing", children: [_jsx("button", { type: "button", "data-drag-handle": "", "aria-label": t("kumiko.widget.floatingPanel.move"), onKeyDown: onGripKeyDown, className: "rounded-xs p-1 text-muted-foreground hover:bg-secondary focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden", children: _jsx(GripVerticalIcon, { className: "size-4" }) }), _jsx("div", { id: titleId, className: "min-w-0 flex-1 truncate font-medium", children: title }), headerActions] }), _jsx("div", { className: "min-h-0 flex-1 overflow-auto p-4", children: children }), EDGES.map((edge) => (_jsx(PanelResizeHandle, { edges: [edge], className: EDGE_HANDLE_CLASS[edge], context: handleContext, separator: { label: t(EDGE_LABEL_KEYS[edge]), geometry, limits } }, edge))), CORNER_HANDLES.map((corner) => (_jsx(PanelResizeHandle, { edges: corner.edges, className: corner.className, context: handleContext }, corner.edges.join("-"))))] }), document.body);
 }
 function PanelResizeHandle({ edges, className, context, separator, }) {
     const drag = usePointerDrag({

package/package.json

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

package/src/changes.json

@@ -1,4 +1,41 @@
 [
+  {
+    "version": "0.337.0",
+    "type": "fix",
+    "title": "A number field's unit stays inside the field when the label is wider than the input",
+    "detail": "Icon, input and unit of a `kind: \"number\"` input share one box (`data-slot=\"number-field\"`), and the form grid's number cell sizes that box to 8rem instead of the bare input. Before, a label wider than the input (a long label, or the \"changed\" marker appearing while editing) widened the cell, and the unit was anchored to the cell's right edge, next to the field.",
+    "migration": "No code change needed. Custom CSS that sized number inputs through `[&_input]` inside the number cell targets `[data-slot=number-field]` now."
+  },
+  {
+    "version": "0.337.0",
+    "type": "fix",
+    "title": "A rejected SSE connection ends the web session",
+    "detail": "When the server refuses the live-events EventSource with a session 401, createKumikoApp now raises the same session-ended signal as a 401 from the dispatcher, so the user sees the session-end notice instead of silently losing live updates."
+  },
+  {
+    "version": "0.337.0",
+    "type": "fix",
+    "title": "Kebab confirmLabel, cell locale fallback, card-list sort select and bare-form headerRegion",
+    "detail": "The row-actions kebab confirm dialog uses `confirmLabel` like the inline path. A list cell with `renderer.locale` explicitly set to `undefined` falls back to the app locale. The narrow-viewport card list keeps the bare `testId` on a wrapper, and its sort select shows a sort that targets a non-sortable column instead of \"Unsorted\". A bare form renders its `headerRegion`. The dashboard time range no longer needs a type assertion."
+  },
+  {
+    "version": "0.337.0",
+    "type": "fix",
+    "title": "FloatingPanel grip pointer drag, Drawer style undefined, resize bitmap release, nav action screen+target warning",
+    "detail": "The FloatingPanel grip button drags the panel with the pointer again. Drawer passes `style` as `undefined` when no width or offset applies. Image resize releases the decoded bitmap when no 2d context is available. Nav tree actions that set both `screen` and `target` warn once that `target` is ignored."
+  },
+  {
+    "version": "0.337.0",
+    "type": "fix",
+    "title": "Secret reveal keys, nested-form input submit routing, Grid maxRows/gap, RTL card meta, browser QR import",
+    "detail": "Secret reveal rows with equal labels get distinct React keys. A nested form's submit routing also covers `input[type=submit]` and `input[type=image]`. `Grid` ignores null and boolean children when computing `maxRows`, and its gap is the themeable `--kumiko-grid-gap` variable shared with the clip height. Card meta rows clip at the inline start so RTL layouts hide the leading separator too. The QR secret value imports `qrcode/lib/browser.js` so Metro does not pull Node-only dependencies."
+  },
+  {
+    "version": "0.337.0",
+    "type": "fix",
+    "title": "screenWidth setting now widens the default entityEdit form too",
+    "detail": "`createKumikoApp({ screenWidth })` now also applies to the default entityEdit form, which previously stayed at a fixed 640px column. Without the setting the column keeps its 640px width."
+  },
   {
     "version": "0.336.0",
     "type": "improvement",

package/src/styles.css

@@ -278,6 +278,7 @@
 
 :root {
   --kumiko-grid-row-h: 2.5rem;
+  --kumiko-grid-gap: 1rem;
   /* 0 = no ShellHeader mounted (e.g. a Drawer used outside a shell) — a
      consumer offsetting by this variable then gets today's edge-to-edge
      behavior for free. */