@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/styles/theme/tianyi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tianyi.d.ts","sourceRoot":"","sources":["../../../src/styles/theme/tianyi.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,iyFAqF7B,CAAC"}
+{"version":3,"file":"tianyi.d.ts","sourceRoot":"","sources":["../../../src/styles/theme/tianyi.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,6mGA6F7B,CAAC"}

package/dist/styles/theme/tianyi.js

@@ -0,0 +1,102 @@
+/**
+ * Tianyi Cloud (China Telecom) theme tokens.
+ * 天翼云风格主题令牌。
+ *
+ * Inspired by Tianyi Cloud's brand identity: blue primary (#0052CC) with
+ * trustworthy, state-owned enterprise style.
+ * 灵感来自天翼云品牌色：蓝色 primary (#0052CC)，配央企可信赖风格。
+ */
+export const tianyiThemeTokens = `
+.aithe-theme-tianyi,
+[data-aithe-theme='tianyi'] {
+  color-scheme: light;
+  --aithe-primary-1: #edf5ff;
+  --aithe-primary-2: #d4e8ff;
+  --aithe-primary-3: #a8d0ff;
+  --aithe-primary-4: #75b2ff;
+  --aithe-primary-5: #4d97ff;
+  --aithe-primary-6: #2679f0;
+  --aithe-primary-7: #0052cc;
+  --aithe-primary-8: #0042a8;
+  --aithe-primary-9: #003688;
+  --aithe-primary-10: #002b6b;
+  --aithe-success-1: #edfcf6;
+  --aithe-success-2: #c9f5e0;
+  --aithe-success-3: #9cecc4;
+  --aithe-success-4: #6cd8a2;
+  --aithe-success-5: #44c084;
+  --aithe-success-6: #2ea86c;
+  --aithe-success-7: #228c58;
+  --aithe-success-8: #1a7046;
+  --aithe-success-9: #145a38;
+  --aithe-success-10: #10482e;
+  --aithe-warning-1: #fff9eb;
+  --aithe-warning-2: #ffefc4;
+  --aithe-warning-3: #ffde8e;
+  --aithe-warning-4: #ffc95a;
+  --aithe-warning-5: #f0b03e;
+  --aithe-warning-6: #d08e26;
+  --aithe-warning-7: #ac701a;
+  --aithe-warning-8: #8a5816;
+  --aithe-warning-9: #6e4614;
+  --aithe-warning-10: #583610;
+  --aithe-danger-1: #fff1f4;
+  --aithe-danger-2: #ffdce2;
+  --aithe-danger-3: #ffbcc8;
+  --aithe-danger-4: #ff92a4;
+  --aithe-danger-5: #f86c83;
+  --aithe-danger-6: #df526b;
+  --aithe-danger-7: #be4159;
+  --aithe-danger-8: #99354a;
+  --aithe-danger-9: #7a2d3d;
+  --aithe-danger-10: #612634;
+  --aithe-neutral-1: #f4f6fa;
+  --aithe-neutral-2: #e6eaf3;
+  --aithe-neutral-3: #d0d7e6;
+  --aithe-neutral-4: #b1bbd0;
+  --aithe-neutral-5: #8f9bb5;
+  --aithe-neutral-6: #6f7c9a;
+  --aithe-neutral-7: #515f7e;
+  --aithe-neutral-8: #384662;
+  --aithe-neutral-9: #222e47;
+  --aithe-neutral-10: #111a2d;
+  --aithe-fill-1: #f7f8fa;
+  --aithe-fill-2: #f0f1f3;
+  --aithe-color-bg: #f2f6fc;
+  --aithe-color-bg-subtle: linear-gradient(180deg, #f8fbff 0%, #ecf2fa 100%);
+  --aithe-color-surface: rgba(255, 255, 255, 0.88);
+  --aithe-color-surface-elevated: rgba(255, 255, 255, 0.98);
+  --aithe-color-surface-muted: #e4ebf6;
+  --aithe-color-surface-hover: rgba(0, 0, 0, 0.04);
+  --aithe-color-border: rgba(0, 82, 204, 0.16);
+  --aithe-color-border-strong: rgba(0, 82, 204, 0.28);
+  --aithe-color-text: #0c1324;
+  --aithe-color-text-muted: #384b6a;
+  --aithe-color-text-subtle: #687b9a;
+  --aithe-color-overlay: rgba(6, 14, 28, 0.50);
+  --aithe-color-selection: rgba(0, 82, 204, 0.16);
+  --aithe-color-focus-ring: rgba(0, 82, 204, 0.36);
+  --aithe-color-text-secondary: #3d4a66;
+  --aithe-color-bg-muted: #e8ecf4;
+  --aithe-color-bg-hover: rgba(0, 0, 0, 0.04);
+  --aithe-color-border-subtle: rgba(76, 94, 132, 0.10);
+  --aithe-primary-6-rgb: 77, 141, 255;
+  --aithe-color-text-on-primary: #ffffff;
+  --aithe-code-keyword: #7c3aed;
+  --aithe-code-boolean: #b45309;
+  --aithe-code-builtin: #2563eb;
+  --aithe-code-number: #b45309;
+  --aithe-code-string: #15803d;
+  --aithe-code-function: #2563eb;
+  --aithe-code-type: #a16207;
+  --aithe-code-preprocessor: #7c3aed;
+  --aithe-code-tag: #dc2626;
+  --aithe-code-attr: #b45309;
+  --aithe-code-key: #dc2626;
+  --aithe-code-punctuation: #5c6bc0;
+  --aithe-code-entity: #b45309;
+  --aithe-code-comment: #94a3b8;
+  --aithe-code-doctype: #94a3b8;
+  --aithe-code-placeholder: #94a3b8;
+}
+`;

package/dist/styles/types.js

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

package/dist/styles/typo/business.js

@@ -0,0 +1,34 @@
+export const businessTypoTokens = {
+    '--aithe-font-size-xs': '12px',
+    '--aithe-font-size-sm': '13px',
+    '--aithe-font-size-md': '14px',
+    '--aithe-font-size-lg': '16px',
+    '--aithe-font-size-xl': '20px',
+    '--aithe-font-size-2xl': '28px',
+    '--aithe-font-weight-regular': '400',
+    '--aithe-font-weight-medium': '500',
+    '--aithe-font-weight-semibold': '600',
+    '--aithe-font-weight-bold': '700',
+    '--aithe-line-height-tight': '1.25',
+    '--aithe-line-height-base': '1.5',
+    '--aithe-line-height-loose': '1.7',
+    '--aithe-space-0': '0',
+    '--aithe-space-1': '4px',
+    '--aithe-space-2': '8px',
+    '--aithe-space-3': '12px',
+    '--aithe-space-4': '16px',
+    '--aithe-space-5': '20px',
+    '--aithe-space-6': '24px',
+    '--aithe-space-7': '32px',
+    '--aithe-space-8': '40px',
+    '--aithe-space-9': '48px',
+    '--aithe-space-10': '64px',
+    '--aithe-space-xs': 'var(--aithe-space-2)',
+    '--aithe-space-sm': 'var(--aithe-space-3)',
+    '--aithe-space-md': 'var(--aithe-space-4)',
+    '--aithe-space-lg': 'var(--aithe-space-6)',
+    '--aithe-space-xl': 'var(--aithe-space-8)',
+    '--aithe-control-height-sm': '32px',
+    '--aithe-control-height-md': '40px',
+    '--aithe-control-height-lg': '48px',
+};

package/dist/styles/typo/compact.js

@@ -0,0 +1,34 @@
+export const compactTypoTokens = {
+    '--aithe-font-size-xs': '11px',
+    '--aithe-font-size-sm': '12px',
+    '--aithe-font-size-md': '13px',
+    '--aithe-font-size-lg': '14px',
+    '--aithe-font-size-xl': '16px',
+    '--aithe-font-size-2xl': '20px',
+    '--aithe-font-weight-regular': '400',
+    '--aithe-font-weight-medium': '500',
+    '--aithe-font-weight-semibold': '600',
+    '--aithe-font-weight-bold': '700',
+    '--aithe-line-height-tight': '1.15',
+    '--aithe-line-height-base': '1.35',
+    '--aithe-line-height-loose': '1.5',
+    '--aithe-space-0': '0',
+    '--aithe-space-1': '2px',
+    '--aithe-space-2': '4px',
+    '--aithe-space-3': '8px',
+    '--aithe-space-4': '12px',
+    '--aithe-space-5': '16px',
+    '--aithe-space-6': '20px',
+    '--aithe-space-7': '24px',
+    '--aithe-space-8': '32px',
+    '--aithe-space-9': '40px',
+    '--aithe-space-10': '48px',
+    '--aithe-space-xs': 'var(--aithe-space-1)',
+    '--aithe-space-sm': 'var(--aithe-space-2)',
+    '--aithe-space-md': 'var(--aithe-space-3)',
+    '--aithe-space-lg': 'var(--aithe-space-5)',
+    '--aithe-space-xl': 'var(--aithe-space-7)',
+    '--aithe-control-height-sm': '28px',
+    '--aithe-control-height-md': '36px',
+    '--aithe-control-height-lg': '44px',
+};

package/dist/styles/typo/index.js

@@ -0,0 +1,99 @@
+export { minimalTypoTokens } from './minimal';
+export { businessTypoTokens } from './business';
+export { luxuryTypoTokens } from './luxury';
+export { compactTypoTokens } from './compact';
+import { minimalTypoTokens } from './minimal';
+import { businessTypoTokens } from './business';
+import { luxuryTypoTokens } from './luxury';
+import { compactTypoTokens } from './compact';
+const TYPO_TOKENS = {
+    minimal: minimalTypoTokens,
+    business: businessTypoTokens,
+    luxury: luxuryTypoTokens,
+    compact: compactTypoTokens,
+};
+/** Preview icon characters for each built-in typo style. 每个内置排版风格的预览图标字符。 */
+const TYPO_ICONS = {
+    minimal: '░',
+    business: '≡',
+    luxury: '✦',
+    compact: '⊞',
+};
+/**
+ * Static tree menu data for typo selection, compatible with `<aithe-tree-menu>`.
+ * 用于排版选择的静态树形菜单数据，兼容 `<aithe-tree-menu>`。
+ * Each item carries an `icon` extension field with the preview character.
+ * 每个项携带 `icon` 扩展字段，包含预览字符。
+ */
+export const typoMenu = Object.keys(TYPO_TOKENS).map((typo) => ({
+    id: typo,
+    label: typo.charAt(0).toUpperCase() + typo.slice(1),
+    icon: TYPO_ICONS[typo],
+    i18n: `typoPicker.${typo}`,
+}));
+const STORAGE_KEY = 'aithe-typo';
+export const AITHE_DEFAULT_TYPO = 'business';
+let currentTypo = AITHE_DEFAULT_TYPO;
+const listeners = new Set();
+export function getTypoTokens(typo) {
+    return TYPO_TOKENS[typo];
+}
+export function getAitheTypos() {
+    return Object.keys(TYPO_TOKENS);
+}
+function loadStoredTypo() {
+    try {
+        const raw = localStorage.getItem(STORAGE_KEY);
+        if (!raw)
+            return undefined;
+        return raw;
+    }
+    catch {
+        return undefined;
+    }
+}
+function storeTypo(typo) {
+    try {
+        localStorage.setItem(STORAGE_KEY, typo);
+    }
+    catch {
+        // ignore
+    }
+}
+function applyTypoTokens(typo) {
+    const tokens = TYPO_TOKENS[typo];
+    if (!tokens)
+        return;
+    const html = document.documentElement;
+    const body = document.body;
+    for (const [key, value] of Object.entries(tokens)) {
+        html.style.setProperty(key, value);
+        body.style.setProperty(key, value);
+    }
+    html.dataset.aitheTypo = typo;
+}
+export function setAitheTypo(typo, persist = true) {
+    if (typo === currentTypo)
+        return;
+    currentTypo = typo;
+    if (persist)
+        storeTypo(typo);
+    document.documentElement.dataset.aitheTypo = typo;
+    applyTypoTokens(typo);
+    for (const fn of listeners) {
+        fn();
+    }
+}
+export function getAitheTypo() {
+    return currentTypo;
+}
+export function initAitheTypo(defaultTypo = AITHE_DEFAULT_TYPO) {
+    const stored = loadStoredTypo();
+    currentTypo = stored || defaultTypo;
+    document.documentElement.dataset.aitheTypo = currentTypo;
+    applyTypoTokens(currentTypo);
+}
+export function onAitheTypoChange(fn) {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+}

package/dist/styles/typo/luxury.js

@@ -0,0 +1,34 @@
+export const luxuryTypoTokens = {
+    '--aithe-font-size-xs': '11px',
+    '--aithe-font-size-sm': '13px',
+    '--aithe-font-size-md': '15px',
+    '--aithe-font-size-lg': '18px',
+    '--aithe-font-size-xl': '24px',
+    '--aithe-font-size-2xl': '36px',
+    '--aithe-font-weight-regular': '400',
+    '--aithe-font-weight-medium': '500',
+    '--aithe-font-weight-semibold': '500',
+    '--aithe-font-weight-bold': '600',
+    '--aithe-line-height-tight': '1.3',
+    '--aithe-line-height-base': '1.7',
+    '--aithe-line-height-loose': '1.9',
+    '--aithe-space-0': '0',
+    '--aithe-space-1': '4px',
+    '--aithe-space-2': '8px',
+    '--aithe-space-3': '14px',
+    '--aithe-space-4': '20px',
+    '--aithe-space-5': '24px',
+    '--aithe-space-6': '30px',
+    '--aithe-space-7': '38px',
+    '--aithe-space-8': '48px',
+    '--aithe-space-9': '56px',
+    '--aithe-space-10': '72px',
+    '--aithe-space-xs': 'var(--aithe-space-2)',
+    '--aithe-space-sm': 'var(--aithe-space-3)',
+    '--aithe-space-md': 'var(--aithe-space-4)',
+    '--aithe-space-lg': 'var(--aithe-space-6)',
+    '--aithe-space-xl': 'var(--aithe-space-8)',
+    '--aithe-control-height-sm': '34px',
+    '--aithe-control-height-md': '42px',
+    '--aithe-control-height-lg': '50px',
+};

package/dist/styles/typo/minimal.js

@@ -0,0 +1,34 @@
+export const minimalTypoTokens = {
+    '--aithe-font-size-xs': '12px',
+    '--aithe-font-size-sm': '14px',
+    '--aithe-font-size-md': '15px',
+    '--aithe-font-size-lg': '18px',
+    '--aithe-font-size-xl': '22px',
+    '--aithe-font-size-2xl': '32px',
+    '--aithe-font-weight-regular': '400',
+    '--aithe-font-weight-medium': '500',
+    '--aithe-font-weight-semibold': '600',
+    '--aithe-font-weight-bold': '700',
+    '--aithe-line-height-tight': '1.25',
+    '--aithe-line-height-base': '1.7',
+    '--aithe-line-height-loose': '1.9',
+    '--aithe-space-0': '0',
+    '--aithe-space-1': '4px',
+    '--aithe-space-2': '8px',
+    '--aithe-space-3': '14px',
+    '--aithe-space-4': '18px',
+    '--aithe-space-5': '22px',
+    '--aithe-space-6': '28px',
+    '--aithe-space-7': '36px',
+    '--aithe-space-8': '44px',
+    '--aithe-space-9': '52px',
+    '--aithe-space-10': '68px',
+    '--aithe-space-xs': 'var(--aithe-space-2)',
+    '--aithe-space-sm': 'var(--aithe-space-3)',
+    '--aithe-space-md': 'var(--aithe-space-4)',
+    '--aithe-space-lg': 'var(--aithe-space-6)',
+    '--aithe-space-xl': 'var(--aithe-space-8)',
+    '--aithe-control-height-sm': '32px',
+    '--aithe-control-height-md': '40px',
+    '--aithe-control-height-lg': '48px',
+};

package/dist/types/index.js

@@ -0,0 +1,2 @@
+export * from '../styles/types';
+export * from '../core/types';

package/dist/utils/dom.js

@@ -0,0 +1,51 @@
+/**
+ * Walk up the DOM tree to find the closest element that carries a theme
+ * (via `data-aithe-theme` attribute or `aithe-theme-*` class).
+ * 向上遍历 DOM 树，查找携带主题的最近元素（通过 `data-aithe-theme` 属性或 `aithe-theme-*` 类）。
+ *
+ * @param element - Starting element. 起始元素。
+ * @returns The themed ancestor, or `null` if none found. 携带主题的祖先元素，或 `null`。
+ */
+export function findClosestThemeElement(element) {
+    let current = element?.parentElement ?? null;
+    while (current) {
+        if (Object.hasOwn(current.dataset, 'aitheTheme')) {
+            return current;
+        }
+        const className = Array.from(current.classList).find((token) => token.startsWith('aithe-theme-'));
+        if (className) {
+            return current;
+        }
+        current = current.parentElement;
+    }
+    return null;
+}
+/**
+ * Collect all focusable elements inside a root container.
+ * 收集根容器中所有可聚焦元素。
+ *
+ * @param root - Parent node to search within. 要搜索的父节点。
+ * @returns Array of visible, non-disabled focusable elements. 可见、非禁用的可聚焦元素数组。
+ */
+export function getFocusableElements(root) {
+    const selectors = [
+        'button:not([disabled])',
+        '[href]',
+        'input:not([disabled])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        '[tabindex]:not([tabindex="-1"])',
+        '[role="button"]',
+    ];
+    return Array.from(root.querySelectorAll(selectors.join(','))).filter((item) => !item.hasAttribute('hidden') && item.offsetParent !== null);
+}
+/**
+ * Find the first focusable element inside a root container.
+ * 在根容器中查找第一个可聚焦元素。
+ *
+ * @param root - Parent node to search within. 要搜索的父节点。
+ * @returns The first focusable element, or `null`. 第一个可聚焦元素，或 `null`。
+ */
+export function findFirstFocusable(root) {
+    return getFocusableElements(root)[0] ?? null;
+}

package/dist/utils/events.js

@@ -0,0 +1,32 @@
+import { logger, LogLevel } from '../core/logger';
+/**
+ * Dispatch a composed, bubbling `CustomEvent` with Aithe defaults.
+ * Also records the event in the logger for debugging / telemetry.
+ * 使用 Aithe 默认值分发一个组合、冒泡的 `CustomEvent`，同时记录到日志器。
+ *
+ * @param target - Event target element. 事件目标元素。
+ * @param type   - Event type string. 事件类型字符串。
+ * @param detail - Optional event detail payload. 可选的事件详情载荷。
+ * @typeparam T  - Type of the event detail. 事件详情的类型。
+ */
+export function emitAitheEvent(target, type, detail) {
+    if (logger.isEnabled) {
+        // Only log when detail is a plain object with log: true — component-instance-level opt-in.
+        const shouldLog = detail != null
+            && typeof detail === 'object'
+            && detail.log === true;
+        if (shouldLog) {
+            const tagName = target.tagName?.toLowerCase?.() ?? '';
+            logger.addEntry(LogLevel.DEBUG, [
+                `[AitheEvent] ${type} from ${tagName}`,
+                { type, tagName, detail },
+            ], ['aithe']);
+        }
+    }
+    return target.dispatchEvent(new CustomEvent(type, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail,
+    }));
+}

