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

package/src/render-border.ts

@@ -1,26 +1,46 @@
-import { chalk } from "./ansi/chalk.ts";
-import { boxes as cliBoxes } from "./boxes.ts";
-import { colorize } from "./colorize.ts";
-import { type DOMNode } from "./dom.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 { 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 { 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"
-        ? cliBoxes[node.style.borderStyle]
+        ? BOXES[node.style.borderStyle]
         : node.style.borderStyle;
 
     const topBorderColor = node.style.borderTopColor ?? node.style.borderColor;
@@ -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,10 +1,13 @@
 import type { ReactNode } from "react";
 import { LegacyRoot } from "react-reconciler/constants.js";
 
-import { createNode, type DOMElement } from "./dom.ts";
-import { reconciler } from "./reconciler.ts";
-import { renderer } from "./renderer.ts";
-import { Yoga } from "./yoga/index.ts";
+import { detectColorLevel } from "#/capabilities/detect.ts";
+import { createNode, type DOMElement } from "#/dom.ts";
+import { reconciler } from "#/reconciler.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;

package/src/render.ts

@@ -1,11 +1,12 @@
-import process from "node:process";
 import { Stream, type Writable } from "node:stream";
 
 import type { ReactNode } from "react";
 
-import { Ink, type Options as InkOptions, type RenderMetrics } from "./ink.tsx";
-import { instances } from "./instances.ts";
-import { type KittyKeyboardOptions } from "./kitty-keyboard.ts";
+import type { ClipboardSelection, TerminalProgressState } from "#/ansi/osc.ts";
+import { createInk, type Ink, type Options as InkOptions, type RenderMetrics } from "#/ink.tsx";
+import { instances } from "#/instances.ts";
+import { type KittyKeyboardOptions } from "#/kitty-keyboard.ts";
+import { type ColorProfile } from "#/screen/color-profile.ts";
 
 export type RenderOptions = {
   /**
@@ -89,12 +90,12 @@ export type RenderOptions = {
   maxFps?: number;
 
   /**
-	Enable incremental rendering mode which only updates changed lines instead of redrawing the entire output.
-	This can reduce flickering and improve performance for frequently updating UIs.
-
-	@default false
+	Override the output color profile for this render instance. When omitted,
+	the profile follows the capabilities of `stdout` and capability upgrades
+	redraw the live frame. Static content already written to scrollback is not
+	replayed or recolored.
 	*/
-  incrementalRendering?: boolean;
+  colorProfile?: ColorProfile;
 
   /**
 	Enable React Concurrent Rendering mode.
@@ -122,7 +123,7 @@ export type RenderOptions = {
   /**
 	Override automatic interactive mode detection.
 
-	By default, Ink detects whether the environment is interactive based on CI detection (via [`is-in-ci`](https://github.com/sindresorhus/is-in-ci)) and `stdout.isTTY`. Most users should not need to set this.
+	By default, Ink detects whether the environment is interactive based on CI detection (the `CI` environment variable) and `stdout.isTTY`. Most users should not need to set this.
 
 	When non-interactive, Ink disables ANSI erase sequences, cursor manipulation, synchronized output, resize handling, and kitty keyboard auto-detection, writing only the final frame at unmount.
 
@@ -206,6 +207,12 @@ export type Instance = {
 	Clear output.
 	*/
   clear: () => void;
+
+  /** Copy text through the renderer-owned terminal session. */
+  copyToClipboard: (text: string, selection?: ClipboardSelection) => boolean;
+
+  /** Update terminal-native progress through the renderer-owned session. */
+  setProgress: (state: TerminalProgressState, value?: number) => boolean;
 };
 
 /**
@@ -220,26 +227,27 @@ export const render = (node: ReactNode, options?: Writable | RenderOptions): Ins
     exitOnCtrlC: true,
     patchConsole: true,
     maxFps: 30,
-    incrementalRendering: false,
     concurrent: false,
     alternateScreen: false,
     ...getOptions(options),
   };
 
-  const instance: Ink = getInstance(inkOptions.stdout, () => new Ink(inkOptions));
+  const instance: Ink = getInstance(inkOptions.stdout, () => createInk(inkOptions));
   instance.render(node);
 
   return {
-    rerender: instance.render.bind(instance),
+    rerender: instance.render,
     unmount() {
       instance.unmount();
     },
-    waitUntilExit: instance.waitUntilExit.bind(instance),
-    waitUntilRenderFlush: instance.waitUntilRenderFlush.bind(instance),
+    waitUntilExit: instance.waitUntilExit,
+    waitUntilRenderFlush: instance.waitUntilRenderFlush,
     cleanup() {
       instance.unmount();
     },
-    clear: instance.clear.bind(instance),
+    clear: instance.clear,
+    copyToClipboard: instance.copyToClipboard,
+    setProgress: instance.setProgress,
   };
 };