@elcrm/components 0.1.2 → 0.2.1

package/dist/tokens.css

@@ -1,6 +1,10 @@
 /**
  * Дефолты геометрии @elcrm/components для `elcrm css`.
- * Цвета — light.css / dark.css. Не импортируй в runtime приложения как themes.css.
+ * Цвета — light.css / dark.css. Не импортируй в runtime как themes.css.
+ *
+ * Слой 1: `--shell-*` (всё общее).
+ * Слой 2: узкие токены = алиас на shell, если значение то же.
+ * Переопределяй узкий токен только когда компонент реально отличается.
  */
 :root {
   /* —— shell —— */
@@ -20,23 +24,25 @@
   --shell-status-size: 10px;
   --shell-disabled-opacity: 0.55;
   --shell-z: var(--elcrm-z-popover, 1000);
+  --layout-height: 100dvh;
 
-  /* —— узкие —— */
+  /* —— header —— */
   --header-radius: var(--shell-radius);
   --header-height: 52px;
   --header-shadow: none;
   --header-margin: 0;
   --header-z: 20;
 
+  /* —— section / nav-sections —— */
   --section-padding: 1.5rem 1.75rem 2.5rem;
   --section-title-size: 1.5rem;
   --section-title-size-md: 1.25rem;
   --section-auth-card-max-width: 22rem;
-
-  --nav-sections-padding: 1.5rem 1.75rem 2.5rem;
+  --nav-sections-padding: var(--section-padding);
   --nav-sections-nav-width: 220px;
   --nav-sections-main-max-width: 720px;
 
+  /* —— avatar —— */
   --avatar-size-s: 1.5rem;
   --avatar-size-m: 2rem;
   --avatar-size-l: 2.75rem;
@@ -48,29 +54,44 @@
   --avatar-outline-offset: 0;
   --avatar-group-overlap: -0.4rem;
   --avatar-group-ring: 2px;
-  --avatar-name-title-color: var(--shell-color);
-  --avatar-name-description-color: var(--shell-color-muted);
 
+  /* —— overlay / pricing / stack —— */
   --dropdown-min-width: 12rem;
   --dropdown-max-width: 20rem;
   --dropdown-max-height: 20rem;
   --pricing-card-min-width: 16rem;
   --pricing-table-label-width: 10rem;
-
   --card-pointer: auto;
   --stack-grid-min: 180px;
-  /* Задаётся Stack через style при columns=…; дефолт — одна колонка */
   --stack-columns-template: minmax(0, 1fr);
-  --item-column-gap: 12px;
+  --stat-value-size: 1.75rem;
+  --action-group-gap: var(--shell-gap-sm);
+
+  /* —— item-column —— */
+  --item-column-gap: var(--shell-gap);
   --item-column-icon-size: 40px;
-  --item-column-icon-radius: 999px;
+  --item-column-icon-radius: var(--avatar-radius);
+  --item-column-title-size: var(--shell-font-size);
+  --item-column-title-line: 1.3;
 
+  /* —— sidebar —— */
   --sidebar-width: 248px;
-  --sidebar-pad-x: 12px;
-  --sidebar-pad-y: 16px;
-  --sidebar-block-radius: 14px;
-  --sidebar-item-font-size: 13px;
+  --sidebar-pad-x: var(--shell-gap);
+  --sidebar-pad-y: var(--shell-gap-lg);
+  --sidebar-block-radius: var(--shell-radius);
+  --sidebar-item-font-size: var(--shell-font-size-sm);
   --sidebar-item-padding: 6px 10px;
   --sidebar-icon-size: 16px;
   --sidebar-group-font-size: 11px;
+
+  /* —— chat —— */
+  --chat-list-width: 340px;
+  --chat-split-gap: var(--shell-gap-lg);
+  --chat-radius: var(--shell-radius);
+  --chat-header-padding: var(--shell-gap);
+  --chat-body-padding: 0;
+  --chat-footer-padding: var(--shell-gap);
+  --chat-messages-header-padding: 14px 16px;
+  --chat-messages-body-padding: 16px 16px 20px;
+  --chat-messages-footer-padding: 10px 12px 12px;
 }

