urfu-ui-kit-react 2.1.6 → 2.1.7-next.1

package/dist/components/Table/Table.js

@@ -23,15 +23,15 @@ import { useMobileFilterColumns$u as wr } from "./useMobileFilterColumns.js";
 import { nextCardMode$u as xr, getStickyLeft$u as Fr } from "./Table.helpers.js";
 const Or = (i) => i.map((T, y) => ({ ...T, tableData: { number: y + 1 } })), Wr = (i) => {
   if (typeof i == "number") return i > 0 ? i : void 0;
-  if (typeof i == "string" && /^\d+(\.\d+)?(px)?$/.test(i.trim())) return parseFloat(i);
+  if (typeof i == "string" && /^\d+(\.\d+)?(px)?$/.test(i.trim())) return Number.parseFloat(i);
 }, Pr = ({
   data: i,
   columns: T,
   borders: y = "horizontal",
   striped: Me,
   linesNotActive: Te,
-  fixedHeader: ze,
-  headerBorders: Ne,
+  fixedHeader: Ne,
+  headerBorders: ze,
   tdStyle: Ve,
   thStyle: je,
   cellStyle: G,
@@ -39,7 +39,7 @@ const Or = (i) => i.map((T, y) => ({ ...T, tableData: { number: y + 1 } })), Wr
   thContentStyle: Le,
   cellContentStyle: Q,
   contentForEmptyTable: _e = /* @__PURE__ */ o("p", { children: "Ничего не найдено" }),
-  messageForEmptyTable: z,
+  messageForEmptyTable: N,
   messageForEmptyFilter: X = "Ничего не найдено. Измените или сбросьте фильтры.",
   mobileMessageForEmptyTable: Y,
   className: Z = "",
@@ -62,7 +62,7 @@ const Or = (i) => i.map((T, y) => ({ ...T, tableData: { number: y + 1 } })), Wr
   setFilteredTableData: re,
   withoutHeader: oe,
   filterResetParam: se,
-  filterMode: N = "client",
+  filterMode: z = "client",
   filters: Xe,
   defaultFilters: Ye,
   onFiltersChange: Ze,
@@ -110,7 +110,7 @@ const Or = (i) => i.map((T, y) => ({ ...T, tableData: { number: y + 1 } })), Wr
     setLookColumnWidths: Ht,
     handleMouseDown: It,
     thRefs: Mt
-  } = br(g, C), [Tt, ue] = H(void 0), [zt, _] = H([]), [Nt, Vt] = H(void 0), jt = U(() => g.filter((e) => e.hidden !== !0), [g]), { filters: he, setFilters: ae, uncheckedValues: w, setUncheckedValues: Bt, filterDates: x, setFilterDates: Lt } = Sr({ filters: Xe, defaultFilters: Ye, onFiltersChange: Ze, filterResetParam: se }), {
+  } = br(g, C), [Tt, ue] = H(void 0), [Nt, _] = H([]), [zt, Vt] = H(void 0), jt = U(() => g.filter((e) => e.hidden !== !0), [g]), { filters: he, setFilters: ae, uncheckedValues: w, setUncheckedValues: Bt, filterDates: x, setFilterDates: Lt } = Sr({ filters: Xe, defaultFilters: Ye, onFiltersChange: Ze, filterResetParam: se }), {
     sort: F,
     setSort: _t,
     hoveredSortCol: kt,
@@ -132,12 +132,12 @@ const Or = (i) => i.map((T, y) => ({ ...T, tableData: { number: y + 1 } })), Wr
     columns: g,
     sort: le && !ie ? void 0 : F,
     uncheckedValues: w,
-    filterMode: N,
+    filterMode: z,
     filterDates: x,
     whereFindChecked: Ue,
     filterEmptyLabel: ee,
     parentDataField: p
-  })), pe = !r || Nt === r, s = U(() => pe ? void 0 : fe(r), [pe, r]) ?? zt, {
+  })), pe = !r || zt === r, s = U(() => pe ? void 0 : fe(r), [pe, r]) ?? Nt, {
     rootRef: u,
     start: O,
     visibleCount: Kt,
@@ -169,7 +169,7 @@ const Or = (i) => i.map((T, y) => ({ ...T, tableData: { number: y + 1 } })), Wr
       const e = fe(r);
       _(e), Vt(r), re && re(e);
     }
