chore(video-player): rebuild dist for v0.1.3

release(video-player): v0.1.3
release(content-suggestions): v0.1.2
2026-03-20 15:09:34 +03:00 · 2026-03-20 12:10:56 +03:00 · 2026-03-11 17:46:03 +03:00 · 2026-03-11 17:15:01 +03:00 · 2026-03-11 13:49:45 +03:00 · 2026-03-11 13:47:47 +03:00
27 changed files with 1910 additions and 108 deletions
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,7 +1,9 @@
 import js from "@eslint/js";
+import tseslint from "typescript-eslint";

 export default [
  js.configs.recommended,
+  ...tseslint.configs.recommended,
  {
    files: ["**/*.ts", "**/*.tsx"],
    languageOptions: {
@@ -9,7 +11,8 @@ export default [
      sourceType: "module",
    },
    rules: {
-      "no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_" }],
    },
  },
  {
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
    "prettier": "^3.6.2",
    "storybook": "8.6.14",
    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.57.0",
    "vitest": "^3.2.4"
  }
 }
--- a/packages/content-suggestions/README.md
+++ b/packages/content-suggestions/README.md
@@ -77,12 +77,40 @@ By default, tags are rendered as plain styled text (not links).

 ## Angular usage

+Tokenization helper:
+
 ```ts
 import { createAngularContentTokens } from "@hublib-web/content-suggestions/angular";

 const tokens = createAngularContentTokens(text);
 ```

+Ready-to-use UI renderer (React-like props API):
+
+```ts
+import { AngularContentTextWithSuggestionsRenderer } from "@hublib-web/content-suggestions/angular";
+
+const renderer = new AngularContentTextWithSuggestionsRenderer();
+renderer.attach(containerElement, {
+  text,
+  weight: "normal",
+  ellipsis: { count: 180, expandable: true },
+  blur: false,
+  onView: () => {
+    // analytics
+  },
+});
+```
+
+Title variant with defaults (`weight: "bold"`, `ellipsis: { rows: 2 }`):
+
+```ts
+import { AngularContentTitleWithSuggestionsRenderer } from "@hublib-web/content-suggestions/angular";
+
+const titleRenderer = new AngularContentTitleWithSuggestionsRenderer();
+titleRenderer.attach(titleContainer, { text: title });
+```
+
 ## Storybook (dev/design system)

 Run from repository root:
--- a/packages/content-suggestions/dist/angular/index.cjs
+++ b/packages/content-suggestions/dist/angular/index.cjs
@@ -76,6 +76,41 @@ var findAllEntities = (content) => {
 };

 // src/angular/index.ts
+var LINK_COLOR = "#1677ff";
+var READ_MORE_TEXT = "\u0427\u0438\u0442\u0430\u0442\u044C \u043F\u043E\u043B\u043D\u043E\u0441\u0442\u044C\u044E";
+var toKebabCase = (value) => value.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+var applyStyleObject = (element, styles) => {
+  if (!styles) {
+    return;
+  }
+  for (const [key, rawValue] of Object.entries(styles)) {
+    if (rawValue === null || rawValue === void 0) {
+      continue;
+    }
+    const styleValue = typeof rawValue === "number" ? `${rawValue}px` : String(rawValue);
+    if (key.startsWith("--")) {
+      element.style.setProperty(key, styleValue);
+      continue;
+    }
+    const cssKey = key.includes("-") ? key : toKebabCase(key);
+    element.style.setProperty(cssKey, styleValue);
+  }
+};
+var toNode = (value) => {
+  if (value === null || value === void 0) {
+    return null;
+  }
+  if (value instanceof Node) {
+    return value;
+  }
+  return document.createTextNode(String(value));
+};
+var resolveEllipsisSymbol = (symbol, expanded) => {
+  if (typeof symbol === "function") {
+    return symbol(expanded);
+  }
+  return symbol ?? READ_MORE_TEXT;
+};
 var buildAngularTagHref = (entity) => {
  return `/search/?query=${encodeURIComponent(entity.tag.toLowerCase())}`;
 };
@@ -133,9 +168,328 @@ var AngularContentSuggestionsAdapter = class {
    };
  }
 };
+var AngularContentTextRenderer = class {
+  host = null;
+  props = {};
+  expanded = false;
+  viewed = false;
+  hostInsideView = false;
+  observer = null;
+  attach(host, props = {}) {
+    this.destroy();
+    this.host = host;
+    this.props = { ...props };
+    this.expanded = false;
+    this.viewed = false;
+    this.hostInsideView = false;
+    this.initObserver();
+    this.render();
+    return this.getState();
+  }
+  update(nextProps) {
+    this.props = {
+      ...this.props,
+      ...nextProps
+    };
+    this.render();
+    return this.getState();
+  }
+  destroy() {
+    if (this.observer && this.host) {
+      this.observer.unobserve(this.host);
+      this.observer.disconnect();
+    }
+    this.observer = null;
+    if (this.host) {
+      this.host.innerHTML = "";
+    }
+    this.host = null;
+    this.props = {};
+    this.expanded = false;
+    this.viewed = false;
+    this.hostInsideView = false;
+  }
+  getState() {
+    return {
+      props: { ...this.props },
+      snapshot: this.createSnapshot(),
+      expanded: this.getMergedExpanded(this.resolveEllipsisConfig(), this.getText())
+    };
+  }
+  getText() {
+    return this.props.text ?? "";
+  }
+  createSnapshot() {
+    const text = this.getText();
+    const entities = findAllEntities(text);
+    const tokens = createAngularContentTokens(text);
+    return {
+      text,
+      entities,
+      tokens
+    };
+  }
+  resolveEllipsisConfig() {
+    const ellipsis = this.props.ellipsis;
+    if (!ellipsis || typeof ellipsis !== "object") {
+      return null;
+    }
+    return ellipsis;
+  }
+  getMergedExpanded(ellipsisConfig, text) {
+    const controlledExpanded = ellipsisConfig && typeof ellipsisConfig.expanded === "boolean" ? ellipsisConfig.expanded : void 0;
+    if (controlledExpanded !== void 0) {
+      return controlledExpanded;
+    }
+    if (ellipsisConfig && "count" in ellipsisConfig) {
+      const count = ellipsisConfig.count ?? 0;
+      if (count <= 0 || text.length <= count) {
+        return true;
+      }
+    }
+    return this.expanded;
+  }
+  createDefaultMentionNode(entity) {
+    const span = document.createElement("span");
+    span.style.color = LINK_COLOR;
+    span.style.fontWeight = this.props.weight === "bold" ? "700" : "400";
+    span.textContent = entity.displayText;
+    return span;
+  }
+  createDefaultTagNode(entity) {
+    const span = document.createElement("span");
+    span.style.color = LINK_COLOR;
+    span.style.fontWeight = this.props.weight === "bold" ? "700" : "400";
+    span.textContent = entity.text;
+    return span;
+  }
+  createDefaultLinkNode(entity) {
+    const anchor = document.createElement("a");
+    anchor.href = entity.url;
+    anchor.target = "_blank";
+    anchor.referrerPolicy = "no-referrer";
+    anchor.style.color = LINK_COLOR;
+    anchor.style.fontWeight = this.props.weight === "bold" ? "700" : "400";
+    anchor.textContent = entity.text;
+    return anchor;
+  }
+  renderEntity(entity, index) {
+    if (entity.type === "mention") {
+      const customNode2 = this.props.renderMention?.(entity, index);
+      return toNode(customNode2) ?? this.createDefaultMentionNode(entity);
+    }
+    if (entity.type === "tag") {
+      const customNode2 = this.props.renderTag?.(entity, index);
+      return toNode(customNode2) ?? this.createDefaultTagNode(entity);
+    }
+    const customNode = this.props.renderLink?.(entity, index);
+    return toNode(customNode) ?? this.createDefaultLinkNode(entity);
+  }
+  buildTextNodes(text, entities, upto = null) {
+    let lastIndex = 0;
+    const nodes = [];
+    for (const [index, entity] of entities.entries()) {
+      if (upto !== null && entity.start >= upto) {
+        break;
+      }
+      const textEnd = upto !== null ? Math.min(entity.start, upto) : entity.start;
+      if (entity.start > lastIndex && lastIndex < textEnd) {
+        nodes.push(document.createTextNode(text.slice(lastIndex, textEnd)));
+      }
+      if (upto === null || entity.end <= upto) {
+        const entityNode = this.renderEntity(entity, index);
+        if (entityNode) {
+          nodes.push(entityNode);
+        }
+      }
+      lastIndex = entity.end;
+    }
+    if (upto === null) {
+      if (lastIndex < text.length) {
+        nodes.push(document.createTextNode(text.slice(lastIndex)));
+      }
+    } else if (lastIndex < upto) {
+      nodes.push(document.createTextNode(text.slice(lastIndex, upto)));
+    }
+    return nodes;
+  }
+  applyBaseParagraphStyle(element) {
+    element.style.whiteSpace = "pre-wrap";
+    element.style.fontWeight = this.props.weight === "bold" ? "700" : "400";
+    element.style.setProperty("-webkit-touch-callout", "default");
+    element.style.setProperty("-webkit-user-select", "text");
+    element.style.setProperty("-khtml-user-select", "text");
+    element.style.setProperty("-moz-user-select", "text");
+    element.style.setProperty("-ms-user-select", "text");
+    element.style.setProperty("user-select", "text");
+    if (this.props.blur) {
+      element.style.filter = "blur(3px)";
+      element.style.setProperty("-webkit-user-select", "none");
+      element.style.setProperty("-khtml-user-select", "none");
+      element.style.setProperty("-moz-user-select", "none");
+      element.style.setProperty("-ms-user-select", "none");
+      element.style.setProperty("user-select", "none");
+      element.style.pointerEvents = "none";
+    }
+    applyStyleObject(element, this.props.style);
+  }
+  buildReadMoreButton(symbol) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = resolveEllipsisSymbol(symbol, this.expanded);
+    button.style.border = "0";
+    button.style.background = "none";
+    button.style.padding = "0";
+    button.style.marginLeft = "6px";
+    button.style.cursor = "pointer";
+    button.style.color = LINK_COLOR;
+    button.style.fontWeight = "700";
+    button.onclick = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.handleExpand();
+    };
+    return button;
+  }
+  handleExpand() {
+    const ellipsisConfig = this.resolveEllipsisConfig();
+    if (!ellipsisConfig) {
+      return;
+    }
+    this.expanded = true;
+    ellipsisConfig.onExpand?.(true);
+    this.render();
+  }
+  computeEntitySafeCutoff(count, entities) {
+    let cutoff = count;
+    let extended = true;
+    while (extended) {
+      extended = false;
+      for (const entity of entities) {
+        if (entity.start < cutoff && entity.end > cutoff) {
+          cutoff = entity.end;
+          extended = true;
+        }
+      }
+    }
+    return cutoff;
+  }
+  hasVerticalOverflow(element) {
+    return element.scrollHeight - element.clientHeight > 1;
+  }
+  render() {
+    if (!this.host) {
+      return;
+    }
+    const text = this.getText();
+    const entities = findAllEntities(text);
+    const ellipsisConfig = this.resolveEllipsisConfig();
+    const mergedExpanded = this.getMergedExpanded(ellipsisConfig, text);
+    const wrapper = document.createElement("div");
+    const paragraph = document.createElement("div");
+    if (this.props.className) {
+      paragraph.className = this.props.className;
+    }
+    this.applyBaseParagraphStyle(paragraph);
+    if (ellipsisConfig && "count" in ellipsisConfig) {
+      const count = ellipsisConfig.count ?? 0;
+      const shouldTruncate = !mergedExpanded && count > 0 && text.length > count;
+      if (shouldTruncate) {
+        const cutoff = this.computeEntitySafeCutoff(count, entities);
+        const nodes = this.buildTextNodes(text, entities, cutoff);
+        paragraph.append(...nodes);
+        paragraph.append(document.createTextNode("\u2026"));
+        if (ellipsisConfig.expandable) {
+          paragraph.append(this.buildReadMoreButton(ellipsisConfig.symbol));
+        }
+      } else {
+        paragraph.append(...this.buildTextNodes(text, entities));
+      }
+    } else {
+      paragraph.append(...this.buildTextNodes(text, entities));
+      if (ellipsisConfig && "rows" in ellipsisConfig && !mergedExpanded) {
+        paragraph.style.display = "-webkit-box";
+        paragraph.style.setProperty("-webkit-box-orient", "vertical");
+        paragraph.style.setProperty("-webkit-line-clamp", String(ellipsisConfig.rows));
+        paragraph.style.overflow = "hidden";
+        wrapper.append(paragraph);
+        this.host.replaceChildren(wrapper);
+        if (ellipsisConfig.expandable && this.hasVerticalOverflow(paragraph)) {
+          wrapper.append(this.buildReadMoreButton(ellipsisConfig.symbol));
+        }
+        this.emitOnViewIfNeeded(mergedExpanded);
+        return;
+      }
+    }
+    wrapper.append(paragraph);
+    this.host.replaceChildren(wrapper);
+    this.emitOnViewIfNeeded(mergedExpanded);
+  }
+  initObserver() {
+    if (!this.host) {
+      return;
+    }
+    if (typeof IntersectionObserver === "undefined") {
+      this.hostInsideView = true;
+      return;
+    }
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry) {
+          return;
+        }
+        if (entry.isIntersecting && !this.hostInsideView) {
+          this.hostInsideView = true;
+          const ellipsisConfig = this.resolveEllipsisConfig();
+          const mergedExpanded = this.getMergedExpanded(ellipsisConfig, this.getText());
+          this.emitOnViewIfNeeded(mergedExpanded);
+        }
+      },
+      { threshold: 0.5 }
+    );
+    this.observer.observe(this.host);
+  }
+  emitOnViewIfNeeded(mergedExpanded) {
+    if (!mergedExpanded || this.viewed || !this.hostInsideView) {
+      return;
+    }
+    this.viewed = true;
+    this.props.onView?.();
+  }
+};
+var AngularContentTextWithSuggestionsRenderer = class extends AngularContentTextRenderer {
+};
+var AngularContentTitleWithSuggestionsRenderer = class {
+  renderer = new AngularContentTextWithSuggestionsRenderer();
+  attach(host, props = {}) {
+    return this.renderer.attach(host, this.normalizeProps(props));
+  }
+  update(props) {
+    return this.renderer.update(this.normalizeProps(props));
+  }
+  destroy() {
+    this.renderer.destroy();
+  }
+  getState() {
+    return this.renderer.getState();
+  }
+  normalizeProps(props) {
+    return {
+      ...props,
+      weight: "bold",
+      blur: props.blur ?? false,
+      ellipsis: props.ellipsis === void 0 ? { rows: 2 } : props.ellipsis
+    };
+  }
+};

 exports.AngularContentSuggestionsAdapter = AngularContentSuggestionsAdapter;
