@tangle-network/sandbox-ui 0.2.0

package/dist/chunk-L6ZDH5F4.js

@@ -0,0 +1,334 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/files/file-tree.tsx
+import { useState } from "react";
+import {
+  File,
+  FileText,
+  FileCode,
+  FileSpreadsheet,
+  FileImage,
+  Folder,
+  FolderOpen,
+  ChevronRight,
+  FileJson
+} from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FILE_ICONS = {
+  pdf: FileText,
+  csv: FileSpreadsheet,
+  xlsx: FileSpreadsheet,
+  xls: FileSpreadsheet,
+  py: FileCode,
+  ts: FileCode,
+  js: FileCode,
+  json: FileJson,
+  yaml: FileCode,
+  yml: FileCode,
+  md: FileText,
+  txt: FileText,
+  png: FileImage,
+  jpg: FileImage,
+  jpeg: FileImage,
+  gif: FileImage,
+  svg: FileImage
+};
+function getFileIcon(name) {
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+  return FILE_ICONS[ext] || File;
+}
+function getFileColor(name) {
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+  switch (ext) {
+    case "pdf":
+      return "text-red-400";
+    case "py":
+      return "text-yellow-400";
+    case "ts":
+    case "js":
+      return "text-blue-400";
+    case "json":
+      return "text-green-400";
+    case "yaml":
+    case "yml":
+      return "text-purple-400";
+    case "csv":
+    case "xlsx":
+      return "text-emerald-400";
+    case "md":
+      return "text-[var(--text-secondary)]";
+    default:
+      return "text-[var(--text-muted)]";
+  }
+}
+function TreeNode({ node, depth, selectedPath, onSelect, defaultExpanded }) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const isSelected = node.path === selectedPath;
+  const isDir = node.type === "directory";
+  const handleClick = () => {
+    if (isDir) {
+      setExpanded(!expanded);
+    }
+    onSelect?.(node.path, node);
+  };
+  const Icon = isDir ? expanded ? FolderOpen : Folder : getFileIcon(node.name);
+  const iconColor = isDir ? "text-[var(--brand-cool)]" : getFileColor(node.name);
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleClick,
+        className: cn(
+          "flex items-center gap-1.5 w-full text-left px-2 py-1 rounded-[var(--radius-sm)] text-sm transition-colors",
+          "hover:bg-[var(--bg-hover)]",
+          isSelected && "bg-[var(--brand-cool)]/10 text-[var(--text-primary)]",
+          !isSelected && "text-[var(--text-secondary)]"
+        ),
+        style: { paddingLeft: `${depth * 16 + 8}px` },
+        children: [
+          isDir && /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: cn(
+                "h-3 w-3 shrink-0 text-[var(--text-muted)] transition-transform",
+                expanded && "rotate-90"
+              )
+            }
+          ),
+          !isDir && /* @__PURE__ */ jsx("span", { className: "w-3" }),
+          /* @__PURE__ */ jsx(Icon, { className: cn("h-4 w-4 shrink-0", iconColor) }),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: node.name }),
+          node.size !== void 0 && !isDir && /* @__PURE__ */ jsx("span", { className: "text-[var(--text-muted)] text-xs ml-auto tabular-nums", children: formatSize(node.size) })
+        ]
+      }
+    ),
+    isDir && expanded && node.children && /* @__PURE__ */ jsx("div", { children: node.children.sort((a, b) => {
+      if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+      return a.name.localeCompare(b.name);
+    }).map((child) => /* @__PURE__ */ jsx(
+      TreeNode,
+      {
+        node: child,
+        depth: depth + 1,
+        selectedPath,
+        onSelect,
+        defaultExpanded
+      },
+      child.path
+    )) })
+  ] });
+}
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes}B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}K`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}M`;
+}
+function FileTree({ root, selectedPath, onSelect, className, defaultExpanded = true }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("text-sm font-[var(--font-sans)]", className), children: root.children ? root.children.sort((a, b) => {
+    if (a.type !== b.type) return a.type === "directory" ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  }).map((child) => /* @__PURE__ */ jsx(
+    TreeNode,
+    {
+      node: child,
+      depth: 0,
+      selectedPath,
+      onSelect,
+      defaultExpanded
+    },
+    child.path
+  )) : /* @__PURE__ */ jsx(
+    TreeNode,
+    {
+      node: root,
+      depth: 0,
+      selectedPath,
+      onSelect,
+      defaultExpanded
+    }
+  ) });
+}
+
+// src/files/file-preview.tsx
+import {
+  Download,
+  X,
+  FileText as FileText2
+} from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function getPreviewType(filename, mimeType) {
+  const ext = filename.split(".").pop()?.toLowerCase() || "";
+  if (mimeType?.startsWith("application/pdf") || ext === "pdf") return "pdf";
+  if (mimeType?.startsWith("image/") || ["png", "jpg", "jpeg", "gif", "svg", "webp"].includes(ext)) return "image";
+  if (["csv"].includes(ext)) return "csv";
+  if (["xlsx", "xls"].includes(ext)) return "spreadsheet";
+  if (["py", "ts", "js", "tsx", "jsx", "sh", "bash"].includes(ext)) return "code";
+  if (["json"].includes(ext)) return "json";
+  if (["yaml", "yml"].includes(ext)) return "yaml";
+  if (["md", "markdown"].includes(ext)) return "markdown";
+  if (["txt", "log", "text"].includes(ext)) return "text";
+  return "unknown";
+}
+function CodePreview({ content, filename }) {
+  const lines = content.split("\n");
+  return /* @__PURE__ */ jsxs2("div", { className: "relative bg-[var(--bg-input)] rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-4 py-2.5 border-b border-[var(--border-subtle)]", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex gap-1.5", children: [
+        /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-[#FF5F57]" }),
+        /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-[#FEBC2E]" }),
+        /* @__PURE__ */ jsx2("div", { className: "w-3 h-3 rounded-full bg-[#8E59FF]" })
+      ] }),
+      /* @__PURE__ */ jsx2("span", { className: "text-xs text-[var(--text-muted)] font-[var(--font-mono)] ml-2", children: filename })
+    ] }),
+    /* @__PURE__ */ jsx2("div", { className: "overflow-auto max-h-[70vh]", children: /* @__PURE__ */ jsx2("table", { className: "w-full", children: /* @__PURE__ */ jsx2("tbody", { children: lines.map((line, i) => /* @__PURE__ */ jsxs2("tr", { className: "hover:bg-[var(--bg-hover)]/50", children: [
+      /* @__PURE__ */ jsx2("td", { className: "text-right pr-4 pl-4 py-0 select-none text-[var(--text-muted)] text-xs font-[var(--font-mono)] w-10 align-top leading-[1.55]", children: i + 1 }),
+      /* @__PURE__ */ jsx2("td", { className: "pr-4 py-0 font-[var(--font-mono)] text-[13px] text-[var(--text-secondary)] leading-[1.55] whitespace-pre", children: line || " " })
+    ] }, i)) }) }) })
+  ] });
+}
+function CsvPreview({ content }) {
+  const lines = content.trim().split("\n");
+  if (lines.length === 0) return null;
+  const headers = lines[0].split(",").map((h) => h.trim().replace(/^"|"$/g, ""));
+  const rows = lines.slice(1).map(
+    (line) => line.split(",").map((cell) => cell.trim().replace(/^"|"$/g, ""))
+  );
+  return /* @__PURE__ */ jsx2("div", { className: "overflow-auto max-h-[70vh] rounded-[var(--radius-md)] border border-[var(--border-subtle)]", children: /* @__PURE__ */ jsxs2("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx2("thead", { children: /* @__PURE__ */ jsx2("tr", { className: "bg-[var(--bg-elevated)] sticky top-0", children: headers.map((h, i) => /* @__PURE__ */ jsx2(
+      "th",
+      {
+        className: "px-3 py-2 text-left text-xs font-semibold text-[var(--text-secondary)] border-b border-[var(--border-subtle)] whitespace-nowrap",
+        children: h
+      },
+      i
+    )) }) }),
+    /* @__PURE__ */ jsx2("tbody", { children: rows.map((row, i) => /* @__PURE__ */ jsx2("tr", { className: "border-b border-[var(--border-subtle)] hover:bg-[var(--bg-hover)]/50", children: row.map((cell, j) => /* @__PURE__ */ jsx2(
+      "td",
+      {
+        className: "px-3 py-1.5 text-[var(--text-secondary)] font-[var(--font-mono)] text-xs whitespace-nowrap",
+        children: cell
+      },
+      j
+    )) }, i)) })
+  ] }) });
+}
+function ImagePreview({ src, filename }) {
+  return /* @__PURE__ */ jsx2("div", { className: "flex items-center justify-center p-4 bg-[var(--bg-input)] rounded-[var(--radius-md)] border border-[var(--border-subtle)]", children: /* @__PURE__ */ jsx2("img", { src, alt: filename, className: "max-w-full max-h-[70vh] object-contain rounded" }) });
+}
+function PdfPreview({ blobUrl, filename }) {
+  return /* @__PURE__ */ jsx2("div", { className: "rounded-[var(--radius-md)] border border-[var(--border-subtle)] overflow-hidden bg-[var(--bg-input)]", children: /* @__PURE__ */ jsx2(
+    "iframe",
+    {
+      src: blobUrl,
+      title: filename,
+      className: "w-full h-[70vh] border-0"
+    }
+  ) });
+}
+function TextPreview({ content }) {
+  return /* @__PURE__ */ jsx2("pre", { className: "bg-[var(--bg-input)] rounded-[var(--radius-md)] border border-[var(--border-subtle)] p-4 overflow-auto max-h-[70vh] text-sm text-[var(--text-secondary)] font-[var(--font-mono)] leading-[1.55]", children: content });
+}
+function EmptyPreview({ filename }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-16 text-[var(--text-muted)]", children: [
+    /* @__PURE__ */ jsx2(FileText2, { className: "h-12 w-12 mb-3 opacity-30" }),
+    /* @__PURE__ */ jsxs2("p", { className: "text-sm", children: [
+      "Cannot preview ",
+      filename
+    ] }),
+    /* @__PURE__ */ jsx2("p", { className: "text-xs mt-1", children: "Download to view this file" })
+  ] });
+}
+function FilePreview({
+  filename,
+  content,
+  blobUrl,
+  mimeType,
+  onClose,
+  onDownload,
+  className
+}) {
+  const previewType = getPreviewType(filename, mimeType);
+  return /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col h-full", className), children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 px-3 py-2 border-b border-[var(--border-subtle)] shrink-0", children: [
+      /* @__PURE__ */ jsx2("span", { className: "text-sm font-medium text-[var(--text-primary)] truncate flex-1", children: filename }),
+      onDownload && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: onDownload,
+          className: "p-1.5 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors",
+          children: /* @__PURE__ */ jsx2(Download, { className: "h-4 w-4" })
+        }
+      ),
+      onClose && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: onClose,
+          className: "p-1.5 rounded-[var(--radius-sm)] hover:bg-[var(--bg-hover)] text-[var(--text-muted)] hover:text-[var(--text-secondary)] transition-colors",
+          children: /* @__PURE__ */ jsx2(X, { className: "h-4 w-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex-1 overflow-auto p-3", children: [
+      previewType === "pdf" && blobUrl && /* @__PURE__ */ jsx2(PdfPreview, { blobUrl, filename }),
+      previewType === "image" && (blobUrl || content) && /* @__PURE__ */ jsx2(ImagePreview, { src: blobUrl || `data:image/*;base64,${content}`, filename }),
+      previewType === "csv" && content && /* @__PURE__ */ jsx2(CsvPreview, { content }),
+      (previewType === "code" || previewType === "json" || previewType === "yaml") && content && /* @__PURE__ */ jsx2(CodePreview, { content, filename }),
+      previewType === "text" && content && /* @__PURE__ */ jsx2(TextPreview, { content }),
+      previewType === "markdown" && content && /* @__PURE__ */ jsx2(TextPreview, { content }),
+      previewType === "unknown" && /* @__PURE__ */ jsx2(EmptyPreview, { filename }),
+      !content && !blobUrl && /* @__PURE__ */ jsx2(EmptyPreview, { filename })
+    ] })
+  ] });
+}
+
+// src/files/file-tabs.tsx
+import { X as X2, FileText as FileText3, FileCode as FileCode2, FileSpreadsheet as FileSpreadsheet2 } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function getTabIcon(name) {
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+  if (["pdf"].includes(ext)) return FileText3;
+  if (["csv", "xlsx"].includes(ext)) return FileSpreadsheet2;
+  return FileCode2;
+}
+function FileTabs({ tabs, activeId, onSelect, onClose, className }) {
+  if (tabs.length === 0) return null;
+  return /* @__PURE__ */ jsx3("div", { className: cn("flex items-center border-b border-[var(--border-subtle)] bg-[var(--bg-dark)] overflow-x-auto", className), children: tabs.map((tab) => {
+    const isActive = tab.id === activeId;
+    const Icon = getTabIcon(tab.name);
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: () => onSelect(tab.id),
+        className: cn(
+          "group flex items-center gap-1.5 px-3 py-1.5 text-xs border-r border-[var(--border-subtle)] shrink-0 transition-colors",
+          isActive ? "bg-[var(--bg-card)] text-[var(--text-primary)] border-b-2 border-b-[var(--brand-cool)]" : "text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:bg-[var(--bg-elevated)]"
+        ),
+        children: [
+          /* @__PURE__ */ jsx3(Icon, { className: "h-3 w-3 shrink-0" }),
+          /* @__PURE__ */ jsx3("span", { className: "truncate max-w-[120px]", children: tab.name }),
+          tab.dirty && /* @__PURE__ */ jsx3("span", { className: "w-1.5 h-1.5 rounded-full bg-[var(--brand-cool)]" }),
+          /* @__PURE__ */ jsx3(
+            "span",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onClose(tab.id);
+              },
+              className: "p-0.5 rounded hover:bg-[var(--bg-hover)] opacity-0 group-hover:opacity-100 transition-opacity",
+              children: /* @__PURE__ */ jsx3(X2, { className: "h-2.5 w-2.5" })
+            }
+          )
+        ]
+      },
+      tab.id
+    );
+  }) });
+}
+
+export {
+  FileTree,
+  FilePreview,
+  FileTabs
+};

