@outfitter/tui 0.2.0

package/dist/shared/@outfitter/tui-5pb72vf9.js

@@ -0,0 +1,51 @@
+// @bun
+// packages/tui/src/render/spinner.ts
+var SPINNERS = {
+  dots: {
+    frames: ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"],
+    interval: 80
+  },
+  line: {
+    frames: ["-", "\\", "|", "/"],
+    interval: 100
+  },
+  arc: {
+    frames: ["\u25DC", "\u25DD", "\u25DE", "\u25DF"],
+    interval: 100
+  },
+  circle: {
+    frames: ["\u25D0", "\u25D3", "\u25D1", "\u25D2"],
+    interval: 100
+  },
+  bounce: {
+    frames: ["\u2801", "\u2802", "\u2804", "\u2802"],
+    interval: 120
+  },
+  ping: {
+    frames: [
+      "(\u25CF    )",
+      "( \u25CF   )",
+      "(  \u25CF  )",
+      "(   \u25CF )",
+      "(    \u25CF)",
+      "(   \u25CF )",
+      "(  \u25CF  )",
+      "( \u25CF   )"
+    ],
+    interval: 80
+  }
+};
+function getSpinnerFrame(style, elapsed) {
+  const spinner = SPINNERS[style];
+  const frameIndex = Math.floor(elapsed / spinner.interval) % spinner.frames.length;
+  return spinner.frames[frameIndex] ?? spinner.frames[0] ?? "...";
+}
+function renderSpinner(style, message) {
+  const frame = getSpinnerFrame(style, 0);
+  if (message && message.length > 0) {
+    return `${frame} ${message}`;
+  }
+  return frame;
+}
+
+export { SPINNERS, getSpinnerFrame, renderSpinner };

package/dist/shared/@outfitter/tui-6605wa2j.js

