pixelize-design-library 2.3.22 → 2.4.1

package/.claude/settings.local.json

@@ -0,0 +1,51 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(git ls-tree *)",
+      "Bash(npx --no-install tsc --noEmit)",
+      "Bash(git fsck *)",
+      "Bash(npx tsc *)",
+      "Bash(curl -s http://localhost:5174/ -o /dev/null -w \"HTTP %{http_code}\\\\n\")",
+      "Bash(curl -s \"http://localhost:5174/src/Components/Table/Components/TableBody.tsx\" -o /dev/null -w \"transform TableBody: HTTP %{http_code}\\\\n\")",
+      "Read(//private/tmp/**)",
+      "Bash(npx jest *)",
+      "Bash(pkill -f \"vite\")",
+      "Bash(grep -rln -E \"import\\\\s+\\\\w+\\\\s*\\(,\\\\s*\\\\{[^}]*\\\\}\\)?\\\\s*from\\\\s+['\\\\\"]pixelize-design-library['\\\\\"]\" src)",
+      "Bash(ps -p 44521 60411 -o pid,command)",
+      "Bash(node -e \"const p=require\\('./package.json'\\); console.log\\(JSON.stringify\\(p.scripts,null,2\\)\\)\")",
+      "Bash(echo \"=== total errors: $\\(npx tsc --noEmit -p tsconfig.json 2>&1)",
+      "Bash(echo \"=== total: $\\(npx tsc --noEmit -p tsconfig.json 2>&1)",
+      "Bash(echo \"exit=$?\")",
+      "Read(//tmp/**)",
+      "Bash(git mv *)",
+      "Bash(git rm *)",
+      "Bash(node -e \"console.log\\(require\\('@emotion/react/package.json'\\).version\\)\")",
+      "Bash(node -e \"console.log\\('jodit-react', require\\('jodit-react/package.json'\\).version\\); try{console.log\\('jodit', require\\('jodit/package.json'\\).version\\)}catch\\(e\\){}\")",
+      "Bash(node -e \"console.log\\('playwright', require\\('playwright/package.json'\\).version\\)\")",
+      "Bash(node -e \"console.log\\('puppeteer', require\\('puppeteer/package.json'\\).version\\)\")",
+      "Bash(node -e \"console.log\\('ws', require\\('ws/package.json'\\).version\\)\")",
+      "Bash(node -e \"console.log\\('node', process.version\\)\")",
+      "Bash(grep -E \"\\\\.tsx?$\")",
+      "Bash(node -e \"console.log\\(require.resolve\\('@chakra-ui/styled-system'\\)\\)\")",
+      "Bash(node -e \"const p=require.resolve\\('@chakra-ui/react'\\);console.log\\(p\\)\")",
+      "Bash(sed -n '31,45p' src/Pages/table.tsx)",
+      "Bash(perl -0pi -e 's/\\\\n\\\\s*content: \\\\\\(\\\\\\) => <>Hello<\\\\/>,?//' src/Pages/table.tsx)",
+      "Bash(cd /Users/mahesh/Applications/Pixelize/CRM/Micro-Components *)",
+      "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-design-library/package.json'\\).version\\)\")",
+      "Bash(node -e \"console.log\\(JSON.stringify\\(require\\('./node_modules/pixelize-authenticator/package.json'\\).dependencies\\)\\)\")",
+      "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-authenticator/package.json'\\).version\\)\")",
+      "Bash(node -e \"console.log\\(require\\('./node_modules/pixelize-authenticator/node_modules/pixelize-design-library/package.json'\\).version\\)\")",
+      "Bash(echo \"tsc exit code: $?\")",
+      "Bash(./node_modules/.bin/tsc --noEmit --skipLibCheck)",
+      "Bash(./node_modules/.bin/tsc --noEmit)",
+      "Bash(echo \"tsc exit: $?\")",
+      "Bash(echo \"local tsc exit: $?\")",
+      "Bash(ls -la src/pages/Tasks/TaskComponent/)",
+      "Bash(wc -l src/pages/Tasks/TaskComponent/*.tsx)"
+    ],
+    "additionalDirectories": [
+      "/private/tmp",
+      "/tmp"
+    ]
+  }
+}

