@ai-matrx/design-system 0.36.0 → 0.38.0

package/dist/index.d.cts

@@ -792,6 +792,20 @@ declare function CreatablePicker({ value, options, onSelect, placeholder, search
  *    `aria-describedby` is dropped when there is no description rather than
  *    pointing at nothing.
  *
+ * 6. ON DESKTOP A DIALOG IS A WINDOW, NOT A WALL (0.38.0, Arman 2026-09-23:
+ *    "none of the built-in page ai integrations are accessible because the
+ *    page is totally blocked"). Unless the caller passes `modal`, a desktop
+ *    dialog does not block the page: no overlay, the page, the Agents menu,
+ *    the assist dock and right-click AI stay usable beside it. It behaves like
+ *    a window: a click outside never closes it (`dismissOnOutsideClick` opts a
+ *    quick picker back in), Escape closes it only while focus is inside it
+ *    (Escape in the page belongs to the page), and its `DialogHeader` drags
+ *    it, clamped on screen, double-click to recenter. On a phone it stays the
+ *    blocking bottom sheet — nothing useful sits behind a sheet. Confirmations
+ *    are `AlertDialog`, a different component, and stay blocking. This is a
+ *    LIGHT window: the host's heavy window manager (tray, persistence) is a
+ *    separate system and must not be pulled into every dialog.
+ *
  * SEAM INVERSIONS. The host original resolved its portal target through
  * app-shaped hooks (a popped-out window-panel body). Here that is the
  * package's `PortalContainerProvider` seam, with an explicit `container` prop
@@ -828,6 +842,13 @@ declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitiv
  */
 declare const DialogContentPrimitive: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * Windowed (non-blocking) dialogs never close from a click outside them —
+     * the person is reaching for the page or an AI control beside the window.
+     * Pass `true` for a quick picker that should close when the person clicks
+     * away. Ignored on a blocking dialog, which keeps Radix's behaviour.
+     */
+    dismissOnOutsideClick?: boolean;
     /** Render as a bottom sheet below the mobile breakpoint. Default `true`. */
     mobileSheet?: boolean;
     /** Render the built-in close control. Default `true`. */

package/dist/index.d.ts

@@ -792,6 +792,20 @@ declare function CreatablePicker({ value, options, onSelect, placeholder, search
  *    `aria-describedby` is dropped when there is no description rather than
  *    pointing at nothing.
  *
+ * 6. ON DESKTOP A DIALOG IS A WINDOW, NOT A WALL (0.38.0, Arman 2026-09-23:
+ *    "none of the built-in page ai integrations are accessible because the
+ *    page is totally blocked"). Unless the caller passes `modal`, a desktop
+ *    dialog does not block the page: no overlay, the page, the Agents menu,
+ *    the assist dock and right-click AI stay usable beside it. It behaves like
+ *    a window: a click outside never closes it (`dismissOnOutsideClick` opts a
+ *    quick picker back in), Escape closes it only while focus is inside it
+ *    (Escape in the page belongs to the page), and its `DialogHeader` drags
+ *    it, clamped on screen, double-click to recenter. On a phone it stays the
+ *    blocking bottom sheet — nothing useful sits behind a sheet. Confirmations
+ *    are `AlertDialog`, a different component, and stay blocking. This is a
+ *    LIGHT window: the host's heavy window manager (tray, persistence) is a
+ *    separate system and must not be pulled into every dialog.
+ *
  * SEAM INVERSIONS. The host original resolved its portal target through
  * app-shaped hooks (a popped-out window-panel body). Here that is the
  * package's `PortalContainerProvider` seam, with an explicit `container` prop
@@ -828,6 +842,13 @@ declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitiv
  */
 declare const DialogContentPrimitive: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /**
+     * Windowed (non-blocking) dialogs never close from a click outside them —
+     * the person is reaching for the page or an AI control beside the window.
+     * Pass `true` for a quick picker that should close when the person clicks
+     * away. Ignored on a blocking dialog, which keeps Radix's behaviour.
+     */
+    dismissOnOutsideClick?: boolean;
     /** Render as a bottom sheet below the mobile breakpoint. Default `true`. */
     mobileSheet?: boolean;
     /** Render the built-in close control. Default `true`. */

package/dist/index.js

@@ -1877,7 +1877,8 @@ var Dialog = ({
   children,
   ...props
 }) => {
-  const modal = props.modal ?? true;
+  const isMobile = useIsMobile();
+  const modal = props.modal ?? isMobile;
   return /* @__PURE__ */ jsx21(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx21(DialogPrimitive2.Root, { ...props, modal, children }) });
 };
 Dialog.displayName = "Dialog";
@@ -1926,6 +1927,11 @@ DialogContentPrimitive.displayName = "DialogContentPrimitive";
 var DIALOG_DESKTOP_CLASSES2 = "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_CLASSES2 = "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_OVERRIDE2 = "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 = React17.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 = React17.forwardRef(
   ({
     className,
@@ -1934,15 +1940,50 @@ var DialogContent = React17.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] = React17.useState(
       null
     );
+    const [offset, setOffset] = React17.useState({ x: 0, y: 0 });
+    const dragRef = React17.useRef(null);
+    const handle = React17.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 = React17.useCallback(
       (node) => {
         setContainerEl(node);
@@ -1970,19 +2011,33 @@ var DialogContent = React17.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__ */ jsx21(VisuallyHidden2.Root, { children: /* @__PURE__ */ jsx21(DialogPrimitive2.Title, { children: "Dialog" }) }),
-            /* @__PURE__ */ jsx21(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx21(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx21(DialogWindowHandleContext.Provider, { value: handle, children: /* @__PURE__ */ jsx21(
               PortalContainerProvider,
               {
                 container: containerEl ?? injectedContainer ?? null,
                 children
               }
-            ) }),
+            ) }) }),
             showCloseButton ? /* @__PURE__ */ jsxs10(
               DialogPrimitive2.Close,
               {
@@ -2005,19 +2060,28 @@ DialogContent.displayName = DialogPrimitive2.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx21(
-  "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 = React17.useContext(DialogWindowHandleContext);
+  return /* @__PURE__ */ jsx21(
+    "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,
@@ -2207,7 +2271,7 @@ var DropdownMenuShortcut = ({
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/editable-label.tsx
-import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3, useState as useState4 } from "react";
 import { jsx as jsx23, jsxs as jsxs12 } from "react/jsx-runtime";
 function EditableLabel({
   value,
@@ -2233,7 +2297,7 @@ function EditableLabel({
   const [draft, setDraft] = useState4(value);
   const [error, setError] = useState4(null);
   const [busy, setBusy] = useState4(false);
-  const inputRef = useRef2(null);
+  const inputRef = useRef3(null);
   useEffect2(() => {
     if (!editing) setDraft(value);
   }, [value, editing]);
@@ -2514,7 +2578,7 @@ var Label3 = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
 Label3.displayName = LabelPrimitive.Root.displayName;
 
 // src/overflow-toolbar.tsx
-import { useLayoutEffect, useMemo, useRef as useRef3, useState as useState5 } from "react";
+import { useLayoutEffect, useMemo as useMemo2, useRef as useRef4, useState as useState5 } from "react";
 import { Fragment, jsx as jsx26, jsxs as jsxs14 } from "react/jsx-runtime";
 var GAP_PX = 6;
 var TONE = {
@@ -2596,13 +2660,13 @@ function OverflowToolbar({
   renderOverflowMenu,
   renderTooltip
 }) {
-  const visibleActions = useMemo(
+  const visibleActions = useMemo2(
     () => actions.filter((a) => !a.hidden),
     [actions]
   );
-  const containerRef = useRef3(null);
-  const ghostRef = useRef3(null);
-  const leadingRef = useRef3(null);
+  const containerRef = useRef4(null);
+  const ghostRef = useRef4(null);
+  const leadingRef = useRef4(null);
   const [visibleCount, setVisibleCount] = useState5(visibleActions.length);
   const signature = visibleActions.map(
     (a) => `${a.id}:${a.hideLabel ? 1 : 0}:${a.running ? 1 : 0}:${a.runningLabel ?? ""}:${a.label}`
@@ -4005,15 +4069,15 @@ var TextareaWithPrefix = React32.forwardRef(
 TextareaWithPrefix.displayName = "TextareaWithPrefix";
 
 // src/use-scroll-fade.ts
-import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef5, useState as useState8 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect4, useRef as useRef6, useState as useState8 } from "react";
 var EPSILON = 2;
 function useScrollFade() {
   const [state, setState] = useState8({
     top: false,
     bottom: false
   });
-  const nodeRef = useRef5(null);
-  const cleanupRef = useRef5(null);
+  const nodeRef = useRef6(null);
+  const cleanupRef = useRef6(null);
   const measure = useCallback5(() => {
     const el = nodeRef.current;
     if (!el) return;