@epam/ai-dial-ui-kit 0.14.0-dev.9 → 0.15.0-dev.1

package/dist/migration-guides/0.14.0/shadow-token-per-step-rename.md

@@ -1,4 +1,4 @@
-# Migrating the shadow variables to per-step names — v0.13.0 → v0.14.0
+# Migrating the shadow scale — v0.13.0 → v0.14.0
 
 ## Why this changed
 
@@ -15,41 +15,74 @@ lg: '0 10px 36px 0 var(--shadow-grey-1000, …), 0 10px 24px 0 var(--shadow-blue
 
 One `--shadow-blue-500` carried the blue of all four steps, so a theme could not darken `lg` without darkening `xs` by the same amount — the ramp collapsed to a single value. `--shadow-grey-1000` had the same problem across the two steps that still use grey.
 
-The design has since split the scale per step: `md` and `lg` are a **single** wide blue layer (the grey layer only muddies them at that size), and `xs` / `sm` keep two layers but with the blue as the wide one. Each step now reads its own variable, named after the step rather than the hue:
+The design has since split the scale per step: `sm`, `md` and `lg` are a **single** wide blue layer (the grey layer only muddies them at that size), and `xs` keeps two layers but with the blue as the wide one. Each step now reads its own variable, named after the step rather than the hue:
 
-- `--shadow-xs-sm-1` / `--shadow-xs-sm-2` — the two layers `shadow-xs` and `shadow-sm` share, outer first.
-- `--shadow-md`, `--shadow-lg` — the one layer each of those steps draws.
+- `--shadow-sm`, `--shadow-md`, `--shadow-lg` — the one layer each of those steps draws.
+- `--shadow-xs-1` / `--shadow-xs-2` — the two layers `shadow-xs` draws, outer first.
 
-The Tailwind class names (`shadow-xs`, `shadow-sm`, `shadow-md`, `shadow-lg`) are **unchanged**. This is a theming change: only a host that sets the CSS variables has to do anything.
+`sm` also changed meaning. It used to be the resting shadow of a solid button; it is now the **side panel** shadow — `0 8px 10px` at blue-500 alpha-8, used by the side bar, the side panel and the right panel. The value it used to hold has not changed at all, but it no longer has a step in the design scale, so it is written out in `buttons.scss` as a class instead of taking a fifth `boxShadow` key:
+
+| Role                                                      | 0.13.0      | 0.14.0                    |
+| --------------------------------------------------------- | ----------- | ------------------------- |
+| Side bar / side panel / right panel                       | —           | `shadow-sm`               |
+| Resting shadow of a solid button, the FAB, a slider thumb | `shadow-sm` | `dial-kit-control-shadow` |
 
 ## What changed
 
 ### Variables
 
-| 0.13.0 variable      | 0.14.0 variable                                                     | Light default                   |
-| -------------------- | ------------------------------------------------------------------- | ------------------------------- |
-| `--shadow-blue-500`  | `--shadow-xs-sm-1` (xs, sm)                                         | `#2764D933` (blue-500 alpha-20) |
-| `--shadow-blue-500`  | `--shadow-md`                                                       | `#2764D90A` (blue-500 alpha-4)  |
-| `--shadow-blue-500`  | `--shadow-lg`                                                       | `#2764D914` (blue-500 alpha-8)  |
-| `--shadow-grey-1000` | `--shadow-xs-sm-2` (xs, sm only — `md` and `lg` have no grey layer) | `#161B2D08` (grey-1000 alpha-3) |
-| `--shadow-default`   | _removed_ — `shadow` is no longer a DIAL shadow (see Notes)         | —                               |
+| 0.13.0 variable      | 0.14.0 variable                                                 | Light default                   |
+| -------------------- | --------------------------------------------------------------- | ------------------------------- |
+| `--shadow-blue-500`  | `--shadow-xs-1` (xs and `dial-kit-control-shadow`)              | `#2764D933` (blue-500 alpha-20) |
+| `--shadow-blue-500`  | `--shadow-sm`                                                   | `#2764D914` (blue-500 alpha-8)  |
+| `--shadow-blue-500`  | `--shadow-md`                                                   | `#2764D90F` (blue-500 alpha-6)  |
+| `--shadow-blue-500`  | `--shadow-lg`                                                   | `#2764D914` (blue-500 alpha-8)  |
+| `--shadow-grey-1000` | `--shadow-xs-2` (the same two — no other step has a grey layer) | `#161B2D08` (grey-1000 alpha-3) |
+| `--shadow-default`   | _removed_ — `shadow` is no longer a DIAL shadow (see Notes)     | —                               |
 
