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

react-x11 1.2.0 → 2.0.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 (158) hide show

package/README.md +330 -81
package/package.json +132 -14
package/src/ClickToComponent.js +9 -2
package/src/DevToolsIntegration.js +440 -32
package/src/Reconciler.js +463 -165
package/src/a11y.js +1299 -0
package/src/acceleratorhooks.js +86 -0
package/src/accelerators.js +128 -0
package/src/activate.js +168 -0
package/src/anchor.js +360 -0
package/src/appcontext.js +161 -0
package/src/appearance.js +748 -0
package/src/appearancehooks.js +96 -0
package/src/apphooks.js +73 -0
package/src/application.js +748 -0
package/src/atspi.js +1953 -0
package/src/bus.js +545 -0
package/src/bushooks.js +136 -0
package/src/clientmessage.js +140 -0
package/src/clipboard.js +121 -0
package/src/components/Button.js +148 -33
package/src/components/Checkbox.js +66 -32
package/src/components/Dialog.js +96 -29
package/src/components/FileDialog.js +491 -0
package/src/components/Icon.js +329 -0
package/src/components/Menu.js +797 -133
package/src/components/PasswordInput.js +434 -0
package/src/components/ProgressBar.js +91 -12
package/src/components/Radio.js +78 -35
package/src/components/Select.js +255 -65
package/src/components/Slider.js +102 -41
package/src/components/SplitPane.js +206 -0
package/src/components/Switch.js +100 -22
package/src/components/Table.js +529 -0
package/src/components/Tabs.js +211 -0
package/src/components/Tooltip.js +528 -54
package/src/components/anchor.js +154 -107
package/src/components/change.js +34 -0
package/src/components/dnd.js +103 -0
package/src/components/index.js +16 -3
package/src/components/keys.js +17 -20
package/src/components/scribble.js +247 -0
package/src/components/theme.js +350 -42
package/src/components/typeahead.js +12 -2
package/src/compose.js +868 -0
package/src/compositing.js +224 -0
package/src/dbusmenu.js +384 -0
package/src/debug.d.ts +63 -0
package/src/debug.js +642 -0
package/src/decorations.js +486 -0
package/src/desktopsettings.js +209 -0
package/src/desktopsettingshooks.js +62 -0
package/src/dnd.js +1725 -0
package/src/editmenu.js +272 -0
package/src/errors.js +98 -0
package/src/events.js +1406 -162
package/src/extensions.js +45 -0
package/src/filedialog.js +375 -0
package/src/filedialoghooks.js +132 -0
package/src/fonthooks.js +64 -0
package/src/fonts.js +301 -0
package/src/foreignnodes.js +519 -0
package/src/frame/child.js +33 -0
package/src/frame/childmain.js +274 -0
package/src/frame/env.js +140 -0
package/src/frame/index.js +444 -0
package/src/frame/lifecycle.js +67 -0
package/src/frame/protocol.js +179 -0
package/src/frames.js +73 -0
package/src/glbackend.js +114 -0
package/src/glnodes.js +125 -67
package/src/globalmenu.js +683 -0
package/src/host.d.ts +88 -0
package/src/host.js +42 -0
package/src/idle.js +490 -0
package/src/idlehooks.js +100 -0
package/src/imagesource.js +349 -0
package/src/index.d.ts +475 -0
package/src/index.js +83 -9
package/src/inputtime.js +206 -0
package/src/jsx-dev-runtime.d.ts +21 -0
package/src/jsx-dev-runtime.js +2 -0
package/src/jsx-runtime.d.ts +39 -0
package/src/jsx-runtime.js +6 -0
package/src/keyboard.js +256 -0
package/src/keyboardstate.js +278 -0
package/src/keyboardstatehooks.js +58 -0
package/src/keysyms.d.ts +149 -0
package/src/keysyms.js +270 -0
package/src/locale.js +170 -0
package/src/localehooks.js +47 -0
package/src/menuitem.js +223 -0
package/src/node.d.ts +597 -0
package/src/node.js +44 -0
package/src/nodes.js +9546 -690
package/src/ntk.d.ts +44 -0
package/src/ntk.js +25 -0
package/src/paintcache.js +366 -0
package/src/palette.js +380 -0
package/src/pastestate.js +66 -0
package/src/portal.js +461 -0
package/src/priority.js +26 -0
package/src/refresh/index.d.ts +40 -0
package/src/refresh/index.js +122 -0
package/src/refresh/loader.d.ts +37 -0
package/src/refresh/loader.js +401 -0
package/src/refresh/register.d.ts +5 -0
package/src/refresh/register.js +13 -0
package/src/registry.js +232 -0
package/src/scale.js +626 -0
package/src/scalehooks.js +27 -0
package/src/screencolor.js +640 -0
package/src/screencolorhooks.js +101 -0
package/src/screens.js +754 -0
package/src/screenshooks.js +137 -0
package/src/startup.js +302 -0
package/src/style.d.ts +126 -0
package/src/style.js +33 -0
package/src/styles.js +1482 -6
package/src/svgnodes.js +306 -0
package/src/testing/a11y.js +484 -0
package/src/testing/components.js +414 -0
package/src/testing/events.js +407 -0
package/src/testing/harness.js +455 -0
package/src/testing/index.d.ts +558 -0
package/src/testing/index.js +85 -0
package/src/testing/mock-app.js +463 -0
package/src/testing/pixels.js +152 -0
package/src/testing/queries.js +224 -0
package/src/textrange.js +83 -0
package/src/textselection.js +439 -0
package/src/trace-registry.js +63 -0
package/src/transfer.js +93 -0
package/src/types/appearance.d.ts +84 -0
package/src/types/application.d.ts +173 -0
package/src/types/components.d.ts +820 -0
package/src/types/dbus.d.ts +177 -0
package/src/types/elements.d.ts +897 -0
package/src/types/events.d.ts +549 -0
package/src/types/filedialog.d.ts +260 -0
package/src/types/fonts.d.ts +124 -0
package/src/types/frame.d.ts +146 -0
package/src/types/globalmenu.d.ts +42 -0
package/src/types/nodes.d.ts +199 -0
package/src/types/screencolor.d.ts +84 -0
package/src/types/style.d.ts +434 -0
package/src/types/system.d.ts +287 -0
package/src/windowid.js +151 -0
package/src/windowstate.js +393 -0
package/src/xsettings.js +336 -0
package/src/yoga.d.ts +55 -0
package/src/yoga.js +135 -0
package/src/components/Canvas3D.js +0 -28
package/src/geometry3d.js +0 -223
package/src/pointer3d.js +0 -158
package/src/raycast3d.js +0 -146
package/src/richnodes.js +0 -436
package/src/scene3d.js +0 -683