+exports.AngularContentTextRenderer = AngularContentTextRenderer;
+exports.AngularContentTextWithSuggestionsRenderer = AngularContentTextWithSuggestionsRenderer;
+exports.AngularContentTitleWithSuggestionsRenderer = AngularContentTitleWithSuggestionsRenderer;
 exports.buildAngularTagHref = buildAngularTagHref;
 exports.createAngularContentTokens = createAngularContentTokens;
+exports.toKebabCase = toKebabCase;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map
--- a/packages/content-suggestions/dist/angular/index.cjs.map
+++ b/packages/content-suggestions/dist/angular/index.cjs.map
--- a/packages/content-suggestions/dist/angular/index.d.cts
+++ b/packages/content-suggestions/dist/angular/index.d.cts
@@ -24,10 +24,95 @@ interface AngularContentSnapshot {
    entities: ContentEntity[];
    tokens: AngularContentToken[];
 }
+type AngularEllipsisSymbol = string | ((expanded: boolean) => string);
+type AngularCountEllipsisConfig = {
+    count: number;
+    rows?: never;
+    expandable?: boolean;
+    expanded?: boolean;
+    symbol?: AngularEllipsisSymbol;
+    onExpand?: (expanded: boolean) => void;
+};
+type AngularRowsEllipsisConfig = {
+    rows: number;
+    count?: never;
+    expandable?: boolean;
+    expanded?: boolean;
+    symbol?: AngularEllipsisSymbol;
+    onExpand?: (expanded: boolean) => void;
+};
+type AngularContentEllipsisConfig = AngularCountEllipsisConfig | AngularRowsEllipsisConfig | false;
+type AngularRenderResult = Node | string | number | null | undefined;
+type AngularMentionRenderer = (entity: MentionEntity, index: number) => AngularRenderResult;
+type AngularTagRenderer = (entity: TagEntity, index: number) => AngularRenderResult;
+type AngularLinkRenderer = (entity: LinkEntity, index: number) => AngularRenderResult;
+interface AngularContentTextProps {
+    className?: string;
+    weight?: "normal" | "bold";
+    text?: string | null;
+    ellipsis?: AngularContentEllipsisConfig;
+    blur?: boolean;
+    style?: Record<string, string | number> | null;
+    onView?: () => void;
+    renderMention?: AngularMentionRenderer;
+    renderTag?: AngularTagRenderer;
+    renderLink?: AngularLinkRenderer;
+}
+type AngularContentTextWithSuggestionsProps = Omit<AngularContentTextProps, "renderMention" | "renderTag"> & {
+    renderMention?: AngularMentionRenderer;
+    renderTag?: AngularTagRenderer;
+};
+type AngularContentTitleWithSuggestionsProps = Omit<AngularContentTextWithSuggestionsProps, "weight">;
+interface AngularContentTextRendererState {
+    props: AngularContentTextProps;
+    snapshot: AngularContentSnapshot;
+    expanded: boolean;
+}
+declare const toKebabCase: (value: string) => string;
 declare const buildAngularTagHref: (entity: TagEntity) => string;
+
 declare const createAngularContentTokens: (inputText: string | null | undefined) => AngularContentToken[];
 declare class AngularContentSuggestionsAdapter {
    snapshot(inputText: string | null | undefined): AngularContentSnapshot;
 }
+declare class AngularContentTextRenderer {
+    private host;
+    private props;
+    private expanded;
+    private viewed;
+    private hostInsideView;
+    private observer;
+    attach(host: HTMLElement, props?: AngularContentTextProps): AngularContentTextRendererState;
+    update(nextProps: AngularContentTextProps): AngularContentTextRendererState;
+    destroy(): void;
+    getState(): AngularContentTextRendererState;
+    private getText;
+    private createSnapshot;
+    private resolveEllipsisConfig;
+    private getMergedExpanded;
+    private createDefaultMentionNode;
+    private createDefaultTagNode;
+    private createDefaultLinkNode;
+    private renderEntity;
+    private buildTextNodes;
+    private applyBaseParagraphStyle;
+    private buildReadMoreButton;
+    private handleExpand;
+    private computeEntitySafeCutoff;
+    private hasVerticalOverflow;
+    private render;
+    private initObserver;
+    private emitOnViewIfNeeded;
+}
+declare class AngularContentTextWithSuggestionsRenderer extends AngularContentTextRenderer {
+}
+declare class AngularContentTitleWithSuggestionsRenderer {
+    private readonly renderer;
+    attach(host: HTMLElement, props?: AngularContentTitleWithSuggestionsProps): AngularContentTextRendererState;
+    update(props: AngularContentTitleWithSuggestionsProps): AngularContentTextRendererState;
+    destroy(): void;
+    getState(): AngularContentTextRendererState;
+    private normalizeProps;
+}

-export { type AngularContentSnapshot, AngularContentSuggestionsAdapter, type AngularContentToken, type AngularLinkToken, type AngularMentionToken, type AngularTagToken, type AngularTextToken, buildAngularTagHref, createAngularContentTokens };
+export { type AngularContentEllipsisConfig, type AngularContentSnapshot, AngularContentSuggestionsAdapter, type AngularContentTextProps, AngularContentTextRenderer, type AngularContentTextRendererState, type AngularContentTextWithSuggestionsProps, AngularContentTextWithSuggestionsRenderer, type AngularContentTitleWithSuggestionsProps, AngularContentTitleWithSuggestionsRenderer, type AngularContentToken, type AngularCountEllipsisConfig, type AngularEllipsisSymbol, type AngularLinkRenderer, type AngularLinkToken, type AngularMentionRenderer, type AngularMentionToken, type AngularRenderResult, type AngularRowsEllipsisConfig, type AngularTagRenderer, type AngularTagToken, type AngularTextToken, buildAngularTagHref, createAngularContentTokens, toKebabCase };
--- a/packages/content-suggestions/dist/angular/index.d.ts
+++ b/packages/content-suggestions/dist/angular/index.d.ts
@@ -24,10 +24,95 @@ interface AngularContentSnapshot {
    entities: ContentEntity[];
    tokens: AngularContentToken[];
 }
+type AngularEllipsisSymbol = string | ((expanded: boolean) => string);
+type AngularCountEllipsisConfig = {
+    count: number;
+    rows?: never;
+    expandable?: boolean;
+    expanded?: boolean;
+    symbol?: AngularEllipsisSymbol;
+    onExpand?: (expanded: boolean) => void;
+};
+type AngularRowsEllipsisConfig = {
+    rows: number;
+    count?: never;
+    expandable?: boolean;
+    expanded?: boolean;
+    symbol?: AngularEllipsisSymbol;
+    onExpand?: (expanded: boolean) => void;
+};
+type AngularContentEllipsisConfig = AngularCountEllipsisConfig | AngularRowsEllipsisConfig | false;
+type AngularRenderResult = Node | string | number | null | undefined;
+type AngularMentionRenderer = (entity: MentionEntity, index: number) => AngularRenderResult;
+type AngularTagRenderer = (entity: TagEntity, index: number) => AngularRenderResult;
+type AngularLinkRenderer = (entity: LinkEntity, index: number) => AngularRenderResult;
+interface AngularContentTextProps {
+    className?: string;
+    weight?: "normal" | "bold";
+    text?: string | null;
+    ellipsis?: AngularContentEllipsisConfig;
+    blur?: boolean;
+    style?: Record<string, string | number> | null;
+    onView?: () => void;
+    renderMention?: AngularMentionRenderer;
+    renderTag?: AngularTagRenderer;
+    renderLink?: AngularLinkRenderer;
+}
+type AngularContentTextWithSuggestionsProps = Omit<AngularContentTextProps, "renderMention" | "renderTag"> & {
+    renderMention?: AngularMentionRenderer;
+    renderTag?: AngularTagRenderer;
+};
+type AngularContentTitleWithSuggestionsProps = Omit<AngularContentTextWithSuggestionsProps, "weight">;
+interface AngularContentTextRendererState {
+    props: AngularContentTextProps;
+    snapshot: AngularContentSnapshot;
+    expanded: boolean;
+}
+declare const toKebabCase: (value: string) => string;
 declare const buildAngularTagHref: (entity: TagEntity) => string;
+
 declare const createAngularContentTokens: (inputText: string | null | undefined) => AngularContentToken[];
 declare class AngularContentSuggestionsAdapter {
    snapshot(inputText: string | null | undefined): AngularContentSnapshot;
 }