-The 0.13.0 names are **not** kept in the fallback chain: one old variable cannot map onto four new ones without re-flattening the ramp it was split to fix.
+The 0.13.0 names are **not** kept in the fallback chain: one old variable cannot map onto five new ones without re-flattening the ramp it was split to fix.
 
 ### Rendered shadows
 
-| Step        | 0.13.0                                          | 0.14.0                                       |
-| ----------- | ----------------------------------------------- | -------------------------------------------- |
-| `shadow-xs` | `0 1px 4px` grey, `0 1px 2px` blue alpha-14     | `0 1px 4px` blue alpha-20, `0 1px 2px` grey  |
-| `shadow-sm` | `0 2px 12px` grey, `0 2px 6px` blue alpha-14    | `0 2px 12px` blue alpha-20, `0 2px 6px` grey |
-| `shadow-md` | `0 6px 24px` grey, `0 6px 16px` blue alpha-14   | `0 8px 24px` blue alpha-4                    |
-| `shadow-lg` | `0 10px 36px` grey, `0 10px 24px` blue alpha-14 | `0 8px 44px` blue alpha-8                    |
+| Step                      | 0.13.0                                          | 0.14.0                                       |
+| ------------------------- | ----------------------------------------------- | -------------------------------------------- |
+| `shadow-xs`               | `0 1px 4px` grey, `0 1px 2px` blue alpha-14     | `0 1px 4px` blue alpha-20, `0 1px 2px` grey  |
+| `dial-kit-control-shadow` | _(new — held by `shadow-sm` in 0.13.0)_         | `0 2px 12px` blue alpha-20, `0 2px 6px` grey |
+| `shadow-sm`               | `0 2px 12px` grey, `0 2px 6px` blue alpha-14    | `0 8px 10px` blue alpha-8                    |
+| `shadow-md`               | `0 6px 24px` grey, `0 6px 16px` blue alpha-14   | `0 8px 24px` blue alpha-6                    |
+| `shadow-lg`               | `0 10px 36px` grey, `0 10px 24px` blue alpha-14 | `0 8px 44px` blue alpha-8                    |
 
-In `xs` and `sm` the blue and grey layers have **swapped roles**: the blue is now the wide diffuse layer and the grey the tight one. `md` and `lg` sit lower and softer than before, so anything using them — `Card`, `Calendar`, `Input`, overlays, tooltips, the collapsible sidebar (`md`), `Notification` and card hover (`lg`) — reads differently.
+In `xs` the blue and grey layers have **swapped roles**: the blue is now the wide diffuse layer and the grey the tight one. `md` and `lg` sit lower and softer than before, so anything using them — `Card`, `Calendar`, `Input`, overlays, tooltips, the collapsible sidebar (`md`), `Notification` and card hover (`lg`) — reads differently. `dial-kit-control-shadow` renders exactly what `shadow-sm` rendered in 0.13.0, so a control that switches to it is unchanged.
 
 ## Step-by-step migration
 
