@cosmicdrift/kumiko-renderer 0.392.2 → 0.394.0

package/dist/app/entity-list-screen.js

@@ -31,6 +31,7 @@ import { buildClientActionRowAction, buildDefaultEditRowAction, buildDrawerRowAc
 import { findEditScreenFor } from "./screen-access.js";
 import { buildListQueryPayload, entityQueryCommand, isEntityEditScreenOfEntity, useNavigateToCreateFor, } from "./screen-shared.js";
 import { useEntityRangeFacets } from "./use-entity-range-facets.js";
+import { useGatedToolbarActions } from "./use-gated-toolbar-actions.js";
 import { listPager, useScreenListRows } from "./use-screen-list-rows.js";
 import { useScreenListTable } from "./use-screen-list-table.js";
 export function EntityListScreen({ schema, screen, translate, onRowClick, }) {
@@ -299,7 +300,7 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
     });
     // ToolbarActions: Schema → Resolved-Form (analog rowActions), shared with
     // projectionList and relatedList sections via buildProjectionToolbarActions.
-    const toolbarActions = useMemo(() => buildProjectionToolbarActions({
+    const resolvedToolbarActions = useMemo(() => buildProjectionToolbarActions({
         toolbarActions: screen.toolbarActions,
         translate: effectiveTranslate,
         dispatcher,
@@ -319,6 +320,7 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
         appFeatures,
         userRoles,
     ]);
+    const { actions: toolbarActions, gateQueries: toolbarGateQueries } = useGatedToolbarActions(screen.toolbarActions, resolvedToolbarActions);
     const emptyContent = useListEmptyContent(screen.emptyState, effectiveTranslate, {
         nav,
         host,
@@ -407,7 +409,7 @@ function EntityListBody({ schema, screen, entity, translate, onRowClick, }) {
                     expandedRowIds,
                     onToggleRowExpanded: toggleRowExpanded,
                     renderExpandedRow,
-                }) }), _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
+                }) }), toolbarGateQueries, _jsx(DrawerHost, { schema: schema, drawerAction: drawerAction, drawerScreen: drawerScreen, ...(drawerInitialValues !== undefined && { drawerInitialValues }), userRoles: userRoles, ...(translate !== undefined && { translate }), onClose: closeDrawer, onSuccess: () => {
                     closeDrawer();
                     invalidateExpansions();
                     void refreshRowsAfterWrite();

package/dist/app/kumiko-screen.js

@@ -1,8 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from "react";
+import { useMemo } from "react";
 import { useUserRoles } from "../context/user-roles-context.js";
-import { useQuery } from "../hooks/use-query.js";
-import { useTranslation } from "../i18n.js";
 import { PageHeaderSlotAvailableProvider } from "../page-header-slot.js";
 import { usePrimitives } from "../primitives.js";
 import { ActionFormBody } from "./action-form-body.js";
@@ -16,14 +14,13 @@ import { ProjectionDetailBody } from "./projection-detail-body.js";
 import { ProjectionListBody } from "./projection-list-body.js";
 import { lastSegment } from "./qn.js";
 import { qualifyScreenId } from "./qualify-screen-id.js";
-import { QueryLoadingBanner } from "./query-state-banners.js";
 import { ReturnHostProvider, useReturnHost } from "./return-to.js";
 import { screenAccessAllows } from "./screen-access.js";
 import { ScreenAccessDeniedBanner, ScreenMissingState } from "./screen-shared.js";
+import { ScreenNotice, ScreenVisibilityGate } from "./screen-visibility-gate.js";
 import { SecretMintBody } from "./secret-mint-body.js";
 import { SecretsEditBody } from "./secrets-edit-body.js";
 import { useEmbeddedScreen } from "./use-embedded-screen.js";
-import { evalVisibleWhenAfterShown } from "./visible-when.js";
 export { qualifyScreenId };
 /** Mirrors qualifyScreenId for nav QNs (registry form `<feature>:nav:<short-id>`).
  *  Callers building QNs (e.g. the WorkspaceShell resolver) should use this instead of string-concat, so a QN-schema change only touches one place. */
@@ -55,7 +52,7 @@ export function KumikoScreen({ schema, qn, translate, entityId, onRowClick, onCo
         onCopyLink,
     });
     // Gate every entry (incl. direct URL): the body element is only mounted once the condition holds.
-    const body = screen.visibleWhen !== undefined ? (_jsx(ScreenVisibilityGate, { entityId: entityId, featureName: schema.featureName, visibleWhen: screen.visibleWhen, fallback: screen.fallback, translate: translate, children: _jsx(StandInChainBoundary, { children: screenBody }) }, entityId)) : (_jsx(StandInChainBoundary, { children: screenBody }));
+    const body = screen.visibleWhen !== undefined ? (_jsx(ScreenVisibilityGate, { entityId: entityId, visibleWhen: screen.visibleWhen, fallback: screen.fallback, translate: translate, renderFallbackScreen: (target, fallbackEntityId) => (_jsx(FallbackScreen, { featureName: schema.featureName, fallback: target, translate: translate, ...(fallbackEntityId !== undefined && { entityId: fallbackEntityId }) })), children: _jsx(StandInChainBoundary, { children: screenBody }) }, entityId)) : (_jsx(StandInChainBoundary, { children: screenBody }));
     // An embedded screen (e.g. a dashboard panel) keeps its parent's host and
     // must not portal its page header into the shell that hosts the outer screen.
     if (outerHost !== undefined) {
@@ -63,41 +60,12 @@ export function KumikoScreen({ schema, qn, translate, entityId, onRowClick, onCo
     }
     return _jsx(ReturnHostProvider, { value: ownHost, children: body });
 }
-function ScreenVisibilityGate({ entityId, featureName, visibleWhen, fallback, translate, children, }) {
-    // An idParam gate without a route id has nothing to ask: treated as hidden, never queried.
-    const missingRouteId = visibleWhen.idParam !== undefined && entityId === undefined;
-    const result = useQuery(visibleWhen.query, visibleWhen.idParam !== undefined && entityId !== undefined
-        ? { [visibleWhen.idParam]: entityId }
-        : {}, { live: true, enabled: !missingRouteId });
-    const wasShown = useRef(false);
-    const verdict = missingRouteId
-        ? "hidden"
-        : evalVisibleWhenAfterShown(visibleWhen, result, wasShown.current);
-    useEffect(() => {
-        if (verdict === "visible")
-            wasShown.current = true;
-    }, [verdict]);
-    if (verdict === "visible")
-        return children;
-    if (verdict === "loading") {
-        return _jsx(QueryLoadingBanner, {});
-    }
-    if (fallback !== undefined) {
-        return (_jsx(FallbackScreen, { featureName: featureName, fallback: fallback, translate: translate, ...(visibleWhen.idParam !== undefined && entityId !== undefined && { entityId }) }));
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(ScreenUnavailableBanner, {})] }));
-}
-function ScreenUnavailableBanner() {
-    const { Banner } = usePrimitives();
-    const t = useTranslation();
-    return (_jsx(Banner, { padded: true, variant: "info", testId: "kumiko-screen-unavailable", children: t("kumiko.screen.unavailable") }));
-}
 function FallbackScreen({ featureName, fallback, translate, entityId, }) {
     const target = useEmbeddedScreen(featureName, fallback);
     // Also undefined when the user lacks access to the fallback screen, which is
     // not a framework error.
     if (target === undefined) {
-        return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(ScreenUnavailableBanner, {})] }));
+        return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(ScreenNotice, {})] }));
     }
     return (_jsx(LockedHeaderScope, { standInScreenId: lastSegment(target.qn), children: _jsx(KumikoScreen, { schema: target.schema, qn: target.qn, translate: translate, ...(entityId !== undefined && { entityId }) }) }));
 }

