npm - react-x11 - Versions diffs - 0.0.1 → 1.2.0 - Mend

react-x11 0.0.1 → 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (38) hide show

package/LICENSE +21 -0
package/README.md +226 -0
package/package.json +60 -7
package/src/ClickToComponent.js +179 -0
package/src/DevToolsIntegration.js +106 -0
package/src/Reconciler.js +507 -0
package/src/components/Button.js +63 -0
package/src/components/Canvas3D.js +28 -0
package/src/components/Checkbox.js +69 -0
package/src/components/Dialog.js +138 -0
package/src/components/Menu.js +644 -0
package/src/components/ProgressBar.js +48 -0
package/src/components/Radio.js +95 -0
package/src/components/Select.js +272 -0
package/src/components/Slider.js +177 -0
package/src/components/Switch.js +49 -0
package/src/components/Tooltip.js +146 -0
package/src/components/anchor.js +211 -0
package/src/components/index.js +17 -0
package/src/components/keys.js +21 -0
package/src/components/theme.js +66 -0
package/src/components/typeahead.js +56 -0
package/src/events.js +584 -0
package/src/geometry3d.js +223 -0
package/src/glnodes.js +275 -0
package/src/index.js +30 -0
package/src/mat4.js +235 -0
package/src/nodes.js +1985 -0
package/src/pointer3d.js +158 -0
package/src/priority.js +39 -0
package/src/raycast3d.js +146 -0
package/src/richnodes.js +436 -0
package/src/scene3d.js +683 -0
package/src/styles.js +189 -0
package/.npmignore +0 -17
package/combobox.jsx +0 -69
package/react-x11.js +0 -119
package/test-canvas.js +0 -98

package/src/Reconciler.js ADDED Viewed

