@mdxui/terminal 2.0.0

package/dist/chunk-KRHJP5R7.js

@@ -0,0 +1,592 @@
+import {
+  ANSI,
+  boxChars
+} from "./chunk-JBHRXOXM.js";
+
+// src/components/index.ts
+import React, { Children, isValidElement } from "react";
+var colorMap = {
+  // Basic colors
+  black: "\x1B[30m",
+  red: "\x1B[31m",
+  green: "\x1B[32m",
+  yellow: "\x1B[33m",
+  blue: "\x1B[34m",
+  magenta: "\x1B[35m",
+  cyan: "\x1B[36m",
+  white: "\x1B[37m",
+  // Semantic colors
+  error: "\x1B[31m",
+  success: "\x1B[32m",
+  warning: "\x1B[33m",
+  info: "\x1B[34m",
+  primary: "\x1B[36m",
+  secondary: "\x1B[34m",
+  muted: "\x1B[90m"
+};
+var bgColorMap = {
+  black: "\x1B[40m",
+  red: "\x1B[41m",
+  green: "\x1B[42m",
+  yellow: "\x1B[43m",
+  blue: "\x1B[44m",
+  magenta: "\x1B[45m",
+  cyan: "\x1B[46m",
+  white: "\x1B[47m"
+};
+function getColorCode(color) {
+  return colorMap[color] || colorMap.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 "";
+}
+function renderElement(element, context) {
+  const props = element.props;
+  const type = element.type;
+  if (typeof type === "function") {
+    const result = type(props);
+    return renderElement(result, context);
+  }
+  switch (type) {
+    case "box":
+      return renderBox(props, context);
+    case "text":
+      return renderText(props, context);
+    case "table":
+      return renderTable(props, context);
+    case "input":
+      return renderInput(props, context);
+    case "select":
+      return renderSelect(props, context);
+    case "sidebar":
+      return renderSidebar(props, context);
+    case "sidebar-item":
+      return renderSidebarItem(props, context);
+    case "breadcrumb":
+      return renderBreadcrumb(props, context);
+    case "badge":
+      return renderBadge(props, context);
+    case "dialog":
+      return renderDialog(props, context);
+    case "spinner":
+      return renderSpinner(props, context);
+    case "button":
+      return renderButton(props, context);
+    case "panel":
+      return renderPanel(props, context);
+    case "list":
+      return renderList(props, context);
+    case "card":
+      return renderCard(props, context);
+    default:
+      const childText = extractChildren(props.children);
+      return childText ? [childText] : [];
+  }
+}
+function renderComponent(element) {
+  const context = { width: 80 };
+  return renderElement(element, context);
+}
+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 (isValidElement(children)) {
+      childLines = renderElement(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);
+}
+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 React.createElement("text", props);
+}
+function renderTable(props, _context) {
+  const { data, columns, selectedIndex } = props;
+  const lines = [];
+  const colWidths = columns.map((col, idx) => {
+    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 React.createElement("table", props);
+}
+function renderInput(props, _context) {
+  const { value = "", placeholder, label, disabled, focused, type } = props;
+  const lines = [];
+  if (label) {
+    lines.push(label);
+  }
+  let displayValue;
+  if (type === "password" && value) {
+    displayValue = "*".repeat(value.length);
+  } else if (value) {
+    displayValue = value;
+  } else if (placeholder) {
+    displayValue = ANSI.dim + placeholder + ANSI.reset;
+  } else {
+    displayValue = "";
+  }
+  let inputLine = displayValue;
+  if (focused) {
+    inputLine = ANSI.cyan + displayValue + "\u2588" + ANSI.reset;
+  }
+  if (disabled) {
+    inputLine = ANSI.dim + displayValue + ANSI.reset;
+  }
+  lines.push(inputLine);
+  return lines;
+}
+function Input(props) {
+  return React.createElement("input", props);
+}
+function renderSelect(props, _context) {
+  const { options, value, label, focused, highlightedIndex } = props;
+  const lines = [];
+  if (label) {
+    lines.push(label);
+  }
+  const selected = options.find((opt) => opt.value === value);
+  if (focused) {
+    options.forEach((opt, idx) => {
+      let optLine = opt.label;
+      if (idx === highlightedIndex || opt.value === value) {
+        optLine = "\x1B[44m" + opt.label + ANSI.reset;
+      }
+      lines.push(optLine);
+    });
+  } else {
+    const selectedLabel = selected ? selected.label : "";
+    lines.push(selectedLabel + " \u25BC");
+  }
+  return lines;
+}
+function Select(props) {
+  return React.createElement("select", props);
+}
+function renderSidebar(props, context) {
+  const { children, width = 20, collapsed } = props;
+  const lines = [];
+  const childArray = Children.toArray(children);
+  for (const child of childArray) {
+    if (isValidElement(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 Sidebar(props) {
+  return React.createElement("sidebar", props);
+}
+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 SidebarItem(props) {
+  return React.createElement("sidebar-item", props);
+}
+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 React.createElement("breadcrumb", props);
+}
+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 React.createElement("badge", props);
+}
+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 React.createElement("dialog", props);
+}
+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 React.createElement("spinner", props);
+}
+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 React.createElement("button", props);
+}
+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 React.createElement("panel", props);
+}
+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 React.createElement("list", props);
+}
+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 React.createElement("card", props);
+}
+function Site(props) {
+  return React.createElement("site", props);
+}
+function Header(props) {
+  return React.createElement("header", props);
+}
+function Footer(props) {
+  return React.createElement("footer", props);
+}
+function Hero(props) {
+  return React.createElement("hero", props);
+}
+function Features(props) {
+  return React.createElement("features", props);
+}
+function Pricing(props) {
+  return React.createElement("pricing", props);
+}
+function FAQ(props) {
+  return React.createElement("faq", props);
+}
+function LandingPage(props) {
+  return React.createElement("landing-page", props);
+}
+function Page(props) {
+  return React.createElement("page", props);
+}
+function App(props) {
+  return React.createElement("app", props);
+}
+function Shell(props) {
+  return React.createElement("shell", props);
+}
+function Dashboard(props) {
+  return React.createElement("dashboard", props);
+}
+function Settings(props) {
+  return React.createElement("settings", props);
+}
+
+export {
+  renderComponent,
+  Box,
+  Text,
+  Table,
+  Input,
+  Select,
+  Sidebar,
+  SidebarItem,
+  Breadcrumb,
+  Badge,
+  Dialog,
+  Spinner,
+  Button,
+  Panel,
+  List,
+  Card,
+  Site,
+  Header,
+  Footer,
+  Hero,
+  Features,
+  Pricing,
+  FAQ,
+  LandingPage,
+  Page,
+  App,
+  Shell,
+  Dashboard,
+  Settings
+};