react-x11 2.6.1 → 2.8.0

package/src/cocoa/dnd.js

@@ -0,0 +1,358 @@
+// Drag and drop on the cocoa backend — the external transport over
+// @windowkit/appkit (>= 0.5): `NSDraggingDestination` on every window's
+// hosting view, `NSDraggingSource` from it. The `dropAccept` / `onDrag*` /
+// `dragData` prop contract is untouched; what this file owns is the
+// translation between AppKit's vocabulary and src/dnd.js's, in both
+// directions.
+//
+// ## The destination
+//
+// AppKit asks its questions as backend events — `drag-enter`, `drag-over`,
+// `drag-exit`, `drag-perform` — and expects the answer **during the
+// callback**: `setDropResponse` from inside the event is what
+// `draggingEntered:` returns. `DropSession._overAt` is synchronous (the
+// `onDragOver` chance included), so the answer is in hand before the
+// callback ends. The session is driven through its local entry points —
+// the ones an in-process `DragSession` uses — with an offer flagged
+// `external`, so the path diffing, `:drag-over`, `dropAccept` matching and
+// the handler dispatch are the one implementation.
+//
+// The payload is read **during `drag-perform`** — the pasteboard is the
+// source's promise and a source may withdraw it once its session has ended
+// — so every representation on offer is read then, and `getData` answers
+// from that. A Finder drag of three files is three items of one
+// `public.file-url` each; they become one `text/uri-list`.
+//
+// ## The source
+//
+// Once the renderer's own threshold says a press is a drag, `beginDrag`
+// hands the gesture to AppKit, which tracks it everywhere from there: the
+// pointer's `mousemove`/`mouseup` stop arriving, `drag-session-moved` is the
+// motion and `drag-session-ended` the release. A drop on one of our own
+// windows comes back through that window's destination events with
+// `local: true` — and those are routed to the live `DragSession` rather than
+// the pasteboard, so an in-app drop still gets `e.items` by reference and
+// `e.source === 'internal'`, the contract the X11 transport keeps. Other
+// applications read the pasteboard, where a thunk is a promise the bridge
+// asks `provide` to keep.
+//
+// ## Types
+//
+// Pasteboard types are UTIs; react-x11's vocabulary is MIME and X atoms
+// (src/transfer.js). The common ones map by table; anything else goes
+// through the OS's own database (`pasteboardTypeForMIME`, whose `dyn.*`
+// identifier for a MIME type no declared type claims is computed alike by
+// every process — how `application/x-myapp-…` travels between two react-x11
+// apps) and back (`pasteboardTypeInfo`).
+import { runWithPriority, DiscreteEventPriority } from '../priority.js';
+import {
+  TEXT_TARGETS,
+  TYPE_GROUPS,
+  parseUriList,
+  resolveType,
+} from '../transfer.js';
+
+const UTI_TO_MIME = Object.freeze({
+  'public.file-url': 'text/uri-list',
+  'public.url': 'text/uri-list',
+  'public.utf8-plain-text': 'text/plain;charset=utf-8',
+  'public.plain-text': 'text/plain',
+  'public.html': 'text/html',
+  'public.rtf': 'text/rtf',
+  'public.png': 'image/png',
+  'public.jpeg': 'image/jpeg',
+  'public.tiff': 'image/tiff',
+  'public.svg-image': 'image/svg+xml',
+  'public.json': 'application/json',
+});
+
+const MIME_TO_UTI = Object.freeze({
+  'text/uri-list': 'public.file-url',
+  'text/plain;charset=utf-8': 'public.utf8-plain-text',
+  'text/plain': 'public.utf8-plain-text',
+  UTF8_STRING: 'public.utf8-plain-text',
+  STRING: 'public.utf8-plain-text',
+  TEXT: 'public.utf8-plain-text',
+  'text/html': 'public.html',
+  'text/rtf': 'public.rtf',
+  'image/png': 'public.png',
+  'image/jpeg': 'public.jpeg',
+  'image/tiff': 'public.tiff',
+  'image/svg+xml': 'public.svg-image',
+  'application/json': 'public.json',
+});
+
+/** The pasteboard types every window takes; concrete `dropAccept` types add
+ * to them (`CocoaDropTransport.refreshTypes`). */
+export const BASE_DROP_UTIS = Object.freeze([
+  'public.file-url',
+  'public.url',
+  'public.utf8-plain-text',
+  'public.plain-text',
+  'public.html',
+  'public.rtf',
+  'public.png',
+  'public.jpeg',
+  'public.tiff',
+]);
+
+const isTextual = (uti, mime) =>
+  uti.startsWith('public.') && /text/.test(uti) ? true : /^text\//i.test(mime);
+
+export function mimeFromUti(uti, native) {
+  if (UTI_TO_MIME[uti]) return UTI_TO_MIME[uti];
+  if (!uti.startsWith('dyn.') && !uti.includes('.')) return null;
+  try {
+    const info = native.pasteboardTypeInfo?.(uti);
+    return typeof info?.mime === 'string' && info.mime ? info.mime : null;
+  } catch {
+    return null;
+  }
+}
+
+export function utiFromMime(mime, native) {
+  if (MIME_TO_UTI[mime]) return MIME_TO_UTI[mime];
+  // an X atom name is not a MIME type; nothing on a pasteboard is called it
+  if (!/^[a-z0-9.+-]+\/[a-z0-9.+-]+/i.test(mime)) return null;
+  try {
+    const uti = native.pasteboardTypeForMIME?.(mime.replace(/;.*$/, ''));
+    return typeof uti === 'string' && uti ? uti : null;
+  } catch {
+    return null;
+  }
+}
+
+/** What a pasteboard's UTIs are in react-x11's vocabulary, best first. */
+export function offeredTypes(utis, native) {
+  const out = [];
+  const add = (t) => t && !out.includes(t) && out.push(t);
+  for (const uti of utis ?? []) {
+    const mime = mimeFromUti(uti, native);
+    add(mime);
+    // the plain name beside the charset one, so `text/plain` in a
+    // `dropAccept` matches what every macOS text drag offers
+    if (uti === 'public.utf8-plain-text') add('text/plain');
+  }
+  return out;
+}
+
+/** The action a source's operation mask asks for: the first of the three
+ * react-x11 names it allows. */
+export function requestedAction(operations) {
+  return (
+    ['copy', 'move', 'link'].find((a) => operations?.includes(a)) ?? 'copy'
+  );
+}
+
+/**
+ * Everything on the pasteboard, read now (see the header), as the extras
+ * `DropSession.localDrop` hands the handler: `items` by type, the parsed
+ * `files`, the best `text`, and a `getData` answering from the same read.
+ */
+export function readPayload(native, types) {
+  const values = {};
+  const urls = [];
+  const items = (() => {
+    try {
+      return native.dragItems?.() ?? [];
+    } catch {
+      return [];
+    }
+  })();
+  items.forEach((item, index) => {
+    for (const uti of item?.types ?? []) {
+      if (uti === 'public.file-url' || uti === 'public.url') {
+        const url = native.dragItemString(index, uti);
+        if (url) urls.push(url);
+        continue;
+      }
+      const mime = mimeFromUti(uti, native);
+      if (!mime || values[mime] !== undefined) continue;
+      const value = isTextual(uti, mime)
+        ? native.dragItemString(index, uti)
+        : native.dragItemData(index, uti);
+      if (value == null) continue;
+      values[mime] = value;
+      if (
+        uti === 'public.utf8-plain-text' &&
+        values['text/plain'] === undefined
+      ) {
+        values['text/plain'] = value;
+      }
+    }
+  });
+  if (urls.length) values['text/uri-list'] = urls.join('\r\n') + '\r\n';
+  const best = TEXT_TARGETS.find((t) => values[t] !== undefined);
+  return {
+    items: values,
+    files: values['text/uri-list'] ? parseUriList(values['text/uri-list']) : [],
+    text: best ? values[best] : undefined,
+    getData: (type) =>
+      Promise.resolve(values[resolveType(type, types)] ?? null),
+  };
+}
+
+/** A value as the pasteboard carries it: strings and bytes as they are,
+ * anything else as JSON — the same rule the X transport applies. */
+const wire = (value) =>
+  typeof value === 'string' ||
+  Buffer.isBuffer(value) ||
+  ArrayBuffer.isView(value) ||
+  value instanceof ArrayBuffer
+    ? value
+    : JSON.stringify(value);
+
+/**
+ * A `DragSession`'s payload as `beginDrag`'s spec: one item per file for a
+ * `text/uri-list` (that is how the desktop speaks), every other type on the
+ * first item under its UTI, thunks as promises the bridge asks `provide`
+ * to keep. The files thunk alone resolves now, because the items cannot
+ * be counted without it.
+ */
+export function dragSpec(session, native, scale) {
+  const types = session.types;
+  const reverse = new Map(); // uti -> react-x11 type
+  const items = [];
+  const filesType = types.find((t) => TYPE_GROUPS.files.includes(t));
+  if (filesType) {
+    const list = session._resolve(filesType);
+    if (typeof list === 'string') {
+      for (const { uri } of parseUriList(list)) {
+        items.push({ 'public.file-url': uri });
+      }
+    }
+  }
+  const first = {};
+  for (const type of types) {
+    if (type === filesType) continue;
+    const uti = utiFromMime(type, native);
+    if (!uti || uti in first) continue;
+    reverse.set(uti, type);
+    const raw = session._data[type];
+    first[uti] = typeof raw === 'function' ? null : wire(raw);
+  }
+  if (Object.keys(first).length) {
+    if (items.length) Object.assign(items[0], first);
+    else items.push(first);
+  }
+  if (!items.length) items.push({ 'public.utf8-plain-text': '' });
+  return {
+    x: session.press.x / scale,
+    y: session.press.y / scale,
+    items,
+    operations: session.actions,
+    provide: (uti) => wire(session._resolve(reverse.get(uti) ?? uti)),
+  };
+}
+
+/**
+ * One window's drop side: the registered types, and the four events turned
+ * into `DropSession` calls with the answer sent back inside the callback.
+ */
+export class CocoaDropTransport {
+  constructor(wnd, session, node) {
+    this.wnd = wnd;
+    this.session = session;
+    this.node = node;
+    this._registered = null;
+    // AppKit tracks the whole drag on this thread: the pump does not return
+    // until the drop, so nothing an enter/over dispatch schedules — a
+    // `useDropTarget` lighting its "drop here" label, any handler's
+    // `setState` — has a frame tick or a microtask to land on. Discrete is
+    // the one lane the app can land by hand from inside the callback
+    // (src/cocoa/app.js `_afterInput`), which is where the answer to
+    // AppKit's question is painted. The renderer's own `:drag-over` needs
+    // none of this and never did.
+    session.hoverPriority = DiscreteEventPriority;
+    this.refreshTypes();
+  }
+
+  /** The base set plus every concrete type a `dropAccept` under this
+   * window names, re-registered only when the list changes. */
+  refreshTypes() {
+    const native = this.wnd._native;
+    const types = new Set(BASE_DROP_UTIS);
+    for (const mime of this.node._dndConcreteTypes?.() ?? []) {
+      const uti = utiFromMime(mime, native);
+      if (uti) types.add(uti);
+    }
+    const list = [...types];
+    if (this._registered && list.join('\n') === this._registered.join('\n')) {
+      return;
+    }
+    this._registered = list;
+    this.wnd.registerDropTypes(list);
+  }
+
+  handle(ev) {
+    switch (ev.type) {
+      case 'drag-enter':
+      case 'drag-over':
+        return this._over(ev);
+      case 'drag-exit':
+        return this._leave(ev);
+      case 'drag-perform':
+        return this._perform(ev);
+      default:
+        return undefined;
+    }
+  }
+
+  /** The live drag in this process, when the pasteboard is ours. */
+  _local(ev) {
+    return ev.local ? (this.wnd.app._activeDrag ?? null) : null;
+  }
+
+  _offer(ev) {
+    const drag = this._local(ev);
+    if (drag) return drag._offer();
+    return {
+      types: offeredTypes(ev.types, this.wnd._native),
+      action: requestedAction(ev.operations),
+      source: 'external',
+    };
+  }
+
+  _point(ev) {
+    const s = this.wnd.scale;
+    return { rootX: Math.round(ev.gx * s), rootY: Math.round(ev.gy * s) };
+  }
+
+  _over(ev) {
+    const drag = this._local(ev);
+    const offer = this._offer(ev);
+    const { rootX, rootY } = this._point(ev);
+    const answer = this.session.localOver(rootX, rootY, offer, Date.now());
+    if (drag) {
+      drag.accepted = answer.accepted;
+      if (answer.accepted) drag.currentAction = answer.action;
+    }
+    const response = { accept: answer.accepted };
+    if (answer.accepted && ev.operations?.includes(answer.action)) {
+      response.operation = answer.action;
+    }
+    this.wnd.setDropResponse(response);
+  }
+
+  _leave(ev) {
+    const drag = this._local(ev);
+    // the leaving half of the same stream, in the same lane as the enter
+    runWithPriority(DiscreteEventPriority, () => this.session.localLeave());
+    if (drag) drag.accepted = false;
+  }
+
+  _perform(ev) {
+    const drag = this._local(ev);
+    const offer = this._offer(ev);
+    const extras = drag
+      ? drag._dropExtras()
+      : readPayload(this.wnd._native, offer.types);
+    const outcome = this.session.localDrop(offer, extras, Date.now());
+    if (drag && outcome.handled) drag.currentAction = outcome.action;
+    const response = { accept: outcome.handled };
+    if (outcome.handled && ev.operations?.includes(outcome.action)) {
+      response.operation = outcome.action;
+    }
+    this.wnd.setDropResponse(response);
+  }
+}

