microboard-temp 0.4.6 → 0.4.7

package/dist/cjs/browser.js

@@ -1630,6 +1630,9 @@ class Line {
   getStartPoint() {
     return this.start;
   }
+  getEndPoint() {
+    return this.end;
+  }
   getLength() {
     const { start, end } = this;
     const deltaX = end.x - start.x;
@@ -3227,6 +3230,9 @@ class QuadraticBezier extends BaseCurve {
   getStartPoint() {
     return this.start;
   }
+  getEndPoint() {
+    return this.end;
+  }
   moveToStart(ctx) {
     ctx.moveTo(this.start.x, this.start.y);
   }
@@ -3270,6 +3276,9 @@ class CubicBezier extends BaseCurve {
   getStartPoint() {
     return this.start;
   }
+  getEndPoint() {
+    return this.end;
+  }
   moveToStart(ctx) {
     ctx.moveTo(this.start.x, this.start.y);
   }
@@ -7372,25 +7381,33 @@ class TransformationCommand {
               x: 1 / op2.x,
               y: 1 / op2.y
             };
+          } else {
+            reverseOp = {
+              ...op2,
+              x: 1,
+              y: 1
+            };
           }
           return { item: currTrans, operation: reverseOp };
         });
       }
       case "locked": {
+        const op2 = this.operation;
         return mapItemsByOperation(this.transformation, () => {
           return {
-            ...this.operation,
-            item: [...op.item],
+            ...op2,
+            item: [...op2.item],
             method: "unlocked",
             locked: false
           };
         });
       }
       case "unlocked": {
+        const op2 = this.operation;
         return mapItemsByOperation(this.transformation, () => {
           return {
-            ...this.operation,
-            item: [...op.item],
+            ...op2,
+            item: [...op2.item],
             method: "locked",
             locked: true
           };
@@ -9001,6 +9018,13 @@ var tagByType = {
   Comment: "comment-item",
   Group: ""
 };
+var headingTagsMap = {
+  h1: "heading_one",
+  h2: "heading_two",
+  h3: "heading_three",
+  h4: "heading_four",
+  h5: "heading_five"
+};
 var parsersHTML = {
   "sticker-item": parseHTMLSticker,
   "shape-item": parseHTMLShape,
@@ -9025,12 +9049,12 @@ function getTransformationData(el) {
   if (transformMatch) {
     const [, translateX, translateY, scaleX, scaleY] = transformMatch.map(Number);
     const matrix = new Matrix2(translateX, translateY, scaleX, scaleY);
-    return { ...matrix, rotate: 0 };
+    return { ...matrix, rotate: 0, isLocked: false };
   }
-  return { ...new Matrix2, rotate: 0 };
+  return { ...new Matrix2, rotate: 0, isLocked: false };
 }
 function parseHTMLRichText(el, options) {
-  const parseNode = (node) => {
+  const parseNode = (node, nestingLevel = 1) => {
     const isLinkNode = node.tagName.toLowerCase() === "a";
     if (node.tagName.toLowerCase() === "span" || isLinkNode && node.children.length === 0) {
       const isSingleSpace = node.textContent?.length === 1 && node.textContent?.trim() === "";
@@ -9053,7 +9077,7 @@ function parseHTMLRichText(el, options) {
         superscript: false
       };
     }
-    const children2 = Array.from(node.children).map((child) => parseNode(child));
+    const children2 = Array.from(node.children).map((child) => parseNode(child, nestingLevel + 1));
     const tagName = node.tagName.toLowerCase();
     const extractCommonProps = () => ({
       horisontalAlignment: node.style.textAlign || "left",
@@ -9061,23 +9085,19 @@ function parseHTMLRichText(el, options) {
       paddingBottom: parseFloat(node.style.paddingBottom) || undefined
     });
     switch (tagName) {
-      case "blockquote":
-        return {
-          type: "block-quote",
-          ...extractCommonProps(),
-          children: children2
-        };
       case "ul":
         return {
           type: "ul_list",
           ...extractCommonProps(),
-          children: children2
+          children: children2,
+          listLevel: nestingLevel
         };
       case "ol":
         return {
           type: "ol_list",
           ...extractCommonProps(),
-          children: children2
+          children: children2,
+          listLevel: nestingLevel
         };
       case "li":
         return {
@@ -9099,11 +9119,9 @@ function parseHTMLRichText(el, options) {
       case "h2":
       case "h3":
       case "h4":
-      case "h5":
-      case "h6": {
-        const headingType = `heading_${["one", "two", "three", "four", "five", "six"][parseInt(tagName[1]) - 1]}`;
+      case "h5": {
         return {
-          type: headingType,
+          type: headingTagsMap[tagName],
           ...extractCommonProps(),
           children: children2
         };
@@ -9307,6 +9325,7 @@ function parseHTMLConnector(el) {
     ...endPointType === "FixedConnector" ? { segment: startSegment, tangent: endTangent } : {}
   };
   const connectorData = {
+    middlePoint: null,
     id: el.id,
     itemType: "Connector",
     transformation,
@@ -9367,6 +9386,7 @@ function parseHTMLDrawing(el) {
 }
 function parseHTMLAINode(el) {
   const aiNodeData = {
+    threadDirection: 3,
     id: el.id,
     itemType: "AINode",
     parentNodeId: el.getAttribute("parent-node-id") || undefined,
@@ -17219,7 +17239,9 @@ function setNodeChildrenStyles({
 }) {
   let fontStyles = conf.DEFAULT_TEXT_STYLES;
   if (editor) {
-    fontStyles = import_slate19.Editor.marks(editor) || conf.DEFAULT_TEXT_STYLES;
+    const marks = import_slate19.Editor.marks(editor);
+    const fontSize = marks?.fontSize ? marks.fontSize === "auto" ? conf.DEFAULT_TEXT_STYLES.fontSize : marks.fontSize : conf.DEFAULT_TEXT_STYLES.fontSize;
+    fontStyles = marks ? { ...conf.DEFAULT_TEXT_STYLES, ...marks, fontSize } : conf.DEFAULT_TEXT_STYLES;
   }
   switch (node2.type) {
     case "heading_one":
@@ -17269,6 +17291,9 @@ function setNodeStyles({
   editor,
   horisontalAlignment
 }) {
+  if (node2.type === "list_item") {
+    return;
+  }
   if (node2.type === "ol_list" || node2.type === "ul_list") {
     node2.listLevel = listLevel;
     for (const listItem of node2.children) {
@@ -17419,9 +17444,10 @@ class MarkdownProcessor {
     } else {
       const lastParagraphPath = this.getText().length - 1;
       const lastParagraph = this.getText()[lastParagraphPath];
+      const lastParagraphText = lastParagraph.children[lastParagraph.children.length - 1];
       const insertLocation = {
         path: [lastParagraphPath, lastParagraph.children.length - 1],
-        offset: lastParagraph.children[lastParagraph.children.length - 1].text.length
+        offset: lastParagraphText.text.length
       };
       import_slate20.Transforms.insertText(this.editor, combinedText, {
         at: insertLocation
@@ -18436,14 +18462,6 @@ class RichTextCommand {
             fontColor: this.board.items.getById(id)?.getRichText()?.getFontColor() || conf.DEFAULT_TEXT_STYLES.fontColor
           }
         }));
-      case "setBlockType":
-        return items.map((id) => ({
-          item: id,
-          operation: {
-            ...this.operation,
-            type: this.board.items.getById(id)?.getRichText()?.getBlockType() || "paragraph"
-          }
-        }));
       case "setFontStyle":
         return items.map((id) => ({
           item: id,
@@ -18546,7 +18564,8 @@ class RichTextGroupCommand {
           class: "RichText",
           method: "edit",
           item: [richText.getId() ?? ""],
-          ops
+          ops,
+          selection: null
         }
       });
     }
@@ -18563,7 +18582,8 @@ class RichTextGroupCommand {
           class: "RichText",
           method: "edit",
           item: [richText.getId() ?? ""],
-          ops: ops.map((op) => import_slate34.Operation.inverse(op)).reverse()
+          ops: ops.map((op) => import_slate34.Operation.inverse(op)).reverse(),
+          selection: null
         }
       });
     }
@@ -19213,6 +19233,9 @@ class Comment2 {
     const anchor = this.anchor.copy();
     return new Mbr(anchor.x, anchor.y, anchor.x, anchor.y);
   }
+  getPathMbr() {
+    return this.getMbr();
+  }
   getNearestEdgePointTo(point3) {
     return this.anchor;
   }
@@ -19700,6 +19723,9 @@ class BaseItem extends Mbr {
   onRemove() {
     this.onRemoveCallbacks.forEach((cb) => cb());
   }
+  getPathMbr() {
+    return this.getMbr().copy();
+  }
   render(context) {}
   renderHTML(documentFactory) {
     return documentFactory.createElement("div");
@@ -20225,7 +20251,10 @@ class RichText extends BaseItem {
   }
   getFontSize() {
     const marks = this.editor.getSelectionMarks();
-    const fontSize = marks?.fontSize ?? this.initialTextStyles.fontSize;
+    let fontSize = marks?.fontSize ?? this.initialTextStyles.fontSize;
+    if (fontSize === "auto") {
+      fontSize = this.initialTextStyles.fontSize;
+    }
     if (this.autoSize) {
       return fontSize * this.autoSizeScale;
     }
@@ -20243,7 +20272,7 @@ class RichText extends BaseItem {
     for (const [node2] of textNodes) {
       const fontSize = node2.fontSize || node2 && node2.fontSize;
       if (fontSize) {
-        fontSizes.push(fontSize);
+        fontSizes.push(fontSize === "auto" ? this.initialTextStyles.fontSize : fontSize);
       }
     }
     if (fontSizes.length > 0) {
@@ -20256,7 +20285,7 @@ class RichText extends BaseItem {
     return marks?.fontHighlight ?? this.initialTextStyles.fontHighlight;
   }
   getBlockType() {
-    const blockNode = getSelectedBlockNode(this.editor);
+    const blockNode = getSelectedBlockNode(this.editor.editor);
     return blockNode ? blockNode.type : "paragraph";
   }
   getHorisontalAlignment() {
@@ -20287,16 +20316,18 @@ class RichText extends BaseItem {
       const refMbr = new Mbr(domMbr.left, domMbr.top, domMbr.right, domMbr.bottom);
       if (refMbr.isInside(point3) && (conf.documentFactory.caretPositionFromPoint || conf.documentFactory.caretRangeFromPoint)) {
         const domRange = conf.documentFactory.caretPositionFromPoint ? conf.documentFactory.caretPositionFromPoint(point3.x, point3.y) : conf.documentFactory.caretRangeFromPoint(point3.x, point3.y);
-        const textNode = conf.documentFactory.caretPositionFromPoint ? domRange.offsetNode : domRange.startContainer;
-        const offset = conf.documentFactory.caretPositionFromPoint ? domRange.offset : domRange.startOffset;
-        const slatePoint = conf.reactEditorToSlatePoint(this.editor.editor, textNode, offset, {
-          exactMatch: false,
-          suppressThrow: false
-        });
-        if (slatePoint) {
-          const nRange = { anchor: slatePoint, focus: slatePoint };
-          this.editorTransforms.select(this.editor.editor, nRange);
-          conf.reactEditorFocus(this.editor.editor);
+        if (domRange) {
+          const textNode = conf.documentFactory.caretPositionFromPoint ? domRange.offsetNode : domRange.startContainer;
+          const offset = conf.documentFactory.caretPositionFromPoint ? domRange.offset : domRange.startOffset;
+          const slatePoint = conf.reactEditorToSlatePoint(this.editor.editor, textNode, offset, {
+            exactMatch: false,
+            suppressThrow: false
+          });
+          if (slatePoint) {
+            const nRange = { anchor: slatePoint, focus: slatePoint };
+            this.editorTransforms.select(this.editor.editor, nRange);
+            conf.reactEditorFocus(this.editor.editor);
+          }
         }
       } else {
         if (!(conf.documentFactory.caretPositionFromPoint || conf.documentFactory.caretRangeFromPoint)) {
@@ -37504,6 +37535,9 @@ class Shape extends BaseItem {
   getMbr() {
     return this.mbr.copy();
   }
+  getPathMbr() {
+    return this.getPath().getMbr();
+  }
   getNearestEdgePointTo(point5) {
     return this.path.getNearestEdgePointTo(point5);
   }
@@ -43284,13 +43318,8 @@ function createCanvasDrawer(board) {
 // src/Selection/QuickAddButtons/quickAddHelpers.ts
 function getControlPointData(item, index2, isRichText = false) {
   const itemScale = isRichText ? { x: 1, y: 1 } : item.transformation.getScale();
-  const width2 = item.itemType === "Shape" ? item.getPath().getMbr().getWidth() : item.getMbr().getWidth();
-  let height3;
-  if (item.itemType === "Shape" && index2 !== 2 && index2 !== 3) {
-    height3 = item.getPath().getMbr().getHeight();
-  } else {
-    height3 = item.getMbr().getHeight();
-  }
+  const width2 = item.getPathMbr().getWidth();
+  let height3 = item.getPathMbr().getHeight();
   const adjMapScaled = {
     0: { x: 0, y: height3 / 2 / itemScale.y },
     1: {
@@ -43323,7 +43352,7 @@ function quickAddItem(board, type, connector) {
       optionalItem = new Sticker(board);
       break;
     case "AINode":
-      optionalItem = createAINode2(board, startPoint?.item?.getId(), 3);
+      optionalItem = createAINode2(board, 3, "item" in startPoint ? startPoint?.item?.getId() : undefined);
       break;
   }
   let itemMbr = optionalItem.getMbr();
@@ -43350,20 +43379,25 @@ function quickAddItem(board, type, connector) {
   if ("text" in guarded && guarded.itemType !== "AINode" && guarded.itemType !== "RichText") {
     delete guarded.text;
   }
+  if (!itemData.transformation) {
+    itemData.transformation = new DefaultTransformationData;
+  }
   itemData.transformation.translateX = endPoint.x;
   itemData.transformation.translateY = endPoint.y;
   const lines = connector.lines.getSegments();
   const lastLine = lines[lines.length - 1];
-  let dir2 = getDirection(lastLine.start, lastLine.end);
+  const lastLineStart = lastLine.getStartPoint();
+  const lastLineEnd = lastLine.getEndPoint();
+  let dir2 = getDirection(lastLineStart, lastLineEnd);
+  const firstLineStart = lines[0].getEndPoint();
   if (!dir2) {
-    const firstLine = lines[0];
-    const xDiff = Math.abs(firstLine.start.x - lastLine.end.x);
-    const yDiff = Math.abs(firstLine.start.y - lastLine.end.y);
+    const xDiff = Math.abs(firstLineStart.x - lastLineEnd.x);
+    const yDiff = Math.abs(firstLineStart.y - lastLineEnd.y);
     dir2 = xDiff > yDiff ? "horizontal" : "vertical";
   }
   let dirIndex = -1;
   if (dir2 === "vertical") {
-    if (lines[0].start.y > lastLine.end.y) {
+    if (firstLineStart.y > lastLineEnd.y) {
       itemData.transformation.translateX -= itemMbr.getWidth() / 2;
       itemData.transformation.translateY -= itemMbr.getHeight();
       dirIndex = 3;
@@ -43372,7 +43406,7 @@ function quickAddItem(board, type, connector) {
       dirIndex = 2;
     }
   } else if (dir2 === "horizontal") {
-    if (lines[0].start.x > lastLine.end.x) {
+    if (firstLineStart.x > lastLineEnd.x) {
       itemData.transformation.translateX -= itemMbr.getWidth();
       itemData.transformation.translateY -= itemMbr.getHeight() / 2;
       dirIndex = 1;
@@ -43394,7 +43428,7 @@ function quickAddItem(board, type, connector) {
   connector.setEndPoint(newEndPoint);
   board.selection.removeAll();
   board.selection.add(added);
-  if (added.itemType === "RichText" || added.itemType === "AINode") {
+  if (added instanceof RichText || added instanceof AINode) {
     const text5 = added.getRichText();
     text5.editor.setMaxWidth(text5.editor.maxWidth || 600);
     board.selection.editText();
@@ -43402,7 +43436,7 @@ function quickAddItem(board, type, connector) {
     board.selection.setContext("EditUnderPointer");
   }
 }
-function createAINode2(board, parentNodeId, directionIndex) {
+function createAINode2(board, directionIndex, parentNodeId) {
   const node2 = new AINode(board, true, parentNodeId, undefined, directionIndex);
   const nodeRichText = node2.getRichText();
   nodeRichText.applyMaxWidth(600);
@@ -43436,17 +43470,17 @@ function getQuickAddButtons(selection, board) {
   let quickAddItems = undefined;
   function calculateQuickAddPosition(index2, selectedItem, connectorStartPoint) {
     const connectorStorage = new SessionStorage;
-    const currMbr = selectedItem.getMbr();
+    const currMbr = selectedItem.getPathMbr();
     const selectedItemData = selectedItem.serialize();
-    const width2 = selectedItem.itemType === "Shape" ? selectedItem.getPath().getMbr().getWidth() : currMbr.getWidth();
-    const height3 = selectedItem.itemType === "Shape" ? selectedItem.getPath().getMbr().getHeight() : currMbr.getHeight();
+    const width2 = currMbr.getWidth();
+    const height3 = currMbr.getHeight();
     let offsetX = width2;
     let offsetY = height3;
     let newWidth = width2;
     let newHeight = height3;
     let itemData;
     if (selectedItem.itemType === "AINode" || selectedItem.itemType === "RichText") {
-      const item = selectedItem.itemType === "AINode" ? createAINode2(board, selectedItem.getId(), index2) : createRichText2(board);
+      const item = selectedItem.itemType === "AINode" ? createAINode2(board, index2, selectedItem.getId()) : createRichText2(board);
       newWidth = item.getMbr().getWidth();
       newHeight = item.getMbr().getHeight();
       itemData = item.serialize();
@@ -43495,9 +43529,9 @@ function getQuickAddButtons(selection, board) {
     const endPoints = getQuickButtonsPositions(newMbr);
     const reverseIndexMap = { 0: 1, 1: 0, 2: 3, 3: 2 };
     const connectorEndPoint = endPoints?.positions[reverseIndexMap[index2]] || new Point;
-    const fontSize = selectedItem.itemType === "RichText" ? selectedItem.getFontSize() : 14;
+    const fontSize = selectedItem instanceof RichText ? selectedItem.getFontSize() : 14;
     const newItem = board.createItem(board.getNewItemId(), newItemData);
-    if (newItem.itemType === "RichText") {
+    if (newItem instanceof RichText) {
       const storage = new SessionStorage;
       storage.setFontSize("RichText", fontSize);
       newItem.editor.selectWholeText();
@@ -43510,6 +43544,10 @@ function getQuickAddButtons(selection, board) {
       const scaleX = newItemMbr.getWidth() / 100;
       const scaleY = newItemMbr.getHeight() / 100;
       shapeData.transformation = {
+        isLocked: false,
+        rotate: 0,
+        translateX: 0,
+        translateY: 0,
         ...newItemData.transformation,
         scaleX,
         scaleY
@@ -43566,7 +43604,7 @@ function getQuickAddButtons(selection, board) {
     }
     let pathCenter;
     if (single.itemType === "Shape") {
-      pathCenter = single.getPath().getMbr().getCenter();
+      pathCenter = single.getPathMbr().getCenter();
     }
     const center = itemMbr.getCenter();
     const width2 = itemMbr.getWidth();
@@ -47935,7 +47973,7 @@ class Presence {
         };
       });
       ctx2.restore();
-      this.pointerAnimationId = safeRequestAnimationFrame(renderLoop);
+      this.pointerAnimationId = safeRequestAnimationFrame(renderLoop) || null;
     };
     renderLoop();
   }
@@ -49302,7 +49340,7 @@ class SpatialIndex {
     return this.itemsIndex.getRectsEnclosedOrCrossedBy(new Mbr(left, top, right, bottom));
   }
   getComments() {
-    return this.itemsArray.filter((item) => item instanceof Comment);
+    return this.itemsArray.filter((item) => item instanceof Comment2);
   }
   getMbr() {
     return this.Mbr;
@@ -49426,10 +49464,10 @@ class Items {
     }
     const { nearest } = enclosed.reduce((acc, item) => {
       const area = item.getMbr().getHeight() * item.getMbr().getWidth();
-      if (item.itemType === "Drawing" && !item.isPointNearLine(this.pointer.point)) {
+      if (item instanceof Drawing && !item.isPointNearLine(this.pointer.point)) {
         return acc;
       }
-      const isItemTransparent = item?.itemType === "Shape" && item?.getBackgroundColor() === "none";
+      const isItemTransparent = item instanceof Shape && item?.getBackgroundColor() === "none";
       const itemZIndex = this.getZIndex(item);
       const accZIndex = this.getZIndex(acc.nearest);
       if (itemZIndex > accZIndex && (!isItemTransparent || area === acc.area) || area < acc.area) {
@@ -49460,7 +49498,7 @@ class Items {
   }
   getLinkedConnectorsById(id) {
     return this.listAll().filter((item) => {
-      if (item.itemType !== "Connector") {
+      if (!(item instanceof Connector2)) {
         return false;
       }
       const { startItem, endItem } = item.getConnectedItems();
@@ -49475,7 +49513,7 @@ class Items {
       return [];
     }
     return this.listAll().filter((item) => {
-      if (item.itemType !== "Connector" || !item.isConnected()) {
+      if (!(item instanceof Connector2) || !item.isConnected()) {
         return false;
       }
       const { startItem, endItem } = item.getConnectedItems();
@@ -49650,7 +49688,7 @@ class SelectionItems {
     return ids;
   }
   getSingle() {
-    return this.isSingle() ? this.items.values().next().value : null;
+    return this.isSingle() ? this.items.values().next().value || null : null;
   }
   listByIds(itemIdList) {
     return itemIdList.map((id) => this.items.get(id)).filter((item) => item !== undefined);
@@ -49698,7 +49736,7 @@ class ConnectorTransformer extends Tool {
   getConnector(items) {
     if (items.isSingle()) {
       const connector = items.getSingle();
-      if (connector?.itemType === "Connector") {
+      if (connector instanceof Connector2) {
         return connector;
       }
     }
@@ -51168,10 +51206,10 @@ class BoardSelection {
     }
     copiedItemsMap[item.getId()] = { ...serializedData, zIndex };
   }
-  copy(skipImageBlobCopy = false) {
+  copy(skipImageBlobCopy) {
     const copiedItemsMap = {};
     const single = this.items.getSingle();
-    if (!skipImageBlobCopy && single && single.itemType === "Image") {
+    if (!skipImageBlobCopy && single && single instanceof ImageItem) {
       this.handleItemCopy(single, copiedItemsMap);
       return { imageElement: single.image, imageData: copiedItemsMap };
     }
@@ -51196,7 +51234,7 @@ class BoardSelection {
     return copiedItemsMap;
   }
   cut() {
-    const items = this.copy();
+    const items = this.copy(true);
     this.removeFromBoard();
     return items;
   }
@@ -51347,7 +51385,7 @@ class BoardSelection {
       });
       Object.values(selectedMap).forEach((val) => {
         const parentFrame = this.board.items.getById(val.item.parent);
-        const isParentFrame = parentFrame?.itemType === "Frame";
+        const isParentFrame = parentFrame instanceof Frame;
         const parentFrameId = isParentFrame ? parentFrame.getId() : null;
         if (val.nested) {
           const isRemoveChildFromFrame = Object.values(selectedMap).some((val2) => val2.nested && val2.nested.getId() !== parentFrameId);
@@ -51362,7 +51400,7 @@ class BoardSelection {
             console.warn(`Didnt find frame with id ${val.item.parent}`);
           }
         }
-        if (val.item.itemType === "Frame" && checkFrames) {
+        if (val.item instanceof Frame && checkFrames) {
           const currFrame = val.item;
           const currMbr = currFrame.getMbr();
           const children = val.item.getChildrenIds().map((childId) => this.board.items.getById(childId)).filter((item) => !!item);
@@ -51770,12 +51808,6 @@ class BoardSelection {
       text5.setEditorFocus(this.context);
     }
   }
-  getMediaStorageIds() {
-    return this.items.list().filter((item) => {
-      const shouldClearStorageUsage = item.itemType === "Image" || item.itemType === "Video" && item.getIsStorageUrl() || item.itemType === "Audio" && item.getIsStorageUrl();
-      return shouldClearStorageUsage;
-    }).map((item) => item.getStorageId());
-  }
   removeFromBoard() {
     const isLocked = this.items.list().some((item) => item.transformation.isLocked);
     if (isLocked) {
@@ -51790,7 +51822,6 @@ class BoardSelection {
     const connectors = itemIds.flatMap((id) => {
       return this.board.items.getLinkedConnectorsById(id);
     }).map((connector) => connector.getId());
-    conf.hooks.beforeMediaRemove(this.getMediaStorageIds(), this.board.getBoardId());
     this.emit({
       class: "Board",
       method: "remove",
@@ -51827,7 +51858,15 @@ class BoardSelection {
     this.board.sendToBack(this.items.list());
   }
   async duplicate() {
-    const mediaIds = this.getMediaStorageIds();
+    const mediaIds = [];
+    this.items.list().forEach((item) => {
+      if ("getStorageId" in item) {
+        const storageId = item.getStorageId();
+        if (storageId) {
+          mediaIds.push(storageId);
+        }
+      }
+    });
     const canDuplicate = mediaIds.length ? await conf.hooks.beforeMediaUpload(mediaIds, this.board.getBoardId()) : true;
     if (!canDuplicate) {
       return;
@@ -51895,7 +51934,7 @@ class BoardSelection {
       }
     }
     const contextItems = [];
-    if (single && single.itemType === "AINode") {
+    if (single && single instanceof AINode) {
       const contextItemsIds = single.getContextItems();
       if (contextItemsIds.length) {
         const newContextItems = this.board.items.listAll().filter((item) => contextItemsIds.includes(item.getId()));
@@ -51917,7 +51956,7 @@ class BoardSelection {
       }
     }
     contextItems.forEach((item) => {
-      if (item.itemType === "AINode") {
+      if (item instanceof AINode) {
         const path2 = item.getPath();
         path2.setBorderColor(CONTEXT_NODE_HIGHLIGHT_COLOR);
         path2.setBorderWidth(2);
@@ -51932,6 +51971,416 @@ class BoardSelection {
     });
   }
 }
+// src/public/customWebComponents.js
+var customWebComponents_default = `/* eslint-disable max-classes-per-file, @typescript-eslint/no-useless-constructor */
+class RichTextElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+class ShapeItemElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+class StickerElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+class DrawingElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+class ConnectorElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+class FrameItemElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+class ImageItemElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+class LinkItemElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+class AINodeItemElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+class VideoItemElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+class CommentElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+class AudioItemElement extends HTMLElement {
+    constructor() {
+        super();
+    }
+}
+
+customElements.define("rich-text", RichTextElement);
+customElements.define("shape-item", ShapeItemElement);
+customElements.define("sticker-item", StickerElement);
+customElements.define("drawing-item", DrawingElement);
+customElements.define("connector-item", ConnectorElement);
+customElements.define("frame-item", FrameItemElement);
+customElements.define("image-item", ImageItemElement);
+customElements.define("link-item", LinkItemElement);
+customElements.define("ainode-item", AINodeItemElement);
+customElements.define("video-item", VideoItemElement);
+customElements.define("comment-item", CommentElement);
+customElements.define("audio-item", AudioItemElement);
+
+document.addEventListener("DOMContentLoaded", () => {
+    const itemsDiv = document.querySelector("#items");
+    if (!itemsDiv) {
+        console.error("ITEMS DIV NOT FOUND!");
+        return;
+    }
+    let isDragging = false;
+    let startX, startY;
+    let translateX = 0;
+    let translateY = 0;
+    let scale = 1;
+
+    itemsDiv.style.transformOrigin = "0 0";
+    document.body.style.cursor = "grab";
+
+    function updateTransform() {
+        itemsDiv.style.transform =
+            "translate(" +
+            translateX +
+            "px, " +
+            translateY +
+            "px) scale(" +
+            scale +
+            ")";
+    }
+
+    function handleMouseDown(ev) {
+        isDragging = true;
+        startX = ev.clientX;
+        startY = ev.clientY;
+        itemsDiv.style.cursor = "grabbing";
+    }
+
+    function handleMouseMove(ev) {
+        if (!isDragging) {
+            return;
+        }
+        const dx = ev.clientX - startX;
+        const dy = ev.clientY - startY;
+        startX += dx;
+        startY += dy;
+        translateX += dx;
+        translateY += dy;
+        updateTransform();
+    }
+
+    function handleMouseUp(ev) {
+        if (!isDragging) {
+            return;
+        }
+        isDragging = false;
+        itemsDiv.style.cursor = "grab";
+    }
+
+    function handleWheel(ev) {
+        ev.preventDefault();
+        const factor = ev.deltaY < 0 ? 1.1 : 0.9;
+        translateX = ev.clientX - (ev.clientX - translateX) * factor;
+        translateY = ev.clientY - (ev.clientY - translateY) * factor;
+        scale *= factor;
+        updateTransform();
+    }
+
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("wheel", handleWheel, { passive: false });
+
+    const titlePanel = document.createElement("div");
+    titlePanel.style.boxShadow = "0px 10px 16px -3px rgba(20, 21, 26, 0.08)";
+    titlePanel.style.position = "fixed";
+    titlePanel.style.left = "12px";
+    titlePanel.style.top = "12px";
+    titlePanel.style.borderRadius = "12px";
+    titlePanel.style.backgroundColor = "#ffff";
+    titlePanel.style.display = "flex";
+    titlePanel.style.alignItems = "center";
+    titlePanel.style.gap = "8px";
+    titlePanel.style.padding = "0 12px";
+    titlePanel.style.height = "48px";
+    const editButton = document.createElement("button");
+    const editIcon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg",
+    );
+    editIcon.setAttribute("width", "13");
+    editIcon.setAttribute("height", "13");
+    editIcon.setAttribute("viewBox", "0 0 13 13");
+    editIcon.setAttribute("fill", "none");
+    editIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    const editIconPath = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path",
+    );
+    editIconPath.setAttribute(
+        "d",
+        "M7.838 0.999902V2.33324H1.33333V11.6666H10.6667V5.1619H12V12.3332C12 12.51 11.9298 12.6796 11.8047 12.8046C11.6797 12.9297 11.5101 12.9999 11.3333 12.9999H0.666667C0.489856 12.9999 0.320286 12.9297 0.195262 12.8046C0.0702379 12.6796 0 12.51 0 12.3332V1.66657C0 1.48976 0.0702379 1.32019 0.195262 1.19516C0.320286 1.07014 0.489856 0.999902 0.666667 0.999902H7.838ZM11.1847 0.872018C11.4453 0.611315 11.868 0.611355 12.1285 0.872108C12.3889 1.1327 12.3889 1.55503 12.1284 1.81553L6.472 7.4719L5.53067 7.4739L5.52933 6.52924L11.1847 0.872018Z",
+    );
+    editIconPath.setAttribute("fill", "#ffff");
+    editIcon.appendChild(editIconPath);
+    editButton.appendChild(editIcon);
+    const editFileText = document.createElement("p");
+    const isSnapshotInIframe =
+        window.parent &&
+        window.parent !== window &&
+        window.parent.location.href.includes("/snapshots/");
+    editFileText.textContent = isSnapshotInIframe ? "Edit copy" : "Edit file";
+    editButton.appendChild(editFileText);
+
+    editButton.style.backgroundColor = "rgba(20, 21, 26, 1)";
+    editButton.style.cursor = "pointer";
+    editButton.style.boxShadow = "0px 1px 2px 0px rgba(20, 21, 26, 0.05)";
+    editButton.style.color = "#ffff";
+    editButton.style.fontSize = "14px";
+    editButton.style.lineHeight = "20px";
+    editButton.style.display = "flex";
+    editButton.style.alignItems = "center";
+    editButton.style.gap = "8px";
+    editButton.style.padding = "8px";
+    editButton.style.borderRadius = "10px";
+    const separator = document.createElement("div");
+    separator.style.borderRight = "1px solid rgba(222, 224, 227, 1)";
+    separator.style.height = "100%";
+    const boardName = document.createElement("div");
+    const fileIcon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg",
+    );
+    fileIcon.setAttribute("width", "16");
+    fileIcon.setAttribute("height", "18");
+    fileIcon.setAttribute("viewBox", "0 0 16 18");
+    fileIcon.setAttribute("fill", "none");
+    fileIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute(
+        "d",
+        "M10.5 2.33341H2.16667V15.6667H13.8333V5.66675H10.5V2.33341ZM0.5 1.49341C0.5 1.03675 0.8725 0.666748 1.3325 0.666748H11.3333L15.5 4.83342V16.4942C15.5008 16.6037 15.48 16.7122 15.4388 16.8136C15.3976 16.915 15.3369 17.0073 15.2601 17.0852C15.1832 17.1631 15.0918 17.2252 14.991 17.2678C14.8902 17.3103 14.7819 17.3327 14.6725 17.3334H1.3275C1.10865 17.3319 0.899181 17.2443 0.744348 17.0897C0.589515 16.935 0.501746 16.7256 0.5 16.5067V1.49341ZM7.16667 8.16675V5.66675H8.83333V8.16675H11.3333V9.83342H8.83333V12.3334H7.16667V9.83342H4.66667V8.16675H7.16667Z",
+    );
+    path.setAttribute("fill", "#696B76");
+    fileIcon.appendChild(path);
+    boardName.appendChild(fileIcon);
+    const boardNameTag = document.querySelector('meta[name="board-name"]');
+    let boardNameStr = "Untitled";
+    if (boardNameTag) {
+        boardNameStr = boardNameTag.getAttribute("content");
+    }
+    const p = document.createElement("p");
+    p.textContent = boardNameStr;
+    p.style.fontSize = "16px";
+    p.style.lineHeight = "24px";
+    boardName.appendChild(p);
+    const cloudIcon = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "svg",
+    );
+    cloudIcon.setAttribute("width", "20");
+    cloudIcon.setAttribute("height", "18");
+    cloudIcon.setAttribute("viewBox", "0 0 20 18");
+    cloudIcon.setAttribute("fill", "none");
+    cloudIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    const cloudIconPath = document.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path",
+    );
+    cloudIconPath.setAttribute(
+        "d",
+        "M2.92711 0.75009L18.8371 16.6601L17.6579 17.8393L15.9796 16.1601C15.401 16.3854 14.7855 16.5007 14.1646 16.5001H5.83128C4.65063 16.5008 3.50782 16.0838 2.60518 15.3227C1.70255 14.5617 1.09833 13.5058 0.89953 12.342C0.700726 11.1782 0.920157 9.98165 1.51897 8.96413C2.11778 7.94662 3.05734 7.17382 4.17128 6.78259C4.13561 6.05854 4.23538 5.3342 4.46544 4.64676L1.74794 1.92842L2.92711 0.75009ZM5.83128 6.50009C5.83128 6.56759 5.83294 6.63592 5.83628 6.70259L5.89461 7.94259L4.72461 8.35426C3.98336 8.6164 3.35857 9.132 2.96052 9.81003C2.56248 10.4881 2.41678 11.2849 2.54916 12.0599C2.68153 12.8349 3.08347 13.5383 3.684 14.0457C4.28453 14.5532 5.04504 14.8322 5.83128 14.8334H14.1646C14.3196 14.8334 14.4721 14.8226 14.6213 14.8026L5.85628 6.03759C5.83961 6.18926 5.83128 6.34342 5.83128 6.50009ZM9.99794 0.666756C10.7878 0.666732 11.5694 0.827112 12.2954 1.13817C13.0214 1.44923 13.6767 1.90449 14.2215 2.47635C14.7664 3.04821 15.1894 3.72476 15.4649 4.46498C15.7405 5.2052 15.8629 5.99367 15.8246 6.78259C16.5167 7.02639 17.1467 7.41945 17.6699 7.93391C18.1931 8.44837 18.5967 9.07163 18.8521 9.75951C19.1076 10.4474 19.2085 11.183 19.1479 11.9143C19.0873 12.6455 18.8665 13.3545 18.5013 13.9909L17.2571 12.7468C17.5023 12.1401 17.5636 11.4747 17.4331 10.8335C17.3027 10.1924 16.9864 9.60375 16.5237 9.14112C16.061 8.67849 15.4723 8.36232 14.8311 8.23202C14.1899 8.10173 13.5245 8.16308 12.9179 8.40842L11.6729 7.16259C12.4071 6.74176 13.2571 6.50009 14.1646 6.50009C14.1646 5.73714 13.9551 4.98884 13.559 4.33679C13.1629 3.68473 12.5953 3.15396 11.9182 2.80235C11.2411 2.45073 10.4805 2.29177 9.71923 2.34281C8.95799 2.39384 8.22538 2.65291 7.60127 3.09176L6.40961 1.90009C7.43392 1.09887 8.69749 0.664571 9.99794 0.666756Z",
+    );
+    cloudIconPath.setAttribute("fill", "#696B76");
+    cloudIcon.appendChild(cloudIconPath);
+    boardName.appendChild(cloudIcon);
+    boardName.style.display = "flex";
+    boardName.style.alignItems = "center";
+    boardName.style.gap = "8px";
+    titlePanel.appendChild(boardName);
+    titlePanel.appendChild(separator);
+    titlePanel.appendChild(editButton);
+    document.body.appendChild(titlePanel);
+
+    editButton.onclick = async () => {
+        editButton.disabled = true;
+        editButton.textContent = "Loading...";
+
+        try {
+            document.removeEventListener("mousedown", handleMouseDown);
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+            document.removeEventListener("wheel", handleWheel, {
+                passive: false,
+            });
+            translateX = 0;
+            translateY = 0;
+            scale = 1;
+            updateTransform();
+
+            const { initBrowserSettings } = await import(
+                "https://www.unpkg.com/test_package_board@0.0.99/dist/bundle.js"
+                );
+            initBrowserSettings();
+
+            const { createApp } = await import(
+                "https://www.unpkg.com/test_package_board@0.0.99/dist/bundle.js"
+                );
+
+            const app = createApp();
+            window.app = app;
+            const stringed = await app.openAndEditFile();
+
+            if (stringed) {
+                await app.openBoardFromFile();
+                app.getBoard().deserializeHTML(stringed);
+                app.localRender("items");
+            }
+
+            const response = await fetch(
+                "https://www.unpkg.com/test_package_board@0.0.99/dist/bundle.css",
+            );
+            const cssText = await response.text();
+            const styleEl = document.createElement("style");
+            styleEl.textContent = cssText;
+            document.body.appendChild(styleEl);
+
+            const responseSvg = await fetch(
+                "https://www.unpkg.com/test_package_board@0.0.99/dist/sprite.svg",
+            );
+            const svgText = await responseSvg.text();
+            const div = document.createElement("div");
+            div.style.display = "none";
+            div.id = "sprite";
+            div.innerHTML = svgText;
+            document.body.appendChild(div);
+        } finally {
+            editButton.disabled = false;
+            editButton.textContent = "Edit board";
+        }
+    };
+});
+`;
+
+// src/public/loadLinkImages.js
+var loadLinkImages_default = `document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll(".link-object").forEach(linkItem => {
+        const linkImage = linkItem.querySelector(".link-image");
+        const linkContainer = linkItem.querySelector("a");
+        linkImage.onerror = () => {
+            linkImage.onerror = null;
+            linkImage.style.display = "none";
+            const svgNamespace = "http://www.w3.org/2000/svg";
+            const svg = document.createElementNS(svgNamespace, "svg");
+            svg.setAttribute("width", "20");
+            svg.setAttribute("height", "20");
+            svg.setAttribute("viewBox", "0 0 13 14");
+            svg.setAttribute("fill", "none");
+
+            const path = document.createElementNS(svgNamespace, "path");
+            path.setAttribute(
+                "d",
+                "M11.0054 3.414L2.39838 12.021L0.984375 10.607L9.59037 2H2.00538V0H13.0054V11H11.0054V3.414Z",
+            );
+            path.setAttribute("fill", "#924FE8");
+            svg.appendChild(path);
+
+            linkContainer.appendChild(svg);
+        };
+    });
+});
+`;
+
+// src/public/index.css
+var public_default = `@import "https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap";
+
+/* ../src/index.css */
+:root {
+    --background-surface-default: rgb(255, 255, 255);
+    --background-button-secondary: rgb(255, 255, 255);
+    --background-button-secondary-hover: rgb(247, 247, 248);
+    --background-badge-purple-disabled: rgb(247, 241, 253);
+    --background-badge-gray: rgb(233, 234, 236);
+    --background-accent-purple: rgb(146, 79, 232);
+    --border-action-normal: rgb(222, 223, 227);
+    --border-action-focus: rgb(146, 79, 232);
+    --border-select-primary: rgb(146, 79, 232);
+    --text-base-primary: rgb(20, 21, 26);
+    --text-base-secondary: rgba(15, 19, 36, 0.6);
+    --text-base-quaternary: rgb(10, 15, 41, 0.25);
+    --text-accent-purple: rgb(152, 89, 233);
+    --icon-base-primary: rgb(20, 21, 26);
+    --icon-base-secondary: rgb(105, 107, 118);
+    --icon-accent-purple: rgb(146, 79, 232);
+    --absolute-position-panel-padding: 12px;
+}
+* {
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    border: none;
+    background: none;
+    font-family: inherit;
+}
+html {
+    font-size: 62.5%;
+}
+body {
+    color: var(--text-base-primary);
+    font-size: 1.6rem;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-family: "Manrope", sans-serif;
+}
+html,
+body {
+    overscroll-behavior-x: none;
+    -webkit-user-select: none;
+}
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+    -webkit-box-shadow: 0 0 0 30px white inset !important;
+}
+`;
+
 // src/Board.ts
 class Board {
   boardId;
@@ -52314,9 +52763,9 @@ class Board {
     return this.copy();
   }
   serializeHTML() {
-    const customTagsScript = CUSTOM_WEB_COMPONENTS_JS;
-    const loadLinksImagesScript = LOAD_LINKS_IMAGES_JS;
-    const css = INDEX_CSS;
+    const customTagsScript = customWebComponents_default;
+    const loadLinksImagesScript = loadLinkImages_default;
+    const css = public_default;
     const boardName = this.getName() || this.getBoardId();
     const items = this.items.getWholeHTML(conf.documentFactory);
     const itemsDiv = `<div id="items">${items}</div>`;