v0.12.87: fix ContextMenu, Terminal bugs; add dynamic items support

ContextMenu:
- Remove inline-block wrapper div, use cloneElement instead (fixes layout breaking on flex/block triggers)
- Divider uses <hr> instead of DaisyUI divider class (excessive padding)
- items prop now accepts a function (e) => ContextMenuItem[] for dynamic menus
- Add DynamicItems demo to docs

Terminal:
- Cursor defaults to foreground color instead of primary (purple)
- User options.theme is now deep-merged with auto-generated theme instead of replacing it

Icons:
- Fix unused props destructuring in createIcon (TS error)

Build:
- Replace sed with cross-platform tsx script in sync-icons-prefixed
- Sync prefixed packages

Author: edadma

package.json

@@ -14,6 +14,6 @@
     "publish:icons-prefixed": "pnpm --filter @aster-ui/icons-prefixed publish --access public",
     "publish:prefixed": "pnpm --filter @aster-ui/prefixed publish --access public",
     "sync-prefixed": "rm -rf packages/prefixed/src && cp -r packages/asterui/src packages/prefixed/ && npx tsx scripts/daisyui-prefix.ts --prefix d- --dir packages/prefixed/src && jq --arg v $(jq -r .version packages/asterui/package.json) '.version = $v' packages/prefixed/package.json > tmp.json && mv tmp.json packages/prefixed/package.json && pnpm --filter @aster-ui/prefixed build",
-    "sync-icons-prefixed": "rm -rf packages/icons-prefixed/src packages/icons-prefixed/scripts && cp -r packages/icons/src packages/icons/scripts packages/icons-prefixed/ && sed -i \"s/'asterui'/'@aster-ui\\/prefixed'/g\" packages/icons-prefixed/src/context.tsx packages/icons-prefixed/scripts/generate.ts && jq --arg v $(jq -r .version packages/icons/package.json) '.version = $v' packages/icons-prefixed/package.json > tmp.json && mv tmp.json packages/icons-prefixed/package.json"
+    "sync-icons-prefixed": "rm -rf packages/icons-prefixed/src packages/icons-prefixed/scripts && cp -r packages/icons/src packages/icons/scripts packages/icons-prefixed/ && npx tsx scripts/replace-in-files.ts \"'asterui'\" \"'@aster-ui/prefixed'\" packages/icons-prefixed/src/context.tsx packages/icons-prefixed/scripts/generate.ts && jq --arg v $(jq -r .version packages/icons/package.json) '.version = $v' packages/icons-prefixed/package.json > tmp.json && mv tmp.json packages/icons-prefixed/package.json"
   }
 }

packages/asterui/CHANGELOG.md

@@ -7,6 +7,19 @@ description: All notable changes to AsterUI
 
 All notable changes to AsterUI are documented here.
 
+## v0.12.87 (2026-03-21)
+
+### Bug Fixes
+
+- **ContextMenu**: Removed `inline-block` wrapper div that broke flex/block layout on trigger elements. Now uses `cloneElement` to attach the context menu handler directly to the trigger child.
+- **ContextMenu**: Divider now uses `<hr>` instead of DaisyUI `divider` class which had excessive padding.
+- **Terminal**: Cursor color now defaults to foreground (`base-content`) instead of primary color.
+- **Terminal**: User `options.theme` is now deep-merged with the auto-generated theme instead of replacing it, allowing individual color overrides without losing other theme colors.
+
+### Features
+
+- **ContextMenu**: `items` prop now accepts a function `(e: React.MouseEvent) => ContextMenuItem[]` for dynamic menu items based on the click event.
+
 ## v0.12.86 (2026-02-28)
 
 ### Bug Fixes

