@mdxui/terminal 2.0.0

package/dist/chunk-QW5YMQ7K.js

@@ -0,0 +1,882 @@
+import {
+  ANSI,
+  boxChars,
+  colors,
+  visibleLength
+} from "./chunk-4FV5ZDCE.js";
+
+// src/components/types.ts
+var COMPONENT_TYPES = /* @__PURE__ */ new Set([
+  "box",
+  "text",
+  "table",
+  "input",
+  "select",
+  "sidebar",
+  "sidebar-item",
+  "breadcrumb",
+  "badge",
+  "dialog",
+  "spinner",
+  "button",
+  "panel",
+  "list",
+  "card"
+]);
+function isTerminalComponentType(type) {
+  return typeof type === "string" && COMPONENT_TYPES.has(type);
+}
+function isPropsObject(props) {
+  return typeof props === "object" && props !== null;
+}
+function isBoxProps(props) {
+  return isPropsObject(props);
+}
+function isTextProps(props) {
+  return isPropsObject(props);
+}
+function isTableProps(props) {
+  if (!isPropsObject(props)) return false;
+  return Array.isArray(props.data) && Array.isArray(props.columns);
+}
+function isInputProps(props) {
+  return isPropsObject(props);
+}
+function isSelectProps(props) {
+  if (!isPropsObject(props)) return false;
+  return Array.isArray(props.options);
+}
+function isSidebarProps(props) {
+  return isPropsObject(props);
+}
+function isSidebarItemProps(props) {
+  if (!isPropsObject(props)) return false;
+  return typeof props.label === "string";
+}
+function isBreadcrumbProps(props) {
+  if (!isPropsObject(props)) return false;
+  return Array.isArray(props.items);
+}
+function isBadgeProps(props) {
+  return isPropsObject(props);
+}
+function isDialogProps(props) {
+  return isPropsObject(props);
+}
+function isSpinnerProps(props) {
+  return isPropsObject(props);
+}
+function isButtonProps(props) {
+  return isPropsObject(props);
+}
+function isPanelProps(props) {
+  return isPropsObject(props);
+}
+function isListProps(props) {
+  if (!isPropsObject(props)) return false;
+  return Array.isArray(props.items);
+}
+function isCardProps(props) {
+  return isPropsObject(props);
+}
+
+// src/components/helpers.ts
+import { isValidElement } from "react";
+var colorMap = {
+  // Basic colors (from ANSI)
+  black: ANSI.black,
+  red: ANSI.red,
+  green: ANSI.green,
+  yellow: ANSI.yellow,
+  blue: ANSI.blue,
+  magenta: ANSI.magenta,
+  cyan: ANSI.cyan,
+  white: ANSI.white,
+  // Semantic colors (from theme)
+  error: colors.error,
+  success: colors.success,
+  warning: colors.warning,
+  info: colors.info,
+  primary: colors.primary,
+  secondary: colors.secondary,
+  muted: colors.muted
+};
+var bgColorMap = {
+  black: ANSI.bgBlack,
+  red: ANSI.bgRed,
+  green: ANSI.bgGreen,
+  yellow: ANSI.bgYellow,
+  blue: ANSI.bgBlue,
+  magenta: ANSI.bgMagenta,
+  cyan: ANSI.bgCyan,
+  white: ANSI.bgWhite
+};
+function getColorCode(color) {
+  return colorMap[color] || ANSI.white;
+}
+function getBgColorCode(color) {
+  return bgColorMap[color] || "";
+}
+function extractChildren(children) {
+  if (typeof children === "string") return children;
+  if (typeof children === "number") return String(children);
+  if (Array.isArray(children)) {
+    return children.map(extractChildren).join("");
+  }
+  if (isValidElement(children)) {
+    const props = children.props;
+    return extractChildren(props.children);
+  }
+  return "";
+}
+var visibleLength2 = visibleLength;
+
+// src/components/primitives/box.ts
+import React, { isValidElement as isValidElement2 } from "react";
+var renderElementFn = null;
+function setRenderElement(fn) {
+  renderElementFn = fn;
+}
+function renderBox(props, context) {
+  const { children, border = "none", padding = 0, width, height, bg } = props;
+  const boxWidth = typeof width === "number" ? width : context.width;
+  const boxHeight = typeof height === "number" ? height : void 0;
+  let childLines = [];
+  if (children) {
+    if (isValidElement2(children) && renderElementFn) {
+      childLines = renderElementFn(children, { ...context, width: boxWidth - (border !== "none" ? 2 : 0) - padding * 2, parentWidth: boxWidth });
+    } else {
+      const text = extractChildren(children);
+      if (text) childLines = [text];
+    }
+  }
+  if (padding > 0) {
+    childLines = childLines.map((line) => " ".repeat(padding) + line + " ".repeat(padding));
+  }
+  const contentWidth = border !== "none" ? boxWidth - 2 : boxWidth;
+  if (border === "none") {
+    let result = childLines.length > 0 ? childLines : [""];
+    if (boxHeight) {
+      while (result.length < boxHeight) {
+        result.push("");
+      }
+      result = result.slice(0, boxHeight);
+    }
+    if (bg) {
+      const bgCode = getBgColorCode(bg);
+      result = result.map((line) => bgCode + line.padEnd(boxWidth) + ANSI.reset);
+    }
+    return result;
+  }
+  const chars = boxChars[border] || boxChars.single;
+  const lines = [];
+  lines.push(chars.topLeft + chars.horizontal.repeat(contentWidth) + chars.topRight);
+  const targetHeight = boxHeight ? boxHeight - 2 : childLines.length;
+  for (let i = 0; i < targetHeight; i++) {
+    const content = i < childLines.length ? childLines[i] : "";
+    const stripped = content.replace(/\x1b\[[\d;]*m/g, "");
+    const paddedContent = content + " ".repeat(Math.max(0, contentWidth - stripped.length));
+    lines.push(chars.vertical + paddedContent + chars.vertical);
+  }
+  lines.push(chars.bottomLeft + chars.horizontal.repeat(contentWidth) + chars.bottomRight);
+  if (bg) {
+    const bgCode = getBgColorCode(bg);
+    return lines.map((line) => bgCode + line + ANSI.reset);
+  }
+  return lines;
+}
+function Box(props) {
+  return React.createElement("box", props);
+}
+
+// src/components/primitives/text.ts
+import React2 from "react";
+function renderText(props, context) {
+  const { children, bold, italic, underline, dim, color, backgroundColor, wrap } = props;
+  let text = extractChildren(children);
+  const codes = [];
+  if (bold) codes.push(ANSI.bold);
+  if (italic) codes.push(ANSI.italic);
+  if (underline) codes.push(ANSI.underline);
+  if (dim) codes.push(ANSI.dim);
+  if (color) codes.push(getColorCode(color));
+  if (backgroundColor) codes.push(getBgColorCode(backgroundColor));
+  const maxWidth = context.parentWidth || context.width;
+  if (wrap === "truncate" && text.length > maxWidth) {
+    text = text.slice(0, maxWidth - 1) + "\u2026";
+  } else if (wrap === "wrap" && text.length > maxWidth) {
+    const lines = [];
+    let remaining = text;
+    while (remaining.length > 0) {
+      if (remaining.length <= maxWidth) {
+        lines.push(remaining);
+        break;
+      }
+      let breakPoint = maxWidth;
+      const lastSpace = remaining.lastIndexOf(" ", maxWidth);
+      if (lastSpace > 0) breakPoint = lastSpace;
+      lines.push(remaining.slice(0, breakPoint));
+      remaining = remaining.slice(breakPoint).trim();
+    }
+    return lines.map((line) => codes.join("") + line + ANSI.reset);
+  }
+  if (codes.length > 0) {
+    return [codes.join("") + text + ANSI.reset];
+  }
+  return [text];
+}
+function Text(props) {
+  return React2.createElement("text", props);
+}
+
+// src/components/primitives/input.ts
+import React3 from "react";
+function renderInput(props, context) {
+  const {
+    value = "",
+    placeholder = "",
+    label,
+    disabled,
+    focused = false,
+    type,
+    cursorPosition,
+    width
+  } = props;
+  const lines = [];
+  if (label) {
+    lines.push(label);
+  }
+  let displayValue;
+  if (type === "password" && value) {
+    displayValue = "*".repeat(value.length);
+  } else if (value) {
+    displayValue = value;
+  } else {
+    displayValue = "";
+  }
+  const inputWidth = width || context.width || 20;
+  const effectiveCursorPosition = cursorPosition !== void 0 ? Math.min(cursorPosition, displayValue.length) : displayValue.length;
+  let rendered;
+  if (disabled) {
+    const content = displayValue || placeholder;
+    rendered = ANSI.dim + content + ANSI.reset;
+  } else if (focused) {
+    if (displayValue.length === 0) {
+      rendered = ANSI.inverse + " " + ANSI.reset;
+    } else {
+      const before = displayValue.slice(0, effectiveCursorPosition);
+      const cursorChar = displayValue[effectiveCursorPosition] || " ";
+      const after = displayValue.slice(effectiveCursorPosition + 1);
+      rendered = ANSI.underline + before + ANSI.reset + ANSI.inverse + cursorChar + ANSI.reset + ANSI.underline + after + ANSI.reset;
+    }
+  } else {
+    if (displayValue.length === 0 && placeholder) {
+      rendered = ANSI.dim + placeholder + ANSI.reset;
+    } else {
+      rendered = displayValue;
+    }
+  }
+  const visible = visibleLength2(rendered);
+  const padding = " ".repeat(Math.max(0, inputWidth - visible));
+  rendered = rendered + padding;
+  lines.push(rendered);
+  return lines;
+}
+function Input(props) {
+  return React3.createElement("input", props);
+}
+
+// src/components/primitives/select.ts
+import React4 from "react";
+function renderSelect(props, _context) {
+  const {
+    options,
+    value,
+    label,
+    focused = false,
+    highlightedIndex = 0,
+    maxVisible = 5
+  } = props;
+  const lines = [];
+  if (label) {
+    lines.push(label);
+  }
+  const selectedIndex = options.findIndex((opt) => opt.value === value);
+  const selected = selectedIndex >= 0 ? options[selectedIndex] : null;
+  if (focused) {
+    let startIdx = 0;
+    let endIdx = options.length;
+    if (options.length > maxVisible) {
+      const halfVisible = Math.floor(maxVisible / 2);
+      startIdx = Math.max(0, highlightedIndex - halfVisible);
+      endIdx = Math.min(options.length, startIdx + maxVisible);
+      if (endIdx - startIdx < maxVisible) {
+        startIdx = Math.max(0, endIdx - maxVisible);
+      }
+    }
+    if (startIdx > 0) {
+      lines.push(ANSI.dim + "  \u25B2 more" + ANSI.reset);
+    }
+    for (let idx = startIdx; idx < endIdx; idx++) {
+      const opt = options[idx];
+      const isSelected = opt.value === value;
+      const isHighlighted = idx === highlightedIndex;
+      const prefix = isSelected ? "\u25CF " : "\u25CB ";
+      let line;
+      if (opt.disabled) {
+        line = ANSI.dim + prefix + opt.label + ANSI.reset;
+      } else if (isHighlighted) {
+        line = ANSI.inverse + prefix + opt.label + ANSI.reset;
+      } else if (isSelected) {
+        line = ANSI.bold + prefix + opt.label + ANSI.reset;
+      } else {
+        line = ANSI.dim + prefix + opt.label + ANSI.reset;
+      }
+      lines.push(line);
+    }
+    if (endIdx < options.length) {
+      lines.push(ANSI.dim + "  \u25BC more" + ANSI.reset);
+    }
+  } else {
+    const selectedLabel = selected ? selected.label : "";
+    const prefix = selected ? "\u25CF " : "\u25CB ";
+    lines.push(prefix + selectedLabel + " \u25BC");
+  }
+  return lines;
+}
+function Select(props) {
+  return React4.createElement("select", props);
+}
+
+// src/components/primitives/button.ts
+import React5 from "react";
+function renderButton(props, _context) {
+  const { children, hotkey, disabled, focused, variant = "primary" } = props;
+  const text = extractChildren(children);
+  let style = "";
+  let bgColor = "";
+  switch (variant) {
+    case "primary":
+      bgColor = "\x1B[44m";
+      style = ANSI.bold;
+      break;
+    case "secondary":
+      bgColor = "\x1B[100m";
+      break;
+    case "destructive":
+      bgColor = "\x1B[41m";
+      style = ANSI.bold;
+      break;
+  }
+  let buttonText = ` ${text} `;
+  if (hotkey) {
+    buttonText += `[${hotkey}]`;
+  }
+  if (disabled) {
+    return [ANSI.dim + `[ ${text} ]` + ANSI.reset];
+  }
+  if (focused) {
+    return [bgColor + style + "\x1B[37m" + buttonText + ANSI.reset];
+  }
+  return [bgColor + style + buttonText + ANSI.reset];
+}
+function Button(props) {
+  return React5.createElement("button", props);
+}
+
+// src/components/containers/panel.ts
+import React6 from "react";
+function renderPanel(props, context) {
+  const { children, title, border = "single", collapsed, padding = 0 } = props;
+  if (collapsed) {
+    return [ANSI.dim + "\u25B6 " + ANSI.reset + ANSI.bold + (title || "Panel") + ANSI.reset];
+  }
+  const lines = [];
+  const chars = border === "double" ? boxChars.double : border === "rounded" ? boxChars.rounded : boxChars.single;
+  const panelWidth = context.width;
+  if (title && border !== "none") {
+    const titleText = ` ${title} `;
+    const remainingWidth = panelWidth - titleText.length - 2;
+    const leftBorder = Math.floor(remainingWidth / 2);
+    const rightBorder = remainingWidth - leftBorder;
+    lines.push(chars.topLeft + chars.horizontal.repeat(leftBorder) + ANSI.bold + titleText + ANSI.reset + chars.horizontal.repeat(rightBorder) + chars.topRight);
+  } else if (border !== "none") {
+    lines.push(chars.topLeft + chars.horizontal.repeat(panelWidth - 2) + chars.topRight);
+  }
+  const content = extractChildren(children);
+  const contentLines = content.split("\n");
+  const paddingStr = " ".repeat(padding);
+  for (const line of contentLines) {
+    if (border !== "none") {
+      lines.push(chars.vertical + paddingStr + line.padEnd(panelWidth - 2 - padding * 2) + paddingStr + chars.vertical);
+    } else {
+      lines.push(paddingStr + line);
+    }
+  }
+  if (border !== "none") {
+    lines.push(chars.bottomLeft + chars.horizontal.repeat(panelWidth - 2) + chars.bottomRight);
+  }
+  return lines;
+}
+function Panel(props) {
+  return React6.createElement("panel", props);
+}
+
+// src/components/containers/card.ts
+import React7 from "react";
+function renderCard(props, context) {
+  const { children, title, border = "single" } = props;
+  const lines = [];
+  const chars = border === "double" ? boxChars.double : boxChars.single;
+  const cardWidth = Math.min(context.width, 60);
+  if (border !== "none") {
+    lines.push(chars.topLeft + chars.horizontal.repeat(cardWidth - 2) + chars.topRight);
+  }
+  if (title) {
+    const titleLine = " " + ANSI.bold + title + ANSI.reset;
+    if (border !== "none") {
+      lines.push(chars.vertical + titleLine.padEnd(cardWidth - 2 + ANSI.bold.length + ANSI.reset.length) + chars.vertical);
+      lines.push(chars.teeLeft + chars.horizontal.repeat(cardWidth - 2) + chars.teeRight);
+    } else {
+      lines.push(ANSI.bold + title + ANSI.reset);
+    }
+  }
+  const content = extractChildren(children);
+  const contentLines = content.split("\n");
+  for (const line of contentLines) {
+    if (border !== "none") {
+      lines.push(chars.vertical + " " + line.padEnd(cardWidth - 4) + " " + chars.vertical);
+    } else {
+      lines.push(line);
+    }
+  }
+  if (border !== "none") {
+    lines.push(chars.bottomLeft + chars.horizontal.repeat(cardWidth - 2) + chars.bottomRight);
+  }
+  return lines;
+}
+function Card(props) {
+  return React7.createElement("card", props);
+}
+
+// src/components/containers/dialog.ts
+import React8 from "react";
+function renderDialog(props, context) {
+  const { open, title, children } = props;
+  if (!open) {
+    return [""];
+  }
+  const dialogWidth = 40;
+  const padding = Math.floor((context.width - dialogWidth) / 2);
+  const paddingStr = " ".repeat(Math.max(0, padding));
+  const lines = [];
+  const chars = boxChars.single;
+  lines.push(paddingStr + ANSI.cyan + chars.topLeft + chars.horizontal.repeat(dialogWidth - 2) + chars.topRight + ANSI.reset);
+  if (title) {
+    const titlePadded = (" " + title).padEnd(dialogWidth - 2);
+    lines.push(paddingStr + ANSI.cyan + chars.vertical + ANSI.reset + ANSI.bold + titlePadded + ANSI.reset + ANSI.cyan + chars.vertical + ANSI.reset);
+    lines.push(paddingStr + ANSI.cyan + chars.teeLeft + chars.horizontal.repeat(dialogWidth - 2) + chars.teeRight + ANSI.reset);
+  }
+  const content = extractChildren(children);
+  const contentLines = content.split("\n");
+  for (const contentLine of contentLines) {
+    const paddedContent = (" " + contentLine).padEnd(dialogWidth - 2);
+    lines.push(paddingStr + ANSI.cyan + chars.vertical + ANSI.reset + paddedContent + ANSI.cyan + chars.vertical + ANSI.reset);
+  }
+  lines.push(paddingStr + ANSI.cyan + chars.bottomLeft + chars.horizontal.repeat(dialogWidth - 2) + chars.bottomRight + ANSI.reset);
+  return lines;
+}
+function Dialog(props) {
+  return React8.createElement("dialog", props);
+}
+
+// src/components/layout/sidebar.ts
+import React9, { Children, isValidElement as isValidElement3 } from "react";
+function renderSidebarItem(props, _context) {
+  const { label, icon, active, _collapsed } = props;
+  if (_collapsed) {
+    return [icon || ""];
+  }
+  let line = "";
+  if (active) {
+    line = "\u25B6 ";
+  }
+  if (icon) {
+    line += icon + " ";
+  }
+  line += label;
+  if (active) {
+    line = "\x1B[44m" + line + ANSI.reset;
+  }
+  return [line];
+}
+function renderSidebar(props, context) {
+  const { children, width = 20, collapsed } = props;
+  const lines = [];
+  const childArray = Children.toArray(children);
+  for (const child of childArray) {
+    if (isValidElement3(child)) {
+      const childProps = child.props;
+      const modifiedProps = { ...childProps, _collapsed: collapsed };
+      const childLines = renderSidebarItem(modifiedProps, { ...context, width });
+      lines.push(...childLines);
+    }
+  }
+  return lines.map((line) => {
+    const stripped = line.replace(/\x1b\[[\d;]*m/g, "");
+    if (stripped.length > width) {
+      return line.slice(0, width);
+    }
+    return line;
+  });
+}
+function SidebarLayout(props) {
+  return React9.createElement("sidebar", props);
+}
+function SidebarItem(props) {
+  return React9.createElement("sidebar-item", props);
+}
+
+// src/components/layout/breadcrumb.ts
+import React10 from "react";
+function renderBreadcrumb(props, _context) {
+  const { items, separator = "/" } = props;
+  const parts = [];
+  items.forEach((item, idx) => {
+    const isLast = idx === items.length - 1;
+    if (isLast) {
+      parts.push(ANSI.bold + item.label + ANSI.reset);
+    } else {
+      parts.push(ANSI.dim + item.label + ANSI.reset);
+    }
+  });
+  return [parts.join(` ${separator} `)];
+}
+function Breadcrumb(props) {
+  return React10.createElement("breadcrumb", props);
+}
+
+// src/components/layout/list.ts
+import React11 from "react";
+function renderList(props, _context) {
+  const { items, selectedIndex, bullet = "\u2022", numbered = false } = props;
+  return items.map((item, idx) => {
+    const text = typeof item === "string" ? item : extractChildren(item);
+    const prefix = numbered ? `${idx + 1}. ` : `${bullet} `;
+    const isSelected = selectedIndex === idx;
+    if (isSelected) {
+      return ANSI.cyan + "\x1B[44m" + prefix + text + ANSI.reset;
+    }
+    return prefix + text;
+  });
+}
+function List(props) {
+  return React11.createElement("list", props);
+}
+
+// src/components/layout/table.ts
+import React12 from "react";
+function renderTable(props, _context) {
+  const { data, columns, selectedIndex } = props;
+  const lines = [];
+  const colWidths = columns.map((col) => {
+    if (col.width) return col.width;
+    let maxWidth = col.header.length;
+    for (const row of data) {
+      const value = String(row[col.key] ?? "");
+      maxWidth = Math.max(maxWidth, value.length);
+    }
+    return maxWidth + 2;
+  });
+  const headerParts = columns.map((col, idx) => {
+    const width = colWidths[idx];
+    return col.header.padEnd(width);
+  });
+  lines.push("\u2502" + headerParts.join("\u2502") + "\u2502");
+  const separatorParts = colWidths.map((w) => "\u2500".repeat(w));
+  lines.push("\u251C" + separatorParts.join("\u253C") + "\u2524");
+  data.forEach((row, rowIndex) => {
+    const rowParts = columns.map((col, idx) => {
+      const value = String(row[col.key] ?? "");
+      const width = colWidths[idx];
+      if (col.align === "right") {
+        return value.padStart(width);
+      }
+      return value.padEnd(width);
+    });
+    let rowLine = "\u2502" + rowParts.join("\u2502") + "\u2502";
+    if (selectedIndex === rowIndex) {
+      rowLine = "\x1B[44m" + rowLine + ANSI.reset;
+    }
+    lines.push(rowLine);
+  });
+  return lines;
+}
+function Table(props) {
+  return React12.createElement("table", props);
+}
+
+// src/components/feedback/badge.ts
+import React13 from "react";
+function renderBadge(props, _context) {
+  const { children, variant = "default" } = props;
+  const text = extractChildren(children);
+  let color;
+  switch (variant) {
+    case "success":
+      color = "\x1B[32m";
+      break;
+    case "warning":
+      color = "\x1B[33m";
+      break;
+    case "error":
+      color = "\x1B[31m";
+      break;
+    case "info":
+      color = "\x1B[34m";
+      break;
+    default:
+      color = ANSI.dim;
+  }
+  return [color + "[" + text + "]" + ANSI.reset];
+}
+function Badge(props) {
+  return React13.createElement("badge", props);
+}
+
+// src/components/feedback/spinner.ts
+import React14 from "react";
+var spinnerFrames = ["\u280B", "\u2819", "\u2839", "\u2838", "\u283C", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
+function renderSpinner(props, _context) {
+  const { label } = props;
+  const frame = spinnerFrames[0];
+  const text = label ? `${frame} ${label}` : frame;
+  return [ANSI.cyan + text + ANSI.reset];
+}
+function Spinner(props) {
+  return React14.createElement("spinner", props);
+}
+
+// src/components/render.ts
+function renderElement(element, context) {
+  const props = element.props;
+  const type = element.type;
+  if (typeof type === "function") {
+    const result = type(props);
+    return renderElement(result, context);
+  }
+  if (isTerminalComponentType(type)) {
+    switch (type) {
+      case "box":
+        if (isBoxProps(props)) {
+          return renderBox(props, context);
+        }
+        break;
+      case "text":
+        if (isTextProps(props)) {
+          return renderText(props, context);
+        }
+        break;
+      case "table":
+        if (isTableProps(props)) {
+          return renderTable(props, context);
+        }
+        break;
+      case "input":
+        if (isInputProps(props)) {
+          return renderInput(props, context);
+        }
+        break;
+      case "select":
+        if (isSelectProps(props)) {
+          return renderSelect(props, context);
+        }
+        break;
+      case "sidebar":
+        if (isSidebarProps(props)) {
+          return renderSidebar(props, context);
+        }
+        break;
+      case "sidebar-item":
+        if (isSidebarItemProps(props)) {
+          return renderSidebarItem(props, context);
+        }
+        break;
+      case "breadcrumb":
+        if (isBreadcrumbProps(props)) {
+          return renderBreadcrumb(props, context);
+        }
+        break;
+      case "badge":
+        if (isBadgeProps(props)) {
+          return renderBadge(props, context);
+        }
+        break;
+      case "dialog":
+        if (isDialogProps(props)) {
+          return renderDialog(props, context);
+        }
+        break;
+      case "spinner":
+        if (isSpinnerProps(props)) {
+          return renderSpinner(props, context);
+        }
+        break;
+      case "button":
+        if (isButtonProps(props)) {
+          return renderButton(props, context);
+        }
+        break;
+      case "panel":
+        if (isPanelProps(props)) {
+          return renderPanel(props, context);
+        }
+        break;
+      case "list":
+        if (isListProps(props)) {
+          return renderList(props, context);
+        }
+        break;
+      case "card":
+        if (isCardProps(props)) {
+          return renderCard(props, context);
+        }
+        break;
+    }
+  }
+  if (isPropsObject(props)) {
+    const childText = extractChildren(props.children);
+    return childText ? [childText] : [];
+  }
+  return [];
+}
+setRenderElement(renderElement);
+function renderComponent(element) {
+  const context = { width: 80 };
+  return renderElement(element, context);
+}
+
+// src/components/templates/site.ts
+import React15 from "react";
+function Site(props) {
+  return React15.createElement("site", props);
+}
+function Header(props) {
+  return React15.createElement("header", props);
+}
+function Footer(props) {
+  return React15.createElement("footer", props);
+}
+function Hero(props) {
+  return React15.createElement("hero", props);
+}
+function Features(props) {
+  return React15.createElement("features", props);
+}
+function Pricing(props) {
+  return React15.createElement("pricing", props);
+}
+function FAQ(props) {
+  return React15.createElement("faq", props);
+}
+function LandingPage(props) {
+  return React15.createElement("landing-page", props);
+}
+function Page(props) {
+  return React15.createElement("page", props);
+}
+
+// src/components/templates/app.ts
+import React16 from "react";
+function App(props) {
+  return React16.createElement("app", props);
+}
+function Shell(props) {
+  return React16.createElement("shell", props);
+}
+function Sidebar(props) {
+  return React16.createElement("sidebar", props);
+}
+function AppHeader(props) {
+  return React16.createElement("app-header", props);
+}
+function Dashboard(props) {
+  return React16.createElement("dashboard", props);
+}
+function Settings(props) {
+  return React16.createElement("settings", props);
+}
+
+export {
+  COMPONENT_TYPES,
+  isTerminalComponentType,
+  isPropsObject,
+  isBoxProps,
+  isTextProps,
+  isTableProps,
+  isInputProps,
+  isSelectProps,
+  isSidebarProps,
+  isSidebarItemProps,
+  isBreadcrumbProps,
+  isBadgeProps,
+  isDialogProps,
+  isSpinnerProps,
+  isButtonProps,
+  isPanelProps,
+  isListProps,
+  isCardProps,
+  colorMap,
+  bgColorMap,
+  getColorCode,
+  getBgColorCode,
+  extractChildren,
+  renderBox,
+  Box,
+  renderText,
+  Text,
+  renderInput,
+  Input,
+  renderSelect,
+  Select,
+  renderButton,
+  Button,
+  renderPanel,
+  Panel,
+  renderCard,
+  Card,
+  renderDialog,
+  Dialog,
+  renderSidebarItem,
+  renderSidebar,
+  SidebarLayout,
+  SidebarItem,
+  renderBreadcrumb,
+  Breadcrumb,
+  renderList,
+  List,
+  renderTable,
+  Table,
+  renderBadge,
+  Badge,
+  spinnerFrames,
+  renderSpinner,
+  Spinner,
+  renderElement,
+  renderComponent,
+  Site,
+  Header,
+  Footer,
+  Hero,
+  Features,
+  Pricing,
+  FAQ,
+  LandingPage,
+  Page,
+  App,
+  Shell,
+  Sidebar,
+  AppHeader,
+  Dashboard,
+  Settings
+};