@stackframe/dashboard-ui-components 2.8.88 → 2.8.91

package/dist/esm/components/data-grid/use-url-state.js

@@ -0,0 +1,212 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { createDefaultDataGridState } from "./state.js";
+import { DEFAULT_COL_WIDTH, clampColumnWidth } from "./data-grid-sizing.js";
+
+//#region src/components/data-grid/use-url-state.ts
+function serializeWidths(widths, columns) {
+	const parts = [];
+	for (const col of columns) {
+		const w = widths[col.id];
+		if (typeof w !== "number" || !Number.isFinite(w)) continue;
+		const defaultW = clampColumnWidth(col, col.width ?? DEFAULT_COL_WIDTH);
+		if (Math.round(w) === Math.round(defaultW)) continue;
+		parts.push(`${encodeURIComponent(col.id)}:${Math.round(w)}`);
+	}
+	return parts.join(",");
+}
+function parseWidths(raw, fallback, columns) {
+	if (!raw) return fallback;
+	const colMap = new Map(columns.map((c) => [c.id, c]));
+	const out = { ...fallback };
+	for (const part of raw.split(",")) {
+		const colonIdx = part.indexOf(":");
+		if (colonIdx <= 0) continue;
+		const encodedId = part.slice(0, colonIdx);
+		const num = part.slice(colonIdx + 1);
+		let id;
+		try {
+			id = decodeURIComponent(encodedId);
+		} catch {
+			continue;
+		}
+		if (!id || !num) continue;
+		const col = colMap.get(id);
+		if (!col) continue;
+		const n = Number(num);
+		if (!Number.isFinite(n)) continue;
+		out[id] = clampColumnWidth(col, n);
+	}
+	return out;
+}
+function serializeHidden(visibility) {
+	return Object.entries(visibility).filter(([, v]) => v === false).map(([id]) => encodeURIComponent(id)).join(",");
+}
+function parseHidden(raw, columns) {
+	if (!raw) return {};
+	const known = new Set(columns.map((c) => c.id));
+	const out = {};
+	for (const encodedId of raw.split(",")) {
+		let id;
+		try {
+			id = decodeURIComponent(encodedId);
+		} catch {
+			continue;
+		}
+		if (id && known.has(id)) out[id] = false;
+	}
+	return out;
+}
+function serializeSort(sort) {
+	return sort.map((s) => `${encodeURIComponent(s.columnId)}:${s.direction === "desc" ? "desc" : "asc"}`).join(",");
+}
+function sortEqual(a, b) {
+	if (a.length !== b.length) return false;
+	for (let i = 0; i < a.length; i++) if (a[i].columnId !== b[i].columnId || a[i].direction !== b[i].direction) return false;
+	return true;
+}
+function parseSort(raw, fallback, columns) {
+	if (raw == null) return fallback;
+	if (raw === "") return [];
+	const known = new Set(columns.map((c) => c.id));
+	const out = [];
+	for (const part of raw.split(",")) {
+		const colonIdx = part.indexOf(":");
+		if (colonIdx <= 0) continue;
+		const encodedId = part.slice(0, colonIdx);
+		const dir = part.slice(colonIdx + 1);
+		if (dir !== "asc" && dir !== "desc") continue;
+		let id;
+		try {
+			id = decodeURIComponent(encodedId);
+		} catch {
+			continue;
+		}
+		if (!id || !known.has(id)) continue;
+		out.push({
+			columnId: id,
+			direction: dir
+		});
+	}
+	return out;
+}
+function parseQuickSearch(raw, fallback) {
+	if (raw == null) return fallback;
+	return raw;
+}
+/**
+* Drop-in replacement for `useState(() => createDefaultDataGridState(columns))`
+* that persists user view preferences to URL search params, so a view
+* can be bookmarked / shared / restored on reload.
+*
+* **Persisted:** column widths, hidden columns, sort model, quick-search.
+* **Not persisted** (deliberately): pagination scroll position, selection,
+* column pinning/order, date display mode — these are session-scoped.
+*
+* ```tsx
+* const [gridState, setGridState] = useDataGridUrlState(columns, {
+*   paramPrefix: "users",
+*   initial: { sorting: [{ columnId: "signedUpAt", direction: "desc" }] },
+* });
+* ```
+*
+* URL encoding: `?{prefix}_w=...&{prefix}_h=...&{prefix}_s=...&{prefix}_q=...`.
+* Default values are omitted so URLs stay clean. Updates use
+* `history.replaceState` (not pushState) so back/forward isn't polluted,
+* and `popstate` is observed so external URL changes flow back into state.
+*/
+function useDataGridUrlState(columns, opts) {
+	const prefix = opts?.paramPrefix ?? "grid";
+	const widthsKey = `${prefix}_w`;
+	const hiddenKey = `${prefix}_h`;
+	const sortKey = `${prefix}_s`;
+	const searchKey = `${prefix}_q`;
+	const columnsRef = useRef(columns);
+	columnsRef.current = columns;
+	const initialRef = useRef(opts?.initial);
+	const [state, setState] = useState(() => {
+		const base = createDefaultDataGridState(columns);
+		const initial = initialRef.current ?? {};
+		const baseWithInitial = {
+			...base,
+			sorting: initial.sorting ?? base.sorting,
+			quickSearch: initial.quickSearch ?? base.quickSearch,
+			columnVisibility: initial.columnVisibility ?? base.columnVisibility
+		};
+		if (typeof window === "undefined") return baseWithInitial;
+		const params = new URLSearchParams(window.location.search);
+		return {
+			...baseWithInitial,
+			columnWidths: parseWidths(params.get(widthsKey), base.columnWidths, columns),
+			columnVisibility: params.get(hiddenKey) != null ? parseHidden(params.get(hiddenKey), columns) : baseWithInitial.columnVisibility,
+			sorting: parseSort(params.get(sortKey), baseWithInitial.sorting, columns),
+			quickSearch: parseQuickSearch(params.get(searchKey), baseWithInitial.quickSearch)
+		};
+	});
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const timer = setTimeout(() => {
+			const params = new URLSearchParams(window.location.search);
+			const before = params.toString();
+			const cols = columnsRef.current;
+			const initial = initialRef.current ?? {};
+			const widthsStr = serializeWidths(state.columnWidths, cols);
+			if (widthsStr) params.set(widthsKey, widthsStr);
+			else params.delete(widthsKey);
+			const hiddenStr = serializeHidden(state.columnVisibility);
+			const initialHidden = initial.columnVisibility ? serializeHidden(initial.columnVisibility) : "";
+			if (hiddenStr) params.set(hiddenKey, hiddenStr);
+			else if (initialHidden) params.set(hiddenKey, "");
+			else params.delete(hiddenKey);
+			const initialSort = initial.sorting ?? [];
+			if (sortEqual(state.sorting, initialSort)) params.delete(sortKey);
+			else params.set(sortKey, serializeSort(state.sorting));
+			const initialSearch = initial.quickSearch ?? "";
+			if (state.quickSearch === initialSearch) params.delete(searchKey);
+			else params.set(searchKey, state.quickSearch);
+			const after = params.toString();
+			if (before === after) return;
+			const url = `${window.location.pathname}${after ? `?${after}` : ""}${window.location.hash}`;
+			window.history.replaceState(window.history.state, "", url);
+		}, 100);
+		return () => clearTimeout(timer);
+	}, [
+		state.columnWidths,
+		state.columnVisibility,
+		state.sorting,
+		state.quickSearch,
+		widthsKey,
+		hiddenKey,
+		sortKey,
+		searchKey
+	]);
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		const onPop = () => {
+			const params = new URLSearchParams(window.location.search);
+			const cols = columnsRef.current;
+			const initial = initialRef.current ?? {};
+			const defaults = createDefaultDataGridState(cols);
+			setState((prev) => ({
+				...prev,
+				columnWidths: parseWidths(params.get(widthsKey), defaults.columnWidths, cols),
+				columnVisibility: params.get(hiddenKey) != null ? parseHidden(params.get(hiddenKey), cols) : initial.columnVisibility ?? defaults.columnVisibility,
+				sorting: parseSort(params.get(sortKey), initial.sorting ?? defaults.sorting, cols),
+				quickSearch: parseQuickSearch(params.get(searchKey), initial.quickSearch ?? defaults.quickSearch)
+			}));
+		};
+		window.addEventListener("popstate", onPop);
+		return () => window.removeEventListener("popstate", onPop);
+	}, [
+		widthsKey,
+		hiddenKey,
+		sortKey,
+		searchKey
+	]);
+	return [state, setState];
+}
+
+//#endregion
+export { useDataGridUrlState };
+//# sourceMappingURL=use-url-state.js.map