@@ -0,0 +1,127 @@
+// @bun
+import {
+  getExample
+} from "./tui-nprd7g0d.js";
+import {
+  demoSection
+} from "./tui-733asbd8.js";
+import {
+  getThemeMethodsByCategory
+} from "./tui-nr580mbv.js";
+
+// packages/tui/src/demo/renderers/colors.ts
+import {
+  ANSI,
+  applyColor,
+  createTokens,
+  resolveTokenColorEnabled
+} from "@outfitter/cli/colors";
+import { hasNoColorEnv, resolveForceColorEnv } from "@outfitter/cli/terminal";
+function renderColorsDemo(config, theme) {
+  const showCode = config.showCode ?? true;
+  const tokens = createTokens();
+  const colorEnabled = resolveTokenColorEnabled();
+  const lines = [];
+  lines.push(demoSection("Theme Colors (createTheme)", { case: "none" }));
+  lines.push("");
+  if (showCode) {
+    lines.push('import { createTheme } from "@outfitter/tui/render";');
+    lines.push("const theme = createTheme();");
+    lines.push("");
+  }
+  const { semantic } = getThemeMethodsByCategory();
+  for (const method of semantic) {
+    const text = getExample(method, config.examples);
+    const fn = theme[method];
+    const output = fn(text);
+    const code = `theme.${method}("${text}")`;
+    lines.push(`${code.padEnd(42)} \u2192 ${output}`);
+  }
+  lines.push("");
+  lines.push(demoSection("Utility Methods"));
+  lines.push("");
+  const { utility } = getThemeMethodsByCategory();
+  for (const method of utility) {
+    const text = getExample(method, config.examples);
+    const fn = theme[method];
+    const output = fn(text);
+    const code = `theme.${method}("${text}")`;
+    lines.push(`${code.padEnd(42)} \u2192 ${output}`);
+  }
+  lines.push("");
+  lines.push(demoSection("Direct Colors (applyColor)", { case: "none" }));
+  lines.push("");
+  if (showCode) {
+    lines.push('import { applyColor } from "@outfitter/tui/render";');
+    lines.push("");
+  }
+  const colors = [
+    "green",
+    "yellow",
+    "red",
+    "blue",
+    "cyan",
+    "magenta",
+    "gray"
+  ];
+  for (const color of colors) {
+    const code = `applyColor("text", "${color}")`;
+    const output = applyColor("text", color);
+    lines.push(`${code.padEnd(32)} \u2192 ${output}`);
+  }
+  lines.push("");
+  lines.push(demoSection("Raw Tokens (createTokens)", { case: "none" }));
+  lines.push("");
+  if (showCode) {
+    lines.push('import { createTokens, ANSI } from "@outfitter/tui/render";');
+    lines.push("const t = createTokens();");
+    lines.push("");
+  }
+  const d = "$";
+  const tokenExamples = [
+    {
+      code: `\`${d}{t.success}Done${d}{ANSI.reset}\``,
+      token: tokens.success,
+      text: "Done"
+    },
+    {
+      code: `\`${d}{t.error}Fail${d}{ANSI.reset}\``,
+      token: tokens.error,
+      text: "Fail"
+    },
+    {
+      code: `\`${d}{t.warning}Warn${d}{ANSI.reset}\``,
+      token: tokens.warning,
+      text: "Warn"
+    },
+    {
+      code: `\`${d}{t.info}Info${d}{ANSI.reset}\``,
+      token: tokens.info,
+      text: "Info"
+    }
+  ];
+  for (const example of tokenExamples) {
+    const reset = example.token ? ANSI.reset : "";
+    const output = `${example.token}${example.text}${reset}`;
+    lines.push(`${example.code.padEnd(36)} \u2192 ${output}`);
+  }
+  lines.push("");
+  lines.push(demoSection("Environment"));
+  const noColor = hasNoColorEnv();
+  const forceColor = resolveForceColorEnv();
+  let forceColorDisplay;
+  if (forceColor === true) {
+    forceColorDisplay = theme.success("enabled");
+  } else if (forceColor === false) {
+    forceColorDisplay = theme.error("disabled");
+  } else {
+    forceColorDisplay = theme.muted("not set");
+  }
+  lines.push(`Colors: ${colorEnabled ? theme.success("enabled") : theme.muted("disabled")} ${theme.muted(colorEnabled ? "(TTY detected)" : "(non-TTY or NO_COLOR set)")}`);
+  lines.push(`NO_COLOR: ${noColor ? theme.warning("set") : theme.muted("not set")}`);
+  lines.push(`FORCE_COLOR: ${forceColorDisplay}`);
+  return lines.join(`
+`);
+}
+
+export { renderColorsDemo };

package/dist/shared/@outfitter/tui-6ptks7jj.js

@@ -0,0 +1,19 @@
+// @bun
+// packages/tui/src/prompt/validators.ts
+var validators = {
+  required: (message = "Required") => (value) => value.length > 0 ? undefined : message,
+  minLength: (length, message) => (value) => value.length >= length ? undefined : message ?? `Minimum ${length} characters`,
+  maxLength: (length, message) => (value) => value.length <= length ? undefined : message ?? `Maximum ${length} characters`,
+  pattern: (regex, message) => (value) => regex.test(value) ? undefined : message,
+  email: (message = "Invalid email") => validators.pattern(/^[^\s@]+@[^\s@]+\.[^\s@]+$/, message),
+  compose: (...fns) => (value) => {
+    for (const fn of fns) {
+      const error = fn(value);
+      if (error)
+        return error;
+    }
+    return;
+  }
+};
+
+export { validators };

package/dist/shared/@outfitter/tui-6svngg69.js

