@gridland/web 0.1.0 → 0.2.1

package/dist/core.d.ts

@@ -290,7 +290,10 @@ declare class BrowserRenderer {
     private isDragOver;
     private cleanupListeners;
     private mouseDownCell;
-    constructor(canvas: HTMLCanvasElement, cols: number, rows: number);
+    private backgroundColor;
+    constructor(canvas: HTMLCanvasElement, cols: number, rows: number, options?: {
+        backgroundColor?: string;
+    });
     private pixelToCell;
     private setupDomListeners;
     start(): void;
@@ -315,8 +318,14 @@ interface TUIProps {
     fontFamily?: string;
     /** Auto-focus the canvas for keyboard input (default: true) */
     autoFocus?: boolean;
+    /** Background color for the canvas (default: transparent) */
+    backgroundColor?: string;
     /** Called when the renderer is ready */
     onReady?: (renderer: BrowserRenderer) => void;
+    /** Columns to use for SSR headless render (default: 80) */
+    fallbackCols?: number;
+    /** Rows to use for SSR headless render (default: 24) */
+    fallbackRows?: number;
 }
 /**
  * A single React component that renders TUI content to an HTML5 Canvas.
@@ -333,7 +342,7 @@ interface TUIProps {
  *
  * No dynamic imports, no wrapper chains. Just a component.
  */
-declare function TUI({ children, style, className, fontSize, fontFamily, autoFocus, onReady, }: TUIProps): react_jsx_runtime.JSX.Element;
+declare function TUI({ children, style, className, fontSize, fontFamily, autoFocus, backgroundColor, onReady, fallbackCols, fallbackRows, }: TUIProps): react_jsx_runtime.JSX.Element;
 
 interface MountOptions {
     /** Number of columns (auto-calculated from canvas size if omitted) */
@@ -443,6 +452,7 @@ declare class BrowserTextBufferView {
     private _viewportWidth;
     private _viewportHeight;
     private _truncate;
+    textAlign: "left" | "center" | "right";
     private _selection;
     private _selectionBg;
     private _selectionFg;
@@ -532,4 +542,33 @@ declare function calculateGridSize(widthPx: number, heightPx: number, cellWidth:
     rows: number;
 };
 
-export { BrowserBuffer, BrowserContext, BrowserRenderContext, BrowserRenderer, type BrowserRoot, BrowserTextBuffer, BrowserTextBufferView, CanvasPainter, type MountOptions, type MountResult, SelectionManager, TUI, type TUIProps, calculateGridSize, createBrowserRoot, isBrowser, isCanvasSupported, mountGridland, useBrowserContext, useFileDrop, usePaste };
+interface ReadableCharBuffer {
+    width: number;
+    height: number;
+    char: Uint32Array;
+}
+declare function bufferToText(buffer: ReadableCharBuffer): string;
+
+declare function setHeadlessRootRenderableClass(cls: any): void;
+interface HeadlessRendererOptions {
+    cols: number;
+    rows: number;
+}
+declare class HeadlessRenderer {
+    buffer: BrowserBuffer;
+    renderContext: BrowserRenderContext;
+    root: any;
+    constructor(options: HeadlessRendererOptions);
+    renderOnce(): void;
+    toText(): string;
+    resize(cols: number, rows: number): void;
+}
+
+interface HeadlessRoot {
+    render(node: ReactNode): void;
+    renderToText(node: ReactNode): string;
+    unmount(): void;
+}
+declare function createHeadlessRoot(renderer: HeadlessRenderer): HeadlessRoot;
+
+export { BrowserBuffer, BrowserContext, BrowserRenderContext, BrowserRenderer, type BrowserRoot, BrowserTextBuffer, BrowserTextBufferView, CanvasPainter, HeadlessRenderer, type HeadlessRendererOptions, type HeadlessRoot, type MountOptions, type MountResult, SelectionManager, TUI, type TUIProps, bufferToText, calculateGridSize, createBrowserRoot, createHeadlessRoot, isBrowser, isCanvasSupported, mountGridland, setHeadlessRootRenderableClass, useBrowserContext, useFileDrop, usePaste };

package/dist/core.js

@@ -405,6 +405,7 @@ import * as LineNumberRenderable_star from "../../../../opentui/packages/core/sr
 import * as Markdown_star from "../../../../opentui/packages/core/src/renderables/Markdown";
 import * as FrameBuffer_star from "../../../../opentui/packages/core/src/renderables/FrameBuffer";
 import * as TextBufferRenderable_star from "../../../../opentui/packages/core/src/renderables/TextBufferRenderable";
+import { TextBufferRenderable } from "../../../../opentui/packages/core/src/renderables/TextBufferRenderable";
 
 // src/browser-text-buffer.ts
 var BrowserTextBuffer = class _BrowserTextBuffer {
@@ -569,6 +570,7 @@ var BrowserTextBufferView = class _BrowserTextBufferView {
   _viewportWidth = 0;
   _viewportHeight = 0;
   _truncate = false;
+  textAlign = "left";
   _selection = null;
   _selectionBg;
   _selectionFg;
@@ -653,12 +655,18 @@ var BrowserTextBufferView = class _BrowserTextBufferView {
   setViewportSize(width, height) {
     this._viewportWidth = width;
     this._viewportHeight = height;
+    if (this._wrapMode !== "none" && width > 0 && this._wrapWidth !== width) {
+      this._wrapWidth = width;
+    }
   }
   setViewport(x, y, width, height) {
     this._viewportX = x;
     this._viewportY = y;
     this._viewportWidth = width;
     this._viewportHeight = height;
+    if (this._wrapMode !== "none" && width > 0 && this._wrapWidth !== width) {
+      this._wrapWidth = width;
+    }
   }
   setTabIndicator(_indicator) {
   }
@@ -1000,6 +1008,19 @@ import {
   createTimeline
 } from "../../../../opentui/packages/core/src/animation/Timeline";
 import * as Yoga from "yoga-layout";
+Object.defineProperty(TextBufferRenderable.prototype, "textAlign", {
+  get() {
+    return this.textBufferView?.textAlign ?? "left";
+  },
+  set(value) {
+    if (this.textBufferView) {
+      this.textBufferView.textAlign = value;
+      this.requestRender();
+    }
+  },
+  enumerable: true,
+  configurable: true
+});
 function resolveRenderLib() {
   return null;
 }
@@ -1404,10 +1425,20 @@ var BrowserBuffer = class _BrowserBuffer {
     if (!view || !view.getVisibleLines) return;
     const lines = view.getVisibleLines();
     if (!lines) return;
+    const textAlign = view.textAlign;
+    const viewWidth = view._viewportWidth;
     for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
       const line = lines[lineIdx];
       if (!line) continue;
       let curX = x;
+      if (textAlign && textAlign !== "left" && viewWidth) {
+        const lineWidth = line.chunks.reduce((sum, c) => sum + c.text.length, 0);
+        if (textAlign === "center") {
+          curX = x + Math.floor((viewWidth - lineWidth) / 2);
+        } else if (textAlign === "right") {
+          curX = x + viewWidth - lineWidth;
+        }
+      }
       for (const chunk of line.chunks) {
         const text = chunk.text;
         const fgColor = chunk.fg;
@@ -2150,6 +2181,41 @@ var SelectionManager = class {
   }
 };
 
+// src/render-pipeline.ts
+function executeRenderPipeline(buffer, renderContext, root, deltaTime) {
+  buffer.clear();
+  const lifecyclePasses = renderContext.getLifecyclePasses();
+  for (const renderable of lifecyclePasses) {
+    if (renderable.onLifecyclePass) {
+      renderable.onLifecyclePass();
+    }
+  }
+  root.calculateLayout();
+  const renderList = [];
+  root.updateLayout(deltaTime, renderList);
+  for (const cmd of renderList) {
+    switch (cmd.action) {
+      case "pushScissorRect":
+        buffer.pushScissorRect(cmd.x, cmd.y, cmd.width, cmd.height);
+        break;
+      case "popScissorRect":
+        buffer.popScissorRect();
+        break;
+      case "pushOpacity":
+        buffer.pushOpacity(cmd.opacity);
+        break;
+      case "popOpacity":
+        buffer.popOpacity();
+        break;
+      case "render":
+        cmd.renderable.render(buffer, deltaTime);
+        break;
+    }
+  }
+  buffer.clearScissorRects();
+  buffer.clearOpacity();
+}
+
 // src/browser-renderer.ts
 var RootRenderableClass = null;
 function setRootRenderableClass(cls) {
@@ -2174,7 +2240,8 @@ var BrowserRenderer = class _BrowserRenderer {
   isDragOver = false;
   cleanupListeners = [];
   mouseDownCell = null;
-  constructor(canvas, cols, rows) {
+  backgroundColor = null;
+  constructor(canvas, cols, rows, options) {
     this.canvas = canvas;
     this.cols = cols;
     this.rows = rows;
@@ -2191,6 +2258,7 @@ var BrowserRenderer = class _BrowserRenderer {
     canvas.style.width = `${cols * this.cellWidth}px`;
     canvas.style.height = `${rows * this.cellHeight}px`;
     this.ctx2d.scale(dpr, dpr);
+    this.backgroundColor = options?.backgroundColor ?? null;
     canvas.style.cursor = "text";
     this.buffer = BrowserBuffer.create(cols, rows, "wcwidth");
     this.renderContext = new BrowserRenderContext(cols, rows);
@@ -2337,40 +2405,15 @@ var BrowserRenderer = class _BrowserRenderer {
     this.lastTime = now;
     if (!this.needsRender) return;
     this.needsRender = false;
-    this.buffer.clear();
-    const lifecyclePasses = this.renderContext.getLifecyclePasses();
-    for (const renderable of lifecyclePasses) {
-      if (renderable.onLifecyclePass) {
-        renderable.onLifecyclePass();
-      }
-    }
-    this.root.calculateLayout();
-    const renderList = [];
-    this.root.updateLayout(deltaTime, renderList);
-    for (const cmd of renderList) {
-      switch (cmd.action) {
-        case "pushScissorRect":
-          this.buffer.pushScissorRect(cmd.x, cmd.y, cmd.width, cmd.height);
-          break;
-        case "popScissorRect":
-          this.buffer.popScissorRect();
-          break;
-        case "pushOpacity":
-          this.buffer.pushOpacity(cmd.opacity);
-          break;
-        case "popOpacity":
-          this.buffer.popOpacity();
-          break;
-        case "render":
-          cmd.renderable.render(this.buffer, deltaTime);
-          break;
-      }
-    }
-    this.buffer.clearScissorRects();
-    this.buffer.clearOpacity();
+    executeRenderPipeline(this.buffer, this.renderContext, this.root, deltaTime);
     const dpr = window.devicePixelRatio || 1;
     this.ctx2d.setTransform(dpr, 0, 0, dpr, 0, 0);
-    this.ctx2d.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    if (this.backgroundColor) {
+      this.ctx2d.fillStyle = this.backgroundColor;
+      this.ctx2d.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    } else {
+      this.ctx2d.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    }
     this.painter.paint(this.ctx2d, this.buffer, this.selection);
   };
   resize(cols, rows) {
@@ -2487,13 +2530,14 @@ function useBrowserContext() {
 // src/create-browser-root.tsx
 import { _render } from "../../../opentui/packages/react/src/reconciler/reconciler";
 import { AppContext } from "../../../opentui/packages/react/src/components/app";
-import { ErrorBoundary } from "../../../opentui/packages/react/src/components/error-boundary";
+import { ErrorBoundary as _ErrorBoundary } from "../../../opentui/packages/react/src/components/error-boundary";
 import { jsx } from "react/jsx-runtime";
+var ErrorBoundary = _ErrorBoundary;
 function createBrowserRoot(renderer) {
   let unmountFn = null;
   return {
     render(node) {
-      const element = /* @__PURE__ */ jsx(BrowserContext.Provider, { value: { renderContext: renderer.renderContext }, children: /* @__PURE__ */ jsx(AppContext.Provider, { value: { keyHandler: renderer.renderContext.keyInput, renderer: null }, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: node }) }) });
+      const element = /* @__PURE__ */ jsx(BrowserContext.Provider, { value: { renderContext: renderer.renderContext }, children: /* @__PURE__ */ jsx(AppContext.Provider, { value: { keyHandler: renderer.renderContext.keyInput, renderer: renderer.renderContext }, children: /* @__PURE__ */ jsx(ErrorBoundary, { children: node }) }) });
       unmountFn = _render(element, renderer.root);
     },
     unmount() {
@@ -2505,7 +2549,105 @@ function createBrowserRoot(renderer) {
 
 // src/TUI.tsx
 import { RootRenderable as RootRenderable2 } from "@opentui/core";
+
+// src/buffer-to-text.ts
+function bufferToText(buffer) {
+  const lines = [];
+  for (let row = 0; row < buffer.height; row++) {
+    let line = "";
+    for (let col = 0; col < buffer.width; col++) {
+      const idx = row * buffer.width + col;
+      const charCode = buffer.char[idx];
+      line += charCode === 0 ? " " : String.fromCodePoint(charCode);
+    }
+    lines.push(line.trimEnd());
+  }
+  while (lines.length > 0 && lines[lines.length - 1] === "") {
+    lines.pop();
+  }
+  return lines.join("\n");
+}
+
+// src/headless-renderer.ts
+var RootRenderableClass2 = null;
+function setHeadlessRootRenderableClass(cls) {
+  RootRenderableClass2 = cls;
+}
+var HeadlessRenderer = class {
+  buffer;
+  renderContext;
+  root;
+  // RootRenderable
+  constructor(options) {
+    const { cols, rows } = options;
+    this.buffer = BrowserBuffer.create(cols, rows, "wcwidth");
+    this.renderContext = new BrowserRenderContext(cols, rows);
+    this.renderContext.setOnRenderRequest(() => {
+    });
+    if (!RootRenderableClass2) {
+      throw new Error(
+        "RootRenderableClass not set. Call setHeadlessRootRenderableClass before creating HeadlessRenderer."
+      );
+    }
+    this.root = new RootRenderableClass2(this.renderContext);
+  }
+  renderOnce() {
+    executeRenderPipeline(this.buffer, this.renderContext, this.root, 0);
+  }
+  toText() {
+    return bufferToText(this.buffer);
+  }
+  resize(cols, rows) {
+    this.buffer.resize(cols, rows);
+    this.renderContext.resize(cols, rows);
+    this.root.resize(cols, rows);
+  }
+};
+
+// src/create-headless-root.tsx
+import { _render as _render2, reconciler } from "../../../opentui/packages/react/src/reconciler/reconciler";
+import { AppContext as AppContext2 } from "../../../opentui/packages/react/src/components/app";
+import { ErrorBoundary as _ErrorBoundary2 } from "../../../opentui/packages/react/src/components/error-boundary";
 import { jsx as jsx2 } from "react/jsx-runtime";
+var ErrorBoundary2 = _ErrorBoundary2;
+var _r = reconciler;
+var flushSync = _r.flushSyncFromReconciler ?? _r.flushSync;
+function createHeadlessRoot(renderer) {
+  let container = null;
+  return {
+    render(node) {
+      const element = /* @__PURE__ */ jsx2(BrowserContext.Provider, { value: { renderContext: renderer.renderContext }, children: /* @__PURE__ */ jsx2(
+        AppContext2.Provider,
+        {
+          value: {
+            keyHandler: renderer.renderContext.keyInput,
+            renderer: renderer.renderContext
+          },
+          children: /* @__PURE__ */ jsx2(ErrorBoundary2, { children: node })
+        }
+      ) });
+      container = _render2(element, renderer.root);
+    },
+    renderToText(node) {
+      flushSync(() => {
+        this.render(node);
+      });
+      renderer.renderOnce();
+      return renderer.toText();
+    },
+    unmount() {
+      if (container) {
+        reconciler.updateContainer(null, container, null, () => {
+        });
+        reconciler.flushSyncWork();
+        container = null;
+      }
+    }
+  };
+}
+
+// src/TUI.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
 function TUI({
   children,
   style,
@@ -2513,7 +2655,10 @@ function TUI({
   fontSize = 14,
   fontFamily = "'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace",
   autoFocus = true,
-  onReady
+  backgroundColor,
+  onReady,
+  fallbackCols = 80,
+  fallbackRows = 24
 }) {
   const containerRef = useRef(null);
   const canvasRef = useRef(null);
@@ -2535,7 +2680,7 @@ function TUI({
     const containerRect = container.getBoundingClientRect();
     const cols = Math.max(1, Math.floor(containerRect.width / cellSize.width));
     const rows = Math.max(1, Math.floor(containerRect.height / cellSize.height));
-    const renderer = new BrowserRenderer(canvas, cols, rows);
+    const renderer = new BrowserRenderer(canvas, cols, rows, { backgroundColor });
     rendererRef.current = renderer;
     const root = createBrowserRoot(renderer);
     rootRef.current = root;
@@ -2567,16 +2712,43 @@ function TUI({
       rendererRef.current = null;
       rootRef.current = null;
     };
-  }, [isClient, fontSize, fontFamily]);
+  }, [isClient, fontSize, fontFamily, backgroundColor]);
   useEffect(() => {
     if (rootRef.current) {
       rootRef.current.render(children);
     }
   }, [children]);
   if (!isClient) {
-    return /* @__PURE__ */ jsx2("div", { style, className, children: /* @__PURE__ */ jsx2("div", { style: { width: "100%", height: "100%" } }) });
+    const isServer = typeof window === "undefined";
+    let text = "";
+    if (isServer) {
+      setHeadlessRootRenderableClass(RootRenderable2);
+      const renderer = new HeadlessRenderer({ cols: fallbackCols, rows: fallbackRows });
+      const root = createHeadlessRoot(renderer);
+      text = root.renderToText(children);
+      root.unmount();
+    }
+    return /* @__PURE__ */ jsx3("div", { style, className, children: /* @__PURE__ */ jsx3(
+      "pre",
+      {
+        suppressHydrationWarning: true,
+        "aria-hidden": true,
+        style: {
+          fontFamily,
+          fontSize,
+          margin: 0,
+          position: "absolute",
+          width: "1px",
+          height: "1px",
+          overflow: "hidden",
+          clip: "rect(0, 0, 0, 0)",
+          whiteSpace: "pre"
+        },
+        children: text
+      }
+    ) });
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       ref: containerRef,
@@ -2586,7 +2758,7 @@ function TUI({
         ...style
       },
       className,
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         "canvas",
         {
           ref: canvasRef,
@@ -2722,13 +2894,17 @@ export {
   BrowserTextBuffer,
   BrowserTextBufferView,
   CanvasPainter,
+  HeadlessRenderer,
   SelectionManager,
   TUI,
+  bufferToText,
   calculateGridSize,
   createBrowserRoot,
+  createHeadlessRoot,
   isBrowser,
   isCanvasSupported,
   mountGridland,
+  setHeadlessRootRenderableClass,
   useBrowserContext,
   useFileDrop,
   usePaste