@baishuyun/ai-design 2.1.0-alpha.2 → 2.1.0

package/src/components/card.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { transCls } from '../const/ui';
 import { cn } from '../lib/utils';
 import { ReactNode } from 'react';
@@ -9,28 +10,72 @@ export interface CardProps {
   icon?: ReactNode;
   iconCode?: string;
   onClick?: (title: string, iconCode?: string) => void;
+  /** 追加到根节点的类名（如移动端满宽 max-w-none） */
+  className?: string;
+  /**
+   * 紧凑模式（移动端推荐卡片，对齐 Figma 40040:30035）：
+   * 标题行去内边距、高 26，标题与描述间距 6，卡片总高 92。
+   * 默认 false，不影响现有 PC 样式
+   */
+  compact?: boolean;
 }
 
-export const Card = ({ title, desc, index, icon, onClick, iconCode }: CardProps) => {
+export const Card = ({
+  title,
+  desc,
+  index,
+  icon,
+  onClick,
+  iconCode,
+  className,
+  compact,
+}: CardProps) => {
+  const iconFontCls = classNames(
+    {
+      'text-[18px]': compact,
+    },
+    'text-[#0265FF]'
+  );
+
+  const titleCls = classNames(
+    {
+      'text-[16px]': compact,
+      'font-[500]': compact,
+    },
+    'truncate !text-[#12111] group-hover:text-[#0265FF]'
+  );
+
+  const contentCls = classNames(
+    {
+      'text-[12px]': !compact,
+      'text-[14px]': compact,
+    },
+    'text-[#666] leading-5'
+  );
+
   return (
     <div
       className={cn(
-        'bs-card group flex flex-col cursor-pointer p-2.5 gap-2.5 rounded-lg max-w-[350px] border border-[#e0e0e0] bg-white',
-        {
-          transCls,
-        }
+        'bs-card group flex flex-col cursor-pointer p-2.5 rounded-lg max-w-[350px] border border-[#e0e0e0] bg-white',
+        compact ? 'gap-1.5' : 'gap-2.5',
+        transCls,
+        className
       )}
       onClick={() => {
         onClick?.(title, iconCode);
       }}
     >
-      <div className="px-2.5 flex items-center gap-1.5 rounded-[4px] h-[34px]  bg-white">
-        {index === undefined ? null : <div>{index}</div>}
-        {icon === undefined ? null : <div className="text-[#0265FF]">{icon}</div>}
+      <div
+        className={cn('flex items-center gap-1.5 rounded-[4px] bg-white', {
+          'h-[26px]': compact,
+          'px-2.5 h-[34px]': !compact,
+        })}
+      >
+        {icon === undefined ? null : <div className={iconFontCls}>{icon}</div>}
         {/* make title text ellipsis */}
-        <div className="truncate !text-[#12111] group-hover:text-[#0265FF]">{title}</div>
+        <div className={titleCls}>{title}</div>
       </div>
-      <div className="text-[#666] leading-5 text-[12px]">{desc}</div>
+      <div className={contentCls}>{desc}</div>
     </div>
   );
 };

package/src/components/circle-checker.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { cn } from '../lib/utils';
 import { CheckerInBoxIcon } from './bs-icons';
+import classNames from 'classnames';
 
 export interface CircleCheckerProps {
   defaultChecked?: boolean;
@@ -9,6 +10,7 @@ export interface CircleCheckerProps {
   children?: React.ReactNode;
   disabled?: boolean;
   className?: string;
+  isMobile?: boolean;
 }
 
 export const CircleChecker = ({
@@ -17,6 +19,7 @@ export const CircleChecker = ({
   onCheckedChange,
   children,
   disabled = false,
+  isMobile,
   className,
 }: CircleCheckerProps) => {
   const [internalChecked, setInternalChecked] = useState(defaultChecked);
@@ -34,6 +37,16 @@ export const CircleChecker = ({
     onCheckedChange?.(newChecked);
   };
 
+  const sizeCls = classNames({
+    'w-4 h-4': !isMobile,
+    'w-[20px] h-[20px]': isMobile
+  })
+
+  const fontCls = classNames({
+    'text-[14px]': !isMobile,
+    'text-[16px]': isMobile,
+  })
+
   return (
     <button
       type="button"
@@ -43,14 +56,16 @@ export const CircleChecker = ({
       onClick={handleClick}
       className={cn(
         'inline-flex items-center gap-[6px] cursor-pointer select-none',
-        'text-[#121111] text-[14px]',
+        'text-[#121111]',
+        fontCls,
         disabled && 'cursor-not-allowed opacity-50',
         className
       )}
     >
       <span
         className={cn(
-          'inline-flex items-center justify-center w-4 h-4 rounded-full transition-colors duration-200 box-border border',
+          'inline-flex items-center justify-center rounded-full transition-colors duration-200 box-border border',
+          sizeCls,
           isChecked ? 'bg-[#2E60FF] border-transparent' : 'bg-white border-[#e0e0e0]'
         )}
       >
@@ -60,7 +75,7 @@ export const CircleChecker = ({
           </span>
         )}
       </span>
-      {children && <span className="text-sm">{children}</span>}
+      {children && <span className="">{children}</span>}
     </button>
   );
 };

package/src/components/collapsible-txt-msg.tsx

@@ -7,7 +7,8 @@ import classNames from 'classnames';
 export interface CollapsibleTxtMsgProps {
   title: string;
   content?: string;
-  icon?: ReactNode;
+  /** 不传时用 AnalysisIcon。null 不显示图标 */
+  icon?: ReactNode | null;
   defaultOpen?: boolean;
   children?: ReactNode;
 
@@ -15,7 +16,8 @@ export interface CollapsibleTxtMsgProps {
 
   disableExpand?: boolean;
 
-  withOpenShadow?: boolean;
+  /** 移动端消息内容文字 16px（PC 端 14px） */
+  isMobile?: boolean;
 }
 
 export const CollapsibleTxtMsg = ({
@@ -26,24 +28,25 @@ export const CollapsibleTxtMsg = ({
   disableExpand,
   children,
   defaultOpen,
-  withOpenShadow,
+  isMobile,
 }: CollapsibleTxtMsgProps) => {
   const [isOpen, setIsOpen] = useState(defaultOpen);
-
-
-  const isGhostOpen = isOpen && ghost;
+  const sizeCls = isMobile ? 'text-[16px]' : 'text-[14px]';
+  const iconSizeCls = 'w-[16px] h-[16px]';
 
   const cls = classNames({
-    'bg-[#fafafa] border border-[#e0e0e0] border-solid p-2.5': !ghost,
-    'shadow-lg p-2.5': withOpenShadow && isGhostOpen,
+    'bg-[#fafafa] border border-[#e0e0e0] border-solid p-2.5': !ghost
   })
 
-  const t = (isGhostOpen && !withOpenShadow) ? '' : title;
+  const isGhostOpen = isOpen && ghost;
+
+  const t = isGhostOpen ? '' : title;
+  const shownIcon = icon === undefined ? <AnalysisIcon /> : icon;
 
   return (
     <div className={classNames("flex flex-col gap-2.5 rounded-lg w-full", cls)}>
       <div
-        className={cn('flex items-center justify-between w-full gap-2.5', {
+        className={cn('flex items-center justify-between w-full', {
           'cursor-pointer': !disableExpand,
         })}
         onClick={() => {
@@ -53,8 +56,10 @@ export const CollapsibleTxtMsg = ({
         }}
       >
         <div className="flex gap-2.5 items-center">
-          <div className="w-4 h-4 shrink-0 flex items-center">{icon || <AnalysisIcon />}</div>
-          <p className="text-[#666] text-[14px] leading-normal">{t}</p>
+          {shownIcon ? (
+            <div className={classNames("shrink-0 flex items-center", iconSizeCls)}>{shownIcon}</div>
+          ) : null}
+          <p className={`text-[#666] ${sizeCls} leading-normal`}>{t}</p>
         </div>
         <button
           onClick={() => {
@@ -73,7 +78,7 @@ export const CollapsibleTxtMsg = ({
         </button>
       </div>
       {isOpen && !disableExpand && (
-        <div className="text-[#121111] text-[14px] word-wrap break-all max-w-full">{content || children}</div>
+        <div className={`text-[#121111] ${sizeCls} word-wrap`}>{content || children}</div>
       )}
     </div>
   );

package/src/components/fake-bot-msg.tsx

@@ -6,20 +6,23 @@ export const FakeBotMessage = ({
   children,
   className,
   avatarJsx,
-  headless = false,
+  isMobile,
 }: {
   children: ReactNode;
   offset?: boolean;
   className?: string;
   avatarJsx?: ReactNode;
-  headless?: boolean;
+  /** 移动端消息内容文字 16px（PC 端 14px） */
+  isMobile?: boolean;
 }) => {
-  if (headless || !avatarJsx) {
+  if (!avatarJsx) {
     return (
       <div>
         <MessageContent
+          isMobile={isMobile}
           className={cn(
             'wrap-break-words rounded-2 bg-transparent px-0 py-0 text-left w-full',
+            isMobile && 'gap-[10px]',
             className
           )}
           data-testid="message-content"
@@ -30,18 +33,26 @@ export const FakeBotMessage = ({
     );
   }
 
-
   return (
     <div
-      className={cn('group/message w-full')}
+      className={cn('group/message w-full', className)}
       data-role="assistant"
       data-testid={`message-assistant`}
     >
-      <div className="flex w-full flex-col items-start justify-start gap-2.5">
+      <div
+        className={cn(
+          'flex w-full flex-col items-start justify-start',
+          isMobile ? 'gap-[10px]' : 'gap-2.5'
+        )}
+      >
         {avatarJsx}
         <div className="flex flex-col min-w-0 grow gap-2.5 w-full">
           <MessageContent
-            className="w-full wrap-break-words rounded-2 bg-transparent px-0 py-0 text-left"
+            isMobile={isMobile}
+            className={cn(
+              'w-full wrap-break-words rounded-2 bg-transparent px-0 py-0 text-left',
+              isMobile && 'gap-[10px]'
+            )}
             data-testid="message-content"
           >
             {children}

package/src/components/field-checker-list-msg.tsx

@@ -26,8 +26,9 @@ export const FieldCheckerListMsg = memo(
       children?: ReactNode;
       streaming: boolean;
       confirmed?: boolean;
+      isMobile?: boolean;
     }
-  >(({ fields, children, streaming, confirmed }, ref) => {
+  >(({ fields, children, streaming, confirmed, isMobile }, ref) => {
     // Track individual field checked states (all default to true)
     const [checkedMap, setCheckedMap] = useState<Record<string, boolean>>(() => {
       const map: Record<string, boolean> = {};
@@ -72,11 +73,11 @@ export const FieldCheckerListMsg = memo(
     );
 
     return (
-      <CollapsibleTxtMsg title="字段生成" icon={<LetterAIcon />} defaultOpen>
+      <CollapsibleTxtMsg title="字段生成" icon={<LetterAIcon />} defaultOpen isMobile={isMobile}>
         {
           <div
             className={cn(
-              'flex gap-2.5 px-4 py-2.5 rounded-[4px] w-full transition-colors cursor-pointer hover:bg-[#EFF0F6] items-center',
+              'flex gap-[6px] px-4 py-2.5 rounded-[4px] w-full transition-colors cursor-pointer hover:bg-[#EFF0F6] items-center',
               {
                 'pointer-events-none': confirmed || streaming,
               }

package/src/components/fields-design-info-table.tsx

@@ -38,7 +38,7 @@ function groupFields(fields: IFieldDesignInfo[]) {
   return groups;
 }
 
-const cellCls = 'flex items-center px-1.5 py-2.5 text-xs leading-normal';
+const cellCls = 'flex items-center px-1.5 py-2.5 text-[12px] leading-normal';
 
 function FieldRow({
   field,
@@ -59,11 +59,9 @@ function FieldRow({
         <span>{field.fieldName}</span>
       </div>
       {/* 类型 */}
-      <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px]')}>
-        {field.type}
-      </div>
+      <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px]')}>{field.type}</div>
       {/* 必填 */}
-      <div className={cn(cellCls, 'w-9 shrink-0 min-h-[34px]')}>
+      <div className={cn(cellCls, 'w-10 shrink-0 min-h-[34px]')}>
         {field.required ? '是' : '否'}
       </div>
       {/* 说明 */}
@@ -100,11 +98,9 @@ function SubFormGroup({
           <span>{parent.fieldName}</span>
         </div>
         {/* 类型 */}
-        <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px] ')}>
-          {parent.type}
-        </div>
+        <div className={cn(cellCls, 'w-[72px] shrink-0 min-h-[34px] ')}>{parent.type}</div>
         {/* 必填 */}
-        <div className={cn(cellCls, 'w-9 shrink-0 min-h-[34px]')}>
+        <div className={cn(cellCls, 'w-10 shrink-0 min-h-[34px]')}>
           {parent.required ? '是' : '否'}
         </div>
         {/* 说明 */}
@@ -126,23 +122,10 @@ export function FieldsDesignInfoTable({ fields }: FieldsDesignInfoTableProps) {
     <div className="flex flex-col items-start w-full bg-white rounded-[10px] overflow-hidden text-black my-[10px] border border-[#E0E0E0]">
       {/* 表头 */}
       <div className="flex items-center w-full shrink-0 bg-[#E5E6EB] rounded-t-[10px] border-b border-[#E0E0E0]">
-        <div className={cn(cellCls, 'w-20 shrink-0 h-[34px] font-bold')}>
-          名称
-        </div>
-        <div className={cn(cellCls, 'w-[72px] shrink-0 h-[34px] font-bold')}>
-          类型
-        </div>
-        <div
-          className={cn(
-            cellCls,
-            'w-9 shrink-0 h-[34px] font-bold justify-center'
-          )}
-        >
-          必填
-        </div>
-        <div className={cn(cellCls, 'flex-1 min-w-0 h-[34px] font-bold')}>
-          说明
-        </div>
+        <div className={cn(cellCls, 'w-20 shrink-0 h-[34px] font-bold')}>名称</div>
+        <div className={cn(cellCls, 'w-[72px] shrink-0 h-[34px] font-bold')}>类型</div>
+        <div className={cn(cellCls, 'w-10 shrink-0 h-[34px] font-bold justify-center')}>必填</div>
+        <div className={cn(cellCls, 'flex-1 min-w-0 h-[34px] font-bold')}>说明</div>
       </div>
 
       {/* 表体 */}

package/src/components/fields-portal.tsx

@@ -8,11 +8,11 @@ export interface FieldsPortalProps extends FieldsPreviewerProps {
   children?: React.ReactNode;
 }
 
-export const FieldsPortal = ({ portalEl, children, ...rest }: FieldsPortalProps): ReactPortal => {
+export const FieldsPortal = ({ portalEl, children, ...rest }: FieldsPortalProps): ReactPortal | null => {
   const { shadowContainer: shadowEntry } = useShadow({
     rootEl: portalEl,
     id: 'chat-sdk-fields-portal',
   });
 
-  return createPortal(<FieldsPreviewer {...rest}>{children}</FieldsPreviewer>, shadowEntry!);
+  return shadowEntry ? createPortal(<FieldsPreviewer {...rest}>{children}</FieldsPreviewer>, shadowEntry) : null;
 };

package/src/components/fields-previewer.tsx

@@ -117,6 +117,7 @@ export const FieldsPreviewer = forwardRef<HTMLDivElement, FieldsPreviewerProps>(
 
     const { shadowContainer } = useShadow({
       id: 'dialog-container',
+      enabled: !disableShadowContainer,
       rootEl: dialogContainer,
       style: containerStyle,
       wrapperStyle: {

package/src/components/font-icon.tsx

@@ -1,10 +1,11 @@
-import { getIconUnicode } from "@baishuyun/ai-feat-utils";
+import { getIconUnicode, FORM_ICON_UNICODE_MAP } from "@baishuyun/ai-feat-utils";
 
-function getFormIconClass(icon: number): string {
-  const isNew = icon >= 25;
-  const newStr = isNew ? '-new' : '';
-  return `node-icon icon-bsy-form${newStr} icon${newStr}-bsy-form-${icon}`;
-}
+// 数字表单图标个别色值：对齐宿主 FONT_ICON_STYLE 里的特殊色
+// （PC 的 .icon-bsy-form-1 / .icon-bsy-form-2），未命中回落到默认蓝 #0265ff。
+const FORM_ICON_COLOR: Record<number, string> = {
+  1: '#ff6600',
+  2: '#52c41a',
+};
 
 export const AppIcon = ({
   name
@@ -31,7 +32,10 @@ export const FontIcon = ({
   style?: React.CSSProperties;
   color?: string;
 }) => {
-  if (!code && !name) {
+  // 判空：只有 null/undefined 才算「无图标」。
+  // 注意不能用 !name——icon 为 0 是合法图标（表单默认 icon 0），
+  // !0 为真会把它误判成无图标，导致绝大多数表单图标不渲染。
+  if (!code && (name === undefined || name === null)) {
     return null;
   }
 
@@ -47,10 +51,17 @@ export const FontIcon = ({
 
   const iconCode = code || getIconUnicode(name?.toString() || '');
   if (!iconCode) {
+    // 数字表单图标：不用 .icon-bsy-form-N 的 :before 内码（部分环境
+    // shadow DOM / WebView 中 :before content 无法生成），改为把 unicode
+    // 字符直接放进文本内容（与 sdk-icon 同法），font-family 走 finex/finex-new
+    const unicode = FORM_ICON_UNICODE_MAP[name!];
+    const fontFamily = name! >= 25 ? 'finex-new' : 'finex';
+    const iconColor = FORM_ICON_COLOR[name!] ?? '#0265ff';
     return (
       <i
-        className={getFormIconClass(name!)}
-        style={{ fontSize: 16, lineHeight: 1 }}
+        className={className}
+        style={{ fontSize: 16, lineHeight: 1, fontStyle: 'normal', fontFamily, color: iconColor, ...style }}
+        dangerouslySetInnerHTML={{ __html: unicode ? `&#x${unicode};` : '' }}
       />
     )
   }

package/src/components/form-info-editor.tsx

@@ -66,6 +66,7 @@ export interface FormInfoEditorProps {
   onMount?: () => void;
   readonly?: boolean;
   iconRenderer?: (icon: FormIconOption & { size: number}) => React.ReactNode; // Optional custom renderer for icons
+  mobile?: boolean;
 }
 
 /**
@@ -85,6 +86,7 @@ export const FormInfoEditor = memo(
     expanded: controlledExpanded,
     onExpandedChange,
     iconRenderer,
+    mobile,
     className,
   }: FormInfoEditorProps) => {
     const [internalExpanded, setInternalExpanded] = useState(false);
@@ -103,6 +105,16 @@ export const FormInfoEditor = memo(
       onMount?.();
     }, []);
 
+    const fontCls = cn({
+      'text-[16px]': mobile,
+      'text-[14px]': !mobile,
+    });
+
+    const sizeCls = cn({
+      'w-[16px] h-[16px]': !mobile,
+      'w-[20px] h-[20px]': !mobile
+    })
+
     // Default Status (Collapsed)
     if (!expanded || readonly) {
       return (
@@ -121,7 +133,7 @@ export const FormInfoEditor = memo(
           {/* Left side: Form icon and name */}
           <div className="flex items-center gap-[10px] min-w-0 flex-1 mr-[10px]">
             <FormIcon size={36} code={iconOpt?.code} render={iconRenderer} value={iconOpt?.value} />
-            <p className="text-[14px] text-black leading-normal truncate">{nameVal}</p>
+            <p className={cn("text-black leading-normal truncate", fontCls)}>{nameVal}</p>
           </div>
 
           <button
@@ -130,19 +142,21 @@ export const FormInfoEditor = memo(
               setExpanded(true);
             }}
             className={cn(
-              'w-[16px] h-[16px] flex items-center justify-center cursor-pointer hover:text-[#0265ff]',
+              'flex items-center justify-center cursor-pointer hover:text-[#0265ff]',
               transCls,
+              sizeCls,
               {
                 'pointer-events-none opacity-0': readonly,
               }
             )}
           >
-            <EditIcon />
+            <EditIcon size={mobile ? 20 : 16} />
           </button>
         </div>
       );
     }
 
+
     // Expanded Status (Edit mode)
     return (
       <div
@@ -155,7 +169,7 @@ export const FormInfoEditor = memo(
       >
         {/* Name field */}
         <div className="flex flex-col gap-[10px] w-full">
-          <p className="text-[14px] text-[#030303] font-bold leading-normal">名称</p>
+          <p className={cn("text-[#030303] font-bold leading-normal", fontCls)}>名称</p>
           <input
             type="text"
             value={nameVal}
@@ -167,9 +181,10 @@ export const FormInfoEditor = memo(
             }}
             className={cn(
               'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px] w-full',
-              'text-[14px] text-[#030303] leading-normal outline-none',
+              'text-[#030303] leading-normal outline-none',
               'focus:border-[#0265ff]',
               'hover:border-[#0265ff]',
+              fontCls,
               transCls
             )}
           />
@@ -177,7 +192,7 @@ export const FormInfoEditor = memo(
 
         {/* Icon field */}
         <div className="flex flex-col gap-[10px] w-full">
-          <p className="text-[14px] text-[#030303] font-bold leading-normal">图标</p>
+          <p className={cn("text-[#030303] font-bold leading-normal", fontCls)}>图标</p>
           <div className="relative" style={{ zIndex: 10 }}>
             <button
               onClick={() => setIsDropdownOpen(!isDropdownOpen)}

package/src/components/legacy-slot.tsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { LegacySlotRenderer } from '../types';
+import { syncHostStylesIntoShadow } from '@baishuyun/ai-feat-utils';
+import { useInjectedShadowStyle } from '../hooks/use-shadow-boundary';
 
 export interface LegacySlotProps {
   renderLegacy: LegacySlotRenderer;
@@ -10,8 +12,6 @@ export interface LegacySlotProps {
   onSetRef?: (ref: HTMLDivElement) => void;
 }
 
-const STYLE_INJECTED_ATTR = 'data-style-injected';
-
 const injectStylesIntoShadow = (currentElement: Node) => {
   if (!currentElement) return;
 
@@ -31,20 +31,8 @@ const injectStylesIntoShadow = (currentElement: Node) => {
   }
 
   if (!shadowRoot) return;
-  if (shadowRoot.querySelector(`style[${STYLE_INJECTED_ATTR}]`)) return;
-
-  document.head.querySelectorAll('style').forEach((styleEl) => {
-    const cloned = styleEl.cloneNode(true) as HTMLElement;
-    cloned.setAttribute(STYLE_INJECTED_ATTR, '');
-    shadowRoot!.appendChild(cloned);
-  });
-
   // if style is loaded by link tag, we also need to copy it into shadow DOM
-  document.head.querySelectorAll('link[rel="stylesheet"]').forEach((linkEl) => {
-    const cloned = linkEl.cloneNode(true) as HTMLElement;
-    cloned.setAttribute(STYLE_INJECTED_ATTR, '');
-    shadowRoot!.appendChild(cloned);
-  });
+  return syncHostStylesIntoShadow(shadowRoot, shadowRoot.host as HTMLElement);
 };
 
 export function LegacySlot({
@@ -66,13 +54,14 @@ export function LegacySlot({
     const host = hostRef.current;
     onSetRef?.(host);
     let target: HTMLElement | ShadowRoot = host;
+    let disposeStyles: (() => void) | undefined;
 
     if (shadow) {
       const shadowRoot = host.shadowRoot || host.attachShadow({ mode: 'open' });
       target = shadowRoot;
 
       if (withHostStyles) {
-        injectStylesIntoShadow(host);
+        host.setAttribute('data-bs-style-mode', 'host');
       }
       if (typeof injectedStyles === 'string') {
         const styleEl = document.createElement('style');
@@ -86,12 +75,16 @@ export function LegacySlot({
 
     const mountPoint = document.createElement('div');
     mountPoint.style.display = 'contents';
+    mountPoint.setAttribute('data-bs-shadow-content', '');
     target.appendChild(mountPoint);
     mountPointRef.current = mountPoint;
+    if (shadow && withHostStyles) disposeStyles = injectStylesIntoShadow(host);
 
     cleanupRef.current = renderLegacy(mountPoint, props as Record<string, any>);
 
     return () => {
+      disposeStyles?.();
+      host.shadowRoot?.querySelector('style[data-legacy-injected-raw]')?.remove();
       cleanupRef.current?.();
       if (mountPointRef.current) {
         mountPointRef.current.remove();
@@ -101,6 +94,8 @@ export function LegacySlot({
     };
   }, []);
 
+  useInjectedShadowStyle(hostRef, injectedStyles, 'data-legacy-injected-raw');
+
   useEffect(() => {
     if (!mountPointRef.current) return;
     cleanupRef.current = renderLegacy(mountPointRef.current, props as Record<string, any>);