package/.cursor/TASK-SETUP.md

@@ -0,0 +1,43 @@
+# Task pipeline — one-time developer setup
+
+Hooks in this repo work automatically after clone.
+
+## Recommended (global skills + status line)
+
+```bash
+git clone git@github.com:pixelize-tech/pixelize-cursor-setup.git
+cd pixelize-cursor-setup && ./install.sh
+```
+
+Installs all cross-repo `/` skills (`crm-task`, `social-task`, …), status line, and `cli-config.json`. Restart Cursor.
+
+Repo: https://github.com/pixelize-tech/pixelize-cursor-setup
+
+## Manual status line only
+
+1. Copy the script to your user Cursor folder:
+
+   ```bash
+   cp .cursor/pixelize-task-statusline.sh ~/.cursor/pixelize-task-statusline.sh
+   chmod +x ~/.cursor/pixelize-task-statusline.sh
+   ```
+
+2. Add to `~/.cursor/cli-config.json` (merge if the file already exists):
+
+   ```json
+   {
+     "statusLine": {
+       "type": "command",
+       "command": "~/.cursor/pixelize-task-statusline.sh",
+       "padding": 0
+     }
+   }
+   ```
+
+3. Restart Cursor or open a new Agent chat.
+
+## Task skill (feature work)
+
+- Pick **`task`** from the **`/`** menu, then describe your goal.
+- Do **not** type `/task` in the message body — a hook will block it (zero tokens wasted).
+- See repo `CLAUDE.md` for the cross-repo skill name if applicable.

package/.cursor/agents/be-impl.md

@@ -0,0 +1,37 @@
+---
+name: be-impl
+description: >-
+  Handles build, exports, and publish pipeline changes. Use in @task phase 2
+  when plan includes index.ts, tsc build, or npm publish steps.
+---
+
+You are the lib-impl (build/export) agent for **Pixelize Design Library** (Micro-Components).
+
+Note: This repo has no backend API. This agent covers build pipeline, not crm-service.
+
+## When invoked
+
+1. Read CLAUDE.md and .cursor/rules
+2. Read the plan from .cursor/plans/current.md
+3. Read `.cursor/modules/types-exports/MODULE.md`
+
+## Workflow
+
+1. Work only inside Micro-Components
+2. Update `src/index.ts` exports
+3. Verify `tsconfig.json` and build output in `dist/`
+4. Run `npm run build` to validate
+5. Update MODULE.md if export surface changes
+6. Do not run `npm publish` unless user explicitly requests
+
+## Output
+
+- Done / Blocked lists
+- Files changed
+- Build result (pass/fail)
+
+## Rules
+
+- Never edit `dist/` directly — change `src/` and rebuild
+- Never commit without user confirmation
+- Never break existing exports without noting semver impact

package/.cursor/agents/fe-impl.md

@@ -0,0 +1,39 @@
+---
+name: fe-impl
+description: >-
+  Implements component changes from an approved plan. Use in @task phase 2
+  for UI components, theme, and playground pages.
+---
+
+You are the fe-impl (component implementation) agent for **Pixelize Design Library** (Micro-Components).
+
+## When invoked
+
+1. Read CLAUDE.md and .cursor/rules
+2. Read the plan from .cursor/plans/current.md — do not replan
+3. Read `.cursor/modules/<domain>/MODULE.md` for every domain you will touch
+4. Read one existing similar component before starting
+
+## Workflow
+
+1. Work only inside Micro-Components
+2. Implement in `src/Components/<Name>/`
+3. Add/update demo in `src/Pages/` if needed for playground
+4. Export from `src/index.ts` for public API
+5. Use Chakra + theme tokens from `src/Theme/` — match existing patterns
+6. Always handle null/undefined, loading, and error states
+7. Update `.cursor/modules/<domain>/MODULE.md` after implementation
+8. Keep changes minimal — no scope creep
+
+## Output
+
+- Done: bullet list of completed tasks
+- Files changed: every file path with one-line description
+- Blocked: anything not completed with exact reason
+- Notes for test-create: what needs Jest coverage
+
+## Rules
+
+- Never add app-specific CRM/API logic to library components
+- Never commit
+- No placeholder files or fake demo data

