@opengeni/react 0.29.0 → 0.33.1

package/src/components/soften-streaming-markdown.ts

@@ -0,0 +1,205 @@
+/**
+ * Display-only softener for mid-stream markdown.
+ *
+ * While tokens are still arriving, incomplete markers (`**bold`, an open
+ * fence, a half-finished link) would otherwise render as raw punctuation —
+ * the hard "breaking" flash. This closes a small set of common unfinished
+ * constructs so the parse looks settled; the SOURCE string is never mutated
+ * (callers pass the softened copy only into the markdown parser).
+ *
+ * When the real closers land, the softened and true parses converge and the
+ * crystallize breath covers the remount.
+ */
+
+export function softenStreamingMarkdown(source: string): string {
+  if (source.length === 0) {
+    return source;
+  }
+  let text = source;
+
+  // Unclosed fenced code block: an odd count of ``` line-openers means the
+  // trailing fence is still in flight. Always soft-close — including an empty
+  // opener — so code chrome (padding/tint) appears once at ``` and lines only
+  // grow the body. Stripping empty openers deferred chrome until the first
+  // body line, which landed as one fat height spike (yank around fences).
+  //
+  // If the body already ends with `\n`, append only ``` — a second `\n``` would
+  // invent a blank line that vanishes when the real closer lands (height shrink
+  // → tip-follow compensate + mid soft-rise cancel = up/down flicker).
+  if (countFences(text) % 2 === 1) {
+    text += text.endsWith("\n") ? "```" : "\n```";
+  }
+
+  // Work outside fenced blocks so we don't "fix" markers that are literal
+  // code content.
+  const segments = splitByFences(text);
+  for (const segment of segments) {
+    if (segment.kind === "fence") {
+      continue;
+    }
+    segment.value = closeInlineMarkers(segment.value);
+  }
+  let result = segments.map((segment) => segment.value).join("");
+  // split("\n") drops a trailing newline into an empty final line; restore it
+  // so balanced finished fences round-trip byte-identical.
+  if (text.endsWith("\n") && !result.endsWith("\n")) {
+    result += "\n";
+  }
+  return result;
+}
+
+function countFences(text: string): number {
+  let count = 0;
+  for (const line of text.split("\n")) {
+    if (/^ {0,3}```/.test(line)) {
+      count += 1;
+    }
+  }
+  return count;
+}
+
+type Segment = { kind: "prose" | "fence"; value: string };
+
+function splitByFences(text: string): Segment[] {
+  const segments: Segment[] = [];
+  const lines = text.split("\n");
+  let buf: string[] = [];
+  let inFence = false;
+  /**
+   * `boundary`: prose → fence. `join` alone drops a blank line before ```
+   * (`["a",""].join` → `"a\n"`, need `"a\n\n"`), so append an extra `\n`.
+   * `end`: final segment. Trailing `""` from `split("\n")` already encodes a
+   * terminating newline — do NOT append another (that was inventing `\n\n`
+   * on every streamed line and shrinking it away at crystallize).
+   */
+  const flush = (kind: Segment["kind"], mode: "boundary" | "end") => {
+    if (buf.length === 0) {
+      return;
+    }
+    let value = buf.join("\n");
+    if (mode === "boundary") {
+      value += "\n";
+    }
+    segments.push({ kind, value });
+    buf = [];
+  };
+  for (const line of lines) {
+    const isFence = /^ {0,3}```/.test(line);
+    if (isFence) {
+      if (inFence) {
+        buf.push(line);
+        flush("fence", "end");
+        inFence = false;
+      } else {
+        flush("prose", "boundary");
+        buf.push(line);
+        inFence = true;
+      }
+      continue;
+    }
+    buf.push(line);
+  }
+  flush(inFence ? "fence" : "prose", "end");
+  return segments;
+}
+
+/**
+ * Close unmatched **, *, ~~, and ` in prose. Order matters: handle the
+ * longer bold/strike markers before single `*` so we don't steal from `**`.
+ */
+function closeInlineMarkers(prose: string): string {
+  let text = prose;
+  text = closeDelimiter(text, "~~");
+  text = closeDelimiter(text, "**");
+  text = closeDelimiter(text, "__");
+  text = closeSingleBackticks(text);
+  text = closeSingleAsterisks(text);
+  text = closeUnfinishedLink(text);
+  return text;
+}
+
+function closeDelimiter(text: string, delimiter: string): string {
+  // Count occurrences that aren't escaped. Odd → append a closer.
+  let count = 0;
+  let i = 0;
+  while (i < text.length) {
+    if (text[i] === "\\" && i + 1 < text.length) {
+      i += 2;
+      continue;
+    }
+    if (text.startsWith(delimiter, i)) {
+      count += 1;
+      i += delimiter.length;
+      continue;
+    }
+    i += 1;
+  }
+  return count % 2 === 1 ? insertBeforeTrailingNewlines(text, delimiter) : text;
+}
+
+/** Soft closers belong before trailing `\n`s so restore/round-trip stay stable. */
+function insertBeforeTrailingNewlines(text: string, suffix: string): string {
+  let end = text.length;
+  while (end > 0 && text[end - 1] === "\n") {
+    end -= 1;
+  }
+  return text.slice(0, end) + suffix + text.slice(end);
+}
+
+function closeSingleBackticks(text: string): string {
+  // Ignore ``` (fences already stripped) and even pairs. A trailing unmatched
+  // ` is the common "inline code still typing" case.
+  let count = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    if (text[i] === "\\" && i + 1 < text.length) {
+      i += 1;
+      continue;
+    }
+    if (text[i] === "`") {
+      // Skip triple backticks if any leaked into prose.
+      if (text.startsWith("```", i)) {
+        i += 2;
+        continue;
+      }
+      count += 1;
+    }
+  }
+  return count % 2 === 1 ? insertBeforeTrailingNewlines(text, "`") : text;
+}
+
+function closeSingleAsterisks(text: string): string {
+  // Count `*` that are NOT part of `**` (already handled). Odd → close italic.
+  let count = 0;
+  for (let i = 0; i < text.length; i += 1) {
+    if (text[i] === "\\" && i + 1 < text.length) {
+      i += 1;
+      continue;
+    }
+    if (text[i] === "*" && text[i + 1] === "*") {
+      i += 1;
+      continue;
+    }
+    if (text[i] === "*") {
+      count += 1;
+    }
+  }
+  return count % 2 === 1 ? insertBeforeTrailingNewlines(text, "*") : text;
+}
+
+function closeUnfinishedLink(text: string): string {
+  // `[label](url` without the trailing `)` — close it. Bare `[label` without
+  // `](` is left alone (too ambiguous with footnotes / prose brackets).
+  const open = text.lastIndexOf("](");
+  if (open === -1) {
+    return text;
+  }
+  const after = text.slice(open + 2);
+  if (after.includes(")")) {
+    return text;
+  }
+  // Don't close if a later `[` started something else after.
+  if (after.includes("[")) {
+    return text;
+  }
+  return insertBeforeTrailingNewlines(text, ")");
+}

package/src/components/stream-reveal.ts

@@ -0,0 +1,195 @@
+/* ----------------------------------------------------------------------------
+   Streaming tip ink (age-window fade)
+
+   Append-only markdown grows at the tip. Rather than staggering per-word
+   onsets (glitter under fast models), each append batch is born at wall time
+   and fades in over a fixed age window:
+
+     opacity progress = clamp((now − birth) / INK_FADE_MS, 0, 1)
+
+   Fast arrival → many recent characters still young → a large soft band.
+   Slow arrival → only the tip is young → a tight tip wash.
+   Same rule both ways; time does the work. No per-word stagger, no artificial
+   content lag — layout always holds the truthful text; paint only.
+
+   Identity is the character offset into the source. CSS animation-delay =
+   birth − now (often negative) so mid-fade re-renders resume, never restart.
+   Runs settle back to plain text once age ≥ INK_FADE_MS (zero span cost).
+   -------------------------------------------------------------------------- */
+
+import { MOTION_INSPECT_SCALE } from "../lib/motion-inspect";
+
+/** Keep in sync with `--og-duration-stream` / `.og-stream-ink` in styles. */
+export const INK_FADE_MS = 420 * MOTION_INSPECT_SCALE;
+/** @deprecated Use {@link INK_FADE_MS}. */
+export const WORD_ANIMATION_MS = INK_FADE_MS;
+
+/**
+ * A first observation larger than this is pre-existing history (timeline
+ * opened mid-stream), not live tip — it renders instantly.
+ */
+const INITIAL_ANIMATED_LIMIT = 400;
+
+type InkBatch = {
+  start: number;
+  end: number;
+  birth: number;
+};
+
+export type StreamReveal = {
+  /** Register the full current source text; new suffix becomes an ink batch. */
+  observe(text: string, now: number): void;
+  /**
+   * CSS animation-delay (ms) for the run covering `offset`, or null when that
+   * ink has settled and should render as plain text. Negative = resume mid-fade.
+   */
+  delayFor(offset: number, now: number): number | null;
+  /** True while any batch is still inside its fade window. */
+  hasActive(now: number): boolean;
+};
+
+export function createStreamReveal(): StreamReveal {
+  let batches: InkBatch[] = [];
+  let revealedChars = -1;
+
+  return {
+    observe(text, now) {
+      if (revealedChars === -1) {
+        revealedChars = text.length > INITIAL_ANIMATED_LIMIT ? text.length : 0;
+      }
+      if (text.length <= revealedChars) {
+        // Idempotent re-observation (StrictMode) or defensive no-op on shrink.
+        revealedChars = Math.max(revealedChars, text.length);
+        return;
+      }
+      batches.push({ start: revealedChars, end: text.length, birth: now });
+      revealedChars = text.length;
+      batches = batches.filter((batch) => batch.birth + INK_FADE_MS > now);
+    },
+
+    delayFor(offset, now) {
+      const batch = findBatch(batches, offset);
+      if (!batch) {
+        return null;
+      }
+      const delay = batch.birth - now;
+      return delay + INK_FADE_MS <= 0 ? null : delay;
+    },
+
+    hasActive(now) {
+      const last = batches[batches.length - 1];
+      return last !== undefined && last.birth + INK_FADE_MS > now;
+    },
+  };
+}
+
+function findBatch(batches: readonly InkBatch[], offset: number): InkBatch | null {
+  let low = 0;
+  let high = batches.length - 1;
+  while (low <= high) {
+    const mid = (low + high) >> 1;
+    const batch = batches[mid]!;
+    if (offset < batch.start) {
+      high = mid - 1;
+    } else if (offset >= batch.end) {
+      low = mid + 1;
+    } else {
+      return batch;
+    }
+  }
+  return null;
+}
+
+/* ----------------------------------------------------------------------------
+   rehype: wrap still-fading source runs in `.og-stream-ink` spans.
+
+   Contiguous offsets that share one birth (one append batch) become ONE span —
+   a continuous ink surface, not per-word glitter. Code/pre stay plain. Nodes
+   without source positions (syntax rewritten around them) render plain too.
+   -------------------------------------------------------------------------- */
+
+type HastText = {
+  type: "text";
+  value: string;
+  position?: { start?: { offset?: number | undefined } | undefined } | undefined;
+};
+
+type HastParent = {
+  type: string;
+  tagName?: string;
+  value?: string;
+  children?: HastChild[];
+};
+
+type HastChild = (HastText | HastParent) & Record<string, unknown>;
+
+export function rehypeStreamReveal(options: { reveal: StreamReveal; now: number }) {
+  const { reveal, now } = options;
+  return (tree: HastParent) => {
+    walk(tree, false);
+  };
+
+  function walk(node: HastParent, insideVerbatim: boolean): void {
+    if (!node.children) {
+      return;
+    }
+    const verbatim = insideVerbatim || node.tagName === "code" || node.tagName === "pre";
+    const next: HastChild[] = [];
+    for (const child of node.children) {
+      if (child.type === "text" && !verbatim) {
+        next.push(...splitTextNode(child as HastText));
+        continue;
+      }
+      walk(child as HastParent, verbatim);
+      next.push(child);
+    }
+    node.children = next;
+  }
+
+  function splitTextNode(node: HastText): HastChild[] {
+    const sourceOffset = node.position?.start?.offset;
+    if (sourceOffset === undefined) {
+      return [node as HastChild];
+    }
+    const value = node.value;
+    const out: HastChild[] = [];
+    let plain = "";
+    const flushPlain = () => {
+      if (plain.length > 0) {
+        out.push({ type: "text", value: plain } as HastChild);
+        plain = "";
+      }
+    };
+
+    let i = 0;
+    while (i < value.length) {
+      const delay = reveal.delayFor(sourceOffset + i, now);
+      let j = i + 1;
+      while (j < value.length) {
+        const nextDelay = reveal.delayFor(sourceOffset + j, now);
+        if (nextDelay !== delay) {
+          break;
+        }
+        j += 1;
+      }
+      const slice = value.slice(i, j);
+      if (delay === null) {
+        plain += slice;
+      } else {
+        flushPlain();
+        out.push({
+          type: "element",
+          tagName: "span",
+          properties: {
+            className: ["og-stream-ink"],
+            style: `animation-delay:${Math.round(delay)}ms`,
+          },
+          children: [{ type: "text", value: slice }],
+        } as unknown as HastChild);
+      }
+      i = j;
+    }
+    flushPlain();
+    return out.length > 0 ? out : [node as HastChild];
+  }
+}