microboard-temp 0.14.19 → 0.14.21

package/dist/cjs/browser.js

@@ -676,6 +676,7 @@ __export(exports_browser, {
   overlaySymbolIcon: () => overlaySymbolIcon,
   overlayAssetIcon: () => overlayAssetIcon,
   omitDefaultProperties: () => omitDefaultProperties,
+  normalizeOverlayIconAssetPath: () => normalizeOverlayIconAssetPath,
   messageRouter: () => messageRouter,
   meetsWCAG_AAA: () => meetsWCAG_AAA,
   meetsWCAG_AA: () => meetsWCAG_AA,
@@ -744,6 +745,7 @@ __export(exports_browser, {
   calculatePosition: () => calculatePosition,
   calculateAudioPosition: () => calculateAudioPosition,
   borderWidths: () => borderWidths,
+  WorkflowTool: () => WorkflowTool,
   VideoItem: () => VideoItem,
   Transformation: () => Transformation,
   Tools: () => Tools,
@@ -776,6 +778,7 @@ __export(exports_browser, {
   PRESENCE_CLEANUP_IDLE_TIMER: () => PRESENCE_CLEANUP_IDLE_TIMER,
   OVERLAY_SYMBOL_KEYS: () => OVERLAY_SYMBOL_KEYS,
   OVERLAY_ICON_SPRITE_PATH: () => OVERLAY_ICON_SPRITE_PATH,
+  OVERLAY_ICON_ASSET_PREFIX: () => OVERLAY_ICON_ASSET_PREFIX,
   MiroItemConverter: () => MiroItemConverter,
   Mbr: () => Mbr,
   Matrix: () => Matrix,
@@ -11723,7 +11726,11 @@ function toLocalTransformOp(op, containerMatrix, itemId) {
   }
 }
 // src/Overlay/IconPack.ts
-var OVERLAY_ICON_SPRITE_PATH = "src/Overlay/overlay-icons.svg";
+var OVERLAY_ICON_ASSET_PREFIX = "overlay-icons/";
+var OVERLAY_ICON_SPRITE_PATH = normalizeOverlayIconAssetPath("src/Overlay/overlay-icons.svg");
+function normalizeOverlayIconAssetPath(sourcePath) {
+  return sourcePath.startsWith("src/") ? `${OVERLAY_ICON_ASSET_PREFIX}${sourcePath.slice(4)}` : sourcePath;
+}
 function overlaySymbolIcon(key) {
   return {
     kind: "symbol",
@@ -11731,10 +11738,18 @@ function overlaySymbolIcon(key) {
     sourcePath: OVERLAY_ICON_SPRITE_PATH
   };
 }
-function overlayAssetIcon(path2) {
-  return {
+function overlayAssetIcon(sourcePath, state) {
+  const path2 = normalizeOverlayIconAssetPath(sourcePath);
+  return state ? {
+    kind: "asset",
+    path: path2,
+    sourcePath,
+    mimeType: "image/svg+xml",
+    state
+  } : {
     kind: "asset",
     path: path2,
+    sourcePath,
     mimeType: "image/svg+xml"
   };
 }
@@ -11750,16 +11765,16 @@ function symbolIcon(key, state) {
   return state ? { kind: "symbol", key, sourcePath: OVERLAY_ICON_SPRITE_PATH, state } : { kind: "symbol", key, sourcePath: OVERLAY_ICON_SPRITE_PATH };
 }
 function styleFillIcon(state) {
-  return symbolIcon(OVERLAY_SYMBOL_KEYS.styleFill, state);
+  return overlayAssetIcon("src/Items/Shape/icons/Fill.icon.svg", state);
 }
 function styleStrokeIcon(state) {
-  return symbolIcon(OVERLAY_SYMBOL_KEYS.styleStroke, state);
+  return overlayAssetIcon("src/Items/Shape/icons/Stroke.icon.svg", state);
 }
 function styleColorIcon(state) {
-  return symbolIcon(OVERLAY_SYMBOL_KEYS.styleColor, state);
+  return overlayAssetIcon("src/Items/Shape/icons/Color.icon.svg", state);
 }
 function styleFontSizeIcon(state) {
-  return symbolIcon(OVERLAY_SYMBOL_KEYS.styleFontSize, state);
+  return overlayAssetIcon("src/Items/RichText/icons/FontSize.icon.svg", state);
 }
 // src/Overlay/overlayRegistry.ts
 var itemOverlays = {};
@@ -11894,10 +11909,23 @@ function compareEntriesByOrder(a, b) {
   return aOrder - bOrder || aLabel.localeCompare(bLabel);
 }
 function readOverlayValueSource(context, source) {
+  if (source.kind === "selectionProperty") {
+    return readOverlayContextProperty(context.selection, source.property);
+  }
   if (source.kind === "itemProperty") {
-    return context.item ? context.item[source.property] : undefined;
+    return readOverlayContextProperty(context.item, source.property);
   }
-  return context.tool ? context.tool[source.property] : undefined;
+  return readOverlayContextProperty(context.tool, source.property);
+}
+function readOverlayContextProperty(target, property) {
+  if (!target) {
+    return;
+  }
+  const value = target[property];
+  if (typeof value === "function") {
+    return value.call(target);
+  }
+  return value;
 }
 // src/Items/BaseItem/BaseItem.ts
 class BaseItem {
@@ -37875,7 +37903,6 @@ var richTextOverlay = {
       id: "text.fontSize",
       label: "Font size",
       icon: styleFontSizeIcon(),
-      icon: styleFontSizeIcon(),
       target: "each",
       controls: [
         {
@@ -37898,7 +37925,7 @@ var richTextOverlay = {
     {
       id: "textTypography",
       label: "Typography",
-      icon: overlaySymbolIcon("text.fontSize"),
+      icon: overlayAssetIcon("src/Items/RichText/icons/FontSize.icon.svg"),
       actionIds: ["text.fontSize"]
     }
   ]
@@ -37909,7 +37936,7 @@ var addTextToolOverlay = {
   kind: "create",
   createsItemType: "RichText",
   family: "text",
-  icon: overlaySymbolIcon("tool.text"),
+  icon: overlayAssetIcon("src/Items/RichText/icons/Text.icon.svg"),
   description: "Creates editable rich text. The current first pass has no pre-placement defaults on this tool.",
   launch: { kind: "activate-tool" },
   surface: {
@@ -44384,12 +44411,28 @@ var COLOR_PALETTE = [
   "#118AB2",
   "#7B61FF"
 ];
-var symbolIcon2 = (key) => overlaySymbolIcon(key);
+var connectorAssetIcon = (file2) => overlayAssetIcon(`src/Items/Connector/icons/${file2}.icon.svg`);
+var lineStyleAssetIcons = {
+  straight: connectorAssetIcon("LineStraight"),
+  curved: connectorAssetIcon("LineCurved"),
+  orthogonal: connectorAssetIcon("LineOrthogonal")
+};
+var pointerAssetIcons = {
+  None: connectorAssetIcon("PointerNone"),
+  ArrowThin: connectorAssetIcon("PointerArrowThin"),
+  ArrowHeavy: connectorAssetIcon("PointerArrowHeavy"),
+  TriangleFilled: connectorAssetIcon("PointerTriangleFilled"),
+  TriangleOutline: connectorAssetIcon("PointerTriangleOutline"),
+  CircleFilled: connectorAssetIcon("PointerCircleFilled"),
+  CircleOutline: connectorAssetIcon("PointerCircleOutline"),
+  DiamondFilled: connectorAssetIcon("PointerDiamondFilled"),
+  DiamondOutline: connectorAssetIcon("PointerDiamondOutline")
+};
 var lineStyleOptions = ConnectorLineStyles.map((style) => ({
   id: style,
   label: style[0].toUpperCase() + style.slice(1),
   value: style,
-  icon: symbolIcon2(`connector.lineStyle.${style}`)
+  icon: lineStyleAssetIcons[style]
 }));
 var lineWidthOptions = ConnectionLineWidths.map((width) => ({
   id: `${width}`,
@@ -44400,13 +44443,13 @@ var pointerOptions = CONNECTOR_POINTER_TYPES.map((pointer) => ({
   id: pointer,
   label: pointer,
   value: pointer,
-  icon: symbolIcon2(`connector.pointer.${pointer}`)
+  icon: pointerAssetIcons[pointer]
 }));
 var borderStyleOptions = ["solid", "dot", "dash", "longDash"].map((style) => ({
   id: style,
   label: style,
   value: style,
-  icon: symbolIcon2(`stroke.${style}`)
+  icon: overlayAssetIcon(style === "solid" ? "src/Items/Shape/icons/StrokeSolid.icon.svg" : style === "dot" ? "src/Items/Shape/icons/StrokeDot.icon.svg" : style === "dash" ? "src/Items/Shape/icons/StrokeDash.icon.svg" : "src/Items/Shape/icons/StrokeLongDash.icon.svg")
 }));
 var connectorStyleControls = [
   {
@@ -44461,7 +44504,7 @@ var connectorStyleControls = [
   {
     id: "smartJump",
     label: "Smart jump",
-    icon: symbolIcon2("connector.smartJump"),
+    icon: connectorAssetIcon("SmartJump"),
     valueSource: { kind: "itemProperty", property: "smartJump" },
     editor: { kind: "toggle", trueLabel: "On", falseLabel: "Off" },
     invoke: { kind: "setProperty", property: "smartJump" }
@@ -44520,7 +44563,7 @@ var connectorToolControls = [
   {
     id: "toolSmartJump",
     label: "Smart jump",
-    icon: symbolIcon2("connector.smartJump"),
+    icon: connectorAssetIcon("SmartJump"),
     valueSource: { kind: "toolProperty", property: "smartJump" },
     editor: { kind: "toggle", trueLabel: "On", falseLabel: "Off" },
     invoke: { kind: "toolProperty", property: "smartJump" }
@@ -44532,21 +44575,21 @@ var connectorOverlay = {
     {
       id: "connector.switchPointers",
       label: "Switch arrows",
-      icon: symbolIcon2("connector.switchPointers"),
+      icon: connectorAssetIcon("SwitchPointers"),
       target: "selection",
       invoke: { kind: "operation", class: "Connector", method: "switchPointers" }
     },
     {
       id: "connector.style",
       label: "Connector style",
-      icon: symbolIcon2("connector.style"),
+      icon: connectorAssetIcon("Style"),
       target: "each",
       controls: connectorStyleControls,
       groups: [
         {
           id: "connectorStyle",
           label: "Connector style",
-          icon: symbolIcon2("connector.style"),
+          icon: connectorAssetIcon("Style"),
           controlIds: connectorStyleControls.map((control) => control.id)
         }
       ]
@@ -44556,7 +44599,7 @@ var connectorOverlay = {
     {
       id: "connectorArrows",
       label: "Arrows",
-      icon: symbolIcon2("connector.style"),
+      icon: connectorAssetIcon("Style"),
       actionIds: ["connector.switchPointers", "connector.style"]
     }
   ]
@@ -44568,8 +44611,7 @@ var addConnectorToolOverlay = {
   createsItemType: "Connector",
   family: "connector",
   icon: {
-    kind: "symbol",
-    key: "tool.connector",
+    ...connectorAssetIcon("Tool"),
     state: {
       swatch: { kind: "toolProperty", property: "lineColor" },
       note: "UI can tint or swatch the connector icon from the pending line color."
@@ -44581,14 +44623,14 @@ var addConnectorToolOverlay = {
       {
         id: "connectorToolQuickDefaults",
         label: "Connector quick defaults",
-        icon: symbolIcon2("connector.lineStyle.straight"),
+        icon: connectorAssetIcon("LineStraight"),
         controlIds: ["toolLineStyle"],
         description: "Primary defaults that match the compact create-surface picker."
       },
       {
         id: "connectorToolAdvancedDefaults",
         label: "Connector defaults",
-        icon: symbolIcon2("connector.style"),
+        icon: connectorAssetIcon("Style"),
         controlIds: connectorToolControls.map((control) => control.id),
         description: "Extended defaults available in richer create flows."
       }
@@ -58735,7 +58777,8 @@ var COLOR_PALETTE2 = [
   "transparent"
 ];
 var inlineShapeAsset = (folder, file2 = folder) => overlayAssetIcon(`src/Items/Shape/Basic/${folder}/${file2}.icon.svg`);
-var symbolIcon3 = (key) => overlaySymbolIcon(key);
+var localShapeIcon = (file2) => overlayAssetIcon(`src/Items/Shape/icons/${file2}.icon.svg`);
+var bpmnIcon = (folder) => overlayAssetIcon(`src/Items/Shape/BPMN/${folder}/${folder}.icon.svg`);
 var BASIC_INLINE_OPTIONS = [
   { id: "rectangle", label: "Rectangle", value: "Rectangle", icon: inlineShapeAsset("Rectangle"), family: "basicShapes" },
   { id: "rounded-rectangle", label: "Rounded rectangle", value: "RoundedRectangle", icon: inlineShapeAsset("RoundedRectangle"), family: "basicShapes" },
@@ -58745,48 +58788,48 @@ var BASIC_INLINE_OPTIONS = [
 ];
 var SHAPE_CATALOG_OPTIONS = [
   ...BASIC_INLINE_OPTIONS,
-  { id: "reversed-triangle", label: "Reversed triangle", value: "ReversedTriangle", icon: symbolIcon3("shape.reversedTriangle"), family: "basicShapes" },
+  { id: "reversed-triangle", label: "Reversed triangle", value: "ReversedTriangle", icon: localShapeIcon("ReversedTriangle"), family: "basicShapes" },
   { id: "arrow-left", label: "Arrow left", value: "ArrowLeft", icon: inlineShapeAsset("ArrowLeft"), family: "basicShapes" },
   { id: "arrow-right", label: "Arrow right", value: "ArrowRight", icon: inlineShapeAsset("ArrowRight"), family: "basicShapes" },
   { id: "arrow-left-right", label: "Arrow left right", value: "ArrowLeftRight", icon: inlineShapeAsset("ArrowLeftRight"), family: "basicShapes" },
-  { id: "arrow-block-left", label: "Arrow block left", value: "ArrowBlockLeft", icon: symbolIcon3("shape.arrowBlockLeft"), family: "basicShapes" },
-  { id: "arrow-block-right", label: "Arrow block right", value: "ArrowBlockRight", icon: symbolIcon3("shape.arrowBlockRight"), family: "basicShapes" },
+  { id: "arrow-block-left", label: "Arrow block left", value: "ArrowBlockLeft", icon: localShapeIcon("ArrowBlockLeft"), family: "basicShapes" },
+  { id: "arrow-block-right", label: "Arrow block right", value: "ArrowBlockRight", icon: localShapeIcon("ArrowBlockRight"), family: "basicShapes" },
   { id: "cloud", label: "Cloud", value: "Cloud", icon: inlineShapeAsset("Cloud"), family: "basicShapes" },
   { id: "cross", label: "Cross", value: "Cross", icon: inlineShapeAsset("Cross"), family: "basicShapes" },
   { id: "cylinder", label: "Cylinder", value: "Cylinder", icon: inlineShapeAsset("Cylinder"), family: "basicShapes" },
   { id: "hexagon", label: "Hexagon", value: "Hexagon", icon: inlineShapeAsset("Hexagon"), family: "basicShapes" },
   { id: "octagon", label: "Octagon", value: "Octagon", icon: inlineShapeAsset("Octagon"), family: "basicShapes" },
   { id: "parallelogram", label: "Parallelogram", value: "Parallelogram", icon: inlineShapeAsset("Parallelogram"), family: "basicShapes" },
-  { id: "reversed-parallelogram", label: "Reversed parallelogram", value: "ReversedParallelogram", icon: symbolIcon3("shape.reversedParallelogram"), family: "basicShapes" },
+  { id: "reversed-parallelogram", label: "Reversed parallelogram", value: "ReversedParallelogram", icon: localShapeIcon("ReversedParallelogram"), family: "basicShapes" },
   { id: "pentagon", label: "Pentagon", value: "Pentagon", icon: inlineShapeAsset("Pentagon"), family: "basicShapes" },
-  { id: "predefined-process", label: "Predefined process", value: "PredefinedProcess", icon: symbolIcon3("shape.predefinedProcess"), family: "basicShapes" },
+  { id: "predefined-process", label: "Predefined process", value: "PredefinedProcess", icon: localShapeIcon("PredefinedProcess"), family: "basicShapes" },
   { id: "speech-bubble", label: "Speech bubble", value: "SpeachBubble", icon: inlineShapeAsset("SpeachBubble"), family: "basicShapes" },
   { id: "star", label: "Star", value: "Star", icon: inlineShapeAsset("Star"), family: "basicShapes" },
   { id: "trapezoid", label: "Trapezoid", value: "Trapezoid", icon: inlineShapeAsset("Trapezoid"), family: "basicShapes" },
   { id: "braces-left", label: "Braces left", value: "BracesLeft", icon: inlineShapeAsset("BracesLeft", "BracesLeft"), family: "basicShapes" },
   { id: "braces-right", label: "Braces right", value: "BracesRight", icon: inlineShapeAsset("BracesRight", "BracesRight"), family: "basicShapes" },
-  { id: "bpmn-task", label: "BPMN task", value: "BPMN_Task", icon: symbolIcon3("shape.bpmn.task"), family: "bpmn" },
-  { id: "bpmn-gateway", label: "BPMN gateway", value: "BPMN_Gateway", icon: symbolIcon3("shape.bpmn.gateway"), family: "bpmn" },
-  { id: "bpmn-gateway-parallel", label: "BPMN gateway parallel", value: "BPMN_GatewayParallel", icon: symbolIcon3("shape.bpmn.gatewayParallel"), family: "bpmn" },
-  { id: "bpmn-gateway-xor", label: "BPMN gateway XOR", value: "BPMN_GatewayXOR", icon: symbolIcon3("shape.bpmn.gatewayXor"), family: "bpmn" },
-  { id: "bpmn-start-event", label: "BPMN start event", value: "BPMN_StartEvent", icon: symbolIcon3("shape.bpmn.startEvent"), family: "bpmn" },
-  { id: "bpmn-start-event-non-interrupting", label: "BPMN start event non interrupting", value: "BPMN_StartEventNoneInterrupting", icon: symbolIcon3("shape.bpmn.startEventNoneInterrupting"), family: "bpmn" },
-  { id: "bpmn-end-event", label: "BPMN end event", value: "BPMN_EndEvent", icon: symbolIcon3("shape.bpmn.endEvent"), family: "bpmn" },
-  { id: "bpmn-intermediate-event", label: "BPMN intermediate event", value: "BPMN_IntermediateEvent", icon: symbolIcon3("shape.bpmn.intermediateEvent"), family: "bpmn" },
-  { id: "bpmn-intermediate-event-none-interrupting", label: "BPMN intermediate event none interrupting", value: "BPMN_IntermediateEventNoneInterrupting", icon: symbolIcon3("shape.bpmn.intermediateEventNoneInterrupting"), family: "bpmn" },
-  { id: "bpmn-data-object", label: "BPMN data object", value: "BPMN_DataObject", icon: symbolIcon3("shape.bpmn.dataObject"), family: "bpmn" },
-  { id: "bpmn-data-store", label: "BPMN data store", value: "BPMN_DataStore", icon: symbolIcon3("shape.bpmn.dataStore"), family: "bpmn" },
-  { id: "bpmn-participant", label: "BPMN participant", value: "BPMN_Participant", icon: symbolIcon3("shape.bpmn.participant"), family: "bpmn" },
-  { id: "bpmn-transaction", label: "BPMN transaction", value: "BPMN_Transaction", icon: symbolIcon3("shape.bpmn.transaction"), family: "bpmn" },
-  { id: "bpmn-event-subprocess", label: "BPMN event subprocess", value: "BPMN_EventSubprocess", icon: symbolIcon3("shape.bpmn.eventSubprocess"), family: "bpmn" },
-  { id: "bpmn-group", label: "BPMN group", value: "BPMN_Group", icon: symbolIcon3("shape.bpmn.group"), family: "bpmn" },
-  { id: "bpmn-annotation", label: "BPMN annotation", value: "BPMN_Annotation", icon: symbolIcon3("shape.bpmn.annotation"), family: "bpmn" }
+  { id: "bpmn-task", label: "BPMN task", value: "BPMN_Task", icon: bpmnIcon("BPMN_Task"), family: "bpmn" },
+  { id: "bpmn-gateway", label: "BPMN gateway", value: "BPMN_Gateway", icon: bpmnIcon("BPMN_Gateway"), family: "bpmn" },
+  { id: "bpmn-gateway-parallel", label: "BPMN gateway parallel", value: "BPMN_GatewayParallel", icon: bpmnIcon("BPMN_GatewayParallel"), family: "bpmn" },
+  { id: "bpmn-gateway-xor", label: "BPMN gateway XOR", value: "BPMN_GatewayXOR", icon: bpmnIcon("BPMN_GatewayXOR"), family: "bpmn" },
+  { id: "bpmn-start-event", label: "BPMN start event", value: "BPMN_StartEvent", icon: bpmnIcon("BPMN_StartEvent"), family: "bpmn" },
+  { id: "bpmn-start-event-non-interrupting", label: "BPMN start event non interrupting", value: "BPMN_StartEventNoneInterrupting", icon: bpmnIcon("BPMN_StartEventNoneInterrupting"), family: "bpmn" },
+  { id: "bpmn-end-event", label: "BPMN end event", value: "BPMN_EndEvent", icon: bpmnIcon("BPMN_EndEvent"), family: "bpmn" },
+  { id: "bpmn-intermediate-event", label: "BPMN intermediate event", value: "BPMN_IntermediateEvent", icon: bpmnIcon("BPMN_IntermediateEvent"), family: "bpmn" },
+  { id: "bpmn-intermediate-event-none-interrupting", label: "BPMN intermediate event none interrupting", value: "BPMN_IntermediateEventNoneInterrupting", icon: bpmnIcon("BPMN_IntermediateEventNoneInterrupting"), family: "bpmn" },
+  { id: "bpmn-data-object", label: "BPMN data object", value: "BPMN_DataObject", icon: bpmnIcon("BPMN_DataObject"), family: "bpmn" },
+  { id: "bpmn-data-store", label: "BPMN data store", value: "BPMN_DataStore", icon: bpmnIcon("BPMN_DataStore"), family: "bpmn" },
+  { id: "bpmn-participant", label: "BPMN participant", value: "BPMN_Participant", icon: bpmnIcon("BPMN_Participant"), family: "bpmn" },
+  { id: "bpmn-transaction", label: "BPMN transaction", value: "BPMN_Transaction", icon: bpmnIcon("BPMN_Transaction"), family: "bpmn" },
+  { id: "bpmn-event-subprocess", label: "BPMN event subprocess", value: "BPMN_EventSubprocess", icon: bpmnIcon("BPMN_EventSubprocess"), family: "bpmn" },
+  { id: "bpmn-group", label: "BPMN group", value: "BPMN_Group", icon: bpmnIcon("BPMN_Group"), family: "bpmn" },
+  { id: "bpmn-annotation", label: "BPMN annotation", value: "BPMN_Annotation", icon: bpmnIcon("BPMN_Annotation"), family: "bpmn" }
 ];
 var BORDER_STYLE_OPTIONS = [
-  { 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") }
+  { id: "solid", label: "Solid", value: "solid", icon: localShapeIcon("StrokeSolid") },
+  { id: "dot", label: "Dot", value: "dot", icon: localShapeIcon("StrokeDot") },
+  { id: "dash", label: "Dash", value: "dash", icon: localShapeIcon("StrokeDash") },
+  { id: "long-dash", label: "Long dash", value: "longDash", icon: localShapeIcon("StrokeLongDash") }
 ];
 var shapeTypeControl = {
   id: "shapeType",
@@ -58819,10 +58862,6 @@ var fillControl = {
     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,
@@ -58873,7 +58912,7 @@ var shapeOverlay = {
     {
       id: "shape.shapeType",
       label: "Shape type",
-      icon: symbolIcon3("shape.type"),
+      icon: localShapeIcon("Type"),
       target: "each",
       controls: [shapeTypeControl]
     },
@@ -58904,13 +58943,13 @@ var shapeOverlay = {
     {
       id: "shapeTypeSection",
       label: "Type",
-      icon: symbolIcon3("shape.type"),
+      icon: localShapeIcon("Type"),
       actionIds: ["shape.shapeType"]
     },
     {
       id: "shapeAppearanceSection",
       label: "Appearance",
-      icon: symbolIcon3("shape.stroke"),
+      icon: localShapeIcon("Stroke"),
       actionIds: ["shape.fill", "shape.strokeStyle"]
     }
   ]
@@ -58922,7 +58961,7 @@ var addShapeToolOverlay = {
   createsItemType: "Shape",
   family: "shape",
   icon: {
-    ...overlaySymbolIcon("tool.shape"),
+    ...overlayAssetIcon("src/Items/Shape/icons/Tool.icon.svg"),
     state: {
       note: "UI may swap the top-level icon to the selected shape option when desired."
     }
@@ -63355,6 +63394,68 @@ var propertyOps = {
   }
 };
 
+// src/Tools/Tool.ts
+class Tool {
+  leftButtonDown() {
+    return false;
+  }
+  leftButtonUp() {
+    return false;
+  }
+  leftButtonDouble() {
+    return false;
+  }
+  rightButtonDown() {
+    return false;
+  }
+  rightButtonUp() {
+    return false;
+  }
+  rightButtonDouble() {
+    return false;
+  }
+  middleButtonDown() {
+    return false;
+  }
+  middleButtonUp() {
+    return false;
+  }
+  middleButtonDouble() {
+    return false;
+  }
+  keyDown(_key) {
+    return false;
+  }
+  keyUp(_key) {
+    return false;
+  }
+  pointerMoveBy(_x, _y) {
+    return false;
+  }
+  pointerDown() {
+    return false;
+  }
+  pointerUp() {
+    return false;
+  }
+  onCancel() {}
+  onConfirm() {}
+  render(_context) {}
+}
+
+// src/Tools/BoardTool.ts
+class BoardTool extends Tool {
+  board;
+  constructor(board) {
+    super();
+    this.board = board;
+  }
+}
+
+// src/Tools/WorkflowTool.ts
+class WorkflowTool extends BoardTool {
+}
+
 // src/Items/Card/CardOverlay.ts
 var cardOverlay = {
   itemType: "Card",
@@ -63362,14 +63463,14 @@ var cardOverlay = {
     {
       id: "card.flip",
       label: "Flip card",
-      icon: overlaySymbolIcon("card.flip"),
+      icon: overlayAssetIcon("src/Items/Card/icons/Flip.icon.svg"),
       target: "each",
       invoke: { kind: "customMethod", methodName: "toggleIsOpen" }
     },
     {
       id: "card.rotateCcw",
       label: "Rotate 90 counter clockwise",
-      icon: overlaySymbolIcon("card.rotateCcw"),
+      icon: overlayAssetIcon("src/Items/Card/icons/RotateCcw.icon.svg"),
       target: "each",
       invoke: {
         kind: "customMethod",
@@ -63380,7 +63481,7 @@ var cardOverlay = {
     {
       id: "card.rotateCw",
       label: "Rotate 90 clockwise",
-      icon: overlaySymbolIcon("card.rotateCw"),
+      icon: overlayAssetIcon("src/Items/Card/icons/RotateCw.icon.svg"),
       target: "each",
       invoke: {
         kind: "customMethod",
@@ -63390,6 +63491,73 @@ var cardOverlay = {
     }
   ]
 };
+var addCardToolOverlay = {
+  toolName: "AddCard",
+  label: "Card",
+  kind: "create",
+  createsItemType: "Card",
+  family: "game",
+  icon: overlayAssetIcon("src/Items/Card/icons/Tool.icon.svg"),
+  launch: {
+    kind: "workflow",
+    workflow: {
+      kind: "property-sheet",
+      description: "Upload front and back images for one or more cards.",
+      submitLabel: "Create cards",
+      controls: [
+        {
+          id: "cardArtwork",
+          label: "Card artwork",
+          editor: {
+            kind: "asset-upload",
+            mode: "paired",
+            fields: [
+              {
+                id: "face",
+                label: "Front",
+                accept: ["image/*"],
+                required: true
+              },
+              {
+                id: "back",
+                label: "Back",
+                accept: ["image/*"],
+                required: true
+              }
+            ]
+          }
+        }
+      ],
+      submit: {
+        kind: "create-items",
+        itemType: "Card",
+        strategy: "per-upload-entry",
+        placement: "stagger-from-pointer",
+        properties: [
+          {
+            property: "faceUrl",
+            source: { kind: "uploadField", controlId: "cardArtwork", fieldId: "face" }
+          },
+          {
+            property: "backsideUrl",
+            source: { kind: "uploadField", controlId: "cardArtwork", fieldId: "back" }
+          }
+        ]
+      }
+    }
+  },
+  surface: {
+    order: 4,
+    group: {
+      id: "gameItems",
+      label: "Game items",
+      icon: overlayAssetIcon("src/Items/Dice/icons/Tool.icon.svg"),
+      order: 1,
+      behavior: "open-panel"
+    },
+    relatedToolNames: ["AddDice", "AddScreen", "AddPouch"]
+  }
+};
 
 // src/Items/Card/Card.ts
 var defaultCardData = {
@@ -63584,6 +63752,11 @@ registerItem({
   defaultData: defaultCardData,
   overlay: cardOverlay
 });
+registerTool({
+  name: "AddCard",
+  tool: WorkflowTool,
+  overlay: addCardToolOverlay
+});
 registerHotkey({
   name: "Rotate90deg",
   hotkey: { key: { button: "KeyQ", shift: true }, label: { windows: "Shift+Q", mac: "⇧Q" } },
@@ -63634,28 +63807,28 @@ var deckOverlay = {
     {
       id: "deck.getTopCard",
       label: "Draw top card",
-      icon: overlaySymbolIcon("deck.drawTop"),
+      icon: overlayAssetIcon("src/Items/Deck/icons/DrawTop.icon.svg"),
       target: "single",
       invoke: { kind: "customMethod", methodName: "getTopCard" }
     },
     {
       id: "deck.getBottomCard",
       label: "Draw bottom card",
-      icon: overlaySymbolIcon("deck.drawBottom"),
+      icon: overlayAssetIcon("src/Items/Deck/icons/DrawBottom.icon.svg"),
       target: "single",
       invoke: { kind: "customMethod", methodName: "getBottomCard" }
     },
     {
       id: "deck.getRandomCard",
       label: "Draw random card",
-      icon: overlaySymbolIcon("deck.drawRandom"),
+      icon: overlayAssetIcon("src/Items/Deck/icons/DrawRandom.icon.svg"),
       target: "single",
       invoke: { kind: "customMethod", methodName: "getRandomCard" }
     },
     {
       id: "deck.getCards",
       label: "Draw cards",
-      icon: overlaySymbolIcon("deck.drawMany"),
+      icon: overlayAssetIcon("src/Items/Deck/icons/DrawMany.icon.svg"),
       target: "single",
       controls: [
         {
@@ -63677,14 +63850,14 @@ var deckOverlay = {
     {
       id: "deck.shuffle",
       label: "Shuffle",
-      icon: overlaySymbolIcon("deck.shuffle"),
+      icon: overlayAssetIcon("src/Items/Deck/icons/Shuffle.icon.svg"),
       target: "single",
       invoke: { kind: "customMethod", methodName: "shuffleDeck" }
     },
     {
       id: "deck.flip",
       label: "Flip deck",
-      icon: overlaySymbolIcon("deck.flip"),
+      icon: overlayAssetIcon("src/Items/Deck/icons/Flip.icon.svg"),
       target: "single",
       invoke: { kind: "customMethod", methodName: "flipDeck" }
     }
@@ -63693,7 +63866,7 @@ var deckOverlay = {
 var createDeckSelectionAction = {
   id: "deck.createFromSelection",
   label: "Create deck",
-  icon: overlaySymbolIcon("deck.createFromSelection"),
+  icon: overlayAssetIcon("src/Items/Deck/icons/CreateFromSelection.icon.svg"),
   description: "Stacks selected cards into a new deck, or merges selected cards and decks into one deck.",
   invoke: { kind: "selectionMethod", methodName: "createDeck" },
   isAvailable: (items) => {
@@ -64090,64 +64263,6 @@ registerHotkey({
   }
 });
 registerSelectionAction(createDeckSelectionAction);
-// src/Tools/Tool.ts
-class Tool {
-  leftButtonDown() {
-    return false;
-  }
-  leftButtonUp() {
-    return false;
-  }
-  leftButtonDouble() {
-    return false;
-  }
-  rightButtonDown() {
-    return false;
-  }
-  rightButtonUp() {
-    return false;
-  }
-  rightButtonDouble() {
-    return false;
-  }
-  middleButtonDown() {
-    return false;
-  }
-  middleButtonUp() {
-    return false;
-  }
-  middleButtonDouble() {
-    return false;
-  }
-  keyDown(_key) {
-    return false;
-  }
-  keyUp(_key) {
-    return false;
-  }
-  pointerMoveBy(_x, _y) {
-    return false;
-  }
-  pointerDown() {
-    return false;
-  }
-  pointerUp() {
-    return false;
-  }
-  onCancel() {}
-  onConfirm() {}
-  render(_context) {}
-}
-
-// src/Tools/BoardTool.ts
-class BoardTool extends Tool {
-  board;
-  constructor(board) {
-    super();
-    this.board = board;
-  }
-}
-
 // src/Tools/CustomTool.ts
 class CustomTool extends BoardTool {
   name;
@@ -64262,14 +64377,14 @@ var diceOverlay = {
     {
       id: "dice.throw",
       label: "Throw dice",
-      icon: overlaySymbolIcon("dice.throw"),
+      icon: overlayAssetIcon("src/Items/Dice/icons/Throw.icon.svg"),
       target: "each",
       invoke: { kind: "customMethod", methodName: "throwDice" }
     },
     {
       id: "dice.range",
       label: "Range",
-      icon: overlaySymbolIcon("dice.range"),
+      icon: overlayAssetIcon("src/Items/Dice/icons/Range.icon.svg"),
       target: "each",
       controls: [
         {
@@ -64310,7 +64425,7 @@ var diceOverlay = {
     {
       id: "diceActions",
       label: "Dice",
-      icon: overlaySymbolIcon("dice.throw"),
+      icon: overlayAssetIcon("src/Items/Dice/icons/Throw.icon.svg"),
       actionIds: ["dice.throw", "dice.range", "dice.fill"]
     }
   ]
@@ -64321,14 +64436,14 @@ var addDiceToolOverlay = {
   kind: "create",
   createsItemType: "Dice",
   family: "game",
-  icon: overlaySymbolIcon("tool.dice"),
+  icon: overlayAssetIcon("src/Items/Dice/icons/Tool.icon.svg"),
   launch: { kind: "activate-tool" },
   surface: {
     order: 1,
     group: {
       id: "gameItems",
       label: "Game items",
-      icon: overlaySymbolIcon("tool.dice"),
+      icon: overlayAssetIcon("src/Items/Dice/icons/Tool.icon.svg"),
       order: 1,
       behavior: "open-panel"
     },
@@ -64681,7 +64796,7 @@ var screenOverlay = {
       id: "screen.background",
       label: "Background",
       icon: {
-        ...overlaySymbolIcon("screen.background"),
+        ...overlayAssetIcon("src/Items/Screen/icons/Background.icon.svg"),
         state: { swatch: { kind: "itemProperty", property: "backgroundColor" } }
       },
       target: "each",
@@ -64703,7 +64818,7 @@ var screenOverlay = {
       id: "screen.stroke",
       label: "Stroke",
       icon: {
-        ...overlaySymbolIcon("shape.stroke"),
+        ...overlayAssetIcon("src/Items/Shape/icons/Stroke.icon.svg"),
         state: { swatch: { kind: "itemProperty", property: "borderColor" } }
       },
       target: "each",
@@ -64739,7 +64854,7 @@ var screenOverlay = {
         {
           id: "screenStrokeStyle",
           label: "Stroke",
-          icon: overlaySymbolIcon("shape.stroke"),
+          icon: overlayAssetIcon("src/Items/Shape/icons/Stroke.icon.svg"),
           controlIds: ["borderColor", "borderWidth"]
         }
       ]
@@ -64747,7 +64862,7 @@ var screenOverlay = {
     {
       id: "screen.backgroundImage",
       label: "Background image",
-      icon: overlaySymbolIcon("screen.backgroundImage"),
+      icon: overlayAssetIcon("src/Items/Screen/icons/BackgroundImage.icon.svg"),
       target: "each",
       when: {
         kind: "falsy",
@@ -64770,7 +64885,7 @@ var screenOverlay = {
     {
       id: "screen.removeBackgroundImage",
       label: "Remove background image",
-      icon: overlaySymbolIcon("screen.backgroundImage.remove"),
+      icon: overlayAssetIcon("src/Items/Screen/icons/BackgroundImageRemove.icon.svg"),
       target: "each",
       when: {
         kind: "truthy",
@@ -64787,7 +64902,7 @@ var screenOverlay = {
     {
       id: "screenAppearance",
       label: "Appearance",
-      icon: overlaySymbolIcon("screen.background"),
+      icon: overlayAssetIcon("src/Items/Screen/icons/Background.icon.svg"),
       actionIds: ["screen.background", "screen.stroke", "screen.backgroundImage", "screen.removeBackgroundImage"]
     }
   ]
@@ -64798,14 +64913,14 @@ var addScreenToolOverlay = {
   kind: "create",
   createsItemType: "Screen",
   family: "container",
-  icon: overlaySymbolIcon("tool.screen"),
+  icon: overlayAssetIcon("src/Items/Screen/icons/Tool.icon.svg"),
   launch: { kind: "activate-tool" },
   surface: {
     order: 2,
     group: {
       id: "gameItems",
       label: "Game items",
-      icon: overlaySymbolIcon("tool.dice"),
+      icon: overlayAssetIcon("src/Items/Dice/icons/Tool.icon.svg"),
       order: 1,
       behavior: "open-panel"
     },
@@ -64818,14 +64933,14 @@ var addPouchToolOverlay = {
   kind: "create",
   createsItemType: "Screen",
   family: "container",
-  icon: overlaySymbolIcon("tool.pouch"),
+  icon: overlayAssetIcon("src/Items/Screen/icons/Pouch.icon.svg"),
   launch: { kind: "activate-tool" },
   surface: {
     order: 3,
     group: {
       id: "gameItems",
       label: "Game items",
-      icon: overlaySymbolIcon("tool.dice"),
+      icon: overlayAssetIcon("src/Items/Dice/icons/Tool.icon.svg"),
       order: 1,
       behavior: "open-panel"
     },
@@ -67951,6 +68066,125 @@ class Presence {
   }
 }
 
+// src/Selection/SelectionOverlay.ts
+function everyItemHasRichText(items) {
+  return items.length > 0 && items.every((item) => !!item.getRichText?.());
+}
+registerSelectionAction({
+  id: "selection.delete",
+  label: "Delete",
+  icon: overlayAssetIcon("src/Overlay/icons/Delete.icon.svg"),
+  description: "Removes the selected items from the board.",
+  invoke: { kind: "selectionMethod", methodName: "removeFromBoard" },
+  isAvailable: (items) => items.length > 0
+});
+registerSelectionAction({
+  id: "selection.duplicate",
+  label: "Duplicate",
+  icon: overlayAssetIcon("src/Overlay/icons/Duplicate.icon.svg"),
+  description: "Duplicates the selected items.",
+  invoke: { kind: "selectionMethod", methodName: "duplicate" },
+  isAvailable: (items) => items.length > 0
+});
+registerSelectionAction({
+  id: "selection.lock",
+  label: "Lock",
+  icon: overlayAssetIcon("src/Overlay/icons/Lock.icon.svg"),
+  description: "Locks the selected items.",
+  invoke: { kind: "selectionMethod", methodName: "lock" },
+  isAvailable: (items) => items.length > 0 && !items.some((item) => item.transformation.isLocked)
+});
+registerSelectionAction({
+  id: "selection.unlock",
+  label: "Unlock",
+  icon: overlayAssetIcon("src/Overlay/icons/Unlock.icon.svg"),
+  description: "Unlocks the selected items.",
+  invoke: { kind: "selectionMethod", methodName: "unlock" },
+  isAvailable: (items) => items.some((item) => item.transformation.isLocked)
+});
+registerSelectionAction({
+  id: "selection.bringToFront",
+  label: "Bring to front",
+  icon: overlayAssetIcon("src/Overlay/icons/BringToFront.icon.svg"),
+  description: "Moves the selection above overlapping items.",
+  invoke: { kind: "selectionMethod", methodName: "bringToFront" },
+  isAvailable: (items) => items.length > 0
+});
+registerSelectionAction({
+  id: "selection.sendToBack",
+  label: "Send to back",
+  icon: overlayAssetIcon("src/Overlay/icons/SendToBack.icon.svg"),
+  description: "Moves the selection behind overlapping items.",
+  invoke: { kind: "selectionMethod", methodName: "sendToBack" },
+  isAvailable: (items) => items.length > 0
+});
+registerSelectionAction({
+  id: "selection.text.fontSize",
+  label: "Font size",
+  icon: styleFontSizeIcon(),
+  invoke: { kind: "selectionMethod", methodName: "setFontSize" },
+  controls: [
+    {
+      id: "fontSize",
+      label: "Font size",
+      valueSource: { kind: "selectionProperty", property: "getFontSize" },
+      editor: {
+        kind: "number-stepper",
+        min: 8,
+        max: 144,
+        step: 1,
+        presets: [12, 14, 16, 18, 24, 32, 48],
+        unit: "px"
+      },
+      invoke: { kind: "selectionMethod", methodName: "setFontSize" }
+    }
+  ],
+  isAvailable: everyItemHasRichText
+});
+registerSelectionAction({
+  id: "selection.text.color",
+  label: "Text color",
+  icon: styleColorIcon({
+    swatch: { kind: "selectionProperty", property: "getFontColor" }
+  }),
+  invoke: { kind: "selectionMethod", methodName: "setFontColor" },
+  controls: [
+    {
+      id: "fontColor",
+      label: "Text color",
+      valueSource: { kind: "selectionProperty", property: "getFontColor" },
+      editor: {
+        kind: "color",
+        palette: ["#111111", "#FFFFFF", "#E11D48", "#2563EB", "#16A34A", "#F59E0B"]
+      },
+      invoke: { kind: "selectionMethod", methodName: "setFontColor" }
+    }
+  ],
+  isAvailable: everyItemHasRichText
+});
+registerSelectionAction({
+  id: "selection.text.highlight",
+  label: "Highlight",
+  icon: {
+    ...overlayAssetIcon("src/Items/Screen/icons/Background.icon.svg"),
+    state: { swatch: { kind: "selectionProperty", property: "getFontHighlight" } }
+  },
+  invoke: { kind: "selectionMethod", methodName: "setFontHighlight" },
+  controls: [
+    {
+      id: "fontHighlight",
+      label: "Highlight",
+      valueSource: { kind: "selectionProperty", property: "getFontHighlight" },
+      editor: {
+        kind: "color",
+        palette: ["transparent", "#FEF08A", "#FDBA74", "#BFDBFE", "#FBCFE8", "#D9F99D"]
+      },
+      invoke: { kind: "selectionMethod", methodName: "setFontHighlight" }
+    }
+  ],
+  isAvailable: everyItemHasRichText
+});
+
 // src/Selection/SelectionItems.ts
 class SelectionItems {
   items = new Map;
@@ -72790,7 +73024,7 @@ var addDrawingToolOverlay = {
   family: "drawing",
   createsItemType: "Drawing",
   icon: {
-    ...overlaySymbolIcon("tool.pen"),
+    ...overlayAssetIcon("src/Items/Drawing/icons/Pen.icon.svg"),
     state: {
       swatch: { kind: "toolProperty", property: "strokeColor" },
       note: "UI can show the pending pen color in the icon."
@@ -72802,7 +73036,7 @@ var addDrawingToolOverlay = {
       {
         id: "drawingDefaults",
         label: "Pen defaults",
-        icon: overlaySymbolIcon("tool.pen"),
+        icon: overlayAssetIcon("src/Items/Drawing/icons/Pen.icon.svg"),
         controlIds: strokeControls2.map((control) => control.id)
       }
     ]
@@ -72813,7 +73047,7 @@ var addDrawingToolOverlay = {
     group: {
       id: "drawingTools",
       label: "Drawing",
-      icon: overlaySymbolIcon("tool.pen"),
+      icon: overlayAssetIcon("src/Items/Drawing/icons/Pen.icon.svg"),
       order: 5,
       behavior: "activate-last-used"
     },
@@ -72827,7 +73061,7 @@ var addHighlighterToolOverlay = {
   family: "drawing",
   createsItemType: "Drawing",
   icon: {
-    ...overlaySymbolIcon("tool.highlighter"),
+    ...overlayAssetIcon("src/Items/Drawing/icons/Highlighter.icon.svg"),
     state: {
       swatch: { kind: "toolProperty", property: "strokeColor" },
       note: "UI can show the pending highlighter color in the icon."
@@ -72839,7 +73073,7 @@ var addHighlighterToolOverlay = {
       {
         id: "highlighterDefaults",
         label: "Highlighter defaults",
-        icon: overlaySymbolIcon("tool.highlighter"),
+        icon: overlayAssetIcon("src/Items/Drawing/icons/Highlighter.icon.svg"),
         controlIds: strokeControls2.map((control) => control.id)
       }
     ]
@@ -72850,7 +73084,7 @@ var addHighlighterToolOverlay = {
     group: {
       id: "drawingTools",
       label: "Drawing",
-      icon: overlaySymbolIcon("tool.pen"),
+      icon: overlayAssetIcon("src/Items/Drawing/icons/Pen.icon.svg"),
       order: 5,
       behavior: "activate-last-used"
     },
@@ -72862,7 +73096,7 @@ var eraserToolOverlay = {
   label: "Eraser",
   kind: "mode",
   family: "drawing",
-  icon: overlaySymbolIcon("tool.eraser"),
+  icon: overlayAssetIcon("src/Items/Drawing/icons/Eraser.icon.svg"),
   defaults: {
     controls: [
       {
@@ -72886,7 +73120,7 @@ var eraserToolOverlay = {
     group: {
       id: "drawingTools",
       label: "Drawing",
-      icon: overlaySymbolIcon("tool.pen"),
+      icon: overlayAssetIcon("src/Items/Drawing/icons/Pen.icon.svg"),
       order: 5,
       behavior: "activate-last-used"
     },
@@ -73091,7 +73325,7 @@ var frameTypeOptions = Object.keys(Frames).map((frameType) => ({
   id: frameType,
   label: frameType === "Custom" ? "Custom" : Frames[frameType].name,
   value: frameType,
-  icon: overlaySymbolIcon(`frame.${frameType}`)
+  icon: overlayAssetIcon(frameType === "Custom" ? "src/Items/Frame/Basic/Custom/Custom.icon.svg" : frameType === "A4" ? "src/Items/Frame/Basic/A4/A4.icon.svg" : frameType === "Letter" ? "src/Items/Frame/Basic/Letter/Letter.icon.svg" : frameType === "Frame16x9" ? "src/Items/Frame/Basic/16-9/16-9.icon.svg" : frameType === "Frame4x3" ? "src/Items/Frame/Basic/4-3/4-3.icon.svg" : frameType === "Frame1x1" ? "src/Items/Frame/Basic/1-1/1-1.icon.svg" : frameType === "Frame3x2" ? "src/Items/Frame/Basic/3-2/3-2.icon.svg" : "src/Items/Frame/Basic/9-18/9-18.icon.svg")
 }));
 var addFrameToolOverlay = {
   toolName: "AddFrame",
@@ -73099,7 +73333,7 @@ var addFrameToolOverlay = {
   kind: "create",
   createsItemType: "Frame",
   family: "frame",
-  icon: overlaySymbolIcon("tool.frame"),
+  icon: overlayAssetIcon("src/Items/Frame/Frame.icon.svg"),
   defaults: {
     controls: [
       {
@@ -73481,7 +73715,7 @@ var addStickerToolOverlay = {
   createsItemType: "Sticker",
   family: "sticker",
   icon: {
-    ...overlaySymbolIcon("tool.sticker"),
+    ...overlayAssetIcon("src/Items/Sticker/Path/Sticker.icon.svg"),
     state: {
       swatch: { kind: "toolProperty", property: "backgroundColor" }
     }