ink-sdl 0.2.1 → 0.3.0

package/dist/cli.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/cli.js

@@ -0,0 +1,437 @@
+#!/usr/bin/env node
+import {
+  createSdlStreams
+} from "./chunk-BOQYTA3S.js";
+
+// src/cli.tsx
+import { parseArgs } from "util";
+import { render } from "ink";
+
+// src/Demo/index.tsx
+import { useState, useEffect } from "react";
+import { Text, Box, useInput, Spacer, Newline } from "ink";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TIMER_INTERVAL_MS = 1e3;
+var PERCENT_MAX = 100;
+var DEFAULT_PROGRESS_WIDTH = 20;
+var SCALE_DECIMAL_PLACES = 2;
+var PROGRESS_MEM_MULTIPLIER = 0.7;
+var PROGRESS_MEM_OFFSET = 30;
+var PROGRESS_DSK_MULTIPLIER = 0.4;
+var PROGRESS_DSK_OFFSET = 60;
+var ANIMATION_WIDTH = 10;
+var ANSI_256_SAMPLE_COLORS = [196, 208, 226, 46, 51, 21, 129, 201];
+var TextStylesTab = () => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 1, children: [
+  /* @__PURE__ */ jsx(Text, { bold: true, children: "Text Styles" }),
+  /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [
+    /* @__PURE__ */ jsx(Text, { children: "Normal text" }),
+    /* @__PURE__ */ jsx(Text, { bold: true, children: "Bold text" }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Dim text" }),
+    /* @__PURE__ */ jsx(Text, { italic: true, children: "Italic text" }),
+    /* @__PURE__ */ jsx(Text, { underline: true, children: "Underlined text" }),
+    /* @__PURE__ */ jsx(Text, { strikethrough: true, children: "Strikethrough text" }),
+    /* @__PURE__ */ jsx(Text, { inverse: true, children: "Inverse text" }),
+    /* @__PURE__ */ jsx(Text, { bold: true, italic: true, underline: true, children: "Combined: bold + italic + underline" })
+  ] }),
+  /* @__PURE__ */ jsx(Text, { bold: true, children: "Emoji" }),
+  /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [
+    /* @__PURE__ */ jsx(Text, { children: "Smileys: \u{1F600} \u{1F60E} \u{1F973} \u{1F60D} \u{1F914} \u{1F634}" }),
+    /* @__PURE__ */ jsx(Text, { children: "Hands: \u{1F44B} \u{1F44D} \u{1F44E} \u{1F44F} \u{1F64C} \u270C\uFE0F" }),
+    /* @__PURE__ */ jsx(Text, { children: "Animals: \u{1F431} \u{1F436} \u{1F98A} \u{1F43B} \u{1F43C} \u{1F981}" }),
+    /* @__PURE__ */ jsx(Text, { children: "Food: \u{1F34E} \u{1F355} \u{1F354} \u{1F32E} \u{1F363} \u{1F369}" }),
+    /* @__PURE__ */ jsx(Text, { children: "Objects: \u2B50 \u{1F525} \u{1F4A1} \u{1F389} \u{1F680} \u{1F4BB}" })
+  ] })
+] });
+var BasicColorsTab = () => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 1, children: [
+  /* @__PURE__ */ jsx(Text, { bold: true, children: "ANSI 16 Colors" }),
+  /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [
+    /* @__PURE__ */ jsx(Text, { children: "Foreground:" }),
+    /* @__PURE__ */ jsxs(Box, { gap: 1, flexWrap: "wrap", children: [
+      /* @__PURE__ */ jsx(Text, { color: "black", backgroundColor: "white", children: "black" }),
+      /* @__PURE__ */ jsx(Text, { color: "red", children: "red" }),
+      /* @__PURE__ */ jsx(Text, { color: "green", children: "green" }),
+      /* @__PURE__ */ jsx(Text, { color: "yellow", children: "yellow" }),
+      /* @__PURE__ */ jsx(Text, { color: "blue", children: "blue" }),
+      /* @__PURE__ */ jsx(Text, { color: "magenta", children: "magenta" }),
+      /* @__PURE__ */ jsx(Text, { color: "cyan", children: "cyan" }),
+      /* @__PURE__ */ jsx(Text, { color: "white", children: "white" })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { gap: 1, flexWrap: "wrap", marginTop: 1, children: [
+      /* @__PURE__ */ jsx(Text, { color: "blackBright", children: "gray" }),
+      /* @__PURE__ */ jsx(Text, { color: "redBright", children: "redBright" }),
+      /* @__PURE__ */ jsx(Text, { color: "greenBright", children: "greenBright" }),
+      /* @__PURE__ */ jsx(Text, { color: "yellowBright", children: "yellowBright" }),
+      /* @__PURE__ */ jsx(Text, { color: "blueBright", children: "blueBright" }),
+      /* @__PURE__ */ jsx(Text, { color: "magentaBright", children: "magentaBright" }),
+      /* @__PURE__ */ jsx(Text, { color: "cyanBright", children: "cyanBright" }),
+      /* @__PURE__ */ jsx(Text, { color: "whiteBright", children: "whiteBright" })
+    ] }),
+    /* @__PURE__ */ jsx(Newline, {}),
+    /* @__PURE__ */ jsx(Text, { children: "Background:" }),
+    /* @__PURE__ */ jsxs(Box, { gap: 1, flexWrap: "wrap", children: [
+      /* @__PURE__ */ jsx(Text, { backgroundColor: "red", children: " red " }),
+      /* @__PURE__ */ jsx(Text, { backgroundColor: "green", children: " green " }),
+      /* @__PURE__ */ jsxs(Text, { backgroundColor: "yellow", color: "black", children: [
+        " ",
+        "yellow",
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(Text, { backgroundColor: "blue", children: " blue " }),
+      /* @__PURE__ */ jsx(Text, { backgroundColor: "magenta", children: " magenta " }),
+      /* @__PURE__ */ jsxs(Text, { backgroundColor: "cyan", color: "black", children: [
+        " ",
+        "cyan",
+        " "
+      ] })
+    ] })
+  ] })
+] });
+var ExtendedColorsTab = () => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 1, children: [
+  /* @__PURE__ */ jsx(Text, { bold: true, children: "Extended Colors" }),
+  /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [
+    /* @__PURE__ */ jsx(Text, { children: "ANSI 256 (color codes):" }),
+    /* @__PURE__ */ jsx(Box, { gap: 1, children: ANSI_256_SAMPLE_COLORS.map((code) => /* @__PURE__ */ jsxs(Text, { color: `ansi256-${code}`, children: [
+      "#",
+      code
+    ] }, code)) }),
+    /* @__PURE__ */ jsx(Newline, {}),
+    /* @__PURE__ */ jsx(Text, { children: "RGB True Color (hex):" }),
+    /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
+      /* @__PURE__ */ jsx(Text, { color: "#ff6b6b", children: "#ff6b6b" }),
+      /* @__PURE__ */ jsx(Text, { color: "#ffd93d", children: "#ffd93d" }),
+      /* @__PURE__ */ jsx(Text, { color: "#6bcb77", children: "#6bcb77" }),
+      /* @__PURE__ */ jsx(Text, { color: "#4d96ff", children: "#4d96ff" }),
+      /* @__PURE__ */ jsx(Text, { color: "#9b5de5", children: "#9b5de5" }),
+      /* @__PURE__ */ jsx(Text, { color: "#f15bb5", children: "#f15bb5" })
+    ] }),
+    /* @__PURE__ */ jsx(Newline, {}),
+    /* @__PURE__ */ jsx(Text, { children: "Gradient effect:" }),
+    /* @__PURE__ */ jsx(Box, { children: [
+      { char: "R", color: "#ff0000" },
+      { char: "A", color: "#ff7f00" },
+      { char: "I", color: "#ffff00" },
+      { char: "N", color: "#00ff00" },
+      { char: "B", color: "#0000ff" },
+      { char: "O", color: "#4b0082" },
+      { char: "W", color: "#9400d3" }
+    ].map(({ char, color }) => /* @__PURE__ */ jsx(Text, { color, children: char }, char)) })
+  ] })
+] });
+var LayoutTab = () => /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 1, children: [
+  /* @__PURE__ */ jsx(Text, { bold: true, children: "Box Layouts & Borders" }),
+  /* @__PURE__ */ jsxs(Box, { gap: 2, paddingLeft: 1, children: [
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        borderStyle: "single",
+        borderColor: "cyan",
+        paddingX: 1,
+        children: [
+          /* @__PURE__ */ jsx(Text, { children: "Single" }),
+          /* @__PURE__ */ jsx(Text, { children: "Border" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        borderStyle: "double",
+        borderColor: "yellow",
+        paddingX: 1,
+        children: [
+          /* @__PURE__ */ jsx(Text, { children: "Double" }),
+          /* @__PURE__ */ jsx(Text, { children: "Border" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        borderStyle: "round",
+        borderColor: "green",
+        paddingX: 1,
+        children: [
+          /* @__PURE__ */ jsx(Text, { children: "Round" }),
+          /* @__PURE__ */ jsx(Text, { children: "Border" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        borderStyle: "bold",
+        borderColor: "magenta",
+        paddingX: 1,
+        children: [
+          /* @__PURE__ */ jsx(Text, { children: "Bold" }),
+          /* @__PURE__ */ jsx(Text, { children: "Border" })
+        ]
+      }
+    )
+  ] }),
+  /* @__PURE__ */ jsx(Box, { paddingLeft: 1, marginTop: 1, children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      borderStyle: "single",
+      borderColor: "blue",
+      padding: 1,
+      flexDirection: "column",
+      width: 40,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", children: [
+          /* @__PURE__ */ jsx(Text, { children: "Left" }),
+          /* @__PURE__ */ jsx(Text, { children: "Right" })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { justifyContent: "center", marginY: 1, children: /* @__PURE__ */ jsx(Text, { color: "cyan", children: "Centered content" }) }),
+        /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "Nested box with padding" }) })
+      ]
+    }
+  ) })
+] });
+var ProgressBar = ({
+  value,
+  width = DEFAULT_PROGRESS_WIDTH,
+  color = "green"
+}) => {
+  const filled = Math.round(value / PERCENT_MAX * width);
+  const empty = width - filled;
+  return /* @__PURE__ */ jsxs(Text, { children: [
+    /* @__PURE__ */ jsx(Text, { color, children: "\u2588".repeat(filled) }),
+    /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2591".repeat(empty) }),
+    /* @__PURE__ */ jsxs(Text, { children: [
+      " ",
+      value.toFixed(0),
+      "%"
+    ] })
+  ] });
+};
+var DynamicTab = ({
+  elapsed,
+  progress
+}) => {
+  const spinnerFrames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+  const spinnerFrame = spinnerFrames[elapsed % spinnerFrames.length];
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", gap: 1, children: [
+    /* @__PURE__ */ jsx(Text, { bold: true, children: "Dynamic Updates" }),
+    /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [
+      /* @__PURE__ */ jsxs(Text, { children: [
+        "Elapsed: ",
+        /* @__PURE__ */ jsxs(Text, { color: "cyan", children: [
+          elapsed,
+          "s"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Text, { children: [
+        "Spinner: ",
+        /* @__PURE__ */ jsx(Text, { color: "yellow", children: spinnerFrame }),
+        " Loading..."
+      ] }),
+      /* @__PURE__ */ jsx(Newline, {}),
+      /* @__PURE__ */ jsx(Text, { children: "Progress bars:" }),
+      /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingLeft: 1, children: [
+        /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
+          /* @__PURE__ */ jsx(Text, { children: "CPU:" }),
+          /* @__PURE__ */ jsx(ProgressBar, { value: progress, color: "green" })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
+          /* @__PURE__ */ jsx(Text, { children: "MEM:" }),
+          /* @__PURE__ */ jsx(
+            ProgressBar,
+            {
+              value: (progress * PROGRESS_MEM_MULTIPLIER + PROGRESS_MEM_OFFSET) % PERCENT_MAX,
+              color: "blue"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { gap: 1, children: [
+          /* @__PURE__ */ jsx(Text, { children: "DSK:" }),
+          /* @__PURE__ */ jsx(
+            ProgressBar,
+            {
+              value: (progress * PROGRESS_DSK_MULTIPLIER + PROGRESS_DSK_OFFSET) % PERCENT_MAX,
+              color: "yellow"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Newline, {}),
+      /* @__PURE__ */ jsx(Text, { children: "Animation:" }),
+      /* @__PURE__ */ jsx(Box, { paddingLeft: 1, children: /* @__PURE__ */ jsx(Text, { color: "cyan", children: "\u25CF".padStart(elapsed % ANIMATION_WIDTH + 1, " ").padEnd(ANIMATION_WIDTH, " ") }) })
+    ] })
+  ] });
+};
+var TAB_STYLES = 0;
+var TAB_COLORS = 1;
+var TAB_EXTENDED = 2;
+var TAB_LAYOUT = 3;
+var TAB_DYNAMIC = 4;
+var MENU_ITEMS = [
+  { id: "styles", label: "Text Styles" },
+  { id: "colors", label: "Basic Colors" },
+  { id: "extended", label: "Extended Colors" },
+  { id: "layout", label: "Layouts" },
+  { id: "dynamic", label: "Dynamic" }
+];
+var DemoApp = ({ scaleFactor: scaleFactor2, cacheStats: cacheStats2 }) => {
+  const [selectedTab, setSelectedTab] = useState(0);
+  const [elapsed, setElapsed] = useState(0);
+  const [progress, setProgress] = useState(0);
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setElapsed((e) => e + 1);
+      setProgress((p) => (p + 2) % PERCENT_MAX);
+    }, TIMER_INTERVAL_MS);
+    return () => clearInterval(timer);
+  }, []);
+  useInput((input, key) => {
+    if (key.leftArrow || input === "h") {
+      setSelectedTab((t) => t > 0 ? t - 1 : MENU_ITEMS.length - 1);
+    } else if (key.rightArrow || input === "l") {
+      setSelectedTab((t) => t < MENU_ITEMS.length - 1 ? t + 1 : 0);
+    } else if (key.tab) {
+      setSelectedTab((t) => (t + 1) % MENU_ITEMS.length);
+    }
+  });
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", padding: 1, children: [
+    /* @__PURE__ */ jsxs(Box, { borderStyle: "double", borderColor: "cyan", paddingX: 2, children: [
+      /* @__PURE__ */ jsx(Text, { bold: true, color: "cyan", children: "ink-sdl Demo" }),
+      /* @__PURE__ */ jsx(Spacer, {}),
+      /* @__PURE__ */ jsxs(Text, { dimColor: true, children: [
+        "Scale: ",
+        scaleFactor2.toFixed(SCALE_DECIMAL_PLACES),
+        "x",
+        cacheStats2 ? ` | Cache: ${cacheStats2.size}/${cacheStats2.maxSize}` : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { marginY: 1, gap: 1, children: MENU_ITEMS.map(
+      (item, i) => i === selectedTab ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          borderStyle: "round",
+          borderColor: "cyan",
+          paddingX: 1,
+          children: /* @__PURE__ */ jsx(Text, { color: "cyan", bold: true, children: item.label })
+        },
+        item.id
+      ) : /* @__PURE__ */ jsx(
+        Box,
+        {
+          borderStyle: "single",
+          borderColor: "gray",
+          paddingX: 1,
+          children: /* @__PURE__ */ jsx(Text, { children: item.label })
+        },
+        item.id
+      )
+    ) }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        flexDirection: "column",
+        borderStyle: "single",
+        borderColor: "gray",
+        padding: 1,
+        minHeight: 15,
+        children: [
+          selectedTab === TAB_STYLES && /* @__PURE__ */ jsx(TextStylesTab, {}),
+          selectedTab === TAB_COLORS && /* @__PURE__ */ jsx(BasicColorsTab, {}),
+          selectedTab === TAB_EXTENDED && /* @__PURE__ */ jsx(ExtendedColorsTab, {}),
+          selectedTab === TAB_LAYOUT && /* @__PURE__ */ jsx(LayoutTab, {}),
+          selectedTab === TAB_DYNAMIC && /* @__PURE__ */ jsx(DynamicTab, { elapsed, progress })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(Text, { dimColor: true, children: "\u2190 \u2192 or h/l to switch tabs | Tab to cycle | Ctrl+C to exit" }) })
+  ] });
+};
+
+// src/cli.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DEFAULT_WIDTH = 800;
+var DEFAULT_HEIGHT = 600;
+var { values: args } = parseArgs({
+  options: {
+    title: { type: "string" },
+    width: { type: "string" },
+    height: { type: "string" },
+    font: { type: "string" },
+    "font-name": { type: "string" },
+    "font-size": { type: "string" },
+    "scale-factor": { type: "string" },
+    "system-font": { type: "boolean", default: false },
+    background: { type: "string" },
+    fullscreen: { type: "string" },
+    borderless: { type: "boolean", default: false },
+    "min-width": { type: "string" },
+    "min-height": { type: "string" },
+    help: { type: "boolean", short: "h", default: false }
+  }
+});
+if (args.help) {
+  console.log(`
+ink-sdl - Render Ink apps in SDL windows
+
+Usage: npx ink-sdl [options]
+
+Options:
+  --title <string>        Window title
+  --width <number>        Window width in pixels (default: 800)
+  --height <number>       Window height in pixels (default: 600)
+  --font <path>           Path to a custom TTF font file
+  --font-name <name>      Font name to find in system directories
+  --font-size <number>    Font size in points (default: 16)
+  --scale-factor <number> Override scale factor (auto-detect if omitted)
+  --system-font           Use system monospace font instead of Cozette
+  --background <hex>      Background color (e.g., "#1a1a2e")
+  --fullscreen <mode>     Fullscreen mode ("true" or "desktop")
+  --borderless            Remove window decorations
+  --min-width <number>    Minimum window width in pixels
+  --min-height <number>   Minimum window height in pixels
+  -h, --help              Show this help message
+
+For library usage, see: https://github.com/anthropics/ink-sdl
+`);
+  process.exit(0);
+}
+var parseFullscreen = (value) => {
+  if (value === "true") {
+    return true;
+  }
+  if (value === "desktop") {
+    return "desktop";
+  }
+  return void 0;
+};
+var sdlOptions = {
+  title: args.title ?? "ink-sdl Demo",
+  width: args.width ? parseInt(args.width, 10) : DEFAULT_WIDTH,
+  height: args.height ? parseInt(args.height, 10) : DEFAULT_HEIGHT,
+  systemFont: args["system-font"],
+  borderless: args.borderless,
+  ...args.font && { fontPath: args.font },
+  ...args["font-name"] && { fontName: args["font-name"] },
+  ...args["font-size"] && { fontSize: parseInt(args["font-size"], 10) },
+  ...args["scale-factor"] && {
+    scaleFactor: parseFloat(args["scale-factor"])
+  },
+  ...args.background && { backgroundColor: args.background },
+  ...args.fullscreen && { fullscreen: parseFullscreen(args.fullscreen) },
+  ...args["min-width"] && { minWidth: parseInt(args["min-width"], 10) },
+  ...args["min-height"] && { minHeight: parseInt(args["min-height"], 10) }
+};
+var { stdin, stdout, window, renderer } = createSdlStreams(sdlOptions);
+var scaleFactor = renderer.getScaleFactor();
+var cacheStats = window.getCacheStats();
+render(/* @__PURE__ */ jsx2(DemoApp, { scaleFactor, cacheStats }), {
+  stdin,
+  stdout
+});
+window.on("close", () => process.exit(0));
+process.on("SIGINT", () => {
+  window.close();
+  process.exit(0);
+});