Add toolbox library page with editable examples

website/src/features/toolboxes/modules/ChecklistModule.jsx

@@ -246,7 +246,7 @@ function getSectionHideWhenComplete(section, globalHide) {
 }
 
 function keepChecklistSection(section) {
-  return section.items.length || section.title;
+  return section.items.length;
 }
 
 function getChecklistReorderItems(sections) {

website/src/features/toolboxes/modules/CombosModule.jsx

@@ -143,7 +143,7 @@ function getComboCategory(combo) {
   return String(combo?.category || "").trim();
 }
 
-function setComboCategory(combo, category) {
+function setComboItemCategory(combo, category) {
   const nextCombo = { ...combo };
   if (category) nextCombo.category = category;
   else delete nextCombo.category;
@@ -292,7 +292,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
     getDropPlacement,
     shouldShowGroupBoundaries
   } = useGroupedReorder({
-    namespace: "combos",
+    namespace: `combos-${moduleId}`,
     items: data.combos,
     getItemId: (combo) => combo.id,
     getItemGroup: getComboCategory,
@@ -334,7 +334,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
       groupOrderKey: "categoryOrder",
       collapsedGroupsKey: "collapsedCategories",
       getItemGroup: getComboCategory,
-      setItemGroup: setComboCategory
+      setItemGroup: setComboItemCategory
     }));
   }
 
@@ -595,7 +595,7 @@ export function CombosModule({ toolboxId, moduleId, context, editing }) {
             </button>
             <h3>{category}</h3>
           </div>
-          <div>
+          <div className="checklist-section-actions">
             <span>{group.combos.length}</span>
             <button
               className="checklist-section-collapse-button"

website/src/features/toolboxes/modules/CountersModule.jsx

@@ -69,7 +69,7 @@ export function CountersModule({ toolboxId, moduleId, context, editing }) {
             >
               <Icon name="drag" />
             </button>
-            <div>
+            <div className="counter-value">
               <strong>{counter.value}</strong>
               <span>{counter.label}</span>
             </div>