@ai-matrx/design-system 0.37.1 → 0.38.0

package/dist/data-table/data-row-inspector.js

@@ -227,7 +227,8 @@ var Dialog = ({
   children,
   ...props
 }) => {
-  const modal = props.modal ?? true;
+  const isMobile = useIsMobile();
+  const modal = props.modal ?? isMobile;
   return /* @__PURE__ */ jsx5(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx5(DialogPrimitive.Root, { ...props, modal, children }) });
 };
 Dialog.displayName = "Dialog";
@@ -273,6 +274,11 @@ DialogContentPrimitive.displayName = "DialogContentPrimitive";
 var DIALOG_DESKTOP_CLASSES = "matrx-dialog-card fixed inset-0 z-[10000] m-auto grid h-fit min-w-0 w-full max-w-lg gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg";
 var DIALOG_MOBILE_SHEET_CLASSES = "matrx-mobile-sheet matrx-dialog-card fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 var DIALOG_MOBILE_SHEET_OVERRIDE = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-none w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
+var DialogWindowHandleContext = React5.createContext(null);
+var WINDOW_KEEP_VISIBLE = 80;
+function isInteractiveTarget(target) {
+  return target instanceof Element && Boolean(target.closest("button, a, input, textarea, select, [role='button'], [contenteditable='true']"));
+}
 var DialogContent = React5.forwardRef(
   ({
     className,
@@ -281,15 +287,50 @@ var DialogContent = React5.forwardRef(
     animated = true,
     showCloseButton = true,
     container,
+    dismissOnOutsideClick = false,
+    onInteractOutside,
+    onEscapeKeyDown,
+    style,
     ...props
   }, ref) => {
     const isMobile = useIsMobile();
     const isModal = useRadixDialogModal();
     const injectedContainer = usePortalContainer(container);
     const asSheet = mobileSheet && isMobile;
+    const windowed = !isModal && !asSheet;
     const [containerEl, setContainerEl] = React5.useState(
       null
     );
+    const [offset, setOffset] = React5.useState({ x: 0, y: 0 });
+    const dragRef = React5.useRef(null);
+    const handle = React5.useMemo(() => {
+      if (!windowed) return null;
+      const clamp = (value, limit) => Math.max(-limit, Math.min(limit, value));
+      return {
+        onPointerDown: (event) => {
+          if (event.button !== 0 || isInteractiveTarget(event.target)) return;
+          dragRef.current = { x: event.clientX, y: event.clientY, baseX: offset.x, baseY: offset.y };
+          event.currentTarget.setPointerCapture?.(event.pointerId);
+        },
+        onPointerMove: (event) => {
+          const start = dragRef.current;
+          if (!start) return;
+          setOffset({
+            x: clamp(start.baseX + event.clientX - start.x, window.innerWidth / 2 - WINDOW_KEEP_VISIBLE / 2),
+            y: clamp(start.baseY + event.clientY - start.y, window.innerHeight / 2 - WINDOW_KEEP_VISIBLE / 2)
+          });
+        },
+        onPointerUp: (event) => {
+          if (!dragRef.current) return;
+          dragRef.current = null;
+          event.currentTarget.releasePointerCapture?.(event.pointerId);
+        },
+        onPointerCancel: () => {
+          dragRef.current = null;
+        },
+        onDoubleClick: () => setOffset({ x: 0, y: 0 })
+      };
+    }, [windowed, offset.x, offset.y]);
     const mergedRef = React5.useCallback(
       (node) => {
         setContainerEl(node);
@@ -317,19 +358,33 @@ var DialogContent = React5.forwardRef(
             // can sit beside a host's floating window manager (which starts at
             // z=1000); staying below that boundary makes a newly focused window
             // usable without coupling the two systems.
-            !isModal && "z-[900]"
+            !isModal && "z-[900]",
+            // Without an overlay the card needs its own separation from the page.
+            windowed && "shadow-2xl ring-1 ring-border/60"
           ),
+          style: windowed && (offset.x !== 0 || offset.y !== 0) ? { ...style, translate: `${offset.x}px ${offset.y}px` } : style,
+          onInteractOutside: (event) => {
+            onInteractOutside?.(event);
+            if (windowed && !dismissOnOutsideClick) event.preventDefault();
+          },
+          onEscapeKeyDown: (event) => {
+            onEscapeKeyDown?.(event);
+            const pressedIn = event.target instanceof Node && event.target !== document.body ? event.target : document.activeElement;
+            if (windowed && containerEl && !(pressedIn && containerEl.contains(pressedIn))) {
+              event.preventDefault();
+            }
+          },
           ...hasDescription ? {} : { "aria-describedby": void 0 },
           ...props,
           children: [
             hasTitle ? null : /* @__PURE__ */ jsx5(VisuallyHidden.Root, { children: /* @__PURE__ */ jsx5(DialogPrimitive.Title, { children: "Dialog" }) }),
-            /* @__PURE__ */ jsx5(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx5(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx5(DialogWindowHandleContext.Provider, { value: handle, children: /* @__PURE__ */ jsx5(
               PortalContainerProvider,
               {
                 container: containerEl ?? injectedContainer ?? null,
                 children
               }
-            ) }),
+            ) }) }),
             showCloseButton ? /* @__PURE__ */ jsxs2(
               DialogPrimitive.Close,
               {
@@ -352,19 +407,28 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx5(
-  "div",
-  {
-    "data-slot": "dialog-header",
-    className: cn(
-      // DialogContent owns an absolute close control. Reserve its hit area in
-      // every header so trailing actions never render underneath it.
-      "flex flex-col space-y-1.5 pr-12 text-center sm:text-left",
-      className
-    ),
-    ...props
-  }
-);
+}) => {
+  const handle = React5.useContext(DialogWindowHandleContext);
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      ...handle ? {
+        ...handle,
+        "data-window-handle": "",
+        title: "Drag to move \xB7 double-click to recenter"
+      } : {},
+      className: cn(
+        // DialogContent owns an absolute close control. Reserve its hit area in
+        // every header so trailing actions never render underneath it.
+        "flex flex-col space-y-1.5 pr-12 text-center sm:text-left",
+        handle && "cursor-grab select-none active:cursor-grabbing",
+        className
+      ),
+      ...props
+    }
+  );
+};
 DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
@@ -2991,7 +3055,7 @@ function CopyButtons(props) {
 // src/data-table/MatrxUuidCell.tsx
 import {
   useEffect as useEffect4,
-  useRef as useRef4,
+  useRef as useRef5,
   useState as useState7
 } from "react";
 
@@ -3079,7 +3143,7 @@ function MatrxUuidCell({
   const [copied, setCopied] = useState7(false);
   const [opening, setOpening] = useState7(false);
   const [peekOpen, setPeekOpen] = useState7(false);
-  const timer = useRef4(null);
+  const timer = useRef5(null);
   useEffect4(
     () => () => {
       if (timer.current) clearTimeout(timer.current);