@tangle-network/ui 1.0.0

package/src/markdown/code-block.tsx

@@ -0,0 +1,198 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type HTMLAttributes,
+  type ReactNode,
+} from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { Check, Copy } from "lucide-react";
+import { cn } from "../lib/utils";
+
+// Theme-aware syntax highlighting — reads CSS custom properties at render time.
+// Override --syntax-* tokens in tokens.css per theme.
+function getSyntaxTheme(): { [key: string]: React.CSSProperties } {
+  const el = typeof document !== "undefined" ? document.documentElement : null;
+  const v = (name: string, fallback: string) =>
+    el ? getComputedStyle(el).getPropertyValue(name).trim() || fallback : fallback;
+
+  const comment  = v("--syntax-comment", "#6B7094");
+  const keyword  = v("--syntax-keyword", "#A78FFF");
+  const string   = v("--syntax-string", "#10b981");
+  const fn       = v("--syntax-function", "#6D9FFF");
+  const number   = v("--syntax-number", "#FFB347");
+  const meta     = v("--syntax-meta", "#8263FF");
+  const error    = v("--syntax-error", "#FF4D6D");
+  const variable = v("--syntax-variable", "#C4C0D8");
+  const fg       = v("--syntax-foreground", "#E8E6F6");
+
+  return {
+    "hljs-comment":           { color: comment, fontStyle: "italic" },
+    "hljs-quote":             { color: comment, fontStyle: "italic" },
+    "hljs-doctag":            { color: comment },
+    "hljs-keyword":           { color: keyword },
+    "hljs-selector-tag":      { color: keyword },
+    "hljs-literal":           { color: keyword },
+    "hljs-type":              { color: keyword },
+    "hljs-class":             { color: keyword },
+    "hljs-string":            { color: string },
+    "hljs-template-tag":      { color: string },
+    "hljs-template-variable": { color: string },
+    "hljs-addition":          { color: string },
+    "hljs-regexp":            { color: string },
+    "hljs-title":             { color: fn },
+    "hljs-section":           { color: fn },
+    "hljs-built_in":          { color: fn },
+    "hljs-name":              { color: fn },
+    "hljs-function":          { color: fn },
+    "hljs-selector-id":       { color: fn },
+    "hljs-selector-class":    { color: fn },
+    "hljs-attribute":         { color: fn },
+    "hljs-number":            { color: number },
+    "hljs-symbol":            { color: number },
+    "hljs-bullet":            { color: number },
+    "hljs-link":              { color: number, textDecoration: "underline" },
+    "hljs-meta":              { color: meta },
+    "hljs-selector-pseudo":   { color: meta },
+    "hljs-deletion":          { color: error },
+    "hljs-params":            { color: variable },
+    "hljs-variable":          { color: variable },
+    "hljs-tag":               { color: variable },
+    "hljs-attr":              { color: variable },
+    "hljs-subst":             { color: variable },
+    "hljs-strong":            { fontWeight: "bold" },
+    "hljs-emphasis":          { fontStyle: "italic" },
+    "hljs":                   { color: fg, background: "transparent" },
+  };
+}
+
+// tangleLight removed — getSyntaxTheme() reads --syntax-* CSS vars which are overridden
+// per theme in tokens.css (vault, dawn themes set light values).
+
+export interface CodeBlockProps extends HTMLAttributes<HTMLDivElement> {
+  code: string;
+  language?: string;
+  showLineNumbers?: boolean;
+  /** Force light theme; defaults to dark */
+  light?: boolean;
+  children?: ReactNode;
+}
+
+const LIGHT_THEMES = new Set(["vault", "dawn"]);
+
+function detectLightTheme() {
+  return (
+    typeof document !== "undefined" &&
+    LIGHT_THEMES.has(document.documentElement.getAttribute("data-sandbox-theme") ?? "")
+  );
+}
+
+function useIsLightTheme(): boolean {
+  const [isLight, setIsLight] = useState(detectLightTheme);
+
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    setIsLight(detectLightTheme());
+    const observer = new MutationObserver(() => setIsLight(detectLightTheme()));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-sandbox-theme"],
+    });
+    return () => observer.disconnect();
+  }, []);
+
+  return isLight;
+}
+
+export const CodeBlock = memo(
+  ({ code, language, showLineNumbers = false, light: lightProp, className, children, ...props }: CodeBlockProps) => {
+    const isLight = useIsLightTheme();
+    const light = lightProp ?? isLight;
+    const theme = getSyntaxTheme();
+    const bg = "bg-card border-border";
+    const headerBg = light ? "bg-muted/50 border-border" : "bg-background border-border";
+    const langColor = "text-muted-foreground";
+
+    return (
+      <div
+        className={cn("group relative overflow-hidden rounded-lg border font-mono", bg, className)}
+        {...props}
+      >
+        {language && (
+          <div className={cn("flex items-center justify-between border-b px-3 py-1", headerBg)}>
+            <span className={cn("text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest", langColor)}>
+              {language}
+            </span>
+            {children}
+          </div>
+        )}
+        {!language && children && (
+          <div className="absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100">
+            {children}
+          </div>
+        )}
+        <SyntaxHighlighter
+          language={language ?? "text"}
+          style={theme}
+          showLineNumbers={showLineNumbers}
+          lineNumberStyle={{
+            color: light ? "#8B92B8" : "#4A4D6A",
+            minWidth: "2.5em",
+            paddingRight: "1em",
+          }}
+          customStyle={{
+            margin: 0,
+            padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
+            background: "transparent",
+            fontSize: "var(--code-font-size, 0.8125rem)",
+            lineHeight: "var(--code-line-height, 1.5)",
+            overflowX: "auto",
+          }}
+          codeTagProps={{ style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } }}
+          wrapLines={false}
+        >
+          {code}
+        </SyntaxHighlighter>
+      </div>
+    );
+  },
+);
+CodeBlock.displayName = "CodeBlock";
+
+/** Copy-to-clipboard button for use inside CodeBlock. */
+export const CopyButton = memo(({ text }: { text: string }) => {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
+  }, []);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.warn("Clipboard write failed:", err);
+    }
+  }, [text]);
+
+  return (
+    <button
+      onClick={handleCopy}
+      className="flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-primary/20 transition-colors"
+      title="Copy to clipboard"
+    >
+      {copied ? (
+        <Check className="w-3.5 h-3.5 text-emerald-500" />
+      ) : (
+        <Copy className="w-3.5 h-3.5 text-muted-foreground" />
+      )}
+    </button>
+  );
+});
+CopyButton.displayName = "CopyButton";

