@tangle-network/ui 1.0.0

package/src/openui/openui-artifact-renderer.tsx

@@ -0,0 +1,542 @@
+import { Fragment, type ReactNode } from "react";
+import { Minus } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../primitives/card";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../primitives/table";
+import { CodeBlock } from "../primitives/code-block";
+import { Markdown } from "../markdown/markdown";
+
+export type OpenUIPrimitive = string | number | boolean | null | undefined;
+
+export interface OpenUIAction {
+  id: string;
+  label: string;
+  tone?: "default" | "secondary" | "outline" | "ghost" | "destructive";
+  disabled?: boolean;
+  onPress?: () => void;
+}
+
+interface OpenUIBaseNode {
+  id?: string;
+}
+
+export interface OpenUIHeadingNode extends OpenUIBaseNode {
+  type: "heading";
+  text: string;
+  level?: 1 | 2 | 3 | 4;
+  kicker?: string;
+  meta?: string;
+}
+
+export interface OpenUITextNode extends OpenUIBaseNode {
+  type: "text";
+  text: string;
+  tone?: "default" | "muted" | "success" | "warning" | "error";
+  mono?: boolean;
+}
+
+export interface OpenUIBadgeNode extends OpenUIBaseNode {
+  type: "badge";
+  label: string;
+  tone?: "default" | "secondary" | "success" | "warning" | "error" | "info" | "sandbox";
+}
+
+export interface OpenUIStatNode extends OpenUIBaseNode {
+  type: "stat";
+  label: string;
+  value: string;
+  change?: string;
+  tone?: "default" | "success" | "warning" | "error" | "info";
+}
+
+export interface OpenUIKeyValueNode extends OpenUIBaseNode {
+  type: "key_value";
+  items: Array<{
+    id?: string;
+    label: string;
+    value: ReactNode | OpenUIPrimitive;
+    tone?: "default" | "muted";
+  }>;
+}
+
+export interface OpenUICodeNode extends OpenUIBaseNode {
+  type: "code";
+  code: string;
+  language?: string;
+  title?: string;
+  showLineNumbers?: boolean;
+}
+
+export interface OpenUIMarkdownNode extends OpenUIBaseNode {
+  type: "markdown";
+  content: string;
+}
+
+export interface OpenUITableNode extends OpenUIBaseNode {
+  type: "table";
+  columns: Array<{
+    key: string;
+    header: string;
+    align?: "left" | "right";
+  }>;
+  rows: Array<Record<string, ReactNode | OpenUIPrimitive>>;
+  caption?: string;
+}
+
+export interface OpenUIActionsNode extends OpenUIBaseNode {
+  type: "actions";
+  actions: OpenUIAction[];
+}
+
+export interface OpenUISeparatorNode extends OpenUIBaseNode {
+  type: "separator";
+  label?: string;
+}
+
+export interface OpenUIStackNode extends OpenUIBaseNode {
+  type: "stack";
+  direction?: "row" | "column";
+  gap?: "sm" | "md" | "lg";
+  align?: "start" | "center" | "end" | "stretch";
+  wrap?: boolean;
+  children: OpenUIComponentNode[];
+}
+
+export interface OpenUIGridNode extends OpenUIBaseNode {
+  type: "grid";
+  columns?: 1 | 2 | 3 | 4;
+  gap?: "sm" | "md" | "lg";
+  children: OpenUIComponentNode[];
+}
+
+export interface OpenUICardNode extends OpenUIBaseNode {
+  type: "card";
+  title?: string;
+  description?: string;
+  eyebrow?: string;
+  badge?: OpenUIBadgeNode;
+  actions?: OpenUIAction[];
+  children?: OpenUIComponentNode[];
+}
+
+export type OpenUIComponentNode =
+  | OpenUIActionsNode
+  | OpenUIBadgeNode
+  | OpenUICardNode
+  | OpenUICodeNode
+  | OpenUIGridNode
+  | OpenUIHeadingNode
+  | OpenUIKeyValueNode
+  | OpenUIMarkdownNode
+  | OpenUISeparatorNode
+  | OpenUIStackNode
+  | OpenUIStatNode
+  | OpenUITableNode
+  | OpenUITextNode;
+
+export interface OpenUIArtifactRendererProps {
+  schema: OpenUIComponentNode | OpenUIComponentNode[];
+  onAction?: (action: OpenUIAction) => void;
+  className?: string;
+}
+
+const NODE_TYPES = new Set([
+  "heading",
+  "text",
+  "badge",
+  "stat",
+  "key_value",
+  "code",
+  "markdown",
+  "table",
+  "actions",
+  "separator",
+  "stack",
+  "grid",
+  "card",
+]);
+
+const GAP_STYLES = {
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+} as const;
+
+const GRID_STYLES = {
+  1: "grid-cols-1",
+  2: "grid-cols-1 md:grid-cols-2",
+  3: "grid-cols-1 md:grid-cols-3",
+  4: "grid-cols-1 md:grid-cols-2 xl:grid-cols-4",
+} as const;
+
+const ALIGN_STYLES = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch",
+} as const;
+
+function formatValue(value: ReactNode | OpenUIPrimitive) {
+  if (value === null || value === undefined) {
+    return <span className="text-muted-foreground">—</span>;
+  }
+
+  if (typeof value === "boolean") {
+    return value ? "Yes" : "No";
+  }
+
+  return value;
+}
+
+function asArray<T>(value: unknown): T[] {
+  return Array.isArray(value) ? (value as T[]) : [];
+}
+
+function isOpenUIComponentNode(value: unknown): value is OpenUIComponentNode {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "type" in value &&
+    typeof (value as { type?: unknown }).type === "string" &&
+    NODE_TYPES.has((value as { type: string }).type)
+  );
+}
+
+function renderActions(actions: OpenUIAction[], onAction?: (action: OpenUIAction) => void) {
+  if (actions.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {actions.map((action) => (
+        <Button
+          key={action.id}
+          type="button"
+          size="sm"
+          variant={action.tone ?? "outline"}
+          disabled={action.disabled}
+          onClick={() => {
+            action.onPress?.();
+            onAction?.(action);
+          }}
+        >
+          {action.label}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+function renderNode(node: OpenUIComponentNode, onAction?: (action: OpenUIAction) => void): ReactNode {
+  switch (node.type) {
+    case "heading": {
+      const level = node.level ?? 2;
+      const HeadingTag = `h${level}` as const;
+
+      return (
+        <div className="space-y-1">
+          {node.kicker && (
+            <div className="text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+              {node.kicker}
+            </div>
+          )}
+          <HeadingTag
+            className={cn(
+              "font-semibold tracking-tight text-foreground",
+              level === 1 && "text-2xl",
+              level === 2 && "text-xl",
+              level === 3 && "text-lg",
+              level === 4 && "text-base",
+            )}
+          >
+            {node.text}
+          </HeadingTag>
+          {node.meta && <p className="text-sm text-muted-foreground">{node.meta}</p>}
+        </div>
+      );
+    }
+
+    case "text":
+      return (
+        <p
+          className={cn(
+            "text-sm leading-6 text-foreground",
+            node.tone === "muted" && "text-muted-foreground",
+            node.tone === "success" && "text-[var(--surface-success-text)]",
+            node.tone === "warning" && "text-[var(--surface-warning-text)]",
+            node.tone === "error" && "text-[var(--surface-danger-text)]",
+            node.mono && "font-mono text-[13px]",
+          )}
+        >
+          {node.text}
+        </p>
+      );
+
+    case "badge":
+      return <Badge variant={node.tone ?? "outline"}>{node.label}</Badge>;
+
+    case "stat":
+      return (
+        <Card variant="glass" className="border-border shadow-[var(--shadow-card)]">
+          <CardContent className="space-y-2 p-4">
+            <div className="text-xs uppercase tracking-[0.12em] text-muted-foreground">
+              {node.label}
+            </div>
+            <div className="text-2xl font-semibold tracking-tight text-foreground">
+              {node.value}
+            </div>
+            {node.change && (
+              <div
+                className={cn(
+                  "text-xs",
+                  node.tone === "success" && "text-[var(--surface-success-text)]",
+                  node.tone === "warning" && "text-[var(--surface-warning-text)]",
+                  node.tone === "error" && "text-[var(--surface-danger-text)]",
+                  node.tone === "info" && "text-[var(--surface-info-text)]",
+                  !node.tone || node.tone === "default" ? "text-muted-foreground" : undefined,
+                )}
+              >
+                {node.change}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      );
+
+    case "key_value":
+      if (asArray(node.items).length === 0) {
+        return null;
+      }
+      return (
+        <dl className="grid gap-3 sm:grid-cols-2">
+          {asArray<OpenUIKeyValueNode["items"][number]>(node.items).map((item, index) => (
+            <div
+              key={item.id ?? `${item.label}-${index}`}
+              className="rounded-[var(--radius-lg)] border border-border bg-card px-4 py-3"
+            >
+              <dt className="text-[11px] uppercase tracking-[0.12em] text-muted-foreground">
+                {item.label}
+              </dt>
+              <dd
+                className={cn(
+                  "mt-1 text-sm font-medium text-foreground",
+                  item.tone === "muted" && "text-foreground",
+                )}
+              >
+                {formatValue(item.value)}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      );
+
+    case "code":
+      return (
+        <div className="space-y-2">
+          {node.title && (
+            <div className="text-xs uppercase tracking-[0.12em] text-muted-foreground">
+              {node.title}
+            </div>
+          )}
+          <CodeBlock
+            code={node.code}
+            language={node.language}
+            showLineNumbers={node.showLineNumbers}
+            className="border-border bg-background"
+          />
+        </div>
+      );
+
+    case "markdown":
+      return (
+        <div className="rounded-[var(--radius-lg)] border border-border bg-card p-5">
+          <Markdown className="prose-sm max-w-none">{node.content}</Markdown>
+        </div>
+      );
+
+    case "table":
+      if (asArray(node.columns).length === 0) {
+        return null;
+      }
+      return (
+        <div className="overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card">
+          <Table>
+            <TableHeader>
+              <TableRow className="border-border">
+                {asArray<OpenUITableNode["columns"][number]>(node.columns).map((column) => (
+                  <TableHead
+                    key={column.key}
+                    className={cn(
+                      "h-10 text-[11px] uppercase tracking-[0.1em] text-muted-foreground",
+                      column.align === "right" && "text-right",
+                    )}
+                  >
+                    {column.header}
+                  </TableHead>
+                ))}
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {asArray<OpenUITableNode["rows"][number]>(node.rows).map((row, rowIndex) => (
+                <TableRow key={rowIndex} className="border-border">
+                  {asArray<OpenUITableNode["columns"][number]>(node.columns).map((column) => (
+                    <TableCell
+                      key={column.key}
+                      className={cn(
+                        "py-3 text-sm text-foreground",
+                        column.align === "right" && "text-right tabular-nums",
+                      )}
+                    >
+                      {formatValue(row[column.key])}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+          {node.caption && (
+            <div className="border-t border-border px-4 py-2 text-xs text-muted-foreground">
+              {node.caption}
+            </div>
+          )}
+        </div>
+      );
+
+    case "actions":
+      return renderActions(asArray<OpenUIAction>(node.actions), onAction);
+
+    case "separator":
+      return (
+        <div className="flex items-center gap-3">
+          <div className="h-px flex-1 bg-border" />
+          {node.label && (
+            <span className="text-[10px] uppercase tracking-[0.14em] text-muted-foreground">
+              {node.label}
+            </span>
+          )}
+          <div className="h-px flex-1 bg-border" />
+        </div>
+      );
+
+    case "stack":
+      if (asArray(node.children).length === 0) {
+        return null;
+      }
+      return (
+        <div
+          className={cn(
+            "flex",
+            node.direction === "row" ? "flex-row" : "flex-col",
+            GAP_STYLES[node.gap ?? "md"],
+            ALIGN_STYLES[node.align ?? "stretch"],
+            node.wrap && "flex-wrap",
+          )}
+        >
+          {asArray<OpenUIComponentNode>(node.children).map((child, index) => (
+            <Fragment key={child.id ?? `${child.type}-${index}`}>
+              {renderNode(child, onAction)}
+            </Fragment>
+          ))}
+        </div>
+      );
+
+    case "grid":
+      if (asArray(node.children).length === 0) {
+        return null;
+      }
+      return (
+        <div className={cn("grid", GRID_STYLES[node.columns ?? 2], GAP_STYLES[node.gap ?? "md"])}>
+          {asArray<OpenUIComponentNode>(node.children).map((child, index) => (
+            <Fragment key={child.id ?? `${child.type}-${index}`}>
+              {renderNode(child, onAction)}
+            </Fragment>
+          ))}
+        </div>
+      );
+
+    case "card":
+      return (
+        <Card variant="glass" className="border-border shadow-[var(--shadow-card)]">
+          {(node.eyebrow || node.title || node.description || node.badge || asArray(node.actions).length > 0) && (
+            <CardHeader className="gap-2 p-4 pb-0">
+              <div className="flex items-start justify-between gap-3">
+                <div className="min-w-0 flex-1 space-y-1">
+                  {node.eyebrow && (
+                    <div className="text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground">
+                      {node.eyebrow}
+                    </div>
+                  )}
+                  {node.title && <CardTitle className="text-base text-foreground">{node.title}</CardTitle>}
+                  {node.description && (
+                    <CardDescription className="text-muted-foreground">
+                      {node.description}
+                    </CardDescription>
+                  )}
+                </div>
+                {node.badge && <Badge variant={node.badge.tone ?? "outline"}>{node.badge.label}</Badge>}
+              </div>
+              {asArray(node.actions).length > 0 && renderActions(asArray<OpenUIAction>(node.actions), onAction)}
+            </CardHeader>
+          )}
+          {asArray(node.children).length > 0 && (
+            <CardContent className="space-y-4 p-4">
+              {asArray<OpenUIComponentNode>(node.children).map((child, index) => (
+                <Fragment key={child.id ?? `${child.type}-${index}`}>
+                  {renderNode(child, onAction)}
+                </Fragment>
+              ))}
+            </CardContent>
+          )}
+        </Card>
+      );
+  }
+}
+
+/**
+ * OpenUIArtifactRenderer — contained renderer for OpenUI-like structured
+ * artifact payloads using sandbox-ui primitives and theme tokens. This is an
+ * extension surface for generated inspectors/results, not a replacement for
+ * the sandbox shell.
+ */
+export function OpenUIArtifactRenderer({
+  schema,
+  onAction,
+  className,
+}: OpenUIArtifactRendererProps) {
+  const nodes = (Array.isArray(schema) ? schema : [schema]).filter(isOpenUIComponentNode);
+
+  if (nodes.length === 0) {
+    return (
+      <div
+        className={cn(
+          "flex min-h-[6rem] items-center justify-center rounded-[var(--radius-xl)] border border-dashed border-border bg-card p-5 text-center",
+          className,
+        )}
+      >
+        <div className="space-y-2">
+          <div className="mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-muted/50 text-muted-foreground">
+            <Minus className="h-4 w-4" />
+          </div>
+          <div className="text-sm font-medium text-foreground">No view was generated.</div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("space-y-4", className)}>
+      {nodes.map((node, index) => (
+        <Fragment key={node.id ?? `${node.type}-${index}`}>
+          {renderNode(node, onAction)}
+        </Fragment>
+      ))}
+    </div>
+  );
+}

package/src/primitives/artifact-pane.tsx

@@ -0,0 +1,91 @@
+import { type ReactNode } from "react";
+import { cn } from "../lib/utils";
+
+export interface ArtifactPaneProps {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  subtitle?: ReactNode;
+  meta?: ReactNode;
+  headerActions?: ReactNode;
+  tabs?: ReactNode;
+  toolbar?: ReactNode;
+  footer?: ReactNode;
+  emptyState?: ReactNode;
+  children?: ReactNode;
+  className?: string;
+  contentClassName?: string;
+}
+
+/**
+ * ArtifactPane — shared frame for files, previews, documents, inspectors, and
+ * other artifact-like surfaces inside sandbox applications.
+ */
+export function ArtifactPane({
+  eyebrow,
+  title,
+  subtitle,
+  meta,
+  headerActions,
+  tabs,
+  toolbar,
+  footer,
+  emptyState,
+  children,
+  className,
+  contentClassName,
+}: ArtifactPaneProps) {
+  const hasContent = children !== undefined && children !== null;
+
+  return (
+    <section
+      className={cn(
+        "flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground",
+        className,
+      )}
+    >
+      <header className="border-b border-border bg-muted/10">
+        <div className="flex items-start justify-between gap-3 px-3 py-2">
+          <div className="min-w-0 flex-1">
+            {eyebrow && (
+              <div className="mb-1 inline-flex max-w-full items-center px-1 py-0.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground">
+                {eyebrow}
+              </div>
+            )}
+            <div className="min-w-0 text-[13px] font-medium text-foreground">
+              {title}
+            </div>
+            {(subtitle || meta) && (
+              <div className="mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-relaxed text-muted-foreground">
+                {subtitle && <span className="truncate">{subtitle}</span>}
+                {meta && <span className="flex items-center gap-2">{meta}</span>}
+              </div>
+            )}
+          </div>
+          {headerActions && (
+            <div className="flex shrink-0 items-center gap-1.5">{headerActions}</div>
+          )}
+        </div>
+        {tabs}
+        {toolbar && (
+          <div className="border-t border-border px-3 py-2">
+            {toolbar}
+          </div>
+        )}
+      </header>
+
+      <div className={cn("min-h-0 flex-1 overflow-auto", contentClassName)}>
+        {hasContent ? (
+          children
+        ) : emptyState ? (
+          <div className="flex h-full items-center justify-center p-6">{emptyState}</div>
+        ) : null}
+      </div>
+
+      {footer && (
+        <footer className="shrink-0 border-t border-border bg-card px-3 py-2">
+          {footer}
+        </footer>
+      )}
+    </section>
+  );
+}