@h-ai/ui 0.1.0-alpha.10

package/dist/components/scenes/ai/document-types.d.ts

@@ -0,0 +1,164 @@
+/**
+ * Markdown source type, used to distinguish plain markdown, document panel, or code-only rendering.
+ */
+export type MarkdownSourceKind = 'markdown' | 'document' | 'code';
+export interface MarkdownOutlineItem {
+    /** Anchor id for outline navigation and heading sync. */
+    id: string;
+    /** Plain heading text without inline markdown formatting. */
+    text: string;
+    /** Heading level (1-6), mapping to h1-h6. */
+    level: number;
+    /** Numbered heading text for outline display. */
+    numberedTitle: string;
+}
+export interface MarkdownCodeBlockItem {
+    /** Stable code block id used by preview and DOM bindings. */
+    id: string;
+    /** Raw code text before highlighting. */
+    code: string;
+    /** Detected language label, if any. */
+    language?: string;
+}
+export interface MarkdownCodeRunRequest {
+    /** Code block id for mapping results back to the preview slot. */
+    blockId: string;
+    /** Raw code text. */
+    code: string;
+    /** Code language for runtime branching. */
+    language?: string;
+    /** Current document title for preview metadata or logging. */
+    title?: string;
+    /** Source kind for contextual runtime decisions. */
+    sourceKind: MarkdownSourceKind;
+}
+export interface MarkdownCodeRunResult {
+    /** Output kind that drives preview rendering. */
+    kind?: 'text' | 'markdown' | 'html';
+    /** Preview output content. */
+    content: string;
+    /** Preview title; default text is used when omitted. */
+    title?: string;
+    /** Optional preview description. */
+    description?: string;
+}
+export interface MarkdownRewriteAction {
+    /** Rewrite action id used in callbacks. */
+    id: string;
+    /** User-facing label for the rewrite action. */
+    label: string;
+}
+export interface MarkdownRewriteRequest {
+    /** Rewrite action id associated with the UI action. */
+    actionId: string;
+    /** The selected source text. */
+    selectedText: string;
+    /** Full document content at the time of the request. */
+    content: string;
+    /** Current document title. */
+    title?: string;
+}
+/**
+ * Block-level format actions for the editor toolbar.
+ */
+export type MarkdownBlockFormatKind = 'heading' | 'bullet';
+/**
+ * Inline format actions for the editor toolbar.
+ */
+export type MarkdownInlineFormatKind = 'bold' | 'italic' | 'strike' | 'underline' | 'code' | 'highlight' | 'link';
+export interface MarkdownToolbarDownloadAction {
+    /** Action id used to identify the download target. */
+    id: string;
+    /** Label shown in the download menu. */
+    label: string;
+    /** Optional short badge displayed beside the menu label. */
+    badgeLabel?: string;
+}
+export interface AiDocumentEditorProps {
+    /** Markdown source content. */
+    content?: string;
+    /** Document title displayed in the header. */
+    title?: string;
+    /** Source kind that affects rendering and interactions. */
+    sourceKind?: MarkdownSourceKind;
+    /** Default language when sourceKind is `code`. */
+    codeLanguage?: string;
+    /** Custom class for the outer container. */
+    class?: string;
+    /** Whether to show the copy button on code blocks. */
+    showCopyButton?: boolean;
+    /** Whether to show the run button on code blocks. */
+    showRunButton?: boolean;
+    /** Whether syntax highlighting is enabled. */
+    enableHighlight?: boolean;
+    /** Whether soft line breaks are rendered as <br>. */
+    breaks?: boolean;
+    /** Whether to show the left outline panel. */
+    showOutline?: boolean;
+    /** Whether to show the top toolbar. */
+    showToolbar?: boolean;
+    /** Initial outline collapsed state. */
+    initialOutlineCollapsed?: boolean;
+    /** Status text shown in the header or toolbar. */
+    statusText?: string;
+    /** Whether a rewrite flow is in progress. */
+    rewritePending?: boolean;
+    /** Available rewrite actions; empty hides the menu. */
+    rewriteActions?: MarkdownRewriteAction[];
+    /** Callback fired when the close action is clicked. */
+    onclose?: () => void;
+    /** Whether the close / back action should render as disabled. */
+    closeDisabled?: boolean;
+    /** Callback fired when the undo action is clicked. */
+    onundo?: () => void;
+    /** Whether the undo button should render as disabled. */
+    undoDisabled?: boolean;
+    /** Callback fired when the redo action is clicked. */
+    onredo?: () => void;
+    /** Whether the redo button should render as disabled. */
+    redoDisabled?: boolean;
+    /** Code run handler that returns preview results. */
+    oncoderun?: (request: MarkdownCodeRunRequest) => MarkdownCodeRunResult | void | Promise<MarkdownCodeRunResult | void>;
+    /** Selection rewrite handler for external processing. */
+    onrewrite?: (request: MarkdownRewriteRequest) => void | Promise<void>;
+    /** Exposes the scroll container for external synchronization. */
+    editorScrollHost?: HTMLDivElement | null;
+    /** Exposes the content container for editable reads. */
+    previewHost?: HTMLElement | null;
+    /** Eyebrow label shown above the title. */
+    eyebrow?: string;
+    /** Primary header text, shown with higher priority. */
+    metaText?: string;
+    /** Pill status text shown near the title. */
+    saveState?: string;
+    /** Whether the document body is contenteditable. */
+    editable?: boolean;
+    /** Download menu items; defaults are used when empty. */
+    downloadActions?: MarkdownToolbarDownloadAction[];
+    /** Label for the history action. */
+    historyActionLabel?: string;
+    /** Label for the view version action. */
+    versionActionLabel?: string;
+    /** Scroll callback for syncing external state. */
+    ondocumentscroll?: (event: Event) => void;
+    /** Mouseup callback to sync selection state. */
+    onpreviewmouseup?: () => void;
+    /** Input callback for contenteditable changes. */
+    onpreviewinput?: (event: Event) => void;
+    /** Blur callback for committing edits. */
+    onpreviewblur?: () => void;
+    /** Callback fired when a download action is chosen. */
+    ondownload?: (actionId: string) => void;
+    /** Callback fired when the history action is clicked. */
+    onhistory?: () => void;
+    /** Custom full-document copy handler. */
+    oncopydocument?: () => void | Promise<void>;
+    /** Block-format action handler from the selection toolbar. */
+    onapplyblockformat?: (kind: MarkdownBlockFormatKind) => void;
+    /** Inline-format action handler from the selection toolbar. */
+    onapplyinlineformat?: (kind: MarkdownInlineFormatKind) => void;
+    /** Selection copy handler for custom behavior. */
+    oncopyselection?: () => void | Promise<void>;
+    /** Selection annotation handler. */
+    onannotation?: () => void | Promise<void>;
+}

