module categories

Author: jacobanana

src/components/Palette.jsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
 import { useSynthStore } from "../store/useSynthStore.js";
-import { paletteList } from "../modules/_registry.js";
+import { paletteGroups } from "../modules/_registry.js";
 import { usePuzzleConfig } from "../content/puzzleHooks.js";
 
-// Free-mode palette: lists every module type listed in PALETTE_ORDER
-// (see _registry.js), in array order. Each click adds a fresh instance to
+// Free-mode palette: lists every module type in PALETTE_GROUPS
+// (see _registry.js), grouped by category in display order. Each click adds a fresh instance to
 // the store; the bridge picks it up on reconcile. Collapsible — the header
 // is a button that toggles the list. Collapse state is purely local (no
 // store/persist) because it's a transient UI preference.
@@ -24,7 +24,7 @@ export function Palette() {
   // Puzzle mode owns the module set (journey deltas) and the layout (auto-snap),
   // so an "Add module" affordance has nothing useful to do — hide it entirely.
   if (puzzle) return null;
-  const items = paletteList();
+  const groups = paletteGroups();
 
   return (
     <aside className={"palette" + (open ? "" : " collapsed")}>
@@ -39,16 +39,21 @@ export function Palette() {
       </button>
       {open && (
         <div className="palette-list">
-          {items.map((m) => (
-            <button
-              key={m.type}
-              className={"palette-item " + (m.Cls.KIND === "control" ? "control" : "audio")}
-              onClick={() => addModuleInstance(m.type, m.defaults())}
-              title={`Add ${m.meta.title}`}
-            >
-              <span className="plus" aria-hidden="true">+</span>
-              <span className="palette-name">{m.meta.title}</span>
-            </button>
+          {groups.map((g) => (
+            <div className="palette-group" key={g.key}>
+              <div className="palette-group-head">{g.label}</div>
+              {g.items.map((m) => (
+                <button
+                  key={m.type}
+                  className={"palette-item " + (m.Cls.KIND === "control" ? "control" : "audio")}
+                  onClick={() => addModuleInstance(m.type, m.defaults())}
+                  title={`Add ${m.meta.title}`}
+                >
+                  <span className="plus" aria-hidden="true">+</span>
+                  <span className="palette-name">{m.meta.title}</span>
+                </button>
+              ))}
+            </div>
           ))}
         </div>
       )}

src/modules/_registry.js

@@ -33,29 +33,44 @@ export const MODULES = [
   Inverter, CvMixer, Attenuator, Attenuverter, Offset, AudioMixer,
 ];
 
-// Palette order. Membership = inclusion; index = display order. Modules absent
-// from this array don't appear in the palette. `output` is intentionally
-// excluded — every patch has exactly one Output module which the store
-// guarantees, so it isn't user-addable.
-const PALETTE_ORDER = [
-  "oscillator", "filter", "audiomixer", "amp", "env", "arenv", "adenv", "lfo",
-  "keyboard", "trigger", "clock", "drumseq", "counter", "counter3", "multiplexer", "mux8", "quantizer",
-  "inverter", "attenuator", "attenuverter", "cvmixer", "offset",
+// Palette grouping. Modules are organised into categories; within each group
+// the `types` order is the display order, and the groups themselves display
+// top-to-bottom in array order. Membership here = palette inclusion: a module
+// absent from every group doesn't appear in the palette. `output` is
+// intentionally excluded — every patch has exactly one Output module which the
+// store guarantees, so it isn't user-addable.
+const PALETTE_GROUPS = [
+  { key: "audio",      label: "Audio",      types: ["oscillator", "filter", "audiomixer", "amp"] },
+  { key: "modulation", label: "Modulation", types: ["env", "arenv", "adenv", "lfo"] },
+  { key: "trigger",    label: "Trigger",    types: ["keyboard", "trigger", "clock", "drumseq"] },
+  { key: "logic",      label: "Logic",      types: ["counter", "counter3", "multiplexer", "mux8"] },
+  { key: "utility",    label: "Utility",    types: ["quantizer", "inverter", "attenuator", "attenuverter", "cvmixer", "offset"] },
 ];
 
+// Flattened palette order, derived from the groups.
+const PALETTE_ORDER = PALETTE_GROUPS.flatMap((g) => g.types);
+
 // Validate at import time. A malformed manifest crashes startup loudly
 // instead of producing silent UI/audio bugs deep in some lookup.
 for (const m of MODULES) validateManifest(m);
 if (new Set(PALETTE_ORDER).size !== PALETTE_ORDER.length) {
-  throw new Error(`[modules] PALETTE_ORDER contains duplicates: ${PALETTE_ORDER.join(", ")}`);
+  throw new Error(`[modules] PALETTE_GROUPS contains duplicate types: ${PALETTE_ORDER.join(", ")}`);
 }
 for (const type of PALETTE_ORDER) {
   if (!MODULES.some((m) => m.type === type)) {
-    throw new Error(`[modules] PALETTE_ORDER references unknown module type: ${type}`);
+    throw new Error(`[modules] PALETTE_GROUPS references unknown module type: ${type}`);
   }
 }
 
 const _byTypeMap = new Map(MODULES.map((m) => [m.type, m]));
 
 export const byType      = (type) => _byTypeMap.get(type) || null;
 export const paletteList = () => PALETTE_ORDER.map((type) => _byTypeMap.get(type));
+// Same modules as paletteList(), but bucketed by category for a grouped UI:
+// [{ key, label, items: Manifest[] }, …] in display order.
+export const paletteGroups = () =>
+  PALETTE_GROUPS.map((g) => ({
+    key: g.key,
+    label: g.label,
+    items: g.types.map((type) => _byTypeMap.get(type)),
+  }));

src/modules/_types.js

@@ -20,7 +20,7 @@
  * @property {string} placard                    HTML body shown in the narrator on click
  * @property {*} [glyph]                         m-head silkscreen SVG element (or null)
  *
- * Free-mode palette membership/order lives in `_registry.js` (PALETTE_ORDER).
+ * Free-mode palette membership/order/category lives in `_registry.js` (PALETTE_GROUPS).
  */
 
 const REQUIRED_FIELDS = ["type", "Cls", "Panel", "meta", "defaults", "placard"];

src/styles/global.css

@@ -1539,7 +1539,9 @@ body.module-dragging * { cursor: grabbing !important; }
 .palette {
   position: absolute;
   left: 18px; bottom: 18px;
-  width: 184px;
+  /* Wide enough for two columns of items; capped to the viewport (keeping the
+     18px left/right margins) so it never overflows on a narrow phone. */
+  width: min(340px, calc(100vw - 36px));
   /* The "Add module" head sits at the bottom; padding-bottom (7px) is the
      gap between the head and the palette's outer bottom edge. Collapsed
      state mirrors this value top-and-bottom so the head's vertical
@@ -1599,6 +1601,25 @@ body.module-dragging * { cursor: grabbing !important; }
   flex: 1 1 auto;
   min-height: 0;
 }
+/* Category buckets within the list. Items flow in a 2-column grid so the
+   list stays short; the head spans both columns as a band above its items. */
+.palette-group {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 6px;
+  align-content: start;
+}
+.palette-group-head {
+  grid-column: 1 / -1;
+  font-family: var(--f-mono);
+  font-size: 9px; letter-spacing: var(--t-tracking-eyebrow); text-transform: uppercase;
+  color: var(--ink-quiet);
+  padding-bottom: 2px;
+  border-bottom: 1px solid var(--ink-rule);
+}
+/* First group's head hugs the list top; later heads get breathing room
+   above so the categories read as distinct bands. */
+.palette-group + .palette-group { margin-top: 6px; }
 .palette-item {
   font-family: var(--f-sans);
   font-size: 13px; letter-spacing: 0;