package/src/cocoa/dock.js

@@ -0,0 +1,39 @@
+// The Dock menu on the cocoa backend — `applicationDockMenu:` through
+// @windowkit/appkit (>= 0.5), driven from the same `items` vocabulary
+// `MenuBar` and the tray take.
+//
+// The same machinery as the menu bar: dbusmenu.js's `snapshot` gives every
+// item a stable id and keeps it across re-renders, and the bridge's menu spec
+// is built by the one builder the menu bar uses (`menuItemsSpec`), so the
+// three menus an app can put on the desktop are one authoring model. An
+// activation comes back as a `menu-activate` event tagged `menu: 'dock'` —
+// the bridge's way of saying which tree the id belongs to, since the two
+// allocate ids independently — and runs the item's own `onSelect`, the way
+// `useGlobalMenu` does.
+import { IdAllocator, snapshot } from '../dbusmenu.js';
+import { menuItemsSpec } from './globalmenu.js';
+
+export class CocoaDockMenu {
+  constructor(app) {
+    this.app = app;
+    this.alloc = new IdAllocator();
+    this.nodes = null;
+  }
+
+  /** Install `items`, or take the menu down with null. */
+  update(items) {
+    if (!items) {
+      this.nodes = null;
+      this.app._native.setDockMenu(null);
+      return;
+    }
+    this.nodes = snapshot(items, this.alloc);
+    this.app._native.setDockMenu(menuItemsSpec(this.nodes));
+  }
+
+  /** A `menu-activate` tagged `dock` landed on this menu. */
+  activate(id) {
+    const item = this.nodes?.get(id)?.item;
+    item?.onSelect?.(item);
+  }
+}

