pixelize-design-library 2.2.199 → 2.2.201

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/buttons/MODULE.md

@@ -0,0 +1,13 @@
+# Buttons
+
+## Purpose
+
+Button, ButtonGroupIcon, Buttons variants.
+
+## Key paths
+
+- `src/Components/Button/`, `ButtonGroupIcon/`, `Buttons/`
+
+## Key rules
+
+- Match Chakra button theming via design tokens

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

@@ -0,0 +1,13 @@
+# 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

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

@@ -0,0 +1,13 @@
+# Charts
+
+## Purpose
+
+Apexcharts wrappers: Bar, Line, Pie, Polar.
+
+## Key paths
+
+- `src/Components/Apexcharts/ApexBarChart/`, `ApexLineChart/`, `ApexPieChart/`, `ApexPolarCharts/`
+
+## Key rules
+
+- react-apexcharts; colors from theme chart tokens

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

@@ -0,0 +1,13 @@
+# 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

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

@@ -0,0 +1,13 @@
+# Contact & Email
+
+## Purpose
+
+ContactForm, VerifyEmailOtp (EmailCards).
+
+## Key paths
+
+- `src/Components/ContactForm/`, `EmailCards/VerifyEmailOtp/`
+
+## Key rules
+
+- OTP flow UI only — API wiring in consumer apps

package/.cursor/modules/data-display/MODULE.md

@@ -0,0 +1,13 @@
+# Data Display
+
+## Purpose
+
+Tag, Timeline, Reorder, Divider, Trail.
+
+## Key paths
+
+- `src/Components/Tag/`, `Timeline/`, `Reorder/`, `Divider/`, `Trail/`
+
+## Key rules
+
+- Trail includes editable cell demos

package/.cursor/modules/feedback/MODULE.md

@@ -0,0 +1,14 @@
+# Feedback
+
+## Purpose
+
+Loading, Skeletons, ProgressBar, Notification, FeedbackForm.
+
+## Key paths
+
+- `src/Components/Loading/`, `Skeletons/`, `ProgressBar/`, `Notification/`, `FeedbackForm/`
+- `src/services/feedback.ts`
+
+## Key rules
+
+- FeedbackForm may POST to account API in consumer apps — keep props generic

package/.cursor/modules/form/MODULE.md

@@ -0,0 +1,13 @@
+# Form
+
+## Purpose
+
+FormWrapper — shared form layout wrapper for entity forms in CRM apps.
+
+## Key paths
+
+- `src/Components/Form/FormWrapper`
+
+## Key rules
+
+- Used with smart forms in crm-frontend; keep generic props

package/.cursor/modules/inputs-basic/MODULE.md

@@ -0,0 +1,13 @@
+# Basic Inputs
+
+## Purpose
+
+TextInput, PhoneNumberInput, InputTextArea, NoteTextArea, NumberInput, PinInput, PinInputs.
+
+## Key paths
+
+- `src/Components/Input/`, `InputTextArea/`, `NoteTextArea/`, `NumberInput/`, `PinInput/`, `PinInputs/`
+
+## Key rules
+
+- InputSwitch in `Input/Switch/`

package/.cursor/modules/inputs-date-file/MODULE.md

@@ -0,0 +1,13 @@
+# Date & Files
+
+## Purpose
+
+ThemeDatePicker, FileUpload, FileUploader, Editor (jodit-react).
+
+## Key paths
+
+- `src/Components/DatePicker/`, `FileUpload/`, `FileUploader/`, `Editor/`
+
+## Key rules
+
+- DatePicker themed for brand tokens

package/.cursor/modules/inputs-select/MODULE.md

@@ -0,0 +1,13 @@
+# Select & Search
+
+## Purpose
+
+Select, SearchSelect, SelectSearch, MultiSelect, Dropdown, Search.
+
+## Key paths
+
+- `src/Components/Select/`, `SearchSelect/`, `SelectSearch/`, `MultiSelect/`, `Dropdown/`, `Search/`
+
+## Key rules
+
+- SearchSelect has performance tests; virtualize for large lists

package/.cursor/modules/inputs-toggle/MODULE.md

@@ -0,0 +1,13 @@
+# Toggles
+
+## Purpose
+
+Checkbox, RadioButton, Switch, Slider, Toggle/TableToggle.
+
+## Key paths
+
+- `src/Components/Checkbox/`, `RadioButton/`, `Switch/`, `Slider/`, `Toggle/`
+
+## Key rules
+
+- RadioButtonGroup for grouped radios

package/.cursor/modules/kanban/MODULE.md

