@cosmicdrift/kumiko-renderer-web 0.334.0 → 0.336.0

package/dist/app/app-schema-boot.d.ts

@@ -5,6 +5,8 @@ export declare function isAppSchemaPayload(value: unknown): value is AppSchema;
 export type AppSchemaFetchResult = {
     readonly kind: "loaded";
     readonly app: AppSchema;
+} | {
+    readonly kind: "session-ended";
 } | {
     readonly kind: "unauthorized";
 } | {

package/dist/app/app-schema-boot.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { toAppSchema, usePrimitives, useTranslation } from "@cosmicdrift/kumiko-renderer";
+import { toAppSchema, usePrimitives, useSessionEndedSignal, useTranslation, } from "@cosmicdrift/kumiko-renderer";
 import { useEffect, useRef, useState } from "react";
 // Mirrors framework's api-constants Routes.schema, same pattern as
 // dispatcher-live's PATH_* constants — the one place that spells out the
@@ -40,7 +40,9 @@ export async function fetchAppSchema(signal) {
             throw err;
         return { kind: "failed" };
     }
-    if (res.status === 401 || res.status === 403)
+    if (res.status === 401)
+        return { kind: "session-ended" };
+    if (res.status === 403)
         return { kind: "unauthorized" };
     if (!res.ok)
         return { kind: "failed" };
@@ -63,6 +65,7 @@ export function AppSchemaFetchBoot({ onLoaded, }) {
     const t = useTranslation();
     const { Banner, Button } = usePrimitives();
     const [status, setStatus] = useState("loading");
+    const sessionEndedSignal = useSessionEndedSignal();
     const [attempt, setAttempt] = useState(0);
     // Ref instead of an effect dependency: onLoaded is a fresh closure on
     // every KumikoAppRoot render (it captures setApp) — depending on it
@@ -89,13 +92,19 @@ export function AppSchemaFetchBoot({ onLoaded, }) {
         });
         return () => controller.abort();
     }, [attempt]);
+    useEffect(() => {
+        if (status === "session-ended")
+            sessionEndedSignal?.notify();
+    }, [status, sessionEndedSignal]);
     if (status === "loading") {
         return (_jsx("div", { role: "status", "aria-busy": "true", children: t("kumiko.app-boot.loading") }));
     }
-    if (status === "unauthorized") {
+    if (status === "unauthorized" || status === "session-ended") {
         // No auto-retry/reload here on purpose — a signed-out user retrying
         // the same request just gets the same 401 again; the login gate that
-        // wraps this component is the actual way out.
+        // wraps this component is the actual way out. For session-ended the
+        // notify above normally swaps this banner for the login screen; the
+        // banner stays as fallback when no session provider is mounted.
         return (_jsx(Banner, { variant: "error", padded: true, children: t("kumiko.app-boot.unauthorized") }));
     }
     return (_jsx(Banner, { variant: "error", padded: true, actions: _jsx(Button, { variant: "secondary", onClick: () => setAttempt((n) => n + 1), children: t("kumiko.actions.reload") }), children: t("kumiko.app-boot.failed") }));

package/dist/app/create-app.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createLiveDispatcher } from "@cosmicdrift/kumiko-dispatcher-live";
 import { isOpenToAllGranted } from "@cosmicdrift/kumiko-framework/ui-types";
-import { AppFeaturesProvider, ColumnRenderersProvider, ContentEditorsProvider, CustomScreensProvider, DashboardBodyProvider, DispatcherProvider, DraftStorageProvider, ExtensionSectionsProvider, hasDetailScreen, KumikoScreen, kumikoDefaultTranslations, LiveEventsProvider, LocaleProvider, mergeTranslations, NavProvider, navigateWithReturnTo, PrimitivesProvider, qualifyScreenId, TokensProvider, toAppSchema, translationsByLocaleFromKeys, useNav, usePrimitives, useTranslation, } from "@cosmicdrift/kumiko-renderer";
+import { AppFeaturesProvider, ColumnRenderersProvider, ContentEditorsProvider, CustomScreensProvider, createSessionEndedSignal, DashboardBodyProvider, DispatcherProvider, DraftStorageProvider, ExtensionSectionsProvider, hasDetailScreen, KumikoScreen, kumikoDefaultTranslations, LiveEventsProvider, LocaleProvider, mergeTranslations, NavProvider, navigateWithReturnTo, PrimitivesProvider, qualifyScreenId, SessionEndedSignalProvider, TokensProvider, toAppSchema, translationsByLocaleFromKeys, useNav, usePrimitives, useTranslation, withSessionEndedDetection, } from "@cosmicdrift/kumiko-renderer";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { createRoot } from "react-dom/client";
 import { lastSegment } from "../layout/nav-tree.js";