package/dist/utils/icon.js

@@ -0,0 +1,176 @@
+import { html, svg } from 'lit';
+const ICON_PATTERN = /^\((\w+)\)(.+)/;
+export const ICON_SIZE_MAP = {
+    xs: '12px', sm: '16px', md: '20px', lg: '24px',
+    xl: '28px', '2xl': '32px', '3xl': '48px',
+    '4xl': '64px', '5xl': '96px', '6xl': '128px',
+};
+export const ICON_GLYPH_MAP = {
+    // ── General / 通用 ──
+    sparkles: svg `<path d="M12 3l1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8L12 3z"></path><path d="M5 14l.9 2.1L8 17l-2.1.9L5 20l-.9-2.1L2 17l2.1-.9L5 14z"></path>`,
+    close: svg `<path d="M6 6l12 12M18 6L6 18"></path>`,
+    check: svg `<path d="M5 13l4 4L19 7"></path>`,
+    info: svg `<circle cx="12" cy="12" r="9"></circle><path d="M12 10v5"></path><path d="M12 7h.01"></path>`,
+    warning: svg `<path d="M12 4l9 16H3L12 4z"></path><path d="M12 10v4"></path><path d="M12 17h.01"></path>`,
+    image: svg `<rect x="4" y="5" width="16" height="14" rx="2"></rect><path d="M8 14l3-3 5 5"></path><path d="M14 12l2-2 4 4"></path><circle cx="9" cy="9" r="1.5"></circle>`,
+    search: svg `<circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4.35-4.35"></path>`,
+    plus: svg `<path d="M12 5v14M5 12h14"></path>`,
+    minus: svg `<path d="M5 12h14"></path>`,
+    menu: svg `<path d="M4 6h16M4 12h16M4 18h16"></path>`,
+    more: svg `<circle cx="12" cy="5" r="1.5"></circle><circle cx="12" cy="12" r="1.5"></circle><circle cx="12" cy="19" r="1.5"></circle>`,
+    settings: svg `<circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 00.5 1.8l.05.05a2 2 0 010 2.83 2 2 0 01-2.83 0l-.05-.05a1.65 1.65 0 00-1.8-.5 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.8.5l-.05.05a2 2 0 01-2.83 0 2 2 0 010-2.83l.05-.05a1.65 1.65 0 00.5-1.8 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.5-1.8l-.05-.05a2 2 0 010-2.83 2 2 0 012.83 0l.05.05a1.65 1.65 0 001.8.5H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.8-.5l.05-.05a2 2 0 012.83 0 2 2 0 010 2.83l-.05.05a1.65 1.65 0 00-.5 1.8 1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"></path>`,
+    home: svg `<path d="M3 12l9-9 9 9"></path><path d="M9 21V12h6v9"></path>`,
+    star: svg `<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>`,
+    heart: svg `<path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"></path>`,
+    copy: svg `<rect x="9" y="9" width="13" height="13" rx="2"></rect><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>`,
+    download: svg `<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path><path d="M7 10l5 5 5-5"></path><path d="M12 15V3"></path>`,
+    upload: svg `<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path><path d="M17 8l-5-5-5 5"></path><path d="M12 3v12"></path>`,
+    share: svg `<circle cx="18" cy="5" r="3"></circle><circle cx="6" cy="12" r="3"></circle><circle cx="18" cy="19" r="3"></circle><path d="M8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98"></path>`,
+    link: svg `<path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"></path>`,
+    external: svg `<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><path d="M15 3h6v6"></path><path d="M10 14L21 3"></path>`,
+    refresh: svg `<path d="M21.5 2v6h-6"></path><path d="M2.5 22v-6h6"></path><path d="M21.5 8A10 10 0 003.5 8"></path><path d="M2.5 16A10 10 0 0020.5 16"></path>`,
+    edit: svg `<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"></path><path d="M18.5 2.5a2.12 2.12 0 013 3L12 15l-4 1 1-4 9.5-9.5z"></path>`,
+    trash: svg `<path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6h14"></path>`,
+    filter: svg `<path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"></path>`,
+    sort: svg `<path d="M7 4l-4 4 4 4"></path><path d="M17 4l4 4-4 4"></path><path d="M3 8h18"></path>`,
+    lock: svg `<rect x="3" y="11" width="18" height="11" rx="2"></rect><path d="M7 11V7a5 5 0 0110 0v4"></path>`,
+    unlock: svg `<rect x="3" y="11" width="18" height="11" rx="2"></rect><path d="M7 11V7a5 5 0 019.9-1"></path>`,
+    eye: svg `<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle>`,
+    eyeOff: svg `<path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94"></path><path d="M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19"></path><path d="M14.12 14.12a3 3 0 11-4.24-4.24"></path><path d="M1 1l22 22"></path>`,
+    clock: svg `<circle cx="12" cy="12" r="10"></circle><path d="M12 6v6l4 2"></path>`,
+    calendar: svg `<rect x="3" y="4" width="18" height="18" rx="2"></rect><path d="M16 2v4M8 2v4M3 10h18"></path>`,
+    pin: svg `<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"></path><circle cx="12" cy="9" r="2.5"></circle>`,
+    flag: svg `<path d="M4 22V4"></path><path d="M4 4l8 4-8 4 8 4-8 4"></path>`,
+    bookmark: svg `<path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"></path>`,
+    paperclip: svg `<path d="M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48"></path>`,
+    tag: svg `<path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"></path><path d="M7 7h.01"></path>`,
+    thumbUp: svg `<path d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.56a2 2 0 002-1.72l1.67-8a2 2 0 00-2-2.28H14z"></path><path d="M7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3"></path>`,
+    thumbDown: svg `<path d="M10 15v4a3 3 0 003 3l4-9V2H5.44a2 2 0 00-2 1.72l-1.67 8a2 2 0 002 2.28H10z"></path><path d="M17 2h3a2 2 0 012 2v7a2 2 0 01-2 2h-3"></path>`,
+    // ── Arrows / 箭头 ──
+    arrowUp: svg `<path d="M12 19V5M5 12l7-7 7 7"></path>`,
+    arrowDown: svg `<path d="M12 5v14M19 12l-7 7-7-7"></path>`,
+    arrowLeft: svg `<path d="M19 12H5M12 19l-7-7 7-7"></path>`,
+    arrowRight: svg `<path d="M5 12h14M12 5l7 7-7 7"></path>`,
+    chevronUp: svg `<path d="M6 15l6-6 6 6"></path>`,
+    chevronDown: svg `<path d="M6 9l6 6 6-6"></path>`,
+    chevronLeft: svg `<path d="M15 6l-6 6 6 6"></path>`,
+    chevronRight: svg `<path d="M9 6l6 6-6 6"></path>`,
+    expand: svg `<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"></path>`,
+    collapse: svg `<path d="M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7"></path>`,
+    // ── Status / 状态 ──
+    success: svg `<circle cx="12" cy="12" r="10"></circle><path d="M8 12l3 3 5-5"></path>`,
+    error: svg `<circle cx="12" cy="12" r="10"></circle><path d="M15 9l-6 6M9 9l6 6"></path>`,
+    question: svg `<circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3"></path><path d="M12 17h.01"></path>`,
+    // ── Media / 媒体 ──
+    play: svg `<circle cx="12" cy="12" r="10"></circle><path d="M10 8l6 4-6 4V8z"></path>`,
+    pause: svg `<circle cx="12" cy="12" r="10"></circle><rect x="9" y="8" width="2" height="8"></rect><rect x="15" y="8" width="2" height="8"></rect>`,
+    volume: svg `<path d="M11 5L6 9H2v6h4l5 4V5z"></path><path d="M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07"></path>`,
+    mute: svg `<path d="M11 5L6 9H2v6h4l5 4V5z"></path><path d="M23 9l-6 6M17 9l6 6"></path>`,
+    camera: svg `<path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"></path><circle cx="12" cy="13" r="4"></circle>`,
+    video: svg `<polygon points="23 7 16 12 23 17 23 7"></polygon><rect x="1" y="5" width="15" height="14" rx="2"></rect>`,
+    music: svg `<path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle>`,
+    // ── Communication / 交流 ──
+    mail: svg `<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><path d="M22 6l-10 7L2 6"></path>`,
+    bell: svg `<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0"></path>`,
+    chat: svg `<path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"></path>`,
+    phone: svg `<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"></path>`,
+    // ── Data / 数据 ──
+    barChart: svg `<path d="M12 20V10M18 20V4M6 20v-4"></path>`,
+    pieChart: svg `<path d="M21.21 15.89A10 10 0 118 2.83"></path><path d="M22 12A10 10 0 0012 2v10z"></path>`,
+    database: svg `<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>`,
+    code: svg `<path d="M16 18l6-6-6-6M8 6l-6 6 6 6"></path>`,
+    terminal: svg `<polyline points="4 17 10 11 4 5"></polyline><path d="M12 19h8"></path>`,
+    file: svg `<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"></path><path d="M14 2v6h6"></path>`,
+    folder: svg `<path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"></path>`,
+    // ── Layout / 布局 ──
+    grid: svg `<rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect>`,
+    list: svg `<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"></path>`,
+    sidebar: svg `<rect x="3" y="3" width="18" height="18" rx="2"></rect><path d="M9 3v18"></path>`,
+    maximize: svg `<path d="M8 3H5a2 2 0 00-2 2v3M21 8V5a2 2 0 00-2-2h-3M3 16v3a2 2 0 002 2h3M16 21h3a2 2 0 002-2v-3"></path>`,
+    minimize: svg `<path d="M8 3v3a2 2 0 01-2 2H3M21 8h-3a2 2 0 01-2-2V3M3 16h3a2 2 0 012 2v3M16 21v-3a2 2 0 012-2h3"></path>`,
+    // ── User / 用户 ──
+    user: svg `<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path><circle cx="12" cy="7" r="4"></circle>`,
+    users: svg `<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"></path>`,
+    // ── Weather / 天气 ──
+    sun: svg `<circle cx="12" cy="12" r="5"></circle><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"></path>`,
+    moon: svg `<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>`,
+    cloud: svg `<path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"></path>`,
+};
+const SVG_STYLE = 'fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;';
+export class IconUtil {
+    static resolveSize(size, fallback = '20px') {
+        if (!size)
+            return fallback;
+        const mapped = ICON_SIZE_MAP[size];
+        if (mapped)
+            return mapped;
+        return /^\d+$/.test(size) ? `${size}px` : size;
+    }
+    static parse(input) {
+        const match = ICON_PATTERN.exec(input);
+        if (match) {
+            const rawType = match[1].toLowerCase();
+            const value = match[2].trim();
+            if (rawType === 'class' ||
+                rawType === 'auto' ||
+                rawType === 'url' ||
+                rawType === 'share' ||
+                rawType === 'remote') {
+                return { type: rawType, value };
+            }
+        }
+        return { type: 'class', value: input };
+    }
+    static renderAuto(value, cssSize, cls, iconStyle, extraStyle = '') {
+        return html `
+      <span class="${cls}" style="${extraStyle}${iconStyle}display:inline-flex;align-items:center;justify-content:center;width:${cssSize};height:${cssSize};border-radius:50%;background:linear-gradient(135deg, var(--aithe-primary-4), var(--aithe-primary-7));color:var(--aithe-color-text-on-primary, #ffffff);font-size:calc(${cssSize} * 0.85);font-weight:600;">
+        ${value.charAt(0).toUpperCase()}
+      </span>
+    `;
+    }
+    static renderClass(value, cssSize, extraStyle = '') {
+        const glyph = ICON_GLYPH_MAP[value] ?? ICON_GLYPH_MAP['sparkles'];
+        return html `
+      <svg viewBox="0 0 24 24" aria-hidden="true"
+        style="${extraStyle}width:${cssSize};height:${cssSize};${SVG_STYLE}">
+        ${glyph}
+      </svg>
+    `;
+    }
+    static render(input, size = '16', cls = '', iconStyle = '', alt = '') {
+        const { type, value } = IconUtil.parse(input);
+        const cssSize = /^\d+$/.test(size) ? `${size}px` : size;
+        switch (type) {
+            case 'auto':
+                return IconUtil.renderAuto(value, cssSize, cls, iconStyle);
+            case 'url':
+            case 'share':
+            case 'remote': {
+                const altText = alt || (value.includes('|')
+                    ? value.split('|')[1].trim()
+                    : '');
+                const src = value.includes('|') ? value.split('|')[0].trim() : value;
+                return html `
+          <span style="${iconStyle}display:inline-flex;position:relative;width:${cssSize};height:${cssSize};">
+            <img class="${cls}" src="${src}" alt="${altText}"
+              style="${iconStyle}display:inline-flex;width:${cssSize};height:${cssSize};object-fit:contain;"
+              @error=${(e) => {
+                    const el = e.target;
+                    el.style.display = 'none';
+                    const fallback = el.nextElementSibling;
+                    if (fallback)
+                        fallback.style.display = 'inline-flex';
+                }}
+            />
+            ${altText
+                    ? html `<span style="position:absolute;top:0;left:0;line-height:1;width:${cssSize};height:${cssSize};border-radius:50%;background:linear-gradient(135deg, var(--aithe-primary-4), var(--aithe-primary-7));color:var(--aithe-color-text-on-primary, #ffffff);font-size:calc(${cssSize} * 0.85);font-weight:600;display:inline-flex;align-items:center;justify-content:center;display:none;">${altText.charAt(0).toUpperCase()}</span>`
+                    : IconUtil.renderClass('image', cssSize, 'display:none;position:absolute;top:0;left:0;')}
+          </span>
+        `;
+            }
+            case 'class':
+            default:
+                return IconUtil.renderClass(value, cssSize);
+        }
+    }
+}

