@gridland/web 0.1.0 → 0.2.0

package/dist/next.d.ts

@@ -289,7 +289,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;
@@ -314,8 +317,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.
@@ -332,6 +341,6 @@ 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;
 
 export { TUI, type TUIProps };

package/dist/next.js

@@ -401,6 +401,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 {
@@ -565,6 +566,7 @@ var BrowserTextBufferView = class _BrowserTextBufferView {
   _viewportWidth = 0;
   _viewportHeight = 0;
   _truncate = false;
+  textAlign = "left";
   _selection = null;
   _selectionBg;
   _selectionFg;
@@ -649,12 +651,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) {
   }
@@ -996,6 +1004,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;
 }
@@ -1400,10 +1421,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;
@@ -2146,6 +2177,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) {
@@ -2170,7 +2236,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;
@@ -2187,6 +2254,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);
@@ -2333,40 +2401,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) {
@@ -2476,13 +2519,14 @@ var BrowserContext = createContext(null);
 // 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() {
@@ -2494,7 +2538,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,
@@ -2502,7 +2644,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);
@@ -2524,7 +2669,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;
@@ -2556,16 +2701,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,
@@ -2575,7 +2747,7 @@ function TUI({
         ...style
       },
       className,
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         "canvas",
         {
           ref: canvasRef,