-### 1. Find the variables in your theme
+### 1. Move the resting control shadow to `dial-kit-control-shadow`
+
+`shadow-sm` on a button, a FAB or any other resting control is now the panel shadow — a wider, lower, much fainter blue that reads as a floating surface rather than a raised control. Find them:
+
+```bash
+grep -rn "shadow-sm" src/
+```
+
+**Before:**
+
+```tsx
+<button className="rounded-full bg-control-neutral shadow-sm">New chat</button>
+```
+
+**After:**
+
+```tsx
+<button className="rounded-full bg-control-neutral dial-kit-control-shadow">
+  New chat
+</button>
+```
+
+Keep `shadow-sm` where the element is a side bar, side panel or right panel — that is what the step now means.
+
+`dial-kit-control-shadow` is a plain class in the kit's stylesheet, not a Tailwind utility, so it is **unlayered**: it beats any `shadow-*` utility on the same element regardless of order. Do not pair it with one — pick whichever of the two the element should draw.
+
+### 2. Find the variables in your theme
 
 ```bash
 grep -rEn -- "--shadow-(default|blue-500|grey-1000)" src/ themes/
@@ -57,7 +90,7 @@ grep -rEn -- "--shadow-(default|blue-500|grey-1000)" src/ themes/
 
 Also check any theme JSON served by the DIAL themes service.
 
-### 2. Rename them
+### 3. Rename them
 
 **Before:**
 
@@ -73,16 +106,17 @@ Also check any theme JSON served by the DIAL themes service.
 
 ```css
 :root {
-  --shadow-xs-sm-1: #2764d933; /* wide blue layer of xs and sm */
-  --shadow-xs-sm-2: #161b2d08; /* tight grey layer of xs and sm */
-  --shadow-md: #2764d90a;
+  --shadow-xs-1: #2764d933; /* wide blue layer of xs and the control shadow */
+  --shadow-xs-2: #161b2d08; /* tight grey layer of the same two */
+  --shadow-sm: #2764d914;
+  --shadow-md: #2764d90f;
   --shadow-lg: #2764d914;
 }
 ```
 
-Splitting one blue into three is the point of the change: pick a lighter value for `--shadow-md` and `--shadow-lg` than for `--shadow-xs-sm-1`, since those steps have no second layer to sit on. Setting all three to your old `--shadow-blue-500` value compiles, but reproduces the flat ramp.
+Splitting one blue into four is the point of the change: pick a lighter value for `--shadow-sm`, `--shadow-md` and `--shadow-lg` than for `--shadow-xs-1`, since those steps have no second layer to sit on. Setting all four to your old `--shadow-blue-500` value compiles, but reproduces the flat ramp.
 
-### 3. Verify
+### 4. Verify
 
 ```bash
 npm run build:css
