@claude-code-kit/ink-renderer 0.1.0 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Minnzen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+# @claude-code-kit/ink-renderer
+
+Terminal rendering engine for claude-code-kit — React reconciler, Yoga Flexbox layout, keyboard/mouse events, ANSI output.
+
+Part of [claude-code-kit](https://github.com/Minnzen/claude-code-kit).
+
+## Installation
+
+```bash
+pnpm add @claude-code-kit/ink-renderer react
+```
+
+## Quick Start
+
+```tsx
+import React from 'react'
+import { render, Box, Text } from '@claude-code-kit/ink-renderer'
+
+function App() {
+  return (
+    <Box flexDirection="column" padding={1}>
+      <Text bold color="green">Hello from claude-code-kit</Text>
+      <Text>Build terminal UIs like React apps.</Text>
+    </Box>
+  )
+}
+
+await render(<App />)
+```
+
+## Included
+
+- Rendering API: `render`, `renderSync`, `createRoot`
+- Primitives: `Box`, `Text`, `Spacer`, `Newline`, `Link`, `Button`, `ScrollBox`
+- Hooks: `useInput`, `useApp`, `useStdin`, `useInterval`, `useAnimationFrame`
+- Terminal helpers: `AlternateScreen`, `RawAnsi`, `Ansi`, `ErrorOverview`
+
+## Docs
+
+- Full project docs: [github.com/Minnzen/claude-code-kit](https://github.com/Minnzen/claude-code-kit)
+- Components overview: [docs/components.md](https://github.com/Minnzen/claude-code-kit/blob/main/docs/components.md)
+
+## License
+
+MIT

package/dist/index.js

@@ -2813,7 +2813,7 @@ var diff = (before, after) => {
   const changed = {};
   let isChanged = false;
   for (const key of Object.keys(before)) {
-    const isDeleted = after ? !Object.hasOwn(after, key) : true;
+    const isDeleted = after ? !Object.prototype.hasOwnProperty.call(after, key) : true;
     if (isDeleted) {
       changed[key] = void 0;
       isChanged = true;
@@ -4142,7 +4142,7 @@ function findPlainTextUrlAt(screen, col, row) {
   let url = token.slice(urlStart, urlEnd);
   const OPENER = { ")": "(", "]": "[", "}": "{" };
   while (url.length > 0) {
-    const last = url.at(-1);
+    const last = url.charAt(url.length - 1);
     if (".,;:!?".includes(last)) {
       url = url.slice(0, -1);
       continue;
@@ -4506,7 +4506,7 @@ function osc(...parts) {
 }
 function wrapForMultiplexer(sequence) {
   if (process.env["TMUX"]) {
-    const escaped = sequence.replaceAll("\x1B", "\x1B\x1B");
+    const escaped = sequence.split("\x1B").join("\x1B\x1B");
     return `\x1BPtmux;${escaped}\x1B\\`;
   }
   if (process.env["STY"]) {
@@ -4515,7 +4515,7 @@ function wrapForMultiplexer(sequence) {
   return sequence;
 }
 function tmuxPassthrough(payload) {
-  return `${ESC}Ptmux;${payload.replaceAll(ESC, ESC + ESC)}${ST}`;
+  return `${ESC}Ptmux;${payload.split(ESC).join(ESC + ESC)}${ST}`;
 }
 async function tmuxLoadBuffer(text) {
   if (!process.env["TMUX"]) return false;
@@ -4755,11 +4755,12 @@ function supportsTabStatus() {
 function tabStatus(fields) {
   const parts = [];
   const rgb2 = (c) => c.type === "rgb" ? `#${[c.r, c.g, c.b].map((n) => n.toString(16).padStart(2, "0")).join("")}` : "";
+  const escapeStatusValue = (value) => value.split("\\").join("\\\\").split(";").join("\\;");
   if ("indicator" in fields)
     parts.push(`indicator=${fields.indicator ? rgb2(fields.indicator) : ""}`);
   if ("status" in fields)
     parts.push(
-      `status=${fields.status?.replaceAll("\\", "\\\\").replaceAll(";", "\\;") ?? ""}`
+      `status=${fields.status ? escapeStatusValue(fields.status) : ""}`
     );
   if ("statusColor" in fields)
     parts.push(
@@ -6797,12 +6798,13 @@ var Output = class {
       if (operation.fromAbsolute) absoluteClears.push(rect);
     }
     const clips = [];
+    const getCurrentClip = () => clips[clips.length - 1];
     for (const operation of this.operations) {
       switch (operation.type) {
         case "clear":
           continue;
         case "clip":
-          clips.push(intersectClip(clips.at(-1), operation.clip));
+          clips.push(intersectClip(getCurrentClip(), operation.clip));
           continue;
         case "unclip":
           clips.pop();
@@ -6815,7 +6817,7 @@ var Output = class {
             width: regionWidth,
             height: regionHeight
           } = operation;
-          const clip = clips.at(-1);
+          const clip = getCurrentClip();
           const startX = Math.max(regionX, clip?.x1 ?? 0);
           const startY = Math.max(regionY, clip?.y1 ?? 0);
           const maxY = Math.min(
@@ -6861,7 +6863,7 @@ var Output = class {
           let lines = text.split("\n");
           let swFrom = 0;
           let prevContentEnd = 0;
-          const clip = clips.at(-1);
+          const clip = getCurrentClip();
           if (clip) {
             const clipHorizontally = typeof clip?.x1 === "number" && typeof clip?.x2 === "number";
             const clipVertically = typeof clip?.y1 === "number" && typeof clip?.y2 === "number";

package/dist/index.mjs

@@ -2755,7 +2755,7 @@ var diff = (before, after) => {
   const changed = {};
   let isChanged = false;
   for (const key of Object.keys(before)) {
-    const isDeleted = after ? !Object.hasOwn(after, key) : true;
+    const isDeleted = after ? !Object.prototype.hasOwnProperty.call(after, key) : true;
     if (isDeleted) {
       changed[key] = void 0;
       isChanged = true;
@@ -4087,7 +4087,7 @@ function findPlainTextUrlAt(screen, col, row) {
   let url = token.slice(urlStart, urlEnd);
   const OPENER = { ")": "(", "]": "[", "}": "{" };
   while (url.length > 0) {
-    const last = url.at(-1);
+    const last = url.charAt(url.length - 1);
     if (".,;:!?".includes(last)) {
       url = url.slice(0, -1);
       continue;
@@ -4451,7 +4451,7 @@ function osc(...parts) {
 }
 function wrapForMultiplexer(sequence) {
   if (process.env["TMUX"]) {
-    const escaped = sequence.replaceAll("\x1B", "\x1B\x1B");
+    const escaped = sequence.split("\x1B").join("\x1B\x1B");
     return `\x1BPtmux;${escaped}\x1B\\`;
   }
   if (process.env["STY"]) {
@@ -4460,7 +4460,7 @@ function wrapForMultiplexer(sequence) {
   return sequence;
 }
 function tmuxPassthrough(payload) {
-  return `${ESC}Ptmux;${payload.replaceAll(ESC, ESC + ESC)}${ST}`;
+  return `${ESC}Ptmux;${payload.split(ESC).join(ESC + ESC)}${ST}`;
 }
 async function tmuxLoadBuffer(text) {
   if (!process.env["TMUX"]) return false;
@@ -4700,11 +4700,12 @@ function supportsTabStatus() {
 function tabStatus(fields) {
   const parts = [];
   const rgb2 = (c) => c.type === "rgb" ? `#${[c.r, c.g, c.b].map((n) => n.toString(16).padStart(2, "0")).join("")}` : "";
+  const escapeStatusValue = (value) => value.split("\\").join("\\\\").split(";").join("\\;");
   if ("indicator" in fields)
     parts.push(`indicator=${fields.indicator ? rgb2(fields.indicator) : ""}`);
   if ("status" in fields)
     parts.push(
-      `status=${fields.status?.replaceAll("\\", "\\\\").replaceAll(";", "\\;") ?? ""}`
+      `status=${fields.status ? escapeStatusValue(fields.status) : ""}`
     );
   if ("statusColor" in fields)
     parts.push(
@@ -6748,12 +6749,13 @@ var Output = class {
       if (operation.fromAbsolute) absoluteClears.push(rect);
     }
     const clips = [];
+    const getCurrentClip = () => clips[clips.length - 1];
     for (const operation of this.operations) {
       switch (operation.type) {
         case "clear":
           continue;
         case "clip":
-          clips.push(intersectClip(clips.at(-1), operation.clip));
+          clips.push(intersectClip(getCurrentClip(), operation.clip));
           continue;
         case "unclip":
           clips.pop();
@@ -6766,7 +6768,7 @@ var Output = class {
             width: regionWidth,
             height: regionHeight
           } = operation;
-          const clip = clips.at(-1);
+          const clip = getCurrentClip();
           const startX = Math.max(regionX, clip?.x1 ?? 0);
           const startY = Math.max(regionY, clip?.y1 ?? 0);
           const maxY = Math.min(
@@ -6812,7 +6814,7 @@ var Output = class {
           let lines = text.split("\n");
           let swFrom = 0;
           let prevContentEnd = 0;
-          const clip = clips.at(-1);
+          const clip = getCurrentClip();
           if (clip) {
             const clipHorizontally = typeof clip?.x1 === "number" && typeof clip?.x2 === "number";
             const clipVertically = typeof clip?.y1 === "number" && typeof clip?.y2 === "number";

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@claude-code-kit/ink-renderer",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Terminal rendering engine extracted from Claude Code — React reconciler + Yoga layout + TTY output",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "exports": {
     ".": {
@@ -35,13 +36,14 @@
     "type-fest": "*",
     "usehooks-ts": "*",
     "wrap-ansi": "*",
-    "@claude-code-kit/shared": "0.1.0"
+    "@claude-code-kit/shared": "0.1.1"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-reconciler": ">=0.29.0"
   },
   "devDependencies": {
+    "@types/react-reconciler": "0.33.0",
     "react": "*",
     "react-reconciler": "*",
     "tsup": "*",
@@ -70,6 +72,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "lint": "pnpm run typecheck"
   }
 }