@@ -0,0 +1,126 @@
+// @bun
+import {
+  demoSection
+} from "./tui-733asbd8.js";
+
+// packages/tui/src/demo/renderers/text.ts
+import {
+  getStringWidth,
+  padText,
+  pluralize,
+  slugify,
+  truncateText,
+  wrapText
+} from "@outfitter/cli/text";
+function renderTextDemo(config, theme) {
+  const showCode = config.showCode ?? true;
+  const lines = [];
+  lines.push(demoSection("String Width"));
+  lines.push("");
+  if (showCode) {
+    lines.push('import { getStringWidth } from "@outfitter/tui/render";');
+    lines.push("");
+  }
+  const widthExamples = [
+    { text: "Hello", expected: 5 },
+    { text: "\u4F60\u597D", expected: 4 },
+    { text: "\uD83C\uDF89", expected: 2 },
+    { text: "\x1B[32mGreen\x1B[0m", expected: 5 }
+  ];
+  for (const ex of widthExamples) {
+    const width = getStringWidth(ex.text);
+    const display = ex.text.includes("\x1B") ? '"\\x1b[32mGreen\\x1b[0m"' : `"${ex.text}"`;
+    lines.push(`getStringWidth(${display.padEnd(24)}) \u2192 ${width}`);
+  }
+  lines.push("");
+  lines.push(theme.muted("Correctly handles CJK, emoji, and ANSI codes."));
+  lines.push("");
+  lines.push(demoSection("Text Wrapping"));
+  lines.push("");
+  if (showCode) {
+    lines.push('import { wrapText } from "@outfitter/tui/render";');
+    lines.push("");
+  }
+  const longText = "This is a long sentence that should be wrapped at the specified width.";
+  if (showCode) {
+    lines.push(`wrapText("${longText}", 30)`);
+    lines.push("");
+  }
+  lines.push("Result:");
+  const wrapped = wrapText(longText, 30);
+  for (const line of wrapped.split(`
+`)) {
+    lines.push(`  \u2502${line}\u2502`);
+  }
+  lines.push("");
+  lines.push(demoSection("Truncation"));
+  lines.push("");
+  if (showCode) {
+    lines.push('import { truncateText } from "@outfitter/tui/render";');
+    lines.push("");
+  }
+  const truncExamples = [
+    { text: "Hello World", width: 8 },
+    { text: "Short", width: 10 },
+    { text: "Very long text that will be truncated", width: 15 }
+  ];
+  for (const ex of truncExamples) {
+    const result = truncateText(ex.text, ex.width);
+    lines.push(`truncateText("${ex.text}", ${ex.width})`);
+    lines.push(`  \u2192 "${result}"`);
+    lines.push("");
+  }
+  lines.push(demoSection("Padding"));
+  lines.push("");
+  if (showCode) {
+    lines.push('import { padText } from "@outfitter/tui/render";');
+    lines.push("");
+  }
+  const padExamples = ["Hi", "Hello", "Greetings"];
+  for (const text of padExamples) {
+    const padded = padText(text, 15);
+    lines.push(`padText("${text}", 15) \u2192 "${padded}"`);
+  }
+  lines.push("");
+  lines.push(demoSection("Pluralize"));
+  lines.push("");
+  if (showCode) {
+    lines.push('import { pluralize } from "@outfitter/tui/render";');
+    lines.push("");
+  }
+  const pluralExamples = [
+    { count: 0, word: "item" },
+    { count: 1, word: "item" },
+    { count: 5, word: "item" },
+    { count: 1, word: "child", plural: "children" },
+    { count: 3, word: "child", plural: "children" }
+  ];
+  for (const ex of pluralExamples) {
+    const result = pluralize(ex.count, ex.word, ex.plural);
+    const code = ex.plural ? `pluralize(${ex.count}, "${ex.word}", "${ex.plural}")` : `pluralize(${ex.count}, "${ex.word}")`;
+    lines.push(`${code.padEnd(40)} \u2192 "${result}"`);
+  }
+  lines.push("");
+  lines.push(demoSection("Slugify"));
+  lines.push("");
+  if (showCode) {
+    lines.push('import { slugify } from "@outfitter/tui/render";');
+    lines.push("");
+  }
+  const slugExamples = [
+    "Hello World!",
+    "This & That",
+    "  Multiple   Spaces  ",
+    "CamelCase"
+  ];
+  for (const text of slugExamples) {
+    const result = slugify(text);
+    lines.push(`slugify("${text}")`);
+    lines.push(`  \u2192 "${result}"`);
+    lines.push("");
+  }
+  return lines.join(`
+`);
+}
+
+export { renderTextDemo };

