@cosmicdrift/kumiko-renderer 0.392.0 → 0.392.2

package/dist/web/primitives/data-table/toolbar.d.ts

@@ -2,5 +2,6 @@ import type { ReactNode } from "react";
 import type { DataTableModel } from "./use-data-table-state.ts";
 export declare function buildModelFacetCluster(m: DataTableModel): ReactNode;
 export declare function hasToolbarContent(m: DataTableModel, facetCluster: ReactNode): boolean;
+export declare function toolbarMergesDescription(m: DataTableModel, facetCluster: ReactNode): boolean;
 export declare function renderToolbar(m: DataTableModel, facetCluster: ReactNode): ReactNode;
-export declare function renderToolbarDescription(m: DataTableModel, hasToolbar: boolean): ReactNode;
+export declare function renderToolbarDescription(m: DataTableModel, hasToolbar: boolean, inToolbarRow?: boolean): ReactNode;

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

@@ -40,14 +40,27 @@ function renderFacetToggle(m, facetCluster) {
     const { testId, facetsOpenNarrow, setFacetsOpenNarrow } = m;
     return (_jsxs(_Fragment, { children: [_jsx(UiButton, { type: "button", variant: "outline", size: "icon", className: "size-11", "aria-label": m.tableTranslate?.("kumiko.list.filter.toggle") ?? "Filter", "aria-expanded": facetsOpenNarrow, "data-testid": testId !== undefined ? `${testId}-filter-toggle` : "filter-toggle", onClick: () => setFacetsOpenNarrow((open) => !open), children: _jsx(SlidersHorizontal, { className: "size-4", "aria-hidden": "true" }) }), facetsOpenNarrow && _jsx("div", { className: "w-full", children: facetCluster })] }));
 }
+// With only end content (no search, no facets) the row has room for the description,
+// so both share one line instead of stacking the description under the actions.
+export function toolbarMergesDescription(m, facetCluster) {
+    return (m.toolbarDescription !== undefined &&
+        m.toolbarStart === undefined &&
+        facetCluster === undefined &&
+        toolbarEndHasContent(m.view, m.exportList, m.toolbarEnd));
+}
 export function renderToolbar(m, facetCluster) {
     const { testId, toolbarStart } = m;
     const collapsesFacetsBehindButton = m.isNarrow && m.fillsHeight && facetCluster !== undefined;
-    return (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar", className: toolbarClassName(m), children: [toolbarStart !== undefined && renderToolbarStart(m, toolbarStart), collapsesFacetsBehindButton ? renderFacetToggle(m, facetCluster) : facetCluster, _jsx(ToolbarEndCluster, { view: m.view, columnLabels: new Map(m.schemaColumns.map((col) => [col.field, col.label])), exportList: m.exportList, toolbarEnd: m.toolbarEnd })] }));
+    const mergesDescription = toolbarMergesDescription(m, facetCluster);
+    return (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar", className: cn(toolbarClassName(m), mergesDescription && "justify-between", mergesDescription && m.fillsHeight && !m.isNarrow && "md:py-2", 
+        // A dashboard panel title above has no inset; the description must share its left edge.
+        mergesDescription && m.fillsHeight && m.insideEmbeddedScreen && "px-0"), children: [mergesDescription && renderToolbarDescription(m, true, true), toolbarStart !== undefined && renderToolbarStart(m, toolbarStart), collapsesFacetsBehindButton ? renderFacetToggle(m, facetCluster) : facetCluster, _jsx(ToolbarEndCluster, { view: m.view, columnLabels: new Map(m.schemaColumns.map((col) => [col.field, col.label])), exportList: m.exportList, toolbarEnd: m.toolbarEnd })] }));
 }