package/.cursor/agents/task-plan.md

@@ -0,0 +1,56 @@
+---
+name: task-plan
+description: >-
+  Creates implementation plans from user goals. Use in @task phase 1, or when
+  a structured plan is needed before coding.
+---
+
+You are the task-plan agent for **Pixelize Design Library** (Micro-Components). Produce a concrete actionable plan — do not write code.
+
+## When invoked
+
+1. Read CLAUDE.md and .cursor/rules
+2. Read .cursor/plans/current.md if it exists — user may be resuming
+3. Read `.cursor/modules/<domain>/MODULE.md` for every component domain touched
+4. Ask a question only if the goal is genuinely ambiguous
+5. Output a plan implementation agents can execute without replanning
+
+## Plan format
+
+# [Component / task title]
+
+## Goal
+
+One paragraph
+
+## Type
+
+feat / fix / refactor / chore
+
+## Scope
+
+- In scope: ...
+- Out of scope: ...
+- Agents needed: fe-impl / lib-impl (build-export) / both
+
+## Tasks
+
+### Component (fe-impl)
+
+- [ ] Task with file paths under `src/Components/` and acceptance criteria
+
+### Build / export (lib-impl)
+
+- [ ] index.ts export, build, version bump if publishing
+
+### Tests
+
+- [ ] Jest test files and coverage targets
+
+## Risks / assumptions
+
+## Rules
+
+- Never write production code
+- Save approved plan to .cursor/plans/current.md
+- End with: Ready for implementation — list which agents run next

package/.cursor/agents/test-create.md

@@ -0,0 +1,31 @@
+---
+name: test-create
+description: >-
+  Writes Jest tests for completed component work. Use in @task phase 3a
+  after fe-impl, before test-exec.
+---
+
+You are the test-create agent for **Pixelize Design Library** (Micro-Components).
+
+## When invoked
+
+1. Read the plan from .cursor/plans/current.md
+2. Read fe-impl output summary
+3. Read existing `*.test.tsx` files to match conventions
+
+## Coverage required
+
+- Happy path render
+- Minimum 2 edge cases (empty, disabled, error props)
+- 1 regression test per bugfix
+
+## Output
+
+- Tests added/updated: file paths and what each covers
+- Run command: `npm test` from Micro-Components root
+
+## Rules
+
+- Never change production code
+- Never commit
+- Follow existing Jest + Testing Library patterns

package/.cursor/agents/test-exec.md

@@ -0,0 +1,26 @@
+---
+name: test-exec
+description: >-
+  Runs Jest tests after test-create. Use in @task phase 3b.
+---
+
+You are the test-exec agent for **Pixelize Design Library** (Micro-Components).
+
+## When invoked
+
+1. Read test-create output
+2. Run `npm test` from Micro-Components root
+3. Report pass/fail with relevant failure output
+
+## Output
+
+- Test run result: pass / fail
+- Failed test names and error snippets if any
+- Recommendation: proceed to review or fix
+
+## Rules
+
+- Never commit
+- Never modify production code unless fixing test failures is in scope
+- Never disable, skip, or comment out tests to make them pass
+- Never change test assertions to match wrong behavior — fix the implementation

package/.cursor/hooks/task-hint.env

@@ -0,0 +1 @@
+REPO_HINT="/ → task (this repo) or / → design-task"

package/.cursor/hooks/task-skill-nudge.sh

