@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/display/label.js

@@ -0,0 +1,166 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { SimpleMarkdownParser } from '../../core/markdown/parser';
+/**
+ * Default link hook: blocks all external links (http/https/ftp/absolute paths).
+ * External URLs are converted to plain text for security.
+ * 默认 link hook：阻止所有外部链接（http/https/ftp/绝对路径）。
+ * 外部 URL 会被转为纯文本以确保安全。
+ */
+const defaultLinkHook = (url) => {
+    if (/^(?:https?:|ftp:|\/\/)/i.test(url))
+        return '';
+    return url;
+};
+/**
+ * Creates a SimpleMarkdownParser instance with the default link hook
+ * prepended before any user-provided hooks.
+ * 创建一个 SimpleMarkdownParser 实例，将默认 link hook 置于用户自定义 hooks 之前。
+ */
+function createParser(hooks) {
+    const parser = new SimpleMarkdownParser();
+    parser.addLinkHook(defaultLinkHook);
+    if (hooks) {
+        for (const hook of hooks) {
+            parser.addLinkHook(hook);
+        }
+    }
+    return parser;
+}
+/**
+ * Lightweight label component that renders a Markdown subset for descriptions and labels.
+ * 轻量级标签组件，渲染 Markdown 子集用于描述和标签展示。
+ *
+ * Supported syntax / 支持的语法：
+ * - `**text**` — bold 加粗
+ * - `~~text~~` — strikethrough 删除线
+ * - `` `code` `` — inline code 行内代码
+ * - `[text](path)` — internal link 站内链接（外链默认转为纯文本，可通过 linkHooks 自定义）
+ * - `:emoji_name:` — Emoji shortcode 表情简码（如 `:smile:` `:check:`）
+ * - `:iconName:` — built-in icon via `<aithe-icon>` 内置图标
+ *
+ * @slot - No slots; content is provided via the `content` property. 无插槽；内容通过 `content` 属性提供。
+ * @property {string} content - Markdown source text. Markdown 源文本。
+ * @property {MarkdownLinkHook[]} [linkHooks] - Custom link hooks for URL processing. 自定义链接处理 hook。
+ *
+ * @example
+ * ```html
+ * <aithe-label content="**Bold** and `code`."></aithe-label>
+ * <aithe-label content=":check: 已完成"></aithe-label>
+ * <aithe-label content=":smile: 很高兴见到你"></aithe-label>
+ * ```
+ */
+let AitheLabel = class AitheLabel extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Markdown source text. Markdown 源文本。 */
+        this.content = '';
+    }
+    /**
+     * Lazily creates or re-creates the parser when linkHooks changes.
+     * Caches the parser instance to avoid re-parsing on every render.
+     * 懒创建解析器，当 linkHooks 变化时重新创建。
+     * 缓存解析器实例以避免每次渲染都重新解析。
+     */
+    get parser() {
+        if (!this._parser || this._linkHooks !== this.linkHooks) {
+            this._parser = createParser(this.linkHooks);
+            this._linkHooks = this.linkHooks;
+        }
+        return this._parser;
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        line-height: 1.6;
+        color: var(--aithe-color-text);
+      }
+
+      /* Size variants: small / medium / large */
+      :host(:where([size='sm'])) {
+        font-size: var(--aithe-font-size-sm, 12px);
+      }
+
+      :host(:where([size='md'])) {
+        font-size: var(--aithe-font-size-md, 14px);
+      }
+
+      :host(:where([size='lg'])) {
+        font-size: var(--aithe-font-size-lg, 16px);
+      }
+
+      .label :where(.md-list, .md-blockquote) {
+        margin: 0 0 var(--aithe-space-2);
+      }
+
+      .label .md-list:last-child,
+      .label .md-blockquote:last-child {
+        margin-bottom: 0;
+      }
+
+      .label .md-list {
+        padding-left: var(--aithe-space-5);
+        list-style: disc;
+      }
+
+      .label .md-code {
+        font-family: var(--aithe-font-family-mono);
+        padding: 1px 4px;
+        border-radius: 3px;
+        background: var(--aithe-color-bg-muted, #f1f5f9);
+        color: var(--aithe-primary-7, #c7254e);
+        font-size: 0.9em;
+      }
+
+      .label .md-blockquote {
+        padding-left: var(--aithe-space-3);
+        border-left: 3px solid var(--aithe-primary-5);
+        color: var(--aithe-color-text-muted);
+      }
+
+      .label .md-link {
+        color: var(--aithe-primary-6);
+        text-decoration: none;
+      }
+
+      .label .md-link:hover {
+        text-decoration: underline;
+      }
+
+      .label .md-del {
+        color: var(--aithe-color-text-muted);
+      }
+    `,
+    ]; }
+    /**
+     * Renders the label by parsing the markdown content into HTML
+     * and injecting it into the DOM via unsafeHTML.
+     * 渲染标签：将 markdown 内容解析为 HTML 并通过 unsafeHTML 注入到 DOM 中。
+     */
+    render() {
+        return html `
+      <div class="label">${unsafeHTML(this.parser.parse(this.content))}</div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheLabel.prototype, "content", void 0);
+__decorate([
+    property({ attribute: false })
+], AitheLabel.prototype, "linkHooks", void 0);
+AitheLabel = __decorate([
+    customElement('aithe-label')
+], AitheLabel);
+export { AitheLabel };

package/dist/components/display/markdown-editor.d.ts

@@ -0,0 +1,134 @@
+import { AitheElement } from '../../core/aithe-element';
+/**
+ * Configuration for the preview update strategy.
+ * 预览刷新策略配置。
+ */
+export interface PreviewStrategyConfig {
+    /** Re-render preview only after every N value changes. 每 N 次变更后刷新预览。 */
+    changeCount?: number;
+    /** Re-render preview at most once every N seconds. 每 N 秒最多刷新一次预览。 */
+    updateSeconds?: number;
+}
+/**
+ * Preview update strategy type.
+ * - `'auto'`: Re-render on every change (default).
+ * - `PreviewStrategyConfig`: Custom throttling rules.
+ *
+ * 预览刷新策略类型。
+ * - `'auto'`：每次变更都重新渲染（默认）。
+ * - `PreviewStrategyConfig`：自定义节流规则。
+ */
+export type PreviewStrategy = 'auto' | PreviewStrategyConfig;
+/**
+ * Markdown editor component built on top of `aithe-code-editor`.
+ * Features a live preview pane that renders markdown in real-time.
+ * The toolbar includes a toggle button to switch between code-only
+ * and code+preview modes.
+ *
+ * 基于 `aithe-code-editor` 定制的 Markdown 编辑器。
+ * 集成实时预览面板，代码变更时即时渲染。
+ * 工具栏提供切换按钮，在纯代码和代码+预览模式间切换。
+ *
+ * @slot - No slots; content is provided via the `value` property. 无插槽；内容通过 `value` 属性提供。
+ * @property {string} value - Markdown source text. Markdown 源文本。
+ * @property {boolean} showToolbar - Whether the toolbar is visible. 是否显示工具栏。
+ * @property {boolean} showTheme - Whether to show the theme picker in toolbar. 是否显示主题选择器。
+ * @property {boolean} lineNumbers - Whether to show line numbers. 是否显示行号。
+ * @property {boolean} readonly - Whether the editor is read-only. 是否只读。
+ * @property {string} placeholder - Placeholder text when the editor is empty. 编辑器为空时的占位文本。
+ * @property {boolean} showLanguage - Whether to show the language selector. 是否显示语言选择器。
+ * @property {boolean} showFullscreen - Whether to show the fullscreen button. 是否显示全屏按钮。
+ * @property {boolean} showCopy - Whether to show the copy button. 是否显示复制按钮。
+ * @property {boolean} showLineNumbersToggle - Whether to show the line numbers toggle button. 是否显示行号切换按钮。
+ * @property {PreviewStrategy} previewStrategy - Preview update strategy (auto or throttled). 预览刷新策略。
+ *
+ * @fires aithe-input - Dispatched when the markdown value changes. 当 Markdown 值变化时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-markdown-editor value="# Hello" show-toolbar></aithe-markdown-editor>
+ * ```
+ */
+export declare class AitheMarkdownEditor extends AitheElement {
+    /** Markdown source text. Markdown 源文本。 */
+    value: string;
+    /** Whether the toolbar is visible. 是否显示工具栏。 */
+    showToolbar: boolean;
+    /** Whether to show the theme picker in toolbar. 是否显示主题选择器。 */
+    showTheme: boolean;
+    /** Whether to show line numbers. 是否显示行号。 */
+    lineNumbers: boolean;
+    /** Whether the editor is read-only. 是否只读。 */
+    readonly: boolean;
+    /** Placeholder text when the editor is empty. 编辑器为空时的占位文本。 */
+    placeholder: string;
+    /** Whether to show the language selector in toolbar. 是否显示语言选择器。 */
+    /**
+  
+     * Note: For markdown editing, language is fixed to "markdown",
+     * so the language selector is typically hidden.
+     * 注意：Markdown 编辑时语言固定为 "markdown"，因此语言选择器通常隐藏。
+     */
+    showLanguage: boolean;
+    /** Whether to show the fullscreen button in toolbar. 是否显示全屏按钮。 */
+    showFullscreen: boolean;
+    /** Whether to show the copy button in toolbar. 是否显示复制按钮。 */
+    showCopy: boolean;
+    /** Whether to show the line numbers toggle button in toolbar. 是否显示行号切换按钮。 */
+    showLineNumbersToggle: boolean;
+    /**
+     * Preview update strategy.
+     * 预览刷新策略。
+     *
+     * - `'auto'`: Re-render preview on every change (default).
+     * - `{ changeCount: N }`: Re-render preview only after every N changes.
+     * - `{ updateSeconds: N }`: Re-render preview at most once every N seconds.
+     * - `{ changeCount: N, updateSeconds: M }`: Both conditions must be met.
+     */
+    previewStrategy: PreviewStrategy;
+    /** Counter for changeCount-based throttling. 基于变更次数的节流计数器。 */
+    private _changeCount;
+    /** Timestamp of the last preview render (for time-based throttling). 上次预览渲染的时间戳（用于基于时间的节流）。 */
+    private _lastRenderTime;
+    /** Cached preview HTML to avoid re-parsing when throttled. 缓存的预览 HTML，节流时避免重复解析。 */
+    private _cachedPreview;
+    /**
+     * Returns true when a non-auto strategy is configured.
+     * 当配置了非 auto 策略时返回 true。
+     */
+    private get _shouldThrottle();
+    /**
+     * Schedules a preview update based on the configured strategy.
+     * If conditions are met, invalidates the cache and triggers re-render.
+     * Otherwise, caches the current parse result for immediate use.
+     * 根据配置的策略调度预览更新。
+     * 如果条件满足，使缓存失效并触发重新渲染。
+     * 否则，缓存当前解析结果供即时使用。
+     */
+    private _schedulePreview;
+    /**
+     * Returns the preview HTML, using the cached version if throttling is active.
+     * 返回预览 HTML，如果节流生效则使用缓存版本。
+     */
+    private _getPreview;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Handles the aithe-input event from the underlying code-editor.
+     * Updates the value property, emits aithe-input, and schedules a preview refresh.
+     * 处理底层 code-editor 的 aithe-input 事件。
+     * 更新 value 属性，触发 aithe-input 事件，并调度预览刷新。
+     */
+    private handleValueChange;
+    /**
+     * Renders the markdown editor by composing an aithe-code-editor
+     * with a preview slot that displays the parsed HTML.
+     * 渲染 markdown 编辑器：组合 aithe-code-editor 和预览插槽，显示解析后的 HTML。
+     */
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-markdown-editor': AitheMarkdownEditor;
+    }
+}
+//# sourceMappingURL=markdown-editor.d.ts.map

