npm - @lablup/ui-common - Versions diffs - 0.1.0-alpha.5 → 0.1.0-alpha.6 - Mend

@lablup/ui-common 0.1.0-alpha.5 → 0.1.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/assets/components/ErrorState/ErrorState.css +1 -1
package/dist/components/DataTable/DataTable.d.ts +16 -5
package/dist/components/DataTable/DataTable2.js +31 -64
package/dist/components/DataTable/DataTable2.js.map +1 -1
package/dist/components/EmptyState/EmptyState.d.ts +10 -3
package/dist/components/EmptyState/EmptyState2.js +31 -48
package/dist/components/EmptyState/EmptyState2.js.map +1 -1
package/dist/components/EmptyState/index.d.ts +6 -12
package/dist/components/EmptyState/index.js +2 -3
package/dist/components/ErrorState/ErrorState.d.ts +17 -4
package/dist/components/ErrorState/ErrorState2.js +20 -23
package/dist/components/ErrorState/ErrorState2.js.map +1 -1
package/dist/components/ErrorState/index.d.ts +1 -1
package/dist/components/Tabs/Tabs.d.ts +10 -23
package/dist/components/Tabs/Tabs2.js +127 -146
package/dist/components/Tabs/Tabs2.js.map +1 -1
package/dist/components/Tabs/index.d.ts +2 -2
package/dist/components/Tabs/index.js +2 -3
package/dist/index.js +18 -20
package/package.json +1 -1
package/dist/components/EmptyState/illustrations.d.ts +0 -50
package/dist/components/EmptyState/illustrations.js +0 -571
package/dist/components/EmptyState/illustrations.js.map +0 -1
package/dist/components/Tabs/tabTags.d.ts +0 -9
package/dist/components/Tabs/tabTags.js +0 -11
package/dist/components/Tabs/tabTags.js.map +0 -1

package/dist/assets/components/ErrorState/ErrorState.css CHANGED Viewed

	@@ -1 +1 @@