+declare class AngularContentTextRenderer {
+    private host;
+    private props;
+    private expanded;
+    private viewed;
+    private hostInsideView;
+    private observer;
+    attach(host: HTMLElement, props?: AngularContentTextProps): AngularContentTextRendererState;
+    update(nextProps: AngularContentTextProps): AngularContentTextRendererState;
+    destroy(): void;
+    getState(): AngularContentTextRendererState;
+    private getText;
+    private createSnapshot;
+    private resolveEllipsisConfig;
+    private getMergedExpanded;
+    private createDefaultMentionNode;
+    private createDefaultTagNode;
+    private createDefaultLinkNode;
+    private renderEntity;
+    private buildTextNodes;
+    private applyBaseParagraphStyle;
+    private buildReadMoreButton;
+    private handleExpand;
+    private computeEntitySafeCutoff;
+    private hasVerticalOverflow;
+    private render;
+    private initObserver;
+    private emitOnViewIfNeeded;
+}
+declare class AngularContentTextWithSuggestionsRenderer extends AngularContentTextRenderer {
+}
+declare class AngularContentTitleWithSuggestionsRenderer {
+    private readonly renderer;
+    attach(host: HTMLElement, props?: AngularContentTitleWithSuggestionsProps): AngularContentTextRendererState;
+    update(props: AngularContentTitleWithSuggestionsProps): AngularContentTextRendererState;
+    destroy(): void;
+    getState(): AngularContentTextRendererState;
+    private normalizeProps;
+}

-export { type AngularContentSnapshot, AngularContentSuggestionsAdapter, type AngularContentToken, type AngularLinkToken, type AngularMentionToken, type AngularTagToken, type AngularTextToken, buildAngularTagHref, createAngularContentTokens };
+export { type AngularContentEllipsisConfig, type AngularContentSnapshot, AngularContentSuggestionsAdapter, type AngularContentTextProps, AngularContentTextRenderer, type AngularContentTextRendererState, type AngularContentTextWithSuggestionsProps, AngularContentTextWithSuggestionsRenderer, type AngularContentTitleWithSuggestionsProps, AngularContentTitleWithSuggestionsRenderer, type AngularContentToken, type AngularCountEllipsisConfig, type AngularEllipsisSymbol, type AngularLinkRenderer, type AngularLinkToken, type AngularMentionRenderer, type AngularMentionToken, type AngularRenderResult, type AngularRowsEllipsisConfig, type AngularTagRenderer, type AngularTagToken, type AngularTextToken, buildAngularTagHref, createAngularContentTokens, toKebabCase };
--- a/packages/content-suggestions/dist/angular/index.js
+++ b/packages/content-suggestions/dist/angular/index.js
@@ -74,6 +74,41 @@ var findAllEntities = (content) => {
 };

 // src/angular/index.ts
+var LINK_COLOR = "#1677ff";
+var READ_MORE_TEXT = "\u0427\u0438\u0442\u0430\u0442\u044C \u043F\u043E\u043B\u043D\u043E\u0441\u0442\u044C\u044E";
+var toKebabCase = (value) => value.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+var applyStyleObject = (element, styles) => {
+  if (!styles) {
+    return;
+  }
+  for (const [key, rawValue] of Object.entries(styles)) {
+    if (rawValue === null || rawValue === void 0) {
+      continue;
+    }
+    const styleValue = typeof rawValue === "number" ? `${rawValue}px` : String(rawValue);
+    if (key.startsWith("--")) {
+      element.style.setProperty(key, styleValue);
+      continue;
+    }
+    const cssKey = key.includes("-") ? key : toKebabCase(key);
+    element.style.setProperty(cssKey, styleValue);
+  }
+};
+var toNode = (value) => {
+  if (value === null || value === void 0) {
+    return null;
+  }
+  if (value instanceof Node) {
+    return value;
+  }
+  return document.createTextNode(String(value));
+};
+var resolveEllipsisSymbol = (symbol, expanded) => {
+  if (typeof symbol === "function") {
+    return symbol(expanded);
+  }
+  return symbol ?? READ_MORE_TEXT;
+};
 var buildAngularTagHref = (entity) => {
  return `/search/?query=${encodeURIComponent(entity.tag.toLowerCase())}`;
 };
@@ -131,7 +166,322 @@ var AngularContentSuggestionsAdapter = class {
    };
  }
 };
+var AngularContentTextRenderer = class {
+  host = null;
+  props = {};
+  expanded = false;
+  viewed = false;
+  hostInsideView = false;
+  observer = null;
+  attach(host, props = {}) {
+    this.destroy();
+    this.host = host;
+    this.props = { ...props };
+    this.expanded = false;
+    this.viewed = false;
+    this.hostInsideView = false;
+    this.initObserver();
+    this.render();
+    return this.getState();
+  }
+  update(nextProps) {
+    this.props = {
+      ...this.props,
+      ...nextProps
+    };
+    this.render();
+    return this.getState();
+  }
+  destroy() {
+    if (this.observer && this.host) {
+      this.observer.unobserve(this.host);
+      this.observer.disconnect();
+    }
+    this.observer = null;
+    if (this.host) {
+      this.host.innerHTML = "";
+    }
+    this.host = null;
+    this.props = {};
+    this.expanded = false;
+    this.viewed = false;
+    this.hostInsideView = false;
+  }
+  getState() {
+    return {
+      props: { ...this.props },
+      snapshot: this.createSnapshot(),
+      expanded: this.getMergedExpanded(this.resolveEllipsisConfig(), this.getText())
+    };
+  }
+  getText() {
+    return this.props.text ?? "";
+  }
+  createSnapshot() {
+    const text = this.getText();
+    const entities = findAllEntities(text);
+    const tokens = createAngularContentTokens(text);
+    return {
+      text,
+      entities,
+      tokens
+    };
+  }
+  resolveEllipsisConfig() {
+    const ellipsis = this.props.ellipsis;
+    if (!ellipsis || typeof ellipsis !== "object") {
+      return null;
+    }
+    return ellipsis;
+  }
+  getMergedExpanded(ellipsisConfig, text) {
+    const controlledExpanded = ellipsisConfig && typeof ellipsisConfig.expanded === "boolean" ? ellipsisConfig.expanded : void 0;
+    if (controlledExpanded !== void 0) {
+      return controlledExpanded;
+    }
+    if (ellipsisConfig && "count" in ellipsisConfig) {
+      const count = ellipsisConfig.count ?? 0;
+      if (count <= 0 || text.length <= count) {
+        return true;
+      }
+    }
+    return this.expanded;
+  }
+  createDefaultMentionNode(entity) {
+    const span = document.createElement("span");
+    span.style.color = LINK_COLOR;
+    span.style.fontWeight = this.props.weight === "bold" ? "700" : "400";
+    span.textContent = entity.displayText;
+    return span;
+  }
+  createDefaultTagNode(entity) {
+    const span = document.createElement("span");
+    span.style.color = LINK_COLOR;
+    span.style.fontWeight = this.props.weight === "bold" ? "700" : "400";
+    span.textContent = entity.text;
+    return span;
+  }
+  createDefaultLinkNode(entity) {
+    const anchor = document.createElement("a");
+    anchor.href = entity.url;
+    anchor.target = "_blank";
+    anchor.referrerPolicy = "no-referrer";
+    anchor.style.color = LINK_COLOR;
+    anchor.style.fontWeight = this.props.weight === "bold" ? "700" : "400";
+    anchor.textContent = entity.text;
+    return anchor;
+  }
+  renderEntity(entity, index) {
+    if (entity.type === "mention") {
+      const customNode2 = this.props.renderMention?.(entity, index);
+      return toNode(customNode2) ?? this.createDefaultMentionNode(entity);
+    }
+    if (entity.type === "tag") {
+      const customNode2 = this.props.renderTag?.(entity, index);
+      return toNode(customNode2) ?? this.createDefaultTagNode(entity);
+    }
+    const customNode = this.props.renderLink?.(entity, index);
+    return toNode(customNode) ?? this.createDefaultLinkNode(entity);
+  }
+  buildTextNodes(text, entities, upto = null) {
+    let lastIndex = 0;
+    const nodes = [];
+    for (const [index, entity] of entities.entries()) {
+      if (upto !== null && entity.start >= upto) {
+        break;
+      }
+      const textEnd = upto !== null ? Math.min(entity.start, upto) : entity.start;
+      if (entity.start > lastIndex && lastIndex < textEnd) {
+        nodes.push(document.createTextNode(text.slice(lastIndex, textEnd)));
+      }
+      if (upto === null || entity.end <= upto) {
+        const entityNode = this.renderEntity(entity, index);
+        if (entityNode) {
+          nodes.push(entityNode);
+        }
+      }
+      lastIndex = entity.end;
+    }
+    if (upto === null) {
+      if (lastIndex < text.length) {
+        nodes.push(document.createTextNode(text.slice(lastIndex)));
+      }
+    } else if (lastIndex < upto) {
+      nodes.push(document.createTextNode(text.slice(lastIndex, upto)));
+    }
+    return nodes;
+  }
+  applyBaseParagraphStyle(element) {
+    element.style.whiteSpace = "pre-wrap";
+    element.style.fontWeight = this.props.weight === "bold" ? "700" : "400";
+    element.style.setProperty("-webkit-touch-callout", "default");
+    element.style.setProperty("-webkit-user-select", "text");
+    element.style.setProperty("-khtml-user-select", "text");
+    element.style.setProperty("-moz-user-select", "text");
+    element.style.setProperty("-ms-user-select", "text");
+    element.style.setProperty("user-select", "text");
+    if (this.props.blur) {
+      element.style.filter = "blur(3px)";
+      element.style.setProperty("-webkit-user-select", "none");
+      element.style.setProperty("-khtml-user-select", "none");
+      element.style.setProperty("-moz-user-select", "none");
+      element.style.setProperty("-ms-user-select", "none");
+      element.style.setProperty("user-select", "none");
+      element.style.pointerEvents = "none";
+    }
+    applyStyleObject(element, this.props.style);
+  }
+  buildReadMoreButton(symbol) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = resolveEllipsisSymbol(symbol, this.expanded);
+    button.style.border = "0";
+    button.style.background = "none";
+    button.style.padding = "0";
+    button.style.marginLeft = "6px";
+    button.style.cursor = "pointer";
+    button.style.color = LINK_COLOR;
+    button.style.fontWeight = "700";
+    button.onclick = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.handleExpand();
+    };
+    return button;
+  }
+  handleExpand() {
+    const ellipsisConfig = this.resolveEllipsisConfig();
+    if (!ellipsisConfig) {
+      return;
+    }
+    this.expanded = true;
+    ellipsisConfig.onExpand?.(true);
+    this.render();
+  }
+  computeEntitySafeCutoff(count, entities) {
+    let cutoff = count;
+    let extended = true;
+    while (extended) {
+      extended = false;
+      for (const entity of entities) {
+        if (entity.start < cutoff && entity.end > cutoff) {
+          cutoff = entity.end;
+          extended = true;
+        }
+      }
+    }
+    return cutoff;
+  }
+  hasVerticalOverflow(element) {
+    return element.scrollHeight - element.clientHeight > 1;
+  }
+  render() {
+    if (!this.host) {
+      return;
+    }
+    const text = this.getText();
+    const entities = findAllEntities(text);
+    const ellipsisConfig = this.resolveEllipsisConfig();
+    const mergedExpanded = this.getMergedExpanded(ellipsisConfig, text);
+    const wrapper = document.createElement("div");
+    const paragraph = document.createElement("div");
+    if (this.props.className) {
+      paragraph.className = this.props.className;
+    }
+    this.applyBaseParagraphStyle(paragraph);
+    if (ellipsisConfig && "count" in ellipsisConfig) {
+      const count = ellipsisConfig.count ?? 0;
+      const shouldTruncate = !mergedExpanded && count > 0 && text.length > count;
+      if (shouldTruncate) {
+        const cutoff = this.computeEntitySafeCutoff(count, entities);
+        const nodes = this.buildTextNodes(text, entities, cutoff);
+        paragraph.append(...nodes);
+        paragraph.append(document.createTextNode("\u2026"));
+        if (ellipsisConfig.expandable) {
+          paragraph.append(this.buildReadMoreButton(ellipsisConfig.symbol));
+        }
+      } else {
+        paragraph.append(...this.buildTextNodes(text, entities));
+      }
+    } else {
+      paragraph.append(...this.buildTextNodes(text, entities));
+      if (ellipsisConfig && "rows" in ellipsisConfig && !mergedExpanded) {
+        paragraph.style.display = "-webkit-box";
+        paragraph.style.setProperty("-webkit-box-orient", "vertical");
+        paragraph.style.setProperty("-webkit-line-clamp", String(ellipsisConfig.rows));
+        paragraph.style.overflow = "hidden";
+        wrapper.append(paragraph);
+        this.host.replaceChildren(wrapper);
+        if (ellipsisConfig.expandable && this.hasVerticalOverflow(paragraph)) {
+          wrapper.append(this.buildReadMoreButton(ellipsisConfig.symbol));
+        }
+        this.emitOnViewIfNeeded(mergedExpanded);
+        return;
+      }
+    }
+    wrapper.append(paragraph);
+    this.host.replaceChildren(wrapper);
+    this.emitOnViewIfNeeded(mergedExpanded);
+  }
+  initObserver() {
+    if (!this.host) {
+      return;
+    }
+    if (typeof IntersectionObserver === "undefined") {
+      this.hostInsideView = true;
+      return;
+    }
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry) {
+          return;
+        }
+        if (entry.isIntersecting && !this.hostInsideView) {
+          this.hostInsideView = true;
+          const ellipsisConfig = this.resolveEllipsisConfig();
+          const mergedExpanded = this.getMergedExpanded(ellipsisConfig, this.getText());
+          this.emitOnViewIfNeeded(mergedExpanded);
+        }
+      },
+      { threshold: 0.5 }
+    );
+    this.observer.observe(this.host);
+  }
+  emitOnViewIfNeeded(mergedExpanded) {
+    if (!mergedExpanded || this.viewed || !this.hostInsideView) {
+      return;
+    }
+    this.viewed = true;
+    this.props.onView?.();
+  }
+};
+var AngularContentTextWithSuggestionsRenderer = class extends AngularContentTextRenderer {
+};
+var AngularContentTitleWithSuggestionsRenderer = class {
+  renderer = new AngularContentTextWithSuggestionsRenderer();
+  attach(host, props = {}) {
+    return this.renderer.attach(host, this.normalizeProps(props));
+  }
+  update(props) {
+    return this.renderer.update(this.normalizeProps(props));
+  }
+  destroy() {
+    this.renderer.destroy();
+  }
+  getState() {
+    return this.renderer.getState();
+  }
+  normalizeProps(props) {
+    return {
+      ...props,
+      weight: "bold",
+      blur: props.blur ?? false,
+      ellipsis: props.ellipsis === void 0 ? { rows: 2 } : props.ellipsis
+    };
+  }
+};

