@allior/wmake-utils 0.0.1

package/README.md

@@ -0,0 +1,52 @@
+# @allior/wmake-utils
+
+**Language / Язык:** English | [Русский](README_RU.md)
+
+Utilities for widgets: message content parsers (emotes, mentions, HTML), image preloading, and more.
+
+## parseMessageContent
+
+Converts a message object (`text` + `emotes`) into an HTML string: emotes become `<img>`, mentions `@nick` become `<span class="mentioned">`.
+
+Logic ported from blyoka-chat (StreamElements): zero-width emote support, large/medium emote options when the message is “emotes only”.
+
+### Usage
+
+```ts
+import { parseMessageContent } from "@allior/wmake-utils";
+
+const html = parseMessageContent(
+  {
+    text: "Hello @user Kappa",
+    emotes: [{ name: "Kappa", urls: { "1": "https://..." } }],
+  },
+  {
+    zeroWidthEmotes: [],
+    largeEmotes: true,
+    largeEmotesAmount: 3,
+    mediumEmotes: false,
+  },
+);
+```
+
+### Options
+
+- **zeroWidthEmotes** — list of emotes treated as zero-width (glued to the previous container, class `zero`).
+- **largeEmotes** / **largeEmotesAmount** — when the message contains only emotes and no more than `largeEmotesAmount`, use size `large` (urls["2"]).
+- **mediumEmotes** — use size `medium` when there are many emotes.
+
+## preloadImagesThenShow
+
+Waits for all `<img>` inside a container to load, then calls the callback.
+
+```ts
+import { preloadImagesThenShow } from "@allior/wmake-utils";
+
+preloadImagesThenShow(containerElement, (el) => {
+  // all images loaded, safe to show
+});
+```
+
+## htmlEncode
+
+Escapes a string for HTML: spaces normalized, characters `< > " ^` replaced with entities.

package/README_RU.md

@@ -0,0 +1,52 @@
+# @allior/wmake-utils
+
+Утилиты для виджетов: парсеры контента сообщений (эмоуты, упоминания, HTML), предзагрузка изображений и др.
+
+## parseMessageContent
+
+Преобразует объект сообщения (`text` + `emotes`) в HTML-строку: эмоуты становятся `<img>`, упоминания `@nick` — `<span class="mentioned">`.
+
+Логика перенесена из blyoka-chat (StreamElements): поддержка zero-width эмоутов, опции large/medium эмоутов при сообщении «только эмоуты».
+
+### Использование
+
+```ts
+import { parseMessageContent } from "@allior/wmake-utils";
+
+const html = parseMessageContent(
+  {
+    text: "Hello @user Kappa",
+    emotes: [{ name: "Kappa", urls: { "1": "https://..." } }],
+  },
+  {
+    zeroWidthEmotes: [],
+    largeEmotes: true,
+    largeEmotesAmount: 3,
+    mediumEmotes: false,
+  },
+);
+```
+
+### Опции
+
+- **zeroWidthEmotes** — список эмоутов, которые считаются zero-width (склейка с предыдущим контейнером, класс `zero`).
+- **largeEmotes** / **largeEmotesAmount** — если в сообщении только эмоуты и их не больше `largeEmotesAmount`, использовать размер `large` (urls["2"]).
+- **mediumEmotes** — при большом количестве эмоутов использовать размер `medium`.
+
+## preloadImagesThenShow
+
+Ожидает загрузки всех `<img>` внутри контейнера, затем вызывает callback.
+
+```ts
+import { preloadImagesThenShow } from "@allior/wmake-utils";
+
+preloadImagesThenShow(containerElement, (el) => {
+  // все изображения загружены, можно показывать
+});
+```
+
+## htmlEncode
+
+Экранирование строки для HTML: пробелы нормализуются, символы `< > " ^` заменяются на сущности.
+
+**[English](README.md)**

package/dist/react/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./use-ignore-message";
+export * from "./use-message-limit";
+export * from "./use-message-rows";
+//# sourceMappingURL=index.d.ts.map

package/dist/react/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}

package/dist/react/hooks/use-ignore-message.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    ignoredUsers?: string[];
+    ignoreCommands?: boolean;
+}
+export declare const useIgnoreMessage: ({ ignoredUsers, ignoreCommands, }: Props) => {
+    shouldIgnore: (username: string, text: string) => boolean;
+};
+export {};
+//# sourceMappingURL=use-ignore-message.d.ts.map

package/dist/react/hooks/use-ignore-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-ignore-message.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-ignore-message.ts"],"names":[],"mappings":"AAAA,UAAU,KAAK;IACb,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,GAAI,mCAG9B,KAAK;6BAW0B,MAAM,QAAQ,MAAM;CAKrD,CAAC"}

package/dist/react/hooks/use-message-limit.d.ts

@@ -0,0 +1,14 @@
+import type { RefObject } from "react";
+export interface UseMessageLimitOptions {
+    messageLimit?: number;
+    /** Селекторы строк для лимита (по умолчанию [".message-row", ".reply"]) */
+    limitSelectors?: string[];
+    /** Вызов при удалении элемента из DOM (для синхронизации state в React) */
+    onRemove?: (element: Element) => void;
+}
+/**
+ * Подключает message limit к корневому элементу и опциям из widget load.
+ * Возвращает handleMessageLimit — вызывать после добавления новой строки.
+ */
+export declare function useMessageLimit(rootRef: RefObject<Element | null>, options?: UseMessageLimitOptions): () => void;
+//# sourceMappingURL=use-message-limit.d.ts.map

package/dist/react/hooks/use-message-limit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-message-limit.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-message-limit.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,sBAAsB;IACrC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,EAClC,OAAO,GAAE,sBAA2B,GACnC,MAAM,IAAI,CAkBZ"}

package/dist/react/hooks/use-message-rows.d.ts

@@ -0,0 +1,47 @@
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import type { UseMessageLimitOptions } from "./use-message-limit";
+export interface UseMessageRowsOptions<T> extends Omit<UseMessageLimitOptions, "onRemove"> {
+    /**
+     * Функция получения id строки (для синхронизации state при удалении из DOM по data-row-id).
+     */
+    getRowId: (row: T) => number;
+    /** Имя атрибута с id на DOM-элементе строки (по умолчанию "data-row-id"). */
+    rowIdAttribute?: string;
+    /**
+     * Ref контейнера «подготовки»: при наличии addRow сначала добавляет в preparedRows;
+     * при пересечении строки с этим контейнером вызывается onPreparedEnter, затем строка переносится в rows.
+     */
+    preparingRef?: RefObject<Element | null>;
+    /**
+     * Вызывается, когда строка из preparedRows попадает в зону preparingRef (например, для processZeroWidthEmotes).
+     * После вызова строка переносится в основной список (main rows).
+     */
+    onPreparedEnter?: (rowId: number, element: Element) => void;
+}
+export interface UseMessageRowsReturn<T> {
+    /** Текущий список строк (основной список, рендер в main). */
+    rows: T[];
+    /** Строки в зоне подготовки (рендер внутри элемента с preparingRef). При отсутствии preparingRef — пустой массив. */
+    preparedRows: T[];
+    /** Установить список строк (полная замена). */
+    setRows: Dispatch<SetStateAction<T[]>>;
+    /** Добавить строку: при наличии preparingRef — в preparedRows, иначе в rows с применением лимита. */
+    addRow: (row: T) => void;
+    /** Перенести строку из preparedRows в rows по id. Вызывается автоматически после onPreparedEnter при использовании preparingRef. */
+    moveRow: (rowId: number) => void;
+    /**
+     * Зарегистрировать DOM-элемент подготовленной строки для наблюдения (вызывать при монтировании/размонтировании строки).
+     * Когда элемент попадает в зону preparingRef, вызывается onPreparedEnter и затем moveRow(rowId).
+     */
+    registerPreparedRow: (rowId: number, element: Element | null) => void;
+    /** Применить лимит сообщений (удалить лишние строки из DOM и state). */
+    applyLimit: () => void;
+}
+/**
+ * Хук для управления списком строк с учётом message limit:
+ * хранит rows в state, при applyLimit удаляет лишние из DOM и синхронизирует state по data-row-id.
+ * При передаче preparingRef новые строки сначала попадают в preparedRows; при пересечении с контейнером
+ * вызывается onPreparedEnter и строка переносится в rows.
+ */
+export declare function useMessageRows<T>(rootRef: RefObject<Element | null>, options: UseMessageRowsOptions<T>): UseMessageRowsReturn<T>;
+//# sourceMappingURL=use-message-rows.d.ts.map

package/dist/react/hooks/use-message-rows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-message-rows.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/use-message-rows.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAElE,MAAM,WAAW,qBAAqB,CAAC,CAAC,CAAE,SAAQ,IAAI,CACpD,sBAAsB,EACtB,UAAU,CACX;IACC;;OAEG;IACH,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAC7B,6EAA6E;IAC7E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACzC;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7D;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,6DAA6D;IAC7D,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,qHAAqH;IACrH,YAAY,EAAE,CAAC,EAAE,CAAC;IAClB,+CAA+C;IAC/C,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IACvC,qGAAqG;IACrG,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,oIAAoI;IACpI,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;OAGG;IACH,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,wEAAwE;IACxE,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAC9B,OAAO,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,EAClC,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAChC,oBAAoB,CAAC,CAAC,CAAC,CAiGzB"}

package/dist/react/index.d.ts

@@ -0,0 +1,3 @@
+export * from "../root";
+export * from "./hooks";
+//# sourceMappingURL=index.d.ts.map

package/dist/react/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/react/index.iife.js

