@tangle-network/ui 11.10.0 → 11.11.1

package/dist/use-sse-stream-Dm6R5YWz.d.ts

@@ -0,0 +1,282 @@
+import { t as SessionMessage } from "./message-vhUI0c5G.js";
+import { n as SessionPart } from "./parts-5mhy9yJ3.js";
+import { a as Run, n as GroupedMessage } from "./run-OyWmIDqu.js";
+import { t as FeedSegment } from "./tool-call-feed-BeB1_4pX.js";
+import { c as ActiveSessionTransportMode, i as ActiveSessionConnectionState, u as RegisterActiveSessionOptions } from "./active-sessions-store-nl70ZnMC.js";
+import { RefObject } from "react";
+//#region src/hooks/use-auto-scroll.d.ts
+/**
+ * Scroll-to-bottom behaviour: sticks to the bottom while streaming,
+ * pauses when user scrolls up, resumes when user scrolls back down.
+ */
+declare function useAutoScroll(containerRef: RefObject<HTMLElement | null>, deps?: unknown[]): {
+  isAtBottom: boolean;
+  scrollToBottom: () => void;
+};
+//#endregion
+//#region src/hooks/use-dropdown-menu.d.ts
+interface UseDropdownMenuOptions {
+  closeOnEsc?: boolean;
+}
+declare function useDropdownMenu(options?: UseDropdownMenuOptions): {
+  open: boolean;
+  setOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+  ref: import("react").RefObject<HTMLDivElement | null>;
+  toggle: () => void;
+  close: () => void;
+};
+//#endregion
+//#region src/hooks/use-run-collapse-state.d.ts
+/**
+ * Manages per-run collapse state with auto-collapse after run completion.
+ *
+ * - Runs stay expanded by default
+ * - Collapse is manual only
+ */
+declare function useRunCollapseState(runs: Run[]): {
+  isCollapsed: (runId: string) => boolean;
+  toggleCollapse: (runId: string) => void;
+};
+//#endregion
+//#region src/hooks/use-run-groups.d.ts
+interface UseRunGroupsOptions {
+  messages: SessionMessage[];
+  partMap: Record<string, SessionPart[]>;
+  isStreaming: boolean;
+}
+declare function useRunGroups({ messages, partMap, isStreaming }: UseRunGroupsOptions): GroupedMessage[];
+//#endregion
+//#region src/hooks/use-tool-call-stream.d.ts
+interface UseToolCallStreamReturn {
+  /** Current feed segments (text + tool calls interleaved) */
+  segments: FeedSegment[];
+  /** Push a raw SSE event into the stream */
+  pushEvent: (event: {
+    type: string;
+    data: Record<string, unknown>;
+  }) => void;
+  /** Push a text delta (from message.part.updated) */
+  pushText: (delta: string) => void;
+  /** Mark a tool call as complete */
+  completeToolCall: (id: string, result: {
+    output?: string;
+    error?: string;
+    duration?: number;
+  }) => void;
+  /** Reset the stream */
+  reset: () => void;
+}
+declare function useToolCallStream(): UseToolCallStreamReturn;
+//#endregion
+//#region src/hooks/use-sdk-session.d.ts
+interface SdkSessionAttachment {
+  name: string;
+  size?: number;
+}
+interface SdkSessionSeed {
+  id: string;
+  role: SessionMessage["role"];
+  createdAt?: number | string | Date;
+  content?: string;
+  attachments?: SdkSessionAttachment[];
+  parts?: SessionPart[];
+}
+interface SdkSessionEvent {
+  type: string;
+  data?: Record<string, unknown>;
+}
+interface BeginAssistantMessageOptions {
+  id?: string;
+  role?: Extract<SessionMessage["role"], "assistant" | "system">;
+  createdAt?: number | string | Date;
+}
+interface AppendUserMessageOptions {
+  id?: string;
+  role?: Extract<SessionMessage["role"], "user" | "system">;
+  content: string;
+  createdAt?: number | string | Date;
+  attachments?: SdkSessionAttachment[];
+}
+interface CompleteAssistantMessageOptions {
+  messageId?: string;
+  finalText?: string;
+}
+interface ApplySdkEventOptions {
+  messageId?: string;
+}
+interface UseSdkSessionOptions {
+  initialMessages?: SdkSessionSeed[];
+}
+interface UseSdkSessionReturn {
+  messages: SessionMessage[];
+  partMap: Record<string, SessionPart[]>;
+  isStreaming: boolean;
+  activeAssistantMessageId: string | null;
+  replaceHistory: (messages: SdkSessionSeed[]) => void;
+  appendUserMessage: (message: AppendUserMessageOptions) => string;
+  beginAssistantMessage: (options?: BeginAssistantMessageOptions) => string;
+  applySdkEvent: (event: SdkSessionEvent, options?: ApplySdkEventOptions) => void;
+  completeAssistantMessage: (options?: CompleteAssistantMessageOptions) => void;
+  failAssistantMessage: (error: string, options?: {
+    messageId?: string;
+  }) => void;
+  setStreaming: (value: boolean) => void;
+  reset: () => void;
+}
+declare function useSdkSession({ initialMessages }?: UseSdkSessionOptions): UseSdkSessionReturn;
+//#endregion
+//#region src/hooks/use-realtime-session.d.ts
+interface RealtimeSessionOptions extends RegisterActiveSessionOptions {
+  connectUrl?: string | null;
+  enabled?: boolean;
+  foreground?: boolean;
+  keepRegistered?: boolean;
+  reconnect?: boolean;
+  reconnectIntervalMs?: number;
+  maxReconnectAttempts?: number;
+  transportMode?: ActiveSessionTransportMode;
+  onEvent?: (event: SdkSessionEvent) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onError?: (error: Error) => void;
+}
+interface RealtimeSessionState {
+  connectionState: ActiveSessionConnectionState;
+  lastError: string | null;
+  reconnectAttempts: number;
+  isConnected: boolean;
+}
+interface RealtimeSessionTarget extends RealtimeSessionOptions {
+  key?: string;
+}
+interface RealtimeSessionRegistryProps {
+  sessions: RealtimeSessionTarget[];
+}
+declare function useRealtimeSession({ sessionId, projectId, projectLabel, title, href, metadata, connectUrl, enabled, foreground, keepRegistered, reconnect, reconnectIntervalMs, maxReconnectAttempts, transportMode, onEvent, onOpen, onClose, onError }: RealtimeSessionOptions): RealtimeSessionState;
+declare function RealtimeSessionRegistry({ sessions }: RealtimeSessionRegistryProps): import("react").FunctionComponentElement<RealtimeSessionTarget>[];
+//#endregion
+//#region src/hooks/use-sse-stream.d.ts
+/**
+ * SSE Event data structure
+ */
+interface SSEEvent<T = unknown> {
+  id?: string;
+  event: string;
+  data: T;
+  timestamp: number;
+}
+/**
+ * Connection state for SSE streams
+ */
+type ConnectionState = "connecting" | "connected" | "reconnecting" | "disconnected" | "error";
+/**
+ * SSE stream options
+ */
+interface UseSSEStreamOptions<T = unknown> {
+  /** URL to connect to */
+  url: string;
+  /** Authorization header value */
+  authToken?: string;
+  /** Enable automatic reconnection (default: true) */
+  autoReconnect?: boolean;
+  /** Max reconnection attempts (default: 5) */
+  maxRetries?: number;
+  /** Base delay between reconnects in ms (default: 1000) */
+  reconnectDelay?: number;
+  /** Event types to listen for (default: all) */
+  eventTypes?: string[];
+  /** Callback for each event */
+  onEvent?: (event: SSEEvent<T>) => void;
+  /** Callback on connection state change */
+  onStateChange?: (state: ConnectionState) => void;
+  /** Callback on error */
+  onError?: (error: Error) => void;
+  /** Custom headers */
+  headers?: Record<string, string>;
+  /** Whether to start connected (default: true) */
+  enabled?: boolean;
+}
+/**
+ * SSE stream result
+ */
+interface UseSSEStreamResult<T = unknown> {
+  /** Current connection state */
+  state: ConnectionState;
+  /** All received events */
+  events: SSEEvent<T>[];
+  /** Most recent event */
+  lastEvent: SSEEvent<T> | null;
+  /** Error if any */
+  error: Error | null;
+  /** Manually connect */
+  connect: () => void;
+  /** Manually disconnect */
+  disconnect: () => void;
+  /** Clear events buffer */
+  clearEvents: () => void;
+  /** Retry count */
+  retryCount: number;
+  /** Time since last event (ms) */
+  timeSinceLastEvent: number;
+}
+/**
+ * React hook for consuming SSE streams with automatic reconnection,
+ * event buffering, and state management.
+ *
+ * @example
+ * ```tsx
+ * const { events, state, lastEvent } = useSSEStream({
+ *   url: '/api/v1/tasks/123/stream',
+ *   authToken: 'Bearer xxx',
+ *   onEvent: (e) => console.log('Event:', e),
+ * });
+ *
+ * return (
+ *   <div>
+ *     <p>Status: {state}</p>
+ *     {events.map((e, i) => (
+ *       <div key={i}>{e.event}: {JSON.stringify(e.data)}</div>
+ *     ))}
+ *   </div>
+ * );
+ * ```
+ */
+declare function useSSEStream<T = unknown>(options: UseSSEStreamOptions<T>): UseSSEStreamResult<T>;
+/**
+ * Typed event types for common streaming scenarios
+ */
+interface TaskStreamEvent {
+  task_id: string;
+  status?: string;
+  progress?: number;
+  message?: string;
+  result?: unknown;
+  error?: string;
+}
+interface AgentStreamEvent {
+  type: "message.updated" | "tool_call" | "tool_result" | "llm_response" | "error" | "session.idle" | "execution.started" | "execution.result";
+  data: unknown;
+  timestamp?: number;
+}
+interface TerminalStreamEvent {
+  type: "output" | "input" | "error" | "exit";
+  data: string;
+  timestamp: number;
+}
+interface AutomationStreamEvent {
+  automation_id: string;
+  event_id?: string;
+  status?: string;
+  variant_id?: string;
+  output?: string;
+  action_result?: unknown;
+  error?: string;
+}
+interface BotStreamEvent {
+  bot_id: string;
+  type: "balance" | "trade" | "decision" | "log" | "error";
+  data: unknown;
+  timestamp: number;
+}
+//#endregion
+export { useRunGroups as A, SdkSessionSeed as C, UseToolCallStreamReturn as D, useSdkSession as E, useDropdownMenu as M, useAutoScroll as N, useToolCallStream as O, SdkSessionEvent as S, UseSdkSessionReturn as T, AppendUserMessageOptions as _, SSEEvent as a, CompleteAssistantMessageOptions as b, UseSSEStreamOptions as c, RealtimeSessionOptions as d, RealtimeSessionRegistry as f, useRealtimeSession as g, RealtimeSessionTarget as h, ConnectionState as i, useRunCollapseState as j, UseRunGroupsOptions as k, UseSSEStreamResult as l, RealtimeSessionState as m, AutomationStreamEvent as n, TaskStreamEvent as o, RealtimeSessionRegistryProps as p, BotStreamEvent as r, TerminalStreamEvent as s, AgentStreamEvent as t, useSSEStream as u, ApplySdkEventOptions as v, UseSdkSessionOptions as w, SdkSessionAttachment as x, BeginAssistantMessageOptions as y };