@@ -0,0 +1,71 @@
+#!/usr/bin/env bash
+# Block first message without / task skill; flag session for status-line warning. Zero tokens.
+set -euo pipefail
+
+STATE_FILE="${HOME}/.cursor/pixelize-skill-session-state.json"
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+# shellcheck disable=SC1091
+source "$SCRIPT_DIR/task-hint.env"
+
+INPUT=$(cat)
+PROMPT=$(echo "$INPUT" | jq -r '.prompt // empty')
+CONV_ID=$(echo "$INPUT" | jq -r '.conversation_id // empty')
+
+if [[ -z "$CONV_ID" ]]; then
+  echo '{"continue":true}'
+  exit 0
+fi
+
+has_skill() {
+  echo "$PROMPT" | grep -qiE '^\s*/(task|crm-task|social-task|tickets-task|crm-mobile-task|design-task|hrms-task)\b'
+}
+
+ensure_state_file() {
+  mkdir -p "$(dirname "$STATE_FILE")"
+  [[ -f "$STATE_FILE" ]] || echo '{}' >"$STATE_FILE"
+}
+
+update_state() {
+  local first_nudge="$1"
+  local chatting="$2"
+  ensure_state_file
+  local tmp
+  tmp=$(mktemp)
+  jq --arg id "$CONV_ID" \
+    --argjson first "$first_nudge" \
+    --argjson chatting "$chatting" \
+    '.[$id] = {first_nudge_done: $first, chatting_without_skill: $chatting}' \
+    "$STATE_FILE" >"$tmp" && mv "$tmp" "$STATE_FILE"
+}
+
+if has_skill; then
+  if [[ -f "$STATE_FILE" ]] && jq -e --arg id "$CONV_ID" '.[$id]' "$STATE_FILE" >/dev/null 2>&1; then
+    update_state true false
+  fi
+  echo '{"continue":true}'
+  exit 0
+fi
+
+ensure_state_file
+FIRST_DONE=$(jq -r --arg id "$CONV_ID" '.[$id].first_nudge_done // false' "$STATE_FILE")
+
+if [[ "$FIRST_DONE" != "true" ]]; then
+  update_state true false
+  MSG="━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+  NO TASK SKILL LOADED
+━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+You are chatting WITHOUT a pipeline skill.
+
+For feature / bugfix work, use the / menu first:
+  ${REPO_HINT}
+
+Then type your goal in the SAME input (do not type the skill name).
+
+Send this message AGAIN to continue without a skill."
+  jq -n --arg msg "$MSG" '{continue: false, user_message: $msg}'
+  exit 0
+fi
+
+update_state true true
+echo '{"continue":true}'

package/.cursor/hooks/task-slash-guard.sh

@@ -0,0 +1,31 @@
+#!/usr/bin/env bash
+# Blocks plain-text task skill names (not / menu picks). Zero API tokens.
+set -euo pipefail
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+# shellcheck disable=SC1091
+source "$SCRIPT_DIR/task-hint.env"
+
+INPUT=$(cat)
+PROMPT=$(echo "$INPUT" | jq -r '.prompt // empty')
+
+# Menu picker embeds "/tickets-task ..." in prompt; attachments stay empty.
+# Only block plain-text mistakes: skill name at start without a leading slash.
+if echo "$PROMPT" | grep -qiE '^\s*@?(task|crm-task|social-task|tickets-task|crm-mobile-task|design-task|hrms-task)\b'; then
+  MSG="⚠️  TASK PIPELINE NOT ACTIVE
+
+You typed a task command as plain text. The skill was NOT loaded.
+
+To run the pipeline:
+  1. Click the chat input
+  2. Type / and pick the skill from the menu
+  3. Send your goal
+
+For this repo use: ${REPO_HINT}
+
+Do not type task skill names in the message body — use the / menu picker."
+  jq -n --arg msg "$MSG" '{continue: false, user_message: $msg}'
+  exit 0
+fi
+
+echo '{"continue":true}'

package/.cursor/hooks.json

@@ -0,0 +1,13 @@
+{
+  "version": 1,
+  "hooks": {
+    "beforeSubmitPrompt": [
+      {
+        "command": ".cursor/hooks/task-slash-guard.sh"
+      },
+      {
+        "command": ".cursor/hooks/task-skill-nudge.sh"
+      }
+    ]
+  }
+}

package/.cursor/modules/account-management/MODULE.md