package/src/cocoa/filepanels.js

@@ -0,0 +1,155 @@
+// Native file panels on the cocoa backend — `NSOpenPanel` / `NSSavePanel`
+// through @windowkit/appkit (>= 0.5), the top rung of src/filedialog.js's
+// ladder on this backend.
+//
+// The panel belongs to this process's NSApplication, which is what the
+// `osascript` rung could never be: it runs as a **sheet** on the window that
+// asked, every filter the OS type database knows gets through (a MIME type
+// as much as an extension), and a cancel is a cancel rather than a failed
+// subprocess. `CocoaApp.filePanels` is this object, and its *presence* is
+// the capability the ladder tests for — the same rule `nativeBezels` and
+// `raiseWindow` follow, so the ladder itself never names a backend.
+//
+// Two things about the bridge's contract shape the code here:
+//
+// - **With a window handle the panel is a sheet** and the call returns at
+//   once; the callback lands through the pump on a later tick, like a menu
+//   activation. **Without one it is app-modal** — `runModal` parks the
+//   thread inside AppKit's loop until the panel is dismissed, and the
+//   callback runs before the call returns. Timers do not tick meanwhile.
+//   That is the fallback, not the design: `useFileDialog()` always names
+//   its window, and the bare functions want `parentWindow` for this reason.
+// - **A destroyed owner ends its sheet with a cancel**, natively — the
+//   bridge answers any panel still attached to a window `destroyWindow2`
+//   takes down — so a promise here is never left pending by an unmount.
+import path from 'node:path';
+
+import { PortalCancelledError, RESPONSE_CANCELLED } from '../portal.js';
+
+/** Extensions arrive with or without a dot, and sometimes as a glob. */
+const bareExtension = (ext) => String(ext).replace(/^[.*]*\.?/, '');
+
+/**
+ * react-x11's dialog options as the bridge's panel spec.
+ *
+ * `contentTypeFor({ extension } | { mime })` is the bridge's lookup in the
+ * OS's own type database — `'png'` → `'public.png'`, `'application/json'` →
+ * `'public.json'`, an undeclared extension a dynamic type that matches
+ * exactly it — injected so the translation is a pure function the tests can
+ * pin. A lookup that answers nothing drops that entry; a filter list the OS
+ * recognises nothing of means no filter, which is also what an absent one
+ * means.
+ *
+ * Only a title the caller gave becomes the panel's `message` (the line
+ * above the file list): the panel already says Open or Save on its own,
+ * and the ladder's default title would be a second copy of it.
+ */
+export function panelSpec(kind, opts = {}, contentTypeFor = () => null) {
+  const spec = {};
+  if (opts.title) {
+    spec.title = opts.title;
+    spec.message = opts.title;
+  }
+  if (opts.acceptLabel) spec.prompt = opts.acceptLabel;
+  if (opts.defaultFolder) spec.directoryURL = opts.defaultFolder;
+
+  if (kind === 'save') {
+    spec.canCreateDirectories = true;
+    if (opts.defaultPath) {
+      // `defaultPath` names a file that need not exist yet: the panel opens
+      // in its directory with its name filled in, which is the portal's
+      // `current_file` by other means
+      spec.directoryURL = path.dirname(opts.defaultPath);
+      spec.nameFieldStringValue = path.basename(opts.defaultPath);
+    } else if (opts.defaultName) {
+      spec.nameFieldStringValue = opts.defaultName;
+    }
+  } else {
+    spec.multiple = Boolean(opts.multiple);
+    if (kind === 'folder') {
+      spec.directory = true;
+      spec.canCreateDirectories = true;
+    }
+  }
+
+  if (kind !== 'folder') {
+    const types = [];
+    for (const filter of opts.filters ?? []) {
+      for (const ext of filter.extensions ?? []) {
+        const extension = bareExtension(ext);
+        if (extension) types.push(contentTypeFor({ extension }));
+      }
+      for (const mime of filter.mimeTypes ?? []) {
+        types.push(contentTypeFor({ mime: String(mime) }));
+      }
+    }
+    const known = [...new Set(types.filter((t) => typeof t === 'string' && t))];
+    if (known.length) spec.allowedContentTypes = known;
+  }
+  return spec;
+}
+
+export class CocoaFilePanels {
+  constructor(app) {
+    this.app = app;
+  }
+
+  /**
+   * Show one panel and resolve with what the user chose, in the ladder's own
+   * shape: absolute paths (a save answers one, still in a list), a
+   * `PortalCancelledError` for a cancel (which `openFile` and the hook turn
+   * into `null`), and an abort's own reason when the caller's `signal` fired
+   * — the same three outcomes the portal rung has, so nothing above this
+   * can tell the rungs apart.
+   *
+   * `wnd` is the `CocoaWindow` the panel is a sheet on, or null for
+   * app-modal (see the header).
+   */
+  show(kind, opts = {}, wnd = null) {
+    const native = this.app._native;
+    const signal = opts.signal;
+    if (signal?.aborted) {
+      return Promise.reject(
+        signal.reason ?? new PortalCancelledError(RESPONSE_CANCELLED),
+      );
+    }
+    const spec = panelSpec(kind, opts, (query) => native.contentTypeFor(query));
+    if (wnd && !wnd.destroyed && wnd._h != null) spec.window = wnd._h;
+
+    return new Promise((resolve, reject) => {
+      let handle = null;
+      let settled = false;
+      const onAbort = () => {
+        if (settled) return;
+        settled = true;
+        // dismissing the sheet makes the bridge answer the callback with
+        // null, which `done` then ignores — the abort is the outcome
+        if (handle != null) native.cancelPanel(handle);
+        reject(signal.reason ?? new PortalCancelledError(RESPONSE_CANCELLED));
+      };
+      const done = (result) => {
+        signal?.removeEventListener('abort', onAbort);
+        if (settled) return;
+        settled = true;
+        if (result == null) {
+          reject(new PortalCancelledError(RESPONSE_CANCELLED));
+          return;
+        }
+        resolve(Array.isArray(result) ? result : [result]);
+      };
+      signal?.addEventListener('abort', onAbort, { once: true });
+      try {
+        // app-modal: this call blocks and `done` has already run by the
+        // time it returns; a sheet: it returns at once with the handle
+        handle = native[kind === 'save' ? 'savePanel' : 'openPanel'](
+          spec,
+          done,
+        );
+      } catch (err) {
+        signal?.removeEventListener('abort', onAbort);
+        settled = true;
+        reject(err);
+      }
+    });
+  }
+}