package/dist/esm/components/data-grid/use-url-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-url-state.js","names":[],"sources":["../../../../src/components/data-grid/use-url-state.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport { DEFAULT_COL_WIDTH, clampColumnWidth } from \"./data-grid-sizing\";\nimport { createDefaultDataGridState } from \"./state\";\nimport type {\n  DataGridColumnDef,\n  DataGridSortItem,\n  DataGridSortModel,\n  DataGridState,\n} from \"./types\";\n\n// ─── URL <-> state encoding ──────────────────────────────────────────\n// Compact, human-readable formats so URLs stay short. Each piece of\n// state gets its own param so unrelated changes don't churn shared keys:\n//\n//   ?{prefix}_w=name:200,email:300       column widths (only non-defaults)\n//   ?{prefix}_h=createdAt,role           hidden column ids\n//   ?{prefix}_s=signedUpAt:desc,name:asc multi-column sort\n//   ?{prefix}_q=alice                    quick-search text\n//\n// Column ids are URL-encoded so ids containing `,` `:` or other reserved\n// characters round-trip safely. Without encoding, an id like \"user:name\"\n// would silently break the parser.\n\n// ── widths ─────────────────────────────────────────────────────────\nfunction serializeWidths(\n  widths: Record<string, number>,\n  columns: readonly DataGridColumnDef<any>[],\n): string {\n  const parts: string[] = [];\n  for (const col of columns) {\n    const w = widths[col.id];\n    if (typeof w !== \"number\" || !Number.isFinite(w)) continue;\n    const defaultW = clampColumnWidth(col, col.width ?? DEFAULT_COL_WIDTH);\n    if (Math.round(w) === Math.round(defaultW)) continue;\n    parts.push(`${encodeURIComponent(col.id)}:${Math.round(w)}`);\n  }\n  return parts.join(\",\");\n}\n\nfunction parseWidths(\n  raw: string | null,\n  fallback: Record<string, number>,\n  columns: readonly DataGridColumnDef<any>[],\n): Record<string, number> {\n  if (!raw) return fallback;\n  const colMap = new Map(columns.map((c) => [c.id, c]));\n  const out: Record<string, number> = { ...fallback };\n  for (const part of raw.split(\",\")) {\n    // Only split on the FIRST colon — id-side is always pre-encoded so it\n    // can't contain a literal `:`, but width-side is always numeric.\n    const colonIdx = part.indexOf(\":\");\n    if (colonIdx <= 0) continue;\n    const encodedId = part.slice(0, colonIdx);\n    const num = part.slice(colonIdx + 1);\n    let id: string;\n    try {\n      id = decodeURIComponent(encodedId);\n    } catch {\n      continue;\n    }\n    if (!id || !num) continue;\n    const col = colMap.get(id);\n    if (!col) continue;\n    const n = Number(num);\n    if (!Number.isFinite(n)) continue;\n    out[id] = clampColumnWidth(col, n);\n  }\n  return out;\n}\n\n// ── hidden columns ─────────────────────────────────────────────────\nfunction serializeHidden(visibility: Record<string, boolean>): string {\n  return Object.entries(visibility)\n    .filter(([, v]) => v === false)\n    .map(([id]) => encodeURIComponent(id))\n    .join(\",\");\n}\n\nfunction parseHidden(\n  raw: string | null,\n  columns: readonly DataGridColumnDef<any>[],\n): Record<string, boolean> {\n  if (!raw) return {};\n  const known = new Set(columns.map((c) => c.id));\n  const out: Record<string, boolean> = {};\n  for (const encodedId of raw.split(\",\")) {\n    let id: string;\n    try {\n      id = decodeURIComponent(encodedId);\n    } catch {\n      continue;\n    }\n    if (id && known.has(id)) out[id] = false;\n  }\n  return out;\n}\n\n// ── sort model ─────────────────────────────────────────────────────\nfunction serializeSort(sort: DataGridSortModel): string {\n  return sort\n    .map((s) => `${encodeURIComponent(s.columnId)}:${s.direction === \"desc\" ? \"desc\" : \"asc\"}`)\n    .join(\",\");\n}\n\nfunction sortEqual(a: DataGridSortModel, b: DataGridSortModel): boolean {\n  if (a.length !== b.length) return false;\n  for (let i = 0; i < a.length; i++) {\n    if (a[i].columnId !== b[i].columnId || a[i].direction !== b[i].direction) return false;\n  }\n  return true;\n}\n\nfunction parseSort(\n  raw: string | null,\n  fallback: DataGridSortModel,\n  columns: readonly DataGridColumnDef<any>[],\n): DataGridSortModel {\n  if (raw == null) return fallback;\n  if (raw === \"\") return [];\n  const known = new Set(columns.map((c) => c.id));\n  const out: DataGridSortItem[] = [];\n  for (const part of raw.split(\",\")) {\n    const colonIdx = part.indexOf(\":\");\n    if (colonIdx <= 0) continue;\n    const encodedId = part.slice(0, colonIdx);\n    const dir = part.slice(colonIdx + 1);\n    if (dir !== \"asc\" && dir !== \"desc\") continue;\n    let id: string;\n    try {\n      id = decodeURIComponent(encodedId);\n    } catch {\n      continue;\n    }\n    if (!id || !known.has(id)) continue;\n    out.push({ columnId: id, direction: dir });\n  }\n  return out;\n}\n\n// ── quick search ───────────────────────────────────────────────────\nfunction parseQuickSearch(raw: string | null, fallback: string): string {\n  if (raw == null) return fallback;\n  return raw;\n}\n\n// ─── Hook ────────────────────────────────────────────────────────────\n\ntype UrlStateOptions = {\n  /** Disambiguates URL params when multiple grids share a page. Defaults\n   * to `\"grid\"`. Use unique prefixes per-grid (e.g. `\"users\"`, `\"teams\"`). */\n  paramPrefix?: string,\n  /** Overrides for default state used when the URL has no value for a\n   * given key. Useful for things like a sensible initial sort (e.g.\n   * \"newest signups first\") that should appear on first load but be\n   * overridden when the user navigates to a bookmarked URL. */\n  initial?: Partial<Pick<DataGridState, \"sorting\" | \"quickSearch\" | \"columnVisibility\">>,\n};\n\n/**\n * Drop-in replacement for `useState(() => createDefaultDataGridState(columns))`\n * that persists user view preferences to URL search params, so a view\n * can be bookmarked / shared / restored on reload.\n *\n * **Persisted:** column widths, hidden columns, sort model, quick-search.\n * **Not persisted** (deliberately): pagination scroll position, selection,\n * column pinning/order, date display mode — these are session-scoped.\n *\n * ```tsx\n * const [gridState, setGridState] = useDataGridUrlState(columns, {\n *   paramPrefix: \"users\",\n *   initial: { sorting: [{ columnId: \"signedUpAt\", direction: \"desc\" }] },\n * });\n * ```\n *\n * URL encoding: `?{prefix}_w=...&{prefix}_h=...&{prefix}_s=...&{prefix}_q=...`.\n * Default values are omitted so URLs stay clean. Updates use\n * `history.replaceState` (not pushState) so back/forward isn't polluted,\n * and `popstate` is observed so external URL changes flow back into state.\n */\nexport function useDataGridUrlState<TRow>(\n  columns: readonly DataGridColumnDef<TRow>[],\n  opts?: UrlStateOptions,\n): [DataGridState, React.Dispatch<React.SetStateAction<DataGridState>>] {\n  const prefix = opts?.paramPrefix ?? \"grid\";\n  const widthsKey = `${prefix}_w`;\n  const hiddenKey = `${prefix}_h`;\n  const sortKey = `${prefix}_s`;\n  const searchKey = `${prefix}_q`;\n\n  const columnsRef = useRef(columns);\n  columnsRef.current = columns;\n\n  // `initial` snapshots are captured once on first render. Re-running them\n  // each render would clobber the user's interactions.\n  const initialRef = useRef(opts?.initial);\n\n  const [state, setState] = useState<DataGridState>(() => {\n    const base = createDefaultDataGridState(columns);\n    const initial = initialRef.current ?? {};\n    const baseWithInitial: DataGridState = {\n      ...base,\n      sorting: initial.sorting ?? base.sorting,\n      quickSearch: initial.quickSearch ?? base.quickSearch,\n      columnVisibility: initial.columnVisibility ?? base.columnVisibility,\n    };\n    if (typeof window === \"undefined\") return baseWithInitial;\n    const params = new URLSearchParams(window.location.search);\n    return {\n      ...baseWithInitial,\n      columnWidths: parseWidths(params.get(widthsKey), base.columnWidths, columns),\n      columnVisibility: params.get(hiddenKey) != null\n        ? parseHidden(params.get(hiddenKey), columns)\n        : baseWithInitial.columnVisibility,\n      sorting: parseSort(params.get(sortKey), baseWithInitial.sorting, columns),\n      quickSearch: parseQuickSearch(params.get(searchKey), baseWithInitial.quickSearch),\n    };\n  });\n\n  // Sync state -> URL. Debounced so that high-frequency state changes\n  // (e.g. dragging a column resize handle, typing in the search box)\n  // don't fire a URL write per pixel / per keystroke.\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const timer = setTimeout(() => {\n      const params = new URLSearchParams(window.location.search);\n      const before = params.toString();\n      const cols = columnsRef.current;\n      const initial = initialRef.current ?? {};\n\n      const widthsStr = serializeWidths(state.columnWidths, cols);\n      if (widthsStr) params.set(widthsKey, widthsStr);\n      else params.delete(widthsKey);\n\n      const hiddenStr = serializeHidden(state.columnVisibility);\n      // If the consumer supplied initial visibility, \"no hidden cols\" must\n      // be encoded explicitly (empty string) so a bookmark with no `_h=`\n      // doesn't silently re-hide a column the user just un-hid.\n      const initialHidden = initial.columnVisibility\n        ? serializeHidden(initial.columnVisibility)\n        : \"\";\n      if (hiddenStr) params.set(hiddenKey, hiddenStr);\n      else if (initialHidden) params.set(hiddenKey, \"\");\n      else params.delete(hiddenKey);\n\n      const initialSort = initial.sorting ?? [];\n      if (sortEqual(state.sorting, initialSort)) params.delete(sortKey);\n      else params.set(sortKey, serializeSort(state.sorting));\n\n      const initialSearch = initial.quickSearch ?? \"\";\n      if (state.quickSearch === initialSearch) params.delete(searchKey);\n      else params.set(searchKey, state.quickSearch);\n\n      const after = params.toString();\n      if (before === after) return;\n      const url = `${window.location.pathname}${after ? `?${after}` : \"\"}${window.location.hash}`;\n      window.history.replaceState(window.history.state, \"\", url);\n    }, 100);\n    return () => clearTimeout(timer);\n  }, [\n    state.columnWidths,\n    state.columnVisibility,\n    state.sorting,\n    state.quickSearch,\n    widthsKey,\n    hiddenKey,\n    sortKey,\n    searchKey,\n  ]);\n\n  // React to back/forward navigation.\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    const onPop = () => {\n      const params = new URLSearchParams(window.location.search);\n      const cols = columnsRef.current;\n      const initial = initialRef.current ?? {};\n      // When the URL no longer has a value for a key, reset to defaults\n      // rather than preserving the previous in-memory state — otherwise\n      // navigating back to a clean URL leaves stale state.\n      const defaults = createDefaultDataGridState(cols);\n      setState((prev) => ({\n        ...prev,\n        columnWidths: parseWidths(params.get(widthsKey), defaults.columnWidths, cols),\n        columnVisibility: params.get(hiddenKey) != null\n          ? parseHidden(params.get(hiddenKey), cols)\n          : (initial.columnVisibility ?? defaults.columnVisibility),\n        sorting: parseSort(params.get(sortKey), initial.sorting ?? defaults.sorting, cols),\n        quickSearch: parseQuickSearch(params.get(searchKey), initial.quickSearch ?? defaults.quickSearch),\n      }));\n    };\n    window.addEventListener(\"popstate\", onPop);\n    return () => window.removeEventListener(\"popstate\", onPop);\n  }, [widthsKey, hiddenKey, sortKey, searchKey]);\n\n  return [state, setState];\n}\n"],"mappings":"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"}

