@gridland/web 0.1.0 → 0.2.0

package/dist/index.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;
@@ -540,6 +550,35 @@ interface BrowserContextValue {
 declare const BrowserContext: react.Context<BrowserContextValue | null>;
 declare function useBrowserContext(): BrowserContextValue;
 
+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;
+
 /**
  * SSR-safe utilities for @gridland/web.
  * These can be imported in any environment (Node.js, browser, edge).
@@ -554,4 +593,4 @@ declare function calculateGridSize(widthPx: number, heightPx: number, cellWidth:
     rows: number;
 };
 
-export { type BorderDrawOptions, BrowserBuffer, BrowserContext, type BrowserContextValue, BrowserRenderContext, BrowserRenderer, type BrowserRoot, BrowserSyntaxStyle, BrowserTextBuffer, BrowserTextBufferView, CanvasPainter, type CanvasPainterOptions, type DroppedFile, type MountOptions, type MountResult, SelectionManager, type StyledTextInput, TUI, type TUIProps, type TextChunk, type VisibleLine, type VisibleLineChunk, type WidthMethod, calculateGridSize, createBrowserRoot, isBrowser, isCanvasSupported, mountGridland, useBrowserContext, useFileDrop, usePaste };
+export { type BorderDrawOptions, BrowserBuffer, BrowserContext, type BrowserContextValue, BrowserRenderContext, BrowserRenderer, type BrowserRoot, BrowserSyntaxStyle, BrowserTextBuffer, BrowserTextBufferView, CanvasPainter, type CanvasPainterOptions, type DroppedFile, HeadlessRenderer, type HeadlessRendererOptions, type HeadlessRoot, type MountOptions, type MountResult, SelectionManager, type StyledTextInput, TUI, type TUIProps, type TextChunk, type VisibleLine, type VisibleLineChunk, type WidthMethod, bufferToText, calculateGridSize, createBrowserRoot, createHeadlessRoot, isBrowser, isCanvasSupported, mountGridland, setHeadlessRootRenderableClass, useBrowserContext, useFileDrop, usePaste };

package/dist/index.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,
@@ -2723,13 +2895,17 @@ export {
   BrowserTextBuffer,
   BrowserTextBufferView,
   CanvasPainter,
+  HeadlessRenderer,
   SelectionManager,
   TUI,
+  bufferToText,
   calculateGridSize,
   createBrowserRoot,
+  createHeadlessRoot,
   isBrowser,
   isCanvasSupported,
   mountGridland,
+  setHeadlessRootRenderableClass,
   useBrowserContext,
   useFileDrop,
   usePaste