@@ -0,0 +1,507 @@
+// The react-reconciler host config plus the public render entry points.
+// Host instances are the retained nodes from nodes.js; only <window> and
+// <popup> map to real X11 windows (see NEXT_STEPS.md), and those windows
+// are created top-down in the commit phase (WindowNode.realize) so every
+// CreateWindow names its actual parent from the start — createInstance
+// performs no X11 calls, since the render phase is discardable (issue #4).
+import { createRequire } from 'node:module';
+import React from 'react';
+import ReactReconciler from 'react-reconciler';
+import { createClient } from 'ntk';
+import {
+  ConcurrentRoot,
+  getCurrentUpdatePriority,
+  setCurrentUpdatePriority,
+  resolveUpdatePriority,
+} from './priority.js';
+import {
+  WindowNode,
+  PopupNode,
+  BoxNode,
+  TextNode,
+  TextChunkNode,
+  ImageNode,
+  CanvasNode,
+  ScrollViewNode,
+  TextInputNode,
+  TextAreaNode,
+  flushWindowRestacks,
+} from './nodes.js';
+import { GlAreaNode } from './glnodes.js';
+import { SCENE_KINDS, UNSUPPORTED_KINDS, createSceneNode } from './scene3d.js';
+import {
+  MarkdownNode,
+  HtmlNode,
+  SvgNode,
+  SvgChildNode,
+  TexNode,
+} from './richnodes.js';
+const require = createRequire(import.meta.url);
+const packageJson = require('../package.json');
+const HOST_TYPES = [
+  'window',
+  'popup',
+  'box',
+  'text',
+  'image',
+  'canvas',
+  'scrollview',
+  'textinput',
+  'textarea',
+  'markdown',
+  'html',
+  'svg',
+  'tex',
+  'glarea',
+];
+const isEventProp = (name) => /^on[A-Z]/.test(name);
+// Props forwarded to ntk createWindow. Event handlers are dispatched by the
+// EventManager from current props (never registered at creation, so they
+// cannot go stale) and children are handled by the tree.
+function windowAttributes(props) {
+  const attributes = {};
+  for (const key of Object.keys(props)) {
+    if (key === 'children' || isEventProp(key)) continue;
+    attributes[key] = props[key];
+  }
+  return attributes;
+}
+const HostConfig = {
+  supportsMutation: true,
+  supportsPersistence: false,
+  supportsHydration: false,
+  supportsResources: false,
+  supportsSingletons: false,
+  supportsTestSelectors: false,
+  supportsMicrotasks: true,
+  isPrimaryRenderer: true,
+  warnsIfNotActing: false,
+  rendererVersion: packageJson.version,
+  rendererPackageName: packageJson.name,
+  extraDevToolsConfig: null,
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+  scheduleMicrotask: queueMicrotask,
+  getRootHostContext() {
+    return {
+      isInsideText: false,
+      isInsideSvg: false,
+      isInsideRichText: false,
+      isInside3d: false,
+    };
+  },
+  getChildHostContext(parentHostContext, type) {
+    return {
+      isInsideText: parentHostContext.isInsideText || type === 'text',
+      // <svg> children are declarative SVG elements, not react-x11 nodes
+      isInsideSvg: parentHostContext.isInsideSvg || type === 'svg',
+      // <markdown>/<html>/<tex> take their content as a string child
+      // (react-markdown style); no elements are allowed inside
+      isInsideRichText:
+        type === 'markdown' || type === 'html' || type === 'tex',
+      // inside <glarea> the children are scene nodes, not drawn nodes
+      isInside3d: parentHostContext.isInside3d || type === 'glarea',
+    };
+  },
+  getPublicInstance(instance) {
+    // Refs attach in the layout phase, after the mutation phase realized
+    // the window, so for windows this is the live ntk window.
+    return instance.isWindow ? instance.window || instance : instance;
+  },
+  prepareForCommit() {
+    return null;
+  },
+  // child <window>s that moved in the tree restack here, so a reorder costs
+  // one pass instead of one per insertBefore
+  resetAfterCommit() {
+    flushWindowRestacks();
+  },
+  createInstance(type, props, rootContainer, hostContext, internalHandle) {
+    if (hostContext.isInsideSvg) {
+      // Inside <svg> every element is a declarative SVG element (React-DOM
+      // style: <circle cx={12} strokeWidth={2} />); SvgView skips tags it
+      // does not support.
+      const node = new SvgChildNode(type, props, rootContainer);
+      node._reactFiber = internalHandle;
+      return node;
+    }
+    if (hostContext.isInsideRichText) {
+      throw new Error(
+        `react-x11: <${type}> is not allowed inside <markdown>/<html>/<tex>; ` +
+          'their content is a string child (or the source prop).',
+      );
+    }
+    if (hostContext.isInsideText && type !== 'text') {
+      throw new Error(
+        `react-x11: <${type}> is not allowed inside <text>; only nested ` +
+          '<text> spans and strings are.',
+      );
+    }
+    if (hostContext.isInside3d) {
+      const scene = createSceneNode(type, props, rootContainer);
+      if (scene) {
+        scene._reactFiber = internalHandle;
+        return scene;
+      }
+      if (UNSUPPORTED_KINDS[type]) {
+        throw new Error(
+          `react-x11: <${type}> cannot work over indirect GLX — ` +
+            `${UNSUPPORTED_KINDS[type]}. See docs/glx-plan.md.`,
+        );
+      }
+      throw new Error(
+        `react-x11: <${type}> is not a 3D element; inside <glarea> only ` +
+          [...SCENE_KINDS].map((t) => `<${t}>`).join(', ') +
+          ' are.',
+      );
+    }
+    let node;
+    switch (type) {
+      case 'window':
+        // No X11 calls here: the render phase may be discarded. The real
+        // window is created top-down in the commit phase (realize).
+        node = new WindowNode(rootContainer, windowAttributes(props), props);
+        break;
+      case 'popup':
+        node = new PopupNode(rootContainer, windowAttributes(props), props);
+        break;
+      case 'box':
+        node = new BoxNode(props, rootContainer);
+        break;
+      case 'scrollview':
+        node = new ScrollViewNode(props, rootContainer);
+        break;
+      case 'textinput':
+        node = new TextInputNode(props, rootContainer);
+        break;
+      case 'textarea':
+        node = new TextAreaNode(props, rootContainer);
+        break;
+      case 'text':
+        node = new TextNode(props, rootContainer, {
+          span: hostContext.isInsideText,
+        });
+        break;
+      case 'image':
+        node = new ImageNode(props, rootContainer);
+        break;
+      case 'canvas':
+        node = new CanvasNode(props, rootContainer);
+        break;
+      case 'markdown':
+        node = new MarkdownNode(props, rootContainer);
+        break;
+      case 'html':
+        node = new HtmlNode(props, rootContainer);
+        break;
+      case 'svg':
+        node = new SvgNode(props, rootContainer);
+        break;
+      case 'tex':
+        node = new TexNode(props, rootContainer);
+        break;
+      case 'glarea':
+        node = new GlAreaNode(props, rootContainer);
+        break;
+      default:
+        if (SCENE_KINDS.has(type) || UNSUPPORTED_KINDS[type]) {
+          throw new Error(
+            `react-x11: <${type}> is a 3D element and only works inside ` +
+              '<glarea> (or the <Canvas3D> component).',
+          );
+        }
+        throw new Error(
+          `react-x11: unknown element type <${type}>. Supported: ` +
+            HOST_TYPES.map((t) => `<${t}>`).join(', ') +
+            '.',
+        );
+    }
+    node._reactFiber = internalHandle;
+    return node;
+  },
+  createTextInstance(text, rootContainer, hostContext) {
+    if (
+      !hostContext.isInsideText &&
+      !hostContext.isInsideRichText &&
+      !hostContext.isInsideSvg
+    ) {
+      throw new Error(
+        `react-x11: raw text ${JSON.stringify(text)} must be wrapped in a ` +
+          '<text> element (or be the string child of <markdown>/<html>/' +
+          '<tex>/an SVG <text>).',
+      );
+    }
+    return new TextChunkNode(text, rootContainer);
+  },
+  appendInitialChild(parentInstance, child) {
+    parentInstance.insertBefore(child, null);
+  },
+  finalizeInitialChildren(instance, type, props) {
+    // Popups are not attached to the container or realized by a parent
+    // window; commitMount realizes them against the screen root. autoFocus
+    // and trapFocus need commitMount too — the node has to be in the tree
+    // first, so it can find the EventManager that owns focus.
+    return (
+      type === 'popup' || Boolean(props.autoFocus) || Boolean(props.trapFocus)
+    );
+  },
+  commitMount(instance, type, props) {
+    if (type === 'popup') {
+      instance.realize(null);
+    }
+    if (props.trapFocus) {
+      instance._syncFocusScope?.();
+    }
+    if (props.autoFocus && typeof instance.focus === 'function') {
+      instance.focus();
+    }
+  },
+  appendChild(parentInstance, child) {
+    parentInstance.insertBefore(child, null);
+  },
+  appendChildToContainer(container, child) {
+    if (!child.window) {
+      // Top-level window: realize the whole subtree top-down against the
+      // screen root.
+      child.realize(null);
+    }
+  },
+  insertBefore(parentInstance, child, beforeChild) {
+    parentInstance.insertBefore(child, beforeChild);
+  },
+  insertInContainerBefore(container, child) {
+    HostConfig.appendChildToContainer(container, child);
+  },
+  removeChild(parentInstance, child) {
+    parentInstance.removeChild(child);
+  },
+  removeChildFromContainer(container, child) {
+    child.destroySubtree();
+  },
+  clearContainer() {},
+  commitUpdate(instance, type, oldProps, newProps) {
+    instance.applyProps(newProps, oldProps);
+  },
+  shouldSetTextContent() {
+    return false;
+  },
+  commitTextUpdate(textInstance, oldText, newText) {
+    textInstance.setText(newText);
+  },
+  resetTextContent() {},
+  hideInstance(instance) {
+    instance.setHidden(true);
+  },
+  unhideInstance(instance) {
+    instance.setHidden(false);
+  },
+  hideTextInstance(textInstance) {
+    textInstance.setText('');
+  },
+  unhideTextInstance(textInstance, text) {
+    textInstance.setText(text);
+  },
+  detachDeletedInstance(instance) {
+    instance.root?.events?.forget(instance);
+  },
+  preparePortalMount() {},
+  prepareScopeUpdate() {},
+  getInstanceFromScope() {
+    return null;
+  },
+  getInstanceFromNode() {
+    return null;
+  },
+  beforeActiveInstanceBlur() {},
+  afterActiveInstanceBlur() {},
+  // Update priority plumbing (React 19 scheduling contract).
+  setCurrentUpdatePriority,
+  getCurrentUpdatePriority,
+  resolveUpdatePriority,
+  shouldAttemptEagerTransition() {
+    return false;
+  },
+  trackSchedulerEvent() {},
+  resolveEventType() {
+    return null;
+  },
+  resolveEventTimeStamp() {
+    return -1.1;
+  },
+  requestPostPaintCallback() {},
+  // Suspensey commits are not used by this renderer.
+  maySuspendCommit() {
+    return false;
+  },
+  maySuspendCommitOnUpdate() {
+    return false;
+  },
+  maySuspendCommitInSyncRender() {
+    return false;
+  },
+  preloadInstance() {
+    return true;
+  },
+  startSuspendingCommit() {},
+  suspendInstance() {},
+  waitForCommitToBeReady() {
+    return null;
+  },
+  // Form actions / transitions (unused, required by the contract).
+  NotPendingTransition: null,
+  HostTransitionContext: React.createContext(null),
+  resetFormInstance() {},
+  bindToConsole(methodName, args) {
+    return Function.prototype.bind.apply(console[methodName], [
+      console,
+      ...args,
+    ]);
+  },
+};
+export const Renderer = ReactReconciler(HostConfig);
+if (process.env.REACT_X11_DEVTOOLS) {
+  // Install the DevTools hook before any React commit (top-level await:
+  // module evaluation finishes before app code can call render) and
+  // register the renderer with the standalone DevTools app.
+  const devtools = await import('./DevToolsIntegration.js');
+  await devtools.prepare();
+  devtools.connect(Renderer);
+}
+if (process.env.REACT_X11_CLICK_TO_COMPONENT || process.env.REACT_X11_EDITOR) {
+  // Naming an editor already means you want the feature on — no need to
+  // also set REACT_X11_CLICK_TO_COMPONENT=1 just to pick one.
+  const clickToComponent = await import('./ClickToComponent.js');
+  clickToComponent.install();
+}
+const roots = new Map();
+let cachedNtkApp = null;
+async function connectApp() {
+  if (cachedNtkApp) return cachedNtkApp;
+  try {
+    cachedNtkApp = await createClient();
+  } catch (err) {
+    throw new Error(
+      'react-x11: could not connect to the X server. Is an X server running ' +
+        `and DISPLAY set (DISPLAY=${process.env.DISPLAY || '<unset>'})? ` +
+        'Original error: ' +
+        err.message,
+    );
+  }
+  return cachedNtkApp;
+}
+function renderIntoContainer(element, container, callback) {
+  let root = roots.get(container);
+  if (!root) {
+    root = Renderer.createContainer(
+      container,
+      ConcurrentRoot,
+      null,
+      false,
+      null,
+      '',
+      (error) => console.error('react-x11: uncaught error', error),
+      (error) => console.error('react-x11: caught error', error),
+      (error) => console.error('react-x11: recoverable error', error),
+      null,
+    );
+    roots.set(container, root);
+  }
+  Renderer.updateContainerSync(element, root, null, () => {
+    const publicInstance = Renderer.getPublicRootInstance(root);
+    if (callback) {
+      callback(publicInstance, container);
+    }
+  });
+  Renderer.flushSyncWork();
+}
+/**
+ * Legacy entry point. Without a container it connects to the X server
+ * (returns a promise in that case).
+ */
+export function render(element, callback, container) {
+  if (!container) {
+    return connectApp().then((app) =>
+      renderIntoContainer(element, app, callback),
+    );
+  }
+  return renderIntoContainer(element, container, callback);
+}
+/**
+ * Modern entry point:
+ *
+ *   const root = await createRoot();       // connects via DISPLAY
+ *   root.render(<App />);
+ *
+ * Pass an ntk App (or a mock) to render into an existing connection.
+ */
+export async function createRoot(container) {
+  const app = container ?? (await connectApp());
+  return {
+    app,
+    render(element, callback) {
+      renderIntoContainer(element, app, callback);
+    },
+    unmount() {
+      unmountComponentAtNode(app);
+    },
+  };
+}
+export function unmountComponentAtNode(container) {
+  const root = roots.get(container);
+  if (root) {
+    Renderer.updateContainerSync(null, root, null, () => {
+      roots.delete(container);
+    });
+    Renderer.flushSyncWork();
+  }
+}

