@retailcrm/embed-ui-v1-components 0.9.12 → 0.9.13

package/dist/remote.js

@@ -1,5 +1,5 @@
 import { defineRemoteComponent, defineRemoteMethod, nextTick, createRemoteRoot } from "@omnicajs/vue-remote/remote";
-import { openBlock, createElementBlock, createElementVNode, defineComponent, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, unref, withCtx, reactive, computed, inject, ref, useTemplateRef, provide, watch, createBlock, onBeforeMount, onBeforeUnmount, createSlots, onMounted, getCurrentInstance } from "vue";
+import { openBlock, createElementBlock, createElementVNode, defineComponent, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, unref, withCtx, isVNode, Comment, Text, Fragment, getCurrentInstance, ref, computed, watch, h, reactive, inject, useTemplateRef, provide, createBlock, onBeforeMount, onBeforeUnmount, createSlots, onMounted } from "vue";
 import isEqual from "lodash.isequal";
 import { preview } from "@retailcrm/image-preview";
 import { ru, es, enGB } from "date-fns/locale";
@@ -161,7 +161,7 @@ const _hoisted_5 = {
   class: "ui-v1-field__addon"
 };
 const _hoisted_6 = { class: "ui-v1-field__control" };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   ...{
     inheritAttrs: false
   },
@@ -413,6 +413,577 @@ const UiSwitch = defineRemoteComponent(
   UiSwitchType,
   ["click", "focus", "blur"]
 );