-export { AngularContentSuggestionsAdapter, buildAngularTagHref, createAngularContentTokens };
+export { AngularContentSuggestionsAdapter, AngularContentTextRenderer, AngularContentTextWithSuggestionsRenderer, AngularContentTitleWithSuggestionsRenderer, buildAngularTagHref, createAngularContentTokens, toKebabCase };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map
--- a/packages/content-suggestions/dist/angular/index.js.map
+++ b/packages/content-suggestions/dist/angular/index.js.map
--- a/packages/content-suggestions/package.json
+++ b/packages/content-suggestions/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@hublib-web/content-suggestions",
-  "version": "0.1.0",
+  "version": "0.1.2",
  "description": "Content text/title with mentions, tags and links for React and Angular",
  "license": "MIT",
  "type": "module",
--- a/packages/content-suggestions/src/angular/index.ts
+++ b/packages/content-suggestions/src/angular/index.ts
@@ -36,10 +36,140 @@ export interface AngularContentSnapshot {
  tokens: AngularContentToken[];
 }

-export const buildAngularTagHref = (entity: TagEntity): string => {
+export type AngularEllipsisSymbol = string | ((expanded: boolean) => string);
+
+export type AngularCountEllipsisConfig = {
+  count: number;
+  rows?: never;
+  expandable?: boolean;
+  expanded?: boolean;
+  symbol?: AngularEllipsisSymbol;
+  onExpand?: (expanded: boolean) => void;
+};
+
+export type AngularRowsEllipsisConfig = {
+  rows: number;
+  count?: never;
+  expandable?: boolean;
+  expanded?: boolean;
+  symbol?: AngularEllipsisSymbol;
+  onExpand?: (expanded: boolean) => void;
+};
+
+export type AngularContentEllipsisConfig =
+  | AngularCountEllipsisConfig
+  | AngularRowsEllipsisConfig
+  | false;
+
+export type AngularRenderResult = Node | string | number | null | undefined;
+
+export type AngularMentionRenderer = (
+  entity: MentionEntity,
+  index: number,
+) => AngularRenderResult;
+
+export type AngularTagRenderer = (
+  entity: TagEntity,
+  index: number,
+) => AngularRenderResult;
+
+export type AngularLinkRenderer = (
+  entity: LinkEntity,
+  index: number,
+) => AngularRenderResult;
+
+export interface AngularContentTextProps {
+  className?: string;
+  weight?: "normal" | "bold";
+  text?: string | null;
+  ellipsis?: AngularContentEllipsisConfig;
+  blur?: boolean;
+  style?: Record<string, string | number> | null;
+  onView?: () => void;
+  renderMention?: AngularMentionRenderer;
+  renderTag?: AngularTagRenderer;
+  renderLink?: AngularLinkRenderer;
+}
+
+export type AngularContentTextWithSuggestionsProps = Omit<
+  AngularContentTextProps,
+  "renderMention" | "renderTag"
+> & {
+  renderMention?: AngularMentionRenderer;
+  renderTag?: AngularTagRenderer;
+};
+
+export type AngularContentTitleWithSuggestionsProps = Omit<
+  AngularContentTextWithSuggestionsProps,
+  "weight"
+>;
+
+export interface AngularContentTextRendererState {
+  props: AngularContentTextProps;
+  snapshot: AngularContentSnapshot;
+  expanded: boolean;
+}
+
+const LINK_COLOR = "#1677ff";
+const READ_MORE_TEXT = "Читать полностью";
+
+const toKebabCase = (value: string) => value.replace(/[A-Z]/g, char => `-${char.toLowerCase()}`);
+
+const applyStyleObject = (
+  element: HTMLElement,
+  styles?: Record<string, string | number> | null,
+) => {
+  if (!styles) {
+    return;
+  }
+
+  for (const [key, rawValue] of Object.entries(styles)) {
+    if (rawValue === null || rawValue === undefined) {
+      continue;
+    }
+
+    const styleValue =
+      typeof rawValue === "number" ? `${rawValue}px` : String(rawValue);
+
+    if (key.startsWith("--")) {
+      element.style.setProperty(key, styleValue);
+      continue;
+    }
+
+    const cssKey = key.includes("-") ? key : toKebabCase(key);
+    element.style.setProperty(cssKey, styleValue);
+  }
+};
+
+const toNode = (value: AngularRenderResult): Node | null => {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  if (value instanceof Node) {
+    return value;
+  }
+
+  return document.createTextNode(String(value));
+};
+
+const resolveEllipsisSymbol = (
+  symbol: AngularEllipsisSymbol | undefined,
+  expanded: boolean,
+): string => {
+  if (typeof symbol === "function") {
+    return symbol(expanded);
+  }
+
+  return symbol ?? READ_MORE_TEXT;
+};
+
+const buildAngularTagHref = (entity: TagEntity): string => {
  return `/search/?query=${encodeURIComponent(entity.tag.toLowerCase())}`;
 };

+export { buildAngularTagHref };
+
 export const createAngularContentTokens = (
  inputText: string | null | undefined,
 ): AngularContentToken[] => {
@@ -104,3 +234,417 @@ export class AngularContentSuggestionsAdapter {
    };
  }
 }