package/src/markdown/index.ts

@@ -0,0 +1,2 @@
+export { Markdown, type MarkdownProps } from "./markdown";
+export { CodeBlock, CopyButton, type CodeBlockProps } from "./code-block";

package/src/markdown/markdown.stories.tsx

@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Markdown } from './markdown'
+import { CodeBlock, CopyButton } from './code-block'
+
+// ─── Markdown ────────────────────────────────────────────────────────────────
+
+const markdownMeta: Meta<typeof Markdown> = {
+  title: 'Markdown/Markdown',
+  component: Markdown,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+  decorators: [
+    (Story) => (
+      <div className="w-[680px] p-6 rounded-xl bg-card text-foreground">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default markdownMeta
+type Story = StoryObj<typeof Markdown>
+
+export const Prose: Story = {
+  name: 'Prose',
+  args: {
+    children: `# Getting Started
+
+Welcome to **sandbox-ui**. This library provides a set of composable components
+for building agent-powered interfaces.
+
+## Installation
+
+\`\`\`bash
+pnpm add @tangle/sandbox-ui
+\`\`\`
+
+## Usage
+
+Import the components you need:
+
+\`\`\`tsx
+import { ChatInput, DropZone, UploadProgress } from '@tangle/sandbox-ui'
+\`\`\`
+
+> **Note:** Components assume a Tailwind CSS v4 setup with the design tokens
+> provided by the sandbox theme.
+
+## Features
+
+- Composable chat input with drag-and-drop
+- File upload progress indicators
+- Full-window and sidebar drop zones
+- Dashboard primitives for sandbox monitoring
+`,
+  },
+}
+
+export const InlineCode: Story = {
+  name: 'Inline code',
+  args: {
+    children: `Use the \`onDrop\` prop to handle dropped files. The \`accept\` prop takes a comma-separated
+list of extensions like \`.pdf,.csv,.xlsx\`. When \`disabled\` is \`true\`, all drag events are ignored.`,
+  },
+}
+
+export const Table: Story = {
+  name: 'GFM table',
+  args: {
+    children: `| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| \`onDrop\` | \`(files: File[]) => void\` | — | Drop handler |
+| \`accept\` | \`string\` | \`undefined\` | Accepted extensions |
+| \`disabled\` | \`boolean\` | \`false\` | Disable drop zone |
+| \`title\` | \`string\` | \`"Drop files to upload"\` | Overlay title |
+`,
+  },
+}
+
+export const CodeFences: Story = {
+  name: 'Code fences (multiple languages)',
+  args: {
+    children: `### TypeScript
+
+\`\`\`typescript
+interface DropZoneProps {
+  onDrop: (files: File[]) => void
+  accept?: string
+  disabled?: boolean
+  children: ReactNode
+}
+\`\`\`
+
+### Shell
+
+\`\`\`bash
+pnpm build && pnpm storybook
+\`\`\`
+
+### JSON
+
+\`\`\`json
+{
+  "name": "@tangle/sandbox-ui",
+  "version": "0.4.0",
+  "type": "module"
+}
+\`\`\`
+`,
+  },
+}
+
+export const ListsAndTaskItems: Story = {
+  name: 'Lists & task items',
+  args: {
+    children: `## Checklist
+
+- [x] Drop zone overlay
+- [x] Sidebar drop zone
+- [x] Upload progress indicators
+- [ ] Resumable uploads
+- [ ] Multi-part S3 upload
+
+## Unordered list
+
+- Item one
+- Item two
+  - Nested item
+  - Another nested item
+- Item three
+
+## Ordered list
+
+1. Install dependencies
+2. Configure theme tokens
+3. Wrap your app with providers
+4. Import components
+`,
+  },
+}
+
+export const BlockquoteAndHR: Story = {
+  name: 'Blockquote & HR',
+  args: {
+    children: `> This component is designed to be a drop-in replacement for any file upload flow.
+> It handles edge cases like nested drag events, accept filtering, and disabled states.
+
+---
+
+Regular paragraph after a horizontal rule.
+`,
+  },
+}
+
+// ─── CodeBlock ───────────────────────────────────────────────────────────────
+
+export const CodeBlockOnly: Story = {
+  name: 'CodeBlock standalone',
+  render: () => (
+    <div className="w-[680px] p-6 rounded-xl bg-card space-y-4">
+      <CodeBlock code={`import { DropZone } from '@tangle/sandbox-ui'\n\nfunction App() {\n  return (\n    <DropZone onDrop={files => upload(files)}>\n      <Dashboard />\n    </DropZone>\n  )\n}`} language="tsx">
+        <CopyButton text="import { DropZone } from '@tangle/sandbox-ui'" />
+      </CodeBlock>
+      <CodeBlock code={`pnpm add @tangle/sandbox-ui`} language="bash">
+        <CopyButton text="pnpm add @tangle/sandbox-ui" />
+      </CodeBlock>
+    </div>
+  ),
+}
+
+export const CodeBlockNoLanguage: Story = {
+  name: 'CodeBlock — no language',
+  render: () => (
+    <div className="w-[680px] p-6 rounded-xl bg-card">
+      <CodeBlock code="DROP TABLE users;  -- don't run this" />
+    </div>
+  ),
+}
+
+export const CodeBlockLight: Story = {
+  name: 'CodeBlock — light theme',
+  parameters: { backgrounds: { default: 'light' } },
+  render: () => (
+    <div className="w-[680px] p-6 rounded-xl bg-white space-y-4">
+      <CodeBlock light code={`interface SandboxConfig {\n  model: string\n  timeout: number\n  env: Record<string, string>\n}\n\n// Create a new sandbox\nconst sandbox = await Sandbox.create(config)`} language="typescript">
+        <CopyButton text="interface SandboxConfig" />
+      </CodeBlock>
+      <CodeBlock light code={`pnpm add @tangle-network/sandbox-ui`} language="bash" />
+    </div>
+  ),
+}

package/src/markdown/markdown.tsx

@@ -0,0 +1,62 @@
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeSanitize from "rehype-sanitize";
+import { CodeBlock, CopyButton } from "./code-block";
+import { cn } from "../lib/utils";
+
+export interface MarkdownProps {
+  children: string;
+  className?: string;
+}
+
+/**
+ * Renders Markdown content with GFM support, XSS sanitisation, and
+ * custom code block rendering via our CodeBlock component.
+ */
+export const Markdown = memo(({ children, className }: MarkdownProps) => {
+  return (
+    <div
+      className={cn("prose prose-sm dark:prose-invert max-w-none", className)}
+    >
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeSanitize]}
+        components={{
+          pre({ children: preChildren }) {
+            return <>{preChildren}</>;
+          },
+          code({ className: codeClass, children: codeChildren, ...rest }) {
+            const match = /language-(\w+)/.exec(codeClass || "");
+            const language = match?.[1];
+            const code = String(codeChildren).replace(/\n$/, "");
+
+            // Inline code (no language fence)
+            if (!language && !code.includes("\n")) {
+              return (
+                <code
+                  className={cn(
+                    "px-1.5 py-0.5 rounded border border-border bg-card text-[var(--code-keyword)] text-[0.85em] font-mono",
+                    codeClass,
+                  )}
+                  {...rest}
+                >
+                  {codeChildren}
+                </code>
+              );
+            }
+
+            return (
+              <CodeBlock code={code} language={language}>
+                <CopyButton text={code} />
+              </CodeBlock>
+            );
+          },
+        }}
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+});
+Markdown.displayName = "Markdown";

package/src/openui/index.ts

@@ -0,0 +1,20 @@
+export {
+  OpenUIArtifactRenderer,
+  type OpenUIArtifactRendererProps,
+  type OpenUIAction,
+  type OpenUIPrimitive,
+  type OpenUIComponentNode,
+  type OpenUIHeadingNode,
+  type OpenUITextNode,
+  type OpenUIBadgeNode,
+  type OpenUIStatNode,
+  type OpenUIKeyValueNode,
+  type OpenUICodeNode,
+  type OpenUIMarkdownNode,
+  type OpenUITableNode,
+  type OpenUIActionsNode,
+  type OpenUISeparatorNode,
+  type OpenUIStackNode,
+  type OpenUIGridNode,
+  type OpenUICardNode,
+} from "./openui-artifact-renderer";