package/src/svgnodes.js ADDED Viewed

@@ -0,0 +1,306 @@
+// `<svg>`: a retained-node wrapper over ntk's SvgView. The document is
+// either JSX children — declarative SVG elements, one `SvgChildNode` each,
+// serialized into the htmlparser2-style DOM SvgView consumes — or a `source`
+// markup string, and it is sized like `<image>` from its viewBox.
+//
+// This file used to hold `<markdown>`, `<html>` and `<tex>` beside it, over
+// ntk's document widgets. Those widgets rendered a document as one opaque
+// drawing, which foreclosed both selection and per-block streaming; their
+// successors are components in `@react-x11/components` (`<Markdown>`,
+// `<Formula>`), composed from public host elements. `<svg>` stays here
+// because it is not a document — it is a drawing, and one node is the right
+// grain for it.
+import { SvgView } from 'ntk';
+import { Node, intrinsicSize } from './nodes.js';
+import { isLayoutProp, isPaintProp } from './styles.js';
+// SVG attributes that are camelCase in SVG itself; every other camelCase
+// prop (strokeWidth, fillRule, textAnchor, …) kebab-cases, like React DOM.
+const SVG_CAMEL_ATTRS = new Set([
+  'viewBox',
+  'preserveAspectRatio',
+  'gradientUnits',
+  'gradientTransform',
+  'spreadMethod',
+  'patternUnits',
+  'patternContentUnits',
+  'patternTransform',
+  'clipPathUnits',
+  'maskUnits',
+  'maskContentUnits',
+  'markerWidth',
+  'markerHeight',
+  'markerUnits',
+  'refX',
+  'refY',
+  'textLength',
+  'lengthAdjust',
+  'stdDeviation',
+]);
+const toSvgAttrib = (name) =>
+  SVG_CAMEL_ATTRS.has(name)
+    ? name
+    : name.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
+function svgAttribs(props, skip) {
+  const attribs = {};
+  for (const key of Object.keys(props)) {
+    const value = props[key];
+    if (key === 'children' || value == null) continue;
+    if (typeof value === 'function') continue;
+    if (skip && skip(key)) continue;
+    attribs[toSvgAttrib(key)] = String(value);
+  }
+  return attribs;
+}
+/**
+ * An element inside <svg>: no yoga node, no painting of its own — it only
+ * carries a tag name and props, and is serialized into the htmlparser2-style
+ * DOM that SvgView consumes. Prop/child changes bubble to the owning
+ * SvgNode via the _textContentChanged channel (also used by text chunks,
+ * so string children of an SVG <text> invalidate the same way).
+ */
+export class SvgChildNode extends Node {
+  constructor(tag, props, app) {
+    super(tag, props, app, { yoga: false });
+    this.isSvgChild = true;
+  }
+  // <circle cx r fill>… is SVG's vocabulary, not the style channel's
+  get stylable() {
+    return false;
+  }
+  _textContentChanged() {
+    this.parent?._textContentChanged();
+  }
+  applyProps(newProps, oldProps) {
+    super.applyProps(newProps, oldProps);
+    this._textContentChanged();
+  }
+  toDom() {
+    return {
+      type: 'tag',
+      name: this.kind,
+      attribs: svgAttribs(this.props),
+      children: this.children
+        .map((c) =>
+          c.kind === 'textchunk'
+            ? { type: 'text', data: c.text }
+            : c.isSvgChild
+              ? c.toDom()
+              : null,
+        )
+        .filter(Boolean),
+    };
+  }
+}
+/**
+ * <svg>: ntk SvgView. Content is either JSX children (React-DOM style —
+ * <svg viewBox="0 0 24 24"><circle cx={12} … />; children win when both
+ * are present) or a `source` markup string. Sized like <image>: natural
+ * (viewBox) size, kept to its aspect ratio when the style constrains only
+ * one axis; scales to the content box.
+ */
+export class SvgNode extends Node {
+  constructor(props, app) {
+    super('svg', props, app);
+    this.view = null;
+    this._stale = true;
+    /** Bumped every time the document is rebuilt, and sampled at paint time,
+     * so `paintCachePlan` can tell an animated document from a settled one.
+     * See the note there. */
+    this._docRevision = 0;
+    this._paintedRevision = -1;
+  }
+  /** The viewBox is the natural size; `<image>`'s rules do the rest —
+   * including the unit: natural sizes are logical pixels, multiplied to
+   * device here so an unsized drawing keeps its size relative to
+   * everything else. Unlike a bitmap it costs nothing: the document
+   * rasterizes at whatever box layout settles on (src/scale.js). */
+  measureContent(constraints) {
+    const view = this._ensureView();
+    const s = this.scale;
+    return intrinsicSize(
+      {
+        width: (view?.naturalWidth ?? 0) * s,
+        height: (view?.naturalHeight ?? 0) * s,
+      },
+      constraints,
+    );
+  }
+  /** Any change to the svg subtree (props, children, text) lands here. */
+  _textContentChanged() {
+    this._stale = true;
+    this.invalidateMeasure('props');
+  }
+  _ensureView() {
+    if (!this._stale) return this.view;
+    this._stale = false;
+    this._docRevision++;
+    this.view = null;
+    this._docKey = null;
+    try {
+      const children = this.children.filter(
+        (c) => c.isSvgChild || c.kind === 'textchunk',
+      );
+      if (children.length > 0) {
+        const skip = (key) =>
+          key === 'source' ||
+          isLayoutProp(key) ||
+          isPaintProp(key) ||
+          key === 'cursor' ||
+          key === 'focusable' ||
+          key === 'pointerEvents';
+        const dom = {
+          type: 'tag',
+          name: 'svg',
+          attribs: svgAttribs(this.props, skip),
+          children: children.map((c) =>
+            c.kind === 'textchunk' ? { type: 'text', data: c.text } : c.toDom(),
+          ),
+        };
+        // The document's identity, for the paint cache. Built here rather
+        // than at paint time on purpose: this runs once per content change,
+        // where paint runs every frame — and it is the serialization that
+        // makes two cells holding the same drawing one cache entry instead
+        // of two. Key order follows prop order, so two logically identical
+        // documents written differently miss rather than collide, which is
+        // the harmless direction.
+        this._docKey = JSON.stringify(dom);
+        this.view = new SvgView(null).setSvgDom(dom);
+      } else if (this.props.source) {
+        this._docKey = String(this.props.source);
+        this.view = new SvgView(null).setSvg(this._docKey);
+      }
+    } catch (err) {
+      console.error('react-x11: <svg> failed to parse:', err.message);
+    }
+    return this.view;
+  }
+  applyProps(newProps, oldProps) {
+    super.applyProps(newProps, oldProps);
+    // attributes live in props (children form) or in `source`; either way
+    // the SvgView is cheap to rebuild on the next measure/paint
+    this._textContentChanged();
+  }
+  paintContent(ctx) {
+    const view = this._ensureView();
+    if (!view) return;
+    const content = this.contentBox();
+    if (content.width <= 0 || content.height <= 0) return;
+    view.draw(ctx, content.x, content.y, content.width, content.height, {
+      color: this._currentColor(),
+    });
+  }
+  /**
+   * What `fill="currentColor"` resolves to here.
+   *
+   * The node's own `color`, then what it inherits, then the palette's — the
+   * same resolution `<text>` and `<canvas mono>` use, and it has to be, or
+   * `currentColor` means something different depending on which element is
+   * drawing. It used to stop at a hardcoded black, which is invisible on a
+   * dark desktop and does not follow a `<box style={{ color }}>` either.
+   */
+  _currentColor() {
+    return this.resolvedTextStyle().color;
+  }
+  /**
+   * Cache plan (see `Node.paintContent` for the protocol).
+   *
+   * The key is the document, the size it is drawn at, and the device scale.
+   * Everything else that could change the pixels is either handled at blit
+   * time or deliberately excluded:
+   *
+   *  - `globalAlpha`, the clip and any ancestor translation are applied by
+   *    `drawImage`, so an ancestor animating opacity is a cache *hit*;
+   *  - colour is out of the key for a `mono` document, because the entry is
+   *    coverage and the colour arrives at blit time — one entry then serves
+   *    hover, `:disabled` and every theme;
+   *  - a `multi` document bakes its colours, so the resolved colour joins the
+   *    key. It rarely varies, so the extra component costs nothing.
+   *
+   * Sizes are rounded so the blit is unscaled: a scaled `drawImage` brackets
+   * every composite with SetPictureTransform and a filter change, which for
+   * a wall of icons is four extra requests each. The cost is that a cached
+   * drawing sits on the pixel grid where a live one could straddle it, which
+   * for icon-sized content is not visible.
+   *
+   * ## Animated documents opt themselves out
+   *
+   * A document that was rebuilt since this node's last paint is being
+   * animated, and caching it is a pure loss: the entry is written, composited
+   * once at most, and never matched again. The cache has a "seen twice" gate
+   * for exactly this, but content keying defeats it here — a wall of the same
+   * animated drawing at different phases produces documents that recur across
+   * *nodes* by coincidence, which is enough sightings to pass the gate and
+   * never enough to pay it back. Measured on a wall of 30 animated gauges:
+   * 450 of 1076 distinct documents recurred, 12% of lookups hit, and each
+   * miss-that-cached bought a CreatePixmap plus a second rasterization of a
+   * drawing that had already been painted live. On a server where offscreen
+   * rasterization is a software fallback that doubled the frame's fence.
+   *
+   * So the revision has to match the one this node last painted. A node that
+   * has never painted has nothing to compare and stays speculative, exactly
+   * as before — the "seen twice" gate is still the thing deciding, so a wall
+   * of identical icons fills on its first frame from its own sibling cells.
+   * Only a document that then *changes* opts out, which is the signal that it
+   * was never going to be matched again.
+   */
+  paintCachePlan() {
+    const view = this._ensureView();
+    if (!view || !this._docKey) return null;
+    const painted = this._paintedRevision;
+    this._paintedRevision = this._docRevision;
+    if (painted >= 0 && painted !== this._docRevision) return null;
+    const content = this.contentBox();
+    const width = Math.round(content.width);
+    const height = Math.round(content.height);
+    if (width <= 0 || height <= 0) return null;
+    const mono = view.paintKind === 'mono';
+    // a mono document paints in exactly one colour: its own, or ours
+    const tint = !mono
+      ? null
+      : view.soloPaint === 'currentColor'
+        ? this._currentColor()
+        : view.soloPaint;
+    if (mono && !tint) return null; // nothing in the document paints at all
+    const size = `${width}x${height}@1`;
+    return {
+      key: mono
+        ? `svg|${size}|${this._docKey}`
+        : `svg|${size}|${this._currentColor()}|${this._docKey}`,
+      x: Math.round(content.x),
+      y: Math.round(content.y),
+      width,
+      height,
+      format: mono ? 'a8' : 'argb32',
+      tint,
+    };
+  }
+  paintCached(ctx, box) {
+    const view = this._ensureView();
+    if (!view) return;
+    // Into a coverage surface, only the alpha of a paint survives, and the
+    // tint arrives at blit time — so any opaque colour renders the same mask.
+    view.draw(ctx, box.x, box.y, box.width, box.height, {
+      color: view.paintKind === 'mono' ? '#ffffff' : this._currentColor(),
+    });
+  }
+}