@epam/ai-dial-ui-kit 0.16.0-dev.43 → 0.16.0-dev.45

package/dist/components/New/Grid/Grid.js

@@ -1,105 +1,113 @@
 import { jsx as o } from "react/jsx-runtime";
-import { themeBalham as Ne, colorSchemeDark as Ie, colorSchemeLight as Te } from "../../../node_modules/ag-grid-community/dist/package/main.esm.js";
-import { AgGridReact as De } from "../../../node_modules/ag-grid-react/dist/package/index.esm.js";
-import { IconZoomCancel as Ge } from "@tabler/icons-react";
-import { useState as Ae, useRef as b, useId as be, useCallback as s, useMemo as m, useEffect as g } from "react";
-import { useIsMobileScreen as Le } from "../../../hooks/use-is-mobile-screen.js";
-import { useIsTabletScreen as we } from "../../../hooks/use-is-tablet-screen.js";
-import { GridSelectionMode as X } from "../../../models/selection-mode.js";
-import { DropdownTrigger as Oe } from "../../../types/dropdown.js";
-import { GridColorScheme as Y } from "../../../types/grid.js";
-import { debounceFn as ye } from "../../../utils/debounce.js";
-import { baseColumnComparator as ve, omitUndefined as ke } from "../../../utils/grid-comparators.js";
-import { registerAgGridModulesOnce as xe } from "../../../utils/grid-registration.js";
-import { mergeClasses as ee } from "../../../utils/merge-classes.js";
-import { Dropdown as He } from "../Dropdown/Dropdown.js";
-import { EllipsisTooltip as We } from "../EllipsisTooltip/EllipsisTooltip.js";
-import { NoDataContent as ze } from "../NoDataContent/NoDataContent.js";
-import { SelectionCell as Pe } from "./components/SelectionCell.js";
-import { SelectionHeader as Fe } from "./components/SelectionHeader.js";
-import { GRID_THEME_PARAMS as L, SelectionEventSourceType as S, GRID_ROW_SELECT_CLASS as Ue, GRID_HEADER_SELECT_CLASS as Me, ROW_HEIGHT as re, GRID_WITHOUT_HEADER_BORDERS_CLASS as Be, GRID_SELECTION_VISIBLE_CLASS as Ve, GRID_WITH_SELECTION_CLASS as je, GRID_ROOT_CLASS as Je } from "./constants.js";
-import { SELECTION_COL_DEF as Ze } from "./renderers/constants.js";
-const $e = "dial-kit-grid-selection", qe = 150, Ke = 100, Rr = ({
+import { themeBalham as Ae, colorSchemeDark as De, colorSchemeLight as Ge } from "../../../node_modules/ag-grid-community/dist/package/main.esm.js";
+import { AgGridReact as Le } from "../../../node_modules/ag-grid-react/dist/package/index.esm.js";
+import { IconZoomCancel as be } from "@tabler/icons-react";
+import { useState as we, useRef as b, useId as Oe, useCallback as s, useMemo as m, useEffect as g } from "react";
+import { useIsMobileScreen as ye } from "../../../hooks/use-is-mobile-screen.js";
+import { useIsTabletScreen as ve } from "../../../hooks/use-is-tablet-screen.js";
+import { GridSelectionMode as Y } from "../../../models/selection-mode.js";
+import { DropdownTrigger as He } from "../../../types/dropdown.js";
+import { GridAppearance as ee, GridColorScheme as re } from "../../../types/grid.js";
+import { debounceFn as ke } from "../../../utils/debounce.js";
+import { baseColumnComparator as xe, omitUndefined as We } from "../../../utils/grid-comparators.js";
+import { registerAgGridModulesOnce as ze } from "../../../utils/grid-registration.js";
+import { mergeClasses as te } from "../../../utils/merge-classes.js";
+import { Dropdown as Pe } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as Fe } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { NoDataContent as Ue } from "../NoDataContent/NoDataContent.js";
+import { SelectionCell as Be } from "./components/SelectionCell.js";
+import { SelectionHeader as Me } from "./components/SelectionHeader.js";
+import { GRID_THEME_PARAMS as w, SelectionEventSourceType as S, GRID_ROW_SELECT_CLASS as Ve, GRID_HEADER_SELECT_CLASS as je, ROW_HEIGHT as oe, GRID_CHAT_CLASS as Je, GRID_WITHOUT_HEADER_BORDERS_CLASS as Ze, GRID_SELECTION_VISIBLE_CLASS as $e, GRID_WITH_SELECTION_CLASS as qe, GRID_ROOT_CLASS as Ke } from "./constants.js";
+import { SELECTION_COL_DEF as Qe } from "./renderers/constants.js";
+const Xe = "dial-kit-grid-selection", Ye = 150, er = 100, Nr = ({
   columnDefs: _,
   rowData: c,
-  additionalGridOptions: w,
+  additionalGridOptions: O,
   getContextMenuItems: N,
-  className: te,
-  ariaLabel: oe = "Data grid",
+  className: ne,
+  ariaLabel: ie = "Data grid",
   wrapCustomCellRenderers: I = !0,
   disabledRowIds: p,
   selectedRowIds: l,
-  onSelectionChange: O,
-  onGridApiChange: ne,
-  getRowId: y,
-  alternateOddRowColors: v = !1,
+  onSelectionChange: y,
+  onGridApiChange: se,
+  getRowId: v,
+  alternateOddRowColors: H = !1,
   filterPlaceholder: k = "Enter value",
   emptyStateIcon: x,
-  emptyStateTitle: H = "No results found",
-  emptyStateDescription: W = "Sorry, we couldn't find any results for your search.",
-  loading: z = !1,
-  wrapperBorder: P = !0,
-  withoutHeaderBorders: ie = !1,
-  allowDisabledContextMenu: F = !1,
+  emptyStateTitle: W = "No results found",
+  emptyStateDescription: z = "Sorry, we couldn't find any results for your search.",
+  loading: P = !1,
+  wrapperBorder: F = !0,
+  withoutHeaderBorders: ae = !1,
+  allowDisabledContextMenu: U = !1,
   selectionMode: n,
-  selectRowLabel: U,
+  selectRowLabel: B,
   selectAllLabel: M = "Select all rows",
-  colorScheme: T = Y.Light
+  colorScheme: T = re.Light,
+  appearance: le = ee.Default
 }) => {
-  xe();
-  const [t, se] = Ae(), ae = Le(), le = we(), D = b(/* @__PURE__ */ new Set()), B = b(
+  ze();
+  const [t, ce] = we(), de = ye(), ue = ve(), A = b(/* @__PURE__ */ new Set()), V = b(
     void 0
-  ), V = `dial-kit-grid-selection-${be()}`, d = b({
-    getRowId: y,
+  ), j = `dial-kit-grid-selection-${Oe()}`, d = b({
+    getRowId: v,
     getContextMenuItems: N,
-    onSelectionChange: O,
-    selectRowLabel: U,
+    onSelectionChange: y,
+    selectRowLabel: B,
     wrapCustomCellRenderers: I
   });
   d.current = {
-    getRowId: y,
+    getRowId: v,
     getContextMenuItems: N,
-    onSelectionChange: O,
-    selectRowLabel: U,
+    onSelectionChange: y,
+    selectRowLabel: B,
     wrapCustomCellRenderers: I
   };
   const a = s((e) => {
     const r = d.current.getRowId;
     return r ? r(e) : String(e.id ?? JSON.stringify(e));
-  }, []), j = !!N, J = !!I, ce = m(
-    () => Ne.withPart(
-      T === Y.Dark ? Ie : Te
+  }, []), J = !!N, Z = !!I, D = le === ee.Chat, me = m(
+    () => Ae.withPart(
+      T === re.Dark ? De : Ge
     ).withParams({
-      ...L,
+      ...w,
       // The shared params pin `browserColorScheme` to light and are applied
       // after the part, so the chosen scheme is set again here.
       browserColorScheme: T,
-      oddRowBackgroundColor: v ? L.oddRowBackgroundColor : L.backgroundColor,
-      wrapperBorder: P
+      oddRowBackgroundColor: H ? w.oddRowBackgroundColor : w.backgroundColor,
+      // The Chat table is a borderless card whose row dividers stop at the
+      // cell padding, so `styles/grid.scss` draws them instead. Its header
+      // and row cells take 12px on each side, not Balham's 8px.
+      ...D ? {
+        wrapperBorder: !1,
+        rowBorder: !1,
+        cellHorizontalPadding: 12
+      } : { wrapperBorder: F }
     }),
-    [v, T, P]
-  ), de = s((e) => {
+    [H, T, F, D]
+  ), fe = s((e) => {
     e.api.sizeColumnsToFit();
-  }, []), ue = ae || le || (l?.size ?? 0) > 0, u = s(
+  }, []), Se = de || ue || (l?.size ?? 0) > 0, u = s(
     (e) => !!e && !!p?.has(a(e)),
     [p, a]
   ), C = s(
-    (e, r, i) => j ? /* @__PURE__ */ o(
-      He,
+    (e, r, i) => J ? /* @__PURE__ */ o(
+      Pe,
       {
-        trigger: [Oe.ContextMenu],
+        trigger: [He.ContextMenu],
         items: e.data ? d.current.getContextMenuItems?.(e.data) ?? [] : [],
         anchorToMouse: !0,
         matchReferenceWidth: !0,
-        className: ee(
+        className: te(
           "size-full",
           i && "cursor-not-allowed opacity-75"
         ),
-        disabled: i && !F,
+        disabled: i && !U,
         children: /* @__PURE__ */ o("span", { className: "block min-w-0 max-w-full flex-1", children: r })
       }
     ) : r,
-    [j, F]
+    [J, U]
   ), G = s(
     (e) => {
       if (!e.data) return null;
@@ -107,7 +115,7 @@ const $e = "dial-kit-grid-selection", qe = 150, Ke = 100, Rr = ({
       return C(
         e,
         /* @__PURE__ */ o(
-          We,
+          Fe,
           {
             text: e.value == null ? "" : String(e.value),
             className: "max-w-full dial-small-text text-primary",
@@ -121,32 +129,32 @@ const $e = "dial-kit-grid-selection", qe = 150, Ke = 100, Rr = ({
   ), h = s(
     (e) => e === S.API || e === S.ROW_DATA_CHANGED,
     []
-  ), me = m(
-    () => ye((e) => {
-      const i = (e.selectedNodes ?? []).map((K) => K.data), f = new Set(i.map(a));
-      D.current = f, B.current = e.source, !h(e.source) && d.current.onSelectionChange?.(f, i);
-    }, Ke),
+  ), pe = m(
+    () => ke((e) => {
+      const i = (e.selectedNodes ?? []).map((Q) => Q.data), f = new Set(i.map(a));
+      A.current = f, V.current = e.source, !h(e.source) && d.current.onSelectionChange?.(f, i);
+    }, er),
     [h, a]
-  ), A = m(() => {
+  ), L = m(() => {
     if (n)
       return {
-        ...Ze,
-        colId: $e,
+        ...Qe,
+        colId: Xe,
         headerName: "",
-        headerClass: Me,
-        cellClass: Ue,
-        headerComponent: n === X.MULTIPLE ? Fe : void 0,
+        headerClass: je,
+        cellClass: Ve,
+        headerComponent: n === Y.MULTIPLE ? Me : void 0,
         headerComponentParams: { label: M },
         cellRenderer: (e) => {
           if (!e.data) return null;
           const r = a(e.data);
           return /* @__PURE__ */ o(
-            Pe,
+            Be,
             {
               params: e,
               mode: n,
               rowId: r,
-              radioName: V,
+              radioName: j,
               label: d.current.selectRowLabel?.(e.data) ?? "Select row",
               disabled: p?.has(r)
             }
@@ -158,8 +166,8 @@ const $e = "dial-kit-grid-selection", qe = 150, Ke = 100, Rr = ({
     M,
     a,
     p,
-    V
-  ]), Z = s(
+    j
+  ]), $ = s(
     (e) => {
       if (!e.cellRenderer)
         return { ...e, cellRenderer: G };
@@ -168,21 +176,21 @@ const $e = "dial-kit-grid-selection", qe = 150, Ke = 100, Rr = ({
         return e;
       const f = e.cellRenderer;
       return { ...e, cellRenderer: (E) => {
-        const ge = u(E.data), Q = typeof f == "function" ? f : void 0, _e = Q ? /* @__PURE__ */ o(Q, { ...E }) : G(E);
-        return C(E, _e, ge);
+        const Ie = u(E.data), X = typeof f == "function" ? f : void 0, Te = X ? /* @__PURE__ */ o(X, { ...E }) : G(E);
+        return C(E, Te, Ie);
       } };
     },
     [u, G, C]
-  ), fe = m(() => {
-    const e = J ? (_ ?? []).map(Z) : _ ?? [];
-    return A ? [A, ...e] : e;
-  }, [_, J, Z, A]), {
-    defaultColDef: $,
+  ), Ce = m(() => {
+    const e = Z ? (_ ?? []).map($) : _ ?? [];
+    return L ? [L, ...e] : e;
+  }, [_, Z, $, L]), {
+    defaultColDef: q,
     rowSelection: R,
-    ...Se
-  } = w ?? {}, pe = m(
+    ...he
+  } = O ?? {}, Re = m(
     () => ({
-      minWidth: qe,
+      minWidth: Ye,
       resizable: !0,
       sortable: !0,
       floatingFilter: !0,
@@ -191,52 +199,52 @@ const $e = "dial-kit-grid-selection", qe = 150, Ke = 100, Rr = ({
         filterPlaceholder: k,
         buttons: ["reset"]
       },
-      comparator: ve,
-      ...ke($)
+      comparator: xe,
+      ...We(q)
     }),
-    [k, $]
-  ), Ce = (e) => {
-    e.api.sizeColumnsToFit(), se(e.api), w?.onGridReady?.(e), ne?.(e.api);
+    [k, q]
+  ), Ee = (e) => {
+    e.api.sizeColumnsToFit(), ce(e.api), O?.onGridReady?.(e), se?.(e.api);
   };
   g(() => {
     t && c && t.setGridOption("rowData", c);
   }, [t, c]);
-  const he = s(
+  const ge = s(
     () => /* @__PURE__ */ o(
-      ze,
+      Ue,
       {
         live: !0,
-        title: H,
-        description: W,
-        icon: x ?? /* @__PURE__ */ o(Ge, { size: 100, stroke: 0.5, "aria-hidden": "true" })
+        title: W,
+        description: z,
+        icon: x ?? /* @__PURE__ */ o(be, { size: 100, stroke: 0.5, "aria-hidden": "true" })
       }
     ),
-    [H, W, x]
-  ), q = typeof R == "object" ? R : void 0, Re = m(() => n ? {
+    [W, z, x]
+  ), K = typeof R == "object" ? R : void 0, _e = m(() => n ? {
     isRowSelectable: (e) => !u(e.data),
     /*
       Merged, not replaced, the way `defaultColDef` is: a consumer reaching
       for `isRowSelectable` alone would otherwise hand ag-Grid a whole new
       object and lose the three settings below with it.
     */
-    ...q,
+    ...K,
     /*
       `selectionMode` owns the mode, because it also decides whether the
       selection column draws checkboxes or radios.
     */
-    mode: n === X.SINGLE ? "singleRow" : "multiRow",
+    mode: n === Y.SINGLE ? "singleRow" : "multiRow",
     // The controls live in this component's own selection column, so
     // ag-Grid's inputs are switched off and only its behaviour is used.
     checkboxes: !1,
     headerCheckbox: !1
   } : R, [
     R,
-    q,
+    K,
     u,
     n
   ]);
   g(() => {
-    t && c && D.current.size && D.current.forEach((e) => {
+    t && c && A.current.size && A.current.forEach((e) => {
       const r = t.getRowNode(e);
       r && !r.isSelected() && r.setSelected(!0, !1, S.API);
     });
@@ -246,13 +254,13 @@ const $e = "dial-kit-grid-selection", qe = 150, Ke = 100, Rr = ({
       r && !r.isSelected() && r.setSelected(!0, !1, S.API);
     }));
   }, [t, l]);
-  const Ee = s(
+  const Ne = s(
     (e) => e.data ? a(e.data) : "",
     [a]
   );
   return g(() => {
     const e = h(
-      B.current
+      V.current
     );
     if (t && l?.size && e) {
       const r = Array.from(l)[0];
@@ -264,45 +272,46 @@ const $e = "dial-kit-grid-selection", qe = 150, Ke = 100, Rr = ({
   }, [t, h, l]), /* @__PURE__ */ o(
     "div",
     {
-      className: ee(
-        Je,
+      className: te(
+        Ke,
         "size-full",
-        n && je,
-        n && ue && Ve,
-        ie && Be,
-        te
+        n && qe,
+        n && Se && $e,
+        ae && Ze,
+        D && Je,
+        ne
       ),
       role: "region",
-      "aria-label": oe,
-      "aria-busy": z,
+      "aria-label": ie,
+      "aria-busy": P,
       children: /* @__PURE__ */ o("div", { className: "h-full overflow-x-auto", children: /* @__PURE__ */ o(
-        De,
+        Le,
         {
           rowModelType: "clientSide",
-          headerHeight: re,
-          rowHeight: re,
+          headerHeight: oe,
+          rowHeight: oe,
           cellSelection: !1,
-          theme: ce,
+          theme: me,
           autoSizeStrategy: { type: "fitGridWidth" },
-          columnDefs: fe,
-          defaultColDef: pe,
-          onGridSizeChanged: de,
-          onGridReady: Ce,
-          loading: z,
+          columnDefs: Ce,
+          defaultColDef: Re,
+          onGridSizeChanged: fe,
+          onGridReady: Ee,
+          loading: P,
           suppressCellFocus: !0,
           suppressDragLeaveHidesColumns: !0,
-          noRowsOverlayComponent: he,
+          noRowsOverlayComponent: ge,
           rowData: c,
-          rowSelection: Re,
-          onSelectionChanged: me,
-          getRowId: Ee,
-          ...Se
+          rowSelection: _e,
+          onSelectionChanged: pe,
+          getRowId: Ne,
+          ...he
         }
       ) })
     }
   );
 };
 export {
-  $e as GRID_SELECTION_COLUMN_ID,
-  Rr as Grid
+  Xe as GRID_SELECTION_COLUMN_ID,
+  Nr as Grid
 };

package/dist/components/New/Grid/constants.js

@@ -1,4 +1,4 @@
-const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-grid-without-header-borders", i = "dial-kit-grid-row-select", l = "dial-kit-grid-header-select", n = "dial-kit-grid-selection-visible", c = "dial-kit-grid-align-right", C = 40, o = "0.5px solid var(--stroke-tertiary, #E0E6F0)", s = {
+const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-grid-chat", i = "dial-kit-grid-without-header-borders", l = "dial-kit-grid-row-select", n = "dial-kit-grid-header-select", c = "dial-kit-grid-selection-visible", C = "dial-kit-grid-align-right", s = 40, o = "0.5px solid var(--stroke-tertiary, #E0E6F0)", _ = {
   accentColor: "var(--bg-control-accent, #1D4ED8)",
   backgroundColor: "var(--bg-layer-raised, #FCFCFC)",
   oddRowBackgroundColor: "var(--bg-layer-sunken, #EEF1F7)",
@@ -43,14 +43,15 @@ const a = "dial-kit-grid", t = "dial-kit-grid-with-selection", d = "dial-kit-gri
 };
 var e = /* @__PURE__ */ ((r) => (r.API = "api", r.ROW_DATA_CHANGED = "rowDataChanged", r.CHECKBOX_SELECTED = "checkboxSelected", r))(e || {});
 export {
-  c as GRID_ALIGN_RIGHT_CLASS,
-  l as GRID_HEADER_SELECT_CLASS,
+  C as GRID_ALIGN_RIGHT_CLASS,
+  d as GRID_CHAT_CLASS,
+  n as GRID_HEADER_SELECT_CLASS,
   a as GRID_ROOT_CLASS,
-  i as GRID_ROW_SELECT_CLASS,
-  n as GRID_SELECTION_VISIBLE_CLASS,
-  s as GRID_THEME_PARAMS,
-  d as GRID_WITHOUT_HEADER_BORDERS_CLASS,
+  l as GRID_ROW_SELECT_CLASS,
+  c as GRID_SELECTION_VISIBLE_CLASS,
+  _ as GRID_THEME_PARAMS,
+  i as GRID_WITHOUT_HEADER_BORDERS_CLASS,
   t as GRID_WITH_SELECTION_CLASS,
-  C as ROW_HEIGHT,
+  s as ROW_HEIGHT,
   e as SelectionEventSourceType
 };

package/dist/components/New/Popup/constants.js

@@ -1,5 +1,5 @@
 import { PopupSize as e } from "../../../types/popup.js";
-const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h3-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
+const o = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6", a = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto", t = "flex flex-row items-center justify-between px-6 py-4", s = "flex-1 min-w-0 mr-3 truncate dial-h2-text text-primary", l = "border-b border-tertiary", r = "flex flex-row items-center gap-2 px-6 py-4", m = "border-t border-tertiary", i = "flex shrink-0 flex-row items-center gap-2", x = "ml-auto mobile:flex-1", n = "mobile:flex-1", u = {
   [e.Sm]: "max-w-full md:max-w-[400px]",
   [e.Md]: "max-w-full md:max-w-[800px]",
   [e.Lg]: "max-w-full md:max-w-[1200px]"

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.43",
-  "generatedAt": "2026-10-24T19:06:23.562Z",
+  "version": "0.16.0-dev.45",
+  "generatedAt": "2026-10-24T22:21:11.671Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -17,7 +17,7 @@
     "setupNotes": "## Next.js Integration\n1. Install the package. React is the only peer you have to supply — everything\n   the kit renders with, it installs itself.\n\n``` bash\nnpm install @epam/ai-dial-ui-kit\nnpm install react react-dom\n```\n\nAdd the editor packages only if you use the `@epam/ai-dial-ui-kit/editors`\nsubpath. They are optional peers, so `npm install` stays quiet without them, and\nthe kit only reaches for them when a `Lazy*` editor actually mounts:\n\n``` bash\nnpm install monaco-editor @monaco-editor/react @uiw/react-md-editor\n```\n\n2. Import style in the root layout of the project:\n\n```tsx\n// app/layout.tsx\nimport \"@epam/ai-dial-ui-kit/styles.css\";\n```\n\n3. Usage example\n\n```tsx\n// app/page.tsx\n\"use client\";\nimport { DialPrimaryButton } from \"@epam/ai-dial-ui-kit\";\n\nexport default function Home() {\n  return (\n    <div className=\"w-full h-full flex flex-col gap-3 items-center justify-center\">\n      <h1>Test library</h1>\n      <DialPrimaryButton onClick={() => alert('Hello AI DIAL!')} />\n    </div>\n  );\n}\n```\nSee \"🎨 Theming & Customization\" section in README."
   },
   "styles": "# Typography CSS Utility Classes\n\n## Design-system-compliant classes (`dial-*-text`)\n\nUse these by default. They follow the design system type scale.\n\n| Class                             | Design name                 | Weight   | Size / Line-height                  |\n| --------------------------------- | --------------------------- | -------- | ----------------------------------- |\n| `.dial-display1-text`             | Display 1                   | semibold | 32px / 48px                         |\n| `.dial-display2-text`             | Display 2                   | semibold | 28px / 40px                         |\n| `.dial-display3-text`             | Display 3                   | semibold | 22px / 32px                         |\n| `.dial-h1-text`                   | Heading 1                   | semibold | 20px / 28px                         |\n| `.dial-h2-text`                   | Heading 2                   | semibold | 18px / 26px                         |\n| `.dial-h3-text`                   | Heading 3                   | semibold | 16px / 24px                         |\n| `.dial-body-text`                 | Body Text                   | normal   | 16px / 24px                         |\n| `.dial-body-semi-text`            | Body Text (Semi Bold)       | semibold | 16px / 24px                         |\n| `.dial-body-paragraph-text`       | Body Paragraph              | normal   | 16px / 26px                         |\n| `.dial-body-paragraph-semi-text`  | Body Paragraph (Semi Bold)  | semibold | 16px / 26px                         |\n| `.dial-small-text`                | Small Text                  | normal   | 14px / 20px                         |\n| `.dial-small-semi-text`           | Small Text (Semi Bold)      | semibold | 14px / 20px                         |\n| `.dial-small-paragraph-text`      | Small Paragraph             | normal   | 14px / 24px                         |\n| `.dial-small-paragraph-semi-text` | Small Paragraph (Semi Bold) | semibold | 14px / 24px                         |\n| `.dial-tiny-text`                 | Tiny Text                   | normal   | 12px / 16px                         |\n| `.dial-tiny-lead-text`            | Tiny Text Lead              | normal   | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-tiny-semi-text`            | Tiny Text (Semi Bold)       | semibold | 12px / 16px                         |\n| `.dial-tiny-lead-semi-text`       | Tiny Text Lead (Semi Bold)  | semibold | 12px / 16px (+0.03em, uppercase)    |\n| `.dial-caption-text`              | Caption                     | normal   | 10px / 12px                         |\n| `.dial-caption-lead-semi-text`    | Caption Lead (Semi Bold)    | semibold | 10px / 12px (+0.06em, uppercase)    |\n| `.dial-code-text`                 | Code                        | normal   | 14px / 20px (Fira Code / monospace) |\n| `.dial-italic-text`               | Italic                      | normal   | 18px / 22px (serif, italic)         |\n| `.dial-small-italic-text`         | Small Italic                | normal   | 14px / 20px (serif, italic)         |\n| `.dial-tiny-italic-text`          | Tiny Italic                 | normal   | 12px / 16px (serif, italic)         |\n| `.dial-caption-italic-text`       | Caption Italic              | normal   | 10px / 12px (serif, italic)         |\n\nThe three `*-lead-*` classes apply `text-transform: uppercase` themselves — pass them the sentence-case string, not a pre-uppercased one, so the accessible name stays readable.\n\n`.dial-code-text` resolves its family through `var(--theme-font-mono, var(--font-fira-code, 'Fira Code'))` before falling back to the system monospace stack. The kit ships no font file; the host provides the face.\n\nThe `*-italic-text` classes use a serif italic face and are intended for mathematical and formula symbols. Their line-heights follow the corresponding typography size; the default 18px variant uses a fixed 22px line-height to keep standalone symbols vertically aligned without changing their container's height.\n\n## Legacy classes (avoid in new code)\n\nClasses like `dial-h1`, `dial-h2`, `dial-body`, `dial-small*`, `dial-tiny*`, `dial-caption` are legacy. They can be used in legacy projects if user explicidly specify they need legacy typography.\n\n## Raw SCSS source\n",
-  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see src/styles/theme.scss for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n  --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-base` | `var(--bg-layer-base)` | `#f5f7fa` |\n| `error` | `var(--bg-error)` | `#f3d6d8` |\n| `warning` | `var(--bg-warning)` | `#faf0cf` |\n| `info` | `var(--bg-info)` | `#e1eaf9` |\n| `success` | `var(--bg-success)` | `#dbf1eb` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1d4ed8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885df2` |\n| `blue` | `var(--bg-visual-blue)` | `#d6edf9` |\n| `green-1` | `var(--bg-visual-green-1)` | `#cde8e5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#d1f0dc` |\n| `brown` | `var(--bg-visual-brown)` | `#fde8d8` |\n| `red` | `var(--bg-visual-red)` | `#fce7f3` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--stroke-primary)` | `#57647a` |\n| `secondary` | `var(--stroke-secondary)` | `#d1dbea` |\n| `tertiary` | `var(--stroke-tertiary)` | `#e0e6f0` |\n| `error` | `var(--stroke-error)` | `#ae2f2f` |\n| `warning` | `var(--stroke-warning)` | `#eec840` |\n| `info` | `var(--stroke-info)` | `#1d4ed8` |\n| `accent` | `var(--stroke-accent)` | `#1d4ed8` |\n| `success` | `var(--stroke-success)` | `#007274` |\n| `default` | `var(--stroke-default)` | `#b2c2dd` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976e9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885df2` |\n| `focus` | `var(--stroke-focus)` | `#161b2d` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--text-primary)` | `#161b2d` |\n| `secondary` | `var(--text-secondary)` | `#57647a` |\n| `tertiary` | `var(--text-tertiary)` | `#848e9c` |\n| `accent` | `var(--text-accent)` | `#1d4ed8` |\n| `error` | `var(--text-error)` | `#ae2f2f` |\n| `warning` | `var(--text-warning)` | `#7f6300` |\n| `warning-icon` | `var(--text-warning-icon)` | `#eec840` |\n| `info` | `var(--text-info)` | `#1d4ed8` |\n| `success` | `var(--text-success)` | `#007274` |\n| `blue` | `var(--text-visual-blue)` | `#1189c8` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0d6e72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065f46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#d36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#b45309` |\n| `red` | `var(--text-visual-red)` | `#9d174d` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7c3aed` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730b7` |\n\n### placeholderColor\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--text-primary)` | `#161b2d` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#fcfcfc` |\n| `layer-1` | `var(--bg-layer-1)` | `#e0e6f0` |\n| `layer-2` | `var(--bg-layer-2)` | `#eef1f7` |\n| `layer-3` | `var(--bg-layer-3)` | `#fcfcfc` |\n| `layer-4` | `var(--bg-layer-4)` | `#d1dbea` |\n| `blackout` | `var(--bg-blackout)` | `#0c101d4d` |\n| `neutral` | `var(--bg-neutral)` | `#fcfcfc` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5c8dea` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37babc` |\n| `red-400` | `var(--bg-red-400)` | `#f76464` |\n| `controls-error` | `var(--controls-bg-error)` | `#ae2f2f` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#d1dbea` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ace` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5c8dea` |\n| `hover` | `var(--stroke-hover)` | `#eef1f7` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7da4ff` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37babc` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#a972ff` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#fcfcfc` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161b2d` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `lg` | `var(--shadow-lg)` | `#2764d914` |",
+  "theming": "# Theming & CSS Variable Tokens\n\nAI DIAL UI Kit uses CSS custom properties (variables) for theming.\nDark and light themes are switched by setting different values for these variables on `:root` or a theme wrapper element.\n\n## Usage in Tailwind\n\nThe Tailwind config maps CSS variables to utility classes.\nUse these classes in your components:\n\n```tsx\n// Backgrounds\n<div className=\"bg-layer-0\" />   // darkest background\n<div className=\"bg-layer-1\" />   // main content area\n<div className=\"bg-layer-2\" />   // elevated panels\n\n// Text\n<span className=\"text-primary\" />    // main text color\n<span className=\"text-secondary\" />  // muted text\n<span className=\"text-error\" />      // error state\n\n// Borders\n<div className=\"border border-primary\" />  // standard border\n<div className=\"border border-error\" />    // error border\n```\n\n## Override CSS Variables\n\n```css\n:root {\n  --bg-layer-0: #000000;\n  --bg-layer-1: #0c101d;\n  --bg-layer-2: #161b2d;\n  --bg-layer-3: #1d2439;\n  --text-primary: #eef1f7;\n  --text-secondary: #9fa6bd;\n  --text-error: #f76464;\n  --stroke-primary: #696e7c;\n  --controls-bg-accent-primary: #3664e2;\n  /* ... see src/styles/theme.scss for full list */\n}\n```\n\n## Overlay stacking\n\nPortalled overlays stack on a ladder driven by one variable, `--z-overlay`\n(default `52`): `z-popup` (base — `Popup` backdrop), `z-floating` (+1 —\n`Dropdown`/`Select` overlays, submenus, `Calendar`), `z-interactive-tooltip`\n(+2 — `InteractiveTooltip`), `z-tooltip` (+3 — `Tooltip`). To lift every\noverlay above a host's own sticky header or modal, set the base once on `:root`\n(or in a `ThemeScope` class) — the steps move together, so their order is kept:\n\n```css\n:root {\n  --z-overlay: 1000;\n}\n```\n\nDo not override `[role='menu']` or hardcode `z-[53]` in a host. To move one\noverlay only, pass a `z-*` utility through its class prop (`listClassName`,\n`overlayClassName`, `contentClassName`, `panelClassName`) — `mergeClasses`\nreplaces the layer's step with it.\n\n## Token Reference\n\n\n### backgroundsColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-base` | `var(--bg-layer-base)` | `#f5f7fa` |\n| `error` | `var(--bg-error)` | `#f3d6d8` |\n| `warning` | `var(--bg-warning)` | `#faf0cf` |\n| `info` | `var(--bg-info)` | `#e1eaf9` |\n| `success` | `var(--bg-success)` | `#dbf1eb` |\n| `gradient-1` | `var(--bg-gradient-1)` | `#1d4ed8` |\n| `gradient-2` | `var(--bg-gradient-2)` | `#885df2` |\n| `blue` | `var(--bg-visual-blue)` | `#d6edf9` |\n| `green-1` | `var(--bg-visual-green-1)` | `#cde8e5` |\n| `green-2` | `var(--bg-visual-green-2)` | `#d1f0dc` |\n| `brown` | `var(--bg-visual-brown)` | `#fde8d8` |\n| `red` | `var(--bg-visual-red)` | `#fce7f3` |\n\n### borderColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--stroke-primary)` | `#57647a` |\n| `secondary` | `var(--stroke-secondary)` | `#d1dbea` |\n| `tertiary` | `var(--stroke-tertiary)` | `#e0e6f0` |\n| `error` | `var(--stroke-error)` | `#ae2f2f` |\n| `warning` | `var(--stroke-warning)` | `#eec840` |\n| `info` | `var(--stroke-info)` | `#1d4ed8` |\n| `accent` | `var(--stroke-accent)` | `#1d4ed8` |\n| `success` | `var(--stroke-success)` | `#007274` |\n| `default` | `var(--stroke-default)` | `#b2c2dd` |\n| `gradient-1` | `var(--stroke-gradient-1)` | `#5976e9` |\n| `gradient-2` | `var(--stroke-gradient-2)` | `#885df2` |\n| `focus` | `var(--stroke-focus)` | `#161b2d` |\n\n### textColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--text-primary)` | `#161b2d` |\n| `secondary` | `var(--text-secondary)` | `#57647a` |\n| `tertiary` | `var(--text-tertiary)` | `#848e9c` |\n| `accent` | `var(--text-accent)` | `#1d4ed8` |\n| `error` | `var(--text-error)` | `#ae2f2f` |\n| `warning` | `var(--text-warning)` | `#7f6300` |\n| `warning-icon` | `var(--text-warning-icon)` | `#eec840` |\n| `info` | `var(--text-info)` | `#1d4ed8` |\n| `success` | `var(--text-success)` | `#007274` |\n| `blue` | `var(--text-visual-blue)` | `#1189c8` |\n| `green-1` | `var(--text-visual-green-1)` | `#059669` |\n| `green-2` | `var(--text-visual-green-2)` | `#0d6e72` |\n| `green-3` | `var(--text-visual-green-3)` | `#065f46` |\n| `brown-1` | `var(--text-visual-brown-1)` | `#d36817` |\n| `brown-2` | `var(--text-visual-brown-2)` | `#b45309` |\n| `red` | `var(--text-visual-red)` | `#9d174d` |\n| `violet-1` | `var(--text-visual-violet-1)` | `#7c3aed` |\n| `violet-2` | `var(--text-visual-violet-2)` | `#3730b7` |\n\n### placeholderColor\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `primary` | `var(--text-primary)` | `#161b2d` |\n\n### backgroundsColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `layer-0` | `var(--bg-layer-0)` | `#fcfcfc` |\n| `layer-1` | `var(--bg-layer-1)` | `#e0e6f0` |\n| `layer-2` | `var(--bg-layer-2)` | `#eef1f7` |\n| `layer-3` | `var(--bg-layer-3)` | `#fcfcfc` |\n| `layer-4` | `var(--bg-layer-4)` | `#d1dbea` |\n| `blackout` | `var(--bg-blackout)` | `#0c101d4d` |\n| `neutral` | `var(--bg-neutral)` | `#fcfcfc` |\n| `accent-primary` | `var(--bg-accent-primary)` | `#5c8dea` |\n| `accent-secondary` | `var(--bg-accent-secondary)` | `#37babc` |\n| `red-400` | `var(--bg-red-400)` | `#f76464` |\n| `controls-error` | `var(--controls-bg-error)` | `#ae2f2f` |\n| `controls-disable` | `var(--controls-bg-disable)` | `#d1dbea` |\n\n### borderColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--stroke-accent-primary)` | `#124ace` |\n| `accent-secondary` | `var(--stroke-accent-secondary)` | `#007274` |\n| `controls-accent` | `var(--controls-bg-accent)` | `#5c8dea` |\n| `hover` | `var(--stroke-hover)` | `#eef1f7` |\n| `red-900` | `var(--red-900)` | `#402027` |\n\n### textColorsToRemove\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `accent-primary` | `var(--text-accent-primary)` | `#7da4ff` |\n| `accent-secondary` | `var(--text-accent-secondary)` | `#37babc` |\n| `accent-tertiary` | `var(--text-accent-tertiary)` | `#a972ff` |\n| `controls-permanent` | `var(--controls-text-permanent)` | `#fcfcfc` |\n| `controls-neutral` | `var(--controls-text-neutral)` | `#161b2d` |\n\n### shadowColors\n| Tailwind class suffix | CSS variable | Default value |\n|---|---|---|\n| `xs` | `var(--shadow-xs-1)` | `#2764d933` |\n| `lg` | `var(--shadow-lg)` | `#2764d914` |",
   "components": [
     {
       "name": "Spinner",
@@ -5585,6 +5585,13 @@
           "required": false,
           "defaultValue": "GridColorScheme.Light",
           "description": "AG Grid color scheme. `dark` paints native controls dark."
+        },
+        {
+          "name": "appearance",
+          "type": "GridAppearance",
+          "required": false,
+          "defaultValue": "GridAppearance.Default",
+          "description": "Visual treatment; `chat` draws the borderless \"Chat table\"."
         }
       ],
       "examples": [
@@ -11847,6 +11854,22 @@
       "sourceFile": "types/transfer-queue.ts",
       "description": "Lifecycle status of one item in a `TransferQueue`."
     },
+    {
+      "name": "GridAppearance",
+      "kind": "enum",
+      "members": [
+        {
+          "name": "Default",
+          "value": "'default'"
+        },
+        {
+          "name": "Chat",
+          "value": "'chat'"
+        }
+      ],
+      "sourceFile": "types/grid.ts",
+      "description": "Visual treatment of `Grid`. `Default` is the framed data grid. `Chat` is the\n\"Chat table\" of the design: a borderless card with a 12px corner and the MD\nshadow, 12px of cell padding on both sides, row dividers inset by that\npadding, and rounded hover and selected rows."
+    },
     {
       "name": "GridColorScheme",
       "kind": "enum",