devnonla-ui 0.1.0 → 0.3.0

package/src/colorpicker/color.ts

@@ -0,0 +1,246 @@
+export type ColorFormat = "hex" | "rgb" | "hsb";
+
+export type HsbaColor = {
+  h: number;
+  s: number;
+  b: number;
+  a: number;
+};
+
+export type RgbaColor = {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+};
+
+export type ColorType = string | Color;
+
+const HEX = /^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const RGB = /^rgba?\(\s*([0-9.]+%?)\s*[, ]\s*([0-9.]+%?)\s*[, ]\s*([0-9.]+%?)(?:\s*[,/]\s*([0-9.]+%?))?\s*\)$/i;
+const HSL = /^hsla?\(\s*([0-9.]+)\s*[, ]\s*([0-9.]+)%\s*[, ]\s*([0-9.]+)%(?:\s*[,/]\s*([0-9.]+%?))?\s*\)$/i;
+const HSB = /^hsba?\(\s*([0-9.]+)\s*[, ]\s*([0-9.]+)%\s*[, ]\s*([0-9.]+)%(?:\s*[,/]\s*([0-9.]+%?))?\s*\)$/i;
+const HSV = /^hsva?\(\s*([0-9.]+)\s*[, ]\s*([0-9.]+)%\s*[, ]\s*([0-9.]+)%(?:\s*[,/]\s*([0-9.]+%?))?\s*\)$/i;
+
+export function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n));
+}
+
+function round(n: number, digits = 0) {
+  const f = 10 ** digits;
+  return Math.round(n * f) / f;
+}
+
+function wrapHue(h: number) {
+  const n = ((h % 360) + 360) % 360;
+  return n;
+}
+
+function hexByte(n: number) {
+  return clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");
+}
+
+function parseChannel(raw: string, max: number) {
+  const t = raw.trim();
+  if (t.endsWith("%")) return clamp((parseFloat(t) / 100) * max, 0, max);
+  return clamp(parseFloat(t), 0, max);
+}
+
+function parseAlpha(raw: string | undefined) {
+  if (raw == null || raw === "") return 1;
+  const t = raw.trim();
+  if (t.endsWith("%")) return clamp(parseFloat(t) / 100, 0, 1);
+  const n = parseFloat(t);
+  return n > 1 ? clamp(n / 255, 0, 1) : clamp(n, 0, 1);
+}
+
+export function hsbaToRgba({ h, s, b, a }: HsbaColor): RgbaColor {
+  const hue = wrapHue(h);
+  const sat = clamp(s, 0, 1);
+  const val = clamp(b, 0, 1);
+  const c = val * sat;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = val - c;
+  let r = 0;
+  let g = 0;
+  let bl = 0;
+  if (hue < 60) [r, g, bl] = [c, x, 0];
+  else if (hue < 120) [r, g, bl] = [x, c, 0];
+  else if (hue < 180) [r, g, bl] = [0, c, x];
+  else if (hue < 240) [r, g, bl] = [0, x, c];
+  else if (hue < 300) [r, g, bl] = [x, 0, c];
+  else [r, g, bl] = [c, 0, x];
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((bl + m) * 255),
+    a: clamp(a, 0, 1),
+  };
+}
+
+export function rgbaToHsba({ r, g, b, a }: RgbaColor): HsbaColor {
+  const R = clamp(r, 0, 255) / 255;
+  const G = clamp(g, 0, 255) / 255;
+  const B = clamp(b, 0, 255) / 255;
+  const max = Math.max(R, G, B);
+  const min = Math.min(R, G, B);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === R) h = ((G - B) / d) % 6;
+    else if (max === G) h = (B - R) / d + 2;
+    else h = (R - G) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return { h, s: max === 0 ? 0 : d / max, b: max, a: clamp(a, 0, 1) };
+}
+
+function hslToHsba(h: number, s: number, l: number, a: number): HsbaColor {
+  const sat = clamp(s, 0, 1);
+  const lit = clamp(l, 0, 1);
+  const v = lit + sat * Math.min(lit, 1 - lit);
+  const sv = v === 0 ? 0 : 2 * (1 - lit / v);
+  return { h: wrapHue(h), s: sv, b: v, a: clamp(a, 0, 1) };
+}
+
+function expandHex(hex: string) {
+  if (hex.length === 3 || hex.length === 4) {
+    return hex
+      .split("")
+      .map((c) => c + c)
+      .join("");
+  }
+  return hex;
+}
+
+function parseHex(raw: string): HsbaColor | null {
+  const m = HEX.exec(raw.trim());
+  if (!m) return null;
+  const hex = expandHex(m[1]!.toLowerCase());
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
+  return rgbaToHsba({ r, g, b, a });
+}
+
+function parseCss(raw: string): HsbaColor | null {
+  const t = raw.trim();
+  if (!t) return null;
+  if (t.toLowerCase() === "transparent") return { h: 0, s: 0, b: 0, a: 0 };
+  const hex = parseHex(t);
+  if (hex) return hex;
+  const rgb = RGB.exec(t);
+  if (rgb) {
+    return rgbaToHsba({
+      r: parseChannel(rgb[1]!, 255),
+      g: parseChannel(rgb[2]!, 255),
+      b: parseChannel(rgb[3]!, 255),
+      a: parseAlpha(rgb[4]),
+    });
+  }
+  const hsl = HSL.exec(t);
+  if (hsl) return hslToHsba(parseFloat(hsl[1]!), parseFloat(hsl[2]!) / 100, parseFloat(hsl[3]!) / 100, parseAlpha(hsl[4]));
+  const hsb = HSB.exec(t) ?? HSV.exec(t);
+  if (hsb) {
+    return {
+      h: wrapHue(parseFloat(hsb[1]!)),
+      s: clamp(parseFloat(hsb[2]!) / 100, 0, 1),
+      b: clamp(parseFloat(hsb[3]!) / 100, 0, 1),
+      a: parseAlpha(hsb[4]),
+    };
+  }
+  return null;
+}
+
+export function isColor(value: unknown): value is Color {
+  return value instanceof Color;
+}
+
+export class Color {
+  private readonly meta: HsbaColor;
+
+  constructor(input?: ColorType | HsbaColor | RgbaColor | null) {
+    this.meta = toHsba(input);
+  }
+
+  toHsb(): HsbaColor {
+    return { h: this.meta.h, s: this.meta.s, b: this.meta.b, a: this.meta.a };
+  }
+
+  toRgb(): RgbaColor {
+    return hsbaToRgba(this.meta);
+  }
+
+  toHex(ignoreAlpha = false): string {
+    const { r, g, b, a } = this.toRgb();
+    const hex = `${hexByte(r)}${hexByte(g)}${hexByte(b)}`;
+    if (ignoreAlpha || a >= 1) return hex;
+    return `${hex}${hexByte(a * 255)}`;
+  }
+
+  toHexString(ignoreAlpha = false): string {
+    return `#${this.toHex(ignoreAlpha)}`;
+  }
+
+  toRgbString(): string {
+    const { r, g, b, a } = this.toRgb();
+    if (a < 1) return `rgba(${r}, ${g}, ${b}, ${round(a, 2)})`;
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  toHsbString(): string {
+    const { h, s, b, a } = this.meta;
+    const H = Math.round(wrapHue(h));
+    const S = Math.round(s * 100);
+    const B = Math.round(b * 100);
+    if (a < 1) return `hsba(${H}, ${S}%, ${B}%, ${round(a, 2)})`;
+    return `hsb(${H}, ${S}%, ${B}%)`;
+  }
+
+  toCssString(): string {
+    return this.toRgbString();
+  }
+
+  toString(format: ColorFormat = "hex"): string {
+    if (format === "rgb") return this.toRgbString();
+    if (format === "hsb") return this.toHsbString();
+    return this.toHexString();
+  }
+
+  static fromHsba(hsba: HsbaColor): Color {
+    return new Color(hsba);
+  }
+}
+
+function isHsbaLike(value: object): value is HsbaColor {
+  return "h" in value && "s" in value && "b" in value;
+}
+
+function isRgbaLike(value: object): value is RgbaColor {
+  return "r" in value && "g" in value && "b" in value;
+}
+
+function toHsba(input?: ColorType | HsbaColor | RgbaColor | null): HsbaColor {
+  if (input == null || input === "") return { h: 215, s: 0.91, b: 1, a: 1 };
+  if (isColor(input)) return input.toHsb();
+  if (typeof input === "string") return parseCss(input) ?? { h: 215, s: 0.91, b: 1, a: 1 };
+  if (isHsbaLike(input)) {
+    return { h: wrapHue(input.h), s: clamp(input.s, 0, 1), b: clamp(input.b, 0, 1), a: clamp(input.a ?? 1, 0, 1) };
+  }
+  if (isRgbaLike(input)) return rgbaToHsba({ r: input.r, g: input.g, b: input.b, a: input.a ?? 1 });
+  return { h: 215, s: 0.91, b: 1, a: 1 };
+}
+
+export function parseColor(input?: ColorType | null): Color | null {
+  if (input == null || input === "") return null;
+  if (isColor(input)) return input;
+  if (typeof input === "string") {
+    const parsed = parseCss(input);
+    return parsed ? Color.fromHsba(parsed) : null;
+  }
+  return new Color(input);
+}
+
+export const DEFAULT_COLOR = new Color("#1677ff");

package/src/datepicker/DatePicker.tsx

@@ -16,8 +16,9 @@ import {
 import type { DateRange } from "react-day-picker";
 import { Calendar } from "../calendar/Calendar";
 import { Button } from "../button/Button";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
-import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass, getSizeTokens } from "../lib/sizes";
+import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass, getSizeTokens, useControlSize } from "../lib/sizes";
 import { glassOverlayClass } from "../lib/surface";
 
 export type DatePickerProps = {
@@ -29,7 +30,7 @@ export type DatePickerProps = {
   allowClear?: boolean;
   format?: string;
   showTime?: boolean;
-  /** Keep the panel open until OK (antd). */
+  /** Keep the panel open until OK. */
   needConfirm?: boolean;
   placeholder?: string;
   disabled?: boolean;
@@ -127,6 +128,7 @@ const TriggerChrome = forwardRef<
     children: ReactNode;
   } & Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "style">
 >(function TriggerChrome({ size, status, disabled, className, style, icon, clear, children, ...rest }, ref) {
+  const resolvedSize = useControlSize(size);
   return (
     <button
       ref={ref}
@@ -141,7 +143,7 @@ const TriggerChrome = forwardRef<
         controlStatusClass(status),
         className,
       )}
-      style={{ ...controlFieldStyle(size), ...style }}
+      style={{ ...controlFieldStyle(resolvedSize), ...style }}
       {...rest}
     >
       {icon}
@@ -185,7 +187,9 @@ const DatePickerRoot = forwardRef<HTMLButtonElement, DatePickerProps>(function D
   };
   const [month, setMonth] = useState<Date>(() => selected ?? new Date());
   const [draft, setDraft] = useState<Date | undefined>(selected);
-  const tok = getSizeTokens(size);
+  const resolvedSize = useControlSize(size);
+  const tok = getSizeTokens(resolvedSize);
+  const portal = usePopupContainer()?.();
   const confirm = Boolean(needConfirm);
 
   useEffect(() => {
@@ -253,7 +257,7 @@ const DatePickerRoot = forwardRef<HTMLButtonElement, DatePickerProps>(function D
       <PopoverPrimitive.Trigger asChild>
         <TriggerChrome
           ref={ref}
-          size={size}
+          size={resolvedSize}
           status={status}
           disabled={disabled}
           className={className}
@@ -277,7 +281,7 @@ const DatePickerRoot = forwardRef<HTMLButtonElement, DatePickerProps>(function D
           <span className={cn(!selected && "text-quaternary-foreground")}>{selected ? label : placeholder}</span>
         </TriggerChrome>
       </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Portal container={portal}>
         <PopoverPrimitive.Content
           align="start"
           sideOffset={6}
@@ -351,7 +355,9 @@ const RangePicker = forwardRef<HTMLButtonElement, RangePickerProps>(function Ran
   const selected = controlled ? parseRange(value) : inner;
   const [open, setOpen] = useState(false);
   const [month, setMonth] = useState<Date>(() => selected?.from ?? new Date());
-  const tok = getSizeTokens(size);
+  const resolvedSize = useControlSize(size);
+  const tok = getSizeTokens(resolvedSize);
+  const portal = usePopupContainer()?.();
 
   useEffect(() => {
     if (selected?.from) setMonth(selected.from);
@@ -390,7 +396,7 @@ const RangePicker = forwardRef<HTMLButtonElement, RangePickerProps>(function Ran
       <PopoverPrimitive.Trigger asChild>
         <TriggerChrome
           ref={ref}
-          size={size}
+          size={resolvedSize}
           status={status}
           disabled={disabled}
           className={className}
@@ -418,7 +424,7 @@ const RangePicker = forwardRef<HTMLButtonElement, RangePickerProps>(function Ran
           </span>
         </TriggerChrome>
       </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Portal container={portal}>
         <PopoverPrimitive.Content
           align="start"
           sideOffset={6}

package/src/desktop/DesktopHeader.tsx

@@ -78,7 +78,7 @@ export function DesktopHeader({
   profile?: ReactNode;
 }) {
   return (
-    <header className="fixed inset-x-0 top-0 z-40 flex h-desktop-bar items-center justify-between gap-3 border-0 bg-glass-bar px-3 backdrop-blur-lg">
+    <header className="nonla-header-layer fixed inset-x-0 top-0 flex h-desktop-bar items-center justify-between gap-3 border-0 bg-glass-bar px-3 backdrop-blur-lg">
       <div className="flex min-w-0 items-center">
         {logo}
         {leading}

package/src/desktop/DesktopIcon.tsx

@@ -6,9 +6,7 @@ const iconButtonClass =
 
 const labelClass = "text-xs leading-[18px] font-semibold text-center line-clamp-2 w-full";
 
-function plateClass(active: boolean) {
-  return `w-11 h-11 flex items-center justify-center filter-[drop-shadow(0_1px_2px_rgba(0,0,0,0.45))] ${active ? "ring-2 ring-brand rounded-[10px]" : ""}`;
-}
+const plateClass = "nonla-window-glass nonla-desktop-icon-plate w-11 h-11 flex items-center justify-center";
 
 export const DesktopIcon = forwardRef<
   HTMLButtonElement,
@@ -24,7 +22,7 @@ export const DesktopIcon = forwardRef<
   return (
     <button ref={ref} type="button" title={label} aria-label={label} aria-current={active ? "true" : undefined} dir="ltr" onClick={onClick} className={iconButtonClass}>
       {media ?? (
-        <span className={plateClass(active)}>
+        <span className={plateClass}>
           <FluentIcon name={icon ?? "sparkle-24"} size={32} />
         </span>
       )}

package/src/desktop/DesktopWindow.tsx

@@ -1,6 +1,7 @@
 import { type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn";
+import { OverlayScroll, type OverlayScrollVisibility } from "../scroll/OverlayScroll";
 import { glassSurfaceClass } from "../lib/surface";
 
 type Phase = "open" | "leaving";
@@ -211,12 +212,17 @@ export function DesktopWindow({
   expanded,
   onClose,
   onToggleExpand,
+  scroll = true,
+  scrollbar = "hover",
   children,
 }: {
   title?: ReactNode;
   expanded: boolean;
   onClose: () => void;
   onToggleExpand: () => void;
+  /** Overlay auto-hide scrollbar on the body. Pass `false` when children manage their own scroll (split panes, AgentPanel). */
+  scroll?: boolean;
+  scrollbar?: OverlayScrollVisibility;
   children: ReactNode;
 }) {
   const overlayRef = useRef<HTMLDivElement>(null);
@@ -444,7 +450,7 @@ export function DesktopWindow({
 
   return (
     <WindowHeaderSlotContext.Provider value={headerChrome}>
-      <div ref={overlayRef} className="pointer-events-none absolute inset-x-0 bottom-0 top-desktop-bar z-30">
+      <div ref={overlayRef} className="nonla-window-layer pointer-events-none absolute inset-x-0 bottom-0 top-desktop-bar">
         <section
           ref={frameRef}
           aria-label={typeof title === "string" && title ? title : "Window"}
@@ -464,16 +470,16 @@ export function DesktopWindow({
             opacity: visible ? 1 : 0,
             transform: visible ? "scale(1)" : "scale(0.18)",
             transition: [geom, fade].filter(Boolean).join(", ") || undefined,
-            ["--glass" as string]: "color-mix(in srgb, white 72%, transparent)",
           }}
           data-expanded={expanded || undefined}
-          className={cn("absolute flex flex-col rounded-xl pointer-events-auto transform-gpu", glassSurfaceClass, leaving && "pointer-events-none")}
+          className={cn("absolute flex flex-col rounded-xl pointer-events-auto transform-gpu", glassSurfaceClass, "nonla-window-glass", leaving && "pointer-events-none")}
         >
           <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl">
+            {/* biome-ignore lint/a11y/noStaticElementInteractions: title bar is a pointer drag surface */}
             <header
               onPointerDown={startDrag}
               onDoubleClick={onTitleBarDoubleClick}
-              className="flex h-8 shrink-0 cursor-default items-center gap-4 border-0 border-b border-solid border-glass-border px-3 select-none touch-none"
+              className="flex h-8 shrink-0 cursor-default items-center gap-4 border-0 border-b border-solid border-ink-line px-3 select-none touch-none"
             >
               <div className="group/traffic flex shrink-0 items-center gap-2">
                 <TrafficLight label="Close window" tone="close" onClick={requestClose} shortcut="Esc">
@@ -489,7 +495,15 @@ export function DesktopWindow({
               </div>
             </header>
 
-            <div className="min-h-0 flex-1 overflow-hidden">{children}</div>
+            <div className="min-h-0 flex-1 overflow-hidden">
+              {scroll ? (
+                <OverlayScroll visibility={scrollbar} className="h-full">
+                  {children}
+                </OverlayScroll>
+              ) : (
+                children
+              )}
+            </div>
           </div>
 
           {!expanded && !leaving

package/src/desktop/MeadowDesktop.tsx

@@ -5,8 +5,8 @@ export function MeadowDesktop({ children, src }: { children?: ReactNode; src?: s
   return (
     <div className="absolute inset-0 bg-meadow">
       <MeadowWallpaper src={src} />
-      <div className="absolute inset-x-0 bottom-0 top-desktop-bar z-20">
-        <nav aria-label="Desktop" className="absolute inset-0 overflow-auto px-3 pt-8 pb-3">
+      <div className="nonla-desktop-layer absolute inset-x-0 bottom-0 top-desktop-bar">
+        <nav aria-label="Desktop" className="absolute inset-0 overflow-auto pl-2 pr-3 pt-2 pb-3">
           <div className="flex h-full flex-col flex-wrap content-start gap-x-2 gap-y-3">{children}</div>
         </nav>
       </div>

package/src/drawer/Drawer.tsx

@@ -1,5 +1,6 @@
 import * as Dialog from "@radix-ui/react-dialog";
 import { type AnimationEvent, type CSSProperties, type ReactNode, useEffect, useRef, useState } from "react";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
 import { glassSurfaceClass } from "../lib/surface";
 
@@ -17,7 +18,7 @@ export type DrawerProps = {
   extra?: ReactNode;
   children?: ReactNode;
   width?: number | string;
-  /** antd: width for left/right, height for top/bottom. */
+  /** Width for left/right, height for top/bottom. */
   size?: number | string;
   placement?: DrawerPlacement;
   destroyOnClose?: boolean;
@@ -66,6 +67,7 @@ export function Drawer({
   }, [isOpen, shouldDestroy]);
 
   const showBody = !shouldDestroy || present;
+  const portal = usePopupContainer()?.();
 
   const onContentAnimationEnd = (e: AnimationEvent<HTMLDivElement>) => {
     if (e.target !== e.currentTarget) return;
@@ -80,17 +82,17 @@ export function Drawer({
         if (!next) onClose?.();
       }}
     >
-      <Dialog.Portal>
-        <Dialog.Overlay className="nonla-overlay z-[9980]" />
+      <Dialog.Portal container={portal}>
+        <Dialog.Overlay className="nonla-overlay" />
         <Dialog.Content
           data-side={placement}
           className={cn(
-            "nonla-drawer-panel fixed z-[9981] flex flex-col outline-none",
+            "nonla-drawer-panel fixed flex flex-col outline-none",
             glassSurfaceClass,
             placement === "right" && "top-0 right-0 bottom-0 max-w-[100vw]",
             placement === "left" && "top-0 left-0 bottom-0 max-w-[100vw]",
-            placement === "bottom" && "right-0 bottom-0 left-0 max-h-[100vh]",
-            placement === "top" && "top-0 right-0 left-0 max-h-[100vh]",
+            placement === "bottom" && "right-0 bottom-0 left-0 max-h-screen",
+            placement === "top" && "top-0 right-0 left-0 max-h-screen",
             className,
           )}
           style={{

package/src/dropdown/ContextMenu.tsx

@@ -1,5 +1,6 @@
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
 import type { ReactNode } from "react";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
 import type { MenuItemType, MenuProps } from "./Dropdown";
 import { menuContentClass, menuIconClass, menuItemClass } from "./menuClasses";
@@ -80,6 +81,7 @@ function MenuItems({
 }
 
 export function ContextMenu({ menu, children, open, onOpenChange, className, overlayClassName, disabled }: ContextMenuProps) {
+  const portal = usePopupContainer()?.();
   if (disabled) return children;
 
   const contentClassName = cn(menuContentClass, className, overlayClassName, menu?.className);
@@ -87,7 +89,7 @@ export function ContextMenu({ menu, children, open, onOpenChange, className, ove
   return (
     <ContextMenuPrimitive.Root modal open={open} onOpenChange={onOpenChange}>
       <ContextMenuPrimitive.Trigger asChild>{children}</ContextMenuPrimitive.Trigger>
-      <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Portal container={portal}>
         <ContextMenuPrimitive.Content collisionPadding={8} className={contentClassName} style={menu?.style}>
           <MenuItems items={menu?.items ?? []} onClick={menu?.onClick} contentClassName={contentClassName} />
         </ContextMenuPrimitive.Content>

package/src/dropdown/Dropdown.tsx

@@ -1,5 +1,6 @@
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { type CSSProperties, type MouseEvent, type ReactNode, useState } from "react";
+import { usePopupContainer } from "../app/context";
 import { cn } from "../lib/cn";
 import { type PopperPlacement, placementToRadix } from "../lib/placement";
 import { menuContentClass, menuIconClass, menuItemClass } from "./menuClasses";
@@ -34,7 +35,7 @@ export type DropdownProps = {
   className?: string;
   overlayClassName?: string;
   disabled?: boolean;
-  /** antd 5.25+ alias — accepted, no-op (Radix unmounts when closed). */
+  /** Alias — accepted, no-op (Radix unmounts when closed). */
   destroyOnHidden?: boolean;
   classNames?: { root?: string; overlay?: string };
 };
@@ -51,7 +52,7 @@ function itemKey(item: MenuItemType, i: number) {
   return item.key ?? (item.type === "divider" ? `divider-${i}` : `item-${i}`);
 }
 
-function MenuItems({ items, onClick }: { items: (MenuItemType | null | undefined)[]; onClick?: MenuProps["onClick"] }) {
+function MenuItems({ items, onClick, portal }: { items: (MenuItemType | null | undefined)[]; onClick?: MenuProps["onClick"]; portal?: HTMLElement }) {
   return (
     <>
       {items.map((item, i) => {
@@ -68,9 +69,9 @@ function MenuItems({ items, onClick }: { items: (MenuItemType | null | undefined
                 <span className="min-w-0 flex-1">{item.label}</span>
                 <ChevronRight />
               </DropdownMenu.SubTrigger>
-              <DropdownMenu.Portal>
+              <DropdownMenu.Portal container={portal}>
                 <DropdownMenu.SubContent sideOffset={4} className={cn(menuContentClass, "nonla-popper")}>
-                  <MenuItems items={item.children} onClick={onClick} />
+                  <MenuItems items={item.children} onClick={onClick} portal={portal} />
                 </DropdownMenu.SubContent>
               </DropdownMenu.Portal>
             </DropdownMenu.Sub>
@@ -98,6 +99,7 @@ function MenuItems({ items, onClick }: { items: (MenuItemType | null | undefined
 
 export function Dropdown({ menu, children, trigger = ["click"], open, onOpenChange, placement = "bottomLeft", className, overlayClassName, disabled }: DropdownProps) {
   const { side, align } = placementToRadix(placement);
+  const portal = usePopupContainer()?.();
   const hover = trigger.includes("hover");
   const contextMenu = trigger.includes("contextMenu");
   const click = trigger.includes("click") || (!hover && !contextMenu);
@@ -119,7 +121,7 @@ export function Dropdown({ menu, children, trigger = ["click"], open, onOpenChan
       <DropdownMenu.Trigger asChild disabled={disabled} onClick={click || contextMenu ? undefined : (e) => e.preventDefault()} onMouseEnter={hover && !disabled ? () => setIsOpen(true) : undefined} onMouseLeave={hover ? () => setIsOpen(false) : undefined} onContextMenu={handleContext}>
         {children}
       </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
+      <DropdownMenu.Portal container={portal}>
         <DropdownMenu.Content
           side={side}
           align={align === "center" ? "start" : align}
@@ -129,7 +131,7 @@ export function Dropdown({ menu, children, trigger = ["click"], open, onOpenChan
           onMouseEnter={hover ? () => setIsOpen(true) : undefined}
           onMouseLeave={hover ? () => setIsOpen(false) : undefined}
         >
-          <MenuItems items={menu?.items ?? []} onClick={menu?.onClick} />
+          <MenuItems items={menu?.items ?? []} onClick={menu?.onClick} portal={portal} />
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>

package/src/form/Form.tsx

@@ -20,10 +20,10 @@ export type FormProps<T extends FieldValues = FieldValues> = {
 function evalCondition(fieldValue: unknown, operator: string, compareValue: unknown): boolean {
   switch (operator) {
     case "==":
-      // eslint-disable-next-line eqeqeq
+      // biome-ignore lint/suspicious/noDoubleEquals: form condition operator is loose equality
       return fieldValue == compareValue;
     case "!=":
-      // eslint-disable-next-line eqeqeq
+      // biome-ignore lint/suspicious/noDoubleEquals: form condition operator is loose equality
       return fieldValue != compareValue;
     case ">=":
       return (fieldValue as number) >= (compareValue as number);

package/src/form/FormItem.tsx

@@ -111,10 +111,10 @@ export function FormItem(props: FormItemProps) {
                   </svg>
                 </button>
               ) : null}
-              <label className="text-sm text-foreground">
+              <div className="text-sm text-foreground">
                 {label}
                 {required ? <span className="ml-1 text-destructive">*</span> : null}
-              </label>
+              </div>
             </div>
           ) : null}
 

package/src/form/partials/FormItemHelps.tsx

@@ -23,8 +23,8 @@ export function FormItemHelps({ items, className }: FormItemHelpsProps) {
   if (!items?.length) return null;
   return (
     <div className={cn("mt-1 flex flex-col gap-1 pl-2.75", className)}>
-      {items.map((item, index) => (
-        <FormItemHelp key={`${index}-${item.text}`} text={item.text} className={item.className} iconClassName={item.iconClassName} />
+      {items.map((item) => (
+        <FormItemHelp key={item.text} text={item.text} className={item.className} iconClassName={item.iconClassName} />
       ))}
     </div>
   );