packages/asterui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asterui",
-  "version": "0.12.86",
+  "version": "0.12.87",
   "description": "React UI component library with DaisyUI",
   "homepage": "https://asterui.com",
   "repository": {

packages/asterui/src/components/ContextMenu.tsx

@@ -4,23 +4,23 @@ import { useConfig } from '../providers/ConfigProvider'
 
 // DaisyUI classes
 const dMenu = 'menu'
-const dDivider = 'divider'
 
 export interface ContextMenuItem {
   key: string
-  label: React.ReactNode
+  label?: React.ReactNode
   icon?: React.ReactNode
   disabled?: boolean
   danger?: boolean
   divider?: boolean
   children?: ContextMenuItem[]
+  'data-testid'?: string
 }
 
 export interface ContextMenuProps {
-  /** Element that triggers the context menu on right-click */
+  /** Element that triggers the context menu on right-click (first child) */
   children: React.ReactNode
-  /** Menu items (data-driven pattern) */
-  items?: ContextMenuItem[]
+  /** Menu items (data-driven pattern). Can be a static array or a function that receives the mouse event for dynamic items. */
+  items?: ContextMenuItem[] | ((e: React.MouseEvent) => ContextMenuItem[])
   /** Callback when an item is selected */
   onSelect?: (key: string) => void
   /** Whether the context menu is disabled */
@@ -130,7 +130,7 @@ const ContextMenuItemComponent: React.FC<ContextMenuItemProps> = ({
 }
 
 const ContextMenuDividerComponent: React.FC<ContextMenuDividerProps> = ({ className = '', 'data-testid': testId }) => {
-  return <li className={`${dDivider} my-1 ${className}`} role="separator" data-testid={testId}></li>
+  return <hr className={`border-base-300 my-1 ${className}`} role="separator" data-testid={testId} />
 }
 
 const ContextMenuSubMenuComponent: React.FC<ContextMenuSubMenuProps> = ({
@@ -139,13 +139,13 @@ const ContextMenuSubMenuComponent: React.FC<ContextMenuSubMenuProps> = ({
   disabled = false,
   children,
   className = '',
-  _key: _unusedKey,
+  _key,
   'data-testid': testId,
 }) => {
   const { getTestId } = useContextMenuContext()
   const [showSubmenu, setShowSubmenu] = useState(false)
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const submenuTestId = testId ?? (_unusedKey ? getTestId?.(`submenu-${_unusedKey}`) : undefined)
+  const submenuTestId = testId ?? (_key ? getTestId?.(`submenu-${_key}`) : undefined)
 
   const handleMouseEnter = () => {
     if (disabled) return
@@ -206,10 +206,10 @@ const MenuItem: React.FC<{
 }> = ({ item, onSelect, onClose, getTestId }) => {
   const [showSubmenu, setShowSubmenu] = useState(false)
   const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
-  const itemTestId = getTestId?.(`item-${item.key}`)
+  const itemTestId = item['data-testid'] ?? getTestId?.(`item-${item.key}`)
 
   if (item.divider) {
-    return <li className={`${dDivider} my-1`} role="separator" data-testid={getTestId?.(`separator-${item.key}`)}></li>
+    return <hr className="border-base-300 my-1" role="separator" data-testid={getTestId?.(`separator-${item.key}`)} />
   }
 
   const handleClick = () => {
@@ -289,24 +289,24 @@ const ContextMenuRoot: React.FC<ContextMenuProps> = ({
   const { getPopupContainer } = useConfig()
   const [visible, setVisible] = useState(false)
   const [position, setPosition] = useState<MenuPosition>({ x: 0, y: 0 })
+  const [resolvedItems, setResolvedItems] = useState<ContextMenuItem[] | undefined>(undefined)
   const menuRef = useRef<HTMLUListElement>(null)
-  const triggerRef = useRef<HTMLDivElement>(null)
 
   const handleContextMenu = useCallback(
     (e: React.MouseEvent) => {
       if (disabled) return
       e.preventDefault()
       e.stopPropagation()
 
-      // Calculate position, ensuring menu stays within viewport
-      let x = e.clientX
-      let y = e.clientY
-
-      // We'll adjust after render when we know menu dimensions
-      setPosition({ x, y })
+      setPosition({ x: e.clientX, y: e.clientY })
+      if (typeof items === 'function') {
+        setResolvedItems(items(e))
+      } else {
+        setResolvedItems(items)
+      }
       setVisible(true)
     },
-    [disabled]
+    [disabled, items]
   )
 
   const handleClose = useCallback(() => {
@@ -387,12 +387,11 @@ const ContextMenuRoot: React.FC<ContextMenuProps> = ({
     })
   }
 
-  // Determine if using data-driven or compound pattern
-  // Find menu content children (not the trigger element)
+  // Separate trigger (first child) from menu content children
   const childArray = React.Children.toArray(children)
-  const triggerChild = childArray[0]
+  const trigger = childArray[0]
   const menuChildren = cloneChildrenWithKeys(childArray.slice(1))
-  const useDataDriven = items && items.length > 0
+  const hasDataItems = resolvedItems && resolvedItems.length > 0
 
   const contextValue: ContextMenuContextValue = {
     onSelect: handleSelect,
@@ -401,16 +400,20 @@ const ContextMenuRoot: React.FC<ContextMenuProps> = ({
   }
   const getTestId = (suffix: string) => (testId ? `${testId}-${suffix}` : undefined)
 
+  // Attach onContextMenu directly to trigger via cloneElement — no wrapper div
+  const triggerWithHandler = React.isValidElement(trigger)
+    ? React.cloneElement(trigger as React.ReactElement<any>, {
+        onContextMenu: (e: React.MouseEvent) => {
+          const existing = (trigger as React.ReactElement<any>).props.onContextMenu
+          if (existing) existing(e)
+          handleContextMenu(e)
+        },
+      })
+    : trigger
+
   return (
     <>
-      <div
-        ref={triggerRef}
-        onContextMenu={handleContextMenu}
-        className="inline-block"
-        data-testid={testId}
-      >
-        {triggerChild}
-      </div>
+      {triggerWithHandler}
       {visible &&
         createPortal(
           <ContextMenuContext.Provider value={contextValue}>
@@ -422,8 +425,8 @@ const ContextMenuRoot: React.FC<ContextMenuProps> = ({
               aria-label="Context menu"
               data-testid={getTestId('menu')}
             >
-              {useDataDriven
-                ? items!.map((item) => (
+              {hasDataItems
+                ? resolvedItems.map((item) => (
                     <MenuItem key={item.key} item={item} onSelect={handleSelect} onClose={handleClose} getTestId={getTestId} />
                   ))
                 : menuChildren}

packages/asterui/src/components/Terminal.tsx

@@ -96,7 +96,7 @@ export const Terminal = forwardRef<TerminalRef, TerminalProps>(({
   const getTheme = () => ({
     background: colors.background,
     foreground: colors.foreground,
-    cursor: colors.primary,
+    cursor: colors.foreground,
     cursorAccent: colors.background,
     selectionBackground: colors.primary + '40',
     selectionForeground: colors.foreground,
@@ -276,13 +276,14 @@ export const Terminal = forwardRef<TerminalRef, TerminalProps>(({
 
       initialized = true
 
+      const { theme: userTheme, ...restOptions } = options
       terminal = new XTerm({
-        theme: getTheme(),
+        theme: { ...getTheme(), ...userTheme },
         cursorBlink: true,
         convertEol,
         fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
         fontSize: 14,
-        ...options,
+        ...restOptions,
       })
       fitAddon = new FitAddon()
 
@@ -335,7 +336,7 @@ export const Terminal = forwardRef<TerminalRef, TerminalProps>(({
   // Update theme when colors change
   useEffect(() => {
     if (!terminalRef.current) return
-    terminalRef.current.options.theme = getTheme()
+    terminalRef.current.options.theme = { ...getTheme(), ...options.theme }
   }, [isDark, colors]) // eslint-disable-line react-hooks/exhaustive-deps
 
   return (

packages/docs/public/docs/contextmenu.md

@@ -106,7 +106,7 @@ import { ContextMenu } from 'asterui'
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|
 | children | Trigger element (first child) and menu items (compound pattern) | `React.ReactNode` | - |
-| items | Menu items (data-driven pattern) | `ContextMenuItem[]` | - |
+| items | Menu items (static array or function for dynamic items) | `ContextMenuItem[] \| ((e: React.MouseEvent) => ContextMenuItem[])` | - |
 | onSelect | Selection callback | `(key: string) => void` | - |
 | disabled | Whether the context menu is disabled | `boolean` | `false` |
 | className | Additional CSS classes | `string` | - |

packages/docs/public/llms.txt

@@ -142,7 +142,7 @@ npm install asterui
 - [Browser](https://asterui.com/docs/browser.md)
 - [Code](https://asterui.com/docs/code.md)
 - [Phone](https://asterui.com/docs/phone.md)
-- [Terminal](https://asterui.com/docs/terminal.md)
+- [Terminal](https://asterui.com/docs/terminal.md) (import from `asterui/terminal`)
 - [Window](https://asterui.com/docs/window.md)
 
 ### Hooks

packages/docs/src/components/ContextMenuDemo.tsx

@@ -126,6 +126,34 @@ export function SubmenuDemo() {
   )
 }
 
+// @example-imports: { ContextMenu, notification } from 'asterui'
+export function DynamicItemsDemo() {
+  return (
+    <Demo>
+      {/* @example-return */}
+      <ContextMenu
+        items={(e) => {
+          const target = (e.target as HTMLElement).textContent || ''
+          return [
+            { key: 'info', label: `Clicked on: "${target}"` , disabled: true },
+            { key: 'divider', divider: true },
+            { key: 'copy', label: 'Copy' },
+            { key: 'inspect', label: 'Inspect' },
+          ]
+        }}
+        onSelect={(key) => notification.info({ message: `Selected: ${key}` })}
+      >
+        <div className="flex gap-2">
+          <div className="p-4 bg-base-200 rounded-lg cursor-context-menu">Item A</div>
+          <div className="p-4 bg-base-200 rounded-lg cursor-context-menu">Item B</div>
+          <div className="p-4 bg-base-200 rounded-lg cursor-context-menu">Item C</div>
+        </div>
+      </ContextMenu>
+      {/* @example-return-end */}
+    </Demo>
+  )
+}
+
 // @example-imports: { ContextMenu, notification } from 'asterui'
 export function DisabledDemo() {
   // @example-include

packages/docs/src/content/docs/components/contextmenu.mdx

@@ -10,6 +10,7 @@ import {
   IconsDemo,
   DividersDemo,
   SubmenuDemo,
+  DynamicItemsDemo,
   DisabledDemo,
 } from '../../../components/ContextMenuDemo'
 import ContextMenuDemoSource from '../../../components/ContextMenuDemo.tsx?raw'
@@ -47,6 +48,10 @@ import { ContextMenu } from 'asterui'
   <SubmenuDemo client:load slot="demo" />
 </Example>
 
+<Example title="Dynamic Items" description="Use a function for items to generate menu items based on the click event." source={ContextMenuDemoSource} fn="DynamicItemsDemo">
+  <DynamicItemsDemo client:load slot="demo" />
+</Example>
+
 <Example title="Disabled Items" description="Some menu items can be disabled." source={ContextMenuDemoSource} fn="DisabledDemo">
   <DisabledDemo client:load slot="demo" />
 </Example>
@@ -60,7 +65,7 @@ import { ContextMenu } from 'asterui'
 | Property | Description | Type | Default |
 |----------|-------------|------|---------|
 | `children` | Element that triggers the context menu on right-click | `React.ReactNode` | - |
-| `items` | Menu items | `ContextMenuItem[]` | - |
+| `items` | Menu items (static array or function for dynamic items) | `ContextMenuItem[] \| ((e: React.MouseEvent) => ContextMenuItem[])` | - |
 | `onSelect` | Callback when an item is selected | `(key: string) => void` | - |
 | `disabled` | Whether the context menu is disabled | `boolean` | `false` |
 | `className` | Additional CSS classes for the menu | `string` | - |

packages/docs/src/content/docs/components/terminal.mdx

@@ -67,7 +67,7 @@ import { Terminal } from 'asterui/terminal'
 | `onLine` | Callback when user submits a line in readline mode. Return a Promise to defer the next prompt. | `(line: string) => void \| Promise<void>` | - |
 | `onData` | Callback for raw input (not used in readline mode) | `(data: string) => void` | - |
 | `onReady` | Callback when terminal is initialized | `(terminal: XTerm) => void` | - |
-| `options` | xterm.js options (theme is auto-applied) | `ITerminalOptions` | - |
+| `options` | xterm.js options (theme is auto-generated and merged with any user theme overrides) | `ITerminalOptions` | - |
 | `className` | Additional CSS classes | `string` | - |
 | `style` | Container style | `React.CSSProperties` | - |
 | `data-testid` | Test ID for testing | `string` | - |
@@ -102,7 +102,7 @@ When `readline` is enabled, the terminal provides:
 The Terminal component automatically uses DaisyUI theme colors:
 
 - **Background/Foreground**: Uses `base-100` and `base-content`
-- **Cursor**: Uses `primary` color
+- **Cursor**: Uses `foreground` color (base-content)
 - **ANSI Colors**: Maps to `error`, `success`, `warning`, `info`, `secondary`, `accent`
 
 When the theme changes (light/dark), the terminal colors update automatically.