package/src/cocoa/fonts.js

@@ -25,6 +25,7 @@
 import { readFileSync } from 'node:fs';
 import { inflateSync } from 'node:zlib';
 
+import LineBreaker from 'linebreak';
 import { cssColorStraight, Font } from 'ntk';
 
 import { loadNative } from './native.js';
@@ -144,6 +145,78 @@ class CocoaTextLayout {
   }
 }
 
+/**
+ * What a break at the end of a run consumes: the trailing whitespace ntk's
+ * tokenizer strips — a line's width never counts it, on either engine — and
+ * a hard line break, which is an opportunity the text already spells out and
+ * must not become a second one (an empty line in the measurement).
+ */
+const RUN_TAIL = /[ \t\u00a0]*(?:\r\n|[\n\r\u2028\u2029])?[ \t\u00a0]*$/;
+
+/**
+ * The same spans with a hard break at every UAX#14 line-break opportunity,
+ * and the whitespace each break consumes dropped: one unbreakable run per
+ * line. Laid out with no width bound, the widest line is then the longest
+ * word — which is the answer to "how narrow can you be?", CSS's min-content.
+ *
+ * **Why the text is broken here rather than by asking CoreText for a narrow
+ * line.** CoreText's line breaker must make progress whatever width it is
+ * given, so a paragraph offered zero (or a pixel) comes back broken *inside*
+ * its words: the caption in examples/animation.jsx measures 61 lines and 13px
+ * wide, a floor of one character. A floor under the longest word is worse
+ * than no floor at all — it lets a flex column shrink to where the text has
+ * nowhere left to wrap. Breaking the text here asks CoreText only to shape
+ * and measure, which is the half of it that has no opinion.
+ *
+ * The opportunities come from the `linebreak` package **ntk breaks its own
+ * lines with**, so the two engines agree on where a line may break and a
+ * tree measures the same on both backends.
+ */
+function brokenAtEveryOpportunity(spans) {
+  const text = spans.map((span) => span.text).join('');
+  if (!text) return spans;
+  // Each run is [start, end) with its trailing whitespace trimmed off, so a
+  // line is as wide as its ink — the same measurement ntk reports, which
+  // strips the trailing run too.
+  const runs = [];
+  const breaker = new LineBreaker(text);
+  let start = 0;
+  for (let bk = breaker.nextBreak(); bk; bk = breaker.nextBreak()) {
+    const run = text.slice(start, bk.position);
+    runs.push([start, bk.position - (RUN_TAIL.exec(run)?.[0].length ?? 0)]);
+    start = bk.position;
+  }
+  if (start < text.length) runs.push([start, text.length]);
+  if (runs.length < 2) return spans; // one run: nothing may break anyway
+
+  // Where each span sits in that text, so a run can be cut out of the spans
+  // it crosses — a break between two `<text>` children of different sizes is
+  // an ordinary opportunity, and the two sides keep their own faces.
+  const placed = [];
+  let at = 0;
+  for (const span of spans) {
+    placed.push({ span, start: at, end: (at += span.text.length) });
+  }
+  const out = [];
+  let previous = spans[0];
+  runs.forEach(([from, to], i) => {
+    // The separator carries the attributes of the span before it: the native
+    // needs a font on every span, and a newline draws nothing.
+    if (i > 0) out.push({ ...previous, text: '\n' });
+    for (const p of placed) {
+      const a = Math.max(from, p.start);
+      const b = Math.min(to, p.end);
+      if (b <= a) continue;
+      previous = p.span;
+      out.push({
+        ...p.span,
+        text: p.span.text.slice(a - p.start, b - p.start),
+      });
+    }
+  });
+  return out;
+}
+
 const ALIGN_FLUSH = { left: 0, center: 0.5, right: 1 };
 
 function flushFor(align, direction) {
@@ -809,8 +882,19 @@ export class CocoaFontManager {
         ...(color == null ? {} : { color: parseColor(color) }),
       });
     }
