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/richnodes.js DELETED Viewed

@@ -1,436 +0,0 @@
-// Rich-content elements: thin retained-node wrappers over ntk's document
-// widgets in standalone mode (`layout(width)` + `draw(ctx, x, y)` +
-// `contentHeight`). One yoga measure function per node feeds the widget's
-// own layout into flexbox; async content (mermaid models, images) arrives
-// through the widget's `onInvalidate` hook (ntk >= 3.4.0).
-import { MarkdownView, HtmlView, SvgView, layoutTex } from 'ntk';
-import { Node } from './nodes.js';
-import { Yoga, isLayoutProp, isPaintProp } from './styles.js';
-/** Joined text of string children (react-markdown style), or null when the
- * element has none — then the `source` prop is the content. */
-function stringChildrenOf(node) {
-  let text = null;
-  for (const child of node.children) {
-    if (child.kind === 'textchunk') text = (text ?? '') + child.text;
-  }
-  return text;
-}
-// Fallback width for measuring under an unconstrained yoga width
-// (position: absolute without width, unbounded row). Flowed documents have
-// no natural width, so pick something readable.
-const PREFERRED_WIDTH = 480;
-/**
- * Base for <markdown> and <html>: width-driven document flow. Subclasses
- * implement _createView() (a widget with layout/draw/contentHeight) and
- * _setSource(view). Content is a string child (like react-markdown:
- * <markdown>{`# Hi`}</markdown> — use a template-literal expression, JSX
- * literal text collapses newlines) or the `source` prop; children win.
- * The view is created lazily because the headless mock app in smoke tests
- * has no font manager — everything measures 0×0 there, like <text>.
- */
-class DocumentViewNode extends Node {
-  constructor(kind, props, app) {
-    super(kind, props, app);
-    this.view = null;
-    this._laidOutWidth = -1;
-    this.yoga.setMeasureFunc((width, widthMode) => {
-      const view = this._ensureView();
-      if (!view) return { width: 0, height: 0 };
-      const unconstrained =
-        widthMode === Yoga.MEASURE_MODE_UNDEFINED ||
-        !Number.isFinite(width) ||
-        width <= 0;
-      const w = Math.max(1, Math.ceil(unconstrained ? PREFERRED_WIDTH : width));
-      const height = this._layoutAt(w);
-      return { width: w, height: Math.ceil(height) };
-    });
-  }
-  _ensureView() {
-    if (this.view || !this.app?.fonts) return this.view;
-    this.view = this._createView();
-    if (this.view) {
-      // ntk >= 3.4.0 notifies here when async content (a mermaid model, an
-      // image) invalidates the widget layout; harmless no-op before that
-      this.view.onInvalidate = () => this._contentInvalidated();
-      this._setSource(this.view);
-    }
-    return this.view;
-  }
-  _contentInvalidated() {
-    if (this.destroyed) return;
-    this._laidOutWidth = -1;
-    this.yoga?.markDirty();
-    this.root?.invalidate(true);
-  }
-  _source() {
-    return stringChildrenOf(this) ?? this.props.source ?? '';
-  }
-  /** String children changed (chunk added/removed/edited). */
-  _textContentChanged() {
-    if (this.view) this._setSource(this.view);
-    this._contentInvalidated();
-  }
-  _layoutAt(width) {
-    if (this._laidOutWidth !== width) {
-      this.view.layout(width);
-      this._laidOutWidth = width;
-    }
-    return this.view.contentHeight;
-  }
-  /** Props that require rebuilding the view (theme and loader options are
-   * constructor-only in the ntk widgets). Subclasses extend. */
-  _viewProps() {
-    return ['theme'];
-  }
-  applyProps(newProps, oldProps) {
-    const before = oldProps ?? this.props;
-    super.applyProps(newProps, oldProps);
-    if (!this.view) return;
-    if (this._viewProps().some((key) => newProps[key] !== before[key])) {
-      this.view = null; // rebuilt (and re-sourced) on next measure/paint
-      this._contentInvalidated();
-      return;
-    }
-    if (newProps.source !== before.source) {
-      this._setSource(this.view);
-      this._contentInvalidated();
-    }
-  }
-  _paintContent(ctx) {
-    const view = this._ensureView();
-    if (!view) return;
-    const content = this.contentBox();
-    if (content.width <= 0) return;
-    this._layoutAt(Math.max(1, Math.ceil(content.width)));
-    ctx.save();
-    ctx.beginPath();
-    ctx.rect(this.abs.x, this.abs.y, this.abs.width, this.abs.height);
-    ctx.clip();
-    // links recorded by draw() are in window coordinates, so linkAt can
-    // take synthetic-event coordinates directly (_defaultMouseDown)
-    view.draw(ctx, content.x, content.y);
-    ctx.restore();
-  }
-  _defaultMouseDown(ev) {
-    if (ev.button !== 1 || !this.view || !this.props.onLink) return;
-    const hit = this.view.linkAt(ev.x, ev.y);
-    if (!hit) return;
-    // MarkdownView.linkAt returns the href, HtmlView an { href, element }
-    if (typeof hit === 'string') this.props.onLink(hit, ev);
-    else this.props.onLink(hit.href, ev, hit.element);
-  }
-}
-/**
- * <markdown source>: ntk MarkdownView — headings, emphasis, lists, quotes,
- * tables, syntax-highlighted fences, math fences, async mermaid fences.
- * Props: source, theme, onLink(href, ev). Spacing comes from the box model
- * (padding prop), not the widget's own page padding.
- */
-export class MarkdownNode extends DocumentViewNode {
-  constructor(props, app) {
-    super('markdown', props, app);
-  }
-  _createView() {
-    return new MarkdownView(null, {
-      fonts: this.app.fonts,
-      theme: this.props.theme,
-      padding: 0,
-    });
-  }
-  _setSource(view) {
-    view.setMarkdown(this._source());
-  }
-}
-/**
- * <html source>: ntk HtmlView — its own CSS cascade (document <style>s plus
- * the `stylesheet` prop), flexbox/block layout, images. Props: source,
- * stylesheet, baseUrl, loadResource, theme, onLink(href, ev, element).
- */
-export class HtmlNode extends DocumentViewNode {
-  constructor(props, app) {
-    super('html', props, app);
-  }
-  _viewProps() {
-    return ['theme', 'stylesheet', 'baseUrl', 'loadResource'];
-  }
-  _createView() {
-    return new HtmlView(null, {
-      fonts: this.app.fonts,
-      theme: this.props.theme,
-      stylesheet: this.props.stylesheet,
-      baseUrl: this.props.baseUrl,
-      loadResource: this.props.loadResource,
-    });
-  }
-  _setSource(view) {
-    view.setHtml(this._source(), { baseUrl: this.props.baseUrl });
-  }
-}
-// 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;
-  }
-  _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 only the width is
- * constrained; scales to the content box.
- */
-export class SvgNode extends Node {
-  constructor(props, app) {
-    super('svg', props, app);
-    this.view = null;
-    this._stale = true;
-    this._configureMeasure();
-  }
-  /** Any change to the svg subtree (props, children, text) lands here. */
-  _textContentChanged() {
-    this._stale = true;
-    // markDirty is only legal on nodes with a measure function (it is
-    // unset when width and height are both fixed)
-    if (this._hasMeasure) this.yoga?.markDirty();
-    this.root?.invalidate(true);
-  }
-  _ensureView() {
-    if (!this._stale) return this.view;
-    this._stale = false;
-    this.view = 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';
-        this.view = new SvgView(null).setSvgDom({
-          type: 'tag',
-          name: 'svg',
-          attribs: svgAttribs(this.props, skip),
-          children: children.map((c) =>
-            c.kind === 'textchunk' ? { type: 'text', data: c.text } : c.toDom(),
-          ),
-        });
-      } else if (this.props.source) {
-        this.view = new SvgView(null).setSvg(String(this.props.source));
-      }
-    } catch (err) {
-      console.error('react-x11: <svg> failed to parse:', err.message);
-    }
-    return this.view;
-  }
-  _configureMeasure() {
-    if (this.props.width != null && this.props.height != null) {
-      if (this._hasMeasure) this.yoga.unsetMeasureFunc();
-      this._hasMeasure = false;
-      return;
-    }
-    this._hasMeasure = true;
-    this.yoga.setMeasureFunc((width, widthMode) => {
-      const view = this._ensureView();
-      const natW = view?.naturalWidth ?? 0;
-      const natH = view?.naturalHeight ?? 0;
-      let w = natW;
-      if (
-        widthMode !== Yoga.MEASURE_MODE_UNDEFINED &&
-        Number.isFinite(width) &&
-        width < w
-      ) {
-        w = width;
-      }
-      return { width: w, height: natW > 0 ? (w * natH) / natW : natH };
-    });
-  }
-  applyProps(newProps, oldProps) {
-    super.applyProps(newProps, oldProps);
-    this._configureMeasure();
-    // 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);
-  }
-}
-/**
- * <tex source displayMode size color>: a KaTeX formula via ntk layoutTex.
- * Layout is synchronous and headless; the box has an intrinsic size (no
- * wrapping). Invalid TeX renders nothing and logs once.
- */
-export class TexNode extends Node {
-  constructor(props, app) {
-    super('tex', props, app);
-    this.box = null;
-    this._boxKey = null;
-    this.yoga.setMeasureFunc(() => {
-      const box = this._ensureBox();
-      if (!box) return { width: 0, height: 0 };
-      return { width: Math.ceil(box.width), height: Math.ceil(box.height) };
-    });
-  }
-  /** Formula text changed via string children. */
-  _textContentChanged() {
-    this._boxKey = null;
-    this.yoga?.markDirty();
-    this.root?.invalidate(true);
-  }
-  _ensureBox() {
-    const { size, color, displayMode, katex } = this.props;
-    const source = stringChildrenOf(this) ?? this.props.source;
-    if (!source) return null;
-    const key = `${source}|${size}|${color}|${displayMode}`;
-    if (this._boxKey === key) return this.box;
-    this._boxKey = key;
-    this.box = null;
-    try {
-      this.box = layoutTex(String(source), {
-        size,
-        color,
-        displayMode: displayMode ?? false,
-        katex,
-      });
-    } catch (err) {
-      console.error('react-x11: <tex> failed to layout:', err.message);
-    }
-    return this.box;
-  }
-  applyProps(newProps, oldProps) {
-    const before = oldProps ?? this.props;
-    super.applyProps(newProps, oldProps);
-    if (
-      newProps.source !== before.source ||
-      newProps.size !== before.size ||
-      newProps.color !== before.color ||
-      newProps.displayMode !== before.displayMode
-    ) {
-      this.yoga.markDirty();
-      this.root?.invalidate(true);
-    }
-  }
-  _paintContent(ctx) {
-    const box = this._ensureBox();
-    // TexBox.draw issues raw XRender requests through ctx.window.app —
-    // it needs a real ntk 2d context (headless mock contexts skip)
-    if (!box || !ctx.window?.app?.display) return;
-    const content = this.contentBox();
-    ctx.fillStyle = this.props.color ?? '#222222';
-    box.draw(ctx, content.x, content.y);
-  }
-}