release(tach-typography): v0.3.0

packages/tach-typography/README.md

@@ -8,7 +8,7 @@ Typography package with shared tokens and framework adapters:
 ## Install from Git (SSH tag)
 
 ```bash
-yarn add "@hublib-web/tach-typography@git+ssh://git@github.com/ORG/REPO.git#workspace=@hublib-web/tach-typography&tag=tach-typography-v0.1.0"
+yarn add "@hublib-web/tach-typography@git+ssh://git@github.com/ORG/REPO.git#workspace=@hublib-web/tach-typography&tag=tach-typography-v0.2.0"
 ```
 
 ## Install inside this monorepo
@@ -30,13 +30,13 @@ yarn workspace @hublib-web/tach-typography build
 
 ```bash
 git add packages/tach-typography/package.json packages/tach-typography/dist
-git commit -m "release(tach-typography): v0.1.0"
+git commit -m "release(tach-typography): v0.2.0"
 ```
 
 4. Create and push tag:
 
 ```bash
-git tag -a tach-typography-v0.1.0 -m "@hublib-web/tach-typography v0.1.0"
+git tag -a tach-typography-v0.2.0 -m "@hublib-web/tach-typography v0.2.0"
 git push origin main --follow-tags
 ```
 
@@ -58,31 +58,54 @@ export const Example = () => (
 );
 ```
 
+Markdown as a prop (keeps existing API):
+
+```tsx
+<TachTypography.Text.AccentH1 markdownEnabled>
+  **Bold** _italic_ [Docs](https://example.com)
+</TachTypography.Text.AccentH1>
+```
+
 ## Angular usage (NG-ZORRO)
 
 ```ts
 import { Component } from "@angular/core";
-import { TachTypographyDirective, TachTypographyNzModule } from "@hublib-web/tach-typography/angular";
+import { TachTypographyComponent } from "@hublib-web/tach-typography/angular";
 
 @Component({
   selector: "app-example",
   standalone: true,
-  imports: [TachTypographyNzModule, TachTypographyDirective],
+  imports: [TachTypographyComponent],
   template: `
-    <span
+    <tach-typography
-      nz-typography
+      variant="Body"
-      tachTypography
+      color="link"
-      tachTypography="Body"
+      weight="bold"
-      tachTypographyColor="link"
+      [nzProps]="{ nzCopyable: true, nzType: 'secondary' }"
-      tachTypographyWeight="bold"
     >
       Hello from Angular + NG-ZORRO
-    </span>
+    </tach-typography>
+
+    <tach-typography
+      as="a"
+      variant="Body"
+      color="link"
+      [hostProps]="{ href: '/docs', target: '_blank', rel: 'noopener noreferrer' }"
+      [nzProps]="{ nzType: 'secondary' }"
+    >
+      Open docs
+    </tach-typography>
   `,
 })
 export class ExampleComponent {}
 ```
 
+Markdown in Angular:
+
+```html
+<tach-typography variant="Body" [markdownEnabled]="true" [markdown]="'**Bold** _italic_'"></tach-typography>
+```
+
 ## Storybook (dev/design system)
 
 Run from repository root:

packages/tach-typography/dist/angular/angular/index.d.ts

@@ -0,0 +1,85 @@
+import { ElementRef, EventEmitter, OnChanges, Renderer2, SimpleChanges } from "@angular/core";
+import { NzTypographyComponent } from "ng-zorro-antd/typography";
+import { type EllipsisOptions, type TypographyClassOptions, type TypographyColor, type TypographyRenderOptions, type TypographyVariant, type TypographyWeight } from "../core";
+import * as i0 from "@angular/core";
+import * as i1 from "ng-zorro-antd/typography";
+export type AngularTypographyClassInput = TypographyClassOptions;
+export interface AngularTypographyRenderOptions extends TypographyRenderOptions {
+    preserveStyle?: Record<string, string | number>;
+}
+export type TachTypographyHostTag = "span" | "p" | "a" | "h1" | "h2" | "h3" | "h4";
+type NonFunctionNonEmitterKeys<T> = {
+    [K in keyof T]-?: T[K] extends (...args: never[]) => unknown ? never : T[K] extends EventEmitter<unknown> ? never : K;
+}[keyof T];
+type NzTypographyInputKey = Extract<NonFunctionNonEmitterKeys<NzTypographyComponent>, `nz${string}`>;
+export type TachTypographyNzProps = Partial<Pick<NzTypographyComponent, NzTypographyInputKey>>;
+export type TachTypographyHostProps = Record<string, unknown>;
+export declare const tachAngularTypographyClassName: (options?: AngularTypographyClassInput) => string;
+export declare const tachAngularTypographyClassList: (options?: AngularTypographyClassInput) => string[];
+export declare const tachAngularTypographyStyles: (ellipsis?: EllipsisOptions, preserveStyle?: Record<string, string | number>) => Record<string, string | number>;
+export declare class TachTypographyDirective implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    tachTypography: TypographyVariant | "" | undefined;
+    tachTypographyVariant: TypographyVariant;
+    tachTypographyColor: TypographyColor;
+    tachTypographyWeight: TypographyWeight;
+    tachTypographyClickable: boolean;
+    tachTypographyClassName: string | undefined;
+    tachTypographyEllipsis: EllipsisOptions | undefined;
+    private readonly appliedClasses;
+    private readonly appliedStyleProperties;
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
+    ngOnChanges(_changes: SimpleChanges): void;
+    private syncClasses;
+    private syncEllipsisStyles;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TachTypographyDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TachTypographyDirective, "[tachTypography]", never, { "tachTypography": { "alias": "tachTypography"; "required": false; }; "tachTypographyVariant": { "alias": "tachTypographyVariant"; "required": false; }; "tachTypographyColor": { "alias": "tachTypographyColor"; "required": false; }; "tachTypographyWeight": { "alias": "tachTypographyWeight"; "required": false; }; "tachTypographyClickable": { "alias": "tachTypographyClickable"; "required": false; }; "tachTypographyClassName": { "alias": "tachTypographyClassName"; "required": false; }; "tachTypographyEllipsis": { "alias": "tachTypographyEllipsis"; "required": false; }; }, {}, never, never, true, never>;
+}
+export declare class TachTypographyNzPropsDirective implements OnChanges {
+    tachTypographyNzProps: TachTypographyNzProps | null | undefined;
+    private readonly appliedNzKeys;
+    private readonly nzTypography;
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TachTypographyNzPropsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TachTypographyNzPropsDirective, "[tachTypographyNzProps]", never, { "tachTypographyNzProps": { "alias": "tachTypographyNzProps"; "required": false; }; }, {}, never, never, true, never>;
+}
+export declare class TachTypographyHostPropsDirective implements OnChanges {
+    private readonly elementRef;
+    private readonly renderer;
+    tachTypographyHostProps: TachTypographyHostProps | null | undefined;
+    private readonly appliedHostProps;
+    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
+    ngOnChanges(): void;
+    private shouldApplyAsAttribute;
+    private hasPropertyOnElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TachTypographyHostPropsDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TachTypographyHostPropsDirective, "[tachTypographyHostProps]", never, { "tachTypographyHostProps": { "alias": "tachTypographyHostProps"; "required": false; }; }, {}, never, never, true, never>;
+}
+export declare class TachTypographyComponent implements OnChanges {
+    hostTag: TachTypographyHostTag;
+    variant: TypographyVariant;
+    color: TypographyColor;
+    weight: TypographyWeight;
+    clickable: boolean;
+    markdownEnabled: boolean;
+    markdown: string | undefined;
+    className: string | undefined;
+    ellipsis: EllipsisOptions | undefined;
+    nzProps: TachTypographyNzProps | undefined;
+    hostProps: TachTypographyHostProps | undefined;
+    preserveStyle: Record<string, string | number> | undefined;
+    readonly tachClick: EventEmitter<MouseEvent>;
+    renderedMarkdown: string;
+    ngOnChanges(_changes: SimpleChanges): void;
+    handleClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TachTypographyComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TachTypographyComponent, "tach-typography", never, { "hostTag": { "alias": "as"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "color": { "alias": "color"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; "clickable": { "alias": "clickable"; "required": false; }; "markdownEnabled": { "alias": "markdownEnabled"; "required": false; }; "markdown": { "alias": "markdown"; "required": false; }; "className": { "alias": "className"; "required": false; }; "ellipsis": { "alias": "ellipsis"; "required": false; }; "nzProps": { "alias": "nzProps"; "required": false; }; "hostProps": { "alias": "hostProps"; "required": false; }; "preserveStyle": { "alias": "preserveStyle"; "required": false; }; }, { "tachClick": "tachClick"; }, never, ["*", "*", "*", "*", "*", "*", "*"], true, never>;
+}
+export declare class TachTypographyNzModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TachTypographyNzModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TachTypographyNzModule, never, [typeof i1.NzTypographyModule, typeof TachTypographyDirective, typeof TachTypographyNzPropsDirective, typeof TachTypographyHostPropsDirective, typeof TachTypographyComponent], [typeof i1.NzTypographyModule, typeof TachTypographyDirective, typeof TachTypographyNzPropsDirective, typeof TachTypographyHostPropsDirective, typeof TachTypographyComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TachTypographyNzModule>;
+}
+export {};
+//# sourceMappingURL=index.d.ts.map

packages/tach-typography/dist/angular/angular/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/angular/index.ts"],"names":[],"mappings":"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"}

packages/tach-typography/dist/angular/angular/index.js

@@ -0,0 +1,628 @@
+import { NgIf, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault } from "@angular/common";
+import { ChangeDetectionStrategy, Component, Directive, EventEmitter, inject, Input, NgModule, Output, } from "@angular/core";
+import { NzTypographyComponent, NzTypographyModule } from "ng-zorro-antd/typography";
+import { tachTypographyClassList, tachTypographyClassName, tachTypographyEllipsisStyle, tachTypographyMarkdownToHtml, } from "../core";
+import * as i0 from "@angular/core";
+import * as i1 from "ng-zorro-antd/typography";
+const camelToKebab = (value) => value.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
+const toCssProperty = (styleKey) => {
+    if (styleKey.startsWith("Webkit")) {
+        return `-webkit-${camelToKebab(styleKey.slice(6))}`;
+    }
+    return camelToKebab(styleKey);
+};
+export const tachAngularTypographyClassName = (options = {}) => {
+    return tachTypographyClassName(options);
+};
+export const tachAngularTypographyClassList = (options = {}) => {
+    return tachTypographyClassList(options);
+};
+export const tachAngularTypographyStyles = (ellipsis, preserveStyle = {}) => {
+    const ellipsisStyle = tachTypographyEllipsisStyle(ellipsis);
+    if (!ellipsisStyle) {
+        return preserveStyle;
+    }
+    return {
+        ...ellipsisStyle,
+        ...preserveStyle,
+    };
+};
+export class TachTypographyDirective {
+    elementRef;
+    renderer;
+    tachTypography;
+    tachTypographyVariant = "Body";
+    tachTypographyColor = "primary";
+    tachTypographyWeight = "normal";
+    tachTypographyClickable = false;
+    tachTypographyClassName;
+    tachTypographyEllipsis;
+    appliedClasses = new Set();
+    appliedStyleProperties = new Set();
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    ngOnChanges(_changes) {
+        this.syncClasses();
+        this.syncEllipsisStyles();
+    }
+    syncClasses() {
+        const nextClassList = tachTypographyClassList({
+            variant: this.tachTypography || this.tachTypographyVariant,
+            color: this.tachTypographyColor,
+            weight: this.tachTypographyWeight,
+            clickable: this.tachTypographyClickable,
+            className: this.tachTypographyClassName,
+        });
+        const nextSet = new Set(nextClassList);
+        for (const className of this.appliedClasses) {
+            if (!nextSet.has(className)) {
+                this.renderer.removeClass(this.elementRef.nativeElement, className);
+            }
+        }
+        for (const className of nextSet) {
+            this.renderer.addClass(this.elementRef.nativeElement, className);
+        }
+        this.appliedClasses.clear();
+        for (const className of nextSet) {
+            this.appliedClasses.add(className);
+        }
+    }
+    syncEllipsisStyles() {
+        const nextStyles = tachTypographyEllipsisStyle(this.tachTypographyEllipsis) || {};
+        const nextStyleKeys = new Set(Object.keys(nextStyles));
+        for (const styleKey of this.appliedStyleProperties) {
+            if (!nextStyleKeys.has(styleKey)) {
+                this.renderer.removeStyle(this.elementRef.nativeElement, toCssProperty(styleKey));
+            }
+        }
+        for (const [styleKey, styleValue] of Object.entries(nextStyles)) {
+            this.renderer.setStyle(this.elementRef.nativeElement, toCssProperty(styleKey), styleValue);
+        }
+        this.appliedStyleProperties.clear();
+        for (const styleKey of nextStyleKeys) {
+            this.appliedStyleProperties.add(styleKey);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: TachTypographyDirective, isStandalone: true, selector: "[tachTypography]", inputs: { tachTypography: "tachTypography", tachTypographyVariant: "tachTypographyVariant", tachTypographyColor: "tachTypographyColor", tachTypographyWeight: "tachTypographyWeight", tachTypographyClickable: "tachTypographyClickable", tachTypographyClassName: "tachTypographyClassName", tachTypographyEllipsis: "tachTypographyEllipsis" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tachTypography]",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tachTypography: [{
+                type: Input
+            }], tachTypographyVariant: [{
+                type: Input
+            }], tachTypographyColor: [{
+                type: Input
+            }], tachTypographyWeight: [{
+                type: Input
+            }], tachTypographyClickable: [{
+                type: Input
+            }], tachTypographyClassName: [{
+                type: Input
+            }], tachTypographyEllipsis: [{
+                type: Input
+            }] } });
+export class TachTypographyNzPropsDirective {
+    tachTypographyNzProps;
+    appliedNzKeys = new Set();
+    nzTypography = inject(NzTypographyComponent, { self: true, optional: true });
+    ngOnChanges() {
+        if (!this.nzTypography) {
+            return;
+        }
+        const nzTypography = this.nzTypography;
+        const nextProps = this.tachTypographyNzProps ?? {};
+        const nextKeys = new Set();
+        for (const [key, value] of Object.entries(nextProps)) {
+            if (!key.startsWith("nz")) {
+                continue;
+            }
+            nzTypography[key] = value;
+            nextKeys.add(key);
+        }
+        for (const key of this.appliedNzKeys) {
+            if (!nextKeys.has(key)) {
+                nzTypography[key] = undefined;
+            }
+        }
+        this.appliedNzKeys.clear();
+        for (const key of nextKeys) {
+            this.appliedNzKeys.add(key);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyNzPropsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: TachTypographyNzPropsDirective, isStandalone: true, selector: "[tachTypographyNzProps]", inputs: { tachTypographyNzProps: "tachTypographyNzProps" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyNzPropsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tachTypographyNzProps]",
+                    standalone: true,
+                }]
+        }], propDecorators: { tachTypographyNzProps: [{
+                type: Input
+            }] } });
+export class TachTypographyHostPropsDirective {
+    elementRef;
+    renderer;
+    tachTypographyHostProps;
+    appliedHostProps = new Map();
+    constructor(elementRef, renderer) {
+        this.elementRef = elementRef;
+        this.renderer = renderer;
+    }
+    ngOnChanges() {
+        const nextProps = this.tachTypographyHostProps ?? {};
+        const nextAppliedProps = new Map();
+        for (const [key, value] of Object.entries(nextProps)) {
+            if (key === "class" || key === "className" || key === "style") {
+                continue;
+            }
+            if (value === undefined || value === null) {
+                continue;
+            }
+            const applyAsAttr = this.shouldApplyAsAttribute(key, value);
+            if (applyAsAttr) {
+                if (typeof value === "boolean") {
+                    if (value) {
+                        this.renderer.setAttribute(this.elementRef.nativeElement, key, "");
+                    }
+                    else {
+                        this.renderer.removeAttribute(this.elementRef.nativeElement, key);
+                    }
+                }
+                else {
+                    this.renderer.setAttribute(this.elementRef.nativeElement, key, String(value));
+                }
+                nextAppliedProps.set(key, "attr");
+                continue;
+            }
+            this.renderer.setProperty(this.elementRef.nativeElement, key, value);
+            nextAppliedProps.set(key, "prop");
+        }
+        for (const [key, kind] of this.appliedHostProps.entries()) {
+            if (nextAppliedProps.has(key)) {
+                continue;
+            }
+            if (kind === "attr") {
+                this.renderer.removeAttribute(this.elementRef.nativeElement, key);
+            }
+            else {
+                this.renderer.setProperty(this.elementRef.nativeElement, key, undefined);
+            }
+        }
+        this.appliedHostProps.clear();
+        for (const [key, kind] of nextAppliedProps.entries()) {
+            this.appliedHostProps.set(key, kind);
+        }
+    }
+    shouldApplyAsAttribute(key, value) {
+        if (key.startsWith("data-") || key.startsWith("aria-")) {
+            return true;
+        }
+        if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+            return !this.hasPropertyOnElement(key);
+        }
+        return false;
+    }
+    hasPropertyOnElement(key) {
+        return key in this.elementRef.nativeElement;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyHostPropsDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.18", type: TachTypographyHostPropsDirective, isStandalone: true, selector: "[tachTypographyHostProps]", inputs: { tachTypographyHostProps: "tachTypographyHostProps" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyHostPropsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[tachTypographyHostProps]",
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { tachTypographyHostProps: [{
+                type: Input
+            }] } });
+export class TachTypographyComponent {
+    hostTag = "span";
+    variant = "Body";
+    color = "primary";
+    weight = "normal";
+    clickable = false;
+    markdownEnabled = false;
+    markdown;
+    className;
+    ellipsis;
+    nzProps;
+    hostProps;
+    preserveStyle;
+    tachClick = new EventEmitter();
+    renderedMarkdown = "";
+    ngOnChanges(_changes) {
+        this.renderedMarkdown = this.markdownEnabled
+            ? tachTypographyMarkdownToHtml(this.markdown ?? "")
+            : "";
+    }
+    handleClick(event) {
+        this.tachClick.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: TachTypographyComponent, isStandalone: true, selector: "tach-typography", inputs: { hostTag: ["as", "hostTag"], variant: "variant", color: "color", weight: "weight", clickable: "clickable", markdownEnabled: "markdownEnabled", markdown: "markdown", className: "className", ellipsis: "ellipsis", nzProps: "nzProps", hostProps: "hostProps", preserveStyle: "preserveStyle" }, outputs: { tachClick: "tachClick" }, usesOnChanges: true, ngImport: i0, template: `
+    <ng-container [ngSwitch]="hostTag">
+      <p
+        *ngSwitchCase="'p'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentP">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentP>
+          <ng-content />
+        </ng-template>
+      </p>
+      <a
+        *ngSwitchCase="'a'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentA">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentA>
+          <ng-content />
+        </ng-template>
+      </a>
+      <h1
+        *ngSwitchCase="'h1'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentH1">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentH1>
+          <ng-content />
+        </ng-template>
+      </h1>
+      <h2
+        *ngSwitchCase="'h2'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentH2">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentH2>
+          <ng-content />
+        </ng-template>
+      </h2>
+      <h3
+        *ngSwitchCase="'h3'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentH3">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentH3>
+          <ng-content />
+        </ng-template>
+      </h3>
+      <h4
+        *ngSwitchCase="'h4'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentH4">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentH4>
+          <ng-content />
+        </ng-template>
+      </h4>
+      <span
+        *ngSwitchDefault
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentSpan">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentSpan>
+          <ng-content />
+        </ng-template>
+      </span>
+    </ng-container>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzTypographyModule }, { kind: "component", type: i1.NzTypographyComponent, selector: "  nz-typography,  [nz-typography],  p[nz-paragraph],  span[nz-text],  h1[nz-title], h2[nz-title], h3[nz-title], h4[nz-title]  ", inputs: ["nzCopyable", "nzEditable", "nzDisabled", "nzExpandable", "nzEllipsis", "nzCopyTooltips", "nzCopyIcons", "nzEditTooltip", "nzEditIcon", "nzContent", "nzEllipsisRows", "nzType", "nzCopyText", "nzSuffix"], outputs: ["nzContentChange", "nzCopy", "nzExpandChange", "nzOnEllipsis"], exportAs: ["nzTypography"] }, { kind: "directive", type: TachTypographyDirective, selector: "[tachTypography]", inputs: ["tachTypography", "tachTypographyVariant", "tachTypographyColor", "tachTypographyWeight", "tachTypographyClickable", "tachTypographyClassName", "tachTypographyEllipsis"] }, { kind: "directive", type: TachTypographyNzPropsDirective, selector: "[tachTypographyNzProps]", inputs: ["tachTypographyNzProps"] }, { kind: "directive", type: TachTypographyHostPropsDirective, selector: "[tachTypographyHostProps]", inputs: ["tachTypographyHostProps"] }, { kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "tach-typography",
+                    standalone: true,
+                    imports: [
+                        NzTypographyModule,
+                        TachTypographyDirective,
+                        TachTypographyNzPropsDirective,
+                        TachTypographyHostPropsDirective,
+                        NgSwitch,
+                        NgSwitchCase,
+                        NgSwitchDefault,
+                        NgIf,
+                        NgStyle,
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <ng-container [ngSwitch]="hostTag">
+      <p
+        *ngSwitchCase="'p'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentP">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentP>
+          <ng-content />
+        </ng-template>
+      </p>
+      <a
+        *ngSwitchCase="'a'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentA">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentA>
+          <ng-content />
+        </ng-template>
+      </a>
+      <h1
+        *ngSwitchCase="'h1'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentH1">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentH1>
+          <ng-content />
+        </ng-template>
+      </h1>
+      <h2
+        *ngSwitchCase="'h2'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentH2">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentH2>
+          <ng-content />
+        </ng-template>
+      </h2>
+      <h3
+        *ngSwitchCase="'h3'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentH3">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentH3>
+          <ng-content />
+        </ng-template>
+      </h3>
+      <h4
+        *ngSwitchCase="'h4'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentH4">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentH4>
+          <ng-content />
+        </ng-template>
+      </h4>
+      <span
+        *ngSwitchDefault
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentSpan">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentSpan>
+          <ng-content />
+        </ng-template>
+      </span>
+    </ng-container>
+  `,
+                }]
+        }], propDecorators: { hostTag: [{
+                type: Input,
+                args: ["as"]
+            }], variant: [{
+                type: Input
+            }], color: [{
+                type: Input
+            }], weight: [{
+                type: Input
+            }], clickable: [{
+                type: Input
+            }], markdownEnabled: [{
+                type: Input
+            }], markdown: [{
+                type: Input
+            }], className: [{
+                type: Input
+            }], ellipsis: [{
+                type: Input
+            }], nzProps: [{
+                type: Input
+            }], hostProps: [{
+                type: Input
+            }], preserveStyle: [{
+                type: Input
+            }], tachClick: [{
+                type: Output
+            }] } });
+export class TachTypographyNzModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyNzModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyNzModule, imports: [NzTypographyModule, TachTypographyDirective, TachTypographyNzPropsDirective, TachTypographyHostPropsDirective, TachTypographyComponent], exports: [NzTypographyModule, TachTypographyDirective, TachTypographyNzPropsDirective, TachTypographyHostPropsDirective, TachTypographyComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyNzModule, imports: [NzTypographyModule,
+            TachTypographyComponent, NzTypographyModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: TachTypographyNzModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        NzTypographyModule,
+                        TachTypographyDirective,
+                        TachTypographyNzPropsDirective,
+                        TachTypographyHostPropsDirective,
+                        TachTypographyComponent,
+                    ],
+                    exports: [
+                        NzTypographyModule,
+                        TachTypographyDirective,
+                        TachTypographyNzPropsDirective,
+                        TachTypographyHostPropsDirective,
+                        TachTypographyComponent,
+                    ],
+                }]
+        }] });
+//# sourceMappingURL=index.js.map

packages/tach-typography/dist/angular/angular/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from "./index";
+//# sourceMappingURL=public-api.d.ts.map

packages/tach-typography/dist/angular/angular/public-api.d.ts.map

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

packages/tach-typography/dist/angular/angular/public-api.js

@@ -0,0 +1,2 @@
+export * from "./index";
+//# sourceMappingURL=public-api.js.map

packages/tach-typography/dist/angular/angular/public-api.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../../../src/angular/public-api.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

packages/tach-typography/dist/angular/core/classnames.d.ts

@@ -0,0 +1,4 @@
+import type { TypographyClassOptions } from "./types";
+export declare const tachTypographyClassName: ({ variant, color, weight, clickable, className, }?: TypographyClassOptions) => string;
+export declare const tachTypographyClassList: (options?: TypographyClassOptions) => string[];
+//# sourceMappingURL=classnames.d.ts.map

packages/tach-typography/dist/angular/core/classnames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classnames.d.ts","sourceRoot":"","sources":["../../../src/core/classnames.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAOtD,eAAO,MAAM,uBAAuB,GAAI,oDAMrC,sBAA2B,KAAG,MAShC,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,UAAS,sBAA2B,KAAG,MAAM,EAIpF,CAAC"}

packages/tach-typography/dist/angular/core/classnames.js

@@ -0,0 +1,11 @@
+const BASE_CLASS = "tach-typography";
+const join = (...parts) => parts.filter(Boolean).join(" ");
+export const tachTypographyClassName = ({ variant = "Body", color = "primary", weight = "normal", clickable = false, className, } = {}) => {
+    return join(BASE_CLASS, `${BASE_CLASS}--${variant}`, `${BASE_CLASS}--color-${color}`, weight === "bold" && `${BASE_CLASS}--bold`, clickable && `${BASE_CLASS}--pointer`, className);
+};
+export const tachTypographyClassList = (options = {}) => {
+    return tachTypographyClassName(options)
+        .split(" ")
+        .filter(Boolean);
+};
+//# sourceMappingURL=classnames.js.map

packages/tach-typography/dist/angular/core/classnames.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"classnames.js","sourceRoot":"","sources":["../../../src/core/classnames.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,GAAG,iBAAiB,CAAC;AAErC,MAAM,IAAI,GAAG,CAAC,GAAG,KAA+C,EAAU,EAAE,CAC1E,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAElC,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,OAAO,GAAG,MAAM,EAChB,KAAK,GAAG,SAAS,EACjB,MAAM,GAAG,QAAQ,EACjB,SAAS,GAAG,KAAK,EACjB,SAAS,MACiB,EAAE,EAAU,EAAE;IACxC,OAAO,IAAI,CACT,UAAU,EACV,GAAG,UAAU,KAAK,OAAO,EAAE,EAC3B,GAAG,UAAU,WAAW,KAAK,EAAE,EAC/B,MAAM,KAAK,MAAM,IAAI,GAAG,UAAU,QAAQ,EAC1C,SAAS,IAAI,GAAG,UAAU,WAAW,EACrC,SAAS,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,UAAkC,EAAE,EAAY,EAAE;IACxF,OAAO,uBAAuB,CAAC,OAAO,CAAC;SACpC,KAAK,CAAC,GAAG,CAAC;SACV,MAAM,CAAC,OAAO,CAAC,CAAC;AACrB,CAAC,CAAC"}

packages/tach-typography/dist/angular/core/ellipsis.d.ts

@@ -0,0 +1,5 @@
+import type { EllipsisOptions } from "./types";
+type StyleRecord = Record<string, string | number>;
+export declare const tachTypographyEllipsisStyle: (ellipsis?: EllipsisOptions) => StyleRecord | undefined;
+export {};
+//# sourceMappingURL=ellipsis.d.ts.map

packages/tach-typography/dist/angular/core/ellipsis.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ellipsis.d.ts","sourceRoot":"","sources":["../../../src/core/ellipsis.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;AAEnD,eAAO,MAAM,2BAA2B,GACtC,WAAW,eAAe,KACzB,WAAW,GAAG,SAchB,CAAC"}

packages/tach-typography/dist/angular/core/ellipsis.js

@@ -0,0 +1,14 @@
+export const tachTypographyEllipsisStyle = (ellipsis) => {
+    if (!ellipsis) {
+        return undefined;
+    }
+    const rows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
+    return {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        display: "-webkit-box",
+        WebkitBoxOrient: "vertical",
+        WebkitLineClamp: rows,
+    };
+};
+//# sourceMappingURL=ellipsis.js.map

packages/tach-typography/dist/angular/core/ellipsis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ellipsis.js","sourceRoot":"","sources":["../../../src/core/ellipsis.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,2BAA2B,GAAG,CACzC,QAA0B,EACD,EAAE;IAC3B,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE,OAAO;QACL,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,OAAO,EAAE,aAAa;QACtB,eAAe,EAAE,UAAU;QAC3B,eAAe,EAAE,IAAI;KACtB,CAAC;AACJ,CAAC,CAAC"}

packages/tach-typography/dist/angular/core/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./classnames";
+export * from "./ellipsis";
+export * from "./markdown";
+//# sourceMappingURL=index.d.ts.map

packages/tach-typography/dist/angular/core/index.d.ts.map

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

packages/tach-typography/dist/angular/core/index.js

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./classnames";
+export * from "./ellipsis";
+export * from "./markdown";
+//# sourceMappingURL=index.js.map

packages/tach-typography/dist/angular/core/index.js.map

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

packages/tach-typography/dist/angular/core/markdown.d.ts

@@ -0,0 +1,2 @@
+export declare const tachTypographyMarkdownToHtml: (markdown: string) => string;
+//# sourceMappingURL=markdown.d.ts.map

packages/tach-typography/dist/angular/core/markdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.d.ts","sourceRoot":"","sources":["../../../src/core/markdown.ts"],"names":[],"mappings":"AAuBA,eAAO,MAAM,4BAA4B,GAAI,UAAU,MAAM,KAAG,MAyC/D,CAAC"}

packages/tach-typography/dist/angular/core/markdown.js

@@ -0,0 +1,47 @@
+const TOKEN_PREFIX = "TACHMDTOKEN";
+const SAFE_HREF_PATTERN = /^(https?:|mailto:|tel:|\/|#)/i;
+const escapeHtml = (value) => value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+const normalizeMarkdown = (value) => value.replace(/\r\n?/g, "\n");
+const sanitizeHref = (value) => {
+    const href = value.trim();
+    if (!href || !SAFE_HREF_PATTERN.test(href)) {
+        return null;
+    }
+    return href;
+};
+export const tachTypographyMarkdownToHtml = (markdown) => {
+    const source = normalizeMarkdown(markdown);
+    const tokenMap = new Map();
+    let tokenId = 0;
+    const tokenized = source
+        .replace(/`([^`\n]+)`/g, (_match, code) => {
+        const token = `${TOKEN_PREFIX}${tokenId++}`;
+        tokenMap.set(token, `<code class="tach-typography__md-code">${escapeHtml(code)}</code>`);
+        return token;
+    })
+        .replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, (_match, label, hrefRaw) => {
+        const token = `${TOKEN_PREFIX}${tokenId++}`;
+        const href = sanitizeHref(hrefRaw);
+        if (!href) {
+            tokenMap.set(token, escapeHtml(label));
+            return token;
+        }
+        tokenMap.set(token, `<a class="tach-typography__md-link" href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`);
+        return token;
+    });
+    let html = escapeHtml(tokenized)
+        .replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>")
+        .replace(/__([^_\n]+)__/g, "<strong>$1</strong>")
+        .replace(/\*([^*\n]+)\*/g, "<em>$1</em>")
+        .replace(/_([^_\n]+)_/g, "<em>$1</em>")
+        .replace(/~~([^~\n]+)~~/g, "<del>$1</del>")
+        .replace(/\n/g, "<br />");
+    html = html.replace(new RegExp(`${TOKEN_PREFIX}\\d+`, "g"), token => tokenMap.get(token) || token);
+    return html;
+};
+//# sourceMappingURL=markdown.js.map

packages/tach-typography/dist/angular/core/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.js","sourceRoot":"","sources":["../../../src/core/markdown.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,aAAa,CAAC;AACnC,MAAM,iBAAiB,GAAG,+BAA+B,CAAC;AAE1D,MAAM,UAAU,GAAG,CAAC,KAAa,EAAU,EAAE,CAC3C,KAAK;KACF,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC;KACtB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;KACrB,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC;KACrB,OAAO,CAAC,IAAI,EAAE,QAAQ,CAAC;KACvB,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AAE5B,MAAM,iBAAiB,GAAG,CAAC,KAAa,EAAU,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAEnF,MAAM,YAAY,GAAG,CAAC,KAAa,EAAiB,EAAE;IACpD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;IAE1B,IAAI,CAAC,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;QAC3C,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,QAAgB,EAAU,EAAE;IACvE,MAAM,MAAM,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IAC3C,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAkB,CAAC;IAC3C,IAAI,OAAO,GAAG,CAAC,CAAC;IAEhB,MAAM,SAAS,GAAG,MAAM;SACrB,OAAO,CAAC,cAAc,EAAE,CAAC,MAAM,EAAE,IAAY,EAAE,EAAE;QAChD,MAAM,KAAK,GAAG,GAAG,YAAY,GAAG,OAAO,EAAE,EAAE,CAAC;QAC5C,QAAQ,CAAC,GAAG,CACV,KAAK,EACL,0CAA0C,UAAU,CAAC,IAAI,CAAC,SAAS,CACpE,CAAC;QACF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;SACD,OAAO,CAAC,8BAA8B,EAAE,CAAC,MAAM,EAAE,KAAa,EAAE,OAAe,EAAE,EAAE;QAClF,MAAM,KAAK,GAAG,GAAG,YAAY,GAAG,OAAO,EAAE,EAAE,CAAC;QAC5C,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;QAEnC,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,QAAQ,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;YACvC,OAAO,KAAK,CAAC;QACf,CAAC;QAED,QAAQ,CAAC,GAAG,CACV,KAAK,EACL,6CAA6C,UAAU,CAAC,IAAI,CAAC,+CAA+C,UAAU,CAAC,KAAK,CAAC,MAAM,CACpI,CAAC;QACF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC,CAAC;IAEL,IAAI,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC;SAC7B,OAAO,CAAC,oBAAoB,EAAE,qBAAqB,CAAC;SACpD,OAAO,CAAC,gBAAgB,EAAE,qBAAqB,CAAC;SAChD,OAAO,CAAC,gBAAgB,EAAE,aAAa,CAAC;SACxC,OAAO,CAAC,cAAc,EAAE,aAAa,CAAC;SACtC,OAAO,CAAC,gBAAgB,EAAE,eAAe,CAAC;SAC1C,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAE5B,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,GAAG,YAAY,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,CAAC;IAEnG,OAAO,IAAI,CAAC;AACd,CAAC,CAAC"}

packages/tach-typography/dist/angular/core/types.d.ts

@@ -0,0 +1,19 @@
+export declare const TYPOGRAPHY_VARIANTS: readonly ["LargeTitle", "Title1", "Title2", "Title3", "Headline", "Body", "Inputs", "Subheadline", "FootnoteUnderline", "Footnote", "Caption", "Caption2", "AccentH1", "AccentH2", "AccentSubttl", "AccentSubttl2", "AccentCaption", "AccentCaption2", "AccentRegularM", "AccentRegularS", "AccentLargeTtl", "AppMediumBody", "AppMediumSubtext", "AppMediumSubtextUnderline"];
+export declare const TYPOGRAPHY_COLORS: readonly ["primary", "secondary", "tertiary", "quaternary", "link", "white", "dark", "alert", "malahit", "attantion"];
+export type TypographyVariant = (typeof TYPOGRAPHY_VARIANTS)[number];
+export type TypographyColor = (typeof TYPOGRAPHY_COLORS)[number];
+export type TypographyWeight = "normal" | "bold";
+export interface TypographyClassOptions {
+    variant?: TypographyVariant;
+    color?: TypographyColor;
+    weight?: TypographyWeight;
+    clickable?: boolean;
+    className?: string | undefined;
+}
+export type EllipsisOptions = boolean | {
+    rows?: number;
+};
+export interface TypographyRenderOptions extends TypographyClassOptions {
+    ellipsis?: EllipsisOptions;
+}
+//# sourceMappingURL=types.d.ts.map

packages/tach-typography/dist/angular/core/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/core/types.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,mBAAmB,gXAyBtB,CAAC;AAEX,eAAO,MAAM,iBAAiB,uHAWpB,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;AACrE,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AACjE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEjD,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC;AAED,MAAM,MAAM,eAAe,GACvB,OAAO,GACP;IACE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,WAAW,uBAAwB,SAAQ,sBAAsB;IACrE,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B"}

packages/tach-typography/dist/angular/core/types.js

@@ -0,0 +1,39 @@
+export const TYPOGRAPHY_VARIANTS = [
+    "LargeTitle",
+    "Title1",
+    "Title2",
+    "Title3",
+    "Headline",
+    "Body",
+    "Inputs",
+    "Subheadline",
+    "FootnoteUnderline",
+    "Footnote",
+    "Caption",
+    "Caption2",
+    "AccentH1",
+    "AccentH2",
+    "AccentSubttl",
+    "AccentSubttl2",
+    "AccentCaption",
+    "AccentCaption2",
+    "AccentRegularM",
+    "AccentRegularS",
+    "AccentLargeTtl",
+    "AppMediumBody",
+    "AppMediumSubtext",
+    "AppMediumSubtextUnderline",
+];
+export const TYPOGRAPHY_COLORS = [
+    "primary",
+    "secondary",
+    "tertiary",
+    "quaternary",
+    "link",
+    "white",
+    "dark",
+    "alert",
+    "malahit",
+    "attantion",
+];
+//# sourceMappingURL=types.js.map

packages/tach-typography/dist/angular/core/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/core/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,YAAY;IACZ,QAAQ;IACR,QAAQ;IACR,QAAQ;IACR,UAAU;IACV,MAAM;IACN,QAAQ;IACR,aAAa;IACb,mBAAmB;IACnB,UAAU;IACV,SAAS;IACT,UAAU;IACV,UAAU;IACV,UAAU;IACV,cAAc;IACd,eAAe;IACf,eAAe;IACf,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,gBAAgB;IAChB,eAAe;IACf,kBAAkB;IAClB,2BAA2B;CACnB,CAAC;AAEX,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,SAAS;IACT,WAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAM;IACN,OAAO;IACP,MAAM;IACN,OAAO;IACP,SAAS;IACT,WAAW;CACH,CAAC"}

packages/tach-typography/dist/angular/index.cjs

@@ -1,204 +0,0 @@
-'use strict';
-
-var core = require('@angular/core');
-var typography = require('ng-zorro-antd/typography');
-
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __decoratorStart = (base) => [, , , __create(null)];
-var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
-var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
-var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
-var __runInitializers = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
-  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
-  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
-  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
-    return __privateGet(this, extra);
-  }, set [name](x) {
-    return __privateSet(this, extra, x);
-  } }, name));
-  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
-    if (k) {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
-      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
-      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
-    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
-    else if (typeof it !== "object" || it === null) __typeError("Object expected");
-    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
-  }
-  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
-};
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-
-// src/core/classnames.ts
-var BASE_CLASS = "tach-typography";
-var join = (...parts) => parts.filter(Boolean).join(" ");
-var tachTypographyClassName = ({
-  variant = "Body",
-  color = "primary",
-  weight = "normal",
-  clickable = false,
-  className
-} = {}) => {
-  return join(
-    BASE_CLASS,
-    `${BASE_CLASS}--${variant}`,
-    `${BASE_CLASS}--color-${color}`,
-    weight === "bold" && `${BASE_CLASS}--bold`,
-    clickable && `${BASE_CLASS}--pointer`,
-    className
-  );
-};
-var tachTypographyClassList = (options = {}) => {
-  return tachTypographyClassName(options).split(" ").filter(Boolean);
-};
-
-// src/core/ellipsis.ts
-var tachTypographyEllipsisStyle = (ellipsis) => {
-  if (!ellipsis) {
-    return void 0;
-  }
-  const rows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
-  return {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    display: "-webkit-box",
-    WebkitBoxOrient: "vertical",
-    WebkitLineClamp: rows
-  };
-};
-
-// src/angular/index.ts
-var camelToKebab = (value) => value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-var toCssProperty = (styleKey) => {
-  if (styleKey.startsWith("Webkit")) {
-    return `-webkit-${camelToKebab(styleKey.slice(6))}`;
-  }
-  return camelToKebab(styleKey);
-};
-var tachAngularTypographyClassName = (options = {}) => {
-  return tachTypographyClassName(options);
-};
-var tachAngularTypographyClassList = (options = {}) => {
-  return tachTypographyClassList(options);
-};
-var tachAngularTypographyStyles = (ellipsis, preserveStyle = {}) => {
-  const ellipsisStyle = tachTypographyEllipsisStyle(ellipsis);
-  if (!ellipsisStyle) {
-    return preserveStyle;
-  }
-  return {
-    ...ellipsisStyle,
-    ...preserveStyle
-  };
-};
-var _tachTypographyEllipsis_dec, _tachTypographyClassName_dec, _tachTypographyClickable_dec, _tachTypographyWeight_dec, _tachTypographyColor_dec, _tachTypographyVariant_dec, _tachTypography_dec, _TachTypographyDirective_decorators, _init;
-_TachTypographyDirective_decorators = [core.Directive({
-  selector: "[tachTypography]",
-  standalone: true
-})], _tachTypography_dec = [core.Input()], _tachTypographyVariant_dec = [core.Input()], _tachTypographyColor_dec = [core.Input()], _tachTypographyWeight_dec = [core.Input()], _tachTypographyClickable_dec = [core.Input()], _tachTypographyClassName_dec = [core.Input()], _tachTypographyEllipsis_dec = [core.Input()];
-exports.TachTypographyDirective = class TachTypographyDirective {
-  constructor(elementRef, renderer) {
-    this.elementRef = elementRef;
-    this.renderer = renderer;
-    __publicField(this, "tachTypography", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
-    __publicField(this, "tachTypographyVariant", __runInitializers(_init, 12, this, "Body")), __runInitializers(_init, 15, this);
-    __publicField(this, "tachTypographyColor", __runInitializers(_init, 16, this, "primary")), __runInitializers(_init, 19, this);
-    __publicField(this, "tachTypographyWeight", __runInitializers(_init, 20, this, "normal")), __runInitializers(_init, 23, this);
-    __publicField(this, "tachTypographyClickable", __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
-    __publicField(this, "tachTypographyClassName", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
-    __publicField(this, "tachTypographyEllipsis", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
-    __publicField(this, "appliedClasses", /* @__PURE__ */ new Set());
-    __publicField(this, "appliedStyleProperties", /* @__PURE__ */ new Set());
-  }
-  ngOnChanges(_changes) {
-    this.syncClasses();
-    this.syncEllipsisStyles();
-  }
-  syncClasses() {
-    const nextClassList = tachTypographyClassList({
-      variant: this.tachTypography || this.tachTypographyVariant,
-      color: this.tachTypographyColor,
-      weight: this.tachTypographyWeight,
-      clickable: this.tachTypographyClickable,
-      className: this.tachTypographyClassName
-    });
-    const nextSet = new Set(nextClassList);
-    for (const className of this.appliedClasses) {
-      if (!nextSet.has(className)) {
-        this.renderer.removeClass(this.elementRef.nativeElement, className);
-      }
-    }
-    for (const className of nextSet) {
-      this.renderer.addClass(this.elementRef.nativeElement, className);
-    }
-    this.appliedClasses.clear();
-    for (const className of nextSet) {
-      this.appliedClasses.add(className);
-    }
-  }
-  syncEllipsisStyles() {
-    const nextStyles = tachTypographyEllipsisStyle(this.tachTypographyEllipsis) || {};
-    const nextStyleKeys = new Set(Object.keys(nextStyles));
-    for (const styleKey of this.appliedStyleProperties) {
-      if (!nextStyleKeys.has(styleKey)) {
-        this.renderer.removeStyle(this.elementRef.nativeElement, toCssProperty(styleKey));
-      }
-    }
-    for (const [styleKey, styleValue] of Object.entries(nextStyles)) {
-      this.renderer.setStyle(this.elementRef.nativeElement, toCssProperty(styleKey), styleValue);
-    }
-    this.appliedStyleProperties.clear();
-    for (const styleKey of nextStyleKeys) {
-      this.appliedStyleProperties.add(styleKey);
-    }
-  }
-};
-_init = __decoratorStart();
-__decorateElement(_init, 5, "tachTypography", _tachTypography_dec, exports.TachTypographyDirective);
-__decorateElement(_init, 5, "tachTypographyVariant", _tachTypographyVariant_dec, exports.TachTypographyDirective);
-__decorateElement(_init, 5, "tachTypographyColor", _tachTypographyColor_dec, exports.TachTypographyDirective);
-__decorateElement(_init, 5, "tachTypographyWeight", _tachTypographyWeight_dec, exports.TachTypographyDirective);
-__decorateElement(_init, 5, "tachTypographyClickable", _tachTypographyClickable_dec, exports.TachTypographyDirective);
-__decorateElement(_init, 5, "tachTypographyClassName", _tachTypographyClassName_dec, exports.TachTypographyDirective);
-__decorateElement(_init, 5, "tachTypographyEllipsis", _tachTypographyEllipsis_dec, exports.TachTypographyDirective);
-exports.TachTypographyDirective = __decorateElement(_init, 0, "TachTypographyDirective", _TachTypographyDirective_decorators, exports.TachTypographyDirective);
-__runInitializers(_init, 1, exports.TachTypographyDirective);
-var _TachTypographyNzModule_decorators, _init2;
-_TachTypographyNzModule_decorators = [core.NgModule({
-  imports: [typography.NzTypographyModule, exports.TachTypographyDirective],
-  exports: [typography.NzTypographyModule, exports.TachTypographyDirective]
-})];
-exports.TachTypographyNzModule = class TachTypographyNzModule {
-};
-_init2 = __decoratorStart();
-exports.TachTypographyNzModule = __decorateElement(_init2, 0, "TachTypographyNzModule", _TachTypographyNzModule_decorators, exports.TachTypographyNzModule);
-__runInitializers(_init2, 1, exports.TachTypographyNzModule);
-
-exports.tachAngularTypographyClassList = tachAngularTypographyClassList;
-exports.tachAngularTypographyClassName = tachAngularTypographyClassName;
-exports.tachAngularTypographyStyles = tachAngularTypographyStyles;
-//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map

packages/tach-typography/dist/angular/index.d.cts

@@ -1,31 +0,0 @@
-import { OnChanges, ElementRef, Renderer2, SimpleChanges } from '@angular/core';
-import { T as TypographyClassOptions, d as TypographyRenderOptions, e as TypographyVariant, c as TypographyColor, f as TypographyWeight, E as EllipsisOptions } from '../types-CQyFuLqp.cjs';
-
-type AngularTypographyClassInput = TypographyClassOptions;
-interface AngularTypographyRenderOptions extends TypographyRenderOptions {
-    preserveStyle?: Record<string, string | number>;
-}
-declare const tachAngularTypographyClassName: (options?: AngularTypographyClassInput) => string;
-declare const tachAngularTypographyClassList: (options?: AngularTypographyClassInput) => string[];
-declare const tachAngularTypographyStyles: (ellipsis?: EllipsisOptions, preserveStyle?: Record<string, string | number>) => Record<string, string | number>;
-declare class TachTypographyDirective implements OnChanges {
-    private readonly elementRef;
-    private readonly renderer;
-    tachTypography: TypographyVariant | "" | undefined;
-    tachTypographyVariant: TypographyVariant;
-    tachTypographyColor: TypographyColor;
-    tachTypographyWeight: TypographyWeight;
-    tachTypographyClickable: boolean;
-    tachTypographyClassName: string | undefined;
-    tachTypographyEllipsis: EllipsisOptions | undefined;
-    private readonly appliedClasses;
-    private readonly appliedStyleProperties;
-    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
-    ngOnChanges(_changes: SimpleChanges): void;
-    private syncClasses;
-    private syncEllipsisStyles;
-}
-declare class TachTypographyNzModule {
-}
-
-export { type AngularTypographyClassInput, type AngularTypographyRenderOptions, TachTypographyDirective, TachTypographyNzModule, tachAngularTypographyClassList, tachAngularTypographyClassName, tachAngularTypographyStyles };

packages/tach-typography/dist/angular/index.d.ts

@@ -1,31 +1 @@
-import { OnChanges, ElementRef, Renderer2, SimpleChanges } from '@angular/core';
+export * from "./angular/index";
-import { T as TypographyClassOptions, d as TypographyRenderOptions, e as TypographyVariant, c as TypographyColor, f as TypographyWeight, E as EllipsisOptions } from '../types-CQyFuLqp.js';
-
-type AngularTypographyClassInput = TypographyClassOptions;
-interface AngularTypographyRenderOptions extends TypographyRenderOptions {
-    preserveStyle?: Record<string, string | number>;
-}
-declare const tachAngularTypographyClassName: (options?: AngularTypographyClassInput) => string;
-declare const tachAngularTypographyClassList: (options?: AngularTypographyClassInput) => string[];
-declare const tachAngularTypographyStyles: (ellipsis?: EllipsisOptions, preserveStyle?: Record<string, string | number>) => Record<string, string | number>;
-declare class TachTypographyDirective implements OnChanges {
-    private readonly elementRef;
-    private readonly renderer;
-    tachTypography: TypographyVariant | "" | undefined;
-    tachTypographyVariant: TypographyVariant;
-    tachTypographyColor: TypographyColor;
-    tachTypographyWeight: TypographyWeight;
-    tachTypographyClickable: boolean;
-    tachTypographyClassName: string | undefined;
-    tachTypographyEllipsis: EllipsisOptions | undefined;
-    private readonly appliedClasses;
-    private readonly appliedStyleProperties;
-    constructor(elementRef: ElementRef<HTMLElement>, renderer: Renderer2);
-    ngOnChanges(_changes: SimpleChanges): void;
-    private syncClasses;
-    private syncEllipsisStyles;
-}
-declare class TachTypographyNzModule {
-}
-
-export { type AngularTypographyClassInput, type AngularTypographyRenderOptions, TachTypographyDirective, TachTypographyNzModule, tachAngularTypographyClassList, tachAngularTypographyClassName, tachAngularTypographyStyles };

packages/tach-typography/dist/angular/index.js

@@ -1,200 +1 @@
-import { Directive, Input, NgModule } from '@angular/core';
+export * from "./angular/index.js";
-import { NzTypographyModule } from 'ng-zorro-antd/typography';
-
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __knownSymbol = (name, symbol) => (symbol = Symbol[name]) ? symbol : /* @__PURE__ */ Symbol.for("Symbol." + name);
-var __typeError = (msg) => {
-  throw TypeError(msg);
-};
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-var __decoratorStart = (base) => [, , , __create(null)];
-var __decoratorStrings = ["class", "method", "getter", "setter", "accessor", "field", "value", "get", "set"];
-var __expectFn = (fn) => fn !== void 0 && typeof fn !== "function" ? __typeError("Function expected") : fn;
-var __decoratorContext = (kind, name, done, metadata, fns) => ({ kind: __decoratorStrings[kind], name, metadata, addInitializer: (fn) => done._ ? __typeError("Already initialized") : fns.push(__expectFn(fn || null)) });
-var __decoratorMetadata = (array, target) => __defNormalProp(target, __knownSymbol("metadata"), array[3]);
-var __runInitializers = (array, flags, self, value) => {
-  for (var i = 0, fns = array[flags >> 1], n = fns && fns.length; i < n; i++) flags & 1 ? fns[i].call(self) : value = fns[i].call(self, value);
-  return value;
-};
-var __decorateElement = (array, flags, name, decorators, target, extra) => {
-  var fn, it, done, ctx, access, k = flags & 7, s = !!(flags & 8), p = !!(flags & 16);
-  var j = k > 3 ? array.length + 1 : k ? s ? 1 : 2 : 0, key = __decoratorStrings[k + 5];
-  var initializers = k > 3 && (array[j - 1] = []), extraInitializers = array[j] || (array[j] = []);
-  var desc = k && (!p && !s && (target = target.prototype), k < 5 && (k > 3 || !p) && __getOwnPropDesc(k < 4 ? target : { get [name]() {
-    return __privateGet(this, extra);
-  }, set [name](x) {
-    return __privateSet(this, extra, x);
-  } }, name));
-  k ? p && k < 4 && __name(extra, (k > 2 ? "set " : k > 1 ? "get " : "") + name) : __name(target, name);
-  for (var i = decorators.length - 1; i >= 0; i--) {
-    ctx = __decoratorContext(k, name, done = {}, array[3], extraInitializers);
-    if (k) {
-      ctx.static = s, ctx.private = p, access = ctx.access = { has: p ? (x) => __privateIn(target, x) : (x) => name in x };
-      if (k ^ 3) access.get = p ? (x) => (k ^ 1 ? __privateGet : __privateMethod)(x, target, k ^ 4 ? extra : desc.get) : (x) => x[name];
-      if (k > 2) access.set = p ? (x, y) => __privateSet(x, target, y, k ^ 4 ? extra : desc.set) : (x, y) => x[name] = y;
-    }
-    it = (0, decorators[i])(k ? k < 4 ? p ? extra : desc[key] : k > 4 ? void 0 : { get: desc.get, set: desc.set } : target, ctx), done._ = 1;
-    if (k ^ 4 || it === void 0) __expectFn(it) && (k > 4 ? initializers.unshift(it) : k ? p ? extra = it : desc[key] = it : target = it);
-    else if (typeof it !== "object" || it === null) __typeError("Object expected");
-    else __expectFn(fn = it.get) && (desc.get = fn), __expectFn(fn = it.set) && (desc.set = fn), __expectFn(fn = it.init) && initializers.unshift(fn);
-  }
-  return k || __decoratorMetadata(array, target), desc && __defProp(target, name, desc), p ? k ^ 4 ? extra : desc : target;
-};
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateIn = (member, obj) => Object(obj) !== obj ? __typeError('Cannot use the "in" operator on this value') : member.has(obj);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-
-// src/core/classnames.ts
-var BASE_CLASS = "tach-typography";
-var join = (...parts) => parts.filter(Boolean).join(" ");
-var tachTypographyClassName = ({
-  variant = "Body",
-  color = "primary",
-  weight = "normal",
-  clickable = false,
-  className
-} = {}) => {
-  return join(
-    BASE_CLASS,
-    `${BASE_CLASS}--${variant}`,
-    `${BASE_CLASS}--color-${color}`,
-    weight === "bold" && `${BASE_CLASS}--bold`,
-    clickable && `${BASE_CLASS}--pointer`,
-    className
-  );
-};
-var tachTypographyClassList = (options = {}) => {
-  return tachTypographyClassName(options).split(" ").filter(Boolean);
-};
-
-// src/core/ellipsis.ts
-var tachTypographyEllipsisStyle = (ellipsis) => {
-  if (!ellipsis) {
-    return void 0;
-  }
-  const rows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
-  return {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    display: "-webkit-box",
-    WebkitBoxOrient: "vertical",
-    WebkitLineClamp: rows
-  };
-};
-
-// src/angular/index.ts
-var camelToKebab = (value) => value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
-var toCssProperty = (styleKey) => {
-  if (styleKey.startsWith("Webkit")) {
-    return `-webkit-${camelToKebab(styleKey.slice(6))}`;
-  }
-  return camelToKebab(styleKey);
-};
-var tachAngularTypographyClassName = (options = {}) => {
-  return tachTypographyClassName(options);
-};
-var tachAngularTypographyClassList = (options = {}) => {
-  return tachTypographyClassList(options);
-};
-var tachAngularTypographyStyles = (ellipsis, preserveStyle = {}) => {
-  const ellipsisStyle = tachTypographyEllipsisStyle(ellipsis);
-  if (!ellipsisStyle) {
-    return preserveStyle;
-  }
-  return {
-    ...ellipsisStyle,
-    ...preserveStyle
-  };
-};
-var _tachTypographyEllipsis_dec, _tachTypographyClassName_dec, _tachTypographyClickable_dec, _tachTypographyWeight_dec, _tachTypographyColor_dec, _tachTypographyVariant_dec, _tachTypography_dec, _TachTypographyDirective_decorators, _init;
-_TachTypographyDirective_decorators = [Directive({
-  selector: "[tachTypography]",
-  standalone: true
-})], _tachTypography_dec = [Input()], _tachTypographyVariant_dec = [Input()], _tachTypographyColor_dec = [Input()], _tachTypographyWeight_dec = [Input()], _tachTypographyClickable_dec = [Input()], _tachTypographyClassName_dec = [Input()], _tachTypographyEllipsis_dec = [Input()];
-var TachTypographyDirective = class {
-  constructor(elementRef, renderer) {
-    this.elementRef = elementRef;
-    this.renderer = renderer;
-    __publicField(this, "tachTypography", __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
-    __publicField(this, "tachTypographyVariant", __runInitializers(_init, 12, this, "Body")), __runInitializers(_init, 15, this);
-    __publicField(this, "tachTypographyColor", __runInitializers(_init, 16, this, "primary")), __runInitializers(_init, 19, this);
-    __publicField(this, "tachTypographyWeight", __runInitializers(_init, 20, this, "normal")), __runInitializers(_init, 23, this);
-    __publicField(this, "tachTypographyClickable", __runInitializers(_init, 24, this, false)), __runInitializers(_init, 27, this);
-    __publicField(this, "tachTypographyClassName", __runInitializers(_init, 28, this)), __runInitializers(_init, 31, this);
-    __publicField(this, "tachTypographyEllipsis", __runInitializers(_init, 32, this)), __runInitializers(_init, 35, this);
-    __publicField(this, "appliedClasses", /* @__PURE__ */ new Set());
-    __publicField(this, "appliedStyleProperties", /* @__PURE__ */ new Set());
-  }
-  ngOnChanges(_changes) {
-    this.syncClasses();
-    this.syncEllipsisStyles();
-  }
-  syncClasses() {
-    const nextClassList = tachTypographyClassList({
-      variant: this.tachTypography || this.tachTypographyVariant,
-      color: this.tachTypographyColor,
-      weight: this.tachTypographyWeight,
-      clickable: this.tachTypographyClickable,
-      className: this.tachTypographyClassName
-    });
-    const nextSet = new Set(nextClassList);
-    for (const className of this.appliedClasses) {
-      if (!nextSet.has(className)) {
-        this.renderer.removeClass(this.elementRef.nativeElement, className);
-      }
-    }
-    for (const className of nextSet) {
-      this.renderer.addClass(this.elementRef.nativeElement, className);
-    }
-    this.appliedClasses.clear();
-    for (const className of nextSet) {
-      this.appliedClasses.add(className);
-    }
-  }
-  syncEllipsisStyles() {
-    const nextStyles = tachTypographyEllipsisStyle(this.tachTypographyEllipsis) || {};
-    const nextStyleKeys = new Set(Object.keys(nextStyles));
-    for (const styleKey of this.appliedStyleProperties) {
-      if (!nextStyleKeys.has(styleKey)) {
-        this.renderer.removeStyle(this.elementRef.nativeElement, toCssProperty(styleKey));
-      }
-    }
-    for (const [styleKey, styleValue] of Object.entries(nextStyles)) {
-      this.renderer.setStyle(this.elementRef.nativeElement, toCssProperty(styleKey), styleValue);
-    }
-    this.appliedStyleProperties.clear();
-    for (const styleKey of nextStyleKeys) {
-      this.appliedStyleProperties.add(styleKey);
-    }
-  }
-};
-_init = __decoratorStart();
-__decorateElement(_init, 5, "tachTypography", _tachTypography_dec, TachTypographyDirective);
-__decorateElement(_init, 5, "tachTypographyVariant", _tachTypographyVariant_dec, TachTypographyDirective);
-__decorateElement(_init, 5, "tachTypographyColor", _tachTypographyColor_dec, TachTypographyDirective);
-__decorateElement(_init, 5, "tachTypographyWeight", _tachTypographyWeight_dec, TachTypographyDirective);
-__decorateElement(_init, 5, "tachTypographyClickable", _tachTypographyClickable_dec, TachTypographyDirective);
-__decorateElement(_init, 5, "tachTypographyClassName", _tachTypographyClassName_dec, TachTypographyDirective);
-__decorateElement(_init, 5, "tachTypographyEllipsis", _tachTypographyEllipsis_dec, TachTypographyDirective);
-TachTypographyDirective = __decorateElement(_init, 0, "TachTypographyDirective", _TachTypographyDirective_decorators, TachTypographyDirective);
-__runInitializers(_init, 1, TachTypographyDirective);
-var _TachTypographyNzModule_decorators, _init2;
-_TachTypographyNzModule_decorators = [NgModule({
-  imports: [NzTypographyModule, TachTypographyDirective],
-  exports: [NzTypographyModule, TachTypographyDirective]
-})];
-var TachTypographyNzModule = class {
-};
-_init2 = __decoratorStart();
-TachTypographyNzModule = __decorateElement(_init2, 0, "TachTypographyNzModule", _TachTypographyNzModule_decorators, TachTypographyNzModule);
-__runInitializers(_init2, 1, TachTypographyNzModule);
-
-export { TachTypographyDirective, TachTypographyNzModule, tachAngularTypographyClassList, tachAngularTypographyClassName, tachAngularTypographyStyles };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map

packages/tach-typography/dist/core/index.cjs

@@ -78,10 +78,52 @@ var tachTypographyEllipsisStyle = (ellipsis) => {
   };
 };
 
+// src/core/markdown.ts
+var TOKEN_PREFIX = "TACHMDTOKEN";
+var SAFE_HREF_PATTERN = /^(https?:|mailto:|tel:|\/|#)/i;
+var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var normalizeMarkdown = (value) => value.replace(/\r\n?/g, "\n");
+var sanitizeHref = (value) => {
+  const href = value.trim();
+  if (!href || !SAFE_HREF_PATTERN.test(href)) {
+    return null;
+  }
+  return href;
+};
+var tachTypographyMarkdownToHtml = (markdown) => {
+  const source = normalizeMarkdown(markdown);
+  const tokenMap = /* @__PURE__ */ new Map();
+  let tokenId = 0;
+  const tokenized = source.replace(/`([^`\n]+)`/g, (_match, code) => {
+    const token = `${TOKEN_PREFIX}${tokenId++}`;
+    tokenMap.set(
+      token,
+      `<code class="tach-typography__md-code">${escapeHtml(code)}</code>`
+    );
+    return token;
+  }).replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, (_match, label, hrefRaw) => {
+    const token = `${TOKEN_PREFIX}${tokenId++}`;
+    const href = sanitizeHref(hrefRaw);
+    if (!href) {
+      tokenMap.set(token, escapeHtml(label));
+      return token;
+    }
+    tokenMap.set(
+      token,
+      `<a class="tach-typography__md-link" href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`
+    );
+    return token;
+  });
+  let html = escapeHtml(tokenized).replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>").replace(/__([^_\n]+)__/g, "<strong>$1</strong>").replace(/\*([^*\n]+)\*/g, "<em>$1</em>").replace(/_([^_\n]+)_/g, "<em>$1</em>").replace(/~~([^~\n]+)~~/g, "<del>$1</del>").replace(/\n/g, "<br />");
+  html = html.replace(new RegExp(`${TOKEN_PREFIX}\\d+`, "g"), (token) => tokenMap.get(token) || token);
+  return html;
+};
+
 exports.TYPOGRAPHY_COLORS = TYPOGRAPHY_COLORS;
 exports.TYPOGRAPHY_VARIANTS = TYPOGRAPHY_VARIANTS;
 exports.tachTypographyClassList = tachTypographyClassList;
 exports.tachTypographyClassName = tachTypographyClassName;
 exports.tachTypographyEllipsisStyle = tachTypographyEllipsisStyle;
+exports.tachTypographyMarkdownToHtml = tachTypographyMarkdownToHtml;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

packages/tach-typography/dist/core/index.d.cts

@@ -7,4 +7,6 @@ declare const tachTypographyClassList: (options?: TypographyClassOptions) => str
 type StyleRecord = Record<string, string | number>;
 declare const tachTypographyEllipsisStyle: (ellipsis?: EllipsisOptions) => StyleRecord | undefined;
 
-export { EllipsisOptions, TypographyClassOptions, tachTypographyClassList, tachTypographyClassName, tachTypographyEllipsisStyle };
+declare const tachTypographyMarkdownToHtml: (markdown: string) => string;
+
+export { EllipsisOptions, TypographyClassOptions, tachTypographyClassList, tachTypographyClassName, tachTypographyEllipsisStyle, tachTypographyMarkdownToHtml };

packages/tach-typography/dist/core/index.d.ts

@@ -7,4 +7,6 @@ declare const tachTypographyClassList: (options?: TypographyClassOptions) => str
 type StyleRecord = Record<string, string | number>;
 declare const tachTypographyEllipsisStyle: (ellipsis?: EllipsisOptions) => StyleRecord | undefined;
 
-export { EllipsisOptions, TypographyClassOptions, tachTypographyClassList, tachTypographyClassName, tachTypographyEllipsisStyle };
+declare const tachTypographyMarkdownToHtml: (markdown: string) => string;
+
+export { EllipsisOptions, TypographyClassOptions, tachTypographyClassList, tachTypographyClassName, tachTypographyEllipsisStyle, tachTypographyMarkdownToHtml };

packages/tach-typography/dist/core/index.js

@@ -76,6 +76,47 @@ var tachTypographyEllipsisStyle = (ellipsis) => {
   };
 };
 
-export { TYPOGRAPHY_COLORS, TYPOGRAPHY_VARIANTS, tachTypographyClassList, tachTypographyClassName, tachTypographyEllipsisStyle };
+// src/core/markdown.ts
+var TOKEN_PREFIX = "TACHMDTOKEN";
+var SAFE_HREF_PATTERN = /^(https?:|mailto:|tel:|\/|#)/i;
+var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var normalizeMarkdown = (value) => value.replace(/\r\n?/g, "\n");
+var sanitizeHref = (value) => {
+  const href = value.trim();
+  if (!href || !SAFE_HREF_PATTERN.test(href)) {
+    return null;
+  }
+  return href;
+};
+var tachTypographyMarkdownToHtml = (markdown) => {
+  const source = normalizeMarkdown(markdown);
+  const tokenMap = /* @__PURE__ */ new Map();
+  let tokenId = 0;
+  const tokenized = source.replace(/`([^`\n]+)`/g, (_match, code) => {
+    const token = `${TOKEN_PREFIX}${tokenId++}`;
+    tokenMap.set(
+      token,
+      `<code class="tach-typography__md-code">${escapeHtml(code)}</code>`
+    );
+    return token;
+  }).replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, (_match, label, hrefRaw) => {
+    const token = `${TOKEN_PREFIX}${tokenId++}`;
+    const href = sanitizeHref(hrefRaw);
+    if (!href) {
+      tokenMap.set(token, escapeHtml(label));
+      return token;
+    }
+    tokenMap.set(
+      token,
+      `<a class="tach-typography__md-link" href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`
+    );
+    return token;
+  });
+  let html = escapeHtml(tokenized).replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>").replace(/__([^_\n]+)__/g, "<strong>$1</strong>").replace(/\*([^*\n]+)\*/g, "<em>$1</em>").replace(/_([^_\n]+)_/g, "<em>$1</em>").replace(/~~([^~\n]+)~~/g, "<del>$1</del>").replace(/\n/g, "<br />");
+  html = html.replace(new RegExp(`${TOKEN_PREFIX}\\d+`, "g"), (token) => tokenMap.get(token) || token);
+  return html;
+};
+
+export { TYPOGRAPHY_COLORS, TYPOGRAPHY_VARIANTS, tachTypographyClassList, tachTypographyClassName, tachTypographyEllipsisStyle, tachTypographyMarkdownToHtml };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

packages/tach-typography/dist/react/index.cjs

@@ -29,23 +29,78 @@ var tachTypographyClassName = ({
     className
   );
 };
+
+// src/core/markdown.ts
+var TOKEN_PREFIX = "TACHMDTOKEN";
+var SAFE_HREF_PATTERN = /^(https?:|mailto:|tel:|\/|#)/i;
+var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var normalizeMarkdown = (value) => value.replace(/\r\n?/g, "\n");
+var sanitizeHref = (value) => {
+  const href = value.trim();
+  if (!href || !SAFE_HREF_PATTERN.test(href)) {
+    return null;
+  }
+  return href;
+};
+var tachTypographyMarkdownToHtml = (markdown) => {
+  const source = normalizeMarkdown(markdown);
+  const tokenMap = /* @__PURE__ */ new Map();
+  let tokenId = 0;
+  const tokenized = source.replace(/`([^`\n]+)`/g, (_match, code) => {
+    const token = `${TOKEN_PREFIX}${tokenId++}`;
+    tokenMap.set(
+      token,
+      `<code class="tach-typography__md-code">${escapeHtml(code)}</code>`
+    );
+    return token;
+  }).replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, (_match, label, hrefRaw) => {
+    const token = `${TOKEN_PREFIX}${tokenId++}`;
+    const href = sanitizeHref(hrefRaw);
+    if (!href) {
+      tokenMap.set(token, escapeHtml(label));
+      return token;
+    }
+    tokenMap.set(
+      token,
+      `<a class="tach-typography__md-link" href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`
+    );
+    return token;
+  });
+  let html = escapeHtml(tokenized).replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>").replace(/__([^_\n]+)__/g, "<strong>$1</strong>").replace(/\*([^*\n]+)\*/g, "<em>$1</em>").replace(/_([^_\n]+)_/g, "<em>$1</em>").replace(/~~([^~\n]+)~~/g, "<del>$1</del>").replace(/\n/g, "<br />");
+  html = html.replace(new RegExp(`${TOKEN_PREFIX}\\d+`, "g"), (token) => tokenMap.get(token) || token);
+  return html;
+};
 var createTypographyVariant = (Component, variant) => {
   const Variant = React__default.default.forwardRef(
-    ({ color = "primary", weight = "normal", className, onClick, ...rest }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    ({
-      Component,
+      color = "primary",
-      {
+      weight = "normal",
-        ref,
+      className,
-        className: tachTypographyClassName({
+      onClick,
-          variant,
+      markdownEnabled = false,
-          color,
+      children,
-          weight,
+      ...rest
-          className,
+    }, ref) => {
-          clickable: Boolean(onClick)
+      const markdownHtml = markdownEnabled && typeof children === "string" ? tachTypographyMarkdownToHtml(children) : void 0;
-        }),
+      const renderedChildren = markdownHtml ? /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: markdownHtml } }) : children;
-        onClick,
+      const contentProps = { children: renderedChildren };
-        ...rest
+      return /* @__PURE__ */ jsxRuntime.jsx(
-      }
+        Component,
-    )
+        {
+          ref,
+          className: tachTypographyClassName({
+            variant,
+            color,
+            weight,
+            className,
+            clickable: Boolean(onClick)
+          }),
+          onClick,
+          ...rest,
+          ...contentProps
+        }
+      );
+    }
   );
   Variant.displayName = String(variant);
   return Variant;

packages/tach-typography/dist/react/index.d.cts

@@ -10,6 +10,8 @@ interface AdditionalProps {
     weight?: TypographyWeight;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     className?: string | undefined;
+    markdownEnabled?: boolean;
+    children?: React.ReactNode;
 }
 declare const TachTypography: {
     Text: {

packages/tach-typography/dist/react/index.d.ts

@@ -10,6 +10,8 @@ interface AdditionalProps {
     weight?: TypographyWeight;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     className?: string | undefined;
+    markdownEnabled?: boolean;
+    children?: React.ReactNode;
 }
 declare const TachTypography: {
     Text: {

packages/tach-typography/dist/react/index.js

@@ -23,23 +23,78 @@ var tachTypographyClassName = ({
     className
   );
 };
+
+// src/core/markdown.ts
+var TOKEN_PREFIX = "TACHMDTOKEN";
+var SAFE_HREF_PATTERN = /^(https?:|mailto:|tel:|\/|#)/i;
+var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var normalizeMarkdown = (value) => value.replace(/\r\n?/g, "\n");
+var sanitizeHref = (value) => {
+  const href = value.trim();
+  if (!href || !SAFE_HREF_PATTERN.test(href)) {
+    return null;
+  }
+  return href;
+};
+var tachTypographyMarkdownToHtml = (markdown) => {
+  const source = normalizeMarkdown(markdown);
+  const tokenMap = /* @__PURE__ */ new Map();
+  let tokenId = 0;
+  const tokenized = source.replace(/`([^`\n]+)`/g, (_match, code) => {
+    const token = `${TOKEN_PREFIX}${tokenId++}`;
+    tokenMap.set(
+      token,
+      `<code class="tach-typography__md-code">${escapeHtml(code)}</code>`
+    );
+    return token;
+  }).replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, (_match, label, hrefRaw) => {
+    const token = `${TOKEN_PREFIX}${tokenId++}`;
+    const href = sanitizeHref(hrefRaw);
+    if (!href) {
+      tokenMap.set(token, escapeHtml(label));
+      return token;
+    }
+    tokenMap.set(
+      token,
+      `<a class="tach-typography__md-link" href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`
+    );
+    return token;
+  });
+  let html = escapeHtml(tokenized).replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>").replace(/__([^_\n]+)__/g, "<strong>$1</strong>").replace(/\*([^*\n]+)\*/g, "<em>$1</em>").replace(/_([^_\n]+)_/g, "<em>$1</em>").replace(/~~([^~\n]+)~~/g, "<del>$1</del>").replace(/\n/g, "<br />");
+  html = html.replace(new RegExp(`${TOKEN_PREFIX}\\d+`, "g"), (token) => tokenMap.get(token) || token);
+  return html;
+};
 var createTypographyVariant = (Component, variant) => {
   const Variant = React.forwardRef(
-    ({ color = "primary", weight = "normal", className, onClick, ...rest }, ref) => /* @__PURE__ */ jsx(
+    ({
-      Component,
+      color = "primary",
-      {
+      weight = "normal",
-        ref,
+      className,
-        className: tachTypographyClassName({
+      onClick,
-          variant,
+      markdownEnabled = false,
-          color,
+      children,
-          weight,
+      ...rest
-          className,
+    }, ref) => {
-          clickable: Boolean(onClick)
+      const markdownHtml = markdownEnabled && typeof children === "string" ? tachTypographyMarkdownToHtml(children) : void 0;
-        }),
+      const renderedChildren = markdownHtml ? /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: markdownHtml } }) : children;
-        onClick,
+      const contentProps = { children: renderedChildren };
-        ...rest
+      return /* @__PURE__ */ jsx(
-      }
+        Component,
-    )
+        {
+          ref,
+          className: tachTypographyClassName({
+            variant,
+            color,
+            weight,
+            className,
+            clickable: Boolean(onClick)
+          }),
+          onClick,
+          ...rest,
+          ...contentProps
+        }
+      );
+    }
   );
   Variant.displayName = String(variant);
   return Variant;

packages/tach-typography/dist/styles.css

@@ -88,6 +88,17 @@
 .tach-typography--AppMediumSubtextUnderline,
 .ant-typography.tach-typography--AppMediumSubtextUnderline { font-family: Inter, sans-serif; font-size: 11px; font-weight: 400; line-height: 17px; text-decoration: underline; }
 
+.tach-typography .tach-typography__md-link,
+.ant-typography.tach-typography .tach-typography__md-link {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.tach-typography .tach-typography__md-code,
+.ant-typography.tach-typography .tach-typography__md-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
 @media (max-width: 575px) {
   .tach-typography--AccentLargeTtl,
   .ant-typography.tach-typography--AccentLargeTtl {

packages/tach-typography/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hublib-web/tach-typography",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Cross-framework typography package for React and Angular",
   "license": "MIT",
   "type": "module",
@@ -46,14 +46,14 @@
     },
     "./angular": {
       "types": "./dist/angular/index.d.ts",
-      "import": "./dist/angular/index.js",
+      "import": "./dist/angular/index.js"
-      "require": "./dist/angular/index.cjs"
     },
     "./styles.css": "./dist/styles.css",
     "./styles/typography-vars.scss": "./styles/typography-vars.scss"
   },
   "scripts": {
-    "build": "yarn clean && tsup && node ./scripts/copy-styles.mjs",
+    "build": "yarn clean && tsup && yarn build:angular && node ./scripts/copy-styles.mjs",
+    "build:angular": "ngc -p tsconfig.angular.json && node ./scripts/fix-angular-entry.mjs",
     "clean": "rm -rf dist",
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "test": "vitest run",
@@ -61,6 +61,9 @@
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build"
   },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  },
   "peerDependencies": {
     "@angular/animations": ">=17.0.0",
     "@angular/common": ">=17.0.0",
@@ -112,6 +115,8 @@
   "devDependencies": {
     "@angular/animations": "^20.3.17",
     "@angular/common": "^20.3.17",
+    "@angular/compiler": "^20.3.17",
+    "@angular/compiler-cli": "^20.3.17",
     "@angular/core": "^20.3.17",
     "@angular/forms": "^20.3.17",
     "@angular/platform-browser": "^20.3.17",

packages/tach-typography/scripts/fix-angular-entry.mjs

@@ -0,0 +1,12 @@
+import { access, writeFile } from "node:fs/promises";
+import path from "node:path";
+
+const distAngularDir = path.resolve("dist/angular");
+await access(path.join(distAngularDir, "angular/index.js"));
+await access(path.join(distAngularDir, "angular/index.d.ts"));
+
+await writeFile(
+  path.join(distAngularDir, "index.js"),
+  'export * from "./angular/index.js";\n',
+);
+await writeFile(path.join(distAngularDir, "index.d.ts"), 'export * from "./angular/index";\n');

packages/tach-typography/src/angular/index.ts

@@ -1,11 +1,25 @@
-import { NgModule } from "@angular/core";
+import { NgIf, NgStyle, NgSwitch, NgSwitchCase, NgSwitchDefault } from "@angular/common";
-import { Directive, ElementRef, Input, OnChanges, Renderer2, SimpleChanges } from "@angular/core";
+import {
-import { NzTypographyModule } from "ng-zorro-antd/typography";
+  ChangeDetectionStrategy,
+  Component,
+  Directive,
+  ElementRef,
+  EventEmitter,
+  inject,
+  Input,
+  NgModule,
+  OnChanges,
+  Output,
+  Renderer2,
+  SimpleChanges,
+} from "@angular/core";
+import { NzTypographyComponent, NzTypographyModule } from "ng-zorro-antd/typography";
 
 import {
   tachTypographyClassList,
   tachTypographyClassName,
   tachTypographyEllipsisStyle,
+  tachTypographyMarkdownToHtml,
   type EllipsisOptions,
   type TypographyClassOptions,
   type TypographyColor,
@@ -20,6 +34,18 @@ export interface AngularTypographyRenderOptions extends TypographyRenderOptions
   preserveStyle?: Record<string, string | number>;
 }
 
+export type TachTypographyHostTag = "span" | "p" | "a" | "h1" | "h2" | "h3" | "h4";
+type NonFunctionNonEmitterKeys<T> = {
+  [K in keyof T]-?: T[K] extends (...args: never[]) => unknown
+    ? never
+    : T[K] extends EventEmitter<unknown>
+      ? never
+      : K;
+}[keyof T];
+type NzTypographyInputKey = Extract<NonFunctionNonEmitterKeys<NzTypographyComponent>, `nz${string}`>;
+export type TachTypographyNzProps = Partial<Pick<NzTypographyComponent, NzTypographyInputKey>>;
+export type TachTypographyHostProps = Record<string, unknown>;
+
 const camelToKebab = (value: string): string =>
   value.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`);
 
@@ -133,8 +159,338 @@ export class TachTypographyDirective implements OnChanges {
   }
 }
 
+@Directive({
+  selector: "[tachTypographyNzProps]",
+  standalone: true,
+})
+export class TachTypographyNzPropsDirective implements OnChanges {
+  @Input() tachTypographyNzProps: TachTypographyNzProps | null | undefined;
+
+  private readonly appliedNzKeys = new Set<string>();
+  private readonly nzTypography = inject(NzTypographyComponent, { self: true, optional: true });
+
+  ngOnChanges(): void {
+    if (!this.nzTypography) {
+      return;
+    }
+
+    const nzTypography = this.nzTypography as unknown as Record<string, unknown>;
+    const nextProps = this.tachTypographyNzProps ?? {};
+    const nextKeys = new Set<string>();
+
+    for (const [key, value] of Object.entries(nextProps)) {
+      if (!key.startsWith("nz")) {
+        continue;
+      }
+
+      nzTypography[key] = value;
+      nextKeys.add(key);
+    }
+
+    for (const key of this.appliedNzKeys) {
+      if (!nextKeys.has(key)) {
+        nzTypography[key] = undefined;
+      }
+    }
+
+    this.appliedNzKeys.clear();
+    for (const key of nextKeys) {
+      this.appliedNzKeys.add(key);
+    }
+  }
+}
+
+@Directive({
+  selector: "[tachTypographyHostProps]",
+  standalone: true,
+})
+export class TachTypographyHostPropsDirective implements OnChanges {
+  @Input() tachTypographyHostProps: TachTypographyHostProps | null | undefined;
+
+  private readonly appliedHostProps = new Map<string, "attr" | "prop">();
+
+  constructor(
+    private readonly elementRef: ElementRef<HTMLElement>,
+    private readonly renderer: Renderer2,
+  ) {}
+
+  ngOnChanges(): void {
+    const nextProps = this.tachTypographyHostProps ?? {};
+    const nextAppliedProps = new Map<string, "attr" | "prop">();
+
+    for (const [key, value] of Object.entries(nextProps)) {
+      if (key === "class" || key === "className" || key === "style") {
+        continue;
+      }
+
+      if (value === undefined || value === null) {
+        continue;
+      }
+
+      const applyAsAttr = this.shouldApplyAsAttribute(key, value);
+      if (applyAsAttr) {
+        if (typeof value === "boolean") {
+          if (value) {
+            this.renderer.setAttribute(this.elementRef.nativeElement, key, "");
+          } else {
+            this.renderer.removeAttribute(this.elementRef.nativeElement, key);
+          }
+        } else {
+          this.renderer.setAttribute(this.elementRef.nativeElement, key, String(value));
+        }
+        nextAppliedProps.set(key, "attr");
+        continue;
+      }
+
+      this.renderer.setProperty(this.elementRef.nativeElement, key, value);
+      nextAppliedProps.set(key, "prop");
+    }
+
+    for (const [key, kind] of this.appliedHostProps.entries()) {
+      if (nextAppliedProps.has(key)) {
+        continue;
+      }
+
+      if (kind === "attr") {
+        this.renderer.removeAttribute(this.elementRef.nativeElement, key);
+      } else {
+        this.renderer.setProperty(this.elementRef.nativeElement, key, undefined);
+      }
+    }
+
+    this.appliedHostProps.clear();
+    for (const [key, kind] of nextAppliedProps.entries()) {
+      this.appliedHostProps.set(key, kind);
+    }
+  }
+
+  private shouldApplyAsAttribute(key: string, value: unknown): boolean {
+    if (key.startsWith("data-") || key.startsWith("aria-")) {
+      return true;
+    }
+
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+      return !this.hasPropertyOnElement(key);
+    }
+
+    return false;
+  }
+
+  private hasPropertyOnElement(key: string): boolean {
+    return key in this.elementRef.nativeElement;
+  }
+}
+
+@Component({
+  selector: "tach-typography",
+  standalone: true,
+  imports: [
+    NzTypographyModule,
+    TachTypographyDirective,
+    TachTypographyNzPropsDirective,
+    TachTypographyHostPropsDirective,
+    NgSwitch,
+    NgSwitchCase,
+    NgSwitchDefault,
+    NgIf,
+    NgStyle,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <ng-container [ngSwitch]="hostTag">
+      <p
+        *ngSwitchCase="'p'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentP">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentP>
+          <ng-content />
+        </ng-template>
+      </p>
+      <a
+        *ngSwitchCase="'a'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentA">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentA>
+          <ng-content />
+        </ng-template>
+      </a>
+      <h1
+        *ngSwitchCase="'h1'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentH1">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentH1>
+          <ng-content />
+        </ng-template>
+      </h1>
+      <h2
+        *ngSwitchCase="'h2'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentH2">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentH2>
+          <ng-content />
+        </ng-template>
+      </h2>
+      <h3
+        *ngSwitchCase="'h3'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentH3">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentH3>
+          <ng-content />
+        </ng-template>
+      </h3>
+      <h4
+        *ngSwitchCase="'h4'"
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentH4">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentH4>
+          <ng-content />
+        </ng-template>
+      </h4>
+      <span
+        *ngSwitchDefault
+        nz-typography
+        [tachTypography]="variant"
+        [tachTypographyColor]="color"
+        [tachTypographyWeight]="weight"
+        [tachTypographyClickable]="clickable"
+        [tachTypographyClassName]="className"
+        [tachTypographyEllipsis]="ellipsis"
+        [tachTypographyNzProps]="nzProps"
+        [tachTypographyHostProps]="hostProps"
+        [ngStyle]="preserveStyle"
+        (click)="handleClick($event)"
+      >
+        <ng-container *ngIf="markdownEnabled; else tachTypographyContentSpan">
+          <span [innerHTML]="renderedMarkdown"></span>
+        </ng-container>
+        <ng-template #tachTypographyContentSpan>
+          <ng-content />
+        </ng-template>
+      </span>
+    </ng-container>
+  `,
+})
+export class TachTypographyComponent implements OnChanges {
+  @Input("as") hostTag: TachTypographyHostTag = "span";
+  @Input() variant: TypographyVariant = "Body";
+  @Input() color: TypographyColor = "primary";
+  @Input() weight: TypographyWeight = "normal";
+  @Input() clickable = false;
+  @Input() markdownEnabled = false;
+  @Input() markdown: string | undefined;
+  @Input() className: string | undefined;
+  @Input() ellipsis: EllipsisOptions | undefined;
+  @Input() nzProps: TachTypographyNzProps | undefined;
+  @Input() hostProps: TachTypographyHostProps | undefined;
+  @Input() preserveStyle: Record<string, string | number> | undefined;
+
+  @Output() readonly tachClick = new EventEmitter<MouseEvent>();
+
+  renderedMarkdown = "";
+
+  ngOnChanges(_changes: SimpleChanges): void {
+    this.renderedMarkdown = this.markdownEnabled
+      ? tachTypographyMarkdownToHtml(this.markdown ?? "")
+      : "";
+  }
+
+  handleClick(event: MouseEvent): void {
+    this.tachClick.emit(event);
+  }
+}
+
 @NgModule({
-  imports: [NzTypographyModule, TachTypographyDirective],
+  imports: [
-  exports: [NzTypographyModule, TachTypographyDirective],
+    NzTypographyModule,
+    TachTypographyDirective,
+    TachTypographyNzPropsDirective,
+    TachTypographyHostPropsDirective,
+    TachTypographyComponent,
+  ],
+  exports: [
+    NzTypographyModule,
+    TachTypographyDirective,
+    TachTypographyNzPropsDirective,
+    TachTypographyHostPropsDirective,
+    TachTypographyComponent,
+  ],
 })
 export class TachTypographyNzModule {}

packages/tach-typography/src/angular/public-api.ts

@@ -0,0 +1 @@
+export * from "./index";

packages/tach-typography/src/core/index.test.ts

@@ -4,6 +4,7 @@ import {
   tachTypographyClassList,
   tachTypographyClassName,
   tachTypographyEllipsisStyle,
+  tachTypographyMarkdownToHtml,
 } from "./index";
 
 describe("tachTypographyClassName", () => {
@@ -54,3 +55,27 @@ describe("tachTypographyEllipsisStyle", () => {
     });
   });
 });
