Add toolbox library page with editable examples

website/src/features/toolboxes/ToolboxPages.jsx

@@ -70,6 +70,7 @@ export function ToolboxesPage({ siteContent, toolboxes, getToolboxGame, actions,
           <p className="eyebrow">{content.eyebrow}</p>
           <h1>{content.title}</h1>
           <p>{content.summary}</p>
+          <a className="button hero-library-button" href="#/library">{content.libraryLink}</a>
         </div>
       </section>
       <section className="toolbar toolbox-actions-row">

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>

website/src/features/toolboxes/storage/toolboxStorage.js

@@ -297,7 +297,7 @@ export function normalizeChecklistData(data) {
   const hideCompletedSections = Boolean(data?.hideCompletedSections);
   const hideCompletedSectionsFully = Boolean(data?.hideCompletedSectionsFully);
   const sections = Array.isArray(data?.sections)
-    ? data.sections.map((section) => normalizeChecklistSection(section)).filter((section) => section.items.length || section.title)
+    ? data.sections.map((section) => normalizeChecklistSection(section)).filter((section) => section.items.length)
     : [];
   const simpleItems = (data?.items || []).map(normalizeChecklistItem).filter((item) => item.label);
   if (!sections.length && simpleItems.length) return { hideCompletedSections, hideCompletedSectionsFully, sections: [{ id: uid("section"), title: "", items: simpleItems }], items: simpleItems };
@@ -505,8 +505,8 @@ export function normalizeTableData(data) {
   for (let rowIndex = 0; rowIndex < rows; rowIndex += 1) {
     for (let columnIndex = 0; columnIndex < columns; columnIndex += 1) {
       const address = tableCellAddress(rowIndex, columnIndex);
-      const value = String(sourceCells[address] || "").trim();
-      if (value) cells[address] = value.slice(0, 500);
+      const value = String(sourceCells[address] || "");
+      if (value.trim()) cells[address] = value.slice(0, 500);
     }
   }
 
@@ -704,7 +704,7 @@ export function compactModuleDataForStorage(type, value) {
   }
   if (type === "checklist") {
     const normalized = normalizeChecklistData(value);
-    const sections = normalized.sections.map(compactChecklistSectionForStorage).filter((section) => section.items.length || section.title);
+    const sections = normalized.sections.map(compactChecklistSectionForStorage).filter((section) => section.items.length);
     if (!sections.length) return null;
     const settings = {
       ...(normalized.hideCompletedSections ? { hideCompletedSections: true } : {}),