package/dist/shared/@outfitter/tui-733asbd8.js

@@ -0,0 +1,37 @@
+// @bun
+import {
+  renderHeading
+} from "./tui-n9kxkdrh.js";
+import {
+  joinVertical
+} from "./tui-06dntkse.js";
+
+// packages/tui/src/demo/section.ts
+function demoSection(title, options) {
+  return renderHeading(title, {
+    separator: options?.separator ?? "\u2500",
+    case: options?.case ?? "title"
+  });
+}
+function demoSubsection(title, options) {
+  return renderHeading(title, {
+    separator: options?.separator ?? "\u2500",
+    case: options?.case ?? "title"
+  });
+}
+function codeBlock(lines, show = true) {
+  if (!show)
+    return [];
+  return lines;
+}
+function description(text, theme, show = true) {
+  if (!show)
+    return [];
+  return [theme.muted(text)];
+}
+function demoContent(blocks, gap = 1) {
+  const filtered = blocks.filter((b) => b !== "");
+  return joinVertical(filtered, { gap });
+}
+
+export { demoSection, demoSubsection, codeBlock, description, demoContent };

package/dist/shared/@outfitter/tui-75bztyfp.d.ts

@@ -0,0 +1,50 @@
+/**
+* Shared types for render utilities.
+*
+* @packageDocumentation
+*/
+/**
+* Width mode for layout calculations.
+*
+* - `"text"` - Fit to text content (returns 0 to indicate no width constraint)
+* - `"full"` - Full terminal width
+* - `"container"` - Available container width (requires LayoutContext)
+* - `number` - Fixed character width
+* - `"${number}%"` - Percentage of container/terminal width
+*
+* @example
+* ```typescript
+* import { resolveWidth } from "@outfitter/tui/render";
+*
+* resolveWidth("full");        // → terminal width (e.g., 120)
+* resolveWidth(50);            // → 50
+* resolveWidth("50%");         // → half of terminal width
+* resolveWidth("container", ctx);  // → context width
+* ```
+*/
+type WidthMode = "text" | "full" | "container" | number | `${number}%`;
+/**
+* Layout context for container-aware width calculations.
+*
+* Provides width information to nested components so they can size
+* themselves relative to their container. Create contexts with
+* `createLayoutContext()` and pass them through component hierarchies.
+*
+* @example
+* ```typescript
+* import { createLayoutContext, resolveWidth } from "@outfitter/tui/render";
+*
+* const outerCtx = createLayoutContext({ width: 80, padding: 1 });
+* // outerCtx.width = 76 (80 - 4 overhead)
+*
+* const innerWidth = resolveWidth("50%", outerCtx);
+* // innerWidth = 38 (50% of 76)
+* ```
+*/
+interface LayoutContext {
+	/** Available content width in characters */
+	readonly width: number;
+	/** Parent context for chained calculations */
+	readonly parent?: LayoutContext;
+}
+export { WidthMode, LayoutContext };

package/dist/shared/@outfitter/tui-83zaah9b.d.ts

@@ -0,0 +1,17 @@
+import { ExampleTexts } from "./tui-xrgrp99k";
+/**
+* Default example texts used when no custom examples are provided.
+*
+* These defaults are generic enough to work for any CLI while still
+* being meaningful and demonstrative.
+*/
+declare const DEFAULT_EXAMPLES: ExampleTexts;
+/**
+* Resolves example text with custom overrides.
+*
+* @param key - The example text key
+* @param custom - Optional custom examples
+* @returns The example text (custom if provided, default otherwise)
+*/
+declare function getExample<K extends keyof ExampleTexts>(key: K, custom?: Partial<ExampleTexts>): ExampleTexts[K];
+export { DEFAULT_EXAMPLES, getExample };

package/dist/shared/@outfitter/tui-8ejx8gq5.d.ts

