@arronqzy/ui 1.0.0 → 1.0.3

package/README.md

@@ -0,0 +1,63 @@
+# @arronqzy/ui
+
+Abuilder 的**共享 UI 组件库**，基于 [shadcn/ui](https://ui.shadcn.com/) + Radix UI + Tailwind CSS，为编辑器与蓝图提供统一视觉与交互。
+
+## 功能概览
+
+- **基础组件**：Button、Input、Dialog、Dropdown、Tabs、Tooltip、Toast 等
+- **表单**：与 `react-hook-form`、`zod` 集成的表单控件
+- **布局**：Resizable Panels、ScrollArea、Separator
+- **主题**：`ThemeProvider` 支持亮/暗色与 `class` 策略
+- **层级管理**：`UI_Z_INDEX` / `MODAL_Z_INDEX` 统一浮层 z-index
+- **图表**：封装 Recharts 常用图表（按需使用）
+
+## 安装
+
+```bash
+pnpm add @arronqzy/ui
+```
+
+```ts
+import "@arronqzy/ui/styles.css";
+```
+
+## 使用
+
+```tsx
+import { ThemeProvider, Button, toast } from "@arronqzy/ui";
+import "@arronqzy/ui/styles.css";
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="dark">
+      <Button onClick={() => toast({ title: "Hello" })}>点击</Button>
+    </ThemeProvider>
+  );
+}
+```
+
+### 工具函数
+
+```ts
+import { cn } from "@arronqzy/ui";
+import { UI_Z_INDEX } from "@arronqzy/ui";
+```
+
+## 导出说明
+
+- `@arronqzy/ui` — 全部组件、`cn`、`ThemeProvider`、`useToast`
+- `@arronqzy/ui/styles.css` — 编译后的 Tailwind 样式
+
+组件源码位于 `src/ui/`，遵循 shadcn 可组合模式，可按需在本包内扩展。
+
+## 构建样式
+
+```bash
+pnpm -C packages/ui build:css
+```
+
+依赖 `@arronqzy/tailwind` 预设保持与设计令牌一致。
+
+## 许可证
+
+MIT

package/dist/styles.css

@@ -657,6 +657,11 @@ body {
   right: 0px;
 }
 
+.inset-x-10 {
+  left: 2.5rem;
+  right: 2.5rem;
+}
+
 .inset-y-0 {
   top: 0px;
   bottom: 0px;
@@ -682,6 +687,10 @@ body {
   bottom: 0px;
 }
 
+.bottom-2 {
+  bottom: 0.5rem;
+}
+
 .left-0 {
   left: 0px;
 }
@@ -706,6 +715,10 @@ body {
   right: 0.5rem;
 }
 
+.right-3 {
+  right: 0.75rem;
+}
+
 .right-4 {
   right: 1rem;
 }
@@ -722,6 +735,10 @@ body {
   top: 0.5rem;
 }
 
+.top-3 {
+  top: 0.75rem;
+}
+
 .top-4 {
   top: 1rem;
 }
@@ -746,6 +763,14 @@ body {
   z-index: 10;
 }
 
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -754,14 +779,14 @@ body {
   z-index: 10000;
 }
 
-.z-\[100\] {
-  z-index: 100;
-}
-
 .z-\[1\] {
   z-index: 1;
 }
 
+.z-toast {
+  z-index: 99999;
+}
+
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -876,6 +901,10 @@ body {
   height: var(--cell-size);
 }
 
+.h-1 {
+  height: 0.25rem;
+}
+
 .h-1\.5 {
   height: 0.375rem;
 }
@@ -972,6 +1001,10 @@ body {
   max-height: var(--radix-dropdown-menu-content-available-height);
 }
 
+.max-h-none {
+  max-height: none;
+}
+
 .max-h-screen {
   max-height: 100vh;
 }
@@ -988,6 +1021,10 @@ body {
   width: 0.25rem;
 }
 
+.w-1\.5 {
+  width: 0.375rem;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -996,6 +1033,10 @@ body {
   width: 2.75rem;
 }
 
+.w-12 {
+  width: 3rem;
+}
+
 .w-2 {
   width: 0.5rem;
 }
@@ -1177,11 +1218,21 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-x-0 {
+  --tw-translate-x: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-x-\[-50\%\] {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-y-0 {
+  --tw-translate-y: 0px;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .translate-y-\[-50\%\] {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1201,6 +1252,10 @@ body {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.animate-none {
+  animation: none;
+}
+
 @keyframes pulse {
   50% {
     opacity: .5;
@@ -1225,10 +1280,46 @@ body {
   cursor: default;
 }
 
+.cursor-e-resize {
+  cursor: e-resize;
+}
+
+.cursor-grab {
+  cursor: grab;
+}
+
+.cursor-n-resize {
+  cursor: n-resize;
+}
+
+.cursor-ne-resize {
+  cursor: ne-resize;
+}
+
+.cursor-nw-resize {
+  cursor: nw-resize;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
 
+.cursor-s-resize {
+  cursor: s-resize;
+}
+
+.cursor-se-resize {
+  cursor: se-resize;
+}
+
+.cursor-sw-resize {
+  cursor: sw-resize;
+}
+
+.cursor-w-resize {
+  cursor: w-resize;
+}
+
 .touch-none {
   touch-action: none;
 }
@@ -1239,6 +1330,14 @@ body {
           user-select: none;
 }
 
+.\!resize {
+  resize: both !important;
+}
+
+.resize {
+  resize: both;
+}
+
 .list-none {
   list-style-type: none;
 }
@@ -1531,6 +1630,10 @@ body {
   background-color: hsl(var(--muted));
 }
 
+.bg-muted-foreground\/40 {
+  background-color: hsl(var(--muted-foreground) / 0.4);
+}
+
 .bg-muted\/50 {
   background-color: hsl(var(--muted) / 0.5);
 }
@@ -1677,6 +1780,10 @@ body {
   padding-right: 0.25rem;
 }
 
+.pr-10 {
+  padding-right: 2.5rem;
+}
+
 .pr-2 {
   padding-right: 0.5rem;
 }
@@ -1701,6 +1808,10 @@ body {
   padding-top: 1rem;
 }
 
+.pt-8 {
+  padding-top: 2rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1930,6 +2041,10 @@ body {
   transition-duration: 150ms;
 }
 
+.transition-none {
+  transition-property: none;
+}
+
 .transition-opacity {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2183,6 +2298,10 @@ body {
   --tw-ring-offset-color: hsl(var(--background));
 }
 
+.active\:cursor-grabbing:active {
+  cursor: grabbing;
+}
+
 .disabled\:pointer-events-none:disabled {
   pointer-events: none;
 }
@@ -2300,6 +2419,10 @@ body {
   pointer-events: none;
 }
 
+.data-\[state\=closed\]\:pointer-events-none[data-state="closed"] {
+  pointer-events: none;
+}
+
 .data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
   height: 1px;
 }
@@ -2493,10 +2616,6 @@ body {
   color: hsl(var(--accent-foreground));
 }
 
-.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
-  color: hsl(var(--muted-foreground));
-}
-
 .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
   opacity: 0.5;
 }
@@ -2625,6 +2744,10 @@ body {
   --tw-exit-scale: .95;
 }
 
+.data-\[state\=open\]\:zoom-in-100[data-state="open"] {
+  --tw-enter-scale: 1;
+}
+
 .data-\[state\=open\]\:zoom-in-90[data-state="open"] {
   --tw-enter-scale: .9;
 }
@@ -2701,6 +2824,10 @@ body {
   --tw-enter-translate-x: -100%;
 }
 
+.data-\[state\=open\]\:slide-in-from-left-0[data-state="open"] {
+  --tw-enter-translate-x: -0px;
+}
+
 .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
   --tw-enter-translate-x: -50%;
 }
@@ -2713,6 +2840,10 @@ body {
   --tw-enter-translate-y: -100%;
 }
 
+.data-\[state\=open\]\:slide-in-from-top-0[data-state="open"] {
+  --tw-enter-translate-y: -0px;
+}
+
 .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
   --tw-enter-translate-y: -48%;
 }
@@ -2769,18 +2900,6 @@ body {
 }
 
 @media (min-width: 640px) {
-  .sm\:bottom-0 {
-    bottom: 0px;
-  }
-
-  .sm\:right-0 {
-    right: 0px;
-  }
-
-  .sm\:top-auto {
-    top: auto;
-  }
-
   .sm\:mt-0 {
     margin-top: 0px;
   }
@@ -2793,10 +2912,6 @@ body {
     flex-direction: row;
   }
 
-  .sm\:flex-col {
-    flex-direction: column;
-  }
-
   .sm\:justify-end {
     justify-content: flex-end;
   }
@@ -2818,10 +2933,6 @@ body {
   .sm\:text-left {
     text-align: left;
   }
-
-  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
-    --tw-enter-translate-y: 100%;
-  }
 }
 
 @media (min-width: 768px) {

package/index.ts

@@ -2,6 +2,6 @@
 
 export * from "./src/ui/index";
 export * from "./src/lib/utils";
-export { MODAL_Z_INDEX } from "./src/lib/overlay-z-index";
+export { MODAL_Z_INDEX, UI_Z_INDEX } from "./src/lib/overlay-z-index";
 export * from "./src/hooks/use-toast";
 export * from "./src/theme-provider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/ui",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "exports": {
     ".": "./index.ts",
     "./counter": "./components/counter.ts",
@@ -64,7 +64,7 @@
     "typescript": "^5.5.4",
     "@arronqzy/eslint-config": "0.0.0",
     "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/tailwind": "1.0.1"
+    "@arronqzy/tailwind": "1.0.2"
   },
   "scripts": {
     "lint": "eslint \"**/*.{ts,tsx}\"",

package/src/lib/overlay-z-index.ts

@@ -1,8 +1,25 @@
 import type { CSSProperties } from "react";
 
-/** 弹窗层级：高于画布 Ruler(999)、工具栏(1200)、Menubar(10100) 等 */
-export const MODAL_Z_INDEX = 20000;
-export const MODAL_CONTENT_Z_INDEX = 20001;
+/** 全局浮层 z-index 刻度 */
+export const UI_Z_INDEX = {
+  tooltip: 10000,
+  /** 普通页面下拉；弹窗内下拉须高于 modalContent */
+  dropdown: 20150,
+  popover: 20170,
+  alertDialog: 10150,
+  /** 弹窗：高于画布 Ruler、工具栏、Menubar 等 */
+  modal: 20000,
+  modalContent: 20001,
+  /** Toast 通知：始终置于最顶层 */
+  toast: 99999,
+} as const;
 
-export const modalOverlayStyle: CSSProperties = { zIndex: MODAL_Z_INDEX };
-export const modalContentStyle: CSSProperties = { zIndex: MODAL_CONTENT_Z_INDEX };
+/** @deprecated 使用 UI_Z_INDEX.modal */
+export const MODAL_Z_INDEX = UI_Z_INDEX.modal;
+
+/** @deprecated 使用 UI_Z_INDEX.modalContent */
+export const MODAL_CONTENT_Z_INDEX = UI_Z_INDEX.modalContent;
+
+export const modalOverlayStyle: CSSProperties = { zIndex: UI_Z_INDEX.modal };
+export const modalContentStyle: CSSProperties = { zIndex: UI_Z_INDEX.modalContent };
+export const dropdownStyle: CSSProperties = { zIndex: UI_Z_INDEX.dropdown };

package/src/ui/alert-dialog.tsx

@@ -9,6 +9,12 @@ import {
   modalOverlayStyle,
 } from "../lib/overlay-z-index"
 import { buttonVariants } from "./button"
+import {
+  FloatingWindowChrome,
+  FloatingWindowProvider,
+  useFloatingWindow,
+  useFloatingWindowDrag,
+} from "./floating-window"
 
 const AlertDialog = AlertDialogPrimitive.Root
 
@@ -32,39 +38,107 @@ const AlertDialogOverlay = React.forwardRef<
 ))
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 
+type AlertDialogContentProps = React.ComponentPropsWithoutRef<
+  typeof AlertDialogPrimitive.Content
+> & {
+  overlayClassName?: string
+  movable?: boolean
+  resizable?: boolean
+  minWidth?: number
+  minHeight?: number
+}
+
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
-    overlayClassName?: string
+  AlertDialogContentProps
+>(
+  (
+    {
+      className,
+      style,
+      overlayClassName,
+      children,
+      movable = true,
+      resizable = true,
+      minWidth,
+      minHeight,
+      ...props
+    },
+    ref
+  ) => {
+    const floatingEnabled = movable || resizable
+    const {
+      setNodeRef,
+      floatingStyle,
+      onDragPointerDown,
+      onResizePointerDown,
+      dragContext,
+    } = useFloatingWindow({
+      enabled: floatingEnabled,
+      minWidth,
+      minHeight,
+    })
+
+    const setRefs = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        setNodeRef(node)
+        if (typeof ref === "function") ref(node)
+        else if (ref) ref.current = node
+      },
+      [ref, setNodeRef]
+    )
+
+    return (
+      <AlertDialogPortal>
+        <AlertDialogOverlay className={overlayClassName} />
+        <AlertDialogPrimitive.Content
+          ref={setRefs}
+          style={{ ...modalContentStyle, ...floatingStyle, ...style }}
+          className={cn(
+            "fixed left-[50%] top-[50%] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 pt-8 shadow-lg transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+            floatingStyle &&
+              "max-h-none translate-x-0 translate-y-0 animate-none overflow-auto transition-none data-[state=open]:zoom-in-100 data-[state=open]:slide-in-from-left-0 data-[state=open]:slide-in-from-top-0",
+            className
+          )}
+          {...props}
+        >
+          <FloatingWindowProvider value={dragContext}>
+            <FloatingWindowChrome
+              enabled={floatingEnabled}
+              onDragPointerDown={movable ? onDragPointerDown : () => undefined}
+              onResizePointerDown={
+                resizable ? onResizePointerDown : () => () => undefined
+              }
+            />
+            {children}
+          </FloatingWindowProvider>
+        </AlertDialogPrimitive.Content>
+      </AlertDialogPortal>
+    )
   }
->(({ className, style, overlayClassName, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay className={overlayClassName} />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      style={{ ...modalContentStyle, ...style }}
-      className={cn(
-        "fixed left-[50%] top-[50%] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
-))
+)
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
 const AlertDialogHeader = ({
   className,
+  onPointerDown,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const drag = useFloatingWindowDrag()
+  return (
+    <div
+      className={cn(
+        "flex cursor-grab flex-col space-y-2 text-center active:cursor-grabbing sm:text-left",
+        className
+      )}
+      onPointerDown={(event) => {
+        drag?.onDragPointerDown(event)
+        onPointerDown?.(event)
+      }}
+      {...props}
+    />
+  )
+}
 AlertDialogHeader.displayName = "AlertDialogHeader"
 
 const AlertDialogFooter = ({

package/src/ui/dialog.tsx

@@ -9,6 +9,12 @@ import {
   modalContentStyle,
   modalOverlayStyle,
 } from "../lib/overlay-z-index"
+import {
+  FloatingWindowChrome,
+  FloatingWindowProvider,
+  useFloatingWindow,
+  useFloatingWindowDrag,
+} from "./floating-window"
 
 const Dialog = DialogPrimitive.Root
 
@@ -34,45 +40,127 @@ const DialogOverlay = React.forwardRef<
 ))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
+type DialogContentProps = React.ComponentPropsWithoutRef<
+  typeof DialogPrimitive.Content
+> & {
+  overlayClassName?: string
+  /** 默认 true；AI 浮窗等场景可关掉，避免整屏黑遮罩 */
+  showOverlay?: boolean
+  /** 默认 true：显示右上角关闭按钮 */
+  showClose?: boolean
+  /** 默认 true：支持拖动标题条移动 */
+  movable?: boolean
+  /** 默认 true：支持边缘/角落缩放 */
+  resizable?: boolean
+  minWidth?: number
+  minHeight?: number
+}
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
-    overlayClassName?: string
+  DialogContentProps
+>(
+  (
+    {
+      className,
+      style,
+      children,
+      overlayClassName,
+      showOverlay = true,
+      showClose = true,
+      movable = true,
+      resizable = true,
+      minWidth,
+      minHeight,
+      ...props
+    },
+    ref
+  ) => {
+    const floatingEnabled = movable || resizable
+    const {
+      setNodeRef,
+      floatingStyle,
+      onDragPointerDown,
+      onResizePointerDown,
+      dragContext,
+    } = useFloatingWindow({
+      enabled: floatingEnabled,
+      minWidth,
+      minHeight,
+    })
+
+    const setRefs = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        setNodeRef(node)
+        if (typeof ref === "function") ref(node)
+        else if (ref) ref.current = node
+      },
+      [ref, setNodeRef]
+    )
+
+    return (
+      <DialogPortal>
+        {showOverlay ? (
+          <DialogOverlay className={overlayClassName} />
+        ) : null}
+        <DialogPrimitive.Content
+          ref={setRefs}
+          style={{ ...modalContentStyle, ...floatingStyle, ...style }}
+          className={cn(
+            "fixed left-[50%] top-[50%] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+            floatingStyle &&
+              "max-h-none translate-x-0 translate-y-0 animate-none overflow-auto transition-none data-[state=open]:zoom-in-100 data-[state=open]:slide-in-from-left-0 data-[state=open]:slide-in-from-top-0",
+            className
+          )}
+          {...props}
+        >
+          <FloatingWindowProvider value={dragContext}>
+            <FloatingWindowChrome
+              enabled={floatingEnabled}
+              onDragPointerDown={movable ? onDragPointerDown : () => undefined}
+              onResizePointerDown={
+                resizable ? onResizePointerDown : () => () => undefined
+              }
+            />
+            {children}
+          </FloatingWindowProvider>
+          {showClose ? (
+            <DialogPrimitive.Close
+              data-no-drag
+              className="absolute right-3 top-3 z-50 inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+            >
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </DialogPrimitive.Close>
+          ) : null}
+        </DialogPrimitive.Content>
+      </DialogPortal>
+    )
   }
->(({ className, style, children, overlayClassName, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay className={overlayClassName} />
-    <DialogPrimitive.Content
-      ref={ref}
-      style={{ ...modalContentStyle, ...style }}
-      className={cn(
-        "fixed left-[50%] top-[50%] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
+)
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({
   className,
+  onPointerDown,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  const drag = useFloatingWindowDrag()
+  return (
+    <div
+      className={cn(
+        // Reserve space for the absolute close button so titles/actions never sit under it
+        "flex cursor-grab flex-col space-y-1.5 pr-10 text-center active:cursor-grabbing sm:text-left",
+        className
+      )}
+      onPointerDown={(event) => {
+        drag?.onDragPointerDown(event)
+        onPointerDown?.(event)
+      }}
+      {...props}
+    />
+  )
+}
 DialogHeader.displayName = "DialogHeader"
 
 const DialogFooter = ({

package/src/ui/floating-window.tsx

@@ -0,0 +1,365 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../lib/utils"
+
+export type FloatingBounds = {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+type ResizeEdge = "n" | "s" | "e" | "w" | "ne" | "nw" | "se" | "sw"
+
+const DEFAULT_MIN_WIDTH = 320
+const DEFAULT_MIN_HEIGHT = 220
+
+function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n))
+}
+
+function isInteractiveDragTarget(target: EventTarget | null) {
+  if (!(target instanceof Element)) return false
+  return Boolean(
+    target.closest(
+      "button,a,input,textarea,select,option,[role='button'],[role='combobox'],[role='menuitem'],[data-no-drag],[data-radix-collection-item]"
+    )
+  )
+}
+
+export type FloatingWindowContextValue = {
+  onDragPointerDown: (event: React.PointerEvent) => void
+}
+
+const FloatingWindowContext =
+  React.createContext<FloatingWindowContextValue | null>(null)
+
+export function useFloatingWindowDrag() {
+  return React.useContext(FloatingWindowContext)
+}
+
+export function FloatingWindowProvider({
+  value,
+  children,
+}: {
+  value: FloatingWindowContextValue
+  children: React.ReactNode
+}) {
+  return (
+    <FloatingWindowContext.Provider value={value}>
+      {children}
+    </FloatingWindowContext.Provider>
+  )
+}
+
+export type UseFloatingWindowOptions = {
+  enabled?: boolean
+  minWidth?: number
+  minHeight?: number
+}
+
+function applyBoundsToDom(el: HTMLElement | null, bounds: FloatingBounds) {
+  if (!el) return
+  el.style.setProperty("left", `${bounds.x}px`)
+  el.style.setProperty("top", `${bounds.y}px`)
+  el.style.setProperty("width", `${bounds.width}px`)
+  el.style.setProperty("height", `${bounds.height}px`)
+  el.style.setProperty("max-width", "none")
+  el.style.setProperty("transform", "none")
+  el.style.setProperty("margin", "0")
+}
+
+export function useFloatingWindow({
+  enabled = true,
+  minWidth = DEFAULT_MIN_WIDTH,
+  minHeight = DEFAULT_MIN_HEIGHT,
+}: UseFloatingWindowOptions = {}) {
+  const nodeRef = React.useRef<HTMLElement | null>(null)
+  const liveBoundsRef = React.useRef<FloatingBounds | null>(null)
+  const [bounds, setBounds] = React.useState<FloatingBounds | null>(null)
+  const dragRef = React.useRef<{
+    pointerId: number
+    offsetX: number
+    offsetY: number
+  } | null>(null)
+  const resizeRef = React.useRef<{
+    pointerId: number
+    edge: ResizeEdge
+    startX: number
+    startY: number
+    origin: FloatingBounds
+  } | null>(null)
+  const rafRef = React.useRef<number | null>(null)
+  const pendingBoundsRef = React.useRef<FloatingBounds | null>(null)
+
+  const measure = React.useCallback((): FloatingBounds | null => {
+    const el = nodeRef.current
+    if (!el) return null
+    const rect = el.getBoundingClientRect()
+    return {
+      x: rect.left,
+      y: rect.top,
+      width: rect.width,
+      height: rect.height,
+    }
+  }, [])
+
+  const paintBounds = React.useCallback((next: FloatingBounds) => {
+    liveBoundsRef.current = next
+    pendingBoundsRef.current = next
+    if (rafRef.current != null) return
+    rafRef.current = window.requestAnimationFrame(() => {
+      rafRef.current = null
+      const pending = pendingBoundsRef.current
+      if (!pending) return
+      applyBoundsToDom(nodeRef.current, pending)
+    })
+  }, [])
+
+  const commitBounds = React.useCallback((next: FloatingBounds) => {
+    liveBoundsRef.current = next
+    applyBoundsToDom(nodeRef.current, next)
+    setBounds(next)
+  }, [])
+
+  const ensureBounds = React.useCallback((): FloatingBounds | null => {
+    if (liveBoundsRef.current) return liveBoundsRef.current
+    const measured = measure()
+    if (!measured) return null
+    // Switch from centered transform layout to absolute coords immediately (no React lag).
+    commitBounds(measured)
+    return measured
+  }, [commitBounds, measure])
+
+  const setNodeRef = React.useCallback((node: HTMLElement | null) => {
+    nodeRef.current = node
+    if (node && liveBoundsRef.current) {
+      applyBoundsToDom(node, liveBoundsRef.current)
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (!enabled) return
+
+    const onPointerMove = (event: PointerEvent) => {
+      const drag = dragRef.current
+      if (drag && event.pointerId === drag.pointerId) {
+        event.preventDefault()
+        const prev = liveBoundsRef.current
+        if (!prev) return
+        const maxX = Math.max(0, window.innerWidth - prev.width)
+        const maxY = Math.max(0, window.innerHeight - 48)
+        paintBounds({
+          ...prev,
+          x: clamp(event.clientX - drag.offsetX, 0, maxX),
+          y: clamp(event.clientY - drag.offsetY, 0, maxY),
+        })
+        return
+      }
+
+      const resize = resizeRef.current
+      if (!resize || event.pointerId !== resize.pointerId) return
+      event.preventDefault()
+      const { edge, startX, startY, origin } = resize
+      const dx = event.clientX - startX
+      const dy = event.clientY - startY
+      let { x, y, width, height } = origin
+
+      if (edge.includes("e")) {
+        width = clamp(origin.width + dx, minWidth, window.innerWidth - origin.x)
+      }
+      if (edge.includes("s")) {
+        height = clamp(
+          origin.height + dy,
+          minHeight,
+          window.innerHeight - origin.y
+        )
+      }
+      if (edge.includes("w")) {
+        const nextWidth = clamp(
+          origin.width - dx,
+          minWidth,
+          origin.x + origin.width
+        )
+        x = origin.x + (origin.width - nextWidth)
+        width = nextWidth
+      }
+      if (edge.includes("n")) {
+        const nextHeight = clamp(
+          origin.height - dy,
+          minHeight,
+          origin.y + origin.height
+        )
+        y = origin.y + (origin.height - nextHeight)
+        height = nextHeight
+      }
+
+      paintBounds({
+        x: clamp(x, 0, Math.max(0, window.innerWidth - width)),
+        y: clamp(y, 0, Math.max(0, window.innerHeight - 48)),
+        width,
+        height,
+      })
+    }
+
+    const onPointerUp = (event: PointerEvent) => {
+      const wasDragging =
+        dragRef.current?.pointerId === event.pointerId ||
+        resizeRef.current?.pointerId === event.pointerId
+      if (dragRef.current?.pointerId === event.pointerId) dragRef.current = null
+      if (resizeRef.current?.pointerId === event.pointerId) {
+        resizeRef.current = null
+      }
+      if (wasDragging && liveBoundsRef.current) {
+        // Final sync into React state after gesture ends.
+        setBounds({ ...liveBoundsRef.current })
+      }
+    }
+
+    window.addEventListener("pointermove", onPointerMove, { passive: false })
+    window.addEventListener("pointerup", onPointerUp)
+    window.addEventListener("pointercancel", onPointerUp)
+    return () => {
+      window.removeEventListener("pointermove", onPointerMove)
+      window.removeEventListener("pointerup", onPointerUp)
+      window.removeEventListener("pointercancel", onPointerUp)
+      if (rafRef.current != null) {
+        window.cancelAnimationFrame(rafRef.current)
+        rafRef.current = null
+      }
+    }
+  }, [enabled, minHeight, minWidth, paintBounds])
+
+  const onDragPointerDown = React.useCallback(
+    (event: React.PointerEvent) => {
+      if (!enabled || event.button !== 0) return
+      if (isInteractiveDragTarget(event.target)) return
+      const current = ensureBounds()
+      if (!current) return
+      event.preventDefault()
+      event.stopPropagation()
+      try {
+        ;(event.currentTarget as HTMLElement).setPointerCapture?.(event.pointerId)
+      } catch {
+        // ignore
+      }
+      dragRef.current = {
+        pointerId: event.pointerId,
+        offsetX: event.clientX - current.x,
+        offsetY: event.clientY - current.y,
+      }
+    },
+    [enabled, ensureBounds]
+  )
+
+  const onResizePointerDown = React.useCallback(
+    (edge: ResizeEdge) => (event: React.PointerEvent) => {
+      if (!enabled || event.button !== 0) return
+      const current = ensureBounds()
+      if (!current) return
+      event.preventDefault()
+      event.stopPropagation()
+      try {
+        ;(event.currentTarget as HTMLElement).setPointerCapture?.(
+          event.pointerId
+        )
+      } catch {
+        // ignore
+      }
+      resizeRef.current = {
+        pointerId: event.pointerId,
+        edge,
+        startX: event.clientX,
+        startY: event.clientY,
+        origin: { ...current },
+      }
+    },
+    [enabled, ensureBounds]
+  )
+
+  const floatingStyle: React.CSSProperties | undefined = bounds
+    ? {
+        left: bounds.x,
+        top: bounds.y,
+        width: bounds.width,
+        height: bounds.height,
+        maxWidth: "none",
+        transform: "none",
+        margin: 0,
+      }
+    : undefined
+
+  const resetBounds = React.useCallback(() => {
+    liveBoundsRef.current = null
+    setBounds(null)
+  }, [])
+
+  const dragContext = React.useMemo(
+    () => ({ onDragPointerDown }),
+    [onDragPointerDown]
+  )
+
+  return {
+    bounds,
+    setNodeRef,
+    floatingStyle,
+    onDragPointerDown,
+    onResizePointerDown,
+    resetBounds,
+    dragContext,
+  }
+}
+
+const RESIZE_HANDLES: Array<{
+  edge: ResizeEdge
+  className: string
+}> = [
+  { edge: "n", className: "left-2 right-2 top-0 h-1.5 cursor-n-resize" },
+  { edge: "s", className: "left-2 right-2 bottom-0 h-1.5 cursor-s-resize" },
+  { edge: "e", className: "top-2 bottom-2 right-0 w-1.5 cursor-e-resize" },
+  { edge: "w", className: "top-2 bottom-2 left-0 w-1.5 cursor-w-resize" },
+  { edge: "ne", className: "right-0 top-0 h-3 w-3 cursor-ne-resize" },
+  { edge: "nw", className: "left-0 top-0 h-3 w-3 cursor-nw-resize" },
+  { edge: "se", className: "right-0 bottom-0 h-3 w-3 cursor-se-resize" },
+  { edge: "sw", className: "left-0 bottom-0 h-3 w-3 cursor-sw-resize" },
+]
+
+export function FloatingWindowChrome({
+  enabled = true,
+  onDragPointerDown,
+  onResizePointerDown,
+  className,
+}: {
+  enabled?: boolean
+  onDragPointerDown: (event: React.PointerEvent) => void
+  onResizePointerDown: (edge: ResizeEdge) => (event: React.PointerEvent) => void
+  className?: string
+}) {
+  if (!enabled) return null
+
+  return (
+    <>
+      <div
+        data-floating-drag-handle
+        onPointerDown={onDragPointerDown}
+        className={cn(
+          "absolute inset-x-10 top-0 z-20 flex h-9 cursor-grab touch-none items-center justify-center active:cursor-grabbing",
+          className
+        )}
+        aria-hidden
+      >
+        <div className="h-1 w-12 rounded-full bg-muted-foreground/40" />
+      </div>
+      {RESIZE_HANDLES.map((handle) => (
+        <div
+          key={handle.edge}
+          data-floating-resize={handle.edge}
+          onPointerDown={onResizePointerDown(handle.edge)}
+          className={cn("absolute z-30 touch-none", handle.className)}
+          aria-hidden
+        />
+      ))}
+    </>
+  )
+}

package/src/ui/index.ts

@@ -18,6 +18,7 @@ export * from "./dialog";
 export * from "./drawer";
 export * from "./dropdown-menu";
 export * from "./empty";
+export * from "./floating-window";
 export * from "./form";
 export * from "./hover-card";
 export * from "./input";

package/src/ui/select.tsx

@@ -5,11 +5,10 @@ import * as SelectPrimitive from "@radix-ui/react-select"
 import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
 import { cn } from "../lib/utils"
+import { dropdownStyle } from "../lib/overlay-z-index"
 
 const Select = SelectPrimitive.Root
-
 const SelectGroup = SelectPrimitive.Group
-
 const SelectValue = SelectPrimitive.Value
 
 const SelectTrigger = React.forwardRef<
@@ -70,12 +69,13 @@ SelectScrollDownButton.displayName =
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
+>(({ className, children, position = "popper", style, ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
+      style={{ ...dropdownStyle, ...style }}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "relative max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className

package/src/ui/sonner.tsx

@@ -10,6 +10,8 @@ import {
 import { useTheme } from "next-themes"
 import { Toaster as Sonner } from "sonner"
 
+import { UI_Z_INDEX } from "../lib/overlay-z-index"
+
 type ToasterProps = React.ComponentProps<typeof Sonner>
 
 const Toaster = ({ ...props }: ToasterProps) => {
@@ -19,6 +21,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
     <Sonner
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
+      style={{ zIndex: UI_Z_INDEX.toast }}
       icons={{
         success: <CircleCheck className="h-4 w-4" />,
         info: <Info className="h-4 w-4" />,

package/src/ui/toast.tsx

@@ -6,6 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { X } from "lucide-react"
 
 import { cn } from "../lib/utils"
+import { UI_Z_INDEX } from "../lib/overlay-z-index"
 
 const ToastProvider = ToastPrimitives.Provider
 
@@ -15,8 +16,9 @@ const ToastViewport = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
+    style={{ zIndex: UI_Z_INDEX.toast }}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "pointer-events-none fixed top-0 right-0 z-toast flex max-h-screen w-full flex-col gap-2 p-4 md:max-w-[420px]",
       className
     )}
     {...props}
@@ -25,7 +27,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto data-[state=closed]:pointer-events-none relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full",
   {
     variants: {
       variant: {

package/src/ui/toaster.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { createPortal } from "react-dom"
+
 import { useToast } from "../hooks/use-toast"
 import {
   Toast,
@@ -13,8 +15,10 @@ import {
 export function Toaster() {
   const { toasts } = useToast()
 
-  return (
-    <ToastProvider>
+  if (typeof document === "undefined") return null
+
+  return createPortal(
+    <ToastProvider swipeDirection="right">
       {toasts.map(function ({ id, title, description, action, ...props }) {
         return (
           <Toast key={id} {...props}>
@@ -30,6 +34,7 @@ export function Toaster() {
         )
       })}
       <ToastViewport />
-    </ToastProvider>
+    </ToastProvider>,
+    document.body
   )
 }