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

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/types.d.ts

@@ -544,6 +544,8 @@ export interface HashDisplayProps extends DataAttributes {
 export interface MarkdownRendererProps extends DataAttributes {
     /** Markdown 源文本 */
     content?: string;
+    /** 文本字号，支持 number（按 px）或任意 CSS 长度字符串 */
+    fontSize?: string | number;
     /** 自定义类名 */
     class?: string;
     /** 是否显示代码块复制按钮（默认 true） */
@@ -552,6 +554,8 @@ export interface MarkdownRendererProps extends DataAttributes {
     enableHighlight?: boolean;
     /** 是否将换行符转换为 <br>（默认 true，适合 AI 输出） */
     breaks?: boolean;
+    /** 是否按安全白名单解析原始 HTML 标签（默认 false） */
+    allowHtmlTags?: boolean;
 }
 /**
  * 签名展示属性

package/dist/styles/global.css

@@ -89,6 +89,11 @@ input::-webkit-credentials-auto-fill-button {
   color: oklch(0.55 0 0);
 }
 
+/* ─── DaisyUI 组件微调：fieldset-legend 间距修正 ─── */
+.fieldset-legend {
+  justify-content: flex-start !important;
+}
+
 .modal-box {
   border-radius: 0.75rem;
 }

package/dist/types.d.ts

@@ -286,7 +286,7 @@ export interface SelectOption<T = string> {
 export interface SelectProps<T = string> extends DataAttributes {
     /** 值 */
     value?: T;
-    /** 选项（使用 options 或 children 二选一） */
+    /** 选项 */
     options?: SelectOption<T>[];
     /** 占位符 */
     placeholder?: string;
@@ -296,18 +296,18 @@ export interface SelectProps<T = string> extends DataAttributes {
     disabled?: boolean;
     /** 是否必填 */
     required?: boolean;
+    /** 是否可清空 */
+    clearable?: boolean;
+    /** 是否可筛选（启用后可在输入框内输入过滤选项） */
+    filterable?: boolean;
     /** 错误消息 */
     error?: string;
-    /** 自定义验证消息（用于覆盖浏览器原生验证提示） */
-    validationMessage?: string;
     /** 自定义类名 */
     class?: string;
     /** 元素 ID */
     id?: string;
     /** 变化事件 */
     onchange?: (value: T) => void;
-    /** 子元素（原生 option 元素） */
-    children?: Snippet;
 }
 /**
  * 复选框属性

package/dist/utils.js

@@ -36,7 +36,7 @@ export function getDataAttributes(props) {
  */
 const VARIANT_MAPS = {
     btn: {
-        default: 'btn-neutral',
+        default: '',
         primary: 'btn-primary',
         secondary: 'btn-secondary',
         success: 'btn-success',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@h-ai/ui",
   "type": "module",
-  "version": "0.1.0-alpha.30",
+  "version": "0.1.0-alpha.31",
   "description": "Hai Framework UI component library for Svelte 5 Runes.",
   "license": "Apache-2.0",
   "svelte": "./dist/index.js",
@@ -51,7 +51,7 @@
     "mermaid": "^11.12.0",
     "shiki": "^4.0.2",
     "tailwind-merge": "^3.5.0",
-    "@h-ai/core": "0.1.0-alpha.30"
+    "@h-ai/core": "0.1.0-alpha.31"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.7",