package/dist/esm/components/data-grid/use-url-state.test.d.ts

@@ -0,0 +1 @@
+export { };

package/dist/esm/components/data-grid/use-url-state.test.js

@@ -0,0 +1,91 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+import { useDataGridUrlState } from "./use-url-state.js";
+
+//#region src/components/data-grid/use-url-state.test.tsx
+// @vitest-environment jsdom
+const columns = [{
+	id: "name",
+	header: "Name",
+	accessor: () => "",
+	width: 160,
+	minWidth: 80,
+	type: "string"
+}, {
+	id: "email",
+	header: "Email",
+	accessor: () => "",
+	width: 200,
+	minWidth: 80,
+	type: "string"
+}];
+function setUrl(search) {
+	window.history.replaceState(null, "", `/${search ? `?${search}` : ""}`);
+}
+beforeEach(() => {
+	setUrl("");
+});
+afterEach(() => {
+	setUrl("");
+});
+describe("useDataGridUrlState", () => {
+	it("initializes from existing URL params", () => {
+		setUrl("grid_w=name:240&grid_h=email");
+		const { result } = renderHook(() => useDataGridUrlState(columns));
+		const [state] = result.current;
+		expect(state.columnWidths.name).toBe(240);
+		expect(state.columnVisibility.email).toBe(false);
+	});
+	it("writes width changes back to the URL (after debounce)", async () => {
+		const { result } = renderHook(() => useDataGridUrlState(columns));
+		act(() => {
+			const [, setState] = result.current;
+			setState((prev) => ({
+				...prev,
+				columnWidths: {
+					...prev.columnWidths,
+					name: 250
+				}
+			}));
+		});
+		await new Promise((resolve) => setTimeout(resolve, 150));
+		expect(new URLSearchParams(window.location.search).get("grid_w")).toBe("name:250");
+	});
+	it("resets column widths to defaults when a popstate clears the URL", () => {
+		setUrl("grid_w=name:300");
+		const { result } = renderHook(() => useDataGridUrlState(columns));
+		expect(result.current[0].columnWidths.name).toBe(300);
+		act(() => {
+			setUrl("");
+			window.dispatchEvent(new PopStateEvent("popstate"));
+		});
+		expect(result.current[0].columnWidths.name).toBe(160);
+	});
+	it("isolates two grids on the same page via paramPrefix", async () => {
+		const { result: a } = renderHook(() => useDataGridUrlState(columns, { paramPrefix: "users" }));
+		const { result: b } = renderHook(() => useDataGridUrlState(columns, { paramPrefix: "teams" }));
+		act(() => {
+			a.current[1]((prev) => ({
+				...prev,
+				columnWidths: {
+					...prev.columnWidths,
+					name: 222
+				}
+			}));
+		});
+		await new Promise((resolve) => setTimeout(resolve, 150));
+		const params = new URLSearchParams(window.location.search);
+		expect(params.get("users_w")).toBe("name:222");
+		expect(params.get("teams_w")).toBeNull();
+		expect(b.current[0].columnWidths.name).toBe(160);
+	});
+	it("ignores malformed entries in the URL param without throwing", () => {
+		setUrl("grid_w=:,name:abc,name:240,bogusid:99");
+		const { result } = renderHook(() => useDataGridUrlState(columns));
+		expect(result.current[0].columnWidths.name).toBe(240);
+	});
+});
+
+//#endregion
+export {  };
+//# sourceMappingURL=use-url-state.test.js.map

