microboard-temp 0.14.17 → 0.14.18

package/dist/cjs/node.js

@@ -1676,6 +1676,11 @@ __export(exports_node, {
   toFiniteNumber: () => toFiniteNumber,
   tempStorage: () => tempStorage,
   tagByType: () => tagByType,
+  symbolIcon: () => symbolIcon,
+  styleStrokeIcon: () => styleStrokeIcon,
+  styleFontSizeIcon: () => styleFontSizeIcon,
+  styleFillIcon: () => styleFillIcon,
+  styleColorIcon: () => styleColorIcon,
   stickerColors: () => stickerColors,
   srgbChannelToLinear: () => srgbChannelToLinear,
   sha256: () => sha256,
@@ -1802,6 +1807,7 @@ __export(exports_node, {
   PRESENCE_CURSOR_THROTTLE: () => PRESENCE_CURSOR_THROTTLE,
   PRESENCE_CLEANUP_USER_TIMER: () => PRESENCE_CLEANUP_USER_TIMER,
   PRESENCE_CLEANUP_IDLE_TIMER: () => PRESENCE_CLEANUP_IDLE_TIMER,
+  OVERLAY_SYMBOL_KEYS: () => OVERLAY_SYMBOL_KEYS,
   MiroItemConverter: () => MiroItemConverter,
   Mbr: () => Mbr,
   Matrix: () => Matrix,
@@ -12747,6 +12753,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 = {};
@@ -40279,7 +40307,7 @@ var richTextOverlay = {
     {
       id: "text.fontSize",
       label: "Font size",
-      icon: { kind: "symbol", key: "text.fontSize" },
+      icon: styleFontSizeIcon(),
       target: "each",
       controls: [
         {
@@ -46709,12 +46737,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}`,
@@ -46725,13 +46753,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 = [
   {
@@ -46786,7 +46814,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" }
@@ -46845,7 +46873,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" }
@@ -46857,21 +46885,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)
         }
       ]
@@ -46898,7 +46926,7 @@ var addConnectorToolOverlay = {
       {
         id: "connectorToolStyle",
         label: "Connector defaults",
-        icon: symbolIcon("connector.style"),
+        icon: symbolIcon2("connector.style"),
         controlIds: connectorToolControls.map((control) => control.id)
       }
     ]
@@ -61045,7 +61073,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") },
@@ -61055,48 +61083,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",
@@ -61119,14 +61147,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,
@@ -61177,7 +61201,7 @@ var shapeOverlay = {
     {
       id: "shape.shapeType",
       label: "Shape type",
-      icon: symbolIcon2("shape.type"),
+      icon: symbolIcon3("shape.type"),
       target: "each",
       controls: [shapeTypeControl]
     },
@@ -61191,14 +61215,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)
         }
       ]
@@ -66572,11 +66596,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: [
         {

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: [
         {
@@ -44032,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}`,
@@ -44048,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 = [
   {
@@ -44109,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" }
@@ -44168,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" }
@@ -44180,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)
         }
       ]
@@ -44221,7 +44243,7 @@ var addConnectorToolOverlay = {
       {
         id: "connectorToolStyle",
         label: "Connector defaults",
-        icon: symbolIcon("connector.style"),
+        icon: symbolIcon2("connector.style"),
         controlIds: connectorToolControls.map((control) => control.id)
       }
     ]
@@ -58367,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") },
@@ -58377,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",
@@ -58441,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,
@@ -58499,7 +58517,7 @@ var shapeOverlay = {
     {
       id: "shape.shapeType",
       label: "Shape type",
-      icon: symbolIcon2("shape.type"),
+      icon: symbolIcon3("shape.type"),
       target: "each",
       controls: [shapeTypeControl]
     },
@@ -58513,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)
         }
       ]
@@ -63894,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: [
         {
@@ -75330,6 +75346,11 @@ export {
   toFiniteNumber,
   tempStorage,
   tagByType,
+  symbolIcon,
+  styleStrokeIcon,
+  styleFontSizeIcon,
+  styleFillIcon,
+  styleColorIcon,
   stickerColors,
   srgbChannelToLinear,
   sha256,
@@ -75456,6 +75477,7 @@ export {
   PRESENCE_CURSOR_THROTTLE,
   PRESENCE_CLEANUP_USER_TIMER,
   PRESENCE_CLEANUP_IDLE_TIMER,
+  OVERLAY_SYMBOL_KEYS,
   MiroItemConverter,
   Mbr,
   Matrix,