package/dist/utils-Bl_CZ0Qp.js

@@ -0,0 +1,37 @@
+//#region src/utils/copy-text.ts
+/**
+* Copy text to clipboard with a non-secure-context fallback.
+* Returns true if a copy strategy likely succeeded.
+*/
+async function copyText(text) {
+	if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) try {
+		await navigator.clipboard.writeText(text);
+		return true;
+	} catch {}
+	if (typeof document === "undefined") return false;
+	try {
+		const textarea = document.createElement("textarea");
+		textarea.value = text;
+		textarea.style.position = "fixed";
+		textarea.style.opacity = "0";
+		document.body.appendChild(textarea);
+		textarea.select();
+		const copied = document.execCommand("copy");
+		document.body.removeChild(textarea);
+		return copied;
+	} catch {
+		return false;
+	}
+}
+//#endregion
+//#region src/utils/time-ago.ts
+function timeAgo(ts) {
+	const secs = Math.floor((Date.now() - ts) / 1e3);
+	if (secs < 5) return "just now";
+	if (secs < 60) return `${secs}s ago`;
+	const mins = Math.floor(secs / 60);
+	if (mins < 60) return `${mins}m ago`;
+	return `${Math.floor(mins / 60)}h ago`;
+}
+//#endregion
+export { copyText as n, timeAgo as t };