@@ -0,0 +1,34 @@
+# Account Management
+
+## Purpose
+
+Account/admin-facing components: UserDetails, RolesPermission, CustomModulesTable, SignInActivityTable, OrganizationDetails, OrgSwitcher, UpgradeButton.
+
+## Key paths
+
+- `src/Components/UserDetails/`, `RolesPermission/`, `CustomModulesTable/`, `SignInActivityTable/`, `OrganizationDetails/`, `OrgSwitcher/`, `UpgradeButton/`
+- Tests: `UserDetails.test.tsx`, `RolesPermission.test.tsx`, `CustomModulesTable.test.tsx`, `SignInActivityTable.test.tsx`, `OrganizationDetails.test.tsx`
+
+## Key rules
+
+- UserDetails, RolesPermission, CustomModulesTable, OrganizationDetails bundle their own action modals (Add/Edit/Delete/ChangeRole) in the same folder
+- Each exports typed Props/Labels from `<Name>Props.tsx` via `src/index.ts` — keep props API-generic, no CRM/API logic in the library
+- Labels are injectable for i18n; consumers pass data and handlers (props in, events out)
+
+## Dark mode
+
+- Every component here reads colors via `useCustomTheme()`, so all follow the active light/dark palette
+- Tables/detail views alias tokens once at the top — `border`/`surface`/`muted`/`heading`/`headBg` from `boxborder[200]`/`background[50]`/`gray[500]`/`gray[800]`/`gray[50]`; reuse those names when adding UI
+- `surface` reads `background[50]`, never `colors.white` — white is a foreground token and stays white in dark
+- Remaining hex literals are `??` fallbacks, not live values: a hand-built palette may omit rungs (tests `jest.mock` a partial one), so keep the fallback when adding a token read
+- Fixed by design, not palette-following: `avatarColor()`'s `AVATAR_COLORS` (OrgSwitcher — deterministic identity fill seeded by org name, white label on top) and `UpgradeButton`'s `iconColor` default (icon on a gradient fill). Colored fills/foregrounds, not canvas surfaces
+- **OrgSwitcher popover bg bug (same class as the ButtonGroupIcon menu bug in `buttons`):** `PopoverContent` had no `bg=`, so it fell through to Chakra's baseStyle `var(--popper-bg)` — hardcoded to `colors.white`, gated behind Chakra's own `_dark` which this app's palette-swap dark mode never triggers — rendering a white popover in dark mode regardless of theme. Fixed with an explicit `bg={theme.colors.backgroundColor.light}`
+- OrgSwitcher trigger border: `borderColor` switched from `gray[200]` to `boxborder?.[800] ?? gray[200]` — it styles a real `<button>`, so its border is a control boundary needing WCAG 1.4.11 (>=3.0 non-text contrast) against any surface up to `muted`, which `gray[200]` failed in dark. Org name/role text switched from `gray[800]`/`gray[500]` to `text[900]`/`text[500]` — mode-adaptive text tokens, the correct choice over mode-invariant gray literals for body text
+- UserDetails avatar initials color: replaced the fixed `primary[600]` rung with `accentTextOnCanvas(colors.primary, avatarBg)` (guarded `colors?.primary ? accentTextOnCanvas(...) : "#4F46E5"` fallback) — picks contrast dynamically against the avatar bg instead of assuming one fixed rung clears AA 4.5 for every brand's dark palette
+- **Modal surface bug (QA-caught, blocking) — 6 action modals:** `AddUserModal`,
+  `DeactivateConfirmModal`, `ChangeRoleModal` (UserDetails), `DeleteRoleModal` (RolesPermission),
+  `CreateOrgModal`, `DeleteOrgModal` (OrganizationDetails) all rendered a raw Chakra `ModalContent`
+  with no explicit `bg=`, hitting the same Chakra-hardcoded-`colors.white`-behind-`_dark` bug as
+  `Modal`/`AlertDialog` (overlays module) and `Drawer` (layout-navigation module). Fixed with
+  `bg={colors?.background?.[50]}` (`colors` was already destructured from `useCustomTheme()` in
+  every one of these files, so no new hook import was needed).

package/.cursor/modules/buttons/MODULE.md