@@ -139,7 +139,7 @@ export function resolveRootScreenQn(features, explicitScreenQn, schemaIsRoleProj
     }
     if (!schemaIsRoleProjected)
         return explicitScreenQn;
-    if (findOwnerFeatureInFeatures(features, explicitScreenQn) !== undefined)
+    if (findOwnerFeature(features, explicitScreenQn) !== undefined)
         return explicitScreenQn;
     return firstLandingScreenQnForProjectedSchema(features);
 }
@@ -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, {}), 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 ?? "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)) })] }) }) }) }) }) }) }) }) }) }) }) }) }) })] }) }));
 }
 // Sits INSIDE the clientFeature gates (e.g. an auth gate) — a gate that
 // renders a login placeholder instead of children keeps this component
@@ -284,7 +284,8 @@ export function createKumikoApp(options = {}) {
             throw new Error("createKumikoApp: schema contains no screens accessible without a role restriction. Add at least one entry to `schema.screens` without `access.roles`, or pass `screenQn` explicitly.");
         }
     }
-    const dispatcher = options.dispatcher ?? createLiveDispatcher();
+    const sessionEndedSignal = createSessionEndedSignal();
+    const dispatcher = withSessionEndedDetection(options.dispatcher ?? createLiveDispatcher(), sessionEndedSignal);
     const draftStorage = options.draftStorage ?? createBrowserDraftStorage();
     const primitives = { ...defaultPrimitives, ...(options.primitives ?? {}) };
     const liveEvents = createEventSourceLiveEvents();
@@ -331,7 +332,7 @@ export function createKumikoApp(options = {}) {
     const localeResolver = options.locale ?? createBrowserLocaleResolver();
     const navAdapter = options.navAdapter ?? useBrowserNavApi;
     const root = createRoot(container);
-    root.render(_jsx(KumikoAppRoot, { initialApp: initialApp, screenQn: options.screenQn, clientFeatures: clientFeatures, providers: providers, gates: gates, customScreens: customScreens, columnRenderers: columnRenderers, extensionSectionComponents: extensionSectionComponents, contentEditors: contentEditors, resolvers: resolvers, dispatcher: dispatcher, draftStorage: draftStorage, primitives: primitives, liveEvents: liveEvents, localeResolver: localeResolver, navAdapter: navAdapter, screenWidth: options.screenWidth, ...(options.translate !== undefined && { translate: options.translate }), ...(options.onRowClick !== undefined && { onRowClick: options.onRowClick }), ...(options.shell !== undefined && { shell: options.shell }) }));
+    root.render(_jsx(KumikoAppRoot, { initialApp: initialApp, screenQn: options.screenQn, clientFeatures: clientFeatures, providers: providers, gates: gates, customScreens: customScreens, columnRenderers: columnRenderers, extensionSectionComponents: extensionSectionComponents, contentEditors: contentEditors, resolvers: resolvers, dispatcher: dispatcher, sessionEndedSignal: sessionEndedSignal, draftStorage: draftStorage, primitives: primitives, liveEvents: liveEvents, localeResolver: localeResolver, navAdapter: navAdapter, screenWidth: options.screenWidth, ...(options.translate !== undefined && { translate: options.translate }), ...(options.onRowClick !== undefined && { onRowClick: options.onRowClick }), ...(options.shell !== undefined && { shell: options.shell }) }));
     return { root };
 }
 // TokensBoot uses the browser-backed TokensApi hook (class-based