package/dist/esm/components/data-grid/use-url-state.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-url-state.test.js","names":[],"sources":["../../../../src/components/data-grid/use-url-state.test.tsx"],"sourcesContent":["// @vitest-environment jsdom\n\nimport { act, renderHook } from \"@testing-library/react\";\nimport { afterEach, beforeEach, describe, expect, it } from \"vitest\";\nimport type { DataGridColumnDef } from \"./types\";\nimport { useDataGridUrlState } from \"./use-url-state\";\n\ntype Row = { id: string };\n\nconst columns: DataGridColumnDef<Row>[] = [\n  { id: \"name\", header: \"Name\", accessor: () => \"\", width: 160, minWidth: 80, type: \"string\" },\n  { id: \"email\", header: \"Email\", accessor: () => \"\", width: 200, minWidth: 80, type: \"string\" },\n];\n\nfunction setUrl(search: string) {\n  window.history.replaceState(null, \"\", `/${search ? `?${search}` : \"\"}`);\n}\n\nbeforeEach(() => {\n  setUrl(\"\");\n});\n\nafterEach(() => {\n  setUrl(\"\");\n});\n\ndescribe(\"useDataGridUrlState\", () => {\n  it(\"initializes from existing URL params\", () => {\n    setUrl(\"grid_w=name:240&grid_h=email\");\n    const { result } = renderHook(() => useDataGridUrlState(columns));\n    const [state] = result.current;\n    expect(state.columnWidths.name).toBe(240);\n    expect(state.columnVisibility.email).toBe(false);\n  });\n\n  it(\"writes width changes back to the URL (after debounce)\", async () => {\n    const { result } = renderHook(() => useDataGridUrlState(columns));\n\n    act(() => {\n      const [, setState] = result.current;\n      setState((prev) => ({\n        ...prev,\n        columnWidths: { ...prev.columnWidths, name: 250 },\n      }));\n    });\n\n    // Debounce is 100ms.\n    await new Promise((resolve) => setTimeout(resolve, 150));\n    const params = new URLSearchParams(window.location.search);\n    expect(params.get(\"grid_w\")).toBe(\"name:250\");\n  });\n\n  it(\"resets column widths to defaults when a popstate clears the URL\", () => {\n    setUrl(\"grid_w=name:300\");\n    const { result } = renderHook(() => useDataGridUrlState(columns));\n    expect(result.current[0].columnWidths.name).toBe(300);\n\n    act(() => {\n      setUrl(\"\");\n      window.dispatchEvent(new PopStateEvent(\"popstate\"));\n    });\n\n    // Default for \"name\" column is its declared width of 160.\n    expect(result.current[0].columnWidths.name).toBe(160);\n  });\n\n  it(\"isolates two grids on the same page via paramPrefix\", async () => {\n    const { result: a } = renderHook(() => useDataGridUrlState(columns, { paramPrefix: \"users\" }));\n    const { result: b } = renderHook(() => useDataGridUrlState(columns, { paramPrefix: \"teams\" }));\n\n    act(() => {\n      a.current[1]((prev) => ({ ...prev, columnWidths: { ...prev.columnWidths, name: 222 } }));\n    });\n    await new Promise((resolve) => setTimeout(resolve, 150));\n\n    const params = new URLSearchParams(window.location.search);\n    expect(params.get(\"users_w\")).toBe(\"name:222\");\n    expect(params.get(\"teams_w\")).toBeNull();\n    expect(b.current[0].columnWidths.name).toBe(160); // unaffected\n  });\n\n  it(\"ignores malformed entries in the URL param without throwing\", () => {\n    setUrl(\"grid_w=:,name:abc,name:240,bogusid:99\");\n    const { result } = renderHook(() => useDataGridUrlState(columns));\n    // Only the well-formed `name:240` should land; junk is dropped silently.\n    expect(result.current[0].columnWidths.name).toBe(240);\n  });\n});\n"],"mappings":";;;;;;AASA,MAAM,UAAoC,CACxC;CAAE,IAAI;CAAQ,QAAQ;CAAQ,gBAAgB;CAAI,OAAO;CAAK,UAAU;CAAI,MAAM;CAAU,EAC5F;CAAE,IAAI;CAAS,QAAQ;CAAS,gBAAgB;CAAI,OAAO;CAAK,UAAU;CAAI,MAAM;CAAU,CAC/F;AAED,SAAS,OAAO,QAAgB;AAC9B,QAAO,QAAQ,aAAa,MAAM,IAAI,IAAI,SAAS,IAAI,WAAW,KAAK;;AAGzE,iBAAiB;AACf,QAAO,GAAG;EACV;AAEF,gBAAgB;AACd,QAAO,GAAG;EACV;AAEF,SAAS,6BAA6B;AACpC,IAAG,8CAA8C;AAC/C,SAAO,+BAA+B;EACtC,MAAM,EAAE,WAAW,iBAAiB,oBAAoB,QAAQ,CAAC;EACjE,MAAM,CAAC,SAAS,OAAO;AACvB,SAAO,MAAM,aAAa,KAAK,CAAC,KAAK,IAAI;AACzC,SAAO,MAAM,iBAAiB,MAAM,CAAC,KAAK,MAAM;GAChD;AAEF,IAAG,yDAAyD,YAAY;EACtE,MAAM,EAAE,WAAW,iBAAiB,oBAAoB,QAAQ,CAAC;AAEjE,YAAU;GACR,MAAM,GAAG,YAAY,OAAO;AAC5B,aAAU,UAAU;IAClB,GAAG;IACH,cAAc;KAAE,GAAG,KAAK;KAAc,MAAM;KAAK;IAClD,EAAE;IACH;AAGF,QAAM,IAAI,SAAS,YAAY,WAAW,SAAS,IAAI,CAAC;AAExD,SADe,IAAI,gBAAgB,OAAO,SAAS,OAAO,CAC5C,IAAI,SAAS,CAAC,CAAC,KAAK,WAAW;GAC7C;AAEF,IAAG,yEAAyE;AAC1E,SAAO,kBAAkB;EACzB,MAAM,EAAE,WAAW,iBAAiB,oBAAoB,QAAQ,CAAC;AACjE,SAAO,OAAO,QAAQ,GAAG,aAAa,KAAK,CAAC,KAAK,IAAI;AAErD,YAAU;AACR,UAAO,GAAG;AACV,UAAO,cAAc,IAAI,cAAc,WAAW,CAAC;IACnD;AAGF,SAAO,OAAO,QAAQ,GAAG,aAAa,KAAK,CAAC,KAAK,IAAI;GACrD;AAEF,IAAG,uDAAuD,YAAY;EACpE,MAAM,EAAE,QAAQ,MAAM,iBAAiB,oBAAoB,SAAS,EAAE,aAAa,SAAS,CAAC,CAAC;EAC9F,MAAM,EAAE,QAAQ,MAAM,iBAAiB,oBAAoB,SAAS,EAAE,aAAa,SAAS,CAAC,CAAC;AAE9F,YAAU;AACR,KAAE,QAAQ,IAAI,UAAU;IAAE,GAAG;IAAM,cAAc;KAAE,GAAG,KAAK;KAAc,MAAM;KAAK;IAAE,EAAE;IACxF;AACF,QAAM,IAAI,SAAS,YAAY,WAAW,SAAS,IAAI,CAAC;EAExD,MAAM,SAAS,IAAI,gBAAgB,OAAO,SAAS,OAAO;AAC1D,SAAO,OAAO,IAAI,UAAU,CAAC,CAAC,KAAK,WAAW;AAC9C,SAAO,OAAO,IAAI,UAAU,CAAC,CAAC,UAAU;AACxC,SAAO,EAAE,QAAQ,GAAG,aAAa,KAAK,CAAC,KAAK,IAAI;GAChD;AAEF,IAAG,qEAAqE;AACtE,SAAO,wCAAwC;EAC/C,MAAM,EAAE,WAAW,iBAAiB,oBAAoB,QAAQ,CAAC;AAEjE,SAAO,OAAO,QAAQ,GAAG,aAAa,KAAK,CAAC,KAAK,IAAI;GACrD;EACF"}

package/dist/esm/components/dialog.d.ts

@@ -0,0 +1,67 @@
+import { Dialog } from "@stackframe/stack-ui";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+import * as _radix_ui_react_dialog0 from "@radix-ui/react-dialog";
+
+//#region src/components/dialog.d.ts
+type DesignDialogSize = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "full";
+type DesignDialogVariant = "glassmorphic" | "plain";
+type DesignDialogIcon = React.ElementType<{
+  className?: string;
+}>;
+type DesignDialogRootProps = Omit<React.ComponentProps<typeof Dialog>, "children">;
+type DesignDialogProps = {
+  trigger?: React.ReactElement;
+  size?: DesignDialogSize;
+  variant?: DesignDialogVariant;
+  icon?: DesignDialogIcon | null;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  headerContent?: React.ReactNode;
+  customHeader?: React.ReactNode;
+  footer?: React.ReactNode;
+  noBodyPadding?: boolean;
+  hideTopCloseButton?: boolean;
+  className?: string;
+  overlayClassName?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  footerClassName?: string;
+  children?: React.ReactNode;
+} & DesignDialogRootProps;
+/**
+ * Canonical dashboard modal surface. This wraps the base dialog primitives with
+ * a reusable glassmorphic shell and consistent header/body/footer regions.
+ */
+declare function DesignDialog({
+  trigger,
+  size,
+  variant,
+  icon: Icon,
+  title,
+  description,
+  headerContent,
+  customHeader,
+  footer,
+  noBodyPadding,
+  hideTopCloseButton,
+  className,
+  overlayClassName,
+  headerClassName,
+  bodyClassName,
+  footerClassName,
+  children,
+  ...dialogRootProps
+}: DesignDialogProps): react_jsx_runtime0.JSX.Element;
+declare const DesignDialogRoot: React.FC<_radix_ui_react_dialog0.DialogProps>;
+declare const DesignDialogTrigger: React.ForwardRefExoticComponent<_radix_ui_react_dialog0.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DesignDialogClose: React.ForwardRefExoticComponent<_radix_ui_react_dialog0.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DesignDialogTitle: React.FC<Omit<_radix_ui_react_dialog0.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {
+  ref?: React.Ref<HTMLHeadingElement> | undefined;
+}>;
+declare const DesignDialogDescription: React.FC<Omit<_radix_ui_react_dialog0.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & {
+  ref?: React.Ref<HTMLParagraphElement> | undefined;
+}>;
+//#endregion
+export { DesignDialog, DesignDialogClose, DesignDialogDescription, DesignDialogProps, DesignDialogRoot, DesignDialogSize, DesignDialogTitle, DesignDialogTrigger, DesignDialogVariant };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/esm/components/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","names":[],"sources":["../../../src/components/dialog.tsx"],"mappings":";;;;;;KAgBY,gBAAA;AAAA,KAaA,mBAAA;AAAA,KA0BP,gBAAA,GAAmB,KAAA,CAAM,WAAA;EAAc,SAAA;AAAA;AAAA,KAEvC,qBAAA,GAAwB,IAAA,CAAK,KAAA,CAAM,cAAA,QAAsB,MAAA;AAAA,KAElD,iBAAA;EACV,OAAA,GAAU,KAAA,CAAM,YAAA;EAChB,IAAA,GAAO,gBAAA;EACP,OAAA,GAAU,mBAAA;EACV,IAAA,GAAO,gBAAA;EACP,KAAA,GAAQ,KAAA,CAAM,SAAA;EACd,WAAA,GAAc,KAAA,CAAM,SAAA;EACpB,aAAA,GAAgB,KAAA,CAAM,SAAA;EACtB,YAAA,GAAe,KAAA,CAAM,SAAA;EACrB,MAAA,GAAS,KAAA,CAAM,SAAA;EACf,aAAA;EACA,kBAAA;EACA,SAAA;EACA,gBAAA;EACA,eAAA;EACA,aAAA;EACA,eAAA;EACA,QAAA,GAAW,KAAA,CAAM,SAAA;AAAA,IACf,qBAAA;;;;;iBAMY,YAAA,CAAA;EACd,OAAA;EACA,IAAA;EACA,OAAA;EACA,IAAA,EAAM,IAAA;EACN,KAAA;EACA,WAAA;EACA,aAAA;EACA,YAAA;EACA,MAAA;EACA,aAAA;EACA,kBAAA;EACA,SAAA;EACA,gBAAA;EACA,eAAA;EACA,aAAA;EACA,eAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,iBAAA,GAAiB,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,cAsFP,gBAAA,EAAgB,KAAA,CAAA,EAAA,CAAS,uBAAA,CAAT,WAAA;AAAA,cAChB,mBAAA,EAAmB,KAAA,CAAA,yBAAA,CAAgB,uBAAA,CAAhB,kBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,cACnB,iBAAA,EAAiB,KAAA,CAAA,yBAAA,CAAc,uBAAA,CAAd,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,cACjB,iBAAA,EAAiB,KAAA,CAAA,EAAA,CAAA,IAAA,CAAc,uBAAA,CAAd,gBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,kBAAA;;;cACjB,uBAAA,EAAuB,KAAA,CAAA,EAAA,CAAA,IAAA,CAAoB,uBAAA,CAApB,sBAAA,GAAA,KAAA,CAAA,aAAA,CAAA,oBAAA"}