@@ -0,0 +1,71 @@
+import { BorderStyle } from "./tui-1qh888th";
+/**
+* Configuration options for {@link renderTable}.
+*
+* @example
+* ```typescript
+* const options: TableOptions = {
+*   headers: { id: "ID", name: "Name" },
+*   columnWidths: { description: 20 },
+*   border: "rounded",
+* };
+* ```
+*/
+interface TableOptions {
+	/**
+	* Fixed column widths by key.
+	* If not specified, column width is calculated from content.
+	*/
+	columnWidths?: Record<string, number>;
+	/**
+	* Custom header labels by key.
+	* If not specified, the object key is used as the header.
+	*/
+	headers?: Record<string, string>;
+	/**
+	* Border style for the table.
+	* @default "single"
+	*/
+	border?: BorderStyle;
+	/**
+	* Compact mode removes all borders and uses space separators.
+	* When true, overrides the border option.
+	* @default false
+	*/
+	compact?: boolean;
+}
+/**
+* Renders an array of objects as a table with Unicode box-drawing borders.
+*
+* Automatically calculates column widths based on content unless
+* overridden in options. Supports custom header labels, border styles,
+* and truncates cell content that exceeds column width.
+*
+* @param data - Array of objects to render as rows
+* @param options - Table rendering options
+* @returns Formatted table string with borders
+*
+* @example
+* ```typescript
+* const table = renderTable(
+*   [
+*     { id: 1, name: "Alice", status: "Active" },
+*     { id: 2, name: "Bob", status: "Inactive" },
+*   ],
+*   {
+*     headers: { id: "ID", name: "Name" },
+*     columnWidths: { status: 10 },
+*   }
+* );
+*
+* console.log(table);
+* // ┌────┬───────┬──────────┐
+* // │ ID │ Name  │ status   │
+* // ├────┼───────┼──────────┤
+* // │ 1  │ Alice │ Active   │
+* // │ 2  │ Bob   │ Inactive │
+* // └────┴───────┴──────────┘
+* ```
+*/
+declare function renderTable(data: Record<string, unknown>[], options?: TableOptions): string;
+export { TableOptions, renderTable };

package/dist/shared/@outfitter/tui-8j1gbehy.d.ts