+    // A width offer of zero is a question, not a degenerate layout: yoga
+    // asks it to find the node's min-content floor (`minWidth: 'auto'`,
+    // nodes.js). It used to fall into the `undefined` below and answer
+    // max-content — the whole paragraph on one line — so a `<text>` in a
+    // flex item held its container open at its longest line and two equal
+    // columns came out 823px and 34px wide. `brokenAtEveryOpportunity` is
+    // the answer instead.
+    const minContent = Number.isFinite(maxWidth) && maxWidth <= 0;
+    const laid = minContent
+      ? brokenAtEveryOpportunity(nativeSpans)
+      : nativeSpans;
     const raw = this._native.createLayout({
-      spans: nativeSpans,
+      spans: laid,
       maxWidth:
         Number.isFinite(maxWidth) && maxWidth > 0 ? maxWidth : undefined,
       align: flushFor(align, direction),
@@ -819,7 +903,14 @@ export class CocoaFontManager {
       ellipsis: overflow === 'ellipsis',
       rtl: direction === 'rtl',
     });
-    const layout = new CocoaTextLayout(this._native, raw, text);
+    // the text the native actually laid out: a min-content measurement's
+    // line and run ranges are indices into the broken text, and the two have
+    // to agree for `indexAt`/`caretPosition` to mean anything at all
+    const layout = new CocoaTextLayout(
+      this._native,
+      raw,
+      minContent ? laid.map((span) => span.text).join('') : text,
+    );
     layout._contextInk = contextInk;
     this._layouts.set(signature, layout);
     if (this._layouts.size > 64) {