@cosmicdrift/kumiko-renderer 0.393.0 → 0.395.0

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/client-plugin.d.ts

@@ -72,7 +72,7 @@ export type ClientFeatureDefinition = {
      *  `navProviders`; the static map wins on key collision (explicit beats
      *  derived). */
     readonly navProvidersFromCollections?: (collections: readonly QualifiedContentCollection[]) => CollectionNavProviders;
-    /** Content editor components — map `contentFormat` ("plain" | "rich" | "markdown" | "document") →
+    /** Content editor components — map `contentFormat` ("plain" | "document") →
      *  React component. `r.contentCollection()` declares which format an
      *  editor edits; the collection's editor UI (template-resolver's
      *  TextBlockEditor et al.) looks the component up here and falls back to

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/index.d.ts

@@ -12,7 +12,6 @@ export type { KumikoLinkProps } from "./app/nav.tsx";
 export { KumikoLink, useBrowserNavApi } from "./app/nav.tsx";
 export { PlainContentEditor } from "./app/plain-content-editor.tsx";
 export { useResolvers } from "./app/resolvers-context.tsx";
-export { RichContentEditor } from "./app/rich-content-editor.tsx";
 export { clearRememberedListState } from "./app/session-list-state-store.ts";
 export type { NavIconKey } from "./icons.tsx";
 export { Icon } from "./icons.tsx";
@@ -43,6 +42,7 @@ export { SidebarBrand } from "./layout/sidebar-brand.tsx";
 export { SidebarPanel } from "./layout/sidebar-panel.tsx";
 export type { SidebarUserProps } from "./layout/sidebar-user.tsx";
 export { SidebarUser } from "./layout/sidebar-user.tsx";
+export { useDispatchTarget } from "./layout/target-resolver-stub.tsx";
 export { parseTargetFromSearchParams } from "./layout/target-url.ts";
 export type { ThemeMenuItemProps } from "./layout/theme-menu-item.tsx";
 export { ThemeMenuItem } from "./layout/theme-menu-item.tsx";

package/dist/web/index.js

@@ -11,7 +11,6 @@ export { createBrowserDraftStorage } from "./app/draft-storage.js";
 export { KumikoLink, useBrowserNavApi } from "./app/nav.js";
 export { PlainContentEditor } from "./app/plain-content-editor.js";
 export { useResolvers } from "./app/resolvers-context.js";
-export { RichContentEditor } from "./app/rich-content-editor.js";
 export { clearRememberedListState } from "./app/session-list-state-store.js";
 export { Icon } from "./icons.js";
 export { AppLayout } from "./layout/app-layout.js";
@@ -28,6 +27,7 @@ export { Sidebar } from "./layout/sidebar.js";
 export { SidebarBrand } from "./layout/sidebar-brand.js";
 export { SidebarPanel } from "./layout/sidebar-panel.js";
 export { SidebarUser } from "./layout/sidebar-user.js";
+export { useDispatchTarget } from "./layout/target-resolver-stub.js";
 export { parseTargetFromSearchParams } from "./layout/target-url.js";
 export { ThemeMenuItem } from "./layout/theme-menu-item.js";
 export { ThemeToggle } from "./layout/theme-toggle.js";

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;

package/dist/web/layout/shell-breadcrumb.js

@@ -3,6 +3,20 @@ import { lastSegment } from "../../index.js";
 export function screenTitleKey(screenShortId) {
     return `screen:${screenShortId}.title`;
 }
+export function screenCreateTitleKey(screenShortId) {
+    return `screen:${screenShortId}.createTitle`;
+}
+// An edit screen opened without a record creates one; a feature names that state with
+// `createTitle`, and without it the screen title stays (t returns the key when untranslated).
+function detailTitle(screenShortId, creating, t) {
+    if (creating) {
+        const createKey = screenCreateTitleKey(screenShortId);
+        const createTitle = t(createKey);
+        if (createTitle !== createKey)
+            return createTitle;
+    }
+    return t(screenTitleKey(screenShortId));
+}
 // Delegates to resolveNavParentScreen, supplying the feature-qualified-id
 // normalization the client-side schema needs.
 function resolveParentScreen(screens, detail) {
@@ -18,18 +32,19 @@ export function resolveParentScreenId(screens, screenId) {
     const parent = resolveParentScreen(screens, detail);
     return parent !== undefined ? lastSegment(parent.id) : undefined;
 }
-export function resolveDetailBreadcrumb(screens, detailScreenId, t) {
+export function resolveDetailBreadcrumb(screens, detailScreenId, t, options = {}) {
+    const creating = options.creating === true;
     const detail = screens.find((s) => lastSegment(s.id) === detailScreenId);
     if (detail === undefined)
         return undefined;
     const list = resolveParentScreen(screens, detail);
     if (list === undefined) {
-        return [{ label: t(screenTitleKey(detailScreenId)) }];
+        return [{ label: detailTitle(detailScreenId, creating, t) }];
     }
     const listId = lastSegment(list.id);
     return [
         { label: t(screenTitleKey(listId)), screenId: listId },
-        { label: t(screenTitleKey(detailScreenId)) },
+        { label: detailTitle(detailScreenId, creating, t) },
     ];
 }
 export function activeNavLabel(nodes, screenId, t) {

package/dist/web/layout/shell-header.js

@@ -53,8 +53,10 @@ export function ShellHeader({ schema, user, headerActions, allowedNavQns, }) {
             activeNavLabel(tree, screenId, t);
         if (navLabel !== undefined)
             return [{ label: navLabel }];
-        return resolveDetailBreadcrumb(allScreens, screenId, t);
-    }, [allScreens, screenId, entityId, t, tree, allowedTree]);
+        return resolveDetailBreadcrumb(allScreens, screenId, t, {
+            creating: standInScreenId === undefined && entityId === undefined,
+        });
+    }, [allScreens, screenId, standInScreenId, entityId, t, tree, allowedTree]);
     const setStatusElement = slot?.setStatusElement;
     const setActionsElement = slot?.setActionsElement;
     const titleOverride = slot?.title;

package/dist/web/lib/upload-file-ref.d.ts

@@ -3,7 +3,10 @@ export type FileRefTarget = Pick<FileUploadFormDataInput, "entityType" | "entity
 /** Carries the server's own `error` message when the upload endpoint sent one. */
 export declare class FileUploadFailedError extends Error {
     readonly fromServer: boolean;
-    constructor(message: string, fromServer: boolean);
+    readonly httpStatus?: number | undefined;
+    readonly code?: string | undefined;
+    constructor(message: string, fromServer: boolean, httpStatus?: number | undefined, code?: string | undefined);
 }
+export declare function isSessionEndedUploadError(cause: unknown): boolean;
 /** Posts one file to the stack's file endpoint (double-submit CSRF) and returns the new FileRef id. */
 export declare function uploadFileRef(file: Blob, target?: FileRefTarget): Promise<string>;

package/dist/web/lib/upload-file-ref.js

@@ -1,14 +1,25 @@
 import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
 import { CSRF_HEADER_NAME, readCsrfToken } from "../../live/index.js";
+import { isSessionEndedError } from "../../session/session-ended.js";
 import { buildFileUploadFormData } from "./file-upload-form-data.js";
 /** Carries the server's own `error` message when the upload endpoint sent one. */
 export class FileUploadFailedError extends Error {
     fromServer;
-    constructor(message, fromServer) {
+    httpStatus;
+    code;
+    constructor(message, fromServer, httpStatus, code) {
         super(message);
         this.fromServer = fromServer;
+        this.httpStatus = httpStatus;
+        this.code = code;
     }
 }
+export function isSessionEndedUploadError(cause) {
+    return (cause instanceof FileUploadFailedError &&
+        cause.code !== undefined &&
+        cause.httpStatus !== undefined &&
+        isSessionEndedError({ code: cause.code, httpStatus: cause.httpStatus }));
+}
 /** Posts one file to the stack's file endpoint (double-submit CSRF) and returns the new FileRef id. */
 export async function uploadFileRef(file, target) {
     const csrf = readCsrfToken();
@@ -21,9 +32,10 @@ export async function uploadFileRef(file, target) {
     const id = propertyOf(json, "id");
     if (!res.ok || typeof id !== "string") {
         const message = propertyOf(json, "error");
+        const code = propertyOf(json, "code");
         throw typeof message === "string"
-            ? new FileUploadFailedError(message, true)
-            : new FileUploadFailedError(`upload failed (${res.status})`, false);
+            ? new FileUploadFailedError(message, true, res.status, typeof code === "string" ? code : undefined)
+            : new FileUploadFailedError(`upload failed (${res.status})`, false, res.status);
     }
     return id;
 }

package/dist/web/primitives/action-menu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Generic action menu built on @radix-ui/react-dropdown-
-// menu. Used for ProfileMenu (topbar avatar), Edit-
+// Generic action menu built on the radix-ui DropdownMenu.
+// Used for ProfileMenu (topbar avatar), Edit-
 // Header-Menu (three dots), and list-row kebab menus; only the
 // trigger differs between uses.
 //

package/dist/web/primitives/calendar-popover.js

@@ -9,8 +9,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The text input (typing) intentionally lives in each Primitive, not here:
 // date has one field, while timestamp has two (date + time). This lets both
 // share the calendar mechanics without sharing their input layout.
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Calendar as CalendarIcon } from "lucide-react";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { lazy, Suspense } from "react";
 import { cn } from "../lib/cn.js";
 const CalendarDayPicker = lazy(() => import("./calendar-day-picker.js"));

package/dist/web/primitives/combobox.js

@@ -12,9 +12,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Multi-mode: `multiple: true` switches to tag display and multi-selection.
 // Selected values render as small chips, while the search input remains open
 // for additional selections.
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Command } from "cmdk";
 import { Check, ChevronDown, Loader2, Plus } from "lucide-react";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { useEffect, useState } from "react";
 import { REFERENCE_SEARCH_DEBOUNCE_MS, useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";

package/dist/web/primitives/data-table/table-data-cell.js

@@ -8,9 +8,35 @@ import { columnCellPresentationProps } from "./data-cell-props.js";
 // last column slid under the sticky actions column with
 // nothing visibly cut off. max-w-xs bounds a single column;
 // badges and dates stay nowrap by their own classes.
+// A resizable table sizes by content until the user drags a column. Its
+// first column names the row and gets the room it needs: it breaks anywhere
+// only when the table runs out of width, so a long identifier stays on one
+// line on a wide screen instead of wrapping at 20rem. Dates and timestamps
+// keep one line there too; a narrow screen scrolls the table sideways.
+const ONE_LINE_COLUMN_TYPES = new Set(["timestamp", "date"]);
+// Projection lists synthesize every column as type "text"; their dates carry a format spec.
+function isDateColumn(col) {
+    if (ONE_LINE_COLUMN_TYPES.has(col.type))
+        return true;
+    const renderer = col.renderer;
+    return (typeof renderer === "object" &&
+        renderer !== null &&
+        "format" in renderer &&
+        typeof renderer.format === "string" &&
+        ONE_LINE_COLUMN_TYPES.has(renderer.format));
+}
+function autoLayoutCellClassName(m, col, colIndex) {
+    if (m.sizing !== undefined && isDateColumn(col))
+        return "whitespace-nowrap";
+    return colIndex === 0 && m.sizing !== undefined
+        ? "whitespace-normal [overflow-wrap:anywhere]"
+        : "max-w-xs whitespace-normal break-words";
+}
 function dataCellClassName(m, col, colIndex, pinClassName) {
     return cn(col.fileDisplay === undefined
-        ? cn(m.sizing ? "overflow-hidden" : "max-w-xs", "whitespace-normal break-words")
+        ? m.sizing?.fixed === true
+            ? "overflow-hidden whitespace-normal break-words"
+            : autoLayoutCellClassName(m, col, colIndex)
         : FIT_CONTENT_CELL_CLASS, colIndex === 0 ? "font-medium text-foreground" : "text-foreground-secondary", NUMERIC_COLUMN_TYPES.has(col.type) && "text-right", TABULAR_COLUMN_TYPES.has(col.type) && "tabular-nums", col.highlighted === true && "bg-accent/40", m.density.cell, pinClassName);
 }
 export function renderDataCell(m, row, col, colIndex, opensOnClick) {

package/dist/web/primitives/data-table/table-header-row.js

@@ -17,5 +17,5 @@ function renderExpandHeaderCell(m) {
     return (_jsx(TableHead, { "data-testid": "column-expand", className: cn(EXPAND_TOGGLE_CELL_CLASS, expandHeaderPin.className), style: expandHeaderPin.style }));
 }
 export function renderTableHeader(m) {
-    return (_jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { ref: m.headerRowRef, className: "hover:bg-transparent", children: [m.selection.headerCell(m.pins.headerCell(SELECT_COLUMN_KEY)), m.expansion !== undefined && renderExpandHeaderCell(m), m.columns.map((col) => renderColumnHeader(m, col)), m.hasTableActions && (_jsx(ActionsHeaderCell, { label: m.tableTranslate?.("kumiko.list.actions") ?? "Actions", style: m.pins.actionsHeaderStyle, absorbsLeftover: m.sizing !== undefined }))] }) }));
+    return (_jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { ref: m.headerRowRef, className: "hover:bg-transparent", children: [m.selection.headerCell(m.pins.headerCell(SELECT_COLUMN_KEY)), m.expansion !== undefined && renderExpandHeaderCell(m), m.columns.map((col) => renderColumnHeader(m, col)), m.hasTableActions && (_jsx(ActionsHeaderCell, { label: m.tableTranslate?.("kumiko.list.actions") ?? "Actions", style: m.pins.actionsHeaderStyle, absorbsLeftover: m.sizing?.fixed === true }))] }) }));
 }

