@tangle-network/sandbox-ui 0.6.1 → 0.8.4

package/dist/{chunk-FNYJFCGU.js → chunk-U6QTHMY6.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-Q56BYXQF.js";
 import {
   ArtifactPane
-} from "./chunk-W4LM3QYZ.js";
+} from "./chunk-HB5Y37YU.js";
 import {
   Markdown
-} from "./chunk-3HW53XTH.js";
+} from "./chunk-T7HMZEVO.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -382,8 +382,122 @@ function useEditorContext() {
   return context;
 }
 
+// src/editor/editor-toolbar.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function EditorToolbar({
+  editor,
+  className
+}) {
+  if (!editor) {
+    return null;
+  }
+  const buttons = [
+    {
+      id: "bold",
+      label: "Bold",
+      action: () => editor.chain().focus().toggleBold().run(),
+      isActive: editor.isActive("bold"),
+      shortcut: "Ctrl+B"
+    },
+    {
+      id: "italic",
+      label: "Italic",
+      action: () => editor.chain().focus().toggleItalic().run(),
+      isActive: editor.isActive("italic"),
+      shortcut: "Ctrl+I"
+    },
+    {
+      id: "strike",
+      label: "Strike",
+      action: () => editor.chain().focus().toggleStrike().run(),
+      isActive: editor.isActive("strike"),
+      shortcut: "Ctrl+Shift+X"
+    },
+    {
+      id: "code",
+      label: "Code",
+      action: () => editor.chain().focus().toggleCode().run(),
+      isActive: editor.isActive("code"),
+      shortcut: "Ctrl+E"
+    },
+    { id: "sep-1", type: "separator" },
+    {
+      id: "h1",
+      label: "H1",
+      action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
+      isActive: editor.isActive("heading", { level: 1 })
+    },
+    {
+      id: "h2",
+      label: "H2",
+      action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
+      isActive: editor.isActive("heading", { level: 2 })
+    },
+    {
+      id: "h3",
+      label: "H3",
+      action: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
+      isActive: editor.isActive("heading", { level: 3 })
+    },
+    { id: "sep-2", type: "separator" },
+    {
+      id: "bullet-list",
+      label: "Bullet List",
+      action: () => editor.chain().focus().toggleBulletList().run(),
+      isActive: editor.isActive("bulletList")
+    },
+    {
+      id: "ordered-list",
+      label: "Ordered List",
+      action: () => editor.chain().focus().toggleOrderedList().run(),
+      isActive: editor.isActive("orderedList")
+    },
+    {
+      id: "code-block",
+      label: "Code Block",
+      action: () => editor.chain().focus().toggleCodeBlock().run(),
+      isActive: editor.isActive("codeBlock")
+    },
+    {
+      id: "blockquote",
+      label: "Blockquote",
+      action: () => editor.chain().focus().toggleBlockquote().run(),
+      isActive: editor.isActive("blockquote")
+    }
+  ];
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1 border-border border-b bg-card p-2",
+        className
+      ),
+      children: buttons.map((button) => {
+        if ("type" in button && button.type === "separator") {
+          return /* @__PURE__ */ jsx2("div", { className: "mx-1 h-6 w-px bg-border" }, button.id);
+        }
+        return /* @__PURE__ */ jsx2(
+          "button",
+          {
+            onClick: button.action,
+            type: "button",
+            title: "shortcut" in button ? `${button.label} (${button.shortcut})` : button.label,
+            className: cn(
+              "rounded px-2 py-1 font-medium text-xs transition-colors",
+              "hover:bg-accent hover:text-accent-foreground",
+              button.isActive && "bg-accent text-accent-foreground"
+            ),
+            children: button.label
+          },
+          button.id
+        );
+      })
+    }
+  );
+}
+
 // src/editor/tiptap-editor.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var cursorColors = {
   "#FF6B6B": { background: "#FF6B6B", text: "#FFFFFF" },
   "#4ECDC4": { background: "#4ECDC4", text: "#000000" },