package/dist/chunk-LTFK464G.js

@@ -0,0 +1,103 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/markdown/code-block.tsx
+import {
+  memo,
+  useCallback,
+  useState
+} from "react";
+import { Check, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CodeBlock = memo(
+  ({ code, language, className, children, ...props }) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("relative overflow-hidden rounded-lg", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("pre", { className: "m-0 p-4 overflow-x-auto text-sm font-mono bg-neutral-100 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-100", children: /* @__PURE__ */ jsx("code", { className: language ? `language-${language}` : void 0, children: code }) }),
+          children && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 flex items-center gap-2", children })
+        ] })
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+var CopyButton = memo(({ text }) => {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [text]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleCopy,
+      className: "flex items-center justify-center w-7 h-7 rounded-md bg-black/10 dark:bg-white/10 hover:bg-black/20 dark:hover:bg-white/20 transition-colors",
+      title: "Copy to clipboard",
+      children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-green-500 dark:text-green-400" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5 text-neutral-400" })
+    }
+  );
+});
+CopyButton.displayName = "CopyButton";
+
+// src/markdown/markdown.tsx
+import { memo as memo2 } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeSanitize from "rehype-sanitize";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var Markdown = memo2(({ children, className }) => {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn("prose prose-sm dark:prose-invert max-w-none", className),
+      children: /* @__PURE__ */ jsx2(
+        ReactMarkdown,
+        {
+          remarkPlugins: [remarkGfm],
+          rehypePlugins: [rehypeSanitize],
+          components: {
+            pre({ children: preChildren }) {
+              return /* @__PURE__ */ jsx2(Fragment, { children: preChildren });
+            },
+            code({ className: codeClass, children: codeChildren, ...rest }) {
+              const match = /language-(\w+)/.exec(codeClass || "");
+              const language = match?.[1];
+              const code = String(codeChildren).replace(/\n$/, "");
+              if (!language && !code.includes("\n")) {
+                return /* @__PURE__ */ jsx2(
+                  "code",
+                  {
+                    className: cn(
+                      "px-1.5 py-0.5 rounded bg-neutral-200/50 dark:bg-neutral-800/50 text-sm font-mono",
+                      codeClass
+                    ),
+                    ...rest,
+                    children: codeChildren
+                  }
+                );
+              }
+              return /* @__PURE__ */ jsx2(CodeBlock, { code, language, children: /* @__PURE__ */ jsx2(CopyButton, { text: code }) });
+            }
+          },
+          children
+        }
+      )
+    }
+  );
+});
+Markdown.displayName = "Markdown";
+
+export {
+  CodeBlock,
+  CopyButton,
+  Markdown
+};

