microboard-temp 0.14.16 → 0.14.18

package/dist/esm/browser.js

@@ -11498,6 +11498,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 = {};
@@ -37535,7 +37557,7 @@ var richTextOverlay = {
     {
       id: "text.fontSize",
       label: "Font size",
-      icon: { kind: "symbol", key: "text.fontSize" },
+      icon: styleFontSizeIcon(),
       target: "each",
       controls: [
         {
@@ -43841,6 +43863,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);
@@ -43906,6 +43929,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);
@@ -44014,12 +44054,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}`,
@@ -44030,13 +44070,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 = [
   {
@@ -44091,7 +44131,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" }
@@ -44150,7 +44190,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" }
@@ -44162,21 +44202,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)
         }
       ]
@@ -44203,7 +44243,7 @@ var addConnectorToolOverlay = {
       {
         id: "connectorToolStyle",
         label: "Connector defaults",
-        icon: symbolIcon("connector.style"),
+        icon: symbolIcon2("connector.style"),
         controlIds: connectorToolControls.map((control) => control.id)
       }
     ]
@@ -44355,7 +44395,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"
@@ -44400,6 +44440,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;
@@ -44418,6 +44462,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;
@@ -58341,7 +58389,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") },
@@ -58351,48 +58399,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",
@@ -58415,14 +58463,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,
@@ -58473,7 +58517,7 @@ var shapeOverlay = {
     {
       id: "shape.shapeType",
       label: "Shape type",
-      icon: symbolIcon2("shape.type"),
+      icon: symbolIcon3("shape.type"),
       target: "each",
       controls: [shapeTypeControl]
     },
@@ -58487,14 +58531,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)
         }
       ]
@@ -61860,6 +61904,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;
@@ -63865,11 +63912,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: [
         {
@@ -74122,7 +74167,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",
@@ -74137,6 +74185,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 = {
@@ -75006,6 +75065,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;
@@ -75128,6 +75346,11 @@ export {
   toFiniteNumber,
   tempStorage,
   tagByType,
+  symbolIcon,
+  styleStrokeIcon,
+  styleFontSizeIcon,
+  styleFillIcon,
+  styleColorIcon,
   stickerColors,
   srgbChannelToLinear,
   sha256,
@@ -75254,6 +75477,8 @@ export {
   PRESENCE_CURSOR_THROTTLE,
   PRESENCE_CLEANUP_USER_TIMER,
   PRESENCE_CLEANUP_IDLE_TIMER,
+  OVERLAY_SYMBOL_KEYS,
+  MiroItemConverter,
   Mbr,
   Matrix,
   MIN_STROKE_WIDTH,
@@ -75282,6 +75507,7 @@ export {
   Dice,
   DefaultTransformationData,
   DefaultShapeData,
+  DefaultRichTextData,
   DefaultPlaceholderData,
   DefaultImageItemData,
   DefaultGroupData,