@@ -348,9 +349,10 @@ function BrowserNavBoot({ app, fallbackQn, useNavApi, hasWorkspaces, translate,
     const screen = (_jsx(RoutedScreen, { app: app, fallbackQn: fallbackQn, ...(translate !== undefined && { translate }), ...(onRowClick !== undefined && { onRowClick }) }));
     return (_jsx(NavProvider, { value: navApi, children: Shell !== undefined ? _jsx(Shell, { schema: app, children: screen }) : screen }));
 }
-// Finds the feature that owns a fully qualified ScreenQn among a feature list.
-// Returns undefined if the screen isn't declared in any of them.
-function findOwnerFeatureInFeatures(features, qn) {
+// Finds the feature that owns a fully qualified ScreenQn.
+// Returns undefined if the screen isn't declared in any feature schema —
+// KumikoScreen then renders the "Screen not found" banner.
+function findOwnerFeature(features, qn) {
     for (const feature of features) {
         for (const s of feature.screens) {
             if (qualifyScreenId(feature.featureName, s.id) === qn)
@@ -359,11 +361,16 @@ function findOwnerFeatureInFeatures(features, qn) {
     }
     return undefined;
 }
-// Finds the feature that owns a fully qualified ScreenQn.
-// Returns undefined if the screen isn't declared in any feature schema —
-// KumikoScreen then renders the "Screen not found" banner.
-function findOwnerFeature(app, qn) {
-    return findOwnerFeatureInFeatures(app.features, qn);
+// Single source for "which entityEdit screen does a row click land on", shared
+// by the click handler and hasRowClickTarget so a row never looks clickable
+// without a target (or the reverse).
+function findEditScreenForEntity(features, entityName) {
+    for (const feature of features) {
+        const editScreen = feature.screens.find((s) => s.type === "entityEdit" && s.entity === entityName);
+        if (editScreen)
+            return editScreen;
+    }
+    return undefined;
 }
 // fw#2640: a list screen with no reachable click target (no `detailFor`
 // screen for its entity, no app-wide onRowClick, no entityEdit screen)
@@ -382,7 +389,7 @@ function hasRowClickTarget(app, screen, onRowClick) {
         return false;
     if (hasDetailScreen(app.features, screen.entity))
         return true;
-    return app.features.some((f) => f.screens.some((s) => s.type === "entityEdit" && s.entity === screen.entity));
+    return findEditScreenForEntity(app.features, screen.entity) !== undefined;
 }
 function RoutedScreen({ app, fallbackQn, translate, onRowClick, }) {
     const nav = useNav();
@@ -393,7 +400,7 @@ function RoutedScreen({ app, fallbackQn, translate, onRowClick, }) {
     // fallback feature (the one from fallbackQn).
     const { feature, qn, entityId, activeScreen } = useMemo(() => {
         if (nav.route === undefined) {
-            const ownerFeature = findOwnerFeature(app, fallbackQn);
+            const ownerFeature = findOwnerFeature(app.features, fallbackQn);
             return {
                 feature: ownerFeature,
                 qn: fallbackQn,
@@ -410,7 +417,7 @@ function RoutedScreen({ app, fallbackQn, translate, onRowClick, }) {
                 break;
             }
         }
-        const ownerFeature = matchedFeature ?? findOwnerFeature(app, fallbackQn);
+        const ownerFeature = matchedFeature ?? findOwnerFeature(app.features, fallbackQn);
         const qualifiedQn = ownerFeature ? qualifyScreenId(ownerFeature.featureName, shortId) : shortId;
         return {
             feature: ownerFeature,
@@ -445,14 +452,11 @@ function RoutedScreen({ app, fallbackQn, translate, onRowClick, }) {
             // single-feature setup that's the same feature as the active one, in
             // multi-feature the edit could theoretically live in a different
             // feature (one that shares the entity).
-            for (const f of app.features) {
-                const editScreen = f.screens.find((s) => s.type === "entityEdit" && s.entity === entityName);
-                if (editScreen) {
-                    // editScreen.id is already short form; lastSegment is a no-op
-                    // safety net here, kept for symmetry with the other call sites.
-                    navigateWithReturnTo(nav, { screenId: lastSegment(editScreen.id), entityId: row.id }, host);
-                    return;
-                }
+            const editScreen = findEditScreenForEntity(app.features, entityName);
+            if (editScreen) {
+                // editScreen.id is already short form; lastSegment is a no-op
+                // safety net here, kept for symmetry with the other call sites.
+                navigateWithReturnTo(nav, { screenId: lastSegment(editScreen.id), entityId: row.id }, host);
             }
         };
     }, [app, activeScreen, onRowClick, nav, qn, entityId]);

package/dist/app/dashboard-body.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { normalizeListColumn } from "@cosmicdrift/kumiko-framework/ui-types";
 import { dispatcherErrorText, EmbeddedScreenProvider, extensionSectionName, KumikoScreen, useEmbeddedScreen, useExtensionSectionComponent, useLocale, useNav, usePageHeaderSlotAvailable, usePrimitives, useQuery, useTranslation, } from "@cosmicdrift/kumiko-renderer";
-import { useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { EmbeddedFormProvider } from "../primitives/index.js";
 import { PageSection } from "../primitives/layout.js";
 import { Skeleton } from "../ui/skeleton.js";
@@ -221,7 +221,7 @@ function ChartPanelBody({ panel, label, screenParams, translate, }) {
         } }));
 }
 function ListPanelBody({ panel, label, screenParams, translate, }) {
-    const { formatPercent, formatNumber } = useDashboardFormats();
+    const { formatPercent, formatNumber, formatDateTime } = useDashboardFormats();
     const columns = panel.columns.map((c) => {
         const normalized = normalizeListColumn(c);
         return {
@@ -233,7 +233,7 @@ function ListPanelBody({ panel, label, screenParams, translate, }) {
             }),
         };
     });
-    return (_jsx(QueryPanel, { panel: panel, label: label, screenParams: screenParams, translate: translate, skeleton: "rows", isEmpty: (data) => (data.rows ?? []).length === 0, children: (data) => (_jsx(DashboardListTable, { columns: columns, rows: data.rows ?? [], formatPercent: formatPercent, formatNumber: formatNumber, translate: translate })) }));
+    return (_jsx(QueryPanel, { panel: panel, label: label, screenParams: screenParams, translate: translate, skeleton: "rows", isEmpty: (data) => (data.rows ?? []).length === 0, children: (data) => (_jsx(DashboardListTable, { columns: columns, rows: data.rows ?? [], formatPercent: formatPercent, formatNumber: formatNumber, formatDateTime: formatDateTime, translate: translate })) }));
 }
 function FeedPanelBody({ panel, label, screenParams, translate, }) {
     return (_jsx(QueryPanel, { panel: panel, label: label, screenParams: screenParams, translate: translate, skeleton: "rows", isEmpty: (data) => (data.rows ?? []).length === 0, children: (data) => {
@@ -302,6 +302,7 @@ function useFilterParams(screen) {
 function useTimeRange(screen, translate) {
     const t = useTranslation();
     const nav = useNav();
+    const resolver = useLocale();
     const timeRange = screen.timeRange;
     if (timeRange === undefined)
         return { params: {}, control: null };
@@ -310,7 +311,9 @@ function useTimeRange(screen, translate) {
         ? fromUrl
         : timeRange.default;
     return {
-        params: { [timeRange.id]: value },
+        // 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.
+        params: { [timeRange.id]: value, timeZone: resolver.timeZone() },
         control: (_jsx(ModeSwitch, { value: value, options: timeRange.options.map((o) => ({ value: o.value, label: translate(o.label) })), onChange: (next) => nav.setSearchParams({ [timeRange.id]: next }), ariaLabel: t("kumiko.dashboard.time-range"), testId: `dashboard-time-range-${timeRange.id}` })),
     };
 }
@@ -345,14 +348,45 @@ function PanelBody({ panel, label, screenId, screenParams, translate, }) {
     }
     return (_jsx(ProgressListPanelBody, { panel: panel, label: text, screenParams: screenParams, translate: translate }));
 }
+const VisibilityQueryContext = createContext(new Map());
+// One live query per distinct `visibleWhen.query`, shared by every panel that
+// gates on it — N panels on the same status query would otherwise each open
+// their own request, SSE subscription and refetch per event.
+function VisibilityQueryScope({ query, children, }) {
+    const parent = useContext(VisibilityQueryContext);
+    const result = useQuery(query, {}, { live: true });
+    const value = useMemo(() => new Map(parent).set(query, result), [parent, query, result]);
+    return (_jsx(VisibilityQueryContext.Provider, { value: value, children: children }));
+}
+function VisibilityQueryScopes({ queries, children, }) {
+    const [first, ...rest] = queries;
+    if (first === undefined)
+        return children;
+    return (_jsx(VisibilityQueryScope, { query: first, children: _jsx(VisibilityQueryScopes, { queries: rest, children: children }) }));
+}
+function distinctVisibilityQueries(panels) {
+    const queries = new Set();
+    for (const panel of panels) {
+        if (panel.kind === "screen" && panel.visibleWhen !== undefined) {
+            queries.add(panel.visibleWhen.query);
+        }
+    }
+    return [...queries];
+}
 function ScreenPanelTile({ panel, featureName, translate, }) {
     const visibleWhen = panel.visibleWhen;
-    const visibility = useQuery(visibleWhen?.query ?? "", {}, { enabled: visibleWhen !== undefined, live: true });
+    const visibility = useContext(VisibilityQueryContext).get(visibleWhen?.query ?? "");
     const target = useEmbeddedScreen(featureName, panel.screen);
     if (target === undefined)
         return null;
-    if (visibleWhen !== undefined && visibility.data?.[visibleWhen.field] !== visibleWhen.eq) {
-        return null;
+    if (visibleWhen !== undefined) {
+        // A failed gate query must not silently drop the panel: on the
+        // account-security page that would hide every MFA enable/disable path.
+        if (visibility?.error) {
+            return (_jsx("div", { className: WIDE_PANEL, "data-testid": `dashboard-panel-${panel.id}`, children: _jsx(PanelError, { label: panel.label !== undefined ? translate(panel.label) : panel.id, error: visibility.error, onRetry: () => void visibility.refetch() }) }));
+        }
+        if (visibility?.data?.[visibleWhen.field] !== visibleWhen.eq)
+            return null;
     }
     const screenBody = _jsx(KumikoScreen, { schema: target.schema, qn: target.qn, translate: translate });
     const embedded = panel.chromeless === true ? (_jsx(EmbeddedFormProvider, { children: _jsx(EmbeddedScreenProvider, { children: screenBody }) })) : (screenBody);
@@ -377,6 +411,7 @@ export function WebDashboardBody({ featureName, screen, translate, }) {
     const { params: rangeParams, control: rangeControl } = useTimeRange(screen, effectiveTranslate);
     const screenParams = { filterParams, rangeParams };
     const loadedAtMs = useLoadedAt(screenParams);
+    const visibilityQueries = distinctVisibilityQueries(screen.panels);
     const scope = screen.scope;
     // A raw description is agent-facing prose; only an i18n key is user-facing copy.
     const translatedDescription = screen.description !== undefined ? effectiveTranslate(screen.description) : undefined;
@@ -384,13 +419,13 @@ export function WebDashboardBody({ featureName, screen, translate, }) {
     const scopeBadge = scope !== undefined ? (_jsx(StatusBadge, { tone: "accent", testId: `dashboard-${screen.id}-scope`, children: effectiveTranslate(scope.badge) })) : null;
     // The shell header owns the title; the badge sits right after it there.
     const badgeInHeader = scopeBadge !== null && headerSlotAvailable && PageHeader !== undefined;
-    return (_jsxs(PageSection, { className: "flex flex-col gap-4", testId: `dashboard-${screen.id}`, children: [badgeInHeader && _jsx(PageHeader, { status: scopeBadge }), _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [!badgeInHeader && scopeBadge, picker] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [screen.showUpdatedAt !== false && (_jsx("span", { "data-testid": `dashboard-${screen.id}-updated-at`, className: "text-xs tabular-nums text-muted-foreground", children: t("kumiko.dashboard.updated-at", { time: formatDateTime(loadedAtMs) }) })), rangeControl] })] }), description !== undefined && (_jsx(Text, { variant: "muted", testId: `dashboard-${screen.id}-description`, children: description })), scope?.notice !== undefined && (_jsx(Banner, { variant: "info", testId: `dashboard-${screen.id}-scope-notice`, children: effectiveTranslate(scope.notice) })), _jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: screen.panels.map((panel) => {
-                    if (panel.kind === "screen") {
-                        return (_jsx(ScreenPanelTile, { panel: panel, featureName: featureName, translate: effectiveTranslate }, panel.id));
-                    }
-                    const label = panel.kind === "custom" || panel.label === undefined
-                        ? undefined
-                        : effectiveTranslate(panel.label);
-                    return (_jsx("div", { className: panelSpanClassName(panel), children: _jsx(PanelBody, { panel: panel, label: label, screenId: screen.id, screenParams: screenParams, translate: effectiveTranslate }) }, panel.id));
-                }) })] }));
+    return (_jsxs(PageSection, { className: "flex flex-col gap-4", testId: `dashboard-${screen.id}`, children: [badgeInHeader && _jsx(PageHeader, { status: scopeBadge }), _jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [!badgeInHeader && scopeBadge, picker] }), _jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [screen.showUpdatedAt !== false && (_jsx("span", { "data-testid": `dashboard-${screen.id}-updated-at`, className: "text-xs tabular-nums text-muted-foreground", children: t("kumiko.dashboard.updated-at", { time: formatDateTime(loadedAtMs) }) })), rangeControl] })] }), description !== undefined && (_jsx(Text, { variant: "muted", testId: `dashboard-${screen.id}-description`, children: description })), scope?.notice !== undefined && (_jsx(Banner, { variant: "info", testId: `dashboard-${screen.id}-scope-notice`, children: effectiveTranslate(scope.notice) })), _jsx(VisibilityQueryScopes, { queries: visibilityQueries, children: _jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: screen.panels.map((panel) => {
+                        if (panel.kind === "screen") {
+                            return (_jsx(ScreenPanelTile, { panel: panel, featureName: featureName, translate: effectiveTranslate }, panel.id));
+                        }
+                        const label = panel.kind === "custom" || panel.label === undefined
+                            ? undefined
+                            : effectiveTranslate(panel.label);
+                        return (_jsx("div", { className: panelSpanClassName(panel), children: _jsx(PanelBody, { panel: panel, label: label, screenId: screen.id, screenParams: screenParams, translate: effectiveTranslate }) }, panel.id));
+                    }) }) })] }));
 }