+
+describe("tachTypographyMarkdownToHtml", () => {
+  it("parses inline markdown tags", () => {
+    expect(
+      tachTypographyMarkdownToHtml("**bold** *italic* ~~strike~~ `code`"),
+    ).toBe(
+      "<strong>bold</strong> <em>italic</em> <del>strike</del> <code class=\"tach-typography__md-code\">code</code>",
+    );
+  });
+
+  it("sanitizes html", () => {
+    expect(tachTypographyMarkdownToHtml("<script>alert(1)</script>")).toBe(
+      "&lt;script&gt;alert(1)&lt;/script&gt;",
+    );
+  });
+
+  it("keeps only safe link protocols", () => {
+    expect(
+      tachTypographyMarkdownToHtml("[safe](https://example.com) [unsafe](javascript:alert-1)"),
+    ).toBe(
+      "<a class=\"tach-typography__md-link\" href=\"https://example.com\" target=\"_blank\" rel=\"noopener noreferrer\">safe</a> unsafe",
+    );
+  });
+});

packages/tach-typography/src/core/index.ts

@@ -1,3 +1,4 @@
 export * from "./types";
 export * from "./classnames";
 export * from "./ellipsis";
+export * from "./markdown";

packages/tach-typography/src/core/markdown.ts

@@ -0,0 +1,65 @@
+const TOKEN_PREFIX = "TACHMDTOKEN";
+const SAFE_HREF_PATTERN = /^(https?:|mailto:|tel:|\/|#)/i;
+
+const escapeHtml = (value: string): string =>
+  value
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+
+const normalizeMarkdown = (value: string): string => value.replace(/\r\n?/g, "\n");
+
+const sanitizeHref = (value: string): string | null => {
+  const href = value.trim();
+
+  if (!href || !SAFE_HREF_PATTERN.test(href)) {
+    return null;
+  }
+
+  return href;
+};
+
+export const tachTypographyMarkdownToHtml = (markdown: string): string => {
+  const source = normalizeMarkdown(markdown);
+  const tokenMap = new Map<string, string>();
+  let tokenId = 0;
+
+  const tokenized = source
+    .replace(/`([^`\n]+)`/g, (_match, code: string) => {
+      const token = `${TOKEN_PREFIX}${tokenId++}`;
+      tokenMap.set(
+        token,
+        `<code class="tach-typography__md-code">${escapeHtml(code)}</code>`,
+      );
+      return token;
+    })
+    .replace(/\[([^\]\n]+)\]\(([^)\n]+)\)/g, (_match, label: string, hrefRaw: string) => {
+      const token = `${TOKEN_PREFIX}${tokenId++}`;
+      const href = sanitizeHref(hrefRaw);
+
+      if (!href) {
+        tokenMap.set(token, escapeHtml(label));
+        return token;
+      }
+
+      tokenMap.set(
+        token,
+        `<a class="tach-typography__md-link" href="${escapeHtml(href)}" target="_blank" rel="noopener noreferrer">${escapeHtml(label)}</a>`,
+      );
+      return token;
+    });
+
+  let html = escapeHtml(tokenized)
+    .replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>")
+    .replace(/__([^_\n]+)__/g, "<strong>$1</strong>")
+    .replace(/\*([^*\n]+)\*/g, "<em>$1</em>")
+    .replace(/_([^_\n]+)_/g, "<em>$1</em>")
+    .replace(/~~([^~\n]+)~~/g, "<del>$1</del>")
+    .replace(/\n/g, "<br />");
+
+  html = html.replace(new RegExp(`${TOKEN_PREFIX}\\d+`, "g"), token => tokenMap.get(token) || token);
+
+  return html;
+};

packages/tach-typography/src/react/index.tsx

@@ -7,6 +7,7 @@ import type { TextProps } from "antd/lib/typography/Text";
 import type { TitleProps } from "antd/lib/typography/Title";
 
 import {
+  tachTypographyMarkdownToHtml,
   tachTypographyClassName,
   type TypographyColor,
   type TypographyVariant,
@@ -18,6 +19,8 @@ interface AdditionalProps {
   weight?: TypographyWeight;
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
   className?: string | undefined;
+  markdownEnabled?: boolean;
+  children?: React.ReactNode;
 }
 
 const createTypographyVariant = <P extends object>(
@@ -25,20 +28,45 @@ const createTypographyVariant = <P extends object>(
   variant: TypographyVariant,
 ) => {
   const Variant = React.forwardRef<HTMLElement, P & AdditionalProps>(
-    ({ color = "primary", weight = "normal", className, onClick, ...rest }, ref) => (
+    (
-      <Component
+      {
-        ref={ref as never}
+        color = "primary",
-        className={tachTypographyClassName({
+        weight = "normal",
-          variant,
+        className,
-          color,
+        onClick,
-          weight,
+        markdownEnabled = false,
-          className,
+        children,
-          clickable: Boolean(onClick),
+        ...rest
-        })}
+      },
-        onClick={onClick}
+      ref,
-        {...(rest as P)}
+    ) => {
-      />
+      const markdownHtml =
-    ),
+        markdownEnabled && typeof children === "string"
+          ? tachTypographyMarkdownToHtml(children)
+          : undefined;
+      const renderedChildren = markdownHtml ? (
+        <span dangerouslySetInnerHTML={{ __html: markdownHtml }} />
+      ) : (
+        children
+      );
+      const contentProps = { children: renderedChildren } as unknown as P;
+
+      return (
+        <Component
+          ref={ref as never}
+          className={tachTypographyClassName({
+            variant,
+            color,
+            weight,
+            className,
+            clickable: Boolean(onClick),
+          })}
+          onClick={onClick}
+          {...(rest as P)}
+          {...contentProps}
+        />
+      );
+    },
   );
 
   Variant.displayName = String(variant);

packages/tach-typography/src/stories/TachTypography.Markdown.stories.tsx

@@ -0,0 +1,157 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  TYPOGRAPHY_COLORS,
+  TYPOGRAPHY_VARIANTS,
+  type TypographyColor,
+  type TypographyVariant,
+  type TypographyWeight,
+} from "../core";
+import { TachTypography } from "../react";
+
+type TypographyNamespace = keyof typeof TachTypography;
+
+type VariantComponentProps = {
+  children?: React.ReactNode;
+  className?: string;
+  color?: TypographyColor;
+  ellipsis?: boolean | { rows?: number };
+  href?: string;
+  level?: 1 | 2 | 3 | 4 | 5;
+  markdownEnabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  weight?: TypographyWeight;
+};
+
+type VariantComponent = React.ComponentType<VariantComponentProps>;
+
+const getVariantComponent = (
+  namespace: TypographyNamespace,
+  variant: TypographyVariant,
+): VariantComponent => {
+  return (TachTypography[namespace] as unknown as Record<TypographyVariant, VariantComponent>)[variant];
+};
+
+interface MarkdownArgs {
+  namespace: TypographyNamespace;
+  variant: TypographyVariant;
+  color: TypographyColor;
+  weight: TypographyWeight;
+  markdownEnabled: boolean;
+  content: string;
+  href: string;
+  titleLevel: 1 | 2 | 3 | 4 | 5;
+}
+
+const renderMarkdownTypography = (args: MarkdownArgs) => {
+  const Component = getVariantComponent(args.namespace, args.variant);
+
+  const componentProps: VariantComponentProps = {
+    color: args.color,
+    weight: args.weight,
+    markdownEnabled: args.markdownEnabled,
+  };
+
+  if (args.namespace === "Link") {
+    componentProps.href = args.href;
+  }
+
+  if (args.namespace === "Title") {
+    componentProps.level = args.titleLevel;
+  }
+
+  return (
+    <div className="tach-story-surface tach-story-stack">
+      <Component {...componentProps}>{args.content}</Component>
+    </div>
+  );
+};
+
+const meta: Meta<MarkdownArgs> = {
+  title: "TachTypography/Markdown",
+  tags: ["autodocs"],
+  render: renderMarkdownTypography,
+  args: {
+    namespace: "Text",
+    variant: "Body",
+    color: "primary",
+    weight: "normal",
+    markdownEnabled: true,
+    content: "**Bold** _italic_ ~~strike~~ `code` [Docs](https://example.com)",
+    href: "https://example.com",
+    titleLevel: 3,
+  },
+  argTypes: {
+    namespace: {
+      control: "select",
+      options: ["Text", "Paragraph", "Link", "Title"],
+    },
+    variant: {
+      control: "select",
+      options: TYPOGRAPHY_VARIANTS,
+    },
+    color: {
+      control: "select",
+      options: TYPOGRAPHY_COLORS,
+    },
+    weight: {
+      control: "inline-radio",
+      options: ["normal", "bold"],
+    },
+    markdownEnabled: {
+      control: "boolean",
+    },
+    content: {
+      control: "text",
+    },
+    href: {
+      control: "text",
+      description: "Works for Link namespace",
+    },
+    titleLevel: {
+      control: "inline-radio",
+      options: [1, 2, 3, 4, 5],
+      description: "Works for Title namespace",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Markdown rendering in existing TachTypography components via the markdownEnabled prop.",
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ReactMarkdown: Story = {};
+
+export const MarkdownDisabled: Story = {
+  args: {
+    markdownEnabled: false,
+    content: "**Bold** _italic_ markdown is shown as plain text",
+  },
+};
+
+export const AngularUsage: Story = {
+  render: () => (
+    <div className="tach-story-surface tach-story-stack">
+      <h4>Angular usage</h4>
+      <pre>
+        <code>
+{`<tach-typography
+  variant="Body"
+  [markdownEnabled]="true"
+  [markdown]="'**Bold** _italic_ [Docs](https://example.com)'"
+></tach-typography>`}
+        </code>
+      </pre>
+    </div>
+  ),
+};

packages/tach-typography/src/stories/TachTypography.Reference.stories.tsx

@@ -67,6 +67,20 @@ export const PropsMatrix: Story = {
             <td>tachTypographyClassName</td>
             <td>Merges with token classes</td>
           </tr>
+          <tr>
+            <td>markdownEnabled</td>
+            <td>boolean</td>
+            <td>markdownEnabled</td>
+            <td>[markdownEnabled]</td>
+            <td>Enables markdown rendering from content string</td>
+          </tr>
+          <tr>
+            <td>markdown</td>
+            <td>string</td>
+            <td>children string</td>
+            <td>[markdown]</td>
+            <td>Angular markdown source string</td>
+          </tr>
         </tbody>
       </table>
     </div>

packages/tach-typography/src/styles/tach-typography.css

@@ -88,6 +88,17 @@
 .tach-typography--AppMediumSubtextUnderline,
 .ant-typography.tach-typography--AppMediumSubtextUnderline { font-family: Inter, sans-serif; font-size: 11px; font-weight: 400; line-height: 17px; text-decoration: underline; }
 
+.tach-typography .tach-typography__md-link,
+.ant-typography.tach-typography .tach-typography__md-link {
+  color: inherit;
+  text-decoration: underline;
+}
+
+.tach-typography .tach-typography__md-code,
+.ant-typography.tach-typography .tach-typography__md-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
 @media (max-width: 575px) {
   .tach-typography--AccentLargeTtl,
   .ant-typography.tach-typography--AccentLargeTtl {

packages/tach-typography/tsconfig.angular.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist/angular",
+    "types": ["node"],
+    "module": "ES2022",
+    "target": "ES2022",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "importHelpers": true
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  },
+  "files": ["src/angular/public-api.ts"],
+  "include": ["src/angular/**/*.ts", "src/core/**/*.ts"],
+  "exclude": ["dist", "src/**/*.test.ts", "src/react", "src/stories"]
+}

packages/tach-typography/tsup.config.ts

@@ -4,7 +4,6 @@ export default defineConfig({
   entry: {
     "core/index": "src/core/index.ts",
     "react/index": "src/react/index.tsx",
-    "angular/index": "src/angular/index.ts",
   },
   format: ["esm", "cjs"],
   dts: true,

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"}

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 hrs = Math.floor(safeSeconds / 3600);
-    const mins = Math.floor((seconds % 3600) / 60);
+    const mins = Math.floor((safeSeconds % 3600) / 60);
-    const secs = Math.floor(seconds % 60);
+    const secs = Math.floor(safeSeconds % 60);
-    if (seconds < 3600) {
+    if (safeSeconds < 3600) {
         return `${pad(mins)}:${pad(secs)}`;
     }
     return `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;

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"}

packages/video-player/dist/core/player-runtime.d.ts

@@ -131,6 +131,7 @@ export declare class VideoPlayerRuntime {
     private attachDurationAndPlayStartHooks;
     private loadCurrentSource;
     private buildHlsConfig;
+    private syncLiveUi;
     private loadHlsSource;
     private loadVideoJsSource;
     private resetDeferredHlsLoading;

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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"}

packages/video-player/dist/core/player-runtime.js

@@ -465,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;
@@ -508,19 +526,27 @@ export class VideoPlayerRuntime {
                     duration: details?.totalduration,
                     live: details?.live,
                 });
-                if (details?.live) {
+                if (typeof details?.live === "boolean") {
-                    video.parentElement?.classList.add("vjs-hls-live", "vjs-live");
+                    this.syncLiveUi(player, video, details.live);
-                    player.duration(Infinity);
-                    if (player.liveTracker) {
-                        player.liveTracker.isLive_ = true;
-                        player.liveTracker.startTracking();
-                        player.liveTracker.trigger("durationchange");
-                    }
                 }
                 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;
@@ -722,10 +748,8 @@ export class VideoPlayerRuntime {
             const videoElement = this.playerRef
                 .el()
                 ?.querySelector("video");
-            videoElement?.parentElement?.classList.remove("vjs-hls-live", "vjs-live");
+            if (videoElement) {
-            if (this.playerRef.liveTracker) {
+                this.syncLiveUi(this.playerRef, videoElement, false);
-                this.playerRef.liveTracker.isLive_ = false;
-                this.playerRef.liveTracker.trigger("durationchange");
             }
         }
     }

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"}

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 hrs = Math.floor(safeSeconds / 3600);
-    const mins = Math.floor((seconds % 3600) / 60);
+    const mins = Math.floor((safeSeconds % 3600) / 60);
-    const secs = Math.floor(seconds % 60);
+    const secs = Math.floor(safeSeconds % 60);
-    if (seconds < 3600) {
+    if (safeSeconds < 3600) {
         return `${pad(mins)}:${pad(secs)}`;
     }
     return `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;

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"}

packages/video-player/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hublib-web/video-player",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Cross-framework video player package for React and Angular",
   "license": "MIT",
   "type": "module",

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 hrs = Math.floor(safeSeconds / 3600);
-	const mins = Math.floor((seconds % 3600) / 60);
+	const mins = Math.floor((safeSeconds % 3600) / 60);
-	const secs = Math.floor(seconds % 60);
+	const secs = Math.floor(safeSeconds % 60);
 
-	if (seconds < 3600) {
+	if (safeSeconds < 3600) {
 		return `${pad(mins)}:${pad(secs)}`;
 	}
 

packages/video-player/src/core/player-runtime.ts

@@ -718,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;
@@ -769,14 +794,8 @@ export class VideoPlayerRuntime {
 					live: details?.live,
 				});
 
-				if (details?.live) {
+				if (typeof details?.live === "boolean") {
-					video.parentElement?.classList.add("vjs-hls-live", "vjs-live");
+					this.syncLiveUi(player, video, details.live);
-					player.duration(Infinity);
-					if (player.liveTracker) {
-						player.liveTracker.isLive_ = true;
-						player.liveTracker.startTracking();
-						player.liveTracker.trigger("durationchange");
-					}
 				}
 
 				if (options.initialTime > 0) {
@@ -784,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;
@@ -1034,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 (videoElement) {
-			if (this.playerRef.liveTracker) {
+				this.syncLiveUi(this.playerRef, videoElement, false);
-				this.playerRef.liveTracker.isLive_ = false;
-				this.playerRef.liveTracker.trigger("durationchange");
 			}
 		}
 	}

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 hrs = Math.floor(safeSeconds / 3600);
-	const mins = Math.floor((seconds % 3600) / 60);
+	const mins = Math.floor((safeSeconds % 3600) / 60);
-	const secs = Math.floor(seconds % 60);
+	const secs = Math.floor(safeSeconds % 60);
-	if (seconds < 3600) {
+	if (safeSeconds < 3600) {
 		return `${pad(mins)}:${pad(secs)}`;
 	}
 	return `${pad(hrs)}:${pad(mins)}:${pad(secs)}`;

yarn.lock

@@ -12,6 +12,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ampproject/remapping@npm:^2.2.0":
+  version: 2.3.0
+  resolution: "@ampproject/remapping@npm:2.3.0"
+  dependencies:
+    "@jridgewell/gen-mapping": "npm:^0.3.5"
+    "@jridgewell/trace-mapping": "npm:^0.3.24"
+  checksum: 10c0/81d63cca5443e0f0c72ae18b544cc28c7c0ec2cea46e7cb888bb0e0f411a1191d0d6b7af798d54e30777d8d1488b2ec0732aac2be342d3d7d3ffd271c6f489ed
+  languageName: node
+  linkType: hard
+
 "@angular/animations@npm:^20.3.17":
   version: 20.3.17
   resolution: "@angular/animations@npm:20.3.17"
@@ -49,6 +59,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@angular/compiler-cli@npm:^20.3.17":
+  version: 20.3.18
+  resolution: "@angular/compiler-cli@npm:20.3.18"
+  dependencies:
+    "@babel/core": "npm:7.28.3"
+    "@jridgewell/sourcemap-codec": "npm:^1.4.14"
+    chokidar: "npm:^4.0.0"
+    convert-source-map: "npm:^1.5.1"
+    reflect-metadata: "npm:^0.2.0"
+    semver: "npm:^7.0.0"
+    tslib: "npm:^2.3.0"
+    yargs: "npm:^18.0.0"
+  peerDependencies:
+    "@angular/compiler": 20.3.18
+    typescript: ">=5.8 <6.0"
+  peerDependenciesMeta:
+    typescript:
+      optional: true
+  bin:
+    ng-xi18n: bundles/src/bin/ng_xi18n.js
+    ngc: bundles/src/bin/ngc.js
+  checksum: 10c0/db6ed45caea752782dc5c35c4f2152435f78a43ca0610f74a0ed098f67bac8dea97ded7a37b108e6f333ce3e086f21dc76ea2e76f1464e91723d17bb1bca3de3
+  languageName: node
+  linkType: hard
+
+"@angular/compiler@npm:^20.3.17":
+  version: 20.3.18
+  resolution: "@angular/compiler@npm:20.3.18"
+  dependencies:
+    tslib: "npm:^2.3.0"
+  checksum: 10c0/b8149a45e007eb5fc056f9b39b0e0eebb22e2e816027c7aed03ac884a08b5030c51e4b698865580bf253eb1e06c072da797ac318376979dd8cb98a65da535961
+  languageName: node
+  linkType: hard
+
 "@angular/core@npm:^20.3.17":
   version: 20.3.17
   resolution: "@angular/core@npm:20.3.17"
@@ -230,7 +274,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.28.6, @babel/code-frame@npm:^7.29.0":
+"@babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.27.1, @babel/code-frame@npm:^7.28.6, @babel/code-frame@npm:^7.29.0":
   version: 7.29.0
   resolution: "@babel/code-frame@npm:7.29.0"
   dependencies:
@@ -248,6 +292,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/core@npm:7.28.3":
+  version: 7.28.3
+  resolution: "@babel/core@npm:7.28.3"
+  dependencies:
+    "@ampproject/remapping": "npm:^2.2.0"
+    "@babel/code-frame": "npm:^7.27.1"
+    "@babel/generator": "npm:^7.28.3"
+    "@babel/helper-compilation-targets": "npm:^7.27.2"
+    "@babel/helper-module-transforms": "npm:^7.28.3"
+    "@babel/helpers": "npm:^7.28.3"
+    "@babel/parser": "npm:^7.28.3"
+    "@babel/template": "npm:^7.27.2"
+    "@babel/traverse": "npm:^7.28.3"
+    "@babel/types": "npm:^7.28.2"
+    convert-source-map: "npm:^2.0.0"
+    debug: "npm:^4.1.0"
+    gensync: "npm:^1.0.0-beta.2"
+    json5: "npm:^2.2.3"
+    semver: "npm:^6.3.1"
+  checksum: 10c0/e6b3eb830c4b93f5a442b305776df1cd2bb4fafa4612355366f67c764f3e54a69d45b84def77fb2d4fd83439102667b0a92c3ea2838f678733245b748c602a7b
+  languageName: node
+  linkType: hard
+
 "@babel/core@npm:^7.18.9":
   version: 7.29.0
   resolution: "@babel/core@npm:7.29.0"
@@ -271,7 +338,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/generator@npm:^7.29.0":
+"@babel/generator@npm:^7.28.3, @babel/generator@npm:^7.29.0":
   version: 7.29.1
   resolution: "@babel/generator@npm:7.29.1"
   dependencies:
@@ -284,7 +351,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-compilation-targets@npm:^7.28.6":
+"@babel/helper-compilation-targets@npm:^7.27.2, @babel/helper-compilation-targets@npm:^7.28.6":
   version: 7.28.6
   resolution: "@babel/helper-compilation-targets@npm:7.28.6"
   dependencies:
@@ -314,7 +381,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-transforms@npm:^7.28.6":
+"@babel/helper-module-transforms@npm:^7.28.3, @babel/helper-module-transforms@npm:^7.28.6":
   version: 7.28.6
   resolution: "@babel/helper-module-transforms@npm:7.28.6"
   dependencies:
@@ -348,6 +415,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helpers@npm:^7.28.3":
+  version: 7.29.2
+  resolution: "@babel/helpers@npm:7.29.2"
+  dependencies:
+    "@babel/template": "npm:^7.28.6"
+    "@babel/types": "npm:^7.29.0"
+  checksum: 10c0/dab0e65b9318b2502a62c58bc0913572318595eec0482c31f0ad416b72636e6698a1d7c57cd2791d4528eb8c548bca88d338dc4d2a55a108dc1f6702f9bc5512
+  languageName: node
+  linkType: hard
+
 "@babel/helpers@npm:^7.28.6":
   version: 7.28.6
   resolution: "@babel/helpers@npm:7.28.6"
@@ -369,6 +446,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.28.3":
+  version: 7.29.2
+  resolution: "@babel/parser@npm:7.29.2"
+  dependencies:
+    "@babel/types": "npm:^7.29.0"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 10c0/e5a4e69e3ac7acdde995f37cf299a68458cfe7009dff66bd0962fd04920bef287201169006af365af479c08ff216bfefbb595e331f87f6ae7283858aebbc3317
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:^7.10.1, @babel/runtime@npm:^7.10.4, @babel/runtime@npm:^7.11.1, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.20.0, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.22.5, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.23.6, @babel/runtime@npm:^7.23.9, @babel/runtime@npm:^7.24.4, @babel/runtime@npm:^7.24.7, @babel/runtime@npm:^7.24.8, @babel/runtime@npm:^7.25.7, @babel/runtime@npm:^7.26.0, @babel/runtime@npm:^7.28.4, @babel/runtime@npm:^7.5.5":
   version: 7.28.6
   resolution: "@babel/runtime@npm:7.28.6"
@@ -376,7 +464,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.28.6":
+"@babel/template@npm:^7.27.2, @babel/template@npm:^7.28.6":
   version: 7.28.6
   resolution: "@babel/template@npm:7.28.6"
   dependencies:
@@ -387,7 +475,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.28.6, @babel/traverse@npm:^7.29.0":
+"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.28.3, @babel/traverse@npm:^7.28.6, @babel/traverse@npm:^7.29.0":
   version: 7.29.0
   resolution: "@babel/traverse@npm:7.29.0"
   dependencies:
@@ -960,6 +1048,8 @@ __metadata:
   dependencies:
     "@angular/animations": "npm:^20.3.17"
     "@angular/common": "npm:^20.3.17"
+    "@angular/compiler": "npm:^20.3.17"
+    "@angular/compiler-cli": "npm:^20.3.17"
     "@angular/core": "npm:^20.3.17"
     "@angular/forms": "npm:^20.3.17"
     "@angular/platform-browser": "npm:^20.3.17"
@@ -977,6 +1067,7 @@ __metadata:
     react-dom: "npm:^19.2.0"
     rxjs: "npm:^7.8.2"
     storybook: "npm:8.6.14"
+    tslib: "npm:^2.8.1"
     tsup: "npm:^8.5.0"
     typescript: "npm:^5.9.3"
     vite: "npm:6.4.1"
@@ -2728,7 +2819,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ansi-styles@npm:^6.1.0":
+"ansi-styles@npm:^6.1.0, ansi-styles@npm:^6.2.1":
   version: 6.2.3
   resolution: "ansi-styles@npm:6.2.3"
   checksum: 10c0/23b8a4ce14e18fb854693b95351e286b771d23d8844057ed2e7d083cd3e708376c3323707ec6a24365f7d7eda3ca00327fe04092e29e551499ec4c8b7bfac868
@@ -3106,6 +3197,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"cliui@npm:^9.0.1":
+  version: 9.0.1
+  resolution: "cliui@npm:9.0.1"
+  dependencies:
+    string-width: "npm:^7.2.0"
+    strip-ansi: "npm:^7.1.0"
+    wrap-ansi: "npm:^9.0.0"
+  checksum: 10c0/13441832e9efe7c7a76bd2b8e683555c478d461a9f249dc5db9b17fe8d4b47fa9277b503914b90bd00e4a151abb6b9b02b2288972ffe2e5e3ca40bcb1c2330d3
+  languageName: node
+  linkType: hard
+
 "color-convert@npm:^2.0.1":
   version: 2.0.1
   resolution: "color-convert@npm:2.0.1"
@@ -3166,6 +3268,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"convert-source-map@npm:^1.5.1":
+  version: 1.9.0
+  resolution: "convert-source-map@npm:1.9.0"
+  checksum: 10c0/281da55454bf8126cbc6625385928c43479f2060984180c42f3a86c8b8c12720a24eac260624a7d1e090004028d2dee78602330578ceec1a08e27cb8bb0a8a5b
+  languageName: node
+  linkType: hard
+
 "convert-source-map@npm:^2.0.0":
   version: 2.0.0
   resolution: "convert-source-map@npm:2.0.0"
@@ -3379,6 +3488,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emoji-regex@npm:^10.3.0":
+  version: 10.6.0
+  resolution: "emoji-regex@npm:10.6.0"
+  checksum: 10c0/1e4aa097bb007301c3b4b1913879ae27327fdc48e93eeefefe3b87e495eb33c5af155300be951b4349ff6ac084f4403dc9eff970acba7c1c572d89396a9a32d7
+  languageName: node
+  linkType: hard
+
 "emoji-regex@npm:^8.0.0":
   version: 8.0.0
   resolution: "emoji-regex@npm:8.0.0"
@@ -3638,7 +3754,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"escalade@npm:^3.2.0":
+"escalade@npm:^3.1.1, escalade@npm:^3.2.0":
   version: 3.2.0
   resolution: "escalade@npm:3.2.0"
   checksum: 10c0/ced4dd3a78e15897ed3be74e635110bbf3b08877b0a41be50dcb325ee0e0b5f65fc2d50e9845194d7c4633f327e2e1c6cce00a71b617c5673df0374201d67f65
@@ -3976,6 +4092,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"get-caller-file@npm:^2.0.5":
+  version: 2.0.5
+  resolution: "get-caller-file@npm:2.0.5"
+  checksum: 10c0/c6c7b60271931fa752aeb92f2b47e355eac1af3a2673f47c9589e8f8a41adc74d45551c1bc57b5e66a80609f10ffb72b6f575e4370d61cc3f7f3aaff01757cde
+  languageName: node
+  linkType: hard
+
+"get-east-asian-width@npm:^1.0.0":
+  version: 1.5.0
+  resolution: "get-east-asian-width@npm:1.5.0"
+  checksum: 10c0/bff8bbc8d81790b9477f7aa55b1806b9f082a8dc1359fff7bd8b96939622c86b729685afc2bfeb22def1fc6ef1e5228e4d87dd4e6da60bc43a5edfb03c4ee167
+  languageName: node
+  linkType: hard
+
 "get-intrinsic@npm:^1.2.4, get-intrinsic@npm:^1.2.6, get-intrinsic@npm:^1.3.0":
   version: 1.3.1
   resolution: "get-intrinsic@npm:1.3.1"
@@ -5952,6 +6082,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"reflect-metadata@npm:^0.2.0":
+  version: 0.2.2
+  resolution: "reflect-metadata@npm:0.2.2"
+  checksum: 10c0/1cd93a15ea291e420204955544637c264c216e7aac527470e393d54b4bb075f10a17e60d8168ec96600c7e0b9fcc0cb0bb6e91c3fbf5b0d8c9056f04e6ac1ec2
+  languageName: node
+  linkType: hard
+
 "requires-port@npm:^1.0.0":
   version: 1.0.0
   resolution: "requires-port@npm:1.0.0"
@@ -6195,7 +6332,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:^7.3.5, semver@npm:^7.6.2, semver@npm:^7.7.3":
+"semver@npm:^7.0.0, 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:
@@ -6367,6 +6504,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string-width@npm:^7.0.0, string-width@npm:^7.2.0":
+  version: 7.2.0
+  resolution: "string-width@npm:7.2.0"
+  dependencies:
+    emoji-regex: "npm:^10.3.0"
+    get-east-asian-width: "npm:^1.0.0"
+    strip-ansi: "npm:^7.1.0"
+  checksum: 10c0/eb0430dd43f3199c7a46dcbf7a0b34539c76fe3aa62763d0b0655acdcbdf360b3f66f3d58ca25ba0205f42ea3491fa00f09426d3b7d3040e506878fc7664c9b9
+  languageName: node
+  linkType: hard
+
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1, strip-ansi@npm:^6.0.0, strip-ansi@npm:^6.0.1":
   version: 6.0.1
   resolution: "strip-ansi@npm:6.0.1"
@@ -6376,7 +6524,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"strip-ansi@npm:^7.0.1":
+"strip-ansi@npm:^7.0.1, strip-ansi@npm:^7.1.0":
   version: 7.2.0
   resolution: "strip-ansi@npm:7.2.0"
   dependencies:
@@ -6647,7 +6795,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.3.0":
+"tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.8.1":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"
   checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62
@@ -7235,6 +7383,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wrap-ansi@npm:^9.0.0":
+  version: 9.0.2
+  resolution: "wrap-ansi@npm:9.0.2"
+  dependencies:
+    ansi-styles: "npm:^6.2.1"
+    string-width: "npm:^7.0.0"
+    strip-ansi: "npm:^7.1.0"
+  checksum: 10c0/3305839b9a0d6fb930cb63a52f34d3936013d8b0682ff3ec133c9826512620f213800ffa19ea22904876d5b7e9a3c1f40682f03597d986a4ca881fa7b033688c
+  languageName: node
+  linkType: hard
+
 "ws@npm:^8.13.0, ws@npm:^8.2.3":
   version: 8.19.0
   resolution: "ws@npm:8.19.0"
@@ -7264,6 +7423,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"y18n@npm:^5.0.5":
+  version: 5.0.8
+  resolution: "y18n@npm:5.0.8"
+  checksum: 10c0/4df2842c36e468590c3691c894bc9cdbac41f520566e76e24f59401ba7d8b4811eb1e34524d57e54bc6d864bcb66baab7ffd9ca42bf1eda596618f9162b91249
+  languageName: node
+  linkType: hard
+
 "yallist@npm:^3.0.2":
   version: 3.1.1
   resolution: "yallist@npm:3.1.1"
@@ -7285,6 +7451,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yargs-parser@npm:^22.0.0":
+  version: 22.0.0
+  resolution: "yargs-parser@npm:22.0.0"
+  checksum: 10c0/cb7ef81759c4271cb1d96b9351dbbc9a9ce35d3e1122d2b739bf6c432603824fa02c67cc12dcef6ea80283379d63495686e8f41cc7b06c6576e792aba4d33e1c
+  languageName: node
+  linkType: hard
+
+"yargs@npm:^18.0.0":
+  version: 18.0.0
+  resolution: "yargs@npm:18.0.0"
+  dependencies:
+    cliui: "npm:^9.0.1"
+    escalade: "npm:^3.1.1"
+    get-caller-file: "npm:^2.0.5"
+    string-width: "npm:^7.2.0"
+    y18n: "npm:^5.0.5"
+    yargs-parser: "npm:^22.0.0"
+  checksum: 10c0/bf290e4723876ea9c638c786a5c42ac28e03c9ca2325e1424bf43b94e5876456292d3ed905b853ebbba6daf43ed29e772ac2a6b3c5fb1b16533245d6211778f3
+  languageName: node
+  linkType: hard
+
 "yocto-queue@npm:^0.1.0":
   version: 0.1.0
   resolution: "yocto-queue@npm:0.1.0"