@@ -0,0 +1,14 @@
+# Kanban
+
+## Purpose
+
+KanbanBoard with drag-and-drop columns and KanbanActions.
+
+## Key paths
+
+- `src/Components/KanbanBoard/`, `KanbanActions/`
+- Tests: `KanbanBoard.test.tsx`, `AccountCard.test.tsx`
+
+## Key rules
+
+- Uses @hello-pangea/dnd; MeasuredItem for layout

package/.cursor/modules/layout-navigation/MODULE.md

@@ -0,0 +1,14 @@
+# Layout & Navigation
+
+## Purpose
+
+Accordion, Breadcrumbs, NavigationBar, SideBar, Header, Drawer, FilterSidebar.
+
+## Key paths
+
+- `src/Components/Accordion/`, `Breadcrumbs/`, `NavigationBar/`, `SideBar/`, `Header/`, `Drawer/`, `FilterSidebar/`
+
+## Key rules
+
+- SideBar/Header have sub-`components/` folders
+- Used by crm-frontend, account-frontend sidebars

package/.cursor/modules/overlays/MODULE.md

@@ -0,0 +1,13 @@
+# Overlays
+
+## Purpose
+
+Modal, AlertDialog, ToolTip, Toaster (+ `useToaster` hook).
+
+## Key paths
+
+- `src/Components/Modal/`, `AlertDialog/`, `ToolTip/`, `Toaster/`
+
+## Key rules
+
+- Modal exports ModalHeader, ModalBody, ModalFooter subcomponents

package/.cursor/modules/playground/MODULE.md

@@ -0,0 +1,15 @@
+# Playground
+
+## Purpose
+
+Vite dev playground — demo pages not published to npm.
+
+## Key paths
+
+- `src/Pages/` (40 demo files), `src/App.tsx`, `src/Layout.tsx`
+- `npm start` launches playground
+
+## Key rules
+
+- Demo API calls to dev.pixelizetech.com are playground-only
+- Not included in `dist/` publish output

package/.cursor/modules/table/MODULE.md

@@ -0,0 +1,15 @@
+# Table
+
+## Purpose
+
+Data table with virtualization, filters, pagination, column management.
+
+## Key paths
+
+- `src/Components/Table/`, `Table/Components/`, `Table/TableSettings/`
+- Tests: `TableBody.virtualize.test.tsx`, `ManageColumns.test.tsx`
+
+## Key rules
+
+- Core CRM list UI — high change frequency
+- `src/Utils/table.ts` helpers

package/.cursor/modules/theme/MODULE.md

@@ -0,0 +1,15 @@
+# Theme
+
+## Purpose
+
+Seven brand presets (Default, Dark, Emerald, Meadow, Radiant, Rosewood, Skyline, Slate), `useCustomTheme`, `withTheme` HOC, token builders.
+
+## Key paths
+
+- `src/Theme/`, `src/withTheme.tsx`
+- Export: `useCustomTheme`, `ThemesList`, `withTheme`
+
+## Key rules
+
+- Consumers wrap app with `withTheme`; use theme tokens not hardcoded colors
+- Chart colors from theme via `chartColorsFromTheme`

package/.cursor/modules/types-exports/MODULE.md

@@ -0,0 +1,17 @@
+# Types & Exports
+
+## Purpose
+
+Public API surface — semver-sensitive.
+
+## Key paths
+
+- `src/index.ts` (~50 exports)
+- `src/types/`
+- `src/withTheme.tsx`
+
+## Key rules
+
+- Every public component must be exported here
+- Breaking export changes require major version bump
+- Run `npm run build` after export changes

package/.cursor/modules/utils-hooks/MODULE.md

@@ -0,0 +1,13 @@
+# Utils & Hooks
+
+## Purpose
+
+Shared utilities and hooks: debounce, table helpers, preferences.
+
+## Key paths
+
+- `src/Utils/table.ts`, `src/Hooks/usePreferences.ts`, `src/services/feedback.ts`
+
+## Key rules
+
+- `debounce` exported from index.ts

package/.cursor/pixelize-task-statusline.sh

