microboard-temp 0.14.16 → 0.14.18

package/dist/esm/node.js

@@ -12274,6 +12274,28 @@ function toLocalTransformOp(op, containerMatrix, itemId) {
       return op;
   }
 }
+// src/Overlay/OverlayIcons.ts
+var OVERLAY_SYMBOL_KEYS = {
+  styleFill: "style.fill",
+  styleStroke: "style.stroke",
+  styleColor: "style.color",
+  styleFontSize: "style.fontSize"
+};
+function symbolIcon(key, state) {
+  return state ? { kind: "symbol", key, state } : { kind: "symbol", key };
+}
+function styleFillIcon(state) {
+  return symbolIcon(OVERLAY_SYMBOL_KEYS.styleFill, state);
+}
+function styleStrokeIcon(state) {
+  return symbolIcon(OVERLAY_SYMBOL_KEYS.styleStroke, state);
+}
+function styleColorIcon(state) {
+  return symbolIcon(OVERLAY_SYMBOL_KEYS.styleColor, state);
+}
+function styleFontSizeIcon(state) {
+  return symbolIcon(OVERLAY_SYMBOL_KEYS.styleFontSize, state);
+}
 // src/Overlay/overlayRegistry.ts
 var itemOverlays = {};
 var toolOverlays = {};
