@alchemy.run/sigil 0.0.0-alpha.4 → 0.0.0-alpha.6

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

@@ -1,37 +1,21 @@
-import { widestLine } from "#/ansi/string-width.ts";
 import { type DOMElement } from "#/dom.ts";
 import { getMaxWidth } from "#/get-max-width.ts";
-import type { Output } from "#/output.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 { wrapText } from "#/wrap-text.ts";
+import {
+  hasCompatibilityText,
+  structuredTextBaseStyle,
+  structuredTextLines,
+  wrapStructuredText,
+  sampleStructuredText,
+} from "#/structured-text.ts";
+import type { AnsiTransformer } from "#/transform-adapter.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) +
-      (offsetX > 0 ? text.replace(/^(?!\s*$)/gm, " ".repeat(offsetX)) : text);
-  }
-
-  return text;
-};
-
-export type OutputTransformer = (s: string, index: number) => string;
-
-export const renderNodeToScreenReaderOutput = (
+export const renderAccessibleText = (
   node: DOMElement,
   options: {
     parentRole?: string;
@@ -61,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,
         });
@@ -92,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;
   },
 ) => {
@@ -120,28 +104,58 @@ 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 textWrap = node.style.textWrap ?? "wrap";
+        // `none` text may paint past the screen's nominal width; the screen
+        // grows the touched rows on demand. Clip rects still apply.
+        const overflow = textWrap === "none";
+        const lines = wrapStructuredText(
+          structuredTextLines(node),
+          maxWidth,
+          textWrap,
+          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, overflow },
+          );
+        } else {
+          output.writeCells(paintBounds.x, paintBounds.y, sampled, { overflow });
         }
-
-        text = applyPaddingToText(node, text);
-
-        output.write(x, y, text, { transformers: newTransformers });
       }
 
       return;
@@ -177,7 +191,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,
@@ -191,3 +205,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/reconciler.ts

@@ -20,8 +20,9 @@ import {
   type DOMElement,
 } from "#/dom.ts";
 import { isSigilDev } from "#/env.ts";
-import { type OutputTransformer } from "#/render-node-to-output.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" };
@@ -226,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;
       }
 
@@ -331,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;
         }
 

package/src/render-background.ts

@@ -1,9 +1,10 @@
-import { colorize } from "#/colorize.ts";
+import { samplePaint } from "#/color/sample.ts";
 import { type DOMNode } from "#/dom.ts";
-import type { Output } from "#/output.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);
 };

package/src/render-border.ts

@@ -1,23 +1,43 @@
-import { chalk } from "#/ansi/chalk.ts";
-import { colorize } from "#/colorize.ts";
+import { graphemes } from "#/ansi/graphemes.ts";
+import { stringWidth } from "#/ansi/string-width.ts";
+import type { Paint, PaintContext } from "#/color/paint.ts";
+import { samplePaint } from "#/color/sample.ts";
 import { type DOMNode } from "#/dom.ts";
 import { BOXES } from "#/glyphs.ts";
