@inkandswitch/patchwork-pkg-base 0.0.23 → 0.0.24

package/packages/tldraw4/dist/datatype.js

@@ -2,7 +2,7 @@ import {
   createTLStore,
   defaultShapeUtils,
   tldrawValueToAutomergeValue
-} from "./chunk-VF5CY24G.js";
+} from "./chunk-GDYMD4VT.js";
 import "./chunk-IKZWERSR.js";
 
 // src/datatype.ts

package/packages/tldraw4/dist/tool.js

@@ -30,7 +30,7 @@ import {
   useEditor,
   useValue,
   validation_exports
-} from "./chunk-VF5CY24G.js";
+} from "./chunk-GDYMD4VT.js";
 import {
   __commonJS,
   __export,
@@ -7508,10 +7508,7 @@ var DiffShapeWrapper = (0, import_react5.forwardRef)(
 
 // src/PatchworkDocShape.tsx
 var import_react6 = __toESM(require_react(), 1);
-import {
-  getRegistry,
-  getSupportedToolsForType
-} from "@inkandswitch/patchwork-plugins";
+import { getSupportedToolsForType } from "@inkandswitch/patchwork-plugins";
 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
 var import_react8 = (
   // @ts-expect-error Custom element from @inkandswitch/patchwork-elements
@@ -7586,69 +7583,24 @@ function getDefaultToolId(datatypeId) {
     return "";
   }
 }
-function useSupportedTools(docType) {
-  return (0, import_react6.useMemo)(() => {
-    if (!docType) return [];
-    try {
-      return getSupportedToolsForType(docType).filter((t) => !t.unlisted);
-    } catch {
-      return [];
-    }
-  }, [docType]);
-}
 function useIsImage(docUrl) {
   const [doc] = useDocument(
     docUrl ? docUrl : void 0
   );
   return doc?.["@patchwork"]?.type === "file" && !!doc?.mimeType?.startsWith("image/");
 }
-function openDocumentInHost(el, url, toolId) {
-  el.dispatchEvent(
-    new CustomEvent("patchwork:open-document", {
-      detail: { url, toolId: toolId || void 0 },
-      composed: true,
-      bubbles: true
-    })
-  );
-}
 function PatchworkDocComponent({ shape }) {
-  const { docUrl, docName, docType, toolId } = shape.props;
+  const { docUrl, docName, toolId } = shape.props;
   const editor = useEditor();
-  const repo = useRepo();
   const isImage = useIsImage(docUrl);
-  const tools = useSupportedTools(docType);
-  const isSelectTool = useValue("is select tool", () => editor.getCurrentToolId() === "select", [
-    editor
-  ]);
   const isEditingShape = useValue(
     "is editing shape",
     () => editor.getEditingShapeId() === shape.id,
     [editor, shape.id]
   );
   const isFocused = isEditingShape;
-  const [isEditingName, setIsEditingName] = (0, import_react6.useState)(false);
-  const [toolMenuOpen, setToolMenuOpen] = (0, import_react6.useState)(false);
-  const nameInputRef = (0, import_react6.useRef)(null);
   const containerRef = (0, import_react6.useRef)(null);
   const contentRef = (0, import_react6.useRef)(null);
-  const toolMenuRef = (0, import_react6.useRef)(null);
-  const currentTool = tools.find((t) => t.id === toolId) ?? tools[0];
-  (0, import_react6.useEffect)(() => {
-    if (isEditingName && nameInputRef.current) {
-      nameInputRef.current.focus();
-      nameInputRef.current.select();
-    }
-  }, [isEditingName]);
-  (0, import_react6.useEffect)(() => {
-    if (!toolMenuOpen) return;
-    const handler = (e) => {
-      if (toolMenuRef.current && !toolMenuRef.current.contains(e.target)) {
-        setToolMenuOpen(false);
-      }
-    };
-    window.addEventListener("pointerdown", handler, true);
-    return () => window.removeEventListener("pointerdown", handler, true);
-  }, [toolMenuOpen]);
   (0, import_react6.useEffect)(() => {
     if (!isFocused) return;
     const el = contentRef.current;
@@ -7675,58 +7627,23 @@ function PatchworkDocComponent({ shape }) {
       el.removeEventListener("pointerup", stopPointer, true);
     };
   }, [isFocused]);
-  const handleToolChange = (0, import_react6.useCallback)(
-    (newToolId) => {
+  (0, import_react6.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const onToolChanged = (e) => {
+      e.stopPropagation();
+      const newToolId = e.detail?.toolId;
+      if (!newToolId) return;
       editor.updateShape({
         id: shape.id,
         type: PATCHWORK_DOC_SHAPE_TYPE,
         props: { toolId: newToolId }
       });
-      setToolMenuOpen(false);
-    },
-    [editor, shape.id]
-  );
-  const handleOpenDocument = (0, import_react6.useCallback)(() => {
-    const el = containerRef.current;
-    if (!el || !docUrl) return;
-    openDocumentInHost(el, docUrl, toolId || void 0);
-  }, [docUrl, toolId]);
-  const handleRename = (0, import_react6.useCallback)(
-    async (newName) => {
-      const trimmed = newName.trim();
-      if (!trimmed || trimmed === docName || !docUrl || !docType) {
-        setIsEditingName(false);
-        return;
-      }
-      try {
-        const datatype = await loadDatatype(docType);
-        if (datatype?.module.setTitle) {
-          const childHandle = await repo.find(docUrl);
-          childHandle.change((d) => {
-            datatype.module.setTitle(d, trimmed);
-          });
-          const childDoc = childHandle.doc();
-          const canonicalName = childDoc ? datatype.module.getTitle(childDoc) : trimmed;
-          editor.updateShape({
-            id: shape.id,
-            type: PATCHWORK_DOC_SHAPE_TYPE,
-            props: { docName: canonicalName }
-          });
-        } else {
-          editor.updateShape({
-            id: shape.id,
-            type: PATCHWORK_DOC_SHAPE_TYPE,
-            props: { docName: trimmed }
-          });
-        }
-      } catch (err) {
-        console.warn("[tldraw4] rename failed", err);
-      }
-      setIsEditingName(false);
-    },
-    [editor, shape.id, docName, docUrl, docType, repo]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HTMLContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    };
+    el.addEventListener("patchwork:embed-tool-changed", onToolChanged);
+    return () => el.removeEventListener("patchwork:embed-tool-changed", onToolChanged);
+  }, [editor, shape.id]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(HTMLContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       ref: containerRef,
@@ -7742,288 +7659,61 @@ function PatchworkDocComponent({ shape }) {
         boxShadow: "0 1px 4px rgba(0,0,0,0.10)",
         pointerEvents: "all"
       },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-          "div",
-          {
-            onPointerDown: () => {
-              if (isEditingShape) editor.setEditingShape(null);
-            },
-            style: {
-              display: "flex",
-              alignItems: "center",
-              gap: "6px",
-              height: "30px",
-              padding: "0 6px",
-              borderBottom: "1px solid var(--color-divider, #e5e7eb)",
-              flexShrink: 0,
-              cursor: "grab",
-              userSelect: "none",
-              background: "var(--color-low, #fafafa)"
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "button",
-                {
-                  type: "button",
-                  title: "Open document",
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    handleOpenDocument();
-                  },
-                  onPointerDown: (e) => e.stopPropagation(),
-                  style: {
-                    display: "inline-flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    width: "20px",
-                    height: "20px",
-                    border: "none",
-                    borderRadius: "4px",
-                    background: "transparent",
-                    cursor: "pointer",
-                    color: "var(--color-text, #374151)",
-                    flexShrink: 0
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "13", height: "13", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                    "path",
-                    {
-                      d: "M6 3H3.5A1.5 1.5 0 0 0 2 4.5v8A1.5 1.5 0 0 0 3.5 14h8a1.5 1.5 0 0 0 1.5-1.5V10M9 3h4v4M13 3 7 9",
-                      stroke: "currentColor",
-                      strokeWidth: "1.4",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round"
-                    }
-                  ) })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: isEditingName ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "input",
-                {
-                  ref: nameInputRef,
-                  defaultValue: docName,
-                  onPointerDown: (e) => e.stopPropagation(),
-                  onClick: (e) => e.stopPropagation(),
-                  onKeyDown: (e) => {
-                    e.stopPropagation();
-                    if (e.key === "Enter") handleRename(e.target.value);
-                    if (e.key === "Escape") setIsEditingName(false);
-                  },
-                  onBlur: (e) => handleRename(e.target.value),
-                  style: {
-                    width: "100%",
-                    fontSize: "13px",
-                    fontWeight: 600,
-                    fontFamily: "inherit",
-                    color: "var(--color-text, #111827)",
-                    background: "var(--color-panel, #fff)",
-                    border: "1px solid var(--color-selected, #2f80ed)",
-                    borderRadius: "4px",
-                    padding: "1px 4px",
-                    outline: "none",
-                    boxSizing: "border-box"
-                  }
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                "span",
-                {
-                  onPointerDown: (e) => {
-                    e.stopPropagation();
-                  },
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setIsEditingName(true);
-                  },
-                  title: docName,
-                  style: {
-                    display: "block",
-                    fontSize: "13px",
-                    fontWeight: 600,
-                    color: "var(--color-text, #111827)",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    whiteSpace: "nowrap",
-                    cursor: "text"
-                  },
-                  children: docName || "Untitled"
-                }
-              ) }),
-              currentTool && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: toolMenuRef, style: { position: "relative", flexShrink: 0 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-                  "button",
-                  {
-                    type: "button",
-                    title: "Choose view",
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      if (tools.length > 1) setToolMenuOpen((v) => !v);
-                    },
-                    onPointerDown: (e) => e.stopPropagation(),
-                    style: {
-                      display: "inline-flex",
-                      alignItems: "center",
-                      gap: "4px",
-                      maxWidth: "140px",
-                      padding: "2px 8px",
-                      border: "1px solid var(--color-divider, #e5e7eb)",
-                      borderRadius: "9999px",
-                      background: "var(--color-panel, #fff)",
-                      cursor: tools.length > 1 ? "pointer" : "default",
-                      fontSize: "11px",
-                      fontWeight: 500,
-                      color: "var(--color-text-1, #4b5563)",
-                      whiteSpace: "nowrap"
-                    },
-                    children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        "span",
-                        {
-                          style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
-                          children: currentTool.name
-                        }
-                      ),
-                      tools.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { width: "8", height: "8", viewBox: "0 0 8 8", style: { opacity: 0.6 }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                        "path",
-                        {
-                          d: "M1 2.5 4 5.5 7 2.5",
-                          stroke: "currentColor",
-                          strokeWidth: "1.5",
-                          fill: "none",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      ) })
-                    ]
-                  }
-                ),
-                toolMenuOpen && tools.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                  "div",
-                  {
-                    onPointerDown: (e) => e.stopPropagation(),
-                    style: {
-                      position: "absolute",
-                      top: "100%",
-                      right: 0,
-                      marginTop: "4px",
-                      background: "var(--color-panel, #fff)",
-                      border: "1px solid var(--color-divider, #e5e7eb)",
-                      borderRadius: "6px",
-                      boxShadow: "0 4px 12px rgba(0,0,0,0.12)",
-                      padding: "4px",
-                      minWidth: "140px",
-                      zIndex: 1e4
-                    },
-                    children: tools.map((t) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        onPointerDown: (e) => {
-                          e.stopPropagation();
-                          e.preventDefault();
-                          handleToolChange(t.id);
-                        },
-                        style: {
-                          display: "block",
-                          width: "100%",
-                          padding: "5px 10px",
-                          border: "none",
-                          borderRadius: "4px",
-                          background: t.id === currentTool.id ? "var(--color-selected, #e8f0fe)" : "transparent",
-                          cursor: "pointer",
-                          fontSize: "12px",
-                          color: "var(--color-text, #374151)",
-                          textAlign: "left",
-                          whiteSpace: "nowrap"
-                        },
-                        children: t.name
-                      },
-                      t.id
-                    ))
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "div",
-          {
-            ref: contentRef,
-            style: {
-              flex: 1,
-              minHeight: 0,
-              overflow: "hidden",
-              position: "relative",
-              pointerEvents: isSelectTool ? "auto" : "none",
-              userSelect: isFocused ? "text" : "none",
-              cursor: isFocused ? "auto" : void 0
-            },
-            onPointerDown: isSelectTool ? (e) => {
-              e.stopPropagation();
-              if (!isEditingShape) editor.setEditingShape(shape.id);
-            } : void 0,
-            onPointerUp: isSelectTool ? (e) => {
-              e.stopPropagation();
-              e.target?.dispatchEvent(
-                new MouseEvent("click", {
-                  bubbles: true,
-                  cancelable: true,
-                  view: window,
-                  clientX: e.clientX,
-                  clientY: e.clientY
-                })
-              );
-            } : void 0,
-            children: docUrl && isImage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "img",
-              {
-                src: automergeUrlToServiceWorkerUrl(docUrl),
-                alt: docName,
-                style: { width: "100%", height: "100%", objectFit: "contain" }
-              }
-            ) : docUrl ? /* @__PURE__ */ (0, import_react8.createElement)(
-              "patchwork-view",
-              {
-                "doc-url": docUrl,
-                ...toolId ? { "tool-id": toolId } : {},
-                key: toolId || "default",
-                style: { display: "block", width: "100%", height: "100%" }
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-              "div",
-              {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  height: "100%",
-                  color: "var(--color-text-3, #9ca3af)",
-                  fontSize: "12px"
-                },
-                children: "No document"
-              }
-            )
-          }
-        )
-      ]
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "div",
+        {
+          ref: contentRef,
+          style: {
+            flex: 1,
+            minHeight: 0,
+            overflow: "hidden",
+            position: "relative",
+            pointerEvents: isFocused ? "auto" : "none",
+            userSelect: isFocused ? "text" : "none",
+            cursor: isFocused ? "auto" : void 0
+          },
+          children: docUrl && isImage ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "img",
+            {
+              src: automergeUrlToServiceWorkerUrl(docUrl),
+              alt: docName,
+              style: { width: "100%", height: "100%", objectFit: "contain" }
+            }
+          ) : docUrl ? /* @__PURE__ */ (0, import_react8.createElement)(
+            "patchwork-view",
+            {
+              "doc-url": docUrl,
+              "tool-id": "embed",
+              ...toolId ? { "embed-tool-id": toolId } : {},
+              key: toolId || "default",
+              style: { display: "block", width: "100%", height: "100%" }
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "100%",
+                color: "var(--color-text-3, #9ca3af)",
+                fontSize: "12px"
+              },
+              children: "No document"
+            }
+          )
+        }
+      )
     }
   ) });
 }
