@runtypelabs/ink-components 0.2.1 → 0.3.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ComponentProps } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import InkSpinner from 'ink-spinner';
 
 type InkSpinnerType = ComponentProps<typeof InkSpinner>['type'];
@@ -11,7 +11,7 @@ interface SpinnerProps {
 declare function Spinner({ label, color, type, }: SpinnerProps): react_jsx_runtime.JSX.Element;
 
 interface StatusBarProps {
-    left?: string;
+    left?: ReactNode;
     center?: string;
     right?: string;
 }
@@ -25,6 +25,11 @@ interface StreamOutputProps {
     /** Lines to scroll up from the bottom (0 = follow latest) */
     scrollOffset?: number;
 }
+/**
+ * Render raw markdown content to terminal-styled text with ANSI color codes.
+ * Uses the module-level `marked` + `marked-terminal` configuration.
+ */
+declare function renderMarkdownToTerminal(content: string): string;
 declare function StreamOutput({ content, isStreaming, enableMarkdown, maxVisibleLines, scrollOffset, }: StreamOutputProps): react_jsx_runtime.JSX.Element;
 
 interface ErrorDisplayProps {
@@ -34,18 +39,35 @@ interface ErrorDisplayProps {
 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 backgroundDeep: "#000000";
+    readonly background: "#1b212b";
+    readonly surface: "#202733";
+    readonly surfaceMuted: "#1d2430";
+    readonly surfaceElevated: "#252d3b";
+    readonly text: "#d8d3c9";
+    readonly textMuted: "#918b84";
+    readonly textSubtle: "#66625d";
+    readonly accent: "#8fc4bf";
+    readonly accentActive: "#a7d8d2";
+    readonly success: "#8ecb73";
+    readonly warning: "#d8ae63";
+    readonly danger: "#c97b73";
+    readonly border: "#394252";
+    readonly borderActive: "#546077";
+    readonly error: "#c97b73";
+    readonly info: "#8fc4bf";
+    readonly muted: "#918b84";
+    readonly primary: "#8fc4bf";
+    readonly secondary: "#a7d8d2";
+    readonly spinner: "#8fc4bf";
+    readonly progress: "#8fc4bf";
+    readonly label: "#d8d3c9";
+    readonly dimLabel: "#66625d";
     readonly highlight: "bold";
+    readonly separator: " · ";
+    readonly sectionGap: 1;
+    readonly panelPaddingX: 1;
+    readonly panelPaddingY: 0;
 };
 type Theme = typeof theme;
 
@@ -56,4 +78,4 @@ interface ToolResult {
     duration?: number;
 }
 
-export { ErrorDisplay, type ErrorDisplayProps, Spinner, type SpinnerProps, StatusBar, type StatusBarProps, StreamOutput, type StreamOutputProps, type StreamPhase, type Theme, type ToolResult, theme };
+export { ErrorDisplay, type ErrorDisplayProps, Spinner, type SpinnerProps, StatusBar, type StatusBarProps, StreamOutput, type StreamOutputProps, type StreamPhase, type Theme, type ToolResult, renderMarkdownToTerminal, theme };

package/dist/index.js

@@ -4,18 +4,35 @@ 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"
+  backgroundDeep: "#000000",
+  background: "#1b212b",
+  surface: "#202733",
+  surfaceMuted: "#1d2430",
+  surfaceElevated: "#252d3b",
+  text: "#d8d3c9",
+  textMuted: "#918b84",
+  textSubtle: "#66625d",
+  accent: "#8fc4bf",
+  accentActive: "#a7d8d2",
+  success: "#8ecb73",
+  warning: "#d8ae63",
+  danger: "#c97b73",
+  border: "#394252",
+  borderActive: "#546077",
+  error: "#c97b73",
+  info: "#8fc4bf",
+  muted: "#918b84",
+  primary: "#8fc4bf",
+  secondary: "#a7d8d2",
+  spinner: "#8fc4bf",
+  progress: "#8fc4bf",
+  label: "#d8d3c9",
+  dimLabel: "#66625d",
+  highlight: "bold",
+  separator: " \xB7 ",
+  sectionGap: 1,
+  panelPaddingX: 1,
+  panelPaddingY: 0
 };
 
 // src/components/Spinner.tsx
@@ -27,7 +44,7 @@ function Spinner({
 }) {
   return /* @__PURE__ */ jsxs(Box, { children: [
     /* @__PURE__ */ jsx(Text, { color, children: /* @__PURE__ */ jsx(InkSpinner, { type }) }),
-    /* @__PURE__ */ jsxs(Text, { children: [
+    /* @__PURE__ */ jsxs(Text, { color: theme.textMuted, children: [
       " ",
       label
     ] })
@@ -38,22 +55,111 @@ function Spinner({
 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 }) })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    Box2,
+    {
+      borderStyle: "single",
+      borderColor: theme.border,
+      backgroundColor: theme.background,
+      paddingX: theme.panelPaddingX,
+      paddingY: theme.panelPaddingY,
+      children: [
+        /* @__PURE__ */ jsx2(Box2, { flexGrow: 1, children: typeof left === "string" ? /* @__PURE__ */ jsx2(Text2, { color: theme.textMuted, children: left }) : left }),
+        center && /* @__PURE__ */ jsx2(Box2, { flexGrow: 1, justifyContent: "center", children: /* @__PURE__ */ jsx2(Text2, { color: theme.accent, children: center }) }),
+        right && /* @__PURE__ */ jsx2(Box2, { children: /* @__PURE__ */ jsx2(Text2, { color: theme.textSubtle, children: right }) })
+      ]
+    }
+  );
 }
 
 // src/components/StreamOutput.tsx
 import { useMemo } from "react";
 import { Box as Box3, Text as Text3 } from "ink";
+import chalk from "chalk";
 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());
+var bodyText = chalk.hex(theme.text);
+var mutedText = chalk.hex(theme.textMuted);
+var subtleText = chalk.hex(theme.textSubtle);
+var accentText = chalk.hex(theme.accent);
+var accentActiveText = chalk.hex(theme.accentActive);
+var successText = chalk.hex(theme.success);
+var warningText = chalk.hex(theme.warning);
+var dangerText = chalk.hex(theme.danger);
+var markdownHighlightTheme = {
+  default: bodyText,
+  keyword: accentText,
+  built_in: accentActiveText,
+  type: accentActiveText,
+  literal: accentText,
+  number: successText,
+  regexp: warningText,
+  string: bodyText,
+  subst: accentText,
+  symbol: bodyText,
+  class: accentActiveText,
+  function: accentActiveText,
+  title: accentActiveText,
+  params: mutedText,
+  comment: subtleText,
+  doctag: subtleText,
+  meta: subtleText,
+  "meta-keyword": accentText,
+  "meta-string": mutedText,
+  section: accentText,
+  tag: accentText,
+  name: accentActiveText,
+  "builtin-name": accentActiveText,
+  attr: accentText,
+  attribute: accentText,
+  variable: accentActiveText,
+  bullet: mutedText,
+  code: successText,
+  emphasis: accentText,
+  strong: accentActiveText,
+  formula: accentText,
+  link: accentActiveText,
+  quote: mutedText,
+  addition: successText,
+  deletion: dangerText
+};
+marked.use(
+  markedTerminal(
+    {
+      code: successText,
+      blockquote: mutedText,
+      html: subtleText,
+      heading: accentText,
+      firstHeading: accentActiveText.bold,
+      hr: subtleText,
+      listitem: bodyText,
+      list: (body) => bodyText(body),
+      table: mutedText,
+      paragraph: bodyText,
+      strong: accentActiveText.bold,
+      em: accentText.italic,
+      codespan: successText,
+      del: subtleText.strikethrough,
+      link: accentActiveText,
+      href: mutedText.underline,
+      text: bodyText,
+      showSectionPrefix: false,
+      reflowText: false
+    },
+    {
+      ignoreIllegals: true,
+      theme: markdownHighlightTheme
+    }
+  )
+);
+function renderMarkdownToTerminal(content) {
+  const stripped = stripAnsi(content);
+  if (!stripped) return "";
+  return marked.parse(stripped).trimEnd();
+}
 function StreamOutput({
   content,
   isStreaming,
@@ -79,8 +185,8 @@ function StreamOutput({
     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" }) }) })
+    visible && /* @__PURE__ */ jsx3(Text3, { color: theme.text, children: visible }),
+    isStreaming && /* @__PURE__ */ jsx3(Box3, { children: /* @__PURE__ */ jsx3(Text3, { color: theme.textMuted, children: /* @__PURE__ */ jsx3(InkSpinner2, { type: "dots" }) }) })
   ] });
 }
 
@@ -90,14 +196,14 @@ 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: [
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", marginTop: theme.sectionGap, children: [
+    /* @__PURE__ */ jsxs4(Text4, { color: theme.danger, bold: true, children: [
       "Error",
       context ? ` ${context}` : "",
       ": ",
       message
     ] }),
-    cause && /* @__PURE__ */ jsxs4(Text4, { color: theme.muted, children: [
+    cause && /* @__PURE__ */ jsxs4(Text4, { color: theme.textMuted, children: [
       "Cause: ",
       cause
     ] })
@@ -108,6 +214,7 @@ export {
   Spinner,
   StatusBar,
   StreamOutput,
+  renderMarkdownToTerminal,
   theme
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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":"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","names":["Box","Text","jsx","jsxs","Box","Text","Box","Text","InkSpinner","jsx","jsxs","Box","Text","InkSpinner","Box","Text","jsxs","Box","Text"]}
+{"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 color={theme.textMuted}> {label}</Text>\n    </Box>\n  )\n}\n","export const theme = {\n  backgroundDeep: '#000000',\n  background: '#1b212b',\n  surface: '#202733',\n  surfaceMuted: '#1d2430',\n  surfaceElevated: '#252d3b',\n  text: '#d8d3c9',\n  textMuted: '#918b84',\n  textSubtle: '#66625d',\n  accent: '#8fc4bf',\n  accentActive: '#a7d8d2',\n  success: '#8ecb73',\n  warning: '#d8ae63',\n  danger: '#c97b73',\n  border: '#394252',\n  borderActive: '#546077',\n  error: '#c97b73',\n  info: '#8fc4bf',\n  muted: '#918b84',\n  primary: '#8fc4bf',\n  secondary: '#a7d8d2',\n  spinner: '#8fc4bf',\n  progress: '#8fc4bf',\n  label: '#d8d3c9',\n  dimLabel: '#66625d',\n  highlight: 'bold',\n  separator: ' · ',\n  sectionGap: 1,\n  panelPaddingX: 1,\n  panelPaddingY: 0,\n} as const\n\nexport type Theme = typeof theme\n","import type { ReactNode } from 'react'\nimport { Box, Text } from 'ink'\nimport { theme } from '../theme.js'\n\nexport interface StatusBarProps {\n  left?: ReactNode\n  center?: string\n  right?: string\n}\n\nexport function StatusBar({ left, center, right }: StatusBarProps) {\n  return (\n    <Box\n      borderStyle=\"single\"\n      borderColor={theme.border}\n      backgroundColor={theme.background}\n      paddingX={theme.panelPaddingX}\n      paddingY={theme.panelPaddingY}\n    >\n      <Box flexGrow={1}>\n        {typeof left === 'string' ? (\n          <Text color={theme.textMuted}>{left}</Text>\n        ) : (\n          left\n        )}\n      </Box>\n      {center && (\n        <Box flexGrow={1} justifyContent=\"center\">\n          <Text color={theme.accent}>{center}</Text>\n        </Box>\n      )}\n      {right && (\n        <Box>\n          <Text color={theme.textSubtle}>{right}</Text>\n        </Box>\n      )}\n    </Box>\n  )\n}\n","import { useMemo } from 'react'\nimport { Box, Text } from 'ink'\nimport chalk from 'chalk'\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\nconst bodyText = chalk.hex(theme.text)\nconst mutedText = chalk.hex(theme.textMuted)\nconst subtleText = chalk.hex(theme.textSubtle)\nconst accentText = chalk.hex(theme.accent)\nconst accentActiveText = chalk.hex(theme.accentActive)\nconst successText = chalk.hex(theme.success)\nconst warningText = chalk.hex(theme.warning)\nconst dangerText = chalk.hex(theme.danger)\n\nconst markdownHighlightTheme = {\n  default: bodyText,\n  keyword: accentText,\n  built_in: accentActiveText,\n  type: accentActiveText,\n  literal: accentText,\n  number: successText,\n  regexp: warningText,\n  string: bodyText,\n  subst: accentText,\n  symbol: bodyText,\n  class: accentActiveText,\n  function: accentActiveText,\n  title: accentActiveText,\n  params: mutedText,\n  comment: subtleText,\n  doctag: subtleText,\n  meta: subtleText,\n  'meta-keyword': accentText,\n  'meta-string': mutedText,\n  section: accentText,\n  tag: accentText,\n  name: accentActiveText,\n  'builtin-name': accentActiveText,\n  attr: accentText,\n  attribute: accentText,\n  variable: accentActiveText,\n  bullet: mutedText,\n  code: successText,\n  emphasis: accentText,\n  strong: accentActiveText,\n  formula: accentText,\n  link: accentActiveText,\n  quote: mutedText,\n  addition: successText,\n  deletion: dangerText,\n} as const\n\n// Configure marked with terminal renderer once at module level.\nmarked.use(\n  markedTerminal(\n    {\n      code: successText,\n      blockquote: mutedText,\n      html: subtleText,\n      heading: accentText,\n      firstHeading: accentActiveText.bold,\n      hr: subtleText,\n      listitem: bodyText,\n      list: (body: string) => bodyText(body),\n      table: mutedText,\n      paragraph: bodyText,\n      strong: accentActiveText.bold,\n      em: accentText.italic,\n      codespan: successText,\n      del: subtleText.strikethrough,\n      link: accentActiveText,\n      href: mutedText.underline,\n      text: bodyText,\n      showSectionPrefix: false,\n      reflowText: false,\n    },\n    {\n      ignoreIllegals: true,\n      theme: markdownHighlightTheme,\n    }\n  ) as MarkedExtension\n)\n\n/**\n * Render raw markdown content to terminal-styled text with ANSI color codes.\n * Uses the module-level `marked` + `marked-terminal` configuration.\n */\nexport function renderMarkdownToTerminal(content: string): string {\n  const stripped = stripAnsi(content)\n  if (!stripped) return ''\n  return (marked.parse(stripped) as string).trimEnd()\n}\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 color={theme.text}>{visible}</Text>}\n      {isStreaming && (\n        <Box>\n          <Text color={theme.textMuted}>\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\" marginTop={theme.sectionGap}>\n      <Text color={theme.danger} bold>\n        Error{context ? ` ${context}` : ''}: {message}\n      </Text>\n      {cause && <Text color={theme.textMuted}>Cause: {cause}</Text>}\n    </Box>\n  )\n}\n"],"mappings":"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","names":["Box","Text","jsx","jsxs","Box","Text","Box","Text","InkSpinner","jsx","jsxs","Box","Text","InkSpinner","Box","Text","jsxs","Box","Text"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/ink-components",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Shared Ink (React for CLI) components for the Runtype CLI — spinners, status bars, streaming output, and error displays.",
   "license": "MIT",
   "author": "Runtype Labs",
@@ -23,11 +23,11 @@
     "ink-spinner": "5.0.0",
     "marked": "^17.0.3",
     "marked-terminal": "^7.0.0",
-    "react": "^19.2.0",
+    "react": "^19.2.4",
     "strip-ansi": "^7.2.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.0",
+    "@types/react": "^19.2.14",
     "ink-testing-library": "4.0.0",
     "tsup": "^8.0.2",
     "typescript": "^5.3.3",