@ai-matrx/design-system 0.37.1 → 0.38.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.38.0 — 2026-09-23
+
+**On desktop a Dialog is a window, not a wall.** (register ARE-006, `common-docs/projects/ai-reachable-everywhere/REGISTER.md`.)
+
+Arman, on a blocking settings dialog: *"none of the built-in page ai integrations are accessible because the page is totally blocked."* Unless the caller passes `modal`, a desktop `Dialog` no longer blocks the page: no overlay, and the page, its menus and every AI control beside it stay usable. It behaves like a light window:
+
+* a click outside never closes it — `DialogContent dismissOnOutsideClick` opts a quick picker back in;
+* Escape closes it only when pressed inside it — Escape pressed in the page belongs to the page;
+* `DialogHeader` drags it (clamped on screen, double-click recenters);
+* it carries its own shadow and ring, since there is no scrim.
+
+Unchanged: the API (`open`, `onOpenChange`, `DialogTrigger`, `DialogClose`); `AlertDialog` / `ConfirmDialog` (a different component, still blocking); the phone bottom sheet (still blocking); any caller passing `modal` explicitly. `SavedViewsControl` no longer shows its error twice while its save window is open (the page is visible now).
+
+**Consumer action:** none required. A screen that genuinely must block (a destructive step that is not a confirmation) passes `modal`. A screen whose content relied on closing when the person clicked away passes `dismissOnOutsideClick`. A test that queries the whole document for a role the page ALSO carries must scope to the dialog (`within(dialog)`), because the page behind is no longer hidden from assistive technology.
+
 ## 0.37.1 — 2026-09-23 (0.37.0 was tagged but its dts build failed under TypeScript 6 before the registry; same contents)
 
 **Four data-table changes that were on main and never published.** (published by lane

package/dist/content-transfer.cjs

@@ -269,7 +269,8 @@ var Dialog = ({
   children,
   ...props
 }) => {
-  const modal = props.modal ?? true;
+  const isMobile = useIsMobile();
+  const modal = props.modal ?? isMobile;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Root, { ...props, modal, children }) });
 };
 Dialog.displayName = "Dialog";
@@ -315,6 +316,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,
@@ -323,15 +329,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);
@@ -359,19 +400,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__ */ (0, import_jsx_runtime5.jsx)(VisuallyHidden.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogPrimitive.Title, { children: "Dialog" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogWindowHandleContext.Provider, { value: handle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               PortalContainerProvider,
               {
                 container: containerEl ?? injectedContainer ?? null,
                 children
               }
-            ) }),
+            ) }) }),
             showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
               DialogPrimitive.Close,
               {
@@ -394,19 +449,28 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-  "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__ */ (0, import_jsx_runtime5.jsx)(
+    "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,