-export function renderToolbarDescription(m, hasToolbar) {
+export function renderToolbarDescription(m, hasToolbar, inToolbarRow = false) {
     const { testId, toolbarDescription, fillsHeight, isNarrow } = m;
     if (toolbarDescription === undefined)
         return null;
-    return (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-description` : "render-list-description", className: cn("m-0 pb-2 text-sm text-muted-foreground", fillsHeight && (isNarrow ? "px-3" : "px-6"), fillsHeight && !hasToolbar && "pt-4"), children: toolbarDescription }));
+    return (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-description` : "render-list-description", className: cn("m-0 text-sm text-muted-foreground", 
+        // min-w-48 lets the actions wrap below the text instead of squeezing it.
+        inToolbarRow ? "min-w-48 flex-1" : "pb-2", !inToolbarRow && fillsHeight && (isNarrow ? "px-3" : "px-6"), !inToolbarRow && fillsHeight && !hasToolbar && "pt-4"), children: toolbarDescription }));
 }

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

@@ -30,6 +30,7 @@ export type DataTableModel = Omit<DataTableProps, "columns"> & {
     readonly rowTestId: (row: ListRowViewModel) => string;
     readonly expansion: RowExpansion | undefined;
     readonly fillsHeight: boolean;
+    readonly insideEmbeddedScreen: boolean;
     readonly selection: ReturnType<typeof useBulkSelection>;
     readonly headerRowRef: ReturnType<typeof useMeasuredColumnWidths>["headerRowRef"];
     readonly pins: ColumnPins<ListColumnViewModel>;

package/dist/web/primitives/data-table/use-data-table-state.js

@@ -1,4 +1,5 @@
 import { useId, useState } from "react";
+import { useIsEmbeddedScreen } from "../../../context/embedded-screen-context.js";
 import { useOptionalLocale, useOptionalTranslation } from "../../../index.js";
 import { useIsNarrowViewport } from "../use-narrow-viewport.js";
 import { isPinningActive, isResizingActive } from "./column-layout-mode.js";
@@ -55,6 +56,7 @@ export function useDataTableState(props) {
     const expansion = resolveRowExpansion(props);
     const isRowExpandable = expansion !== undefined;
     const fillsHeight = scrollBody === true;
+    const insideEmbeddedScreen = useIsEmbeddedScreen();
     const selection = useBulkSelection({
         bulk,
         rows,
@@ -110,6 +112,7 @@ export function useDataTableState(props) {
         rowTestId,
         expansion,
         fillsHeight,
+        insideEmbeddedScreen,
         selection,
         headerRowRef,
         pins,

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

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 import { renderTableContent } from "./data-table/table-content.js";
-import { buildModelFacetCluster, hasToolbarContent, renderToolbar, renderToolbarDescription, } from "./data-table/toolbar.js";
+import { buildModelFacetCluster, hasToolbarContent, renderToolbar, renderToolbarDescription, toolbarMergesDescription, } from "./data-table/toolbar.js";
 import { useDataTableState } from "./data-table/use-data-table-state.js";
 import { screenPaddingClassName } from "./layout.js";
 // `screenPadding`: on a list screen this wrapper IS the screen container,
@@ -28,10 +28,11 @@ export function DefaultDataTable(props) {
     const model = useDataTableState(props);
     const facetCluster = buildModelFacetCluster(model);
     const hasToolbar = hasToolbarContent(model, facetCluster);
+    const mergesDescription = toolbarMergesDescription(model, facetCluster);
     // dashboard-01 pattern: the toolbar (search + facets + "+ New") sits ABOVE
     // the table in the same padding block; no separate bg bar, no screen title
     // (that lives in the shell's breadcrumb). The toolbar is NOT sticky: lists
     // typically scroll with the page container, not internally. Sticky would
     // compete with the topbar.
-    return (_jsxs("div", { className: wrapperClassName(model), children: [!model.fillsHeight && renderToolbarDescription(model, hasToolbar), hasToolbar && renderToolbar(model, facetCluster), model.fillsHeight && renderToolbarDescription(model, hasToolbar), renderTableContent(model)] }));
+    return (_jsxs("div", { className: wrapperClassName(model), children: [!mergesDescription && !model.fillsHeight && renderToolbarDescription(model, hasToolbar), hasToolbar && renderToolbar(model, facetCluster), !mergesDescription && model.fillsHeight && renderToolbarDescription(model, hasToolbar), renderTableContent(model)] }));
 }

package/dist/web/primitives/layout-elements.js

@@ -21,8 +21,8 @@ export function DefaultSection({ id, title, subtitle, children, actions, variant
     // footer — a title-less section still draws the row when actions are
     // present, so a hideTitle tabs-Section with `actions` isn't stranded.
     const TitleTag = insideScreenForm ? "h2" : "h3";
-    const titleBlock = title !== undefined || subtitle !== undefined ? (_jsxs("div", { className: "flex flex-col gap-1", children: [title !== undefined && (_jsxs(TitleTag, { "data-testid": testId !== undefined ? `${testId}-title` : undefined, className: "flex items-center gap-2 text-base font-semibold leading-none tracking-tight", children: [icon !== undefined && _jsx(Icon, { name: icon, className: "size-4 text-muted-foreground" }), title] })), subtitle !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-subtitle` : undefined, className: cn("text-sm text-muted-foreground", insideScreenForm && "text-[13px] text-foreground-secondary"), children: subtitle }))] })) : null;
-    const header = titleBlock !== null || actions !== undefined ? (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [titleBlock, actions !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, className: "ml-auto flex shrink-0 items-center gap-2", children: actions }))] })) : null;
+    const titleBlock = title !== undefined || subtitle !== undefined ? (_jsxs("div", { className: "flex min-w-48 flex-1 flex-col gap-1", children: [title !== undefined && (_jsxs(TitleTag, { "data-testid": testId !== undefined ? `${testId}-title` : undefined, className: "flex items-center gap-2 text-base font-semibold leading-none tracking-tight", children: [icon !== undefined && _jsx(Icon, { name: icon, className: "size-4 text-muted-foreground" }), title] })), subtitle !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-subtitle` : undefined, className: cn("text-sm text-muted-foreground", insideScreenForm && "text-[13px] text-foreground-secondary"), children: subtitle }))] })) : null;
+    const header = titleBlock !== null || actions !== undefined ? (_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-x-4 gap-y-3", children: [titleBlock, actions !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, className: "ml-auto flex shrink-0 items-center gap-2", children: actions }))] })) : null;
     // Inside a form: divider-less section WITHOUT a card surface of its own.
     // The separator lines BETWEEN sections come from the divide-y wrapper in
     // the form.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmicdrift/kumiko-renderer",
-  "version": "0.392.0",
+  "version": "0.392.2",
   "description": "React renderer for Kumiko screens. The root export holds the platform-agnostic logic (primitives contract, hooks, KumikoScreen, navigation and SSE abstractions); ./headless the DOM-free UI logic, ./live the HTTP dispatcher, ./web the browser bindings (HTML primitives, history navigation, EventSource live events, createKumikoApp).",
   "license": "MIT",
   "author": "Marc Frost <marc@cosmicdriftgamestudio.com>",
@@ -48,8 +48,8 @@
     }
   },
   "dependencies": {
-    "@cosmicdrift/kumiko-framework": "0.392.0",
-    "@cosmicdrift/kumiko-types": "0.392.0",
+    "@cosmicdrift/kumiko-framework": "0.392.2",
+    "@cosmicdrift/kumiko-types": "0.392.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-label": "^2.1.8",
@@ -92,8 +92,8 @@
     }
   },
   "devDependencies": {
-    "@cosmicdrift/kumiko-locale-de": "0.392.0",
-    "@cosmicdrift/kumiko-testing": "0.392.0",
+    "@cosmicdrift/kumiko-locale-de": "0.392.2",
+    "@cosmicdrift/kumiko-testing": "0.392.2",
     "@tailwindcss/cli": "^4.3.0",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",

package/src/changes.json

@@ -1,4 +1,10 @@
 [
+  {
+    "version": "0.392.1",
+    "type": "fix",
+    "title": "List descriptions sit beside the toolbar actions",
+    "detail": "A description plus a toolbar with only end content (no search, no facets) renders as one row with the actions on the right, in embedded and full-height lists. Before, a full-height list put the description under the create button. With search or facets the layout is unchanged. Section header actions wrap below the title on narrow widths."
+  },
   {
     "version": "0.392.0",
     "type": "improvement",