@tangle-network/sandbox-ui 0.2.0

package/dist/utils.js

@@ -0,0 +1,28 @@
+import {
+  copyText,
+  timeAgo
+} from "./chunk-QD4QE5P5.js";
+import {
+  formatDuration,
+  truncateText
+} from "./chunk-HRMUF35V.js";
+import {
+  TOOL_CATEGORY_ICONS,
+  getToolCategory,
+  getToolDisplayMetadata,
+  getToolErrorText
+} from "./chunk-QSQBDR3N.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+export {
+  TOOL_CATEGORY_ICONS,
+  cn,
+  copyText,
+  formatDuration,
+  getToolCategory,
+  getToolDisplayMetadata,
+  getToolErrorText,
+  timeAgo,
+  truncateText
+};

package/dist/workspace.d.ts

@@ -0,0 +1,113 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface WorkspaceLayoutProps {
+    /** Left sidebar content (file tree, navigation) */
+    left?: ReactNode;
+    /** Left sidebar header */
+    leftHeader?: ReactNode;
+    /** Center main content */
+    center: ReactNode;
+    /** Center header (session name, etc.) */
+    centerHeader?: ReactNode;
+    /** Center footer (input bar) */
+    centerFooter?: ReactNode;
+    /** Right panel content (preview, editor) */
+    right?: ReactNode;
+    /** Right panel header */
+    rightHeader?: ReactNode;
+    /** Bottom panel (terminal) */
+    bottom?: ReactNode;
+    /** Default left panel state */
+    defaultLeftOpen?: boolean;
+    /** Default right panel state */
+    defaultRightOpen?: boolean;
+    /** Default bottom panel state */
+    defaultBottomOpen?: boolean;
+    className?: string;
+}
+declare function WorkspaceLayout({ left, leftHeader, center, centerHeader, centerFooter, right, rightHeader, bottom, defaultLeftOpen, defaultRightOpen, defaultBottomOpen, className, }: WorkspaceLayoutProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * StatusBar — bottom bar with model selector, context badges, credits.
+ */
+interface ContextBadge {
+    id: string;
+    label: string;
+    count?: number;
+}
+interface StatusBarProps {
+    modelLabel?: string;
+    onModelClick?: () => void;
+    credits?: number;
+    contextBadges?: ContextBadge[];
+    onRemoveBadge?: (id: string) => void;
+    status?: "connected" | "connecting" | "disconnected" | "provisioning";
+    className?: string;
+}
+declare function StatusBar({ modelLabel, onModelClick, credits, contextBadges, onRemoveBadge, status, className, }: StatusBarProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * StatusBanner — full-width notification banner for connection/provisioning states.
+ */
+type BannerType = "provisioning" | "connecting" | "error" | "success" | "info";
+interface StatusBannerProps {
+    type: BannerType;
+    message: string;
+    detail?: string;
+    onDismiss?: () => void;
+    className?: string;
+}
+declare function StatusBanner({ type, message, detail, onDismiss, className }: StatusBannerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * AuditResults — structured pass/fail display for form audits.
+ */
+interface AuditCheck {
+    label: string;
+    expected: string | number;
+    actual?: string | number | null;
+    passed: boolean;
+    tolerance?: number;
+    fieldPath?: string;
+}
+interface FormAudit {
+    formId: string;
+    formName?: string;
+    found: boolean;
+    checks: AuditCheck[];
+    passed: number;
+    failed: number;
+}
+interface AuditResultsProps {
+    forms: FormAudit[];
+    crossFormChecks?: AuditCheck[];
+    overallScore?: number;
+    className?: string;
+}
+declare function AuditResults({ forms, crossFormChecks, overallScore, className }: AuditResultsProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Terminal — read-only terminal output panel.
+ *
+ * Shows agent's bash command output with basic ANSI color support.
+ * Collapsible, auto-scrolls to bottom.
+ */
+interface TerminalLine {
+    id: string;
+    text: string;
+    type: "command" | "stdout" | "stderr" | "system";
+    timestamp?: number;
+}
+interface TerminalProps {
+    lines: TerminalLine[];
+    title?: string;
+    isCollapsed?: boolean;
+    onToggle?: () => void;
+    onClose?: () => void;
+    maxHeight?: number;
+    className?: string;
+}
+declare function TerminalPanel({ lines, title, isCollapsed, onToggle, onClose, maxHeight, className, }: TerminalProps): react_jsx_runtime.JSX.Element;
+
+export { type AuditCheck, AuditResults, type AuditResultsProps, type BannerType, type ContextBadge, type FormAudit, StatusBanner, type StatusBannerProps, StatusBar, type StatusBarProps, type TerminalLine, TerminalPanel, type TerminalProps, WorkspaceLayout, type WorkspaceLayoutProps };

package/dist/workspace.js

@@ -0,0 +1,15 @@
+import {
+  AuditResults,
+  StatusBanner,
+  StatusBar,
+  TerminalPanel,
+  WorkspaceLayout
+} from "./chunk-KYY2X6LY.js";
+import "./chunk-RQHJBTEU.js";
+export {
+  AuditResults,
+  StatusBanner,
+  StatusBar,
+  TerminalPanel,
+  WorkspaceLayout
+};

package/package.json

@@ -0,0 +1,174 @@
+{
+  "name": "@tangle-network/sandbox-ui",
+  "version": "0.2.0",
+  "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./primitives": {
+      "import": "./dist/primitives.js",
+      "types": "./dist/primitives.d.ts"
+    },
+    "./chat": {
+      "import": "./dist/chat.js",
+      "types": "./dist/chat.d.ts"
+    },
+    "./run": {
+      "import": "./dist/run.js",
+      "types": "./dist/run.d.ts"
+    },
+    "./workspace": {
+      "import": "./dist/workspace.js",
+      "types": "./dist/workspace.d.ts"
+    },
+    "./files": {
+      "import": "./dist/files.js",
+      "types": "./dist/files.d.ts"
+    },
+    "./dashboard": {
+      "import": "./dist/dashboard.js",
+      "types": "./dist/dashboard.d.ts"
+    },
+    "./editor": {
+      "import": "./dist/editor.js",
+      "types": "./dist/editor.d.ts"
+    },
+    "./terminal": {
+      "import": "./dist/terminal.js",
+      "types": "./dist/terminal.d.ts"
+    },
+    "./markdown": {
+      "import": "./dist/markdown.js",
+      "types": "./dist/markdown.d.ts"
+    },
+    "./auth": {
+      "import": "./dist/auth.js",
+      "types": "./dist/auth.d.ts"
+    },
+    "./pages": {
+      "import": "./dist/pages.js",
+      "types": "./dist/pages.d.ts"
+    },
+    "./hooks": {
+      "import": "./dist/hooks.js",
+      "types": "./dist/hooks.d.ts"
+    },
+    "./stores": {
+      "import": "./dist/stores.js",
+      "types": "./dist/stores.d.ts"
+    },
+    "./types": {
+      "import": "./dist/types.js",
+      "types": "./dist/types.d.ts"
+    },
+    "./utils": {
+      "import": "./dist/utils.js",
+      "types": "./dist/utils.d.ts"
+    },
+    "./styles": "./dist/styles.css",
+    "./globals.css": "./src/styles/globals.css",
+    "./tailwind": "./tailwind.config.cjs"
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "tailwind.config.cjs"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "@xterm/xterm": {
+      "optional": true
+    },
+    "@xterm/addon-fit": {
+      "optional": true
+    },
+    "@xterm/addon-web-links": {
+      "optional": true
+    },
+    "@tanstack/react-query": {
+      "optional": true
+    },
+    "nanostores": {
+      "optional": true
+    },
+    "@nanostores/react": {
+      "optional": true
+    },
+    "@hocuspocus/provider": {
+      "optional": true
+    },
+    "@tiptap/core": {
+      "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "@tiptap/extension-collaboration": {
+      "optional": true
+    },
+    "@tiptap/extension-collaboration-cursor": {
+      "optional": true
+    },
+    "yjs": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.469.0",
+    "react-markdown": "^10.1.0",
+    "react-pdf": "^9.2.1",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.0.2"
+  },
+  "devDependencies": {
+    "@hocuspocus/provider": "^3.4.4",
+    "@nanostores/react": "^1.1.0",
+    "@tanstack/react-query": "^5.91.0",
+    "@tiptap/core": "^3.20.4",
+    "@tiptap/extension-collaboration": "^3.20.4",
+    "@tiptap/extension-collaboration-cursor": "^2.26.2",
+    "@tiptap/react": "^3.20.4",
+    "@tiptap/starter-kit": "^3.20.4",
+    "@types/react": "^19.1.2",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/xterm": "^6.0.0",
+    "nanostores": "^1.2.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.4",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3",
+    "yjs": "^13.6.30"
+  }
+}

package/src/styles/globals.css

@@ -0,0 +1,230 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 98%;
+    --foreground: 0 0% 9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 9%;
+    --primary: 270 80% 55%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 94%;
+    --secondary-foreground: 0 0% 20%;
+    --muted: 0 0% 94%;
+    --muted-foreground: 0 0% 40%;
+    --accent: 0 0% 94%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 88%;
+    --input: 0 0% 88%;
+    --ring: 270 80% 55%;
+    --radius: 0.625rem;
+
+    /* Product accent colors -- Tangle purple */
+    --sandbox: 270 80% 55%;
+    --sandbox-glow: 270 75% 58%;
+
+    /* Status colors */
+    --success: 142 71% 40%;
+    --warning: 38 92% 45%;
+    --error: 0 84% 55%;
+    --info: 217 91% 55%;
+  }
+
+  .dark {
+    --background: 0 0% 5%;
+    --foreground: 0 0% 96%;
+    --card: 0 0% 8%;
+    --card-foreground: 0 0% 96%;
+    --popover: 0 0% 8%;
+    --popover-foreground: 0 0% 96%;
+    --primary: 0 0% 96%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14%;
+    --secondary-foreground: 0 0% 96%;
+    --muted: 0 0% 14%;
+    --muted-foreground: 0 0% 72%;
+    --accent: 0 0% 16%;
+    --accent-foreground: 0 0% 96%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 96%;
+    --border: 0 0% 18%;
+    --input: 0 0% 18%;
+    --ring: 0 0% 83.1%;
+
+    --sandbox: 270 95% 65%;
+    --sandbox-glow: 270 90% 66%;
+
+    --success: 142 71% 45%;
+    --warning: 38 92% 50%;
+    --error: 0 84% 60%;
+    --info: 217 91% 60%;
+  }
+
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+
+  /* Custom scrollbar */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply bg-border rounded-full;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-muted-foreground/50;
+  }
+}
+
+@layer utilities {
+  /* Gradient text -- Tangle purple */
+  .text-gradient-sandbox {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-violet-400;
+  }
+
+  /* Glow effects */
+  .glow-sandbox {
+    box-shadow: 0 0 40px -10px hsl(var(--sandbox) / 0.4);
+  }
+
+  /* Glass effect */
+  .glass {
+    @apply bg-card/80 backdrop-blur-xl border border-border/50;
+  }
+
+  /* Subtle noise texture */
+  .noise {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+    opacity: 0.02;
+  }
+
+  /* Terminal styling */
+  .terminal-cursor {
+    @apply inline-block w-2 h-5 bg-foreground animate-pulse;
+  }
+
+  /* Shimmer animation */
+  .shimmer {
+    background: linear-gradient(
+      90deg,
+      hsl(var(--muted)) 0%,
+      hsl(var(--accent)) 50%,
+      hsl(var(--muted)) 100%
+    );
+    background-size: 200% 100%;
+    animation: shimmer 2s infinite;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200% 0;
+    }
+    100% {
+      background-position: 200% 0;
+    }
+  }
+
+  /* Fade in animation */
+  .animate-in {
+    animation: fade-in 0.3s ease-out;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  /* Pulse ring animation */
+  .pulse-ring {
+    @apply relative;
+  }
+
+  .pulse-ring::before {
+    content: "";
+    @apply absolute inset-0 rounded-full;
+    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  @keyframes pulse-ring {
+    0%,
+    100% {
+      box-shadow: 0 0 0 0 currentColor;
+      opacity: 0.4;
+    }
+    50% {
+      box-shadow: 0 0 0 8px currentColor;
+      opacity: 0;
+    }
+  }
+}
+
+/* Fonts -- Inter (UI) + JetBrains Mono (code).
+   Using @font-face with font-display: swap to avoid render-blocking. */
+@font-face {
+  font-family: "Inter";
+  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI2fAZ9hiA.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter";
+  src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYAZ9hiA.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOV.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTPlOV.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}

package/src/styles/tokens.css

@@ -0,0 +1,73 @@
+/* Tangle Design System Tokens */
+
+:root {
+  /* Brand gradient */
+  --tangle-gradient: linear-gradient(135deg, #8E59FF, #6888F9);
+  --tangle-gradient-text: linear-gradient(45deg, #5f5bee, #465cd2);
+
+  /* Backgrounds */
+  --bg-root: #000000;
+  --bg-dark: #1f1d2b;
+  --bg-card: #161425;
+  --bg-elevated: #1e1c30;
+  --bg-section: #171528;
+  --bg-input: #141428;
+  --bg-hover: #1a1a30;
+
+  /* Text */
+  --text-primary: #ffffff;
+  --text-secondary: #aab0bc;
+  --text-muted: #6b7094;
+
+  /* Brand */
+  --brand-primary: #605dba;
+  --brand-strong: #6941c6;
+  --brand-cool: #6172f3;
+  --brand-glow: #9e77ed;
+  --brand-purple: #7f56d9;
+  --brand-vibrant: #4a3aff;
+
+  /* Borders */
+  --border-subtle: rgba(255, 255, 255, 0.06);
+  --border-default: rgba(255, 255, 255, 0.08);
+  --border-hover: rgba(255, 255, 255, 0.1);
+  --border-accent: rgba(142, 89, 255, 0.2);
+  --border-accent-hover: rgba(142, 89, 255, 0.4);
+
+  /* Buttons */
+  --btn-primary-bg: #1e116e;
+  --btn-primary-hover: #281ca5;
+  --btn-cta-bg: #ffffff;
+  --btn-cta-text: #1d1d1d;
+
+  /* Code syntax */
+  --code-keyword: #c084fc;
+  --code-string: #a78bfa;
+  --code-function: #60a5fa;
+  --code-number: #fcd34d;
+  --code-success: #4ade80;
+  --code-comment: rgba(255, 255, 255, 0.25);
+  --code-error: #f87171;
+
+  /* Shadows */
+  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(142, 89, 255, 0.1);
+  --shadow-dropdown: 0 20px 60px rgba(0, 0, 0, 0.5);
+  --shadow-glow: 0 0 40px rgba(130, 99, 255, 0.15);
+
+  /* Radii */
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 1.25rem;
+  --radius-xl: 1.5rem;
+  --radius-pill: 48px;
+  --radius-full: 62.5rem;
+
+  /* Transitions */
+  --transition-fast: 0.15s ease;
+  --transition-default: 0.2s ease;
+  --transition-medium: 0.3s ease;
+
+  /* Fonts */
+  --font-sans: 'Satoshi', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+}