@tangle-network/ui 1.0.0 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,59 @@
 # @tangle-network/ui
 
+## 3.0.0
+
+### Patch Changes
+
+- Updated dependencies [8152d92]
+  - @tangle-network/brand@0.4.0
+
+## 2.1.0
+
+### Minor Changes
+
+- 12f5565: Add `<RedactedDocument>` viewer (`@tangle-network/ui/redaction`): renders a server-produced redacted document with masked, click-to-reveal spans. The client holds only `{ id, kind }` per span; revealing one round-trips through an `onReveal` callback so authorization and the audit trail stay server-side (pairs with `@tangle-network/agent-app/redact`'s `buildRedactedDocument` / `revealSpan`).
+
+## 2.0.0
+
+### Major Changes
+
+- 4d7cc77: Drop `editor` re-exports from `@tangle-network/ui` root barrel. The `@tangle-network/ui/editor` subpath is unchanged.
+
+  **Rationale:** the editor surface drags `@tiptap/*`, `yjs`, and `@hocuspocus/provider` type chains into the package root's `.d.ts`. These are specialized collaboration tooling, not generic UI primitives — they should not appear in a consumer's default import.
+
+  **Migration:**
+
+  ```ts
+  // before
+  import {
+    TiptapEditor,
+    EditorToolbar,
+    DocumentEditorPane,
+  } from "@tangle-network/ui";
+
+  // after
+  import {
+    TiptapEditor,
+    EditorToolbar,
+    DocumentEditorPane,
+  } from "@tangle-network/ui/editor";
+  ```
+
+  `sed` recipe:
+
+  ```bash
+  grep -rl '"@tangle-network/ui"' src/ \
+    | xargs sed -i '' -E '/Tiptap|Editor|Collaborat|useYjs|useAwareness|DocumentEditor|ConnectionState/s|"@tangle-network/ui"|"@tangle-network/ui/editor"|g'
+  ```
+
+  **Known residual:** `dist/index.d.ts` still emits type-only side-effect imports for `@hocuspocus/provider` and `yjs`. These come from `FileArtifactPaneEditorOptions` in `files/file-artifact-pane.tsx`, which types its optional collaboration config against `DocumentEditorMode`/`DocumentEditorBackend`/`DocumentEditorPaneCollaborationConfig` from `editor/`. The actual editor symbols (`TiptapEditor`, `EditorProvider`, etc.) and `@tiptap/*` types are no longer at the root. A follow-up PR can either extract the editor option types out of `editor/` or drop `./files` from the root barrel; both exceed this PR's scope.
+
+## 1.0.1
+
+### Patch Changes
+
+- 0db7afc: Expose `ThemeToggle` and `useTheme` from `@tangle-network/ui/primitives`. The component and hook were bulk-imported in `1.0.0` but never wired into `primitives/index.ts`, leaving them inaccessible to consumers.
+
 ## 1.0.0
 
 ### Minor Changes

package/dist/{chunk-LISXUB4D.js → chunk-XY2FP763.js}

@@ -1175,6 +1175,91 @@ function SidebarDropZone({
   );
 }
 
+// src/primitives/theme-toggle.tsx
+import { useCallback as useCallback4, useEffect as useEffect2, useState as useState5 } from "react";
+import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
+function getSystemTheme() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function applyTheme(theme) {
+  const resolved = theme === "system" ? getSystemTheme() : theme;
+  document.documentElement.classList.toggle("dark", resolved === "dark");
+}
+function useTheme() {
+  const [theme, setThemeState] = useState5(() => {
+    if (typeof window === "undefined") return "system";
+    return localStorage.getItem("theme") ?? "system";
+  });
+  const setTheme = useCallback4((next) => {
+    setThemeState(next);
+    if (next === "system") {
+      localStorage.removeItem("theme");
+    } else {
+      localStorage.setItem("theme", next);
+    }
+    applyTheme(next);
+  }, []);
+  useEffect2(() => {
+    applyTheme(theme);
+    if (theme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => applyTheme("system");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [theme]);
+  return { theme, setTheme };
+}
+var iconClass = "h-4 w-4";
+function SunIcon() {
+  return /* @__PURE__ */ jsxs14(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: iconClass,
+      children: [
+        /* @__PURE__ */ jsx16("circle", { cx: 12, cy: 12, r: 5 }),
+        /* @__PURE__ */ jsx16("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })
+      ]
+    }
+  );
+}
+function MoonIcon() {
+  return /* @__PURE__ */ jsx16(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: iconClass,
+      children: /* @__PURE__ */ jsx16("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+    }
+  );
+}
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const resolved = theme === "system" ? getSystemTheme() : theme;
+  return /* @__PURE__ */ jsx16(
+    "button",
+    {
+      type: "button",
+      onClick: () => setTheme(resolved === "dark" ? "light" : "dark"),
+      className: "inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors",
+      "aria-label": `Switch to ${resolved === "dark" ? "light" : "dark"} mode`,
+      children: resolved === "dark" ? /* @__PURE__ */ jsx16(SunIcon, {}) : /* @__PURE__ */ jsx16(MoonIcon, {})
+    }
+  );
+}
+
 export {
   Dialog,
   DialogTrigger,
@@ -1217,6 +1302,8 @@ export {
   DropZone,
   UploadProgress,
   SidebarDropZone,
+  useTheme,
+  ThemeToggle,
   Logo,
   TangleKnot
 };

package/dist/editor.js

@@ -1,4 +1,3 @@
-import "./chunk-Q7EIIWTC.js";
 import {
   CollaboratorsList,
   DocumentEditorPane,

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { B as Button, a as ButtonProps, b as buttonVariants } from './button-CMQuQEW_.js';
-export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useToast } from './primitives.js';
+export { Avatar, AvatarFallback, AvatarImage, Badge, BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateProps, InlineCode, InlineCodeProps, Input, InputProps, Label, Progress, SegmentedControl, SegmentedControlOption, SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, TextareaProps, ThemeToggle, Toast, ToastContainer, ToastProvider, UploadFile, UploadProgress, UploadProgressProps, badgeVariants, useTheme, useToast } from './primitives.js';
 export { Logo, LogoProps, TangleKnot } from '@tangle-network/brand';
 export { A as ArtifactPane, a as ArtifactPaneProps } from './artifact-pane-DvJyPWV4.js';
 export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatInput, ChatInputProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, PendingFile, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from './chat.js';
@@ -7,12 +7,10 @@ export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, Inline
 export { F as FeedSegment, T as ToolCallData, a as ToolCallFeed, b as ToolCallFeedProps, c as ToolCallGroup, d as ToolCallGroupProps, e as ToolCallStatus, f as ToolCallStep, g as ToolCallStepProps, h as ToolCallType, p as parseToolEvent } from './tool-call-feed-Bs3MyQMT.js';
 export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from './openui.js';
 export { FileArtifactPane, FileArtifactPaneProps, FileNode, FilePreview, FilePreviewProps, FileTabData, FileTabs, FileTabsProps, FileTree, FileTreeProps, FileTreeVisibilityOptions, RichFileTree, RichFileTreeGitEntry, RichFileTreeGitStatus, RichFileTreeProps, RichFileTreeThemeVars, filterFileTree } from './files.js';
-export { C as Collaborator, a as ConnectionState, D as DocumentEditorBackend, b as DocumentEditorMode, c as DocumentEditorPane, d as DocumentEditorPaneCollaborationConfig, e as DocumentEditorPaneProps, E as EditorContextValue, f as EditorProvider, g as EditorProviderProps, h as EditorTokenRefreshResult, i as EditorUser, u as useEditorContext } from './document-editor-pane-DyDEX_Zm.js';
-export { CollaboratorsList, EditorToolbar, TiptapEditor, TiptapEditorProps, useAwareness, useCollaboratorPresence, useCollaborators, useDocumentChanges, useEditorConnection, useYjsState } from './editor.js';
 export { Markdown, MarkdownProps } from './markdown.js';
 export { C as CodeBlock, a as CodeBlockProps, b as CopyButton } from './code-block-DjXf8eOG.js';
 export { AuthHeader, AuthHeaderProps, GitHubLoginButton, GitHubLoginButtonProps, LoginLayout, LoginLayoutProps, SessionUser, UserMenu, UserMenuProps } from './auth.js';
-export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from './sdk-hooks.js';
+export { AgentStreamEvent, AppendUserMessageOptions, ApplySdkEventOptions, AutomationStreamEvent, BeginAssistantMessageOptions, BotStreamEvent, CompleteAssistantMessageOptions, ConnectionState, RealtimeSessionOptions, RealtimeSessionRegistry, RealtimeSessionRegistryProps, RealtimeSessionState, RealtimeSessionTarget, SSEEvent, SdkSessionAttachment, SdkSessionEvent, SdkSessionSeed, TaskStreamEvent, TerminalStreamEvent, UseRunGroupsOptions, UseSSEStreamOptions, UseSSEStreamResult, UseSdkSessionOptions, UseSdkSessionReturn, UseToolCallStreamReturn, useAutoScroll, useDropdownMenu, useRealtimeSession, useRunCollapseState, useRunGroups, useSSEStream, useSdkSession, useToolCallStream } from './sdk-hooks.js';
 export { AuthUser, UseAuthOptions, UseAuthResult, createAuthFetcher, useApiKey, useAuth, useLiveTime } from './hooks.js';
 export { A as ActiveProjectActivity, a as ActiveSessionActivityOptions, b as ActiveSessionConnectionOptions, c as ActiveSessionConnectionState, d as ActiveSessionReconnectState, e as ActiveSessionRecord, f as ActiveSessionStatus, g as ActiveSessionTransportMode, h as ActiveSessionsState, R as RegisterActiveSessionOptions, S as SessionProjectKey, i as activeSessionsAtom, j as bumpActiveSessionActivity, k as getActiveSession, l as getAllActiveSessions, m as getAllProjectActivity, n as getSessionsByActivity, o as getSessionsForNavbar, p as getSessionsForProject, q as getTotalRunningSessionCount, r as hasBackgroundRunningSessions, s as registerActiveSession, t as resetActiveSessions, u as setActiveSessionAttention, v as setActiveSessionConnection, w as setActiveSessionError, x as setActiveSessionRunning, y as setForegroundActiveSession, z as unregisterActiveSession, B as updateActiveSessionMeta, C as useActiveSession, D as useActiveSessions, E as useActiveSessionsState, F as useHasBackgroundRunningSessions, G as useNavbarSessions, H as useProjectActivity, I as useProjectSessions, J as useSessionsByActivity, K as useTotalRunningSessions } from './active-sessions-store-CeOmXgv5.js';
 export { addMessage, addParts, clearChat, isStreamingAtom, messagesAtom, partMapAtom, updatePart } from './stores.js';
@@ -23,8 +21,8 @@ export { F as FinalTextPart, G as GroupedMessage, M as MessageRun, a as MessageU
 export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-z4JcDmMQ.js';
 export { TOOL_CATEGORY_ICONS, cn, copyText, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText } from './utils.js';
 export { CommandPreview, CommandPreviewProps, DiffPreview, DiffPreviewProps, GlobResultsPreview, GlobResultsPreviewProps, GrepResultsPreview, GrepResultsPreviewProps, QuestionPreview, QuestionPreviewProps, WebSearchPreview, WebSearchPreviewProps, WriteFilePreview, WriteFilePreviewProps } from './tool-previews.js';
+import { ReactNode } from 'react';
 import 'class-variance-authority/types';
-import 'react';
 import 'react/jsx-runtime';
 import '@radix-ui/react-dialog';
 import 'class-variance-authority';
@@ -36,8 +34,49 @@ import '@radix-ui/react-progress';
 import '@radix-ui/react-switch';
 import '@radix-ui/react-label';
 import '@pierre/trees';
+import './document-editor-pane-DyDEX_Zm.js';
 import '@hocuspocus/provider';
 import 'yjs';
-import '@tiptap/react';
 import 'nanostores';
 import 'clsx';
+
+/**
+ * Viewer for a server-produced redacted document. Renders text inline and each
+ * redacted span as a masked chip; clicking a chip asks the server to reveal that
+ * one span. The original plaintext is NEVER in the document the client holds —
+ * the chip carries only an id + kind; `onReveal` round-trips to the server, where
+ * `@tangle-network/agent-app/redact`'s `revealSpan` runs the authorization check
+ * and writes the audit trail. So authz + audit are server-truth; this is display.
+ *
+ * Structural types (no `@tangle-network/agent-app` dependency) — the viewer needs
+ * only `{ id, kind }` per span; the cipher stays server-side.
+ */
+type RedactedDocSegment = {
+    type: "text";
+    text: string;
+} | {
+    type: "redacted";
+    id: string;
+    kind: string;
+};
+interface RedactedDocumentData {
+    segments: RedactedDocSegment[];
+}
+interface RevealResult {
+    ok: boolean;
+    value?: string;
+    /** e.g. `forbidden` | `not_found` when `ok` is false. */
+    reason?: string;
+}
+interface RedactedDocumentProps {
+    document: RedactedDocumentData;
+    /** Reveal one span by id. Wire to a server route that calls agent-app's
+     *  `revealSpan` (authz + audit happen there). Resolves with the original. */
+    onReveal: (spanId: string) => Promise<RevealResult>;
+    /** Display label for a redaction kind (default: the kind, upper-cased). */
+    labelForKind?: (kind: string) => string;
+    className?: string;
+}
+declare function RedactedDocument({ document, onReveal, labelForKind, className, }: RedactedDocumentProps): ReactNode;
+
+export { type RedactedDocSegment, RedactedDocument, type RedactedDocumentData, type RedactedDocumentProps, type RevealResult };

package/dist/index.js

@@ -103,11 +103,13 @@ import {
   TerminalInput,
   TerminalLine,
   Textarea,
+  ThemeToggle,
   ToastContainer,
   ToastProvider,
   UploadProgress,
+  useTheme,
   useToast
-} from "./chunk-LISXUB4D.js";
+} from "./chunk-XY2FP763.js";
 import {
   Avatar,
   AvatarFallback,
@@ -214,21 +216,6 @@ import {
   RichFileTree,
   filterFileTree
 } from "./chunk-HJKCSXCH.js";
-import "./chunk-Q7EIIWTC.js";
-import {
-  CollaboratorsList,
-  DocumentEditorPane,
-  EditorProvider,
-  EditorToolbar,
-  TiptapEditor,
-  useAwareness,
-  useCollaboratorPresence,
-  useCollaborators,
-  useDocumentChanges,
-  useEditorConnection,
-  useEditorContext,
-  useYjsState
-} from "./chunk-EEE55AVS.js";
 import {
   Tabs,
   TabsContent,
@@ -249,6 +236,103 @@ import {
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
+
+// src/redaction/redacted-document.tsx
+import { useCallback, useState } from "react";
+import { Eye, EyeOff, Loader2, ShieldAlert } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var defaultLabel = (kind) => kind.replace(/[-_]/g, " ").toUpperCase();
+function RedactedChip({
+  kind,
+  label,
+  onReveal
+}) {
+  const [state, setState] = useState({ status: "masked" });
+  const reveal = useCallback(async () => {
+    setState({ status: "loading" });
+    try {
+      const r = await onReveal();
+      setState(
+        r.ok && r.value !== void 0 ? { status: "revealed", value: r.value } : { status: "denied", reason: r.reason }
+      );
+    } catch {
+      setState({ status: "denied", reason: "error" });
+    }
+  }, [onReveal]);
+  if (state.status === "revealed") {
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setState({ status: "masked" }),
+        title: "Revealed \u2014 click to hide",
+        "aria-label": `${label}: revealed, click to hide`,
+        className: cn(
+          "inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-1 font-medium",
+          "bg-[color-mix(in_oklch,var(--color-warning,orange)_18%,transparent)] text-foreground ring-1 ring-warning/40"
+        ),
+        children: [
+          state.value,
+          /* @__PURE__ */ jsx(EyeOff, { className: "size-3 opacity-60" })
+        ]
+      }
+    );
+  }
+  if (state.status === "denied") {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        title: `Restricted${state.reason ? ` (${state.reason})` : ""}`,
+        "aria-label": `${label}: restricted`,
+        className: "inline-flex items-center gap-1 rounded-[var(--radius-sm)] bg-muted px-1 text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx(ShieldAlert, { className: "size-3" }),
+          " ",
+          label
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      disabled: state.status === "loading",
+      onClick: reveal,
+      title: `${label} \u2014 click to reveal`,
+      "aria-label": `${label} redacted, click to reveal`,
+      className: cn(
+        "inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-1 font-medium tracking-wide",
+        "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground transition-colors",
+        "cursor-pointer select-none"
+      ),
+      children: [
+        state.status === "loading" ? /* @__PURE__ */ jsx(Loader2, { className: "size-3 animate-spin" }) : /* @__PURE__ */ jsx(Eye, { className: "size-3 opacity-60" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2588\u2588\u2588" }),
+        " ",
+        label
+      ]
+    }
+  );
+}
+function RedactedDocument({
+  document,
+  onReveal,
+  labelForKind = defaultLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("whitespace-pre-wrap break-words leading-relaxed", className), children: document.segments.map(
+    (seg, i) => seg.type === "text" ? /* @__PURE__ */ jsx("span", { children: seg.text }, i) : /* @__PURE__ */ jsx(
+      RedactedChip,
+      {
+        kind: seg.kind,
+        label: labelForKind(seg.kind),
+        onReveal: () => onReveal(seg.id)
+      },
+      seg.id
+    )
+  ) });
+}
 export {
   AgentTimeline,
   ArtifactPane,
@@ -268,7 +352,6 @@ export {
   ChatInput,
   ChatMessage,
   CodeBlock,
-  CollaboratorsList,
   CommandPreview,
   CopyButton,
   Dialog,
@@ -282,7 +365,6 @@ export {
   DialogTitle,
   DialogTrigger,
   DiffPreview,
-  DocumentEditorPane,
   DropZone,
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -299,8 +381,6 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-  EditorProvider,
-  EditorToolbar,
   EmptyState,
   ExpandedToolDetail,
   FileArtifactPane,
@@ -324,6 +404,7 @@ export {
   Progress,
   QuestionPreview,
   RealtimeSessionRegistry,
+  RedactedDocument,
   RichFileTree,
   RunGroup,
   SegmentedControl,
@@ -362,8 +443,8 @@ export {
   TerminalInput,
   TerminalLine,
   Textarea,
+  ThemeToggle,
   ThinkingIndicator,
-  TiptapEditor,
   ToastContainer,
   ToastProvider,
   ToolCallFeed,
@@ -421,13 +502,7 @@ export {
   useApiKey,
   useAuth,
   useAutoScroll,
-  useAwareness,
-  useCollaboratorPresence,
-  useCollaborators,
-  useDocumentChanges,
   useDropdownMenu,
-  useEditorConnection,
-  useEditorContext,
   useHasBackgroundRunningSessions,
   useLiveTime,
   useNavbarSessions,
@@ -439,8 +514,8 @@ export {
   useSSEStream,
   useSdkSession,
   useSessionsByActivity,
+  useTheme,
   useToast,
   useToolCallStream,
-  useTotalRunningSessions,
-  useYjsState
+  useTotalRunningSessions
 };

package/dist/nav.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LinkProps, NavLinkProps } from 'react-router';
+export { LinkProps, NavLinkProps } from 'react-router';
+
+/**
+ * Navigation primitives that make agent-app products feel snappy by default.
+ *
+ * The dominant source of the "1–2s when I click through pages" latency in the
+ * fleet is NOT slow queries (route loaders' D1 indexes already cover their
+ * filters) — it is that every click is a COLD loader round-trip the user waits
+ * on, because bare `<Link>`s do no prefetching. React Router can fire the
+ * target route's loader on hover/focus (`prefetch="intent"`), overlapping the
+ * round-trip with the user's mouse travel so the transition feels instant.
+ *
+ * These wrappers default `prefetch="intent"` so a product gets that behaviour
+ * by importing the shared `<Link>` instead of remembering the flag on every
+ * nav element. The default is overridable — a caller that passes `prefetch`
+ * wins (the spread is applied after the default).
+ */
+/** `react-router` `<Link>` with `prefetch="intent"` on by default. */
+declare function Link({ prefetch, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
+/** `react-router` `<NavLink>` with `prefetch="intent"` on by default. */
+declare function NavLink({ prefetch, ...props }: NavLinkProps): react_jsx_runtime.JSX.Element;
+
+export { Link, NavLink };

package/dist/nav.js

@@ -0,0 +1,16 @@
+// src/nav/index.tsx
+import {
+  Link as RRLink,
+  NavLink as RRNavLink
+} from "react-router";
+import { jsx } from "react/jsx-runtime";
+function Link({ prefetch = "intent", ...props }) {
+  return /* @__PURE__ */ jsx(RRLink, { prefetch, ...props });
+}
+function NavLink({ prefetch = "intent", ...props }) {
+  return /* @__PURE__ */ jsx(RRNavLink, { prefetch, ...props });
+}
+export {
+  Link,
+  NavLink
+};

package/dist/primitives.d.ts

@@ -329,4 +329,11 @@ interface InlineCodeProps extends React.HTMLAttributes<HTMLElement> {
 }
 declare function InlineCode({ className, children, ...props }: InlineCodeProps): react_jsx_runtime.JSX.Element;
 
-export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, type TextareaProps, type Toast, ToastContainer, ToastProvider, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, useToast };
+type Theme = "light" | "dark" | "system";
+declare function useTheme(): {
+    theme: Theme;
+    setTheme: (next: Theme) => void;
+};
+declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
+
+export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropZone, type DropZoneProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, InlineCode, type InlineCodeProps, Input, type InputProps, Label, Progress, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarDropZone, type SidebarDropZoneProps, Skeleton, SkeletonCard, SkeletonTable, StatCard, type StatCardProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TerminalCursor, TerminalDisplay, TerminalInput, TerminalLine, Textarea, type TextareaProps, ThemeToggle, type Toast, ToastContainer, ToastProvider, type UploadFile, UploadProgress, type UploadProgressProps, badgeVariants, useTheme, useToast };

package/dist/primitives.js

@@ -38,11 +38,13 @@ import {
   TerminalInput,
   TerminalLine,
   Textarea,
+  ThemeToggle,
   ToastContainer,
   ToastProvider,
   UploadProgress,
+  useTheme,
   useToast
-} from "./chunk-LISXUB4D.js";
+} from "./chunk-XY2FP763.js";
 import {
   Avatar,
   AvatarFallback,
@@ -182,10 +184,12 @@ export {
   TerminalInput,
   TerminalLine,
   Textarea,
+  ThemeToggle,
   ToastContainer,
   ToastProvider,
   UploadProgress,
   badgeVariants,
   buttonVariants,
+  useTheme,
   useToast
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "1.0.0",
+  "version": "3.0.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -96,6 +96,11 @@
       "types": "./dist/tool-previews.d.ts",
       "import": "./dist/tool-previews.js",
       "default": "./dist/tool-previews.js"
+    },
+    "./nav": {
+      "types": "./dist/nav.d.ts",
+      "import": "./dist/nav.js",
+      "default": "./dist/nav.js"
     }
   },
   "dependencies": {
@@ -126,7 +131,8 @@
   "peerDependencies": {
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "@tangle-network/brand": "^0.3.0"
+    "react-router": "^7",
+    "@tangle-network/brand": "^0.4.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {
@@ -158,6 +164,9 @@
     },
     "yjs": {
       "optional": true
+    },
+    "react-router": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -177,7 +186,8 @@
     "@storybook/react": "^8.6.18",
     "tsup": "^8.3.5",
     "typescript": "^5.6.0",
-    "yjs": "^13.6.0"
+    "yjs": "^13.6.0",
+    "react-router": "^7"
   },
   "keywords": [
     "tangle",

package/src/index.ts

@@ -3,8 +3,6 @@ export * from "./chat";
 export * from "./run";
 export * from "./openui";
 export * from "./files";
-export { type ConnectionState } from "./editor";
-export * from "./editor";
 export * from "./markdown";
 export * from "./auth";
 export * from "./hooks";
@@ -12,3 +10,4 @@ export * from "./stores";
 export * from "./types";
 export * from "./utils";
 export * from "./tool-previews";
+export * from "./redaction";

package/src/nav/index.tsx

@@ -0,0 +1,34 @@
+import {
+  Link as RRLink,
+  NavLink as RRNavLink,
+  type LinkProps,
+  type NavLinkProps,
+} from "react-router";
+
+/**
+ * Navigation primitives that make agent-app products feel snappy by default.
+ *
+ * The dominant source of the "1–2s when I click through pages" latency in the
+ * fleet is NOT slow queries (route loaders' D1 indexes already cover their
+ * filters) — it is that every click is a COLD loader round-trip the user waits
+ * on, because bare `<Link>`s do no prefetching. React Router can fire the
+ * target route's loader on hover/focus (`prefetch="intent"`), overlapping the
+ * round-trip with the user's mouse travel so the transition feels instant.
+ *
+ * These wrappers default `prefetch="intent"` so a product gets that behaviour
+ * by importing the shared `<Link>` instead of remembering the flag on every
+ * nav element. The default is overridable — a caller that passes `prefetch`
+ * wins (the spread is applied after the default).
+ */
+
+/** `react-router` `<Link>` with `prefetch="intent"` on by default. */
+export function Link({ prefetch = "intent", ...props }: LinkProps) {
+  return <RRLink prefetch={prefetch} {...props} />;
+}
+
+/** `react-router` `<NavLink>` with `prefetch="intent"` on by default. */
+export function NavLink({ prefetch = "intent", ...props }: NavLinkProps) {
+  return <RRNavLink prefetch={prefetch} {...props} />;
+}
+
+export type { LinkProps, NavLinkProps } from "react-router";

package/src/primitives/index.ts

@@ -116,3 +116,5 @@ export type { ArtifactPaneProps } from "./artifact-pane";
 
 export { CodeBlock, CopyButton, InlineCode } from "./code-block";
 export type { CodeBlockProps, InlineCodeProps } from "./code-block";
+
+export { ThemeToggle, useTheme } from "./theme-toggle";

package/src/redaction/index.ts

@@ -0,0 +1,7 @@
+export {
+  RedactedDocument,
+  type RedactedDocumentProps,
+  type RedactedDocumentData,
+  type RedactedDocSegment,
+  type RevealResult,
+} from "./redacted-document";

package/src/redaction/redacted-document.tsx

@@ -0,0 +1,150 @@
+import { useCallback, useState, type ReactNode } from "react";
+import { Eye, EyeOff, Loader2, ShieldAlert } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Viewer for a server-produced redacted document. Renders text inline and each
+ * redacted span as a masked chip; clicking a chip asks the server to reveal that
+ * one span. The original plaintext is NEVER in the document the client holds —
+ * the chip carries only an id + kind; `onReveal` round-trips to the server, where
+ * `@tangle-network/agent-app/redact`'s `revealSpan` runs the authorization check
+ * and writes the audit trail. So authz + audit are server-truth; this is display.
+ *
+ * Structural types (no `@tangle-network/agent-app` dependency) — the viewer needs
+ * only `{ id, kind }` per span; the cipher stays server-side.
+ */
+
+export type RedactedDocSegment =
+  | { type: "text"; text: string }
+  | { type: "redacted"; id: string; kind: string };
+
+export interface RedactedDocumentData {
+  segments: RedactedDocSegment[];
+}
+
+export interface RevealResult {
+  ok: boolean;
+  value?: string;
+  /** e.g. `forbidden` | `not_found` when `ok` is false. */
+  reason?: string;
+}
+
+export interface RedactedDocumentProps {
+  document: RedactedDocumentData;
+  /** Reveal one span by id. Wire to a server route that calls agent-app's
+   *  `revealSpan` (authz + audit happen there). Resolves with the original. */
+  onReveal: (spanId: string) => Promise<RevealResult>;
+  /** Display label for a redaction kind (default: the kind, upper-cased). */
+  labelForKind?: (kind: string) => string;
+  className?: string;
+}
+
+type ChipState =
+  | { status: "masked" }
+  | { status: "loading" }
+  | { status: "revealed"; value: string }
+  | { status: "denied"; reason?: string };
+
+const defaultLabel = (kind: string) => kind.replace(/[-_]/g, " ").toUpperCase();
+
+function RedactedChip({
+  kind,
+  label,
+  onReveal,
+}: {
+  kind: string;
+  label: string;
+  onReveal: () => Promise<RevealResult>;
+}) {
+  const [state, setState] = useState<ChipState>({ status: "masked" });
+
+  const reveal = useCallback(async () => {
+    setState({ status: "loading" });
+    try {
+      const r = await onReveal();
+      setState(
+        r.ok && r.value !== undefined
+          ? { status: "revealed", value: r.value }
+          : { status: "denied", reason: r.reason },
+      );
+    } catch {
+      setState({ status: "denied", reason: "error" });
+    }
+  }, [onReveal]);
+
+  if (state.status === "revealed") {
+    return (
+      <button
+        type="button"
+        onClick={() => setState({ status: "masked" })}
+        title="Revealed — click to hide"
+        aria-label={`${label}: revealed, click to hide`}
+        className={cn(
+          "inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-1 font-medium",
+          "bg-[color-mix(in_oklch,var(--color-warning,orange)_18%,transparent)] text-foreground ring-1 ring-warning/40",
+        )}
+      >
+        {state.value}
+        <EyeOff className="size-3 opacity-60" />
+      </button>
+    );
+  }
+
+  if (state.status === "denied") {
+    return (
+      <span
+        title={`Restricted${state.reason ? ` (${state.reason})` : ""}`}
+        aria-label={`${label}: restricted`}
+        className="inline-flex items-center gap-1 rounded-[var(--radius-sm)] bg-muted px-1 text-muted-foreground"
+      >
+        <ShieldAlert className="size-3" /> {label}
+      </span>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      disabled={state.status === "loading"}
+      onClick={reveal}
+      title={`${label} — click to reveal`}
+      aria-label={`${label} redacted, click to reveal`}
+      className={cn(
+        "inline-flex items-center gap-1 rounded-[var(--radius-sm)] px-1 font-medium tracking-wide",
+        "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground transition-colors",
+        "cursor-pointer select-none",
+      )}
+    >
+      {state.status === "loading" ? (
+        <Loader2 className="size-3 animate-spin" />
+      ) : (
+        <Eye className="size-3 opacity-60" />
+      )}
+      <span aria-hidden>{"███"}</span> {label}
+    </button>
+  );
+}
+
+export function RedactedDocument({
+  document,
+  onReveal,
+  labelForKind = defaultLabel,
+  className,
+}: RedactedDocumentProps): ReactNode {
+  return (
+    <div className={cn("whitespace-pre-wrap break-words leading-relaxed", className)}>
+      {document.segments.map((seg, i) =>
+        seg.type === "text" ? (
+          <span key={i}>{seg.text}</span>
+        ) : (
+          <RedactedChip
+            key={seg.id}
+            kind={seg.kind}
+            label={labelForKind(seg.kind)}
+            onReveal={() => onReveal(seg.id)}
+          />
+        ),
+      )}
+    </div>
+  );
+}