@@ -0,0 +1,47 @@
+# Buttons
+
+## Purpose
+
+Button, ButtonGroupIcon, Buttons variants.
+
+## Key paths
+
+- `src/Components/Button/`, `ButtonGroupIcon/`, `Buttons/`
+
+## Key rules
+
+- Match Chakra button theming via design tokens
+- `Button.styles.ts` variants are `({ theme })` functions reading `theme.colors` — no hex
+  literals, so they follow whichever palette the theme carries (light or dark)
+- Filled labels (`solid` bg, and `outline`/`ghost` hover/active fills) no longer hardcode
+  `theme.colors.white` — they pick ink via `onFilled(fill, white, black)`
+  (`Theme/tokens/builders/accentText.ts`), which provably clears AA 4.5 by preferring white and
+  falling back to black only when the fill itself can't carry white. Never use white for a button
+  *surface* either way
+
+## Dark mode
+
+- `outline` / `ghost` / `link` text sits on the canvas, so it goes through
+  `accentTextOnCanvas(scale, colors.backgroundColor.main)` instead of `[500]` directly.
+  `[500]` is pinned dark enough to carry a white label on `solid`, leaving it ~4.2 as text on
+  the dark canvas; the helper steps to a lighter rung there to clear AA 4.5. Light canvases
+  return `[500]` unchanged, so existing apps are pixel-identical.
+- **Ghost hover gotcha:** brand scales are *lifted* for dark, not reversed, so `primary[50]`
+  stays near-white — a white chip on a near-black canvas. On dark canvases the hover/active
+  tint uses the translucent `scale.opacity[16]` / `[24]` so it composites over the canvas.
+  Only brand scales carry `opacity`; utility scales (red, green…) fall back to `[50]`, which
+  is already dark because those scales *are* reversed for dark.
+- **Solid/outline label-ink fix:** `Button.styles.ts` derives each state's label from *that
+  state's* fill (`labelFor`, per hover/active/loading) instead of assuming white always works —
+  some brands' dark `primary[500]` fails AA against white (radiant/emerald/rosewood measure
+  4.37/3.38/3.46) and now fall back to black. `Button.styles.test.ts` verifies this with real
+  `contrastRatio` checks per brand rather than asserting a fixed white label.
+- **ButtonGroupIcon menu bug (new, generalizable):** Chakra's `MenuItem` baseStyle renders
+  `background: var(--menu-bg)` at rest, and `MenuList`'s baseStyle hardcodes that var to `#fff`
+  behind `_dark` — which this app's theme-swap dark mode (palette swapped, Chakra `colorMode`
+  stays `"light"`) never triggers. Setting `bg=` on `MenuList` alone recolors the list but not the
+  inherited var, so items rendered white at rest until hover/focus masked it. Fixed here via
+  `sx={{ "--menu-bg": theme.colors.backgroundColor.light }}` alongside `bg=`.
+  - **Known gap:** any other Chakra `Menu`/`Popover` usage is at risk of the same bug. A known
+    remaining instance — `Trail`/`EditableCell.tsx` (data-display module) — is **not fixed** in
+    this pass.

package/.cursor/modules/cards/MODULE.md

