test(styles): STYLE-005 StyleAnalyzer unit tests (17 cases)

Covers: hex/rgb color detection, spacing detection, variant candidate
threshold logic, toSuggestions ordering, stable IDs, edge cases.

Infra note: tests in tests/models/ — use 'npm run test:editor' not
'npx jest' directly (webpack build required by test-editor.ts script).
'npx jest' alone hangs on webpack. Move tests to tests/models/ not
tests/services/ — transform config only covers models/ path.

dev-docs/tasks/phase-9-styles-overhaul/PROGRESS-richard.md

@@ -1,38 +1,72 @@
-# Phase 9 Progress — Richard
+# Phase 9: Styles Overhaul — Richard's Progress
 
-**Branch:** cline-dev-richard
+_Branch: `cline-dev-richard`_
-**Last Updated:** 2026-02-18
 
-## Completed This Sprint
+---
 
-| Task              | Name                         | Completed  | Notes                                                                                           |
+## Sprint 1 — 18 Feb 2026
-| ----------------- | ---------------------------- | ---------- | ----------------------------------------------------------------------------------------------- |
-| STYLE-001 Phase 3 | TokenPicker Component        | 2026-02-18 | noodl-core-ui — searchable grouped dropdown with colour swatches, clear button, category filter |
-| STYLE-001 Phase 4 | Preview CSS Injection        | 2026-02-18 | PreviewTokenInjector singleton + CanvasView dom-ready hook + ProjectDesignTokenContext wiring   |
-| CLEANUP-000H      | Migration Wizard SCSS Polish | 2026-02-18 | All 8 SCSS files replaced with design token versions (removed 2112 lines of hardcoded CSS)      |
 
-## In Progress
+### STYLE-005: Smart Style Suggestion Engine ✅ (committed 05379c9)
 
-| Task           | Name                           | Started | Blocker                        |
+**Files created:**
-| -------------- | ------------------------------ | ------- | ------------------------------ |
-| STYLE-005      | Smart Style Suggestions V1     | -       | Needs fresh context window     |
-| ~~WIZARD-001~~ | ~~Project Creation Wizard V1~~ | ~~-~~   | ~~Needs fresh context window~~ |
 
-## Decisions & Learnings
+- `packages/noodl-editor/src/editor/src/services/StyleAnalyzer/types.ts` — TypeScript interfaces: `ElementReference`, `RepeatedValue`, `VariantCandidate`, `StyleAnalysisResult`, `StyleSuggestion`, `StyleAnalysisOptions`, `TokenModelLike`, `SUGGESTION_THRESHOLDS`
+- `packages/noodl-editor/src/editor/src/services/StyleAnalyzer/StyleAnalyzer.ts` — Static analyzer class:
+  - `analyzeProject(options?)` — scans all visual nodes for repeated raw colors/spacing (threshold: 3) and variant candidates (threshold: 3 overrides)
+  - `analyzeNode(nodeId)` — per-node analysis for property panel integration
+  - `toSuggestions(result)` — converts analysis to ordered `StyleSuggestion[]`
+  - `TokenModelLike` injected via options to avoid static singleton coupling
+- `packages/noodl-editor/src/editor/src/services/StyleAnalyzer/SuggestionActionHandler.ts` — `executeSuggestionAction()`:
+  - repeated-color/spacing → calls `tokenModel.setToken()` + replaces all occurrences with `var(--token-name)`
+  - variant-candidate → sets `_variant` param on node
+- `packages/noodl-editor/src/editor/src/services/StyleAnalyzer/index.ts` — barrel export
+- `packages/noodl-core-ui/src/components/StyleSuggestions/SuggestionBanner.tsx` — Compact banner UI (accept / ignore / never-show)
+- `packages/noodl-core-ui/src/components/StyleSuggestions/SuggestionBanner.module.scss` — Styled with CSS tokens only
+- `packages/noodl-core-ui/src/components/StyleSuggestions/index.ts` — barrel export
+- `packages/noodl-editor/src/editor/src/hooks/useStyleSuggestions.ts` — Hook: runs analyzer on mount, exposes `activeSuggestion`, `pendingCount`, `dismissSession`, `dismissPermanent`, `refresh`
 
-- **[2026-02-18] Sprint 1 started on cline-dev-richard.**
+**Pending (next session):**
 
-- **[2026-02-18] STYLE-001 Phase 4 injection architecture:**
+- Unit tests for `StyleAnalyzer` (value detection, threshold logic, `toSuggestions` ordering)
+- Wire `SuggestionBanner` into `ElementStyleSection` / property panel
+- Consider debounced auto-refresh on `componentAdded`/`nodeParametersChanged` events
 
