@h-ai/ui 0.1.0-alpha.29 → 0.1.0-alpha.31

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

@@ -8,21 +8,14 @@
 import { Marked } from 'marked';
 import { createEditorMarkdownExtensions } from './editor-markdown-extensions.js';
 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;');
+import { escapeHtml, isExternalLinkHref, sanitizeImageSrc, sanitizeLinkHref, sanitizeMarkdownHtml, } from './safe-html.js';
+function readHtmlTokenSource(token) {
+    if ('raw' in token && typeof token.raw === 'string') {
+        return token.raw;
+    }
+    return 'text' in token && typeof token.text === 'string'
+        ? token.text
+        : '';
 }
 function createTableCellAttrs(cell) {
     const attrs = [];
@@ -69,14 +62,17 @@ function createRendererObject(options) {
         },
         // 原始 HTML 块：转义以防止 XSS
         html(token) {
-            return escapeHtml('text' in token ? token.text : '');
+            const source = readHtmlTokenSource(token);
+            return options.allowHtmlTags
+                ? sanitizeMarkdownHtml(source)
+                : escapeHtml(source);
         },
         // 链接：外部链接自动添加 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 safeHref = sanitizeLinkHref(href);
+            const isExternal = safeHref && isExternalLinkHref(safeHref);
             const attrs = [
                 `href="${escapeHtml(safeHref)}"`,
                 title ? `title="${escapeHtml(title)}"` : '',
@@ -87,7 +83,7 @@ function createRendererObject(options) {
         // 图片：添加 loading="lazy"，验证 src 协议
         image({ href, title, text }) {
             // 安全检查：仅允许安全协议
-            const safeSrc = href && SAFE_IMAGE_SRC_REGEX.test(href) ? href : '';
+            const safeSrc = sanitizeImageSrc(href);
             const attrs = [
                 `src="${escapeHtml(safeSrc)}"`,
                 `alt="${escapeHtml(text || '')}"`,
@@ -136,6 +132,7 @@ const DEFAULT_OPTIONS = {
     enableHighlight: true,
     showCopyButton: true,
     breaks: true,
+    allowHtmlTags: false,
 };
 /** 缓存 Marked 实例，避免重复创建 */
 let cachedInstance = null;
@@ -144,7 +141,7 @@ let cachedOptionsKey = '';
  * 获取配置签名，用于实例缓存比较
  */
 function getOptionsKey(options) {
-    return `${options.enableHighlight}-${options.showCopyButton}-${options.breaks}`;
+    return `${options.enableHighlight}-${options.showCopyButton}-${options.breaks}-${options.allowHtmlTags}`;
 }
 /**
  * 将 Markdown 文本解析为 HTML

package/dist/components/scenes/ai/safe-html.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @h-ai/ui — Safe HTML helpers for Markdown rendering.
+ *
+ * The Markdown pipeline keeps raw HTML escaped by default.
+ * When callers opt in, only a controlled allowlist of safe tags and
+ * attributes is reconstructed; unsupported or dangerous markup remains escaped.
+ */
+export declare function escapeHtml(text: string): string;
+export declare function sanitizeLinkHref(href: string | null | undefined): string;
+export declare function isExternalLinkHref(href: string): boolean;
+export declare function sanitizeImageSrc(src: string | null | undefined): string;
+/**
+ * Sanitize raw HTML fragments embedded inside Markdown.
+ * Safe allowlisted tags are reconstructed, everything else remains escaped.
+ */
+export declare function sanitizeMarkdownHtml(fragment: string): string;

package/dist/components/scenes/ai/safe-html.js

@@ -0,0 +1,284 @@
+/**
+ * @h-ai/ui — Safe HTML helpers for Markdown rendering.
+ *
+ * The Markdown pipeline keeps raw HTML escaped by default.
+ * When callers opt in, only a controlled allowlist of safe tags and
+ * attributes is reconstructed; unsupported or dangerous markup remains escaped.
+ */
+const SAFE_LINK_HREF_REGEX = /^(?:https?:\/\/|\/|#|mailto:)/i;
+const SAFE_IMAGE_SRC_REGEX = /^(?:https?:\/\/|\/|data:image\/)/i;
+const SAFE_ALIGN_VALUE_REGEX = /^(?:left|center|right|justify)$/i;
+const SAFE_TABLE_SPAN_REGEX = /^[1-9]\d{0,2}$/;
+const HTML_ATTR_REGEX = /([^\s"'=<>`/]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+const ALLOWED_HTML_TAGS = new Set([
+    'a',
+    'b',
+    'blockquote',
+    'br',
+    'code',
+    'del',
+    'div',
+    'em',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'hr',
+    'i',
+    'img',
+    'kbd',
+    'li',
+    'mark',
+    'ol',
+    'p',
+    'pre',
+    's',
+    'span',
+    'strong',
+    'sub',
+    'sup',
+    'table',
+    'tbody',
+    'td',
+    'th',
+    'thead',
+    'tr',
+    'u',
+    'ul',
+]);
+const VOID_HTML_TAGS = new Set(['br', 'hr', 'img']);
+const ALIGNABLE_HTML_TAGS = new Set([
+    'blockquote',
+    'div',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'li',
+    'p',
+    'td',
+    'th',
+]);
+export function escapeHtml(text) {
+    return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+export function sanitizeLinkHref(href) {
+    const normalized = href?.trim() ?? '';
+    return SAFE_LINK_HREF_REGEX.test(normalized) ? normalized : '';
+}
+export function isExternalLinkHref(href) {
+    return /^https?:\/\//i.test(href);
+}
+export function sanitizeImageSrc(src) {
+    const normalized = src?.trim() ?? '';
+    return SAFE_IMAGE_SRC_REGEX.test(normalized) ? normalized : '';
+}
+function sanitizeAlignValue(value) {
+    const normalized = value?.trim().toLowerCase();
+    return normalized && SAFE_ALIGN_VALUE_REGEX.test(normalized)
+        ? normalized
+        : undefined;
+}
+function parseHtmlAttributes(rawAttributes) {
+    const attributes = [];
+    for (const match of rawAttributes.matchAll(HTML_ATTR_REGEX)) {
+        const [, rawName, quotedDouble, quotedSingle, unquoted] = match;
+        const attrName = rawName?.trim().toLowerCase();
+        if (!attrName) {
+            continue;
+        }
+        const attrValue = quotedDouble ?? quotedSingle ?? unquoted ?? '';
+        attributes.push([attrName, attrValue]);
+    }
+    return attributes;
+}
+function isHtmlTagNameChar(char) {
+    return typeof char === 'string' && /^[\w:-]$/.test(char);
+}
+function skipWhitespace(source, startIndex) {
+    let cursor = startIndex;
+    while (cursor < source.length && /\s/.test(source[cursor] ?? '')) {
+        cursor += 1;
+    }
+    return cursor;
+}
+function findHtmlTagEnd(source, startIndex) {
+    let quote = null;
+    for (let cursor = startIndex; cursor < source.length; cursor += 1) {
+        const char = source[cursor];
+        if (quote) {
+            if (char === quote) {
+                quote = null;
+            }
+            continue;
+        }
+        if (char === '"' || char === '\'') {
+            quote = char;
+            continue;
+        }
+        if (char === '>') {
+            return cursor;
+        }
+    }
+    return -1;
+}
+function readNextHtmlTag(source, startIndex) {
+    let cursor = source.indexOf('<', startIndex);
+    while (cursor >= 0) {
+        const nextChar = source[cursor + 1];
+        if (!nextChar || (nextChar !== '/' && !/[a-z]/i.test(nextChar))) {
+            cursor = source.indexOf('<', cursor + 1);
+            continue;
+        }
+        const tagEnd = findHtmlTagEnd(source, cursor + 1);
+        if (tagEnd < 0) {
+            return null;
+        }
+        return {
+            rawTag: source.slice(cursor, tagEnd + 1),
+            start: cursor,
+            end: tagEnd + 1,
+        };
+    }
+    return null;
+}
+function readSanitizedAttributes(tagName, rawAttributes) {
+    const sanitized = {};
+    for (const [attrName, attrValue] of parseHtmlAttributes(rawAttributes)) {
+        if (tagName === 'a') {
+            if (attrName === 'href') {
+                sanitized.href = sanitizeLinkHref(attrValue);
+            }
+            if (attrName === 'title' && attrValue.trim()) {
+                sanitized.title = attrValue.trim();
+            }
+            continue;
+        }
+        if (tagName === 'img') {
+            if (attrName === 'src') {
+                sanitized.src = sanitizeImageSrc(attrValue);
+            }
+            if (attrName === 'alt') {
+                sanitized.alt = attrValue;
+            }
+            if (attrName === 'title' && attrValue.trim()) {
+                sanitized.title = attrValue.trim();
+            }
+            continue;
+        }
+        if (ALIGNABLE_HTML_TAGS.has(tagName) && attrName === 'align') {
+            sanitized.align = sanitizeAlignValue(attrValue);
+            continue;
+        }
+        if ((tagName === 'td' || tagName === 'th') && attrName === 'colspan') {
+            const normalized = attrValue.trim();
+            if (SAFE_TABLE_SPAN_REGEX.test(normalized)) {
+                sanitized.colspan = normalized;
+            }
+            continue;
+        }
+        if ((tagName === 'td' || tagName === 'th') && attrName === 'rowspan') {
+            const normalized = attrValue.trim();
+            if (SAFE_TABLE_SPAN_REGEX.test(normalized)) {
+                sanitized.rowspan = normalized;
+            }
+        }
+    }
+    return sanitized;
+}
+function sanitizeHtmlTag(rawTag) {
+    if (!rawTag.startsWith('<') || !rawTag.endsWith('>')) {
+        return escapeHtml(rawTag);
+    }
+    let cursor = 1;
+    cursor = skipWhitespace(rawTag, cursor);
+    let isClosingTag = false;
+    if (rawTag[cursor] === '/') {
+        isClosingTag = true;
+        cursor += 1;
+        cursor = skipWhitespace(rawTag, cursor);
+    }
+    const tagNameStart = cursor;
+    while (isHtmlTagNameChar(rawTag[cursor])) {
+        cursor += 1;
+    }
+    const tagName = rawTag.slice(tagNameStart, cursor).toLowerCase();
+    if (!tagName) {
+        return escapeHtml(rawTag);
+    }
+    let rawAttributes = rawTag.slice(cursor, -1);
+    let selfClosing = false;
+    const trimmedAttributes = rawAttributes.trimEnd();
+    if (trimmedAttributes.endsWith('/')) {
+        selfClosing = true;
+        rawAttributes = trimmedAttributes.slice(0, -1);
+    }
+    if (!ALLOWED_HTML_TAGS.has(tagName)) {
+        return escapeHtml(rawTag);
+    }
+    if (isClosingTag) {
+        return VOID_HTML_TAGS.has(tagName) ? '' : `</${tagName}>`;
+    }
+    const attributes = readSanitizedAttributes(tagName, rawAttributes);
+    const renderedAttributes = [];
+    if (attributes.href !== undefined) {
+        renderedAttributes.push(`href="${escapeHtml(attributes.href)}"`);
+        if (attributes.href && isExternalLinkHref(attributes.href)) {
+            renderedAttributes.push('target="_blank"');
+            renderedAttributes.push('rel="noopener noreferrer"');
+        }
+    }
+    if (attributes.title) {
+        renderedAttributes.push(`title="${escapeHtml(attributes.title)}"`);
+    }
+    if (attributes.src !== undefined) {
+        renderedAttributes.push(`src="${escapeHtml(attributes.src)}"`);
+        renderedAttributes.push('loading="lazy"');
+        renderedAttributes.push('class="hai-md-img"');
+    }
+    if (attributes.alt !== undefined) {
+        renderedAttributes.push(`alt="${escapeHtml(attributes.alt)}"`);
+    }
+    if (attributes.align) {
+        renderedAttributes.push(`style="text-align:${escapeHtml(attributes.align)}"`);
+    }
+    if (attributes.colspan) {
+        renderedAttributes.push(`colspan="${escapeHtml(attributes.colspan)}"`);
+    }
+    if (attributes.rowspan) {
+        renderedAttributes.push(`rowspan="${escapeHtml(attributes.rowspan)}"`);
+    }
+    const attributeText = renderedAttributes.length > 0
+        ? ` ${renderedAttributes.join(' ')}`
+        : '';
+    return VOID_HTML_TAGS.has(tagName) || selfClosing
+        ? `<${tagName}${attributeText} />`
+        : `<${tagName}${attributeText}>`;
+}
+/**
+ * Sanitize raw HTML fragments embedded inside Markdown.
+ * Safe allowlisted tags are reconstructed, everything else remains escaped.
+ */
+export function sanitizeMarkdownHtml(fragment) {
+    if (!fragment) {
+        return '';
+    }
+    let sanitized = '';
+    let lastIndex = 0;
+    for (let match = readNextHtmlTag(fragment, lastIndex); match; match = readNextHtmlTag(fragment, lastIndex)) {
+        sanitized += escapeHtml(fragment.slice(lastIndex, match.start));
+        sanitized += sanitizeHtmlTag(match.rawTag);
+        lastIndex = match.end;
+    }
+    sanitized += escapeHtml(fragment.slice(lastIndex));
+    return sanitized;
+}

package/dist/components/scenes/ai/table/AiTableEditor.svelte

@@ -12,6 +12,7 @@
   =============================================================================
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../../types.js'
   import type { MarkdownToolbarDownloadAction } from '../document-types.js'
   import type {
     AiTableColumn,
@@ -23,7 +24,7 @@
   } from './table-types.js'
   import { SvelteSet } from 'svelte/reactivity'
   import { uiM } from '../../../../messages.js'
-  import { cn } from '../../../../utils.js'
+  import { cn, getDataAttributes } from '../../../../utils.js'
   import AiDocumentDownloadMenu from '../AiDocumentDownloadMenu.svelte'
 
   interface ExtractedArrayChunk {
@@ -92,8 +93,10 @@
     oncopytable,
     // 表格下载回调。
     ondownloadtable,
-  }: AiTableEditorProps = $props()
+    ...restProps
+  }: AiTableEditorProps & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // 复制反馈只影响右上角复制按钮，不和业务数据混用。
   let copied = $state(false)
   // 连续复制时按最后一次点击重新计时。
@@ -1029,7 +1032,7 @@
   }
 </script>
 
-<section class={tablePaneClass}>
+<section {...dataAttributes} class={tablePaneClass}>
   <header class='hai-ai-table-header'>
     <div class='hai-ai-table-heading'>
       <div class='hai-ai-table-eyebrow'>

package/dist/components/scenes/ai/table/AiTableEditor.svelte.d.ts

@@ -1,5 +1,7 @@
+import type { DataAttributes } from '../../../../types.js';
 import type { AiTableEditorProps } from './table-types.js';
-declare const AiTableEditor: import("svelte").Component<AiTableEditorProps, {
+type $$ComponentProps = AiTableEditorProps & DataAttributes;
+declare const AiTableEditor: import("svelte").Component<$$ComponentProps, {
     flushPendingTableChange: () => void;
 }, "editorScrollHost">;
 type AiTableEditor = ReturnType<typeof AiTableEditor>;

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../../types.js';
 /**
  * 表格列支持的数据类型。
  * - `text`: 普通文本输入
@@ -67,7 +68,7 @@ export interface AiTableDownloadPayload {
     /** 推荐文件名（已带 `.csv` 后缀）。 */
     filename: string;
 }
-export interface AiTableEditorProps {
+export interface AiTableEditorProps extends DataAttributes {
     /** 原始表格内容字符串，通常是 JSON 文本，支持流式残缺片段。 */
     content?: string;
     /** 结构化表格数据；有值时优先于 `content`。 */

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

@@ -47,7 +47,9 @@
     }
   }
 
+  import type { DataAttributes } from '../../../types.js'
   import { uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
 
   interface Props {
     open?: boolean
@@ -55,8 +57,9 @@
     onsubmit?: (data: FeedbackData) => Promise<void>
   }
 
-  let { open = $bindable(false), labels = {}, onsubmit }: Props = $props()
+  let { open = $bindable(false), labels = {}, onsubmit, ...restProps }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   // 文案优先使用传入的 labels，缺省回退到内置消息 uiM(...)
 
   let feedbackType = $state<FeedbackType>('bug')
@@ -106,7 +109,7 @@
   }
 </script>
 
-<Modal bind:open title={labels.title ?? uiM('feedback_title')}>
+<Modal {...dataAttributes} bind:open title={labels.title ?? uiM('feedback_title')}>
   <p class='text-base-content/70 mb-4'>{labels.description ?? uiM('feedback_description')}</p>
 
   {#if error}

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 type FeedbackType = 'bug' | 'feature' | 'question' | 'other';
 interface FeedbackData {
     type: FeedbackType;
@@ -29,6 +30,7 @@ interface Props {
     labels?: FeedbackLabels;
     onsubmit?: (data: FeedbackData) => Promise<void>;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * FeedbackModal
  * 用户反馈模态框，支持 Bug 报告、功能建议等多种反馈类型。
@@ -42,6 +44,6 @@ interface Props {
  *   onsubmit={async (data) => { await submitFeedback(data) }}
  * />
  */
-declare const FeedbackModal: import("svelte").Component<Props, {}, "open">;
+declare const FeedbackModal: import("svelte").Component<$$ComponentProps, {}, "open">;
 type FeedbackModal = ReturnType<typeof FeedbackModal>;
 export default FeedbackModal;

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

@@ -29,7 +29,9 @@
   ```
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import { uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
   import BareButton from '../../primitives/BareButton.svelte'
 
   interface Language {
@@ -63,8 +65,10 @@
     align = 'end',
     compact = false,
     class: className = '',
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   let open = $state(false)
   let containerRef = $state<HTMLDivElement | null>(null)
 
@@ -94,7 +98,7 @@
   })
 </script>
 
-<div bind:this={containerRef} class='dropdown {align === 'end' ? 'dropdown-end' : ''} {open ? 'dropdown-open' : ''} {className}'>
+<div {...dataAttributes} bind:this={containerRef} class='dropdown {align === 'end' ? 'dropdown-end' : ''} {open ? 'dropdown-open' : ''} {className}'>
   <BareButton
     type='button'
     class='btn btn-ghost {compact ? 'btn-sm btn-square' : 'btn-sm gap-2 min-w-fit'}'

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 interface Language {
     value: string;
     label: string;
@@ -17,6 +18,7 @@ interface Props {
     /** 自定义类名 */
     class?: string;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * LanguageSwitch
  * 语言切换下拉组件，支持多语言切换。
@@ -47,6 +49,6 @@ interface Props {
  * />
  * ```
  */
-declare const LanguageSwitch: import("svelte").Component<Props, {}, "">;
+declare const LanguageSwitch: import("svelte").Component<$$ComponentProps, {}, "">;
 type LanguageSwitch = ReturnType<typeof LanguageSwitch>;
 export default LanguageSwitch;

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

@@ -20,7 +20,8 @@
 -->
 <script lang='ts'>
   import type { Snippet } from 'svelte'
-  import { cn } from '../../../utils.js'
+  import type { DataAttributes } from '../../../types.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import BareButton from '../../primitives/BareButton.svelte'
 
   type SettingsSection = {
@@ -40,6 +41,7 @@
     children,
     headerActions,
     class: className = '',
+    ...restProps
   }: {
     title?: string
     description?: string
@@ -49,8 +51,9 @@
     children?: Snippet
     headerActions?: Snippet
     class?: string
-  } = $props()
+  } & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function navItemClass(id: string): string {
     return cn(
       'flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
@@ -61,7 +64,7 @@
   }
 </script>
 
-<div class={cn('space-y-5', className)}>
+<div {...dataAttributes} class={cn('space-y-5', className)}>
   <!-- 标题区 -->
   {#if title || description || headerActions}
     <div class='flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>

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

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { DataAttributes } from '../../../types.js';
 type SettingsSection = {
     id: string;
     label: string;
@@ -15,7 +16,7 @@ type $$ComponentProps = {
     children?: Snippet;
     headerActions?: Snippet;
     class?: string;
-};
+} & DataAttributes;
 /**
  * SettingsLayout
  * 设置页布局场景组件

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

@@ -10,7 +10,9 @@
   @prop {function} onthemechange - 主题变更回调
 -->
 <script lang='ts'>
+  import type { DataAttributes } from '../../../types.js'
   import { uiM } from '../../../messages.js'
+  import { getDataAttributes } from '../../../utils.js'
   import BareButton from '../../primitives/BareButton.svelte'
   import IconButton from '../../primitives/IconButton.svelte'
 
@@ -43,8 +45,10 @@
     onlanguagechange,
     onthemechange,
     onclose,
-  }: Props = $props()
+    ...restProps
+  }: Props & DataAttributes = $props()
 
+  const dataAttributes = $derived(getDataAttributes(restProps))
   function handleClose() {
     open = false
     onclose?.()
@@ -66,9 +70,8 @@
 <svelte:window onkeydown={handleKeydown} />
 
 {#if open}
-  <!-- svelte-ignore a11y_click_events_have_key_events -->
-  <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
+    {...dataAttributes}
     class='fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm transition-opacity'
     onclick={handleBackdropClick}
   >

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

@@ -1,3 +1,4 @@
+import type { DataAttributes } from '../../../types.js';
 interface Props {
     open?: boolean;
     currentLanguage?: string;
@@ -15,6 +16,7 @@ interface Props {
     onthemechange?: (theme: string) => void;
     onclose?: () => void;
 }
+type $$ComponentProps = Props & DataAttributes;
 /**
  * SettingsModal
  * 应用设置模态框，包含语言和主题切换功能。
@@ -26,6 +28,6 @@ interface Props {
  * @prop {function} onlanguagechange - 语言变更回调
  * @prop {function} onthemechange - 主题变更回调
  */
-declare const SettingsModal: import("svelte").Component<Props, {}, "open">;
+declare const SettingsModal: import("svelte").Component<$$ComponentProps, {}, "open">;
 type SettingsModal = ReturnType<typeof SettingsModal>;
 export default SettingsModal;