package/dist/{chunk-RQHJBTEU.js → utils-C_uf36nf.js}

@@ -1,10 +1,8 @@
-// src/lib/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+//#region src/lib/utils.ts
 function cn(...inputs) {
-  return twMerge(clsx(inputs));
+	return twMerge(clsx(inputs));
 }
-
-export {
-  cn
-};
+//#endregion
+export { cn as t };

package/dist/utils.d.ts

@@ -1,104 +1,2 @@
-import { a as ToolPart } from './parts-dj7AcUg0.js';
-import { T as ToolDisplayMetadata } from './tool-display-z4JcDmMQ.js';
-import { T as ToolCategory } from './run-PfLmDAox.js';
-import { ClassValue } from 'clsx';
-import 'react';
-import './message-BHWbxBtT.js';
-
-/**
- * Copy text to clipboard with a non-secure-context fallback.
- * Returns true if a copy strategy likely succeeded.
- */
-declare function copyText(text: string): Promise<boolean>;
-
-/** Format a duration in milliseconds to a human-readable string. */
-declare function formatDuration(ms: number): string;
-/** Truncate text to `max` characters, appending "..." if truncated. */
-declare function truncateText(text: string, max: number): string;
-/**
- * Format an uptime duration in milliseconds with progressive
- * granularity, so short-lived sandboxes don't render as "0d 0h".
- *  - < 60s        → "Ns"
- *  - < 60m        → "Nm Ss"
- *  - < 24h        → "Nh Mm"
- *  - otherwise    → "Nd Hh"
- */
-declare function formatUptime(ms: number): string;
-/**
- * Format a byte count using binary units (KiB/MiB/GiB, surfaced as
- * "KB/MB/GB" for readability). KB and MB use one decimal below 10 and
- * round above; GB keeps two decimals below 10 so half-GB changes stay
- * visible on memory dashboards, and drops to one decimal above.
- */
-declare function formatBytes(bytes: number): string;
-
-declare function timeAgo(ts: number): string;
-
-declare const TOOL_CATEGORY_ICONS: Record<ToolCategory, string>;
-declare function getToolCategory(toolName: string): ToolCategory;
-/**
- * Title is the bare verb ("Read", "Edit", "Shell"); the path, command, pattern
- * or query lives in `description` only, so a row prints its subject once.
- * `targetPath` / `commandSnippet` carry the untruncated value for consumers
- * that need it (diff headers, expanded detail).
- */
-declare function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata;
-/** Extract error text from a tool part, if any. */
-declare function getToolErrorText(part: ToolPart, fallback?: string): string | undefined;
-
-declare function cn(...inputs: ClassValue[]): string;
-
-/**
- * The focus treatment every control shares, in two shapes over one palette
- * (`--focus-border`, `--focus-halo` and `--border-strong` from
- * `@tangle-network/brand`'s tokens.css).
- *
- * A FIELD — input, textarea, select trigger, composer — shows focus on its own
- * border: the hairline shifts to `--focus-border` and a 3px `--focus-halo` ring
- * spreads outside it. It keys off `:focus`, because a caret in a field needs the
- * cue whether the field was clicked or tabbed into.
- *
- * A CONTROL — button, tab, switch, link, card — has no border to shift, so it
- * draws a 1px `--focus-border` outline with the same 3px halo beyond it. It keys
- * off `:focus-visible`, so a mouse click leaves no ring.
- *
- * The halo is a Tailwind ring, which renders as box-shadow: it follows
- * border-radius and never moves layout, and a consumer removes it with
- * `focus:ring-0` / `focus-visible:ring-0`, which tailwind-merge resolves against
- * these classes. The control's line is an outline so that forced-colors mode,
- * which drops box-shadows, still paints it. A field has its border for that, so
- * it hides the outline with `outline-hidden`, which stays transparent-but-present
- * in forced-colors mode.
- */
-/**
- * Resting hairline, neutral hover, and `:focus` border plus halo for a text
- * field. The hover is a plain `hover:` class so a consumer's `hover:border-*`
- * replaces it through tailwind-merge; the focus border outranks it because
- * Tailwind emits `focus:` after `hover:`.
- */
-declare const focusField = "border-border transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--border-strong)] focus:outline-hidden focus:border-[var(--focus-border)] focus:ring-3 focus:ring-[var(--focus-halo)]";
-/**
- * The field treatment for a container that wraps a borderless field, such as a
- * composer around a textarea and its buttons. It lights while a FIELD inside
- * has focus: a text input, textarea, native select or contenteditable editor. A
- * focused button, checkbox or button-type input inside the container shows only
- * its own ring, so a click on the send button does not read as field focus and
- * a tab to it does not stack two indicators. `:focus-within` cannot tell the
- * two apart, so the rule keys off `:has()`; a consumer's `focus-within:*` class
- * therefore does not replace it. To style that container's focus differently,
- * compose your own classes instead of this helper. The field selector is
- * written out in full because Tailwind reads class names statically.
- */
-declare const focusFieldWithin = "border-border transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--border-strong)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]";
-/** Error state for a field: a danger hairline and the same focus shape in danger. Compose after `focusField`. */
-declare const focusFieldInvalid = "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]";
-/** Keyboard-only focus for a control: a 1px focus line with the halo beyond it. */
-declare const focusRing = "focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:outline-offset-0";
-/**
- * `focusRing` drawn inside the box, for a control flush against a scroll
- * container or its neighbours (a tab strip, a list row), where an outer ring
- * would be clipped or would overlap them.
- */
-declare const focusRingInset = "focus-visible:outline-1 focus-visible:outline-[var(--focus-border)] focus-visible:ring-4 focus-visible:ring-[var(--focus-halo)] focus-visible:-outline-offset-1 focus-visible:ring-inset";
-
-export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };
+import { a as focusRingInset, c as getToolCategory, d as timeAgo, f as formatBytes, g as copyText, h as truncateText, i as focusRing, l as getToolDisplayMetadata, m as formatUptime, n as focusFieldInvalid, o as cn, p as formatDuration, r as focusFieldWithin, s as TOOL_CATEGORY_ICONS, t as focusField, u as getToolErrorText } from "./index-BgUHilZm.js";
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };

package/dist/utils.js

@@ -1,44 +1,6 @@
-import {
-  copyText,
-  timeAgo
-} from "./chunk-SNLR2AEA.js";
-import {
-  TOOL_CATEGORY_ICONS,
-  getToolCategory,
-  getToolDisplayMetadata,
-  getToolErrorText
-} from "./chunk-ND3ZFXQK.js";
-import {
-  formatBytes,
-  formatDuration,
-  formatUptime,
-  truncateText
-} from "./chunk-4CLN43XT.js";
-import {
-  focusField,
-  focusFieldInvalid,
-  focusFieldWithin,
-  focusRing,
-  focusRingInset
-} from "./chunk-WKWBTL2V.js";
-import {
-  cn
-} from "./chunk-RQHJBTEU.js";
-export {
-  TOOL_CATEGORY_ICONS,
-  cn,
-  copyText,
-  focusField,
-  focusFieldInvalid,
-  focusFieldWithin,
-  focusRing,
-  focusRingInset,
-  formatBytes,
-  formatDuration,
-  formatUptime,
-  getToolCategory,
-  getToolDisplayMetadata,
-  getToolErrorText,
-  timeAgo,
-  truncateText
-};
+import { a as focusRingInset, i as focusRing, n as focusFieldInvalid, r as focusFieldWithin, t as focusField } from "./focus-BcE_SHqz.js";
+import { t as cn } from "./utils-C_uf36nf.js";
+import { i as getToolErrorText, n as getToolCategory, r as getToolDisplayMetadata, t as TOOL_CATEGORY_ICONS } from "./tool-display-BAuAVa43.js";
+import { i as truncateText, n as formatDuration, r as formatUptime, t as formatBytes } from "./format-DfcLWqMa.js";
+import { n as copyText, t as timeAgo } from "./utils-Bl_CZ0Qp.js";
+export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.10.0",
+  "version": "11.11.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -109,34 +109,32 @@
     }
   },
   "dependencies": {
-    "@pierre/trees": "1.0.0-beta.3",
-    "@radix-ui/react-avatar": "^1.1.0",
-    "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.1.0",
-    "@radix-ui/react-dropdown-menu": "^2.1.0",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-select": "^2.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
-    "@radix-ui/react-toast": "^1.2.0",
-    "class-variance-authority": "^0.7.0",
+    "@pierre/trees": "1.0.0-beta.6",
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-progress": "^1.1.16",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.469.0",
-    "marked": "^17.0.5",
+    "lucide-react": "^1.48.0",
+    "marked": "^18.0.14",
     "react-markdown": "^10.1.0",
-    "react-pdf": "^9.2.1",
     "react-syntax-highlighter": "^16.1.1",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.0.2",
-    "turndown": "^7.2.2"
+    "tailwind-merge": "^3.7.0",
+    "turndown": "^7.2.4"
   },
   "peerDependencies": {
-    "@tangle-network/brand": "^1.6.0",
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
-    "@nanostores/react": ">=0.8.4 <2.0.0",
+    "@nanostores/react": ">=0.8.4 <3.0.0",
+    "@tangle-network/brand": "^1.8.2",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",
@@ -181,25 +179,25 @@
     }
   },
   "devDependencies": {
-    "@hocuspocus/provider": "^4.4.0",
-    "@nanostores/react": "^1.1.0",
-    "@tiptap/core": "^3.28.0",
-    "@tiptap/extension-collaboration": "^3.28.0",
-    "@tiptap/extension-collaboration-caret": "^3.28.0",
-    "@tiptap/react": "^3.28.0",
-    "@tiptap/starter-kit": "^3.28.0",
-    "@tiptap/y-tiptap": "^3.0.7",
-    "@types/react": "^19.0.0",
+    "@hocuspocus/provider": "^4.7.0",
+    "@nanostores/react": "^2.0.1",
+    "@storybook/react": "^10.6.0",
+    "@tiptap/core": "^3.31.3",
+    "@tiptap/extension-collaboration": "^3.31.3",
+    "@tiptap/extension-collaboration-caret": "^3.31.3",
+    "@tiptap/react": "^3.31.3",
+    "@tiptap/starter-kit": "^3.31.3",
+    "@tiptap/y-tiptap": "^3.0.9",
+    "@types/react": "^19.3.0",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "@types/turndown": "^5.0.5",
-    "nanostores": "^1.4.1",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "@storybook/react": "^10.5.5",
-    "tsup": "^8.3.5",
-    "typescript": "^5.6.0",
-    "yjs": "^13.6.31",
-    "react-router": "^8.3.0"
+    "@types/turndown": "^5.0.6",
+    "nanostores": "^1.5.4",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-router": "^8.4.0",
+    "tsdown": "^0.23.0",
+    "typescript": "^7.0.2",
+    "yjs": "^13.6.33"
   },
   "keywords": [
     "tangle",
@@ -209,7 +207,7 @@
     "design-system"
   ],
   "scripts": {
-    "build": "tsup && node ../../scripts/validate-dist.mjs",
-    "dev": "tsup --watch"
+    "build": "tsdown && node ../../scripts/validate-dist.mjs",
+    "dev": "tsdown --watch"
   }
 }