@@ -95,10 +129,11 @@ Then confirm the variables reached the compiled shadows:
 grep -o -- "--tw-shadow:0 [^;]*" dist/index.css | sort -u
 ```
 
-Every DIAL step should reference a `--shadow-xs-sm-*` / `--shadow-md` / `--shadow-lg` variable.
+Every DIAL step should reference a `--shadow-xs-*` / `--shadow-sm` / `--shadow-md` / `--shadow-lg` variable.
 
 ## Notes
 
-- **`shadow` (the `DEFAULT`) is no longer a DIAL shadow.** `boxShadow` is declared under `theme.extend`, so removing the `DEFAULT` entry does not remove the class — it falls back to Tailwind's own `shadow` (`0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`), which is a neutral black shadow and ignores `--shadow-default`. Replace a bare `shadow` with the step you mean, usually `shadow-sm`.
+- **`shadow` (the `DEFAULT`) is no longer a DIAL shadow.** `boxShadow` is declared under `theme.extend`, so removing the `DEFAULT` entry does not remove the class — it falls back to Tailwind's own `shadow` (`0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`), which is a neutral black shadow and ignores `--shadow-default`. Replace a bare `shadow` with the step you mean — `dial-kit-control-shadow` for a control, `shadow-md` for a raised surface.
+- **A `shadow-sm` left on a button still compiles.** Nothing typechecks a Tailwind class, so the only signal is the rendering: the control loses its tight halo and picks up a faint wide one. Run the grep in step 1 rather than waiting for an error.
 - A stale `--shadow-blue-500` in a theme is silent: nothing reads it, and every shadow quietly renders at its light default. Run the grep rather than trusting the page to look wrong.
 - These names match `tailwind.config.js` in `ai-dial-chat`, so a variable set for the chat app resolves the same way in the kit.

package/dist/migration-guides/README.md

@@ -27,7 +27,7 @@ migration-guides/
 | 0.14.0 | [select-multiselect-option-row](0.14.0/select-multiselect-option-row.md) | A multi-select `Select` option is one `option` with `aria-selected` and a decorative box, instead of an option wrapping a real `role="checkbox"` |
 | 0.14.0 | [button-tooltip-2-0](0.14.0/button-tooltip-2-0.md) | `Button` and `IconButton` wrap the 2.0 `Tooltip` with `asChild`: `placement` takes `TooltipPlacement`, and the trigger `<span>` is gone |
 | 0.14.0 | [tag-single-size](0.14.0/tag-single-size.md) | `Tag` drops `size` for one 32px pill; the selectable chip gets a semibold selected label |
-| 0.14.0 | [shadow-token-per-step-rename](0.14.0/shadow-token-per-step-rename.md) | Shadow variables renamed per step: `--shadow-blue-500`/`--shadow-grey-1000` → `--shadow-xs-sm-1`/`-2`, `--shadow-md`, `--shadow-lg` |
+| 0.14.0 | [shadow-token-per-step-rename](0.14.0/shadow-token-per-step-rename.md) | Shadow scale rebuilt per step: `sm` moves to the side panels, controls keep their shadow under `dial-kit-control-shadow` |
 
 ---
 

package/dist/models/file.js

@@ -0,0 +1,6 @@
+var O = /* @__PURE__ */ ((E) => (E.ITEM = "item", E.FOLDER = "folder", E))(O || {}), I = /* @__PURE__ */ ((E) => (E.FILE = "FILE", E.PROMPT = "PROMPT", E.CONVERSATION = "CONVERSATION", E.APPLICATION = "APPLICATION", E.TOOLSET = "TOOL_SET", E))(I || {}), A = /* @__PURE__ */ ((E) => (E.READ = "READ", E.WRITE = "WRITE", E.SHARE = "SHARE", E))(A || {});
+export {
+  O as DialFileNodeType,
+  A as DialFilePermission,
+  I as DialFileResourceType
+};

package/dist/models/selection-mode.js

@@ -0,0 +1,4 @@
+var E = /* @__PURE__ */ ((L) => (L.MULTIPLE = "MULTIPLE", L.SINGLE = "SINGLE", L))(E || {});
+export {
+  E as GridSelectionMode
+};

package/dist/models/step.js

@@ -0,0 +1,4 @@
+var R = /* @__PURE__ */ ((r) => (r.VALID = "valid", r.ERROR = "error", r))(R || {});
+export {
+  R as StepStatus
+};

package/dist/node_modules/@react-dnd/asap/dist/AsapQueue.js

@@ -0,0 +1,39 @@
+import { makeRequestCall as h, makeRequestCallFromTimer as r } from "./makeRequestCall.js";
+class l {
+  // Use the fastest means possible to execute a task in its own turn, with
+  // priority over other events including IO, animation, reflow, and redraw
+  // events in browsers.
+  //
+  // An exception thrown by a task will permanently interrupt the processing of
+  // subsequent tasks. The higher level `asap` function ensures that if an
+  // exception is thrown by a task, that the task queue will continue flushing as
+  // soon as possible, but if you use `rawAsap` directly, you are responsible to
+  // either ensure that no exceptions are thrown from your task, or to manually
+  // call `rawAsap.requestFlush` if an exception is thrown.
+  enqueueTask(e) {
+    const { queue: t, requestFlush: s } = this;
+    t.length || (s(), this.flushing = !0), t[t.length] = e;
+  }
+  constructor() {
+    this.queue = [], this.pendingErrors = [], this.flushing = !1, this.index = 0, this.capacity = 1024, this.flush = () => {
+      const { queue: e } = this;
+      for (; this.index < e.length; ) {
+        const t = this.index;
+        if (this.index++, e[t].call(), this.index > this.capacity) {
+          for (let s = 0, i = e.length - this.index; s < i; s++)
+            e[s] = e[s + this.index];
+          e.length -= this.index, this.index = 0;
+        }
+      }
+      e.length = 0, this.index = 0, this.flushing = !1;
+    }, this.registerPendingError = (e) => {
+      this.pendingErrors.push(e), this.requestErrorThrow();
+    }, this.requestFlush = h(this.flush), this.requestErrorThrow = r(() => {
+      if (this.pendingErrors.length)
+        throw this.pendingErrors.shift();
+    });
+  }
+}
+export {
+  l as AsapQueue
+};

package/dist/node_modules/@react-dnd/asap/dist/RawTask.js

@@ -0,0 +1,17 @@
+class a {
+  call() {
+    try {
+      this.task && this.task();
+    } catch (s) {
+      this.onError(s);
+    } finally {
+      this.task = null, this.release(this);
+    }
+  }
+  constructor(s, t) {
+    this.onError = s, this.release = t, this.task = null;
+  }
+}
+export {
+  a as RawTask
+};

package/dist/node_modules/@react-dnd/asap/dist/TaskFactory.js

@@ -0,0 +1,16 @@
+import { RawTask as e } from "./RawTask.js";
+class c {
+  create(t) {
+    const s = this.freeTasks, r = s.length ? s.pop() : new e(
+      this.onError,
+      (o) => s[s.length] = o
+    );
+    return r.task = t, r;
+  }
+  constructor(t) {
+    this.onError = t, this.freeTasks = [];
+  }
+}
+export {
+  c as TaskFactory
+};

package/dist/node_modules/@react-dnd/asap/dist/asap.js

@@ -0,0 +1,9 @@
+import { AsapQueue as a } from "./AsapQueue.js";
+import { TaskFactory as o } from "./TaskFactory.js";
+const e = new a(), t = new o(e.registerPendingError);
+function u(r) {
+  e.enqueueTask(t.create(r));
+}
+export {
+  u as asap
+};

package/dist/node_modules/@react-dnd/asap/dist/makeRequestCall.js

@@ -0,0 +1,62 @@
+const a = typeof global < "u" ? global : self, l = a.MutationObserver || a.WebKitMutationObserver;
+function s(n) {
+  return function() {
+    const o = setTimeout(r, 0), t = setInterval(r, 50);
+    function r() {
+      clearTimeout(o), clearInterval(t), n();
+    }
+  };
+}
+function u(n) {
+  let e = 1;
+  const o = new l(n), t = document.createTextNode("");
+  return o.observe(t, {
+    characterData: !0
+  }), function() {
+    e = -e, t.data = e;
+  };
+}
+const c = typeof l == "function" ? (
+  // reliably everywhere they are implemented.
+  // They are implemented in all modern browsers.
+  //
+  // - Android 4-4.3
+  // - Chrome 26-34
+  // - Firefox 14-29
+  // - Internet Explorer 11
+  // - iPad Safari 6-7.1
+  // - iPhone Safari 7-7.1
+  // - Safari 6-7
+  u
+) : (
+  // task queue, are implemented in Internet Explorer 10, Safari 5.0-1, and Opera
+  // 11-12, and in web workers in many engines.
+  // Although message channels yield to any queued rendering and IO tasks, they
+  // would be better than imposing the 4ms delay of timers.
+  // However, they do not work reliably in Internet Explorer or Safari.
+  // Internet Explorer 10 is the only browser that has setImmediate but does
+  // not have MutationObservers.
+  // Although setImmediate yields to the browser's renderer, it would be
+  // preferrable to falling back to setTimeout since it does not have
+  // the minimum 4ms penalty.
+  // Unfortunately there appears to be a bug in Internet Explorer 10 Mobile (and
+  // Desktop to a lesser extent) that renders both setImmediate and
+  // MessageChannel useless for the purposes of ASAP.
+  // https://github.com/kriskowal/q/issues/396
+  // Timers are implemented universally.
+  // We fall back to timers in workers in most engines, and in foreground
+  // contexts in the following browsers.
+  // However, note that even this simple case requires nuances to operate in a
+  // broad spectrum of browsers.
+  //
+  // - Firefox 3-13
+  // - Internet Explorer 6-9
+  // - iPad Safari 4.3
+  // - Lynx 2.8.7
+  s
+);
+export {
+  c as makeRequestCall,
+  u as makeRequestCallFromMutationObserver,
+  s as makeRequestCallFromTimer
+};

package/dist/node_modules/@react-dnd/invariant/dist/index.js

@@ -0,0 +1,22 @@
+function a(r, n, ...i) {
+  if (t() && n === void 0)
+    throw new Error("invariant requires an error message argument");
+  if (!r) {
+    let e;
+    if (n === void 0)
+      e = new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");
+    else {
+      let o = 0;
+      e = new Error(n.replace(/%s/g, function() {
+        return i[o++];
+      })), e.name = "Invariant Violation";
+    }
+    throw e.framesToPop = 1, e;
+  }
+}
+function t() {
+  return typeof process < "u" && process.env.NODE_ENV === "production";
+}
+export {
+  a as invariant
+};

package/dist/node_modules/@react-dnd/shallowequal/dist/index.js

@@ -0,0 +1,25 @@
+function p(t, e, u, i) {
+  let r;
+  if (r !== void 0)
+    return !!r;
+  if (t === e)
+    return !0;
+  if (typeof t != "object" || !t || typeof e != "object" || !e)
+    return !1;
+  const n = Object.keys(t), l = Object.keys(e);
+  if (n.length !== l.length)
+    return !1;
+  const c = Object.prototype.hasOwnProperty.bind(e);
+  for (let s = 0; s < n.length; s++) {
+    const o = n[s];
+    if (!c(o))
+      return !1;
+    const f = t[o], a = e[o];
+    if (r = void 0, r === !1 || r === void 0 && f !== a)
+      return !1;
+  }
+  return !0;
+}
+export {
+  p as shallowEqual
+};