@@ -0,0 +1,55 @@
+# Cards
+
+## Purpose
+
+Card, PaymentCard, ProfileCard, ProductCard, ProductDetails.
+
+## Key paths
+
+- `src/Components/Card/`, `Card/PaymentCard/`, `ProfileCard/`, `ProductCard/`, `ProductDetails/`
+
+## Key rules
+
+- ProfileCard has Header/Body/Footer subcomponents
+
+## Dark mode
+
+PaymentCard, ProductCard, ProductPrice, ProductDtlPrice and ProductImageSlider read their colors
+from `useCustomTheme()` instead of hex literals, so they follow the active light/dark palette.
+
+- Surfaces use `colors.background[50]`, never `colors.white` — `white` is a foreground token and
+  stays white in dark. Covers the card body, the ProductPrice dropdown panel and its radio dot,
+  the unselected pack chip in ProductDtlPrice, and the play-button circle in ProductImageSlider.
+- PaymentCard's badge/button label no longer hardcodes `colors.white` — it's picked per
+  `buttonColor` via `onFilled()` (`Theme/tokens/builders/accentText`), which falls back to
+  `colors.black` when white would fail AA on that fill. Guarantees WCAG AA across the
+  active/upgrade/popular/default button colors instead of assuming white always works.
+- The product components keep Chakra literals for offer/pack chrome (`red.50`, `orange.50`,
+  `green.100`). Those are dark-aware already — the theme carries the palette as `colors`, and
+  `buildDarkPalette` reverses utility hue ramps so index roles survive (`red.50` = pale badge
+  background in light, deep in dark). They track the hue, not the brand accent.
+- ProductPrice's struck-through original price bumped `gray.400` → `gray.500` (still a raw
+  Chakra literal, not a theme token) for AA contrast against the card surface.
+- ProductTags' label swapped `colors.black` → `colors.text[900]` (mode-adaptive ink token) so it
+  stays legible in dark mode.
+- **Known gap:** ProductReview's rating chip (`bg="teal.50"` / `color="teal.900"`) and its star
+  fill (`RATING_STAR_FILL`, a pinned `#ECC94B` hex — see in-file comment) are still raw
+  Chakra/hex literals, not `useCustomTheme()` tokens. Pre-existing pattern, not worsened by this
+  pass, but won't track brand hue or dark mode — needs a mode-stable "rating gold" token added to
+  `pixelize-design-library` before this can move off literals.
+
+## WCAG contrast pass (Wave D, QA-driven)
+
+- **ProductPrice.tsx** — dropdown-arrow `red.400` (on `red.50` canvas) and discounted/final-price
+  `red.500` text (on `red.50`/`background[50]` depending on selection state) failed AA (2.6-3.7:1).
+  Fixed via `accentTextOnCanvas(theme.colors.red, <the actual local canvas>)` at each of the 3
+  call sites, matching the canvas each already renders on (including the existing `isSelected`
+  bg ternary). The dot-fill `bg="red.500"` (a filled swatch, not text) was left unchanged — it
+  clears the 3:1 non-text bar against `background[50]`.
+- **ProductDtlPrice.tsx** — price `Text` hardcoded `theme.colors.red[500]` (≈3.46:1 vs the page
+  canvas, fails) and the pack-swatch `color="orange.600"` (≈2.47-2.67:1 vs either bg state,
+  fails) both routed through `accentTextOnCanvas`. `borderColor`/`bg` on the swatch button are
+  decorative and were left alone.
+- **ProductImageSlider.tsx** — checked, not changed: all 6 `theme.colors.red[500]` Play-icon
+  usages sit on an opaque `background[50]` circular scrim (not the raw image), so the applicable
+  bar is 3:1 (graphical object, not text) — clears at ≈3.68:1 light / ≈6.48:1 dark.

package/.cursor/modules/charts/MODULE.md

@@ -0,0 +1,40 @@
+# Charts
+
+## Purpose
+
+Apexcharts wrappers: Bar, Line, Pie, Polar.
+
+## Key paths
+
+- `src/Components/Apexcharts/ApexBarChart/`, `ApexLineChart/`, `ApexPieChart/`, `ApexPolarCharts/`
+- `src/Theme/tokens/builders/chartColorsFromTheme.ts` — shared chart color helpers (+ test)
+
+## Key rules
+
+- react-apexcharts; every color is a theme token, never a literal. Shared helpers:
+  `getDefaultSeriesColors` (primary / error / success / orange `500`), `mergeChartTitleStyle`
+  (title → `primary[500]`), `chartAxisLabelColor` (`gray[700]`). The rest read `palette` directly:
+  legend `text[900]` (Pie/Polar), Bar data labels `primary[500]`, Polar stroke `white`.
+- All four read `useTheme().colors` (cast to `CustomThemeProps["colors"]`) rather than styling via
+  Chakra props, because ApexCharts `options` need resolved hex **strings**.
+- The helper sits in the pure token layer: type-only imports, never Chakra/React (see CLAUDE.md).
+
+## Dark mode
+
+- Dark-aware for free — the theme swaps in the dark palette and these tokens re-resolve. No hex
+  literals remain under `Apexcharts/`.
+- Caller color props (`barColor`, `lineColors`, `chartColor`/`donutColors`, `chartColors`,
+  `titleStyle`, `legendStyle`) override the token defaults and are **not** dark-aware: a consumer
+  passing a hardcoded hex keeps it in both modes.
+- ApexPolarCharts `basic`/`monochrome` stroke slice borders with `colors.white` — foreground on a
+  filled slice, so it correctly stays white; not a missed `background[50]` surface.
+- All four now also set ApexCharts' own `options.theme.mode` (`"dark"`/`"light"`) from
+  `isDarkCanvas(palette.backgroundColor.main)` (`Theme/tokens/builders/accentText.ts`), so
+  ApexCharts' internal chrome (gridlines, built-in tooltip, etc.) follows the active canvas too,
+  not just the token-driven series/title/legend colors. No change to any chart's data/options
+  prop contract.
+- Removed `chartTooltipBackground`/`chartTooltipForeground` from `chartColorsFromTheme.ts` (they
+  always resolved to a hardcoded dark-styled tooltip — `gray[700]`/`white` — regardless of mode,
+  now unused repo-wide). `ApexLineChart`'s title-truncation `ToolTip` no longer overrides
+  `bg`/`color`; it defers to `ToolTip`'s own theme-aware default instead.
+- Known gap: titles/legends use `primary[500]` / `text[900]`, not the AA-safe `accentText` token.

