[TEST] Facelift on Vibe 4

.cursor/rules/base-components.mdc

@@ -234,7 +234,7 @@ Components support various size variants.
 
 Components use CSS custom properties for theming:
 
-- Design tokens from Vibe's styling library (`@vibe/style`)
+- Design tokens from Vibe's styling library (`monday-ui-style`)
 - Automatic dark/light mode support
 - Consistent spacing and typography scales
 

.cursor/rules/component-internal-structure.mdc

@@ -13,6 +13,7 @@ alwaysApply: false
 2. **TypeScript**: All components must be written in TypeScript.
 3. **`forwardRef`**: Prefer using `React.forwardRef` for all components that might need to expose their underlying DOM element or instance to parent components. The `ref` should be typed directly on the function's second argument.
 4. **Props Typing and Destructuring**: Props must be destructured in the component function's first argument, and this argument must be explicitly typed with the component's props type.
+5. **No Static Properties**: Never use the `withStaticProps` utility or assign static properties to components. Components should remain without attached static properties. This means avoiding patterns like `MyComponent.colors = {...}`, `MyComponent.sizes = {...}`, and even avoiding `MyComponent.displayName = "..."`.
 
 ## File Structure (within the `.tsx` file)
 

AGENTS.md

@@ -0,0 +1,7 @@
+# Agent Instructions
+
+## Kitchen Sink Vibe Sources
+
+- **Original** must resolve `@vibe/*` component code from the pinned npm packages in `packages/kitchen-sink/published-vibe/node_modules`; never alias it to workspace source or apply Current-only component overrides.
+- **Current** resolves `@vibe/*` from local workspace source and keeps the existing kitchen-sink development overrides.
+- Keep the two runtimes isolated. Verify source-related changes with both `npm run build:original` and `npm run build:current` from `packages/kitchen-sink`.

CLAUDE.md

@@ -6,6 +6,10 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 The **Vibe Design System** is monday.com's official React component library, managed as a Lerna monorepo with Yarn Workspaces. The main package `@vibe/core` provides the primary component library, while specialized packages handle icons, testing utilities, codemods, and more.
 
+## Node.js Version
+
+This repo requires **Node.js v22**. Always run `nvm use` (or `nvm use 22`) before any dev/build commands. The `.nvmrc` in `apps/kitchen-sink/` pins v22. Running on v20 will cause a `styleText` crash from `rolldown`.
+
 ## Development Commands
 
 ### Building and Testing
@@ -134,6 +138,12 @@ The repository includes an MCP (Model Context Protocol) server (`@vibe/mcp`) tha
 - **Metadata generation** for component documentation
 - **CSS token handling** via `@vibe/style` package
 
+### Kitchen Sink Vibe Sources
+- **Original** must resolve `@vibe/*` component code from the pinned npm packages in `apps/kitchen-sink/published-vibe/node_modules`; never alias it to workspace source or apply Current-only component overrides.
+- **Current** resolves `@vibe/*` from local workspace source and keeps the existing kitchen-sink development overrides.
+- Keep the two runtimes isolated. Verify source-related changes with both `npm run build:original` and `npm run build:current` from `apps/kitchen-sink`.
+- Kitchen-sink lives in `app/` (not `packages/`) so it is excluded from the root Yarn workspace and CI installs. Run `yarn install` inside `apps/kitchen-sink` before first use.
+
 ## Important Files and Conventions
 
 ### Configuration Files

apps/kitchen-sink/.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.superpowers

apps/kitchen-sink/.nvmrc

@@ -0,0 +1 @@
+v22.23

apps/kitchen-sink/README.md

@@ -0,0 +1,69 @@
+# Facelift Kitchen Sink
+
+An interactive playground for exploring [@vibe/core](https://www.npmjs.com/package/@vibe/core) components. Click any card to tweak its state, customize theme tokens, compare your design against defaults, and pick up where you left off — everything persists in the browser.
+
+## Run it
+
+```bash
+npm install
+npm run dev
+```
+
+Open the URL Vite prints (usually http://localhost:5173).
+
+## Scripts
+
+| Command | What it does |
+| --- | --- |
+| `npm run dev` | Start the Vite dev server |
+| `npm run check` | Type-check and production build |
+| `npm test` | Run Vitest unit tests (persistence + CSS override helpers) |
+
+## Navigation
+
+The **left pane** is the only navigation:
+
+- **Components** — 3×3 grid of all nine demos with a control bar below for the focused card
+- **Theme** — token editors with sub-pages: Colors, Radius, Spacing, Typography
+- **Light / Dark / Black** — global theme mode toggles at the bottom of the left pane (always visible)
+
+Click a component card to focus it and show its controls. Theme sub-pages appear indented under Theme when that view is active.
+
+## Compare
+
+On the Components page, use the **Compare** button in the main area to open a side-by-side view:
+
+- **Original** — default component states
+- **Your design** — your current saved states
+
+Both columns share the same theme. Compare is component-state only (not a theme A/B). Reload always returns to the normal editing view.
+
+## Persistence
+
+All state is saved to `localStorage` under the key `facelift-kitchen-sink-state`:
+
+- Active view and theme sub-page
+- Light / Dark / Black mode
+- Per-component control values
+- Focused card
+- Theme token overrides (colors, radius, spacing, typography)
+
+Compare mode is **not** persisted — it resets to off on reload.
+
+## Components (fixed order)
+
+Icon Button, Button, Button Group, Tabs, Label, Chip, Text Field, Dropdown, Toast, Stroke Spotlight
+
+Each lives in `src/sections/*.section.tsx` and exports `{ id, title, defaultState, controls, Demo }`. Files are auto-collected via `import.meta.glob` and sorted by the order above.
+
+## Project layout
+
+| Path | Purpose |
+| --- | --- |
+| `src/context/KitchenSinkContext.tsx` | App state + localStorage sync |
+| `src/components/LeftPane.tsx` | Left navigation + theme mode |
+| `src/components/ComponentsView.tsx` | Grid, control bar, Compare entry |
+| `src/components/CompareView.tsx` | Side-by-side default vs current |
+| `src/components/ThemePanel.tsx` | Token editors + preview strip |
+| `src/lib/storage.ts` | Load/save/migrate persisted state |
+| `src/tests/` | Vitest tests for pure helpers |