package/dist/components/scenes/ai/document-types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/scenes/ai/highlight.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @h-ai/ui — Shiki 语法高亮引擎
+ *
+ * 基于 Shiki 的同步语法高亮工具，使用 CSS Variables 主题实现 DaisyUI 自适应。
+ * 替代 highlight.js，解决 CJS 兼容性问题（SSR / Vite 预构建）。
+ *
+ * @module highlight
+ */
+/**
+ * 检查给定语言标识符是否受支持
+ *
+ * @param lang - 语言标识符（支持别名如 js、ts、py）
+ * @returns 是否支持该语言
+ */
+export declare function isLanguageSupported(lang: string): boolean;
+/**
+ * 使用 Shiki 执行代码高亮
+ *
+ * 输出为 HTML 片段（不含 <pre><code> 包裹），可直接嵌入自定义容器。
+ * 使用 CSS Variables 主题，颜色通过 `--hai-hl-*` CSS 变量控制。
+ *
+ * @param text - 代码文本
+ * @param lang - 语言标识符
+ * @returns 高亮后的 HTML 片段
+ */
+export declare function highlightCode(text: string, lang: string): string;

package/dist/components/scenes/ai/highlight.js

@@ -0,0 +1,151 @@
+/**
+ * @h-ai/ui — Shiki 语法高亮引擎
+ *
+ * 基于 Shiki 的同步语法高亮工具，使用 CSS Variables 主题实现 DaisyUI 自适应。
+ * 替代 highlight.js，解决 CJS 兼容性问题（SSR / Vite 预构建）。
+ *
+ * @module highlight
+ */
+import langBash from '@shikijs/langs/bash';
+import langC from '@shikijs/langs/c';
+// ─── 语言定义导入（静态，同步解析） ───
+import langCpp from '@shikijs/langs/cpp';
+import langCsharp from '@shikijs/langs/csharp';
+import langCss from '@shikijs/langs/css';
+import langDiff from '@shikijs/langs/diff';
+import langGo from '@shikijs/langs/go';
+import langGraphql from '@shikijs/langs/graphql';
+import langHtml from '@shikijs/langs/html';
+import langJava from '@shikijs/langs/java';
+import langJavascript from '@shikijs/langs/javascript';
+import langJson from '@shikijs/langs/json';
+import langKotlin from '@shikijs/langs/kotlin';
+import langLua from '@shikijs/langs/lua';
+import langMarkdown from '@shikijs/langs/markdown';
+import langPhp from '@shikijs/langs/php';
+import langPython from '@shikijs/langs/python';
+import langRuby from '@shikijs/langs/ruby';
+import langRust from '@shikijs/langs/rust';
+import langScss from '@shikijs/langs/scss';
+import langShell from '@shikijs/langs/shellscript';
+import langSql from '@shikijs/langs/sql';
+import langSwift from '@shikijs/langs/swift';
+import langToml from '@shikijs/langs/toml';
+import langTypescript from '@shikijs/langs/typescript';
+import langXml from '@shikijs/langs/xml';
+import langYaml from '@shikijs/langs/yaml';
+import { createCssVariablesTheme, createHighlighterCoreSync } from 'shiki/core';
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';
+// ─── CSS Variables 主题（DaisyUI 自适应色彩由组件 CSS 定义） ───
+const haiTheme = createCssVariablesTheme({
+    name: 'hai-adaptive',
+    variablePrefix: '--hai-hl-',
+    variableDefaults: {},
+    fontStyle: true,
+});
+const THEME_NAME = 'hai-adaptive';
+// ─── 创建同步高亮器 ───
+const highlighter = createHighlighterCoreSync({
+    themes: [haiTheme],
+    langs: [
+        langJavascript,
+        langTypescript,
+        langPython,
+        langJava,
+        langGo,
+        langRust,
+        langC,
+        langCpp,
+        langCsharp,
+        langRuby,
+        langPhp,
+        langSwift,
+        langKotlin,
+        langSql,
+        langBash,
+        langShell,
+        langHtml,
+        langXml,
+        langCss,
+        langScss,
+        langJson,
+        langYaml,
+        langToml,
+        langMarkdown,
+        langDiff,
+        langGraphql,
+        langLua,
+    ],
+    engine: createJavaScriptRegexEngine(),
+});
+// ─── 语言别名映射（hljs 兼容 + 常见别名） ───
+const LANG_ALIASES = {
+    'js': 'javascript',
+    'ts': 'typescript',
+    'py': 'python',
+    'rb': 'ruby',
+    'rs': 'rust',
+    'sh': 'bash',
+    'shell': 'bash',
+    'zsh': 'bash',
+    'yml': 'yaml',
+    'c++': 'cpp',
+    'c#': 'csharp',
+    'cs': 'csharp',
+    'kt': 'kotlin',
+    'gql': 'graphql',
+    'md': 'markdown',
+    'objc': 'objective-c',
+    'plaintext': 'text',
+    'plain': 'text',
+    'txt': 'text',
+};
+/**
+ * 解析语言标识符为 Shiki 支持的语言名
+ */
+function resolveLang(lang) {
+    const normalized = lang.toLowerCase().trim();
+    if (normalized === '' || normalized === 'text' || normalized === 'plaintext')
+        return null;
+    const resolved = LANG_ALIASES[normalized] ?? normalized;
+    const loaded = highlighter.getLoadedLanguages();
+    return loaded.includes(resolved) ? resolved : null;
+}
+/**
+ * 从 codeToHtml 输出中提取 <code> 标签内的 innerHTML
+ */
+function extractCodeInnerHtml(html) {
+    const startTag = '<code>';
+    const endTag = '</code>';
+    const start = html.indexOf(startTag);
+    const end = html.lastIndexOf(endTag);
+    if (start === -1 || end === -1)
+        return html;
+    return html.slice(start + startTag.length, end);
+}
+/**
+ * 检查给定语言标识符是否受支持
+ *
+ * @param lang - 语言标识符（支持别名如 js、ts、py）
+ * @returns 是否支持该语言
+ */
+export function isLanguageSupported(lang) {
+    return resolveLang(lang) !== null;
+}
+/**
+ * 使用 Shiki 执行代码高亮
+ *
+ * 输出为 HTML 片段（不含 <pre><code> 包裹），可直接嵌入自定义容器。
+ * 使用 CSS Variables 主题，颜色通过 `--hai-hl-*` CSS 变量控制。
+ *
+ * @param text - 代码文本
+ * @param lang - 语言标识符
+ * @returns 高亮后的 HTML 片段
+ */
+export function highlightCode(text, lang) {
+    const resolved = resolveLang(lang);
+    if (!resolved)
+        return '';
+    const html = highlighter.codeToHtml(text, { lang: resolved, theme: THEME_NAME });
+    return extractCodeInnerHtml(html);
+}