package/dist/components/display/markdown-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown-editor.d.ts","sourceRoot":"","sources":["../../../src/components/display/markdown-editor.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAYnD;;;GAGG;AACH,MAAM,WAAW,qBAAqB;IACpC,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,qBAAqB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,mBAAoB,SAAQ,YAAY;IACnD,0CAA0C;IACd,KAAK,SAAM;IAEvC,+CAA+C;IACS,WAAW,UAAS;IAE5E,8DAA8D;IACR,SAAS,UAAQ;IAEvE,4CAA4C;IACY,WAAW,UAAQ;IAE3E,6CAA6C;IACD,QAAQ,UAAS;IAE7D,8DAA8D;IAClC,WAAW,SAAM;IAE7C,mEAAmE;IACnE;;;;;OAKG;IACsD,YAAY,UAAS;IAE9E,kEAAkE;IACP,cAAc,UAAQ;IAEjF,4DAA4D;IACP,QAAQ,UAAQ;IAErE,6EAA6E;IACT,qBAAqB,UAAQ;IAEjG;;;;;;;;OAQG;IACyB,eAAe,EAAE,eAAe,CAAU;IAEtE,8DAA8D;IAC9D,OAAO,CAAC,YAAY,CAAK;IAEzB,+FAA+F;IAC/F,OAAO,CAAC,eAAe,CAAK;IAE5B,oFAAoF;IACpF,OAAO,CAAC,cAAc,CAAM;IAE5B;;;OAGG;IACH,OAAO,KAAK,eAAe,GAG1B;IAED;;;;;;;OAOG;IACH,OAAO,CAAC,gBAAgB;IAsCxB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAOnB,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAiFpB;IAEF;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAMzB;;;;OAIG;IACH,MAAM;CA2BP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}

