@runtypelabs/ink-components 0.1.0 → 0.2.1

package/dist/index.d.ts

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentProps } from 'react';
+import InkSpinner from 'ink-spinner';
+
+type InkSpinnerType = ComponentProps<typeof InkSpinner>['type'];
+interface SpinnerProps {
+    label?: string;
+    color?: string;
+    type?: InkSpinnerType;
+}
+declare function Spinner({ label, color, type, }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+interface StatusBarProps {
+    left?: string;
+    center?: string;
+    right?: string;
+}
+declare function StatusBar({ left, center, right }: StatusBarProps): react_jsx_runtime.JSX.Element;
+
+interface StreamOutputProps {
+    content: string;
+    isStreaming: boolean;
+    enableMarkdown?: boolean;
+    maxVisibleLines?: number;
+    /** Lines to scroll up from the bottom (0 = follow latest) */
+    scrollOffset?: number;
+}
+declare function StreamOutput({ content, isStreaming, enableMarkdown, maxVisibleLines, scrollOffset, }: StreamOutputProps): react_jsx_runtime.JSX.Element;
+
+interface ErrorDisplayProps {
+    error: Error | string;
+    context?: string;
+}
+declare function ErrorDisplay({ error, context }: ErrorDisplayProps): react_jsx_runtime.JSX.Element;
+
+declare const theme: {
+    readonly error: "red";
+    readonly success: "green";
+    readonly warning: "yellow";
+    readonly info: "cyan";
+    readonly muted: "gray";
+    readonly primary: "cyan";
+    readonly secondary: "blue";
+    readonly spinner: "green";
+    readonly progress: "cyan";
+    readonly label: "white";
+    readonly dimLabel: "gray";
+    readonly highlight: "bold";
+};
+type Theme = typeof theme;
+
+type StreamPhase = 'idle' | 'thinking' | 'streaming' | 'tool' | 'complete' | 'error';
+interface ToolResult {
+    name: string;
+    status: 'running' | 'complete' | 'error';
+    duration?: number;
+}
+
+export { ErrorDisplay, type ErrorDisplayProps, Spinner, type SpinnerProps, StatusBar, type StatusBarProps, StreamOutput, type StreamOutputProps, type StreamPhase, type Theme, type ToolResult, theme };

package/dist/index.js

@@ -0,0 +1,113 @@
+// src/components/Spinner.tsx
+import { Box, Text } from "ink";
+import InkSpinner from "ink-spinner";
+
+// src/theme.ts
+var theme = {
+  error: "red",
+  success: "green",
+  warning: "yellow",
+  info: "cyan",
+  muted: "gray",
+  primary: "cyan",
+  secondary: "blue",
+  spinner: "green",
+  progress: "cyan",
+  label: "white",
+  dimLabel: "gray",
+  highlight: "bold"
+};
+
+// src/components/Spinner.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Spinner({
+  label = "Loading...",
+  color = theme.spinner,
+  type = "dots"
+}) {
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Text, { color, children: /* @__PURE__ */ jsx(InkSpinner, { type }) }),
+    /* @__PURE__ */ jsxs(Text, { children: [
+      " ",
+      label
+    ] })
+  ] });
+}
+
+// src/components/StatusBar.tsx
+import { Box as Box2, Text as Text2 } from "ink";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function StatusBar({ left, center, right }) {
+  return /* @__PURE__ */ jsxs2(Box2, { borderStyle: "single", borderColor: theme.muted, paddingX: 1, children: [
+    /* @__PURE__ */ jsx2(Box2, { flexGrow: 1, children: /* @__PURE__ */ jsx2(Text2, { color: theme.dimLabel, children: left }) }),
+    center && /* @__PURE__ */ jsx2(Box2, { flexGrow: 1, justifyContent: "center", children: /* @__PURE__ */ jsx2(Text2, { color: theme.info, children: center }) }),
+    right && /* @__PURE__ */ jsx2(Box2, { children: /* @__PURE__ */ jsx2(Text2, { color: theme.dimLabel, children: right }) })
+  ] });
+}
+
+// src/components/StreamOutput.tsx
+import { useMemo } from "react";
+import { Box as Box3, Text as Text3 } from "ink";
+import InkSpinner2 from "ink-spinner";
+import { marked } from "marked";
+import { markedTerminal } from "marked-terminal";
+import stripAnsi from "strip-ansi";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+marked.use(markedTerminal());
+function StreamOutput({
+  content,
+  isStreaming,
+  enableMarkdown = true,
+  maxVisibleLines,
+  scrollOffset = 0
+}) {
+  const rendered = useMemo(() => {
+    const stripped = stripAnsi(content);
+    if (!stripped) return "";
+    if (enableMarkdown) {
+      return marked.parse(stripped).trimEnd();
+    }
+    return stripped;
+  }, [content, enableMarkdown]);
+  const visible = useMemo(() => {
+    if (!maxVisibleLines) return rendered;
+    const lines = rendered.split("\n");
+    const totalLines = lines.length;
+    const clampedOffset = Math.min(scrollOffset, Math.max(0, totalLines - maxVisibleLines));
+    const end = totalLines - clampedOffset;
+    const start = Math.max(0, end - maxVisibleLines);
+    return lines.slice(start, end).join("\n");
+  }, [rendered, maxVisibleLines, scrollOffset]);
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
+    visible && /* @__PURE__ */ jsx3(Text3, { children: visible }),
+    isStreaming && /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsx3(Text3, { color: theme.muted, children: /* @__PURE__ */ jsx3(InkSpinner2, { type: "dots" }) }) })
+  ] });
+}
+
+// src/components/ErrorDisplay.tsx
+import { Box as Box4, Text as Text4 } from "ink";
+import { jsxs as jsxs4 } from "react/jsx-runtime";
+function ErrorDisplay({ error, context }) {
+  const message = error instanceof Error ? error.message : error;
+  const cause = error instanceof Error && error.cause ? String(error.cause) : void 0;
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsxs4(Text4, { color: theme.error, bold: true, children: [
+      "Error",
+      context ? ` ${context}` : "",
+      ": ",
+      message
+    ] }),
+    cause && /* @__PURE__ */ jsxs4(Text4, { color: theme.muted, children: [
+      "Cause: ",
+      cause
+    ] })
+  ] });
+}
+export {
+  ErrorDisplay,
+  Spinner,
+  StatusBar,
+  StreamOutput,
+  theme
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Spinner.tsx","../src/theme.ts","../src/components/StatusBar.tsx","../src/components/StreamOutput.tsx","../src/components/ErrorDisplay.tsx"],"sourcesContent":["import type { ComponentProps } from 'react'\nimport { Box, Text } from 'ink'\nimport InkSpinner from 'ink-spinner'\nimport { theme } from '../theme.js'\n\ntype InkSpinnerType = ComponentProps<typeof InkSpinner>['type']\n\nexport interface SpinnerProps {\n  label?: string\n  color?: string\n  type?: InkSpinnerType\n}\n\nexport function Spinner({\n  label = 'Loading...',\n  color = theme.spinner,\n  type = 'dots',\n}: SpinnerProps) {\n  return (\n    <Box>\n      <Text color={color}>\n        <InkSpinner type={type} />\n      </Text>\n      <Text> {label}</Text>\n    </Box>\n  )\n}\n","export const theme = {\n  error: 'red',\n  success: 'green',\n  warning: 'yellow',\n  info: 'cyan',\n  muted: 'gray',\n  primary: 'cyan',\n  secondary: 'blue',\n  spinner: 'green',\n  progress: 'cyan',\n  label: 'white',\n  dimLabel: 'gray',\n  highlight: 'bold',\n} as const\n\nexport type Theme = typeof theme\n","import { Box, Text } from 'ink'\nimport { theme } from '../theme.js'\n\nexport interface StatusBarProps {\n  left?: string\n  center?: string\n  right?: string\n}\n\nexport function StatusBar({ left, center, right }: StatusBarProps) {\n  return (\n    <Box borderStyle=\"single\" borderColor={theme.muted} paddingX={1}>\n      <Box flexGrow={1}>\n        <Text color={theme.dimLabel}>{left}</Text>\n      </Box>\n      {center && (\n        <Box flexGrow={1} justifyContent=\"center\">\n          <Text color={theme.info}>{center}</Text>\n        </Box>\n      )}\n      {right && (\n        <Box>\n          <Text color={theme.dimLabel}>{right}</Text>\n        </Box>\n      )}\n    </Box>\n  )\n}\n","import { useMemo } from 'react'\nimport { Box, Text } from 'ink'\nimport InkSpinner from 'ink-spinner'\nimport { type MarkedExtension, marked } from 'marked'\n// @ts-expect-error marked-terminal has no type declarations\nimport { markedTerminal } from 'marked-terminal'\nimport stripAnsi from 'strip-ansi'\nimport { theme } from '../theme.js'\n\nexport interface StreamOutputProps {\n  content: string\n  isStreaming: boolean\n  enableMarkdown?: boolean\n  maxVisibleLines?: number\n  /** Lines to scroll up from the bottom (0 = follow latest) */\n  scrollOffset?: number\n}\n\n// Configure marked with terminal renderer once at module level\nmarked.use(markedTerminal() as MarkedExtension)\n\nexport function StreamOutput({\n  content,\n  isStreaming,\n  enableMarkdown = true,\n  maxVisibleLines,\n  scrollOffset = 0,\n}: StreamOutputProps) {\n  const rendered = useMemo(() => {\n    // Strip incoming ANSI codes, then re-render via marked-terminal if enabled\n    const stripped = stripAnsi(content)\n    if (!stripped) return ''\n    if (enableMarkdown) {\n      return (marked.parse(stripped) as string).trimEnd()\n    }\n    return stripped\n  }, [content, enableMarkdown])\n\n  // Window to N lines with optional scroll offset from bottom\n  const visible = useMemo(() => {\n    if (!maxVisibleLines) return rendered\n    const lines = rendered.split('\\n')\n    const totalLines = lines.length\n    const clampedOffset = Math.min(scrollOffset, Math.max(0, totalLines - maxVisibleLines))\n    const end = totalLines - clampedOffset\n    const start = Math.max(0, end - maxVisibleLines)\n    return lines.slice(start, end).join('\\n')\n  }, [rendered, maxVisibleLines, scrollOffset])\n\n  return (\n    <Box flexDirection=\"column\">\n      {visible && <Text>{visible}</Text>}\n      {isStreaming && (\n        <Box>\n          <Text color={theme.muted}>\n            <InkSpinner type=\"dots\" />\n          </Text>\n        </Box>\n      )}\n    </Box>\n  )\n}\n","import { Box, Text } from 'ink'\nimport { theme } from '../theme.js'\n\nexport interface ErrorDisplayProps {\n  error: Error | string\n  context?: string\n}\n\nexport function ErrorDisplay({ error, context }: ErrorDisplayProps) {\n  const message = error instanceof Error ? error.message : error\n  const cause =\n    error instanceof Error && error.cause ? String(error.cause) : undefined\n\n  return (\n    <Box flexDirection=\"column\">\n      <Text color={theme.error} bold>\n        Error{context ? ` ${context}` : ''}: {message}\n      </Text>\n      {cause && <Text color={theme.muted}>Cause: {cause}</Text>}\n    </Box>\n  )\n}\n"],"mappings":";AACA,SAAS,KAAK,YAAY;AAC1B,OAAO,gBAAgB;;;ACFhB,IAAM,QAAQ;AAAA,EACnB,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,UAAU;AAAA,EACV,OAAO;AAAA,EACP,UAAU;AAAA,EACV,WAAW;AACb;;;ADQQ,cAEF,YAFE;AARD,SAAS,QAAQ;AAAA,EACtB,QAAQ;AAAA,EACR,QAAQ,MAAM;AAAA,EACd,OAAO;AACT,GAAiB;AACf,SACE,qBAAC,OACC;AAAA,wBAAC,QAAK,OACJ,8BAAC,cAAW,MAAY,GAC1B;AAAA,IACA,qBAAC,QAAK;AAAA;AAAA,MAAE;AAAA,OAAM;AAAA,KAChB;AAEJ;;;AE1BA,SAAS,OAAAA,MAAK,QAAAC,aAAY;AAWtB,SAEI,OAAAC,MAFJ,QAAAC,aAAA;AAFG,SAAS,UAAU,EAAE,MAAM,QAAQ,MAAM,GAAmB;AACjE,SACE,gBAAAA,MAACC,MAAA,EAAI,aAAY,UAAS,aAAa,MAAM,OAAO,UAAU,GAC5D;AAAA,oBAAAF,KAACE,MAAA,EAAI,UAAU,GACb,0BAAAF,KAACG,OAAA,EAAK,OAAO,MAAM,UAAW,gBAAK,GACrC;AAAA,IACC,UACC,gBAAAH,KAACE,MAAA,EAAI,UAAU,GAAG,gBAAe,UAC/B,0BAAAF,KAACG,OAAA,EAAK,OAAO,MAAM,MAAO,kBAAO,GACnC;AAAA,IAED,SACC,gBAAAH,KAACE,MAAA,EACC,0BAAAF,KAACG,OAAA,EAAK,OAAO,MAAM,UAAW,iBAAM,GACtC;AAAA,KAEJ;AAEJ;;;AC3BA,SAAS,eAAe;AACxB,SAAS,OAAAC,MAAK,QAAAC,aAAY;AAC1B,OAAOC,iBAAgB;AACvB,SAA+B,cAAc;AAE7C,SAAS,sBAAsB;AAC/B,OAAO,eAAe;AA4ClB,SACc,OAAAC,MADd,QAAAC,aAAA;AA/BJ,OAAO,IAAI,eAAe,CAAoB;AAEvC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,eAAe;AACjB,GAAsB;AACpB,QAAM,WAAW,QAAQ,MAAM;AAE7B,UAAM,WAAW,UAAU,OAAO;AAClC,QAAI,CAAC,SAAU,QAAO;AACtB,QAAI,gBAAgB;AAClB,aAAQ,OAAO,MAAM,QAAQ,EAAa,QAAQ;AAAA,IACpD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,SAAS,cAAc,CAAC;AAG5B,QAAM,UAAU,QAAQ,MAAM;AAC5B,QAAI,CAAC,gBAAiB,QAAO;AAC7B,UAAM,QAAQ,SAAS,MAAM,IAAI;AACjC,UAAM,aAAa,MAAM;AACzB,UAAM,gBAAgB,KAAK,IAAI,cAAc,KAAK,IAAI,GAAG,aAAa,eAAe,CAAC;AACtF,UAAM,MAAM,aAAa;AACzB,UAAM,QAAQ,KAAK,IAAI,GAAG,MAAM,eAAe;AAC/C,WAAO,MAAM,MAAM,OAAO,GAAG,EAAE,KAAK,IAAI;AAAA,EAC1C,GAAG,CAAC,UAAU,iBAAiB,YAAY,CAAC;AAE5C,SACE,gBAAAA,MAACC,MAAA,EAAI,eAAc,UAChB;AAAA,eAAW,gBAAAF,KAACG,OAAA,EAAM,mBAAQ;AAAA,IAC1B,eACC,gBAAAH,KAACE,MAAA,EACC,0BAAAF,KAACG,OAAA,EAAK,OAAO,MAAM,OACjB,0BAAAH,KAACI,aAAA,EAAW,MAAK,QAAO,GAC1B,GACF;AAAA,KAEJ;AAEJ;;;AC7DA,SAAS,OAAAC,MAAK,QAAAC,aAAY;AAepB,iBAAAC,aAAA;AAPC,SAAS,aAAa,EAAE,OAAO,QAAQ,GAAsB;AAClE,QAAM,UAAU,iBAAiB,QAAQ,MAAM,UAAU;AACzD,QAAM,QACJ,iBAAiB,SAAS,MAAM,QAAQ,OAAO,MAAM,KAAK,IAAI;AAEhE,SACE,gBAAAA,MAACC,MAAA,EAAI,eAAc,UACjB;AAAA,oBAAAD,MAACE,OAAA,EAAK,OAAO,MAAM,OAAO,MAAI,MAAC;AAAA;AAAA,MACvB,UAAU,IAAI,OAAO,KAAK;AAAA,MAAG;AAAA,MAAG;AAAA,OACxC;AAAA,IACC,SAAS,gBAAAF,MAACE,OAAA,EAAK,OAAO,MAAM,OAAO;AAAA;AAAA,MAAQ;AAAA,OAAM;AAAA,KACpD;AAEJ;","names":["Box","Text","jsx","jsxs","Box","Text","Box","Text","InkSpinner","jsx","jsxs","Box","Text","InkSpinner","Box","Text","jsxs","Box","Text"]}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@runtypelabs/ink-components",
-  "version": "0.1.0",
-  "description": "",
+  "version": "0.2.1",
+  "description": "Shared Ink (React for CLI) components for the Runtype CLI — spinners, status bars, streaming output, and error displays.",
   "license": "MIT",
-  "author": "",
+  "author": "Runtype Labs",
   "type": "module",
   "exports": {
     ".": {
@@ -13,18 +13,10 @@
   },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "directories": {
-    "test": "tests"
-  },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
-  "scripts": {
-    "build": "tsup",
-    "test": "vitest run",
-    "type-check": "tsc --noEmit",
-    "dev": "tsup --watch"
-  },
   "dependencies": {
     "chalk": "^5.3.0",
     "ink": "6.7.0",
@@ -32,7 +24,7 @@
     "marked": "^17.0.3",
     "marked-terminal": "^7.0.0",
     "react": "^19.2.0",
-    "strip-ansi": "^7.1.0"
+    "strip-ansi": "^7.2.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",
@@ -41,7 +33,35 @@
     "typescript": "^5.3.3",
     "vitest": "^4.0.18"
   },
+  "keywords": [
+    "runtype",
+    "ink",
+    "cli",
+    "react",
+    "terminal",
+    "components",
+    "tui"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/runtypelabs/core",
+    "directory": "packages/ink-components"
+  },
+  "homepage": "https://runtype.com",
+  "bugs": {
+    "url": "https://github.com/runtypelabs/core/issues"
+  },
   "publishConfig": {
     "access": "public"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "type-check": "tsc --noEmit",
+    "dev": "tsup --watch"
   }
-}
+}