package/dist/chunk-M34OA6PQ.js

@@ -0,0 +1,233 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/markdown/simple-markdown.tsx
+import { jsx } from "react/jsx-runtime";
+function SimpleMarkdown({ content, className }) {
+  const html = renderMarkdown(content);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("tangle-prose", className),
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function renderInline(text) {
+  let result = escapeHtml(text);
+  result = result.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+  result = result.replace(/__(.+?)__/g, "<strong>$1</strong>");
+  result = result.replace(/\*(.+?)\*/g, "<em>$1</em>");
+  result = result.replace(/_(.+?)_/g, "<em>$1</em>");
+  result = result.replace(/`([^`]+)`/g, '<code class="tangle-inline-code">$1</code>');
+  result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener" class="tangle-link">$1</a>');
+  return result;
+}
+function renderMarkdown(md) {
+  const lines = md.split("\n");
+  const output = [];
+  let i = 0;
+  let inList = false;
+  let listType = "ul";
+  const closeList = () => {
+    if (inList) {
+      output.push(`</${listType}>`);
+      inList = false;
+    }
+  };
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line.startsWith("```")) {
+      closeList();
+      const lang = line.slice(3).trim();
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith("```")) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      i++;
+      const code = escapeHtml(codeLines.join("\n"));
+      output.push(`<div class="tangle-code-block">`);
+      if (lang) output.push(`<div class="tangle-code-lang">${escapeHtml(lang)}</div>`);
+      output.push(`<pre><code>${code}</code></pre></div>`);
+      continue;
+    }
+    if (line.includes("|") && i + 1 < lines.length && /^\s*\|?[\s-:|]+\|/.test(lines[i + 1])) {
+      closeList();
+      const headers = line.split("|").map((h) => h.trim()).filter(Boolean);
+      i += 2;
+      output.push('<div class="tangle-table-wrap"><table class="tangle-table">');
+      output.push("<thead><tr>");
+      for (const h of headers) output.push(`<th>${renderInline(h)}</th>`);
+      output.push("</tr></thead><tbody>");
+      while (i < lines.length && lines[i].includes("|")) {
+        const cells = lines[i].split("|").map((c) => c.trim()).filter(Boolean);
+        output.push("<tr>");
+        for (const c of cells) output.push(`<td>${renderInline(c)}</td>`);
+        output.push("</tr>");
+        i++;
+      }
+      output.push("</tbody></table></div>");
+      continue;
+    }
+    const headingMatch = line.match(/^(#{1,6})\s+(.+)/);
+    if (headingMatch) {
+      closeList();
+      const level = headingMatch[1].length;
+      output.push(`<h${level} class="tangle-h${level}">${renderInline(headingMatch[2])}</h${level}>`);
+      i++;
+      continue;
+    }
+    if (line.startsWith("> ")) {
+      closeList();
+      const quoteLines = [];
+      while (i < lines.length && lines[i].startsWith("> ")) {
+        quoteLines.push(lines[i].slice(2));
+        i++;
+      }
+      output.push(`<blockquote class="tangle-blockquote">${quoteLines.map(renderInline).join("<br>")}</blockquote>`);
+      continue;
+    }
+    if (/^[\s]*[-*+]\s/.test(line)) {
+      if (!inList || listType !== "ul") {
+        closeList();
+        output.push('<ul class="tangle-list">');
+        inList = true;
+        listType = "ul";
+      }
+      output.push(`<li>${renderInline(line.replace(/^[\s]*[-*+]\s/, ""))}</li>`);
+      i++;
+      continue;
+    }
+    if (/^[\s]*\d+\.\s/.test(line)) {
+      if (!inList || listType !== "ol") {
+        closeList();
+        output.push('<ol class="tangle-list tangle-list-ordered">');
+        inList = true;
+        listType = "ol";
+      }
+      output.push(`<li>${renderInline(line.replace(/^[\s]*\d+\.\s/, ""))}</li>`);
+      i++;
+      continue;
+    }
+    if (/^[-*_]{3,}\s*$/.test(line)) {
+      closeList();
+      output.push('<hr class="tangle-hr">');
+      i++;
+      continue;
+    }
+    if (!line.trim()) {
+      closeList();
+      i++;
+      continue;
+    }
+    closeList();
+    output.push(`<p>${renderInline(line)}</p>`);
+    i++;
+  }
+  closeList();
+  return output.join("\n");
+}
+var simpleMarkdownStyles = `
+.tangle-prose {
+  font-family: var(--font-sans);
+  color: var(--text-primary);
+  font-size: 0.9375rem;
+  line-height: 1.6;
+}
+.tangle-prose p { margin: 0.5em 0; }
+.tangle-prose p:last-child { margin-bottom: 0; }
+.tangle-h1 { font-size: 1.5rem; font-weight: 700; margin: 1em 0 0.5em; }
+.tangle-h2 { font-size: 1.25rem; font-weight: 700; margin: 1em 0 0.5em; }
+.tangle-h3 { font-size: 1.1rem; font-weight: 600; margin: 0.75em 0 0.4em; }
+.tangle-h4, .tangle-h5, .tangle-h6 { font-size: 1rem; font-weight: 600; margin: 0.5em 0 0.3em; }
+.tangle-inline-code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  background: var(--bg-input);
+  border: 1px solid var(--border-subtle);
+  border-radius: 4px;
+  padding: 0.15em 0.4em;
+}
+.tangle-code-block {
+  position: relative;
+  margin: 0.75em 0;
+  background: var(--bg-input);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+.tangle-code-lang {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.tangle-code-block pre {
+  margin: 0;
+  padding: 1rem;
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--text-secondary);
+}
+.tangle-link {
+  color: var(--brand-cool);
+  text-decoration: none;
+}
+.tangle-link:hover { text-decoration: underline; }
+.tangle-blockquote {
+  border-left: 3px solid var(--border-accent);
+  padding: 0.5em 1em;
+  margin: 0.5em 0;
+  color: var(--text-secondary);
+}
+.tangle-list {
+  margin: 0.5em 0;
+  padding-left: 1.5em;
+}
+.tangle-list li { margin: 0.2em 0; }
+.tangle-list-ordered { list-style-type: decimal; }
+.tangle-table-wrap { overflow-x: auto; margin: 0.75em 0; }
+.tangle-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.tangle-table th {
+  text-align: left;
+  padding: 0.5em 0.75em;
+  border-bottom: 2px solid var(--border-default);
+  font-weight: 600;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+.tangle-table td {
+  padding: 0.4em 0.75em;
+  border-bottom: 1px solid var(--border-subtle);
+  color: var(--text-secondary);
+}
+.tangle-table tr:hover td { background: var(--bg-hover); }
+.tangle-hr {
+  border: none;
+  border-top: 1px solid var(--border-subtle);
+  margin: 1em 0;
+}
+strong { font-weight: 700; }
+em { font-style: italic; }
+`;
+
+export {
+  SimpleMarkdown,
+  simpleMarkdownStyles
+};