@h-ai/ui 0.1.0-alpha5

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/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 + highlight.js 的 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,161 @@
+/**
+ * @h-ai/ui — Markdown 解析工具
+ *
+ * 基于 marked + highlight.js 的 Markdown 解析引擎。
+ * 支持 GFM（GitHub Flavored Markdown），包含代码高亮、表格、任务列表等。
+ * @module markdown-parse
+ */
+import hljs from 'highlight.js/lib/common';
+import { Marked } from 'marked';
+/**
+ * 对 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 && hljs.getLanguage(lang) ? lang : '';
+            let highlighted;
+            if (options.enableHighlight && language) {
+                highlighted = hljs.highlight(text, { language }).value;
+            }
+            else if (options.enableHighlight) {
+                highlighted = hljs.highlightAuto(text).value;
+            }
+            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="hljs${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 && /^(?:https?:\/\/|\/|#|mailto:)/i.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 && /^(?:https?:\/\/|\/|data:image\/)/i.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 : '';
+}

package/dist/components/scenes/app/FeedbackModal.svelte

@@ -0,0 +1,160 @@
+<!--
+  @component FeedbackModal
+  用户反馈模态框，支持 Bug 报告、功能建议等多种反馈类型。
+
+  @prop {boolean} open - 是否显示模态框（双向绑定）
+  @prop {function} onsubmit - 提交反馈的回调
+
+  @example
+  <FeedbackModal
+    bind:open={showFeedback}
+    onsubmit={async (data) => { await submitFeedback(data) }}
+  />
+-->
+<script lang='ts'>
+  import Modal from '../../compounds/Modal.svelte'
+  import Button from '../../primitives/Button.svelte'
+  import Input from '../../primitives/Input.svelte'
+  import Select from '../../primitives/Select.svelte'
+  import Textarea from '../../primitives/Textarea.svelte'
+
+  type FeedbackType = 'bug' | 'feature' | 'question' | 'other'
+
+  interface FeedbackData {
+    type: FeedbackType
+    description: string
+    contact?: string
+  }
+
+  /** i18n 文案配置 */
+  interface FeedbackLabels {
+    title?: string
+    description?: string
+    typeLabel?: string
+    contentLabel?: string
+    contentPlaceholder?: string
+    contactLabel?: string
+    contactPlaceholder?: string
+    cancel?: string
+    submit?: string
+    errorEmpty?: string
+    errorSubmit?: string
+    types?: {
+      bug?: string
+      feature?: string
+      question?: string
+      other?: string
+    }
+  }
+
+  import { uiM } from '../../../messages.js'
+
+  interface Props {
+    open?: boolean
+    labels?: FeedbackLabels
+    onsubmit?: (data: FeedbackData) => Promise<void>
+  }
+
+  let { open = $bindable(false), labels = {}, onsubmit }: Props = $props()
+
+  // 文案优先使用传入的 labels，缺省回退到内置消息 uiM(...)
+
+  let feedbackType = $state<FeedbackType>('bug')
+  let description = $state('')
+  let contact = $state('')
+  let loading = $state(false)
+  let error = $state('')
+
+  const typeOptions = $derived([
+    { value: 'bug', label: labels.types?.bug ?? uiM('feedback_type_bug') },
+    { value: 'feature', label: labels.types?.feature ?? uiM('feedback_type_feature') },
+    { value: 'question', label: labels.types?.question ?? uiM('feedback_type_question') },
+    { value: 'other', label: labels.types?.other ?? uiM('feedback_type_other') },
+  ])
+
+  async function handleSubmit() {
+    if (!description.trim()) {
+      error = labels.errorEmpty ?? uiM('feedback_error_empty')
+      return
+    }
+
+    loading = true
+    error = ''
+
+    try {
+      await onsubmit?.({
+        type: feedbackType,
+        description: description.trim(),
+        contact: contact.trim() || undefined,
+      })
+      open = false
+      resetForm()
+    }
+    catch (e) {
+      error = e instanceof Error ? e.message : (labels.errorSubmit ?? uiM('feedback_error_submit'))
+    }
+    finally {
+      loading = false
+    }
+  }
+
+  function resetForm() {
+    feedbackType = 'bug'
+    description = ''
+    contact = ''
+    error = ''
+  }
+</script>
+
+<Modal bind:open title={labels.title ?? uiM('feedback_title')}>
+  <p class='text-base-content/70 mb-4'>{labels.description ?? uiM('feedback_description')}</p>
+
+  {#if error}
+    <div class='alert alert-error mb-4'>
+      <span class='icon-[tabler--alert-circle] size-5'></span>
+      <span>{error}</span>
+    </div>
+  {/if}
+
+  <div class='space-y-4'>
+    <div class='fieldset'>
+      <legend class='fieldset-legend'>{labels.typeLabel ?? uiM('feedback_type_label')}</legend>
+      <Select
+        id='feedback-type'
+        options={typeOptions}
+        bind:value={feedbackType}
+      />
+    </div>
+
+    <div class='fieldset'>
+      <legend class='fieldset-legend'>{labels.contentLabel ?? uiM('feedback_content_label')} <span class='text-error'>*</span></legend>
+      <Textarea
+        id='feedback-desc'
+        class='h-32'
+        placeholder={labels.contentPlaceholder ?? uiM('feedback_content_placeholder')}
+        bind:value={description}
+      />
+    </div>
+
+    <div class='fieldset'>
+      <legend class='fieldset-legend'>{labels.contactLabel ?? uiM('feedback_contact_label')}</legend>
+      <Input
+        id='feedback-contact'
+        type='text'
+        class='w-full'
+        placeholder={labels.contactPlaceholder ?? uiM('feedback_contact_placeholder')}
+        bind:value={contact}
+        autocomplete='email'
+      />
+    </div>
+  </div>
+
+  {#snippet footer()}
+    <Button variant='ghost' onclick={() => open = false}>
+      {labels.cancel ?? uiM('feedback_cancel')}
+    </Button>
+    <Button variant='primary' {loading} onclick={handleSubmit}>
+      {labels.submit ?? uiM('feedback_submit')}
+    </Button>
+  {/snippet}
+</Modal>

package/dist/components/scenes/app/FeedbackModal.svelte.d.ts

@@ -0,0 +1,47 @@
+type FeedbackType = 'bug' | 'feature' | 'question' | 'other';
+interface FeedbackData {
+    type: FeedbackType;
+    description: string;
+    contact?: string;
+}
+/** i18n 文案配置 */
+interface FeedbackLabels {
+    title?: string;
+    description?: string;
+    typeLabel?: string;
+    contentLabel?: string;
+    contentPlaceholder?: string;
+    contactLabel?: string;
+    contactPlaceholder?: string;
+    cancel?: string;
+    submit?: string;
+    errorEmpty?: string;
+    errorSubmit?: string;
+    types?: {
+        bug?: string;
+        feature?: string;
+        question?: string;
+        other?: string;
+    };
+}
+interface Props {
+    open?: boolean;
+    labels?: FeedbackLabels;
+    onsubmit?: (data: FeedbackData) => Promise<void>;
+}
+/**
+ * FeedbackModal
+ * 用户反馈模态框，支持 Bug 报告、功能建议等多种反馈类型。
+ *
+ * @prop {boolean} open - 是否显示模态框（双向绑定）
+ * @prop {function} onsubmit - 提交反馈的回调
+ *
+ * @example
+ * <FeedbackModal
+ *   bind:open={showFeedback}
+ *   onsubmit={async (data) => { await submitFeedback(data) }}
+ * />
+ */
+declare const FeedbackModal: import("svelte").Component<Props, {}, "open">;
+type FeedbackModal = ReturnType<typeof FeedbackModal>;
+export default FeedbackModal;