package/dist/layout/nav-tree.js

@@ -298,7 +298,7 @@ function ActionGlyph({ icon }) {
 }
 // Boot validates screen XOR target for NavDefinition actions, but a
 // provider-emitted TreeNode reaches here without going through boot — warn
-// once per label instead of rendering a dead button (fw#2751 review).
+// 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.

package/dist/layout/shell-header.js

@@ -55,8 +55,7 @@ export function ShellHeader({ schema, user, headerActions, }) {
                                                     e.preventDefault();
                                                     nav.navigate({ screenId });
                                                 }, children: crumb.label })) : isLast ? (_jsx("h1", { "aria-current": "page", className: "truncate text-lg font-semibold text-foreground", children: titleOverride ?? crumb.label })) : (_jsx(BreadcrumbPage, { className: "whitespace-nowrap text-foreground-secondary", children: crumb.label })) })] }, screenId ?? crumb.label));
-                            }) }) })), _jsx("div", { ref: setStatusElement, "data-kumiko-layout": "page-header-status", className: cn("flex items-center gap-2 empty:hidden", compact ? "min-w-0 overflow-hidden" : "shrink-0") })] }), _jsxs("div", { className: cn("ml-auto flex items-center gap-2", compact ? "shrink-0" : "min-w-0 max-w-[50%] shrink-0 sm:max-w-none"), children: [_jsx("div", { ref: setActionsElement, "data-kumiko-layout": "page-header-actions", className: cn("flex items-center gap-2 empty:hidden", !compact &&
-                            "min-w-0 [&_*]:min-w-0 [&_*]:max-w-full [&_button]:overflow-hidden [&_button]:whitespace-nowrap") }), !compact && headerActions !== undefined && (_jsx("div", { "data-kumiko-layout": "header-actions", className: "flex items-center gap-2", children: headerActions })), hasOverflow && _jsx(HeaderOverflow, { items: overflowItems, headerActions: headerActions })] })] }));
+                            }) }) })), _jsx("div", { ref: setStatusElement, "data-kumiko-layout": "page-header-status", className: cn("flex items-center gap-2 empty:hidden", compact ? "min-w-0 overflow-hidden" : "shrink-0") })] }), _jsxs("div", { className: cn("ml-auto flex items-center gap-2", compact ? "min-w-0 max-w-[60%]" : "min-w-0 max-w-[50%] shrink-0 sm:max-w-none"), children: [_jsx("div", { ref: setActionsElement, "data-kumiko-layout": "page-header-actions", className: cn("flex min-w-0 items-center gap-2 empty:hidden [&_*]:min-w-0 [&_*]:max-w-full [&_button]:overflow-hidden [&_button]:whitespace-nowrap", compact && "overflow-hidden") }), !compact && headerActions !== undefined && (_jsx("div", { "data-kumiko-layout": "header-actions", className: "flex items-center gap-2", children: headerActions })), hasOverflow && _jsx(HeaderOverflow, { items: overflowItems, headerActions: headerActions })] })] }));
 }
 // A hand-rolled menu instead of Radix DropdownMenu: app headerActions are opaque
 // nodes with their own popovers, and the panel stays mounted while closed so their