package/.cursor/modules/common/MODULE.md

@@ -0,0 +1,36 @@
+# Common Helpers
+
+## Purpose
+
+Internal shared helpers under `Components/Common/` — not all exported from index.
+
+## Key paths
+
+- `src/Components/Common/` — ErrorComponent, FormLabel, etc.
+
+## Key rules
+
+- Internal use by other components; export only if needed publicly
+
+## Dark mode
+
+- **FormLabel** (`TextLabel`): both tooltips (`showTooltip` / `isInformation`) swapped
+  Chakra's own `Tooltip` for the library's `ToolTip` (`../ToolTip/ToolTip`), dropping the
+  hardcoded `bg={gray[600]}` / `color={white}` — `ToolTip` owns its own theme-aware
+  contrast (see `overlays` MODULE.md). No `TextLabel` prop changes.
+- **fieldStyles.ts** (`getFieldStateStyles`): idle border bumped `boxborder[500]` →
+  `boxborder[800]` — `[500]` failed WCAG 1.4.11 (>=3:1 non-text contrast) against
+  surfaces up to `muted`; `[800]` clears with margin. Focus/error ring colors and the
+  function signature are unchanged.
+- **ErrorMessage.tsx**, **ErrorComponent.tsx**, **FormLabel.tsx** (required-asterisk), **Label.tsx**:
+  error text color switched from a hardcoded `theme.colors.red[500]` / `semantic.error[500]` to
+  `accentTextOnCanvas(scale, canvas)` (`../../Theme/tokens/builders/accentText`) — `red[500]` alone
+  fails AA (~3.4:1) against the page canvas in every brand; see `theme` MODULE.md "Wave D" for why
+  this couldn't be a token retune. No prop/API changes.
+- **ErrorComponent.tsx's SVG mark ink (code-review catch):** the circle/rect/dot marks drawn on
+  top of the `errorFill` circle were hardcoded `theme.colors.white`. `errorFill` is tuned for
+  text-on-page-canvas contrast, not for "carries a white mark on top of itself" — those are
+  different constraints, and nothing guaranteed white would keep clearing AA there if the token
+  ever changed (it happened to today). Replaced with
+  `onFilled(errorFill, theme.colors.white, theme.colors.black)`, the same provably-always-safe
+  ink-on-a-filled-swatch helper used by FilterSidebar's checkmark and PaymentCard.

package/.cursor/modules/contact-auth/MODULE.md

@@ -0,0 +1,19 @@
+# Contact & Email
+
+## Purpose
+
+ContactForm, VerifyEmailOtp (EmailCards).
+
+## Key paths
+
+- `src/Components/ContactForm/`, `EmailCards/VerifyEmailOtp/`
+
+## Key rules
+
+- OTP flow UI only — API wiring in consumer apps
+
+## Dark mode
+
+- **VerifyEmailOtp**: `PinInputField` idle border bumped `boxborder[300]` → `boxborder[800]` —
+  `[300]` failed WCAG 1.4.11 (>=3:1 non-text contrast) against surfaces up to `muted`; `[800]`
+  clears with margin. Already theme-token-driven before this change; no prop/signature changes.