@tangle-network/sandbox-ui 0.106.0 → 0.108.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.106.0",
+  "version": "0.108.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -174,10 +174,8 @@
     "@radix-ui/react-dropdown-menu": "^2.1.24",
     "@radix-ui/react-select": "^2.3.7",
     "@tiptap/core": "^3.28.0",
-    "@tiptap/extension-mention": "^3.28.0",
     "@tiptap/react": "^3.28.0",
     "@tiptap/starter-kit": "^3.28.0",
-    "@tiptap/suggestion": "^3.28.0",
     "diff": "^9.0.0",
     "eventsource-parser": "3.1.0",
     "lucide-react": "^1.25.0",

package/dist/chunk-WGOOQAW3.js

@@ -1,12 +0,0 @@
-import {
-  cn
-} from "./chunk-EI44GEQ5.js";
-
-// src/chat/mention-pill.ts
-var MENTION_PILL_CLASS = cn(
-  "rounded-md bg-primary/10 px-1 py-0.5 font-medium text-primary"
-);
-
-export {
-  MENTION_PILL_CLASS
-};

package/dist/mention-editor-Q3TKSZDL.js

@@ -1,490 +0,0 @@
-import {
-  MENTION_PILL_CLASS
-} from "./chunk-WGOOQAW3.js";
-import {
-  cn
-} from "./chunk-EI44GEQ5.js";
-import "./chunk-CZ7CSFO4.js";
-
-// src/chat/mention-editor.tsx
-import { mergeAttributes } from "@tiptap/core";
-import Mention from "@tiptap/extension-mention";
-import { EditorContent, useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import { exitSuggestion } from "@tiptap/suggestion";
-import * as React2 from "react";
-
-// src/chat/mention-list.tsx
-import { Loader2 } from "lucide-react";
-import * as React from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var MentionList = React.forwardRef(
-  function MentionList2({
-    items,
-    loading,
-    error,
-    emptyText = "No matches",
-    renderItem,
-    onSelect,
-    className
-  }, ref) {
-    const [selected, setSelected] = React.useState(0);
-    const selectedRef = React.useRef(0);
-    const move = (next) => {
-      selectedRef.current = next;
-      setSelected(next);
-    };
-    React.useEffect(() => {
-      move(0);
-    }, [items]);
-    React.useImperativeHandle(
-      ref,
-      () => ({
-        onKeyDown(event) {
-          const count = items.length;
-          switch (event.key) {
-            case "ArrowDown":
-              if (count > 0) move((selectedRef.current + 1) % count);
-              return true;
-            case "ArrowUp":
-              if (count > 0) move((selectedRef.current - 1 + count) % count);
-              return true;
-            case "Enter":
-            case "Tab":
-              if (count > 0) onSelect(items[selectedRef.current]);
-              return true;
-            default:
-              return false;
-          }
-        }
-      }),
-      [items, onSelect]
-    );
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        role: "listbox",
-        "aria-label": "File mentions",
-        className: cn(
-          "max-h-64 min-w-[16rem] max-w-sm overflow-y-auto rounded-xl border border-border",
-          "bg-popover text-popover-foreground p-1 shadow-lg",
-          className
-        ),
-        children: [
-          loading && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-2.5 py-2 text-muted-foreground text-sm", children: [
-            /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin", "data-motion": "essential" }),
-            "Searching\u2026"
-          ] }),
-          !loading && error && /* @__PURE__ */ jsx("div", { className: "px-2.5 py-2 text-[var(--status-error,#ff4d6d)] text-sm", children: "Couldn\u2019t load matches" }),
-          !loading && !error && items.length === 0 && /* @__PURE__ */ jsx("div", { className: "px-2.5 py-2 text-muted-foreground text-sm", children: emptyText }),
-          !loading && !error && items.map((item, index) => {
-            const active = index === selected;
-            return /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                role: "option",
-                "aria-selected": active,
-                onMouseDown: (event) => {
-                  event.preventDefault();
-                  onSelect(item);
-                },
-                onMouseEnter: () => move(index),
-                className: cn(
-                  "flex w-full items-center gap-2 rounded-lg px-2.5 py-1.5 text-left text-sm",
-                  active ? "bg-primary/10 text-foreground" : "text-muted-foreground"
-                ),
-                children: renderItem ? renderItem(item) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("span", { className: "truncate text-foreground", children: item.label }),
-                  item.detail && /* @__PURE__ */ jsx("span", { className: "ml-auto truncate text-muted-foreground text-xs", children: item.detail })
-                ] })
-              },
-              item.id
-            );
-          })
-        ]
-      }
-    );
-  }
-);
-
-// src/chat/mention-serialize.ts
-var MENTION_TYPE = "mention";
-function serializeMentionDoc(doc) {
-  return (doc.content ?? []).map(serializeBlock).join("\n");
-}
-function serializeBlock(node) {
-  if (node.type === "paragraph") {
-    return (node.content ?? []).map(serializeInline).join("");
-  }
-  return "";
-}
-function serializeInline(node) {
-  if (node.type === "text") return node.text ?? "";
-  if (node.type === "hardBreak") return "\n";
-  if (node.type === MENTION_TYPE) return `@${node.attrs?.id ?? ""}`;
-  return "";
-}
-function collectMentions(doc) {
-  const out = [];
-  const walk = (node) => {
-    if (node.type === MENTION_TYPE && node.attrs?.id) {
-      out.push({
-        id: node.attrs.id,
-        label: node.attrs.label ?? node.attrs.id,
-        kind: node.attrs.kind ?? void 0
-      });
-    }
-    for (const child of node.content ?? []) walk(child);
-  };
-  walk(doc);
-  return out;
-}
-function parseMentionValue(value, known) {
-  const lines = value.split("\n");
-  return {
-    type: "doc",
-    content: lines.map((line) => ({
-      type: "paragraph",
-      content: parseLine(line, known)
-    }))
-  };
-}
-function parseLine(line, known) {
-  const content = [];
-  let text = "";
-  const flush = () => {
-    if (text) {
-      content.push({ type: "text", text });
-      text = "";
-    }
-  };
-  let i = 0;
-  while (i < line.length) {
-    if (line[i] === "@") {
-      const id = matchKnownId(line, i + 1, known);
-      if (id) {
-        const item = known.get(id);
-        flush();
-        content.push({
-          type: MENTION_TYPE,
-          attrs: {
-            id: item.id,
-            label: item.label,
-            kind: item.kind ?? null
-          }
-        });
-        i += 1 + id.length;
-        continue;
-      }
-    }
-    text += line[i];
-    i += 1;
-  }
-  flush();
-  return content;
-}
-function matchKnownId(line, pos, known) {
-  let best = null;
-  for (const id of known.keys()) {
-    if (id.length === 0) continue;
-    if (best !== null && id.length <= best.length) continue;
-    if (!line.startsWith(id, pos)) continue;
-    const after = pos + id.length;
-    if (after < line.length && !/\s/.test(line[after])) continue;
-    best = id;
-  }
-  return best;
-}
-
-// src/chat/mention-editor.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function buildComposerStarterKit() {
-  return StarterKit.configure({
-    blockquote: false,
-    bold: false,
-    bulletList: false,
-    code: false,
-    codeBlock: false,
-    dropcursor: false,
-    heading: false,
-    horizontalRule: false,
-    italic: false,
-    link: false,
-    listItem: false,
-    listKeymap: false,
-    orderedList: false,
-    strike: false,
-    trailingNode: false,
-    underline: false
-  });
-}
-function buildMentionExtension(trigger, suggestion) {
-  return Mention.extend({
-    addAttributes() {
-      return {
-        id: {
-          default: null,
-          parseHTML: (element) => element.getAttribute("data-id"),
-          renderHTML: (attrs) => attrs.id ? { "data-id": attrs.id } : {}
-        },
-        label: {
-          default: null,
-          parseHTML: (element) => element.getAttribute("data-label"),
-          renderHTML: (attrs) => attrs.label ? { "data-label": attrs.label } : {}
-        },
-        kind: {
-          default: null,
-          parseHTML: (element) => element.getAttribute("data-kind"),
-          renderHTML: (attrs) => attrs.kind ? { "data-kind": attrs.kind } : {}
-        }
-      };
-    }
-  }).configure({
-    HTMLAttributes: { class: MENTION_PILL_CLASS },
-    renderText: ({ node }) => `${trigger}${node.attrs.id}`,
-    renderHTML: ({ options, node }) => [
-      "span",
-      mergeAttributes(options.HTMLAttributes, {
-        title: node.attrs.id ?? void 0
-      }),
-      `${trigger}${node.attrs.label ?? node.attrs.id}`
-    ],
-    suggestion
-  });
-}
-var EDITOR_CLASS = cn(
-  "w-full whitespace-pre-wrap break-words bg-transparent px-2 py-1",
-  "text-foreground text-sm leading-relaxed outline-none"
-);
-var FETCH_DEBOUNCE_MS = 100;
-function mentionsKey(mentions) {
-  return mentions.map((item) => item.id).join("\0");
-}
-function MentionEditor({
-  value,
-  onChange,
-  onSubmit,
-  placeholder,
-  disabled,
-  autoFocus,
-  minRows,
-  maxHeight,
-  mention,
-  registerFocus,
-  onPasteFiles
-}) {
-  const trigger = mention.trigger ?? "@";
-  const [anchor, setAnchor] = React2.useState(null);
-  const [open, setOpen] = React2.useState(false);
-  const [query, setQuery] = React2.useState("");
-  const [items, setItems] = React2.useState([]);
-  const [loading, setLoading] = React2.useState(false);
-  const [errored, setErrored] = React2.useState(false);
-  const openRef = React2.useRef(false);
-  const commandRef = React2.useRef(null);
-  const listRef = React2.useRef(null);
-  const knownRef = React2.useRef(/* @__PURE__ */ new Map());
-  const requestIdRef = React2.useRef(0);
-  const clientRectRef = React2.useRef(null);
-  const lastMentionsKeyRef = React2.useRef("");
-  const onSubmitRef = React2.useRef(onSubmit);
-  onSubmitRef.current = onSubmit;
-  const onChangeRef = React2.useRef(onChange);
-  onChangeRef.current = onChange;
-  const onMentionsChangeRef = React2.useRef(mention.onMentionsChange);
-  onMentionsChangeRef.current = mention.onMentionsChange;
-  const onPasteFilesRef = React2.useRef(onPasteFiles);
-  onPasteFilesRef.current = onPasteFiles;
-  const fetchItemsRef = React2.useRef(mention.fetchItems);
-  fetchItemsRef.current = mention.fetchItems;
-  const editor = useEditor(
-    {
-      immediatelyRender: false,
-      editable: !disabled,
-      autofocus: autoFocus ? "end" : false,
-      content: parseMentionValue(value, knownRef.current),
-      editorProps: {
-        attributes: {
-          class: EDITOR_CLASS,
-          role: "textbox",
-          "aria-multiline": "true",
-          "aria-label": "Message input"
-        },
-        handleKeyDown: (_view, event) => {
-          if (event.key !== "Enter" || event.shiftKey) return false;
-          if (event.isComposing || event.keyCode === 229) return false;
-          if (openRef.current) return false;
-          event.preventDefault();
-          onSubmitRef.current();
-          return true;
-        },
-        handlePaste: (_view, event) => {
-          const files = event.clipboardData?.files;
-          if (files && files.length > 0 && onPasteFilesRef.current) {
-            return onPasteFilesRef.current(files);
-          }
-          return false;
-        }
-      },
-      onUpdate: ({ editor: editor2 }) => {
-        const json = editor2.getJSON();
-        onChangeRef.current(serializeMentionDoc(json));
-        const mentions = collectMentions(json);
-        for (const item of mentions) knownRef.current.set(item.id, item);
-        lastMentionsKeyRef.current = mentionsKey(mentions);
-        onMentionsChangeRef.current?.(mentions);
-      },
-      extensions: [
-        buildComposerStarterKit(),
-        buildMentionExtension(trigger, {
-          char: trigger,
-          allowSpaces: false,
-          // Items are fetched by this component (so it can model loading and
-          // error states), not by the suggestion plugin.
-          items: () => [],
-          command: ({ editor: editor2, range, props }) => {
-            const item = props;
-            editor2.chain().focus().insertContentAt(range, [
-              {
-                type: "mention",
-                attrs: {
-                  id: item.id,
-                  label: item.label,
-                  kind: item.kind ?? null
-                }
-              },
-              { type: "text", text: " " }
-            ]).run();
-            knownRef.current.set(item.id, item);
-          },
-          render: () => ({
-            onStart: (props) => {
-              openRef.current = true;
-              commandRef.current = props.command;
-              clientRectRef.current = props.clientRect ?? null;
-              setOpen(true);
-              setQuery(props.query);
-              setAnchor(props.clientRect?.() ?? null);
-            },
-            onUpdate: (props) => {
-              commandRef.current = props.command;
-              clientRectRef.current = props.clientRect ?? null;
-              setQuery(props.query);
-              setAnchor(props.clientRect?.() ?? null);
-            },
-            onKeyDown: (props) => {
-              if (props.event.key === "Escape") {
-                exitSuggestion(props.view);
-                return true;
-              }
-              return listRef.current?.onKeyDown(props.event) ?? false;
-            },
-            onExit: () => {
-              openRef.current = false;
-              commandRef.current = null;
-              setOpen(false);
-              setItems([]);
-              setLoading(false);
-              setErrored(false);
-            }
-          })
-        })
-      ]
-    },
-    []
-  );
-  React2.useEffect(() => {
-    if (!open) return;
-    const requestId = requestIdRef.current += 1;
-    setLoading(true);
-    setErrored(false);
-    const timer = setTimeout(() => {
-      Promise.resolve(fetchItemsRef.current(query)).then((results) => {
-        if (requestId !== requestIdRef.current) return;
-        for (const item of results) knownRef.current.set(item.id, item);
-        setItems(results);
-        setLoading(false);
-      }).catch(() => {
-        if (requestId !== requestIdRef.current) return;
-        setErrored(true);
-        setLoading(false);
-      });
-    }, FETCH_DEBOUNCE_MS);
-    return () => clearTimeout(timer);
-  }, [open, query]);
-  React2.useEffect(() => {
-    if (!open) return;
-    const reposition = () => setAnchor(clientRectRef.current?.() ?? null);
-    window.addEventListener("scroll", reposition, true);
-    window.addEventListener("resize", reposition);
-    return () => {
-      window.removeEventListener("scroll", reposition, true);
-      window.removeEventListener("resize", reposition);
-    };
-  }, [open]);
-  React2.useEffect(() => {
-    if (!editor) return;
-    if (serializeMentionDoc(editor.getJSON()) === value) return;
-    const doc = parseMentionValue(value, knownRef.current);
-    editor.commands.setContent(doc, { emitUpdate: false });
-    const mentions = collectMentions(doc);
-    const key = mentionsKey(mentions);
-    if (key !== lastMentionsKeyRef.current) {
-      lastMentionsKeyRef.current = key;
-      onMentionsChangeRef.current?.(mentions);
-    }
-  }, [editor, value]);
-  React2.useEffect(() => {
-    editor?.setEditable(!disabled);
-  }, [editor, disabled]);
-  React2.useEffect(() => {
-    if (!editor || !registerFocus) return;
-    registerFocus(() => editor.commands.focus());
-  }, [editor, registerFocus]);
-  return /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
-    /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        className: "overflow-y-auto",
-        style: { maxHeight, minHeight: `${minRows * 1.5}rem` },
-        children: [
-          /* @__PURE__ */ jsx2(EditorContent, { editor }),
-          value.length === 0 && /* @__PURE__ */ jsx2("div", { className: "pointer-events-none absolute top-1 left-2 text-muted-foreground text-sm leading-relaxed", children: placeholder })
-        ]
-      }
-    ),
-    open && /* @__PURE__ */ jsx2(
-      "div",
-      {
-        className: "absolute z-20",
-        style: anchorStyle(anchor),
-        "data-testid": "mention-popover",
-        children: /* @__PURE__ */ jsx2(
-          MentionList,
-          {
-            ref: listRef,
-            items,
-            loading,
-            error: errored,
-            emptyText: mention.emptyText,
-            renderItem: mention.renderItem,
-            onSelect: (item) => commandRef.current?.(item),
-            className: mention.popoverClassName
-          }
-        )
-      }
-    )
-  ] });
-}
-function anchorStyle(rect) {
-  if (!rect || rect.left === 0 && rect.bottom === 0) {
-    return { position: "absolute", top: "100%", left: 0 };
-  }
-  return { position: "fixed", top: rect.bottom + 4, left: rect.left };
-}
-export {
-  buildComposerStarterKit,
-  buildMentionExtension,
-  MentionEditor as default
-};