microboard-temp 0.14.18 → 0.14.19

package/dist/esm/browser.js

@@ -11498,6 +11498,23 @@ function toLocalTransformOp(op, containerMatrix, itemId) {
       return op;
   }
 }
+// src/Overlay/IconPack.ts
+var OVERLAY_ICON_SPRITE_PATH = "src/Overlay/overlay-icons.svg";
+function overlaySymbolIcon(key) {
+  return {
+    kind: "symbol",
+    key,
+    sourcePath: OVERLAY_ICON_SPRITE_PATH
+  };
+}
+function overlayAssetIcon(path2) {
+  return {
+    kind: "asset",
+    path: path2,
+    mimeType: "image/svg+xml"
+  };
+}
+
 // src/Overlay/OverlayIcons.ts
 var OVERLAY_SYMBOL_KEYS = {
   styleFill: "style.fill",
@@ -11506,7 +11523,7 @@ var OVERLAY_SYMBOL_KEYS = {
   styleFontSize: "style.fontSize"
 };
 function symbolIcon(key, state) {
-  return state ? { kind: "symbol", key, state } : { kind: "symbol", key };
+  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);
@@ -11547,6 +11564,45 @@ function getToolOverlay(toolName) {
 function listToolOverlays() {
   return Object.values(toolOverlays);
 }
+function listCreateSurfaceEntries() {
+  const groupedEntries = new Map;
+  const ungroupedEntries = [];
+  for (const tool of Object.values(toolOverlays)) {
+    const group = tool.surface?.group;
+    if (!group) {
+      ungroupedEntries.push({
+        kind: "tool",
+        tool,
+        order: tool.surface?.order
+      });
+      continue;
+    }
+    const existing = groupedEntries.get(group.id);
+    if (existing) {
+      existing.tools.push(tool);
+      if (existing.order === undefined && group.order !== undefined) {
+        existing.order = group.order;
+      }
+      continue;
+    }
+    groupedEntries.set(group.id, {
+      kind: "group",
+      id: group.id,
+      label: group.label,
+      description: group.description,
+      icon: group.icon,
+      order: group.order,
+      behavior: group.behavior,
+      tools: [tool]
+    });
+  }
+  const sortedGroups = [...groupedEntries.values()].map((group) => ({
+    ...group,
+    tools: [...group.tools].sort(compareToolsBySurfaceOrder)
+  })).sort(compareEntriesByOrder);
+  const sortedUngroupedEntries = [...ungroupedEntries].sort(compareEntriesByOrder);
+  return [...sortedGroups, ...sortedUngroupedEntries];
+}
 function listSelectionActions() {
   return Object.values(selectionActions);
 }
@@ -11556,6 +11612,33 @@ function getSelectionOverlayActions(items) {
 function resolveDynamicOptions(providerId, context) {
   return dynamicOptionsResolvers[providerId]?.(context) ?? [];
 }
+function matchesOverlayCondition(condition, context) {
+  if (!condition) {
+    return true;
+  }
+  switch (condition.kind) {
+    case "equals":
+      return readOverlayValueSource(context, condition.source) === condition.value;
+    case "truthy":
+      return !!readOverlayValueSource(context, condition.source);
+    case "falsy":
+      return !readOverlayValueSource(context, condition.source);
+    case "itemTypeIn":
+      return context.items?.every((item) => condition.itemTypes.includes(item.itemType)) ?? (context.item ? condition.itemTypes.includes(context.item.itemType) : false);
+    case "selectionSize": {
+      const size = context.items?.length ?? (context.item ? 1 : 0);
+      const meetsMin = condition.min === undefined || size >= condition.min;
+      const meetsMax = condition.max === undefined || size <= condition.max;
+      return meetsMin && meetsMax;
+    }
+    case "allOf":
+      return condition.conditions.every((child) => matchesOverlayCondition(child, context));
+    case "anyOf":
+      return condition.conditions.some((child) => matchesOverlayCondition(child, context));
+    case "not":
+      return !matchesOverlayCondition(condition.condition, context);
+  }
+}
 function intersectOverlayActions(items) {
   if (items.length === 0) {
     return [];
@@ -11574,6 +11657,24 @@ function intersectOverlayActions(items) {
   }
   return [...counts.values()].filter((action) => overlays.every((overlay) => overlay.actions.some((candidate) => candidate.id === action.id)) && (action.target !== "single" || items.length === 1));
 }
+function compareToolsBySurfaceOrder(a, b) {
+  const aOrder = a.surface?.order ?? Number.MAX_SAFE_INTEGER;
+  const bOrder = b.surface?.order ?? Number.MAX_SAFE_INTEGER;
+  return aOrder - bOrder || a.label.localeCompare(b.label);
+}
+function compareEntriesByOrder(a, b) {
+  const aOrder = a.order ?? Number.MAX_SAFE_INTEGER;
+  const bOrder = b.order ?? Number.MAX_SAFE_INTEGER;
+  const aLabel = a.label ?? a.tool?.label ?? "";
+  const bLabel = b.label ?? b.tool?.label ?? "";
+  return aOrder - bOrder || aLabel.localeCompare(bLabel);
+}
+function readOverlayValueSource(context, source) {
+  if (source.kind === "itemProperty") {
+    return context.item ? context.item[source.property] : undefined;
+  }
+  return context.tool ? context.tool[source.property] : undefined;
+}
 // src/Items/BaseItem/BaseItem.ts
 class BaseItem {
   static createCommand;
@@ -37558,6 +37659,7 @@ var richTextOverlay = {
       id: "text.fontSize",
       label: "Font size",
       icon: styleFontSizeIcon(),
+      icon: styleFontSizeIcon(),
       target: "each",
       controls: [
         {
@@ -37575,6 +37677,14 @@ var richTextOverlay = {
         }
       ]
     }
+  ],
+  sections: [
+    {
+      id: "textTypography",
+      label: "Typography",
+      icon: overlaySymbolIcon("text.fontSize"),
+      actionIds: ["text.fontSize"]
+    }
   ]
 };
 var addTextToolOverlay = {
@@ -37583,8 +37693,12 @@ var addTextToolOverlay = {
   kind: "create",
   createsItemType: "RichText",
   family: "text",
-  icon: { kind: "symbol", key: "tool.text" },
-  description: "Creates editable rich text. The current first pass has no pre-placement defaults on this tool."
+  icon: overlaySymbolIcon("tool.text"),
+  description: "Creates editable rich text. The current first pass has no pre-placement defaults on this tool.",
+  launch: { kind: "activate-tool" },
+  surface: {
+    order: 6
+  }
 };
 
 // src/Items/RichText/RichText.ts
@@ -44054,7 +44168,7 @@ var COLOR_PALETTE = [
   "#118AB2",
   "#7B61FF"
 ];
-var symbolIcon2 = (key) => ({ kind: "symbol", key });
+var symbolIcon2 = (key) => overlaySymbolIcon(key);
 var lineStyleOptions = ConnectorLineStyles.map((style) => ({
   id: style,
   label: style[0].toUpperCase() + style.slice(1),
@@ -44221,6 +44335,14 @@ var connectorOverlay = {
         }
       ]
     }
+  ],
+  sections: [
+    {
+      id: "connectorArrows",
+      label: "Arrows",
+      icon: symbolIcon2("connector.style"),
+      actionIds: ["connector.switchPointers", "connector.style"]
+    }
   ]
 };
 var addConnectorToolOverlay = {
@@ -44241,12 +44363,24 @@ var addConnectorToolOverlay = {
     controls: connectorToolControls,
     groups: [
       {
-        id: "connectorToolStyle",
+        id: "connectorToolQuickDefaults",
+        label: "Connector quick defaults",
+        icon: symbolIcon2("connector.lineStyle.straight"),
+        controlIds: ["toolLineStyle"],
+        description: "Primary defaults that match the compact create-surface picker."
+      },
+      {
+        id: "connectorToolAdvancedDefaults",
         label: "Connector defaults",
         icon: symbolIcon2("connector.style"),
-        controlIds: connectorToolControls.map((control) => control.id)
+        controlIds: connectorToolControls.map((control) => control.id),
+        description: "Extended defaults available in richer create flows."
       }
     ]
+  },
+  launch: { kind: "activate-tool" },
+  surface: {
+    order: 8
   }
 };
 
@@ -58384,57 +58518,53 @@ var COLOR_PALETTE2 = [
   "#7B61FF",
   "transparent"
 ];
-var inlineShapeAsset = (folder, file2 = folder) => ({
-  kind: "asset",
-  path: `src/Items/Shape/Basic/${folder}/${file2}.icon.svg`,
-  mimeType: "image/svg+xml"
-});
-var symbolIcon3 = (key) => ({ kind: "symbol", key });
+var inlineShapeAsset = (folder, file2 = folder) => overlayAssetIcon(`src/Items/Shape/Basic/${folder}/${file2}.icon.svg`);
+var symbolIcon3 = (key) => overlaySymbolIcon(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") },
-  { id: "circle", label: "Circle", value: "Circle", icon: inlineShapeAsset("Circle") },
-  { id: "triangle", label: "Triangle", value: "Triangle", icon: inlineShapeAsset("Triangle") },
-  { id: "rhombus", label: "Rhombus", value: "Rhombus", icon: inlineShapeAsset("Rhombus") }
+  { id: "rectangle", label: "Rectangle", value: "Rectangle", icon: inlineShapeAsset("Rectangle"), family: "basicShapes" },
+  { id: "rounded-rectangle", label: "Rounded rectangle", value: "RoundedRectangle", icon: inlineShapeAsset("RoundedRectangle"), family: "basicShapes" },
+  { id: "circle", label: "Circle", value: "Circle", icon: inlineShapeAsset("Circle"), family: "basicShapes" },
+  { id: "triangle", label: "Triangle", value: "Triangle", icon: inlineShapeAsset("Triangle"), family: "basicShapes" },
+  { id: "rhombus", label: "Rhombus", value: "Rhombus", icon: inlineShapeAsset("Rhombus"), family: "basicShapes" }
 ];
 var SHAPE_CATALOG_OPTIONS = [
   ...BASIC_INLINE_OPTIONS,
-  { 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: 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: symbolIcon3("shape.reversedParallelogram") },
-  { id: "pentagon", label: "Pentagon", value: "Pentagon", icon: inlineShapeAsset("Pentagon") },
-  { 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: 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") }
+  { id: "reversed-triangle", label: "Reversed triangle", value: "ReversedTriangle", icon: symbolIcon3("shape.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: "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: "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: "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" }
 ];
 var BORDER_STYLE_OPTIONS = [
   { id: "solid", label: "Solid", value: "solid", icon: symbolIcon3("stroke.solid") },
@@ -58449,6 +58579,12 @@ var shapeTypeControl = {
   editor: {
     kind: "enum-icon",
     options: BASIC_INLINE_OPTIONS,
+    layout: "grid",
+    quickOptions: {
+      family: "basicShapes",
+      maxVisible: 18,
+      overflow: "show-more"
+    },
     catalog: {
       kind: "catalog",
       label: "Shape catalog",
@@ -58467,6 +58603,10 @@ 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,
@@ -58543,6 +58683,20 @@ var shapeOverlay = {
         }
       ]
     }
+  ],
+  sections: [
+    {
+      id: "shapeTypeSection",
+      label: "Type",
+      icon: symbolIcon3("shape.type"),
+      actionIds: ["shape.shapeType"]
+    },
+    {
+      id: "shapeAppearanceSection",
+      label: "Appearance",
+      icon: symbolIcon3("shape.stroke"),
+      actionIds: ["shape.fill", "shape.strokeStyle"]
+    }
   ]
 };
 var addShapeToolOverlay = {
@@ -58552,8 +58706,7 @@ var addShapeToolOverlay = {
   createsItemType: "Shape",
   family: "shape",
   icon: {
-    kind: "symbol",
-    key: "tool.shape",
+    ...overlaySymbolIcon("tool.shape"),
     state: {
       note: "UI may swap the top-level icon to the selected shape option when desired."
     }
@@ -58567,6 +58720,12 @@ var addShapeToolOverlay = {
         editor: {
           kind: "enum-icon",
           options: BASIC_INLINE_OPTIONS,
+          layout: "grid",
+          quickOptions: {
+            family: "basicShapes",
+            maxVisible: 18,
+            overflow: "show-more"
+          },
           catalog: {
             kind: "catalog",
             label: "Shape catalog",
@@ -58577,6 +58736,10 @@ var addShapeToolOverlay = {
         invoke: { kind: "toolProperty", property: "type" }
       }
     ]
+  },
+  launch: { kind: "activate-tool" },
+  surface: {
+    order: 7
   }
 };
 
@@ -62983,14 +63146,14 @@ var cardOverlay = {
     {
       id: "card.flip",
       label: "Flip card",
-      icon: { kind: "symbol", key: "card.flip" },
+      icon: overlaySymbolIcon("card.flip"),
       target: "each",
       invoke: { kind: "customMethod", methodName: "toggleIsOpen" }
     },
     {
       id: "card.rotateCcw",
       label: "Rotate 90 counter clockwise",
-      icon: { kind: "symbol", key: "card.rotateCcw" },
+      icon: overlaySymbolIcon("card.rotateCcw"),
       target: "each",
       invoke: {
         kind: "customMethod",
@@ -63001,7 +63164,7 @@ var cardOverlay = {
     {
       id: "card.rotateCw",
       label: "Rotate 90 clockwise",
-      icon: { kind: "symbol", key: "card.rotateCw" },
+      icon: overlaySymbolIcon("card.rotateCw"),
       target: "each",
       invoke: {
         kind: "customMethod",
@@ -63255,28 +63418,28 @@ var deckOverlay = {
     {
       id: "deck.getTopCard",
       label: "Draw top card",
-      icon: { kind: "symbol", key: "deck.drawTop" },
+      icon: overlaySymbolIcon("deck.drawTop"),
       target: "single",
       invoke: { kind: "customMethod", methodName: "getTopCard" }
     },
     {
       id: "deck.getBottomCard",
       label: "Draw bottom card",
-      icon: { kind: "symbol", key: "deck.drawBottom" },
+      icon: overlaySymbolIcon("deck.drawBottom"),
       target: "single",
       invoke: { kind: "customMethod", methodName: "getBottomCard" }
     },
     {
       id: "deck.getRandomCard",
       label: "Draw random card",
-      icon: { kind: "symbol", key: "deck.drawRandom" },
+      icon: overlaySymbolIcon("deck.drawRandom"),
       target: "single",
       invoke: { kind: "customMethod", methodName: "getRandomCard" }
     },
     {
       id: "deck.getCards",
       label: "Draw cards",
-      icon: { kind: "symbol", key: "deck.drawMany" },
+      icon: overlaySymbolIcon("deck.drawMany"),
       target: "single",
       controls: [
         {
@@ -63298,14 +63461,14 @@ var deckOverlay = {
     {
       id: "deck.shuffle",
       label: "Shuffle",
-      icon: { kind: "symbol", key: "deck.shuffle" },
+      icon: overlaySymbolIcon("deck.shuffle"),
       target: "single",
       invoke: { kind: "customMethod", methodName: "shuffleDeck" }
     },
     {
       id: "deck.flip",
       label: "Flip deck",
-      icon: { kind: "symbol", key: "deck.flip" },
+      icon: overlaySymbolIcon("deck.flip"),
       target: "single",
       invoke: { kind: "customMethod", methodName: "flipDeck" }
     }
@@ -63314,7 +63477,7 @@ var deckOverlay = {
 var createDeckSelectionAction = {
   id: "deck.createFromSelection",
   label: "Create deck",
-  icon: { kind: "symbol", key: "deck.createFromSelection" },
+  icon: overlaySymbolIcon("deck.createFromSelection"),
   description: "Stacks selected cards into a new deck, or merges selected cards and decks into one deck.",
   invoke: { kind: "selectionMethod", methodName: "createDeck" },
   isAvailable: (items) => {
@@ -63883,14 +64046,14 @@ var diceOverlay = {
     {
       id: "dice.throw",
       label: "Throw dice",
-      icon: { kind: "symbol", key: "dice.throw" },
+      icon: overlaySymbolIcon("dice.throw"),
       target: "each",
       invoke: { kind: "customMethod", methodName: "throwDice" }
     },
     {
       id: "dice.range",
       label: "Range",
-      icon: { kind: "symbol", key: "dice.range" },
+      icon: overlaySymbolIcon("dice.range"),
       target: "each",
       controls: [
         {
@@ -63926,6 +64089,14 @@ var diceOverlay = {
         }
       ]
     }
+  ],
+  sections: [
+    {
+      id: "diceActions",
+      label: "Dice",
+      icon: overlaySymbolIcon("dice.throw"),
+      actionIds: ["dice.throw", "dice.range", "dice.fill"]
+    }
   ]
 };
 var addDiceToolOverlay = {
@@ -63934,7 +64105,19 @@ var addDiceToolOverlay = {
   kind: "create",
   createsItemType: "Dice",
   family: "game",
-  icon: { kind: "symbol", key: "tool.dice" }
+  icon: overlaySymbolIcon("tool.dice"),
+  launch: { kind: "activate-tool" },
+  surface: {
+    order: 1,
+    group: {
+      id: "gameItems",
+      label: "Game items",
+      icon: overlaySymbolIcon("tool.dice"),
+      order: 1,
+      behavior: "open-panel"
+    },
+    relatedToolNames: ["AddScreen", "AddPouch"]
+  }
 };
 
 // src/Items/Dice/Dice.ts
@@ -64282,8 +64465,7 @@ var screenOverlay = {
       id: "screen.background",
       label: "Background",
       icon: {
-        kind: "symbol",
-        key: "screen.background",
+        ...overlaySymbolIcon("screen.background"),
         state: { swatch: { kind: "itemProperty", property: "backgroundColor" } }
       },
       target: "each",
@@ -64300,6 +64482,97 @@ var screenOverlay = {
           invoke: { kind: "setProperty", property: "backgroundColor" }
         }
       ]
+    },
+    {
+      id: "screen.stroke",
+      label: "Stroke",
+      icon: {
+        ...overlaySymbolIcon("shape.stroke"),
+        state: { swatch: { kind: "itemProperty", property: "borderColor" } }
+      },
+      target: "each",
+      controls: [
+        {
+          id: "borderColor",
+          label: "Border color",
+          valueSource: { kind: "itemProperty", property: "borderColor" },
+          editor: {
+            kind: "color",
+            palette: ["#000000", "#FFFFFF", "#888888", "transparent"],
+            allowTransparent: true,
+            presentation: "square"
+          },
+          invoke: { kind: "setProperty", property: "borderColor" }
+        },
+        {
+          id: "borderWidth",
+          label: "Border width",
+          valueSource: { kind: "itemProperty", property: "borderWidth" },
+          editor: {
+            kind: "number-stepper",
+            min: 0,
+            max: 8,
+            step: 1,
+            presets: [0, 1, 2, 4],
+            unit: "px"
+          },
+          invoke: { kind: "setProperty", property: "borderWidth" }
+        }
+      ],
+      groups: [
+        {
+          id: "screenStrokeStyle",
+          label: "Stroke",
+          icon: overlaySymbolIcon("shape.stroke"),
+          controlIds: ["borderColor", "borderWidth"]
+        }
+      ]
+    },
+    {
+      id: "screen.backgroundImage",
+      label: "Background image",
+      icon: overlaySymbolIcon("screen.backgroundImage"),
+      target: "each",
+      when: {
+        kind: "falsy",
+        source: { kind: "itemProperty", property: "backgroundUrl" }
+      },
+      controls: [
+        {
+          id: "backgroundUrl",
+          label: "Background image",
+          valueSource: { kind: "itemProperty", property: "backgroundUrl" },
+          editor: {
+            kind: "asset-upload",
+            mode: "single",
+            accept: ["image/*"]
+          },
+          invoke: { kind: "setProperty", property: "backgroundUrl" }
+        }
+      ]
+    },
+    {
+      id: "screen.removeBackgroundImage",
+      label: "Remove background image",
+      icon: overlaySymbolIcon("screen.backgroundImage.remove"),
+      target: "each",
+      when: {
+        kind: "truthy",
+        source: { kind: "itemProperty", property: "backgroundUrl" }
+      },
+      invoke: {
+        kind: "customMethod",
+        methodName: "setBackgroundUrl",
+        args: [{ kind: "static", value: "" }]
+      }
+    }
+  ],
+  sections: [
+    {
+      id: "screenAppearance",
+      label: "Appearance",
+      icon: overlaySymbolIcon("screen.background"),
+      actionIds: ["screen.background", "screen.stroke", "screen.backgroundImage", "screen.removeBackgroundImage"]
     }
   ]
 };
@@ -64309,7 +64582,19 @@ var addScreenToolOverlay = {
   kind: "create",
   createsItemType: "Screen",
   family: "container",
-  icon: { kind: "symbol", key: "tool.screen" }
+  icon: overlaySymbolIcon("tool.screen"),
+  launch: { kind: "activate-tool" },
+  surface: {
+    order: 2,
+    group: {
+      id: "gameItems",
+      label: "Game items",
+      icon: overlaySymbolIcon("tool.dice"),
+      order: 1,
+      behavior: "open-panel"
+    },
+    relatedToolNames: ["AddDice", "AddPouch"]
+  }
 };
 var addPouchToolOverlay = {
   toolName: "AddPouch",
@@ -64317,7 +64602,19 @@ var addPouchToolOverlay = {
   kind: "create",
   createsItemType: "Screen",
   family: "container",
-  icon: { kind: "symbol", key: "tool.pouch" }
+  icon: overlaySymbolIcon("tool.pouch"),
+  launch: { kind: "activate-tool" },
+  surface: {
+    order: 3,
+    group: {
+      id: "gameItems",
+      label: "Game items",
+      icon: overlaySymbolIcon("tool.dice"),
+      order: 1,
+      behavior: "open-panel"
+    },
+    relatedToolNames: ["AddDice", "AddScreen"]
+  }
 };
 
 // src/Items/Screen/Screen.ts
@@ -72277,8 +72574,7 @@ var addDrawingToolOverlay = {
   family: "drawing",
   createsItemType: "Drawing",
   icon: {
-    kind: "symbol",
-    key: "tool.pen",
+    ...overlaySymbolIcon("tool.pen"),
     state: {
       swatch: { kind: "toolProperty", property: "strokeColor" },
       note: "UI can show the pending pen color in the icon."
@@ -72290,10 +72586,22 @@ var addDrawingToolOverlay = {
       {
         id: "drawingDefaults",
         label: "Pen defaults",
-        icon: { kind: "symbol", key: "tool.pen" },
+        icon: overlaySymbolIcon("tool.pen"),
         controlIds: strokeControls2.map((control) => control.id)
       }
     ]
+  },
+  launch: { kind: "activate-tool" },
+  surface: {
+    order: 1,
+    group: {
+      id: "drawingTools",
+      label: "Drawing",
+      icon: overlaySymbolIcon("tool.pen"),
+      order: 5,
+      behavior: "activate-last-used"
+    },
+    relatedToolNames: ["AddHighlighter", "Eraser"]
   }
 };
 var addHighlighterToolOverlay = {
@@ -72303,8 +72611,7 @@ var addHighlighterToolOverlay = {
   family: "drawing",
   createsItemType: "Drawing",
   icon: {
-    kind: "symbol",
-    key: "tool.highlighter",
+    ...overlaySymbolIcon("tool.highlighter"),
     state: {
       swatch: { kind: "toolProperty", property: "strokeColor" },
       note: "UI can show the pending highlighter color in the icon."
@@ -72316,10 +72623,22 @@ var addHighlighterToolOverlay = {
       {
         id: "highlighterDefaults",
         label: "Highlighter defaults",
-        icon: { kind: "symbol", key: "tool.highlighter" },
+        icon: overlaySymbolIcon("tool.highlighter"),
         controlIds: strokeControls2.map((control) => control.id)
       }
     ]
+  },
+  launch: { kind: "activate-tool" },
+  surface: {
+    order: 2,
+    group: {
+      id: "drawingTools",
+      label: "Drawing",
+      icon: overlaySymbolIcon("tool.pen"),
+      order: 5,
+      behavior: "activate-last-used"
+    },
+    relatedToolNames: ["AddDrawing", "Eraser"]
   }
 };
 var eraserToolOverlay = {
@@ -72327,7 +72646,7 @@ var eraserToolOverlay = {
   label: "Eraser",
   kind: "mode",
   family: "drawing",
-  icon: { kind: "symbol", key: "tool.eraser" },
+  icon: overlaySymbolIcon("tool.eraser"),
   defaults: {
     controls: [
       {
@@ -72344,6 +72663,18 @@ var eraserToolOverlay = {
         invoke: { kind: "toolProperty", property: "strokeWidth" }
       }
     ]
+  },
+  launch: { kind: "activate-tool" },
+  surface: {
+    order: 3,
+    group: {
+      id: "drawingTools",
+      label: "Drawing",
+      icon: overlaySymbolIcon("tool.pen"),
+      order: 5,
+      behavior: "activate-last-used"
+    },
+    relatedToolNames: ["AddDrawing", "AddHighlighter"]
   }
 };
 
@@ -72544,7 +72875,7 @@ var frameTypeOptions = Object.keys(Frames).map((frameType) => ({
   id: frameType,
   label: frameType === "Custom" ? "Custom" : Frames[frameType].name,
   value: frameType,
-  icon: { kind: "symbol", key: `frame.${frameType}` }
+  icon: overlaySymbolIcon(`frame.${frameType}`)
 }));
 var addFrameToolOverlay = {
   toolName: "AddFrame",
@@ -72552,7 +72883,7 @@ var addFrameToolOverlay = {
   kind: "create",
   createsItemType: "Frame",
   family: "frame",
-  icon: { kind: "symbol", key: "tool.frame" },
+  icon: overlaySymbolIcon("tool.frame"),
   defaults: {
     controls: [
       {
@@ -72566,6 +72897,10 @@ var addFrameToolOverlay = {
         invoke: { kind: "toolProperty", property: "shape" }
       }
     ]
+  },
+  launch: { kind: "activate-tool" },
+  surface: {
+    order: 10
   }
 };
 
@@ -72930,8 +73265,7 @@ var addStickerToolOverlay = {
   createsItemType: "Sticker",
   family: "sticker",
   icon: {
-    kind: "symbol",
-    key: "tool.sticker",
+    ...overlaySymbolIcon("tool.sticker"),
     state: {
       swatch: { kind: "toolProperty", property: "backgroundColor" }
     }
@@ -72942,10 +73276,14 @@ var addStickerToolOverlay = {
         id: "stickerBackgroundColor",
         label: "Color",
         valueSource: { kind: "toolProperty", property: "backgroundColor" },
-        editor: { kind: "color", palette: STICKER_COLORS },
+        editor: { kind: "color", palette: STICKER_COLORS, presentation: "sticker" },
         invoke: { kind: "toolProperty", property: "backgroundColor" }
       }
     ]
+  },
+  launch: { kind: "activate-tool" },
+  surface: {
+    order: 9
   }
 };
 
@@ -75380,12 +75718,16 @@ export {
   positionAbsolutely,
   parsersHTML,
   parseCssRgb,
+  overlaySymbolIcon,
+  overlayAssetIcon,
   omitDefaultProperties,
   messageRouter,
   meetsWCAG_AAA,
   meetsWCAG_AA,
+  matchesOverlayCondition,
   listToolOverlays,
   listSelectionActions,
+  listCreateSurfaceEntries,
   itemOverlays,
   itemFactories2 as itemFactories,
   itemOverlays as itemActions,
@@ -75478,6 +75820,7 @@ export {
   PRESENCE_CLEANUP_USER_TIMER,
   PRESENCE_CLEANUP_IDLE_TIMER,
   OVERLAY_SYMBOL_KEYS,
+  OVERLAY_ICON_SPRITE_PATH,
   MiroItemConverter,
   Mbr,
   Matrix,