@jmruthers/pace-core 0.6.10 → 0.6.11

package/docs/troubleshooting/print-event-name-css-variable-analysis.md

@@ -0,0 +1,217 @@
+# Investigation: `--print-event-name` CSS Variable Not Updating From Default
+
+**Status:** Analysis complete. No code changes until root cause is confirmed.
+
+**Observed behaviour:** Event colours update when the user selects an event (or when "Apply Demo Palette" is used on Styles Showcase), but the text driven by `var(--print-event-name)` (e.g. in `h1::after`) stays as the default `"Event Names not long 2026"` instead of the selected event name (e.g. "Kangaree 2022", "Venture24").
+
+---
+
+## 1. What is failing
+
+- **Symptom:** The CSS custom property `--print-event-name` on `document.documentElement` either is never set to the selected event’s name, or is set and then removed/overwritten, so the UI always shows the default value from `core.css`.
+- **Where it’s consumed:** `packages/core/src/styles/core.css` (e.g. `h1::after { content: var(--print-event-name); }` in a screen-only block, and in print margin boxes).
+- **Default value:** `core.css` sets `--print-event-name: "Event Names not long 2026"` in `@layer base { * { ... } }`.
+
+---
+
+## 2. Data flow (verified in code)
+
+### 2.1 Who can set `--print-event-name`
+
+**Only** `applyPalette(palette, eventName)` in `packages/core/src/theming/runtime.ts` sets it, and **only when `eventName !== undefined`**:
+
+```ts
+if (eventName !== undefined) {
+  root.style.setProperty('--print-event-name', escapeCssCustomPropertyValue(eventName));
+}
+```
+
+So:
+
+- **useEventTheme** (auth mode): subscription calls `applyPalette(normalized, current.event_name ?? '')` → **sets** the variable when there is a selected event with `event_colours`.
+- **useEventTheme** (public mode): main effect calls `applyPalette(normalized, selectedEvent.event_name ?? '')` → **sets** the variable when `event` prop is provided.
+- **StylesShowcasePage** “Apply Demo Palette”: calls `applyPalette(palette)` with **one argument** → **does not set** `--print-event-name` (argument is `undefined`). Colour variables are overwritten; `--print-event-name` is left unchanged.
+
+So the variable is only written by useEventTheme (subscription or public-page effect). Styles Showcase never writes it.
+
+### 2.2 Who can remove `--print-event-name`
+
+**Only** `clearPalette()` in `packages/core/src/theming/runtime.ts` removes it:
+
+```ts
+root.style.removeProperty('--print-event-name');
+```
+
+Call sites:
+
+- **useEventTheme:** subscription when `!current?.event_colours` or when `!normalized`; main effect when on login route or (public mode) when `!selectedEvent` or `!normalized`.
+- **PaceLoginPage:** on mount and when pathname is login.
+- **StylesShowcasePage** “Reset to App Colors”: `resetToAppColors()` → `clearPalette()`.
+
+So the variable is removed only by those three. No other code removes it.
+
+### 2.3 Event data shape
+
+- **Event type** (`packages/core/src/types/event.ts`): `event_name: string` is required.
+- **EventService** RPC response and mapping (`EventService.ts`): `event_name` and `event_colours` are mapped onto the `Event` object.
+- **Header/ContextSelector:** calls `setSelectedEvent(fullEvent || event)` with full event objects from the service.
+
+So selected events used by useEventTheme should have `event_name` and `event_colours` when coming from the event list / RPC.
+
+### 2.4 Subscription flow (auth mode)
+
+- **PaceAppLayout** calls `useEventTheme()` (no `event` prop) → auth mode.
+- **Effect 1** (subscription): subscribes to `eventService`; callback `applyThemeFromService` runs on notify.
+- **EventService.setSelectedEvent(event)** → `this.notify()` → all subscribers run, including `applyThemeFromService`.
+- **applyThemeFromService:**  
+  `current = eventService.getSelectedEvent()` → if `current?.event_colours`, parses colours and calls `applyPalette(normalized, current.event_name ?? '')` → **should set** `--print-event-name`.
+
+So when the user selects an event in the header, the subscription should run and set the variable. Styles Showcase is under PaceAppLayout, so useEventTheme and the subscription are active on that page.
+
+---
+
+## 3. Why it can still show the default
+
+Only two mechanisms can leave the UI showing the default:
+
+1. **Variable never set**  
+   - Subscription never runs with a valid event (e.g. no event selected, or event without `event_colours` / parse failure).  
+   - Or useEventTheme never runs (e.g. wrong route/layout); **not** the case for Styles Showcase (it’s under PaceAppLayout).
+
+2. **Variable set then removed**  
+   - Something calls `clearPalette()` after the subscription (or public-page effect) has set `--print-event-name`.
+
+### 3.1 “Reset to App Colors” on Styles Showcase
+
+- **StylesShowcasePage** “Reset to App Colors” calls `clearPalette()`.
+- That **removes** `--print-event-name` (and colour variables).
+- After that, the default from `core.css` applies, so the UI shows `"Event Names not long 2026"`.
+- The subscription does **not** run again until the user changes the selected event (e.g. picks another event in the header).
+- So: **If the user clicks “Reset to App Colors”, the variable will show the default until they change the event again.** That matches “variable not updating from default” if they never change the event after Reset.
+
+### 3.2 “Apply Demo Palette” on Styles Showcase
+
+- “Apply Demo Palette” calls `applyPalette(demoPalette)` with **no second argument**.
+- So `eventName === undefined` → the `if (eventName !== undefined)` block is **skipped** → `--print-event-name` is **not** set (and not removed).
+- Colour variables are overwritten; `--print-event-name` is left as-is.
+- So:
+  - If the variable was already set (e.g. by subscription) → it stays set; event name still shows.
+  - If the variable was never set or was cleared (e.g. by Reset) → it stays at default; “Event Names not long 2026” still shows.
+
+So “Apply Demo Palette” alone does **not** fix or break the event name; it only explains why colours can change while the name stays default when the variable was never set or was cleared.
+
+### 3.3 Auth-mode main effect (current code)
+
+- In auth mode (`event === undefined`), the main effect in useEventTheme **returns immediately** and does **not** call `clearPalette()` or `applyPalette()`.
+- So the main effect in auth mode **does not** clear `--print-event-name` after the subscription sets it (this was the previous bug that was fixed).
+
+---
+
+## 4. Root cause summary (with certainty)
+
+**Proven:**
+
+1. **Only** `applyPalette(..., eventName)` with `eventName !== undefined` sets `--print-event-name`. So useEventTheme (subscription or public-page effect) is the only code that can set the current event name.
+2. **Only** `clearPalette()` removes it. So useEventTheme (no event / login / parse fail), PaceLoginPage, or Styles Showcase “Reset to App Colors” can clear it.
+3. **Styles Showcase “Apply Demo Palette”** never passes `eventName`, so it **never sets** (and never removes) `--print-event-name`. It only changes colour variables.
+4. **Styles Showcase “Reset to App Colors”** calls `clearPalette()` and **removes** `--print-event-name`, so the default appears and stays until the user changes the event again (which would re-run the subscription and set the variable again).
+
+**Two plausible root causes:**
+
+- **A) User clicked “Reset to App Colors”**  
+  Then `--print-event-name` is cleared. The default is shown and does not “update” until they select an event again (subscription then sets it). If they never change the event after Reset, the variable will stay at default.
+
+- **B) Variable never set in the first place**  
+  Subscription either never runs with a valid event (e.g. no event selected, or event without `event_colours`, or parse failure), or there is another caller that clears the variable after the subscription sets it (only clearPalette call sites above qualify; auth main effect no longer clears).
+
+To distinguish A vs B in practice: after selecting an event (e.g. “Kangaree 2022”), does the text next to the title ever show “Kangaree 2022”? If **yes**, then at some point the variable was set; if it later reverts to default without clicking “Reset to App Colors”, something else would be clearing it (no such path found in code). If **no** (it never shows the selected event name even before any Reset), then the subscription is not setting the variable (e.g. event missing `event_colours`/`event_name`, or parse failing, or subscription not running).
+
+---
+
+## 5. Patterns and anomalies
+
+1. **Asymmetry:** Colour variables are set by both useEventTheme and Styles Showcase “Apply Demo Palette”. `--print-event-name` is set **only** by useEventTheme (when `eventName` is passed). So any code path that applies a palette without passing the event name will update colours but not the event name.
+2. **Styles Showcase:** “Apply Demo Palette” is the only consumer call to `applyPalette` with a single argument. All useEventTheme call sites pass `event_name ?? ''`. So the “no eventName” path is effectively the Styles Showcase demo.
+3. **Single source of removal:** Every removal of `--print-event-name` goes through `clearPalette()`. So any unwanted reset to default implies a `clearPalette()` call (login, no event, parse fail, or “Reset to App Colors”).
+4. **Subscription vs main effect:** In auth mode, only the subscription applies/clears theme; the main effect no longer clears, so there is no “stale null” clear overwriting the subscription.
+
+---
+
+## 6. What to verify before changing code
+
+1. **Repro steps:**  
+   - Select an event (e.g. “Kangaree 2022”) and **do not** click “Reset to App Colors”.  
+   - Check whether the text next to the title (or in `h1::after`) ever shows “Kangaree 2022”.  
+   - If it never does, the subscription path is not setting the variable (event shape, parse, or subscription not running).  
+   - If it does, then click “Reset to App Colors” and confirm the text reverts to the default; that confirms Reset as the clear path.
+
+2. **DevTools:**  
+   - On `<html>`, inspect computed/style and see whether `--print-event-name` is present and what its value is after selecting an event and after “Reset to App Colors”.
+
+3. **Logging:**  
+   - Ensure `[event-theme-diagnostic]` logs in useEventTheme and EventService run when selecting an event and that they show a non-null event with `event_name` and `event_colours` when the variable is expected to be set.
+
+---
+
+## 7. References (file:line or symbol)
+
+| Item | Location |
+|------|----------|
+| Default `--print-event-name` | `packages/core/src/styles/core.css` (e.g. in `@layer base` under `*`) |
+| `h1::after` uses variable | `packages/core/src/styles/core.css` (screen-only block) |
+| Set variable when `eventName !== undefined` | `packages/core/src/theming/runtime.ts` `applyPalette` |
+| Remove variable | `packages/core/src/theming/runtime.ts` `clearPalette` |
+| useEventTheme subscription (auth) | `packages/core/src/hooks/useEventTheme.ts` (first `useEffect`) |
+| useEventTheme main effect (auth early return) | `packages/core/src/hooks/useEventTheme.ts` (second `useEffect`, `event === undefined` return) |
+| Styles Showcase applyPalette (one arg) | `src/pages/StylesShowcasePage.tsx` “Apply Demo Palette” handler |
+| Styles Showcase clearPalette | `src/pages/StylesShowcasePage.tsx` “Reset to App Colors” handler |
+| EventService.setSelectedEvent → notify | `packages/core/src/services/EventService.ts` |
+| BaseService.notify | `packages/core/src/services/base/BaseService.ts` |
+| Event type and RPC mapping (event_name, event_colours) | `packages/core/src/types/event.ts`, `EventService.ts` (e.g. EventRpcResponse and transformedEvents) |
+
+No fixes are proposed in this document; it is analysis only. Fixes should be applied only after the above checks confirm which of (A) or (B) is the actual root cause.
+
+---
+
+## 8. Diagnostic logging (investigation)
+
+Temporary `[print-event-name]` console logs were added (dev only) to trace the flow:
+
+- **runtime.ts**
+  - When `applyPalette` is called **with** `eventName`: logs that `--print-event-name` was set and the value.
+  - When `applyPalette` is called **without** `eventName`: logs that `--print-event-name` was not set.
+  - When `clearPalette` runs: logs that `--print-event-name` was removed.
+- **useEventTheme.ts**
+  - Every time the subscription runs: logs `hasEvent`, `event_id`, `event_name`, `hasEventColours`, and `willAction` (`applyPalette` vs `clearPalette`).
+  - When clearing due to parse failure: logs that parse returned null/undefined.
+
+**How to use:** Run the app in dev, open the console, filter by `[print-event-name]`. Then:
+
+1. Load a page (e.g. Super Admin Test). Note the first run: often `subscription ran` with `hasEvent: false` → `clearPalette removed`.
+2. Select an event from the header dropdown. You should see:
+   - `subscription ran` with `hasEvent: true`, `event_name: "…"`, `willAction: "applyPalette"`.
+   - `applyPalette set --print-event-name: "…"`.
+3. If you never see step 2 after selecting, the subscription is either not running on selection or `getSelectedEvent()` is null when it runs.
+4. If you see `applyPalette set` then later `clearPalette removed`, something is clearing the variable after it is set.
+5. If you see `subscription clearing: parseAndNormalizeEventColours returned null`, the event’s `event_colours` failed to parse and the subscription correctly clears.
+
+Remove or gate these logs once the root cause is fixed.
+
+---
+
+## 9. Root cause (confirmed)
+
+**Logs showed** that `applyPalette set --print-event-name` was called with the correct event names ("One Camp 2026", "Kangaree 2025", "GG Camp 2024"), but the UI still showed the default "Event Names not long 2026".
+
+**Cause:** In `core.css`, the default was set in the **`*` selector**:
+
+```css
+* {
+  --print-event-name: "Event Names not long 2026";
+  /* ... */
+}
+```
+
+That gives **every element** (body, main, h1, etc.) its own `--print-event-name` from the stylesheet. The runtime sets the variable only on **`<html>`** via inline style. When **`h1::after`** uses `var(--print-event-name)`, the value is resolved on **h1**; because h1 is matched by `*`, h1 has the variable set by the stylesheet to the default, so that value is used and the value on html is never seen.
+
+**Fix:** Define the print variables on **`:root` only** (so only the root has the default). Then when the runtime sets the variable on html, descendants have no competing rule and inherit the value from html. In `core.css`, the print variables were moved from the `*` block into a separate `:root { ... }` block.