+
+export class AngularContentTextRenderer {
+  private host: HTMLElement | null = null;
+  private props: AngularContentTextProps = {};
+  private expanded = false;
+  private viewed = false;
+  private hostInsideView = false;
+  private observer: IntersectionObserver | null = null;
+
+  attach(host: HTMLElement, props: AngularContentTextProps = {}): AngularContentTextRendererState {
+    this.destroy();
+
+    this.host = host;
+    this.props = { ...props };
+    this.expanded = false;
+    this.viewed = false;
+    this.hostInsideView = false;
+
+    this.initObserver();
+    this.render();
+
+    return this.getState();
+  }
+
+  update(nextProps: AngularContentTextProps): AngularContentTextRendererState {
+    this.props = {
+      ...this.props,
+      ...nextProps,
+    };
+
+    this.render();
+
+    return this.getState();
+  }
+
+  destroy(): void {
+    if (this.observer && this.host) {
+      this.observer.unobserve(this.host);
+      this.observer.disconnect();
+    }
+
+    this.observer = null;
+
+    if (this.host) {
+      this.host.innerHTML = "";
+    }
+
+    this.host = null;
+    this.props = {};
+    this.expanded = false;
+    this.viewed = false;
+    this.hostInsideView = false;
+  }
+
+  getState(): AngularContentTextRendererState {
+    return {
+      props: { ...this.props },
+      snapshot: this.createSnapshot(),
+      expanded: this.getMergedExpanded(this.resolveEllipsisConfig(), this.getText()),
+    };
+  }
+
+  private getText(): string {
+    return this.props.text ?? "";
+  }
+
+  private createSnapshot(): AngularContentSnapshot {
+    const text = this.getText();
+    const entities = findAllEntities(text);
+    const tokens = createAngularContentTokens(text);
+
+    return {
+      text,
+      entities,
+      tokens,
+    };
+  }
+
+  private resolveEllipsisConfig():
+    | AngularCountEllipsisConfig
+    | AngularRowsEllipsisConfig
+    | null {
+    const ellipsis = this.props.ellipsis;
+
+    if (!ellipsis || typeof ellipsis !== "object") {
+      return null;
+    }
+
+    return ellipsis;
+  }
+
+  private getMergedExpanded(
+    ellipsisConfig: AngularCountEllipsisConfig | AngularRowsEllipsisConfig | null,
+    text: string,
+  ): boolean {
+    const controlledExpanded =
+      ellipsisConfig && typeof ellipsisConfig.expanded === "boolean"
+        ? ellipsisConfig.expanded
+        : undefined;
+
+    if (controlledExpanded !== undefined) {
+      return controlledExpanded;
+    }
+
+    if (ellipsisConfig && "count" in ellipsisConfig) {
+      const count = ellipsisConfig.count ?? 0;
+      if (count <= 0 || text.length <= count) {
+        return true;
+      }
+    }
+
+    return this.expanded;
+  }
+
+  private createDefaultMentionNode(entity: MentionEntity): Node {
+    const span = document.createElement("span");
+    span.style.color = LINK_COLOR;
+    span.style.fontWeight = this.props.weight === "bold" ? "700" : "400";
+    span.textContent = entity.displayText;
+    return span;
+  }
+
+  private createDefaultTagNode(entity: TagEntity): Node {
+    const span = document.createElement("span");
+    span.style.color = LINK_COLOR;
+    span.style.fontWeight = this.props.weight === "bold" ? "700" : "400";
+    span.textContent = entity.text;
+    return span;
+  }
+
+  private createDefaultLinkNode(entity: LinkEntity): Node {
+    const anchor = document.createElement("a");
+    anchor.href = entity.url;
+    anchor.target = "_blank";
+    anchor.referrerPolicy = "no-referrer";
+    anchor.style.color = LINK_COLOR;
+    anchor.style.fontWeight = this.props.weight === "bold" ? "700" : "400";
+    anchor.textContent = entity.text;
+    return anchor;
+  }
+
+  private renderEntity(entity: ContentEntity, index: number): Node | null {
+    if (entity.type === "mention") {
+      const customNode = this.props.renderMention?.(entity, index);
+      return toNode(customNode) ?? this.createDefaultMentionNode(entity);
+    }
+
+    if (entity.type === "tag") {
+      const customNode = this.props.renderTag?.(entity, index);
+      return toNode(customNode) ?? this.createDefaultTagNode(entity);
+    }
+
+    const customNode = this.props.renderLink?.(entity, index);
+    return toNode(customNode) ?? this.createDefaultLinkNode(entity);
+  }
+
+  private buildTextNodes(
+    text: string,
+    entities: ContentEntity[],
+    upto: number | null = null,
+  ): Node[] {
+    let lastIndex = 0;
+    const nodes: Node[] = [];
+
+    for (const [index, entity] of entities.entries()) {
+      if (upto !== null && entity.start >= upto) {
+        break;
+      }
+
+      const textEnd = upto !== null ? Math.min(entity.start, upto) : entity.start;
+      if (entity.start > lastIndex && lastIndex < textEnd) {
+        nodes.push(document.createTextNode(text.slice(lastIndex, textEnd)));
+      }
+
+      if (upto === null || entity.end <= upto) {
+        const entityNode = this.renderEntity(entity, index);
+        if (entityNode) {
+          nodes.push(entityNode);
+        }
+      }
+
+      lastIndex = entity.end;
+    }
+
+    if (upto === null) {
+      if (lastIndex < text.length) {
+        nodes.push(document.createTextNode(text.slice(lastIndex)));
+      }
+    } else if (lastIndex < upto) {
+      nodes.push(document.createTextNode(text.slice(lastIndex, upto)));
+    }
+
+    return nodes;
+  }
+
+  private applyBaseParagraphStyle(element: HTMLElement): void {
+    element.style.whiteSpace = "pre-wrap";
+    element.style.fontWeight = this.props.weight === "bold" ? "700" : "400";
+    element.style.setProperty("-webkit-touch-callout", "default");
+    element.style.setProperty("-webkit-user-select", "text");
+    element.style.setProperty("-khtml-user-select", "text");
+    element.style.setProperty("-moz-user-select", "text");
+    element.style.setProperty("-ms-user-select", "text");
+    element.style.setProperty("user-select", "text");
+
+    if (this.props.blur) {
+      element.style.filter = "blur(3px)";
+      element.style.setProperty("-webkit-user-select", "none");
+      element.style.setProperty("-khtml-user-select", "none");
+      element.style.setProperty("-moz-user-select", "none");
+      element.style.setProperty("-ms-user-select", "none");
+      element.style.setProperty("user-select", "none");
+      element.style.pointerEvents = "none";
+    }
+
+    applyStyleObject(element, this.props.style);
+  }
+
+  private buildReadMoreButton(symbol: AngularEllipsisSymbol | undefined): HTMLButtonElement {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.textContent = resolveEllipsisSymbol(symbol, this.expanded);
+    button.style.border = "0";
+    button.style.background = "none";
+    button.style.padding = "0";
+    button.style.marginLeft = "6px";
+    button.style.cursor = "pointer";
+    button.style.color = LINK_COLOR;
+    button.style.fontWeight = "700";
+    button.onclick = event => {
+      event.preventDefault();
+      event.stopPropagation();
+      this.handleExpand();
+    };
+    return button;
+  }
+
+  private handleExpand(): void {
+    const ellipsisConfig = this.resolveEllipsisConfig();
+
+    if (!ellipsisConfig) {
+      return;
+    }
+
+    this.expanded = true;
+    ellipsisConfig.onExpand?.(true);
+    this.render();
+  }
+
+  private computeEntitySafeCutoff(
+    count: number,
+    entities: ContentEntity[],
+  ): number {
+    let cutoff = count;
+    let extended = true;
+
+    while (extended) {
+      extended = false;
+
+      for (const entity of entities) {
+        if (entity.start < cutoff && entity.end > cutoff) {
+          cutoff = entity.end;
+          extended = true;
+        }
+      }
+    }
+
+    return cutoff;
+  }
+
+  private hasVerticalOverflow(element: HTMLElement): boolean {
+    return element.scrollHeight - element.clientHeight > 1;
+  }
+
+  private render(): void {
+    if (!this.host) {
+      return;
+    }
+
+    const text = this.getText();
+    const entities = findAllEntities(text);
+    const ellipsisConfig = this.resolveEllipsisConfig();
+    const mergedExpanded = this.getMergedExpanded(ellipsisConfig, text);
+
+    const wrapper = document.createElement("div");
+    const paragraph = document.createElement("div");
+
+    if (this.props.className) {
+      paragraph.className = this.props.className;
+    }
+
+    this.applyBaseParagraphStyle(paragraph);
+
+    if (ellipsisConfig && "count" in ellipsisConfig) {
+      const count = ellipsisConfig.count ?? 0;
+      const shouldTruncate = !mergedExpanded && count > 0 && text.length > count;
+
+      if (shouldTruncate) {
+        const cutoff = this.computeEntitySafeCutoff(count, entities);
+        const nodes = this.buildTextNodes(text, entities, cutoff);
+
+        paragraph.append(...nodes);
+        paragraph.append(document.createTextNode("…"));
+
+        if (ellipsisConfig.expandable) {
+          paragraph.append(this.buildReadMoreButton(ellipsisConfig.symbol));
+        }
+      } else {
+        paragraph.append(...this.buildTextNodes(text, entities));
+      }
+    } else {
+      paragraph.append(...this.buildTextNodes(text, entities));
+
+      if (ellipsisConfig && "rows" in ellipsisConfig && !mergedExpanded) {
+        paragraph.style.display = "-webkit-box";
+        paragraph.style.setProperty("-webkit-box-orient", "vertical");
+        paragraph.style.setProperty("-webkit-line-clamp", String(ellipsisConfig.rows));
+        paragraph.style.overflow = "hidden";
+
+        // Важно: сначала рендерим paragraph в DOM, потом меряем реальный overflow.
+        wrapper.append(paragraph);
+        this.host.replaceChildren(wrapper);
+
+        if (ellipsisConfig.expandable && this.hasVerticalOverflow(paragraph)) {
+          wrapper.append(this.buildReadMoreButton(ellipsisConfig.symbol));
+        }
+
+        this.emitOnViewIfNeeded(mergedExpanded);
+        return;
+      }
+    }
+
+    wrapper.append(paragraph);
+    this.host.replaceChildren(wrapper);
+    this.emitOnViewIfNeeded(mergedExpanded);
+  }
+
+  private initObserver(): void {
+    if (!this.host) {
+      return;
+    }
+
+    if (typeof IntersectionObserver === "undefined") {
+      this.hostInsideView = true;
+      return;
+    }
+
+    this.observer = new IntersectionObserver(
+      entries => {
+        const entry = entries[0];
+        if (!entry) {
+          return;
+        }
+
+        if (entry.isIntersecting && !this.hostInsideView) {
+          this.hostInsideView = true;
+          const ellipsisConfig = this.resolveEllipsisConfig();
+          const mergedExpanded = this.getMergedExpanded(ellipsisConfig, this.getText());
+          this.emitOnViewIfNeeded(mergedExpanded);
+        }
+      },
+      { threshold: 0.5 },
+    );
+
+    this.observer.observe(this.host);
+  }
+
+  private emitOnViewIfNeeded(mergedExpanded: boolean): void {
+    if (!mergedExpanded || this.viewed || !this.hostInsideView) {
+      return;
+    }
+
+    this.viewed = true;
+    this.props.onView?.();
+  }
+}
+
+export class AngularContentTextWithSuggestionsRenderer extends AngularContentTextRenderer {}
+
+export class AngularContentTitleWithSuggestionsRenderer {
+  private readonly renderer = new AngularContentTextWithSuggestionsRenderer();
+
+  attach(
+    host: HTMLElement,
+    props: AngularContentTitleWithSuggestionsProps = {},
+  ): AngularContentTextRendererState {
+    return this.renderer.attach(host, this.normalizeProps(props));
+  }
+
+  update(props: AngularContentTitleWithSuggestionsProps): AngularContentTextRendererState {
+    return this.renderer.update(this.normalizeProps(props));
+  }
+
+  destroy(): void {
+    this.renderer.destroy();
+  }
+
+  getState(): AngularContentTextRendererState {
+    return this.renderer.getState();
+  }
+
+  private normalizeProps(
+    props: AngularContentTitleWithSuggestionsProps,
+  ): AngularContentTextWithSuggestionsProps {
+    return {
+      ...props,
+      weight: "bold",
+      blur: props.blur ?? false,
+      ellipsis: props.ellipsis === undefined ? { rows: 2 } : props.ellipsis,
+    };
+  }
+}
+
+export { toKebabCase };
--- a/packages/video-player/dist/core/format-time.d.ts.map
+++ b/packages/video-player/dist/core/format-time.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"format-time.d.ts","sourceRoot":"","sources":["../../src/core/format-time.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,GAAI,SAAS,MAAM,WAWzC,CAAC"}
+{"version":3,"file":"format-time.d.ts","sourceRoot":"","sources":["../../src/core/format-time.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,GAAI,SAAS,MAAM,WAazC,CAAC"}
--- a/packages/video-player/dist/core/format-time.js
+++ b/packages/video-player/dist/core/format-time.js
@@ -1,9 +1,10 @@
 export const formatTime = (seconds) => {
+    const safeSeconds = Number.isFinite(seconds) && seconds > 0 ? seconds : 0;
    const pad = (num) => String(num).padStart(2, "0");
-    const hrs = Math.floor(seconds / 3600);
-    const mins = Math.floor((seconds % 3600) / 60);
-    const secs = Math.floor(seconds % 60);
-    if (seconds < 3600) {
+    const hrs = Math.floor(safeSeconds / 3600);
+    const mins = Math.floor((safeSeconds % 3600) / 60);
+    const secs = Math.floor(safeSeconds % 60);
+    if (safeSeconds < 3600) {
        return `${pad(mins)}:${pad(secs)}`;
    }
    return `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
--- a/packages/video-player/dist/core/format-time.js.map
+++ b/packages/video-player/dist/core/format-time.js.map
@@ -1 +1 @@
-{"version":3,"file":"format-time.js","sourceRoot":"","sources":["../../src/core/format-time.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAe,EAAE,EAAE;IAC7C,MAAM,GAAG,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1D,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACvC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAC/C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;IAEtC,IAAI,OAAO,GAAG,IAAI,EAAE,CAAC;QACpB,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;IACpC,CAAC;IAED,OAAO,GAAG,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;AAChD,CAAC,CAAC"}
+{"version":3,"file":"format-time.js","sourceRoot":"","sources":["../../src/core/format-time.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAe,EAAE,EAAE;IAC7C,MAAM,WAAW,GAChB,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,GAAG,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1D,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC,CAAC;IAE1C,IAAI,WAAW,GAAG,IAAI,EAAE,CAAC;QACxB,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;IACpC,CAAC;IAED,OAAO,GAAG,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;AAChD,CAAC,CAAC"}
--- a/packages/video-player/dist/core/player-runtime.d.ts
+++ b/packages/video-player/dist/core/player-runtime.d.ts
@@ -105,6 +105,8 @@ export declare class VideoPlayerRuntime {
    private currentEngine;
    private currentSource;
    private vhsAuthTokenRef;
+    private hlsAuthTokenRef;
+    private hlsTokenResolvePromise;
    private vhsRequestCleanupRef;
    private visibilityObserverRef;
    private originalPlayRef;
@@ -116,6 +118,8 @@ export declare class VideoPlayerRuntime {
    dispose(): void;
    getState(): VideoPlayerRuntimeState;
    getPlayer(): VideoPlayerRuntimePlayer | null;
+    private ensureHlsAuthToken;
+    private refreshHlsAuthTokenInBackground;
    private emit;
    private tryPlay;
    private resolveEngine;
@@ -127,6 +131,7 @@ export declare class VideoPlayerRuntime {
    private attachDurationAndPlayStartHooks;
    private loadCurrentSource;
    private buildHlsConfig;
+    private syncLiveUi;
    private loadHlsSource;
    private loadVideoJsSource;
    private resetDeferredHlsLoading;
--- a/packages/video-player/dist/core/player-runtime.d.ts.map
+++ b/packages/video-player/dist/core/player-runtime.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"player-runtime.d.ts","sourceRoot":"","sources":["../../src/core/player-runtime.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"player-runtime.d.ts","sourceRoot":"","sources":["../../src/core/player-runtime.ts"],"names":[],"mappings":"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"}
--- a/packages/video-player/dist/core/player-runtime.js
+++ b/packages/video-player/dist/core/player-runtime.js
@@ -12,37 +12,30 @@ const detectIOS = () => {
    const userAgent = navigator.userAgent || "";
    return /iPad|iPhone|iPod/.test(userAgent);
 };
-const createAuthPlaylistLoader = ({ debug, }) => {
+const createAuthPlaylistLoader = ({ debug, getToken, refreshToken, }) => {
    const BaseLoader = Hls.DefaultConfig.loader;
    return class AuthPlaylistLoader extends BaseLoader {
        constructor(config) {
            super({ ...config, debug: debug ?? false });
        }
        load(context, config, callbacks) {
-            const start = async () => {
-                try {
-                    const token = await resolveVideoPlayerToken();
-                    if (token) {
-                        context.headers = {
-                            ...(context.headers ?? {}),
-                            Authorization: `Bearer ${token}`,
-                        };
-                    }
+            try {
+                const token = getToken();
+                if (token) {
+                    context.headers = {
+                        ...(context.headers ?? {}),
+                        Authorization: `Bearer ${token}`,
+                    };
                }
-                catch (error) {
-                    if (debug) {
-                        console.warn("[VideoRuntime:HLS] Failed to append auth header to playlist request", error);
-                    }
-                }
-                finally {
-                    super.load(context, config, callbacks);
-                }
-            };
-            void start().catch(error => {
+            }
+            catch (error) {
                if (debug) {
-                    console.error("[VideoRuntime:HLS] Playlist loader start failed", error);
+                    console.warn("[VideoRuntime:HLS] Failed to append auth header to playlist request", error);
                }
-            });
+            }
+            // Critical path must stay sync for hls.js loader lifecycle.
+            super.load(context, config, callbacks);
+            refreshToken();
        }
    };
 };
@@ -82,6 +75,8 @@ export class VideoPlayerRuntime {
        this.currentEngine = null;
        this.currentSource = null;
        this.vhsAuthTokenRef = null;
+        this.hlsAuthTokenRef = null;
+        this.hlsTokenResolvePromise = null;
        this.vhsRequestCleanupRef = null;
        this.visibilityObserverRef = null;
        this.originalPlayRef = null;
@@ -147,6 +142,8 @@ export class VideoPlayerRuntime {
        this.vhsRequestCleanupRef?.();
        this.vhsRequestCleanupRef = null;
        this.vhsAuthTokenRef = null;
+        this.hlsAuthTokenRef = null;
+        this.hlsTokenResolvePromise = null;
        if (this.playerRef) {
            this.playerRef.dispose();
        }
@@ -171,6 +168,29 @@ export class VideoPlayerRuntime {
    getPlayer() {
        return this.playerRef;
    }
+    async ensureHlsAuthToken() {
+        if (this.hlsTokenResolvePromise !== null) {
+            await this.hlsTokenResolvePromise;
+            return;
+        }
+        this.hlsTokenResolvePromise = resolveVideoPlayerToken()
+            .then(token => {
+            this.hlsAuthTokenRef = token ?? null;
+        })
+            .catch(() => {
+            this.hlsAuthTokenRef = null;
+        })
+            .finally(() => {
+            this.hlsTokenResolvePromise = null;
+        });
+        await this.hlsTokenResolvePromise;
+    }
+    refreshHlsAuthTokenInBackground() {
+        if (this.hlsTokenResolvePromise !== null) {
+            return;
+        }
+        void this.ensureHlsAuthToken();
+    }
    emit(event, payload) {
        const listeners = this.eventListeners.get(event);
        if (!listeners?.size) {
@@ -417,7 +437,11 @@ export class VideoPlayerRuntime {
        const preferHqSettings = options.preferHQ
            ? { abrEwmaDefaultEstimate: 10690560 * 1.2 }
            : {};
-        const playlistLoader = createAuthPlaylistLoader({ debug: options.debug });
+        const playlistLoader = createAuthPlaylistLoader({
+            debug: options.debug,
+            getToken: () => this.hlsAuthTokenRef,
+            refreshToken: () => this.refreshHlsAuthTokenInBackground(),
+        });
        return {
            debug: options.debug,
            enableWorker: true,
@@ -441,6 +465,24 @@ export class VideoPlayerRuntime {
            pLoader: playlistLoader,
        };
    }
+    syncLiveUi(player, video, isLive) {
+        const wrapper = video.parentElement;
+        if (isLive) {
+            wrapper?.classList.add("vjs-hls-live", "vjs-live");
+            player.duration(Infinity);
+            if (player.liveTracker) {
+                player.liveTracker.isLive_ = true;
+                player.liveTracker.startTracking();
+                player.liveTracker.trigger("durationchange");
+            }
+            return;
+        }
+        wrapper?.classList.remove("vjs-hls-live", "vjs-live");
+        if (player.liveTracker) {
+            player.liveTracker.isLive_ = false;
+            player.liveTracker.trigger("durationchange");
+        }
+    }
    async loadHlsSource() {
        const options = this.options;
        const player = this.playerRef;
@@ -456,6 +498,8 @@ export class VideoPlayerRuntime {
            await this.loadVideoJsSource();
            return;
        }
+        // Resolve async token before starting HLS manifest load.
+        await this.ensureHlsAuthToken();
        const setupHls = () => {
            if (this.hlsLoaded) {
                return;
@@ -482,19 +526,27 @@ export class VideoPlayerRuntime {
                    duration: details?.totalduration,
                    live: details?.live,
                });
-                if (details?.live) {
-                    video.parentElement?.classList.add("vjs-hls-live", "vjs-live");
-                    player.duration(Infinity);
-                    if (player.liveTracker) {
-                        player.liveTracker.isLive_ = true;
-                        player.liveTracker.startTracking();
-                        player.liveTracker.trigger("durationchange");
-                    }
+                if (typeof details?.live === "boolean") {
+                    this.syncLiveUi(player, video, details.live);
                }
                if (options.initialTime > 0) {
                    hls.startLoad(options.initialTime);
                }
            });
+            hls.on(Hls.Events.LEVEL_LOADED, (_event, data) => {
+                const details = data?.details;
+                if (!details) {
+                    return;
+                }
+                this.emit("manifestloaded", {
+                    engine: "hls",
+                    duration: details.totalduration,
+                    live: details.live,
+                });
+                if (typeof details.live === "boolean") {
+                    this.syncLiveUi(player, video, details.live);
+                }
+            });
            hls.on(Hls.Events.FRAG_CHANGED, () => {
                if (player.liveTracker) {
                    player.liveTracker.atLiveEdge = isAtLiveEdge;
@@ -696,10 +748,8 @@ export class VideoPlayerRuntime {
            const videoElement = this.playerRef
                .el()
                ?.querySelector("video");
-            videoElement?.parentElement?.classList.remove("vjs-hls-live", "vjs-live");
-            if (this.playerRef.liveTracker) {
-                this.playerRef.liveTracker.isLive_ = false;
-                this.playerRef.liveTracker.trigger("durationchange");
+            if (videoElement) {
+                this.syncLiveUi(this.playerRef, videoElement, false);
            }
        }
    }
--- a/packages/video-player/dist/core/player-runtime.js.map
+++ b/packages/video-player/dist/core/player-runtime.js.map
--- a/packages/video-player/dist/react/video-player/components/video-js/utils.d.ts.map
+++ b/packages/video-player/dist/react/video-player/components/video-js/utils.d.ts.map
@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/react/video-player/components/video-js/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,GAAI,SAAS,MAAM,WASzC,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/react/video-player/components/video-js/utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,GAAI,SAAS,MAAM,WAWzC,CAAC"}
--- a/packages/video-player/dist/react/video-player/components/video-js/utils.js
+++ b/packages/video-player/dist/react/video-player/components/video-js/utils.js
@@ -1,9 +1,10 @@
 export const formatTime = (seconds) => {
+    const safeSeconds = Number.isFinite(seconds) && seconds > 0 ? seconds : 0;
    const pad = (num) => String(num).padStart(2, "0");
-    const hrs = Math.floor(seconds / 3600);
-    const mins = Math.floor((seconds % 3600) / 60);
-    const secs = Math.floor(seconds % 60);
-    if (seconds < 3600) {
+    const hrs = Math.floor(safeSeconds / 3600);
+    const mins = Math.floor((safeSeconds % 3600) / 60);
+    const secs = Math.floor(safeSeconds % 60);
+    if (safeSeconds < 3600) {
        return `${pad(mins)}:${pad(secs)}`;
    }
    return `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
--- a/packages/video-player/dist/react/video-player/components/video-js/utils.js.map
+++ b/packages/video-player/dist/react/video-player/components/video-js/utils.js.map
@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/react/video-player/components/video-js/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAe,EAAE,EAAE;IAC7C,MAAM,GAAG,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1D,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACvC,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IAC/C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC;IACtC,IAAI,OAAO,GAAG,IAAI,EAAE,CAAC;QACpB,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;IACpC,CAAC;IACD,OAAO,GAAG,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;AAChD,CAAC,CAAC"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../src/react/video-player/components/video-js/utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAe,EAAE,EAAE;IAC7C,MAAM,WAAW,GAChB,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,GAAG,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IAC1D,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,EAAE,CAAC,CAAC;IAC1C,IAAI,WAAW,GAAG,IAAI,EAAE,CAAC;QACxB,OAAO,GAAG,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;IACpC,CAAC;IACD,OAAO,GAAG,GAAG,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC;AAChD,CAAC,CAAC"}
--- a/packages/video-player/package.json
+++ b/packages/video-player/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@hublib-web/video-player",
-  "version": "0.1.0",
+  "version": "0.1.3",
  "description": "Cross-framework video player package for React and Angular",
  "license": "MIT",
  "type": "module",
@@ -10,7 +10,8 @@
  "sideEffects": true,
  "files": [
    "dist",
-    "README.md"
+    "README.md",
+    "scripts"
  ],
  "typesVersions": {
    "*": {
@@ -48,6 +49,7 @@
    }
  },
  "scripts": {
+    "postinstall": "node ./scripts/apply-videojs-patch.mjs",
    "build": "yarn clean && node ./scripts/build.mjs",
    "clean": "rm -rf dist storybook-static",
    "typecheck": "tsc -p ./tsconfig.json --noEmit",
--- a/packages/video-player/scripts/apply-videojs-patch.mjs
+++ b/packages/video-player/scripts/apply-videojs-patch.mjs
@@ -0,0 +1,45 @@
+import { readFileSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+
+const originalSnippet = `    const originalAbort = request.abort;
+    request.abort = function () {
+      request.aborted = true;
+      return originalAbort.apply(request, arguments);
+    };`;
+
+const patchedSnippet = `    // const originalAbort = request.abort;
+    // request.abort = function () {
+    //   request.aborted = true;
+    //   return originalAbort.apply(request, arguments);
+    // };`;
+
+function run() {
+  const packageJsonPath = require.resolve("video.js/package.json");
+  const videoEsPath = join(dirname(packageJsonPath), "dist", "video.es.js");
+  const source = readFileSync(videoEsPath, "utf8");
+
+  if (source.includes(patchedSnippet)) {
+    console.log("[video-player] video.js patch already applied");
+    return;
+  }
+
+  if (!source.includes(originalSnippet)) {
+    throw new Error(
+      "[video-player] Cannot apply video.js patch: target snippet not found. Expected video.js 8.23.4 source."
+    );
+  }
+
+  const patched = source.replace(originalSnippet, patchedSnippet);
+  writeFileSync(videoEsPath, patched, "utf8");
+  console.log("[video-player] Applied video.js patch");
+}
+
+try {
+  run();
+} catch (error) {
+  console.error(error instanceof Error ? error.message : String(error));
+  process.exit(1);
+}
--- a/packages/video-player/src/core/format-time.ts
+++ b/packages/video-player/src/core/format-time.ts
@@ -1,10 +1,12 @@
 export const formatTime = (seconds: number) => {
+	const safeSeconds =
+		Number.isFinite(seconds) && seconds > 0 ? seconds : 0;
 	const pad = (num: number) => String(num).padStart(2, "0");
-	const hrs = Math.floor(seconds / 3600);
-	const mins = Math.floor((seconds % 3600) / 60);
-	const secs = Math.floor(seconds % 60);
+	const hrs = Math.floor(safeSeconds / 3600);
+	const mins = Math.floor((safeSeconds % 3600) / 60);
+	const secs = Math.floor(safeSeconds % 60);

-	if (seconds < 3600) {
+	if (safeSeconds < 3600) {
 		return `${pad(mins)}:${pad(secs)}`;
 	}

--- a/packages/video-player/src/core/player-runtime.ts
+++ b/packages/video-player/src/core/player-runtime.ts
@@ -143,8 +143,12 @@ const detectIOS = () => {

 const createAuthPlaylistLoader = ({
 	debug,
+	getToken,
+	refreshToken,
 }: {
 	debug?: boolean;
+	getToken: () => string | null;
+	refreshToken: () => void;
 }): PlaylistLoaderConstructor => {
 	const BaseLoader = Hls.DefaultConfig.loader as unknown as new (
 		config: HlsConfig,
@@ -155,37 +159,31 @@ const createAuthPlaylistLoader = ({
 			super({ ...config, debug: debug ?? false });
 		}

-		load(
+		override load(
 			context: PlaylistLoaderContext,
 			config: LoaderConfiguration,
 			callbacks: LoaderCallbacks<PlaylistLoaderContext>,
 		): void {
-			const start = async () => {
-				try {
-					const token = await resolveVideoPlayerToken();
-					if (token) {
-						context.headers = {
-							...(context.headers ?? {}),
-							Authorization: `Bearer ${token}`,
-						};
-					}
-				} catch (error) {
-					if (debug) {
-						console.warn(
-							"[VideoRuntime:HLS] Failed to append auth header to playlist request",
-							error,
-						);
-					}
-				} finally {
-					super.load(context, config, callbacks);
+			try {
+				const token = getToken();
+				if (token) {
+					context.headers = {
+						...(context.headers ?? {}),
+						Authorization: `Bearer ${token}`,
+					};
 				}
-			};
-
-			void start().catch(error => {
+			} catch (error) {
 				if (debug) {
-					console.error("[VideoRuntime:HLS] Playlist loader start failed", error);
+					console.warn(
+						"[VideoRuntime:HLS] Failed to append auth header to playlist request",
+						error,
+					);
 				}
-			});
+			}
+
+			// Critical path must stay sync for hls.js loader lifecycle.
+			super.load(context, config, callbacks);
+			refreshToken();
 		}
 	};
 };
@@ -232,6 +230,8 @@ export class VideoPlayerRuntime {
 	private currentEngine: PlaybackEngine | null = null;
 	private currentSource: VideoPlayerRuntimeSource | null = null;
 	private vhsAuthTokenRef: string | null | undefined = null;
+	private hlsAuthTokenRef: string | null = null;
+	private hlsTokenResolvePromise: Promise<void> | null = null;
 	private vhsRequestCleanupRef: (() => void) | null = null;
 	private visibilityObserverRef: IntersectionObserver | null = null;
 	private originalPlayRef: VideoPlayerRuntimePlayer["play"] | null = null;
@@ -328,6 +328,8 @@ export class VideoPlayerRuntime {
 		this.vhsRequestCleanupRef?.();
 		this.vhsRequestCleanupRef = null;
 		this.vhsAuthTokenRef = null;
+		this.hlsAuthTokenRef = null;
+		this.hlsTokenResolvePromise = null;

 		if (this.playerRef) {
 			this.playerRef.dispose();
@@ -358,6 +360,34 @@ export class VideoPlayerRuntime {
 		return this.playerRef;
 	}

+	private async ensureHlsAuthToken(): Promise<void> {
+		if (this.hlsTokenResolvePromise !== null) {
+			await this.hlsTokenResolvePromise;
+			return;
+		}
+
+		this.hlsTokenResolvePromise = resolveVideoPlayerToken()
+			.then(token => {
+				this.hlsAuthTokenRef = token ?? null;
+			})
+			.catch(() => {
+				this.hlsAuthTokenRef = null;
+			})
+			.finally(() => {
+				this.hlsTokenResolvePromise = null;
+			});
+
+		await this.hlsTokenResolvePromise;
+	}
+
+	private refreshHlsAuthTokenInBackground(): void {
+		if (this.hlsTokenResolvePromise !== null) {
+			return;
+		}
+
+		void this.ensureHlsAuthToken();
+	}
+
 	private emit<K extends keyof VideoPlayerRuntimeEventMap>(
 		event: K,
 		payload: VideoPlayerRuntimeEventMap[K],
@@ -658,7 +688,11 @@ export class VideoPlayerRuntime {
 			? { abrEwmaDefaultEstimate: 10690560 * 1.2 }
 			: {};

-		const playlistLoader = createAuthPlaylistLoader({ debug: options.debug });
+		const playlistLoader = createAuthPlaylistLoader({
+			debug: options.debug,
+			getToken: () => this.hlsAuthTokenRef,
+			refreshToken: () => this.refreshHlsAuthTokenInBackground(),
+		});

 		return {
 			debug: options.debug,
@@ -684,6 +718,31 @@ export class VideoPlayerRuntime {
 		};
 	}

+	private syncLiveUi(
+		player: VideoPlayerRuntimePlayer,
+		video: HTMLVideoElement,
+		isLive: boolean,
+	) {
+		const wrapper = video.parentElement;
+
+		if (isLive) {
+			wrapper?.classList.add("vjs-hls-live", "vjs-live");
+			player.duration(Infinity);
+			if (player.liveTracker) {
+				player.liveTracker.isLive_ = true;
+				player.liveTracker.startTracking();
+				player.liveTracker.trigger("durationchange");
+			}
+			return;
+		}
+
+		wrapper?.classList.remove("vjs-hls-live", "vjs-live");
+		if (player.liveTracker) {
+			player.liveTracker.isLive_ = false;
+			player.liveTracker.trigger("durationchange");
+		}
+	}
+
 	private async loadHlsSource() {
 		const options = this.options;
 		const player = this.playerRef;
@@ -702,6 +761,9 @@ export class VideoPlayerRuntime {
 			return;
 		}

+		// Resolve async token before starting HLS manifest load.
+		await this.ensureHlsAuthToken();
+
 		const setupHls = () => {
 			if (this.hlsLoaded) {
 				return;
@@ -732,14 +794,8 @@ export class VideoPlayerRuntime {
 					live: details?.live,
 				});

-				if (details?.live) {
-					video.parentElement?.classList.add("vjs-hls-live", "vjs-live");
-					player.duration(Infinity);
-					if (player.liveTracker) {
-						player.liveTracker.isLive_ = true;
-						player.liveTracker.startTracking();
-						player.liveTracker.trigger("durationchange");
-					}
+				if (typeof details?.live === "boolean") {
+					this.syncLiveUi(player, video, details.live);
 				}

 				if (options.initialTime > 0) {
@@ -747,6 +803,22 @@ export class VideoPlayerRuntime {
 				}
 			});

+			hls.on(Hls.Events.LEVEL_LOADED, (_event, data) => {
+				const details = data?.details;
+				if (!details) {
+					return;
+				}
+
+				this.emit("manifestloaded", {
+					engine: "hls",
+					duration: details.totalduration,
+					live: details.live,
+				});
+				if (typeof details.live === "boolean") {
+					this.syncLiveUi(player, video, details.live);
+				}
+			});
+
 			hls.on(Hls.Events.FRAG_CHANGED, () => {
 				if (player.liveTracker) {
 					player.liveTracker.atLiveEdge = isAtLiveEdge;
@@ -997,10 +1069,8 @@ export class VideoPlayerRuntime {
 			const videoElement = this.playerRef
 				.el()
 				?.querySelector("video") as HTMLVideoElement | null;
-			videoElement?.parentElement?.classList.remove("vjs-hls-live", "vjs-live");
-			if (this.playerRef.liveTracker) {
-				this.playerRef.liveTracker.isLive_ = false;
-				this.playerRef.liveTracker.trigger("durationchange");
+			if (videoElement) {
+				this.syncLiveUi(this.playerRef, videoElement, false);
 			}
 		}
 	}
--- a/packages/video-player/src/react/video-player/components/video-js/utils.ts
+++ b/packages/video-player/src/react/video-player/components/video-js/utils.ts
@@ -1,9 +1,11 @@
 export const formatTime = (seconds: number) => {
+	const safeSeconds =
+		Number.isFinite(seconds) && seconds > 0 ? seconds : 0;
 	const pad = (num: number) => String(num).padStart(2, "0");
-	const hrs = Math.floor(seconds / 3600);
-	const mins = Math.floor((seconds % 3600) / 60);
-	const secs = Math.floor(seconds % 60);
-	if (seconds < 3600) {
+	const hrs = Math.floor(safeSeconds / 3600);
+	const mins = Math.floor((safeSeconds % 3600) / 60);
+	const secs = Math.floor(safeSeconds % 60);
+	if (safeSeconds < 3600) {
 		return `${pad(mins)}:${pad(secs)}`;
 	}
 	return `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;
--- a/yarn.lock
+++ b/yarn.lock
@@ -797,7 +797,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@eslint-community/eslint-utils@npm:^4.8.0":
+"@eslint-community/eslint-utils@npm:^4.8.0, @eslint-community/eslint-utils@npm:^4.9.1":
  version: 4.9.1
  resolution: "@eslint-community/eslint-utils@npm:4.9.1"
  dependencies:
@@ -808,7 +808,7 @@ __metadata:
  languageName: node
  linkType: hard

-"@eslint-community/regexpp@npm:^4.12.1":
+"@eslint-community/regexpp@npm:^4.12.1, @eslint-community/regexpp@npm:^4.12.2":
  version: 4.12.2
  resolution: "@eslint-community/regexpp@npm:4.12.2"
  checksum: 10c0/fddcbc66851b308478d04e302a4d771d6917a0b3740dc351513c0da9ca2eab8a1adf99f5e0aa7ab8b13fa0df005c81adeee7e63a92f3effd7d367a163b721c2d
@@ -949,6 +949,7 @@ __metadata:
    prettier: "npm:^3.6.2"
    storybook: "npm:8.6.14"
    typescript: "npm:^5.9.3"
+    typescript-eslint: "npm:^8.57.0"
    vitest: "npm:^3.2.4"
  languageName: unknown
  linkType: soft
@@ -2299,6 +2300,141 @@ __metadata:
  languageName: node
  linkType: hard

+"@typescript-eslint/eslint-plugin@npm:8.57.0":
+  version: 8.57.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.57.0"
+  dependencies:
+    "@eslint-community/regexpp": "npm:^4.12.2"
+    "@typescript-eslint/scope-manager": "npm:8.57.0"
+    "@typescript-eslint/type-utils": "npm:8.57.0"
+    "@typescript-eslint/utils": "npm:8.57.0"
+    "@typescript-eslint/visitor-keys": "npm:8.57.0"
+    ignore: "npm:^7.0.5"
+    natural-compare: "npm:^1.4.0"
+    ts-api-utils: "npm:^2.4.0"
+  peerDependencies:
+    "@typescript-eslint/parser": ^8.57.0
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/600033b98dd96e11bb0e22ff77dcaa0f9e9135b60046267059296ce8c8870dfabcddf40d5c8b62415eb3e2133e77a1fb1ac08dca42b859533dd85fbba1f220f7
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/parser@npm:8.57.0":
+  version: 8.57.0
+  resolution: "@typescript-eslint/parser@npm:8.57.0"
+  dependencies:
+    "@typescript-eslint/scope-manager": "npm:8.57.0"
+    "@typescript-eslint/types": "npm:8.57.0"
+    "@typescript-eslint/typescript-estree": "npm:8.57.0"
+    "@typescript-eslint/visitor-keys": "npm:8.57.0"
+    debug: "npm:^4.4.3"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/c224e0802cdc42ad7c79553018d6572370eff6539b3cb92220e44da3931dfe7e94a11fcea7d30d9c9366e76d50488c8c9d59002ba52dd6818fdc598280f7990c
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/project-service@npm:8.57.0":
+  version: 8.57.0
+  resolution: "@typescript-eslint/project-service@npm:8.57.0"
+  dependencies:
+    "@typescript-eslint/tsconfig-utils": "npm:^8.57.0"
+    "@typescript-eslint/types": "npm:^8.57.0"
+    debug: "npm:^4.4.3"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/f97c25ad9c39957fc58fba21dbc8ce928d3889f95b0ecc93b477da3ce9bb6057bf866cac8114c0c93c455f68d0fb5b0042dc4771e436f07cd9c975bc61f3221f
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/scope-manager@npm:8.57.0":
+  version: 8.57.0
+  resolution: "@typescript-eslint/scope-manager@npm:8.57.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.57.0"
+    "@typescript-eslint/visitor-keys": "npm:8.57.0"
+  checksum: 10c0/a3e1243044f4634a36308f0d027db97ef686ed88cb93183feee1ba0a6de4eaa8824bb63b79075241c0a275d989d5f2641a6341cc785a6c688ee6f0d05c07d723
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/tsconfig-utils@npm:8.57.0, @typescript-eslint/tsconfig-utils@npm:^8.57.0":
+  version: 8.57.0
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.57.0"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/d63f4de1a9d39c208b05a93df838318ff48af0a6ae561395d1860a8fd1fc552d47cc08065c445e084fb67bfac1c5a477183213477ed2bca688b9409cbeda3965
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/type-utils@npm:8.57.0":
+  version: 8.57.0
+  resolution: "@typescript-eslint/type-utils@npm:8.57.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.57.0"
+    "@typescript-eslint/typescript-estree": "npm:8.57.0"
+    "@typescript-eslint/utils": "npm:8.57.0"
+    debug: "npm:^4.4.3"
+    ts-api-utils: "npm:^2.4.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/55fd3b6b71d76602cead51fe3ea246eb908e2614bbe092fae26d9320f73c2f107e82d28e2cf509b61ea5f29d5b1fa32046bef0823cea63105bc35c15319e95ec
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/types@npm:8.57.0, @typescript-eslint/types@npm:^8.57.0":
+  version: 8.57.0
+  resolution: "@typescript-eslint/types@npm:8.57.0"
+  checksum: 10c0/69eb21a9a550f17ce9445b7bfab9099d6a43fa33f79506df966793077d73423dad7612f33a7efb1e09f4403a889ba6b7a44987cf3e6fea0e63a373022226bc68
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/typescript-estree@npm:8.57.0":
+  version: 8.57.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.57.0"
+  dependencies:
+    "@typescript-eslint/project-service": "npm:8.57.0"
+    "@typescript-eslint/tsconfig-utils": "npm:8.57.0"
+    "@typescript-eslint/types": "npm:8.57.0"
+    "@typescript-eslint/visitor-keys": "npm:8.57.0"
+    debug: "npm:^4.4.3"
+    minimatch: "npm:^10.2.2"
+    semver: "npm:^7.7.3"
+    tinyglobby: "npm:^0.2.15"
+    ts-api-utils: "npm:^2.4.0"
+  peerDependencies:
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/2b72ff255b6711d529496bcae38869e3809b15761252809743d80d01e3efa5a62ebaafc24b96b16a245a8d0bd307958a3e9ab31434d03a87acedbdd5e01c18be
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/utils@npm:8.57.0":
+  version: 8.57.0
+  resolution: "@typescript-eslint/utils@npm:8.57.0"
+  dependencies:
+    "@eslint-community/eslint-utils": "npm:^4.9.1"
+    "@typescript-eslint/scope-manager": "npm:8.57.0"
+    "@typescript-eslint/types": "npm:8.57.0"
+    "@typescript-eslint/typescript-estree": "npm:8.57.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/d2c5803a7eaae71ce4cf1435fdc0ab0243e8924647b39bc823e42bc7604f6e01cdcb101eaf9c0eec91fe1bd272e5533041b8a40017679b164be11f32242f292b
+  languageName: node
+  linkType: hard
+
+"@typescript-eslint/visitor-keys@npm:8.57.0":
+  version: 8.57.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.57.0"
+  dependencies:
+    "@typescript-eslint/types": "npm:8.57.0"
+    eslint-visitor-keys: "npm:^5.0.0"
+  checksum: 10c0/4e585126b7b10f04c8d52166a473b715038793c87c7b7a1dbd0f577b017896db8545d6ea13bd191c12cf951dfdac23884b3e9bf0bb6f44afea38ae9eae5d7a6a
+  languageName: node
+  linkType: hard
+
 "@videojs/http-streaming@npm:^3.17.2, @videojs/http-streaming@npm:^3.17.4":
  version: 3.17.4
  resolution: "@videojs/http-streaming@npm:3.17.4"
@@ -3107,7 +3243,7 @@ __metadata:
  languageName: node
  linkType: hard

-"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.4.0, debug@npm:^4.4.1":
+"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.3.1, debug@npm:^4.3.2, debug@npm:^4.3.4, debug@npm:^4.4.0, debug@npm:^4.4.1, debug@npm:^4.4.3":
  version: 4.4.3
  resolution: "debug@npm:4.4.3"
  dependencies:
@@ -3540,6 +3676,13 @@ __metadata:
  languageName: node
  linkType: hard

+"eslint-visitor-keys@npm:^5.0.0":
+  version: 5.0.1
+  resolution: "eslint-visitor-keys@npm:5.0.1"
+  checksum: 10c0/16190bdf2cbae40a1109384c94450c526a79b0b9c3cb21e544256ed85ac48a4b84db66b74a6561d20fe6ab77447f150d711c2ad5ad74df4fcc133736bce99678
+  languageName: node
+  linkType: hard
+
 "eslint@npm:^9.37.0":
  version: 9.39.3
  resolution: "eslint@npm:9.39.3"
@@ -4061,6 +4204,13 @@ __metadata:
  languageName: node
  linkType: hard

+"ignore@npm:^7.0.5":
+  version: 7.0.5
+  resolution: "ignore@npm:7.0.5"
+  checksum: 10c0/ae00db89fe873064a093b8999fe4cc284b13ef2a178636211842cceb650b9c3e390d3339191acb145d81ed5379d2074840cf0c33a20bdbd6f32821f79eb4ad5d
+  languageName: node
+  linkType: hard
+
 "immutable@npm:^5.0.2":
  version: 5.1.5
  resolution: "immutable@npm:5.1.5"
@@ -6045,7 +6195,7 @@ __metadata:
  languageName: node
  linkType: hard

-"semver@npm:^7.3.5, semver@npm:^7.6.2":
+"semver@npm:^7.3.5, semver@npm:^7.6.2, semver@npm:^7.7.3":
  version: 7.7.4
  resolution: "semver@npm:7.7.4"
  bin:
@@ -6463,6 +6613,15 @@ __metadata:
  languageName: node
  linkType: hard

+"ts-api-utils@npm:^2.4.0":
+  version: 2.4.0
+  resolution: "ts-api-utils@npm:2.4.0"
+  peerDependencies:
+    typescript: ">=4.8.4"
+  checksum: 10c0/ed185861aef4e7124366a3f6561113557a57504267d4d452a51e0ba516a9b6e713b56b4aeaab9fa13de9db9ab755c65c8c13a777dba9133c214632cb7b65c083
+  languageName: node
+  linkType: hard
+
 "ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.2.0":
  version: 2.2.0
  resolution: "ts-dedent@npm:2.2.0"
@@ -6546,6 +6705,21 @@ __metadata:
  languageName: node
  linkType: hard

+"typescript-eslint@npm:^8.57.0":
+  version: 8.57.0
+  resolution: "typescript-eslint@npm:8.57.0"
+  dependencies:
+    "@typescript-eslint/eslint-plugin": "npm:8.57.0"
+    "@typescript-eslint/parser": "npm:8.57.0"
+    "@typescript-eslint/typescript-estree": "npm:8.57.0"
+    "@typescript-eslint/utils": "npm:8.57.0"
+  peerDependencies:
+    eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
+    typescript: ">=4.8.4 <6.0.0"
+  checksum: 10c0/5491c6dff2bc3f2914d60326490316b3f92e022756017da8b36cbb9d4d94fc781b642a3a033ca3add2ff26ee7a95798baedc5f55598cd21ce706bae5b7731632
+  languageName: node
+  linkType: hard
+
 "typescript@npm:5.9.3, typescript@npm:^5.9.3":
  version: 5.9.3
  resolution: "typescript@npm:5.9.3"
Author	SHA1	Message	Date
Stanislav Ulegin	9eaca089e5	chore(video-player): rebuild dist for v0.1.3	2026-03-20 15:09:34 +03:00
Stanislav Ulegin	8ac6e00b68	release(video-player): v0.1.3	2026-03-20 12:10:56 +03:00
Stanislav Ulegin	81c5550311	release(content-suggestions): v0.1.2	2026-03-11 17:46:03 +03:00
Stanislav Ulegin	1c1b9748c6	release(content-suggestions): v0.1.1	2026-03-11 17:15:01 +03:00
Stanislav Ulegin	6c73b0fa61	chore(eslint): enable typescript-eslint for ts/tsx	2026-03-11 13:49:45 +03:00
Stanislav Ulegin	e4e6bc5af4	release(video-player): v0.1.2	2026-03-11 13:47:47 +03:00
Stanislav Ulegin	028ce21c4c	feat: Перенести патч videojs в библиотеку	2026-03-04 18:06:13 +03:00