package/dist/esm/components/dialog.js

@@ -0,0 +1,86 @@
+"use client";
+
+import { Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, cn } from "@stackframe/stack-ui";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/components/dialog.tsx
+const dialogSizeClasses = new Map([
+	["sm", "max-w-sm"],
+	["md", "max-w-md"],
+	["lg", "max-w-lg"],
+	["xl", "max-w-xl"],
+	["2xl", "max-w-2xl"],
+	["3xl", "max-w-3xl"],
+	["4xl", "max-w-4xl"],
+	["5xl", "max-w-5xl"],
+	["6xl", "max-w-6xl"],
+	["7xl", "max-w-7xl"],
+	["full", "max-w-[calc(100vw-2rem)]"]
+]);
+const dialogSurfaceClasses = new Map([["glassmorphic", "border-0 sm:rounded-2xl bg-background/85 backdrop-blur-2xl ring-1 ring-foreground/[0.06] shadow-[0_24px_48px_-12px_rgba(0,0,0,0.25),0_4px_24px_-8px_rgba(0,0,0,0.12)] dark:bg-background/80 dark:ring-white/[0.06]"], ["plain", "border bg-background shadow-lg sm:rounded-lg"]]);
+const dialogOverlayClasses = new Map([["glassmorphic", "bg-black/50 backdrop-blur-sm"], ["plain", void 0]]);
+/**
+* Canonical dashboard modal surface. This wraps the base dialog primitives with
+* a reusable glassmorphic shell and consistent header/body/footer regions.
+*/
+function DesignDialog({ trigger, size = "lg", variant = "glassmorphic", icon: Icon = null, title, description, headerContent, customHeader, footer, noBodyPadding = false, hideTopCloseButton = false, className, overlayClassName, headerClassName, bodyClassName, footerClassName, children, ...dialogRootProps }) {
+	const resolvedSizeClass = dialogSizeClasses.get(size) ?? "max-w-lg";
+	const resolvedSurfaceClass = dialogSurfaceClasses.get(variant) ?? dialogSurfaceClasses.get("glassmorphic");
+	const resolvedOverlayClass = cn(dialogOverlayClasses.get(variant), overlayClassName);
+	const shouldRenderTopHeaderRow = Icon != null || title != null || description != null;
+	const shouldRenderHeader = customHeader != null || shouldRenderTopHeaderRow || headerContent != null;
+	const shouldRenderBody = React.Children.count(children) > 0;
+	return /* @__PURE__ */ jsxs(Dialog, {
+		...dialogRootProps,
+		children: [trigger != null && /* @__PURE__ */ jsx(DialogTrigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsxs(DialogContent, {
+			className: cn("gap-0 p-0 overflow-hidden", resolvedSizeClass, resolvedSurfaceClass, className),
+			overlayProps: resolvedOverlayClass ? { className: resolvedOverlayClass } : void 0,
+			noCloseButton: hideTopCloseButton,
+			children: [
+				shouldRenderHeader && /* @__PURE__ */ jsx(DialogHeader, {
+					className: cn("px-6 pt-6 pb-4 border-b border-foreground/[0.06]", headerClassName),
+					children: customHeader ?? /* @__PURE__ */ jsxs(Fragment, { children: [shouldRenderTopHeaderRow && /* @__PURE__ */ jsxs("div", {
+						className: cn("flex items-start gap-3", Icon == null && "gap-0"),
+						children: [Icon != null && /* @__PURE__ */ jsx("div", {
+							className: "h-9 w-9 rounded-xl bg-primary/10 ring-1 ring-primary/15 flex items-center justify-center shrink-0",
+							children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-primary" })
+						}), (title != null || description != null) && /* @__PURE__ */ jsxs("div", {
+							className: "flex-1 min-w-0 space-y-1",
+							children: [title != null ? /* @__PURE__ */ jsx(DialogTitle, {
+								className: "text-base",
+								children: title
+							}) : null, description != null ? /* @__PURE__ */ jsx(DialogDescription, {
+								className: "text-xs",
+								children: description
+							}) : null]
+						})]
+					}), headerContent != null ? /* @__PURE__ */ jsx("div", {
+						className: cn(shouldRenderTopHeaderRow && "mt-4"),
+						children: headerContent
+					}) : null] })
+				}),
+				shouldRenderBody && /* @__PURE__ */ jsx(DialogBody, {
+					className: cn("mx-0 my-0 w-auto", noBodyPadding ? "px-0 py-0" : "px-6 py-4", bodyClassName),
+					children
+				}),
+				footer != null ? /* @__PURE__ */ jsx(DialogFooter, {
+					className: cn("px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]", footerClassName),
+					children: footer
+				}) : null
+			]
+		})]
+	});
+}
+const DesignDialogRoot = Dialog;
+const DesignDialogTrigger = DialogTrigger;
+const DesignDialogClose = DialogClose;
+const DesignDialogTitle = DialogTitle;
+const DesignDialogDescription = DialogDescription;
+
+//#endregion
+export { DesignDialog, DesignDialogClose, DesignDialogDescription, DesignDialogRoot, DesignDialogTitle, DesignDialogTrigger };
+//# sourceMappingURL=dialog.js.map

package/dist/esm/components/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":[],"sources":["../../../src/components/dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n  cn,\n} from \"@stackframe/stack-ui\";\nimport React from \"react\";\n\nexport type DesignDialogSize =\n  | \"sm\"\n  | \"md\"\n  | \"lg\"\n  | \"xl\"\n  | \"2xl\"\n  | \"3xl\"\n  | \"4xl\"\n  | \"5xl\"\n  | \"6xl\"\n  | \"7xl\"\n  | \"full\";\n\nexport type DesignDialogVariant = \"glassmorphic\" | \"plain\";\n\nconst dialogSizeClasses = new Map<DesignDialogSize, string>([\n  [\"sm\", \"max-w-sm\"],\n  [\"md\", \"max-w-md\"],\n  [\"lg\", \"max-w-lg\"],\n  [\"xl\", \"max-w-xl\"],\n  [\"2xl\", \"max-w-2xl\"],\n  [\"3xl\", \"max-w-3xl\"],\n  [\"4xl\", \"max-w-4xl\"],\n  [\"5xl\", \"max-w-5xl\"],\n  [\"6xl\", \"max-w-6xl\"],\n  [\"7xl\", \"max-w-7xl\"],\n  [\"full\", \"max-w-[calc(100vw-2rem)]\"],\n]);\n\nconst dialogSurfaceClasses = new Map<DesignDialogVariant, string>([\n  [\"glassmorphic\", \"border-0 sm:rounded-2xl bg-background/85 backdrop-blur-2xl ring-1 ring-foreground/[0.06] shadow-[0_24px_48px_-12px_rgba(0,0,0,0.25),0_4px_24px_-8px_rgba(0,0,0,0.12)] dark:bg-background/80 dark:ring-white/[0.06]\"],\n  [\"plain\", \"border bg-background shadow-lg sm:rounded-lg\"],\n]);\n\nconst dialogOverlayClasses = new Map<DesignDialogVariant, string | undefined>([\n  [\"glassmorphic\", \"bg-black/50 backdrop-blur-sm\"],\n  [\"plain\", undefined],\n]);\n\ntype DesignDialogIcon = React.ElementType<{ className?: string }>;\n\ntype DesignDialogRootProps = Omit<React.ComponentProps<typeof Dialog>, \"children\">;\n\nexport type DesignDialogProps = {\n  trigger?: React.ReactElement,\n  size?: DesignDialogSize,\n  variant?: DesignDialogVariant,\n  icon?: DesignDialogIcon | null,\n  title?: React.ReactNode,\n  description?: React.ReactNode,\n  headerContent?: React.ReactNode,\n  customHeader?: React.ReactNode,\n  footer?: React.ReactNode,\n  noBodyPadding?: boolean,\n  hideTopCloseButton?: boolean,\n  className?: string,\n  overlayClassName?: string,\n  headerClassName?: string,\n  bodyClassName?: string,\n  footerClassName?: string,\n  children?: React.ReactNode,\n} & DesignDialogRootProps;\n\n/**\n * Canonical dashboard modal surface. This wraps the base dialog primitives with\n * a reusable glassmorphic shell and consistent header/body/footer regions.\n */\nexport function DesignDialog({\n  trigger,\n  size = \"lg\",\n  variant = \"glassmorphic\",\n  icon: Icon = null,\n  title,\n  description,\n  headerContent,\n  customHeader,\n  footer,\n  noBodyPadding = false,\n  hideTopCloseButton = false,\n  className,\n  overlayClassName,\n  headerClassName,\n  bodyClassName,\n  footerClassName,\n  children,\n  ...dialogRootProps\n}: DesignDialogProps) {\n  const resolvedSizeClass = dialogSizeClasses.get(size) ?? \"max-w-lg\";\n  const resolvedSurfaceClass = dialogSurfaceClasses.get(variant) ?? dialogSurfaceClasses.get(\"glassmorphic\");\n  const resolvedOverlayClass = cn(dialogOverlayClasses.get(variant), overlayClassName);\n  const shouldRenderTopHeaderRow = Icon != null || title != null || description != null;\n  const shouldRenderHeader = customHeader != null || shouldRenderTopHeaderRow || headerContent != null;\n  const shouldRenderBody = React.Children.count(children) > 0;\n\n  return (\n    <Dialog {...dialogRootProps}>\n      {trigger != null && (\n        <DialogTrigger asChild>\n          {trigger}\n        </DialogTrigger>\n      )}\n\n      <DialogContent\n        className={cn(\n          \"gap-0 p-0 overflow-hidden\",\n          resolvedSizeClass,\n          resolvedSurfaceClass,\n          className\n        )}\n        overlayProps={resolvedOverlayClass ? { className: resolvedOverlayClass } : undefined}\n        noCloseButton={hideTopCloseButton}\n      >\n        {shouldRenderHeader && (\n          <DialogHeader className={cn(\"px-6 pt-6 pb-4 border-b border-foreground/[0.06]\", headerClassName)}>\n            {customHeader ?? (\n              <>\n                {shouldRenderTopHeaderRow && (\n                  <div className={cn(\"flex items-start gap-3\", Icon == null && \"gap-0\")}>\n                    {Icon != null && (\n                      <div className=\"h-9 w-9 rounded-xl bg-primary/10 ring-1 ring-primary/15 flex items-center justify-center shrink-0\">\n                        <Icon className=\"h-4 w-4 text-primary\" />\n                      </div>\n                    )}\n                    {(title != null || description != null) && (\n                      <div className=\"flex-1 min-w-0 space-y-1\">\n                        {title != null ? (\n                          <DialogTitle className=\"text-base\">\n                            {title}\n                          </DialogTitle>\n                        ) : null}\n                        {description != null ? (\n                          <DialogDescription className=\"text-xs\">\n                            {description}\n                          </DialogDescription>\n                        ) : null}\n                      </div>\n                    )}\n                  </div>\n                )}\n\n                {headerContent != null ? (\n                  <div className={cn(shouldRenderTopHeaderRow && \"mt-4\")}>\n                    {headerContent}\n                  </div>\n                ) : null}\n              </>\n            )}\n          </DialogHeader>\n        )}\n\n        {shouldRenderBody && (\n          <DialogBody\n            className={cn(\n              \"mx-0 my-0 w-auto\",\n              noBodyPadding ? \"px-0 py-0\" : \"px-6 py-4\",\n              bodyClassName\n            )}\n          >\n            {children}\n          </DialogBody>\n        )}\n\n        {footer != null ? (\n          <DialogFooter className={cn(\"px-6 py-3 border-t border-foreground/[0.06] bg-foreground/[0.02]\", footerClassName)}>\n            {footer}\n          </DialogFooter>\n        ) : null}\n      </DialogContent>\n    </Dialog>\n  );\n}\n\nexport const DesignDialogRoot = Dialog;\nexport const DesignDialogTrigger = DialogTrigger;\nexport const DesignDialogClose = DialogClose;\nexport const DesignDialogTitle = DialogTitle;\nexport const DesignDialogDescription = DialogDescription;\n"],"mappings":";;;;;;;AA+BA,MAAM,oBAAoB,IAAI,IAA8B;CAC1D,CAAC,MAAM,WAAW;CAClB,CAAC,MAAM,WAAW;CAClB,CAAC,MAAM,WAAW;CAClB,CAAC,MAAM,WAAW;CAClB,CAAC,OAAO,YAAY;CACpB,CAAC,OAAO,YAAY;CACpB,CAAC,OAAO,YAAY;CACpB,CAAC,OAAO,YAAY;CACpB,CAAC,OAAO,YAAY;CACpB,CAAC,OAAO,YAAY;CACpB,CAAC,QAAQ,2BAA2B;CACrC,CAAC;AAEF,MAAM,uBAAuB,IAAI,IAAiC,CAChE,CAAC,gBAAgB,qNAAqN,EACtO,CAAC,SAAS,+CAA+C,CAC1D,CAAC;AAEF,MAAM,uBAAuB,IAAI,IAA6C,CAC5E,CAAC,gBAAgB,+BAA+B,EAChD,CAAC,SAAS,OAAU,CACrB,CAAC;;;;;AA8BF,SAAgB,aAAa,EAC3B,SACA,OAAO,MACP,UAAU,gBACV,MAAM,OAAO,MACb,OACA,aACA,eACA,cACA,QACA,gBAAgB,OAChB,qBAAqB,OACrB,WACA,kBACA,iBACA,eACA,iBACA,UACA,GAAG,mBACiB;CACpB,MAAM,oBAAoB,kBAAkB,IAAI,KAAK,IAAI;CACzD,MAAM,uBAAuB,qBAAqB,IAAI,QAAQ,IAAI,qBAAqB,IAAI,eAAe;CAC1G,MAAM,uBAAuB,GAAG,qBAAqB,IAAI,QAAQ,EAAE,iBAAiB;CACpF,MAAM,2BAA2B,QAAQ,QAAQ,SAAS,QAAQ,eAAe;CACjF,MAAM,qBAAqB,gBAAgB,QAAQ,4BAA4B,iBAAiB;CAChG,MAAM,mBAAmB,MAAM,SAAS,MAAM,SAAS,GAAG;AAE1D,QACE,qBAAC;EAAO,GAAI;aACT,WAAW,QACV,oBAAC;GAAc;aACZ;IACa,EAGlB,qBAAC;GACC,WAAW,GACT,6BACA,mBACA,sBACA,UACD;GACD,cAAc,uBAAuB,EAAE,WAAW,sBAAsB,GAAG;GAC3E,eAAe;;IAEd,sBACC,oBAAC;KAAa,WAAW,GAAG,oDAAoD,gBAAgB;eAC7F,gBACC,4CACG,4BACC,qBAAC;MAAI,WAAW,GAAG,0BAA0B,QAAQ,QAAQ,QAAQ;iBAClE,QAAQ,QACP,oBAAC;OAAI,WAAU;iBACb,oBAAC,QAAK,WAAU,yBAAyB;QACrC,GAEN,SAAS,QAAQ,eAAe,SAChC,qBAAC;OAAI,WAAU;kBACZ,SAAS,OACR,oBAAC;QAAY,WAAU;kBACpB;SACW,GACZ,MACH,eAAe,OACd,oBAAC;QAAkB,WAAU;kBAC1B;SACiB,GAClB;QACA;OAEJ,EAGP,iBAAiB,OAChB,oBAAC;MAAI,WAAW,GAAG,4BAA4B,OAAO;gBACnD;OACG,GACJ,QACH;MAEQ;IAGhB,oBACC,oBAAC;KACC,WAAW,GACT,oBACA,gBAAgB,cAAc,aAC9B,cACD;KAEA;MACU;IAGd,UAAU,OACT,oBAAC;KAAa,WAAW,GAAG,oEAAoE,gBAAgB;eAC7G;MACY,GACb;;IACU;GACT;;AAIb,MAAa,mBAAmB;AAChC,MAAa,sBAAsB;AACnC,MAAa,oBAAoB;AACjC,MAAa,oBAAoB;AACjC,MAAa,0BAA0B"}

