react-x11 0.0.1 → 1.2.0

package/src/components/Radio.js

@@ -0,0 +1,95 @@
+// Widget components built purely on the host primitives — no reconciler
+// support needed. Plain createElement (no JSX) so the library stays
+// build-step-free for consumers.
+
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import { labelContent, useControl, useTheme } from './theme.js';
+import { XK_DOWN, XK_LEFT, XK_RIGHT, XK_UP } from './keys.js';
+
+const h = React.createElement;
+
+const RadioGroupContext = React.createContext(null);
+
+/**
+ * <RadioGroup value onChange>…<Radio value=…>label</Radio>…</RadioGroup> —
+ * exclusive choice. Arrow keys move the selection through the group in
+ * mount order (wrapping); click or Space selects the focused radio.
+ */
+export function RadioGroup({ value, onChange, children, ...boxProps }) {
+  const order = useRef([]).current;
+  const ctx = useMemo(
+    () => ({
+      value,
+      onChange,
+      register: (v) => {
+        order.push(v);
+        return () => order.splice(order.indexOf(v), 1);
+      },
+      move: (delta) => {
+        if (order.length === 0) return;
+        const i = order.indexOf(value);
+        const next = order[(i + delta + order.length) % order.length];
+        if (next !== value) onChange?.(next);
+      },
+    }),
+    [value, onChange, order],
+  );
+  return h(
+    'box',
+    { gap: 6, ...boxProps },
+    h(RadioGroupContext.Provider, { value: ctx }, children),
+  );
+}
+
+export function Radio({ value, children, label, disabled = false }) {
+  const theme = useTheme();
+  const group = useContext(RadioGroupContext);
+  if (!group) {
+    throw new Error('react-x11: <Radio> must be inside a <RadioGroup>');
+  }
+  useEffect(() => group.register(value), [group, value]);
+  const selected = group.value === value;
+  const { focused, props } = useControl(disabled, () => {
+    if (!selected) group.onChange?.(value);
+  });
+  const onKeyDown = props.onKeyDown;
+  if (onKeyDown) {
+    props.onKeyDown = (ev) => {
+      if (ev.keysym === XK_DOWN || ev.keysym === XK_RIGHT) group.move(1);
+      else if (ev.keysym === XK_UP || ev.keysym === XK_LEFT) group.move(-1);
+      else onKeyDown(ev);
+    };
+  }
+  const fill = disabled ? theme.dim : theme.accent;
+  return h(
+    'box',
+    { flexDirection: 'row', alignItems: 'center', gap: 8, ...props },
+    h(
+      'box',
+      {
+        width: 16,
+        height: 16,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: selected
+          ? fill
+          : focused
+            ? theme.borderActive
+            : theme.border,
+        backgroundColor: theme.background,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      selected &&
+        h('box', {
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: fill,
+        }),
+    ),
+    labelContent(children ?? label, {
+      color: disabled ? theme.dim : theme.text,
+    }),
+  );
+}

package/src/components/Select.js

@@ -0,0 +1,272 @@
+// Widget components built purely on the host primitives — no reconciler
+// support needed. Plain createElement (no JSX) so the library stays
+// build-step-free for consumers.
+
+import React, { useEffect, useRef, useState } from 'react';
+import { useTheme } from './theme.js';
+import { useAnchor } from './anchor.js';
+import { typeAheadChar, useTypeAhead } from './typeahead.js';
+import {
+  XK_DOWN,
+  XK_END,
+  XK_ESCAPE,
+  XK_HOME,
+  XK_PAGE_DOWN,
+  XK_PAGE_UP,
+  XK_RETURN,
+  XK_UP,
+} from './keys.js';
+
+const h = React.createElement;
+
+const ITEM_HEIGHT = 28;
+
+const MAX_MENU_HEIGHT = 220;
+
+function normalizeOption(option) {
+  return typeof option === 'object' && option !== null
+    ? option
+    : { value: option, label: String(option) };
+}
+
+function Option({ option, selected, active, onPick, onHover, nodeRef }) {
+  const theme = useTheme();
+  // one highlight, shared by pointer and keyboard: hovering moves the
+  // active index rather than tracking a second, competing state
+  return h(
+    'box',
+    {
+      ref: nodeRef,
+      height: ITEM_HEIGHT,
+      justifyContent: 'center',
+      paddingLeft: 10,
+      cursor: 'pointer',
+      backgroundColor: active ? theme.hoverBackground : theme.background,
+      onMouseEnter: () => onHover?.(),
+      onClick: () => onPick(option),
+    },
+    h(
+      'text',
+      {
+        color: active ? theme.hoverText : theme.text,
+        fontWeight: selected ? 'bold' : 'normal',
+      },
+      option.label,
+    ),
+  );
+}
+
+/**
+ * <Select value options onChange placeholder width …boxProps> — a dropdown
+ * built on <popup>. The menu is a real override-redirect X11 window
+ * anchored below the trigger (owner window position + trigger rect).
+ * Closes on pick, Escape, toggling the trigger, or focus loss within the
+ * owner window.
+ *
+ * Keyboard (the trigger keeps focus while the menu is open — the popup is
+ * override-redirect and never takes it): Up/Down open the menu, then move
+ * the active option with wrapping; Home/End jump to the ends; Enter/Space
+ * pick the active option (or open the menu when closed); Escape closes.
+ * The active option is scrolled into view.
+ */
+export function Select({
+  value,
+  options = [],
+  onChange,
+  placeholder = 'Select…',
+  width,
+  ...boxProps
+}) {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [anchor, setAnchor] = useState(null);
+  const [focused, setFocused] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const triggerRef = useRef(null);
+  const scrollRef = useRef(null);
+  const activeRef = useRef(null);
+
+  const measureAnchor = useAnchor(triggerRef);
+  const typeAhead = useTypeAhead();
+
+  const normalized = options.map(normalizeOption);
+  const current = normalized.find((o) => o.value === value);
+  const menuHeight = Math.min(
+    normalized.length * ITEM_HEIGHT + 8,
+    MAX_MENU_HEIGHT,
+  );
+
+  const close = () => setOpen(false);
+  const openMenu = () => {
+    const node = triggerRef.current;
+    if (!node) return;
+    // shared anchoring: also flips the menu above the trigger when there is
+    // no room below, instead of opening off the bottom of the screen
+    const rect = measureAnchor({ placement: 'bottom', height: menuHeight + 2 });
+    if (!rect) return;
+    setAnchor(rect);
+    const selected = normalized.findIndex((o) => o.value === value);
+    setActiveIndex(selected >= 0 ? selected : 0);
+    setOpen(true);
+  };
+  const toggle = () => (open ? close() : openMenu());
+
+  const pick = (option) => {
+    close();
+    if (option.value !== value) onChange?.(option.value);
+  };
+
+  const move = (delta) => {
+    const count = normalized.length;
+    if (!count) return;
+    setActiveIndex((i) => (i < 0 ? 0 : (i + delta + count) % count));
+  };
+
+  const onKeyDown = (ev) => {
+    const count = normalized.length;
+    switch (ev.keysym) {
+      case XK_ESCAPE:
+        if (open) close();
+        return;
+      case XK_DOWN:
+      case XK_UP:
+        if (open) move(ev.keysym === XK_DOWN ? 1 : -1);
+        else openMenu();
+        return;
+      case XK_HOME:
+      case XK_END:
+        if (open && count)
+          setActiveIndex(ev.keysym === XK_HOME ? 0 : count - 1);
+        return;
+      case XK_PAGE_UP:
+      case XK_PAGE_DOWN: {
+        // a page is what the menu shows at once, so paging lines up with
+        // what the user can see rather than an arbitrary count
+        if (!open || !count) return;
+        const page = Math.max(1, Math.floor(MAX_MENU_HEIGHT / ITEM_HEIGHT));
+        const dir = ev.keysym === XK_PAGE_DOWN ? 1 : -1;
+        const from = activeIndex < 0 ? 0 : activeIndex;
+        setActiveIndex(Math.min(count - 1, Math.max(0, from + dir * page)));
+        return;
+      }
+      default:
+        break;
+    }
+    if (ev.codepoint === 32 || ev.keysym === XK_RETURN) {
+      const option = open ? normalized[activeIndex] : null;
+      if (option) pick(option);
+      else toggle();
+      return;
+    }
+
+    // type-ahead: with the menu open it moves the highlight; closed, it
+    // changes the value outright, the way a native select does
+    const char = typeAheadChar(ev);
+    if (!char) return;
+    const current = open
+      ? activeIndex
+      : normalized.findIndex((o) => o.value === value);
+    const i = typeAhead(char, normalized, current, (o) => o.label);
+    if (i < 0) return;
+    if (open) setActiveIndex(i);
+    else if (normalized[i].value !== value) onChange?.(normalized[i].value);
+  };
+
+  // keep the highlighted option visible while arrowing through a menu that
+  // overflows MAX_MENU_HEIGHT (resolved on the popup's next layout pass)
+  useEffect(() => {
+    if (open) scrollRef.current?.scrollIntoView(activeRef.current);
+  }, [open, activeIndex]);
+
+  return h(
+    'box',
+    {
+      ref: triggerRef,
+      focusable: true,
+      cursor: 'pointer',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      width,
+      padding: 8,
+      paddingLeft: 10,
+      paddingRight: 10,
+      borderWidth: 1,
+      borderRadius: 4,
+      borderColor: focused || open ? theme.borderActive : theme.border,
+      backgroundColor: theme.background,
+      onClick: toggle,
+      onFocus: () => setFocused(true),
+      onBlur: () => {
+        setFocused(false);
+        close();
+      },
+      onKeyDown,
+      ...boxProps,
+    },
+    h(
+      'text',
+      { color: current ? theme.text : theme.dim },
+      current ? current.label : placeholder,
+    ),
+    h('box', { flexGrow: 1 }),
+    h('canvas', {
+      width: 10,
+      height: 6,
+      onDraw: (ctx, { width: w, height: hgt }) => {
+        ctx.fillStyle = theme.dim;
+        ctx.beginPath();
+        ctx.moveTo(0, 0);
+        ctx.lineTo(w, 0);
+        ctx.lineTo(w / 2, hgt);
+        ctx.closePath();
+        ctx.fill();
+      },
+    }),
+    open &&
+      anchor &&
+      h(
+        'popup',
+        {
+          x: anchor.x,
+          y: anchor.y,
+          width: anchor.width,
+          height: menuHeight + 2,
+          backgroundColor: theme.background,
+          // a press anywhere else closes the menu, the window frame
+          // included — see PopupNode's `grab`
+          grab: true,
+          onDismiss: close,
+        },
+        h(
+          'box',
+          {
+            flexGrow: 1,
+            // yoga's default flexShrink is 0: without this the frame keeps
+            // its content height, the scrollview inside it never shrinks to
+            // the viewport, and a menu longer than MAX_MENU_HEIGHT gets
+            // clipped by the popup's edge instead of scrolling
+            flexShrink: 1,
+            borderWidth: 1,
+            borderColor: theme.border,
+            backgroundColor: theme.background,
+          },
+          h(
+            'scrollview',
+            { ref: scrollRef, flexGrow: 1, padding: 4 },
+            normalized.map((option, index) =>
+              h(Option, {
+                key: String(option.value),
+                option,
+                selected: option.value === value,
+                active: index === activeIndex,
+                nodeRef: index === activeIndex ? activeRef : undefined,
+                onHover: () => setActiveIndex(index),
+                onPick: pick,
+              }),
+            ),
+          ),
+        ),
+      ),
+  );
+}

package/src/components/Slider.js

@@ -0,0 +1,177 @@
+// Widget components built purely on the host primitives — no reconciler
+// support needed. Plain createElement (no JSX) so the library stays
+// build-step-free for consumers.
+
+import React, { useRef, useState } from 'react';
+import { useTheme } from './theme.js';
+import {
+  XK_DOWN,
+  XK_END,
+  XK_HOME,
+  XK_LEFT,
+  XK_PAGE_DOWN,
+  XK_PAGE_UP,
+  XK_RIGHT,
+  XK_UP,
+} from './keys.js';
+
+const h = React.createElement;
+
+const SLIDER_THUMB = 16;
+
+/**
+ * <Slider value min max step onChange disabled …boxProps> — draggable
+ * value control.
+ *
+ * Dragging uses pointer capture (`ev.capturePointer()`): once the press
+ * lands, move and up events keep coming to the track even when the pointer
+ * leaves it, so the thumb still tracks a pointer that has wandered far
+ * outside the widget — and releasing out there still ends the drag.
+ *
+ * Keyboard: arrows step, Home/End jump to the ends, PageUp/PageDown move
+ * by ten steps.
+ */
+export function Slider({
+  value = 0,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  disabled = false,
+  width,
+  height = 4,
+  ...boxProps
+}) {
+  const theme = useTheme();
+  const [focused, setFocused] = useState(false);
+  const [dragging, setDragging] = useState(false);
+  const trackRef = useRef(null);
+
+  const span = max - min || 1;
+  const clamp = (v) => Math.min(max, Math.max(min, v));
+  const quantize = (v) => {
+    if (!step) return clamp(v);
+    // round to the step grid measured from min, then trim float noise so
+    // 0.1-style steps do not accumulate 0.30000000000000004
+    const snapped = min + Math.round((v - min) / step) * step;
+    const decimals = (String(step).split('.')[1] ?? '').length;
+    return clamp(decimals ? Number(snapped.toFixed(decimals)) : snapped);
+  };
+  const fraction = (clamp(value) - min) / span;
+
+  const emit = (next) => {
+    if (next !== value) onChange?.(next);
+  };
+
+  /** Pointer x -> value, using the track's laid-out rect. */
+  const valueAt = (ev) => {
+    const node = trackRef.current;
+    if (!node?.abs?.width) return value;
+    // the thumb is centred on the value, so the usable travel is the track
+    // minus one thumb width — otherwise min/max are unreachable at the ends
+    const travel = Math.max(1, node.abs.width - SLIDER_THUMB);
+    const x = ev.x - node.abs.x - SLIDER_THUMB / 2;
+    return quantize(min + (Math.min(travel, Math.max(0, x)) / travel) * span);
+  };
+
+  const controlProps = disabled
+    ? {}
+    : {
+        focusable: true,
+        cursor: 'pointer',
+        onFocus: () => setFocused(true),
+        onBlur: () => setFocused(false),
+        onMouseDown: (ev) => {
+          ev.capturePointer();
+          setDragging(true);
+          emit(valueAt(ev));
+        },
+        onMouseMove: (ev) => {
+          if (dragging) emit(valueAt(ev));
+        },
+        onMouseUp: () => setDragging(false),
+        onKeyDown: (ev) => {
+          const big = (step || 1) * 10;
+          switch (ev.keysym) {
+            case XK_LEFT:
+            case XK_DOWN:
+              emit(quantize(clamp(value - (step || 1))));
+              return;
+            case XK_RIGHT:
+            case XK_UP:
+              emit(quantize(clamp(value + (step || 1))));
+              return;
+            case XK_HOME:
+              emit(min);
+              return;
+            case XK_END:
+              emit(max);
+              return;
+            case XK_PAGE_UP:
+              emit(quantize(clamp(value + big)));
+              return;
+            case XK_PAGE_DOWN:
+              emit(quantize(clamp(value - big)));
+              return;
+            default:
+              break;
+          }
+        },
+      };
+
+  return h(
+    'box',
+    {
+      ref: trackRef,
+      width,
+      height: SLIDER_THUMB,
+      minWidth: 0,
+      justifyContent: 'center',
+      ...controlProps,
+      ...boxProps,
+    },
+    // track
+    h(
+      'box',
+      {
+        height,
+        borderRadius: height / 2,
+        backgroundColor: theme.track,
+        flexDirection: 'row',
+        alignItems: 'center',
+        pointerEvents: 'none',
+      },
+      // flex ratios, not a percentage width: a percentage child resolves
+      // against the space available while the track is still being
+      // measured, so it fed back into the slider's own intrinsic width —
+      // at value = max the control grew, which moved the handle, which
+      // changed the value, and a drag turned into an oscillation
+      h('box', {
+        flexGrow: fraction,
+        flexShrink: 0,
+        flexBasis: 0,
+        height,
+        borderRadius: height / 2,
+        backgroundColor: disabled ? theme.dim : theme.accent,
+      }),
+      h('box', { flexGrow: 1 - fraction, flexShrink: 0, flexBasis: 0 }),
+    ),
+    // thumb, centred on the value within the same travel the math uses
+    h('box', {
+      position: 'absolute',
+      left: `${fraction * 100}%`,
+      marginLeft: -SLIDER_THUMB * fraction,
+      width: SLIDER_THUMB,
+      height: SLIDER_THUMB,
+      borderRadius: SLIDER_THUMB / 2,
+      borderWidth: 1,
+      borderColor: disabled
+        ? theme.border
+        : focused || dragging
+          ? theme.accentHover
+          : theme.border,
+      backgroundColor: disabled ? theme.surfaceHover : theme.background,
+      pointerEvents: 'none',
+    }),
+  );
+}

package/src/components/Switch.js

@@ -0,0 +1,49 @@
+// Widget components built purely on the host primitives — no reconciler
+// support needed. Plain createElement (no JSX) so the library stays
+// build-step-free for consumers.
+
+import React from 'react';
+import { useControl, useTheme } from './theme.js';
+
+const h = React.createElement;
+
+/**
+ * <Switch checked onChange disabled/> — Checkbox semantics in a sliding
+ * pill; the thumb sits at the end matching the state.
+ */
+export function Switch({
+  checked = false,
+  onChange,
+  disabled = false,
+  ...boxProps
+}) {
+  const theme = useTheme();
+  const { focused, props } = useControl(disabled, () => onChange?.(!checked));
+  return h(
+    'box',
+    {
+      width: 36,
+      height: 20,
+      borderRadius: 10,
+      padding: 2,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: checked ? 'flex-end' : 'flex-start',
+      backgroundColor: disabled
+        ? theme.track
+        : checked
+          ? theme.accent
+          : focused
+            ? theme.dim
+            : theme.border,
+      ...props,
+      ...boxProps,
+    },
+    h('box', {
+      width: 16,
+      height: 16,
+      borderRadius: 8,
+      backgroundColor: theme.background,
+    }),
+  );
+}