@@ -497,9 +611,9 @@ function TiptapEditor({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx2("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ jsx2(ConnectionIndicator, { state: connectionState }) }),
-        /* @__PURE__ */ jsx2("div", { className: "p-4 pt-10", children: /* @__PURE__ */ jsx2(EditorContent, { editor }) }),
-        /* @__PURE__ */ jsx2("style", { children: `
+        /* @__PURE__ */ jsx3("div", { className: "absolute top-2 right-2 z-10", children: /* @__PURE__ */ jsx3(ConnectionIndicator, { state: connectionState }) }),
+        /* @__PURE__ */ jsx3("div", { className: "p-4 pt-10", children: /* @__PURE__ */ jsx3(EditorContent, { editor }) }),
+        /* @__PURE__ */ jsx3("style", { children: `
         .ProseMirror p.is-editor-empty:first-child::before {
           content: attr(data-placeholder);
           float: left;
@@ -588,8 +702,8 @@ function ConnectionIndicator({
     }
   }[state];
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-muted-foreground text-xs", children: [
-    /* @__PURE__ */ jsx2("span", { className: cn("h-2 w-2 rounded-full", config.color) }),
-    /* @__PURE__ */ jsx2("span", { children: config.label })
+    /* @__PURE__ */ jsx3("span", { className: cn("h-2 w-2 rounded-full", config.color) }),
+    /* @__PURE__ */ jsx3("span", { children: config.label })
   ] });
 }
 function CollaboratorsList({
@@ -600,7 +714,7 @@ function CollaboratorsList({
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1", className), children: [
-    collaborators.slice(0, 5).map((collab) => /* @__PURE__ */ jsx2(
+    collaborators.slice(0, 5).map((collab) => /* @__PURE__ */ jsx3(
       "div",
       {
         className: "flex h-6 w-6 items-center justify-center rounded-full font-medium text-xs",
@@ -616,237 +730,12 @@ function CollaboratorsList({
     ] })
   ] });
 }
-function EditorToolbar({
-  editor,
-  className
-}) {
-  if (!editor) {
-    return null;
-  }
-  const buttons = [
-    {
-      id: "bold",
-      label: "Bold",
-      action: () => editor.chain().focus().toggleBold().run(),
-      isActive: editor.isActive("bold"),
-      shortcut: "Ctrl+B"
-    },
-    {
-      id: "italic",
-      label: "Italic",
-      action: () => editor.chain().focus().toggleItalic().run(),
-      isActive: editor.isActive("italic"),
-      shortcut: "Ctrl+I"
-    },
-    {
-      id: "strike",
-      label: "Strike",
-      action: () => editor.chain().focus().toggleStrike().run(),
-      isActive: editor.isActive("strike"),
-      shortcut: "Ctrl+Shift+X"
-    },
-    {
-      id: "code",
-      label: "Code",
-      action: () => editor.chain().focus().toggleCode().run(),
-      isActive: editor.isActive("code"),
-      shortcut: "Ctrl+E"
-    },
-    { id: "sep-1", type: "separator" },
-    {
-      id: "h1",
-      label: "H1",
-      action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-      isActive: editor.isActive("heading", { level: 1 })
-    },
-    {
-      id: "h2",
-      label: "H2",
-      action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-      isActive: editor.isActive("heading", { level: 2 })
-    },
-    {
-      id: "h3",
-      label: "H3",
-      action: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-      isActive: editor.isActive("heading", { level: 3 })
-    },
-    { id: "sep-2", type: "separator" },
-    {
-      id: "bullet-list",
-      label: "Bullet List",
-      action: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: editor.isActive("bulletList")
-    },
-    {
-      id: "ordered-list",
-      label: "Ordered List",
-      action: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: editor.isActive("orderedList")
-    },
-    {
-      id: "code-block",
-      label: "Code Block",
-      action: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: editor.isActive("codeBlock")
-    },
-    {
-      id: "blockquote",
-      label: "Blockquote",
-      action: () => editor.chain().focus().toggleBlockquote().run(),
-      isActive: editor.isActive("blockquote")
-    }
-  ];
-  return /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-1 border-border border-b bg-[var(--depth-2)] p-2",
-        className
-      ),
-      children: buttons.map((button) => {
-        if ("type" in button && button.type === "separator") {
-          return /* @__PURE__ */ jsx2("div", { className: "mx-1 h-6 w-px bg-border" }, button.id);
-        }
-        return /* @__PURE__ */ jsx2(
-          "button",
-          {
-            onClick: button.action,
-            type: "button",
-            title: "shortcut" in button ? `${button.label} (${button.shortcut})` : button.label,
-            className: cn(
-              "rounded px-2 py-1 font-medium text-xs transition-colors",
-              "hover:bg-accent hover:text-accent-foreground",
-              button.isActive && "bg-accent text-accent-foreground"
-            ),
-            children: button.label
-          },
-          button.id
-        );
-      })
-    }
-  );
-}
 
 // src/editor/markdown-document-editor.tsx
 import { EditorContent as EditorContent2, useEditor as useEditor2 } from "@tiptap/react";
 import StarterKit2 from "@tiptap/starter-kit";
 import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef2 } from "react";
 
-// src/editor/editor-toolbar.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-function EditorToolbar2({
-  editor,
-  className
-}) {
-  if (!editor) {
-    return null;
-  }
-  const buttons = [
-    {
-      id: "bold",
-      label: "Bold",
-      action: () => editor.chain().focus().toggleBold().run(),
-      isActive: editor.isActive("bold"),
-      shortcut: "Ctrl+B"
-    },
-    {
-      id: "italic",
-      label: "Italic",
-      action: () => editor.chain().focus().toggleItalic().run(),
-      isActive: editor.isActive("italic"),
-      shortcut: "Ctrl+I"
-    },
-    {
-      id: "strike",
-      label: "Strike",
-      action: () => editor.chain().focus().toggleStrike().run(),
-      isActive: editor.isActive("strike"),
-      shortcut: "Ctrl+Shift+X"
-    },
-    {
-      id: "code",
-      label: "Code",
-      action: () => editor.chain().focus().toggleCode().run(),
-      isActive: editor.isActive("code"),
-      shortcut: "Ctrl+E"
-    },
-    { id: "sep-1", type: "separator" },
-    {
-      id: "h1",
-      label: "H1",
-      action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
-      isActive: editor.isActive("heading", { level: 1 })
-    },
-    {
-      id: "h2",
-      label: "H2",
-      action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
-      isActive: editor.isActive("heading", { level: 2 })
-    },
-    {
-      id: "h3",
-      label: "H3",
-      action: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
-      isActive: editor.isActive("heading", { level: 3 })
-    },
-    { id: "sep-2", type: "separator" },
-    {
-      id: "bullet-list",
-      label: "Bullet List",
-      action: () => editor.chain().focus().toggleBulletList().run(),
-      isActive: editor.isActive("bulletList")
-    },
-    {
-      id: "ordered-list",
-      label: "Ordered List",
-      action: () => editor.chain().focus().toggleOrderedList().run(),
-      isActive: editor.isActive("orderedList")
-    },
-    {
-      id: "code-block",
-      label: "Code Block",
-      action: () => editor.chain().focus().toggleCodeBlock().run(),
-      isActive: editor.isActive("codeBlock")
-    },
-    {
-      id: "blockquote",
-      label: "Blockquote",
-      action: () => editor.chain().focus().toggleBlockquote().run(),
-      isActive: editor.isActive("blockquote")
-    }
-  ];
-  return /* @__PURE__ */ jsx3(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-1 border-border border-b bg-[var(--depth-2)] p-2",
-        className
-      ),
-      children: buttons.map((button) => {
-        if ("type" in button && button.type === "separator") {
-          return /* @__PURE__ */ jsx3("div", { className: "mx-1 h-6 w-px bg-border" }, button.id);
-        }
-        return /* @__PURE__ */ jsx3(
-          "button",
-          {
-            onClick: button.action,
-            type: "button",
-            title: "shortcut" in button ? `${button.label} (${button.shortcut})` : button.label,
-            className: cn(
-              "rounded px-2 py-1 font-medium text-xs transition-colors",
-              "hover:bg-accent hover:text-accent-foreground",
-              button.isActive && "bg-accent text-accent-foreground"
-            ),
-            children: button.label
-          },
-          button.id
-        );
-      })
-    }
-  );
-}
-
 // src/editor/markdown-conversion.ts
 import { marked } from "marked";
 import TurndownService from "turndown";
