@tangle-network/sandbox-ui 0.3.11 → 0.3.12

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

@@ -10753,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,
@@ -10764,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 })
     ] }),
@@ -10834,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]);
@@ -10885,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",
         {

package/dist/{chunk-6NYG2R7V.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-AFBP2KFT.js");
+  const module = await import("./document-editor-pane-AVKKXSLG.js");
   return { default: module.DocumentEditorPane };
 });
 function FileArtifactPane({

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

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

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

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

package/dist/editor.js

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

package/dist/files.js

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

package/dist/index.js

@@ -89,7 +89,7 @@ import {
   StatusBar,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-CREVWUCA.js";
+} from "./chunk-QMKWQF6F.js";
 import "./chunk-OEX7NZE3.js";
 import {
   EmptyState,
@@ -158,7 +158,7 @@ import {
   FileTabs,
   FileTree,
   filterFileTree
-} from "./chunk-6NYG2R7V.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-CREVWUCA.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-6NYG2R7V.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.11",
+  "version": "0.3.12",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",