package/dist/components/scenes/ai/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @h-ai/ui — AI 场景组件 (AI Scenes)
+ *
+ * 面向 AI 交互场景的组件，包含 Markdown 渲染器等。
+ * 内置中英文翻译，自动响应全局 locale。
+ * @module index
+ */
+export { default as AiDocumentDownloadMenu } from './AiDocumentDownloadMenu.svelte';
+export { default as AiDocumentEditor } from './AiDocumentEditor.svelte';
+export { downloadAiDocument, resolveDocumentDownloadActions, resolveDocumentMarkdownContent, } from './document-download.js';
+export type { AiDocumentDownloadFormat, AiDocumentDownloadRequest, AiDocumentResolvedDownloadAction, } from './document-download.js';
+export { renderMarkdownDocument } from './document-parse.js';
+export type { MarkdownDocumentParseOptions, MarkdownRenderResult, } from './document-parse.js';
+export type { AiDocumentEditorProps, MarkdownBlockFormatKind, MarkdownCodeBlockItem, MarkdownCodeRunRequest, MarkdownCodeRunResult, MarkdownInlineFormatKind, MarkdownOutlineItem, MarkdownRewriteAction, MarkdownRewriteRequest, MarkdownToolbarDownloadAction, } from './document-types.js';
+export { parseMarkdown } from './markdown-parse.js';
+export type { MarkdownParseOptions } from './markdown-parse.js';
+export { default as MarkdownRenderer } from './MarkdownRenderer.svelte';

