microboard-temp 0.14.44 → 0.14.46

package/dist/cjs/browser.js

@@ -649,6 +649,7 @@ __export(exports_browser, {
   sha256: () => sha256,
   semanticColor: () => semanticColor,
   selectionActions: () => selectionActions,
+  selectionActionSections: () => selectionActionSections,
   scalePatterns: () => scalePatterns,
   scaleElementBy: () => scaleElementBy,
   rgbToRgba: () => rgbToRgba,
@@ -661,6 +662,7 @@ __export(exports_browser, {
   renderLinkToHTML: () => renderLinkToHTML,
   relativeLuminance: () => relativeLuminance,
   registerToolOverlay: () => registerToolOverlay,
+  registerSelectionActionSection: () => registerSelectionActionSection,
   registerSelectionAction: () => registerSelectionAction,
   registerItemOverlay: () => registerItemOverlay,
   registerItem: () => registerItem,
@@ -683,6 +685,7 @@ __export(exports_browser, {
   matchesOverlayCondition: () => matchesOverlayCondition,
   listToolOverlays: () => listToolOverlays,
   listSelectionActions: () => listSelectionActions,
+  listSelectionActionSections: () => listSelectionActionSections,
   listRegisteredItemTypes: () => listRegisteredItemTypes,
   listCreateSurfaceEntries: () => listCreateSurfaceEntries,
   itemSchemas: () => itemSchemas2,
@@ -11786,6 +11789,7 @@ var itemOverlays = {};
 var toolOverlays = {};
 var dynamicOptionsResolvers = {};
 var selectionActions = {};
+var selectionActionSections = {};
 function registerItemOverlay(overlay) {
   itemOverlays[overlay.itemType] = overlay;
 }
@@ -11795,6 +11799,9 @@ function registerToolOverlay(overlay) {
 function registerSelectionAction(action) {
   selectionActions[action.id] = action;
 }
+function registerSelectionActionSection(section) {
+  selectionActionSections[section.id] = section;
+}
 function registerDynamicOptionsResolver(id, resolver) {
   dynamicOptionsResolvers[id] = resolver;
 }
@@ -11850,6 +11857,9 @@ function listCreateSurfaceEntries() {
 function listSelectionActions() {
   return Object.values(selectionActions);
 }
+function listSelectionActionSections() {
+  return Object.values(selectionActionSections);
+}
 function getSelectionOverlayActions(items) {
   return Object.values(selectionActions).filter((action) => action.isAvailable?.(items) ?? true);
 }
@@ -64886,6 +64896,25 @@ class Shape extends BaseItem {
     this.subject.publish(this);
   }
   onPropertyUpdated(property, value, prevValue) {
+    switch (property) {
+      case "shapeType":
+        this.initPath();
+        break;
+      case "backgroundOpacity":
+        this.path.setBackgroundOpacity(value);
+        break;
+      case "borderOpacity":
+        this.path.setBorderOpacity(value);
+        break;
+      case "borderStyle":
+        this.path.setBorderStyle(value);
+        break;
+      case "borderWidth":
+        this.path.setBorderWidth(value);
+        break;
+      default:
+        break;
+    }
     super.onPropertyUpdated(property, value, prevValue);
     this.saveShapeData();
   }
@@ -73913,12 +73942,39 @@ class Presence {
 function everyItemHasRichText(items) {
   return items.length > 0 && items.every((item) => !!item.getRichText?.());
 }
+registerSelectionActionSection({
+  id: "selectionTextSize",
+  label: "Text size",
+  actionIds: ["selection.text.fontSize"]
+});
+registerSelectionActionSection({
+  id: "selectionTextColors",
+  label: "Text colors",
+  actionIds: ["selection.text.color", "selection.text.highlight"]
+});
+registerSelectionActionSection({
+  id: "selectionArrange",
+  label: "Arrange",
+  actionIds: ["selection.bringToFront", "selection.sendToBack"]
+});
+registerSelectionActionSection({
+  id: "selectionActions",
+  label: "Actions",
+  actionIds: [
+    "selection.duplicate",
+    "selection.lock",
+    "selection.unlock",
+    "selection.delete"
+  ]
+});
 registerSelectionAction({
   id: "selection.delete",
   label: "Delete",
   icon: symbolIcon("Delete"),
   description: "Removes the selected items from the board.",
   invoke: { kind: "selectionMethod", methodName: "removeFromBoard" },
+  sectionId: "selectionActions",
+  order: 4,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73927,6 +73983,8 @@ registerSelectionAction({
   icon: symbolIcon("Duplicate"),
   description: "Duplicates the selected items.",
   invoke: { kind: "selectionMethod", methodName: "duplicate" },
+  sectionId: "selectionActions",
+  order: 1,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73935,6 +73993,8 @@ registerSelectionAction({
   icon: symbolIcon("unlock"),
   description: "Locks the selected items.",
   invoke: { kind: "selectionMethod", methodName: "lock" },
+  sectionId: "selectionActions",
+  order: 2,
   isAvailable: (items) => items.length > 0 && !items.some((item) => item.transformation.isLocked)
 });
 registerSelectionAction({
@@ -73943,6 +74003,8 @@ registerSelectionAction({
   icon: symbolIcon("lock"),
   description: "Unlocks the selected items.",
   invoke: { kind: "selectionMethod", methodName: "unlock" },
+  sectionId: "selectionActions",
+  order: 2,
   isAvailable: (items) => items.some((item) => item.transformation.isLocked)
 });
 registerSelectionAction({
@@ -73951,6 +74013,8 @@ registerSelectionAction({
   icon: symbolIcon("BringToFront"),
   description: "Moves the selection above overlapping items.",
   invoke: { kind: "selectionMethod", methodName: "bringToFront" },
+  sectionId: "selectionArrange",
+  order: 1,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73959,6 +74023,8 @@ registerSelectionAction({
   icon: symbolIcon("SendToBack"),
   description: "Moves the selection behind overlapping items.",
   invoke: { kind: "selectionMethod", methodName: "sendToBack" },
+  sectionId: "selectionArrange",
+  order: 2,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73966,6 +74032,8 @@ registerSelectionAction({
   label: "Font size",
   icon: styleFontSizeIcon(),
   invoke: { kind: "selectionMethod", methodName: "setFontSize" },
+  sectionId: "selectionTextSize",
+  order: 1,
   controls: [
     {
       id: "fontSize",
@@ -73991,6 +74059,8 @@ registerSelectionAction({
     swatch: { kind: "selectionProperty", property: "getFontColor" }
   }),
   invoke: { kind: "selectionMethod", methodName: "setFontColor" },
+  sectionId: "selectionTextColors",
+  order: 1,
   controls: [
     {
       id: "fontColor",
@@ -74012,6 +74082,8 @@ registerSelectionAction({
     swatch: { kind: "selectionProperty", property: "getFontHighlight" }
   }),
   invoke: { kind: "selectionMethod", methodName: "setFontHighlight" },
+  sectionId: "selectionTextColors",
+  order: 2,
   controls: [
     {
       id: "fontHighlight",

package/dist/cjs/index.js

@@ -649,6 +649,7 @@ __export(exports_src, {
   sha256: () => sha256,
   semanticColor: () => semanticColor,
   selectionActions: () => selectionActions,
+  selectionActionSections: () => selectionActionSections,
   scalePatterns: () => scalePatterns,
   scaleElementBy: () => scaleElementBy,
   rgbToRgba: () => rgbToRgba,
@@ -661,6 +662,7 @@ __export(exports_src, {
   renderLinkToHTML: () => renderLinkToHTML,
   relativeLuminance: () => relativeLuminance,
   registerToolOverlay: () => registerToolOverlay,
+  registerSelectionActionSection: () => registerSelectionActionSection,
   registerSelectionAction: () => registerSelectionAction,
   registerItemOverlay: () => registerItemOverlay,
   registerItem: () => registerItem,
@@ -683,6 +685,7 @@ __export(exports_src, {
   matchesOverlayCondition: () => matchesOverlayCondition,
   listToolOverlays: () => listToolOverlays,
   listSelectionActions: () => listSelectionActions,
+  listSelectionActionSections: () => listSelectionActionSections,
   listRegisteredItemTypes: () => listRegisteredItemTypes,
   listCreateSurfaceEntries: () => listCreateSurfaceEntries,
   itemSchemas: () => itemSchemas2,
@@ -11786,6 +11789,7 @@ var itemOverlays = {};
 var toolOverlays = {};
 var dynamicOptionsResolvers = {};
 var selectionActions = {};
+var selectionActionSections = {};
 function registerItemOverlay(overlay) {
   itemOverlays[overlay.itemType] = overlay;
 }
@@ -11795,6 +11799,9 @@ function registerToolOverlay(overlay) {
 function registerSelectionAction(action) {
   selectionActions[action.id] = action;
 }
+function registerSelectionActionSection(section) {
+  selectionActionSections[section.id] = section;
+}
 function registerDynamicOptionsResolver(id, resolver) {
   dynamicOptionsResolvers[id] = resolver;
 }
@@ -11850,6 +11857,9 @@ function listCreateSurfaceEntries() {
 function listSelectionActions() {
   return Object.values(selectionActions);
 }
+function listSelectionActionSections() {
+  return Object.values(selectionActionSections);
+}
 function getSelectionOverlayActions(items) {
   return Object.values(selectionActions).filter((action) => action.isAvailable?.(items) ?? true);
 }
@@ -64886,6 +64896,25 @@ class Shape extends BaseItem {
     this.subject.publish(this);
   }
   onPropertyUpdated(property, value, prevValue) {
+    switch (property) {
+      case "shapeType":
+        this.initPath();
+        break;
+      case "backgroundOpacity":
+        this.path.setBackgroundOpacity(value);
+        break;
+      case "borderOpacity":
+        this.path.setBorderOpacity(value);
+        break;
+      case "borderStyle":
+        this.path.setBorderStyle(value);
+        break;
+      case "borderWidth":
+        this.path.setBorderWidth(value);
+        break;
+      default:
+        break;
+    }
     super.onPropertyUpdated(property, value, prevValue);
     this.saveShapeData();
   }
@@ -73913,12 +73942,39 @@ class Presence {
 function everyItemHasRichText(items) {
   return items.length > 0 && items.every((item) => !!item.getRichText?.());
 }
+registerSelectionActionSection({
+  id: "selectionTextSize",
+  label: "Text size",
+  actionIds: ["selection.text.fontSize"]
+});
+registerSelectionActionSection({
+  id: "selectionTextColors",
+  label: "Text colors",
+  actionIds: ["selection.text.color", "selection.text.highlight"]
+});
+registerSelectionActionSection({
+  id: "selectionArrange",
+  label: "Arrange",
+  actionIds: ["selection.bringToFront", "selection.sendToBack"]
+});
+registerSelectionActionSection({
+  id: "selectionActions",
+  label: "Actions",
+  actionIds: [
+    "selection.duplicate",
+    "selection.lock",
+    "selection.unlock",
+    "selection.delete"
+  ]
+});
 registerSelectionAction({
   id: "selection.delete",
   label: "Delete",
   icon: symbolIcon("Delete"),
   description: "Removes the selected items from the board.",
   invoke: { kind: "selectionMethod", methodName: "removeFromBoard" },
+  sectionId: "selectionActions",
+  order: 4,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73927,6 +73983,8 @@ registerSelectionAction({
   icon: symbolIcon("Duplicate"),
   description: "Duplicates the selected items.",
   invoke: { kind: "selectionMethod", methodName: "duplicate" },
+  sectionId: "selectionActions",
+  order: 1,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73935,6 +73993,8 @@ registerSelectionAction({
   icon: symbolIcon("unlock"),
   description: "Locks the selected items.",
   invoke: { kind: "selectionMethod", methodName: "lock" },
+  sectionId: "selectionActions",
+  order: 2,
   isAvailable: (items) => items.length > 0 && !items.some((item) => item.transformation.isLocked)
 });
 registerSelectionAction({
@@ -73943,6 +74003,8 @@ registerSelectionAction({
   icon: symbolIcon("lock"),
   description: "Unlocks the selected items.",
   invoke: { kind: "selectionMethod", methodName: "unlock" },
+  sectionId: "selectionActions",
+  order: 2,
   isAvailable: (items) => items.some((item) => item.transformation.isLocked)
 });
 registerSelectionAction({
@@ -73951,6 +74013,8 @@ registerSelectionAction({
   icon: symbolIcon("BringToFront"),
   description: "Moves the selection above overlapping items.",
   invoke: { kind: "selectionMethod", methodName: "bringToFront" },
+  sectionId: "selectionArrange",
+  order: 1,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73959,6 +74023,8 @@ registerSelectionAction({
   icon: symbolIcon("SendToBack"),
   description: "Moves the selection behind overlapping items.",
   invoke: { kind: "selectionMethod", methodName: "sendToBack" },
+  sectionId: "selectionArrange",
+  order: 2,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73966,6 +74032,8 @@ registerSelectionAction({
   label: "Font size",
   icon: styleFontSizeIcon(),
   invoke: { kind: "selectionMethod", methodName: "setFontSize" },
+  sectionId: "selectionTextSize",
+  order: 1,
   controls: [
     {
       id: "fontSize",
@@ -73991,6 +74059,8 @@ registerSelectionAction({
     swatch: { kind: "selectionProperty", property: "getFontColor" }
   }),
   invoke: { kind: "selectionMethod", methodName: "setFontColor" },
+  sectionId: "selectionTextColors",
+  order: 1,
   controls: [
     {
       id: "fontColor",
@@ -74012,6 +74082,8 @@ registerSelectionAction({
     swatch: { kind: "selectionProperty", property: "getFontHighlight" }
   }),
   invoke: { kind: "selectionMethod", methodName: "setFontHighlight" },
+  sectionId: "selectionTextColors",
+  order: 2,
   controls: [
     {
       id: "fontHighlight",

package/dist/cjs/node.js

@@ -1686,6 +1686,7 @@ __export(exports_node, {
   sha256: () => sha256,
   semanticColor: () => semanticColor,
   selectionActions: () => selectionActions,
+  selectionActionSections: () => selectionActionSections,
   scalePatterns: () => scalePatterns,
   scaleElementBy: () => scaleElementBy,
   rgbToRgba: () => rgbToRgba,
@@ -1698,6 +1699,7 @@ __export(exports_node, {
   renderLinkToHTML: () => renderLinkToHTML,
   relativeLuminance: () => relativeLuminance,
   registerToolOverlay: () => registerToolOverlay,
+  registerSelectionActionSection: () => registerSelectionActionSection,
   registerSelectionAction: () => registerSelectionAction,
   registerItemOverlay: () => registerItemOverlay,
   registerItem: () => registerItem,
@@ -1720,6 +1722,7 @@ __export(exports_node, {
   matchesOverlayCondition: () => matchesOverlayCondition,
   listToolOverlays: () => listToolOverlays,
   listSelectionActions: () => listSelectionActions,
+  listSelectionActionSections: () => listSelectionActionSections,
   listRegisteredItemTypes: () => listRegisteredItemTypes,
   listCreateSurfaceEntries: () => listCreateSurfaceEntries,
   itemSchemas: () => itemSchemas2,
@@ -12822,6 +12825,7 @@ var itemOverlays = {};
 var toolOverlays = {};
 var dynamicOptionsResolvers = {};
 var selectionActions = {};
+var selectionActionSections = {};
 function registerItemOverlay(overlay) {
   itemOverlays[overlay.itemType] = overlay;
 }
@@ -12831,6 +12835,9 @@ function registerToolOverlay(overlay) {
 function registerSelectionAction(action) {
   selectionActions[action.id] = action;
 }
+function registerSelectionActionSection(section) {
+  selectionActionSections[section.id] = section;
+}
 function registerDynamicOptionsResolver(id, resolver) {
   dynamicOptionsResolvers[id] = resolver;
 }
@@ -12886,6 +12893,9 @@ function listCreateSurfaceEntries() {
 function listSelectionActions() {
   return Object.values(selectionActions);
 }
+function listSelectionActionSections() {
+  return Object.values(selectionActionSections);
+}
 function getSelectionOverlayActions(items) {
   return Object.values(selectionActions).filter((action) => action.isAvailable?.(items) ?? true);
 }
@@ -67359,6 +67369,25 @@ class Shape extends BaseItem {
     this.subject.publish(this);
   }
   onPropertyUpdated(property, value, prevValue) {
+    switch (property) {
+      case "shapeType":
+        this.initPath();
+        break;
+      case "backgroundOpacity":
+        this.path.setBackgroundOpacity(value);
+        break;
+      case "borderOpacity":
+        this.path.setBorderOpacity(value);
+        break;
+      case "borderStyle":
+        this.path.setBorderStyle(value);
+        break;
+      case "borderWidth":
+        this.path.setBorderWidth(value);
+        break;
+      default:
+        break;
+    }
     super.onPropertyUpdated(property, value, prevValue);
     this.saveShapeData();
   }
@@ -76386,12 +76415,39 @@ class Presence {
 function everyItemHasRichText(items) {
   return items.length > 0 && items.every((item) => !!item.getRichText?.());
 }
+registerSelectionActionSection({
+  id: "selectionTextSize",
+  label: "Text size",
+  actionIds: ["selection.text.fontSize"]
+});
+registerSelectionActionSection({
+  id: "selectionTextColors",
+  label: "Text colors",
+  actionIds: ["selection.text.color", "selection.text.highlight"]
+});
+registerSelectionActionSection({
+  id: "selectionArrange",
+  label: "Arrange",
+  actionIds: ["selection.bringToFront", "selection.sendToBack"]
+});
+registerSelectionActionSection({
+  id: "selectionActions",
+  label: "Actions",
+  actionIds: [
+    "selection.duplicate",
+    "selection.lock",
+    "selection.unlock",
+    "selection.delete"
+  ]
+});
 registerSelectionAction({
   id: "selection.delete",
   label: "Delete",
   icon: symbolIcon("Delete"),
   description: "Removes the selected items from the board.",
   invoke: { kind: "selectionMethod", methodName: "removeFromBoard" },
+  sectionId: "selectionActions",
+  order: 4,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -76400,6 +76456,8 @@ registerSelectionAction({
   icon: symbolIcon("Duplicate"),
   description: "Duplicates the selected items.",
   invoke: { kind: "selectionMethod", methodName: "duplicate" },
+  sectionId: "selectionActions",
+  order: 1,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -76408,6 +76466,8 @@ registerSelectionAction({
   icon: symbolIcon("unlock"),
   description: "Locks the selected items.",
   invoke: { kind: "selectionMethod", methodName: "lock" },
+  sectionId: "selectionActions",
+  order: 2,
   isAvailable: (items) => items.length > 0 && !items.some((item) => item.transformation.isLocked)
 });
 registerSelectionAction({
@@ -76416,6 +76476,8 @@ registerSelectionAction({
   icon: symbolIcon("lock"),
   description: "Unlocks the selected items.",
   invoke: { kind: "selectionMethod", methodName: "unlock" },
+  sectionId: "selectionActions",
+  order: 2,
   isAvailable: (items) => items.some((item) => item.transformation.isLocked)
 });
 registerSelectionAction({
@@ -76424,6 +76486,8 @@ registerSelectionAction({
   icon: symbolIcon("BringToFront"),
   description: "Moves the selection above overlapping items.",
   invoke: { kind: "selectionMethod", methodName: "bringToFront" },
+  sectionId: "selectionArrange",
+  order: 1,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -76432,6 +76496,8 @@ registerSelectionAction({
   icon: symbolIcon("SendToBack"),
   description: "Moves the selection behind overlapping items.",
   invoke: { kind: "selectionMethod", methodName: "sendToBack" },
+  sectionId: "selectionArrange",
+  order: 2,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -76439,6 +76505,8 @@ registerSelectionAction({
   label: "Font size",
   icon: styleFontSizeIcon(),
   invoke: { kind: "selectionMethod", methodName: "setFontSize" },
+  sectionId: "selectionTextSize",
+  order: 1,
   controls: [
     {
       id: "fontSize",
@@ -76464,6 +76532,8 @@ registerSelectionAction({
     swatch: { kind: "selectionProperty", property: "getFontColor" }
   }),
   invoke: { kind: "selectionMethod", methodName: "setFontColor" },
+  sectionId: "selectionTextColors",
+  order: 1,
   controls: [
     {
       id: "fontColor",
@@ -76485,6 +76555,8 @@ registerSelectionAction({
     swatch: { kind: "selectionProperty", property: "getFontHighlight" }
   }),
   invoke: { kind: "selectionMethod", methodName: "setFontHighlight" },
+  sectionId: "selectionTextColors",
+  order: 2,
   controls: [
     {
       id: "fontHighlight",

package/dist/esm/browser.js

@@ -11554,6 +11554,7 @@ var itemOverlays = {};
 var toolOverlays = {};
 var dynamicOptionsResolvers = {};
 var selectionActions = {};
+var selectionActionSections = {};
 function registerItemOverlay(overlay) {
   itemOverlays[overlay.itemType] = overlay;
 }
@@ -11563,6 +11564,9 @@ function registerToolOverlay(overlay) {
 function registerSelectionAction(action) {
   selectionActions[action.id] = action;
 }
+function registerSelectionActionSection(section) {
+  selectionActionSections[section.id] = section;
+}
 function registerDynamicOptionsResolver(id, resolver) {
   dynamicOptionsResolvers[id] = resolver;
 }
@@ -11618,6 +11622,9 @@ function listCreateSurfaceEntries() {
 function listSelectionActions() {
   return Object.values(selectionActions);
 }
+function listSelectionActionSections() {
+  return Object.values(selectionActionSections);
+}
 function getSelectionOverlayActions(items) {
   return Object.values(selectionActions).filter((action) => action.isAvailable?.(items) ?? true);
 }
@@ -64662,6 +64669,25 @@ class Shape extends BaseItem {
     this.subject.publish(this);
   }
   onPropertyUpdated(property, value, prevValue) {
+    switch (property) {
+      case "shapeType":
+        this.initPath();
+        break;
+      case "backgroundOpacity":
+        this.path.setBackgroundOpacity(value);
+        break;
+      case "borderOpacity":
+        this.path.setBorderOpacity(value);
+        break;
+      case "borderStyle":
+        this.path.setBorderStyle(value);
+        break;
+      case "borderWidth":
+        this.path.setBorderWidth(value);
+        break;
+      default:
+        break;
+    }
     super.onPropertyUpdated(property, value, prevValue);
     this.saveShapeData();
   }
@@ -73689,12 +73715,39 @@ class Presence {
 function everyItemHasRichText(items) {
   return items.length > 0 && items.every((item) => !!item.getRichText?.());
 }
+registerSelectionActionSection({
+  id: "selectionTextSize",
+  label: "Text size",
+  actionIds: ["selection.text.fontSize"]
+});
+registerSelectionActionSection({
+  id: "selectionTextColors",
+  label: "Text colors",
+  actionIds: ["selection.text.color", "selection.text.highlight"]
+});
+registerSelectionActionSection({
+  id: "selectionArrange",
+  label: "Arrange",
+  actionIds: ["selection.bringToFront", "selection.sendToBack"]
+});
+registerSelectionActionSection({
+  id: "selectionActions",
+  label: "Actions",
+  actionIds: [
+    "selection.duplicate",
+    "selection.lock",
+    "selection.unlock",
+    "selection.delete"
+  ]
+});
 registerSelectionAction({
   id: "selection.delete",
   label: "Delete",
   icon: symbolIcon("Delete"),
   description: "Removes the selected items from the board.",
   invoke: { kind: "selectionMethod", methodName: "removeFromBoard" },
+  sectionId: "selectionActions",
+  order: 4,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73703,6 +73756,8 @@ registerSelectionAction({
   icon: symbolIcon("Duplicate"),
   description: "Duplicates the selected items.",
   invoke: { kind: "selectionMethod", methodName: "duplicate" },
+  sectionId: "selectionActions",
+  order: 1,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73711,6 +73766,8 @@ registerSelectionAction({
   icon: symbolIcon("unlock"),
   description: "Locks the selected items.",
   invoke: { kind: "selectionMethod", methodName: "lock" },
+  sectionId: "selectionActions",
+  order: 2,
   isAvailable: (items) => items.length > 0 && !items.some((item) => item.transformation.isLocked)
 });
 registerSelectionAction({
@@ -73719,6 +73776,8 @@ registerSelectionAction({
   icon: symbolIcon("lock"),
   description: "Unlocks the selected items.",
   invoke: { kind: "selectionMethod", methodName: "unlock" },
+  sectionId: "selectionActions",
+  order: 2,
   isAvailable: (items) => items.some((item) => item.transformation.isLocked)
 });
 registerSelectionAction({
@@ -73727,6 +73786,8 @@ registerSelectionAction({
   icon: symbolIcon("BringToFront"),
   description: "Moves the selection above overlapping items.",
   invoke: { kind: "selectionMethod", methodName: "bringToFront" },
+  sectionId: "selectionArrange",
+  order: 1,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73735,6 +73796,8 @@ registerSelectionAction({
   icon: symbolIcon("SendToBack"),
   description: "Moves the selection behind overlapping items.",
   invoke: { kind: "selectionMethod", methodName: "sendToBack" },
+  sectionId: "selectionArrange",
+  order: 2,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73742,6 +73805,8 @@ registerSelectionAction({
   label: "Font size",
   icon: styleFontSizeIcon(),
   invoke: { kind: "selectionMethod", methodName: "setFontSize" },
+  sectionId: "selectionTextSize",
+  order: 1,
   controls: [
     {
       id: "fontSize",
@@ -73767,6 +73832,8 @@ registerSelectionAction({
     swatch: { kind: "selectionProperty", property: "getFontColor" }
   }),
   invoke: { kind: "selectionMethod", methodName: "setFontColor" },
+  sectionId: "selectionTextColors",
+  order: 1,
   controls: [
     {
       id: "fontColor",
@@ -73788,6 +73855,8 @@ registerSelectionAction({
     swatch: { kind: "selectionProperty", property: "getFontHighlight" }
   }),
   invoke: { kind: "selectionMethod", methodName: "setFontHighlight" },
+  sectionId: "selectionTextColors",
+  order: 2,
   controls: [
     {
       id: "fontHighlight",
@@ -81802,6 +81871,7 @@ export {
   sha256,
   semanticColor,
   selectionActions,
+  selectionActionSections,
   scalePatterns,
   scaleElementBy,
   rgbToRgba,
@@ -81814,6 +81884,7 @@ export {
   renderLinkToHTML,
   relativeLuminance,
   registerToolOverlay,
+  registerSelectionActionSection,
   registerSelectionAction,
   registerItemOverlay,
   registerItem,
@@ -81836,6 +81907,7 @@ export {
   matchesOverlayCondition,
   listToolOverlays,
   listSelectionActions,
+  listSelectionActionSections,
   listRegisteredItemTypes,
   listCreateSurfaceEntries,
   itemSchemas2 as itemSchemas,

package/dist/esm/index.js

@@ -11547,6 +11547,7 @@ var itemOverlays = {};
 var toolOverlays = {};
 var dynamicOptionsResolvers = {};
 var selectionActions = {};
+var selectionActionSections = {};
 function registerItemOverlay(overlay) {
   itemOverlays[overlay.itemType] = overlay;
 }
@@ -11556,6 +11557,9 @@ function registerToolOverlay(overlay) {
 function registerSelectionAction(action) {
   selectionActions[action.id] = action;
 }
+function registerSelectionActionSection(section) {
+  selectionActionSections[section.id] = section;
+}
 function registerDynamicOptionsResolver(id, resolver) {
   dynamicOptionsResolvers[id] = resolver;
 }
@@ -11611,6 +11615,9 @@ function listCreateSurfaceEntries() {
 function listSelectionActions() {
   return Object.values(selectionActions);
 }
+function listSelectionActionSections() {
+  return Object.values(selectionActionSections);
+}
 function getSelectionOverlayActions(items) {
   return Object.values(selectionActions).filter((action) => action.isAvailable?.(items) ?? true);
 }
@@ -64655,6 +64662,25 @@ class Shape extends BaseItem {
     this.subject.publish(this);
   }
   onPropertyUpdated(property, value, prevValue) {
+    switch (property) {
+      case "shapeType":
+        this.initPath();
+        break;
+      case "backgroundOpacity":
+        this.path.setBackgroundOpacity(value);
+        break;
+      case "borderOpacity":
+        this.path.setBorderOpacity(value);
+        break;
+      case "borderStyle":
+        this.path.setBorderStyle(value);
+        break;
+      case "borderWidth":
+        this.path.setBorderWidth(value);
+        break;
+      default:
+        break;
+    }
     super.onPropertyUpdated(property, value, prevValue);
     this.saveShapeData();
   }
@@ -73682,12 +73708,39 @@ class Presence {
 function everyItemHasRichText(items) {
   return items.length > 0 && items.every((item) => !!item.getRichText?.());
 }
+registerSelectionActionSection({
+  id: "selectionTextSize",
+  label: "Text size",
+  actionIds: ["selection.text.fontSize"]
+});
+registerSelectionActionSection({
+  id: "selectionTextColors",
+  label: "Text colors",
+  actionIds: ["selection.text.color", "selection.text.highlight"]
+});
+registerSelectionActionSection({
+  id: "selectionArrange",
+  label: "Arrange",
+  actionIds: ["selection.bringToFront", "selection.sendToBack"]
+});
+registerSelectionActionSection({
+  id: "selectionActions",
+  label: "Actions",
+  actionIds: [
+    "selection.duplicate",
+    "selection.lock",
+    "selection.unlock",
+    "selection.delete"
+  ]
+});
 registerSelectionAction({
   id: "selection.delete",
   label: "Delete",
   icon: symbolIcon("Delete"),
   description: "Removes the selected items from the board.",
   invoke: { kind: "selectionMethod", methodName: "removeFromBoard" },
+  sectionId: "selectionActions",
+  order: 4,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73696,6 +73749,8 @@ registerSelectionAction({
   icon: symbolIcon("Duplicate"),
   description: "Duplicates the selected items.",
   invoke: { kind: "selectionMethod", methodName: "duplicate" },
+  sectionId: "selectionActions",
+  order: 1,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73704,6 +73759,8 @@ registerSelectionAction({
   icon: symbolIcon("unlock"),
   description: "Locks the selected items.",
   invoke: { kind: "selectionMethod", methodName: "lock" },
+  sectionId: "selectionActions",
+  order: 2,
   isAvailable: (items) => items.length > 0 && !items.some((item) => item.transformation.isLocked)
 });
 registerSelectionAction({
@@ -73712,6 +73769,8 @@ registerSelectionAction({
   icon: symbolIcon("lock"),
   description: "Unlocks the selected items.",
   invoke: { kind: "selectionMethod", methodName: "unlock" },
+  sectionId: "selectionActions",
+  order: 2,
   isAvailable: (items) => items.some((item) => item.transformation.isLocked)
 });
 registerSelectionAction({
@@ -73720,6 +73779,8 @@ registerSelectionAction({
   icon: symbolIcon("BringToFront"),
   description: "Moves the selection above overlapping items.",
   invoke: { kind: "selectionMethod", methodName: "bringToFront" },
+  sectionId: "selectionArrange",
+  order: 1,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73728,6 +73789,8 @@ registerSelectionAction({
   icon: symbolIcon("SendToBack"),
   description: "Moves the selection behind overlapping items.",
   invoke: { kind: "selectionMethod", methodName: "sendToBack" },
+  sectionId: "selectionArrange",
+  order: 2,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -73735,6 +73798,8 @@ registerSelectionAction({
   label: "Font size",
   icon: styleFontSizeIcon(),
   invoke: { kind: "selectionMethod", methodName: "setFontSize" },
+  sectionId: "selectionTextSize",
+  order: 1,
   controls: [
     {
       id: "fontSize",
@@ -73760,6 +73825,8 @@ registerSelectionAction({
     swatch: { kind: "selectionProperty", property: "getFontColor" }
   }),
   invoke: { kind: "selectionMethod", methodName: "setFontColor" },
+  sectionId: "selectionTextColors",
+  order: 1,
   controls: [
     {
       id: "fontColor",
@@ -73781,6 +73848,8 @@ registerSelectionAction({
     swatch: { kind: "selectionProperty", property: "getFontHighlight" }
   }),
   invoke: { kind: "selectionMethod", methodName: "setFontHighlight" },
+  sectionId: "selectionTextColors",
+  order: 2,
   controls: [
     {
       id: "fontHighlight",
@@ -81700,6 +81769,7 @@ export {
   sha256,
   semanticColor,
   selectionActions,
+  selectionActionSections,
   scalePatterns,
   scaleElementBy,
   rgbToRgba,
@@ -81712,6 +81782,7 @@ export {
   renderLinkToHTML,
   relativeLuminance,
   registerToolOverlay,
+  registerSelectionActionSection,
   registerSelectionAction,
   registerItemOverlay,
   registerItem,
@@ -81734,6 +81805,7 @@ export {
   matchesOverlayCondition,
   listToolOverlays,
   listSelectionActions,
+  listSelectionActionSections,
   listRegisteredItemTypes,
   listCreateSurfaceEntries,
   itemSchemas2 as itemSchemas,

package/dist/esm/node.js

@@ -12330,6 +12330,7 @@ var itemOverlays = {};
 var toolOverlays = {};
 var dynamicOptionsResolvers = {};
 var selectionActions = {};
+var selectionActionSections = {};
 function registerItemOverlay(overlay) {
   itemOverlays[overlay.itemType] = overlay;
 }
@@ -12339,6 +12340,9 @@ function registerToolOverlay(overlay) {
 function registerSelectionAction(action) {
   selectionActions[action.id] = action;
 }
+function registerSelectionActionSection(section) {
+  selectionActionSections[section.id] = section;
+}
 function registerDynamicOptionsResolver(id, resolver) {
   dynamicOptionsResolvers[id] = resolver;
 }
@@ -12394,6 +12398,9 @@ function listCreateSurfaceEntries() {
 function listSelectionActions() {
   return Object.values(selectionActions);
 }
+function listSelectionActionSections() {
+  return Object.values(selectionActionSections);
+}
 function getSelectionOverlayActions(items) {
   return Object.values(selectionActions).filter((action) => action.isAvailable?.(items) ?? true);
 }
@@ -67123,6 +67130,25 @@ class Shape extends BaseItem {
     this.subject.publish(this);
   }
   onPropertyUpdated(property, value, prevValue) {
+    switch (property) {
+      case "shapeType":
+        this.initPath();
+        break;
+      case "backgroundOpacity":
+        this.path.setBackgroundOpacity(value);
+        break;
+      case "borderOpacity":
+        this.path.setBorderOpacity(value);
+        break;
+      case "borderStyle":
+        this.path.setBorderStyle(value);
+        break;
+      case "borderWidth":
+        this.path.setBorderWidth(value);
+        break;
+      default:
+        break;
+    }
     super.onPropertyUpdated(property, value, prevValue);
     this.saveShapeData();
   }
@@ -76150,12 +76176,39 @@ class Presence {
 function everyItemHasRichText(items) {
   return items.length > 0 && items.every((item) => !!item.getRichText?.());
 }
+registerSelectionActionSection({
+  id: "selectionTextSize",
+  label: "Text size",
+  actionIds: ["selection.text.fontSize"]
+});
+registerSelectionActionSection({
+  id: "selectionTextColors",
+  label: "Text colors",
+  actionIds: ["selection.text.color", "selection.text.highlight"]
+});
+registerSelectionActionSection({
+  id: "selectionArrange",
+  label: "Arrange",
+  actionIds: ["selection.bringToFront", "selection.sendToBack"]
+});
+registerSelectionActionSection({
+  id: "selectionActions",
+  label: "Actions",
+  actionIds: [
+    "selection.duplicate",
+    "selection.lock",
+    "selection.unlock",
+    "selection.delete"
+  ]
+});
 registerSelectionAction({
   id: "selection.delete",
   label: "Delete",
   icon: symbolIcon("Delete"),
   description: "Removes the selected items from the board.",
   invoke: { kind: "selectionMethod", methodName: "removeFromBoard" },
+  sectionId: "selectionActions",
+  order: 4,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -76164,6 +76217,8 @@ registerSelectionAction({
   icon: symbolIcon("Duplicate"),
   description: "Duplicates the selected items.",
   invoke: { kind: "selectionMethod", methodName: "duplicate" },
+  sectionId: "selectionActions",
+  order: 1,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -76172,6 +76227,8 @@ registerSelectionAction({
   icon: symbolIcon("unlock"),
   description: "Locks the selected items.",
   invoke: { kind: "selectionMethod", methodName: "lock" },
+  sectionId: "selectionActions",
+  order: 2,
   isAvailable: (items) => items.length > 0 && !items.some((item) => item.transformation.isLocked)
 });
 registerSelectionAction({
@@ -76180,6 +76237,8 @@ registerSelectionAction({
   icon: symbolIcon("lock"),
   description: "Unlocks the selected items.",
   invoke: { kind: "selectionMethod", methodName: "unlock" },
+  sectionId: "selectionActions",
+  order: 2,
   isAvailable: (items) => items.some((item) => item.transformation.isLocked)
 });
 registerSelectionAction({
@@ -76188,6 +76247,8 @@ registerSelectionAction({
   icon: symbolIcon("BringToFront"),
   description: "Moves the selection above overlapping items.",
   invoke: { kind: "selectionMethod", methodName: "bringToFront" },
+  sectionId: "selectionArrange",
+  order: 1,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -76196,6 +76257,8 @@ registerSelectionAction({
   icon: symbolIcon("SendToBack"),
   description: "Moves the selection behind overlapping items.",
   invoke: { kind: "selectionMethod", methodName: "sendToBack" },
+  sectionId: "selectionArrange",
+  order: 2,
   isAvailable: (items) => items.length > 0
 });
 registerSelectionAction({
@@ -76203,6 +76266,8 @@ registerSelectionAction({
   label: "Font size",
   icon: styleFontSizeIcon(),
   invoke: { kind: "selectionMethod", methodName: "setFontSize" },
+  sectionId: "selectionTextSize",
+  order: 1,
   controls: [
     {
       id: "fontSize",
@@ -76228,6 +76293,8 @@ registerSelectionAction({
     swatch: { kind: "selectionProperty", property: "getFontColor" }
   }),
   invoke: { kind: "selectionMethod", methodName: "setFontColor" },
+  sectionId: "selectionTextColors",
+  order: 1,
   controls: [
     {
       id: "fontColor",
@@ -76249,6 +76316,8 @@ registerSelectionAction({
     swatch: { kind: "selectionProperty", property: "getFontHighlight" }
   }),
   invoke: { kind: "selectionMethod", methodName: "setFontHighlight" },
+  sectionId: "selectionTextColors",
+  order: 2,
   controls: [
     {
       id: "fontHighlight",
@@ -84335,6 +84404,7 @@ export {
   sha256,
   semanticColor,
   selectionActions,
+  selectionActionSections,
   scalePatterns,
   scaleElementBy,
   rgbToRgba,
@@ -84347,6 +84417,7 @@ export {
   renderLinkToHTML,
   relativeLuminance,
   registerToolOverlay,
+  registerSelectionActionSection,
   registerSelectionAction,
   registerItemOverlay,
   registerItem,
@@ -84369,6 +84440,7 @@ export {
   matchesOverlayCondition,
   listToolOverlays,
   listSelectionActions,
+  listSelectionActionSections,
   listRegisteredItemTypes,
   listCreateSurfaceEntries,
   itemSchemas2 as itemSchemas,

package/dist/types/Overlay/OverlayMetadata.d.ts

@@ -249,6 +249,8 @@ export interface SelectionOverlayActionDefinition {
     invoke: OverlayInvocation;
     controls?: OverlayControlDefinition[];
     groups?: OverlayControlGroupDefinition[];
+    sectionId?: string;
+    order?: number;
     isAvailable?: (items: readonly BaseItem[]) => boolean;
 }
 export interface ToolDefaultsDefinition {

package/dist/types/Overlay/overlayRegistry.d.ts

@@ -1,6 +1,6 @@
 import type { BaseItem } from "../Items/BaseItem/BaseItem";
 import type { Tool } from "../Tools/Tool";
-import type { ItemOverlayDefinition, OverlayActionDefinition, OverlayCondition, OverlayOptionDefinition, SelectionOverlayActionDefinition, ToolOverlayDefinition } from "./OverlayMetadata";
+import type { ItemOverlayDefinition, OverlayActionDefinition, OverlayActionSectionDefinition, OverlayCondition, OverlayOptionDefinition, SelectionOverlayActionDefinition, ToolOverlayDefinition } from "./OverlayMetadata";
 export interface OverlayDynamicOptionsContext {
     item?: BaseItem;
     items?: readonly BaseItem[];
@@ -28,15 +28,18 @@ export declare const itemOverlays: Record<string, ItemOverlayDefinition>;
 export declare const toolOverlays: Record<string, ToolOverlayDefinition>;
 export declare const dynamicOptionsResolvers: Record<string, OverlayDynamicOptionsResolver>;
 export declare const selectionActions: Record<string, SelectionOverlayActionDefinition>;
+export declare const selectionActionSections: Record<string, OverlayActionSectionDefinition>;
 export declare function registerItemOverlay(overlay: ItemOverlayDefinition): void;
 export declare function registerToolOverlay(overlay: ToolOverlayDefinition): void;
 export declare function registerSelectionAction(action: SelectionOverlayActionDefinition): void;
+export declare function registerSelectionActionSection(section: OverlayActionSectionDefinition): void;
 export declare function registerDynamicOptionsResolver(id: string, resolver: OverlayDynamicOptionsResolver): void;
 export declare function getItemOverlay(itemOrType: BaseItem | string): ItemOverlayDefinition | undefined;
 export declare function getToolOverlay(toolName: string): ToolOverlayDefinition | undefined;
 export declare function listToolOverlays(): ToolOverlayDefinition[];
 export declare function listCreateSurfaceEntries(): OverlayCreateSurfaceEntry[];
 export declare function listSelectionActions(): SelectionOverlayActionDefinition[];
+export declare function listSelectionActionSections(): OverlayActionSectionDefinition[];
 export declare function getSelectionOverlayActions(items: readonly BaseItem[]): SelectionOverlayActionDefinition[];
 export declare function resolveDynamicOptions(providerId: string, context: OverlayDynamicOptionsContext): OverlayOptionDefinition[];
 export declare function matchesOverlayCondition(condition: OverlayCondition | undefined, context: OverlayDynamicOptionsContext): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "microboard-temp",
-  "version": "0.14.44",
+  "version": "0.14.46",
   "description": "A flexible interactive whiteboard library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",