package/dist/types.d.ts

@@ -0,0 +1,2 @@
+/** Размер UI elCRM: compact / default / large. */
+export type UiSize = "s" | "m" | "l";

package/dist/useControllableValue-CWqH1kpM.js

@@ -0,0 +1,10 @@
+import { useState as l } from "react";
+function V(r, o, t) {
+  const [u, c] = l(o), e = r !== void 0;
+  return [e ? r : u, (s) => {
+    e || c(s), t == null || t(s);
+  }];
+}
+export {
+  V as u
+};

package/dist/useControllableValue.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Controlled / uncontrolled значение (как `value` + `defaultValue` у групп).
+ */
+export declare function useControllableValue<T>(value: T | undefined, defaultValue: T | undefined, onChange?: (next: T) => void): [T | undefined, (next: T) => void];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elcrm/components",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Shell UI elCRM: Layout, Header, Sidebar, Popover, PageHead, PageShell, Section, Stack, Stat, ActionGroup, TextGroup, ItemColumn и др.",
   "type": "module",
   "author": "MaSkal <dev@elcrm.online>",
@@ -85,11 +85,14 @@
     "./package.json": "./package.json"
   },
   "scripts": {
+    "dev": "vite --config test/vite.config.ts",
     "build": "vite build",
     "postbuild": "node scripts/postbuild.mjs",
     "check:css": "node scripts/check-css-scoped.mjs",
     "check:tokens": "node scripts/check-tokens.mjs",
     "test": "vitest run",
+    "test:build": "vite build --config test/vite.config.ts",
+    "test:preview": "vite preview --config test/vite.config.ts",
     "prepublishOnly": "npm run check:css && npm run check:tokens && npm run test && npm run build",
     "pack:check": "npm pack --dry-run"
   },
@@ -104,6 +107,7 @@
     }
   },
   "devDependencies": {
+    "@elcrm/storybook": "file:../elCRM.storybook",
     "@testing-library/react": "^16.2.0",
     "@types/node": "^22.13.10",
     "@types/react": "^18.2.66",

package/dist/AvatarName-C1sIDPH-.js

@@ -1,66 +0,0 @@
-import t from "react";
-import { A as b } from "./Avatar-loGgFt72.js";
-import { c as g } from "./cx-CcykAxZN.js";
-import './AvatarName.css';const y = "czr", A = "czc", h = "czt", x = "czd", C = "czs", F = "czm", I = "czl", e = {
-  r: y,
-  c: A,
-  t: h,
-  d: x,
-  s: C,
-  m: F,
-  l: I
-};
-function R(s, n) {
-  if (s != null && s !== "") return s;
-  if (typeof n == "string") return n;
-}
-function k(s) {
-  const {
-    src: n,
-    name: c,
-    title: m,
-    description: i,
-    size: a = "m",
-    radius: f,
-    status: p,
-    className: z,
-    children: E,
-    as: u = "div",
-    ...r
-  } = s, N = a === "s" ? e.s : a === "l" ? e.l : e.m, l = g(e.r, N, z), d = m ?? (typeof c == "string" ? c : void 0), v = R(c, m), o = /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
-    b,
-    {
-      src: n,
-      name: v,
-      size: a,
-      radius: f,
-      status: p
-    }
-  ), /* @__PURE__ */ t.createElement("span", { className: e.c }, d != null ? /* @__PURE__ */ t.createElement("span", { className: e.t }, d) : null, i != null ? /* @__PURE__ */ t.createElement("span", { className: e.d }, i) : null, E));
-  return u === "button" ? /* @__PURE__ */ t.createElement(
-    "button",
-    {
-      type: "button",
-      className: l,
-      ...r
-    },
-    o
-  ) : u === "a" ? /* @__PURE__ */ t.createElement(
-    "a",
-    {
-      className: l,
-      ...r
-    },
-    o
-  ) : /* @__PURE__ */ t.createElement(
-    "div",
-    {
-      className: l,
-      ...r
-    },
-    o
-  );
-}
-export {
-  k as A
-};