package/dist/web/primitives/data-table/table-view.js

@@ -8,7 +8,7 @@ import { renderTableHeader } from "./table-header-row.js";
 import { TotalsFooterRow } from "./totals-footer.js";
 function renderColumnWidths(m) {
     const { sizing } = m;
-    if (sizing === undefined)
+    if (sizing === undefined || !sizing.fixed)
         return null;
     return (_jsx(ColumnWidthGroup, { fields: m.columns.map((col) => col.field), sizing: sizing, hasExpandColumn: m.expansion !== undefined, hasSelectColumn: m.selection.active, hasActionsColumn: m.hasTableActions }));
 }
@@ -21,5 +21,5 @@ function renderTotalsRow(m) {
 export function renderTableView(m) {
     const { fillsHeight, chromeless, sizing, testId } = m;
     const TableRoot = fillsHeight ? FlushTable : Table;
-    return (_jsx("div", { className: cn(!fillsHeight && "overflow-hidden", !fillsHeight && chromeless !== true && "rounded-lg border bg-card"), children: _jsxs(TableRoot, { "data-testid": testId, className: fillsHeight ? FILL_TABLE_CLASS : undefined, ...(sizing !== undefined && { style: sizing.tableStyle }), children: [renderColumnWidths(m), renderTableHeader(m), renderTableBody(m), renderTotalsRow(m)] }) }));
+    return (_jsx("div", { className: cn(!fillsHeight && "overflow-hidden", !fillsHeight && chromeless !== true && "rounded-lg border bg-card"), children: _jsxs(TableRoot, { "data-testid": testId, className: fillsHeight ? FILL_TABLE_CLASS : undefined, ...(sizing?.tableStyle !== undefined && { style: sizing.tableStyle }), children: [renderColumnWidths(m), renderTableHeader(m), renderTableBody(m), renderTotalsRow(m)] }) }));
 }

package/dist/web/primitives/data-table/use-column-sizing.d.ts

@@ -2,14 +2,16 @@ import { type CSSProperties } from "react";
 import type { DataTableViewOptions } from "../../../data-table-view-types.ts";
 import { type MeasuredColumnWidths } from "./use-measured-column-widths.ts";
 export type ColumnSizing = {
+    /** False until a column has a chosen width: the table keeps the auto layout and sizes columns by content. */
+    readonly fixed: boolean;
     readonly widthOf: (field: string) => number;
     readonly minWidthOf: (field: string) => number;
-    readonly tableStyle: CSSProperties;
+    readonly tableStyle: CSSProperties | undefined;
     /** Live width while a drag is in progress; nothing reaches the view state until `commit`. */
     readonly setLiveWidth: (field: string, width: number) => void;
     readonly commit: (field: string, width: number) => void;
 };
-/** Fixed-layout sizing for resizable columns; undefined when resizing is off. */
+/** Sizing for resizable columns; undefined when resizing is off. */
 export declare function useColumnSizing({ columns, view, isNarrow, measured, hasExpandColumn, hasSelectColumn, }: {
     readonly columns: readonly {
         readonly field: string;

package/dist/web/primitives/data-table/use-column-sizing.js

@@ -1,22 +1,36 @@
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
+import { DEFAULT_COLUMN_WIDTH_PX } from "../../../hooks/list-column-layout.js";
 import { isResizingActive } from "./column-layout-mode.js";
 import { EXPAND_COLUMN_WIDTH_PX, SELECT_COLUMN_WIDTH_PX, } from "./use-measured-column-widths.js";
-/** Fixed-layout sizing for resizable columns; undefined when resizing is off. */
+/** Sizing for resizable columns; undefined when resizing is off. */
 export function useColumnSizing({ columns, view, isNarrow, measured, hasExpandColumn, hasSelectColumn = false, }) {
     const [live, setLive] = useState(null);
     const active = isResizingActive(view, isNarrow);
     const widths = view?.widths;
     const minWidths = view?.minWidths;
     const onWidthChange = view?.onWidthChange;
-    const commit = useCallback((field, width) => {
-        setLive(null);
-        onWidthChange?.(field, width);
-    }, [onWidthChange]);
     return useMemo(() => {
         if (!active || widths === undefined || minWidths === undefined)
             return undefined;
         const minWidthOf = (field) => minWidths[field] ?? 0;
-        const widthOf = (field) => live?.field === field ? live.width : (widths[field] ?? minWidthOf(field));
+        const fixed = live !== null || columns.some((column) => widths[column.field] !== undefined);
+        // Columns without a chosen width keep the width the auto layout gave them, so the
+        // first drag moves one column instead of snapping every other one to a default.
+        const displayedWidths = () => live?.frozen ?? measured?.fields ?? {};
+        const widthOf = (field) => {
+            if (live?.field === field)
+                return live.width;
+            const chosen = widths[field];
+            if (chosen !== undefined)
+                return chosen;
+            const displayed = displayedWidths()[field];
+            if (displayed !== undefined && displayed > 0)
+                return displayed;
+            return fixed ? Math.max(DEFAULT_COLUMN_WIDTH_PX, minWidthOf(field)) : minWidthOf(field);
+        };
+        const unchosenDisplayedWidths = (dragged) => Object.fromEntries(columns
+            .filter((column) => column.field !== dragged && widths[column.field] === undefined)
+            .map((column) => [column.field, widthOf(column.field)]));
         // The actions column keeps no width of its own: it absorbs the leftover space,
         // so a dragged width holds exactly while the table is wider than its container.
         const total = columns.reduce((sum, column) => sum + widthOf(column.field), 0) +
@@ -24,11 +38,20 @@ export function useColumnSizing({ columns, view, isNarrow, measured, hasExpandCo
             (hasSelectColumn ? SELECT_COLUMN_WIDTH_PX : 0) +
             (measured?.actions ?? 0);
         return {
+            fixed,
             widthOf,
             minWidthOf,
-            tableStyle: { tableLayout: "fixed", width: `max(100%, ${total}px)` },
-            setLiveWidth: (field, width) => setLive({ field, width }),
-            commit,
+            tableStyle: fixed ? { tableLayout: "fixed", width: `max(100%, ${total}px)` } : undefined,
+            setLiveWidth: (field, width) => setLive((previous) => ({
+                field,
+                width,
+                frozen: previous?.frozen ?? { ...measured?.fields },
+            })),
+            commit: (field, width) => {
+                const others = unchosenDisplayedWidths(field);
+                setLive(null);
+                onWidthChange?.(field, width, others);
+            },
         };
     }, [
         active,
@@ -39,6 +62,6 @@ export function useColumnSizing({ columns, view, isNarrow, measured, hasExpandCo
         hasExpandColumn,
         hasSelectColumn,
         measured,
-        commit,
+        onWidthChange,
     ]);
 }

package/dist/web/primitives/data-table/view-menu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Columns3 } from "lucide-react";
+import { Popover as PopoverPrimitive } from "radix-ui";
 import { useOptionalTranslation } from "../../../index.js";
 import { Button as UiButton } from "../../ui/button.js";
 import { SegmentedControl } from "../segmented-select.js";

package/dist/web/primitives/data-table-cell.js

@@ -76,7 +76,7 @@ export function isBadgeColumn(col) {
 export function FirstCellLink({ enabled, empty, emptyLabel, onOpen, children, }) {
     if (!enabled || (empty && emptyLabel === undefined))
         return children;
-    return (_jsx("button", { type: "button", className: "max-w-full cursor-pointer truncate bg-transparent p-0 text-left font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: (e) => {
+    return (_jsx("button", { type: "button", className: "max-w-full cursor-pointer bg-transparent p-0 text-left font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: (e) => {
             e.stopPropagation();
             onOpen();
         }, onKeyDown: (e) => {

package/dist/web/primitives/dialog.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Confirm dialog built on ModalShell. Cancel is always secondary; async
 // onConfirm shows a spinner on the confirm button until the promise settles.
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Loader2 } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
 import { useRef, useState } from "react";
 import { useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";

package/dist/web/primitives/dropdown-menu.d.ts

@@ -1,4 +1,4 @@
-import * as Primitive from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu as Primitive } from "radix-ui";
 import type { ComponentPropsWithoutRef, ReactNode } from "react";
 export declare const DropdownMenu: import("react").FC<Primitive.DropdownMenuProps>;
 export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<Primitive.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/web/primitives/dropdown-menu.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // shadcn-style DropdownMenu built on Radix. Wrappers around
-// @radix-ui/react-dropdown-menu use the same Tailwind token classes as
+// the radix-ui DropdownMenu use the same Tailwind token classes as
 // the other primitives. The caller provides the trigger-button styling
 // through the asChild pattern; this module supplies only Content, Item,
 // Label, Separator, and CheckboxItem with consistent styling.
@@ -11,8 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // - Portaled content renders across stacking-context boundaries, which is
 //   useful in dialogs and popovers.
 // - Keyboard navigation (↑↓ + Home/End) works by default.
-import * as Primitive from "@radix-ui/react-dropdown-menu";
 import { Check } from "lucide-react";
+import { DropdownMenu as Primitive } from "radix-ui";
 import { cn } from "../lib/cn.js";
 export const DropdownMenu = Primitive.Root;
 export const DropdownMenuTrigger = Primitive.Trigger;