package/dist/utils/index.js

@@ -0,0 +1,4 @@
+export * from './dom';
+export * from './events';
+export * from './validation';
+export * from './icon';

package/dist/utils/utils.d.ts

@@ -34,14 +34,14 @@ export declare function uid(prefix?: string): string;
  */
 export declare function findFirstFocusable(root: ParentNode): HTMLElement | null;
 /**
- * Safely converts an unknown value to a JSON string, preventing "[object Object]" output.
+ * Safely converts an unknown value to a string, preventing "[object Object]" output.
  * Falls back gracefully through multiple strategies:
- *   1. JSON.stringify with pretty-print (fails on circular references)
- *   2. JSON.stringify without pretty-print for objects, or String() for primitives
+ *   1. Pretty-print JSON.stringify for objects (fails on circular references)
+ *   2. Compact JSON.stringify as second attempt
  *   3. String() as final fallback
  *
- * 安全地将任意值转换为 JSON 字符串，避免 "[object Object]" 输出。
- * 逐级降级：格式化序列化 → 无格式序列化/基本类型转换 → String() 兜底
+ * 安全地将任意值转换为字符串，避免 "[object Object]" 输出。
+ * 对象优先尝试格式化 JSON.stringify，失败后降级为紧凑格式，最后 String() 兜底。
  */
 export declare function safeStringify(value: unknown): string;
 //# sourceMappingURL=utils.d.ts.map