-import type { Output } from "#/output.ts";
-
-const stylePiece = (segment: string, fg?: string, bg?: string, dim?: boolean): string => {
-  let styled = colorize(segment, fg, "foreground");
-  styled = colorize(styled, bg, "background");
-  if (dim) {
-    styled = chalk.dim(styled);
-  }
-
-  return styled;
+import type { Canvas } from "#/screen/canvas.ts";
+import type { Rect } from "#/screen/geometry.ts";
+import { cellAttributes, createCell, type Cell } from "#/screen/index.ts";
+
+const stylePiece = (
+  segment: string,
+  x: number,
+  y: number,
+  bounds: Rect,
+  context: PaintContext,
+  fg?: Paint,
+  bg?: Paint,
+  dim?: boolean,
+): Cell[] => {
+  let column = x;
+  return [...graphemes(segment)].map((grapheme) => {
+    const foreground = fg ? samplePaint(fg, column, y, bounds, context) : undefined;
+    const background = bg ? samplePaint(bg, column, y, bounds, context) : undefined;
+    const width = Math.max(1, stringWidth(grapheme));
+    column += width;
+    return createCell(grapheme, width, {
+      ...(foreground ? { foreground } : {}),
+      ...(background ? { background } : {}),
+      underline: "none",
+      attributes: dim ? cellAttributes.faint : cellAttributes.none,
+    });
+  });
 };
 
-export const renderBorder = (x: number, y: number, node: DOMNode, output: Output): void => {
+export const renderBorder = (x: number, y: number, node: DOMNode, output: Canvas): void => {
   if (node.style.borderStyle) {
     const width = node.yogaNode!.getComputedWidth();
     const height = node.yogaNode!.getComputedHeight();
+    const bounds = { x, y, width, height };
     const box =
       typeof node.style.borderStyle === "string"
         ? BOXES[node.style.borderStyle]
@@ -52,19 +72,12 @@ export const renderBorder = (x: number, y: number, node: DOMNode, output: Output
 
     const contentWidth = width - (showLeftBorder ? 1 : 0) - (showRightBorder ? 1 : 0);
 
-    let topBorder = showTopBorder
+    const topBorder = showTopBorder
       ? (showLeftBorder ? box.topLeft : "") +
         box.top.repeat(contentWidth) +
         (showRightBorder ? box.topRight : "")
       : undefined;
 
-    topBorder &&= stylePiece(
-      topBorder,
-      topBorderColor,
-      topBorderBackgroundColor,
-      dimTopBorderColor,
-    );
-
     let verticalBorderHeight = height;
 
     if (showTopBorder) {
@@ -75,60 +88,80 @@ export const renderBorder = (x: number, y: number, node: DOMNode, output: Output
       verticalBorderHeight -= 1;
     }
 
-    let leftBorder = "";
-
-    if (showLeftBorder) {
-      const one = stylePiece(
-        box.left,
-        leftBorderColor,
-        leftBorderBackgroundColor,
-        dimLeftBorderColor,
-      );
-      leftBorder = (one + "\n").repeat(verticalBorderHeight);
-    }
-
-    let rightBorder = "";
-
-    if (showRightBorder) {
-      const one = stylePiece(
-        box.right,
-        rightBorderColor,
-        rightBorderBackgroundColor,
-        dimRightBorderColor,
-      );
-      rightBorder = (one + "\n").repeat(verticalBorderHeight);
-    }
+    const offsetY = showTopBorder ? 1 : 0;
 
-    let bottomBorder = showBottomBorder
+    const bottomBorder = showBottomBorder
       ? (showLeftBorder ? box.bottomLeft : "") +
         box.bottom.repeat(contentWidth) +
         (showRightBorder ? box.bottomRight : "")
       : undefined;
-    bottomBorder &&= stylePiece(
-      bottomBorder,
-      bottomBorderColor,
-      bottomBorderBackgroundColor,
-      dimBottomBorderColor,
-    );
-
-    const offsetY = showTopBorder ? 1 : 0;
 
     if (topBorder) {
-      output.write(x, y, topBorder, { transformers: [] });
+      output.writeCells(x, y, [
+        stylePiece(
+          topBorder,
+          x,
+          y,
+          bounds,
+          output.paintContext,
+          topBorderColor,
+          topBorderBackgroundColor,
+          dimTopBorderColor,
+        ),
+      ]);
     }
 
-    if (leftBorder) {
-      output.write(x, y + offsetY, leftBorder, { transformers: [] });
+    if (showLeftBorder) {
+      output.writeCells(
+        x,
+        y + offsetY,
+        Array.from({ length: verticalBorderHeight }, (_, row) =>
+          stylePiece(
+            box.left,
+            x,
+            y + offsetY + row,
+            bounds,
+            output.paintContext,
+            leftBorderColor,
+            leftBorderBackgroundColor,
+            dimLeftBorderColor,
+          ),
+        ),
+      );
     }
 
-    if (rightBorder) {
-      output.write(x + width - 1, y + offsetY, rightBorder, {
-        transformers: [],
-      });
+    if (showRightBorder) {
+      output.writeCells(
+        x + width - 1,
+        y + offsetY,
+        Array.from({ length: verticalBorderHeight }, (_, row) =>
+          stylePiece(
+            box.right,
+            x + width - 1,
+            y + offsetY + row,
+            bounds,
+            output.paintContext,
+            rightBorderColor,
+            rightBorderBackgroundColor,
+            dimRightBorderColor,
+          ),
+        ),
+      );
     }
 
     if (bottomBorder) {
-      output.write(x, y + height - 1, bottomBorder, { transformers: [] });
+      output.writeCells(x, y + height - 1, [
+        stylePiece(
+          bottomBorder,
+          x,
+          y + height - 1,
+          bounds,
+          output.paintContext,
+          bottomBorderColor,
+          bottomBorderBackgroundColor,
+          dimBottomBorderColor,
+        ),
+      ]);
     }
   }
 };

package/src/render-frame.ts

@@ -0,0 +1,83 @@
+import type { PaintContext } from "#/color/paint.ts";
+import { type DOMElement } from "#/dom.ts";
+import { paintTree, renderAccessibleText } from "#/paint-tree.ts";
+import { Canvas } from "#/screen/canvas.ts";
+import { type ColorProfile } from "#/screen/index.ts";
+import type { Screen } from "#/screen/screen.ts";
+
+type Result = {
+  screen?: Screen;
+  staticScreen?: Screen;
+  accessibleText?: string;
+  staticAccessibleText?: string;
+};
+
+type RendererOptions = {
+  colorProfile?: ColorProfile;
+  paintContext?: PaintContext;
+};
+
+const renderDimension = (value: number): number =>
+  Number.isFinite(value) ? Math.max(0, Math.ceil(value)) : 0;
+
+export const renderFrame = (
+  node: DOMElement,
+  isScreenReaderEnabled: boolean,
+  options: RendererOptions = {},
+): Result => {
+  if (node.yogaNode) {
+    if (isScreenReaderEnabled) {
+      const output = renderAccessibleText(node, {
+        skipStaticElements: true,
+      });
+
+      let staticOutput = "";
+
+      if (node.staticNode) {
+        staticOutput = renderAccessibleText(node.staticNode, {
+          skipStaticElements: false,
+        });
+      }
+
+      return {
+        accessibleText: output,
+        staticAccessibleText: staticOutput,
+      };
+    }
+
+    const output = new Canvas({
+      width: renderDimension(node.yogaNode.getComputedWidth()),
+      height: renderDimension(node.yogaNode.getComputedHeight()),
+      colorProfile: options.colorProfile,
+      paintContext: options.paintContext,
+    });
+
+    paintTree(node, output, {
+      skipStaticElements: true,
+    });
+
+    let staticOutput;
+
+    if (node.staticNode?.yogaNode) {
+      staticOutput = new Canvas({
+        width: renderDimension(node.staticNode.yogaNode.getComputedWidth()),
+        height: renderDimension(node.staticNode.yogaNode.getComputedHeight()),
+        colorProfile: options.colorProfile,
+        paintContext: options.paintContext,
+      });
+
+      paintTree(node.staticNode, staticOutput, {
+        skipStaticElements: false,
+      });
+    }
+
+    return {
+      screen: output.finish(),
+      ...(staticOutput ? { staticScreen: staticOutput.finish() } : {}),
+    };
+  }
+
+  return {
+    accessibleText: "",
+  };
+};

package/src/render-to-string.ts

@@ -1,9 +1,12 @@
 import type { ReactNode } from "react";
 import { LegacyRoot } from "react-reconciler/constants.js";
 
+import { detectColorLevel } from "#/capabilities/detect.ts";
 import { createNode, type DOMElement } from "#/dom.ts";
 import { reconciler } from "#/reconciler.ts";
-import { renderer } from "#/renderer.ts";
+import { renderFrame } from "#/render-frame.ts";
+import { colorProfileFromLevel, type ColorProfile } from "#/screen/index.ts";
+import { serializeScreen } from "#/screen/serialize.ts";
 import { Yoga } from "#/yoga/index.ts";
 
 export type RenderToStringOptions = {
@@ -13,6 +16,12 @@ export type RenderToStringOptions = {
 	@default 80
 	*/
   columns?: number;
+
+  /**
+	Color profile used for deterministic serialization. By default this retains
+	the process color level for Ink compatibility.
+	*/
+  colorProfile?: ColorProfile;
 };
 
 /**
@@ -44,6 +53,7 @@ console.log(output);
 */
 export const renderToString = (node: ReactNode, options?: RenderToStringOptions): string => {
   const columns = options?.columns ?? 80;
+  const colorProfile = options?.colorProfile ?? colorProfileFromLevel(detectColorLevel());
 
   // Create a standalone root node — no stdout, stdin, or terminal bindings
   const rootNode: DOMElement = createNode("ink-root");
@@ -62,7 +72,10 @@ export const renderToString = (node: ReactNode, options?: RenderToStringOptions)
   };
 
   rootNode.onImmediateRender = () => {
-    const { staticOutput } = renderer(rootNode, false);
+    const { staticScreen } = renderFrame(rootNode, false, { colorProfile });
+    const staticOutput = staticScreen
+      ? `${serializeScreen(staticScreen, { colorProfile, styles: colorProfile !== "none" })}\n`
+      : "";
     if (staticOutput && staticOutput !== "\n") {
       capturedStaticOutput += staticOutput;
     }
@@ -99,7 +112,10 @@ export const renderToString = (node: ReactNode, options?: RenderToStringOptions)
 
   // Yoga layout has already been calculated by onComputeLayout during commit.
   // Render the DOM tree to a string — this captures the dynamic (non-static) output.
-  const { output } = renderer(rootNode, false);
+  const { screen } = renderFrame(rootNode, false, { colorProfile });
+  const output = screen
+    ? serializeScreen(screen, { colorProfile, styles: colorProfile !== "none" })
+    : "";
 
   // Tear down: unmount the tree so the reconciler cleans up child nodes
   // and runs effect cleanup functions. The reconciler detaches removed
@@ -116,9 +132,8 @@ export const renderToString = (node: ReactNode, options?: RenderToStringOptions)
         new Error(String(uncaughtError));
   }
 
-  // The renderer appends a trailing newline to static output for terminal
-  // rendering (so dynamic output starts on a fresh line). Strip it here
-  // so renderToString returns clean output.
+  // Static terminal output ends with a newline so dynamic output starts on a
+  // fresh line. Strip it here so renderToString returns clean output.
   const normalizedStaticOutput = capturedStaticOutput.endsWith("\n")
     ? capturedStaticOutput.slice(0, -1)
     : capturedStaticOutput;