package/eslint-config-pace-core.cjs

@@ -110,6 +110,7 @@ module.exports = [
       'pace-core-compliance/rbac-use-resource-names-constants': 'error',
       'pace-core-compliance/no-rbac-wrapper-components': 'error',
       'pace-core-compliance/no-rbac-wrapper-functions': 'error',
+      'pace-core-compliance/require-derived-organisation-id': 'warn',
       
       // Standard 7: API & Tech Stack
       'pace-core-compliance/rpc-naming-pattern': 'warn',
@@ -126,6 +127,25 @@ module.exports = [
       }]
     }
   },
+  // Standard 3: Architecture - SRP proxies (source only; consuming app src/; exclude tests)
+  {
+    files: ['src/**/*.{ts,tsx}'],
+    ignores: [
+      '**/__tests__/**',
+      '**/*.{spec,test}.{ts,tsx}',
+      '**/fixtures/**',
+      '**/mocks/**',
+      '**/*.mock.{ts,tsx}',
+      '**/*.template.{ts,tsx}',
+    ],
+    rules: {
+      // Standard 3: SRP proxies (line limits + named exports) — single source
+      'max-lines': ['warn', { max: 1000 }],
+      'max-lines-per-function': ['warn', { max: 400 }],
+      'pace-core-compliance/max-named-exports': ['warn', { max: 10 }],
+      'complexity': ['warn', { max: 30 }],
+    }
+  },
   // Override for Edge Functions (Deno runtime)
   // Edge Functions run in Deno, not React, so they cannot use React hooks
   // They need direct Supabase client access and console.log for debugging

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jmruthers/pace-core",
-  "version": "0.6.10",
+  "version": "0.6.11",
   "description": "React component library with Tailwind v4",
   "private": false,
   "publishConfig": {
@@ -78,7 +78,8 @@
     "./package.json": "./package.json",
     "./core-usage-manifest.json": "./core-usage-manifest.json",
     "./cursor-rules": "./cursor-rules",
-    "./scripts/install-cursor-rules": "./scripts/install-cursor-rules.cjs",
+    "./scripts/setup": "./scripts/setup.cjs",
+    "./scripts/validate": "./scripts/validate.cjs",
     "./source": {
       "import": "./src/index.ts",
       "default": "./src/index.ts"
@@ -159,8 +160,8 @@
     "build": "tsup && node scripts/build-css.js",
     "build:fast": "SKIP_CLEAN=true NODE_ENV=development tsup && node scripts/build-css.js",
     "build:watch": "tsup --watch",
-    "build:docs": "node scripts/build-docs-incremental.js",
-    "build:docs:force": "node scripts/build-docs-incremental.js --force",
+    "build:docs": "node scripts/build-docs.js",
+    "build:docs:force": "node scripts/build-docs.js --force",
     "build:all": "npm run build && npm run build:docs",
     "_comment_local_dev": "Local development utilities",
     "link": "npm run build && npm link",
@@ -170,15 +171,15 @@
     "validate:dependencies": "node scripts/validate-dependencies.cjs",
     "clean": "rimraf dist",
     "_comment_test": "Test suite with various configurations",
-    "test": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192 --max-semi-space-size=128\" vitest run --config ../../vitest.config.ts",
-    "test:watch": "vitest --watch --config ../../vitest.config.ts",
-    "test:coverage": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192 --max-semi-space-size=128\" vitest run --coverage --config ../../vitest.config.ts --reporter=dot",
-    "test:ui": "vitest --ui --config ../../vitest.config.ts",
-    "test:new": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192 --max-semi-space-size=128\" vitest run --config vitest.new.config.ts",
-    "test:new:watch": "vitest --watch --config vitest.new.config.ts",
+    "test": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192 --max-semi-space-size=128\" vitest run --config ../../vitest.config.ts --test-timeout=30000",
+    "test:watch": "vitest --watch --config ../../vitest.config.ts --test-timeout=30000",
+    "test:coverage": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192 --max-semi-space-size=128\" vitest run --coverage --config ../../vitest.config.ts --reporter=dot --test-timeout=30000",
+    "test:ui": "vitest --ui --config ../../vitest.config.ts --test-timeout=30000",
+    "test:new": "cross-env NODE_OPTIONS=\"--max-old-space-size=8192 --max-semi-space-size=128\" vitest run --config vitest.new.config.ts --test-timeout=30000",
+    "test:new:watch": "vitest --watch --config vitest.new.config.ts --test-timeout=30000",
     "migrate-tests": "node scripts/migrate-tests.js",
-    "test:unit": "vitest src/**/*.test.{ts,tsx} --config ../../vitest.config.ts",
-    "test:integration": "vitest tests/integration --config ../../vitest.config.ts",
+    "test:unit": "vitest src/**/*.test.{ts,tsx} --config ../../vitest.config.ts --test-timeout=30000",
+    "test:integration": "vitest tests/integration --config ../../vitest.config.ts --test-timeout=30000",
     "_comment_quality": "Code quality and formatting checks",
     "lint": "eslint src --ext .ts,.tsx",
     "type-check": "tsc --noEmit",
@@ -193,14 +194,7 @@
     "pack:dry": "npm pack --dry-run",
     "publish:latest": "npm publish",
     "publish:test": "npm publish --tag beta",
-    "publish:dry-run": "npm publish --dry-run",
-    "_comment_docs": "Documentation generation and management",
-    "docs:generate": "node scripts/generate-docs.js generate",
-    "docs:update-index": "node scripts/generate-docs.js update-index",
-    "docs:generate-api": "node scripts/generate-docs.js generate-api",
-    "docs:all": "node scripts/generate-docs.js all",
-    "_comment_audit": "Audit tool for consuming apps",
-    "audit:pace-core": "node packages/core/audit-tool/index.cjs"
+    "publish:dry-run": "npm publish --dry-run"
   },
   "keywords": [
     "react",

package/scripts/{build-docs-incremental.js → build-docs.js}

@@ -1,9 +1,10 @@
 #!/usr/bin/env node
 
 /**
- * Incremental TypeDoc Build Script
+ * TypeDoc Build Script
  * 
- * This script only regenerates documentation when source files have changed,
+ * Generates API documentation using TypeDoc with incremental builds.
+ * Only regenerates documentation when source files have changed,
  * significantly speeding up the build process.
  */