@@ -0,0 +1,64 @@
+#!/usr/bin/env bash
+# Local status line only — never sent to the model. See .cursor/TASK-SETUP.md
+set -euo pipefail
+
+STATE_FILE="${HOME}/.cursor/pixelize-skill-session-state.json"
+
+payload=$(cat)
+dir=$(echo "$payload" | jq -r ".cwd // .workspace.current_dir // empty")
+session_id=$(echo "$payload" | jq -r ".session_id // empty")
+base=$(basename "$dir")
+
+show_no_skill_warning=false
+if [[ -n "$session_id" && -f "$STATE_FILE" ]]; then
+  if jq -e --arg id "$session_id" '.[$id].chatting_without_skill == true' "$STATE_FILE" >/dev/null 2>&1; then
+    show_no_skill_warning=true
+  fi
+fi
+
+case "$base" in
+  account-frontend|account-service)
+    line1="/ → task  (Account FE + BE)"
+    line2=""
+    ;;
+  crm-frontend|crm-service)
+    line1="/ → task  (this repo)"
+    line2="/ → crm-task  (CRM FE + BE)"
+    ;;
+  social-frontend|social-service)
+    line1="/ → task  (this repo)"
+    line2="/ → social-task  (Social FE + BE)"
+    ;;
+  tickets-frontend)
+    line1="/ → task  (this repo)"
+    line2="/ → tickets-task"
+    ;;
+  crm-mobile)
+    line1="/ → task  (this repo)"
+    line2="/ → crm-mobile-task"
+    ;;
+  Micro-Components)
+    line1="/ → task  (this repo)"
+    line2="/ → design-task"
+    ;;
+  hrms)
+    line1="/ → task  (this repo)"
+    line2="/ → hrms-task  (HRMS FE + BE)"
+    ;;
+  *)
+    line1="Open a Pixelize repo root for / → task"
+    line2=""
+    ;;
+esac
+
+if [[ "$show_no_skill_warning" == "true" ]]; then
+  echo -e "\033[1;33m\033[7m  ⚠  CHATTING WITHOUT TASK SKILL — use / menu  ⚠  \033[0m"
+  echo -e "\033[1;33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\033[0m"
+fi
+
+echo -e "\033[1;33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\033[0m"
+echo -e "\033[1;33m  FEATURE WORK → $line1\033[0m"
+if [ -n "$line2" ]; then
+  echo -e "\033[1;33m  Full pipeline → $line2\033[0m"
+fi
+echo -e "\033[1;33m━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━\033[0m"

package/.cursor/rules

@@ -0,0 +1,31 @@
+## Session start
+- Always read CLAUDE.md before starting any task
+- Always read MODULE.md before touching a component family (`.cursor/modules/<domain>/MODULE.md`)
+- Read one similar existing component before implementing
+- Never invent a new pattern if one already exists
+
+## Implementation
+- Components live in `src/Components/<Name>/`
+- Public API via `src/index.ts` only
+- Demo pages in `src/Pages/` for playground — not published
+- Never add CRM/app-specific API calls to library components
+- Use theme tokens from `src/Theme/` — no hardcoded brand colors
+- Add Jest tests for new behavior (`*.test.tsx`)
+- Keep changes minimal — no scope creep
+
+## Output quality
+- Never create placeholder files unless explicitly asked
+- Never use fake data, lorem ipsum, example.com, or demo seeds
+- Never leave TODO comments — implement fully or report blocked
+- Production-ready components with loading/error states where applicable
+
+## Branch rules
+- Always branch from **develop** — never from main
+- Feature work: `feature/<domain>-<short-description>`
+- Bug fixes: `fix/<domain>-<short-description>`
+- Never commit directly to main
+
+## Commit rules
+- Never commit without explicit user confirmation
+- Never run git push under any condition
+- Never add Cursor co-author lines

package/.cursor/skills/task/SKILL.md