package/dist/esm/index.d.ts

@@ -3,6 +3,7 @@ import { DesignBadge, DesignBadgeColor, DesignBadgeContentMode, DesignBadgeProps
 import { DesignButton, DesignButtonProps, DesignOriginalButtonProps } from "./components/button";
 import { DesignCard, DesignCardProps, DesignCardTint, DesignCardTintProps, useGlassmorphicDefault, useInsideDesignCard } from "./components/card";
 import { CursorBlastEffect, CursorBlastEffectProps } from "./components/cursor-blast-effect";
+import { DesignDialog, DesignDialogClose, DesignDialogDescription, DesignDialogProps, DesignDialogRoot, DesignDialogSize, DesignDialogTitle, DesignDialogTrigger, DesignDialogVariant } from "./components/dialog";
 import { DesignEditMode, useDesignEditMode } from "./components/edit-mode";
 import { DesignInput, DesignInputProps } from "./components/input";
 import { DesignPillToggle, DesignPillToggleOption, DesignPillToggleProps } from "./components/pill-toggle";
@@ -20,4 +21,4 @@ import { DesignProgressBar, DesignProgressBarProps } from "./components/progress
 import { DesignEmptyState, DesignEmptyStateProps } from "./components/empty-state";
 export * from "./components/analytics-chart";
 export * from "./components/data-grid";
-export { CursorBlastEffect, type CursorBlastEffectProps, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignAlert, type DesignAlertProps, DesignBadge, type DesignBadgeColor, type DesignBadgeContentMode, type DesignBadgeProps, type DesignBadgeSize, DesignButton, type DesignButtonProps, DesignCard, type DesignCardProps, DesignCardTint, type DesignCardTintProps, type DesignCategoryTabItem, DesignCategoryTabs, type DesignCategoryTabsProps, DesignChartCard, type DesignChartCardProps, type DesignChartColorEntry, type DesignChartColorName, type DesignChartConfig, DesignChartContainer, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignEditMode, DesignEmptyState, type DesignEmptyStateProps, DesignInput, type DesignInputProps, DesignMetricCard, type DesignMetricCardProps, type DesignMetricCardTrend, type DesignOriginalButtonProps, DesignPillToggle, type DesignPillToggleOption, type DesignPillToggleProps, DesignProgressBar, type DesignProgressBarProps, DesignSeparator, type DesignSeparatorProps, DesignSkeleton, type DesignSkeletonProps, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, getDesignChartColor, getPayloadConfigFromPayload, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };
+export { CursorBlastEffect, type CursorBlastEffectProps, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignAlert, type DesignAlertProps, DesignBadge, type DesignBadgeColor, type DesignBadgeContentMode, type DesignBadgeProps, type DesignBadgeSize, DesignButton, type DesignButtonProps, DesignCard, type DesignCardProps, DesignCardTint, type DesignCardTintProps, type DesignCategoryTabItem, DesignCategoryTabs, type DesignCategoryTabsProps, DesignChartCard, type DesignChartCardProps, type DesignChartColorEntry, type DesignChartColorName, type DesignChartConfig, DesignChartContainer, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignDialog, DesignDialogClose, DesignDialogDescription, type DesignDialogProps, DesignDialogRoot, type DesignDialogSize, DesignDialogTitle, DesignDialogTrigger, type DesignDialogVariant, DesignEditMode, DesignEmptyState, type DesignEmptyStateProps, DesignInput, type DesignInputProps, DesignMetricCard, type DesignMetricCardProps, type DesignMetricCardTrend, type DesignOriginalButtonProps, DesignPillToggle, type DesignPillToggleOption, type DesignPillToggleProps, DesignProgressBar, type DesignProgressBarProps, DesignSeparator, type DesignSeparatorProps, DesignSkeleton, type DesignSkeletonProps, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, getDesignChartColor, getPayloadConfigFromPayload, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };

package/dist/esm/index.js

@@ -3,6 +3,7 @@ import { DesignBadge } from "./components/badge.js";
 import { DesignButton } from "./components/button.js";
 import { DesignCard, DesignCardTint, useGlassmorphicDefault, useInsideDesignCard } from "./components/card.js";
 import { CursorBlastEffect } from "./components/cursor-blast-effect.js";
+import { DesignDialog, DesignDialogClose, DesignDialogDescription, DesignDialogRoot, DesignDialogTitle, DesignDialogTrigger } from "./components/dialog.js";
 import { DesignEditMode, useDesignEditMode } from "./components/edit-mode.js";
 import { DesignInput } from "./components/input.js";
 import { DesignPillToggle } from "./components/pill-toggle.js";
@@ -23,4 +24,4 @@ export * from "./components/analytics-chart/index.js"
 
 export * from "./components/data-grid/index.js"
 
-export { CursorBlastEffect, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignAlert, DesignBadge, DesignButton, DesignCard, DesignCardTint, DesignCategoryTabs, DesignChartCard, DesignChartContainer, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignEditMode, DesignEmptyState, DesignInput, DesignMetricCard, DesignPillToggle, DesignProgressBar, DesignSeparator, DesignSkeleton, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, getDesignChartColor, getPayloadConfigFromPayload, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };
+export { CursorBlastEffect, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DesignAlert, DesignBadge, DesignButton, DesignCard, DesignCardTint, DesignCategoryTabs, DesignChartCard, DesignChartContainer, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignDialog, DesignDialogClose, DesignDialogDescription, DesignDialogRoot, DesignDialogTitle, DesignDialogTrigger, DesignEditMode, DesignEmptyState, DesignInput, DesignMetricCard, DesignPillToggle, DesignProgressBar, DesignSeparator, DesignSkeleton, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, getDesignChartColor, getPayloadConfigFromPayload, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };

package/dist/index.d.ts

@@ -16,12 +16,14 @@ import { DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_CO
 import { DesignChartTooltip, DesignChartTooltipContent } from "./components/chart-tooltip.js";
 import { CursorBlastEffect, CursorBlastEffectProps } from "./components/cursor-blast-effect.js";
 import { DataGridCallbacks, DataGridCellContext, DataGridColumnAlign, DataGridColumnDef, DataGridColumnPin, DataGridColumnPinning, DataGridColumnType, DataGridColumnVisibility, DataGridDataPaginationMode, DataGridDataSource, DataGridDateDisplay, DataGridDateFormat, DataGridFetchParams, DataGridFetchResult, DataGridFooterContext, DataGridHeaderContext, DataGridPaginationMode, DataGridPaginationModel, DataGridProps, DataGridSelectOption, DataGridSelectionMode, DataGridSelectionModel, DataGridSortItem, DataGridSortModel, DataGridState, DataGridStrings, DataGridToolbarContext, RowId } from "./components/data-grid/types.js";
-import { getEffectiveMinWidth } from "./components/data-grid/data-grid-sizing.js";
+import { DEFAULT_COL_WIDTH, DEFAULT_MAX_COL_WIDTH, clampColumnWidth, getEffectiveMaxWidth, getEffectiveMinWidth } from "./components/data-grid/data-grid-sizing.js";
 import { DataGridToolbar } from "./components/data-grid/data-grid-toolbar.js";
 import { DataGrid, isDataGridInteractiveRowClickTarget } from "./components/data-grid/data-grid.js";
 import { UseDataSourceResult, useDataSource } from "./components/data-grid/use-data-source.js";
-import { DEFAULT_PAGINATION, EMPTY_SELECTION, EMPTY_SORT_MODEL, applyQuickSearch, buildRowComparator, clearSelection, createDefaultDataGridState, defaultFormatAbsolute, defaultFormatRelative, defaultMatchRow, defaultParseDate, exportToCsv, formatGridDate, getSortDirection, getSortIndex, getTotalPages, isColumnVisible, paginateRows, resolveColumnValue, resolveColumnWidth, selectAll, toggleRowSelection, toggleSort } from "./components/data-grid/state.js";
+import { useDataGridUrlState } from "./components/data-grid/use-url-state.js";
+import { applyQuickSearch, buildRowComparator, createDefaultDataGridState, defaultFormatAbsolute, defaultFormatRelative, defaultMatchRow, defaultParseDate, exportToCsv, formatGridDate, paginateRows, resolveColumnValue } from "./components/data-grid/state.js";
 import { DATA_GRID_DEFAULT_STRINGS, resolveDataGridStrings } from "./components/data-grid/strings.js";
+import { DesignDialog, DesignDialogClose, DesignDialogDescription, DesignDialogProps, DesignDialogRoot, DesignDialogSize, DesignDialogTitle, DesignDialogTrigger, DesignDialogVariant } from "./components/dialog.js";
 import { DesignEditMode, useDesignEditMode } from "./components/edit-mode.js";
 import { DesignEmptyState, DesignEmptyStateProps } from "./components/empty-state.js";
 import { DesignInput, DesignInputProps } from "./components/input.js";
@@ -32,4 +34,4 @@ import { DesignSeparator, DesignSeparatorProps } from "./components/separator.js
 import { DesignSkeleton, DesignSkeletonProps } from "./components/skeleton.js";
 import { DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow } from "./components/table.js";
 import { DesignCategoryTabItem, DesignCategoryTabs, DesignCategoryTabsProps } from "./components/tabs.js";
-export { ANALYTICS_CHART_DEFAULT_LAYERS, ANALYTICS_CHART_DEFAULT_PALETTE, ANALYTICS_CHART_DEFAULT_STATE, ANALYTICS_CHART_DEFAULT_STRINGS, AnalyticsChart, AnalyticsChartAnnotationsLayer, AnalyticsChartAreaLayer, AnalyticsChartBarLayer, AnalyticsChartDataLayer, AnalyticsChartDelta, AnalyticsChartLayer, AnalyticsChartLayerType, AnalyticsChartLayers, AnalyticsChartLineLayer, AnalyticsChartPalette, AnalyticsChartPieProps, AnalyticsChartPieState, AnalyticsChartProps, AnalyticsChartSegmentRamp, AnalyticsChartSeries, AnalyticsChartState, AnalyticsChartStrings, AnalyticsChartStrokeStyle, AnalyticsChartTimeseriesState, AnalyticsChartTooltipContext, AnalyticsChartTooltipLayerView, AnalyticsChartTooltipSegmentRow, AnalyticsChartView, Annotation, CursorBlastEffect, type CursorBlastEffectProps, DATA_GRID_DEFAULT_STRINGS, DEFAULT_FORMAT_KIND, DEFAULT_PAGINATION, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DataGrid, DataGridCallbacks, DataGridCellContext, DataGridColumnAlign, DataGridColumnDef, DataGridColumnPin, DataGridColumnPinning, DataGridColumnType, DataGridColumnVisibility, DataGridDataPaginationMode, DataGridDataSource, DataGridDateDisplay, DataGridDateFormat, DataGridFetchParams, DataGridFetchResult, DataGridFooterContext, DataGridHeaderContext, DataGridPaginationMode, DataGridPaginationModel, DataGridProps, DataGridSelectOption, DataGridSelectionMode, DataGridSelectionModel, DataGridSortItem, DataGridSortModel, DataGridState, DataGridStrings, DataGridToolbar, DataGridToolbarContext, DefaultAnalyticsChartTooltip, DefaultAnalyticsChartTooltipProps, DesignAlert, type DesignAlertProps, DesignBadge, type DesignBadgeColor, type DesignBadgeContentMode, type DesignBadgeProps, type DesignBadgeSize, DesignButton, type DesignButtonProps, DesignCard, type DesignCardProps, DesignCardTint, type DesignCardTintProps, type DesignCategoryTabItem, DesignCategoryTabs, type DesignCategoryTabsProps, DesignChartCard, type DesignChartCardProps, type DesignChartColorEntry, type DesignChartColorName, type DesignChartConfig, DesignChartContainer, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignEditMode, DesignEmptyState, type DesignEmptyStateProps, DesignInput, type DesignInputProps, DesignMetricCard, type DesignMetricCardProps, type DesignMetricCardTrend, type DesignOriginalButtonProps, DesignPillToggle, type DesignPillToggleOption, type DesignPillToggleProps, DesignProgressBar, type DesignProgressBarProps, DesignSeparator, type DesignSeparatorProps, DesignSkeleton, type DesignSkeletonProps, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, EMPTY_MATRIX, EMPTY_SELECTION, EMPTY_SERIES, EMPTY_SORT_MODEL, FORMAT_KIND_TYPES, FormatKind, FormatKindCurrency, FormatKindDatetime, FormatKindDuration, FormatKindNumeric, FormatKindPercent, FormatKindShort, FormatKindType, Margin, Point, ResolvedDataLayerStyle, RowId, STROKE_DASHARRAY, TrendPill, UseDataSourceResult, applyQuickSearch, buildRampColors, buildRowComparator, buildSegmentThemeMap, clearSelection, computeLocalInProgressIdx, createDefaultDataGridState, defaultFormatAbsolute, defaultFormatRelative, defaultMatchRow, defaultParseDate, exportToCsv, findAnnotationsLayer, findCompareLayer, findLayerById, findPrimaryLayer, formatDelta, formatGridDate, formatValue, getDesignChartColor, getEffectiveMinWidth, getPayloadConfigFromPayload, getSortDirection, getSortIndex, getTotalPages, isAnalyticsChartDataLayer, isColumnVisible, isDataGridInteractiveRowClickTarget, isTimeseriesState, paginateRows, patchLayerById, pointValue, resolveAnalyticsChartPalette, resolveAnalyticsChartStrings, resolveColumnValue, resolveColumnWidth, resolveDataGridStrings, resolveDataLayerStyle, selectAll, setLayerById, toggleRowSelection, toggleSort, useDataSource, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };
+export { ANALYTICS_CHART_DEFAULT_LAYERS, ANALYTICS_CHART_DEFAULT_PALETTE, ANALYTICS_CHART_DEFAULT_STATE, ANALYTICS_CHART_DEFAULT_STRINGS, AnalyticsChart, AnalyticsChartAnnotationsLayer, AnalyticsChartAreaLayer, AnalyticsChartBarLayer, AnalyticsChartDataLayer, AnalyticsChartDelta, AnalyticsChartLayer, AnalyticsChartLayerType, AnalyticsChartLayers, AnalyticsChartLineLayer, AnalyticsChartPalette, AnalyticsChartPieProps, AnalyticsChartPieState, AnalyticsChartProps, AnalyticsChartSegmentRamp, AnalyticsChartSeries, AnalyticsChartState, AnalyticsChartStrings, AnalyticsChartStrokeStyle, AnalyticsChartTimeseriesState, AnalyticsChartTooltipContext, AnalyticsChartTooltipLayerView, AnalyticsChartTooltipSegmentRow, AnalyticsChartView, Annotation, CursorBlastEffect, type CursorBlastEffectProps, DATA_GRID_DEFAULT_STRINGS, DEFAULT_COL_WIDTH, DEFAULT_FORMAT_KIND, DEFAULT_MAX_COL_WIDTH, DESIGN_CHART_AXIS_TICK_STYLE, DESIGN_CHART_COLORS, DESIGN_CHART_GRID_COLOR, DataGrid, DataGridCallbacks, DataGridCellContext, DataGridColumnAlign, DataGridColumnDef, DataGridColumnPin, DataGridColumnPinning, DataGridColumnType, DataGridColumnVisibility, DataGridDataPaginationMode, DataGridDataSource, DataGridDateDisplay, DataGridDateFormat, DataGridFetchParams, DataGridFetchResult, DataGridFooterContext, DataGridHeaderContext, DataGridPaginationMode, DataGridPaginationModel, DataGridProps, DataGridSelectOption, DataGridSelectionMode, DataGridSelectionModel, DataGridSortItem, DataGridSortModel, DataGridState, DataGridStrings, DataGridToolbar, DataGridToolbarContext, DefaultAnalyticsChartTooltip, DefaultAnalyticsChartTooltipProps, DesignAlert, type DesignAlertProps, DesignBadge, type DesignBadgeColor, type DesignBadgeContentMode, type DesignBadgeProps, type DesignBadgeSize, DesignButton, type DesignButtonProps, DesignCard, type DesignCardProps, DesignCardTint, type DesignCardTintProps, type DesignCategoryTabItem, DesignCategoryTabs, type DesignCategoryTabsProps, DesignChartCard, type DesignChartCardProps, type DesignChartColorEntry, type DesignChartColorName, type DesignChartConfig, DesignChartContainer, DesignChartLegendContent, DesignChartStyle, DesignChartTooltip, DesignChartTooltipContent, DesignDialog, DesignDialogClose, DesignDialogDescription, type DesignDialogProps, DesignDialogRoot, type DesignDialogSize, DesignDialogTitle, DesignDialogTrigger, type DesignDialogVariant, DesignEditMode, DesignEmptyState, type DesignEmptyStateProps, DesignInput, type DesignInputProps, DesignMetricCard, type DesignMetricCardProps, type DesignMetricCardTrend, type DesignOriginalButtonProps, DesignPillToggle, type DesignPillToggleOption, type DesignPillToggleProps, DesignProgressBar, type DesignProgressBarProps, DesignSeparator, type DesignSeparatorProps, DesignSkeleton, type DesignSkeletonProps, DesignTable, DesignTableBody, DesignTableCell, DesignTableHead, DesignTableHeader, DesignTableRow, EMPTY_MATRIX, EMPTY_SERIES, FORMAT_KIND_TYPES, FormatKind, FormatKindCurrency, FormatKindDatetime, FormatKindDuration, FormatKindNumeric, FormatKindPercent, FormatKindShort, FormatKindType, Margin, Point, ResolvedDataLayerStyle, RowId, STROKE_DASHARRAY, TrendPill, UseDataSourceResult, applyQuickSearch, buildRampColors, buildRowComparator, buildSegmentThemeMap, clampColumnWidth, computeLocalInProgressIdx, createDefaultDataGridState, defaultFormatAbsolute, defaultFormatRelative, defaultMatchRow, defaultParseDate, exportToCsv, findAnnotationsLayer, findCompareLayer, findLayerById, findPrimaryLayer, formatDelta, formatGridDate, formatValue, getDesignChartColor, getEffectiveMaxWidth, getEffectiveMinWidth, getPayloadConfigFromPayload, isAnalyticsChartDataLayer, isDataGridInteractiveRowClickTarget, isTimeseriesState, paginateRows, patchLayerById, pointValue, resolveAnalyticsChartPalette, resolveAnalyticsChartStrings, resolveColumnValue, resolveDataGridStrings, resolveDataLayerStyle, setLayerById, useDataGridUrlState, useDataSource, useDesignChart, useDesignEditMode, useGlassmorphicDefault, useInsideDesignCard };