-  }, [r, w, x, F, N]);
+  }, [r, w, x, F, z]);
   const Pt = (e) => {
     const t = [...s];
     t[e].parentDataOpened = !0, _(t);
@@ -213,7 +213,7 @@ const Or = (i) => i.map((T, y) => ({ ...T, tableData: { number: y + 1 } })), Wr
   ), Fe = P === void 0 ? -1 : n.findIndex((e, t) => M(e, t) === P), E = Fe >= 0 ? Fe : n.length - 1, v = n.map((e, t) => {
     const l = Wr(e.width), f = h && t === E && l !== void 0 ? l : or[M(e, t)] ?? l;
     return C && !e.resizeOff ? Math.max(L[e.field] || f || 0, e.width || 0) : f;
-  }), Oe = xe && v.length > 0 && v.every((e) => (e ?? 0) > 0), sr = Object.values(w).some((e) => e.length > 0) || x.some((e) => e.begin != null || e.end != null), We = N === "client" && sr && (r == null ? void 0 : r.length) > 0 && s.length === 0, De = We ? X : z, J = !B && !d && s.length === 0 && !!De;
+  }), Oe = xe && v.length > 0 && v.every((e) => (e ?? 0) > 0), sr = Object.values(w).some((e) => e.length > 0) || x.some((e) => e.begin != null || e.end != null), We = z === "client" && sr && (r == null ? void 0 : r.length) > 0 && s.length === 0, De = We ? X : N, J = !B && !d && s.length === 0 && !!De;
   I(() => {
     const e = u.current;
     if (!J || !e || typeof ResizeObserver > "u") return;
@@ -245,11 +245,11 @@ const Or = (i) => i.map((T, y) => ({ ...T, tableData: { number: y + 1 } })), Wr
     fillColumnIndex: h ? E : -1
   };
   return /* @__PURE__ */ $(He, { children: [
-    c || d || (r == null ? void 0 : r.length) !== 0 || (r == null ? void 0 : r.length) === 0 && z ? /* @__PURE__ */ o(
+    c || d || (r == null ? void 0 : r.length) !== 0 || (r == null ? void 0 : r.length) === 0 && N ? /* @__PURE__ */ o(
       "div",
       {
         id: S,
-        className: `u-table${["horizontal", "vertical", "none", "both"].includes(y) ? dr(y) : ""}${Me ? " striped" : ""}${Te ? " not-active-lines" : ""}${ze ? " thead-fixed" : ""}${Ne ? " header-borders" : ""}${Z ? " " + Z : ""}${m ? " u-table-mobile" : ""}`,
+        className: `u-table${["horizontal", "vertical", "none", "both"].includes(y) ? dr(y) : ""}${Me ? " striped" : ""}${Te ? " not-active-lines" : ""}${Ne ? " thead-fixed" : ""}${ze ? " header-borders" : ""}${Z ? " " + Z : ""}${m ? " u-table-mobile" : ""}`,
         style: {
           maxHeight: Je,
           minHeight: Ke,
@@ -269,7 +269,7 @@ const Or = (i) => i.map((T, y) => ({ ...T, tableData: { number: y + 1 } })), Wr
             isCardMode: m,
             isLoading: c,
             isLoadingPreloader: d,
-            messageForEmptyTable: Y === "off" || B ? void 0 : We ? X : Y ?? z,
+            messageForEmptyTable: Y === "off" || B ? void 0 : We ? X : Y ?? N,
             effectiveSortField: k,
             effectiveSortDir: q,
             applySort: At,

package/dist/components/Table/useTableVirtualization.js

@@ -1,4 +1,4 @@
-import { useRef as i, useState as A, useLayoutEffect as k, useCallback as N, useMemo as Z, useEffect as B } from "react";
+import { useRef as i, useState as A, useLayoutEffect as N, useCallback as k, useMemo as Z, useEffect as B } from "react";
 const ot = ({
   filteredData: e,
   virtualizationOn: c,
@@ -11,7 +11,7 @@ const ot = ({
   pageSize: p
 }) => {
   const s = i(null), [h, P] = A(0), [_, $] = A(0), d = i([]), j = i([]), F = i([]), G = i([]), J = i([]), K = i({}), T = i(0);
-  k(() => {
+  N(() => {
     if (!C && !S && s.current) {
       if (e.length === 0) {
         T.current = 0;
@@ -21,7 +21,7 @@ const ot = ({
       t > 0 && (T.current = t);
     }
   });
-  const [L, O] = A(void 0), Q = N(
+  const [L, O] = A(void 0), Q = k(
     (t) => d.current[t] ?? I,
     [I]
   ), l = Z(() => {
@@ -32,7 +32,7 @@ const ot = ({
   }, [e.length, Q, _]), a = Z(
     () => l.length > 0 ? l[l.length - 1] : 0,
     [l]
-  ), w = q + 1, U = N(
+  ), b = q + 1, U = k(
     (t) => {
       let n = 0, o = l.length - 1;
       for (; n < o; ) {
@@ -44,15 +44,15 @@ const ot = ({
     [l, e.length]
   ), X = typeof H == "number" && typeof p == "number" && p > 0, z = X ? e.slice((H - 1) * p, H * p) : e, f = c && !X && e.length > q, D = f ? l[h] : 0, tt = f ? Math.max(
     0,
-    a - l[Math.min(e.length, h + w)]
-  ) : 0, V = N(
+    a - l[Math.min(e.length, h + b)]
+  ) : 0, V = k(
     (t) => {
       if (!f)
         return;
-      const n = t.target, o = Math.max(0, e.length - w), r = Math.min(o, U(n.scrollTop));
+      const n = t.target, o = Math.max(0, e.length - b), r = Math.min(o, U(n.scrollTop));
       P(r);
     },
-    [e.length, U, f, w]
+    [e.length, U, f, b]
   );
   B(() => {
     if (c && s.current) {
@@ -77,14 +77,14 @@ const ot = ({
     return o.observe(t), () => o.disconnect();
   }, [c]);
   const Y = i(null);
-  return k(() => {
+  return N(() => {
     if (!c || C) return;
     const t = Y.current;
     Y.current = { data: e, width: M }, !(!t || t.data === e && t.width === M) && (d.current = [], $((n) => n + 1));
   }, [c, C, e, M]), B(() => {
     if (!c)
       return;
-    const t = f ? h : 0, n = f ? Math.min(e.length, h + w) : e.length;
+    const t = f ? h : 0, n = f ? Math.min(e.length, h + b) : e.length;
     let o = !1;
     for (let r = t; r < n; r++) {
       const u = K.current[r];
@@ -93,16 +93,16 @@ const ot = ({
       (!d.current[r] || Math.abs(d.current[r] - m) > 0.5) && (d.current[r] = m, o = !0);
     }
     o && $((r) => r + 1);
-  }, [c, f, h, w, e.length, M]), k(() => {
+  }, [c, f, h, b, e.length, M]), N(() => {
     var t;
     if (!C && e.length > 0) {
-      const n = Array.from(((t = s.current) == null ? void 0 : t.querySelectorAll(".table tbody tr")) ?? []).filter((b) => b.cells.length > 0), o = new Array(e.length).fill(void 0), r = new Array(e.length).fill(void 0), u = new Array(e.length).fill(void 0), m = new Array(e.length).fill(void 0), v = new Array(e.length).fill(void 0);
-      n.forEach((b, W) => {
-        const y = Number(b.dataset.virtualIndex ?? W);
-        if (isNaN(y)) return;
-        const nt = b.getBoundingClientRect().height;
+      const n = Array.from(((t = s.current) == null ? void 0 : t.querySelectorAll(".table tbody tr")) ?? []).filter((w) => w.cells.length > 0), o = new Array(e.length).fill(void 0), r = new Array(e.length).fill(void 0), u = new Array(e.length).fill(void 0), m = new Array(e.length).fill(void 0), v = new Array(e.length).fill(void 0);
+      n.forEach((w, W) => {
+        const y = Number(w.dataset.virtualIndex ?? W);
+        if (Number.isNaN(y)) return;
+        const nt = w.getBoundingClientRect().height;
         o[y] = nt;
-        const x = Array.from(b.children);
+        const x = Array.from(w.children);
         r[y] = x.map((R) => R.getBoundingClientRect().height), u[y] = x.map((R) => {
           const g = R.firstElementChild;
           return g ? g.getBoundingClientRect().height : 0;
@@ -117,9 +117,9 @@ const ot = ({
             background: g.background
           };
         });
-      }), d.current = o.map((b, W) => b ?? d.current[W]), j.current = r.filter(Boolean), F.current = u.filter(Boolean), G.current = m.filter(Boolean), J.current = v.filter(Boolean);
+      }), d.current = o.map((w, W) => w ?? d.current[W]), j.current = r.filter(Boolean), F.current = u.filter(Boolean), G.current = m.filter(Boolean), J.current = v.filter(Boolean);
     }
-  }, [C, e, E, H, p, h, w]), B(() => {
+  }, [C, e, E, H, p, h, b]), B(() => {
     !S && e.length > 0 && setTimeout(() => {
       const t = document.querySelector(`#${E} .table tbody`);
       t && O(t.getBoundingClientRect().height);
@@ -127,7 +127,7 @@ const ot = ({
   }, [S, e, E]), {
     rootRef: s,
     start: h,
-    visibleCount: w,
+    visibleCount: b,
     pagedData: z,
     hasOverflow: f,
     topPadding: D,

package/dist/components/Tabs/useTabsOverflow.js

@@ -1,49 +1,49 @@
-import { useRef as O, useState as B, useCallback as P, useLayoutEffect as D } from "react";
-import { TAB_PADDING_MIN_RATIO$u as T, distributeTabs$u as G, lineTabsSqueeze$u as k, tabsSqueeze$u as J } from "../../vanilla/core/distributeTabs.js";
-const U = (l, L, g, h) => {
-  const u = O(null), p = O(null), S = O(null), w = JSON.stringify(l.map((t) => t.id)), z = l.map((t, e) => e), [F, _] = B({ signature: w, order: z }), f = F.signature === w ? F.order : z, [r, M] = B({ widths: [], paddings: [], available: 0, gap: 0, more: 0 }), o = P(() => {
-    var A;
-    const t = u.current, e = p.current;
+import { useRef as O, useState as q, useCallback as P, useLayoutEffect as D } from "react";
+import { TAB_PADDING_MIN_RATIO$u as B, distributeTabs$u as G, lineTabsSqueeze$u as k, tabsSqueeze$u as J } from "../../vanilla/core/distributeTabs.js";
+const U = (l, N, u, b) => {
+  const g = O(null), m = O(null), L = O(null), h = JSON.stringify(l.map((t) => t.id)), S = l.map((t, e) => e), [z, T] = q({ signature: h, order: S }), p = z.signature === h ? z.order : S, [r, _] = q({ widths: [], paddings: [], available: 0, gap: 0, more: 0 }), o = P(() => {
+    var x;
+    const t = g.current, e = m.current;
     if (!t || !e) return;
-    const n = getComputedStyle(t), a = t.getBoundingClientRect().width - (parseFloat(n.borderLeftWidth) || 0) - (parseFloat(n.borderRightWidth) || 0) - (parseFloat(n.paddingLeft) || 0) - (parseFloat(n.paddingRight) || 0), s = Array.from(e.querySelectorAll("[data-measure-tab]")), b = s.map((i) => i.getBoundingClientRect().width), R = s.map((i) => {
+    const n = getComputedStyle(t), a = t.getBoundingClientRect().width - (Number.parseFloat(n.borderLeftWidth) || 0) - (Number.parseFloat(n.borderRightWidth) || 0) - (Number.parseFloat(n.paddingLeft) || 0) - (Number.parseFloat(n.paddingRight) || 0), s = Array.from(e.querySelectorAll("[data-measure-tab]")), v = s.map((i) => i.getBoundingClientRect().width), R = s.map((i) => {
       const c = getComputedStyle(i);
-      return [parseFloat(c.paddingLeft) || 0, parseFloat(c.paddingRight) || 0];
-    }), m = {
-      widths: b,
+      return [Number.parseFloat(c.paddingLeft) || 0, Number.parseFloat(c.paddingRight) || 0];
+    }), f = {
+      widths: v,
       paddings: R,
       available: a,
-      gap: parseFloat(n.columnGap || "0") || 0,
-      more: ((A = S.current) == null ? void 0 : A.getBoundingClientRect().width) || 0
+      gap: Number.parseFloat(n.columnGap || "0") || 0,
+      more: ((x = L.current) == null ? void 0 : x.getBoundingClientRect().width) || 0
     };
-    M((i) => i.available === m.available && i.gap === m.gap && i.more === m.more && i.widths.length === b.length && i.widths.every((c, y) => c === b[y]) && i.paddings.every(([c, y], E) => {
-      var I, q;
-      return c === ((I = R[E]) == null ? void 0 : I[0]) && y === ((q = R[E]) == null ? void 0 : q[1]);
-    }) ? i : m);
+    _((i) => i.available === f.available && i.gap === f.gap && i.more === f.more && i.widths.length === v.length && i.widths.every((c, y) => c === v[y]) && i.paddings.every(([c, y], A) => {
+      var E, I;
+      return c === ((E = R[A]) == null ? void 0 : E[0]) && y === ((I = R[A]) == null ? void 0 : I[1]);
+    }) ? i : f);
   }, []);
   D(() => {
     var n, a;
     o();
     let t = !1;
     const e = typeof ResizeObserver > "u" ? null : new ResizeObserver(o);
-    return u.current && (e == null || e.observe(u.current)), p.current && (e == null || e.observe(p.current)), window.addEventListener("resize", o), (n = document.fonts) == null || n.addEventListener("loadingdone", o), (a = document.fonts) == null || a.ready.then(() => {
+    return g.current && (e == null || e.observe(g.current)), m.current && (e == null || e.observe(m.current)), window.addEventListener("resize", o), (n = document.fonts) == null || n.addEventListener("loadingdone", o), (a = document.fonts) == null || a.ready.then(() => {
       t || o();
     }), () => {
       var s;
       t = !0, e == null || e.disconnect(), window.removeEventListener("resize", o), (s = document.fonts) == null || s.removeEventListener("loadingdone", o);
     };
-  }, [o, l, g, h]);
-  const N = L === void 0 ? -1 : l.findIndex((t) => t.id === L), C = r.widths.length === l.length && r.widths.every((t) => t > 0), v = g ? [] : r.paddings.map(([t, e]) => (t + e) * (1 - T)), d = C && !h ? G(f, r.widths, r.available, r.gap, r.more, N, g, v) : { visible: f, overflow: [] }, x = !C || g ? 0 : h ? k(f, r.widths, v, r.available, r.gap) : J(d.visible, r.widths, v, r.available, r.gap, r.more, d.overflow.length > 0);
-  return { containerRef: u, measureRef: p, moreMeasureRef: S, ...d, paddingOf: (t) => {
+  }, [o, l, u, b]);
+  const M = N === void 0 ? -1 : l.findIndex((t) => t.id === N), F = r.widths.length === l.length && r.widths.every((t) => t > 0), w = u ? [] : r.paddings.map(([t, e]) => (t + e) * (1 - B)), d = F && !b ? G(p, r.widths, r.available, r.gap, r.more, M, u, w) : { visible: p, overflow: [] }, C = !F || u ? 0 : b ? k(p, r.widths, w, r.available, r.gap) : J(d.visible, r.widths, w, r.available, r.gap, r.more, d.overflow.length > 0);
+  return { containerRef: g, measureRef: m, moreMeasureRef: L, ...d, paddingOf: (t) => {
     const e = r.paddings[t];
-    if (!x || !e) return;
-    const n = 1 - x * (1 - T);
+    if (!C || !e) return;
+    const n = 1 - C * (1 - B);
     return { paddingLeft: e[0] * n, paddingRight: e[1] * n };
   }, promote: (t) => {
     if (!d.overflow.includes(t)) return;
     const e = d.visible[d.visible.length - 1];
     if (e === void 0) return;
-    const n = [...f], a = n.indexOf(t), s = n.indexOf(e);
-    [n[a], n[s]] = [n[s], n[a]], _({ signature: w, order: n });
+    const n = [...p], a = n.indexOf(t), s = n.indexOf(e);
+    [n[a], n[s]] = [n[s], n[a]], T({ signature: h, order: n });
   } };
 };
 export { U as useTabsOverflow$u };

package/dist/components/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import { jsxs as X, jsx as $ } from "react/jsx-runtime";
-import { useRef as z, useState as Y, useCallback as B, useEffect as v, useLayoutEffect as W, useId as q } from "react";
+import { useRef as z, useState as N, useCallback as B, useEffect as v, useLayoutEffect as W, useId as q } from "react";
 /* empty css                 */
 import { createPortal as tt } from "react-dom";
 /* empty css                                     */
@@ -17,7 +17,7 @@ const ot = 100, it = {
   return r === "bottom" ? { x: y, y: t.y + t.height + t.scrollY + u } : r === "right" ? { x: t.x + t.width + u + n / 2, y: m } : r === "left" ? { x: t.x - u - n / 2, y: m } : { x: y, y: t.y + t.scrollY - u - a };
 }, R = 8, V = 10, ct = 14, J = (r) => {
   if (typeof window > "u" || typeof document > "u") return r;
-  const t = parseFloat(getComputedStyle(document.documentElement).fontSize);
+  const t = Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
   return !Number.isFinite(t) || t <= 0 ? r : r * (t / 16);
 }, ut = {
   top: "bottom",
@@ -50,8 +50,8 @@ const ot = 100, it = {
   let f = M.x;
   const x = n / 2;
   f - x < R ? f = x + R : f + x > m - R && (f = m - R - x);
-  const T = t.x + t.width / 2, s = Math.max(0, x - ct), N = Math.max(-s, Math.min(s, T - f));
-  return { placement: M.placement, x: f, y: M.y, arrowShift: N };
+  const T = t.x + t.width / 2, s = Math.max(0, x - ct), Y = Math.max(-s, Math.min(s, T - f));
+  return { placement: M.placement, x: f, y: M.y, arrowShift: Y };
 }, K = (r) => {
   const t = document.activeElement;
   if (!r || !t || !r.contains(t)) return !1;
@@ -81,10 +81,10 @@ const at = () => {
   showWhenActive: d = !1,
   showDelay: M = ot
 }) => {
-  const f = z(null), x = z(null), T = z(null), [s, N] = Y(!1), [_, I] = Y(null), [o, p] = Y(null), [b, H] = Y(w), [k, G] = Y(!1), P = () => {
+  const f = z(null), x = z(null), T = z(null), [s, Y] = N(!1), [_, I] = N(null), [o, p] = N(null), [b, H] = N(w), [k, G] = N(!1), P = () => {
     T.current && (clearTimeout(T.current), T.current = null);
   }, h = B(() => {
-    P(), N(!1), I(null), G(!1);
+    P(), Y(!1), I(null), G(!1);
   }, []), { shouldRender: D, isAnimated: j } = nt({ isOpen: s, duration: rt.instant });
   v(() => {
     D || (p(null), H(w));
@@ -92,7 +92,7 @@ const at = () => {
   const F = B((e) => {
     P();
     const { x: c, y: i, width: l, height: E } = e.getBoundingClientRect();
-    I({ x: c, y: i, width: l, height: E, scrollY: window.scrollY }), N(!0);
+    I({ x: c, y: i, width: l, height: E, scrollY: window.scrollY }), Y(!0);
   }, []), O = B((e) => {
     const { x: c, y: i, width: l, height: E } = e.getBoundingClientRect();
     I((S) => S && { x: c, y: i, width: l, height: E, scrollY: window.scrollY });

package/dist/dev/index.js

@@ -952,9 +952,8 @@ const La = `
   /* «Анимации ×5» ставит длительности на каждый элемент документа, в том числе на хост панели:
      режим замедляет сервис, а не инструмент, которым его включили. */
   --u-duration-instant: 100ms; --u-duration-fast: 150ms; --u-duration-base: 200ms; --u-duration-moderate: 250ms; --u-duration-slow: 300ms;
-  /* Отступ кнопки снизу: StickyActionBar кита, пока стоит у нижнего края, задаёт на <html>
-     --u-dev-launcher-bottom (его высота + 12px) — кнопка и панель поднимаются над ним. */
-  --launcher-bottom: var(--u-dev-launcher-bottom, calc(12px + env(safe-area-inset-bottom, 0px)));
+  /* Отступ кнопки снизу: всегда левый нижний угол, StickyActionBar её не поднимает. */
+  --launcher-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
   font-family: Montserrat, "Segoe UI", Arial, sans-serif; font-size: 14px; line-height: 1.4; color: var(--u-color-text, #222); }
 button, input, textarea { font: inherit; color: inherit; }
 /* Кнопка панели — в цветах кита: токены --u-color-* с :root сервиса проходят в shadow DOM
@@ -1574,7 +1573,7 @@ function hn(t) {
 function mn() {
   (zt() ?? ot).reset();
 }
-const bn = () => "2.1.6";
+const bn = () => "2.1.7-next.1";
 function xn(t) {
   return pn(t, { name: "urfu-ui-kit-react", version: bn() });
 }

package/dist/dev/types/vanilla/src/dev/panelStyles.d.ts

@@ -4,4 +4,4 @@
  * список «ключ — значение»). Цвета, радиусы, тени и движение — токены кита (`--u-*`):
  * CSS-переменные документа проходят в Shadow DOM, `all: initial` их не сбрасывает.
  */
-export declare const STYLES = "\n:host { all: initial; }\n* { box-sizing: border-box; }\n.root {\n  /* \u00AB\u0410\u043D\u0438\u043C\u0430\u0446\u0438\u0438 \u00D75\u00BB \u0441\u0442\u0430\u0432\u0438\u0442 \u0434\u043B\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0441\u0442\u0438 \u043D\u0430 \u043A\u0430\u0436\u0434\u044B\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430, \u0432 \u0442\u043E\u043C \u0447\u0438\u0441\u043B\u0435 \u043D\u0430 \u0445\u043E\u0441\u0442 \u043F\u0430\u043D\u0435\u043B\u0438:\n     \u0440\u0435\u0436\u0438\u043C \u0437\u0430\u043C\u0435\u0434\u043B\u044F\u0435\u0442 \u0441\u0435\u0440\u0432\u0438\u0441, \u0430 \u043D\u0435 \u0438\u043D\u0441\u0442\u0440\u0443\u043C\u0435\u043D\u0442, \u043A\u043E\u0442\u043E\u0440\u044B\u043C \u0435\u0433\u043E \u0432\u043A\u043B\u044E\u0447\u0438\u043B\u0438. */\n  --u-duration-instant: 100ms; --u-duration-fast: 150ms; --u-duration-base: 200ms; --u-duration-moderate: 250ms; --u-duration-slow: 300ms;\n  /* \u041E\u0442\u0441\u0442\u0443\u043F \u043A\u043D\u043E\u043F\u043A\u0438 \u0441\u043D\u0438\u0437\u0443: StickyActionBar \u043A\u0438\u0442\u0430, \u043F\u043E\u043A\u0430 \u0441\u0442\u043E\u0438\u0442 \u0443 \u043D\u0438\u0436\u043D\u0435\u0433\u043E \u043A\u0440\u0430\u044F, \u0437\u0430\u0434\u0430\u0451\u0442 \u043D\u0430 <html>\n     --u-dev-launcher-bottom (\u0435\u0433\u043E \u0432\u044B\u0441\u043E\u0442\u0430 + 12px) \u2014 \u043A\u043D\u043E\u043F\u043A\u0430 \u0438 \u043F\u0430\u043D\u0435\u043B\u044C \u043F\u043E\u0434\u043D\u0438\u043C\u0430\u044E\u0442\u0441\u044F \u043D\u0430\u0434 \u043D\u0438\u043C. */\n  --launcher-bottom: var(--u-dev-launcher-bottom, calc(12px + env(safe-area-inset-bottom, 0px)));\n  font-family: Montserrat, \"Segoe UI\", Arial, sans-serif; font-size: 14px; line-height: 1.4; color: var(--u-color-text, #222); }\nbutton, input, textarea { font: inherit; color: inherit; }\n/* \u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u0438 \u2014 \u0432 \u0446\u0432\u0435\u0442\u0430\u0445 \u043A\u0438\u0442\u0430: \u0442\u043E\u043A\u0435\u043D\u044B --u-color-* \u0441 :root \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043F\u0440\u043E\u0445\u043E\u0434\u044F\u0442 \u0432 shadow DOM\n   (all: initial \u0438\u0445 \u043D\u0435 \u0441\u0431\u0440\u0430\u0441\u044B\u0432\u0430\u0435\u0442), \u0437\u0430\u043F\u0430\u0441\u043D\u044B\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u2014 \u043A\u0430\u043A \u0432 \u043A\u0438\u0442\u0435. \u0412 \u043F\u043E\u043A\u043E\u0435 \u2014 \u043A\u0440\u0443\u0433 \u0441 \u043B\u043E\u0433\u043E\u0442\u0438\u043F\u043E\u043C,\n   \u0447\u0442\u043E\u0431\u044B \u043C\u0435\u043D\u044C\u0448\u0435 \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0438\u0436\u043D\u0438\u0435 \u043B\u0438\u043F\u043A\u0438\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430; \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438 \u0438 \u0444\u043E\u043A\u0443\u0441\u0435 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0435\u0442\u0441\u044F\n   \u0432 \u00AB\u043B\u043E\u0433\u043E\u0442\u0438\u043F + Dev\u00BB; \u043F\u0440\u0438 \u0432\u043A\u043B\u044E\u0447\u0451\u043D\u043D\u044B\u0445 \u0441\u0431\u043E\u044F\u0445 \u0440\u0430\u0441\u043A\u0440\u044B\u0442\u0430 \u0432\u0441\u0435\u0433\u0434\u0430, \u0446\u0432\u0435\u0442 \u043E\u0448\u0438\u0431\u043A\u0438 \u0438 \u0447\u0438\u0441\u043B\u043E \u0441\u0431\u043E\u0435\u0432. */\n.pill { --kit-p: var(--u-color-primary, #1e4391); --kit-error: var(--u-color-error, #ef302b);\n  --kit-surface: var(--u-color-surface, #fff); --kit-line: var(--u-color-border, #748ab9);\n  position: fixed; left: 12px; bottom: var(--launcher-bottom); z-index: 2147483000;\n  display: inline-flex; align-items: center; height: 36px; padding: 0; border: 1px solid var(--kit-line); border-radius: 18px;\n  background: var(--kit-surface); color: var(--kit-p); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0,0,0,.15);\n  transition: background-color var(--u-duration-fast) var(--u-ease-standard), border-color var(--u-duration-fast) var(--u-ease-standard); }\n.pill .logo { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--kit-surface); }\n.pill .logo svg { display: block; width: 20px; height: 20px; }\n.pill .label { max-width: 0; overflow: hidden; opacity: 0; padding: 0;\n  transition: max-width var(--u-duration-base) var(--u-ease-move), opacity var(--u-duration-base) var(--u-ease-move), padding var(--u-duration-base) var(--u-ease-move); }\n.pill:hover .label, .pill:focus-visible .label, .pill.on .label { max-width: 260px; opacity: 1; padding: 0 14px 0 2px; }\n.pill.on { background: var(--kit-error); border-color: var(--kit-error); color: #fff; }\n.pill.on .logo { width: 30px; height: 30px; margin: 0 1px 0 2px; }\n.pill:focus-visible { outline: 2px solid var(--kit-p); outline-offset: 2px; }\n.panel { position: fixed; left: 12px; bottom: calc(var(--launcher-bottom) + 44px); z-index: 2147483001;\n  width: 400px; max-width: calc(100vw - 24px); max-height: min(75vh, 680px); display: flex; flex-direction: column;\n  background: var(--u-color-surface, #fff); border: 1px solid var(--u-color-border-light, #d3d3d3); border-radius: var(--u-radius, 10px);\n  box-shadow: var(--u-shadow-popup, 0 8px 24px rgba(15,43,94,.16)); }\n.panel.alone { bottom: var(--launcher-bottom); }\n/* \u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430 \u0443 \u043A\u043D\u043E\u043F\u043A\u0438 \u2014 \u043F\u0443\u0437\u044B\u0440\u044C, \u043A\u0430\u043A \u0443 Tooltip \u043A\u0438\u0442\u0430. */\n.hint { position: fixed; left: 12px; bottom: var(--launcher-bottom); z-index: 2147483000;\n  max-width: min(360px, calc(100vw - 24px)); padding: 8px 12px; border-radius: var(--u-radius-small, 8px);\n  background: var(--u-color-text, #222); color: var(--u-color-surface, #fff); font-size: 12px; box-shadow: var(--u-shadow-popup); }\n.pill ~ .hint { bottom: calc(var(--launcher-bottom) + 44px); }\n/* min-height \u0443 u-message-small \u043E\u0442\u043C\u0435\u043D\u044F\u0435\u0442 \u0437\u0430\u0449\u0438\u0442\u0443 \u0444\u043B\u0435\u043A\u0441-\u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430 \u043E\u0442 \u0441\u0436\u0430\u0442\u0438\u044F: \u0431\u0435\u0437 flex-shrink \u0442\u0435\u043A\u0441\u0442 \u043E\u0431\u0440\u0435\u0437\u0430\u0435\u0442\u0441\u044F. */\n.note { margin: 0 16px 8px; overflow-wrap: anywhere; flex-shrink: 0; }\n.head { display: flex; align-items: center; gap: 4px; padding: 10px 8px 2px 16px; }\n.title { flex: 1; min-width: 0; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.title .u-selectbox { width: 100%; }\n.title .u-selectbox-select-title { font-weight: 600; }\n.intro, .caption, .escape { margin: 0; color: var(--u-color-text-secondary, #545454); }\n.intro { padding: 0 16px 10px; }\n.tabs { padding: 0 16px 8px; }\n.tabs .u-tab-segment { padding: 6px 4px; }\n.body { overflow: auto; padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 14px; }\n.body .u-search { display: block; width: 100%; }\n.group { display: flex; flex-direction: column; gap: 8px; }\n.group-title { font-weight: 600; color: var(--u-color-text-secondary, #545454); }\n.u-switch { align-items: flex-start; }\n.u-switch .tt { padding-top: 3px; }\n.u-switch .sub { display: block; color: var(--u-color-text-secondary, #545454); font-size: 12px; }\n/* Select \u043A\u0438\u0442\u0430: \u043E\u0442\u043C\u0435\u0442\u043A\u0430 \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0438 \u043F\u0443\u043D\u043A\u0442\u0430 \u043F\u043E\u0434 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043E\u0439 \u2014 \u043A\u0430\u043A \u0443 Select \u0432 React \u0438 Vue. */\n.u-selectbox-option[aria-selected=\"true\"] { background: var(--u-color-background, #f6f6f6); }\n.u-selectbox-option.active { background: var(--u-color-selected, #e7f2ff); }\n.u-selectbox-select-icon-arrow { transition: transform var(--u-duration-fast) var(--u-ease-standard); }\n.u-selectbox-select-open .u-selectbox-select-icon-arrow { transform: rotate(180deg); }\n.rule { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 10px; border-radius: var(--u-radius-small, 8px);\n  background: var(--u-color-background-light, #f9f9f9); }\n.rule .text { flex: 1; min-width: 0; font-family: Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }\n.rule small, .req small, .shown small { display: block; color: var(--u-color-text-secondary, #545454);\n  font-family: Montserrat, \"Segoe UI\", Arial, sans-serif; font-size: 12px; }\n.add { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }\n.add .wide { grid-column: 1 / -1; }\n.add .u-textarea { height: auto; min-height: 76px; font-family: Consolas, monospace; font-size: 12px; resize: vertical; }\n.add .u-form-field__hint { color: var(--u-color-warning, #e98446); }\n.add [type=\"submit\"] { align-self: end; }\n.foot { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--u-color-border-light, #d3d3d3); }\n.actions { display: flex; gap: 8px; flex-wrap: wrap; }\n.empty { margin: 0; color: var(--u-color-text-secondary, #545454); }\n.list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--u-color-text-secondary, #545454); }\n.requests { display: flex; flex-direction: column; }\n.req { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 0;\n  border-bottom: 1px solid var(--u-color-background, #f6f6f6); font-family: Consolas, monospace; font-size: 12px; }\n.req .path { min-width: 0; overflow-wrap: break-word; }\n/* \u041F\u0443\u0442\u044C \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0438\u0442\u0441\u044F \u043F\u043E \u00AB/\u00BB (<wbr>), \u0430 \u043D\u0435 \u043F\u043E\u0441\u0440\u0435\u0434\u0438 \u0441\u043B\u043E\u0432\u0430; \u0434\u043B\u0438\u043D\u043D\u044B\u0439 \u043E\u0431\u0440\u0435\u0437\u0430\u0435\u0442\u0441\u044F \u043D\u0430 \u0432\u0442\u043E\u0440\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0435, \u043F\u043E\u043B\u043D\u044B\u0439 \u2014 \u0432 title. */\n.req .path .p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }\n.req .u-status { font-family: Montserrat, \"Segoe UI\", Arial, sans-serif; }\n.shown { padding: 8px 0; border-bottom: 1px solid var(--u-color-background, #f6f6f6); }\n.shown-head { display: flex; justify-content: space-between; gap: 8px; color: var(--u-color-text-secondary, #545454); font-size: 12px; }\n.shown-head .kind { font-weight: 600; color: var(--u-color-error, #ef302b); }\n.shown-head .kind.warning { color: var(--u-color-warning, #e98446); }\n.shown-title { font-weight: 600; }\n.shown .cause { margin-top: 2px; font-family: Consolas, monospace; font-size: 12px; }\ndl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }\ndt { color: var(--u-color-text-secondary, #545454); }\ndd { margin: 0; font-family: Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }\n@media (max-width: 576px) {\n  .panel { left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 80vh;\n    border-radius: var(--u-radius, 10px) var(--u-radius, 10px) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }\n  .panel ~ .pill { display: none; }\n}\n@media (prefers-reduced-motion: reduce) { .u-selectbox-select-icon-arrow, .pill, .pill .label { transition: none; } }\n";
+export declare const STYLES = "\n:host { all: initial; }\n* { box-sizing: border-box; }\n.root {\n  /* \u00AB\u0410\u043D\u0438\u043C\u0430\u0446\u0438\u0438 \u00D75\u00BB \u0441\u0442\u0430\u0432\u0438\u0442 \u0434\u043B\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0441\u0442\u0438 \u043D\u0430 \u043A\u0430\u0436\u0434\u044B\u0439 \u044D\u043B\u0435\u043C\u0435\u043D\u0442 \u0434\u043E\u043A\u0443\u043C\u0435\u043D\u0442\u0430, \u0432 \u0442\u043E\u043C \u0447\u0438\u0441\u043B\u0435 \u043D\u0430 \u0445\u043E\u0441\u0442 \u043F\u0430\u043D\u0435\u043B\u0438:\n     \u0440\u0435\u0436\u0438\u043C \u0437\u0430\u043C\u0435\u0434\u043B\u044F\u0435\u0442 \u0441\u0435\u0440\u0432\u0438\u0441, \u0430 \u043D\u0435 \u0438\u043D\u0441\u0442\u0440\u0443\u043C\u0435\u043D\u0442, \u043A\u043E\u0442\u043E\u0440\u044B\u043C \u0435\u0433\u043E \u0432\u043A\u043B\u044E\u0447\u0438\u043B\u0438. */\n  --u-duration-instant: 100ms; --u-duration-fast: 150ms; --u-duration-base: 200ms; --u-duration-moderate: 250ms; --u-duration-slow: 300ms;\n  /* \u041E\u0442\u0441\u0442\u0443\u043F \u043A\u043D\u043E\u043F\u043A\u0438 \u0441\u043D\u0438\u0437\u0443: \u0432\u0441\u0435\u0433\u0434\u0430 \u043B\u0435\u0432\u044B\u0439 \u043D\u0438\u0436\u043D\u0438\u0439 \u0443\u0433\u043E\u043B, StickyActionBar \u0435\u0451 \u043D\u0435 \u043F\u043E\u0434\u043D\u0438\u043C\u0430\u0435\u0442. */\n  --launcher-bottom: calc(12px + env(safe-area-inset-bottom, 0px));\n  font-family: Montserrat, \"Segoe UI\", Arial, sans-serif; font-size: 14px; line-height: 1.4; color: var(--u-color-text, #222); }\nbutton, input, textarea { font: inherit; color: inherit; }\n/* \u041A\u043D\u043E\u043F\u043A\u0430 \u043F\u0430\u043D\u0435\u043B\u0438 \u2014 \u0432 \u0446\u0432\u0435\u0442\u0430\u0445 \u043A\u0438\u0442\u0430: \u0442\u043E\u043A\u0435\u043D\u044B --u-color-* \u0441 :root \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043F\u0440\u043E\u0445\u043E\u0434\u044F\u0442 \u0432 shadow DOM\n   (all: initial \u0438\u0445 \u043D\u0435 \u0441\u0431\u0440\u0430\u0441\u044B\u0432\u0430\u0435\u0442), \u0437\u0430\u043F\u0430\u0441\u043D\u044B\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u044F \u2014 \u043A\u0430\u043A \u0432 \u043A\u0438\u0442\u0435. \u0412 \u043F\u043E\u043A\u043E\u0435 \u2014 \u043A\u0440\u0443\u0433 \u0441 \u043B\u043E\u0433\u043E\u0442\u0438\u043F\u043E\u043C,\n   \u0447\u0442\u043E\u0431\u044B \u043C\u0435\u043D\u044C\u0448\u0435 \u0437\u0430\u043A\u0440\u044B\u0432\u0430\u0442\u044C \u043D\u0438\u0436\u043D\u0438\u0435 \u043B\u0438\u043F\u043A\u0438\u0435 \u043F\u0430\u043D\u0435\u043B\u0438 \u0441\u0435\u0440\u0432\u0438\u0441\u0430; \u043F\u0440\u0438 \u043D\u0430\u0432\u0435\u0434\u0435\u043D\u0438\u0438 \u0438 \u0444\u043E\u043A\u0443\u0441\u0435 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u0435\u0442\u0441\u044F\n   \u0432 \u00AB\u043B\u043E\u0433\u043E\u0442\u0438\u043F + Dev\u00BB; \u043F\u0440\u0438 \u0432\u043A\u043B\u044E\u0447\u0451\u043D\u043D\u044B\u0445 \u0441\u0431\u043E\u044F\u0445 \u0440\u0430\u0441\u043A\u0440\u044B\u0442\u0430 \u0432\u0441\u0435\u0433\u0434\u0430, \u0446\u0432\u0435\u0442 \u043E\u0448\u0438\u0431\u043A\u0438 \u0438 \u0447\u0438\u0441\u043B\u043E \u0441\u0431\u043E\u0435\u0432. */\n.pill { --kit-p: var(--u-color-primary, #1e4391); --kit-error: var(--u-color-error, #ef302b);\n  --kit-surface: var(--u-color-surface, #fff); --kit-line: var(--u-color-border, #748ab9);\n  position: fixed; left: 12px; bottom: var(--launcher-bottom); z-index: 2147483000;\n  display: inline-flex; align-items: center; height: 36px; padding: 0; border: 1px solid var(--kit-line); border-radius: 18px;\n  background: var(--kit-surface); color: var(--kit-p); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;\n  box-shadow: 0 2px 8px rgba(0,0,0,.15);\n  transition: background-color var(--u-duration-fast) var(--u-ease-standard), border-color var(--u-duration-fast) var(--u-ease-standard); }\n.pill .logo { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--kit-surface); }\n.pill .logo svg { display: block; width: 20px; height: 20px; }\n.pill .label { max-width: 0; overflow: hidden; opacity: 0; padding: 0;\n  transition: max-width var(--u-duration-base) var(--u-ease-move), opacity var(--u-duration-base) var(--u-ease-move), padding var(--u-duration-base) var(--u-ease-move); }\n.pill:hover .label, .pill:focus-visible .label, .pill.on .label { max-width: 260px; opacity: 1; padding: 0 14px 0 2px; }\n.pill.on { background: var(--kit-error); border-color: var(--kit-error); color: #fff; }\n.pill.on .logo { width: 30px; height: 30px; margin: 0 1px 0 2px; }\n.pill:focus-visible { outline: 2px solid var(--kit-p); outline-offset: 2px; }\n.panel { position: fixed; left: 12px; bottom: calc(var(--launcher-bottom) + 44px); z-index: 2147483001;\n  width: 400px; max-width: calc(100vw - 24px); max-height: min(75vh, 680px); display: flex; flex-direction: column;\n  background: var(--u-color-surface, #fff); border: 1px solid var(--u-color-border-light, #d3d3d3); border-radius: var(--u-radius, 10px);\n  box-shadow: var(--u-shadow-popup, 0 8px 24px rgba(15,43,94,.16)); }\n.panel.alone { bottom: var(--launcher-bottom); }\n/* \u041F\u043E\u0434\u0441\u043A\u0430\u0437\u043A\u0430 \u0443 \u043A\u043D\u043E\u043F\u043A\u0438 \u2014 \u043F\u0443\u0437\u044B\u0440\u044C, \u043A\u0430\u043A \u0443 Tooltip \u043A\u0438\u0442\u0430. */\n.hint { position: fixed; left: 12px; bottom: var(--launcher-bottom); z-index: 2147483000;\n  max-width: min(360px, calc(100vw - 24px)); padding: 8px 12px; border-radius: var(--u-radius-small, 8px);\n  background: var(--u-color-text, #222); color: var(--u-color-surface, #fff); font-size: 12px; box-shadow: var(--u-shadow-popup); }\n.pill ~ .hint { bottom: calc(var(--launcher-bottom) + 44px); }\n/* min-height \u0443 u-message-small \u043E\u0442\u043C\u0435\u043D\u044F\u0435\u0442 \u0437\u0430\u0449\u0438\u0442\u0443 \u0444\u043B\u0435\u043A\u0441-\u044D\u043B\u0435\u043C\u0435\u043D\u0442\u0430 \u043E\u0442 \u0441\u0436\u0430\u0442\u0438\u044F: \u0431\u0435\u0437 flex-shrink \u0442\u0435\u043A\u0441\u0442 \u043E\u0431\u0440\u0435\u0437\u0430\u0435\u0442\u0441\u044F. */\n.note { margin: 0 16px 8px; overflow-wrap: anywhere; flex-shrink: 0; }\n.head { display: flex; align-items: center; gap: 4px; padding: 10px 8px 2px 16px; }\n.title { flex: 1; min-width: 0; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.title .u-selectbox { width: 100%; }\n.title .u-selectbox-select-title { font-weight: 600; }\n.intro, .caption, .escape { margin: 0; color: var(--u-color-text-secondary, #545454); }\n.intro { padding: 0 16px 10px; }\n.tabs { padding: 0 16px 8px; }\n.tabs .u-tab-segment { padding: 6px 4px; }\n.body { overflow: auto; padding: 4px 16px 12px; display: flex; flex-direction: column; gap: 14px; }\n.body .u-search { display: block; width: 100%; }\n.group { display: flex; flex-direction: column; gap: 8px; }\n.group-title { font-weight: 600; color: var(--u-color-text-secondary, #545454); }\n.u-switch { align-items: flex-start; }\n.u-switch .tt { padding-top: 3px; }\n.u-switch .sub { display: block; color: var(--u-color-text-secondary, #545454); font-size: 12px; }\n/* Select \u043A\u0438\u0442\u0430: \u043E\u0442\u043C\u0435\u0442\u043A\u0430 \u0432\u044B\u0431\u0440\u0430\u043D\u043D\u043E\u0433\u043E \u0438 \u043F\u0443\u043D\u043A\u0442\u0430 \u043F\u043E\u0434 \u043A\u043B\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u043E\u0439 \u2014 \u043A\u0430\u043A \u0443 Select \u0432 React \u0438 Vue. */\n.u-selectbox-option[aria-selected=\"true\"] { background: var(--u-color-background, #f6f6f6); }\n.u-selectbox-option.active { background: var(--u-color-selected, #e7f2ff); }\n.u-selectbox-select-icon-arrow { transition: transform var(--u-duration-fast) var(--u-ease-standard); }\n.u-selectbox-select-open .u-selectbox-select-icon-arrow { transform: rotate(180deg); }\n.rule { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 10px; border-radius: var(--u-radius-small, 8px);\n  background: var(--u-color-background-light, #f9f9f9); }\n.rule .text { flex: 1; min-width: 0; font-family: Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }\n.rule small, .req small, .shown small { display: block; color: var(--u-color-text-secondary, #545454);\n  font-family: Montserrat, \"Segoe UI\", Arial, sans-serif; font-size: 12px; }\n.add { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }\n.add .wide { grid-column: 1 / -1; }\n.add .u-textarea { height: auto; min-height: 76px; font-family: Consolas, monospace; font-size: 12px; resize: vertical; }\n.add .u-form-field__hint { color: var(--u-color-warning, #e98446); }\n.add [type=\"submit\"] { align-self: end; }\n.foot { display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid var(--u-color-border-light, #d3d3d3); }\n.actions { display: flex; gap: 8px; flex-wrap: wrap; }\n.empty { margin: 0; color: var(--u-color-text-secondary, #545454); }\n.list-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--u-color-text-secondary, #545454); }\n.requests { display: flex; flex-direction: column; }\n.req { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 8px; align-items: center; padding: 6px 0;\n  border-bottom: 1px solid var(--u-color-background, #f6f6f6); font-family: Consolas, monospace; font-size: 12px; }\n.req .path { min-width: 0; overflow-wrap: break-word; }\n/* \u041F\u0443\u0442\u044C \u043F\u0435\u0440\u0435\u043D\u043E\u0441\u0438\u0442\u0441\u044F \u043F\u043E \u00AB/\u00BB (<wbr>), \u0430 \u043D\u0435 \u043F\u043E\u0441\u0440\u0435\u0434\u0438 \u0441\u043B\u043E\u0432\u0430; \u0434\u043B\u0438\u043D\u043D\u044B\u0439 \u043E\u0431\u0440\u0435\u0437\u0430\u0435\u0442\u0441\u044F \u043D\u0430 \u0432\u0442\u043E\u0440\u043E\u0439 \u0441\u0442\u0440\u043E\u043A\u0435, \u043F\u043E\u043B\u043D\u044B\u0439 \u2014 \u0432 title. */\n.req .path .p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }\n.req .u-status { font-family: Montserrat, \"Segoe UI\", Arial, sans-serif; }\n.shown { padding: 8px 0; border-bottom: 1px solid var(--u-color-background, #f6f6f6); }\n.shown-head { display: flex; justify-content: space-between; gap: 8px; color: var(--u-color-text-secondary, #545454); font-size: 12px; }\n.shown-head .kind { font-weight: 600; color: var(--u-color-error, #ef302b); }\n.shown-head .kind.warning { color: var(--u-color-warning, #e98446); }\n.shown-title { font-weight: 600; }\n.shown .cause { margin-top: 2px; font-family: Consolas, monospace; font-size: 12px; }\ndl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; }\ndt { color: var(--u-color-text-secondary, #545454); }\ndd { margin: 0; font-family: Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }\n@media (max-width: 576px) {\n  .panel { left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 80vh;\n    border-radius: var(--u-radius, 10px) var(--u-radius, 10px) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }\n  .panel ~ .pill { display: none; }\n}\n@media (prefers-reduced-motion: reduce) { .u-selectbox-select-icon-arrow, .pill, .pill .label { transition: none; } }\n";

package/dist/shared/kitCopy.js

@@ -1,5 +1,5 @@
 import { registerKitCopy$u as e, getKitCopies$u as r, hasLegacyKitOverlay$u as o, kitIdPrefix$u as n } from "../vanilla/core/kitRegistry.js";
-const c = "2.1.6", t = () => e("react", c), a = () => n(t());
+const c = "2.1.7-next.1", t = () => e("react", c), a = () => n(t());
 function p() {
   return t(), r();
 }