@@ -0,0 +1,167 @@
+---
+name: task
+description: >-
+  Runs the Pixelize Design Library dev pipeline: task-plan → fe-impl → test-create → test-exec → review gate → commit. Use when the user invokes @task, /task, or requests component library delivery.
+disable-model-invocation: true
+---
+
+# Task Pipeline — Pixelize Design Library
+
+Single library repo **Micro-Components** (`pixelize-design-library`). Module docs: `.cursor/modules/<domain>/MODULE.md`.
+
+Run phases in order. Do not skip unless user opts out.
+
+```
+- [ ] 1. Task plan       (agent: task-plan)
+- [ ] 2. Implementation  (agents: fe-impl + be-impl, parallel when both needed)
+- [ ] 3a. Test creation  (agent: test-create)
+- [ ] 3b. Test execution (agent: test-exec)
+- [ ] 4. Review gate     (orchestrator — show diff, wait for user)
+- [ ] 5. Commit          (orchestrator only)
+```
+
+---
+
+## Before Starting
+
+1. Read CLAUDE.md
+2. Confirm user goal — feat / fix / refactor / chore
+3. Tell user which phases apply
+
+---
+
+## Phase 1 — Task Plan
+
+Agent: task-plan → `.cursor/agents/task-plan.md`
+
+- Read `.cursor/modules/<domain>/MODULE.md` for touched component families
+- Plan saved to `.cursor/plans/current.md`
+- If current.md already exists — read it first, user may be resuming
+
+Gate: do not start phase 2 until plan has concrete tasks.
+
+---
+
+## Phase 2 — Implementation
+
+| Plan says | Action |
+|-----------|--------|
+| Library only | Invoke fe-impl only |
+| Both | Rare — fe-impl + test agents |
+
+Pass `.cursor/plans/current.md` to each agent.
+
+If blocked mid-task:
+- Save progress to `.cursor/plans/blocked/<task-name>.md` with exact blocker details
+- Stop pipeline and report to user
+
+Gate: all required agents must report Done or Blocked before phase 3.
+
+---
+
+## Phase 3 — Tests
+
+3a: test-create → `.cursor/agents/test-create.md`
+3b: test-exec → `.cursor/agents/test-exec.md`
+
+Jest: `npm test` from repo root.
+
+Gate: do not proceed to review if tests failed and not explicitly waived by user.
+
+---
+
+## Phase 4 — Review Gate
+
+```bash
+git status
+git diff
+git diff --staged
+git log -5 --oneline
+```
+
+Run git status/diff. STOP and wait for user approval.
+
+```
+CHANGES READY TO COMMIT
+
+Backend:
+- path/to/file — what changed
+
+Frontend:
+- path/to/component — what changed
+
+Tests:
+- path/to/test — what it covers
+
+MODULE.md updates:
+- path/to/MODULE.md
+
+Excluded:
+- none
+```
+
+STOP. Wait for: "yes" / "commit" / "looks good" / "go ahead"
+
+
+## Phase 5 — Commit
+
+### Commit message format
+
+```
+<type>(<module>): <concise imperative title>
+
+Backend:
+- <specific change — file context>
+
+Frontend:
+- <specific change — file context>
+
+Tests:
+- <what is covered and where>
+
+Config:
+- <migrations, registry changes, config updates>
+```
+
+### Commit steps
+
+1. Scan diff — if .env or secrets found, warn user and ask if they want to include. Commit only on confirmation.
+2. git add relevant files — state any exclusions clearly
+3. git commit using HEREDOC — never add Cursor attribution lines
+4. If Cursor injects co-author lines — amend immediately if unpushed
+5. Verify: git status + git log -1 --format=full
+6. Show commit hash to user
+7. Move `.cursor/plans/current.md` → `.cursor/plans/done/<YYYY-MM-DD>-<title>.md`
+
+Never run git push under any condition.
+
+### Commit safety
+
+- Never --no-verify unless user explicitly requests
+- Never force-push any branch
+- Nothing staged → skip commit, report clearly
+
+---
+
+## Final Report
+
+| Phase    | Status         | Notes                             |
+| -------- | -------------- | --------------------------------- |
+| 1 Plan   | done / skipped | saved to .cursor/plans/current.md |
+| 2 Impl   | fe / be / both | done / blocked                    |
+| 3 Tests  | create / exec  | pass / fail / blocked             |
+| 4 Review | approved       | confirmed by user                 |
+| 5 Commit | done / skipped | hash if committed                 |
+
+---
+
+## User Opt-outs
+
+| User says     | Effect                                    |
+| ------------- | ----------------------------------------- |
+| "plan only"   | Stop after phase 1                        |
+| "no tests"    | Skip phase 3 — confirm with user first    |
+| "no commit"   | Stop after phase 4 review                 |
+| "commit only" | Phase 4+5 only — still show diff and wait |
+| "skip review" | Go straight to commit — confirm with user |
+

package/CLAUDE.md