package/src/components/Button.js ADDED Viewed

@@ -0,0 +1,63 @@
+// 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 { labelContent, useControl, useTheme } from './theme.js';
+const h = React.createElement;
+/**
+ * <Button onPress primary disabled …boxProps>label</Button> — the standard
+ * push button the examples kept re-implementing: hover/focus feedback,
+ * Space/Enter activation, pointer cursor.
+ */
+export function Button({
+  children,
+  label,
+  onPress,
+  primary = false,
+  disabled = false,
+  ...boxProps
+}) {
+  const theme = useTheme();
+  const { hover, focused, props } = useControl(disabled, onPress);
+  const background = disabled
+    ? theme.surfaceHover
+    : primary
+      ? hover
+        ? theme.accentHover
+        : theme.accent
+      : hover
+        ? theme.surfaceHover
+        : theme.background;
+  const color = disabled ? theme.dim : primary ? theme.accentText : theme.text;
+  return h(
+    'box',
+    {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 8,
+      paddingTop: 8,
+      paddingBottom: 8,
+      paddingLeft: 16,
+      paddingRight: 16,
+      borderRadius: 4,
+      borderWidth: 1,
+      borderColor: disabled
+        ? theme.border
+        : focused
+          ? primary
+            ? theme.accentHover
+            : theme.borderActive
+          : primary
+            ? theme.accent
+            : theme.border,
+      backgroundColor: background,
+      ...props,
+      ...boxProps,
+    },
+    labelContent(children ?? label, { color }),
+  );
+}