@@ -0,0 +1,164 @@
+import { DelimiterName } from "./tui-wfnnq0zq";
+import { TreeGuideStyle } from "./tui-3dyxg62j";
+import { IndicatorCategory } from "./tui-9h1kdd98";
+import { SpinnerStyle } from "./tui-c6ft5w6q";
+import { BorderCharacters, BorderStyle } from "./tui-1qh888th";
+/**
+* A glyph with unicode and ASCII fallback representations.
+*
+* Used for characters that may not be available in all terminals.
+* The appropriate character is selected at runtime based on terminal capability.
+*
+* @example
+* ```typescript
+* const bullet: GlyphPair = { unicode: "•", fallback: "*" };
+* const checkbox: GlyphPair = { unicode: "☑", fallback: "[x]" };
+* ```
+*/
+interface GlyphPair {
+	/** Unicode character for modern terminals */
+	unicode: string;
+	/** ASCII fallback for limited terminals */
+	fallback: string;
+}
+/**
+* Semantic states that can be mapped to visual markers.
+*
+* These represent the logical state of an item, which themes translate
+* to specific visual representations.
+*/
+type SemanticState = "default" | "current" | "focused" | "checked" | "disabled" | "success" | "warning" | "error" | "info";
+/**
+* Specification for how to render a semantic state marker.
+*
+* Can either reference an existing indicator from the INDICATORS registry,
+* or provide a custom glyph pair.
+*
+* @example
+* ```typescript
+* // Reference existing indicator
+* const successMarker: MarkerSpec = {
+*   type: "indicator",
+*   category: "status",
+*   name: "success"
+* };
+*
+* // Custom glyph
+* const starMarker: MarkerSpec = {
+*   type: "custom",
+*   glyph: { unicode: "★", fallback: "*" }
+* };
+* ```
+*/
+type MarkerSpec = {
+	type: "indicator";
+	category: IndicatorCategory;
+	name: string;
+} | {
+	type: "custom";
+	glyph: GlyphPair;
+};
+/**
+* Semantic color tokens as ANSI escape codes.
+*
+* Colors are stored as raw ANSI codes and can be empty strings
+* when colors are disabled.
+*/
+interface ThemeColors {
+	/** Green - success messages, completed items */
+	success: string;
+	/** Yellow - warnings, caution */
+	warning: string;
+	/** Red - errors, failures */
+	error: string;
+	/** Blue - informational messages */
+	info: string;
+	/** Default text color (typically empty string) */
+	primary: string;
+	/** Gray - secondary text */
+	secondary: string;
+	/** Dim - de-emphasized text */
+	muted: string;
+	/** Cyan - interactive elements, highlights */
+	accent: string;
+	/** Bold - strong emphasis */
+	highlight: string;
+	/** Cyan + underline - URLs, clickable references */
+	link: string;
+	/** Bright red - dangerous actions */
+	destructive: string;
+	/** Dim gray - less prominent than muted */
+	subtle: string;
+}
+/**
+* Default spacing values for various components.
+*/
+interface ThemeSpacing {
+	/** Default padding inside boxes (characters) */
+	boxPadding: number;
+	/** Indentation for nested list items (characters) */
+	listIndent: number;
+	/** Gap between items in vertical stacks (lines) */
+	stackGap: number;
+	/** Gap between items in horizontal stacks (characters) */
+	horizontalGap: number;
+}
+/**
+* Complete visual theme configuration.
+*
+* Consolidates all visual primitives (borders, delimiters, markers, guides,
+* colors) into a cohesive design system. Themes can be used as-is (presets)
+* or customized via {@link createVisualTheme}.
+*
+* @example
+* ```typescript
+* import { defaultTheme, roundedTheme, createVisualTheme } from "@outfitter/tui/theme";
+*
+* // Use a preset
+* const box = renderBox("Hello", { theme: roundedTheme });
+*
+* // Create a custom theme
+* const brandTheme = createVisualTheme({
+*   extends: roundedTheme,
+*   overrides: {
+*     colors: { accent: "\x1b[38;5;39m" },
+*     spacing: { boxPadding: 2 }
+*   }
+* });
+* ```
+*/
+interface VisualTheme {
+	/** Theme identifier */
+	name: string;
+	/** Border style preset name */
+	border: BorderStyle;
+	/** Derived border characters for the border style */
+	borderChars: BorderCharacters;
+	/** Tree guide style for hierarchical displays */
+	treeGuide: TreeGuideStyle;
+	/** Default delimiter for inline separators */
+	delimiter: DelimiterName;
+	/** Map of semantic states to marker specifications */
+	markers: Record<SemanticState, MarkerSpec>;
+	/** Default list bullet glyph */
+	listBullet: GlyphPair;
+	/** Checkbox glyphs for checked/unchecked states */
+	checkbox: {
+		checked: GlyphPair;
+		unchecked: GlyphPair;
+	};
+	/** Semantic color tokens */
+	colors: ThemeColors;
+	/** Default spacing values */
+	spacing: ThemeSpacing;
+	/** Default spinner animation style */
+	spinner: SpinnerStyle;
+}
+/**
+* Partial theme for overriding specific properties.
+*
+* Used by {@link createVisualTheme} to allow partial customization
+* while inheriting defaults.
+*/
+type PartialVisualTheme = { [K in keyof VisualTheme]? : K extends "colors" ? Partial<ThemeColors> : K extends "spacing" ? Partial<ThemeSpacing> : K extends "markers" ? Partial<Record<SemanticState, MarkerSpec>> : K extends "checkbox" ? Partial<VisualTheme["checkbox"]> : VisualTheme[K] };
+export { GlyphPair, SemanticState, MarkerSpec, ThemeColors, ThemeSpacing, VisualTheme, PartialVisualTheme };