package/dist/app/projection-list-body.js

@@ -108,7 +108,7 @@ export function ProjectionListBody({ schema, screen, translate, onRowClick, }) {
         limit: query.limit,
         urlState: query.urlState,
     });
-    return (_jsxs(_Fragment, { children: [refetchErrorBanner, _jsx(ListGroupPageBridges, { ...data.listTable.aggregates.groupPages }), _jsx(ReferenceFacetBridges, { specs: query.facetSpecs, onOptions: query.handleProjectionFacetOptions }), renderProjectionList({
+    return (_jsxs(_Fragment, { children: [refetchErrorBanner, actions.toolbarGateQueries, _jsx(ListGroupPageBridges, { ...data.listTable.aggregates.groupPages }), _jsx(ReferenceFacetBridges, { specs: query.facetSpecs, onOptions: query.handleProjectionFacetOptions }), renderProjectionList({
                 schema,
                 screen,
                 translate,

package/dist/app/qn.d.ts

@@ -1,7 +1,2 @@
 export declare function lastSegment(qn: string): string;
-/**
- * Client-safe copy of framework `toKebab` (engine/qualified-name.ts).
- * Must stay in sync — do NOT import from `@cosmicdrift/kumiko-framework/engine`
- * here: that barrel pulls server deps into the browser bundle.
- */
-export declare function toKebab(input: string): string;
+export { toKebab } from "@cosmicdrift/kumiko-types/kebab-case";

package/dist/app/qn.js

@@ -18,15 +18,4 @@ export function lastSegment(qn) {
     const idx = qn.lastIndexOf(":");
     return idx < 0 ? qn : qn.slice(idx + 1);
 }
-/**
- * Client-safe copy of framework `toKebab` (engine/qualified-name.ts).
- * Must stay in sync — do NOT import from `@cosmicdrift/kumiko-framework/engine`
- * here: that barrel pulls server deps into the browser bundle.
- */
-export function toKebab(input) {
-    return input
-        .replace(/\./g, "-")
-        .replace(/([A-Z]+)([A-Z][a-z])/g, "$1-$2")
-        .replace(/([a-z0-9])([A-Z])/g, "$1-$2")
-        .toLowerCase();
-}
+export { toKebab } from "@cosmicdrift/kumiko-types/kebab-case";

package/dist/app/screen-visibility-gate.d.ts

@@ -0,0 +1,19 @@
+import type { ScreenFallback, ScreenVisibility } from "@cosmicdrift/kumiko-framework/ui-types";
+import { type ReactNode } from "react";
+import type { Translate } from "../headless/index.ts";
+type NoticeKey = "kumiko.screen.unavailable" | "kumiko.screen.forbidden" | "kumiko.screen.notFound";
+export declare function ScreenNotice({ messageKey, }: {
+    readonly messageKey?: NoticeKey;
+}): ReactNode;
+export declare function LockedNotice({ messageKey }: {
+    readonly messageKey?: NoticeKey;
+}): ReactNode;
+export declare function ScreenVisibilityGate({ entityId, visibleWhen, fallback, translate, renderFallbackScreen, children, }: {
+    readonly entityId: string | undefined;
+    readonly visibleWhen: ScreenVisibility;
+    readonly fallback: ScreenFallback | undefined;
+    readonly translate?: Translate;
+    readonly renderFallbackScreen: (target: string, entityId: string | undefined) => ReactNode;
+    readonly children: ReactNode;
+}): ReactNode;
+export {};

package/dist/app/screen-visibility-gate.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fallbackTargetFor } from "@cosmicdrift/kumiko-types/screen";
+import { useEffect, useRef } from "react";
+import { useQuery } from "../hooks/use-query.js";
+import { useTranslation } from "../i18n.js";
+import { usePrimitives } from "../primitives.js";
+import { LockedHeaderScope } from "./locked-screen-header.js";
+import { QueryErrorBanner, QueryLoadingBanner } from "./query-state-banners.js";
+import { evalVisibleWhenAfterShown, screenFallbackReason, } from "./visible-when.js";
+export function ScreenNotice({ messageKey = "kumiko.screen.unavailable", }) {
+    const { Banner } = usePrimitives();
+    const t = useTranslation();
+    return (_jsx(Banner, { padded: true, variant: "info", testId: "kumiko-screen-unavailable", children: t(messageKey) }));
+}
+export function LockedNotice({ messageKey }) {
+    return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(ScreenNotice, { ...(messageKey !== undefined && { messageKey }) })] }));
+}
+// Only the map form gets reason-specific defaults; a plain string or no fallback keeps the
+// single "unavailable" notice. `error` renders a retry banner instead, so its entry is a
+// safety net for an error verdict that carries no error object.
+const DEFAULT_NOTICE_KEY = {
+    hidden: "kumiko.screen.unavailable",
+    forbidden: "kumiko.screen.forbidden",
+    notFound: "kumiko.screen.notFound",
+    error: "kumiko.screen.unavailable",
+};
+export function ScreenVisibilityGate({ entityId, visibleWhen, fallback, translate, renderFallbackScreen, children, }) {
+    // An idParam gate without a route id has nothing to ask: treated as hidden, never queried.
+    const missingRouteId = visibleWhen.idParam !== undefined && entityId === undefined;
+    const result = useQuery(visibleWhen.query, visibleWhen.idParam !== undefined && entityId !== undefined
+        ? { [visibleWhen.idParam]: entityId }
+        : {}, { live: true, enabled: !missingRouteId });
+    const wasShown = useRef(false);
+    const verdict = missingRouteId
+        ? "hidden"
+        : evalVisibleWhenAfterShown(visibleWhen, result, wasShown.current);
+    useEffect(() => {
+        if (verdict === "visible")
+            wasShown.current = true;
+    }, [verdict]);
+    if (verdict === "visible")
+        return children;
+    if (verdict === "loading") {
+        return _jsx(QueryLoadingBanner, {});
+    }
+    return (_jsx(ClosedGate, { verdict: verdict, result: result, fallback: fallback, translate: translate, renderFallbackScreen: (target) => renderFallbackScreen(target, visibleWhen.idParam !== undefined && entityId !== undefined ? entityId : undefined) }));
+}
+function ClosedGate({ verdict, result, fallback, translate, renderFallbackScreen, }) {
+    const t = useTranslation();
+    const reason = screenFallbackReason(verdict, result.error);
+    const target = fallback === undefined ? undefined : fallbackTargetFor(fallback, reason);
+    if (target !== undefined)
+        return renderFallbackScreen(target);
+    if (typeof fallback !== "object")
+        return _jsx(LockedNotice, {});
+    if (reason === "error" && result.error) {
+        return (_jsxs(_Fragment, { children: [_jsx(LockedHeaderScope, {}), _jsx(QueryErrorBanner, { error: result.error, translate: translate ?? t, onRetry: result.refetch })] }));
+    }
+    return _jsx(LockedNotice, { messageKey: DEFAULT_NOTICE_KEY[reason] });
+}

package/dist/app/use-embedded-screen.d.ts

@@ -1,6 +1,8 @@
+import type { ScreenDefinition } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { FeatureSchema } from "./feature-schema.ts";
 export type EmbeddedScreenTarget = {
     readonly schema: FeatureSchema;
     readonly qn: string;
+    readonly screenType: ScreenDefinition["type"];
 };
 export declare function useEmbeddedScreen(hostFeatureName: string, screen: string): EmbeddedScreenTarget | undefined;

package/dist/app/use-embedded-screen.js

@@ -15,5 +15,5 @@ export function useEmbeddedScreen(hostFeatureName, screen) {
         return undefined;
     if (!screenAccessAllows(target.access, userRoles))
         return undefined;
-    return { schema, qn };
+    return { schema, qn, screenType: target.type };
 }

package/dist/app/use-gated-toolbar-actions.d.ts

@@ -0,0 +1,7 @@
+import type { ToolbarAction } from "@cosmicdrift/kumiko-framework/ui-types";
+import { type ReactNode } from "react";
+import type { ToolbarActionButton } from "../components/render-list-toolbar-action.tsx";
+export declare function useGatedToolbarActions(toolbarActions: readonly ToolbarAction[] | undefined, resolved: readonly ToolbarActionButton[] | undefined): {
+    readonly actions: readonly ToolbarActionButton[] | undefined;
+    readonly gateQueries: ReactNode;
+};

package/dist/app/use-gated-toolbar-actions.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useQuery } from "../hooks/use-query.js";
+import { evalVisibleWhen } from "./visible-when.js";
+// Same query name, same answer: buttons gating on one query share a single live request.
+function GateQuery({ query, onResult, onForget, }) {
+    const { data, error, loading, refetch } = useQuery(query, {}, { live: true });
+    useEffect(() => {
+        onResult(query, { data, error, loading, refetch });
+    }, [query, data, error, loading, refetch, onResult]);
+    useEffect(() => () => onForget(query), [query, onForget]);
+    return null;
+}
+function gatesById(toolbarActions) {
+    const gates = new Map();
+    for (const action of toolbarActions ?? []) {
+        if (action.visibleWhen !== undefined)
+            gates.set(action.id, action.visibleWhen);
+    }
+    return gates;
+}
+// Fail-closed: a gated button shows only after its query answered with a match; while the
+// query loads or after it failed it stays hidden.
+export function useGatedToolbarActions(toolbarActions, resolved) {
+    const [results, setResults] = useState(new Map());
+    const report = useCallback((query, result) => {
+        setResults((prev) => new Map(prev).set(query, result));
+    }, []);
+    const forget = useCallback((query) => {
+        setResults((prev) => {
+            if (!prev.has(query))
+                return prev;
+            const next = new Map(prev);
+            next.delete(query);
+            return next;
+        });
+    }, []);
+    const gates = useMemo(() => gatesById(toolbarActions), [toolbarActions]);
+    const distinctQueries = useMemo(() => [...new Set([...gates.values()].map((gate) => gate.query))], [gates]);
+    const actions = useMemo(() => {
+        if (gates.size === 0)
+            return resolved;
+        const visible = resolved?.filter((action) => {
+            const gate = gates.get(action.id);
+            return gate === undefined || evalVisibleWhen(gate, results.get(gate.query)) === "visible";
+        });
+        return visible !== undefined && visible.length > 0 ? visible : undefined;
+    }, [gates, resolved, results]);
+    const gateQueries = distinctQueries.map((query) => (_jsx(GateQuery, { query: query, onResult: report, onForget: forget }, query)));
+    return { actions, gateQueries };
+}

package/dist/app/use-projection-list-actions.d.ts

@@ -25,6 +25,7 @@ export declare function useProjectionListActions(input: ProjectionListActionsInp
     runNavigate: (action: RowActionNavigate, row: ListRowViewModel) => void;
     rowActions: readonly import("../primitives.tsx").DataTableRowAction[] | undefined;
     toolbarActions: readonly import("../components/render-list-toolbar-action.tsx").ToolbarActionButton[] | undefined;
+    toolbarGateQueries: import("react").ReactNode;
     bulk: import("../data-table-bulk-types.ts").DataTableBulk | undefined;
     emptyContent: import("../components/list-empty-state.tsx").ListEmptyStateContent | undefined;
 };

package/dist/app/use-projection-list-actions.js

@@ -2,6 +2,7 @@ import { useCallback, useMemo } from "react";
 import { useListBulk } from "./list-bulk-actions.js";
 import { useListEmptyContent } from "./list-empty-content.js";
 import { buildDefaultEditRowAction, buildProjectionRowActions, buildProjectionToolbarActions, runProjectionRowNavigate, } from "./row-actions.js";
+import { useGatedToolbarActions } from "./use-gated-toolbar-actions.js";
 export function useProjectionListActions(input) {
     const { screen, effectiveTranslate, dispatcher, clientActions, nav, host, refreshRows, openDrawer, appFeatures, userRoles, defaultEditScreen, } = input;
     // Entity targets: see EntityListBody.runNavigate for why the resolution happens
@@ -35,7 +36,7 @@ export function useProjectionListActions(input) {
         defaultEditRowAction,
         host,
     ]);
-    const toolbarActions = useMemo(() => buildProjectionToolbarActions({
+    const resolvedToolbarActions = useMemo(() => buildProjectionToolbarActions({
         toolbarActions: screen.toolbarActions,
         translate: effectiveTranslate,
         dispatcher,
@@ -55,6 +56,7 @@ export function useProjectionListActions(input) {
         appFeatures,
         userRoles,
     ]);
+    const { actions: toolbarActions, gateQueries: toolbarGateQueries } = useGatedToolbarActions(screen.toolbarActions, resolvedToolbarActions);
     const bulk = useListBulk({
         bulkActions: screen.bulkActions,
         rowActions: screen.rowActions,
@@ -69,5 +71,12 @@ export function useProjectionListActions(input) {
         openDrawer,
         onWriteSuccess: refreshRows,
     });
-    return { runNavigate, rowActions, toolbarActions, bulk, emptyContent };
+    return {
+        runNavigate,
+        rowActions,
+        toolbarActions,
+        toolbarGateQueries,
+        bulk,
+        emptyContent,
+    };
 }

package/dist/app/visible-when.d.ts

@@ -1,5 +1,9 @@
-import type { DashboardPanelVisibility } from "@cosmicdrift/kumiko-framework/ui-types";
+import type { DashboardPanelVisibility, ScreenFallbackReason } from "@cosmicdrift/kumiko-framework/ui-types";
 import type { UseQueryResult } from "../hooks/use-query.ts";
 export type VisibleWhenVerdict = "loading" | "visible" | "hidden" | "error";
 export declare function evalVisibleWhen(visibleWhen: DashboardPanelVisibility, result: UseQueryResult<Readonly<Record<string, unknown>>> | undefined): VisibleWhenVerdict;
 export declare function evalVisibleWhenAfterShown(visibleWhen: DashboardPanelVisibility, result: UseQueryResult<Readonly<Record<string, unknown>>> | undefined, wasShown: boolean): VisibleWhenVerdict;
+export type FailedVerdict = Exclude<VisibleWhenVerdict, "visible" | "loading">;
+export declare function screenFallbackReason(verdict: FailedVerdict, error: {
+    readonly httpStatus: number;
+} | null): ScreenFallbackReason;

package/dist/app/visible-when.js

@@ -16,3 +16,14 @@ export function evalVisibleWhenAfterShown(visibleWhen, result, wasShown) {
     const lastGoodDataMatches = result?.data?.[visibleWhen.field] === visibleWhen.eq;
     return verdict === "error" && wasShown && lastGoodDataMatches ? "visible" : verdict;
 }
+// Splits a closed gate by cause so a screen's `fallback` map can answer "not allowed" and
+// "gone" differently from "condition unmet" and "something broke".
+export function screenFallbackReason(verdict, error) {
+    if (verdict === "hidden")
+        return "hidden";
+    if (error?.httpStatus === 403)
+        return "forbidden";
+    if (error?.httpStatus === 404)
+        return "notFound";
+    return "error";
+}

package/dist/data-table-view-types.d.ts

@@ -21,11 +21,13 @@ export type DataTableViewOptions = {
     /** Present: pinning is on and the view menu has a pin section. Unpinned columns have no entry. */
     readonly pins?: DataTableColumnPins;
     readonly onPinsChange?: (next: DataTableColumnPins) => void;
-    /** Present: resizing is on; the table switches to table-layout fixed. Every column has an entry (px). */
+    /** Present: resizing is on. Only columns with a start width or a user-chosen width have an entry (px);
+     *  while none of the visible columns has one, the table keeps the auto layout and sizes by content. */
     readonly widths?: DataTableColumnWidths;
     /** Present together with `widths`; every column has an entry (px). */
     readonly minWidths?: DataTableColumnWidths;
-    readonly onWidthChange?: (field: string, width: number) => void;
+    /** `others` holds the displayed widths of the columns that had no entry yet, so they keep their size once the layout turns fixed. */
+    readonly onWidthChange?: (field: string, width: number, others?: DataTableColumnWidths) => void;
     readonly keyboardNavigation?: boolean;
     /** Present: the view menu has a "group by" section. */
     readonly groupBy?: DataTableGroupByChoice;

package/dist/hooks/list-column-layout.d.ts

@@ -12,8 +12,10 @@ type LayoutSchemaColumn = {
 export declare function defaultPins(schema: readonly LayoutSchemaColumn[]): DataTableColumnPins;
 export declare function minWidthsOf(schema: readonly LayoutSchemaColumn[]): DataTableColumnWidths;
 export declare function clampWidth(width: number, min: number): number;
+/** Only columns with a schema `width`: the others are sized by their content until the user resizes. */
 export declare function defaultWidths(schema: readonly LayoutSchemaColumn[], minWidths: DataTableColumnWidths): DataTableColumnWidths;
-/** A saved width wins per field; a column the saved view has never seen keeps its default. */
+/** A saved width wins per field; fields the schema no longer has are dropped. */
 export declare function mergeSavedWidths(defaults: DataTableColumnWidths, saved: Readonly<Record<string, number>>, minWidths: DataTableColumnWidths): DataTableColumnWidths;
+export declare function clampWidths(widths: DataTableColumnWidths, minWidths: DataTableColumnWidths): DataTableColumnWidths;
 export declare function sameRecord<T>(a: Readonly<Record<string, T>>, b: Readonly<Record<string, T>>): boolean;
 export {};

package/dist/hooks/list-column-layout.js

@@ -16,20 +16,33 @@ export function minWidthsOf(schema) {
 export function clampWidth(width, min) {
     return Math.min(MAX_COLUMN_WIDTH_PX, Math.max(min, Math.round(width)));
 }
+/** Only columns with a schema `width`: the others are sized by their content until the user resizes. */
 export function defaultWidths(schema, minWidths) {
-    return Object.fromEntries(schema.map((column) => [
-        column.field,
-        clampWidth(column.width ?? DEFAULT_COLUMN_WIDTH_PX, minWidths[column.field] ?? DEFAULT_MIN_COLUMN_WIDTH_PX),
-    ]));
+    return Object.fromEntries(schema.flatMap((column) => column.width === undefined
+        ? []
+        : [
+            [
+                column.field,
+                clampWidth(column.width, minWidths[column.field] ?? DEFAULT_MIN_COLUMN_WIDTH_PX),
+            ],
+        ]));
 }
-/** A saved width wins per field; a column the saved view has never seen keeps its default. */
+/** A saved width wins per field; fields the schema no longer has are dropped. */
 export function mergeSavedWidths(defaults, saved, minWidths) {
-    return Object.fromEntries(Object.entries(defaults).map(([field, fallback]) => {
+    return Object.fromEntries(Object.keys(minWidths).flatMap((field) => {
         const savedWidth = saved[field];
         const min = minWidths[field] ?? DEFAULT_MIN_COLUMN_WIDTH_PX;
-        return [field, savedWidth === undefined ? fallback : clampWidth(savedWidth, min)];
+        if (savedWidth !== undefined)
+            return [[field, clampWidth(savedWidth, min)]];
+        const fallback = defaults[field];
+        return fallback === undefined ? [] : [[field, fallback]];
     }));
 }
+export function clampWidths(widths, minWidths) {
+    return Object.fromEntries(Object.entries(widths).flatMap(([field, width]) => field in minWidths
+        ? [[field, clampWidth(width, minWidths[field] ?? DEFAULT_MIN_COLUMN_WIDTH_PX)]]
+        : []));
+}
 export function sameRecord(a, b) {
     const keys = Object.keys(a);
     return keys.length === Object.keys(b).length && keys.every((key) => a[key] === b[key]);

package/dist/hooks/use-list-view-state.d.ts

@@ -21,7 +21,7 @@ export type ListViewState = {
     /** Undefined unless `table.resizing` is on. */
     readonly widths: DataTableColumnWidths | undefined;
     readonly minWidths: DataTableColumnWidths | undefined;
-    readonly setWidth: (field: string, width: number) => void;
+    readonly setWidth: (field: string, width: number, others?: DataTableColumnWidths) => void;
     /** Active group field, "" = not grouped. */
     readonly groupBy: string;
     /** Undefined unless `table.grouping.userChoice` is on. */

package/dist/hooks/use-list-view-state.js

@@ -1,6 +1,6 @@
 import { normalizeListColumn } from "@cosmicdrift/kumiko-framework/ui-types";
 import { useCallback, useMemo, useState } from "react";
-import { clampWidth, DEFAULT_MIN_COLUMN_WIDTH_PX, defaultPins, defaultWidths, mergeSavedWidths, minWidthsOf, sameRecord, } from "./list-column-layout.js";
+import { clampWidth, clampWidths, DEFAULT_MIN_COLUMN_WIDTH_PX, defaultPins, defaultWidths, mergeSavedWidths, minWidthsOf, sameRecord, } from "./list-column-layout.js";
 import { sanitizeStoredListState } from "./list-state-schema.js";
 export function listViewSchemaColumns(columns) {
     return columns.map((column) => {
@@ -124,9 +124,10 @@ export function useListViewState(args) {
     }, [commit, view]);
     const setDensity = useCallback((next) => commit({ ...view, density: next }), [commit, view]);
     const setPins = useCallback((next) => commit({ ...view, pins: next }), [commit, view]);
-    const setWidth = useCallback((field, width) => commit({
+    const setWidth = useCallback((field, width, others = {}) => commit({
         ...view,
         widths: {
+            ...clampWidths(others, minWidths),
             ...view.widths,
             [field]: clampWidth(width, minWidths[field] ?? DEFAULT_MIN_COLUMN_WIDTH_PX),
         },

package/dist/i18n-defaults.js

@@ -191,6 +191,8 @@ export const kumikoDefaultTranslations = {
         "kumiko.dashboard.progress.unlimited": "unlimited",
         "kumiko.dashboard.record.missing": "Open this page from a record to see its dashboard.",
         "kumiko.dashboard.time-range": "Time range",
+        "kumiko.screen.forbidden": "You do not have access to this page.",
+        "kumiko.screen.notFound": "This page could not be found.",
         "kumiko.screen.unavailable": "This page is not available right now.",
         "kumiko.dashboard.brush-end": "Window end",
         "kumiko.dashboard.brush-start": "Window start",

package/dist/web/app/dashboard-body.js

@@ -48,7 +48,7 @@ function PanelBody({ panel, label, screenId, screenParams, translate, }) {
 }
 function renderDashboardPanel(panel, featureName, screenId, screenParams, translate) {
     if (panel.kind === "screen") {
-        return (_jsx(ScreenPanelTile, { panel: panel, featureName: featureName, translate: translate }, panel.id));
+        return (_jsx(ScreenPanelTile, { panel: panel, featureName: featureName, recordId: screenParams.recordId, translate: translate }, panel.id));
     }
     const label = panel.kind === "custom" || panel.label === undefined ? undefined : translate(panel.label);
     return (_jsx(GatedGridCell, { panel: panel, screenParams: screenParams, label: label ?? panel.id, className: panelSpanClassName(panel), children: _jsx(PanelBody, { panel: panel, label: label, screenId: screenId, screenParams: screenParams, translate: translate }) }, panel.id));

package/dist/web/app/dashboard-screen-tiles.d.ts

@@ -1,8 +1,9 @@
 import type { DashboardScreenPanel } from "@cosmicdrift/kumiko-framework/ui-types";
 import { type ReactNode } from "react";
 import type { Translate } from "../../headless/index.ts";
-export declare function ScreenPanelTile({ panel, featureName, translate, }: {
+export declare function ScreenPanelTile({ panel, featureName, recordId, translate, }: {
     readonly panel: DashboardScreenPanel;
     readonly featureName: string;
+    readonly recordId: string | undefined;
     readonly translate: Translate;
 }): ReactNode;

package/dist/web/app/dashboard-screen-tiles.js

@@ -6,19 +6,21 @@ import { EmbeddedFormProvider } from "../primitives/index.js";
 import { SectionCard } from "../widgets/section-card.js";
 import { PanelError, WIDE_PANEL } from "./dashboard-shared.js";
 import { NO_GATE_PAYLOAD, VisibilityQueryContext, visibilityGate, } from "./dashboard-visibility.js";
-function EmbeddedScreenPanelTile({ panel, target, translate, }) {
-    const screenBody = _jsx(KumikoScreen, { schema: target.schema, qn: target.qn, translate: translate });
+function EmbeddedScreenPanelTile({ recordId, panel, target, translate, }) {
+    // Only a record screen takes the dashboard's bound record; other screens have no id to read.
+    const entityId = target.screenType === "projectionDetail" ? recordId : undefined;
+    const screenBody = (_jsx(KumikoScreen, { schema: target.schema, qn: target.qn, translate: translate, ...(entityId !== undefined && { entityId }) }));
     const embedded = panel.chromeless === true ? (_jsx(EmbeddedFormProvider, { children: _jsx(EmbeddedScreenProvider, { children: screenBody }) })) : (screenBody);
     return (_jsx("div", { className: cn("min-w-0", WIDE_PANEL), "data-testid": `dashboard-panel-${panel.id}`, children: panel.label !== undefined && panel.chromeless !== true ? (_jsx(SectionCard, { title: translate(panel.label), children: embedded })) : (_jsxs(_Fragment, { children: [panel.label !== undefined && (_jsx("h3", { className: "mb-3 text-sm font-semibold text-foreground", children: translate(panel.label) })), embedded] })) }));
 }
 // Own component so the target lookup (a hook) only runs for panels that actually fall back.
-function FallbackScreenPanelTile({ panel, fallback, featureName, translate, }) {
+function FallbackScreenPanelTile({ panel, fallback, featureName, recordId, translate, }) {
     const target = useEmbeddedScreen(featureName, fallback);
     if (target === undefined)
         return null;
-    return _jsx(EmbeddedScreenPanelTile, { panel: panel, target: target, translate: translate });
+    return (_jsx(EmbeddedScreenPanelTile, { panel: panel, target: target, recordId: recordId, translate: translate }));
 }
-export function ScreenPanelTile({ panel, featureName, translate, }) {
+export function ScreenPanelTile({ panel, featureName, recordId, translate, }) {
     const visibleWhen = panel.visibleWhen;
     const visibility = useContext(VisibilityQueryContext).get(visibleWhen !== undefined ? visibilityGate(visibleWhen.query, NO_GATE_PAYLOAD).key : "");
     const target = useEmbeddedScreen(featureName, panel.screen);
@@ -27,7 +29,7 @@ export function ScreenPanelTile({ panel, featureName, translate, }) {
     if (verdict === "loading")
         return null;
     if (verdict !== "visible" && panel.fallback !== undefined) {
-        return (_jsx(FallbackScreenPanelTile, { panel: panel, fallback: panel.fallback, featureName: featureName, translate: translate }));
+        return (_jsx(FallbackScreenPanelTile, { panel: panel, fallback: panel.fallback, featureName: featureName, recordId: recordId, translate: translate }));
     }
     if (target === undefined)
         return null;
@@ -38,5 +40,5 @@ export function ScreenPanelTile({ panel, featureName, translate, }) {
     }
     if (verdict !== "visible")
         return null;
-    return _jsx(EmbeddedScreenPanelTile, { panel: panel, target: target, translate: translate });
+    return (_jsx(EmbeddedScreenPanelTile, { panel: panel, target: target, recordId: recordId, translate: translate }));
 }

package/dist/web/app/dashboard-shared.d.ts

@@ -11,6 +11,8 @@ export type ScreenParams = {
     readonly rangeParams: Readonly<Record<string, unknown>>;
     /** `{ [payloadKey]: recordId }` of a record-bound dashboard, else empty. */
     readonly recordParams: Readonly<Record<string, unknown>>;
+    /** Id read from `record.param`; set whenever the dashboard renders its panels. */
+    readonly recordId?: string;
 };
 export declare function panelPayload(panel: DashboardPanelQueryOptions, screenParams: ScreenParams): Readonly<Record<string, unknown>>;
 type RefetchQuery = () => Promise<void>;

package/dist/web/app/use-dashboard-screen-state.js

@@ -12,7 +12,12 @@ export function useDashboardScreenParams(screen, translate, nav) {
     const recordQueryName = recordBinding?.query;
     const { params: filterParams, picker } = useFilterParams(screen, !recordMissing);
     const { params: rangeParams, control: rangeControl } = useTimeRange(screen, translate);
-    const screenParams = { filterParams, rangeParams, recordParams };
+    const screenParams = {
+        filterParams,
+        rangeParams,
+        recordParams,
+        ...(recordId !== "" && { recordId }),
+    };
     const { loadedAtMs, reportLoaded } = useLoadedAt(screenParams);
     return {
         recordBinding,

package/dist/web/layout/shell-breadcrumb.d.ts

@@ -5,9 +5,12 @@ export type BreadcrumbCrumb = {
     readonly screenId?: string;
 };
 export declare function screenTitleKey(screenShortId: string): string;
+export declare function screenCreateTitleKey(screenShortId: string): string;
 /** The short id of {screenId}'s parent list screen, resolved via the same
  *  logic as `resolveDetailBreadcrumb` — `undefined` when nothing resolves
  *  (unknown screen, or no explicit/heuristic parent). */
 export declare function resolveParentScreenId(screens: readonly ScreenDefinition[], screenId: string): string | undefined;
-export declare function resolveDetailBreadcrumb(screens: readonly ScreenDefinition[], detailScreenId: string, t: (key: string) => string): readonly BreadcrumbCrumb[] | undefined;
+export declare function resolveDetailBreadcrumb(screens: readonly ScreenDefinition[], detailScreenId: string, t: (key: string) => string, options?: {
+    readonly creating?: boolean;
+}): readonly BreadcrumbCrumb[] | undefined;
 export declare function activeNavLabel(nodes: readonly NavNode[], screenId: string, t: (key: string) => string): string | undefined;