package/src/lib/focus.ts

@@ -41,9 +41,10 @@ export const focusField =
  * therefore does not replace it. To style that container's focus differently,
  * compose your own classes instead of this helper. The field selector is
  * written out in full because Tailwind reads class names statically.
+ * Base styles use its marker class to clear the inner editor fallback outline.
  */
 export const focusFieldWithin =
-  "border-border transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--border-strong)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]";
+  "focus-field-within border-border transition-[border-color,box-shadow] duration-150 ease-out hover:border-[var(--border-strong)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:border-[var(--focus-border)] has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-3 has-[:is(textarea,select,[contenteditable]:not([contenteditable=false]),input:not([type=button],[type=submit],[type=reset],[type=image],[type=checkbox],[type=radio],[type=range],[type=color],[type=file])):focus]:ring-[var(--focus-halo)]";
 
 /** Error state for a field: a danger hairline and the same focus shape in danger. Compose after `focusField`. */
 export const focusFieldInvalid =

package/dist/artifact-pane-DpuWcAiF.d.ts

@@ -1,33 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-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;
-    /** Extra classes for the header band (e.g. to align its surface with the host chrome). */
-    headerClassName?: string;
-    /**
-     * Suppress the eyebrow/title/subtitle/meta block. Use when the host already
-     * shows the artifact's identity elsewhere (e.g. a surrounding path row), so the
-     * pane keeps only its tabs, toolbar, and header actions. The whole header row
-     * collapses when nothing else would render in it.
-     */
-    hideTitleBlock?: boolean;
-}
-/**
- * ArtifactPane — shared frame for files, previews, documents, inspectors, and
- * other artifact-like surfaces inside sandbox applications.
- */
-declare function ArtifactPane({ eyebrow, title, subtitle, meta, headerActions, tabs, toolbar, footer, emptyState, children, className, contentClassName, headerClassName, hideTitleBlock, }: ArtifactPaneProps): react_jsx_runtime.JSX.Element;
-
-export { ArtifactPane as A, type ArtifactPaneProps as a };