package/src/components/Canvas3D.js ADDED Viewed

@@ -0,0 +1,28 @@
+import { createElement as h } from 'react';
+/**
+ * `<Canvas3D>` — the react-three-fiber-shaped entry point to the 3D scene.
+ * A thin wrapper over the `<glarea>` host element: it is the surface that
+ * owns the GL context, and the scene lives in its children.
+ *
+ * ```jsx
+ * <Canvas3D flexGrow={1} camera={{ position: [3, 3, 6], fov: 50 }}>
+ *   <mesh rotation={[0.4, 0.8, 0]}>
+ *     <boxGeometry args={[1, 1, 1]} />
+ *     <meshBasicMaterial color="#2980b9" />
+ *   </mesh>
+ * </Canvas3D>
+ * ```
+ *
+ * Props are `<glarea>`'s (layout props, `clearColor`, `frameLoop`, `glx`,
+ * `onCreated`, `onDraw`, `onError`) plus `camera`:
+ * `{ position, target, up, fov, near, far, orthographic, zoom }`.
+ *
+ * The name is `Canvas3D`, not r3f's `Canvas`, because react-x11 already has
+ * a `<canvas>` host element — the 2D `onDraw` escape hatch.
+ */
+export function Canvas3D({ children, ...props }) {
+  return h('glarea', props, children);
+}
+export default Canvas3D;