package/dist/components/display/markdown-editor.js

@@ -0,0 +1,319 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import { FullMarkdownParser } from '../../core/markdown/parser';
+/**
+ * Shared FullMarkdownParser singleton used by all markdown-editor instances.
+ * Parsing is stateless so a single instance is safe and memory-efficient.
+ * 所有 markdown-editor 实例共享的 FullMarkdownParser 单例。
+ * 解析是无状态的，因此单例既安全又节省内存。
+ */
+const parser = new FullMarkdownParser();
+/**
+ * Markdown editor component built on top of `aithe-code-editor`.
+ * Features a live preview pane that renders markdown in real-time.
+ * The toolbar includes a toggle button to switch between code-only
+ * and code+preview modes.
+ *
+ * 基于 `aithe-code-editor` 定制的 Markdown 编辑器。
+ * 集成实时预览面板，代码变更时即时渲染。
+ * 工具栏提供切换按钮，在纯代码和代码+预览模式间切换。
+ *
+ * @slot - No slots; content is provided via the `value` property. 无插槽；内容通过 `value` 属性提供。
+ * @property {string} value - Markdown source text. Markdown 源文本。
+ * @property {boolean} showToolbar - Whether the toolbar is visible. 是否显示工具栏。
+ * @property {boolean} showTheme - Whether to show the theme picker in toolbar. 是否显示主题选择器。
+ * @property {boolean} lineNumbers - Whether to show line numbers. 是否显示行号。
+ * @property {boolean} readonly - Whether the editor is read-only. 是否只读。
+ * @property {string} placeholder - Placeholder text when the editor is empty. 编辑器为空时的占位文本。
+ * @property {boolean} showLanguage - Whether to show the language selector. 是否显示语言选择器。
+ * @property {boolean} showFullscreen - Whether to show the fullscreen button. 是否显示全屏按钮。
+ * @property {boolean} showCopy - Whether to show the copy button. 是否显示复制按钮。
+ * @property {boolean} showLineNumbersToggle - Whether to show the line numbers toggle button. 是否显示行号切换按钮。
+ * @property {PreviewStrategy} previewStrategy - Preview update strategy (auto or throttled). 预览刷新策略。
+ *
+ * @fires aithe-input - Dispatched when the markdown value changes. 当 Markdown 值变化时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-markdown-editor value="# Hello" show-toolbar></aithe-markdown-editor>
+ * ```
+ */
+let AitheMarkdownEditor = class AitheMarkdownEditor extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Markdown source text. Markdown 源文本。 */
+        this.value = '';
+        /** Whether the toolbar is visible. 是否显示工具栏。 */
+        this.showToolbar = false;
+        /** Whether to show the theme picker in toolbar. 是否显示主题选择器。 */
+        this.showTheme = true;
+        /** Whether to show line numbers. 是否显示行号。 */
+        this.lineNumbers = true;
+        /** Whether the editor is read-only. 是否只读。 */
+        this.readonly = false;
+        /** Placeholder text when the editor is empty. 编辑器为空时的占位文本。 */
+        this.placeholder = '';
+        /** Whether to show the language selector in toolbar. 是否显示语言选择器。 */
+        /**
+      
+         * Note: For markdown editing, language is fixed to "markdown",
+         * so the language selector is typically hidden.
+         * 注意：Markdown 编辑时语言固定为 "markdown"，因此语言选择器通常隐藏。
+         */
+        this.showLanguage = false;
+        /** Whether to show the fullscreen button in toolbar. 是否显示全屏按钮。 */
+        this.showFullscreen = true;
+        /** Whether to show the copy button in toolbar. 是否显示复制按钮。 */
+        this.showCopy = true;
+        /** Whether to show the line numbers toggle button in toolbar. 是否显示行号切换按钮。 */
+        this.showLineNumbersToggle = true;
+        /**
+         * Preview update strategy.
+         * 预览刷新策略。
+         *
+         * - `'auto'`: Re-render preview on every change (default).
+         * - `{ changeCount: N }`: Re-render preview only after every N changes.
+         * - `{ updateSeconds: N }`: Re-render preview at most once every N seconds.
+         * - `{ changeCount: N, updateSeconds: M }`: Both conditions must be met.
+         */
+        this.previewStrategy = 'auto';
+        /** Counter for changeCount-based throttling. 基于变更次数的节流计数器。 */
+        this._changeCount = 0;
+        /** Timestamp of the last preview render (for time-based throttling). 上次预览渲染的时间戳（用于基于时间的节流）。 */
+        this._lastRenderTime = 0;
+        /** Cached preview HTML to avoid re-parsing when throttled. 缓存的预览 HTML，节流时避免重复解析。 */
+        this._cachedPreview = '';
+    }
+    /**
+     * Returns true when a non-auto strategy is configured.
+     * 当配置了非 auto 策略时返回 true。
+     */
+    get _shouldThrottle() {
+        if (this.previewStrategy === 'auto')
+            return false;
+        return true;
+    }
+    /**
+     * Schedules a preview update based on the configured strategy.
+     * If conditions are met, invalidates the cache and triggers re-render.
+     * Otherwise, caches the current parse result for immediate use.
+     * 根据配置的策略调度预览更新。
+     * 如果条件满足，使缓存失效并触发重新渲染。
+     * 否则，缓存当前解析结果供即时使用。
+     */
+    _schedulePreview() {
+        if (this.previewStrategy === 'auto') {
+            this._cachedPreview = '';
+            return;
+        }
+        const strategy = this.previewStrategy;
+        const now = Date.now();
+        let ready = true;
+        // Check change-count condition
+        if (strategy.changeCount) {
+            this._changeCount++;
+            if (this._changeCount < strategy.changeCount) {
+                ready = false;
+            }
+            else {
+                this._changeCount = 0;
+            }
+        }
+        // Check time-throttle condition
+        if (strategy.updateSeconds) {
+            if (now - this._lastRenderTime < strategy.updateSeconds * 1000) {
+                ready = false;
+            }
+        }
+        if (ready) {
+            // Conditions met: invalidate cache and re-render
+            this._cachedPreview = '';
+            this._lastRenderTime = now;
+            this.requestUpdate();
+        }
+        else {
+            // Throttled: cache the current parse result
+            this._cachedPreview = parser.parse(this.value);
+        }
+    }
+    /**
+     * Returns the preview HTML, using the cached version if throttling is active.
+     * 返回预览 HTML，如果节流生效则使用缓存版本。
+     */
+    _getPreview() {
+        if (this._shouldThrottle && this._cachedPreview) {
+            return this._cachedPreview;
+        }
+        return parser.parse(this.value);
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+      }
+
+      /* Preview pane markdown styling — mirrors markdown.ts styles */
+      .md-preview {
+        color: var(--aithe-color-text);
+      }
+
+      .md-preview :where(.md-heading) {
+        margin: 0 0 var(--aithe-space-3);
+      }
+
+      .md-preview :where(.md-p, .md-list, .md-blockquote, .md-code-fence) {
+        margin: 0 0 var(--aithe-space-4);
+      }
+
+      .md-preview .md-code-fence {
+        display: block;
+      }
+
+      .md-preview .md-code {
+        font-family: var(--aithe-font-family-mono);
+        padding: 1px 4px;
+        border-radius: 3px;
+        background: var(--aithe-color-bg-muted, #f1f5f9);
+        color: var(--aithe-primary-7, #c7254e);
+        font-size: 0.9em;
+      }
+
+      .md-preview .md-blockquote {
+        padding-left: var(--aithe-space-4);
+        border-left: 3px solid var(--aithe-primary-5);
+        color: var(--aithe-color-text-muted);
+      }
+
+      .md-preview .md-link {
+        color: var(--aithe-primary-6);
+      }
+
+      .md-preview .md-table {
+        border-collapse: collapse;
+        width: 100%;
+        margin-bottom: var(--aithe-space-4);
+      }
+
+      .md-preview .md-table th,
+      .md-preview .md-table td {
+        border: 1px solid var(--aithe-color-border, #e2e8f0);
+        padding: var(--aithe-space-2) var(--aithe-space-3);
+        text-align: left;
+      }
+
+      .md-preview .md-table th {
+        background: var(--aithe-color-bg-muted, #f8fafc);
+        font-weight: 600;
+      }
+
+      .md-preview .md-hr {
+        border: none;
+        border-top: 1px solid var(--aithe-color-border, #e2e8f0);
+        margin: var(--aithe-space-4) 0;
+      }
+
+      .md-preview .md-image {
+        max-width: 100%;
+        height: auto;
+        border-radius: var(--aithe-container-radius-md, 6px);
+      }
+
+      /* Placeholder shown when the editor is empty */
+      .preview-placeholder {
+        padding: 24px;
+        text-align: center;
+        color: var(--aithe-color-text-muted, #94a3b8);
+        font-size: 14px;
+      }
+    `,
+    ]; }
+    /**
+     * Handles the aithe-input event from the underlying code-editor.
+     * Updates the value property, emits aithe-input, and schedules a preview refresh.
+     * 处理底层 code-editor 的 aithe-input 事件。
+     * 更新 value 属性，触发 aithe-input 事件，并调度预览刷新。
+     */
+    handleValueChange(e) {
+        this.value = e.detail.value;
+        this.emit('aithe-input', { value: this.value });
+        this._schedulePreview();
+    }
+    /**
+     * Renders the markdown editor by composing an aithe-code-editor
+     * with a preview slot that displays the parsed HTML.
+     * 渲染 markdown 编辑器：组合 aithe-code-editor 和预览插槽，显示解析后的 HTML。
+     */
+    render() {
+        const previewContent = this.value
+            ? unsafeHTML(this._getPreview())
+            : html `
+          <div class="preview-placeholder">预览区域</div>
+        `;
+        return html `
+      <aithe-code-editor
+        language="markdown"
+        .value=${this.value}
+        ?show-toolbar=${this.showToolbar}
+        ?line-numbers=${this.lineNumbers}
+        ?readonly=${this.readonly}
+        placeholder=${this.placeholder}
+        show-preview
+        ?show-theme=${this.showTheme}
+        ?show-language=${this.showLanguage}
+        ?show-fullscreen=${this.showFullscreen}
+        ?show-copy=${this.showCopy}
+        ?show-line-numbers-toggle=${this.showLineNumbersToggle}
+        @aithe-input=${this.handleValueChange}
+      >
+        <div slot="preview" class="md-preview">${previewContent}</div>
+      </aithe-code-editor>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheMarkdownEditor.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-toolbar' })
+], AitheMarkdownEditor.prototype, "showToolbar", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-theme' })
+], AitheMarkdownEditor.prototype, "showTheme", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'line-numbers' })
+], AitheMarkdownEditor.prototype, "lineNumbers", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], AitheMarkdownEditor.prototype, "readonly", void 0);
+__decorate([
+    property({ type: String })
+], AitheMarkdownEditor.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-language' })
+], AitheMarkdownEditor.prototype, "showLanguage", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-fullscreen' })
+], AitheMarkdownEditor.prototype, "showFullscreen", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-copy' })
+], AitheMarkdownEditor.prototype, "showCopy", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-line-numbers-toggle' })
+], AitheMarkdownEditor.prototype, "showLineNumbersToggle", void 0);
+__decorate([
+    property({ type: Object })
+], AitheMarkdownEditor.prototype, "previewStrategy", void 0);
+AitheMarkdownEditor = __decorate([
+    customElement('aithe-markdown-editor')
+], AitheMarkdownEditor);
+export { AitheMarkdownEditor };

