@tangle-network/ui 1.0.0

package/src/primitives/code-block.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { CodeBlock, InlineCode } from './code-block'
+
+const meta: Meta<typeof CodeBlock> = {
+  title: 'Primitives/CodeBlock',
+  component: CodeBlock,
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj<typeof CodeBlock>
+
+const sandboxClientCode = `import { SandboxClient } from '@tangle/sandbox-sdk'
+
+const client = new SandboxClient({
+  apiKey: process.env.TANGLE_API_KEY,
+  region: 'us-east-1',
+})
+
+const session = await client.sessions.create({
+  image: 'node:20-alpine',
+  resources: { cpu: 2, memoryMb: 512 },
+  timeout: 300,
+})
+
+const result = await session.exec('node -e "console.log(process.version)"')
+console.log(result.stdout) // v20.11.0
+
+await session.terminate()`
+
+const hookCode = `import { useState, useCallback } from 'react'
+
+type Status = 'idle' | 'running' | 'success' | 'error'
+
+export function useSandboxSession(sessionId: string) {
+  const [status, setStatus] = useState<Status>('idle')
+  const [output, setOutput] = useState<string[]>([])
+
+  const exec = useCallback(async (command: string) => {
+    setStatus('running')
+    try {
+      const res = await fetch(\`/api/sessions/\${sessionId}/exec\`, {
+        method: 'POST',
+        body: JSON.stringify({ command }),
+      })
+      const data = await res.json()
+      setOutput((prev) => [...prev, data.stdout])
+      setStatus('success')
+    } catch (err) {
+      setStatus('error')
+    }
+  }, [sessionId])
+
+  return { status, output, exec }
+}`
+
+export const Default: Story = {
+  args: {
+    code: sandboxClientCode,
+    language: 'typescript',
+  },
+}
+
+export const WithLineNumbers: Story = {
+  name: 'With Line Numbers',
+  args: {
+    code: sandboxClientCode,
+    language: 'typescript',
+    showLineNumbers: true,
+  },
+}
+
+export const ShortSnippet: Story = {
+  name: 'Short Snippet',
+  args: {
+    code: `const session = await client.sessions.create({ image: 'node:20' })`,
+    language: 'typescript',
+    showLineNumbers: false,
+  },
+}
+
+export const HookExample: Story = {
+  name: 'Hook Example',
+  args: {
+    code: hookCode,
+    language: 'typescript',
+    showLineNumbers: true,
+  },
+}
+
+export const NoCopyButton: Story = {
+  name: 'No Copy Button',
+  args: {
+    code: `$ curl -X POST https://api.tangle.network/v1/sessions \\\n  -H "Authorization: Bearer $TANGLE_API_KEY" \\\n  -d '{"image": "node:20-alpine"}'`,
+    showLineNumbers: false,
+  },
+}
+
+export const InlineCodeExample: Story = {
+  name: 'Inline Code',
+  render: () => (
+    <div className="space-y-3 text-sm text-foreground max-w-prose">
+      <p>
+        Use <InlineCode>client.sessions.create()</InlineCode> to provision a new sandbox
+        session. Pass <InlineCode>resources.memoryMb</InlineCode> to set memory limits.
+      </p>
+      <p>
+        The <InlineCode>exec()</InlineCode> method returns a{' '}
+        <InlineCode>Promise{'<ExecResult>'}</InlineCode> with{' '}
+        <InlineCode>stdout</InlineCode>, <InlineCode>stderr</InlineCode>, and{' '}
+        <InlineCode>exitCode</InlineCode>.
+      </p>
+    </div>
+  ),
+}

package/src/primitives/code-block.tsx

@@ -0,0 +1,22 @@
+// Re-exports the canonical themed CodeBlock from the markdown package.
+// Kept here for backwards compatibility with openui and other importers.
+export { CodeBlock, CopyButton } from "../markdown/code-block";
+export type { CodeBlockProps } from "../markdown/code-block";
+
+import { cn } from "../lib/utils";
+
+export interface InlineCodeProps extends React.HTMLAttributes<HTMLElement> {}
+
+export function InlineCode({ className, children, ...props }: InlineCodeProps) {
+  return (
+    <code
+      className={cn(
+        "rounded border border-border bg-card px-1.5 py-0.5 font-mono text-[0.85em] text-[var(--code-keyword)]",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </code>
+  );
+}

package/src/primitives/design-tokens.stories.tsx

@@ -0,0 +1,162 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta = {
+  title: 'Design System/Tokens',
+  parameters: { layout: 'fullscreen' },
+}
+
+export default meta
+type Story = StoryObj
+
+const ColorSwatch = ({ name, value, label }: { name: string; value: string; label?: string }) => (
+  <div className="flex flex-col gap-1.5">
+    <div
+      className="h-12 w-full rounded-lg border border-[var(--glass-border)]"
+      style={{ background: value }}
+    />
+    <div className="text-foreground text-xs font-medium">{name}</div>
+    {label && <div className="text-muted-foreground text-[10px] font-mono">{label}</div>}
+  </div>
+)
+
+const DepthSwatch = ({ level, hex }: { level: string; hex: string }) => (
+  <div className="flex items-center gap-3">
+    <div
+      className="h-10 w-10 rounded-lg border border-[var(--glass-border)] flex-shrink-0"
+      style={{ background: hex }}
+    />
+    <div>
+      <div className="text-foreground text-xs font-medium">{level}</div>
+      <div className="text-muted-foreground text-[10px] font-mono">{hex}</div>
+    </div>
+  </div>
+)
+
+const StatusSwatch = ({ name, cssVar, label }: { name: string; cssVar: string; label: string }) => (
+  <div className="flex items-center gap-3">
+    <div
+      className="h-3 w-3 rounded-full flex-shrink-0"
+      style={{ background: `var(${cssVar})` }}
+    />
+    <div>
+      <div className="text-foreground text-xs font-medium">{name}</div>
+      <div className="text-muted-foreground text-[10px] font-mono">{label}</div>
+    </div>
+  </div>
+)
+
+export const Colors: Story = {
+  render: () => (
+    <div className="bg-background p-8 min-h-screen">
+      <div className="max-w-4xl mx-auto space-y-10">
+
+        <div>
+          <h2 className="text-foreground font-semibold text-lg mb-1">Background Depth</h2>
+          <p className="text-muted-foreground text-sm mb-4">4-level hierarchy for layering UI surfaces</p>
+          <div className="flex flex-col gap-3">
+            <DepthSwatch level="--depth-1 (root)" hex="#08071A" />
+            <DepthSwatch level="--depth-2 (surface)" hex="#131228" />
+            <DepthSwatch level="--depth-3 (card)" hex="#1C1A3A" />
+            <DepthSwatch level="--depth-4 (elevated)" hex="#26244C" />
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-foreground font-semibold text-lg mb-1">Brand Palette</h2>
+          <p className="text-muted-foreground text-sm mb-4">Core identity colors</p>
+          <div className="grid grid-cols-3 gap-4">
+            <ColorSwatch name="Brand Primary" value="#4a3aff" label="#4a3aff — electric indigo" />
+            <ColorSwatch name="Brand Cool" value="#8263FF" label="#8263FF — violet" />
+            <ColorSwatch name="Brand Glow" value="#6D6AFF" label="#6D6AFF — periwinkle" />
+            <ColorSwatch name="Brand Purple" value="#A78FFF" label="#A78FFF — lavender accent" />
+            <ColorSwatch name="Brand Emerald" value="#10b981" label="#10b981 — runtime green" />
+            <ColorSwatch name="Text Muted" value="#6B7094" label="#6B7094 — muted label" />
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-foreground font-semibold text-lg mb-1">Operational Status</h2>
+          <p className="text-muted-foreground text-sm mb-4">Infrastructure and agent state vocabulary</p>
+          <div className="grid grid-cols-2 gap-3">
+            <StatusSwatch name="Running" cssVar="--status-running" label="#10b981" />
+            <StatusSwatch name="Creating" cssVar="--status-creating" label="#8263FF" />
+            <StatusSwatch name="Stopped" cssVar="--status-stopped" label="#FFB800" />
+            <StatusSwatch name="Warm" cssVar="--status-warm" label="#FF8A4C" />
+            <StatusSwatch name="Cold" cssVar="--status-cold" label="#4AABFF" />
+            <StatusSwatch name="Error" cssVar="--status-error" label="#FF4D6D" />
+            <StatusSwatch name="Deleted" cssVar="--status-deleted" label="#6B7094" />
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-foreground font-semibold text-lg mb-1">Glass Morphism</h2>
+          <p className="text-muted-foreground text-sm mb-4">Layered transparency system</p>
+          <div className="bg-mesh rounded-xl p-6 flex gap-4">
+            <div className="glass-card rounded-xl p-4 flex-1">
+              <div className="text-foreground text-sm font-medium mb-1">glass-card</div>
+              <div className="text-muted-foreground text-xs">65% opacity · 16px blur</div>
+            </div>
+            <div className="glass-card-strong rounded-xl p-4 flex-1">
+              <div className="text-foreground text-sm font-medium mb-1">glass-card-strong</div>
+              <div className="text-muted-foreground text-xs">85% opacity · 24px blur</div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-foreground font-semibold text-lg mb-1">Typography</h2>
+          <p className="text-muted-foreground text-sm mb-4">Geist (UI) · Outfit (display) · Geist Mono (code)</p>
+          <div className="space-y-3">
+            <div style={{ fontFamily: 'var(--font-display)' }} className="text-foreground text-4xl font-bold">
+              Display Heading
+            </div>
+            <div style={{ fontFamily: 'var(--font-sans)' }} className="text-foreground text-xl">
+              UI Body — Geist, clean and precise
+            </div>
+            <div style={{ fontFamily: 'var(--font-mono)' }} className="text-foreground text-sm text-[var(--code-string)]">
+              {'const agent = await sandbox.run({ model: "gpt-4o" })'}
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h2 className="text-foreground font-semibold text-lg mb-1">Gradients</h2>
+          <p className="text-muted-foreground text-sm mb-4">Brand gradient system</p>
+          <div className="space-y-3">
+            <div className="rounded-lg h-12" style={{ background: 'var(--tangle-gradient)' }} />
+            <div className="rounded-lg h-12" style={{ background: 'var(--accent-gradient-strong)' }} />
+            <div className="text-gradient-sandbox text-3xl font-bold">
+              Gradient Text
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  ),
+}
+
+export const StatusDots: Story = {
+  name: 'Status Dots',
+  render: () => (
+    <div className="bg-background p-8 min-h-screen">
+      <div className="space-y-6 max-w-sm">
+        <h2 className="text-foreground font-semibold text-lg">Status Dot Indicators</h2>
+        {[
+          { label: 'Running', cls: 'status-dot status-dot-running' },
+          { label: 'Creating', cls: 'status-dot status-dot-creating' },
+          { label: 'Stopped', cls: 'status-dot status-dot-stopped' },
+          { label: 'Warm', cls: 'status-dot status-dot-warm' },
+          { label: 'Cold', cls: 'status-dot status-dot-cold' },
+          { label: 'Error', cls: 'status-dot status-dot-error' },
+          { label: 'Deleted', cls: 'status-dot status-dot-deleted' },
+        ].map(({ label, cls }) => (
+          <div key={label} className="flex items-center gap-3">
+            <span className={cls} />
+            <span className="text-foreground text-sm">{label}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  ),
+}

package/src/primitives/dialog.stories.tsx

@@ -0,0 +1,176 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { useState } from 'react'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from './dialog'
+
+const meta: Meta = {
+  title: 'Primitives/Dialog',
+  parameters: { layout: 'centered', backgrounds: { default: 'dark' } },
+}
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  name: 'Default',
+  render: () => {
+    const [open, setOpen] = useState(true)
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <button className="rounded-md bg-muted px-4 py-2 text-sm text-foreground hover:bg-muted/80">
+            Open Dialog
+          </button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Session Configuration</DialogTitle>
+            <DialogDescription>
+              Configure the runtime environment for your sandbox session. Changes
+              take effect on the next session start.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-3 py-2">
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium text-foreground">Image</label>
+              <input
+                className="rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
+                defaultValue="node:20-alpine"
+              />
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium text-foreground">Memory (MB)</label>
+              <input
+                type="number"
+                className="rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
+                defaultValue={512}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <button
+              onClick={() => setOpen(false)}
+              className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-muted"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => setOpen(false)}
+              className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90"
+            >
+              Save changes
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  },
+}
+
+export const SandboxVariant: Story = {
+  name: 'Sandbox Variant',
+  render: () => {
+    const [open, setOpen] = useState(true)
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <button className="rounded-md bg-muted px-4 py-2 text-sm text-foreground hover:bg-muted/80">
+            Open Sandbox Dialog
+          </button>
+        </DialogTrigger>
+        <DialogContent variant="sandbox">
+          <DialogHeader>
+            <DialogTitle>New Sandbox Session</DialogTitle>
+            <DialogDescription>
+              Provision a fresh container with your selected runtime. Sessions
+              auto-terminate after the configured timeout.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid gap-3 py-2">
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium text-foreground">Runtime</label>
+              <select className="rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none">
+                <option>node:20-alpine</option>
+                <option>python:3.12-slim</option>
+                <option>golang:1.22-alpine</option>
+                <option>rust:1.77-slim</option>
+              </select>
+            </div>
+            <div className="flex flex-col gap-1.5">
+              <label className="text-sm font-medium text-foreground">Timeout (seconds)</label>
+              <input
+                type="number"
+                className="rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
+                defaultValue={300}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <button
+              onClick={() => setOpen(false)}
+              className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-muted"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={() => setOpen(false)}
+              className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground hover:bg-primary/90"
+            >
+              Create session
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  },
+}
+
+export const DestructiveAction: Story = {
+  name: 'Destructive Action',
+  render: () => {
+    const [open, setOpen] = useState(true)
+    return (
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild>
+          <button className="rounded-md bg-muted px-4 py-2 text-sm text-foreground hover:bg-muted/80">
+            Terminate Session
+          </button>
+        </DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Terminate session?</DialogTitle>
+            <DialogDescription>
+              This will immediately kill the running process and destroy all
+              ephemeral data. This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="rounded-lg border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-400">
+            Session <span className="font-mono">sess_01j9x8k2m...</span> has been
+            running for 47 minutes. Unsaved work will be lost.
+          </div>
+          <DialogFooter>
+            <button
+              onClick={() => setOpen(false)}
+              className="rounded-md border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-muted"
+            >
+              Keep running
+            </button>
+            <button
+              onClick={() => setOpen(false)}
+              className="rounded-md bg-red-600 px-4 py-2 text-sm text-white hover:bg-red-700"
+            >
+              Terminate
+            </button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    )
+  },
+}

package/src/primitives/dialog.tsx

@@ -0,0 +1,137 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/40",
+      "data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    variant?: "default" | "sandbox";
+  }
+>(({ className, children, variant = "default", ...props }, ref) => {
+  const variants = {
+    default: "border-border",
+    sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]",
+  };
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]",
+          "gap-4 rounded-lg border bg-card p-6 shadow-lg duration-200",
+          "data-[state=closed]:animate-out data-[state=open]:animate-in",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+          "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+          variants[variant],
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className,
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "font-semibold text-lg leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};