+var ALIGN = /* @__PURE__ */ ((ALIGN2) => {
+  ALIGN2["LEFT"] = "left";
+  ALIGN2["CENTER"] = "center";
+  ALIGN2["RIGHT"] = "right";
+  return ALIGN2;
+})(ALIGN || {});
+var VALIGN = /* @__PURE__ */ ((VALIGN2) => {
+  VALIGN2["TOP"] = "top";
+  VALIGN2["MIDDLE"] = "middle";
+  VALIGN2["BOTTOM"] = "bottom";
+  return VALIGN2;
+})(VALIGN || {});
+var DIRECTION = /* @__PURE__ */ ((DIRECTION2) => {
+  DIRECTION2["ASC"] = "asc";
+  DIRECTION2["DESC"] = "desc";
+  return DIRECTION2;
+})(DIRECTION || {});
+const byRowKey = (key) => {
+  return (row) => row[key];
+};
+const asRowClass = (value) => value;
+const asRowAttrs = (value) => value;
+const _sfc_main$5 = defineComponent({
+  name: "UiTableColumn",
+  props: {
+    label: {
+      type: String,
+      default: ""
+    },
+    width: {
+      type: [String, Number],
+      default: void 0
+    },
+    minWidth: {
+      type: [String, Number],
+      default: void 0
+    },
+    maxWidth: {
+      type: [String, Number],
+      default: void 0
+    },
+    align: {
+      type: String,
+      default: ALIGN.LEFT,
+      validator: (align) => Object.values(ALIGN).includes(align)
+    },
+    valign: {
+      type: String,
+      default: VALIGN.MIDDLE,
+      validator: (valign) => Object.values(VALIGN).includes(valign)
+    },
+    trim: {
+      type: Boolean,
+      default: false
+    },
+    colspan: {
+      type: Function,
+      default: void 0
+    },
+    rowspan: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup() {
+    return () => null;
+  }
+});
+const UiTableRootType = "UiTableRoot";
+const UiTableRoot = defineRemoteComponent(UiTableRootType);
+const UiTableSectionType = "UiTableSection";
+const UiTableSection = defineRemoteComponent(UiTableSectionType);
+const UiTableRowType = "UiTableRow";
+const UiTableRow = defineRemoteComponent(
+  UiTableRowType,
+  ["click"]
+);
+const UiTableColType = "UiTableCol";
+const UiTableCol = defineRemoteComponent(UiTableColType);
+const UiTableFooterSectionType = "UiTableFooterSection";
+const UiTableFooterSection = defineRemoteComponent(UiTableFooterSectionType);
+const UiTableFooterButtonType = "UiTableFooterButton";
+const UiTableFooterButton = defineRemoteComponent(
+  UiTableFooterButtonType,
+  ["click"]
+);
+const UiTableHeadCellType = "UiTableHeadCell";
+const UiTableHeadCell = defineRemoteComponent(UiTableHeadCellType);
+const UiTableBodyCellType = "UiTableBodyCell";
+const UiTableBodyCell = defineRemoteComponent(UiTableBodyCellType);
+const UiTableSorterType = "UiTableSorter";
+const UiTableSorter = defineRemoteComponent(
+  UiTableSorterType,
+  ["click"]
+);
+const isNamedComponent = (node, name) => {
+  if (typeof node.type !== "object" || node.type === null) {
+    return false;
+  }
+  return "name" in node.type && node.type.name === name;
+};
+const isTableColumnVNode = (node) => {
+  return node.type === _sfc_main$5 || isNamedComponent(node, "UiTableColumn");
+};
+const isWhitespaceText = (value) => value.trim().length === 0;
+const normalizeNodes = (children) => {
+  const normalized = [];
+  children.forEach((child) => {
+    if (Array.isArray(child)) {
+      normalized.push(...normalizeNodes(child));
+      return;
+    }
+    if (typeof child === "string") {
+      if (!isWhitespaceText(child)) {
+        normalized.push(child);
+      }
+      return;
+    }
+    if (typeof child === "number") {
+      normalized.push(child);
+      return;
+    }
+    if (!isVNode(child)) {
+      return;
+    }
+    if (child.type === Comment) {
+      return;
+    }
+    if (child.type === Text) {
+      const text = typeof child.children === "string" ? child.children : "";
+      if (!isWhitespaceText(text)) {
+        normalized.push(text);
+      }
+      return;
+    }
+    if (child.type === Fragment && Array.isArray(child.children)) {
+      normalized.push(...normalizeNodes(child.children));
+      return;
+    }
+    normalized.push(child);
+  });
+  return normalized;
+};
+const normalizeBoolean = (value) => value === "" || value === true;
+const normalizeString = (value) => typeof value === "string" ? value : "";
+const normalizeAlign = (value) => {
+  return Object.values(ALIGN).includes(value) ? value : ALIGN.LEFT;
+};
+const normalizeValign = (value) => {
+  return Object.values(VALIGN).includes(value) ? value : VALIGN.MIDDLE;
+};
+const normalizeSlotRecord = (node) => {
+  const children = node.children;
+  if (!children || Array.isArray(children) || typeof children === "string") {
+    return {};
+  }
+  const slots = children;
+  return {
+    defaultSlot: slots.default,
+    cellSlot: slots.cell,
+    labelSlot: slots.label
+  };
+};
+const resolveFunction = (value) => {
+  if (typeof value === "function") {
+    return value;
+  }
+  return () => void 0;
+};
+const collectTableColumns = (children) => {
+  return normalizeNodes(children).filter((node) => isVNode(node)).filter(isTableColumnVNode).map((node, index) => {
+    const props = node.props ?? {};
+    const slots = normalizeSlotRecord(node);
+    return {
+      id: String(node.key ?? `ui-v1-table-column-${index}`),
+      label: normalizeString(props.label),
+      width: props.width,
+      minWidth: props.minWidth ?? props["min-width"],
+      maxWidth: props.maxWidth ?? props["max-width"],
+      align: normalizeAlign(props.align),
+      valign: normalizeValign(props.valign),
+      trim: normalizeBoolean(props.trim),
+      getColspan: resolveFunction(props.colspan),
+      getRowspan: resolveFunction(props.rowspan),
+      cellSlot: slots.cellSlot,
+      defaultSlot: slots.defaultSlot,
+      labelSlot: slots.labelSlot
+    };
+  });
+};
+const normalizeSpan = (value) => {
+  if (typeof value === "undefined") {
+    return void 0;
+  }
+  const normalized = Math.trunc(Number(value));
+  if (!Number.isFinite(normalized) || normalized < 1) {
+    return void 0;
+  }
+  return normalized;
+};
+const renderLabel = (column) => column.labelSlot?.({ column }) ?? [column.label];
+const renderCell = (column, props) => column.cellSlot?.(props) ?? column.defaultSlot?.(props) ?? [];
+const buildRenderedRows = (options) => {
+  const activeRowspans = Array.from({ length: options.columns.length }, () => 0);
+  return options.rows.map((row, index) => {
+    const key = options.resolveKey(row, index);
+    const expanded = options.expandedKeys.has(key);
+    const toggle = () => options.toggle(key);
+    const attrs = options.resolveRowAttrs(row, index);
+    const cells = [];
+    let pendingColspan = 0;
+    options.columns.forEach((column, columnIndex) => {
+      if (pendingColspan > 0) {
+        pendingColspan -= 1;
+        return;
+      }
+      if (activeRowspans[columnIndex] > 0) {
+        activeRowspans[columnIndex] -= 1;
+        return;
+      }
+      const slotProps = {
+        row,
+        index,
+        key,
+        expanded,
+        toggle,
+        column
+      };
+      const colspan = normalizeSpan(column.getColspan(row, index));
+      const rowspan = normalizeSpan(column.getRowspan(row, index));
+      const resolvedColspan = colspan && colspan > 1 ? colspan : void 0;
+      const resolvedRowspan = rowspan && rowspan > 1 ? rowspan : void 0;
+      if (resolvedColspan) {
+        pendingColspan = resolvedColspan - 1;
+      }
+      if (resolvedRowspan) {
+        for (let spanIndex = 0; spanIndex < (resolvedColspan ?? 1); spanIndex++) {
+          activeRowspans[columnIndex + spanIndex] = Math.max(
+            activeRowspans[columnIndex + spanIndex] ?? 0,
+            resolvedRowspan - 1
+          );
+        }
+      }
+      cells.push({
+        column,
+        colspan: resolvedColspan,
+        rowspan: resolvedRowspan,
+        slotProps
+      });
+    });
+    return {
+      row,
+      index,
+      key,
+      attrs,
+      expanded,
+      toggle,
+      cells,
+      className: [
+        options.resolveRowClass(row, index),
+        attrs.class,
+        options.extraClass
+      ]
+    };
+  });
+};
+const isCellVNode = (node) => {
+  if (typeof node === "string" || typeof node === "number") {
+    return false;
+  }
+  return node.type === UiTableBodyCell || node.type === UiTableHeadCell || isNamedComponent(node, "UiTableBodyCell") || isNamedComponent(node, "UiTableHeadCell") || node.type === "td" || node.type === "th";
+};
+const slotNeedsBodyCellWrapper = (children) => {
+  const nodes = normalizeNodes(children);
+  if (nodes.length === 0) {
+    return true;
+  }
+  return !nodes.every(isCellVNode);
+};
+const renderGroupHead = (slot, props) => {
+  return slot?.(props) ?? [String(props.group.key)];
+};
+const renderExpand = (slot, props) => slot?.(props) ?? [];
+const getRowClass = (rowClass, row, index) => {
+  if (typeof rowClass === "function") {
+    return rowClass(row, index);
+  }
+  return rowClass;
+};
+const getRowAttrs = (rowAttrs, row, index) => rowAttrs?.(row, index) ?? {};
+const resolveRowKey = (rowKey, row, index) => {
+  if (typeof rowKey === "function") {
+    return rowKey(row, index);
+  }
+  if (typeof rowKey !== "undefined" && typeof row === "object" && row !== null && rowKey in row) {
+    const value = row[rowKey];
+    if (typeof value === "string" || typeof value === "number") {
+      return value;
+    }
+  }
+  return index;
+};
+const withoutClass = (attrs) => {
+  const next = { ...attrs };
+  delete next.class;
+  return next;
+};
+const _sfc_main$4 = defineComponent({
+  name: "UiTable",
+  inheritAttrs: false,
+  props: {
+    rows: {
+      type: Array,
+      default: () => []
+    },
+    rowKey: {
+      type: [String, Number, Function],
+      default: void 0
+    },
+    headless: {
+      type: Boolean,
+      default: false
+    },
+    bordered: {
+      type: Boolean,
+      default: false
+    },
+    fixed: {
+      type: Boolean,
+      default: false
+    },
+    rowClass: {
+      type: [String, Array, Object, Function],
+      default: void 0
+    },
+    rowAttrs: {
+      type: Function,
+      default: void 0
+    },
+    groupBy: {
+      type: Function,
+      default: void 0
+    },
+    groupHeadClass: {
+      type: [String, Array, Object],
+      default: void 0
+    },
+    groupBodyClass: {
+      type: [String, Array, Object],
+      default: void 0
+    }
+  },
+  emits: {
+    "row:click": (payload, event) => {
+      return true;
+    }
+  },
+  setup(props, { attrs, emit, expose, slots }) {
+    const instance = getCurrentInstance();
+    const expandedKeys = ref([]);
+    const isInteractive = computed(() => Boolean(
+      instance?.vnode.props?.onRowClick || instance?.vnode.props?.["onRow:click"]
+    ));
+    const toggleExpanded = (key) => {
+      expandedKeys.value = expandedKeys.value.includes(key) ? expandedKeys.value.filter((item) => item !== key) : [...expandedKeys.value, key];
+    };
+    const resetExpanded = () => {
+      expandedKeys.value = [];
+    };
+    const expand = (key) => {
+      if (!expandedKeys.value.includes(key)) {
+        expandedKeys.value = [...expandedKeys.value, key];
+      }
+    };
+    const collapse = (key) => {
+      expandedKeys.value = expandedKeys.value.filter((item) => item !== key);
+    };
+    expose({
+      resetExpanded,
+      expand,
+      collapse,
+      toggle: toggleExpanded
+    });
+    watch([() => props.rows, () => props.rowKey], () => {
+      const availableKeys = new Set(
+        props.rows.map((row, index) => resolveRowKey(props.rowKey, row, index))
+      );
+      const next = expandedKeys.value.filter((key) => availableKeys.has(key));
+      if (next.length !== expandedKeys.value.length) {
+        expandedKeys.value = next;
+      }
+    }, { deep: false });
+    const resolveColumns = () => collectTableColumns(slots.default?.() ?? []);
+    const resolveGroups = () => {
+      return props.groupBy ? props.groupBy(props.rows) : [];
+    };
+    const resolveFooterData = (currentColumns, currentGroups) => ({
+      columnsCount: currentColumns.length,
+      rowsCount: props.rows.length,
+      groupsCount: currentGroups.length,
+      groups: currentGroups
+    });
+    const hasStructuredFooter = () => {
+      return [
+        "footer-summary",
+        "footer-page-size",
+        "footer-export",
+        "footer-pagination"
+      ].some((name) => Boolean(slots[name]));
+    };
+    const hasFooter = () => Boolean(slots.footer) || hasStructuredFooter();
+    const resolveColumnsCount = (currentColumns) => {
+      return Math.max(currentColumns.length, 1);
+    };
+    const buildPlainRows = (currentColumns) => buildRenderedRows({
+      columns: currentColumns,
+      rows: props.rows,
+      expandedKeys: new Set(expandedKeys.value),
+      resolveKey: (row, index) => resolveRowKey(props.rowKey, row, index),
+      resolveRowAttrs: (row, index) => getRowAttrs(props.rowAttrs, row, index),
+      resolveRowClass: (row, index) => getRowClass(props.rowClass, row, index),
+      toggle: toggleExpanded
+    });
+    const buildGroupedRows = (currentColumns, currentGroups) => currentGroups.map((group) => ({
+      group,
+      rows: buildRenderedRows({
+        columns: currentColumns,
+        rows: group.rows,
+        expandedKeys: new Set(expandedKeys.value),
+        extraClass: props.groupBodyClass,
+        resolveKey: (row, index) => resolveRowKey(props.rowKey, row, index),
+        resolveRowAttrs: (row, index) => getRowAttrs(props.rowAttrs, row, index),
+        resolveRowClass: (row, index) => getRowClass(props.rowClass, row, index),
+        toggle: toggleExpanded
+      })
+    }));
+    const emitRowClick = (payload, event) => {
+      emit("row:click", payload, event);
+    };
+    const renderBodyRow = (row, columnsCount, suffix = "row") => {
+      const rowKey = `${String(row.key)}:${suffix}`;
+      return [
+        h(UiTableRow, {
+          key: rowKey,
+          interactive: isInteractive.value,
+          expanded: row.expanded,
+          ...withoutClass(row.attrs),
+          class: row.className,
+          onClick: (event) => emitRowClick({
+            row: row.row,
+            index: row.index,
+            key: row.key,
+            expanded: row.expanded,
+            toggle: row.toggle
+          }, event)
+        }, () => row.cells.map((cell, cellIndex) => h(UiTableBodyCell, {
+          key: `${rowKey}:cell:${cell.column.id}:${cellIndex}`,
+          align: cell.column.align,
+          valign: cell.column.valign,
+          colspan: cell.colspan,
+          rowspan: cell.rowspan,
+          trim: cell.column.trim
+        }, () => renderCell(cell.column, cell.slotProps)))),
+        slots.expand && row.expanded ? h(UiTableRow, {
+          key: `${rowKey}:expand`,
+          expanded: true
+        }, () => h(UiTableBodyCell, {
+          colspan: columnsCount
+        }, () => renderExpand(slots.expand, {
+          row: row.row,
+          index: row.index,
+          key: row.key
+        }))) : null
+      ];
+    };
+    const renderGroupHeadRow = (group, index, columnsCount) => {
+      const content = renderGroupHead(slots["group-head"], {
+        group,
+        index
+      });
+      return h(UiTableRow, {
+        key: `${String(group.key)}:group-head`,
+        class: props.groupHeadClass
+      }, () => {
+        if (slotNeedsBodyCellWrapper(content)) {
+          return h(UiTableBodyCell, {
+            colspan: columnsCount,
+            theme: "group"
+          }, () => h("div", { class: "ui-v1-table__group-head" }, content));
+        }
+        return content;
+      });
+    };
+    const renderEmptyRow = (columnsCount) => h(UiTableRow, { key: "empty" }, () => h(UiTableBodyCell, {
+      colspan: columnsCount
+    }, () => h("div", { class: "ui-v1-table__empty" }, slots.empty?.() ?? [])));
+    const renderFooter = (footerData, columnsCount) => {
+      if (!hasFooter()) {
+        return null;
+      }
+      if (hasStructuredFooter()) {
+        const summary = slots["footer-summary"]?.(footerData);
+        const pageSize = slots["footer-page-size"]?.(footerData);
+        const exportControl = slots["footer-export"]?.(footerData);
+        const pagination = slots["footer-pagination"]?.(footerData);
+        return h(UiTableSection, { kind: "foot", key: "footer" }, () => h(UiTableRow, () => h(UiTableBodyCell, {
+          colspan: columnsCount,
+          class: "ui-v1-table__footer-cell"
+        }, () => h("div", { class: "ui-v1-table__footer" }, [
+          summary ? h("div", { class: "ui-v1-table__footer-meta" }, [summary]) : null,
+          pageSize || exportControl || pagination ? h("div", { class: "ui-v1-table__footer-controls" }, [
+            pageSize || exportControl ? h("div", { class: "ui-v1-table__footer-main" }, [
+              pageSize,
+              exportControl
+            ]) : null,
+            pagination ? h("div", { class: "ui-v1-table__footer-side" }, [pagination]) : null
+          ]) : null
+        ]))));
+      }
+      const content = slots.footer?.(footerData) ?? [];
+      return h(UiTableSection, { kind: "foot", key: "footer" }, () => h(UiTableRow, () => {
+        if (slotNeedsBodyCellWrapper(content)) {
+          return h(UiTableBodyCell, {
+            colspan: columnsCount
+          }, () => content);
+        }
+        return content;
+      }));
+    };
+    return () => h(UiTableRoot, {
+      ...attrs,
+      bordered: props.bordered,
+      fixed: props.fixed
+    }, () => [
+      (() => {
+        const currentColumns = resolveColumns();
+        const currentColumnsCount = resolveColumnsCount(currentColumns);
+        const currentGroups = resolveGroups();
+        const currentFooterData = resolveFooterData(currentColumns, currentGroups);
+        const currentPlainRows = buildPlainRows(currentColumns);
+        const currentGroupedRows = buildGroupedRows(currentColumns, currentGroups);
+        return [
+          currentColumns.length > 0 ? h("colgroup", { key: "colgroup" }, currentColumns.map((column) => h(UiTableCol, {
+            key: `col:${column.id}`,
+            width: column.width,
+            minWidth: column.minWidth,
+            maxWidth: column.maxWidth
+          }))) : null,
+          !props.headless && currentColumns.length > 0 ? h(UiTableSection, { key: "head", kind: "head" }, () => h(UiTableRow, () => currentColumns.map((column) => h(UiTableHeadCell, {
+            key: `head:${column.id}`,
+            align: column.align,
+            trim: column.trim
+          }, () => renderLabel(column))))) : null,
+          h(UiTableSection, { key: "body", kind: "body" }, () => {
+            if (props.rows.length === 0) {
+              return renderEmptyRow(currentColumnsCount);
+            }
+            if (props.groupBy) {
+              return currentGroupedRows.flatMap(({ group, rows }, index) => [
+                renderGroupHeadRow(group, index, currentColumnsCount),
+                ...rows.flatMap((row) => renderBodyRow(row, currentColumnsCount, `${String(group.key)}:row`))
+              ]);
+            }
+            return currentPlainRows.flatMap((row) => renderBodyRow(row, currentColumnsCount));
+          }),
+          renderFooter(currentFooterData, currentColumnsCount)
+        ];
+      })()
+    ]);
+  }
+});
 const UiTagType = "UiTag";
 const UiTag = defineRemoteComponent(
   UiTagType,
@@ -1536,6 +2107,15 @@ const createEndpointRoot = async (channel) => {
     "UiSwitch",
     "UiSelectPopper",
     "UiSelectTrigger",
+    "UiTableBodyCell",
+    "UiTableCol",
+    "UiTableFooterButton",
+    "UiTableFooterSection",
+    "UiTableHeadCell",
+    "UiTableRoot",
+    "UiTableRow",
+    "UiTableSection",
+    "UiTableSorter",
     "UiTag",
     "UiTextbox",
     "UiTimePicker",
@@ -1599,6 +2179,8 @@ function detectLocale() {
   return "en-GB";
 }
 export {
+  ALIGN,
+  DIRECTION,
   ImageWorkersKey,
   UiAddButton,
   UiAddButtonType,
@@ -1628,7 +2210,7 @@ export {
   UiDateType,
   UiError,
   UiErrorType,
-  _sfc_main$4 as UiField,
+  _sfc_main$6 as UiField,
   UiInfobox,
   UiInfoboxType,
   UiLink,
@@ -1664,6 +2246,13 @@ export {
   UiSliderType,
   UiSwitch,
   UiSwitchType,
+  _sfc_main$4 as UiTable,
+  UiTableBodyCell,
+  _sfc_main$5 as UiTableColumn,
+  UiTableFooterButton,
+  UiTableFooterSection,
+  UiTableHeadCell,
+  UiTableSorter,
   UiTag,
   UiTagType,
   UiTextbox,
@@ -1680,6 +2269,10 @@ export {
   UiTransitionType,
   UiYandexMap,
   UiYandexMapType,
+  VALIGN,
+  asRowAttrs,
+  asRowClass,
+  byRowKey,
   createEndpointRoot,
   formatDate,
   formatDateTime,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@retailcrm/embed-ui-v1-components",
   "type": "module",
-  "version": "0.9.12",
+  "version": "0.9.13",
   "license": "MIT",
   "author": "RetailDriverLLC <integration@retailcrm.ru>",
   "repository": "git@github.com:retailcrm/embed-ui.git",
@@ -48,13 +48,14 @@
     "build:host": "vite build -c ./vite.config.host.ts",
     "build:remote": "vite build -c ./vite.config.remote.ts && sh -c 'cp dist/remote/* dist/ && rm -rf dist/remote'",
     "storybook:build": "storybook build -c storybook -o ./storybook/dist",
-    "storybook:serve": "storybook dev -c storybook -p 6006 --no-open"
+    "storybook:serve": "storybook dev -c storybook -p 6006 --no-open",
+    "storybook:shot": "tsx ./storybook/scripts/shot.ts"
   },
   "peerDependencies": {
     "vue": "^3.5"
   },
   "dependencies": {
-    "@omnicajs/vue-remote": "^0.2.18",
+    "@omnicajs/vue-remote": "^0.2.19",
     "@remote-ui/rpc": "^1.4.7",
     "@retailcrm/image-preview": "^1.0.2",
     "date-fns": "^4.1.0",
@@ -76,6 +77,7 @@
     "@yandex/ymaps3-types": "^0.0.21",
     "highlight.js": "^11.11.1",
     "less": "^4.4.2",
+    "playwright": "1.58.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.0",