-async function loadDatatype(id) {
-  try {
-    const registry = getRegistry("patchwork:datatype");
-    return await registry.load(id);
-  } catch {
-    return void 0;
-  }
-}
 
 // src/NewDocTool.tsx
 var import_react9 = __toESM(require_react(), 1);
 var import_react_dom = __toESM(require_react_dom(), 1);
 import {
   createDocOfDatatype2,
-  getRegistry as getRegistry2
+  getRegistry
 } from "@inkandswitch/patchwork-plugins";
 var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
 var _contextByEditor = /* @__PURE__ */ new WeakMap();
@@ -8036,15 +7726,15 @@ function setSelectedDatatypeId(id) {
 }
 function getListedDatatypeDescriptions() {
   try {
-    const registry = getRegistry2("patchwork:datatype");
+    const registry = getRegistry("patchwork:datatype");
     return registry.filter((d) => !d.unlisted);
   } catch {
     return [];
   }
 }
-async function loadDatatype2(id) {
+async function loadDatatype(id) {
   try {
-    const registry = getRegistry2("patchwork:datatype");
+    const registry = getRegistry("patchwork:datatype");
     return await registry.load(id);
   } catch {
     return void 0;
@@ -8141,7 +7831,7 @@ var NewDocShapeTool = class extends StateNode {
     editor.setSelectedShapes([placeholderId]);
     void (async () => {
       try {
-        const datatype = await loadDatatype2(datatypeId);
+        const datatype = await loadDatatype(datatypeId);
         if (!datatype) throw new Error(`Could not load datatype: ${datatypeId}`);
         const docHandle = await createDocOfDatatype2(datatype, repo);
         const docUrl = docHandle.url;
@@ -8672,12 +8362,16 @@ function usePatchworkDrop(element) {
     const isInsideEmbeddedPatchworkView = (e) => {
       for (const el of e.composedPath()) {
         if (el === element) break;
-        if (el.tagName?.toLowerCase() === "patchwork-view") return true;
+        if (el.tagName?.toLowerCase() === "patchwork-view")
+          return true;
       }
       return false;
     };
     const allowDrop = (e) => {
-      if (e.dataTransfer && isPatchworkDrag(e.dataTransfer.types)) e.preventDefault();
+      if (e.dataTransfer && isPatchworkDrag(e.dataTransfer.types)) {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = "link";
+      }
     };
     const handleDrop = (e) => {
       if (!e.dataTransfer || !isPatchworkDrag(e.dataTransfer.types)) return;
@@ -8688,12 +8382,10 @@ function usePatchworkDrop(element) {
       if (docs.length === 0) return;
       const dropPoint = editor.screenToPage({ x: e.clientX, y: e.clientY });
       const STAGGER = 24;
+      const createdIds = [];
       docs.forEach((item, i) => {
-        const shapeId = makeShapeId(item.url);
-        if (editor.getShape(shapeId)) {
-          editor.select(shapeId);
-          return;
-        }
+        const shapeId = createShapeId();
+        createdIds.push(shapeId);
         const knownType = item.type ?? "";
         editor.createShape({
           id: shapeId,
@@ -8733,7 +8425,7 @@ function usePatchworkDrop(element) {
           })();
         }
       });
-      editor.setSelectedShapes(docs.map((d) => makeShapeId(d.url)));
+      editor.setSelectedShapes(createdIds);
     };
     element.addEventListener("dragenter", allowDrop, { capture: true });
     element.addEventListener("dragover", allowDrop, { capture: true });