package/dist/Dropdown-CQBMF9aR.js

@@ -1,151 +0,0 @@
-import e from "react";
-import { c as s } from "./cx-CcykAxZN.js";
-import { P as I } from "./Popover-g2xTGubK.js";
-import './Dropdown.css';const R = "crr", z = "crt", F = "crc", G = "crp", P = "crh", T = "crg", U = "crd", q = "cri", A = "crn", H = "crk", J = "crl", K = "cru", O = "crm", Q = "crb", V = "cro", X = "crf", Y = "crx", Z = "cry", _ = "crv", n = {
-  r: R,
-  t: z,
-  c: F,
-  p: G,
-  h: P,
-  g: T,
-  d: U,
-  i: q,
-  n: A,
-  k: H,
-  l: J,
-  u: K,
-  m: O,
-  b: Q,
-  o: V,
-  f: X,
-  x: Y,
-  y: Z,
-  v: _
-};
-function $() {
-  return /* @__PURE__ */ e.createElement("svg", { className: n.c, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
-    "path",
-    {
-      d: "M2.5 4.5 6 8l3.5-3.5",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ));
-}
-function S() {
-  return /* @__PURE__ */ e.createElement("svg", { className: n.m, viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
-    "path",
-    {
-      d: "M4.5 2.5 8 6l-3.5 3.5",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ));
-}
-function b({ className: t }) {
-  return /* @__PURE__ */ e.createElement("svg", { className: s(n.v, t), viewBox: "0 0 12 12", "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(
-    "path",
-    {
-      d: "M2.5 6.2 4.8 8.5 9.5 3.5",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.8",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  ));
-}
-function ee({ item: t }) {
-  return t.checkbox ? /* @__PURE__ */ e.createElement("span", { className: s(n.x, t.checked && n.y), "aria-hidden": !0 }, t.checked ? /* @__PURE__ */ e.createElement(b, null) : null) : t.checked ? /* @__PURE__ */ e.createElement("span", { className: n.k, "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(b, null)) : t.status != null ? /* @__PURE__ */ e.createElement(
-    "span",
-    {
-      className: s(n.b, t.status === "online" ? n.o : n.f),
-      "aria-hidden": !0
-    }
-  ) : t.icon != null ? /* @__PURE__ */ e.createElement("span", { className: n.n }, t.icon) : null;
-}
-function ne(t, l, a) {
-  return l != null && l.length > 0 ? a != null && l[0] && l[0].title == null ? [{ ...l[0], title: a }, ...l.slice(1)] : l : t != null && t.length > 0 ? [{ title: a, items: t }] : a != null ? [{ title: a, items: [] }] : [];
-}
-function le({
-  items: t,
-  groups: l,
-  trigger: a,
-  label: u,
-  hideChevron: N = !1,
-  title: x,
-  align: f = "end",
-  open: p,
-  defaultOpen: y = !1,
-  onOpenChange: d,
-  closeOnSelect: L = !0,
-  disabled: i = !1,
-  onSelect: h,
-  className: C
-}) {
-  const [g, w] = e.useState(y), E = p !== void 0, k = E ? p : g, v = (r) => {
-    E || w(r), d == null || d(r);
-  }, B = ne(t, l, x), j = (r) => {
-    var c;
-    if (r.disabled) return;
-    (c = r.onClick) == null || c.call(r), h == null || h(r.value, r), r.checkbox || r.submenu || !L || v(!1);
-  }, D = a ?? /* @__PURE__ */ e.createElement(
-    "button",
-    {
-      type: "button",
-      className: n.t,
-      "data-open": k ? "true" : void 0,
-      disabled: i,
-      "aria-haspopup": "menu",
-      "aria-expanded": k
-    },
-    u,
-    N ? null : /* @__PURE__ */ e.createElement($, null)
-  );
-  return /* @__PURE__ */ e.createElement(
-    I,
-    {
-      className: s(n.r, C),
-      open: k,
-      onOpenChange: (r) => {
-        i || v(r);
-      },
-      align: f,
-      trigger: D,
-      label: typeof u == "string" ? u : void 0,
-      disabled: i
-    },
-    /* @__PURE__ */ e.createElement("div", { className: n.p, "data-align": f }, B.map((r, m) => /* @__PURE__ */ e.createElement(e.Fragment, { key: m }, m > 0 ? /* @__PURE__ */ e.createElement("hr", { className: n.d }) : null, /* @__PURE__ */ e.createElement("div", { className: n.g, role: "group" }, r.title != null ? /* @__PURE__ */ e.createElement("p", { className: n.h }, r.title) : null, r.items.map((c) => {
-      const M = r.items.some(
-        (o) => o.checked || o.checkbox || o.status != null || o.icon != null
-      ), W = /* @__PURE__ */ e.createElement(ee, { item: c });
-      return /* @__PURE__ */ e.createElement(
-        "button",
-        {
-          key: c.value,
-          type: "button",
-          role: "menuitem",
-          className: n.i,
-          "data-checked": (c.checked || c.checkbox) && c.checked ? "true" : void 0,
-          "data-danger": c.danger ? "true" : void 0,
-          disabled: c.disabled,
-          "aria-checked": c.checked != null || c.checkbox ? !!c.checked : void 0,
-          onClick: () => j(c)
-        },
-        M ? W ?? /* @__PURE__ */ e.createElement("span", { className: n.n, "aria-hidden": !0 }) : null,
-        c.label != null ? /* @__PURE__ */ e.createElement("span", { className: n.l }, c.label) : null,
-        c.shortcut != null ? /* @__PURE__ */ e.createElement("span", { className: n.u }, c.shortcut) : null,
-        c.submenu ? /* @__PURE__ */ e.createElement(S, null) : null
-      );
-    })))))
-  );
-}
-export {
-  le as D
-};

package/dist/Layout-BQwEaeO0.js

@@ -1,22 +0,0 @@
-import e from "react";
-import { c as s } from "./cx-CcykAxZN.js";
-import './Layout.css';const i = "clr", u = "clm", E = "cls", b = "clb", t = {
-  r: i,
-  m: u,
-  s: E,
-  b
-};
-function p({
-  sidebar: c,
-  header: a,
-  footer: l,
-  children: o,
-  className: n,
-  ...m
-}) {
-  const r = /* @__PURE__ */ e.createElement(e.Fragment, null, a, /* @__PURE__ */ e.createElement("main", { className: t.m }, o), l);
-  return c != null ? /* @__PURE__ */ e.createElement("div", { className: s(t.r, t.s, n), ...m }, c, /* @__PURE__ */ e.createElement("div", { className: t.b }, r)) : /* @__PURE__ */ e.createElement("div", { className: s(t.r, n), ...m }, r);
-}
-export {
-  p as L
-};

package/dist/Loading-ChGq9peU.js

@@ -1,15 +0,0 @@
-import c from "react";
-import { c as e } from "./cx-CcykAxZN.js";
-import './Loading.css';const s = "cgr", a = {
-  r: s
-};
-function i({
-  children: r = "Загрузка…",
-  className: t,
-  ...o
-}) {
-  return /* @__PURE__ */ c.createElement("div", { className: e(a.r, t), role: "status", ...o }, r);
-}
-export {
-  i as L
-};

package/dist/Menu-DpUvOl8Y.js

@@ -1,58 +0,0 @@
-import l from "react";
-import { B as p } from "./Badge-jp-9iNNL.js";
-import { c as i } from "./cx-CcykAxZN.js";
-import './Menu.css';const b = "cmr", m = "cmv", k = "cmi", x = "cmd", E = "cma", g = "cmu", c = {
-  r: b,
-  v: m,
-  i: k,
-  d: x,
-  a: E,
-  u: g
-};
-function y(a) {
-  if (a == null || a === "") return null;
-  const r = Number(a);
-  return !Number.isNaN(r) && r === 0 ? null : !Number.isNaN(r) && r > 99 ? "99+" : String(a);
-}
-function h({
-  items: a,
-  vertical: r,
-  variant: v = "plain",
-  value: o,
-  onSelect: u,
-  children: d,
-  className: N,
-  ...f
-}) {
-  return /* @__PURE__ */ l.createElement(
-    "nav",
-    {
-      className: i(c.r, r && c.v, v === "line" && c.u, N),
-      ...f
-    },
-    a == null ? void 0 : a.map((n) => {
-      const t = n.active ?? (o != null && n.value === o), s = y(n.badge);
-      return /* @__PURE__ */ l.createElement(
-        "button",
-        {
-          key: n.value,
-          type: "button",
-          className: i(c.i, t && c.a),
-          "data-active": t ? "true" : void 0,
-          "aria-current": t ? "page" : void 0,
-          disabled: n.disabled,
-          onClick: () => {
-            var e;
-            (e = n.onClick) == null || e.call(n), u == null || u(n.value);
-          }
-        },
-        n.label,
-        s != null ? /* @__PURE__ */ l.createElement(p, { className: c.d, tone: "accent", size: "s" }, s) : null
-      );
-    }),
-    d
-  );
-}
-export {
-  h as M
-};

package/dist/NavSections-NDcIDD6H.js

@@ -1,59 +0,0 @@
-import e, { useMemo as x, useState as I, Suspense as M } from "react";
-import { c as d } from "./cx-CcykAxZN.js";
-import './NavSections.css';const R = "cvr", j = "cvn", q = "cvg", w = "cvl", z = "cvi", A = "cva", B = "cvc", D = "cvt", F = "cvf", G = "cvm", t = {
-  r: R,
-  n: j,
-  g: q,
-  l: w,
-  i: z,
-  a: A,
-  c: B,
-  t: D,
-  f: F,
-  m: G
-};
-function H(l) {
-  for (const r of l) {
-    const n = r.items.find((s) => !s.disabled);
-    if (n) return n.value;
-  }
-  return "";
-}
-function L({
-  groups: l,
-  resolveSection: r,
-  value: n,
-  defaultValue: s,
-  onValueChange: i,
-  loading: f = null,
-  footer: v,
-  className: b,
-  navLabel: E = "Разделы"
-}) {
-  const N = x(
-    () => s || H(l),
-    [s, l]
-  ), [k, p] = I(N), m = n ?? k, y = (a) => {
-    n == null && p(a), i == null || i(a);
-  }, u = m ? r(m) : null;
-  return /* @__PURE__ */ e.createElement("div", { className: d(t.r, b) }, /* @__PURE__ */ e.createElement("nav", { className: t.n, "aria-label": E }, l.map((a, S) => /* @__PURE__ */ e.createElement("div", { key: S, className: t.g }, a.label != null ? /* @__PURE__ */ e.createElement("div", { className: t.l }, a.label) : null, a.items.map((c) => {
-    const o = c.value === m;
-    return /* @__PURE__ */ e.createElement(
-      "button",
-      {
-        key: c.value,
-        type: "button",
-        className: d(t.i, o && t.a),
-        "data-active": o ? "true" : void 0,
-        "aria-current": o ? "page" : void 0,
-        disabled: c.disabled,
-        onClick: () => y(c.value)
-      },
-      c.icon != null ? /* @__PURE__ */ e.createElement("span", { className: t.c, "aria-hidden": !0 }, c.icon) : null,
-      /* @__PURE__ */ e.createElement("span", { className: t.t }, c.label)
-    );
-  }))), v != null ? /* @__PURE__ */ e.createElement("div", { className: t.f }, v) : null), /* @__PURE__ */ e.createElement("div", { className: t.m }, u ? /* @__PURE__ */ e.createElement(M, { fallback: f }, e.createElement(u)) : null));
-}
-export {
-  L as N
-};

package/dist/Popover-g2xTGubK.js

@@ -1,123 +0,0 @@
-import w, { useRef as h, useId as Q, useState as x, useLayoutEffect as S, useEffect as W } from "react";
-import { createPortal as V } from "react-dom";
-import { c as H } from "./cx-CcykAxZN.js";
-import './Popover.css';const N = 1e3, X = 10;
-function E() {
-  const e = globalThis;
-  return e.elcrm || (e.elcrm = {}), e.elcrm.overlayZ || (e.elcrm.overlayZ = { seq: 0, active: /* @__PURE__ */ new Set() }), e.elcrm.overlayZ;
-}
-function Y() {
-  const e = E();
-  e.seq += 1;
-  const r = N + e.seq * X;
-  return e.active.add(r), r;
-}
-function B(e) {
-  const r = E();
-  r.active.delete(e), r.active.size === 0 && (r.seq = 0);
-}
-function oe() {
-  const e = E();
-  return e.active.size === 0 ? N : Math.max(...e.active);
-}
-const _ = "c3r", $ = "c3t", C = "c3p", y = {
-  r: _,
-  t: $,
-  p: C
-};
-function re({
-  trigger: e,
-  children: r,
-  open: L,
-  defaultOpen: D = !1,
-  onOpenChange: m,
-  align: M = "end",
-  disabled: g = !1,
-  label: O,
-  role: T = "menu",
-  className: A,
-  panelClassName: F
-}) {
-  const f = h(null), z = h(null), R = Q(), [K, U] = x(D), Z = L !== void 0, n = Z ? L : K, [c, I] = x(null), [i, P] = x(null), p = h(null);
-  p.current = i;
-  const v = (t) => {
-    g && t || (Z || U(t), m == null || m(t));
-  };
-  S(() => {
-    if (n) {
-      i == null && P(Y());
-      return;
-    }
-    i != null && (B(i), P(null));
-  }, [n, i]), W(() => () => {
-    p.current != null && B(p.current);
-  }, []);
-  const b = () => {
-    const t = f.current;
-    if (!t) return;
-    const o = t.getBoundingClientRect(), s = 8, a = window.innerHeight - o.bottom - s - 8, l = o.top - s - 8, u = a >= 160 || a >= l, q = Math.min(420, Math.max(120, u ? a : l)), d = Math.max(200, o.width), G = u ? o.bottom + s : Math.max(8, o.top - s - q), J = M === "end" ? Math.max(8, Math.min(o.right - d, window.innerWidth - d - 8)) : Math.max(8, Math.min(o.left, window.innerWidth - d - 8));
-    I({ top: G, left: J, minWidth: d, maxHeight: q });
-  };
-  S(() => {
-    if (!n) {
-      I(null);
-      return;
-    }
-    b();
-    const t = () => b();
-    return window.addEventListener("resize", t), window.addEventListener("scroll", t, !0), () => {
-      window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0);
-    };
-  }, [n, M]), W(() => {
-    if (!n) return;
-    const t = (s) => {
-      var l, u;
-      const a = s.target;
-      (l = f.current) != null && l.contains(a) || (u = z.current) != null && u.contains(a) || v(!1);
-    }, o = (s) => {
-      s.key === "Escape" && v(!1);
-    };
-    return document.addEventListener("mousedown", t), document.addEventListener("keydown", o), () => {
-      document.removeEventListener("mousedown", t), document.removeEventListener("keydown", o);
-    };
-  }, [n]);
-  const j = c ? {
-    position: "fixed",
-    top: c.top,
-    left: c.left,
-    minWidth: c.minWidth,
-    maxHeight: c.maxHeight,
-    zIndex: i ?? 1e3
-  } : void 0, k = n && c ? /* @__PURE__ */ w.createElement(
-    "div",
-    {
-      ref: z,
-      id: R,
-      role: T,
-      "aria-label": O,
-      className: H(y.p, F),
-      style: j,
-      onMouseDown: (t) => t.stopPropagation()
-    },
-    r
-  ) : null;
-  return /* @__PURE__ */ w.createElement("div", { ref: f, className: H(y.r, A) }, /* @__PURE__ */ w.createElement(
-    "div",
-    {
-      className: y.t,
-      "aria-haspopup": "menu",
-      "aria-expanded": n,
-      "aria-controls": n ? R : void 0,
-      onClick: () => {
-        g || v(!n);
-      }
-    },
-    e
-  ), k && typeof document < "u" ? V(k, document.body) : null);
-}
-export {
-  re as P,
-  Y as a,
-  oe as p,
-  B as r
-};