@@ -0,0 +1,122 @@
+# Pixelize Design Library — Agent Guide
+
+Rules for AI assistants working in **Micro-Components** (npm: `pixelize-design-library`).
+
+## 1. App name and purpose
+
+**Pixelize Design Library** — shared React UI component library and theme system for all Pixelize frontends. Published to npm; local Vite playground demos components in `src/Pages/`.
+
+## 2. Stack
+
+| Layer         | Technology                          | Version        |
+| ------------- | ----------------------------------- | -------------- |
+| Framework     | React + TypeScript                  | 18.3.1 / 5.9.3 |
+| UI base       | Chakra UI + Emotion + Framer Motion | 2.8.2          |
+| Build         | `tsc` → `dist/` + CSS copy          | —              |
+| Dev           | Vite playground                     | 6.2.0          |
+| Styling       | Tailwind + global CSS               | 3.4.17         |
+| Tests         | Jest + Testing Library              | 29.7.0         |
+| Package       | `pixelize-design-library`           | 2.2.x          |
+
+Not a monorepo — single package, one `package.json`.
+
+## 3. Repo relationship
+
+| Repo / package              | Role                                              |
+| --------------------------- | ------------------------------------------------- |
+| **Micro-Components** (here) | Source of `pixelize-design-library` npm package   |
+| **crm-frontend**            | Consumer — `npm run pixelize` to update           |
+| **account-frontend**        | Consumer                                          |
+| **social-frontend**         | Consumer                                          |
+| **tickets-frontend**        | Consumer                                          |
+| **crm-mobile**              | Consumer (native-base overlap — check mobile)     |
+| **pixelize-authenticator**  | Companion auth UI package (separate repo)         |
+
+No backend API in this repo. Demo pages may call dev APIs for playground only.
+
+## 4. Folder structure (2 levels)
+
+```
+Micro-Components/
+├── package.json, tsconfig.json, vite.config.ts
+├── src/
+│   ├── index.ts              public exports (~50)
+│   ├── withTheme.tsx         HOC wrapper
+│   ├── Components/           57 component families
+│   ├── Theme/                7 brand presets + useCustomTheme
+│   ├── Pages/                40 Vite demo/playground pages
+│   ├── Utils/, Hooks/, services/, types/
+│   └── App.tsx, Layout.tsx   playground shell
+├── dist/                     publish output (gitignored)
+└── .cursor/modules/          MODULE.md per component domain
+```
+
+## 5. Dev commands
+
+```bash
+npm start              # Vite playground
+npm run build          # tsc + copy CSS → dist/
+npm test               # Jest
+npm run test:watch
+npm run remove         # strip dev artifacts from dist before publish
+npm run package        # version patch + build + publish
+```
+
+## 6. Module / component pattern
+
+Follow the **Table** or **KanbanBoard** pattern for complex components:
+
+| Step | Path |
+| ---- | ---- |
+| Component | `src/Components/<Name>/` |
+| Subcomponents | `src/Components/<Name>/Components/` or nested folders |
+| Props/types | `<Name>Props.ts` or colocated types |
+| Tests | `*.test.tsx` next to component |
+| Stories | `*.stories.tsx` (where present) |
+| Demo page | `src/Pages/<name>.tsx` |
+| Public export | add to `src/index.ts` |
+| Module doc | `.cursor/modules/<domain>/MODULE.md` |
+
+Read `.cursor/modules/<domain>/MODULE.md` before touching a component family.
+
+## 7. Publishing integration
+
+- **Exports:** every public component must be exported from `src/index.ts`
+- **Peers:** React 18, Chakra, Emotion — consumers install alongside library
+- **Build:** `npm run build` compiles to `dist/`; never edit `dist/` directly
+- **Version:** patch releases via `npm run package`; CI publishes on merge to `develop`
+- **Breaking changes:** require version bump + consumer update in frontends
+
+## 8. Checklist — adding a new component
+
+1. Read similar component + `.cursor/modules/<domain>/MODULE.md`
+2. Create `src/Components/<Name>/` with component + props
+3. Add demo page in `src/Pages/` if needed
+4. Export from `src/index.ts`
+5. Add Jest tests (`*.test.tsx`)
+6. Update `.cursor/modules/<domain>/MODULE.md`
+7. Verify playground: `npm start`
+8. After merge to develop: consumers run `npm run pixelize` in their frontend
+
+## 9. Do
+
+- Match existing Chakra + design token patterns in `src/Theme/`
+- Keep components framework-agnostic where possible (props in, events out)
+- Add tests for new behavior
+- Use `useCustomTheme` / theme tokens — no hardcoded brand colors
+- Branch from **feature/cursor-ai-setup** or **develop**
+
+## 10. Don't
+
+- Don't add app-specific business logic (CRM entities, API calls) to library components
+- Don't break existing exports without semver major bump
+- Don't edit `dist/` — always change `src/` and rebuild
+- Don't skip `index.ts` export for public components
+- Don't introduce a second component pattern without team agreement
+- Don't commit npm tokens or `.env` secrets
+
+## Task pipeline
+
+- **Feature work:** invoke via **`/` menu → `task`** (not by typing `/task` in the message).
+- Cross-repo: **`/ → design-task**`.
+- One-time status line + hook details: [.cursor/TASK-SETUP.md](.cursor/TASK-SETUP.md).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixelize-design-library",
-  "version": "2.2.199",
+  "version": "2.2.201",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",