1	- .error-state{padding:var(--token-paddingXL,2rem);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:200px;display:flex}.error-state__icon{width:64px;height:64px;margin-bottom:var(--token-paddingLG,1.5rem);color:var(--token-colorError,#c82333);transition:transform var(--token-motionDurationMid,.2s);background-color:#ff4d4f1a;border-radius:50%;justify-content:center;align-items:center;display:flex}.error-state__icon svg{width:48px;height:48px}.error-state__title{margin:0 0 var(--token-paddingSM,.5rem);font-size:var(--token-fontSizeXL,1.25rem);color:var(--token-colorText,#141414);font-weight:600;line-height:1.4}.error-state__message{margin:0 0 var(--token-paddingLG,1.5rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#595959);max-width:480px;line-height:1.5}.error-state__actions{gap:var(--token-padding,.75rem);flex-wrap:wrap;justify-content:center;display:flex}.error-state__action-btn{min-width:120px}.error-state--~~network~~ .error-state__icon{color:var(--token-~~colorWarning~~,#~~9a5d00~~);background-color:#~~faad141a~~}.error-state--~~configuration~~ .error-state__icon{color:var(--token-~~colorPrimary~~,#~~8b5cf6~~);background-color~~:var(--token-colorPrimaryBg,#8b5cf61a)}.error-state--model .error-state__icon{color:var(--token-colorError,#c82333);background-color~~:#~~ff4d4f1a~~}.error-state--~~permission~~ .error-state__icon{color:var(--token-~~colorWarning~~,#~~9a5d00~~);background-color~~:#faad141a}.error-state--generic .error-state__icon{color~~:var(--token-~~colorError~~,#~~c82333~~)~~;background-color:#ff4d4f1a~~}@media (prefers-reduced-motion:reduce){.error-state__icon{transition:none}}@media (max-width:767px){.error-state{padding:var(--token-paddingLG,1.5rem)}.error-state__icon{width:56px;height:56px;margin-bottom:var(--token-paddingMD,1rem)}.error-state__icon svg{width:40px;height:40px}.error-state__title{font-size:var(--token-fontSizeLG,1rem)}.error-state__message{font-size:var(--token-fontSize,.875rem)}.error-state__actions{flex-direction:column;width:100%}.error-state__action-btn{width:100%;min-width:unset}}
1	+ .error-state{padding:var(--token-paddingXL,2rem);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:200px;display:flex}.error-state__icon{width:64px;height:64px;margin-bottom:var(--token-paddingLG,1.5rem);color:var(--token-colorError,#c82333);transition:transform var(--token-motionDurationMid,.2s);background-color:#ff4d4f1a;border-radius:50%;justify-content:center;align-items:center;display:flex}.error-state__icon svg{width:48px;height:48px}.error-state__title{margin:0 0 var(--token-paddingSM,.5rem);font-size:var(--token-fontSizeXL,1.25rem);color:var(--token-colorText,#141414);font-weight:600;line-height:1.4}.error-state__message{margin:0 0 var(--token-paddingLG,1.5rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#595959);max-width:480px;line-height:1.5}.error-state__actions{gap:var(--token-padding,.75rem);flex-wrap:wrap;justify-content:center;display:flex}.error-state__action-btn{min-width:120px}.error-state--danger .error-state__icon{color:var(--token-colorError,#c82333);background-color:#ff4d4f1a}.error-state--warning .error-state__icon{color:var(--token-colorWarning,#9a5d00);background-color:#faad141a}.error-state--accent .error-state__icon{color:var(--token-colorPrimary,#8b5cf6);background-color:var(--token-colorPrimaryBg,#8b5cf61a)}@media (prefers-reduced-motion:reduce){.error-state__icon{transition:none}}@media (max-width:767px){.error-state{padding:var(--token-paddingLG,1.5rem)}.error-state__icon{width:56px;height:56px;margin-bottom:var(--token-paddingMD,1rem)}.error-state__icon svg{width:40px;height:40px}.error-state__title{font-size:var(--token-fontSizeLG,1rem)}.error-state__message{font-size:var(--token-fontSize,.875rem)}.error-state__actions{flex-direction:column;width:100%}.error-state__action-btn{width:100%;min-width:unset}}

package/dist/components/DataTable/DataTable.d.ts CHANGED Viewed

@@ -88,11 +88,22 @@ export interface DataTableProps<T> {
     /** When `true`, the loading slot replaces the table body. */
     loading?: boolean;
     /**
-     * When provided, column widths and visibility settings are persisted
-     * to `localStorage` under this key. Use a stable, namespaced string
-     * (e.g. `"sessions.activeTab"`).
+     * Column widths and visibility, controlled by the caller.
+     *
+     * This component used to take a `persistKey` and write to `localStorage`
+     * itself. Storage is a policy decision that belongs to the consumer: where
+     * it goes, under which key, whether it is per user or per workspace, and
+     * whether it exists at all in a host that has no `localStorage`. A
+     * rendering component that answers those questions on its own cannot be
+     * reused by a consumer that answers them differently.
+     */
+    columnState?: DataTablePersistedState;
+    /**
+     * Called whenever the user resizes a column or toggles its visibility.
+     * Pair it with `columnState` to persist wherever the consumer keeps
+     * preferences; omit both to get a table that forgets on unmount.
      */
-    persistKey?: string;
+    onColumnStateChange?: (state: DataTablePersistedState) => void;
     /** Extra class for the table's wrapping element. */
     className?: string;
     /** ARIA label for the table. Defaults to "Data table". */
@@ -128,6 +139,6 @@ export interface DataTableProps<T> {
      */
     onSortChange?: (columnId: string | undefined, direction: SortDirection | undefined) => void;
 }
-declare function DataTableInner<T>({ columns, rows, getRowKey, emptyState, loadingState, loading, persistKey, className, ariaLabel, testId, onRowClick, sortColumnId: controlledSortColumnId, sortDirection: controlledSortDirection, onSortChange, }: DataTableProps<T>): import("react").JSX.Element;
+declare function DataTableInner<T>({ columns, rows, getRowKey, emptyState, loadingState, loading, columnState, onColumnStateChange, className, ariaLabel, testId, onRowClick, sortColumnId: controlledSortColumnId, sortDirection: controlledSortDirection, onSortChange, }: DataTableProps<T>): import("react").JSX.Element;
 export declare const DataTable: typeof DataTableInner;
 export default DataTable;

package/dist/components/DataTable/DataTable2.js CHANGED Viewed

@@ -2,44 +2,11 @@
 import { memo as e, useCallback as t, useEffect as n, useMemo as r, useRef as i, useState as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/DataTable/DataTable.tsx
-var c = "dataTable";
-function l(e) {
-	return `${c}.${e}`;
-}
-function u(e) {
-	if (!e || typeof window > "u") return {
-		widths: {},
-		visibility: {}
-	};
-	try {
-		let t = window.localStorage.getItem(l(e));
-		if (!t) return {
-			widths: {},
-			visibility: {}
-		};
-		let n = JSON.parse(t);
-		if (typeof n != "object" || !n) return {
-			widths: {},
-			visibility: {}
-		};
-		let r = n;
-		return {
-			widths: typeof r.widths == "object" && r.widths !== null ? r.widths : {},
-			visibility: typeof r.visibility == "object" && r.visibility !== null ? r.visibility : {}
-		};
-	} catch {
-		return {
-			widths: {},
-			visibility: {}
-		};
-	}
-}
-function d(e, t) {
-	if (!(!e || typeof window > "u")) try {
-		window.localStorage.setItem(l(e), JSON.stringify(t));
-	} catch {}
-}
-function f(e, t) {
+var c = {
+	widths: {},
+	visibility: {}
+};
+function l(e, t) {
 	let n = e.map((e, t) => ({
 		row: e,
 		i: t
@@ -49,7 +16,7 @@ function f(e, t) {
 		return r === 0 ? e.i - n.i : r;
 	}), n.map(({ row: e }) => e);
 }
-function p(e, t) {
+function u(e, t) {
 	let { sortComparator: n } = e;
 	if (n) return (e, r) => n(e, r, t);
 	let r = e.sortValueAccessor;
@@ -62,10 +29,10 @@ function p(e, t) {
 		return o = typeof i == "number" && typeof a == "number" ? i - a : String(i).localeCompare(String(a)), t === "asc" ? o : -o;
 	} : () => 0;
 }
-function m(e, t, n) {
+function d(e, t, n) {
 	if (e.sortable) return e.id === t ? n === "asc" ? "ascending" : "descending" : "none";
 }
-function h({ direction: e }) {
+function f({ direction: e }) {
 	return e === "none" ? /* @__PURE__ */ o("span", {
 		className: "data-table__sort-icon data-table__sort-icon--none",
 		"aria-hidden": "true",
@@ -123,11 +90,11 @@ function h({ direction: e }) {
 		})
 	});
 }
-function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _, loading: v = !1, persistKey: y, className: b = "", ariaLabel: x = "Data table", testId: S, onRowClick: C, sortColumnId: w, sortDirection: T, onSortChange: E }) {
-	let [D, O] = a(() => u(y));
+function p({ columns: e, rows: p, getRowKey: m, emptyState: h, loadingState: g, loading: _ = !1, columnState: v, onColumnStateChange: y, className: b = "", ariaLabel: x = "Data table", testId: S, onRowClick: C, sortColumnId: w, sortDirection: T, onSortChange: E }) {
+	let [D, O] = a(() => v ?? c);
 	n(() => {
-		O(u(y));
-	}, [y]);
+		v && O(v);
+	}, [v]);
 	let k = w !== void 0 || T !== void 0, [A, j] = a(void 0), [M, N] = a(void 0), P = k ? w : A, F = k ? T : M, I = t((e) => {
 		if (!e.sortable) return;
 		let t, n;
@@ -163,22 +130,22 @@ function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _,
 			z.current = null, window.removeEventListener("mousemove", r), window.removeEventListener("mouseup", i);
 		};
 		window.addEventListener("mousemove", r), window.addEventListener("mouseup", i);
-	}, []);
+	}, []), V = i(D);
 	n(() => {
-		d(y, D);
-	}, [y, D]);
-	let V = r(() => {
-		if (!P || !F) return c;
+		V.current !== D && (V.current = D, y?.(D));
+	}, [D, y]);
+	let H = r(() => {
+		if (!P || !F) return p;
 		let t = e.find((e) => e.id === P);
-		return t?.sortable ? f(c, p(t, F)) : c;
+		return t?.sortable ? l(p, u(t, F)) : p;
 	}, [
-		c,
+		p,
 		e,
 		P,
 		F
-	]), H = ["data-table", b].filter(Boolean).join(" ");
+	]), U = ["data-table", b].filter(Boolean).join(" ");
 	return /* @__PURE__ */ o("div", {
-		className: H,
+		className: U,
 		"data-testid": S,
 		children: /* @__PURE__ */ s("table", {
 			className: "data-table__table",
@@ -201,7 +168,7 @@ function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _,
 								e.align && `data-table__cell--align-${e.align}`
 							].filter(Boolean).join(" "),
 							style: t ? { width: `${String(t)}px` } : void 0,
-							"aria-sort": m(e, P, F),
+							"aria-sort": d(e, P, F),
 							onClick: e.sortable ? () => {
 								I(e);
 							} : void 0,
@@ -214,7 +181,7 @@ function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _,
 									className: "data-table__head-label",
 									children: e.header
 								}),
-								e.sortable && /* @__PURE__ */ o(h, { direction: n && F ? F : "none" }),
+								e.sortable && /* @__PURE__ */ o(f, { direction: n && F ? F : "none" }),
 								!e.noResize && /* @__PURE__ */ o("div", {
 									role: "separator",
 									"aria-orientation": "vertical",
@@ -229,22 +196,22 @@ function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _,
 				})
 			}), /* @__PURE__ */ o("tbody", {
 				className: "data-table__body",
-				children: v ? /* @__PURE__ */ o("tr", {
+				children: _ ? /* @__PURE__ */ o("tr", {
 					className: "data-table__row data-table__row--state",
 					children: /* @__PURE__ */ o("td", {
 						colSpan: L.length || 1,
 						className: "data-table__state-cell",
-						children: _ ?? /* @__PURE__ */ o("div", { className: "data-table__loading" })
+						children: g ?? /* @__PURE__ */ o("div", { className: "data-table__loading" })
 					})
-				}) : V.length === 0 ? /* @__PURE__ */ o("tr", {
+				}) : H.length === 0 ? /* @__PURE__ */ o("tr", {
 					className: "data-table__row data-table__row--state",
 					children: /* @__PURE__ */ o("td", {
 						colSpan: L.length || 1,
 						className: "data-table__state-cell",
-						children: g
+						children: h
 					})
-				}) : V.map((e, t) => {
-					let n = l(e, t);
+				}) : H.map((e, t) => {
+					let n = m(e, t);
 					return /* @__PURE__ */ o("tr", {
 						className: ["data-table__row", C && "data-table__row--clickable"].filter(Boolean).join(" "),
 						onClick: C ? () => {
@@ -269,9 +236,9 @@ function g({ columns: e, rows: c, getRowKey: l, emptyState: g, loadingState: _,
 		})
 	});
 }
-var _ = e(g);
+var m = e(p);
 //#endregion
-export { _ as DataTable, _ as default };
+export { m as DataTable, m as default };
 //# sourceMappingURL=DataTable2.js.map
 import "../../assets/components/DataTable/DataTable.css";

package/dist/components/DataTable/DataTable2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable2.js","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/*\n DataTable Component (epic #2730 / issue #2738 · sort: epic #2859 / issue #2861)\n \n Generic, type-safe table primitive modeled after the Backend.AI WebUI\n * `BAITable`. Designed so future menus (Models, Sessions, Data, ...)\n * can share one tabular surface instead of inventing a new one each\n * time.\n \n Features (V1 — additional capabilities planned for follow-up issues):\n * - Type-safe column definitions with custom cell renderers\n * - Optional column-visibility persistence via `localStorage` when\n * `persistKey` is supplied\n * - Optional resizable columns (drag the right edge of a header cell)\n * with widths persisted alongside visibility\n * - Empty-state slot rendered when `rows` is empty\n * - Loading-state slot rendered when `loading` is `true`\n * - Stable `getRowKey` accessor so rows with the same identifier remain\n * referentially identical across event-driven updates\n \n Sorting (V2 — epic #2859 / issue #2861):\n * - Optional per-column sortable flag with sort value accessor or\n * custom comparator\n * - Optional defaultSortDirection per column\n * - Controlled (`sortColumnId` + `sortDirection` + `onSortChange`) and\n * uncontrolled (internal state) modes\n * - Accessible `aria-sort` attributes on header cells\n * - Keyboard activation (Enter / Space) for sortable headers\n * - Stable sort — equal-valued rows retain their original order\n * - Sorting never mutates the original `rows` prop\n \n The component is intentionally domain-agnostic — it MUST NOT carry\n * Session, Model, or Agent-specific knowledge. The first consumer is\n * `SessionListTable` (epic #2730 / #2738) but the API is generic.\n /\n\nimport {\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactNode,\n} from \"react\";\nimport \"./DataTable.css\";\n\n// ============================================================================\n// Public types\n// ============================================================================\n\n/* Direction a column is currently sorted. /\nexport type SortDirection = \"asc\" \| \"desc\";\n\nexport interface DataTableColumn<T> {\n /* Unique identifier for the column. Used for visibility + width persistence. /\n id: string;\n /* Header label. /\n header: ReactNode;\n /\n Cell renderer. Receives the row and returns a React node. Pure\n * functions are encouraged so memoization stays effective.\n /\n render: (row: T, index: number) => ReactNode;\n /* Optional minimum column width in pixels. Defaults to 80. /\n minWidth?: number;\n /* Optional initial width in pixels (only honored on the first paint). /\n initialWidth?: number;\n /* When `true`, the column cannot be resized. Defaults to `false`. /\n noResize?: boolean;\n /* When `true`, the column cannot be hidden by the user. Defaults to `false`. /\n alwaysVisible?: boolean;\n /* Extra `class` for the column's `<th>` and `<td>` cells. /\n className?: string;\n /\n When provided, the value is exposed via the `align` style on the\n * column's cells. Useful for right-aligned numeric columns.\n /\n align?: \"left\" \| \"right\" \| \"center\";\n\n // ---- Sorting API (added epic #2859 / issue #2861) -------------------------\n\n /\n When `true`, the column header renders a sort affordance and clicking\n * (or pressing Enter / Space) cycles through ascending → descending →\n * unsorted states. Defaults to `false`.\n /\n sortable?: boolean;\n /\n Extracts a primitive comparable value from a row for sorting purposes.\n * Used when the default ascending/descending behavior is sufficient.\n * Mutually exclusive with `sortComparator` — if both are provided,\n * `sortComparator` takes precedence.\n \n @example\n * ```tsx\n * sortValueAccessor: (row) => row.name.toLowerCase()\n * ```\n /\n sortValueAccessor?: (row: T) => string \| number \| boolean \| null \| undefined;\n /\n Custom comparator used for sorting. Receives two rows and the active\n * sort direction. Return a negative number if `a` should come first, a\n * positive number if `b` should come first, or `0` if they are equal.\n * The table applies a stable fallback on `0` to preserve original order.\n \n @example\n * ```tsx\n * sortComparator: (a, b, dir) =>\n * dir === \"asc\"\n * ? a.createdAt - b.createdAt\n * : b.createdAt - a.createdAt\n * ```\n /\n sortComparator?: (a: T, b: T, direction: SortDirection) => number;\n /\n The sort direction applied when this column is first activated.\n * Defaults to `\"asc\"`.\n /\n defaultSortDirection?: SortDirection;\n}\n\nexport interface DataTablePersistedState {\n /* column id → user-overridden width in pixels. /\n widths: Record<string, number>;\n /* column id → visibility flag. Missing keys count as visible. /\n visibility: Record<string, boolean>;\n}\n\nexport interface DataTableProps<T> {\n /* Column definitions, in display order. /\n columns: DataTableColumn<T>[];\n /* Row data. /\n rows: T[];\n /\n Stable identifier accessor — used as the React key for each row.\n * Must be deterministic for the lifetime of the row.\n /\n getRowKey: (row: T, index: number) => string;\n /* Render this node when `rows` is empty. /\n emptyState?: ReactNode;\n /* Render this node when `loading` is `true`. /\n loadingState?: ReactNode;\n /* When `true`, the loading slot replaces the table body. /\n loading?: boolean;\n /\n When provided, column widths and visibility settings are persisted\n * to `localStorage` under this key. Use a stable, namespaced string\n * (e.g. `\"sessions.activeTab\"`).\n /\n persistKey?: string;\n /* Extra class for the table's wrapping element. /\n className?: string;\n /* ARIA label for the table. Defaults to \"Data table\". /\n ariaLabel?: string;\n /* Test ID for testing harnesses. /\n testId?: string;\n /\n Callback invoked when a row is clicked. When provided, rows render\n * with a clickable affordance (cursor: pointer + keyboard binding).\n /\n onRowClick?: (row: T) => void;\n\n // ---- Sorting props (added epic #2859 / issue #2861) -----------------------\n\n /\n Controlled — the column currently being sorted. Pass `undefined` to\n * indicate no active sort. When this prop is present, the component\n * operates in controlled mode: the caller is responsible for updating\n * the sort state via `onSortChange`.\n /\n sortColumnId?: string;\n /\n Controlled — the direction of the active sort. Ignored when\n * `sortColumnId` is `undefined`.\n /\n sortDirection?: SortDirection;\n /\n Called when the user activates a sortable column header. In\n * controlled mode the caller must propagate this back as\n * `sortColumnId` / `sortDirection`. In uncontrolled mode this prop is\n * purely observational.\n \n @param columnId The column being sorted, or `undefined` when the\n * sort is cleared.\n * @param direction The new direction.\n /\n onSortChange?: (\n columnId: string \| undefined,\n direction: SortDirection \| undefined,\n ) => void;\n}\n\n// ============================================================================\n// Storage helpers\n// ============================================================================\n\nconst STORAGE_NAMESPACE = \"dataTable\";\n\nfunction buildStorageKey(persistKey: string): string {\n return `${STORAGE_NAMESPACE}.${persistKey}`;\n}\n\n/\n Load persisted state from `localStorage`. Returns an empty state on\n * any failure (missing storage, malformed JSON, schema drift) so the\n * component degrades gracefully.\n /\nfunction loadPersistedState(persistKey: string \| undefined): DataTablePersistedState {\n if (!persistKey \|\| typeof window === \"undefined\") {\n return { widths: {}, visibility: {} };\n }\n try {\n const raw = window.localStorage.getItem(buildStorageKey(persistKey));\n if (!raw) return { widths: {}, visibility: {} };\n const parsed = JSON.parse(raw) as unknown;\n if (typeof parsed !== \"object\" \|\| parsed === null) {\n return { widths: {}, visibility: {} };\n }\n const obj = parsed as { widths?: unknown; visibility?: unknown };\n const widths =\n typeof obj.widths === \"object\" && obj.widths !== null\n ? (obj.widths as Record<string, number>)\n : {};\n const visibility =\n typeof obj.visibility === \"object\" && obj.visibility !== null\n ? (obj.visibility as Record<string, boolean>)\n : {};\n return { widths, visibility };\n } catch {\n return { widths: {}, visibility: {} };\n }\n}\n\nfunction savePersistedState(\n persistKey: string \| undefined,\n state: DataTablePersistedState,\n): void {\n if (!persistKey \|\| typeof window === \"undefined\") return;\n try {\n window.localStorage.setItem(buildStorageKey(persistKey), JSON.stringify(state));\n } catch {\n // Quota exceeded / disabled storage — silently ignore.\n }\n}\n\n// ============================================================================\n// Sorting helpers\n// ============================================================================\n\n/\n Stable sort — rows with equal comparison result keep their original\n * relative order. We achieve stability by augmenting each row with its\n * original index and using that as a tie-breaker.\n \n The input array is never mutated.\n /\nfunction stableSort<T>(rows: T[], comparator: (a: T, b: T) => number): T[] {\n const indexed = rows.map((row, i) => ({ row, i }));\n indexed.sort((a, b) => {\n const result = comparator(a.row, b.row);\n return result !== 0 ? result : a.i - b.i;\n });\n return indexed.map(({ row }) => row);\n}\n\n/\n Builds a comparator from a `DataTableColumn` + active sort direction.\n * Falls back to string comparison when neither `sortComparator` nor\n * `sortValueAccessor` is provided on the column.\n /\nfunction buildComparator<T>(\n col: DataTableColumn<T>,\n direction: SortDirection,\n): (a: T, b: T) => number {\n const { sortComparator } = col;\n if (sortComparator) {\n return (a, b) => sortComparator(a, b, direction);\n }\n const accessor = col.sortValueAccessor;\n if (accessor) {\n return (a, b) => {\n const av = accessor(a);\n const bv = accessor(b);\n // Nullish values sort last regardless of direction.\n if (av == null && bv == null) return 0;\n if (av == null) return 1;\n if (bv == null) return -1;\n let cmp: number;\n if (typeof av === \"number\" && typeof bv === \"number\") {\n cmp = av - bv;\n } else {\n cmp = String(av).localeCompare(String(bv));\n }\n return direction === \"asc\" ? cmp : -cmp;\n };\n }\n // No accessor — unsortable in practice (column should not be sortable).\n return () => 0;\n}\n\n/\n Returns the `aria-sort` attribute value for a column header cell.\n \n @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort\n /\nfunction ariaSortValue(\n col: DataTableColumn<unknown>,\n activeSortColumnId: string \| undefined,\n activeSortDirection: SortDirection \| undefined,\n): \"ascending\" \| \"descending\" \| \"none\" \| undefined {\n if (!col.sortable) return undefined;\n if (col.id === activeSortColumnId) {\n return activeSortDirection === \"asc\" ? \"ascending\" : \"descending\";\n }\n return \"none\";\n}\n\n// Sort indicator icons rendered as inline SVG so there is no external\n// asset dependency. They intentionally reuse design-token colours so they\n// automatically adapt to light / dark themes.\n\nfunction SortIcon({ direction }: { direction: SortDirection \| \"none\" }) {\n if (direction === \"none\") {\n // Neutral chevron stack — both arrows in muted colour\n return (\n <span\n className=\"data-table__sort-icon data-table__sort-icon--none\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"10\"\n height=\"14\"\n viewBox=\"0 0 10 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" opacity=\"0.35\" />\n <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" opacity=\"0.35\" />\n </svg>\n </span>\n );\n }\n if (direction === \"asc\") {\n return (\n <span\n className=\"data-table__sort-icon data-table__sort-icon--asc\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"10\"\n height=\"14\"\n viewBox=\"0 0 10 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" />\n <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" opacity=\"0.25\" />\n </svg>\n </span>\n );\n }\n return (\n <span\n className=\"data-table__sort-icon data-table__sort-icon--desc\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"10\"\n height=\"14\"\n viewBox=\"0 0 10 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" opacity=\"0.25\" />\n <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" />\n </svg>\n </span>\n );\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nfunction DataTableInner<T>({\n columns,\n rows,\n getRowKey,\n emptyState,\n loadingState,\n loading = false,\n persistKey,\n className = \"\",\n ariaLabel = \"Data table\",\n testId,\n onRowClick,\n // Sorting (controlled)\n sortColumnId: controlledSortColumnId,\n sortDirection: controlledSortDirection,\n onSortChange,\n}: DataTableProps<T>) {\n // ---- Persisted state (widths + visibility) -------------------------------\n const [persisted, setPersisted] = useState<DataTablePersistedState>(() =>\n loadPersistedState(persistKey),\n );\n\n // Refresh persisted state when the storage key changes (defensive — the\n // expected use case is a stable key).\n useEffect(() => {\n setPersisted(loadPersistedState(persistKey));\n }, [persistKey]);\n\n // ---- Sorting state (uncontrolled fallback) -------------------------------\n //\n // Controlled mode is detected by the presence of `sortColumnId` as a prop\n // (the caller explicitly manages the sort column). Using only this prop as\n // the signal (rather than OR-ing with `sortDirection`) avoids a\n // pathological state where `sortDirection` is set but `sortColumnId` is\n // not, which would enter controlled mode with no sort effect.\n //\n // Note: TypeScript cannot distinguish \"prop not passed\" from \"prop passed\n // as undefined\", so we rely on the convention that controlled callers\n // always pass both `sortColumnId` and `sortDirection` together.\n const isControlled =\n controlledSortColumnId !== undefined \|\| controlledSortDirection !== undefined;\n\n const [internalSortColumnId, setInternalSortColumnId] = useState<string \| undefined>(\n undefined,\n );\n const [internalSortDirection, setInternalSortDirection] = useState<\n SortDirection \| undefined\n >(undefined);\n\n const activeSortColumnId = isControlled\n ? controlledSortColumnId\n : internalSortColumnId;\n const activeSortDirection = isControlled\n ? controlledSortDirection\n : internalSortDirection;\n\n /* Handle a click / keypress on a sortable column header. */\n const handleSortToggle = useCallback(\n (col: DataTableColumn<T>) => {\n if (!col.sortable) return;\n\n let nextColumnId: string \| undefined;\n let nextDirection: SortDirection \| undefined;\n\n if (activeSortColumnId !== col.id) {\n // Activate this column in its default direction.\n nextColumnId = col.id;\n nextDirection = col.defaultSortDirection ?? \"asc\";\n } else if (activeSortDirection === (col.defaultSortDirection ?? \"asc\")) {\n // Flip to the opposite direction.\n nextColumnId = col.id;\n nextDirection = activeSortDirection === \"asc\" ? \"desc\" : \"asc\";\n } else {\n // Already in the non-default direction — clear the sort.\n nextColumnId = undefined;\n nextDirection = undefined;\n }\n\n if (!isControlled) {\n setInternalSortColumnId(nextColumnId);\n setInternalSortDirection(nextDirection);\n }\n onSortChange?.(nextColumnId, nextDirection);\n },\n [activeSortColumnId, activeSortDirection, isControlled, onSortChange],\n );\n\n // ---- Visibility computation (column always-visible wins) -----------------\n const visibleColumns = useMemo(\n () =>\n columns.filter((col) => {\n if (col.alwaysVisible) return true;\n const flag = persisted.visibility[col.id];\n return flag !== false;\n }),\n [columns, persisted.visibility],\n );\n\n // ---- Width resolution ----------------------------------------------------\n const resolveWidth = useCallback(\n (col: DataTableColumn<T>): number \| undefined => {\n const persistedWidth = persisted.widths[col.id];\n if (typeof persistedWidth === \"number\" && persistedWidth > 0) {\n return persistedWidth;\n }\n return col.initialWidth;\n },\n [persisted.widths],\n );\n\n // ---- Resize handling -----------------------------------------------------\n const resizeRef = useRef<{\n columnId: string;\n startX: number;\n startWidth: number;\n minWidth: number;\n } \| null>(null);\n\n const beginResize = useCallback(\n (\n ev: React.MouseEvent<HTMLDivElement>,\n col: DataTableColumn<T>,\n currentWidth: number,\n ) => {\n if (col.noResize) return;\n ev.preventDefault();\n ev.stopPropagation();\n resizeRef.current = {\n columnId: col.id,\n startX: ev.clientX,\n startWidth: currentWidth,\n minWidth: col.minWidth ?? 80,\n };\n\n const onMove = (e: MouseEvent) => {\n const ref = resizeRef.current;\n if (!ref) return;\n const delta = e.clientX - ref.startX;\n const next = Math.max(ref.minWidth, ref.startWidth + delta);\n setPersisted((prev) => ({\n ...prev,\n widths: { ...prev.widths, [ref.columnId]: next },\n }));\n };\n const onUp = () => {\n resizeRef.current = null;\n window.removeEventListener(\"mousemove\", onMove);\n window.removeEventListener(\"mouseup\", onUp);\n };\n window.addEventListener(\"mousemove\", onMove);\n window.addEventListener(\"mouseup\", onUp);\n },\n [],\n );\n\n // Persist when state changes\n useEffect(() => {\n savePersistedState(persistKey, persisted);\n }, [persistKey, persisted]);\n\n // ---- Sorted rows --------------------------------------------------------\n const sortedRows = useMemo(() => {\n if (!activeSortColumnId \|\| !activeSortDirection) return rows;\n const col = columns.find((c) => c.id === activeSortColumnId);\n if (!col?.sortable) return rows;\n return stableSort(rows, buildComparator(col, activeSortDirection));\n }, [rows, columns, activeSortColumnId, activeSortDirection]);\n\n // ---- Body rendering ------------------------------------------------------\n const composedClassName = [\"data-table\", className].filter(Boolean).join(\" \");\n\n const renderBody = () => {\n if (loading) {\n return (\n <tr className=\"data-table__row data-table__row--state\">\n <td colSpan={visibleColumns.length \|\| 1} className=\"data-table__state-cell\">\n {loadingState ?? <div className=\"data-table__loading\" />}\n </td>\n </tr>\n );\n }\n if (sortedRows.length === 0) {\n return (\n <tr className=\"data-table__row data-table__row--state\">\n <td colSpan={visibleColumns.length \|\| 1} className=\"data-table__state-cell\">\n {emptyState}\n </td>\n </tr>\n );\n }\n return sortedRows.map((row, index) => {\n const key = getRowKey(row, index);\n return (\n <tr\n key={key}\n className={[\"data-table__row\", onRowClick && \"data-table__row--clickable\"]\n .filter(Boolean)\n .join(\" \")}\n onClick={\n onRowClick\n ? () => {\n onRowClick(row);\n }\n : undefined\n }\n onKeyDown={\n onRowClick\n ? (e) => {\n if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.preventDefault();\n onRowClick(row);\n }\n }\n : undefined\n }\n tabIndex={onRowClick ? 0 : undefined}\n role={onRowClick ? \"button\" : undefined}\n >\n {visibleColumns.map((col) => (\n <td\n key={col.id}\n className={[\n \"data-table__cell\",\n col.className,\n col.align && `data-table__cell--align-${col.align}`,\n ]\n .filter(Boolean)\n .join(\" \")}\n >\n {col.render(row, index)}\n </td>\n ))}\n </tr>\n );\n });\n };\n\n return (\n <div className={composedClassName} data-testid={testId}>\n <table className=\"data-table__table\" aria-label={ariaLabel} role=\"table\">\n <thead className=\"data-table__head\">\n <tr className=\"data-table__row data-table__row--head\">\n {visibleColumns.map((col) => {\n const width = resolveWidth(col);\n const isSortActive = col.sortable && col.id === activeSortColumnId;\n\n return (\n <th\n key={col.id}\n scope=\"col\"\n className={[\n \"data-table__cell\",\n \"data-table__cell--head\",\n col.sortable && \"data-table__cell--sortable\",\n isSortActive && \"data-table__cell--sort-active\",\n col.className,\n col.align && `data-table__cell--align-${col.align}`,\n ]\n .filter(Boolean)\n .join(\" \")}\n style={width ? { width: `${String(width)}px` } : undefined}\n aria-sort={ariaSortValue(\n col as DataTableColumn<unknown>,\n activeSortColumnId,\n activeSortDirection,\n )}\n onClick={\n col.sortable\n ? () => {\n handleSortToggle(col);\n }\n : undefined\n }\n onKeyDown={\n col.sortable\n ? (e) => {\n if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.preventDefault();\n handleSortToggle(col);\n }\n }\n : undefined\n }\n tabIndex={col.sortable ? 0 : undefined}\n >\n <span className=\"data-table__head-label\">{col.header}</span>\n {col.sortable && (\n <SortIcon\n direction={\n isSortActive && activeSortDirection\n ? activeSortDirection\n : \"none\"\n }\n />\n )}\n {!col.noResize && (\n <div\n role=\"separator\"\n aria-orientation=\"vertical\"\n className=\"data-table__resize-handle\"\n onMouseDown={(e) => {\n beginResize(e, col, width ?? col.minWidth ?? 120);\n }}\n />\n )}\n </th>\n );\n })}\n </tr>\n </thead>\n <tbody className=\"data-table__body\">{renderBody()}</tbody>\n </table>\n </div>\n );\n}\n\n// Memoize while preserving the generic signature.\nexport const DataTable = memo(DataTableInner) as typeof DataTableInner;\n\nexport default DataTable;\n"],"mappings":"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"}
1	+ {"version":3,"file":"DataTable2.js","names":[],"sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["/*\n DataTable Component (epic #2730 / issue #2738 · sort: epic #2859 / issue #2861)\n \n Generic, type-safe table primitive modeled after the Backend.AI WebUI\n * `BAITable`. Designed so future menus (Models, Sessions, Data, ...)\n * can share one tabular surface instead of inventing a new one each\n * time.\n \n Features (V1 — additional capabilities planned for follow-up issues):\n * - Type-safe column definitions with custom cell renderers\n * - Optional column-visibility persistence via `localStorage` when\n * `persistKey` is supplied\n * - Optional resizable columns (drag the right edge of a header cell)\n * with widths persisted alongside visibility\n * - Empty-state slot rendered when `rows` is empty\n * - Loading-state slot rendered when `loading` is `true`\n * - Stable `getRowKey` accessor so rows with the same identifier remain\n * referentially identical across event-driven updates\n \n Sorting (V2 — epic #2859 / issue #2861):\n * - Optional per-column sortable flag with sort value accessor or\n * custom comparator\n * - Optional defaultSortDirection per column\n * - Controlled (`sortColumnId` + `sortDirection` + `onSortChange`) and\n * uncontrolled (internal state) modes\n * - Accessible `aria-sort` attributes on header cells\n * - Keyboard activation (Enter / Space) for sortable headers\n * - Stable sort — equal-valued rows retain their original order\n * - Sorting never mutates the original `rows` prop\n \n The component is intentionally domain-agnostic — it MUST NOT carry\n * Session, Model, or Agent-specific knowledge. The first consumer is\n * `SessionListTable` (epic #2730 / #2738) but the API is generic.\n /\n\nimport {\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n type ReactNode,\n} from \"react\";\nimport \"./DataTable.css\";\n\n// ============================================================================\n// Public types\n// ============================================================================\n\n/* Direction a column is currently sorted. /\nexport type SortDirection = \"asc\" \| \"desc\";\n\nexport interface DataTableColumn<T> {\n /* Unique identifier for the column. Used for visibility + width persistence. /\n id: string;\n /* Header label. /\n header: ReactNode;\n /\n Cell renderer. Receives the row and returns a React node. Pure\n * functions are encouraged so memoization stays effective.\n /\n render: (row: T, index: number) => ReactNode;\n /* Optional minimum column width in pixels. Defaults to 80. /\n minWidth?: number;\n /* Optional initial width in pixels (only honored on the first paint). /\n initialWidth?: number;\n /* When `true`, the column cannot be resized. Defaults to `false`. /\n noResize?: boolean;\n /* When `true`, the column cannot be hidden by the user. Defaults to `false`. /\n alwaysVisible?: boolean;\n /* Extra `class` for the column's `<th>` and `<td>` cells. /\n className?: string;\n /\n When provided, the value is exposed via the `align` style on the\n * column's cells. Useful for right-aligned numeric columns.\n /\n align?: \"left\" \| \"right\" \| \"center\";\n\n // ---- Sorting API (added epic #2859 / issue #2861) -------------------------\n\n /\n When `true`, the column header renders a sort affordance and clicking\n * (or pressing Enter / Space) cycles through ascending → descending →\n * unsorted states. Defaults to `false`.\n /\n sortable?: boolean;\n /\n Extracts a primitive comparable value from a row for sorting purposes.\n * Used when the default ascending/descending behavior is sufficient.\n * Mutually exclusive with `sortComparator` — if both are provided,\n * `sortComparator` takes precedence.\n \n @example\n * ```tsx\n * sortValueAccessor: (row) => row.name.toLowerCase()\n * ```\n /\n sortValueAccessor?: (row: T) => string \| number \| boolean \| null \| undefined;\n /\n Custom comparator used for sorting. Receives two rows and the active\n * sort direction. Return a negative number if `a` should come first, a\n * positive number if `b` should come first, or `0` if they are equal.\n * The table applies a stable fallback on `0` to preserve original order.\n \n @example\n * ```tsx\n * sortComparator: (a, b, dir) =>\n * dir === \"asc\"\n * ? a.createdAt - b.createdAt\n * : b.createdAt - a.createdAt\n * ```\n /\n sortComparator?: (a: T, b: T, direction: SortDirection) => number;\n /\n The sort direction applied when this column is first activated.\n * Defaults to `\"asc\"`.\n /\n defaultSortDirection?: SortDirection;\n}\n\nexport interface DataTablePersistedState {\n /* column id → user-overridden width in pixels. /\n widths: Record<string, number>;\n /* column id → visibility flag. Missing keys count as visible. /\n visibility: Record<string, boolean>;\n}\n\nexport interface DataTableProps<T> {\n /* Column definitions, in display order. /\n columns: DataTableColumn<T>[];\n /* Row data. /\n rows: T[];\n /\n Stable identifier accessor — used as the React key for each row.\n * Must be deterministic for the lifetime of the row.\n /\n getRowKey: (row: T, index: number) => string;\n /* Render this node when `rows` is empty. /\n emptyState?: ReactNode;\n /* Render this node when `loading` is `true`. /\n loadingState?: ReactNode;\n /* When `true`, the loading slot replaces the table body. /\n loading?: boolean;\n /\n Column widths and visibility, controlled by the caller.\n \n This component used to take a `persistKey` and write to `localStorage`\n * itself. Storage is a policy decision that belongs to the consumer: where\n * it goes, under which key, whether it is per user or per workspace, and\n * whether it exists at all in a host that has no `localStorage`. A\n * rendering component that answers those questions on its own cannot be\n * reused by a consumer that answers them differently.\n /\n columnState?: DataTablePersistedState;\n /\n Called whenever the user resizes a column or toggles its visibility.\n * Pair it with `columnState` to persist wherever the consumer keeps\n * preferences; omit both to get a table that forgets on unmount.\n /\n onColumnStateChange?: (state: DataTablePersistedState) => void;\n /* Extra class for the table's wrapping element. /\n className?: string;\n /* ARIA label for the table. Defaults to \"Data table\". /\n ariaLabel?: string;\n /* Test ID for testing harnesses. /\n testId?: string;\n /\n Callback invoked when a row is clicked. When provided, rows render\n * with a clickable affordance (cursor: pointer + keyboard binding).\n /\n onRowClick?: (row: T) => void;\n\n // ---- Sorting props (added epic #2859 / issue #2861) -----------------------\n\n /\n Controlled — the column currently being sorted. Pass `undefined` to\n * indicate no active sort. When this prop is present, the component\n * operates in controlled mode: the caller is responsible for updating\n * the sort state via `onSortChange`.\n /\n sortColumnId?: string;\n /\n Controlled — the direction of the active sort. Ignored when\n * `sortColumnId` is `undefined`.\n /\n sortDirection?: SortDirection;\n /\n Called when the user activates a sortable column header. In\n * controlled mode the caller must propagate this back as\n * `sortColumnId` / `sortDirection`. In uncontrolled mode this prop is\n * purely observational.\n \n @param columnId The column being sorted, or `undefined` when the\n * sort is cleared.\n * @param direction The new direction.\n /\n onSortChange?: (\n columnId: string \| undefined,\n direction: SortDirection \| undefined,\n ) => void;\n}\n\nconst EMPTY_COLUMN_STATE: DataTablePersistedState = { widths: {}, visibility: {} };\n\n// ============================================================================\n// Sorting helpers\n// ============================================================================\n\n/\n Stable sort — rows with equal comparison result keep their original\n * relative order. We achieve stability by augmenting each row with its\n * original index and using that as a tie-breaker.\n \n The input array is never mutated.\n /\nfunction stableSort<T>(rows: T[], comparator: (a: T, b: T) => number): T[] {\n const indexed = rows.map((row, i) => ({ row, i }));\n indexed.sort((a, b) => {\n const result = comparator(a.row, b.row);\n return result !== 0 ? result : a.i - b.i;\n });\n return indexed.map(({ row }) => row);\n}\n\n/\n Builds a comparator from a `DataTableColumn` + active sort direction.\n * Falls back to string comparison when neither `sortComparator` nor\n * `sortValueAccessor` is provided on the column.\n /\nfunction buildComparator<T>(\n col: DataTableColumn<T>,\n direction: SortDirection,\n): (a: T, b: T) => number {\n const { sortComparator } = col;\n if (sortComparator) {\n return (a, b) => sortComparator(a, b, direction);\n }\n const accessor = col.sortValueAccessor;\n if (accessor) {\n return (a, b) => {\n const av = accessor(a);\n const bv = accessor(b);\n // Nullish values sort last regardless of direction.\n if (av == null && bv == null) return 0;\n if (av == null) return 1;\n if (bv == null) return -1;\n let cmp: number;\n if (typeof av === \"number\" && typeof bv === \"number\") {\n cmp = av - bv;\n } else {\n cmp = String(av).localeCompare(String(bv));\n }\n return direction === \"asc\" ? cmp : -cmp;\n };\n }\n // No accessor — unsortable in practice (column should not be sortable).\n return () => 0;\n}\n\n/\n Returns the `aria-sort` attribute value for a column header cell.\n \n @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort\n /\nfunction ariaSortValue(\n col: DataTableColumn<unknown>,\n activeSortColumnId: string \| undefined,\n activeSortDirection: SortDirection \| undefined,\n): \"ascending\" \| \"descending\" \| \"none\" \| undefined {\n if (!col.sortable) return undefined;\n if (col.id === activeSortColumnId) {\n return activeSortDirection === \"asc\" ? \"ascending\" : \"descending\";\n }\n return \"none\";\n}\n\n// Sort indicator icons rendered as inline SVG so there is no external\n// asset dependency. They intentionally reuse design-token colours so they\n// automatically adapt to light / dark themes.\n\nfunction SortIcon({ direction }: { direction: SortDirection \| \"none\" }) {\n if (direction === \"none\") {\n // Neutral chevron stack — both arrows in muted colour\n return (\n <span\n className=\"data-table__sort-icon data-table__sort-icon--none\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"10\"\n height=\"14\"\n viewBox=\"0 0 10 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" opacity=\"0.35\" />\n <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" opacity=\"0.35\" />\n </svg>\n </span>\n );\n }\n if (direction === \"asc\") {\n return (\n <span\n className=\"data-table__sort-icon data-table__sort-icon--asc\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"10\"\n height=\"14\"\n viewBox=\"0 0 10 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" />\n <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" opacity=\"0.25\" />\n </svg>\n </span>\n );\n }\n return (\n <span\n className=\"data-table__sort-icon data-table__sort-icon--desc\"\n aria-hidden=\"true\"\n >\n <svg\n width=\"10\"\n height=\"14\"\n viewBox=\"0 0 10 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path d=\"M5 1L1 5H9L5 1Z\" fill=\"currentColor\" opacity=\"0.25\" />\n <path d=\"M5 13L9 9H1L5 13Z\" fill=\"currentColor\" />\n </svg>\n </span>\n );\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nfunction DataTableInner<T>({\n columns,\n rows,\n getRowKey,\n emptyState,\n loadingState,\n loading = false,\n columnState,\n onColumnStateChange,\n className = \"\",\n ariaLabel = \"Data table\",\n testId,\n onRowClick,\n // Sorting (controlled)\n sortColumnId: controlledSortColumnId,\n sortDirection: controlledSortDirection,\n onSortChange,\n}: DataTableProps<T>) {\n // ---- Column state (widths + visibility) ----------------------------------\n //\n // Held internally so a caller that does not care about persistence gets a\n // working table, and re-seeded whenever the caller supplies a new one.\n const [persisted, setPersisted] = useState<DataTablePersistedState>(\n () => columnState ?? EMPTY_COLUMN_STATE,\n );\n\n useEffect(() => {\n if (columnState) setPersisted(columnState);\n }, [columnState]);\n\n // ---- Sorting state (uncontrolled fallback) -------------------------------\n //\n // Controlled mode is detected by the presence of `sortColumnId` as a prop\n // (the caller explicitly manages the sort column). Using only this prop as\n // the signal (rather than OR-ing with `sortDirection`) avoids a\n // pathological state where `sortDirection` is set but `sortColumnId` is\n // not, which would enter controlled mode with no sort effect.\n //\n // Note: TypeScript cannot distinguish \"prop not passed\" from \"prop passed\n // as undefined\", so we rely on the convention that controlled callers\n // always pass both `sortColumnId` and `sortDirection` together.\n const isControlled =\n controlledSortColumnId !== undefined \|\| controlledSortDirection !== undefined;\n\n const [internalSortColumnId, setInternalSortColumnId] = useState<string \| undefined>(\n undefined,\n );\n const [internalSortDirection, setInternalSortDirection] = useState<\n SortDirection \| undefined\n >(undefined);\n\n const activeSortColumnId = isControlled\n ? controlledSortColumnId\n : internalSortColumnId;\n const activeSortDirection = isControlled\n ? controlledSortDirection\n : internalSortDirection;\n\n /* Handle a click / keypress on a sortable column header. */\n const handleSortToggle = useCallback(\n (col: DataTableColumn<T>) => {\n if (!col.sortable) return;\n\n let nextColumnId: string \| undefined;\n let nextDirection: SortDirection \| undefined;\n\n if (activeSortColumnId !== col.id) {\n // Activate this column in its default direction.\n nextColumnId = col.id;\n nextDirection = col.defaultSortDirection ?? \"asc\";\n } else if (activeSortDirection === (col.defaultSortDirection ?? \"asc\")) {\n // Flip to the opposite direction.\n nextColumnId = col.id;\n nextDirection = activeSortDirection === \"asc\" ? \"desc\" : \"asc\";\n } else {\n // Already in the non-default direction — clear the sort.\n nextColumnId = undefined;\n nextDirection = undefined;\n }\n\n if (!isControlled) {\n setInternalSortColumnId(nextColumnId);\n setInternalSortDirection(nextDirection);\n }\n onSortChange?.(nextColumnId, nextDirection);\n },\n [activeSortColumnId, activeSortDirection, isControlled, onSortChange],\n );\n\n // ---- Visibility computation (column always-visible wins) -----------------\n const visibleColumns = useMemo(\n () =>\n columns.filter((col) => {\n if (col.alwaysVisible) return true;\n const flag = persisted.visibility[col.id];\n return flag !== false;\n }),\n [columns, persisted.visibility],\n );\n\n // ---- Width resolution ----------------------------------------------------\n const resolveWidth = useCallback(\n (col: DataTableColumn<T>): number \| undefined => {\n const persistedWidth = persisted.widths[col.id];\n if (typeof persistedWidth === \"number\" && persistedWidth > 0) {\n return persistedWidth;\n }\n return col.initialWidth;\n },\n [persisted.widths],\n );\n\n // ---- Resize handling -----------------------------------------------------\n const resizeRef = useRef<{\n columnId: string;\n startX: number;\n startWidth: number;\n minWidth: number;\n } \| null>(null);\n\n const beginResize = useCallback(\n (\n ev: React.MouseEvent<HTMLDivElement>,\n col: DataTableColumn<T>,\n currentWidth: number,\n ) => {\n if (col.noResize) return;\n ev.preventDefault();\n ev.stopPropagation();\n resizeRef.current = {\n columnId: col.id,\n startX: ev.clientX,\n startWidth: currentWidth,\n minWidth: col.minWidth ?? 80,\n };\n\n const onMove = (e: MouseEvent) => {\n const ref = resizeRef.current;\n if (!ref) return;\n const delta = e.clientX - ref.startX;\n const next = Math.max(ref.minWidth, ref.startWidth + delta);\n setPersisted((prev) => ({\n ...prev,\n widths: { ...prev.widths, [ref.columnId]: next },\n }));\n };\n const onUp = () => {\n resizeRef.current = null;\n window.removeEventListener(\"mousemove\", onMove);\n window.removeEventListener(\"mouseup\", onUp);\n };\n window.addEventListener(\"mousemove\", onMove);\n window.addEventListener(\"mouseup\", onUp);\n },\n [],\n );\n\n // Report changes so the caller can persist them. Skipped while `persisted`\n // still holds what the caller last handed in, so echoing the callback back\n // through `columnState` does not loop.\n const reported = useRef(persisted);\n useEffect(() => {\n if (reported.current === persisted) return;\n reported.current = persisted;\n onColumnStateChange?.(persisted);\n }, [persisted, onColumnStateChange]);\n\n // ---- Sorted rows --------------------------------------------------------\n const sortedRows = useMemo(() => {\n if (!activeSortColumnId \|\| !activeSortDirection) return rows;\n const col = columns.find((c) => c.id === activeSortColumnId);\n if (!col?.sortable) return rows;\n return stableSort(rows, buildComparator(col, activeSortDirection));\n }, [rows, columns, activeSortColumnId, activeSortDirection]);\n\n // ---- Body rendering ------------------------------------------------------\n const composedClassName = [\"data-table\", className].filter(Boolean).join(\" \");\n\n const renderBody = () => {\n if (loading) {\n return (\n <tr className=\"data-table__row data-table__row--state\">\n <td colSpan={visibleColumns.length \|\| 1} className=\"data-table__state-cell\">\n {loadingState ?? <div className=\"data-table__loading\" />}\n </td>\n </tr>\n );\n }\n if (sortedRows.length === 0) {\n return (\n <tr className=\"data-table__row data-table__row--state\">\n <td colSpan={visibleColumns.length \|\| 1} className=\"data-table__state-cell\">\n {emptyState}\n </td>\n </tr>\n );\n }\n return sortedRows.map((row, index) => {\n const key = getRowKey(row, index);\n return (\n <tr\n key={key}\n className={[\"data-table__row\", onRowClick && \"data-table__row--clickable\"]\n .filter(Boolean)\n .join(\" \")}\n onClick={\n onRowClick\n ? () => {\n onRowClick(row);\n }\n : undefined\n }\n onKeyDown={\n onRowClick\n ? (e) => {\n if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.preventDefault();\n onRowClick(row);\n }\n }\n : undefined\n }\n tabIndex={onRowClick ? 0 : undefined}\n role={onRowClick ? \"button\" : undefined}\n >\n {visibleColumns.map((col) => (\n <td\n key={col.id}\n className={[\n \"data-table__cell\",\n col.className,\n col.align && `data-table__cell--align-${col.align}`,\n ]\n .filter(Boolean)\n .join(\" \")}\n >\n {col.render(row, index)}\n </td>\n ))}\n </tr>\n );\n });\n };\n\n return (\n <div className={composedClassName} data-testid={testId}>\n <table className=\"data-table__table\" aria-label={ariaLabel} role=\"table\">\n <thead className=\"data-table__head\">\n <tr className=\"data-table__row data-table__row--head\">\n {visibleColumns.map((col) => {\n const width = resolveWidth(col);\n const isSortActive = col.sortable && col.id === activeSortColumnId;\n\n return (\n <th\n key={col.id}\n scope=\"col\"\n className={[\n \"data-table__cell\",\n \"data-table__cell--head\",\n col.sortable && \"data-table__cell--sortable\",\n isSortActive && \"data-table__cell--sort-active\",\n col.className,\n col.align && `data-table__cell--align-${col.align}`,\n ]\n .filter(Boolean)\n .join(\" \")}\n style={width ? { width: `${String(width)}px` } : undefined}\n aria-sort={ariaSortValue(\n col as DataTableColumn<unknown>,\n activeSortColumnId,\n activeSortDirection,\n )}\n onClick={\n col.sortable\n ? () => {\n handleSortToggle(col);\n }\n : undefined\n }\n onKeyDown={\n col.sortable\n ? (e) => {\n if (e.key === \"Enter\" \|\| e.key === \" \") {\n e.preventDefault();\n handleSortToggle(col);\n }\n }\n : undefined\n }\n tabIndex={col.sortable ? 0 : undefined}\n >\n <span className=\"data-table__head-label\">{col.header}</span>\n {col.sortable && (\n <SortIcon\n direction={\n isSortActive && activeSortDirection\n ? activeSortDirection\n : \"none\"\n }\n />\n )}\n {!col.noResize && (\n <div\n role=\"separator\"\n aria-orientation=\"vertical\"\n className=\"data-table__resize-handle\"\n onMouseDown={(e) => {\n beginResize(e, col, width ?? col.minWidth ?? 120);\n }}\n />\n )}\n </th>\n );\n })}\n </tr>\n </thead>\n <tbody className=\"data-table__body\">{renderBody()}</tbody>\n </table>\n </div>\n );\n}\n\n// Memoize while preserving the generic signature.\nexport const DataTable = memo(DataTableInner) as typeof DataTableInner;\n\nexport default DataTable;\n"],"mappings":"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"}

package/dist/components/EmptyState/EmptyState.d.ts CHANGED Viewed

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-export type IllustrationType = "chat" | "models" | "creations" | "text" | "benchmark" | "logs" | "statistics" | "error" | "schedule" | "generic";
 export interface EmptyStateAction {
     label: string;
     onClick: () => void;
@@ -10,8 +9,16 @@ export interface EmptyStateSecondaryAction {
     onClick?: () => void;
 }
 export interface EmptyStateProps {
-    /** Type of illustration to display */
-    illustration: IllustrationType;
+    /**
+     * The drawing shown above the text.
+     *
+     * This used to be one of ten names: chat, models, creations, benchmark,
+     * logs, statistics, schedule and so on, each resolving to an SVG shipped
+     * inside this package. Those names are one product's information
+     * architecture, and no other consumer has a "creations" screen to draw for.
+     * A consumer passes its own artwork and keeps its own vocabulary.
+     */
+    illustration?: ReactNode;
     /** Main heading */
     title: string;
     /** Descriptive text */

package/dist/components/EmptyState/EmptyState2.js CHANGED Viewed

@@ -1,79 +1,62 @@
 import { Button as e } from "../Button/Button2.js";
-import { BenchmarkIllustration as t, ChatIllustration as n, CreationsIllustration as r, ErrorIllustration as i, GenericIllustration as a, LogsIllustration as o, ModelsIllustration as s, ScheduleIllustration as c, StatisticsIllustration as l, TextIllustration as u } from "./illustrations.js";
 /* empty css           */
-import { memo as d, useCallback as f, useMemo as p } from "react";
-import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
+import { memo as t, useCallback as n, useMemo as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/EmptyState/EmptyState.tsx
-var _ = {
-	chat: n,
-	models: s,
-	creations: r,
-	text: u,
-	benchmark: t,
-	logs: o,
-	statistics: l,
-	error: i,
-	schedule: c,
-	generic: a
-};
-function v({ illustration: t, title: n, description: r, primaryAction: i, secondaryAction: a, children: o, className: s = "", showIllustration: c = !0 }) {
-	let l = i?.onClick, u = a?.onClick, d = f(() => {
-		l?.();
-	}, [l]), v = f(() => {
-		u?.();
-	}, [u]), y = p(() => _[t], [t]), b = p(() => [
-		"empty-state",
-		`empty-state--${t}`,
-		s
-	].filter(Boolean).join(" "), [t, s]);
-	return /* @__PURE__ */ g("div", {
-		className: b,
+function s({ illustration: t, title: s, description: c, primaryAction: l, secondaryAction: u, children: d, className: f = "", showIllustration: p = !0 }) {
+	let m = l?.onClick, h = u?.onClick, g = n(() => {
+		m?.();
+	}, [m]), _ = n(() => {
+		h?.();
+	}, [h]), v = r(() => ["empty-state", f].filter(Boolean).join(" "), [f]);
+	return /* @__PURE__ */ o("div", {
+		className: v,
 		role: "status",
 		"aria-live": "polite",
 		children: [
-			c && /* @__PURE__ */ h("div", {
+			p && t && /* @__PURE__ */ a("div", {
 				className: "empty-state__illustration",
-				children: /* @__PURE__ */ h(y, { className: "empty-state__icon" })
+				children: t
 			}),
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ o("div", {
 				className: "empty-state__content",
 				children: [
-					/* @__PURE__ */ h("h3", {
+					/* @__PURE__ */ a("h3", {
 						className: "empty-state__title",
-						children: n
+						children: s
 					}),
-					/* @__PURE__ */ h("p", {
+					/* @__PURE__ */ a("p", {
 						className: "empty-state__description",
-						children: r
+						children: c
 					}),
-					o
+					d
 				]
 			}),
-			(i || a) && /* @__PURE__ */ g("div", {
+			(l || u) && /* @__PURE__ */ o("div", {
 				className: "empty-state__actions",
-				children: [i && /* @__PURE__ */ h(e, {
+				children: [l && /* @__PURE__ */ a(e, {
 					variant: "primary",
-					onClick: d,
+					onClick: g,
 					className: "empty-state__action-btn empty-state__action-btn--primary",
-					children: i.label
-				}), a && /* @__PURE__ */ h(m, { children: a.href ? /* @__PURE__ */ h("a", {
-					href: a.href,
+					children: l.label
+				}), u && /* @__PURE__ */ a(i, { children: u.href ? /* @__PURE__ */ a("a", {
+					href: u.href,
 					className: "empty-state__action-link",
-					onClick: v,
-					children: a.label
-				}) : /* @__PURE__ */ h(e, {
+					onClick: _,
+					children: u.label
+				}) : /* @__PURE__ */ a(e, {
 					variant: "ghost",
-					onClick: v,
+					onClick: _,
 					className: "empty-state__action-btn empty-state__action-btn--secondary",
-					children: a.label
+					children: u.label
 				}) })]
 			})
 		]
 	});
 }
-var y = d(v);
+var c = t(s);
 //#endregion
-export { y as EmptyState };
+export { c as EmptyState };
 //# sourceMappingURL=EmptyState2.js.map
 import "../../assets/components/EmptyState/EmptyState.css";

package/dist/components/EmptyState/EmptyState2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EmptyState2.js","names":[],"sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["/*\n EmptyState Component\n \n Unified empty state component with consistent layout and styling.\n * Provides configurable illustration, title, description, and call-to-action buttons.\n \n Features:\n * - Multiple illustration types for different contexts\n * - Primary and secondary action buttons, plus a `children` slot for an\n * onboarding state that needs more than two (issue #3903)\n * - Accessible (ARIA attributes, semantic HTML)\n * - Dark/light theme support via design tokens\n * - Fade-in animation with reduced motion support\n * - Responsive design\n * - Memoized for optimal performance\n /\n\nimport { memo, useCallback, useMemo, type ReactNode } from \"react\";\nimport { Button } from \"../Button\";\nimport {\n ChatIllustration,\n ModelsIllustration,\n CreationsIllustration,\n TextIllustration,\n BenchmarkIllustration,\n LogsIllustration,\n StatisticsIllustration,\n ErrorIllustration,\n ScheduleIllustration,\n GenericIllustration,\n} from \"./~~illustrations\";\nimport \"./~~EmptyState.css\";\n\nexport ~~type IllustrationType =\n \| \"chat\"\n \| \"models\"\n \| \"creations\"\n \| \"text\"\n \| \"benchmark\"\n \| \"logs\"\n \| \"statistics\"\n \| \"error\"\n \| \"schedule\"\n \| \"generic\";\n\nexport~~ interface EmptyStateAction {\n label: string;\n onClick: () => void;\n}\n\nexport interface EmptyStateSecondaryAction {\n label: string;\n href?: string;\n onClick?: () => void;\n}\n\nexport interface EmptyStateProps {\n /* ~~Type~~ of ~~illustration~~ to ~~display~~ /\n illustration: ~~IllustrationType~~;\n /* Main heading /\n title: string;\n /* Descriptive text /\n description: string;\n /* Primary action button /\n primaryAction?: EmptyStateAction;\n /* Secondary action (link or button) /\n secondaryAction?: EmptyStateSecondaryAction;\n /\n Extra content rendered under the description, inside the same text column.\n \n The two action props cover the common one-or-two-button case. An\n * onboarding state that has to offer more than that (e.g. the Data Hub's\n * three ingest paths, issue #3903) renders them here instead of growing a\n * page-local copy of this component.\n /\n children?: ReactNode;\n /* Additional CSS classes /\n className?: string;\n /* Whether to show illustration (default: true) /\n showIllustration?: boolean;\n}\n\n/\n Static map of illustration types to components.\n * Defined outside component to avoid recreation on each render.\n /\nconst illustrationMap: Record<\n IllustrationType,\n React.ComponentType<{ className?: string }>\n> = {\n chat: ChatIllustration,\n models: ModelsIllustration,\n creations: CreationsIllustration,\n text: TextIllustration,\n benchmark: BenchmarkIllustration,\n logs: LogsIllustration,\n statistics: StatisticsIllustration,\n error: ErrorIllustration,\n schedule: ScheduleIllustration,\n generic: GenericIllustration,\n};\n\n/\n EmptyState Component\n \n Displays an empty state with illustration, text, and optional actions.\n * Memoized to prevent unnecessary re-renders.\n */\nfunction EmptyStateComponent({\n illustration,\n title,\n description,\n primaryAction,\n secondaryAction,\n children,\n className = \"\",\n showIllustration = true,\n}: EmptyStateProps) {\n // Use stable callback references by extracting onClick functions\n const primaryOnClick = primaryAction?.onClick;\n const secondaryOnClick = secondaryAction?.onClick;\n\n const handlePrimaryAction = useCallback(() => {\n primaryOnClick?.();\n }, [primaryOnClick]);\n\n const handleSecondaryAction = useCallback(() => {\n secondaryOnClick?.();\n }, [secondaryOnClick]);\n\n // Memoize ~~illustration component lookup\n const Illustration = useMemo(() => illustrationMap[illustration], [illustration]);\n\n // Memoize~~ class name computation\n const containerClass = useMemo(\n () ~~=>\n~~ [\"empty-state\", ~~`empty-state--${illustration}`,~~ className]\n .filter(Boolean)\n .join(\" \"),\n [~~illustration,~~ className],\n );\n\n return (\n <div className={containerClass} role=\"status\" aria-live=\"polite\">\n {showIllustration && (\n <div className=\"empty-state__illustration\"~~>\n <Illustration className=\"empty-state__icon\" />\n~~ </div>\n )}\n\n <div className=\"empty-state__content\">\n <h3 className=\"empty-state__title\">{title}</h3>\n <p className=\"empty-state__description\">{description}</p>\n {children}\n </div>\n\n {(primaryAction \|\| secondaryAction) && (\n <div className=\"empty-state__actions\">\n {primaryAction && (\n <Button\n variant=\"primary\"\n onClick={handlePrimaryAction}\n className=\"empty-state__action-btn empty-state__action-btn--primary\"\n >\n {primaryAction.label}\n </Button>\n )}\n\n {secondaryAction && (\n <>\n {secondaryAction.href ? (\n <a\n href={secondaryAction.href}\n className=\"empty-state__action-link\"\n onClick={handleSecondaryAction}\n >\n {secondaryAction.label}\n </a>\n ) : (\n <Button\n variant=\"ghost\"\n onClick={handleSecondaryAction}\n className=\"empty-state__action-btn empty-state__action-btn--secondary\"\n >\n {secondaryAction.label}\n </Button>\n )}\n </>\n )}\n </div>\n )}\n </div>\n );\n}\n\nexport const EmptyState = memo(EmptyStateComponent);\n"],"mappings":"~~;;;;;;AAsFA~~,~~IAAM,IAGF;CACF,MAAM;CACN,QAAQ;CACR,WAAW;CACX,MAAM;CACN,WAAW;CACX,MAAM;CACN,YAAY;CACZ,OAAO;CACP,UAAU;CACV,~~SAAS~~;AACX;AAQA~~,~~SAAS,~~EAAoB,EAC3B,iBACA,UACA,gBACA,kBACA,oBACA,aACA,eAAY,IACZ,sBAAmB,MACD;CAElB,IAAM,IAAiB,GAAe,SAChC,IAAmB,GAAiB,SAEpC,IAAsB,QAAkB;EAC5C,IAAiB;CACnB,GAAG,CAAC,CAAc,CAAC,GAEb,IAAwB,QAAkB;EAC9C,IAAmB;CACrB,GAAG,CAAC,CAAgB,CAAC,GAGf,~~IAAe~~,~~QAAc~~,~~EAAgB,IAAe,~~CAAC,~~CAAY~~,~~CAAC,GAG1E,IAAiB,QAEnB;EAAC;EAAe,gBAAgB;EAAgB;~~CAAS,CAAC,~~CACvD~~,OAAO,OAAO,CAAC,~~CACf~~,KAAK,GAAG,~~GACb~~,CAAC,~~GAAc,~~CAAS,~~CAC1B~~;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAS,aAAU;EAAxD,UAAA;GACG,~~KACC~~,kBAAC,OAAD;IAAK,WAAU;~~IACb~~,UAAA~~,kBAAC,GAAD,EAAc,WAAU,oBAAqB,CAAA~~;~~GAC1C~~,CAAA;~~GAGP~~,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,MAAD;MAAI,WAAU;MAAsB,UAAA;KAAU,CAAA;KAC9C,kBAAC,KAAD;MAAG,WAAU;MAA4B,UAAA;KAAe,CAAA;KACvD;IACE;;IAEH,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAA,GAAA,EAAA,UACG,EAAgB,OACf,kBAAC,KAAD;KACE,MAAM,EAAgB;KACtB,WAAU;KACV,SAAS;KAER,UAAA,EAAgB;IAChB,CAAA,IAEH,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,EAEV,CAAA,CAED;;EAEJ;;AAET;AAEA,IAAa,IAAa,EAAK,CAAmB"}
1	+ {"version":3,"file":"EmptyState2.js","names":[],"sources":["../../../src/components/EmptyState/EmptyState.tsx"],"sourcesContent":["/*\n EmptyState Component\n \n Unified empty state component with consistent layout and styling.\n * Provides configurable illustration, title, description, and call-to-action buttons.\n \n Features:\n * - Multiple illustration types for different contexts\n * - Primary and secondary action buttons, plus a `children` slot for an\n * onboarding state that needs more than two (issue #3903)\n * - Accessible (ARIA attributes, semantic HTML)\n * - Dark/light theme support via design tokens\n * - Fade-in animation with reduced motion support\n * - Responsive design\n * - Memoized for optimal performance\n /\n\nimport { memo, useCallback, useMemo, type ReactNode } from \"react\";\nimport { Button } from \"../Button\";\nimport \"./EmptyState.css\";\n\nexport interface EmptyStateAction {\n label: string;\n onClick: () => void;\n}\n\nexport interface EmptyStateSecondaryAction {\n label: string;\n href?: string;\n onClick?: () => void;\n}\n\nexport interface EmptyStateProps {\n /\n The drawing shown above the text.\n \n This used to be one of ten names: chat, models, creations, benchmark,\n * logs, statistics, schedule and so on, each resolving to an SVG shipped\n * inside this package. Those names are one product's information\n * architecture, and no other consumer has a \"creations\" screen to draw for.\n * A consumer passes its own artwork and keeps its own vocabulary.\n /\n illustration?: ReactNode;\n /* Main heading /\n title: string;\n /* Descriptive text /\n description: string;\n /* Primary action button /\n primaryAction?: EmptyStateAction;\n /* Secondary action (link or button) /\n secondaryAction?: EmptyStateSecondaryAction;\n /\n Extra content rendered under the description, inside the same text column.\n \n The two action props cover the common one-or-two-button case. An\n * onboarding state that has to offer more than that (e.g. the Data Hub's\n * three ingest paths, issue #3903) renders them here instead of growing a\n * page-local copy of this component.\n /\n children?: ReactNode;\n /* Additional CSS classes /\n className?: string;\n /* Whether to show illustration (default: true) /\n showIllustration?: boolean;\n}\n\n/\n EmptyState Component\n \n Displays an empty state with illustration, text, and optional actions.\n * Memoized to prevent unnecessary re-renders.\n */\nfunction EmptyStateComponent({\n illustration,\n title,\n description,\n primaryAction,\n secondaryAction,\n children,\n className = \"\",\n showIllustration = true,\n}: EmptyStateProps) {\n // Use stable callback references by extracting onClick functions\n const primaryOnClick = primaryAction?.onClick;\n const secondaryOnClick = secondaryAction?.onClick;\n\n const handlePrimaryAction = useCallback(() => {\n primaryOnClick?.();\n }, [primaryOnClick]);\n\n const handleSecondaryAction = useCallback(() => {\n secondaryOnClick?.();\n }, [secondaryOnClick]);\n\n // Memoize class name computation\n const containerClass = useMemo(\n () => [\"empty-state\", className].filter(Boolean).join(\" \"),\n [className],\n );\n\n return (\n <div className={containerClass} role=\"status\" aria-live=\"polite\">\n {showIllustration && illustration && (\n <div className=\"empty-state__illustration\">{illustration}</div>\n )}\n\n <div className=\"empty-state__content\">\n <h3 className=\"empty-state__title\">{title}</h3>\n <p className=\"empty-state__description\">{description}</p>\n {children}\n </div>\n\n {(primaryAction \|\| secondaryAction) && (\n <div className=\"empty-state__actions\">\n {primaryAction && (\n <Button\n variant=\"primary\"\n onClick={handlePrimaryAction}\n className=\"empty-state__action-btn empty-state__action-btn--primary\"\n >\n {primaryAction.label}\n </Button>\n )}\n\n {secondaryAction && (\n <>\n {secondaryAction.href ? (\n <a\n href={secondaryAction.href}\n className=\"empty-state__action-link\"\n onClick={handleSecondaryAction}\n >\n {secondaryAction.label}\n </a>\n ) : (\n <Button\n variant=\"ghost\"\n onClick={handleSecondaryAction}\n className=\"empty-state__action-btn empty-state__action-btn--secondary\"\n >\n {secondaryAction.label}\n </Button>\n )}\n </>\n )}\n </div>\n )}\n </div>\n );\n}\n\nexport const EmptyState = memo(EmptyStateComponent);\n"],"mappings":";;;;;AAwEA,SAAS,EAAoB,EAC3B,iBACA,UACA,gBACA,kBACA,oBACA,aACA,eAAY,IACZ,sBAAmB,MACD;CAElB,IAAM,IAAiB,GAAe,SAChC,IAAmB,GAAiB,SAEpC,IAAsB,QAAkB;EAC5C,IAAiB;CACnB,GAAG,CAAC,CAAc,CAAC,GAEb,IAAwB,QAAkB;EAC9C,IAAmB;CACrB,GAAG,CAAC,CAAgB,CAAC,GAGf,IAAiB,QACf,CAAC,eAAe,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,GACzD,CAAC,CAAS,CACZ;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW;EAAgB,MAAK;EAAS,aAAU;EAAxD,UAAA;GACG,KAAoB,KACnB,kBAAC,OAAD;IAAK,WAAU;IAA6B,UAAA;GAAkB,CAAA;GAGhE,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,MAAD;MAAI,WAAU;MAAsB,UAAA;KAAU,CAAA;KAC9C,kBAAC,KAAD;MAAG,WAAU;MAA4B,UAAA;KAAe,CAAA;KACvD;IACE;;IAEH,KAAiB,MACjB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACG,KACC,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAc;IACT,CAAA,GAGT,KACC,kBAAA,GAAA,EAAA,UACG,EAAgB,OACf,kBAAC,KAAD;KACE,MAAM,EAAgB;KACtB,WAAU;KACV,SAAS;KAER,UAAA,EAAgB;IAChB,CAAA,IAEH,kBAAC,GAAD;KACE,SAAQ;KACR,SAAS;KACT,WAAU;KAET,UAAA,EAAgB;IACX,CAAA,EAEV,CAAA,CAED;;EAEJ;;AAET;AAEA,IAAa,IAAa,EAAK,CAAmB"}

package/dist/components/EmptyState/index.d.ts CHANGED Viewed

@@ -1,16 +1,10 @@
 /**
  * EmptyState Component - Barrel Export
- */
-export { EmptyState } from './EmptyState';
-export type { EmptyStateProps, EmptyStateAction, EmptyStateSecondaryAction, IllustrationType, } from './EmptyState';
-/**
- * The illustrations are also exported on their own.
  *
- * They shipped inside the package from the first release but no barrel named
- * them, so a consumer that composes its own empty state, which is the case
- * `EmptyState` cannot cover, had no way to reach one. Same shape as the
- * stylesheets in 0.1.0-alpha.1: present in the tarball, addressable by
- * nothing.
+ * The ten illustrations that used to ship here were one product's information
+ * architecture: chat, models, creations, benchmark, logs, statistics,
+ * schedule. No other consumer has a "creations" screen to draw for. A consumer
+ * passes its own artwork through `illustration` and keeps its own vocabulary.
  */
-export { ChatIllustration, ModelsIllustration, CreationsIllustration, BenchmarkIllustration, LogsIllustration, StatisticsIllustration, ErrorIllustration, TextIllustration, ScheduleIllustration, GenericIllustration, } from './illustrations';
-export type { IllustrationProps } from './illustrations';
+export { EmptyState } from './EmptyState';
+export type { EmptyStateProps, EmptyStateAction, EmptyStateSecondaryAction, } from './EmptyState';

package/dist/components/EmptyState/index.js CHANGED Viewed

@@ -1,3 +1,2 @@
-import { BenchmarkIllustration as e, ChatIllustration as t, CreationsIllustration as n, ErrorIllustration as r, GenericIllustration as i, LogsIllustration as a, ModelsIllustration as o, ScheduleIllustration as s, StatisticsIllustration as c, TextIllustration as l } from "./illustrations.js";
-import { EmptyState as u } from "./EmptyState2.js";
-export { e as BenchmarkIllustration, t as ChatIllustration, n as CreationsIllustration, u as EmptyState, r as ErrorIllustration, i as GenericIllustration, a as LogsIllustration, o as ModelsIllustration, s as ScheduleIllustration, c as StatisticsIllustration, l as TextIllustration };
+import { EmptyState as e } from "./EmptyState2.js";
+export { e as EmptyState };

package/dist/components/ErrorState/ErrorState.d.ts CHANGED Viewed

@@ -1,11 +1,24 @@
-export type ErrorType = "network" | "configuration" | "model" | "permission" | "generic";
+import { ReactNode } from 'react';
+/**
+ * How the error reads, not what it is about.
+ *
+ * This prop used to be a union of five names: network, configuration, model,
+ * permission, generic. Two of those, and "model" in particular, are one
+ * product's categories rather than anything a shared component can reason
+ * about, and all five resolved to three colours anyway: network and permission
+ * were the same amber, model and generic the same red. A consumer decides
+ * which of its own error categories reads as which tone.
+ */
+export type ErrorTone = "danger" | "warning" | "accent";
 export interface ErrorAction {
     label: string;
     onClick: () => void;
 }
 export interface ErrorStateProps {
-    /** Error type determines icon and default styling */
-    type?: ErrorType;
+    /** How the error reads. Defaults to `danger`. */
+    tone?: ErrorTone;
+    /** Replaces the default alert icon. */
+    icon?: ReactNode;
     /** Error title - main heading */
     title: string;
     /** Detailed error message */
@@ -22,4 +35,4 @@ export interface ErrorStateProps {
 /**
  * ErrorState Component
  */
-export declare function ErrorState({ type, title, message, primaryAction, secondaryAction, className, showIcon, }: ErrorStateProps): import("react").JSX.Element;
+export declare function ErrorState({ tone, icon, title, message, primaryAction, secondaryAction, className, showIcon, }: ErrorStateProps): import("react").JSX.Element;