@nick-skriabin/glyph 0.1.4 → 0.1.6

package/README.md

@@ -488,12 +488,38 @@ const app = render(<App />, {
   stdout: process.stdout,
   stdin: process.stdin,
   debug: false,
+  useNativeCursor: true, // Use terminal's native cursor (default: true)
 });
 
 app.unmount(); // Tear down
 app.exit();    // Unmount and exit process
 ```
 
+### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `stdout` | `NodeJS.WriteStream` | `process.stdout` | Output stream |
+| `stdin` | `NodeJS.ReadStream` | `process.stdin` | Input stream |
+| `debug` | `boolean` | `false` | Enable debug logging |
+| `useNativeCursor` | `boolean` | `true` | Use terminal's native cursor instead of simulated one |
+
+### Native Cursor
+
+By default, Glyph uses the terminal's native cursor, which enables:
+
+- **Cursor shaders** in terminals that support them (e.g., Ghostty)
+- **Custom cursor shapes** (block, beam, underline) from terminal settings
+- **Cursor animations** and blinking behavior
+
+The native cursor is automatically shown when an input is focused and hidden otherwise.
+
+To use the simulated cursor instead (inverted colors, no shader support):
+
+```tsx
+render(<App />, { useNativeCursor: false });
+```
+
 ---
 
 ## Examples

package/dist/index.cjs

@@ -324,6 +324,18 @@ var Terminal = class {
   showCursor() {
     this.write(`${CSI}?25h`);
   }
+  /** Move cursor to (x, y) position (0-indexed) */
+  moveCursor(x, y) {
+    this.write(`${CSI}${y + 1};${x + 1}H`);
+  }
+  /** Set cursor color using OSC 12 */
+  setCursorColor(color) {
+    this.write(`${ESC}]12;${color}\x07`);
+  }
+  /** Reset cursor color to terminal default */
+  resetCursorColor() {
+    this.write(`${ESC}]112\x07`);
+  }
   enterAltScreen() {
     this.write(`${CSI}?1049h`);
   }
@@ -352,6 +364,7 @@ var Terminal = class {
       this.escFlushTimer = null;
     }
     this.resetStyles();
+    this.resetCursorColor();
     this.showCursor();
     this.exitAltScreen();
     this.exitRawMode();
@@ -365,6 +378,7 @@ var Terminal = class {
     this.oscState = "normal";
     this.oscAccum = "";
     this.resetStyles();
+    this.resetCursorColor();
     this.showCursor();
     this.exitAltScreen();
     this.exitRawMode();
@@ -815,6 +829,10 @@ function colorsEqual(a, b) {
   }
   return false;
 }
+function getContrastCursorColor(bg) {
+  if (!bg) return "white";
+  return isLightColor(bg) ? "black" : "white";
+}
 
 // src/paint/framebuffer.ts
 var Framebuffer = class _Framebuffer {
@@ -1031,8 +1049,9 @@ function wordWrap(text, maxWidth) {
   }
   return lines.length > 0 ? lines : [""];
 }
-function paintTree(roots, fb, cursorInfo) {
+function paintTree(roots, fb, options = {}) {
   fb.clear();
+  const result = {};
   const entries = [];
   const screenClip = { x: 0, y: 0, width: fb.width, height: fb.height };
   for (const root of roots) {
@@ -1041,8 +1060,12 @@ function paintTree(roots, fb, cursorInfo) {
   }
   entries.sort((a, b) => a.zIndex - b.zIndex);
   for (const entry of entries) {
-    paintNode(entry.node, fb, entry.clip, cursorInfo);
+    const nodeResult = paintNode(entry.node, fb, entry.clip, options);
+    if (nodeResult?.cursorPosition) {
+      result.cursorPosition = nodeResult.cursorPosition;
+    }
   }
+  return result;
 }
 function collectPaintEntries(node, parentClip, parentZ, entries) {
   if (node.hidden) return;
@@ -1075,7 +1098,7 @@ function intersectClip(a, b) {
 function isInClip(x, y, clip) {
   return x >= clip.x && x < clip.x + clip.width && y >= clip.y && y < clip.y + clip.height;
 }
-function paintNode(node, fb, clip, cursorInfo) {
+function paintNode(node, fb, clip, options = {}) {
   const { x, y, width, height, innerX, innerY, innerWidth, innerHeight } = node.layout;
   const style = node.style;
   if (width <= 0 || height <= 0) return;
@@ -1112,8 +1135,9 @@ function paintNode(node, fb, clip, cursorInfo) {
   if (node.type === "text") {
     paintText(node, fb, clip);
   } else if (node.type === "input") {
-    paintInput(node, fb, clip, cursorInfo);
+    return paintInput(node, fb, clip, options);
   }
+  return void 0;
 }
 function setClipped(fb, clip, x, y, ch, fg, bg, bold, dim, italic, underline) {
   if (isInClip(x, y, clip)) {
@@ -1166,7 +1190,8 @@ function paintText(node, fb, clip) {
     }
   }
 }
-function paintInput(node, fb, clip, cursorInfo) {
+function paintInput(node, fb, clip, options = {}) {
+  const { cursorInfo, useNativeCursor } = options;
   const { innerX, innerY, innerWidth, innerHeight } = node.layout;
   if (innerWidth <= 0 || innerHeight <= 0) return;
   const value = node.props.value ?? node.props.defaultValue ?? "";
@@ -1180,13 +1205,15 @@ function paintInput(node, fb, clip, cursorInfo) {
   const fg = isPlaceholder ? placeholderFg : autoFg ?? inherited.color ?? node.style.color;
   const textFg = isPlaceholder ? placeholderFg : fg;
   const textDim = isPlaceholder ? true : inherited.dim;
+  const isFocused = cursorInfo && cursorInfo.nodeId === node.focusId;
+  let result;
   if (multiline && !isPlaceholder) {
     const wrapMode = node.style.wrap ?? "wrap";
     const rawLines = displayText.split("\n");
     const wrappedLines = wrapLines(rawLines, innerWidth, wrapMode);
     let cursorScreenLine = 0;
     let cursorScreenCol = 0;
-    if (cursorInfo && cursorInfo.nodeId === node.focusId) {
+    if (isFocused) {
       const pos = cursorInfo.position;
       let logicalLine = 0;
       let offsetInLogicalLine = pos;
@@ -1245,28 +1272,32 @@ function paintInput(node, fb, clip, cursorInfo) {
         col += charWidth;
       }
     }
-    if (cursorInfo && cursorInfo.nodeId === node.focusId) {
+    if (isFocused) {
       const screenRow = cursorScreenLine - scrollOffset;
       if (screenRow >= 0 && screenRow < innerHeight) {
         const cCol = Math.min(cursorScreenCol, innerWidth - 1);
         const cursorX = innerX + cCol;
         const cursorY = innerY + screenRow;
         if (isInClip(cursorX, cursorY, clip) && cursorX < innerX + innerWidth) {
-          const existing = fb.get(cursorX, cursorY);
-          const cursorChar = existing?.ch && existing.ch !== " " ? existing.ch : "\u258C";
-          const cursorFg = inherited.bg ?? "black";
-          const cursorBg = inherited.color ?? "white";
-          fb.setChar(
-            cursorX,
-            cursorY,
-            cursorChar,
-            cursorFg,
-            cursorBg,
-            existing?.bold,
-            existing?.dim,
-            existing?.italic,
-            false
-          );
+          if (useNativeCursor) {
+            result = { cursorPosition: { x: cursorX, y: cursorY, bg: inherited.bg } };
+          } else {
+            const existing = fb.get(cursorX, cursorY);
+            const cursorChar = existing?.ch && existing.ch !== " " ? existing.ch : "\u258C";
+            const cursorFg = inherited.bg ?? "black";
+            const cursorBg = inherited.color ?? "white";
+            fb.setChar(
+              cursorX,
+              cursorY,
+              cursorChar,
+              cursorFg,
+              cursorBg,
+              existing?.bold,
+              existing?.dim,
+              existing?.italic,
+              false
+            );
+          }
         }
       }
     }
@@ -1292,28 +1323,33 @@ function paintInput(node, fb, clip, cursorInfo) {
       }
       col += charWidth;
     }
-    if (cursorInfo && cursorInfo.nodeId === node.focusId) {
+    if (isFocused) {
       const cursorCol = Math.min(cursorInfo.position, innerWidth - 1);
       const cursorX = innerX + cursorCol;
       if (isInClip(cursorX, innerY, clip) && cursorX < innerX + innerWidth) {
-        const existing = fb.get(cursorX, innerY);
-        const cursorChar = existing?.ch && existing.ch !== " " ? existing.ch : "\u258C";
-        const cursorFg = inherited.bg ?? "black";
-        const cursorBg = inherited.color ?? "white";
-        fb.setChar(
-          cursorX,
-          innerY,
-          cursorChar,
-          cursorFg,
-          cursorBg,
-          existing?.bold,
-          existing?.dim,
-          existing?.italic,
-          false
-        );
+        if (useNativeCursor) {
+          result = { cursorPosition: { x: cursorX, y: innerY, bg: inherited.bg } };
+        } else {
+          const existing = fb.get(cursorX, innerY);
+          const cursorChar = existing?.ch && existing.ch !== " " ? existing.ch : "\u258C";
+          const cursorFg = inherited.bg ?? "black";
+          const cursorBg = inherited.color ?? "white";
+          fb.setChar(
+            cursorX,
+            innerY,
+            cursorChar,
+            cursorFg,
+            cursorBg,
+            existing?.bold,
+            existing?.dim,
+            existing?.italic,
+            false
+          );
+        }
       }
     }
   }
+  return result;
 }
 
 // src/paint/diff.ts
@@ -1542,8 +1578,10 @@ function render(element, opts = {}) {
   const stdout = opts.stdout ?? process.stdout;
   const stdin = opts.stdin ?? process.stdin;
   const debug = opts.debug ?? false;
+  const useNativeCursor = opts.useNativeCursor ?? true;
   const terminal = new Terminal(stdout, stdin);
   terminal.setup();
+  let nativeCursorVisible = false;
   terminal.queryPalette().then((palette) => {
     setTerminalPalette(palette);
     fullRedraw = true;
@@ -1712,11 +1750,30 @@ function render(element, opts = {}) {
         };
       }
     }
-    paintTree(container.children, currentFb, cursorInfo);
+    const paintResult = paintTree(container.children, currentFb, {
+      cursorInfo,
+      useNativeCursor
+    });
     const output = diffFramebuffers(prevFb, currentFb, fullRedraw);
     if (output.length > 0) {
       terminal.write(output);
     }
+    if (useNativeCursor) {
+      if (paintResult.cursorPosition) {
+        const cursorColor = getContrastCursorColor(paintResult.cursorPosition.bg);
+        terminal.setCursorColor(cursorColor);
+        terminal.moveCursor(paintResult.cursorPosition.x, paintResult.cursorPosition.y);
+        if (!nativeCursorVisible) {
+          terminal.showCursor();
+          nativeCursorVisible = true;
+        }
+      } else {
+        if (nativeCursorVisible) {
+          terminal.hideCursor();
+          nativeCursorVisible = false;
+        }
+      }
+    }
     for (let i = 0; i < currentFb.cells.length; i++) {
       prevFb.cells[i] = { ...currentFb.cells[i] };
     }
@@ -2051,22 +2108,6 @@ function Input(props) {
           }
           return true;
         }
-        if (key.name === "u") {
-          if (ml) {
-            const { line, lines } = cursorToLineCol(val, pos);
-            const lineStart = lineColToCursor(lines, line, 0);
-            if (pos > lineStart) {
-              const newVal = val.slice(0, lineStart) + val.slice(pos);
-              updateValue(newVal, lineStart);
-            }
-          } else {
-            if (pos > 0) {
-              const newVal = val.slice(pos);
-              updateValue(newVal, 0);
-            }
-          }
-          return true;
-        }
         if (key.name === "k") {
           if (ml) {
             const { line, lines } = cursorToLineCol(val, pos);
@@ -2467,9 +2508,7 @@ function ScrollView({
           if (key.name === "d") {
             setOffset(offset + halfPage);
           } else if (key.name === "u") {
-            if (key.shift) {
-              setOffset(offset - halfPage);
-            }
+            setOffset(offset - halfPage);
           } else if (key.name === "f") {
             setOffset(offset + fullPage);
           } else if (key.name === "b") {