@@ -897,8 +786,8 @@ function MarkdownDocumentEditor({
       attributes: {
         class: cn(
           "prose prose-sm sm:prose-base max-w-none focus:outline-none",
-          "prose-headings:text-[var(--text-primary)] prose-p:text-[var(--text-secondary)] prose-li:text-[var(--text-secondary)]",
-          "prose-strong:text-[var(--text-primary)] prose-code:text-[var(--text-primary)] prose-pre:text-[var(--text-secondary)]",
+          "prose-headings:text-foreground prose-p:text-foreground prose-li:text-foreground",
+          "prose-strong:text-foreground prose-code:text-foreground prose-pre:text-foreground",
           contentClassName
         ),
         "data-placeholder": placeholder
@@ -933,15 +822,15 @@ function MarkdownDocumentEditor({
     "div",
     {
       className: cn(
-        "flex min-h-[14rem] w-full flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-input)]",
+        "flex min-h-[14rem] w-full flex-col overflow-hidden rounded-lg border border-border bg-background",
         className
       ),
       children: [
         /* @__PURE__ */ jsx4(
-          EditorToolbar2,
+          EditorToolbar,
           {
             editor,
-            className: "border-[var(--border-subtle)] bg-[var(--depth-2)] px-2 py-2"
+            className: "border-border bg-card px-2 py-2"
           }
         ),
         /* @__PURE__ */ jsx4("div", { className: "min-h-0 flex-1 overflow-auto px-5 py-4", children: /* @__PURE__ */ jsx4(EditorContent2, { editor }) }),
@@ -949,21 +838,21 @@ function MarkdownDocumentEditor({
         .ProseMirror p.is-editor-empty:first-child::before {
           content: attr(data-placeholder);
           float: left;
-          color: var(--text-muted, #999);
+          color: hsl(var(--muted-foreground));
           pointer-events: none;
           height: 0;
         }
 
         .ProseMirror pre {
-          background: var(--bg-elevated, #16161a);
-          border: 1px solid var(--border-subtle, rgba(255,255,255,0.08));
+          background: hsl(var(--muted));
+          border: 1px solid hsl(var(--border));
           border-radius: 0.75rem;
           padding: 0.875rem 1rem;
           overflow-x: auto;
         }
 
         .ProseMirror code {
-          background: var(--depth-3);
+          background: hsl(var(--muted));
           border-radius: 0.35rem;
           padding: 0.12rem 0.3rem;
         }
@@ -1181,9 +1070,9 @@ function CollaborativeDocumentSurface({
   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(--depth-2)] px-3 py-2", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-lg)] border border-border bg-card px-3 py-2", children: [
       /* @__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("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", children: [
           /* @__PURE__ */ jsxs3(
             "span",
             {
@@ -1197,12 +1086,12 @@ function CollaborativeDocumentSurface({
               ]
             }
           ),
-          /* @__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__ */ jsxs3("span", { className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-background 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("p", { className: "text-xs text-muted-foreground", children: connectionDescription(state, collaborators.length, readOnly) })
       ] }),
       /* @__PURE__ */ jsx5(CollaboratorsList, { collaborators })
     ] }),
@@ -1277,14 +1166,14 @@ function DocumentEditorPane({
       TabsList,
       {
         variant: "underline",
-        className: "h-auto gap-4 border-0 bg-transparent p-0 text-[var(--text-muted)]",
+        className: "h-auto gap-4 border-0 bg-transparent p-0 text-muted-foreground",
         children: [
           /* @__PURE__ */ jsx5(
             TabsTrigger,
             {
               value: "preview",
               variant: "underline",
-              className: "pb-2 data-[state=active]:border-[var(--brand-cool)] data-[state=active]:text-[var(--text-primary)]",
+              className: "pb-2 data-[state=active]:border-primary data-[state=active]:text-foreground",
               children: "Preview"
             }
           ),
@@ -1293,7 +1182,7 @@ function DocumentEditorPane({
             {
               value: "edit",
               variant: "underline",
-              className: "flex items-center gap-2 pb-2 data-[state=active]:border-[var(--brand-cool)] data-[state=active]:text-[var(--text-primary)]",
+              className: "flex items-center gap-2 pb-2 data-[state=active]:border-primary data-[state=active]:text-foreground",
               children: [
                 /* @__PURE__ */ jsx5(PencilLine, { className: "h-3.5 w-3.5" }),
                 isCollaborative ? "Live edit" : "Edit"
@@ -1303,17 +1192,17 @@ function DocumentEditorPane({
         ]
       }
     ),
-    /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2 text-xs text-[var(--text-muted)]", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground", 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 ? "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 }),
+      /* @__PURE__ */ jsx5("span", { className: "rounded-full border border-border bg-card px-2.5 py-1 font-medium", children: isCollaborative ? "Live document" : "Local draft" }),
+      /* @__PURE__ */ jsx5("span", { className: "rounded-full border border-border bg-background px-2.5 py-1", children: saveStateLabel }),
       onSave && !readOnly && /* @__PURE__ */ jsxs3(
         "button",
         {
           type: "button",
           onClick: () => void onSave(draft),
           disabled: saving || !isDirty,
-          className: "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-3 py-1.5 text-xs font-semibold text-[var(--text-secondary)] transition-colors hover:border-[var(--brand-cool)]/40 hover:text-[var(--text-primary)] disabled:cursor-not-allowed disabled:opacity-50",
+          className: "inline-flex items-center gap-2 rounded-[var(--radius-full)] border border-border bg-card px-3 py-1.5 text-xs font-semibold text-foreground transition-colors hover:border-primary/40 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-50",
           children: [
             /* @__PURE__ */ jsx5(Save, { className: "h-3.5 w-3.5" }),
             saving ? "Saving..." : saveLabel
@@ -1326,7 +1215,7 @@ function DocumentEditorPane({
     "div",
     {
       className: cn(
-        "rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-input)] p-5",
+        "rounded-[var(--radius-lg)] border border-border bg-background p-5",
         previewClassName
       ),
       children: /* @__PURE__ */ jsx5(Markdown, { className: "prose-sm max-w-none", children: draft })
@@ -1388,9 +1277,9 @@ function DocumentEditorPane({
 export {
   EditorProvider,
   useEditorContext,
+  EditorToolbar,
   TiptapEditor,
   CollaboratorsList,
-  EditorToolbar,
   useEditorConnection,
   useCollaborators,
   useCollaboratorPresence,