@@ -94,8 +93,15 @@ function HeaderOverflow({ items, headerActions, }) {
         };
     }, [open]);
     const onPanelKeyDown = (event) => {
+        // Opaque app headerActions (inputs, plain buttons) keep native Tab/arrow behaviour.
+        if (!(event.target instanceof HTMLElement) ||
+            event.target.getAttribute("role") !== "menuitem") {
+            return;
+        }
         if (event.key === "Tab") {
+            event.preventDefault();
             setOpen(false);
+            triggerRef.current?.focus();
             return;
         }
         if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key))
@@ -103,7 +109,7 @@ function HeaderOverflow({ items, headerActions, }) {
         const menuItems = Array.from(panelRef.current?.querySelectorAll(MENU_ITEM_SELECTOR) ?? []);
         if (menuItems.length === 0)
             return;
-        const current = menuItems.findIndex((item) => item === document.activeElement);
+        const current = menuItems.indexOf(document.activeElement);
         const last = menuItems.length - 1;
         const next = event.key === "Home"
             ? 0

package/dist/layout/theme-label.d.ts

@@ -0,0 +1,9 @@
+export type ThemeToggleLabelOptions = {
+    readonly titleInDark?: string | undefined;
+    readonly titleInLight?: string | undefined;
+};
+export declare function useThemeToggleLabel({ titleInDark, titleInLight }: ThemeToggleLabelOptions): {
+    readonly isDark: boolean;
+    readonly title: string;
+    readonly toggleMode: () => void;
+};

package/dist/layout/theme-label.js

@@ -0,0 +1,11 @@
+import { useOptionalTranslation, useTokenController } from "@cosmicdrift/kumiko-renderer";
+export function useThemeToggleLabel({ titleInDark, titleInLight }) {
+    const { mode, toggleMode } = useTokenController();
+    // Optional: the toggle also renders outside a LocaleProvider (samples, tests).
+    const translate = useOptionalTranslation();
+    const isDark = mode === "dark";
+    const title = isDark
+        ? (titleInDark ?? translate?.("kumiko.theme.light") ?? "Light theme")
+        : (titleInLight ?? translate?.("kumiko.theme.dark") ?? "Dark theme");
+    return { isDark, title, toggleMode };
+}

package/dist/layout/theme-menu-item.js

@@ -1,14 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useOptionalTranslation, useTokenController } from "@cosmicdrift/kumiko-renderer";
 import { DropdownMenuItem } from "../primitives/dropdown-menu.js";
