kittyhtml 0.1.0 → 0.2.1

package/README.md

@@ -9,12 +9,16 @@ Built for AI agents that have something nice to show you — a styled report, a
 ## Install
 
 ```sh
-# from this directory, until published
-npm install
-npm link        # exposes the `kittyhtml` binary on your PATH
+npm install -g kittyhtml
 ```
 
-Requires Node 20+. Pulls in [`canvas`](https://www.npmjs.com/package/canvas) (native build) and `dropflow`.
+Or one-shot, no install:
+
+```sh
+npx kittyhtml --demo
+```
+
+Requires Node 20+. Pulls in [`@napi-rs/canvas`](https://www.npmjs.com/package/@napi-rs/canvas) (prebuilt native binary, no compile step) and `dropflow`. Two deps total, ~90 KB tarball.
 
 ## Use
 
@@ -70,15 +74,15 @@ See the [DropFlow README](https://github.com/chearon/dropflow#supported-css-rule
 
 ## Fonts
 
-First run fetches Noto fonts from a CDN via DropFlow's bundled `register-noto-fonts.js`. Subsequent renders reuse what was loaded. Bundled offline fonts are on the roadmap.
+`Noto Sans` (regular, bold, italic, bold-italic) and `Noto Sans Mono` (regular, bold) ship inside the package as latin-subset TTFs (~160 KB total). No CDN fetch on first run; works offline. Reference them in HTML with `font-family: 'Noto Sans', sans-serif` and `font-family: 'Noto Sans Mono', monospace`.
 
 ## Claude Code skill
 
-A bundled skill lets Claude Code render output as a styled inline image when you ask for it as "kittyhtml" or "khtml":
+A bundled skill lets Claude Code render output as a styled inline image when you ask for it as "kittyhtml" or "khtml". After a global install:
 
 ```sh
 mkdir -p ~/.claude/skills
-cp -r skill/kittyhtml ~/.claude/skills/kittyhtml
+cp -r "$(npm root -g)/kittyhtml/skill/kittyhtml" ~/.claude/skills/
 ```
 
 Then in any Claude Code session: *"give me this report as kittyhtml"* — the agent will generate DropFlow-compatible HTML and pipe it through this CLI. The skill is narrow on purpose; it only triggers on those keywords.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kittyhtml",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "Render HTML to an image and display it inline in Kitty/iTerm2-capable terminals. No browser — CSS layout via DropFlow.",
   "type": "module",
   "bin": {
@@ -26,7 +26,7 @@
     "demo": "node src/cli.js --demo"
   },
   "dependencies": {
-    "canvas": "^2.11.2",
+    "@napi-rs/canvas": "^1.0.0",
     "dropflow": "^0.6.1"
   },
   "keywords": [

package/src/cli.js

@@ -80,6 +80,17 @@ function loadDemoHtml() {
   return readFileSync(join(here, '..', 'examples', 'demo.html'), 'utf8');
 }
 
+// readFileSync(0) crashes with EAGAIN when stdin is in non-blocking mode and
+// the upstream process hasn't flushed yet (common with `claude -p ... | kittyhtml`).
+// Async iteration over process.stdin yields back to the event loop and waits
+// for data, so it handles any pipe pacing correctly.
+async function readStdin() {
+  process.stdin.setEncoding('utf8');
+  let buf = '';
+  for await (const chunk of process.stdin) buf += chunk;
+  return buf;
+}
+
 async function main() {
   const opts = parseArgs(process.argv.slice(2));
 
@@ -89,7 +100,7 @@ async function main() {
   } else if (opts.file) {
     html = readFileSync(opts.file, 'utf8');
   } else if (!process.stdin.isTTY) {
-    html = readFileSync(0, 'utf8');
+    html = await readStdin();
   } else {
     process.stdout.write(HELP);
     process.exit(1);

package/src/render.js

@@ -1,6 +1,6 @@
 import * as flow from 'dropflow';
 import parse from 'dropflow/parse.js';
-import { createCanvas } from 'canvas';
+import { createCanvas, GlobalFonts, loadImage } from '@napi-rs/canvas';
 
 const FONTS_DIR = new URL('../assets/fonts/', import.meta.url);
 const BUNDLED_FONTS = [
@@ -12,13 +12,26 @@ const BUNDLED_FONTS = [
   'NotoSansMono-Bold.ttf',
 ];
 
-let fontsReady = false;
-function ensureFonts() {
-  if (fontsReady) return;
+let envReady = false;
+function ensureEnv() {
+  if (envReady) return;
+
+  // Tell DropFlow how to register a font and decode an image into the
+  // @napi-rs/canvas backend (default wiring in environment-node.js targets the
+  // legacy `canvas` package).
+  flow.environment.registerFont = face => {
+    const key = GlobalFonts.register(face.getBuffer(), face.uniqueFamily);
+    if (key) return () => GlobalFonts.remove(key);
+  };
+  flow.environment.createDecodedImage = async image => {
+    return await loadImage(Buffer.from(image.buffer));
+  };
+
   for (const file of BUNDLED_FONTS) {
     flow.fonts.add(flow.createFaceFromTablesSync(new URL(file, FONTS_DIR)));
   }
-  fontsReady = true;
+
+  envReady = true;
 }
 
 /**
@@ -34,7 +47,7 @@ function ensureFonts() {
  */
 export async function renderHtml(html, opts = {}) {
   const { width = 800, height = null, scale = 1, background = null } = opts;
-  ensureFonts();
+  ensureEnv();
 
   const root = parse(html);
   await flow.load(root);
@@ -60,5 +73,5 @@ export async function renderHtml(html, opts = {}) {
     ctx.fillRect(0, 0, pxWidth, pxHeight);
   }
   flow.paintToCanvas(layout, ctx);
-  return canvas.toBuffer('image/png');
+  return await canvas.encode('png');
 }