@tangle-network/sandbox-ui 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -97,7 +97,9 @@
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -164,6 +166,7 @@
     "nanostores": "^1.2.0",
     "react-markdown": "^10.1.0",
     "react-pdf": "^9.2.1",
+    "react-syntax-highlighter": "^16.1.1",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.0.2",
@@ -171,6 +174,12 @@
   },
   "devDependencies": {
     "@hocuspocus/provider": "^3.4.4",
+    "@storybook/addon-essentials": "^8",
+    "@storybook/addon-mcp": "^0.4.2",
+    "@storybook/react": "^8.6.18",
+    "@storybook/react-vite": "^8.6.18",
+    "@tailwindcss/postcss": "^4.2.2",
+    "@tailwindcss/vite": "^4.2.2",
     "@tanstack/react-query": "^5.91.0",
     "@tiptap/core": "^3.20.4",
     "@tiptap/extension-collaboration": "^3.20.4",
@@ -178,15 +187,18 @@
     "@tiptap/react": "^3.20.4",
     "@tiptap/starter-kit": "^3.20.4",
     "@types/react": "^19.1.2",
+    "@types/react-syntax-highlighter": "^15.5.13",
     "@types/turndown": "^5.0.6",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^6.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "storybook": "^8.6.18",
     "tailwindcss": "^4.1.4",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
+    "vite": "^8.0.3",
     "yjs": "^13.6.30"
   }
 }

package/dist/chunk-GRYHFH5O.js

@@ -1,110 +0,0 @@
-// src/hooks/use-pty-session.ts
-import { useState, useEffect, useRef, useCallback } from "react";
-function usePtySession({ apiUrl, token, onData }) {
-  const [isConnected, setIsConnected] = useState(false);
-  const [error, setError] = useState(null);
-  const sessionIdRef = useRef(null);
-  const eventSourceRef = useRef(null);
-  const retryTimerRef = useRef(void 0);
-  const mountedRef = useRef(true);
-  const onDataRef = useRef(onData);
-  onDataRef.current = onData;
-  const cleanup = useCallback(() => {
-    if (retryTimerRef.current) {
-      clearTimeout(retryTimerRef.current);
-      retryTimerRef.current = void 0;
-    }
-    if (eventSourceRef.current) {
-      eventSourceRef.current.close();
-      eventSourceRef.current = null;
-    }
-    if (sessionIdRef.current) {
-      const sid = sessionIdRef.current;
-      sessionIdRef.current = null;
-      fetch(`${apiUrl}/terminals/${sid}`, {
-        method: "DELETE",
-        headers: { Authorization: `Bearer ${token}` }
-      }).catch(() => {
-      });
-    }
-    setIsConnected(false);
-  }, [apiUrl, token]);
-  const connect = useCallback(async () => {
-    cleanup();
-    setError(null);
-    try {
-      const res = await fetch(`${apiUrl}/terminals`, {
-        method: "POST",
-        headers: {
-          Authorization: `Bearer ${token}`,
-          "Content-Type": "application/json"
-        }
-      });
-      if (!res.ok) {
-        throw new Error(`Failed to create terminal: ${res.status}`);
-      }
-      const body = await res.json();
-      const sessionId = body.data?.sessionId ?? body.sessionId;
-      if (!sessionId) throw new Error("No sessionId in response");
-      if (!mountedRef.current) return;
-      sessionIdRef.current = sessionId;
-      const streamUrl = `${apiUrl}/terminals/${sessionId}/stream?token=${encodeURIComponent(token)}`;
-      const es = new EventSource(streamUrl);
-      eventSourceRef.current = es;
-      es.onopen = () => {
-        if (mountedRef.current) {
-          setIsConnected(true);
-          setError(null);
-        }
-      };
-      es.onmessage = (event) => {
-        if (mountedRef.current && event.data) {
-          onDataRef.current(event.data);
-        }
-      };
-      es.onerror = () => {
-        if (!mountedRef.current) return;
-        es.close();
-        eventSourceRef.current = null;
-        setIsConnected(false);
-        retryTimerRef.current = setTimeout(() => {
-          if (mountedRef.current) connect();
-        }, 3e3);
-      };
-    } catch (err) {
-      if (mountedRef.current) {
-        setError(err instanceof Error ? err.message : "Terminal connection failed");
-        setIsConnected(false);
-      }
-    }
-  }, [apiUrl, token, cleanup]);
-  const sendCommand = useCallback(async (command) => {
-    const sid = sessionIdRef.current;
-    if (!sid) return;
-    const res = await fetch(`${apiUrl}/terminals/${sid}/execute`, {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${token}`,
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify({ command })
-    });
-    if (!res.ok) {
-      const text = await res.text();
-      throw new Error(text || `Execute failed: ${res.status}`);
-    }
-  }, [apiUrl, token]);
-  useEffect(() => {
-    mountedRef.current = true;
-    connect();
-    return () => {
-      mountedRef.current = false;
-      cleanup();
-    };
-  }, [connect, cleanup]);
-  return { isConnected, error, sendCommand, reconnect: connect };
-}
-
-export {
-  usePtySession
-};

package/dist/chunk-LTFK464G.js

@@ -1,103 +0,0 @@
-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-MXCSSOGH.js

@@ -1,105 +0,0 @@
-import {
-  cn
-} from "./chunk-RQHJBTEU.js";
-
-// src/primitives/card.tsx
-import * as React from "react";
-import { jsx } from "react/jsx-runtime";
-var Card = React.forwardRef(({ className, variant = "default", hover = false, ...props }, ref) => {
-  const variants = {
-    default: "bg-card border-border",
-    glass: "bg-card/60 backdrop-blur-xl border-border/50",
-    sandbox: "bg-card/80 backdrop-blur-xl border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        "rounded-xl border text-card-foreground transition-all duration-300",
-        variants[variant],
-        hover && "cursor-pointer hover:border-muted-foreground/50 hover:shadow-xl",
-        className
-      ),
-      ...props
-    }
-  );
-});
-Card.displayName = "Card";
-var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex flex-col space-y-1.5 p-6", className),
-    ...props
-  }
-));
-CardHeader.displayName = "CardHeader";
-var CardTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "h3",
-  {
-    ref,
-    className: cn("font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-CardTitle.displayName = "CardTitle";
-var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "p",
-  {
-    ref,
-    className: cn("text-muted-foreground text-sm", className),
-    ...props
-  }
-));
-CardDescription.displayName = "CardDescription";
-var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
-CardContent.displayName = "CardContent";
-var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  "div",
-  {
-    ref,
-    className: cn("flex items-center p-6 pt-0", className),
-    ...props
-  }
-));
-CardFooter.displayName = "CardFooter";
-
-// src/primitives/badge.tsx
-import { cva } from "class-variance-authority";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground",
-        secondary: "border-transparent bg-secondary text-secondary-foreground",
-        destructive: "border-transparent bg-destructive text-destructive-foreground",
-        outline: "text-foreground",
-        success: "border-green-500/20 border-transparent bg-green-500/10 text-green-400",
-        warning: "border-transparent border-yellow-500/20 bg-yellow-500/10 text-yellow-400",
-        error: "border-red-500/20 border-transparent bg-red-500/10 text-red-400",
-        info: "border-blue-500/20 border-transparent bg-blue-500/10 text-blue-400",
-        sandbox: "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--accent-text)]"
-      }
-    },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn(badgeVariants({ variant }), className), ...props });
-}
-
-export {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  badgeVariants,
-  Badge
-};