@graphrefly/graphrefly 0.47.2 → 0.48.0

package/dist/utils/process/index.js

@@ -2,8 +2,8 @@ import {
   processInstanceKeyOf,
   processManager,
   processStateKeyOf
-} from "../../chunk-6ZLCPUXS.js";
-import "../../chunk-BXGZFGZ4.js";
+} from "../../chunk-46X2EFQH.js";
+import "../../chunk-C5QD5DQX.js";
 import "../../chunk-N6MNJNHB.js";
 import "../../chunk-AZDQPQ3V.js";
 export {

package/dist/utils/reactive-layout/index.cjs

@@ -23,9 +23,12 @@ __export(reactive_layout_exports, {
   CanvasMeasureAdapter: () => CanvasMeasureAdapter,
   CliMeasureAdapter: () => CliMeasureAdapter,
   ImageSizeAdapter: () => ImageSizeAdapter,
+  InjectedMeasureAdapter: () => InjectedMeasureAdapter,
+  IntlSegmentAdapter: () => IntlSegmentAdapter,
   NodeCanvasMeasureAdapter: () => NodeCanvasMeasureAdapter,
   PrecomputedAdapter: () => PrecomputedAdapter,
   SvgBoundsAdapter: () => SvgBoundsAdapter,
+  _resetDefaultSegmentAdapterForTests: () => _resetDefaultSegmentAdapterForTests,
   analyzeAndMeasure: () => analyzeAndMeasure,
   carveTextLineSlots: () => carveTextLineSlots,
   circleIntervalForBand: () => circleIntervalForBand,
@@ -34,6 +37,7 @@ __export(reactive_layout_exports, {
   computeFlowLines: () => computeFlowLines,
   computeLineBreaks: () => computeLineBreaks,
   computeTotalHeight: () => computeTotalHeight,
+  getDefaultSegmentAdapter: () => getDefaultSegmentAdapter,
   layoutNextLine: () => layoutNextLine,
   measureBlock: () => measureBlock,
   measureBlocks: () => measureBlocks,
@@ -164,6 +168,39 @@ function countCells(text) {
 }
 
 // src/utils/reactive-layout/measurement-adapters.ts
+var IntlSegmentAdapter = class {
+  wordSeg = null;
+  graphemeSeg = null;
+  constructor() {
+    if (typeof Intl === "undefined" || typeof Intl.Segmenter !== "function") {
+      throw new TypeError(
+        "IntlSegmentAdapter: Intl.Segmenter is not available in this runtime (Hermes / older embedded JS engines). Pass a custom SegmentAdapter via `reactiveLayout({ segmentAdapter })` \u2014 see the SegmentAdapter JSDoc for the polyfill recipe (e.g. `intl-segmenter-polyfill` or `@formatjs/intl-segmenter`)."
+      );
+    }
+  }
+  segmentWords(text) {
+    if (this.wordSeg === null) {
+      this.wordSeg = new Intl.Segmenter(void 0, { granularity: "word" });
+    }
+    return this.wordSeg.segment(text);
+  }
+  segmentGraphemes(text) {
+    if (this.graphemeSeg === null) {
+      this.graphemeSeg = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+    }
+    return this.graphemeSeg.segment(text);
+  }
+};
+var _defaultSegmentAdapter = null;
+function getDefaultSegmentAdapter() {
+  if (_defaultSegmentAdapter === null) {
+    _defaultSegmentAdapter = new IntlSegmentAdapter();
+  }
+  return _defaultSegmentAdapter;
+}
+function _resetDefaultSegmentAdapterForTests() {
+  _defaultSegmentAdapter = null;
+}
 var CliMeasureAdapter = class {
   cellPx;
   constructor(opts) {
@@ -173,6 +210,33 @@ var CliMeasureAdapter = class {
     return { width: countCells(text) * this.cellPx };
   }
 };
+var InjectedMeasureAdapter = class {
+  fn;
+  cache;
+  constructor(fn, opts) {
+    if (typeof fn !== "function") {
+      throw new TypeError(
+        "InjectedMeasureAdapter: a synchronous (text, font) => widthPx function is required"
+      );
+    }
+    this.fn = fn;
+    this.cache = opts?.cache ? /* @__PURE__ */ new Map() : null;
+  }
+  measureSegment(text, font) {
+    if (this.cache) {
+      const key = `${font}\0${text}`;
+      const hit = this.cache.get(key);
+      if (hit !== void 0) return { width: hit };
+      const w = this.fn(text, font);
+      this.cache.set(key, w);
+      return { width: w };
+    }
+    return { width: this.fn(text, font) };
+  }
+  clearCache() {
+    this.cache?.clear();
+  }
+};
 var PrecomputedAdapterKeyError = class extends Error {
   name = "KeyError";
 };
@@ -392,10 +456,9 @@ var leftStickyPunctuation = /* @__PURE__ */ new Set([
 function normalizeWhitespace(text) {
   return text.replace(/[\t\n\r\f ]+/g, " ").replace(/^ | $/g, "");
 }
-function segmentText(normalized) {
-  const wordSegmenter = new Intl.Segmenter(void 0, { granularity: "word" });
+function segmentText(normalized, segmentAdapter) {
   const pieces = [];
-  for (const s of wordSegmenter.segment(normalized)) {
+  for (const s of segmentAdapter.segmentWords(normalized)) {
     const text = s.segment;
     const isWordLike = s.isWordLike ?? false;
     const texts = [];
@@ -431,13 +494,11 @@ function segmentText(normalized) {
   }
   return pieces;
 }
-function analyzeAndMeasure(text, font, adapter, cache, stats) {
+function analyzeAndMeasure(text, font, adapter, cache, stats, segmentAdapter) {
   const normalized = normalizeWhitespace(text);
   if (normalized.length === 0) return [];
-  const pieces = segmentText(normalized);
-  const graphemeSegmenter2 = new Intl.Segmenter(void 0, {
-    granularity: "grapheme"
-  });
+  const segAdapter = segmentAdapter ?? getDefaultSegmentAdapter();
+  const pieces = segmentText(normalized, segAdapter);
   const rawTexts = [];
   const rawKinds = [];
   const rawWordLike = [];
@@ -502,7 +563,7 @@ function analyzeAndMeasure(text, font, adapter, cache, stats) {
     }
     if (isCJK(t)) {
       let unitText = "";
-      for (const gs of graphemeSegmenter2.segment(t)) {
+      for (const gs of segAdapter.segmentGraphemes(t)) {
         const grapheme = gs.segment;
         if (unitText.length > 0 && kinsokuStart.has(grapheme)) {
           unitText += grapheme;
@@ -534,7 +595,7 @@ function analyzeAndMeasure(text, font, adapter, cache, stats) {
     let graphemeWidths = null;
     if (mergedWordLike[i] && t.length > 1) {
       const gWidths = [];
-      for (const gs of graphemeSegmenter2.segment(t)) {
+      for (const gs of segAdapter.segmentGraphemes(t)) {
         gWidths.push(measureCached(gs.segment));
       }
       if (gWidths.length > 1) {
@@ -545,10 +606,11 @@ function analyzeAndMeasure(text, font, adapter, cache, stats) {
   }
   return segments;
 }
-function computeLineBreaks(segments, maxWidth, adapter, font, cache) {
+function computeLineBreaks(segments, maxWidth, adapter, font, cache, segmentAdapter) {
   if (segments.length === 0) {
     return { lines: [], lineCount: 0 };
   }
+  const segAdapter = segmentAdapter ?? getDefaultSegmentAdapter();
   const lines = [];
   let lineW = 0;
   let hasContent = false;
@@ -574,10 +636,7 @@ function computeLineBreaks(segments, maxWidth, adapter, font, cache) {
       const seg = segments[i];
       if (seg.kind === "soft-hyphen" || seg.kind === "hard-break") continue;
       if (i === lineStartSeg && lineStartGrapheme > 0 && seg.graphemeWidths) {
-        const graphemeSegmenter2 = new Intl.Segmenter(void 0, {
-          granularity: "grapheme"
-        });
-        const graphemes = [...graphemeSegmenter2.segment(seg.text)].map((g) => g.segment);
+        const graphemes = [...segAdapter.segmentGraphemes(seg.text)].map((g) => g.segment);
         text += graphemes.slice(lineStartGrapheme).join("");
       } else {
         text += seg.text;
@@ -585,10 +644,7 @@ function computeLineBreaks(segments, maxWidth, adapter, font, cache) {
     }
     if (endGrapheme > 0 && endSeg < segments.length) {
       const seg = segments[endSeg];
-      const graphemeSegmenter2 = new Intl.Segmenter(void 0, {
-        granularity: "grapheme"
-      });
-      const graphemes = [...graphemeSegmenter2.segment(seg.text)].map((g) => g.segment);
+      const graphemes = [...segAdapter.segmentGraphemes(seg.text)].map((g) => g.segment);
       const startG = lineStartSeg === endSeg ? lineStartGrapheme : 0;
       text += graphemes.slice(startG, endGrapheme).join("");
     }
@@ -719,26 +775,19 @@ function computeLineBreaks(segments, maxWidth, adapter, font, cache) {
 function canBreakAfter(kind) {
   return kind === "space" || kind === "zero-width-break" || kind === "soft-hyphen";
 }
-var _graphemeSegmenter = null;
-function graphemeSegmenter() {
-  if (_graphemeSegmenter === null) {
-    _graphemeSegmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
-  }
-  return _graphemeSegmenter;
-}
-function sliceSegmentText(seg, startG, endG) {
+function sliceSegmentText(seg, startG, endG, segmentAdapter) {
   if (startG === 0 && endG < 0) return seg.text;
-  const graphemes = [...graphemeSegmenter().segment(seg.text)].map((g) => g.segment);
+  const graphemes = [...segmentAdapter.segmentGraphemes(seg.text)].map((g) => g.segment);
   const stop = endG < 0 ? graphemes.length : endG;
   return graphemes.slice(startG, stop).join("");
 }
-function buildLineText(segments, startSeg, startG, endSeg, endG, appendHyphen) {
+function buildLineText(segments, startSeg, startG, endSeg, endG, appendHyphen, segmentAdapter) {
   let text = "";
   for (let i = startSeg; i < endSeg; i++) {
     const seg = segments[i];
     if (seg.kind === "soft-hyphen" || seg.kind === "hard-break") continue;
     if (i === startSeg && startG > 0) {
-      text += sliceSegmentText(seg, startG, -1);
+      text += sliceSegmentText(seg, startG, -1, segmentAdapter);
     } else {
       text += seg.text;
     }
@@ -746,7 +795,7 @@ function buildLineText(segments, startSeg, startG, endSeg, endG, appendHyphen) {
   if (endG > 0 && endSeg < segments.length) {
     const seg = segments[endSeg];
     const from = startSeg === endSeg ? startG : 0;
-    text += sliceSegmentText(seg, from, endG);
+    text += sliceSegmentText(seg, from, endG, segmentAdapter);
   }
   if (appendHyphen) text += "-";
   return text;
@@ -772,6 +821,7 @@ function resolveHyphenWidth(ctx) {
 function layoutNextLine(segments, cursor, slotWidth, ctx) {
   let i = cursor.segmentIndex;
   const initialG = cursor.graphemeIndex;
+  const segAdapter = ctx?.segmentAdapter ?? getDefaultSegmentAdapter();
   if (i >= segments.length) return null;
   if (initialG === 0) {
     while (i < segments.length) {
@@ -837,7 +887,15 @@ function layoutNextLine(segments, cursor, slotWidth, ctx) {
     if (seg.graphemeWidths) {
       const overflowed = consumeBreakable(startSeg, startG, seg.graphemeWidths);
       if (overflowed) {
-        const text2 = buildLineText(segments, startSeg, startG, lineEndSeg, lineEndG, false);
+        const text2 = buildLineText(
+          segments,
+          startSeg,
+          startG,
+          lineEndSeg,
+          lineEndG,
+          false,
+          segAdapter
+        );
         return {
           text: text2,
           width: lineW,
@@ -860,7 +918,8 @@ function layoutNextLine(segments, cursor, slotWidth, ctx) {
           startG,
           lineEndSeg,
           lineEndG,
-          endsAtSoftHyphen2
+          endsAtSoftHyphen2,
+          segAdapter
         );
         return {
           text: text2,
@@ -881,7 +940,15 @@ function layoutNextLine(segments, cursor, slotWidth, ctx) {
       if (w > slotWidth && seg.graphemeWidths) {
         const overflowed = consumeBreakable(i, 0, seg.graphemeWidths);
         if (overflowed) {
-          const text2 = buildLineText(segments, startSeg, startG, lineEndSeg, lineEndG, false);
+          const text2 = buildLineText(
+            segments,
+            startSeg,
+            startG,
+            lineEndSeg,
+            lineEndG,
+            false,
+            segAdapter
+          );
           return {
             text: text2,
             width: lineW,
@@ -915,7 +982,8 @@ function layoutNextLine(segments, cursor, slotWidth, ctx) {
           startG,
           lineEndSeg,
           lineEndG,
-          endsAtSoftHyphen2
+          endsAtSoftHyphen2,
+          segAdapter
         );
         return {
           text: text3,
@@ -931,7 +999,8 @@ function layoutNextLine(segments, cursor, slotWidth, ctx) {
           startG,
           pendingBreakSeg,
           pendingBreakG,
-          pendingBreakSoftHyphen
+          pendingBreakSoftHyphen,
+          segAdapter
         );
         return {
           text: text3,
@@ -941,7 +1010,15 @@ function layoutNextLine(segments, cursor, slotWidth, ctx) {
         };
       }
       if (w > slotWidth && seg.graphemeWidths) {
-        const text3 = buildLineText(segments, startSeg, startG, lineEndSeg, lineEndG, false);
+        const text3 = buildLineText(
+          segments,
+          startSeg,
+          startG,
+          lineEndSeg,
+          lineEndG,
+          false,
+          segAdapter
+        );
         return {
           text: text3,
           width: lineW,
@@ -949,7 +1026,15 @@ function layoutNextLine(segments, cursor, slotWidth, ctx) {
           end: { segmentIndex: lineEndSeg, graphemeIndex: lineEndG }
         };
       }
-      const text2 = buildLineText(segments, startSeg, startG, lineEndSeg, lineEndG, false);
+      const text2 = buildLineText(
+        segments,
+        startSeg,
+        startG,
+        lineEndSeg,
+        lineEndG,
+        false,
+        segAdapter
+      );
       return {
         text: text2,
         width: lineW,
@@ -967,7 +1052,15 @@ function layoutNextLine(segments, cursor, slotWidth, ctx) {
   }
   if (!hasContent) return null;
   const endsAtSoftHyphen = lineEndSeg > 0 && segments[lineEndSeg - 1]?.kind === "soft-hyphen";
-  const text = buildLineText(segments, startSeg, startG, lineEndSeg, lineEndG, endsAtSoftHyphen);
+  const text = buildLineText(
+    segments,
+    startSeg,
+    startG,
+    lineEndSeg,
+    lineEndG,
+    endsAtSoftHyphen,
+    segAdapter
+  );
   return {
     text,
     width: lineW + (endsAtSoftHyphen ? hyphenWidth : 0),
@@ -996,11 +1089,9 @@ function carveTextLineSlots(base, blocked, minSlotWidth = 0) {
   }
   return slots;
 }
-function computeCharPositions(lineBreaks, segments, lineHeight) {
+function computeCharPositions(lineBreaks, segments, lineHeight, segmentAdapter) {
   const positions = [];
-  const graphemeSegmenter2 = new Intl.Segmenter(void 0, {
-    granularity: "grapheme"
-  });
+  const segAdapter = segmentAdapter ?? getDefaultSegmentAdapter();
   for (let lineIdx = 0; lineIdx < lineBreaks.lines.length; lineIdx++) {
     const line = lineBreaks.lines[lineIdx];
     const y = lineIdx * lineHeight;
@@ -1011,7 +1102,7 @@ function computeCharPositions(lineBreaks, segments, lineHeight) {
         if (si >= line.endSegment && line.endGrapheme === 0) break;
         continue;
       }
-      const graphemes = [...graphemeSegmenter2.segment(seg.text)].map((g) => g.segment);
+      const graphemes = [...segAdapter.segmentGraphemes(seg.text)].map((g) => g.segment);
       if (graphemes.length === 0) continue;
       const startG = si === line.startSegment ? line.startGrapheme : 0;
       let endG;
@@ -1032,7 +1123,8 @@ function computeCharPositions(lineBreaks, segments, lineHeight) {
   return positions;
 }
 function reactiveLayout(opts) {
-  const { adapter, name = "reactive-layout" } = opts;
+  const { adapter, segmentAdapter: segmentAdapterOpt, name = "reactive-layout" } = opts;
+  const segmentAdapter = segmentAdapterOpt ?? getDefaultSegmentAdapter();
   const g = new import_graph.Graph(name);
   const measureCache = /* @__PURE__ */ new Map();
   const textNode = (0, import_core2.node)([], { name: "text", initial: opts.text ?? "" });
@@ -1070,7 +1162,8 @@ function reactiveLayout(opts) {
         fontVal,
         adapter,
         measureCache,
-        measureStats
+        measureStats,
+        segmentAdapter
       );
       const elapsed = (0, import_core2.monotonicNs)() - t0;
       const lookups = measureStats.hits + measureStats.misses;
@@ -1123,7 +1216,8 @@ function reactiveLayout(opts) {
           data[1],
           adapter,
           data[2],
-          measureCache
+          measureCache,
+          segmentAdapter
         )
       );
     },
@@ -1165,7 +1259,8 @@ function reactiveLayout(opts) {
         computeCharPositions(
           data[0],
           data[1],
-          data[2]
+          data[2],
+          segmentAdapter
         )
       );
     },
@@ -1212,9 +1307,24 @@ function measureBlock(block, maxWidth, adapters, measureCache, defaultFont, defa
     case "text": {
       const font = block.font ?? defaultFont;
       const lineHeight = block.lineHeight ?? defaultLineHeight;
-      const segments = analyzeAndMeasure(block.text, font, adapters.text, measureCache);
-      const lineBreaks = computeLineBreaks(segments, maxWidth, adapters.text, font, measureCache);
-      const charPositions = computeCharPositions(lineBreaks, segments, lineHeight);
+      const segAdapter = adapters.segment ?? getDefaultSegmentAdapter();
+      const segments = analyzeAndMeasure(
+        block.text,
+        font,
+        adapters.text,
+        measureCache,
+        void 0,
+        segAdapter
+      );
+      const lineBreaks = computeLineBreaks(
+        segments,
+        maxWidth,
+        adapters.text,
+        font,
+        measureCache,
+        segAdapter
+      );
+      const charPositions = computeCharPositions(lineBreaks, segments, lineHeight, segAdapter);
       const height = lineBreaks.lineCount * lineHeight;
       let width = 0;
       for (const line of lineBreaks.lines) {
@@ -1432,6 +1542,7 @@ function obstacleIntervalForBand(o, bandTop, bandBottom) {
 }
 function computeFlowLines(segments, container, columns, obstacles, lineHeight, minSlotWidth, opts) {
   const paragraphSpacing = opts?.paragraphSpacing ?? lineHeight;
+  const segmentAdapterCtx = opts?.segmentAdapter;
   const lines = [];
   let cursor = { segmentIndex: 0, graphemeIndex: 0 };
   if (segments.length === 0 || columns.count <= 0 || lineHeight <= 0) {
@@ -1464,7 +1575,12 @@ function computeFlowLines(segments, container, columns, obstacles, lineHeight, m
       for (let si = 0; si < slots.length; si++) {
         const slot = slots[si];
         const slotW = slot.right - slot.left;
-        const line = layoutNextLine(segments, cursor, slotW);
+        const line = layoutNextLine(
+          segments,
+          cursor,
+          slotW,
+          segmentAdapterCtx ? { segmentAdapter: segmentAdapterCtx } : void 0
+        );
         if (line === null) {
           return { lines, cursor };
         }
@@ -1496,7 +1612,13 @@ function computeFlowLines(segments, container, columns, obstacles, lineHeight, m
   return { lines, cursor };
 }
 function reactiveFlowLayout(opts) {
-  const { adapter, name = "reactive-flow-layout", minSlotWidth = 20 } = opts;
+  const {
+    adapter,
+    segmentAdapter: segmentAdapterOpt,
+    name = "reactive-flow-layout",
+    minSlotWidth = 20
+  } = opts;
+  const segmentAdapter = segmentAdapterOpt ?? getDefaultSegmentAdapter();
   const g = new import_graph3.Graph(name);
   const measureCache = /* @__PURE__ */ new Map();
   const textNode = (0, import_core4.node)([], { name: "text", initial: opts.text ?? "" });
@@ -1522,7 +1644,14 @@ function reactiveFlowLayout(opts) {
       const textVal = b0 != null && b0.length > 0 ? b0.at(-1) : ctx.prevData[0];
       const b1 = data[1];
       const fontVal = b1 != null && b1.length > 0 ? b1.at(-1) : ctx.prevData[1];
-      const result = analyzeAndMeasure(textVal, fontVal, adapter, measureCache);
+      const result = analyzeAndMeasure(
+        textVal,
+        fontVal,
+        adapter,
+        measureCache,
+        void 0,
+        segmentAdapter
+      );
       actions.emit(result);
       const flush = () => {
         measureCache.clear();
@@ -1548,7 +1677,7 @@ function reactiveFlowLayout(opts) {
         data[3],
         data[4],
         minSlotWidth,
-        { paragraphSpacing: effectiveSpacing }
+        { paragraphSpacing: effectiveSpacing, segmentAdapter }
       );
       const elapsed = (0, import_core4.monotonicNs)() - t0;
       const overflow = Math.max(0, segments.length - cursor.segmentIndex);