react-x11 1.2.0 → 2.0.0

package/src/components/Dialog.js

@@ -3,7 +3,7 @@
 // build-step-free for consumers.
 
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { labelContent, useTheme } from './theme.js';
+import { capTrim, labelContent, useTheme } from './theme.js';
 import { centerRect } from './anchor.js';
 import { XK_ESCAPE } from './keys.js';
 
@@ -14,8 +14,36 @@ const DEFAULT_WIDTH = 360;
 const DEFAULT_HEIGHT = 170;
 
 /**
- * <Dialog open title onClose actions>…</Dialog> — a modal dialog in a
- * `<popup trapFocus grab>`, centred over the owner window.
+ * <Dialog open title onClose actions>…</Dialog> — a dialog in a `<popup>`,
+ * centred over the owner window.
+ *
+ * **The window manager knows it is a dialog** (issue #130). The popup is a
+ * managed window — `overrideRedirect={false}` — with `WM_TRANSIENT_FOR`
+ * pointing at the window that owns it, resolved from the anchor this
+ * component already keeps for placement. Measured against quartz-wm, the
+ * thinnest EWMH implementation in the stack: the dialog is reparented into a
+ * real frame, so it has a titlebar and can be moved and closed the way every
+ * other window can; it loses maximize and fullscreen; and the WM puts
+ * SKIP_TASKBAR and SKIP_PAGER on it, so it is not a second entry in the
+ * taskbar or the alt-tab list. A fuller WM also stacks it above its owner
+ * and iconifies it alongside.
+ *
+ * `managed={false}` goes back to the override-redirect popup 1.x shipped: no
+ * frame, not movable, dismissed by a press anywhere outside (a pointer
+ * grab). That is the right shape for a transient confirmation on a display
+ * with no window manager at all, and the wrong one for anything the user
+ * might want to move.
+ *
+ * `title` is drawn exactly once (issue #370). Managed, it is the frame's
+ * caption and the window manager draws it, so the content starts with the
+ * body; unmanaged there is no frame, so it is drawn as a bold heading at the
+ * top of the content instead. Either way it names the dialog surface for
+ * accessibility (`aria-label`).
+ *
+ * The two differ in how a press outside behaves, and it is not a bug either
+ * way: a managed dialog stays open, because a real dialog does. Escape and
+ * the WM close button both call `onClose`; so does a press outside when
+ * `managed={false}`.
  *
  * The focus behaviour is the renderer's, not this component's: `trapFocus`
  * keeps Tab inside the dialog, stops presses elsewhere from moving focus,
@@ -24,14 +52,19 @@ const DEFAULT_HEIGHT = 170;
  * the first stop; otherwise the dialog surface itself takes focus, so
  * Escape and Tab work immediately (`docs/events.md`, "Focus scopes").
  *
- * Escape closes: keys go to the focused node inside the popup and bubble out
- * through the popup's place in the JSX tree. `grab` makes a press anywhere
- * else in the session close it too. Pointer modality is *not* enforced —
- * widgets in the owner window stay clickable behind the dialog, so use it
- * for confirmations rather than as a security boundary.
+ * Pointer modality is *not* enforced — widgets in the owner window stay
+ * clickable behind the dialog, so use it for confirmations rather than as a
+ * security boundary. `_NET_WM_STATE_MODAL` is the mechanism for that, and it
+ * belongs to the `states` work; it means nothing without the
+ * `WM_TRANSIENT_FOR` this now sets, which is why that had to come first.
  *
- * A `<popup>` is a real X window and needs its size up front, hence explicit
- * `width`/`height` rather than sizing to content.
+ * `width`/`height` are explicit rather than sized to content, and now only
+ * because of where the dialog is *placed*: `centeredRect` needs the size to
+ * work out the offset that centres it over its owner, and that is computed
+ * during the render that opens the popup, before anything has been laid out.
+ * The popup itself could size to its content — see "Natural size" in
+ * docs/elements.md — so this is the anchor math's constraint, not the X
+ * window's.
  */
 export function Dialog({
   open,
@@ -39,8 +72,10 @@ export function Dialog({
   children,
   onClose,
   actions,
+  managed = true,
   width = DEFAULT_WIDTH,
   height = DEFAULT_HEIGHT,
+  style,
   ...boxProps
 }) {
   const theme = useTheme();
@@ -79,7 +114,11 @@ export function Dialog({
   return h(
     'box',
     // out of flow: an anchor for the window geometry, never part of layout
-    { ref: anchor, position: 'absolute', width: 0, height: 0 },
+    {
+      theme,
+      ref: anchor,
+      style: { position: 'absolute', width: 0, height: 0 },
+    },
     rect &&
       h(
         'popup',
@@ -89,46 +128,74 @@ export function Dialog({
           width: rect.width,
           height: rect.height,
           trapFocus: true,
-          grab: true,
+          // A managed window is the window manager's to move, and a
+          // client-side pointer grab over one is a fight nobody wins — the
+          // press that would start a titlebar drag is swallowed instead. So
+          // the grab and the frame are the same choice, made once.
+          overrideRedirect: !managed,
+          grab: !managed,
           windowType: 'dialog',
-          backgroundColor: theme.background,
-          onDismiss: () => onClose?.(),
+          // inert on an override-redirect window, and ntk warns if asked to
+          // write it there, so only the managed dialog claims an owner
+          transientFor: managed ? anchor : undefined,
+          title: managed ? title : undefined,
+          onDismiss: managed ? undefined : () => onClose?.(),
+          // the WM's close button, which a managed dialog now has
+          onCloseRequest: managed ? () => onClose?.() : undefined,
           onKeyDown,
+          style: { backgroundColor: theme.background },
         },
         h(
           'box',
           {
             ref: surface,
-            // focusable but not tabbable: a fallback focus holder, never a
-            // stop in the dialog's own tab order
+            role: 'dialog',
+            'aria-modal': true,
+            'aria-label': typeof title === 'string' ? title : undefined,
             tabIndex: -1,
-            flexGrow: 1,
-            padding: 16,
-            gap: 12,
-            borderWidth: 1,
-            borderColor: theme.border,
-            backgroundColor: theme.background,
             ...boxProps,
+            style: [
+              {
+                flexGrow: 1,
+                padding: 16,
+                gap: 12,
+                borderWidth: theme.borderWidth,
+                borderColor: theme.border,
+                backgroundColor: theme.surface,
+              },
+              style,
+            ],
           },
-          title &&
+          // a managed dialog's title is already in the WM frame's caption;
+          // drawing it again here showed it twice (issue #370). Only the
+          // unmanaged popup, which has no frame, needs the in-content heading.
+          !managed &&
+            title &&
             h(
               'text',
-              { fontSize: 15, fontWeight: 'bold', color: theme.text },
+              {
+                style: [
+                  capTrim,
+                  { fontSize: 15, fontWeight: 'bold', color: theme.text },
+                ],
+              },
               title,
             ),
           h(
             'box',
-            { flexGrow: 1, gap: 8 },
+            { style: { flexGrow: 1, gap: 8 } },
             labelContent(children, { color: theme.text }),
           ),
           actions &&
             h(
               'box',
               {
-                flexDirection: 'row',
-                justifyContent: 'flex-end',
-                alignItems: 'center',
-                gap: 8,
+                style: {
+                  flexDirection: 'row',
+                  justifyContent: 'flex-end',
+                  alignItems: 'center',
+                  gap: 8,
+                },
               },
               actions,
             ),

package/src/components/FileDialog.js

@@ -0,0 +1,491 @@
+// The bottom rung of the file-dialog ladder: a browser react-x11 draws
+// itself, for every machine that has a display and nothing else — ssh, a bare
+// `startx`, a container, a Mac with neither a portal nor `osascript`.
+//
+// It is a **real top-level window**, not a `<popup>`: a file dialog is
+// something the window manager should place, stack and decorate, and
+// `transientFor` is what makes it behave like a dialog rather than a second
+// application. That is also the shape the portal would have given, so an app
+// that moves between machines does not change how its dialog behaves.
+//
+// Deliberately not a re-creation of GTK's chooser. What it owes the user is:
+// get anywhere on the filesystem, see what is there, filter it, type a path
+// when the list is the slow way round, and never trap them — which is the set
+// below and nothing else.
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+
+import { createStyles } from '../styles.js';
+import { Button } from './Button.js';
+import { Checkbox } from './Checkbox.js';
+import { Select } from './Select.js';
+import { Table } from './Table.js';
+import { capTrim, ThemeProvider, useTheme } from './theme.js';
+
+const h = React.createElement;
+
+const ALL_FILES = '__all__';
+
+// A row is one line high, so a name longer than its column ends at the
+// column's edge rather than wrapping into a line and a half of name — and
+// ends in a `…`, the same as the cells `<Table>` renders itself, so a cut
+// name and a short one do not read alike.
+const NOWRAP = Object.freeze({ textWrap: 'nowrap', textOverflow: 'ellipsis' });
+
+// Stat-ing every entry is one syscall each, which is nothing on a local
+// filesystem and very much something on a network mount with ten thousand
+// files in one directory. Past this, sizes and dates are left blank rather
+// than making the dialog take a visible pause to open.
+const STAT_LIMIT = 5000;
+
+const s = createStyles({
+  window: { flexDirection: 'column', padding: 10, gap: 8 },
+  bar: { flexDirection: 'row', gap: 6, alignItems: 'center', flexShrink: 0 },
+  path: { flexGrow: 1, flexBasis: 0 },
+  list: { flexGrow: 1, minHeight: 0 },
+  footer: { flexDirection: 'row', gap: 8, alignItems: 'center', flexShrink: 0 },
+  spacer: { flexGrow: 1, flexBasis: 0 },
+  name: { flexGrow: 1, flexBasis: 0 },
+  error: { fontSize: 12 },
+  hint: { fontSize: 11 },
+});
+
+const KIND_LABEL = { open: 'Open', save: 'Save', folder: 'Select' };
+
+/** `1234567` → `1.2 MB`. Blank for directories and unstat'd entries. */
+function humanSize(bytes) {
+  if (bytes == null) return '';
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let n = bytes;
+  let i = 0;
+  while (n >= 1024 && i < units.length - 1) {
+    n /= 1024;
+    i++;
+  }
+  return `${i === 0 ? n : n.toFixed(1)} ${units[i]}`;
+}
+
+/** `{ name, extensions, mimeTypes }` → a predicate over file names. */
+function matcher(filter) {
+  if (!filter || !filter.extensions?.length) return () => true;
+  const exts = filter.extensions.map((e) =>
+    String(e)
+      .replace(/^[.*]*\.?/, '')
+      .toLowerCase(),
+  );
+  return (name) => {
+    const dot = name.lastIndexOf('.');
+    if (dot < 0) return false;
+    return exts.includes(name.slice(dot + 1).toLowerCase());
+  };
+}
+
+/**
+ * One directory's contents, reloaded whenever the path changes.
+ *
+ * Errors are state rather than throws: a directory you cannot read is an
+ * ordinary thing to click on, and the answer is a message in the dialog, not
+ * an error boundary.
+ */
+function useDirectory(dir) {
+  const [state, setState] = useState({ status: 'loading', entries: [] });
+
+  useEffect(() => {
+    let live = true;
+    setState((prev) => ({ ...prev, status: 'loading' }));
+    (async () => {
+      const fs = await import('node:fs/promises');
+      const path = await import('node:path');
+      // The parent comes back with the listing rather than from a `dirname`
+      // of its own: it is the same answer, and one place that knows how a
+      // path is taken apart is one place to be wrong.
+      const above = path.dirname(dir);
+      const parent = above === dir ? null : above;
+      let names;
+      try {
+        names = await fs.readdir(dir, { withFileTypes: true });
+      } catch (err) {
+        if (live)
+          setState({
+            status: 'error',
+            message: err.message,
+            entries: [],
+            parent,
+          });
+        return;
+      }
+      const withStats = names.length <= STAT_LIMIT;
+      const entries = await Promise.all(
+        names.map(async (entry) => {
+          const full = path.join(dir, entry.name);
+          // A symlink's own dirent says 'link'; what matters to the user is
+          // what it points at, so follow it and fall back to the link itself
+          // when it dangles.
+          let directory = entry.isDirectory();
+          let size = null;
+          let modified = 0;
+          if (withStats) {
+            try {
+              const st = await fs.stat(full);
+              directory = st.isDirectory();
+              size = directory ? null : st.size;
+              modified = st.mtimeMs;
+            } catch {
+              directory = entry.isDirectory();
+            }
+          }
+          return {
+            id: full,
+            name: entry.name,
+            path: full,
+            directory,
+            size,
+            modified,
+          };
+        }),
+      );
+      if (live) setState({ status: 'ready', entries, parent });
+    })();
+    return () => {
+      live = false;
+    };
+  }, [dir]);
+
+  return state;
+}
+
+/**
+ * `<FileDialog>` — the built-in file browser.
+ *
+ * Rendered for you by `useFileDialog()` when there is no portal and no
+ * `osascript`; exported because an app that wants this dialog *always* (a
+ * kiosk, a test, somewhere the desktop's own dialog is wrong) should not have
+ * to break the machine to get it.
+ *
+ * `onDone(paths | null)` is called exactly once — `null` for cancel.
+ */
+export function FileDialog({
+  kind = 'open',
+  title,
+  startFolder,
+  defaultName = '',
+  filters = [],
+  multiple = false,
+  acceptLabel,
+  parentWindow,
+  onDone,
+  theme: themeProp,
+  width = 640,
+  height = 460,
+}) {
+  // `theme` as a prop, because the dialog is often rendered on a **root of its
+  // own** (see filedialoghooks.js) where there is no provider above it to
+  // inherit from — the palette has to be carried across rather than read.
+  const contextTheme = useTheme();
+  const theme = themeProp ?? contextTheme;
+  const [dir, setDir] = useState(startFolder || process.cwd());
+  const [typedPath, setTypedPath] = useState(dir);
+  const [name, setName] = useState(defaultName);
+  const [showHidden, setShowHidden] = useState(false);
+  const [filterId, setFilterId] = useState(filters.length ? '0' : ALL_FILES);
+  // the whole row, not its path: "is this a directory" is the difference
+  // between opening a file and going into a folder, and the button that has
+  // to tell them apart only ever sees what is in here
+  const [cursor, setCursor] = useState(null);
+  const [picked, setPicked] = useState(() => new Set());
+  const settled = useRef(false);
+
+  const { status, entries, message, parent } = useDirectory(dir);
+
+  // `onDone` exactly once, however the dialog ends — a caller is awaiting a
+  // promise, and settling it twice or not at all are both worse than any
+  // rendering bug in here.
+  const finish = useCallback(
+    (result) => {
+      if (settled.current) return;
+      settled.current = true;
+      onDone?.(result);
+    },
+    [onDone],
+  );
+
+  const activeFilter =
+    filterId === ALL_FILES ? null : (filters[Number(filterId)] ?? null);
+  const matches = useMemo(() => matcher(activeFilter), [activeFilter]);
+
+  const rows = useMemo(() => {
+    const visible = entries.filter((e) => {
+      if (!showHidden && e.name.startsWith('.')) return false;
+      if (kind === 'folder') return e.directory;
+      return e.directory || matches(e.name);
+    });
+    // Directories first, then by name — the order every file browser uses,
+    // and the reason `sort` is passed to Table already applied.
+    visible.sort((a, b) =>
+      a.directory !== b.directory
+        ? a.directory
+          ? -1
+          : 1
+        : a.name.localeCompare(b.name),
+    );
+    // `..` first, and only where there is somewhere to go: at the root the
+    // parent is the root, and a row that does nothing is worse than no row.
+    // It is a real entry rather than a special case in the table, so it
+    // opens on the same double click and the same Enter as any directory.
+    return parent
+      ? [
+          {
+            id: parent,
+            name: '..',
+            path: parent,
+            directory: true,
+            parent: true,
+            size: null,
+            modified: 0,
+          },
+          ...visible,
+        ]
+      : visible;
+  }, [entries, showHidden, matches, kind, parent]);
+
+  // A new directory is a new list; a stale cursor would point at a row that
+  // is not there and a stale tick-set would return paths the user cannot see.
+  useEffect(() => {
+    setCursor(null);
+    setPicked(new Set());
+    setTypedPath(dir);
+  }, [dir]);
+
+  const goUp = useCallback(() => {
+    if (parent) setDir(parent);
+  }, [parent]);
+
+  const toggle = useCallback((row) => {
+    setPicked((prev) => {
+      const next = new Set(prev);
+      if (next.has(row.path)) next.delete(row.path);
+      else next.add(row.path);
+      return next;
+    });
+  }, []);
+
+  const activate = useCallback(
+    (id, row) => {
+      if (!row) return;
+      if (row.directory && kind !== 'folder') return void setDir(row.path);
+      if (row.directory && kind === 'folder') return void setDir(row.path);
+      if (kind === 'save') return setName(row.name);
+      finish([row.path]);
+    },
+    [kind, finish],
+  );
+
+  const accept = useCallback(async () => {
+    const path = await import('node:path');
+    if (kind === 'save') {
+      if (!name.trim()) return;
+      return finish([path.resolve(dir, name.trim())]);
+    }
+    if (kind === 'folder') {
+      // no selection means "this one", which is what the path bar shows
+      const chosen = picked.size ? [...picked] : cursor ? [cursor.path] : [dir];
+      return finish(chosen);
+    }
+    // Opening a *file*, with a directory under the cursor: go in. Returning
+    // the directory as the answer is what it used to do, which handed the
+    // caller a path that is not a file — and `..` made that one click away.
+    if (cursor?.directory) return void setDir(cursor.path);
+    const chosen =
+      multiple && picked.size ? [...picked] : cursor ? [cursor.path] : [];
+    if (!chosen.length) return;
+    finish(chosen);
+  }, [kind, name, dir, picked, cursor, multiple, finish]);
+
+  const columns = useMemo(() => {
+    const cols = [];
+    if (multiple && kind !== 'save') {
+      cols.push({
+        id: 'pick',
+        label: '',
+        width: 28,
+        render: (row) =>
+          row.directory
+            ? null
+            : h(Checkbox, {
+                checked: picked.has(row.path),
+                onChange: () => toggle(row),
+              }),
+      });
+    }
+    cols.push({
+      id: 'name',
+      label: 'Name',
+      width: 300,
+      value: (row) => row.name,
+      // The accent that marks a directory is the *same value* as the fill the
+      // selected row gets — `accent` and `hoverBackground` are one colour in
+      // both built-in palettes — so a selected directory was accent on accent
+      // and could not be read at all. On the bar the selection's own text
+      // colour is the readable one in either scheme, and the trailing `/` is
+      // what still says "directory".
+      render: (row, { selected }) =>
+        h(
+          'text',
+          {
+            style: [
+              capTrim,
+              NOWRAP,
+              {
+                color: selected
+                  ? theme.hoverText
+                  : row.directory
+                    ? theme.accent
+                    : theme.text,
+              },
+            ],
+          },
+          // `..` is already the name of a place, not a name that needs one:
+          // `../` reads as a path fragment where every other row reads as a
+          // thing in this directory.
+          row.directory && !row.parent ? `${row.name}/` : row.name,
+        ),
+    });
+    cols.push({
+      id: 'size',
+      label: 'Size',
+      width: 90,
+      align: 'right',
+      value: (row) => humanSize(row.size),
+    });
+    cols.push({
+      id: 'modified',
+      // A locale date *and* time: 23 characters at the widest — "12/31/2026,
+      // 12:30:05 PM" — and a column that cannot hold one is the column that
+      // showed a sliced two-line date before cells stopped wrapping. Sized
+      // for the long form rather than for the short one.
+      label: 'Modified',
+      width: 200,
+      value: (row) =>
+        row.modified ? new Date(row.modified).toLocaleString() : '',
+    });
+    return cols;
+  }, [multiple, kind, picked, toggle, theme]);
+
+  const filterOptions = [
+    ...filters.map((f, i) => ({
+      value: String(i),
+      label: f.name ?? `Filter ${i + 1}`,
+    })),
+    { value: ALL_FILES, label: 'All files' },
+  ];
+
+  const acceptText =
+    acceptLabel ??
+    (multiple && picked.size
+      ? `${KIND_LABEL[kind]} (${picked.size})`
+      : KIND_LABEL[kind]);
+
+  return h(
+    'window',
+    {
+      title: title ?? `${KIND_LABEL[kind]} — react-x11`,
+      width,
+      height,
+      minWidth: 420,
+      minHeight: 300,
+      transientFor: parentWindow ?? undefined,
+      // The palette goes on the window as a **prop** as well as on the context
+      // below: a `$token` in a style resolves against the nearest `theme` prop
+      // by walking the node tree, which knows nothing about React context.
+      theme,
+      style: { flexDirection: 'column', backgroundColor: theme.background },
+      onCloseRequest: () => finish(null),
+      onKeyDown: (e) => {
+        if (e.key === 'Escape') finish(null);
+      },
+    },
+    h(
+      ThemeProvider,
+      { value: theme, style: s.window },
+
+      // Where you are, and the escape hatch for everywhere the list is the slow
+      // way round: type a path, press Enter.
+      h(
+        'box',
+        { style: s.bar },
+        h(Button, { onPress: goUp }, 'Up'),
+        h('textinput', {
+          value: typedPath,
+          onChange: (e) => setTypedPath(e.value),
+          onKeyDown: (e) => {
+            if (e.key === 'Enter') setDir(typedPath.trim() || dir);
+          },
+          style: s.path,
+        }),
+      ),
+
+      status === 'error'
+        ? h(
+            'text',
+            { style: [s.error, { color: '#dc2626' }] },
+            `Cannot read ${dir} — ${message}`,
+          )
+        : h(Table, {
+            columns,
+            rows,
+            selected: cursor?.id ?? null,
+            onSelect: (id, row) => {
+              setCursor(row ?? null);
+              if (multiple && kind !== 'save' && row && !row.directory)
+                toggle(row);
+              if (kind === 'save' && row && !row.directory) setName(row.name);
+            },
+            onActivate: activate,
+            style: s.list,
+          }),
+
+      kind === 'save'
+        ? h(
+            'box',
+            { style: s.bar },
+            h('text', null, 'Name'),
+            h('textinput', {
+              value: name,
+              onChange: (e) => setName(e.value),
+              onKeyDown: (e) => {
+                if (e.key === 'Enter') accept();
+              },
+              style: s.name,
+            }),
+          )
+        : null,
+
+      h(
+        'box',
+        { style: s.footer },
+        h(Checkbox, {
+          checked: showHidden,
+          onChange: (e) => setShowHidden(Boolean(e.value)),
+          label: 'Show hidden',
+        }),
+        filters.length
+          ? h(Select, {
+              options: filterOptions,
+              value: filterId,
+              onChange: (e) => setFilterId(e.value),
+              style: { width: 180 },
+            })
+          : null,
+        h('box', { style: s.spacer }),
+        h(Button, { onPress: () => finish(null) }, 'Cancel'),
+        h(Button, { primary: true, onPress: accept }, acceptText),
+      ),
+    ),
+  );
+}