@baishuyun/ai-design 2.0.47 → 2.0.48

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @baishuyun/ai-design
 
+## 2.0.48
+
+### Patch Changes
+
+- fix style and other bugs
+- Updated dependencies
+  - @baishuyun/ai-feat-utils@2.0.43
+  - @baishuyun/types@3.0.40
+
 ## 2.0.47
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baishuyun/ai-design",
-  "version": "2.0.47",
+  "version": "2.0.48",
   "description": "AI 功能 UI 组件库 - 所有 AI 功能的 UI 表现唯一真相来源",
   "type": "module",
   "main": "src/index.ts",
@@ -60,8 +60,8 @@
     "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
     "zod": "^4.1.13",
-    "@baishuyun/ai-feat-utils": "2.0.42",
-    "@baishuyun/types": "3.0.39"
+    "@baishuyun/ai-feat-utils": "2.0.43",
+    "@baishuyun/types": "3.0.40"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -84,7 +84,7 @@
     "vite": "^5.1.4",
     "vite-plugin-dts": "^4.5.4",
     "@baishuyun/tailwind-config": "3.0.9",
-    "@baishuyun/types": "3.0.39",
+    "@baishuyun/types": "3.0.40",
     "@baishuyun/typescript-config": "2.0.9"
   },
   "keywords": [],

package/src/components/agent-helper/agent-helper-card/index.tsx

@@ -118,11 +118,11 @@ export const AgentHelperCard = ({
       )}
     >
       {/* Header */}
-      <div className="grid-rows-[max-content] inline-grid leading-[0] place-items-start shrink-0 w-full">
+      <div className="grid-cols-1 grid-rows-[max-content] inline-grid leading-[0] place-items-start shrink-0 w-full">
         <div className="col-1 content-stretch flex h-[42px] items-center justify-between ml-0 mt-0 px-[12px] row-1 w-full">
-          <div className="content-stretch flex gap-[6px] items-center shrink-0 min-w-0">
+          <div className="content-stretch flex gap-[6px] items-center min-w-0">
             <TriggerTypeIcon triggerType={helper.triggerType} size={18} />
-            <p className="leading-[normal] shrink-0 text-[#030303] text-[14px] truncate">
+            <p className="leading-[normal] text-[#030303] text-[14px] truncate">
               {helper.helperName}
             </p>
           </div>

package/src/components/agent-helper/app-select/index.tsx