package/dist/components/scenes/ai/index.js

@@ -0,0 +1,13 @@
+/**
+ * @h-ai/ui — AI 场景组件 (AI Scenes)
+ *
+ * 面向 AI 交互场景的组件，包含 Markdown 渲染器等。
+ * 内置中英文翻译，自动响应全局 locale。
+ * @module index
+ */
+export { default as AiDocumentDownloadMenu } from './AiDocumentDownloadMenu.svelte';
+export { default as AiDocumentEditor } from './AiDocumentEditor.svelte';
+export { downloadAiDocument, resolveDocumentDownloadActions, resolveDocumentMarkdownContent, } from './document-download.js';
+export { renderMarkdownDocument } from './document-parse.js';
+export { parseMarkdown } from './markdown-parse.js';
+export { default as MarkdownRenderer } from './MarkdownRenderer.svelte';

package/dist/components/scenes/ai/markdown-parse.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @h-ai/ui — Markdown 解析工具
+ *
+ * 基于 marked + Shiki 的 Markdown 解析引擎。
+ * 支持 GFM（GitHub Flavored Markdown），包含代码高亮、表格、任务列表等。
+ * @module markdown-parse
+ */
+/**
+ * Markdown 解析配置
+ */
+export interface MarkdownParseOptions {
+    /** 是否启用代码语法高亮（默认 true） */
+    enableHighlight?: boolean;
+    /** 是否显示代码块的复制按钮（默认 true） */
+    showCopyButton?: boolean;
+    /** 是否将换行符转换为 <br>（默认 true，适合 AI 输出） */
+    breaks?: boolean;
+}
+/**
+ * 将 Markdown 文本解析为 HTML
+ *
+ * @param content - Markdown 源文本
+ * @param options - 可选的解析配置
+ * @returns 解析后的 HTML 字符串
+ *
+ * @example
+ * ```ts
+ * const html = parseMarkdown('# Hello\n\nWorld')
+ * // => '<h1>Hello</h1>\n<p>World</p>\n'
+ * ```
+ */
+export declare function parseMarkdown(content: string, options?: MarkdownParseOptions): string;

package/dist/components/scenes/ai/markdown-parse.js

@@ -0,0 +1,164 @@
+/**
+ * @h-ai/ui — Markdown 解析工具
+ *
+ * 基于 marked + Shiki 的 Markdown 解析引擎。
+ * 支持 GFM（GitHub Flavored Markdown），包含代码高亮、表格、任务列表等。
+ * @module markdown-parse
+ */
+import { Marked } from 'marked';
+import { highlightCode, isLanguageSupported } from './highlight.js';
+const SAFE_LINK_HREF_REGEX = /^(?:https?:\/\/|\/|#|mailto:)/i;
+const SAFE_IMAGE_SRC_REGEX = /^(?:https?:\/\/|\/|data:image\/)/i;
+/**
+ * 对 HTML 特殊字符进行转义
+ *
+ * @param text - 原始文本
+ * @returns 转义后的安全文本
+ */
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+/**
+ * 创建自定义渲染器对象
+ *
+ * @param options - 解析配置
+ * @returns marked RendererObject
+ */
+function createRendererObject(options) {
+    return {
+        // 代码块：语法高亮 + 语言标签 + 复制按钮
+        code({ text, lang }) {
+            const language = lang && isLanguageSupported(lang) ? lang : '';
+            let highlighted;
+            if (options.enableHighlight && language) {
+                highlighted = highlightCode(text, language);
+            }
+            else if (options.enableHighlight) {
+                // 未指定语言时不做自动检测，直接转义
+                highlighted = escapeHtml(text);
+            }
+            else {
+                highlighted = escapeHtml(text);
+            }
+            const langLabel = language
+                ? `<span class="hai-md-code-lang">${escapeHtml(language)}</span>`
+                : '';
+            const copyBtn = options.showCopyButton
+                ? `<button type="button" class="hai-md-copy-btn" data-copy-code aria-label="Copy code"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>`
+                : '';
+            return `<div class="hai-md-code-block">`
+                + `<div class="hai-md-code-header">${langLabel}${copyBtn}</div>`
+                + `<pre><code class="hai-hl${language ? ` language-${escapeHtml(language)}` : ''}">${highlighted}</code></pre>`
+                + `</div>`;
+        },
+        // 原始 HTML 块：转义以防止 XSS
+        html(token) {
+            return escapeHtml('text' in token ? token.text : '');
+        },
+        // 链接：外部链接自动添加 target="_blank"，阻止危险协议
+        link({ href, title, tokens }) {
+            const text = this.parser.parseInline(tokens);
+            // 安全检查：仅允许安全协议
+            const safeHref = href && SAFE_LINK_HREF_REGEX.test(href) ? href : '';
+            const isExternal = safeHref && (safeHref.startsWith('http://') || safeHref.startsWith('https://'));
+            const attrs = [
+                `href="${escapeHtml(safeHref)}"`,
+                title ? `title="${escapeHtml(title)}"` : '',
+                isExternal ? 'target="_blank" rel="noopener noreferrer"' : '',
+            ].filter(Boolean).join(' ');
+            return `<a ${attrs}>${text}</a>`;
+        },
+        // 图片：添加 loading="lazy"，验证 src 协议
+        image({ href, title, text }) {
+            // 安全检查：仅允许安全协议
+            const safeSrc = href && SAFE_IMAGE_SRC_REGEX.test(href) ? href : '';
+            const attrs = [
+                `src="${escapeHtml(safeSrc)}"`,
+                `alt="${escapeHtml(text || '')}"`,
+                title ? `title="${escapeHtml(title)}"` : '',
+                'loading="lazy"',
+                'class="hai-md-img"',
+            ].filter(Boolean).join(' ');
+            return `<img ${attrs} />`;
+        },
+        // 表格：添加响应式包裹容器
+        table(token) {
+            let headerHtml = '';
+            for (const cell of token.header) {
+                const align = cell.align ? ` style="text-align:${cell.align}"` : '';
+                headerHtml += `<th${align}>${this.parser.parseInline(cell.tokens)}</th>`;
+            }
+            let bodyHtml = '';
+            for (const row of token.rows) {
+                let rowHtml = '';
+                for (const cell of row) {
+                    const align = cell.align ? ` style="text-align:${cell.align}"` : '';
+                    rowHtml += `<td${align}>${this.parser.parseInline(cell.tokens)}</td>`;
+                }
+                bodyHtml += `<tr>${rowHtml}</tr>`;
+            }
+            return `<div class="hai-md-table-wrap">`
+                + `<table><thead><tr>${headerHtml}</tr></thead><tbody>${bodyHtml}</tbody></table>`
+                + `</div>`;
+        },
+    };
+}
+/**
+ * 创建 Markdown 解析器实例
+ *
+ * @param options - 解析配置
+ * @returns 配置好的 Marked 实例
+ */
+function createMarkedInstance(options) {
+    return new Marked({
+        renderer: createRendererObject(options),
+        gfm: true,
+        breaks: options.breaks,
+    });
+}
+/** 默认配置 */
+const DEFAULT_OPTIONS = {
+    enableHighlight: true,
+    showCopyButton: true,
+    breaks: true,
+};
+/** 缓存 Marked 实例，避免重复创建 */
+let cachedInstance = null;
+let cachedOptionsKey = '';
+/**
+ * 获取配置签名，用于实例缓存比较
+ */
+function getOptionsKey(options) {
+    return `${options.enableHighlight}-${options.showCopyButton}-${options.breaks}`;
+}
+/**
+ * 将 Markdown 文本解析为 HTML
+ *
+ * @param content - Markdown 源文本
+ * @param options - 可选的解析配置
+ * @returns 解析后的 HTML 字符串
+ *
+ * @example
+ * ```ts
+ * const html = parseMarkdown('# Hello\n\nWorld')
+ * // => '<h1>Hello</h1>\n<p>World</p>\n'
+ * ```
+ */
+export function parseMarkdown(content, options) {
+    if (!content)
+        return '';
+    const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+    const key = getOptionsKey(mergedOptions);
+    if (!cachedInstance || cachedOptionsKey !== key) {
+        cachedInstance = createMarkedInstance(mergedOptions);
+        cachedOptionsKey = key;
+    }
+    const result = cachedInstance.parse(content);
+    // marked.parse 可能返回 string | Promise<string>，此处同步调用
+    return typeof result === 'string' ? result : '';
+}