@@ -40062,7 +40084,7 @@ var richTextOverlay = {
     {
       id: "text.fontSize",
       label: "Font size",
-      icon: { kind: "symbol", key: "text.fontSize" },
+      icon: styleFontSizeIcon(),
       target: "each",
       controls: [
         {
@@ -46301,6 +46323,7 @@ class Group extends BaseItem {
   transformationRenderBlock = undefined;
   isLockedGroup = false;
   static movingGroupId = null;
+  static reparentingGroupId = null;
   constructor(board, id = "") {
     super(board, id);
     this.index = new SimpleSpatialIndex(this.board.camera, this.board.pointer);
@@ -46366,6 +46389,23 @@ class Group extends BaseItem {
       this.apply(operation);
     }
   }
+  applyAddChildren(childIds) {
+    Group.reparentingGroupId = this.getId();
+    super.applyAddChildren(childIds);
+    Group.reparentingGroupId = null;
+    for (const child of this.index?.listAll() || []) {
+      child.subject.publish(child);
+    }
+  }
+  applyRemoveChildren(childIds) {
+    Group.reparentingGroupId = this.getId();
+    super.applyRemoveChildren(childIds);
+    Group.reparentingGroupId = null;
+    for (const childId of childIds) {
+      const child = this.board.items.getById(childId);
+      child?.subject.publish(child);
+    }
+  }
   setId(id) {
     this.id = id;
     this.transformation.setId(id);
@@ -46474,12 +46514,12 @@ var COLOR_PALETTE = [
   "#118AB2",
   "#7B61FF"
 ];
-var symbolIcon = (key) => ({ kind: "symbol", key });
+var symbolIcon2 = (key) => ({ kind: "symbol", key });
 var lineStyleOptions = ConnectorLineStyles.map((style) => ({
   id: style,
   label: style[0].toUpperCase() + style.slice(1),
   value: style,
-  icon: symbolIcon(`connector.lineStyle.${style}`)
+  icon: symbolIcon2(`connector.lineStyle.${style}`)
 }));
 var lineWidthOptions = ConnectionLineWidths.map((width) => ({
   id: `${width}`,
@@ -46490,13 +46530,13 @@ var pointerOptions = CONNECTOR_POINTER_TYPES.map((pointer) => ({
   id: pointer,
   label: pointer,
   value: pointer,
-  icon: symbolIcon(`connector.pointer.${pointer}`)
+  icon: symbolIcon2(`connector.pointer.${pointer}`)
 }));
 var borderStyleOptions = ["solid", "dot", "dash", "longDash"].map((style) => ({
   id: style,
   label: style,
   value: style,
-  icon: symbolIcon(`stroke.${style}`)
+  icon: symbolIcon2(`stroke.${style}`)
 }));
 var connectorStyleControls = [
   {
@@ -46551,7 +46591,7 @@ var connectorStyleControls = [
   {
     id: "smartJump",
     label: "Smart jump",
-    icon: symbolIcon("connector.smartJump"),
+    icon: symbolIcon2("connector.smartJump"),
     valueSource: { kind: "itemProperty", property: "smartJump" },
     editor: { kind: "toggle", trueLabel: "On", falseLabel: "Off" },
     invoke: { kind: "setProperty", property: "smartJump" }
@@ -46610,7 +46650,7 @@ var connectorToolControls = [
   {
     id: "toolSmartJump",
     label: "Smart jump",
-    icon: symbolIcon("connector.smartJump"),
+    icon: symbolIcon2("connector.smartJump"),
     valueSource: { kind: "toolProperty", property: "smartJump" },
     editor: { kind: "toggle", trueLabel: "On", falseLabel: "Off" },
     invoke: { kind: "toolProperty", property: "smartJump" }
@@ -46622,21 +46662,21 @@ var connectorOverlay = {
     {
       id: "connector.switchPointers",
       label: "Switch arrows",
-      icon: symbolIcon("connector.switchPointers"),
+      icon: symbolIcon2("connector.switchPointers"),
       target: "selection",
       invoke: { kind: "operation", class: "Connector", method: "switchPointers" }
     },
     {
       id: "connector.style",
       label: "Connector style",
-      icon: symbolIcon("connector.style"),
+      icon: symbolIcon2("connector.style"),
       target: "each",
       controls: connectorStyleControls,
       groups: [
         {
           id: "connectorStyle",
           label: "Connector style",
-          icon: symbolIcon("connector.style"),
+          icon: symbolIcon2("connector.style"),
           controlIds: connectorStyleControls.map((control) => control.id)
         }
       ]
@@ -46663,7 +46703,7 @@ var addConnectorToolOverlay = {
       {
         id: "connectorToolStyle",
         label: "Connector defaults",
-        icon: symbolIcon("connector.style"),
+        icon: symbolIcon2("connector.style"),
         controlIds: connectorToolControls.map((control) => control.id)
       }
     ]
@@ -46815,7 +46855,7 @@ class Connector2 extends BaseItem {
     }
     this.text = new RichText(this.board, this.id);
     this.text.container = this.getMbr();
-    this.text.transformation = new Transformation;
+    this.text.transformation = this.transformation;
     this.text.linkTo = this.linkTo;
     this.text.placeholderText = conf.i18n.t("connector.textPlaceholder", {
       ns: "default"
@@ -46860,6 +46900,10 @@ class Connector2 extends BaseItem {
   observerStartPointItem = () => {
     const point3 = this.startPoint;
     if (point3.pointType !== "Board") {
+      const reparentingGroupId = Group.reparentingGroupId;
+      if (reparentingGroupId !== null && (this.parent === reparentingGroupId || point3.item instanceof BaseItem && point3.item.parent === reparentingGroupId)) {
+        return;
+      }
       const movingGroupId = Group.movingGroupId;
       if (movingGroupId !== null && this.parent === movingGroupId && point3.item instanceof BaseItem && point3.item.parent === movingGroupId) {
         return;
@@ -46878,6 +46922,10 @@ class Connector2 extends BaseItem {
   observerEndPointItem = () => {
     const point3 = this.endPoint;
     if (point3.pointType !== "Board") {
+      const reparentingGroupId = Group.reparentingGroupId;
+      if (reparentingGroupId !== null && (this.parent === reparentingGroupId || point3.item instanceof BaseItem && point3.item.parent === reparentingGroupId)) {
+        return;
+      }
       const movingGroupId = Group.movingGroupId;
       if (movingGroupId !== null && this.parent === movingGroupId && point3.item instanceof BaseItem && point3.item.parent === movingGroupId) {
         return;
@@ -60802,7 +60850,7 @@ var inlineShapeAsset = (folder, file2 = folder) => ({
   path: `src/Items/Shape/Basic/${folder}/${file2}.icon.svg`,
   mimeType: "image/svg+xml"
 });
-var symbolIcon2 = (key) => ({ kind: "symbol", key });
+var symbolIcon3 = (key) => ({ kind: "symbol", key });
 var BASIC_INLINE_OPTIONS = [
   { id: "rectangle", label: "Rectangle", value: "Rectangle", icon: inlineShapeAsset("Rectangle") },
   { id: "rounded-rectangle", label: "Rounded rectangle", value: "RoundedRectangle", icon: inlineShapeAsset("RoundedRectangle") },
@@ -60812,48 +60860,48 @@ var BASIC_INLINE_OPTIONS = [
 ];
 var SHAPE_CATALOG_OPTIONS = [
   ...BASIC_INLINE_OPTIONS,
-  { id: "reversed-triangle", label: "Reversed triangle", value: "ReversedTriangle", icon: symbolIcon2("shape.reversedTriangle") },
+  { id: "reversed-triangle", label: "Reversed triangle", value: "ReversedTriangle", icon: symbolIcon3("shape.reversedTriangle") },
   { id: "arrow-left", label: "Arrow left", value: "ArrowLeft", icon: inlineShapeAsset("ArrowLeft") },
   { id: "arrow-right", label: "Arrow right", value: "ArrowRight", icon: inlineShapeAsset("ArrowRight") },
   { id: "arrow-left-right", label: "Arrow left right", value: "ArrowLeftRight", icon: inlineShapeAsset("ArrowLeftRight") },
-  { id: "arrow-block-left", label: "Arrow block left", value: "ArrowBlockLeft", icon: symbolIcon2("shape.arrowBlockLeft") },
-  { id: "arrow-block-right", label: "Arrow block right", value: "ArrowBlockRight", icon: symbolIcon2("shape.arrowBlockRight") },
+  { id: "arrow-block-left", label: "Arrow block left", value: "ArrowBlockLeft", icon: symbolIcon3("shape.arrowBlockLeft") },
+  { id: "arrow-block-right", label: "Arrow block right", value: "ArrowBlockRight", icon: symbolIcon3("shape.arrowBlockRight") },
   { id: "cloud", label: "Cloud", value: "Cloud", icon: inlineShapeAsset("Cloud") },
   { id: "cross", label: "Cross", value: "Cross", icon: inlineShapeAsset("Cross") },
   { id: "cylinder", label: "Cylinder", value: "Cylinder", icon: inlineShapeAsset("Cylinder") },
   { id: "hexagon", label: "Hexagon", value: "Hexagon", icon: inlineShapeAsset("Hexagon") },
   { id: "octagon", label: "Octagon", value: "Octagon", icon: inlineShapeAsset("Octagon") },
   { id: "parallelogram", label: "Parallelogram", value: "Parallelogram", icon: inlineShapeAsset("Parallelogram") },
-  { id: "reversed-parallelogram", label: "Reversed parallelogram", value: "ReversedParallelogram", icon: symbolIcon2("shape.reversedParallelogram") },
+  { id: "reversed-parallelogram", label: "Reversed parallelogram", value: "ReversedParallelogram", icon: symbolIcon3("shape.reversedParallelogram") },
   { id: "pentagon", label: "Pentagon", value: "Pentagon", icon: inlineShapeAsset("Pentagon") },
-  { id: "predefined-process", label: "Predefined process", value: "PredefinedProcess", icon: symbolIcon2("shape.predefinedProcess") },
+  { id: "predefined-process", label: "Predefined process", value: "PredefinedProcess", icon: symbolIcon3("shape.predefinedProcess") },
   { id: "speech-bubble", label: "Speech bubble", value: "SpeachBubble", icon: inlineShapeAsset("SpeachBubble") },
   { id: "star", label: "Star", value: "Star", icon: inlineShapeAsset("Star") },
   { id: "trapezoid", label: "Trapezoid", value: "Trapezoid", icon: inlineShapeAsset("Trapezoid") },
   { id: "braces-left", label: "Braces left", value: "BracesLeft", icon: inlineShapeAsset("BracesLeft", "BracesLeft") },
   { id: "braces-right", label: "Braces right", value: "BracesRight", icon: inlineShapeAsset("BracesRight", "BracesRight") },
-  { id: "bpmn-task", label: "BPMN task", value: "BPMN_Task", icon: symbolIcon2("shape.bpmn.task") },
-  { id: "bpmn-gateway", label: "BPMN gateway", value: "BPMN_Gateway", icon: symbolIcon2("shape.bpmn.gateway") },
-  { id: "bpmn-gateway-parallel", label: "BPMN gateway parallel", value: "BPMN_GatewayParallel", icon: symbolIcon2("shape.bpmn.gatewayParallel") },
-  { id: "bpmn-gateway-xor", label: "BPMN gateway XOR", value: "BPMN_GatewayXOR", icon: symbolIcon2("shape.bpmn.gatewayXor") },
-  { id: "bpmn-start-event", label: "BPMN start event", value: "BPMN_StartEvent", icon: symbolIcon2("shape.bpmn.startEvent") },
-  { id: "bpmn-start-event-non-interrupting", label: "BPMN start event non interrupting", value: "BPMN_StartEventNoneInterrupting", icon: symbolIcon2("shape.bpmn.startEventNoneInterrupting") },
-  { id: "bpmn-end-event", label: "BPMN end event", value: "BPMN_EndEvent", icon: symbolIcon2("shape.bpmn.endEvent") },
-  { id: "bpmn-intermediate-event", label: "BPMN intermediate event", value: "BPMN_IntermediateEvent", icon: symbolIcon2("shape.bpmn.intermediateEvent") },
-  { id: "bpmn-intermediate-event-none-interrupting", label: "BPMN intermediate event none interrupting", value: "BPMN_IntermediateEventNoneInterrupting", icon: symbolIcon2("shape.bpmn.intermediateEventNoneInterrupting") },
-  { id: "bpmn-data-object", label: "BPMN data object", value: "BPMN_DataObject", icon: symbolIcon2("shape.bpmn.dataObject") },
-  { id: "bpmn-data-store", label: "BPMN data store", value: "BPMN_DataStore", icon: symbolIcon2("shape.bpmn.dataStore") },
-  { id: "bpmn-participant", label: "BPMN participant", value: "BPMN_Participant", icon: symbolIcon2("shape.bpmn.participant") },
-  { id: "bpmn-transaction", label: "BPMN transaction", value: "BPMN_Transaction", icon: symbolIcon2("shape.bpmn.transaction") },
-  { id: "bpmn-event-subprocess", label: "BPMN event subprocess", value: "BPMN_EventSubprocess", icon: symbolIcon2("shape.bpmn.eventSubprocess") },
-  { id: "bpmn-group", label: "BPMN group", value: "BPMN_Group", icon: symbolIcon2("shape.bpmn.group") },
-  { id: "bpmn-annotation", label: "BPMN annotation", value: "BPMN_Annotation", icon: symbolIcon2("shape.bpmn.annotation") }
+  { id: "bpmn-task", label: "BPMN task", value: "BPMN_Task", icon: symbolIcon3("shape.bpmn.task") },
+  { id: "bpmn-gateway", label: "BPMN gateway", value: "BPMN_Gateway", icon: symbolIcon3("shape.bpmn.gateway") },
+  { id: "bpmn-gateway-parallel", label: "BPMN gateway parallel", value: "BPMN_GatewayParallel", icon: symbolIcon3("shape.bpmn.gatewayParallel") },
+  { id: "bpmn-gateway-xor", label: "BPMN gateway XOR", value: "BPMN_GatewayXOR", icon: symbolIcon3("shape.bpmn.gatewayXor") },
+  { id: "bpmn-start-event", label: "BPMN start event", value: "BPMN_StartEvent", icon: symbolIcon3("shape.bpmn.startEvent") },
+  { id: "bpmn-start-event-non-interrupting", label: "BPMN start event non interrupting", value: "BPMN_StartEventNoneInterrupting", icon: symbolIcon3("shape.bpmn.startEventNoneInterrupting") },
+  { id: "bpmn-end-event", label: "BPMN end event", value: "BPMN_EndEvent", icon: symbolIcon3("shape.bpmn.endEvent") },
+  { id: "bpmn-intermediate-event", label: "BPMN intermediate event", value: "BPMN_IntermediateEvent", icon: symbolIcon3("shape.bpmn.intermediateEvent") },
+  { id: "bpmn-intermediate-event-none-interrupting", label: "BPMN intermediate event none interrupting", value: "BPMN_IntermediateEventNoneInterrupting", icon: symbolIcon3("shape.bpmn.intermediateEventNoneInterrupting") },
+  { id: "bpmn-data-object", label: "BPMN data object", value: "BPMN_DataObject", icon: symbolIcon3("shape.bpmn.dataObject") },
+  { id: "bpmn-data-store", label: "BPMN data store", value: "BPMN_DataStore", icon: symbolIcon3("shape.bpmn.dataStore") },
+  { id: "bpmn-participant", label: "BPMN participant", value: "BPMN_Participant", icon: symbolIcon3("shape.bpmn.participant") },
+  { id: "bpmn-transaction", label: "BPMN transaction", value: "BPMN_Transaction", icon: symbolIcon3("shape.bpmn.transaction") },
+  { id: "bpmn-event-subprocess", label: "BPMN event subprocess", value: "BPMN_EventSubprocess", icon: symbolIcon3("shape.bpmn.eventSubprocess") },
+  { id: "bpmn-group", label: "BPMN group", value: "BPMN_Group", icon: symbolIcon3("shape.bpmn.group") },
+  { id: "bpmn-annotation", label: "BPMN annotation", value: "BPMN_Annotation", icon: symbolIcon3("shape.bpmn.annotation") }
 ];
 var BORDER_STYLE_OPTIONS = [
-  { id: "solid", label: "Solid", value: "solid", icon: symbolIcon2("stroke.solid") },
-  { id: "dot", label: "Dot", value: "dot", icon: symbolIcon2("stroke.dot") },
-  { id: "dash", label: "Dash", value: "dash", icon: symbolIcon2("stroke.dash") },
-  { id: "long-dash", label: "Long dash", value: "longDash", icon: symbolIcon2("stroke.longDash") }
+  { id: "solid", label: "Solid", value: "solid", icon: symbolIcon3("stroke.solid") },
+  { id: "dot", label: "Dot", value: "dot", icon: symbolIcon3("stroke.dot") },
+  { id: "dash", label: "Dash", value: "dash", icon: symbolIcon3("stroke.dash") },
+  { id: "long-dash", label: "Long dash", value: "longDash", icon: symbolIcon3("stroke.longDash") }
 ];
 var shapeTypeControl = {
   id: "shapeType",
@@ -60876,14 +60924,10 @@ var fillControl = {
   id: "backgroundColor",
   label: "Fill",
   valueSource: { kind: "itemProperty", property: "backgroundColor" },
-  icon: {
-    kind: "symbol",
-    key: "shape.fill",
-    state: {
-      swatch: { kind: "itemProperty", property: "backgroundColor" },
-      note: "UI can render the current fill color as a swatch inside the icon."
-    }
-  },
+  icon: styleFillIcon({
+    swatch: { kind: "itemProperty", property: "backgroundColor" },
+    note: "UI can render the current fill color as a swatch inside the icon."
+  }),
   editor: {
     kind: "color",
     palette: COLOR_PALETTE2,
@@ -60934,7 +60978,7 @@ var shapeOverlay = {
     {
       id: "shape.shapeType",
       label: "Shape type",
-      icon: symbolIcon2("shape.type"),
+      icon: symbolIcon3("shape.type"),
       target: "each",
       controls: [shapeTypeControl]
     },
@@ -60948,14 +60992,14 @@ var shapeOverlay = {
     {
       id: "shape.strokeStyle",
       label: "Stroke style",
-      icon: symbolIcon2("shape.stroke"),
+      icon: styleStrokeIcon(),
       target: "each",
       controls: strokeControls,
       groups: [
         {
           id: "shapeStrokeStyle",
           label: "Stroke style",
-          icon: symbolIcon2("shape.stroke"),
+          icon: styleStrokeIcon(),
           controlIds: strokeControls.map((control) => control.id)
         }
       ]
@@ -64321,6 +64365,9 @@ class AINode extends BaseItem {
   getLinkTo() {
     return this.linkTo.link;
   }
+  getRichText() {
+    return this.text;
+  }
   renderButton(context) {
     const { left, right, top, bottom } = this.buttonMbr;
     const { ctx } = context;
@@ -66326,11 +66373,9 @@ var diceOverlay = {
     {
       id: "dice.fill",
       label: "Fill",
-      icon: {
-        kind: "symbol",
-        key: "shape.fill",
-        state: { swatch: { kind: "itemProperty", property: "backgroundColor" } }
-      },
+      icon: styleFillIcon({
+        swatch: { kind: "itemProperty", property: "backgroundColor" }
+      }),
       target: "each",
       controls: [
         {
@@ -76583,7 +76628,10 @@ class Board {
     return parseHTML(el);
   }
   add(item, timeStamp) {
-    const id = this.getNewItemId();
+    const id = item.getId() || this.getNewItemId();
+    if (!item.getId()) {
+      item.setId(id);
+    }
     this.emit({
       class: "Board",
       method: "add",
@@ -76598,6 +76646,17 @@ class Board {
     this.handleNesting(newItem);
     return newItem;
   }
+  createItemAndAdd(itemType, data, timeStamp) {
+    const id = data.id || this.getNewItemId();
+    const fullData = { ...data, itemType, id };
+    const item = this.createItem(id, fullData);
+    if (item.itemType === "Connector" && data.startPoint && data.endPoint) {
+      const conn = item;
+      conn.apply({ class: "Connector", method: "setStartPoint", startPointData: data.startPoint });
+      conn.apply({ class: "Connector", method: "setEndPoint", endPointData: data.endPoint });
+    }
+    return this.add(item, timeStamp);
+  }
   addLockedGroup(items) {
     const id = this.getNewItemId();
     const groupData = {
@@ -77467,6 +77526,165 @@ function validateTransformationData(transformationData) {
 function validatePointData(pointData) {
   return PointSchema.safeParse(pointData).success;
 }
+// src/Import/Miro/MiroItemConverter.ts
+var SHAPE_TYPES = {
+  round_rectangle: "RoundedRectangle",
+  circle: "Circle",
+  triangle: "Triangle",
+  rhombus: "Rhombus",
+  wedge_round_rectangle_callout: "SpeachBubble",
+  parallelogram: "Parallelogram",
+  star: "Star",
+  right_arrow: "ArrowRight",
+  left_arrow: "ArrowLeft",
+  rectangle: "Rectangle",
+  left_right_arrow: "ArrowLeftRight",
+  pentagon: "Pentagon",
+  octagon: "Octagon",
+  hexagon: "Hexagon",
+  flow_chart_predefined_process: "PredefinedProcess",
+  trapezoid: "Trapezoid",
+  cloud: "Cloud",
+  cross: "Cross",
+  can: "Cylinder",
+  left_brace: "BracesRight",
+  right_brace: "BracesLeft"
+};
+var BORDER_STYLES = {
+  normal: "solid",
+  dotted: "dot",
+  dashed: "dash"
+};
+var STICKER_COLOR_MAP = {
+  dark_blue: 2,
+  blue: 2,
+  light_blue: 3,
+  red: 1,
+  orange: 6,
+  violet: 0,
+  pink: 1,
+  light_pink: 1,
+  cyan: 5,
+  dark_green: 4,
+  green: 4,
+  light_green: 4,
+  yellow: 7,
+  light_yellow: 7,
+  gray: 8,
+  black: 9
+};
+var FRAME_TYPES2 = {
+  custom: "Custom",
+  a4: "A4",
+  letter: "Letter",
+  ratio_16x9: "Frame16x9",
+  ratio_4x3: "Frame4x3",
+  ratio_1x1: "Frame1x1",
+  phone: "Custom",
+  tablet: "Custom",
+  desktop: "Custom"
+};
+var CONNECTOR_LINE_STYLES = {
+  straight: "straight",
+  curved: "curved",
+  elbowed: "orthogonal"
+};
+var CONNECTOR_POINTER_STYLES = {
+  stealth: "ArrowBroad",
+  "Arc Arrow": "ArrowThin",
+  filled_triangle: "Angle",
+  arrow: "ArrowThin",
+  triangle: "TriangleEmpty",
+  filled_diamond: "DiamondFilled",
+  diamond: "DiamondEmpty",
+  filled_oval: "CircleFilled",
+  oval: "Zero",
+  erd_one: "One",
+  erd_many: "Many",
+  erd_one_or_many: "ManyMandatory",
+  erd_only_one: "OneMandatory",
+  erd_zero_or_many: "ManyOptional",
+  erd_zero_or_one: "OneOptional"
+};
+
+class MiroItemConverter {
+  static convert(miroItem) {
+    const { type, style: style2, data, geometry, position: position4, id, linkTo, parent } = miroItem;
+    const baseData = {
+      id,
+      parent: parent?.id || "Board",
+      linkTo
+    };
+    switch (type) {
+      case "shape":
+        return {
+          ...baseData,
+          itemType: "Shape",
+          shapeType: SHAPE_TYPES[data?.shape] || "Rectangle",
+          backgroundColor: MiroItemConverter.convertColor(style2?.fillColor, "transparent"),
+          backgroundOpacity: style2?.fillOpacity ? parseFloat(style2.fillOpacity) : 1,
+          borderColor: MiroItemConverter.convertColor(style2?.borderColor),
+          borderOpacity: style2?.borderOpacity ? parseFloat(style2.borderOpacity) : 1,
+          borderStyle: BORDER_STYLES[style2?.borderStyle || "normal"] || "solid",
+          borderWidth: style2?.borderWidth ? parseFloat(style2.borderWidth) : 2
+        };
+      case "sticky_note":
+        const colorIdx = STICKER_COLOR_MAP[style2?.fillColor || "yellow"] ?? 7;
+        return {
+          ...baseData,
+          itemType: "Sticker",
+          backgroundColor: coerceColorValue(conf.STICKER_COLORS[colorIdx])
+        };
+      case "text":
+        return {
+          ...baseData,
+          itemType: "RichText"
+        };
+      case "frame":
+        return {
+          ...baseData,
+          itemType: "Frame",
+          title: data?.title || "Frame",
+          frameType: FRAME_TYPES2[data?.format] || "Custom",
+          backgroundColor: MiroItemConverter.convertColor(style2?.fillColor)
+        };
+      case "connector":
+        return {
+          ...baseData,
+          itemType: "Connector",
+          lineColor: MiroItemConverter.convertColor(style2?.strokeColor),
+          lineStyle: CONNECTOR_LINE_STYLES[miroItem.shape || "straight"] || "straight",
+          lineWidth: style2?.strokeWidth ? parseFloat(style2.strokeWidth) : 1,
+          startPointerStyle: CONNECTOR_POINTER_STYLES[style2?.startStrokeCap || ""] || "None",
+          endPointerStyle: CONNECTOR_POINTER_STYLES[style2?.endStrokeCap || ""] || "ArrowThin"
+        };
+      case "image":
+        return {
+          ...baseData,
+          itemType: "Image"
+        };
+      case "paint":
+        return {
+          ...baseData,
+          itemType: "Drawing",
+          strokeColor: MiroItemConverter.convertColor(style2?.color),
+          strokeWidth: style2?.strokeWidth ? parseFloat(style2.strokeWidth) : 2,
+          strokeOpacity: style2?.strokeOpacity ?? 1
+        };
+      default:
+        return {
+          ...baseData,
+          itemType: "Placeholder"
+        };
+    }
+  }
+  static convertColor(color2, fallback = "black") {
+    if (!color2)
+      return coerceColorValue(fallback);
+    const hex3 = color2 === "#ffffff" ? "transparent" : color2;
+    return coerceColorValue(hex3);
+  }
+}
 // src/api/initI18N.ts
 function initI18N(i18nInstance) {
   conf.i18n = i18nInstance;
@@ -77661,6 +77879,11 @@ export {
   toFiniteNumber,
   tempStorage,
   tagByType,
+  symbolIcon,
+  styleStrokeIcon,
+  styleFontSizeIcon,
+  styleFillIcon,
+  styleColorIcon,
   stickerColors,
   srgbChannelToLinear,
   sha256,
@@ -77787,6 +78010,8 @@ export {
   PRESENCE_CURSOR_THROTTLE,
   PRESENCE_CLEANUP_USER_TIMER,
   PRESENCE_CLEANUP_IDLE_TIMER,
+  OVERLAY_SYMBOL_KEYS,
+  MiroItemConverter,
   Mbr,
   Matrix,
   MIN_STROKE_WIDTH,
@@ -77815,6 +78040,7 @@ export {
   Dice,
   DefaultTransformationData,
   DefaultShapeData,
+  DefaultRichTextData,
   DefaultPlaceholderData,
   DefaultImageItemData,
   DefaultGroupData,

package/dist/types/Board.d.ts

@@ -86,6 +86,11 @@ export declare class Board {
         };
     };
     add<T extends Item>(item: T, timeStamp?: number): T;
+    /**
+     * High-level method to create and add an item in one step.
+     * Useful for UI components and converters.
+     */
+    createItemAndAdd<T extends Item>(itemType: string, data: Partial<ItemData>, timeStamp?: number): T;
     addLockedGroup(items: BaseItem[]): Group;
     remove(item: Item, withConnectors?: boolean): void;
     removeLockedGroup(item: Group): void;

package/dist/types/Import/Miro/MiroItemConverter.d.ts

@@ -0,0 +1,43 @@
+export interface MiroGeometry {
+    width: number;
+    height: number;
+}
+export interface MiroPosition {
+    x: number;
+    y: number;
+    relativeTo: string;
+}
+export interface MiroStyle {
+    fillColor?: string;
+    fillOpacity?: string;
+    borderColor?: string;
+    borderOpacity?: string;
+    borderStyle?: string;
+    borderWidth?: string;
+    color?: string;
+    fontSize?: string;
+    textAlign?: string;
+    textAlignVertical?: string;
+    strokeColor?: string;
+    strokeOpacity?: number;
+    strokeWidth?: string;
+    startStrokeCap?: string;
+    endStrokeCap?: string;
+}
+export interface MiroItem {
+    id: string;
+    type: string;
+    shape?: string;
+    data?: any;
+    style?: MiroStyle;
+    geometry?: MiroGeometry;
+    position?: MiroPosition;
+    parent?: {
+        id: string;
+    };
+    linkTo?: string;
+}
+export declare class MiroItemConverter {
+    static convert(miroItem: MiroItem): any;
+    private static convertColor;
+}

package/dist/types/Items/AINode/AINode.d.ts

@@ -44,6 +44,7 @@ export declare class AINode extends BaseItem<AINode> {
     getPath(): Path | Paths;
     apply(op: Operation): void;
     getLinkTo(): string | undefined;
+    getRichText(): RichText;
     renderButton(context: DrawingContext): void;
     render(context: DrawingContext): void;
     getPrevMbr(): Mbr | null;

package/dist/types/Items/Dice/DiceOverlay.d.ts

@@ -1,3 +1,3 @@
-import type { ItemOverlayDefinition, ToolOverlayDefinition } from "../../Overlay";
+import { type ItemOverlayDefinition, type ToolOverlayDefinition } from "../../Overlay";
 export declare const diceOverlay: ItemOverlayDefinition;
 export declare const addDiceToolOverlay: ToolOverlayDefinition;

package/dist/types/Items/Group/Group.d.ts

@@ -28,6 +28,7 @@ export declare class Group extends BaseItem<Group> {
      * via recalculatePoint) and avoid persisting spurious setStartPoint/setEndPoint ops.
      */
     static movingGroupId: string | null;
+    static reparentingGroupId: string | null;
     constructor(board: Board, id?: string);
     isClosed(): boolean;
     getRichText(): null;
@@ -35,6 +36,8 @@ export declare class Group extends BaseItem<Group> {
     protected updateVisuals(op: Operation, hint: UpdateHint): void;
     protected getPropertyUpdateHint(property: string): UpdateHint;
     emit(operation: GroupOperation): void;
+    applyAddChildren(childIds: string[]): void;
+    applyRemoveChildren(childIds: string[]): void;
     setId(id: string): this;
     getMbr(): Mbr;
     updateMbr(): void;

package/dist/types/Items/Image/Image.d.ts

@@ -27,6 +27,7 @@ export interface ImageConstructorData {
     base64?: string;
     storageLink: string;
     imageDimension: Dimension;
+    [key: string]: unknown;
 }
 export declare class ImageItem extends BaseItem<ImageItem> {
     readonly itemType = "Image";

package/dist/types/Items/RichText/RichTextOverlay.d.ts

@@ -1,3 +1,3 @@
-import type { ItemOverlayDefinition, ToolOverlayDefinition } from "../../Overlay";
+import { type ItemOverlayDefinition, type ToolOverlayDefinition } from "../../Overlay";
 export declare const richTextOverlay: ItemOverlayDefinition;
 export declare const addTextToolOverlay: ToolOverlayDefinition;

package/dist/types/Items/RichText/index.d.ts

@@ -3,6 +3,7 @@ export type { RichTextOperation } from "./RichTextOperations";
 export type { TextStyle, TextNode } from "./Editor/TextNode";
 export type { BlockNode, ListType } from "./Editor/BlockNode";
 export type { RichTextData } from "./RichTextData";
+export { DefaultRichTextData } from "./RichTextData";
 export { transformHtmlOrTextToMarkdown } from "./transformHtmlToMarkdown";
 export { getSlateSelectionRect } from "./getSlateSelectionRect";
 export { EditorContainer } from "./EditorContainer";