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

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

@@ -7,6 +7,7 @@ import { Marked } from 'marked';
 import { createEditorMarkdownExtensions, extractPlainTextFromTokens, } from './editor-markdown-extensions.js';
 import { highlightCode, isLanguageSupported } from './highlight.js';
 import { isMermaidLanguage } from './mermaid-render.js';
+import { escapeHtml, isExternalLinkHref, sanitizeImageSrc, sanitizeLinkHref, sanitizeMarkdownHtml, } from './safe-html.js';
 /** Default parsing options for document mode. */
 const DEFAULT_OPTIONS = {
     enableHighlight: true,
@@ -17,19 +18,15 @@ const DEFAULT_OPTIONS = {
     codeViewPreviewLabel: 'Preview',
     codePreviewHint: '',
     breaks: true,
+    allowHtmlTags: false,
 };
-const SAFE_LINK_HREF_REGEX = /^(?:https?:\/\/|\/|#|mailto:)/i;
-const SAFE_IMAGE_SRC_REGEX = /^(?:https?:\/\/|\/|data:image\/)/i;
-/**
- * Escape HTML entities to prevent raw HTML injection.
- */
-function escapeHtml(text) {
-    return text
-        .replace(/&/g, '&')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#39;');
+function readHtmlTokenSource(token) {
+    if ('raw' in token && typeof token.raw === 'string') {
+        return token.raw;
+    }
+    return 'text' in token && typeof token.text === 'string'
+        ? token.text
+        : '';
 }
 /**
  * Create a URL-safe heading slug while keeping letters and digits.
@@ -166,16 +163,18 @@ function createRendererObject(options, state) {
                 + `</div>`;
         },
         html(token) {
-            return escapeHtml('text' in token ? token.text : '');
+            const source = readHtmlTokenSource(token);
+            return options.allowHtmlTags
+                ? sanitizeMarkdownHtml(source)
+                : escapeHtml(source);
         },
         link({ href, title, tokens }) {
             // text preserves inline markdown within the link label.
             const text = this.parser.parseInline(tokens);
             // safeHref strips potentially unsafe protocols.
-            const safeHref = href && SAFE_LINK_HREF_REGEX.test(href) ? href : '';
+            const safeHref = sanitizeLinkHref(href);
             // isExternal controls whether target/_blank is added.
-            const isExternal = safeHref
-                && (safeHref.startsWith('http://') || safeHref.startsWith('https://'));
+            const isExternal = safeHref && isExternalLinkHref(safeHref);
             // attrs is the flattened HTML attribute string.
             const attrs = [
                 `href="${escapeHtml(safeHref)}"`,
@@ -186,7 +185,7 @@ function createRendererObject(options, state) {
         },
         image({ href, title, text }) {
             // safeSrc prevents dangerous image protocols.
-            const safeSrc = href && SAFE_IMAGE_SRC_REGEX.test(href) ? href : '';
+            const safeSrc = sanitizeImageSrc(href);
             // attrs is the flattened HTML attribute string.
             const attrs = [
                 `src="${escapeHtml(safeSrc)}"`,

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

@@ -136,6 +136,8 @@ export interface AiDocumentEditorProps extends DataAttributes {
     sourceKind?: MarkdownSourceKind;
     /** Default language when sourceKind is `code`. */
     codeLanguage?: string;
+    /** Content font size. Numbers are interpreted as px. */
+    fontSize?: string | number;
     /** Custom class for the outer container. */
     class?: string;
     /** Whether to show the copy button on code blocks. */
@@ -144,6 +146,8 @@ export interface AiDocumentEditorProps extends DataAttributes {
     showRunButton?: boolean;
     /** Whether to show the code/preview toggle on code blocks. */
     showCodePreviewToggle?: boolean;
+    /** Whether to parse raw HTML tags through a safe allowlist. */
+    allowHtmlTags?: boolean;
     /**
      * 是否启用内置的高风险代码预览。
      *

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

@@ -15,6 +15,8 @@ export interface MarkdownParseOptions {
     showCopyButton?: boolean;
     /** 是否将换行符转换为 <br>（默认 true，适合 AI 输出） */
     breaks?: boolean;
+    /** 是否按安全白名单解析原始 HTML 标签（默认 false） */
+    allowHtmlTags?: boolean;
 }
 /**
  * 将 Markdown 文本解析为 HTML

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/app/FeedbackModal.svelte

@@ -55,9 +55,10 @@
     open?: boolean
     labels?: FeedbackLabels
     onsubmit?: (data: FeedbackData) => Promise<void>
+    class?: string
   }
 
-  let { open = $bindable(false), labels = {}, onsubmit, ...restProps }: Props & DataAttributes = $props()
+  let { open = $bindable(false), labels = {}, onsubmit, class: className = '', ...restProps }: Props & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
   // 文案优先使用传入的 labels，缺省回退到内置消息 uiM(...)
@@ -109,7 +110,7 @@
   }
 </script>
 
-<Modal {...dataAttributes} bind:open title={labels.title ?? uiM('feedback_title')}>
+<Modal {...dataAttributes} class={className} 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

@@ -29,6 +29,7 @@ interface Props {
     open?: boolean;
     labels?: FeedbackLabels;
     onsubmit?: (data: FeedbackData) => Promise<void>;
+    class?: string;
 }
 type $$ComponentProps = Props & DataAttributes;
 /**

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

@@ -12,7 +12,7 @@
 <script lang='ts'>
   import type { DataAttributes } from '../../../types.js'
   import { uiM } from '../../../messages.js'
-  import { getDataAttributes } from '../../../utils.js'
+  import { cn, getDataAttributes } from '../../../utils.js'
   import BareButton from '../../primitives/BareButton.svelte'
   import IconButton from '../../primitives/IconButton.svelte'
 
@@ -25,6 +25,7 @@
     onlanguagechange?: (lang: string) => void
     onthemechange?: (theme: string) => void
     onclose?: () => void
+    class?: string
   }
 
   let {
@@ -45,6 +46,7 @@
     onlanguagechange,
     onthemechange,
     onclose,
+    class: className = '',
     ...restProps
   }: Props & DataAttributes = $props()
 
@@ -76,7 +78,7 @@
     onclick={handleBackdropClick}
   >
     <div
-      class='relative w-full max-w-lg mx-4 transform overflow-hidden rounded-2xl bg-base-100 shadow-xl transition-all'
+      class={cn('relative w-full max-w-lg mx-4 transform overflow-hidden rounded-2xl bg-base-100 shadow-xl transition-all', className)}
       role='dialog'
       aria-modal='true'
     >

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

@@ -15,6 +15,7 @@ interface Props {
     onlanguagechange?: (lang: string) => void;
     onthemechange?: (theme: string) => void;
     onclose?: () => void;
+    class?: string;
 }
 type $$ComponentProps = Props & DataAttributes;
 /**

package/dist/components/scenes/crud/CrudDeleteConfirm.svelte

@@ -18,6 +18,7 @@
     message = '',
     onconfirm,
     oncancel,
+    class: className = '',
     ...restProps
   }: {
     open?: boolean
@@ -26,12 +27,14 @@
     message?: string
     onconfirm?: () => Promise<void> | void
     oncancel?: () => void
+    class?: string
   } & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
 </script>
 
 <Confirm {...dataAttributes}
+         class={className}
          bind:open
          title={title || uiM('crud_delete_title')}
          message={message || uiM('crud_delete_message')}

package/dist/components/scenes/crud/CrudDeleteConfirm.svelte.d.ts

@@ -6,6 +6,7 @@ type $$ComponentProps = {
     message?: string;
     onconfirm?: () => Promise<void> | void;
     oncancel?: () => void;
+    class?: string;
 } & DataAttributes;
 /**
  * CrudDeleteConfirm

package/dist/components/scenes/crud/CrudDetailDrawer.svelte

@@ -41,6 +41,7 @@
     onedit,
     onclose,
     detailExtra,
+    class: className = '',
     ...restProps
   }: {
     open?: boolean
@@ -57,6 +58,7 @@
     onedit?: () => void
     onclose?: () => void
     detailExtra?: Snippet<[Record<string, unknown>]>
+    class?: string
   } & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
@@ -171,6 +173,7 @@
 {#if variant === 'modal'}
   <Modal
     bind:open
+    class={className}
     {title}
     size={modalSize}
     width={modalWidth}
@@ -184,7 +187,7 @@
     {/snippet}
   </Modal>
 {:else}
-  <Drawer bind:open {title} position='right' {size} width={drawerWidth} onclose={handleClose}>
+  <Drawer bind:open {title} class={className} position='right' {size} width={drawerWidth} onclose={handleClose}>
     {#if item}
       <div class='pb-20'>
         {@render detailBody()}

package/dist/components/scenes/crud/CrudDetailDrawer.svelte.d.ts

@@ -31,6 +31,7 @@ type $$ComponentProps = {
     onedit?: () => void;
     onclose?: () => void;
     detailExtra?: Snippet<[Record<string, unknown>]>;
+    class?: string;
 } & DataAttributes;
 /**
  * CrudDetailDrawer

package/dist/components/scenes/crud/CrudDetailPanel.svelte

@@ -42,6 +42,7 @@
     onedit,
     onclose,
     detailExtra,
+    class: className = '',
     ...restProps
   }: {
     open?: boolean
@@ -59,6 +60,7 @@
     onedit?: () => void
     onclose?: () => void
     detailExtra?: Snippet<[Record<string, unknown>]>
+    class?: string
   } & DataAttributes = $props()
 
   const dataAttributes = $derived(getDataAttributes(restProps))
@@ -179,6 +181,7 @@
 {#if variant === 'modal'}
   <Modal
     bind:open
+    class={className}
     {title}
     size={modalSize}
     width={modalWidth}
@@ -192,7 +195,7 @@
     {/snippet}
   </Modal>
 {:else}
-  <Drawer bind:open {title} position='right' {size} width={drawerWidth} onclose={handleClose}>
+  <Drawer bind:open {title} class={className} position='right' {size} width={drawerWidth} onclose={handleClose}>
     {#if item}
       <div class={drawerBodyClass}>
         {@render detailBody()}

package/dist/components/scenes/crud/CrudDetailPanel.svelte.d.ts

@@ -32,6 +32,7 @@ type $$ComponentProps = {
     onedit?: () => void;
     onclose?: () => void;
     detailExtra?: Snippet<[Record<string, unknown>]>;
+    class?: string;
 } & DataAttributes;
 /**
  * CrudDetailPanel