package/src/components/Checkbox.js ADDED Viewed

@@ -0,0 +1,69 @@
+// 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 { labelContent, useControl, useTheme } from './theme.js';
+const h = React.createElement;
+/**
+ * <Checkbox checked onChange disabled>label</Checkbox> — 16px check well +
+ * label row; click or Space toggles (onChange receives the next value).
+ */
+export function Checkbox({
+  children,
+  label,
+  checked = false,
+  onChange,
+  disabled = false,
+  ...boxProps
+}) {
+  const theme = useTheme();
+  const { focused, props } = useControl(disabled, () => onChange?.(!checked));
+  const fill = disabled ? theme.dim : theme.accent;
+  return h(
+    'box',
+    {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 8,
+      ...props,
+      ...boxProps,
+    },
+    h(
+      'box',
+      {
+        width: 16,
+        height: 16,
+        borderRadius: 3,
+        borderWidth: 1,
+        borderColor: checked
+          ? fill
+          : focused
+            ? theme.borderActive
+            : theme.border,
+        backgroundColor: checked ? fill : theme.background,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      checked &&
+        h('canvas', {
+          width: 10,
+          height: 8,
+          onDraw: (ctx) => {
+            ctx.strokeStyle = theme.accentText;
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.moveTo(1, 4);
+            ctx.lineTo(3.5, 6.5);
+            ctx.lineTo(9, 1);
+            ctx.stroke();
+          },
+        }),
+    ),
+    labelContent(children ?? label, {
+      color: disabled ? theme.dim : theme.text,
+    }),
+  );
+}