+import { useThemeToggleLabel } from "./theme-label.js";
 /** Theme toggle as a dropdown entry, for a user menu that carries the shell controls. */
 export function ThemeMenuItem({ lightIcon = "☀", darkIcon = "☾", titleInDark, titleInLight, testId, }) {
-    const { mode, toggleMode } = useTokenController();
-    const isDark = mode === "dark";
-    const translate = useOptionalTranslation();
-    const title = isDark
-        ? (titleInDark ?? translate?.("kumiko.theme.light") ?? "Light theme")
-        : (titleInLight ?? translate?.("kumiko.theme.dark") ?? "Dark theme");
+    const { isDark, title, toggleMode } = useThemeToggleLabel({ titleInDark, titleInLight });
     return (_jsxs(DropdownMenuItem, { "data-testid": testId, onSelect: (event) => {
             event.preventDefault();
             toggleMode();

package/dist/layout/theme-toggle.js

@@ -4,18 +4,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Dependency zieht. Default: Unicode-Glyphs (☀ / ☾) — funktionieren in
 // jedem Browser, jede App kann lucide/heroicons/eigene SVG via Props
 // reinreichen.
-import { useOptionalTranslation, useTokenController } from "@cosmicdrift/kumiko-renderer";
 import { useContext } from "react";
 import { HeaderOverflowMenuContext, headerOverflowMenuItemClass } from "./header-overflow-menu.js";
+import { useThemeToggleLabel } from "./theme-label.js";
 export function ThemeToggle({ lightIcon = "☀", darkIcon = "☾", titleInDark, titleInLight, testId, }) {
-    const { mode, toggleMode } = useTokenController();
     const inOverflowMenu = useContext(HeaderOverflowMenuContext);
-    // Optional: the toggle also renders outside a LocaleProvider (samples, tests).
-    const translate = useOptionalTranslation();
-    const isDark = mode === "dark";
-    const title = isDark
-        ? (titleInDark ?? translate?.("kumiko.theme.light") ?? "Light theme")
-        : (titleInLight ?? translate?.("kumiko.theme.dark") ?? "Dark theme");
+    const { isDark, title, toggleMode } = useThemeToggleLabel({ titleInDark, titleInLight });
     const icon = isDark ? lightIcon : darkIcon;
     if (inOverflowMenu) {
         return (_jsxs("button", { type: "button", role: "menuitem", onClick: toggleMode, className: headerOverflowMenuItemClass, "data-testid": testId, children: [_jsx("span", { "aria-hidden": "true", children: icon }), _jsx("span", { children: title })] }));

package/dist/primitives/combobox.js

@@ -105,7 +105,7 @@ export function ComboboxInput(props) {
                                             const isSelected = multiple
                                                 ? selectedValues.has(opt.value)
                                                 : opt.value === singleValue;
-                                            return (_jsxs(Command.Item, { value: opt.label, keywords: opt.description !== undefined ? [opt.description] : undefined, onSelect: () => {
+                                            return (_jsxs(Command.Item, { "data-testid": `combobox-${id}-option-${opt.value}`, value: opt.label, keywords: opt.description !== undefined ? [opt.description] : undefined, onSelect: () => {
                                                     if (props.multiple === true) {
                                                         toggleMulti(opt.value);
                                                     }

package/dist/primitives/embedded-list-input.js

@@ -276,7 +276,7 @@ export function EmbeddedListInput({ id, columns, rows, totals, currency, disable
         return (_jsxs("div", { ref: containerRef, "data-testid": testId !== undefined ? `${testId}-empty` : "embedded-list-empty", className: "flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-10 text-center text-sm text-muted-foreground", children: [_jsx("span", { children: emptyLabel }), showControls && (_jsxs(UiButton, { type: "button", variant: "outline", size: "sm", onClick: onAddRow, "data-testid": testId !== undefined ? `${testId}-empty-add` : "embedded-list-empty-add", children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), emptyCtaLabel] }))] }));
     }
     const hasTotals = totals !== undefined && totals.length > 0;
-    return (_jsxs("div", { ref: containerRef, "data-testid": testId, className: "min-w-0", children: [!isMobile && (_jsxs("div", { "data-testid": testIdFor("desktop"), className: "hidden min-w-0 md:block", children: [_jsxs("div", { className: "min-w-0 overflow-hidden rounded-lg border bg-card", children: [_jsxs("div", { className: "relative min-w-0", children: [_jsx("div", { ref: setScrollContainerEl, "data-testid": testIdFor("desktop-scroll"), className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: _jsxs(Table, { className: "w-full table-fixed", style: { minWidth: `${tableMinWidthRem(columns, showControls)}rem` }, children: [_jsxs("colgroup", { children: [columns.map((column) => (_jsx("col", { style: columnWidthStyle(column.type) }, column.field))), showControls && _jsx("col", { style: { width: `${ACTIONS_COLUMN_REM}rem` } })] }), _jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [columns.map((column) => (_jsx(TableHead, { className: columnAlignClass(column.type), children: column.label }, column.field))), showControls && (_jsx(TableHead, { className: cn("sticky right-0 z-10 whitespace-nowrap bg-muted px-1 text-right", isHorizontallyScrollable &&
+    return (_jsxs("div", { ref: containerRef, "data-testid": testId, className: "min-w-0", children: [!isMobile && (_jsxs("div", { "data-testid": testIdFor("desktop"), className: "hidden min-w-0 md:block", children: [_jsxs("div", { className: "min-w-0 overflow-hidden rounded-lg border bg-card", children: [_jsxs("div", { className: "relative min-w-0", children: [_jsx("div", { ref: setScrollContainerEl, "data-testid": testIdFor("desktop-scroll"), className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: _jsxs(Table, { className: "w-full table-fixed", style: { minWidth: `${tableMinWidthRem(columns, showControls)}rem` }, children: [_jsxs("colgroup", { children: [columns.map((column) => (_jsx("col", { style: columnWidthStyle(column.type) }, column.field))), showControls && _jsx("col", { style: { width: `${ACTIONS_COLUMN_REM}rem` } })] }), _jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [columns.map((column) => (_jsx(TableHead, { title: column.label, className: cn("truncate", columnAlignClass(column.type)), children: column.label }, column.field))), showControls && (_jsx(TableHead, { className: cn("sticky right-0 z-10 whitespace-nowrap bg-muted px-1 text-right", isHorizontallyScrollable &&
                                                                     "shadow-[inset_1px_0_0_var(--color-border)]"), "aria-label": "Actions" }))] }) }), _jsx(TableBody, { children: rows.map((row, rowIndex) => {
                                                         const isLastRow = rowIndex === rows.length - 1;
                                                         const rowIssuesForRow = rowIssues?.[rowIndex];