package/dist/components/display/markdown.d.ts

@@ -1,11 +1,61 @@
-import { AitheElement } from '../../base/aithe-element';
+import { AitheElement } from '../../core/aithe-element';
+import type { MarkdownLinkHook } from '../../core/markdown';
 /**
- * Lightweight markdown renderer.
+ * Full-featured markdown renderer that converts GFM markdown text to styled HTML.
+ * 全功能 Markdown 渲染器，将 GFM Markdown 文本转换为带样式的 HTML。
+ *
+ * Supported syntax / 支持的语法：
+ * - `# ` `## ` `### ` … `###### ` — ATX headings 标题
+ * - `===` / `---` underline — setext headings 下划线标题
+ * - `---` `***` `___` — thematic break 分隔线
+ * - `` ``` ```` / `~~~` — fenced code blocks 围栏代码块
+ * - `| col1 | col2 |` — tables 表格
+ * - `> text` — blockquote 引用块
+ * - `- item` / `* item` — unordered list 无序列表
+ * - `- [ ] task` / `- [x] done` — task list 任务列表
+ * - `**bold**` — bold 加粗
+ * - `*italic*` — italic 斜体
+ * - `` `code` `` — inline code 行内代码
+ * - `~~text~~` — strikethrough 删除线
+ * - `[text](url)` — link 链接（外链默认转为纯文本，可通过 linkHooks 自定义）
+ * - `![alt](url)` — image 图片
+ *
+ * @slot - No slots; content is provided via the `content` property. 无插槽；内容通过 `content` 属性提供。
+ * @property {string} content - Raw markdown source string. Markdown 源文本字符串。
+ * @property {MarkdownLinkHook[]} [linkHooks] - Custom link hooks for URL processing. 自定义链接处理 hook。
+ *
+ * @example
+ * ```html
+ * <aithe-markdown content="# Hello\n**Bold** text and \`code\`."></aithe-markdown>
+ * ```
  */
 export declare class AitheMarkdown extends AitheElement {
+    /** Raw markdown source string. Markdown 源文本字符串。 */
     content: string;
-    theme: 'default' | 'article';
+    /** Custom link hooks for URL processing. 自定义链接处理 hook。 */
+    linkHooks?: MarkdownLinkHook[];
+    /**
+     * Lazily creates or re-creates the FullMarkdownParser when linkHooks changes.
+     * Caches the parser instance to avoid re-parsing on every render.
+     * 懒创建解析器，当 linkHooks 变化时重新创建 FullMarkdownParser。
+     * 缓存解析器实例以避免每次渲染都重新解析。
+     */
+    private get parser();
+    /** Cached FullMarkdownParser instance. 缓存的 FullMarkdownParser 实例。 */
+    private _parser?;
+    /** Previously used linkHooks reference for change detection. 上一次使用的 linkHooks 引用，用于变更检测。 */
+    private _linkHooks?;
     static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Renders the markdown content by parsing it into styled HTML
+     * and wrapping it in an <article> element for semantic structure.
+     * 渲染 markdown 内容：解析为带样式的 HTML，并用 <article> 元素包裹以保持语义化结构。
+     */
     render(): import("lit-html").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-markdown': AitheMarkdown;
+    }
+}
 //# sourceMappingURL=markdown.d.ts.map