-  - `PreviewTokenInjector.attachModel(model)` → subscribes to `tokensChanged`
+---
-  - `PreviewTokenInjector.notifyDomReady(webview)` → called from `CanvasView` on `dom-ready`
-  - Injects `<style id="noodl-design-tokens">` into preview webview via `executeJavaScript`
-  - Cleanup via `clearWebview()` on CanvasView dispose
 
-- **[2026-02-18] CLEANUP-000H — Migration wizard had 2112 lines of hardcoded CSS.** Replaced with ~455 lines of fully token-based SCSS with sensible fallbacks for tokens not yet defined (e.g. `--theme-color-success`, `--theme-color-danger`). Note: `color-mix()` is used for tinted backgrounds — requires a modern browser/webview (Electron's Chromium should support this).
+## Previously Completed (before Sprint 1)
 
-- **[2026-02-18] WIZARD-001 DONE (commit d9acb41).** `ProjectCreationWizard` replaces `CreateProjectModal` with a 3-mode guided flow (Quick Start, Guided Setup, AI Builder stub). Drop-in API — `ProjectsPage.tsx` needed only an import-name swap. Files: `WizardContext.tsx` (state machine), 4 step components, main container, SCSS, index. 17 unit tests in `tests/models/ProjectCreationWizard.test.ts`. **Richard to verify in Electron** (open "Create project" from the launcher).
+### STYLE-001: Token System Enhancement ✅
 
-- **[2026-02-18] Jest infra gotcha:** Unit tests in `tests/models/` only run via `npm run test:editor` (uses the Babel TS transform wired in `scripts/test-editor.ts`). Running `npx jest` directly fails with "Cannot use import statement outside a module" because the root Jest config has no TS transform. Pre-existing broken tests in `tests/components/` and `tests/git/` cause `test-editor` to exit non-zero — those are not mine and predate this sprint.
+- `StyleTokensModel` — CRUD for design tokens
+- `TokenResolver` — resolves CSS var references
+- `DEFAULT_TOKENS` — baseline token set
+- `TOKEN_CATEGORIES` / `TOKEN_CATEGORY_GROUPS` — category definitions
 
-- **[2026-02-18] FOR NEXT SESSION:** Remaining Phase 9: STYLE-005 (Smart Style Suggestions V1). Then Phase 6 UBA system (UBA-001 through UBA-004). All need fresh context windows.
+### STYLE-002: Element Configs ✅
+
+- `ElementConfigRegistry` — maps node types to `ElementConfig`
+- `ButtonConfig`, `GroupConfig`, `TextConfig`, `TextInputConfig`, `CheckboxConfig`
+- `VariantSelector` component
+
+### STYLE-003: Style Presets ✅
+
+- `StylePresetsModel` — manages presets
+- 5 presets: Modern, Minimal, Playful, Enterprise, Soft
+- `PresetCard`, `PresetSelector` UI components
+
+### STYLE-004: Property Panel Integration ✅
+
+- `ElementStyleSection` — groups style props with token picker
+- `SizePicker` — visual size selector
+- `TokenPicker` — token autocomplete input
+- Property panel HTML + TS wired up
+
+---
+
+## Outstanding Issues
+
+| Issue                                                                                        | Status                                              |
+| -------------------------------------------------------------------------------------------- | --------------------------------------------------- |
+| `StyleTokensModel.setToken()` — verify method name matches actual API                        | ⚠️ Needs verification before action handler is used |
+| `node.setParameter()` / `node.getParameter()` — verify these are valid NodeGraphNode methods | ⚠️ Needs verification                               |
+| StyleAnalyzer unit tests                                                                     | 📋 Planned                                          |

packages/noodl-editor/tests/models/StyleAnalyzer.test.ts

@@ -0,0 +1,294 @@
+/**
+ * STYLE-005: StyleAnalyzer Unit Tests
+ *
+ * Tests the pure logic of the analyzer — value detection, threshold handling,
+ * and suggestion generation — without touching Electron or the real ProjectModel.
+ */
+
+import { describe, it, expect, beforeEach, jest } from '@jest/globals';
+
+import { StyleAnalyzer } from '../../src/editor/src/services/StyleAnalyzer/StyleAnalyzer';
+
+// ─── Mock ProjectModel before importing StyleAnalyzer ───────────────────────
+
+type MockNode = {
+  id: string;
+  typename: string;
+  parameters: Record<string, unknown>;
+};
+
+let mockNodes: MockNode[] = [];
+
+jest.mock('@noodl-models/projectmodel', () => ({
+  ProjectModel: {
+    instance: {
+      getComponents: () => [
+        {
+          forEachNode: (cb: (node: MockNode) => void) => {
+            mockNodes.forEach(cb);
+          }
+        }
+      ],
+      findNodeWithId: (id: string) => mockNodes.find((n) => n.id === id) ?? null
+    }
+  }
+}));
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function makeNode(id: string, typename: string, params: Record<string, unknown>): MockNode {
+  return { id, typename, parameters: params };
+}
+
+function resetNodes(...nodes: MockNode[]) {
+  mockNodes = nodes;
+}
+
+// ─── Tests ────────────────────────────────────────────────────────────────────
+
+describe('StyleAnalyzer', () => {
+  beforeEach(() => {
+    mockNodes = [];
+  });
+
+  // ─── Color Detection ───────────────────────────────────────────────────────
+
+  describe('repeated color detection', () => {
+    it('does NOT flag a value that appears fewer than 3 times', () => {
+      resetNodes(
+        makeNode('n1', 'Group', { backgroundColor: '#3b82f6' }),
+        makeNode('n2', 'Group', { backgroundColor: '#3b82f6' })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      expect(result.repeatedColors).toHaveLength(0);
+    });
+
+    it('flags a hex color appearing 3+ times', () => {
+      resetNodes(
+        makeNode('n1', 'Group', { backgroundColor: '#3b82f6' }),
+        makeNode('n2', 'Group', { backgroundColor: '#3b82f6' }),
+        makeNode('n3', 'Group', { backgroundColor: '#3b82f6' })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      expect(result.repeatedColors).toHaveLength(1);
+      expect(result.repeatedColors[0].value).toBe('#3b82f6');
+      expect(result.repeatedColors[0].count).toBe(3);
+    });
+
+    it('ignores CSS var() references — they are already tokenised', () => {
+      resetNodes(
+        makeNode('n1', 'Group', { backgroundColor: 'var(--primary)' }),
+        makeNode('n2', 'Group', { backgroundColor: 'var(--primary)' }),
+        makeNode('n3', 'Group', { backgroundColor: 'var(--primary)' })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      expect(result.repeatedColors).toHaveLength(0);
+    });
+
+    it('handles rgb() and rgba() color values', () => {
+      const color = 'rgb(59, 130, 246)';
+      resetNodes(
+        makeNode('n1', 'Group', { backgroundColor: color }),
+        makeNode('n2', 'Group', { backgroundColor: color }),
+        makeNode('n3', 'Group', { backgroundColor: color })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      expect(result.repeatedColors).toHaveLength(1);
+      expect(result.repeatedColors[0].value).toBe(color);
+    });
+
+    it('groups by exact value — different shades are separate suggestions', () => {
+      resetNodes(
+        makeNode('n1', 'Group', { backgroundColor: '#3b82f6' }),
+        makeNode('n2', 'Group', { backgroundColor: '#3b82f6' }),
+        makeNode('n3', 'Group', { backgroundColor: '#3b82f6' }),
+        makeNode('n4', 'Group', { backgroundColor: '#2563eb' }),
+        makeNode('n5', 'Group', { backgroundColor: '#2563eb' }),
+        makeNode('n6', 'Group', { backgroundColor: '#2563eb' })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      expect(result.repeatedColors).toHaveLength(2);
+    });
+  });
+
+  // ─── Spacing Detection ─────────────────────────────────────────────────────
+
+  describe('repeated spacing detection', () => {
+    it('flags px spacing appearing 3+ times', () => {
+      resetNodes(
+        makeNode('n1', 'Group', { paddingTop: '16px' }),
+        makeNode('n2', 'Group', { paddingTop: '16px' }),
+        makeNode('n3', 'Group', { paddingTop: '16px' })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      expect(result.repeatedSpacing).toHaveLength(1);
+      expect(result.repeatedSpacing[0].value).toBe('16px');
+    });
+
+    it('flags rem spacing', () => {
+      resetNodes(
+        makeNode('n1', 'Group', { paddingLeft: '1rem' }),
+        makeNode('n2', 'Group', { paddingLeft: '1rem' }),
+        makeNode('n3', 'Group', { paddingLeft: '1rem' })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      expect(result.repeatedSpacing).toHaveLength(1);
+    });
+
+    it('does NOT flag zero — 0 is universally used and not worth tokenising', () => {
+      // '0' is technically a valid spacing value but would create noise
+      // Our regex requires px/rem/em suffix OR it's just a number
+      // This test ensures we understand the current behaviour
+      resetNodes(
+        makeNode('n1', 'Group', { paddingTop: '0px' }),
+        makeNode('n2', 'Group', { paddingTop: '0px' }),
+        makeNode('n3', 'Group', { paddingTop: '0px' })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      // '0px' IS a raw spacing value — currently flagged. This is expected.
+      // In future we may want to suppress this specific case.
+      expect(result.repeatedSpacing).toHaveLength(1);
+    });
+  });
+
+  // ─── Variant Candidates ────────────────────────────────────────────────────
+
+  describe('variant candidate detection', () => {
+    it('flags a node with 3+ raw style overrides', () => {
+      resetNodes(
+        makeNode('n1', 'net.noodl.controls.button', {
+          backgroundColor: '#3b82f6',
+          color: '#ffffff',
+          borderRadius: '8px'
+        })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      expect(result.variantCandidates).toHaveLength(1);
+      expect(result.variantCandidates[0].overrideCount).toBe(3);
+    });
+
+    it('does NOT flag a node with fewer than 3 raw overrides', () => {
+      resetNodes(
+        makeNode('n1', 'net.noodl.controls.button', {
+          backgroundColor: '#3b82f6',
+          color: '#ffffff'
+        })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      expect(result.variantCandidates).toHaveLength(0);
+    });
+
+    it('does NOT count token references as custom overrides', () => {
+      resetNodes(
+        makeNode('n1', 'net.noodl.controls.button', {
+          backgroundColor: 'var(--primary)', // token — excluded
+          color: 'var(--primary-foreground)', // token — excluded
+          borderRadius: '8px', // raw — counts
+          paddingTop: '12px', // raw — counts
+          fontSize: '14px' // raw — counts
+        })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      // 3 raw overrides → IS a candidate
+      expect(result.variantCandidates).toHaveLength(1);
+      expect(result.variantCandidates[0].overrideCount).toBe(3);
+    });
+  });
+
+  // ─── toSuggestions ────────────────────────────────────────────────────────
+
+  describe('toSuggestions()', () => {
+    it('orders suggestions by count descending', () => {
+      resetNodes(
+        // 4 occurrences of red
+        makeNode('n1', 'Group', { backgroundColor: '#ff0000' }),
+        makeNode('n2', 'Group', { backgroundColor: '#ff0000' }),
+        makeNode('n3', 'Group', { backgroundColor: '#ff0000' }),
+        makeNode('n4', 'Group', { backgroundColor: '#ff0000' }),
+        // 3 occurrences of blue
+        makeNode('n5', 'Group', { backgroundColor: '#0000ff' }),
+        makeNode('n6', 'Group', { backgroundColor: '#0000ff' }),
+        makeNode('n7', 'Group', { backgroundColor: '#0000ff' })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      const suggestions = StyleAnalyzer.toSuggestions(result);
+
+      expect(suggestions[0].repeatedValue?.value).toBe('#ff0000');
+      expect(suggestions[1].repeatedValue?.value).toBe('#0000ff');
+    });
+
+    it('assigns stable IDs to suggestions', () => {
+      resetNodes(
+        makeNode('n1', 'Group', { backgroundColor: '#3b82f6' }),
+        makeNode('n2', 'Group', { backgroundColor: '#3b82f6' }),
+        makeNode('n3', 'Group', { backgroundColor: '#3b82f6' })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      const suggestions = StyleAnalyzer.toSuggestions(result);
+
+      expect(suggestions[0].id).toBe('repeated-color:#3b82f6');
+    });
+
+    it('returns empty array when no issues found', () => {
+      resetNodes(makeNode('n1', 'Group', { backgroundColor: 'var(--primary)' }));
+
+      const result = StyleAnalyzer.analyzeProject();
+      const suggestions = StyleAnalyzer.toSuggestions(result);
+
+      expect(suggestions).toHaveLength(0);
+    });
+  });
+
+  // ─── Edge Cases ───────────────────────────────────────────────────────────
+
+  describe('edge cases', () => {
+    it('returns empty results when there are no nodes', () => {
+      resetNodes();
+
+      const result = StyleAnalyzer.analyzeProject();
+      expect(result.repeatedColors).toHaveLength(0);
+      expect(result.repeatedSpacing).toHaveLength(0);
+      expect(result.variantCandidates).toHaveLength(0);
+    });
+
+    it('does not scan non-visual nodes (e.g. logic nodes without style params)', () => {
+      resetNodes(
+        makeNode('n1', 'For Each', { items: '[1,2,3]' }),
+        makeNode('n2', 'For Each', { items: '[1,2,3]' }),
+        makeNode('n3', 'For Each', { items: '[1,2,3]' })
+      );
+
+      const result = StyleAnalyzer.analyzeProject();
+      expect(result.repeatedColors).toHaveLength(0);
+      expect(result.variantCandidates).toHaveLength(0);
+    });
+
+    it('deduplicates variant candidates if the same node appears in multiple components', () => {
+      // Simulate same node ID coming from two components
+      const node = makeNode('shared-id', 'net.noodl.controls.button', {
+        backgroundColor: '#3b82f6',
+        color: '#fff',
+        borderRadius: '8px'
+      });
+
+      mockNodes = [node, node]; // same node ref twice
+
+      const result = StyleAnalyzer.analyzeProject();
+      // Even though forEachNode visits it twice, we deduplicate by nodeId
+      expect(result.variantCandidates).toHaveLength(1);
+    });
+  });
+});