@@ -0,0 +1,2 @@
+(function(l,g){"use strict";let M=15,w=[".message-row",".reply"],C=null;function R(e){C=e}function k(e){const t=C;if(!t)return;const o=w.join(", ");for(;;){const c=t.querySelectorAll(o),r=c.length;if(M<=0||r<=M)break;const s=c[0];if(!s)break;e==null||e(s),s.remove()}}function T(e,t){const o=C;if(!o)return;const c=w.map(s=>`${s}[data-msgid="${e}"]`).join(", ");o.querySelectorAll(c).forEach(s=>{t==null||t(e,s),s.remove()})}function _(e,t){const o=C;if(!o)return;const c=w.map(s=>`${s}[data-userid="${e}"]`).join(", ");o.querySelectorAll(c).forEach(s=>{t==null||t(e,s),s.remove()})}function A(e=[".message-row",".reply"],t){M=t??15,w=e}function $(e){return e.replace(/\s/g," ").replace(/[<>"^]/g,t=>"&#"+t.charCodeAt(0)+";")}function j(e,t){const o=e.querySelectorAll("img"),c=o.length;if(c===0){t(e);return}let r=0;function s(){r++,r===c&&t(e)}o.forEach(n=>{n.complete?s():(n.addEventListener("load",s),n.addEventListener("error",s))})}const O=e=>e.replace(/([A-Z])/g,"-$1").toLowerCase();function U(e){return e.toLowerCase().replace(/^vite_/,"").replace(/_([a-z])/g,(t,o)=>o.toUpperCase()).replace(/^[a-z]/,t=>t.toLowerCase())}function W(e){return"--"+e.toLowerCase().replace(/^vite_/,"").replace(/_/g,"-")}const z=({ignoredUsers:e=[],ignoreCommands:t=!0})=>{const o=e.map(n=>n.toLowerCase()),c=n=>o.includes(n.toLowerCase()),r=n=>t&&n.trim().startsWith("!");return{shouldIgnore:(n,f)=>c(n)||r(f)}};function I(e,t={}){const{messageLimit:o,limitSelectors:c,onRemove:r}=t,s=g.useRef(r);return s.current=r,g.useEffect(()=>{const n=e.current;return R(n),()=>R(null)},[e]),g.useEffect(()=>{A(c,o)},[o,c]),()=>{k(n=>{var f;return(f=s.current)==null?void 0:f.call(s,n)})}}function K(e,t){const{getRowId:o,rowIdAttribute:c="data-row-id",preparingRef:r,onPreparedEnter:s,...n}=t,[f,L]=g.useState([]),[N,P]=g.useState([]),b=g.useRef(s);b.current=s;const S=g.useRef(new Map),m=I(e,{...n,onRemove:a=>{const u=a.getAttribute(c);if(u!=null){const d=Number(u);L(i=>i.filter(h=>o(h)!==d))}}}),E=g.useCallback(a=>{P(u=>{const d=u.find(i=>o(i)===a);return d==null?u:(L(i=>i.some(h=>o(h)===a)?i:[...i,d]),queueMicrotask(m),u.filter(i=>o(i)!==a))})},[o,m]),Z=g.useCallback((a,u)=>{const d=S.current,i=d.get(a);if(i&&(i.disconnect(),d.delete(a)),u==null||!(r!=null&&r.current))return;const h=r.current,y=new IntersectionObserver(D=>{var q;const p=D[0];if(!(p!=null&&p.isIntersecting))return;const v=a;y.disconnect(),d.delete(v),(q=b.current)==null||q.call(b,v,p.target),E(v)},{root:h,threshold:0,rootMargin:"0px"});y.observe(u),d.set(a,y)},[r,E]);g.useEffect(()=>()=>{S.current.forEach(a=>a.disconnect()),S.current.clear()},[]);const B=g.useCallback(a=>{r?P(u=>[...u,a]):(L(u=>[...u,a]),m())},[r,m]);return{rows:f,preparedRows:r?N:[],setRows:L,addRow:B,moveRow:E,registerPreparedRow:r?Z:()=>{},applyLimit:m}}l.deleteMessage=T,l.deleteMessages=_,l.handleMessageLimit=k,l.htmlEncode=$,l.plugMessagesLimit=A,l.preloadImagesThenShow=j,l.setMessageLimitRoot=R,l.toCamelCase=U,l.toCssCustomProperty=W,l.toKebabCase=O,l.useIgnoreMessage=z,l.useMessageLimit=I,l.useMessageRows=K,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})})(this.WmakeTtsReact=this.WmakeTtsReact||{},React);
+//# sourceMappingURL=index.iife.js.map

package/dist/react/index.iife.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.iife.js","sources":["../../src/root/message-limit.ts","../../src/root/html-encode.ts","../../src/root/preload-images.ts","../../src/root/string-utils.ts","../../src/react/hooks/use-ignore-message.ts","../../src/react/hooks/use-message-limit.ts","../../src/react/hooks/use-message-rows.ts"],"sourcesContent":["let messagesLimit = 15;\r\nlet limitSelectors: string[] = [\".message-row\", \".reply\"];\r\n\r\nlet rootRef: Element | null = null;\r\n\r\n/**\r\n * Set the container element for message limit and delete operations.\r\n * Pass the DOM element that wraps all message rows (e.g. document.querySelector(\"#main\")).\r\n */\r\nexport function setMessageLimitRoot(root: Element | null): void {\r\n  rootRef = root;\r\n}\r\n\r\n/**\r\n * Enforces message limit by recalculating current count each time and removing\r\n * excess messages in a loop until totalMessages <= messagesLimit.\r\n */\r\nexport function handleMessageLimit(\r\n  onRemoveMixin?: (element: Element) => void,\r\n): void {\r\n  const root = rootRef;\r\n  if (!root) return;\r\n\r\n  const selector = limitSelectors.join(\", \");\r\n\r\n  for (;;) {\r\n    const children = root.querySelectorAll(selector);\r\n    const totalMessages = children.length;\r\n\r\n    if (messagesLimit <= 0 || totalMessages <= messagesLimit) {\r\n      break;\r\n    }\r\n\r\n    const first = children[0];\r\n    if (!first) break;\r\n    onRemoveMixin?.(first);\r\n    first.remove();\r\n  }\r\n}\r\n\r\nexport function deleteMessage(\r\n  msgId: string,\r\n  mixin?: (msgId: string, element: Element) => void,\r\n): void {\r\n  const root = rootRef;\r\n  if (!root) return;\r\n  const selectors = limitSelectors\r\n    .map((s) => `${s}[data-msgid=\"${msgId}\"]`)\r\n    .join(\", \");\r\n  const elements = root.querySelectorAll(selectors);\r\n  elements.forEach((el) => {\r\n    mixin?.(msgId, el);\r\n    el.remove();\r\n  });\r\n}\r\n\r\nexport function deleteMessages(\r\n  userId: string,\r\n  mixin?: (userId: string, element: Element) => void,\r\n): void {\r\n  const root = rootRef;\r\n  if (!root) return;\r\n  const selectors = limitSelectors\r\n    .map((s) => `${s}[data-userid=\"${userId}\"]`)\r\n    .join(\", \");\r\n  const elements = root.querySelectorAll(selectors);\r\n  elements.forEach((el) => {\r\n    mixin?.(userId, el);\r\n    el.remove();\r\n  });\r\n}\r\n\r\nexport function plugMessagesLimit(\r\n  _limitSelectors: string[] = [\".message-row\", \".reply\"],\r\n  _messagesLimit?: number,\r\n): void {\r\n  messagesLimit = _messagesLimit ?? 15;\r\n  limitSelectors = _limitSelectors;\r\n}\r\n","/**\r\n * Экранирование строки для безопасной вставки в HTML:\r\n * нормализация пробелов и замена < > \" ^ на сущности.\r\n */\r\nexport function htmlEncode(html: string): string {\r\n  return html\r\n    .replace(/\\s/g, \" \")\r\n    .replace(/[<>\"^]/g, (match) => \"&#\" + match.charCodeAt(0) + \";\");\r\n}\r\n","/**\r\n * Ожидает загрузки всех <img> внутри контейнера, затем вызывает callback.\r\n * Если изображений нет — callback вызывается сразу.\r\n */\r\nexport function preloadImagesThenShow<T extends Element>(\r\n  element: T,\r\n  showFunction: (element: T) => void,\r\n): void {\r\n  const images = element.querySelectorAll<HTMLImageElement>(\"img\");\r\n  const totalImages = images.length;\r\n\r\n  if (totalImages === 0) {\r\n    showFunction(element);\r\n    return;\r\n  }\r\n\r\n  let loadedImages = 0;\r\n\r\n  function imageLoaded() {\r\n    loadedImages++;\r\n    if (loadedImages === totalImages) {\r\n      showFunction(element);\r\n    }\r\n  }\r\n\r\n  images.forEach((img) => {\r\n    if (img.complete) {\r\n      imageLoaded();\r\n    } else {\r\n      img.addEventListener(\"load\", imageLoaded);\r\n      img.addEventListener(\"error\", imageLoaded);\r\n    }\r\n  });\r\n}\r\n","export const toKebabCase = (str: string) =>\r\n  str.replace(/([A-Z])/g, '-$1').toLowerCase();\r\n\r\nexport function toCamelCase(str: string): string {\r\n  return str\r\n    .toLowerCase()\r\n    .replace(/^vite_/, \"\")\r\n    .replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())\r\n    .replace(/^[a-z]/, (match) => match.toLowerCase());\r\n}\r\n\r\nexport function toCssCustomProperty(str: string): string {\r\n  return (\r\n    \"--\" +\r\n    str\r\n      .toLowerCase()\r\n      .replace(/^vite_/, \"\")\r\n      .replace(/_/g, \"-\")\r\n  );\r\n}\r\n","interface Props {\r\n  ignoredUsers?: string[];\r\n  ignoreCommands?: boolean;\r\n}\r\n\r\nexport const useIgnoreMessage = ({\r\n  ignoredUsers = [],\r\n  ignoreCommands = true,\r\n}: Props) => {\r\n  const ignoredUsersLower = ignoredUsers.map((user) => user.toLowerCase());\r\n\r\n  const shouldIgnoreUser = (username: string) => {\r\n    return ignoredUsersLower.includes(username.toLowerCase());\r\n  };\r\n\r\n  const shouldIgnoreMessage = (text: string) => {\r\n    return ignoreCommands && text.trim().startsWith(\"!\");\r\n  };\r\n\r\n  const shouldIgnore = (username: string, text: string) => {\r\n    return shouldIgnoreUser(username) || shouldIgnoreMessage(text);\r\n  };\r\n\r\n  return { shouldIgnore };\r\n};\r\n","import { useEffect, useRef } from \"react\";\r\nimport type { RefObject } from \"react\";\r\nimport {\r\n  setMessageLimitRoot,\r\n  handleMessageLimit as handleMessageLimitRoot,\r\n  plugMessagesLimit,\r\n} from \"@/root\";\r\n\r\nexport interface UseMessageLimitOptions {\r\n  messageLimit?: number;\r\n  /** Селекторы строк для лимита (по умолчанию [\".message-row\", \".reply\"]) */\r\n  limitSelectors?: string[];\r\n  /** Вызов при удалении элемента из DOM (для синхронизации state в React) */\r\n  onRemove?: (element: Element) => void;\r\n}\r\n\r\n/**\r\n * Подключает message limit к корневому элементу и опциям из widget load.\r\n * Возвращает handleMessageLimit — вызывать после добавления новой строки.\r\n */\r\nexport function useMessageLimit(\r\n  rootRef: RefObject<Element | null>,\r\n  options: UseMessageLimitOptions = {},\r\n): () => void {\r\n  const { messageLimit, limitSelectors, onRemove } = options;\r\n  const onRemoveRef = useRef(onRemove);\r\n  onRemoveRef.current = onRemove;\r\n\r\n  useEffect(() => {\r\n    const root = rootRef.current;\r\n    setMessageLimitRoot(root);\r\n    return () => setMessageLimitRoot(null);\r\n  }, [rootRef]);\r\n\r\n  useEffect(() => {\r\n    plugMessagesLimit(limitSelectors, messageLimit);\r\n  }, [messageLimit, limitSelectors]);\r\n\r\n  return () => {\r\n    handleMessageLimitRoot((el) => onRemoveRef.current?.(el));\r\n  };\r\n}\r\n","import { useCallback, useEffect, useRef, useState } from \"react\";\r\nimport type { Dispatch, RefObject, SetStateAction } from \"react\";\r\nimport { useMessageLimit } from \"./use-message-limit\";\r\nimport type { UseMessageLimitOptions } from \"./use-message-limit\";\r\n\r\nexport interface UseMessageRowsOptions<T> extends Omit<\r\n  UseMessageLimitOptions,\r\n  \"onRemove\"\r\n> {\r\n  /**\r\n   * Функция получения id строки (для синхронизации state при удалении из DOM по data-row-id).\r\n   */\r\n  getRowId: (row: T) => number;\r\n  /** Имя атрибута с id на DOM-элементе строки (по умолчанию \"data-row-id\"). */\r\n  rowIdAttribute?: string;\r\n  /**\r\n   * Ref контейнера «подготовки»: при наличии addRow сначала добавляет в preparedRows;\r\n   * при пересечении строки с этим контейнером вызывается onPreparedEnter, затем строка переносится в rows.\r\n   */\r\n  preparingRef?: RefObject<Element | null>;\r\n  /**\r\n   * Вызывается, когда строка из preparedRows попадает в зону preparingRef (например, для processZeroWidthEmotes).\r\n   * После вызова строка переносится в основной список (main rows).\r\n   */\r\n  onPreparedEnter?: (rowId: number, element: Element) => void;\r\n}\r\n\r\nexport interface UseMessageRowsReturn<T> {\r\n  /** Текущий список строк (основной список, рендер в main). */\r\n  rows: T[];\r\n  /** Строки в зоне подготовки (рендер внутри элемента с preparingRef). При отсутствии preparingRef — пустой массив. */\r\n  preparedRows: T[];\r\n  /** Установить список строк (полная замена). */\r\n  setRows: Dispatch<SetStateAction<T[]>>;\r\n  /** Добавить строку: при наличии preparingRef — в preparedRows, иначе в rows с применением лимита. */\r\n  addRow: (row: T) => void;\r\n  /** Перенести строку из preparedRows в rows по id. Вызывается автоматически после onPreparedEnter при использовании preparingRef. */\r\n  moveRow: (rowId: number) => void;\r\n  /**\r\n   * Зарегистрировать DOM-элемент подготовленной строки для наблюдения (вызывать при монтировании/размонтировании строки).\r\n   * Когда элемент попадает в зону preparingRef, вызывается onPreparedEnter и затем moveRow(rowId).\r\n   */\r\n  registerPreparedRow: (rowId: number, element: Element | null) => void;\r\n  /** Применить лимит сообщений (удалить лишние строки из DOM и state). */\r\n  applyLimit: () => void;\r\n}\r\n\r\n/**\r\n * Хук для управления списком строк с учётом message limit:\r\n * хранит rows в state, при applyLimit удаляет лишние из DOM и синхронизирует state по data-row-id.\r\n * При передаче preparingRef новые строки сначала попадают в preparedRows; при пересечении с контейнером\r\n * вызывается onPreparedEnter и строка переносится в rows.\r\n */\r\nexport function useMessageRows<T>(\r\n  rootRef: RefObject<Element | null>,\r\n  options: UseMessageRowsOptions<T>,\r\n): UseMessageRowsReturn<T> {\r\n  const {\r\n    getRowId,\r\n    rowIdAttribute = \"data-row-id\",\r\n    preparingRef,\r\n    onPreparedEnter,\r\n    ...limitOptions\r\n  } = options;\r\n  const [rows, setRows] = useState<T[]>([]);\r\n  const [preparedRows, setPreparedRows] = useState<T[]>([]);\r\n  const onPreparedEnterRef = useRef(onPreparedEnter);\r\n  onPreparedEnterRef.current = onPreparedEnter;\r\n  const observersRef = useRef<Map<number, IntersectionObserver>>(new Map());\r\n\r\n  const applyLimit = useMessageLimit(rootRef, {\r\n    ...limitOptions,\r\n    onRemove: (el: Element) => {\r\n      const idStr = el.getAttribute(rowIdAttribute);\r\n      if (idStr != null) {\r\n        const id = Number(idStr);\r\n        setRows((prev) => prev.filter((r) => getRowId(r) !== id));\r\n      }\r\n    },\r\n  });\r\n\r\n  const moveRow = useCallback(\r\n    (rowId: number) => {\r\n      setPreparedRows((prev) => {\r\n        const row = prev.find((r) => getRowId(r) === rowId);\r\n        if (row == null) return prev;\r\n        setRows((r) =>\r\n          r.some((x) => getRowId(x) === rowId) ? r : [...r, row],\r\n        );\r\n        queueMicrotask(applyLimit);\r\n        return prev.filter((r) => getRowId(r) !== rowId);\r\n      });\r\n    },\r\n    [getRowId, applyLimit],\r\n  );\r\n\r\n  const registerPreparedRow = useCallback(\r\n    (rowId: number, element: Element | null) => {\r\n      const observers = observersRef.current;\r\n      const existing = observers.get(rowId);\r\n      if (existing) {\r\n        existing.disconnect();\r\n        observers.delete(rowId);\r\n      }\r\n      if (element == null || !preparingRef?.current) return;\r\n\r\n      const root = preparingRef.current;\r\n      const observer = new IntersectionObserver(\r\n        (entries) => {\r\n          const entry = entries[0];\r\n          if (!entry?.isIntersecting) return;\r\n          const id = rowId;\r\n          observer.disconnect();\r\n          observers.delete(id);\r\n          onPreparedEnterRef.current?.(id, entry.target);\r\n          moveRow(id);\r\n        },\r\n        { root, threshold: 0, rootMargin: \"0px\" },\r\n      );\r\n      observer.observe(element);\r\n      observers.set(rowId, observer);\r\n    },\r\n    [preparingRef, moveRow],\r\n  );\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      observersRef.current.forEach((o) => o.disconnect());\r\n      observersRef.current.clear();\r\n    };\r\n  }, []);\r\n\r\n  const addRow = useCallback(\r\n    (row: T) => {\r\n      if (preparingRef) {\r\n        setPreparedRows((prev) => [...prev, row]);\r\n      } else {\r\n        setRows((prev) => [...prev, row]);\r\n        applyLimit();\r\n      }\r\n    },\r\n    [preparingRef, applyLimit],\r\n  );\r\n\r\n  return {\r\n    rows,\r\n    preparedRows: preparingRef ? preparedRows : [],\r\n    setRows,\r\n    addRow,\r\n    moveRow,\r\n    registerPreparedRow: preparingRef ? registerPreparedRow : () => {},\r\n    applyLimit,\r\n  };\r\n}\r\n"],"names":["messagesLimit","limitSelectors","rootRef","setMessageLimitRoot","root","handleMessageLimit","onRemoveMixin","selector","children","totalMessages","first","deleteMessage","msgId","mixin","selectors","el","deleteMessages","userId","plugMessagesLimit","_limitSelectors","_messagesLimit","htmlEncode","html","match","preloadImagesThenShow","element","showFunction","images","totalImages","loadedImages","imageLoaded","img","toKebabCase","str","toCamelCase","_","letter","toCssCustomProperty","useIgnoreMessage","ignoredUsers","ignoreCommands","ignoredUsersLower","user","shouldIgnoreUser","username","shouldIgnoreMessage","text","useMessageLimit","options","messageLimit","onRemove","onRemoveRef","useRef","useEffect","handleMessageLimitRoot","_a","useMessageRows","getRowId","rowIdAttribute","preparingRef","onPreparedEnter","limitOptions","rows","setRows","useState","preparedRows","setPreparedRows","onPreparedEnterRef","observersRef","applyLimit","idStr","id","prev","r","moveRow","useCallback","rowId","row","x","registerPreparedRow","observers","existing","observer","entries","entry","o","addRow"],"mappings":"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"}

package/dist/react/index.js

@@ -0,0 +1,106 @@
+import { setMessageLimitRoot as P, plugMessagesLimit as U, handleMessageLimit as q } from "../root/index.js";
+import { deleteMessage as B, deleteMessages as D, htmlEncode as F, preloadImagesThenShow as G, toCamelCase as H, toCssCustomProperty as J, toKebabCase as Q } from "../root/index.js";
+import { useRef as C, useEffect as v, useState as S, useCallback as L } from "react";
+const T = ({
+  ignoredUsers: u = [],
+  ignoreCommands: d = !0
+}) => {
+  const n = u.map((s) => s.toLowerCase()), a = (s) => n.includes(s.toLowerCase()), t = (s) => d && s.trim().startsWith("!");
+  return { shouldIgnore: (s, l) => a(s) || t(l) };
+};
+function y(u, d = {}) {
+  const { messageLimit: n, limitSelectors: a, onRemove: t } = d, i = C(t);
+  return i.current = t, v(() => {
+    const s = u.current;
+    return P(s), () => P(null);
+  }, [u]), v(() => {
+    U(a, n);
+  }, [n, a]), () => {
+    q((s) => {
+      var l;
+      return (l = i.current) == null ? void 0 : l.call(i, s);
+    });
+  };
+}
+function W(u, d) {
+  const {
+    getRowId: n,
+    rowIdAttribute: a = "data-row-id",
+    preparingRef: t,
+    onPreparedEnter: i,
+    ...s
+  } = d, [l, p] = S([]), [E, I] = S([]), f = C(i);
+  f.current = i;
+  const h = C(/* @__PURE__ */ new Map()), g = y(u, {
+    ...s,
+    onRemove: (e) => {
+      const r = e.getAttribute(a);
+      if (r != null) {
+        const c = Number(r);
+        p((o) => o.filter((m) => n(m) !== c));
+      }
+    }
+  }), M = L(
+    (e) => {
+      I((r) => {
+        const c = r.find((o) => n(o) === e);
+        return c == null ? r : (p(
+          (o) => o.some((m) => n(m) === e) ? o : [...o, c]
+        ), queueMicrotask(g), r.filter((o) => n(o) !== e));
+      });
+    },
+    [n, g]
+  ), k = L(
+    (e, r) => {
+      const c = h.current, o = c.get(e);
+      if (o && (o.disconnect(), c.delete(e)), r == null || !(t != null && t.current)) return;
+      const m = t.current, b = new IntersectionObserver(
+        (O) => {
+          var x;
+          const w = O[0];
+          if (!(w != null && w.isIntersecting)) return;
+          const R = e;
+          b.disconnect(), c.delete(R), (x = f.current) == null || x.call(f, R, w.target), M(R);
+        },
+        { root: m, threshold: 0, rootMargin: "0px" }
+      );
+      b.observe(r), c.set(e, b);
+    },
+    [t, M]
+  );
+  v(() => () => {
+    h.current.forEach((e) => e.disconnect()), h.current.clear();
+  }, []);
+  const A = L(
+    (e) => {
+      t ? I((r) => [...r, e]) : (p((r) => [...r, e]), g());
+    },
+    [t, g]
+  );
+  return {
+    rows: l,
+    preparedRows: t ? E : [],
+    setRows: p,
+    addRow: A,
+    moveRow: M,
+    registerPreparedRow: t ? k : () => {
+    },
+    applyLimit: g
+  };
+}
+export {
+  B as deleteMessage,
+  D as deleteMessages,
+  q as handleMessageLimit,
+  F as htmlEncode,
+  U as plugMessagesLimit,
+  G as preloadImagesThenShow,
+  P as setMessageLimitRoot,
+  H as toCamelCase,
+  J as toCssCustomProperty,
+  Q as toKebabCase,
+  T as useIgnoreMessage,
+  y as useMessageLimit,
+  W as useMessageRows
+};
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/react/hooks/use-ignore-message.ts","../../src/react/hooks/use-message-limit.ts","../../src/react/hooks/use-message-rows.ts"],"sourcesContent":["interface Props {\r\n  ignoredUsers?: string[];\r\n  ignoreCommands?: boolean;\r\n}\r\n\r\nexport const useIgnoreMessage = ({\r\n  ignoredUsers = [],\r\n  ignoreCommands = true,\r\n}: Props) => {\r\n  const ignoredUsersLower = ignoredUsers.map((user) => user.toLowerCase());\r\n\r\n  const shouldIgnoreUser = (username: string) => {\r\n    return ignoredUsersLower.includes(username.toLowerCase());\r\n  };\r\n\r\n  const shouldIgnoreMessage = (text: string) => {\r\n    return ignoreCommands && text.trim().startsWith(\"!\");\r\n  };\r\n\r\n  const shouldIgnore = (username: string, text: string) => {\r\n    return shouldIgnoreUser(username) || shouldIgnoreMessage(text);\r\n  };\r\n\r\n  return { shouldIgnore };\r\n};\r\n","import { useEffect, useRef } from \"react\";\r\nimport type { RefObject } from \"react\";\r\nimport {\r\n  setMessageLimitRoot,\r\n  handleMessageLimit as handleMessageLimitRoot,\r\n  plugMessagesLimit,\r\n} from \"@/root\";\r\n\r\nexport interface UseMessageLimitOptions {\r\n  messageLimit?: number;\r\n  /** Селекторы строк для лимита (по умолчанию [\".message-row\", \".reply\"]) */\r\n  limitSelectors?: string[];\r\n  /** Вызов при удалении элемента из DOM (для синхронизации state в React) */\r\n  onRemove?: (element: Element) => void;\r\n}\r\n\r\n/**\r\n * Подключает message limit к корневому элементу и опциям из widget load.\r\n * Возвращает handleMessageLimit — вызывать после добавления новой строки.\r\n */\r\nexport function useMessageLimit(\r\n  rootRef: RefObject<Element | null>,\r\n  options: UseMessageLimitOptions = {},\r\n): () => void {\r\n  const { messageLimit, limitSelectors, onRemove } = options;\r\n  const onRemoveRef = useRef(onRemove);\r\n  onRemoveRef.current = onRemove;\r\n\r\n  useEffect(() => {\r\n    const root = rootRef.current;\r\n    setMessageLimitRoot(root);\r\n    return () => setMessageLimitRoot(null);\r\n  }, [rootRef]);\r\n\r\n  useEffect(() => {\r\n    plugMessagesLimit(limitSelectors, messageLimit);\r\n  }, [messageLimit, limitSelectors]);\r\n\r\n  return () => {\r\n    handleMessageLimitRoot((el) => onRemoveRef.current?.(el));\r\n  };\r\n}\r\n","import { useCallback, useEffect, useRef, useState } from \"react\";\r\nimport type { Dispatch, RefObject, SetStateAction } from \"react\";\r\nimport { useMessageLimit } from \"./use-message-limit\";\r\nimport type { UseMessageLimitOptions } from \"./use-message-limit\";\r\n\r\nexport interface UseMessageRowsOptions<T> extends Omit<\r\n  UseMessageLimitOptions,\r\n  \"onRemove\"\r\n> {\r\n  /**\r\n   * Функция получения id строки (для синхронизации state при удалении из DOM по data-row-id).\r\n   */\r\n  getRowId: (row: T) => number;\r\n  /** Имя атрибута с id на DOM-элементе строки (по умолчанию \"data-row-id\"). */\r\n  rowIdAttribute?: string;\r\n  /**\r\n   * Ref контейнера «подготовки»: при наличии addRow сначала добавляет в preparedRows;\r\n   * при пересечении строки с этим контейнером вызывается onPreparedEnter, затем строка переносится в rows.\r\n   */\r\n  preparingRef?: RefObject<Element | null>;\r\n  /**\r\n   * Вызывается, когда строка из preparedRows попадает в зону preparingRef (например, для processZeroWidthEmotes).\r\n   * После вызова строка переносится в основной список (main rows).\r\n   */\r\n  onPreparedEnter?: (rowId: number, element: Element) => void;\r\n}\r\n\r\nexport interface UseMessageRowsReturn<T> {\r\n  /** Текущий список строк (основной список, рендер в main). */\r\n  rows: T[];\r\n  /** Строки в зоне подготовки (рендер внутри элемента с preparingRef). При отсутствии preparingRef — пустой массив. */\r\n  preparedRows: T[];\r\n  /** Установить список строк (полная замена). */\r\n  setRows: Dispatch<SetStateAction<T[]>>;\r\n  /** Добавить строку: при наличии preparingRef — в preparedRows, иначе в rows с применением лимита. */\r\n  addRow: (row: T) => void;\r\n  /** Перенести строку из preparedRows в rows по id. Вызывается автоматически после onPreparedEnter при использовании preparingRef. */\r\n  moveRow: (rowId: number) => void;\r\n  /**\r\n   * Зарегистрировать DOM-элемент подготовленной строки для наблюдения (вызывать при монтировании/размонтировании строки).\r\n   * Когда элемент попадает в зону preparingRef, вызывается onPreparedEnter и затем moveRow(rowId).\r\n   */\r\n  registerPreparedRow: (rowId: number, element: Element | null) => void;\r\n  /** Применить лимит сообщений (удалить лишние строки из DOM и state). */\r\n  applyLimit: () => void;\r\n}\r\n\r\n/**\r\n * Хук для управления списком строк с учётом message limit:\r\n * хранит rows в state, при applyLimit удаляет лишние из DOM и синхронизирует state по data-row-id.\r\n * При передаче preparingRef новые строки сначала попадают в preparedRows; при пересечении с контейнером\r\n * вызывается onPreparedEnter и строка переносится в rows.\r\n */\r\nexport function useMessageRows<T>(\r\n  rootRef: RefObject<Element | null>,\r\n  options: UseMessageRowsOptions<T>,\r\n): UseMessageRowsReturn<T> {\r\n  const {\r\n    getRowId,\r\n    rowIdAttribute = \"data-row-id\",\r\n    preparingRef,\r\n    onPreparedEnter,\r\n    ...limitOptions\r\n  } = options;\r\n  const [rows, setRows] = useState<T[]>([]);\r\n  const [preparedRows, setPreparedRows] = useState<T[]>([]);\r\n  const onPreparedEnterRef = useRef(onPreparedEnter);\r\n  onPreparedEnterRef.current = onPreparedEnter;\r\n  const observersRef = useRef<Map<number, IntersectionObserver>>(new Map());\r\n\r\n  const applyLimit = useMessageLimit(rootRef, {\r\n    ...limitOptions,\r\n    onRemove: (el: Element) => {\r\n      const idStr = el.getAttribute(rowIdAttribute);\r\n      if (idStr != null) {\r\n        const id = Number(idStr);\r\n        setRows((prev) => prev.filter((r) => getRowId(r) !== id));\r\n      }\r\n    },\r\n  });\r\n\r\n  const moveRow = useCallback(\r\n    (rowId: number) => {\r\n      setPreparedRows((prev) => {\r\n        const row = prev.find((r) => getRowId(r) === rowId);\r\n        if (row == null) return prev;\r\n        setRows((r) =>\r\n          r.some((x) => getRowId(x) === rowId) ? r : [...r, row],\r\n        );\r\n        queueMicrotask(applyLimit);\r\n        return prev.filter((r) => getRowId(r) !== rowId);\r\n      });\r\n    },\r\n    [getRowId, applyLimit],\r\n  );\r\n\r\n  const registerPreparedRow = useCallback(\r\n    (rowId: number, element: Element | null) => {\r\n      const observers = observersRef.current;\r\n      const existing = observers.get(rowId);\r\n      if (existing) {\r\n        existing.disconnect();\r\n        observers.delete(rowId);\r\n      }\r\n      if (element == null || !preparingRef?.current) return;\r\n\r\n      const root = preparingRef.current;\r\n      const observer = new IntersectionObserver(\r\n        (entries) => {\r\n          const entry = entries[0];\r\n          if (!entry?.isIntersecting) return;\r\n          const id = rowId;\r\n          observer.disconnect();\r\n          observers.delete(id);\r\n          onPreparedEnterRef.current?.(id, entry.target);\r\n          moveRow(id);\r\n        },\r\n        { root, threshold: 0, rootMargin: \"0px\" },\r\n      );\r\n      observer.observe(element);\r\n      observers.set(rowId, observer);\r\n    },\r\n    [preparingRef, moveRow],\r\n  );\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      observersRef.current.forEach((o) => o.disconnect());\r\n      observersRef.current.clear();\r\n    };\r\n  }, []);\r\n\r\n  const addRow = useCallback(\r\n    (row: T) => {\r\n      if (preparingRef) {\r\n        setPreparedRows((prev) => [...prev, row]);\r\n      } else {\r\n        setRows((prev) => [...prev, row]);\r\n        applyLimit();\r\n      }\r\n    },\r\n    [preparingRef, applyLimit],\r\n  );\r\n\r\n  return {\r\n    rows,\r\n    preparedRows: preparingRef ? preparedRows : [],\r\n    setRows,\r\n    addRow,\r\n    moveRow,\r\n    registerPreparedRow: preparingRef ? registerPreparedRow : () => {},\r\n    applyLimit,\r\n  };\r\n}\r\n"],"names":["useIgnoreMessage","ignoredUsers","ignoreCommands","ignoredUsersLower","user","shouldIgnoreUser","username","shouldIgnoreMessage","text","useMessageLimit","rootRef","options","messageLimit","limitSelectors","onRemove","onRemoveRef","useRef","useEffect","root","setMessageLimitRoot","plugMessagesLimit","handleMessageLimitRoot","el","_a","useMessageRows","getRowId","rowIdAttribute","preparingRef","onPreparedEnter","limitOptions","rows","setRows","useState","preparedRows","setPreparedRows","onPreparedEnterRef","observersRef","applyLimit","idStr","id","prev","r","moveRow","useCallback","rowId","row","x","registerPreparedRow","element","observers","existing","observer","entries","entry","o","addRow"],"mappings":"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"}

package/dist/root/html-encode.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Экранирование строки для безопасной вставки в HTML:
+ * нормализация пробелов и замена < > " ^ на сущности.
+ */
+export declare function htmlEncode(html: string): string;
+//# sourceMappingURL=html-encode.d.ts.map

package/dist/root/html-encode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html-encode.d.ts","sourceRoot":"","sources":["../../src/root/html-encode.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAI/C"}

package/dist/root/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./message-limit";
+export * from "./html-encode";
+export * from "./preload-images";
+export * from "./string-utils";
+//# sourceMappingURL=index.d.ts.map

package/dist/root/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/root/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}

package/dist/root/index.iife.js

@@ -0,0 +1,2 @@
+(function(a){"use strict";let g=15,c=[".message-row",".reply"],n=null;function i(e){n=e}function f(e){const t=n;if(!t)return;const o=c.join(", ");for(;;){const r=t.querySelectorAll(o),l=r.length;if(g<=0||l<=g)break;const s=r[0];if(!s)break;e==null||e(s),s.remove()}}function d(e,t){const o=n;if(!o)return;const r=c.map(s=>`${s}[data-msgid="${e}"]`).join(", ");o.querySelectorAll(r).forEach(s=>{t==null||t(e,s),s.remove()})}function m(e,t){const o=n;if(!o)return;const r=c.map(s=>`${s}[data-userid="${e}"]`).join(", ");o.querySelectorAll(r).forEach(s=>{t==null||t(e,s),s.remove()})}function h(e=[".message-row",".reply"],t){g=t??15,c=e}function C(e){return e.replace(/\s/g," ").replace(/[<>"^]/g,t=>"&#"+t.charCodeAt(0)+";")}function L(e,t){const o=e.querySelectorAll("img"),r=o.length;if(r===0){t(e);return}let l=0;function s(){l++,l===r&&t(e)}o.forEach(u=>{u.complete?s():(u.addEventListener("load",s),u.addEventListener("error",s))})}const p=e=>e.replace(/([A-Z])/g,"-$1").toLowerCase();function y(e){return e.toLowerCase().replace(/^vite_/,"").replace(/_([a-z])/g,(t,o)=>o.toUpperCase()).replace(/^[a-z]/,t=>t.toLowerCase())}function S(e){return"--"+e.toLowerCase().replace(/^vite_/,"").replace(/_/g,"-")}a.deleteMessage=d,a.deleteMessages=m,a.handleMessageLimit=f,a.htmlEncode=C,a.plugMessagesLimit=h,a.preloadImagesThenShow=L,a.setMessageLimitRoot=i,a.toCamelCase=y,a.toCssCustomProperty=S,a.toKebabCase=p,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})})(this.WmakeTts=this.WmakeTts||{});
+//# sourceMappingURL=index.iife.js.map

package/dist/root/index.iife.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.iife.js","sources":["../../src/root/message-limit.ts","../../src/root/html-encode.ts","../../src/root/preload-images.ts","../../src/root/string-utils.ts"],"sourcesContent":["let messagesLimit = 15;\r\nlet limitSelectors: string[] = [\".message-row\", \".reply\"];\r\n\r\nlet rootRef: Element | null = null;\r\n\r\n/**\r\n * Set the container element for message limit and delete operations.\r\n * Pass the DOM element that wraps all message rows (e.g. document.querySelector(\"#main\")).\r\n */\r\nexport function setMessageLimitRoot(root: Element | null): void {\r\n  rootRef = root;\r\n}\r\n\r\n/**\r\n * Enforces message limit by recalculating current count each time and removing\r\n * excess messages in a loop until totalMessages <= messagesLimit.\r\n */\r\nexport function handleMessageLimit(\r\n  onRemoveMixin?: (element: Element) => void,\r\n): void {\r\n  const root = rootRef;\r\n  if (!root) return;\r\n\r\n  const selector = limitSelectors.join(\", \");\r\n\r\n  for (;;) {\r\n    const children = root.querySelectorAll(selector);\r\n    const totalMessages = children.length;\r\n\r\n    if (messagesLimit <= 0 || totalMessages <= messagesLimit) {\r\n      break;\r\n    }\r\n\r\n    const first = children[0];\r\n    if (!first) break;\r\n    onRemoveMixin?.(first);\r\n    first.remove();\r\n  }\r\n}\r\n\r\nexport function deleteMessage(\r\n  msgId: string,\r\n  mixin?: (msgId: string, element: Element) => void,\r\n): void {\r\n  const root = rootRef;\r\n  if (!root) return;\r\n  const selectors = limitSelectors\r\n    .map((s) => `${s}[data-msgid=\"${msgId}\"]`)\r\n    .join(\", \");\r\n  const elements = root.querySelectorAll(selectors);\r\n  elements.forEach((el) => {\r\n    mixin?.(msgId, el);\r\n    el.remove();\r\n  });\r\n}\r\n\r\nexport function deleteMessages(\r\n  userId: string,\r\n  mixin?: (userId: string, element: Element) => void,\r\n): void {\r\n  const root = rootRef;\r\n  if (!root) return;\r\n  const selectors = limitSelectors\r\n    .map((s) => `${s}[data-userid=\"${userId}\"]`)\r\n    .join(\", \");\r\n  const elements = root.querySelectorAll(selectors);\r\n  elements.forEach((el) => {\r\n    mixin?.(userId, el);\r\n    el.remove();\r\n  });\r\n}\r\n\r\nexport function plugMessagesLimit(\r\n  _limitSelectors: string[] = [\".message-row\", \".reply\"],\r\n  _messagesLimit?: number,\r\n): void {\r\n  messagesLimit = _messagesLimit ?? 15;\r\n  limitSelectors = _limitSelectors;\r\n}\r\n","/**\r\n * Экранирование строки для безопасной вставки в HTML:\r\n * нормализация пробелов и замена < > \" ^ на сущности.\r\n */\r\nexport function htmlEncode(html: string): string {\r\n  return html\r\n    .replace(/\\s/g, \" \")\r\n    .replace(/[<>\"^]/g, (match) => \"&#\" + match.charCodeAt(0) + \";\");\r\n}\r\n","/**\r\n * Ожидает загрузки всех <img> внутри контейнера, затем вызывает callback.\r\n * Если изображений нет — callback вызывается сразу.\r\n */\r\nexport function preloadImagesThenShow<T extends Element>(\r\n  element: T,\r\n  showFunction: (element: T) => void,\r\n): void {\r\n  const images = element.querySelectorAll<HTMLImageElement>(\"img\");\r\n  const totalImages = images.length;\r\n\r\n  if (totalImages === 0) {\r\n    showFunction(element);\r\n    return;\r\n  }\r\n\r\n  let loadedImages = 0;\r\n\r\n  function imageLoaded() {\r\n    loadedImages++;\r\n    if (loadedImages === totalImages) {\r\n      showFunction(element);\r\n    }\r\n  }\r\n\r\n  images.forEach((img) => {\r\n    if (img.complete) {\r\n      imageLoaded();\r\n    } else {\r\n      img.addEventListener(\"load\", imageLoaded);\r\n      img.addEventListener(\"error\", imageLoaded);\r\n    }\r\n  });\r\n}\r\n","export const toKebabCase = (str: string) =>\r\n  str.replace(/([A-Z])/g, '-$1').toLowerCase();\r\n\r\nexport function toCamelCase(str: string): string {\r\n  return str\r\n    .toLowerCase()\r\n    .replace(/^vite_/, \"\")\r\n    .replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())\r\n    .replace(/^[a-z]/, (match) => match.toLowerCase());\r\n}\r\n\r\nexport function toCssCustomProperty(str: string): string {\r\n  return (\r\n    \"--\" +\r\n    str\r\n      .toLowerCase()\r\n      .replace(/^vite_/, \"\")\r\n      .replace(/_/g, \"-\")\r\n  );\r\n}\r\n"],"names":["messagesLimit","limitSelectors","rootRef","setMessageLimitRoot","root","handleMessageLimit","onRemoveMixin","selector","children","totalMessages","first","deleteMessage","msgId","mixin","selectors","el","deleteMessages","userId","plugMessagesLimit","_limitSelectors","_messagesLimit","htmlEncode","html","match","preloadImagesThenShow","element","showFunction","images","totalImages","loadedImages","imageLoaded","img","toKebabCase","str","toCamelCase","_","letter","toCssCustomProperty"],"mappings":"0BAAA,IAAIA,EAAgB,GAChBC,EAA2B,CAAC,eAAgB,QAAQ,EAEpDC,EAA0B,KAMvB,SAASC,EAAoBC,EAA4B,CAC9DF,EAAUE,CACZ,CAMO,SAASC,EACdC,EACM,CACN,MAAMF,EAAOF,EACb,GAAI,CAACE,EAAM,OAEX,MAAMG,EAAWN,EAAe,KAAK,IAAI,EAEzC,OAAS,CACP,MAAMO,EAAWJ,EAAK,iBAAiBG,CAAQ,EACzCE,EAAgBD,EAAS,OAE/B,GAAIR,GAAiB,GAAKS,GAAiBT,EACzC,MAGF,MAAMU,EAAQF,EAAS,CAAC,EACxB,GAAI,CAACE,EAAO,MACZJ,GAAA,MAAAA,EAAgBI,GAChBA,EAAM,OAAA,CACR,CACF,CAEO,SAASC,EACdC,EACAC,EACM,CACN,MAAMT,EAAOF,EACb,GAAI,CAACE,EAAM,OACX,MAAMU,EAAYb,EACf,IAAK,GAAM,GAAG,CAAC,gBAAgBW,CAAK,IAAI,EACxC,KAAK,IAAI,EACKR,EAAK,iBAAiBU,CAAS,EACvC,QAASC,GAAO,CACvBF,GAAA,MAAAA,EAAQD,EAAOG,GACfA,EAAG,OAAA,CACL,CAAC,CACH,CAEO,SAASC,EACdC,EACAJ,EACM,CACN,MAAMT,EAAOF,EACb,GAAI,CAACE,EAAM,OACX,MAAMU,EAAYb,EACf,IAAK,GAAM,GAAG,CAAC,iBAAiBgB,CAAM,IAAI,EAC1C,KAAK,IAAI,EACKb,EAAK,iBAAiBU,CAAS,EACvC,QAASC,GAAO,CACvBF,GAAA,MAAAA,EAAQI,EAAQF,GAChBA,EAAG,OAAA,CACL,CAAC,CACH,CAEO,SAASG,EACdC,EAA4B,CAAC,eAAgB,QAAQ,EACrDC,EACM,CACNpB,EAAgBoB,GAAkB,GAClCnB,EAAiBkB,CACnB,CC1EO,SAASE,EAAWC,EAAsB,CAC/C,OAAOA,EACJ,QAAQ,MAAO,GAAG,EAClB,QAAQ,UAAYC,GAAU,KAAOA,EAAM,WAAW,CAAC,EAAI,GAAG,CACnE,CCJO,SAASC,EACdC,EACAC,EACM,CACN,MAAMC,EAASF,EAAQ,iBAAmC,KAAK,EACzDG,EAAcD,EAAO,OAE3B,GAAIC,IAAgB,EAAG,CACrBF,EAAaD,CAAO,EACpB,MACF,CAEA,IAAII,EAAe,EAEnB,SAASC,GAAc,CACrBD,IACIA,IAAiBD,GACnBF,EAAaD,CAAO,CAExB,CAEAE,EAAO,QAASI,GAAQ,CAClBA,EAAI,SACND,EAAA,GAEAC,EAAI,iBAAiB,OAAQD,CAAW,EACxCC,EAAI,iBAAiB,QAASD,CAAW,EAE7C,CAAC,CACH,CCjCO,MAAME,EAAeC,GAC1BA,EAAI,QAAQ,WAAY,KAAK,EAAE,YAAA,EAE1B,SAASC,EAAYD,EAAqB,CAC/C,OAAOA,EACJ,cACA,QAAQ,SAAU,EAAE,EACpB,QAAQ,YAAa,CAACE,EAAGC,IAAWA,EAAO,YAAA,CAAa,EACxD,QAAQ,SAAWb,GAAUA,EAAM,aAAa,CACrD,CAEO,SAASc,EAAoBJ,EAAqB,CACvD,MACE,KACAA,EACG,YAAA,EACA,QAAQ,SAAU,EAAE,EACpB,QAAQ,KAAM,GAAG,CAExB"}

package/dist/root/index.js

@@ -0,0 +1,73 @@
+let f = 15, l = [".message-row", ".reply"], c = null;
+function u(e) {
+  c = e;
+}
+function g(e) {
+  const t = c;
+  if (!t) return;
+  const r = l.join(", ");
+  for (; ; ) {
+    const s = t.querySelectorAll(r), a = s.length;
+    if (f <= 0 || a <= f)
+      break;
+    const o = s[0];
+    if (!o) break;
+    e == null || e(o), o.remove();
+  }
+}
+function p(e, t) {
+  const r = c;
+  if (!r) return;
+  const s = l.map((o) => `${o}[data-msgid="${e}"]`).join(", ");
+  r.querySelectorAll(s).forEach((o) => {
+    t == null || t(e, o), o.remove();
+  });
+}
+function d(e, t) {
+  const r = c;
+  if (!r) return;
+  const s = l.map((o) => `${o}[data-userid="${e}"]`).join(", ");
+  r.querySelectorAll(s).forEach((o) => {
+    t == null || t(e, o), o.remove();
+  });
+}
+function i(e = [".message-row", ".reply"], t) {
+  f = t ?? 15, l = e;
+}
+function m(e) {
+  return e.replace(/\s/g, " ").replace(/[<>"^]/g, (t) => "&#" + t.charCodeAt(0) + ";");
+}
+function C(e, t) {
+  const r = e.querySelectorAll("img"), s = r.length;
+  if (s === 0) {
+    t(e);
+    return;
+  }
+  let a = 0;
+  function o() {
+    a++, a === s && t(e);
+  }
+  r.forEach((n) => {
+    n.complete ? o() : (n.addEventListener("load", o), n.addEventListener("error", o));
+  });
+}
+const L = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase();
+function h(e) {
+  return e.toLowerCase().replace(/^vite_/, "").replace(/_([a-z])/g, (t, r) => r.toUpperCase()).replace(/^[a-z]/, (t) => t.toLowerCase());
+}
+function y(e) {
+  return "--" + e.toLowerCase().replace(/^vite_/, "").replace(/_/g, "-");
+}
+export {
+  p as deleteMessage,
+  d as deleteMessages,
+  g as handleMessageLimit,
+  m as htmlEncode,
+  i as plugMessagesLimit,
+  C as preloadImagesThenShow,
+  u as setMessageLimitRoot,
+  h as toCamelCase,
+  y as toCssCustomProperty,
+  L as toKebabCase
+};
+//# sourceMappingURL=index.js.map

package/dist/root/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/root/message-limit.ts","../../src/root/html-encode.ts","../../src/root/preload-images.ts","../../src/root/string-utils.ts"],"sourcesContent":["let messagesLimit = 15;\r\nlet limitSelectors: string[] = [\".message-row\", \".reply\"];\r\n\r\nlet rootRef: Element | null = null;\r\n\r\n/**\r\n * Set the container element for message limit and delete operations.\r\n * Pass the DOM element that wraps all message rows (e.g. document.querySelector(\"#main\")).\r\n */\r\nexport function setMessageLimitRoot(root: Element | null): void {\r\n  rootRef = root;\r\n}\r\n\r\n/**\r\n * Enforces message limit by recalculating current count each time and removing\r\n * excess messages in a loop until totalMessages <= messagesLimit.\r\n */\r\nexport function handleMessageLimit(\r\n  onRemoveMixin?: (element: Element) => void,\r\n): void {\r\n  const root = rootRef;\r\n  if (!root) return;\r\n\r\n  const selector = limitSelectors.join(\", \");\r\n\r\n  for (;;) {\r\n    const children = root.querySelectorAll(selector);\r\n    const totalMessages = children.length;\r\n\r\n    if (messagesLimit <= 0 || totalMessages <= messagesLimit) {\r\n      break;\r\n    }\r\n\r\n    const first = children[0];\r\n    if (!first) break;\r\n    onRemoveMixin?.(first);\r\n    first.remove();\r\n  }\r\n}\r\n\r\nexport function deleteMessage(\r\n  msgId: string,\r\n  mixin?: (msgId: string, element: Element) => void,\r\n): void {\r\n  const root = rootRef;\r\n  if (!root) return;\r\n  const selectors = limitSelectors\r\n    .map((s) => `${s}[data-msgid=\"${msgId}\"]`)\r\n    .join(\", \");\r\n  const elements = root.querySelectorAll(selectors);\r\n  elements.forEach((el) => {\r\n    mixin?.(msgId, el);\r\n    el.remove();\r\n  });\r\n}\r\n\r\nexport function deleteMessages(\r\n  userId: string,\r\n  mixin?: (userId: string, element: Element) => void,\r\n): void {\r\n  const root = rootRef;\r\n  if (!root) return;\r\n  const selectors = limitSelectors\r\n    .map((s) => `${s}[data-userid=\"${userId}\"]`)\r\n    .join(\", \");\r\n  const elements = root.querySelectorAll(selectors);\r\n  elements.forEach((el) => {\r\n    mixin?.(userId, el);\r\n    el.remove();\r\n  });\r\n}\r\n\r\nexport function plugMessagesLimit(\r\n  _limitSelectors: string[] = [\".message-row\", \".reply\"],\r\n  _messagesLimit?: number,\r\n): void {\r\n  messagesLimit = _messagesLimit ?? 15;\r\n  limitSelectors = _limitSelectors;\r\n}\r\n","/**\r\n * Экранирование строки для безопасной вставки в HTML:\r\n * нормализация пробелов и замена < > \" ^ на сущности.\r\n */\r\nexport function htmlEncode(html: string): string {\r\n  return html\r\n    .replace(/\\s/g, \" \")\r\n    .replace(/[<>\"^]/g, (match) => \"&#\" + match.charCodeAt(0) + \";\");\r\n}\r\n","/**\r\n * Ожидает загрузки всех <img> внутри контейнера, затем вызывает callback.\r\n * Если изображений нет — callback вызывается сразу.\r\n */\r\nexport function preloadImagesThenShow<T extends Element>(\r\n  element: T,\r\n  showFunction: (element: T) => void,\r\n): void {\r\n  const images = element.querySelectorAll<HTMLImageElement>(\"img\");\r\n  const totalImages = images.length;\r\n\r\n  if (totalImages === 0) {\r\n    showFunction(element);\r\n    return;\r\n  }\r\n\r\n  let loadedImages = 0;\r\n\r\n  function imageLoaded() {\r\n    loadedImages++;\r\n    if (loadedImages === totalImages) {\r\n      showFunction(element);\r\n    }\r\n  }\r\n\r\n  images.forEach((img) => {\r\n    if (img.complete) {\r\n      imageLoaded();\r\n    } else {\r\n      img.addEventListener(\"load\", imageLoaded);\r\n      img.addEventListener(\"error\", imageLoaded);\r\n    }\r\n  });\r\n}\r\n","export const toKebabCase = (str: string) =>\r\n  str.replace(/([A-Z])/g, '-$1').toLowerCase();\r\n\r\nexport function toCamelCase(str: string): string {\r\n  return str\r\n    .toLowerCase()\r\n    .replace(/^vite_/, \"\")\r\n    .replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())\r\n    .replace(/^[a-z]/, (match) => match.toLowerCase());\r\n}\r\n\r\nexport function toCssCustomProperty(str: string): string {\r\n  return (\r\n    \"--\" +\r\n    str\r\n      .toLowerCase()\r\n      .replace(/^vite_/, \"\")\r\n      .replace(/_/g, \"-\")\r\n  );\r\n}\r\n"],"names":["messagesLimit","limitSelectors","rootRef","setMessageLimitRoot","root","handleMessageLimit","onRemoveMixin","selector","children","totalMessages","first","deleteMessage","msgId","mixin","selectors","s","el","deleteMessages","userId","plugMessagesLimit","_limitSelectors","_messagesLimit","htmlEncode","html","match","preloadImagesThenShow","element","showFunction","images","totalImages","loadedImages","imageLoaded","img","toKebabCase","str","toCamelCase","_","letter","toCssCustomProperty"],"mappings":"AAAA,IAAIA,IAAgB,IAChBC,IAA2B,CAAC,gBAAgB,QAAQ,GAEpDC,IAA0B;AAMvB,SAASC,EAAoBC,GAA4B;AAC9D,EAAAF,IAAUE;AACZ;AAMO,SAASC,EACdC,GACM;AACN,QAAMF,IAAOF;AACb,MAAI,CAACE,EAAM;AAEX,QAAMG,IAAWN,EAAe,KAAK,IAAI;AAEzC,aAAS;AACP,UAAMO,IAAWJ,EAAK,iBAAiBG,CAAQ,GACzCE,IAAgBD,EAAS;AAE/B,QAAIR,KAAiB,KAAKS,KAAiBT;AACzC;AAGF,UAAMU,IAAQF,EAAS,CAAC;AACxB,QAAI,CAACE,EAAO;AACZ,IAAAJ,KAAA,QAAAA,EAAgBI,IAChBA,EAAM,OAAA;AAAA,EACR;AACF;AAEO,SAASC,EACdC,GACAC,GACM;AACN,QAAMT,IAAOF;AACb,MAAI,CAACE,EAAM;AACX,QAAMU,IAAYb,EACf,IAAI,CAACc,MAAM,GAAGA,CAAC,gBAAgBH,CAAK,IAAI,EACxC,KAAK,IAAI;AAEZ,EADiBR,EAAK,iBAAiBU,CAAS,EACvC,QAAQ,CAACE,MAAO;AACvB,IAAAH,KAAA,QAAAA,EAAQD,GAAOI,IACfA,EAAG,OAAA;AAAA,EACL,CAAC;AACH;AAEO,SAASC,EACdC,GACAL,GACM;AACN,QAAMT,IAAOF;AACb,MAAI,CAACE,EAAM;AACX,QAAMU,IAAYb,EACf,IAAI,CAACc,MAAM,GAAGA,CAAC,iBAAiBG,CAAM,IAAI,EAC1C,KAAK,IAAI;AAEZ,EADiBd,EAAK,iBAAiBU,CAAS,EACvC,QAAQ,CAACE,MAAO;AACvB,IAAAH,KAAA,QAAAA,EAAQK,GAAQF,IAChBA,EAAG,OAAA;AAAA,EACL,CAAC;AACH;AAEO,SAASG,EACdC,IAA4B,CAAC,gBAAgB,QAAQ,GACrDC,GACM;AACN,EAAArB,IAAgBqB,KAAkB,IAClCpB,IAAiBmB;AACnB;AC1EO,SAASE,EAAWC,GAAsB;AAC/C,SAAOA,EACJ,QAAQ,OAAO,GAAG,EAClB,QAAQ,WAAW,CAACC,MAAU,OAAOA,EAAM,WAAW,CAAC,IAAI,GAAG;AACnE;ACJO,SAASC,EACdC,GACAC,GACM;AACN,QAAMC,IAASF,EAAQ,iBAAmC,KAAK,GACzDG,IAAcD,EAAO;AAE3B,MAAIC,MAAgB,GAAG;AACrB,IAAAF,EAAaD,CAAO;AACpB;AAAA,EACF;AAEA,MAAII,IAAe;AAEnB,WAASC,IAAc;AACrB,IAAAD,KACIA,MAAiBD,KACnBF,EAAaD,CAAO;AAAA,EAExB;AAEA,EAAAE,EAAO,QAAQ,CAACI,MAAQ;AACtB,IAAIA,EAAI,WACND,EAAA,KAEAC,EAAI,iBAAiB,QAAQD,CAAW,GACxCC,EAAI,iBAAiB,SAASD,CAAW;AAAA,EAE7C,CAAC;AACH;ACjCO,MAAME,IAAc,CAACC,MAC1BA,EAAI,QAAQ,YAAY,KAAK,EAAE,YAAA;AAE1B,SAASC,EAAYD,GAAqB;AAC/C,SAAOA,EACJ,cACA,QAAQ,UAAU,EAAE,EACpB,QAAQ,aAAa,CAACE,GAAGC,MAAWA,EAAO,YAAA,CAAa,EACxD,QAAQ,UAAU,CAACb,MAAUA,EAAM,aAAa;AACrD;AAEO,SAASc,EAAoBJ,GAAqB;AACvD,SACE,OACAA,EACG,YAAA,EACA,QAAQ,UAAU,EAAE,EACpB,QAAQ,MAAM,GAAG;AAExB;"}

package/dist/root/message-limit.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Set the container element for message limit and delete operations.
+ * Pass the DOM element that wraps all message rows (e.g. document.querySelector("#main")).
+ */
+export declare function setMessageLimitRoot(root: Element | null): void;
+/**
+ * Enforces message limit by recalculating current count each time and removing
+ * excess messages in a loop until totalMessages <= messagesLimit.
+ */
+export declare function handleMessageLimit(onRemoveMixin?: (element: Element) => void): void;
+export declare function deleteMessage(msgId: string, mixin?: (msgId: string, element: Element) => void): void;
+export declare function deleteMessages(userId: string, mixin?: (userId: string, element: Element) => void): void;
+export declare function plugMessagesLimit(_limitSelectors?: string[], _messagesLimit?: number): void;
+//# sourceMappingURL=message-limit.d.ts.map

package/dist/root/message-limit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-limit.d.ts","sourceRoot":"","sources":["../../src/root/message-limit.ts"],"names":[],"mappings":"AAKA;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,OAAO,GAAG,IAAI,GAAG,IAAI,CAE9D;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,GACzC,IAAI,CAmBN;AAED,wBAAgB,aAAa,CAC3B,KAAK,EAAE,MAAM,EACb,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,GAChD,IAAI,CAWN;AAED,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,EACd,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,GACjD,IAAI,CAWN;AAED,wBAAgB,iBAAiB,CAC/B,eAAe,GAAE,MAAM,EAA+B,EACtD,cAAc,CAAC,EAAE,MAAM,GACtB,IAAI,CAGN"}

package/dist/root/preload-images.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Ожидает загрузки всех <img> внутри контейнера, затем вызывает callback.
+ * Если изображений нет — callback вызывается сразу.
+ */
+export declare function preloadImagesThenShow<T extends Element>(element: T, showFunction: (element: T) => void): void;
+//# sourceMappingURL=preload-images.d.ts.map

package/dist/root/preload-images.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"preload-images.d.ts","sourceRoot":"","sources":["../../src/root/preload-images.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,OAAO,EACrD,OAAO,EAAE,CAAC,EACV,YAAY,EAAE,CAAC,OAAO,EAAE,CAAC,KAAK,IAAI,GACjC,IAAI,CA0BN"}

package/dist/root/string-utils.d.ts

@@ -0,0 +1,4 @@
+export declare const toKebabCase: (str: string) => string;
+export declare function toCamelCase(str: string): string;
+export declare function toCssCustomProperty(str: string): string;
+//# sourceMappingURL=string-utils.d.ts.map

package/dist/root/string-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"string-utils.d.ts","sourceRoot":"","sources":["../../src/root/string-utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,WACO,CAAC;AAE/C,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAM/C;AAED,wBAAgB,mBAAmB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAQvD"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@allior/wmake-utils",
+  "version": "0.0.1",
+  "description": "Utilities: message content parsers, image preloading, and more.",
+  "type": "module",
+  "types": "./dist/root/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/root/index.d.ts",
+      "import": "./dist/root/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "README_RU.md"
+  ],
+  "scripts": {
+    "build": "rimraf dist && vite build && cross-env VITE_IIFE_ENTRY=root vite build --config vite.iife.config.ts && cross-env VITE_IIFE_ENTRY=react vite build --config vite.iife.config.ts && tsc -p tsconfig.types.json",
+    "clean": "rimraf dist",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "wmake",
+    "parser",
+    "chat",
+    "emotes",
+    "message"
+  ],
+  "author": "An1by",
+  "license": "ISC",
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "cross-env": "^10.1.0",
+    "react": "^19.0.0"
+  }
+}

package/src/react/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from "./use-ignore-message";
+export * from "./use-message-limit";
+export * from "./use-message-rows";

package/src/react/hooks/use-ignore-message.ts

@@ -0,0 +1,25 @@
+interface Props {
+  ignoredUsers?: string[];
+  ignoreCommands?: boolean;
+}
+
+export const useIgnoreMessage = ({
+  ignoredUsers = [],
+  ignoreCommands = true,
+}: Props) => {
+  const ignoredUsersLower = ignoredUsers.map((user) => user.toLowerCase());
+
+  const shouldIgnoreUser = (username: string) => {
+    return ignoredUsersLower.includes(username.toLowerCase());
+  };
+
+  const shouldIgnoreMessage = (text: string) => {
+    return ignoreCommands && text.trim().startsWith("!");
+  };
+
+  const shouldIgnore = (username: string, text: string) => {
+    return shouldIgnoreUser(username) || shouldIgnoreMessage(text);
+  };
+
+  return { shouldIgnore };
+};

package/src/react/hooks/use-message-limit.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from "react";
+import type { RefObject } from "react";
+import {
+  setMessageLimitRoot,
+  handleMessageLimit as handleMessageLimitRoot,
+  plugMessagesLimit,
+} from "@/root";
+
+export interface UseMessageLimitOptions {
+  messageLimit?: number;
+  /** Селекторы строк для лимита (по умолчанию [".message-row", ".reply"]) */
+  limitSelectors?: string[];
+  /** Вызов при удалении элемента из DOM (для синхронизации state в React) */
+  onRemove?: (element: Element) => void;
+}
+
+/**
+ * Подключает message limit к корневому элементу и опциям из widget load.
+ * Возвращает handleMessageLimit — вызывать после добавления новой строки.
+ */
+export function useMessageLimit(
+  rootRef: RefObject<Element | null>,
+  options: UseMessageLimitOptions = {},
+): () => void {
+  const { messageLimit, limitSelectors, onRemove } = options;
+  const onRemoveRef = useRef(onRemove);
+  onRemoveRef.current = onRemove;
+
+  useEffect(() => {
+    const root = rootRef.current;
+    setMessageLimitRoot(root);
+    return () => setMessageLimitRoot(null);
+  }, [rootRef]);
+
+  useEffect(() => {
+    plugMessagesLimit(limitSelectors, messageLimit);
+  }, [messageLimit, limitSelectors]);
+
+  return () => {
+    handleMessageLimitRoot((el) => onRemoveRef.current?.(el));
+  };
+}

package/src/react/hooks/use-message-rows.ts

@@ -0,0 +1,154 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Dispatch, RefObject, SetStateAction } from "react";
+import { useMessageLimit } from "./use-message-limit";
+import type { UseMessageLimitOptions } from "./use-message-limit";
+
+export interface UseMessageRowsOptions<T> extends Omit<
+  UseMessageLimitOptions,
+  "onRemove"
+> {
+  /**
+   * Функция получения id строки (для синхронизации state при удалении из DOM по data-row-id).
+   */
+  getRowId: (row: T) => number;
+  /** Имя атрибута с id на DOM-элементе строки (по умолчанию "data-row-id"). */
+  rowIdAttribute?: string;
+  /**
+   * Ref контейнера «подготовки»: при наличии addRow сначала добавляет в preparedRows;
+   * при пересечении строки с этим контейнером вызывается onPreparedEnter, затем строка переносится в rows.
+   */
+  preparingRef?: RefObject<Element | null>;
+  /**
+   * Вызывается, когда строка из preparedRows попадает в зону preparingRef (например, для processZeroWidthEmotes).
+   * После вызова строка переносится в основной список (main rows).
+   */
+  onPreparedEnter?: (rowId: number, element: Element) => void;
+}
+
+export interface UseMessageRowsReturn<T> {
+  /** Текущий список строк (основной список, рендер в main). */
+  rows: T[];
+  /** Строки в зоне подготовки (рендер внутри элемента с preparingRef). При отсутствии preparingRef — пустой массив. */
+  preparedRows: T[];
+  /** Установить список строк (полная замена). */
+  setRows: Dispatch<SetStateAction<T[]>>;
+  /** Добавить строку: при наличии preparingRef — в preparedRows, иначе в rows с применением лимита. */
+  addRow: (row: T) => void;
+  /** Перенести строку из preparedRows в rows по id. Вызывается автоматически после onPreparedEnter при использовании preparingRef. */
+  moveRow: (rowId: number) => void;
+  /**
+   * Зарегистрировать DOM-элемент подготовленной строки для наблюдения (вызывать при монтировании/размонтировании строки).
+   * Когда элемент попадает в зону preparingRef, вызывается onPreparedEnter и затем moveRow(rowId).
+   */
+  registerPreparedRow: (rowId: number, element: Element | null) => void;
+  /** Применить лимит сообщений (удалить лишние строки из DOM и state). */
+  applyLimit: () => void;
+}
+
+/**
+ * Хук для управления списком строк с учётом message limit:
+ * хранит rows в state, при applyLimit удаляет лишние из DOM и синхронизирует state по data-row-id.
+ * При передаче preparingRef новые строки сначала попадают в preparedRows; при пересечении с контейнером
+ * вызывается onPreparedEnter и строка переносится в rows.
+ */
+export function useMessageRows<T>(
+  rootRef: RefObject<Element | null>,
+  options: UseMessageRowsOptions<T>,
+): UseMessageRowsReturn<T> {
+  const {
+    getRowId,
+    rowIdAttribute = "data-row-id",
+    preparingRef,
+    onPreparedEnter,
+    ...limitOptions
+  } = options;
+  const [rows, setRows] = useState<T[]>([]);
+  const [preparedRows, setPreparedRows] = useState<T[]>([]);
+  const onPreparedEnterRef = useRef(onPreparedEnter);
+  onPreparedEnterRef.current = onPreparedEnter;
+  const observersRef = useRef<Map<number, IntersectionObserver>>(new Map());
+
+  const applyLimit = useMessageLimit(rootRef, {
+    ...limitOptions,
+    onRemove: (el: Element) => {
+      const idStr = el.getAttribute(rowIdAttribute);
+      if (idStr != null) {
+        const id = Number(idStr);
+        setRows((prev) => prev.filter((r) => getRowId(r) !== id));
+      }
+    },
+  });
+
+  const moveRow = useCallback(
+    (rowId: number) => {
+      setPreparedRows((prev) => {
+        const row = prev.find((r) => getRowId(r) === rowId);
+        if (row == null) return prev;
+        setRows((r) =>
+          r.some((x) => getRowId(x) === rowId) ? r : [...r, row],
+        );
+        queueMicrotask(applyLimit);
+        return prev.filter((r) => getRowId(r) !== rowId);
+      });
+    },
+    [getRowId, applyLimit],
+  );
+
+  const registerPreparedRow = useCallback(
+    (rowId: number, element: Element | null) => {
+      const observers = observersRef.current;
+      const existing = observers.get(rowId);
+      if (existing) {
+        existing.disconnect();
+        observers.delete(rowId);
+      }
+      if (element == null || !preparingRef?.current) return;
+
+      const root = preparingRef.current;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (!entry?.isIntersecting) return;
+          const id = rowId;
+          observer.disconnect();
+          observers.delete(id);
+          onPreparedEnterRef.current?.(id, entry.target);
+          moveRow(id);
+        },
+        { root, threshold: 0, rootMargin: "0px" },
+      );
+      observer.observe(element);
+      observers.set(rowId, observer);
+    },
+    [preparingRef, moveRow],
+  );
+
+  useEffect(() => {
+    return () => {
+      observersRef.current.forEach((o) => o.disconnect());
+      observersRef.current.clear();
+    };
+  }, []);
+
+  const addRow = useCallback(
+    (row: T) => {
+      if (preparingRef) {
+        setPreparedRows((prev) => [...prev, row]);
+      } else {
+        setRows((prev) => [...prev, row]);
+        applyLimit();
+      }
+    },
+    [preparingRef, applyLimit],
+  );
+
+  return {
+    rows,
+    preparedRows: preparingRef ? preparedRows : [],
+    setRows,
+    addRow,
+    moveRow,
+    registerPreparedRow: preparingRef ? registerPreparedRow : () => {},
+    applyLimit,
+  };
+}

package/src/react/index.ts

@@ -0,0 +1,2 @@
+export * from "../root";
+export * from "./hooks";

package/src/root/html-encode.ts

@@ -0,0 +1,9 @@
+/**
+ * Экранирование строки для безопасной вставки в HTML:
+ * нормализация пробелов и замена < > " ^ на сущности.
+ */
+export function htmlEncode(html: string): string {
+  return html
+    .replace(/\s/g, " ")
+    .replace(/[<>"^]/g, (match) => "&#" + match.charCodeAt(0) + ";");
+}

package/src/root/index.ts

@@ -0,0 +1,4 @@
+export * from "./message-limit";
+export * from "./html-encode";
+export * from "./preload-images";
+export * from "./string-utils";

package/src/root/message-limit.ts

@@ -0,0 +1,79 @@
+let messagesLimit = 15;
+let limitSelectors: string[] = [".message-row", ".reply"];
+
+let rootRef: Element | null = null;
+
+/**
+ * Set the container element for message limit and delete operations.
+ * Pass the DOM element that wraps all message rows (e.g. document.querySelector("#main")).
+ */
+export function setMessageLimitRoot(root: Element | null): void {
+  rootRef = root;
+}
+
+/**
+ * Enforces message limit by recalculating current count each time and removing
+ * excess messages in a loop until totalMessages <= messagesLimit.
+ */
+export function handleMessageLimit(
+  onRemoveMixin?: (element: Element) => void,
+): void {
+  const root = rootRef;
+  if (!root) return;
+
+  const selector = limitSelectors.join(", ");
+
+  for (;;) {
+    const children = root.querySelectorAll(selector);
+    const totalMessages = children.length;
+
+    if (messagesLimit <= 0 || totalMessages <= messagesLimit) {
+      break;
+    }
+
+    const first = children[0];
+    if (!first) break;
+    onRemoveMixin?.(first);
+    first.remove();
+  }
+}
+
+export function deleteMessage(
+  msgId: string,
+  mixin?: (msgId: string, element: Element) => void,
+): void {
+  const root = rootRef;
+  if (!root) return;
+  const selectors = limitSelectors
+    .map((s) => `${s}[data-msgid="${msgId}"]`)
+    .join(", ");
+  const elements = root.querySelectorAll(selectors);
+  elements.forEach((el) => {
+    mixin?.(msgId, el);
+    el.remove();
+  });
+}
+
+export function deleteMessages(
+  userId: string,
+  mixin?: (userId: string, element: Element) => void,
+): void {
+  const root = rootRef;
+  if (!root) return;
+  const selectors = limitSelectors
+    .map((s) => `${s}[data-userid="${userId}"]`)
+    .join(", ");
+  const elements = root.querySelectorAll(selectors);
+  elements.forEach((el) => {
+    mixin?.(userId, el);
+    el.remove();
+  });
+}
+
+export function plugMessagesLimit(
+  _limitSelectors: string[] = [".message-row", ".reply"],
+  _messagesLimit?: number,
+): void {
+  messagesLimit = _messagesLimit ?? 15;
+  limitSelectors = _limitSelectors;
+}

package/src/root/preload-images.ts

@@ -0,0 +1,34 @@
+/**
+ * Ожидает загрузки всех <img> внутри контейнера, затем вызывает callback.
+ * Если изображений нет — callback вызывается сразу.
+ */
+export function preloadImagesThenShow<T extends Element>(
+  element: T,
+  showFunction: (element: T) => void,
+): void {
+  const images = element.querySelectorAll<HTMLImageElement>("img");
+  const totalImages = images.length;
+
+  if (totalImages === 0) {
+    showFunction(element);
+    return;
+  }
+
+  let loadedImages = 0;
+
+  function imageLoaded() {
+    loadedImages++;
+    if (loadedImages === totalImages) {
+      showFunction(element);
+    }
+  }
+
+  images.forEach((img) => {
+    if (img.complete) {
+      imageLoaded();
+    } else {
+      img.addEventListener("load", imageLoaded);
+      img.addEventListener("error", imageLoaded);
+    }
+  });
+}

package/src/root/string-utils.ts

@@ -0,0 +1,20 @@
+export const toKebabCase = (str: string) =>
+  str.replace(/([A-Z])/g, '-$1').toLowerCase();
+
+export function toCamelCase(str: string): string {
+  return str
+    .toLowerCase()
+    .replace(/^vite_/, "")
+    .replace(/_([a-z])/g, (_, letter) => letter.toUpperCase())
+    .replace(/^[a-z]/, (match) => match.toLowerCase());
+}
+
+export function toCssCustomProperty(str: string): string {
+  return (
+    "--" +
+    str
+      .toLowerCase()
+      .replace(/^vite_/, "")
+      .replace(/_/g, "-")
+  );
+}