@@ -440,9 +440,9 @@ export const AppSelect = ({
   const hasMultiSelection = mode === 'multiple' && multiSelectedLabels.length > 0;
 
   const popoverContent = (
-    <div className={classNames('flex flex-col gap-[4px]', contentCls)}>
+    <div className={classNames('flex min-h-0 flex-col gap-[4px]', contentCls)}>
       {/* Search */}
-      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+      <div className="flex shrink-0 items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
         <SearchIcon />
         <input
           type="text"
@@ -462,7 +462,7 @@ export const AppSelect = ({
             setOpen(false);
           }}
           className={cn(
-            'flex items-center w-full h-[34px] rounded-[4px] text-left',
+            'flex shrink-0 items-center w-full h-[34px] rounded-[4px] text-left',
             'px-[10px]',
             transCls,
             'text-[#030303] hover:bg-[#EFF0F6]'
@@ -481,7 +481,7 @@ export const AppSelect = ({
             setOpen(false);
           }}
           className={cn(
-            'flex items-center w-full h-[34px] rounded-[4px] text-left',
+            'flex shrink-0 items-center w-full h-[34px] rounded-[4px] text-left',
             'px-[10px]',
             transCls,
             selectedIds.has(ALL_APPS_VALUE)
@@ -494,7 +494,7 @@ export const AppSelect = ({
       )}
 
       {/* Tree */}
-      <div className={classNames('overflow-y-auto', maxTreeHeightCls)}>
+      <div className={classNames('min-h-0 overflow-y-auto', maxTreeHeightCls)}>
         {filteredNodes.length > 0 ? (
           filteredNodes.map((node) => renderNodeRow(node, 0))
         ) : (
@@ -583,8 +583,8 @@ export const AppSelect = ({
           align="start"
           sideOffset={4}
           portalContainer={portalContainer}
-          className="!border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]"
-          style={{ minWidth: triggerWidth || undefined }}
+          className="flex flex-col overflow-hidden !border-0 rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]"
+          style={{ minWidth: triggerWidth || undefined, maxHeight: 300 }}
         >
           {popoverContent}
         </PopoverContent>

package/src/components/agent-helper/form-select/index.tsx

@@ -13,6 +13,8 @@ import { transCls } from '../../../const/ui';
 import { SolidArrowDownIcon, SearchIcon } from '../../bs-icons';
 import { useSelectPopoverPosition } from '../../../hooks/use-select-popover-position';
 
+const POPOVER_MAX_HEIGHT = 300;
+
 const FolderIcon = () => (
   <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
     <path d="M13.9004 15H2.65039C2.25257 15 1.87104 14.842 1.58973 14.5607C1.30843 14.2794 1.15039 13.8978 1.15039 13.5V4.5C1.15039 4.10218 1.30843 3.72064 1.58973 3.43934C1.87104 3.15804 2.25257 3 2.65039 3H7.15039L8.65039 4.5H13.9004C14.0974 4.5 14.2924 4.5388 14.4744 4.61418C14.6564 4.68956 14.8218 4.80005 14.9611 4.93934C15.1003 5.07863 15.2108 5.24399 15.2862 5.42597C15.3616 5.60796 15.4004 5.80302 15.4004 6H2.65039V13.5L4.25539 7.5H16.0754C16.1927 7.49595 16.3093 7.51947 16.4158 7.56867C16.5223 7.61788 16.6158 7.69139 16.6888 7.78331C16.7617 7.87523 16.8121 7.98298 16.8358 8.0979C16.8595 8.21282 16.856 8.33171 16.8254 8.445L15.3704 13.875C15.2865 14.1999 15.0961 14.4873 14.8296 14.6913C14.5631 14.8952 14.2359 15.0039 13.9004 15Z" fill="#6F81BD"/>
@@ -307,11 +309,12 @@ function FormPopover({
     <div
       className={cn(
         'bg-white rounded-[10px] shadow-[0px_0px_5px_rgba(0,0,0,0.04)] p-[4px]',
-        'flex flex-col gap-[4px]',
+        'flex min-h-0 flex-col gap-[4px] overflow-hidden',
       )}
+      style={{ maxHeight: POPOVER_MAX_HEIGHT }}
     >
       {/* Search input */}
-      <div className="flex items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
+      <div className="flex shrink-0 items-center gap-[6px] border border-[#E0E0E0] rounded-[4px] h-[30px] px-[10px] py-[5px]">
         <SearchIcon />
         <input
           type="text"
@@ -337,7 +340,7 @@ function FormPopover({
       )}
 
       {/* Form list */}
-      <div className="flex flex-col gap-0 max-h-[400px] overflow-y-auto">
+      <div className="flex min-h-0 flex-col gap-0 overflow-y-auto">
         {tree.length > 0 ? (
           tree.map((node) => (
             <FormTreeItemNode
@@ -391,7 +394,7 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
     const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
 
     const { popoverStyle, updatePopoverPosition } =
-      useSelectPopoverPosition(triggerRef);
+      useSelectPopoverPosition(triggerRef, { estimatedHeight: POPOVER_MAX_HEIGHT });
 
     const resolvedValue = controlledValue ?? internalValue;
 
@@ -709,7 +712,7 @@ export const FormSelect = forwardRef<HTMLDivElement, FormSelectProps>(
         {/* Popover */}
         {isOpen &&
           createPortal(
-            <div ref={popoverRef} style={popoverStyle}>
+            <div ref={popoverRef} className="flex flex-col" style={popoverStyle}>
               <FormPopover
                 searchQuery={searchQuery}
                 onSearchChange={setSearchQuery}

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/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>);

package/src/components/output-config-editor.tsx

@@ -210,6 +210,10 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
     (f) => (matchSearch(f.fieldDesc) || matchSearch(f.fieldName)) && f.type !== 'subform'
   );
 
+  const usedSourceFieldNames = new Set(
+    value.map(item => item.sourceField.fieldName).filter(Boolean)
+  );
+
   const searchedTargetFields = filterFields(targetOptions);
 
   const fieldRowCls = cn(
@@ -254,6 +258,9 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
         const selectedSourceType = item.sourceField.fieldName
           ? flatSourceFields.find(f => f.fieldName === item.sourceField.fieldName)?.type
           : undefined;
+        const rowSourceFields = filteredSourceFields.filter(
+          f => !usedSourceFieldNames.has(f.fieldName) || f.fieldName === item.sourceField.fieldName
+        );
         const rowTargetFields = selectedSourceType
           ? filterFieldsByType(searchedTargetFields, selectedSourceType)
           : searchedTargetFields;
@@ -304,7 +311,7 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
                 />
               </div>
               <div className="max-h-[210px] overflow-auto">
-                {filteredSourceFields.map((field) => (
+                {rowSourceFields.map((field) => (
                   <button
                     key={field.fieldName}
                     type="button"
@@ -320,7 +327,7 @@ export function OutputConfigEditor({ value, onChange, sourceFields, targetFields
                     <span className="truncate">{field.fieldDesc}</span>
                   </button>
                 ))}
-                {filteredSourceFields.length === 0 && (
+                {rowSourceFields.length === 0 && (
                   <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
                     无匹配结果
                   </div>

package/src/components/shadow-content.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { createPortal } from 'react-dom';
+import { useShadowBoundary } from '../hooks/use-shadow-boundary';
+import type { ShadowStyle, ShadowStyleMode } from '../hooks/use-shadow-boundary';
+
+export interface ShadowContentProps {
+  children: ReactNode;
+  mode?: ShadowStyleMode;
+  styles?: ShadowStyle;
+}
+
+export const ShadowContent = ({ children, mode = 'sdk', styles }: ShadowContentProps) => {
+  const { setHostRef, container } = useShadowBoundary(mode, styles);
+  return (
+    <div ref={setHostRef} data-bs-style-mode={mode} style={{ display: 'contents' }}>
+      {container && createPortal(children, container)}
+    </div>
+  );
+};

package/src/components/shadow-portal.tsx

@@ -0,0 +1,23 @@
+import { useLayoutEffect, type ElementType, type ReactNode } from 'react';
+import { usePortalContainer } from '../hooks/use-portal-container';
+
+export const ShadowPortal = ({ component: Portal, container, ...props }: {
+  component: ElementType;
+  container?: Element | DocumentFragment | null;
+  children?: ReactNode;
+  forceMount?: true;
+  'data-slot'?: string;
+}) => {
+  const { portalContainer, setTriggerRef, portalReady } = usePortalContainer('data-bs-portal-container');
+  useLayoutEffect(() => {
+    if (container instanceof Element && container.parentNode instanceof ShadowRoot) {
+      container.setAttribute('data-bs-portal-container', '');
+    }
+  }, [container]);
+  return (
+    <>
+      <span ref={setTriggerRef} style={{ display: 'none' }} aria-hidden />
+      {portalReady && <Portal {...props} container={container === undefined ? portalContainer ?? undefined : container} />}
+    </>
+  );
+};

package/src/components/ui/dialog.tsx

@@ -2,12 +2,15 @@ import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
 import { cn } from '../../lib/utils';
+import { ShadowPortal } from '../shadow-portal';
 
 const Dialog = DialogPrimitive.Root;
 
 const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal;
+const DialogPortal = (props: React.ComponentProps<typeof DialogPrimitive.Portal>) => (
+  <ShadowPortal component={DialogPrimitive.Portal} {...props} />
+);
 
 const DialogClose = DialogPrimitive.Close;
 

package/src/components/ui/drawer.tsx

@@ -4,6 +4,7 @@ import { Drawer as DrawerPrimitive } from "vaul"
 import { cn } from "../../lib/utils"
 import { IconBtn } from "../icon-btn"
 import { CloseIcon } from "../bs-icons"
+import { ShadowPortal } from '../shadow-portal';
 
 function Drawer({
   ...props
@@ -24,7 +25,8 @@ function DrawerPortal({
   container?: HTMLElement | null;
 }) {
   return (
-    <DrawerPrimitive.Portal
+    <ShadowPortal
+      component={DrawerPrimitive.Portal}
       data-slot="drawer-portal"
       container={container ?? undefined}
       {...props}

package/src/components/ui/popover.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 
 import { cn } from '../../lib/utils';
+import { ShadowPortal } from '../shadow-portal';
 
 const Popover = PopoverPrimitive.Root;
 
@@ -52,7 +53,7 @@ const PopoverContent = React.forwardRef<
     });
 
     return (
-      <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
+      <ShadowPortal component={PopoverPrimitive.Portal} container={portalContainer ?? undefined}>
         <PopoverPrimitive.Content
           ref={ref}
           align={align}
@@ -76,7 +77,7 @@ const PopoverContent = React.forwardRef<
           }}
           {...props}
         />
-      </PopoverPrimitive.Portal>
+      </ShadowPortal>
     );
   }
 );

package/src/components/ui/select.tsx

@@ -3,6 +3,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 
 import { cn } from '../../lib/utils';
+import { ShadowPortal } from '../shadow-portal';
 
 const Select = SelectPrimitive.Root;
 
@@ -112,7 +113,7 @@ const SelectContent = React.forwardRef<
         {containerProp === undefined && (
           <span ref={setDetectorRef} style={{ display: 'none' }} aria-hidden />
         )}
-        <SelectPrimitive.Portal container={effectiveContainer ?? undefined}>
+        <ShadowPortal component={SelectPrimitive.Portal} container={effectiveContainer ?? undefined}>
           <SelectPrimitive.Content
             ref={ref}
             className={cn(
@@ -161,7 +162,7 @@ const SelectContent = React.forwardRef<
             </SelectPrimitive.Viewport>
             <SelectScrollDownButton />
           </SelectPrimitive.Content>
-        </SelectPrimitive.Portal>
+        </ShadowPortal>
       </>
     );
   }

package/src/components/ui/tooltip.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 
 import { cn } from '../../lib/utils';
+import { ShadowPortal } from '../shadow-portal';
 
 const TooltipZIndexContext = React.createContext<number | undefined>(undefined);
 
@@ -30,7 +31,7 @@ const TooltipContent = React.forwardRef<
   const zIndexFromProvider = React.useContext(TooltipZIndexContext);
 
   return (
-    <TooltipPrimitive.Portal container={portalContainer ?? undefined}>
+    <ShadowPortal component={TooltipPrimitive.Portal} container={portalContainer ?? undefined}>
       <TooltipPrimitive.Content
         ref={ref}
         sideOffset={sideOffset}
@@ -44,7 +45,7 @@ const TooltipContent = React.forwardRef<
         {props.children}
         <TooltipPrimitive.Arrow className="fill-[#525867] stroke-[#525867] stroke-[2px] stroke-linejoin-round [paint-order:stroke_fill]" />
       </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
+    </ShadowPortal>
   );
 });
 

package/src/const/shadow.ts

@@ -0,0 +1,12 @@
+export const scopeSdkStyles = (css: string) => css.replace(/:host(?![-(])/g, ':is(:host, :host > div, [data-bs-shadow-content], [data-bs-portal-container])');
+
+export const SDK_SHADOW_BASELINE = `
+:host, :host > div {
+  font: 14px/1.5 ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  color: #121111;
+  letter-spacing: normal;
+  text-align: start;
+  text-transform: none;
+  color-scheme: light;
+}
+`;

package/src/hooks/use-portal-container.ts

@@ -2,7 +2,9 @@ import { useCallback, useState } from 'react';
 
 export const usePortalContainer = (portalName: string) => {
   const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
+  const [portalReady, setPortalReady] = useState(false);
   const setTriggerRef = useCallback((node: HTMLElement | null) => {
+    setPortalReady(!!node);
     if (!node) {
       setPortalContainer(null);
       return;
@@ -14,14 +16,15 @@ export const usePortalContainer = (portalName: string) => {
         setPortalContainer(existing);
         return;
       }
-      const container = document.createElement('div');
+      const container = node.ownerDocument.createElement('div');
       container.setAttribute(portalName, 'true');
+      container.setAttribute('data-bs-portal-container', '');
       rootNode.appendChild(container);
       setPortalContainer(container);
     } else {
       setPortalContainer(null);
     }
-  }, []);
+  }, [portalName]);
 
-  return { portalContainer, setTriggerRef };
+  return { portalContainer, setTriggerRef, portalReady };
 };

package/src/hooks/use-shadow-boundary.ts

@@ -0,0 +1,64 @@
+import { useEffect, useLayoutEffect, useState, type RefObject } from 'react';
+import { syncHostStylesIntoShadow } from '@baishuyun/ai-feat-utils';
+import { SDK_SHADOW_BASELINE, scopeSdkStyles } from '../const/shadow';
+
+export type ShadowStyleMode = 'sdk' | 'host';
+export type ShadowStyle = string | (() => string);
+
+export const useShadowBoundary = (mode: ShadowStyleMode, styles?: ShadowStyle) => {
+  const [host, setHostRef] = useState<HTMLDivElement | null>(null);
+  const [boundary, setBoundary] = useState<{
+    root: ShadowRoot;
+    container: HTMLDivElement;
+    style: HTMLStyleElement;
+  } | null>(null);
+
+  useLayoutEffect(() => {
+    if (!host) return;
+    const root = host.shadowRoot || host.attachShadow({ mode: 'open' });
+    const style = host.ownerDocument.createElement('style');
+    const container = host.ownerDocument.createElement('div');
+    container.setAttribute('data-bs-shadow-content', '');
+    container.style.display = 'contents';
+    root.append(style, container);
+    setBoundary({ root, container, style });
+    return () => {
+      style.remove();
+      container.remove();
+      setBoundary(null);
+    };
+  }, [host]);
+
+  useLayoutEffect(() => {
+    if (!boundary || !host) return;
+    host.setAttribute('data-bs-style-mode', mode);
+    if (mode === 'sdk') boundary.container.className = '';
+    return mode === 'host' ? syncHostStylesIntoShadow(boundary.root, host) : undefined;
+  }, [boundary, host, mode]);
+
+  useLayoutEffect(() => {
+    if (!boundary) return;
+    boundary.style.toggleAttribute('data-bs-sdk-styles', mode === 'sdk');
+    boundary.style.toggleAttribute('data-bs-custom-styles', mode === 'host');
+    const css = typeof styles === 'function' ? styles() : styles || '';
+    boundary.style.textContent = mode === 'sdk' ? SDK_SHADOW_BASELINE + scopeSdkStyles(css) : css;
+  }, [boundary, mode, styles]);
+
+  return { setHostRef, container: boundary?.container ?? null };
+};
+
+export const useInjectedShadowStyle = (host: RefObject<HTMLElement | null>, css: string | undefined, attribute: string) => {
+  useEffect(() => {
+    const root = host.current?.shadowRoot;
+    if (!root) return;
+    let style = root.querySelector<HTMLStyleElement>(`style[${attribute}]`);
+    if (!css) { style?.remove(); return; }
+    if (!style) {
+      style = root.ownerDocument.createElement('style');
+      style.setAttribute(attribute, '');
+      root.appendChild(style);
+    }
+    style.textContent = css;
+    return () => style?.remove();
+  }, [host, css, attribute]);
+};

package/src/hooks/use-shadow.ts

@@ -1,4 +1,6 @@
 import { useState, useEffect, useRef } from 'react';
+import { SDK_SHADOW_BASELINE, scopeSdkStyles } from '../const/shadow';
+import sdkStyles from '../style.css?inline';
 
 interface UseShadowOptions {
   /** Shadow DOM挂载的根元素（默认挂到body） */
@@ -15,6 +17,7 @@ interface UseShadowOptions {
   extraHtml?: string;
 
   id: string;
+  enabled?: boolean;
 }
 
 /**
@@ -24,6 +27,7 @@ interface UseShadowOptions {
  */
 export const useShadow = ({
   id,
+  enabled = true,
   style = '',
   rootEl,
   containerClasses = [],
@@ -57,10 +61,13 @@ export const useShadow = ({
       wrapperRef.current = null;
     }
 
+    if (!enabled) return;
+
     try {
       // 1. 创建外层包裹元素（挂载Shadow Root的载体）
       const wrapperEl = document.createElement('div');
-      wrapperEl.classList.add(...wrapperClasses, 'wrapper');
+      wrapperEl.classList.add(...wrapperClasses, 'bs-sdk-shadow-wrapper');
+      wrapperEl.setAttribute('data-bs-style-mode', 'sdk');
       // wrapperEl.style.height = '100%';
       wrapperRef.current = wrapperEl;
 
@@ -81,15 +88,15 @@ export const useShadow = ({
       }
 
       // 3. 注入样式到Shadow DOM
-      if (style) {
-        const styleEl = document.createElement('style');
-        styleEl.textContent = style;
-        shadowRoot.appendChild(styleEl);
-      }
+      const styleEl = document.createElement('style');
+      styleEl.setAttribute('data-bs-sdk-styles', '');
+      styleEl.textContent = SDK_SHADOW_BASELINE + scopeSdkStyles(sdkStyles + style);
+      shadowRoot.appendChild(styleEl);
 
       // 4. 创建Shadow内部的容器（最终挂载React Portal的元素）
       const containerEl = document.createElement('div');
       containerEl.classList.add(...containerClasses, 'shadow-container');
+      containerEl.setAttribute('data-bs-shadow-content', '');
       shadowRoot.appendChild(containerEl);
 
       // 5. 将外层元素挂载到指定根节点
@@ -109,7 +116,17 @@ export const useShadow = ({
     //     wrapperRef.current = null;
     //   }
     // };
-  }, [rootEl]); // Recreate when rootEl changes
+    return () => {
+      wrapperRef.current?.remove();
+      wrapperRef.current = null;
+      setShadowContainer(null);
+    };
+  }, [rootEl, enabled]); // Recreate when rootEl changes
+
+  useEffect(() => {
+    const styleEl = wrapperRef.current?.shadowRoot?.querySelector('style[data-bs-sdk-styles]');
+    if (styleEl) styleEl.textContent = SDK_SHADOW_BASELINE + scopeSdkStyles(sdkStyles + style);
+  }, [style, shadowContainer]);
 
   if (shadowContainer) {
     shadowContainer.id = id;

package/src/index.ts

@@ -3,6 +3,8 @@ export { cn, copyTextToClipboard, toHumanReadable, isSubformFieldEqual } from '.
 
 // Hooks
 export { useShadow } from './hooks/use-shadow';
+export { ShadowContent } from './components/shadow-content';
+export type { ShadowContentProps } from './components/shadow-content';
 
 // Constants
 export {

package/src/stories/AppSelect.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { AppSelect, groupsToAppTreeNodes } from '../components/agent-helper/app-select';
 import type { AppTreeNode } from '../components/agent-helper/app-select';
 import type { IAppGroup } from '@baishuyun/types';
@@ -125,6 +126,49 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
+export const ConstrainedHeight: Story = {
+  args: { allowEmpty: true, showAll: true },
+  play: async ({ canvasElement }) => {
+    await userEvent.click(within(canvasElement).getByRole('button'));
+    const popover = await within(canvasElement.ownerDocument.body).findByRole('dialog');
+    await userEvent.clear(within(popover).getByRole('textbox'));
+    const content = popover.firstElementChild as HTMLElement;
+    const tree = content.lastElementChild as HTMLElement;
+    await waitFor(() => {
+      expect(popover.getBoundingClientRect().height).toBeLessThanOrEqual(parseFloat(getComputedStyle(popover).maxHeight));
+      expect(content.getBoundingClientRect().bottom).toBeLessThanOrEqual(popover.getBoundingClientRect().bottom);
+      expect(popover.scrollHeight).toBeLessThanOrEqual(popover.clientHeight);
+      expect(tree.scrollHeight).toBeGreaterThan(tree.clientHeight);
+      expect(content.firstElementChild!.getBoundingClientRect().height).toBe(30);
+      expect(within(popover).getByRole('button', { name: '无' }).getBoundingClientRect().height).toBe(34);
+      expect(within(popover).getByRole('button', { name: '全部应用' }).getBoundingClientRect().height).toBe(34);
+    });
+    tree.scrollTop = tree.scrollHeight;
+    expect(tree.scrollTop).toBeGreaterThan(0);
+    await userEvent.type(within(popover).getByRole('textbox'), 'API接口管理');
+    await userEvent.click(within(popover).getByRole('button', { name: 'API接口管理' }));
+    expect(within(canvasElement).getByRole('button')).toHaveTextContent('API接口管理');
+  },
+};
+
+export const EmbeddedConstrainedHeight: Story = {
+  args: { popoverContentOnly: true, disableMaxHeight: true, showAll: true, contentCls: 'h-full' },
+  render: (args) => <div style={{ height: 200 }}><AppSelect {...args} /></div>,
+  play: async ({ canvasElement }) => {
+    const content = within(canvasElement).getByRole('textbox').parentElement!.parentElement!;
+    const tree = content.lastElementChild as HTMLElement;
+    await waitFor(() => {
+      expect(content.getBoundingClientRect().height).toBe(200);
+      expect(tree.getBoundingClientRect().bottom).toBeLessThanOrEqual(content.getBoundingClientRect().bottom);
+      expect(tree.scrollHeight).toBeGreaterThan(tree.clientHeight);
+      expect(within(content).getByRole('button', { name: '全部应用' }).getBoundingClientRect().height).toBe(34);
+    });
+    expect(content.firstElementChild!.getBoundingClientRect().height).toBe(30);
+    tree.scrollTop = tree.scrollHeight;
+    expect(tree.scrollTop).toBeGreaterThan(0);
+  },
+};
+
 export const SingleSelected: Story = {
   args: { defaultValue: 'app2' },
 };

package/src/stories/FormSelect.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, waitFor, within } from 'storybook/test';
 import { FormSelect } from '../components/agent-helper/form-select';
 import type { FormSelectItem, FormSelectChangeResult } from '../components/agent-helper/form-select';
 
@@ -91,6 +92,45 @@ export const ManyItems: Story = {
   },
 };
 
+export const ConstrainedHeight: Story = {
+  args: { items: manyFormItems, allowEmpty: true },
+  play: async ({ canvasElement, args }) => {
+    if (!args.popoverOnly) {
+      await userEvent.click(within(canvasElement).getByText(/^(无|测试表单 30)$/));
+    }
+    const search = await within(canvasElement.ownerDocument.body).findByRole('textbox');
+    await userEvent.clear(search);
+    const content = search.parentElement!.parentElement!;
+    const list = content.lastElementChild as HTMLElement;
+    await waitFor(() => {
+      expect(content.getBoundingClientRect().height).toBeLessThanOrEqual(300);
+      expect(content.scrollHeight).toBeLessThanOrEqual(content.clientHeight);
+      expect(search.parentElement!.getBoundingClientRect().height).toBe(30);
+      expect(within(content).getByText('无').parentElement!.getBoundingClientRect().height).toBe(34);
+      expect(list.scrollHeight).toBeGreaterThan(list.clientHeight);
+      if (!args.popoverOnly) {
+        const portal = content.parentElement!;
+        expect(parseFloat(getComputedStyle(portal).maxHeight)).toBeLessThanOrEqual(300);
+        expect(content.getBoundingClientRect().bottom).toBeLessThanOrEqual(portal.getBoundingClientRect().bottom);
+      }
+    });
+    const searchTop = search.getBoundingClientRect().top;
+    list.scrollTop = list.scrollHeight;
+    expect(list.scrollTop).toBeGreaterThan(0);
+    expect(search.getBoundingClientRect().top).toBe(searchTop);
+    await userEvent.type(search, '测试表单 30');
+    await userEvent.click(within(content).getByText('测试表单 30'));
+    if (!args.popoverOnly) {
+      expect(within(canvasElement).getByText('测试表单 30')).toBeVisible();
+    }
+  },
+};
+
+export const PopoverOnlyConstrainedHeight: Story = {
+  ...ConstrainedHeight,
+  args: { ...ConstrainedHeight.args, popoverOnly: true },
+};
+
 export const Empty: Story = {
   args: {
     items: [],

package/src/style.css

@@ -82,7 +82,34 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  --radius: 0.625rem;
+  --spacing: 3.5px;
+  --radius: 8.75px;
+  --text-xs: 10.5px;
+  --text-xs--line-height: 14px;
+  --text-sm: 12.25px;
+  --text-sm--line-height: 17.5px;
+  --text-base: 14px;
+  --text-base--line-height: 21px;
+  --text-lg: 15.75px;
+  --text-lg--line-height: 24.5px;
+  --text-xl: 17.5px;
+  --text-xl--line-height: 24.5px;
+  --text-2xl: 21px;
+  --text-2xl--line-height: 28px;
+  --text-3xl: 26.25px;
+  --text-3xl--line-height: 31.5px;
+  --text-4xl: 31.5px;
+  --text-4xl--line-height: 35px;
+  --text-5xl: 42px;
+  --text-5xl--line-height: 1;
+  --text-6xl: 52.5px;
+  --text-6xl--line-height: 1;
+  --text-7xl: 63px;
+  --text-7xl--line-height: 1;
+  --text-8xl: 84px;
+  --text-8xl--line-height: 1;
+  --text-9xl: 112px;
+  --text-9xl--line-height: 1;
   --background: oklch(1 0 0);
   --foreground: oklch(0.129 0.042 264.695);
   --card: oklch(1 0 0);

package/style.css

@@ -812,6 +812,9 @@
   .max-h-\[600px\] {
     max-height: 600px;
   }
+  .max-h-full {
+    max-height: 100%;
+  }
   .min-h-0 {
     min-height: 0px;
   }
@@ -1149,6 +1152,9 @@
   .\[appearance\:textfield\] {
     appearance: textfield;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .grid-cols-3 {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }