@alchemy.run/sigil 0.0.0-alpha.3 → 0.0.0-alpha.5

package/src/input-parser.ts

@@ -1,4 +1,4 @@
-import { ESC, pasteStart, pasteEnd } from "./ansi/escapes.ts";
+import { ESC, pasteStart, pasteEnd } from "#/ansi/escapes.ts";
 
 const escape = ESC;
 

package/src/instances.ts

@@ -4,6 +4,6 @@
 // This map has to be stored in a separate file, because render.js creates instances,
 // but instance.js should delete itself from the map on unmount
 
-import type { Ink } from "./ink.tsx";
+import type { Ink } from "#/ink.tsx";
 
 export const instances = new WeakMap<NodeJS.WritableStream, Ink>();

package/src/kitty-keyboard.ts

@@ -1,3 +1,5 @@
+import { kittyQuery } from "#/ansi/escapes.ts";
+
 // Kitty keyboard protocol flags.
 // @see https://sw.kovidgoyal.net/kitty/keyboard-protocol/
 export const kittyFlags = {
@@ -55,3 +57,129 @@ export type KittyKeyboardOptions = {
   // - 'reportAssociatedText' - Report associated text with key events
   flags?: KittyFlagName[];
 };
+
+const textEncoder = new TextEncoder();
+
+const kittyQueryEscapeByte = 0x1b;
+const kittyQueryOpenBracketByte = 0x5b;
+const kittyQueryQuestionMarkByte = 0x3f;
+const kittyQueryLetterByte = 0x75;
+const zeroByte = 0x30;
+const nineByte = 0x39;
+
+type KittyQueryResponseMatch = { state: "complete"; endIndex: number } | { state: "partial" };
+
+const isDigitByte = (byte: number): boolean => byte >= zeroByte && byte <= nineByte;
+
+const matchKittyQueryResponse = (
+  buffer: number[],
+  startIndex: number,
+): KittyQueryResponseMatch | undefined => {
+  if (
+    buffer[startIndex] !== kittyQueryEscapeByte ||
+    buffer[startIndex + 1] !== kittyQueryOpenBracketByte ||
+    buffer[startIndex + 2] !== kittyQueryQuestionMarkByte
+  ) {
+    return;
+  }
+
+  let index = startIndex + 3;
+  const digitsStartIndex = index;
+  while (index < buffer.length && isDigitByte(buffer[index]!)) {
+    index++;
+  }
+
+  if (index === digitsStartIndex) {
+    return;
+  }
+
+  if (index === buffer.length) {
+    return { state: "partial" };
+  }
+
+  if (buffer[index] === kittyQueryLetterByte) {
+    return { state: "complete", endIndex: index };
+  }
+
+  return;
+};
+
+const hasCompleteKittyQueryResponse = (buffer: number[]): boolean => {
+  for (let index = 0; index < buffer.length; index++) {
+    const match = matchKittyQueryResponse(buffer, index);
+    if (match?.state === "complete") {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+const stripKittyQueryResponsesAndTrailingPartial = (buffer: number[]): number[] => {
+  const keptBytes: number[] = [];
+  let index = 0;
+  while (index < buffer.length) {
+    const match = matchKittyQueryResponse(buffer, index);
+    if (match?.state === "complete") {
+      index = match.endIndex + 1;
+      continue;
+    }
+
+    if (match?.state === "partial") {
+      break;
+    }
+
+    keptBytes.push(buffer[index]!);
+    index++;
+  }
+
+  return keptBytes;
+};
+
+// Query the terminal for kitty keyboard protocol support. The CSI ? u query is
+// safe to send to any terminal — unsupporting terminals simply won't respond,
+// and the 200ms timeout handles that. Stdin bytes that aren't part of the
+// protocol response are re-emitted so they aren't lost from the caller's input
+// pipeline. Returns a cancel function; cancelling (or the timeout firing)
+// means `onSupported` never runs.
+export const detectKittySupport = (
+  stdin: NodeJS.ReadableStream,
+  stdout: { write: (data: string) => unknown },
+  onSupported: () => void,
+): (() => void) => {
+  let responseBuffer: number[] = [];
+
+  const cleanup = (): void => {
+    clearTimeout(timer);
+    stdin.removeListener("data", onData);
+
+    // Re-emit any buffered data that wasn't the protocol response.
+    // Clear responseBuffer afterwards to make cleanup idempotent.
+    const remaining = stripKittyQueryResponsesAndTrailingPartial(responseBuffer);
+    responseBuffer = [];
+    if (remaining.length > 0) {
+      stdin.unshift(Uint8Array.from(remaining));
+    }
+  };
+
+  const onData = (data: Uint8Array | string): void => {
+    const chunk = typeof data === "string" ? textEncoder.encode(data) : data;
+    for (const byte of chunk) {
+      responseBuffer.push(byte);
+    }
+
+    if (hasCompleteKittyQueryResponse(responseBuffer)) {
+      cleanup();
+      onSupported();
+    }
+  };
+
+  // Attach listener before writing the query so that synchronous
+  // or immediate responses are not missed.
+  stdin.on("data", onData);
+  const timer = setTimeout(cleanup, 200);
+
+  stdout.write(kittyQuery);
+
+  return cleanup;
+};

package/src/measure-element.ts

@@ -1,4 +1,4 @@
-import { type DOMElement } from "./dom.ts";
+import { type DOMElement } from "#/dom.ts";
 
 type Output = {
   /**

package/src/measure-text.ts

@@ -1,5 +1,5 @@
-import { widestLine } from "./ansi/widest-line.ts";
-import { QuickLru as QuickLRU } from "./quick-lru.ts";
+import { widestLine } from "#/ansi/string-width.ts";
+import { QuickLru as QuickLRU } from "#/quick-lru.ts";
 
 const cache = new QuickLRU<string, Output>({ maxSize: 4096 });
 

package/src/{render-node-to-output.ts → paint-tree.ts}

@@ -1,35 +1,21 @@
-import { widestLine } from "./ansi/widest-line.ts";
-import { type DOMElement } from "./dom.ts";
-import { getMaxWidth } from "./get-max-width.ts";
-import { indentString } from "./indent-string.ts";
-import type { Output } from "./output.ts";
-import { renderBackground } from "./render-background.ts";
-import { renderBorder } from "./render-border.ts";
-import { squashTextNodes } from "./squash-text-nodes.ts";
-import { wrapText } from "./wrap-text.ts";
-import { Yoga } from "./yoga/index.ts";
-
-// If parent container is `<Box>`, text nodes will be treated as separate nodes in
-// the tree and will have their own coordinates in the layout.
-// To ensure text nodes are aligned correctly, take X and Y of the first text node
-// and use it as offset for the rest of the nodes
-// Only first node is taken into account, because other text nodes can't have margin or padding,
-// so their coordinates will be relative to the first node anyway
-const applyPaddingToText = (node: DOMElement, text: string): string => {
-  const yogaNode = node.childNodes[0]?.yogaNode;
-
-  if (yogaNode) {
-    const offsetX = yogaNode.getComputedLeft();
-    const offsetY = yogaNode.getComputedTop();
-    text = "\n".repeat(offsetY) + indentString(text, offsetX);
-  }
-
-  return text;
-};
-
-export type OutputTransformer = (s: string, index: number) => string;
-
-export const renderNodeToScreenReaderOutput = (
+import { type DOMElement } from "#/dom.ts";
+import { getMaxWidth } from "#/get-max-width.ts";
+import { renderBackground } from "#/render-background.ts";
+import { renderBorder } from "#/render-border.ts";
+import type { Canvas } from "#/screen/canvas.ts";
+import { serializeLine } from "#/screen/serialize.ts";
+import { squashTextNodes } from "#/squash-text-nodes.ts";
+import {
+  hasCompatibilityText,
+  structuredTextBaseStyle,
+  structuredTextLines,
+  wrapStructuredText,
+  sampleStructuredText,
+} from "#/structured-text.ts";
+import type { AnsiTransformer } from "#/transform-adapter.ts";
+import { Yoga } from "#/yoga/index.ts";
+
+export const renderAccessibleText = (
   node: DOMElement,
   options: {
     parentRole?: string;
@@ -59,7 +45,7 @@ export const renderNodeToScreenReaderOutput = (
 
     output = childNodes
       .map((childNode) => {
-        const screenReaderOutput = renderNodeToScreenReaderOutput(childNode as DOMElement, {
+        const screenReaderOutput = renderAccessibleText(childNode as DOMElement, {
           parentRole: node.internal_accessibility?.role,
           skipStaticElements: options.skipStaticElements,
         });
@@ -90,13 +76,13 @@ export const renderNodeToScreenReaderOutput = (
 };
 
 // After nodes are laid out, render each to output object, which later gets rendered to terminal
-export const renderNodeToOutput = (
+export const paintTree = (
   node: DOMElement,
-  output: Output,
+  output: Canvas,
   options: {
     offsetX?: number;
     offsetY?: number;
-    transformers?: OutputTransformer[];
+    transformers?: AnsiTransformer[];
     skipStaticElements: boolean;
   },
 ) => {
@@ -118,28 +104,54 @@ export const renderNodeToOutput = (
     const y = offsetY + yogaNode.getComputedTop();
 
     // Transformers are functions that transform final text output of each component
-    // See Output class for logic that applies transformers
-    let newTransformers = transformers;
-
-    if (typeof node.internal_transform === "function") {
-      newTransformers = [node.internal_transform, ...transformers];
-    }
+    // The canvas applies explicit compatibility transformers at this boundary.
+    const newTransformers = node.internal_transform
+      ? [node.internal_transform, ...transformers]
+      : transformers;
 
     if (node.nodeName === "ink-text") {
-      let text = squashTextNodes(node);
+      const text = squashTextNodes(node);
 
       if (text.length > 0) {
-        const currentWidth = widestLine(text);
         const maxWidth = getMaxWidth(yogaNode);
-
-        if (currentWidth > maxWidth) {
-          const textWrap = node.style.textWrap ?? "wrap";
-          text = wrapText(text, maxWidth, textWrap);
+        const firstChildYoga = node.childNodes[0]?.yogaNode;
+        const paddingX = firstChildYoga?.getComputedLeft() ?? 0;
+        const paddingY = firstChildYoga?.getComputedTop() ?? 0;
+        const lines = wrapStructuredText(
+          structuredTextLines(node),
+          maxWidth,
+          node.style.textWrap ?? "wrap",
+          structuredTextBaseStyle(node),
+        );
+        const paintBounds = {
+          x: x + paddingX,
+          y: y + paddingY,
+          width: Math.max(
+            1,
+            ...lines.map((line) => line.reduce((width, cell) => width + cell.width, 0)),
+          ),
+          height: lines.length,
+        };
+        const sampled = sampleStructuredText(lines, paintBounds, output.paintContext);
+
+        if (hasCompatibilityText(node)) {
+          const textTransformers = collectTransformers(node, transformers);
+          output.writeAnsi(
+            paintBounds.x,
+            paintBounds.y,
+            sampled
+              .map((line) =>
+                serializeLine(line, {
+                  colorProfile: output.paintContext.profile ?? "truecolor",
+                  trimEnd: false,
+                }),
+              )
+              .join("\n"),
+            { transformers: textTransformers },
+          );
+        } else {
+          output.writeCells(paintBounds.x, paintBounds.y, sampled);
         }
-
-        text = applyPaddingToText(node, text);
-
-        output.write(x, y, text, { transformers: newTransformers });
       }
 
       return;
@@ -175,7 +187,7 @@ export const renderNodeToOutput = (
 
     if (node.nodeName === "ink-root" || node.nodeName === "ink-box") {
       for (const childNode of node.childNodes) {
-        renderNodeToOutput(childNode as DOMElement, output, {
+        paintTree(childNode as DOMElement, output, {
           offsetX: x,
           offsetY: y,
           transformers: newTransformers,
@@ -189,3 +201,16 @@ export const renderNodeToOutput = (
     }
   }
 };
+
+function collectTransformers(
+  node: DOMElement,
+  inherited: readonly AnsiTransformer[],
+): AnsiTransformer[] {
+  return [
+    ...node.childNodes.flatMap((child) =>
+      child.nodeName === "#text" ? [] : collectTransformers(child, []),
+    ),
+    ...(node.internal_transform ? [node.internal_transform] : []),
+    ...inherited,
+  ];
+}

package/src/parse-keypress.ts

@@ -1,6 +1,6 @@
 // Copied from https://github.com/enquirer/enquirer/blob/36785f3399a41cd61e9d28d1eb9c2fcd73d69b4c/lib/keypress.js
-import { DEL, ESC } from "./ansi/escapes.ts";
-import { kittyModifiers } from "./kitty-keyboard.ts";
+import { DEL, ESC } from "#/ansi/escapes.ts";
+import { kittyModifiers } from "#/kitty-keyboard.ts";
 
 const textDecoder = new TextDecoder();
 
@@ -396,8 +396,7 @@ export const parseKeypress = (s: Uint8Array | string = ""): ParsedKey => {
 
   if (s instanceof Uint8Array) {
     if (s[0]! > 127 && s[1] === undefined) {
-      (s[0] as unknown as number) -= 128;
-      s = ESC + textDecoder.decode(s);
+      s = ESC + textDecoder.decode(Uint8Array.of(s[0]! - 128));
     } else {
       s = textDecoder.decode(s);
     }
@@ -499,7 +498,7 @@ export const parseKeypress = (s: Uint8Array | string = ""): ParsedKey => {
     // the modifier key bitflag and any meaningless "1;" sequence
     const code = [parts[1], parts[2], parts[4], parts[6]].filter(Boolean).join("");
 
-    const modifier = ((parts[3] || parts[5] || 1) as number) - 1;
+    const modifier = Number(parts[3] || parts[5] || 1) - 1;
 
     // Parse the key modifier
     key.ctrl = !!(modifier & 4);

package/src/parse-stack-line.ts

@@ -1,6 +1,5 @@
 // Derived from `stack-utils` (MIT, Isaac Z. Schlueter, James Talmage),
 // reduced to the `parseLine()` surface Ink's error overview uses.
-import process from "node:process";
 
 export type ParsedStackLine = {
   line?: number;

package/src/patch-console.ts

@@ -60,3 +60,47 @@ export const patchConsole = (callback: Callback): Restore => {
     originalMethods.clear();
   };
 };
+
+// Intercept direct `write` calls on a stream. The write is swallowed and the
+// decoded chunk is handed to `onData`; write callbacks still fire so callers
+// awaiting flushes don't hang.
+export const patchStreamWrite = (
+  stream: NodeJS.WritableStream,
+  onData: (data: string) => void,
+): Restore => {
+  // Keep the unbound reference: restore below must reassign the exact
+  // original function object, not a bound copy.
+  // oxlint-disable-next-line typescript/unbound-method
+  const originalWrite = stream.write;
+
+  const patchedWrite = (
+    chunk: unknown,
+    encodingOrCallback?: unknown,
+    callback?: unknown,
+  ): boolean => {
+    const data =
+      typeof chunk === "string"
+        ? chunk
+        : chunk instanceof Uint8Array
+          ? Buffer.from(chunk).toString()
+          : String(chunk);
+
+    onData(data);
+
+    const done =
+      typeof encodingOrCallback === "function"
+        ? encodingOrCallback
+        : typeof callback === "function"
+          ? callback
+          : undefined;
+    done?.();
+
+    return true;
+  };
+
+  stream.write = patchedWrite;
+
+  return () => {
+    stream.write = originalWrite;
+  };
+};

package/src/reconciler.ts

@@ -1,6 +1,4 @@
-import process from "node:process";
-
-import { createContext, version as reactVersion } from "react";
+import { createContext } from "react";
 import createReconciler, { type ReactContext } from "react-reconciler";
 import { DefaultEventPriority, NoEventPriority } from "react-reconciler/constants.js";
 import * as Scheduler from "scheduler";
@@ -20,27 +18,23 @@ import {
   type TextNode,
   type ElementNames,
   type DOMElement,
-} from "./dom.ts";
-import { type OutputTransformer } from "./render-node-to-output.ts";
-import { styles as applyStyles, type Styles } from "./styles.ts";
-import { Yoga } from "./yoga/index.ts";
+} from "#/dom.ts";
+import { isSigilDev } from "#/env.ts";
+import type { SemanticTextStyle } from "#/semantic-text-style.ts";
+import { styles as applyStyles, type Styles } from "#/styles.ts";
+import { type AnsiTransformer } from "#/transform-adapter.ts";
+import { Yoga } from "#/yoga/index.ts";
+
+import pkg from "../package.json" with { type: "json" };
 
 // We need to conditionally perform devtools connection to avoid
 // accidentally breaking other third-party code.
 // See https://github.com/vadimdemedes/ink/issues/384
 // See https://github.com/vadimdemedes/ink/issues/648
-if (process.env["SIGIL_DEV"] === "true") {
+if (isSigilDev) {
   // Intentionally no warning when the package is missing.
   // SIGIL_DEV may be set for other reasons; devtools is opt-in via installing the package.
-  let isDevtoolsInstalled = false;
-  try {
-    import.meta.resolve("react-devtools-core");
-    isDevtoolsInstalled = true;
-  } catch {}
-
-  if (isDevtoolsInstalled) {
-    await import("./devtools.ts");
-  }
+  await import("#/devtools.ts").catch(() => {});
 }
 
 type AnyObject = Record<string, unknown>;
@@ -138,46 +132,6 @@ type HostContext = {
 
 let currentUpdatePriority = NoEventPriority;
 
-async function loadPackageJson() {
-  const fs = await import("node:fs");
-  const content = fs.readFileSync(new URL("../package.json", import.meta.url), "utf8");
-
-  // oxlint-disable-next-line typescript/no-unsafe-type-assertion
-  const parsedContent = JSON.parse(content) as
-    | {
-        name?: string;
-        version?: string;
-      }
-    | undefined;
-
-  return {
-    name: parsedContent?.name,
-    version: parsedContent?.version,
-  };
-}
-
-let packageInfo = {
-  name: "ink",
-  version: reactVersion,
-};
-
-if (process.env["DEV"] === "true") {
-  try {
-    const loaded = await loadPackageJson();
-    packageInfo = {
-      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-      name: loaded.name || packageInfo.name,
-      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-      version: loaded.version || packageInfo.version,
-    };
-  } catch (error) {
-    console.warn(
-      "Failed to load package.json in development mode. Falling back to default renderer metadata.",
-      error,
-    );
-  }
-}
-
 export const reconciler = createReconciler<
   ElementNames,
   Props,
@@ -246,7 +200,7 @@ export const reconciler = createReconciler<
   shouldSetTextContent: () => false,
   createInstance(originalType, newProps, rootNode, hostContext) {
     if (hostContext.isInsideText && originalType === "ink-box") {
-      throw new Error(`<Box> can’t be nested inside <Text> component`);
+      throw new Error(`<Box> can't be nested inside <Text> component`);
     }
 
     const type =
@@ -273,7 +227,17 @@ export const reconciler = createReconciler<
 
       if (key === "internal_transform") {
         // oxlint-disable-next-line typescript/no-unsafe-type-assertion
-        node.internal_transform = value as OutputTransformer;
+        node.internal_transform = value as AnsiTransformer;
+        continue;
+      }
+
+      if (key === "internal_ansi") {
+        node.internal_ansi = value === true;
+        continue;
+      }
+
+      if (key === "internal_textStyle") {
+        node.internal_textStyle = value as SemanticTextStyle;
         continue;
       }
 
@@ -378,7 +342,17 @@ export const reconciler = createReconciler<
 
         if (key === "internal_transform") {
           // oxlint-disable-next-line typescript/no-unsafe-type-assertion
-          node.internal_transform = value as OutputTransformer;
+          node.internal_transform = value as AnsiTransformer;
+          continue;
+        }
+
+        if (key === "internal_ansi") {
+          node.internal_ansi = value === true;
+          continue;
+        }
+
+        if (key === "internal_textStyle") {
+          node.internal_textStyle = value as SemanticTextStyle | undefined;
           continue;
         }
 
@@ -446,6 +420,6 @@ export const reconciler = createReconciler<
   waitForCommitToBeReady() {
     return null;
   },
-  rendererPackageName: packageInfo.name,
-  rendererVersion: packageInfo.version,
+  rendererPackageName: pkg.name,
+  rendererVersion: pkg.version,
 });

package/src/render-background.ts

@@ -1,9 +1,10 @@
-import { colorize } from "./colorize.ts";
-import { type DOMNode } from "./dom.ts";
-import type { Output } from "./output.ts";
+import { samplePaint } from "#/color/sample.ts";
+import { type DOMNode } from "#/dom.ts";
+import type { Canvas } from "#/screen/canvas.ts";
+import { cellAttributes, createCell } from "#/screen/index.ts";
 
-export const renderBackground = (x: number, y: number, node: DOMNode, output: Output): void => {
-  if (!node.style.backgroundColor) {
+export const renderBackground = (x: number, y: number, node: DOMNode, output: Canvas): void => {
+  if (node.style.backgroundColor === undefined) {
     return;
   }
 
@@ -23,16 +24,36 @@ export const renderBackground = (x: number, y: number, node: DOMNode, output: Ou
     return;
   }
 
-  // Create background fill for each row
-  const backgroundLine = colorize(
-    " ".repeat(contentWidth),
-    node.style.backgroundColor,
-    "background",
+  const bounds = {
+    x: x + leftBorderWidth,
+    y: y + topBorderHeight,
+    width: contentWidth,
+    height: contentHeight,
+  };
+  const lines = Array.from({ length: contentHeight }, (_unused, row) =>
+    Array.from({ length: contentWidth }, (_empty, column) => {
+      const resetBackground = node.style.backgroundColor === "";
+      const background = resetBackground
+        ? undefined
+        : samplePaint(
+            node.style.backgroundColor!,
+            bounds.x + column,
+            bounds.y + row,
+            bounds,
+            output.paintContext,
+          );
+      return createCell(
+        " ",
+        1,
+        {
+          ...(background ? { background } : {}),
+          underline: "none",
+          attributes: cellAttributes.none,
+        },
+        undefined,
+        resetBackground ? { background: true } : undefined,
+      );
+    }),
   );
-
-  for (let row = 0; row < contentHeight; row++) {
-    output.write(x + leftBorderWidth, y + topBorderHeight + row, backgroundLine, {
-      transformers: [],
-    });
-  }
+  output.writeCells(bounds.x, bounds.y, lines);
 };