@tangle-network/sandbox-ui 0.3.10 → 0.3.12

package/dist/{chunk-MGCVTFKB.js → chunk-4HT5J6CE.js}

@@ -9756,6 +9756,7 @@ function EditorProvider({
   websocketUrl,
   documentName,
   token,
+  tokenExpiresAt,
   user,
   autoConnect = true,
   autoReconnect = true,
@@ -9763,6 +9764,7 @@ function EditorProvider({
   onConnectionChange,
   onSync,
   onAuthError,
+  onRefreshToken,
   children
 }) {
   const [connectionState, setConnectionState] = useState("disconnected");
@@ -9771,6 +9773,12 @@ function EditorProvider({
   const docRef = useRef(null);
   const providerRef = useRef(null);
   const reconnectAttemptsRef = useRef(0);
+  const tokenRef = useRef(token);
+  const tokenExpiryRef = useRef(tokenExpiresAt);
+  const refreshPromiseRef = useRef(null);
+  const refreshTimerRef = useRef(null);
+  tokenRef.current = token;
+  tokenExpiryRef.current = tokenExpiresAt;
   if (!docRef.current) {
     docRef.current = new Y3.Doc();
   }
@@ -9804,6 +9812,52 @@ function EditorProvider({
     },
     []
   );
+  const clearRefreshTimer = useCallback(() => {
+    if (refreshTimerRef.current != null) {
+      window.clearTimeout(refreshTimerRef.current);
+      refreshTimerRef.current = null;
+    }
+  }, []);
+  const refreshToken = useCallback(async () => {
+    if (!onRefreshToken) {
+      return null;
+    }
+    if (refreshPromiseRef.current) {
+      return refreshPromiseRef.current;
+    }
+    const refreshPromise = (async () => {
+      const next = await onRefreshToken();
+      const resolvedToken = typeof next === "string" ? next : next.token;
+      const resolvedExpiry = typeof next === "string" ? void 0 : next.expiresAt;
+      tokenRef.current = resolvedToken;
+      tokenExpiryRef.current = resolvedExpiry;
+      return resolvedToken;
+    })().catch((error) => {
+      onAuthError?.(
+        error instanceof Error ? error : new Error(String(error))
+      );
+      return null;
+    }).finally(() => {
+      refreshPromiseRef.current = null;
+    });
+    refreshPromiseRef.current = refreshPromise;
+    return refreshPromise;
+  }, [onAuthError, onRefreshToken]);
+  const scheduleTokenRefresh = useCallback(() => {
+    clearRefreshTimer();
+    if (!tokenExpiryRef.current || !onRefreshToken || typeof window === "undefined") {
+      return;
+    }
+    const refreshAtMs = tokenExpiryRef.current * 1e3 - 6e4;
+    const delay = refreshAtMs - Date.now();
+    if (delay <= 0) {
+      void refreshToken();
+      return;
+    }
+    refreshTimerRef.current = window.setTimeout(() => {
+      void refreshToken();
+    }, delay);
+  }, [clearRefreshTimer, onRefreshToken, refreshToken]);
   const connect = useCallback(() => {
     if (providerRef.current) {
       providerRef.current.connect();
@@ -9814,12 +9868,13 @@ function EditorProvider({
       url: websocketUrl,
       name: documentName,
       document: doc3,
-      token,
+      token: async () => tokenRef.current,
       // @ts-expect-error -- connect is valid at runtime but missing from type defs
       connect: true,
       onConnect: () => {
         reconnectAttemptsRef.current = 0;
         updateConnectionState("connected");
+        scheduleTokenRefresh();
       },
       onSynced: () => {
         setIsSynced(true);
@@ -9829,6 +9884,7 @@ function EditorProvider({
       onDisconnect: () => {
         updateConnectionState("disconnected");
         setIsSynced(false);
+        clearRefreshTimer();
         if (autoReconnect && reconnectAttemptsRef.current < maxReconnectAttempts) {
           reconnectAttemptsRef.current += 1;
           const delay = Math.min(
@@ -9844,8 +9900,19 @@ function EditorProvider({
       },
       onAuthenticationFailed: ({ reason }) => {
         const error = new Error(reason ?? "Authentication failed");
-        onAuthError?.(error);
         updateConnectionState("disconnected");
+        clearRefreshTimer();
+        if (onRefreshToken) {
+          void refreshToken().then((nextToken) => {
+            if (nextToken && providerRef.current) {
+              providerRef.current.connect();
+              return;
+            }
+            onAuthError?.(error);
+          });
+          return;
+        }
+        onAuthError?.(error);
       },
       onAwarenessUpdate: () => {
         updateCollaborators(provider.awareness);
@@ -9861,16 +9928,19 @@ function EditorProvider({
     websocketUrl,
     documentName,
     doc3,
-    token,
     user.name,
     user.userId,
     userColor,
     autoReconnect,
     maxReconnectAttempts,
+    clearRefreshTimer,
     updateConnectionState,
     updateCollaborators,
     onSync,
-    onAuthError
+    onAuthError,
+    onRefreshToken,
+    refreshToken,
+    scheduleTokenRefresh
   ]);
   const disconnect = useCallback(() => {
     if (providerRef.current) {
@@ -9883,12 +9953,13 @@ function EditorProvider({
       connect();
     }
     return () => {
+      clearRefreshTimer();
       if (providerRef.current) {
         providerRef.current.destroy();
         providerRef.current = null;
       }
     };
-  }, [autoConnect, connect]);
+  }, [autoConnect, clearRefreshTimer, connect]);
   const contextValue = useMemo(
     () => ({
       doc: doc3,
@@ -10682,6 +10753,21 @@ function connectionLabel(state) {
       return "Offline";
   }
 }
+function connectionDescription(state, collaborators, readOnly) {
+  if (readOnly) {
+    return state === "disconnected" ? "Live access is paused. You can keep reading while the editor reconnects." : "You are viewing the live document in read-only mode.";
+  }
+  switch (state) {
+    case "synced":
+      return collaborators > 0 ? `You and ${collaborators} collaborator${collaborators === 1 ? "" : "s"} are editing the same document.` : "You are editing the live document. Changes sync automatically.";
+    case "connected":
+    case "connecting":
+      return "Connecting the live document. Local edits stay in place while sync catches up.";
+    case "disconnected":
+    default:
+      return "Live updates are paused. You can keep editing and reconnect when the transport is healthy again.";
+  }
+}
 function CollaborativeDocumentSurface({
   markdown,
   placeholder,
@@ -10693,26 +10779,30 @@ function CollaborativeDocumentSurface({
   const { state } = useEditorConnection();
   const { collaborators } = useCollaborators();
   const initialContent = useMemo4(() => markdownToHtml(markdown), [markdown]);
+  const collaboratorCount = collaborators.length + 1;
   return /* @__PURE__ */ jsxs3("div", { className: cn("flex h-full min-h-0 flex-col gap-3", className), children: [
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]/80 px-3 py-2", children: [
-      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 text-xs text-[var(--text-muted)]", children: [
-        /* @__PURE__ */ jsxs3(
-          "span",
-          {
-            className: cn(
-              "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-medium",
-              connectionTone(state)
-            ),
-            children: [
-              state === "disconnected" ? /* @__PURE__ */ jsx5(WifiOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx5(Wifi, { className: "h-3.5 w-3.5" }),
-              connectionLabel(state)
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-input)] px-2.5 py-1", children: [
-          /* @__PURE__ */ jsx5(Users, { className: "h-3.5 w-3.5" }),
-          collaborators.length === 0 ? "Solo editing" : `${collaborators.length + 1} active`
-        ] })
+      /* @__PURE__ */ jsxs3("div", { className: "min-w-0 space-y-2", children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2 text-xs text-[var(--text-muted)]", children: [
+          /* @__PURE__ */ jsxs3(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 font-medium",
+                connectionTone(state)
+              ),
+              children: [
+                state === "disconnected" ? /* @__PURE__ */ jsx5(WifiOff, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx5(Wifi, { className: "h-3.5 w-3.5" }),
+                connectionLabel(state)
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5 rounded-full border border-[var(--border-subtle)] bg-[var(--bg-input)] px-2.5 py-1", children: [
+            /* @__PURE__ */ jsx5(Users, { className: "h-3.5 w-3.5" }),
+            collaborators.length === 0 ? "Solo editing" : `${collaboratorCount} active`
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5("p", { className: "text-xs text-[var(--text-muted)]", children: connectionDescription(state, collaborators.length, readOnly) })
       ] }),
       /* @__PURE__ */ jsx5(CollaboratorsList, { collaborators })
     ] }),
@@ -10763,6 +10853,7 @@ function DocumentEditorPane({
   const activeMode = mode ?? uncontrolledMode;
   const isCollaborative = backend === "collaborative" && Boolean(collaboration);
   const isDirty = normalizeMarkdown(draft) !== normalizeMarkdown(markdown);
+  const saveStateLabel = readOnly ? "Read only" : isCollaborative ? isDirty ? "Snapshot pending" : "Live document current" : isDirty ? "Unsaved changes" : "Saved";
   useEffect5(() => {
     setDraft(markdown);
   }, [markdown]);
@@ -10814,8 +10905,8 @@ function DocumentEditorPane({
     ),
     /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2 text-xs text-[var(--text-muted)]", children: [
       toolbar,
-      /* @__PURE__ */ jsx5("span", { className: "rounded-full border border-[var(--border-subtle)] bg-[var(--bg-card)] px-2.5 py-1 font-medium", children: isCollaborative ? "Collaborative" : "Local draft" }),
-      isDirty && /* @__PURE__ */ jsx5("span", { children: "Unsaved changes" }),
+      /* @__PURE__ */ jsx5("span", { className: "rounded-full border border-[var(--border-subtle)] bg-[var(--bg-card)] px-2.5 py-1 font-medium", children: isCollaborative ? "Live document" : "Local draft" }),
+      /* @__PURE__ */ jsx5("span", { className: "rounded-full border border-[var(--border-subtle)] bg-[var(--bg-input)] px-2.5 py-1", children: saveStateLabel }),
       onSave && !readOnly && /* @__PURE__ */ jsxs3(
         "button",
         {
@@ -10864,7 +10955,7 @@ function DocumentEditorPane({
       className: editorClassName,
       onChange: handleChange
     }
-  ) }) : localEditor;
+  ) }, collaboration.documentName) : localEditor;
   return /* @__PURE__ */ jsx5(
     Tabs,
     {

package/dist/{chunk-ZYGWTIWO.js → chunk-IAIJUFM6.js}

@@ -484,7 +484,7 @@ import { lazy, Suspense } from "react";
 import { Download as Download2, X as X3 } from "lucide-react";
 import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var LazyDocumentEditorPane = lazy(async () => {
-  const module = await import("./document-editor-pane-GRIQOJHB.js");
+  const module = await import("./document-editor-pane-AVKKXSLG.js");
   return { default: module.DocumentEditorPane };
 });
 function FileArtifactPane({

package/dist/{chunk-RQOX5JRR.js → chunk-QMKWQF6F.js}

@@ -18,7 +18,7 @@ import {
   FileArtifactPane,
   FileTree,
   filterFileTree
-} from "./chunk-ZYGWTIWO.js";
+} from "./chunk-IAIJUFM6.js";
 import {
   ArtifactPane
 } from "./chunk-W4LM3QYZ.js";

package/dist/{document-editor-pane-GRIQOJHB.js → document-editor-pane-AVKKXSLG.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   DocumentEditorPane
-} from "./chunk-MGCVTFKB.js";
+} from "./chunk-4HT5J6CE.js";
 import "./chunk-Q56BYXQF.js";
 import "./chunk-W4LM3QYZ.js";
 import "./chunk-LTFK464G.js";

package/dist/{document-editor-pane-Bk-9MQmw.d.ts → document-editor-pane-Xnl8SmA7.d.ts}

@@ -46,6 +46,10 @@ interface EditorUser {
     color?: string;
     userId?: string;
 }
+interface EditorTokenRefreshResult {
+    token: string;
+    expiresAt?: number;
+}
 /**
  * Props for EditorProvider.
  */
@@ -56,6 +60,8 @@ interface EditorProviderProps {
     documentName: string;
     /** JWT token for authentication */
     token: string;
+    /** Unix timestamp (seconds) when the current token expires */
+    tokenExpiresAt?: number;
     /** Current user information for awareness */
     user: EditorUser;
     /** Auto-connect on mount (default: true) */
@@ -70,6 +76,8 @@ interface EditorProviderProps {
     onSync?: () => void;
     /** Callback on authentication error */
     onAuthError?: (error: Error) => void;
+    /** Optional token refresh callback used before reconnect/auth retry */
+    onRefreshToken?: () => Promise<EditorTokenRefreshResult | string>;
     /** Children components */
     children: ReactNode;
 }
@@ -77,7 +85,7 @@ interface EditorProviderProps {
  * EditorProvider wraps children with Hocuspocus collaboration context.
  * Manages WebSocket connection, Y.Doc, and awareness state.
  */
-declare function EditorProvider({ websocketUrl, documentName, token, user, autoConnect, autoReconnect, maxReconnectAttempts, onConnectionChange, onSync, onAuthError, children, }: EditorProviderProps): react_jsx_runtime.JSX.Element;
+declare function EditorProvider({ websocketUrl, documentName, token, tokenExpiresAt, user, autoConnect, autoReconnect, maxReconnectAttempts, onConnectionChange, onSync, onAuthError, onRefreshToken, children, }: EditorProviderProps): react_jsx_runtime.JSX.Element;
 /**
  * Hook to access the editor context.
  * Must be used within an EditorProvider.
@@ -113,4 +121,4 @@ interface DocumentEditorPaneProps extends Omit<ArtifactPaneProps, "children" | "
  */
 declare function DocumentEditorPane({ eyebrow, title, subtitle, meta, headerActions, footer, className, contentClassName, tabs, toolbar, markdown, mode, defaultMode, onModeChange, backend, placeholder, autoFocus, readOnly, onChange, onSave, saving, saveLabel, previewClassName, editorClassName, collaboration, }: DocumentEditorPaneProps): react_jsx_runtime.JSX.Element;
 
-export { type Collaborator as C, type DocumentEditorBackend as D, type EditorContextValue as E, type ConnectionState as a, type DocumentEditorMode as b, DocumentEditorPane as c, type DocumentEditorPaneCollaborationConfig as d, type DocumentEditorPaneProps as e, EditorProvider as f, type EditorProviderProps as g, type EditorUser as h, useEditorContext as u };
+export { type Collaborator as C, type DocumentEditorBackend as D, type EditorContextValue as E, type ConnectionState as a, type DocumentEditorMode as b, DocumentEditorPane as c, type DocumentEditorPaneCollaborationConfig as d, type DocumentEditorPaneProps as e, EditorProvider as f, type EditorProviderProps as g, type EditorTokenRefreshResult as h, type EditorUser as i, useEditorContext as u };

package/dist/editor.d.ts

@@ -1,5 +1,5 @@
-import { C as Collaborator, a as ConnectionState } from './document-editor-pane-Bk-9MQmw.js';
-export { 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 EditorUser, u as useEditorContext } from './document-editor-pane-Bk-9MQmw.js';
+import { C as Collaborator, a as ConnectionState } from './document-editor-pane-Xnl8SmA7.js';
+export { 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-Xnl8SmA7.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Editor } from '@tiptap/react';
 import { HocuspocusProvider } from '@hocuspocus/provider';

package/dist/editor.js

@@ -11,7 +11,7 @@ import {
   useEditorConnection,
   useEditorContext,
   useYjsState
-} from "./chunk-MGCVTFKB.js";
+} from "./chunk-4HT5J6CE.js";
 import "./chunk-Q56BYXQF.js";
 import "./chunk-W4LM3QYZ.js";
 import "./chunk-LTFK464G.js";

package/dist/files.d.ts

@@ -1,7 +1,7 @@
 import { a as FileTabData } from './file-tabs-BLfxfmAH.js';
 export { F as FileNode, b as FileTabs, c as FileTabsProps, d as FileTree, e as FileTreeProps, f as FileTreeVisibilityOptions, g as filterFileTree } from './file-tabs-BLfxfmAH.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as DocumentEditorMode, D as DocumentEditorBackend, d as DocumentEditorPaneCollaborationConfig } from './document-editor-pane-Bk-9MQmw.js';
+import { b as DocumentEditorMode, D as DocumentEditorBackend, d as DocumentEditorPaneCollaborationConfig } from './document-editor-pane-Xnl8SmA7.js';
 import { A as ArtifactPaneProps } from './artifact-pane-Bh45Ssco.js';
 import 'react';
 import '@hocuspocus/provider';

package/dist/files.js

@@ -4,7 +4,7 @@ import {
   FileTabs,
   FileTree,
   filterFileTree
-} from "./chunk-ZYGWTIWO.js";
+} from "./chunk-IAIJUFM6.js";
 import "./chunk-W4LM3QYZ.js";
 import "./chunk-LTFK464G.js";
 import "./chunk-RQHJBTEU.js";

package/dist/index.d.ts

@@ -35,7 +35,7 @@ import '@radix-ui/react-tabs';
 import '@radix-ui/react-progress';
 import '@radix-ui/react-switch';
 import '@radix-ui/react-label';
-import './document-editor-pane-Bk-9MQmw.js';
+import './document-editor-pane-Xnl8SmA7.js';
 import '@hocuspocus/provider';
 import 'yjs';
 import 'nanostores';

package/dist/index.js

@@ -89,7 +89,7 @@ import {
   StatusBar,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-RQOX5JRR.js";
+} from "./chunk-QMKWQF6F.js";
 import "./chunk-OEX7NZE3.js";
 import {
   EmptyState,
@@ -158,7 +158,7 @@ import {
   FileTabs,
   FileTree,
   filterFileTree
-} from "./chunk-ZYGWTIWO.js";
+} from "./chunk-IAIJUFM6.js";
 import {
   ArtifactPane
 } from "./chunk-W4LM3QYZ.js";

package/dist/workspace.js

@@ -10,7 +10,7 @@ import {
   StatusBar,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-RQOX5JRR.js";
+} from "./chunk-QMKWQF6F.js";
 import "./chunk-OEX7NZE3.js";
 import "./chunk-MUOL44AE.js";
 import "./chunk-6H3EFUUC.js";
@@ -21,7 +21,7 @@ import "./chunk-CJ2RYVZH.js";
 import "./chunk-BX6AQMUS.js";
 import "./chunk-YDBXQQLC.js";
 import "./chunk-TQN3VR4F.js";
-import "./chunk-ZYGWTIWO.js";
+import "./chunk-IAIJUFM6.js";
 import {
   ArtifactPane
 } from "./chunk-W4LM3QYZ.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",