@nexub/mcp 4.1.0 → 4.3.0

package/dist/skill/SKILL.md

@@ -66,6 +66,7 @@ Starting points for typical SaaS screens:
 | Onboarding | `StepIndicator` + `CheckList` |
 | Search / commands | `CommandPalette` + `KeyboardShortcut` |
 | Empty, loading, error | `EmptyState`, `Skeleton`, `ErrorState`, `Toast` |
+| Expressive moment (onboarding, hero, success) | `@nexub/themes/vivid` + `data-expression="vivid"` on that area, `Aurora` behind the hero. One expressive moment per screen; keep dense tables and forms Calm |
 | White-label / customer brand | `<ThemeProvider seed="#hex">` (native: `<NexubNativeProvider seed>`), plus `createSeedStylesheet(seed)` from `@nexub/tokens/seed` rendered on the server so there is no flash. Never hand-pick brand hex for roles; try colours at nexub.design/foundations/theme-builder |
 | Marketing / landing page | `@nexub/marketing` under `data-mode="marketing"`: `MarketingNav`, `Hero`, `LogoStrip`, `StatBand`, `FeatureSplit`, `HowItWorks`, `ProductGrid`, `TestimonialGrid`, `PricingTable`, `FAQ`, `CTABand`, `MarketingFooter` |
 

package/dist/skill/references/components/aurora.md

@@ -0,0 +1,38 @@
+# Aurora
+
+A decorative background of slow-drifting colour fields from the accent roles. Subtle by default, richer under data-expression="vivid".
+
+- Package: `@nexub/react` · Category: Inline Primitives · Status: beta
+- Import: `import { Aurora } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/aurora
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string` |  | Shape it to its container, e.g. `rounded-shape-container`. The parent needs `position: relative` and `isolate` so the aurora stays behind the content. |
+
+## Example: Behind a hero
+
+```tsx
+import { Aurora, Button, EyebrowChip } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="relative isolate flex w-full flex-col items-center gap-4 overflow-hidden rounded-shape-container px-6 py-14 text-center">
+      <Aurora />
+      <EyebrowChip>New</EyebrowChip>
+      <h3 className="m-0 text-headline-md text-[var(--color-on-surface)]">Your money, at a glance</h3>
+      <p className="m-0 max-w-[40ch] text-body-md text-[var(--color-on-surface)]">The colour follows your brand, theme and dark mode.</p>
+      <Button>Get started</Button>
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- Decorative: the whole layer is `aria-hidden`.
+- The fields stop drifting under reduced motion and the layer is hidden in forced-colours mode.
+
+Related: [text-gradient](text-gradient.md)

package/dist/skill/references/components/button.md

@@ -32,6 +32,7 @@ Triggers an action or event. Supports multiple variants, sizes, and semantic ton
 | `successLabel` | `string` | `'Done'` | Announced on `success`. When set, it also replaces the visible label (with a check) instead of showing the check alone. |
 | `errorLabel` | `string` | `'Something went wrong'` | Announced on `error`. |
 | `disabled` | `boolean` | `false` | Disables the button. |
+| `magnetic` | `boolean` | `false` | 4.3: drifts a few pixels toward the pointer on hover. For one key action per screen. Off for touch and reduced motion. |
 | `fullWidth` | `boolean` | `false` | Stretches the button to fill its container. |
 | `leadingIcon` | `React.ReactNode` |  | Icon rendered before the label. |
 | `trailingIcon` | `React.ReactNode` |  | Icon rendered after the label. |
@@ -145,6 +146,18 @@ export default function Example() {
 }
 ```
 
+## Example: Magnetic
+
+`magnetic` (4.3): drifts toward the pointer. Use it for one key action per screen.
+
+```tsx
+import { Button } from '@nexub/react';
+
+export default function Example() {
+  return <Button magnetic size="lg">Start free trial</Button>;
+}
+```
+
 ## Accessibility
 
 - Roles: button

package/dist/skill/references/components/card.md

@@ -12,7 +12,7 @@ Surface container for grouping related content. Supports flat, surface, and inte
 | --- | --- | --- | --- |
 | `variant` | `'flat' \| 'surface' \| 'interactive' \| 'showcase'` | `'flat'` | `interactive` lifts 2px on hover (spatial spring, elevation 1 → 2), sinks to 0.99 on press and adds a state layer. Use it for cards that are links or buttons. `showcase` is the marketing-mode card (24px corners, soft shadow, hover lift); a flat card outside `data-mode="marketing"`. |
 | `accent` | `'leap' \| 'bookub' \| 'payub' \| 'founderub'` |  | With `variant="showcase"`: a product-coloured top edge and tint in marketing mode. Sets `data-product` on the card. Only for product-specific content. |
-| `effect` | `'none' \| 'sheen'` | `'none'` | Opt-in. `sheen` is a soft light that follows the pointer, with a brighter rim near the edge. Off for touch, reduced motion and reduced transparency. |
+| `effect` | `'none' \| 'sheen' \| 'tilt'` | `'none'` | Opt-in. `sheen` is a soft light that follows the pointer, with a brighter rim near the edge. `tilt` (4.3) also leans the card toward the pointer in 3D. Off for touch, reduced motion and reduced transparency. |
 | `tone` | `ToneValue` | `undefined` | Applies a semantic left-border accent. |
 | `asChild` | `boolean` | `false` | Merges props onto the immediate child element. |
 | `surface` | `'solid' \| 'glass'` | `'solid'` | Liquid-glass material treatment — see Foundations → Materials. |
@@ -122,6 +122,27 @@ export default function Example() {
 }
 ```
 
+## Example: Tilt
+
+`effect="tilt"` (4.3): the card leans toward the pointer and the sheen catches the light. Hover with a mouse.
+
+```tsx
+import { Card } from '@nexub/react';
+
+export default function Example() {
+  return (
+    <div className="grid w-full grid-cols-2 gap-4">
+      {['Revenue', 'Customers'].map((t) => (
+        <Card key={t} variant="interactive" effect="tilt" className="p-6">
+          <p className="m-0 text-label-md text-[var(--color-on-surface-variant)]">{t}</p>
+          <p className="m-0 text-title-lg">{t === 'Revenue' ? '$68,420' : '1,204'}</p>
+        </Card>
+      ))}
+    </div>
+  );
+}
+```
+
 ## Accessibility
 
 - Roles: region (when used as a landmark)

package/dist/skill/references/components/celebrate.md

@@ -0,0 +1,52 @@
+# Celebrate
+
+A short confetti burst for a real win, such as a first payment or finishing onboarding.
+
+- Package: `@nexub/react` · Category: Feedback · Status: beta
+- Import: `import { Celebrate } from '@nexub/react';`
+- Docs: https://nexub-ds-docs.pages.dev/components/celebrate
+
+## When to use
+
+- A rare, real win the user worked for: first payment received, onboarding finished, a goal reached.
+
+## When not to use
+
+- Routine saves or every success; use the Button success state or a Toast.
+- As the only feedback: say what happened in text too.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `active` (required) | `boolean` |  | Bursts each time this goes from false to true. |
+| `count` | `number` | `28` | Number of pieces. |
+
+## Example: On a win
+
+```tsx
+'use client';
+
+import * as React from 'react';
+import { Button, Celebrate } from '@nexub/react';
+
+export default function Example() {
+  const [paid, setPaid] = React.useState(false);
+  return (
+    <div className="relative flex flex-col items-center gap-3 py-10">
+      <Celebrate active={paid} />
+      <Button magnetic status={paid ? 'success' : 'idle'} successLabel="Paid" onClick={() => setPaid((p) => !p)}>
+        Pay $1,250
+      </Button>
+      <p role="status" className="m-0 min-h-5 text-body-sm text-[var(--color-on-surface-variant)]">{paid ? 'Payment sent. Your first one!' : ''}</p>
+    </div>
+  );
+}
+```
+
+## Accessibility
+
+- Decorative (`aria-hidden`). Announce the win in text, for example in a Toast or a status message.
+- Hidden under reduced motion.
+
+Related: [toast](toast.md), [button](button.md)

package/dist/skill/references/components.md

@@ -1,6 +1,6 @@
 # Component index
 
-Nexub DS v4.1.0. Open `components/<slug>.md` for props, examples and accessibility notes.
+Nexub DS v4.3.0. Open `components/<slug>.md` for props, examples and accessibility notes.
 Never use a component marked deprecated.
 
 ## Components — Actions
@@ -50,6 +50,7 @@ Never use a component marked deprecated.
 ## Components — Feedback
 
 - [Alert](components/alert.md) `@nexub/react`: Inline contextual message with optional title, icon, and dismiss action.
+- [Celebrate](components/celebrate.md) `@nexub/react`: A short confetti burst for a real win, such as a first payment or finishing onboarding.
 - [Spinner](components/spinner.md) `@nexub/react`: Animated loading indicator. Inherits color from context.
 - [Toast](components/toast.md) `@nexub/react`: Imperative toast notifications using the toast object. Render <Toaster /> once in your layout.
 
@@ -80,6 +81,7 @@ Never use a component marked deprecated.
 
 ## Components — Inline Primitives
 
+- [Aurora](components/aurora.md) `@nexub/react`: A decorative background of slow-drifting colour fields from the accent roles. Subtle by default, richer under data-expression="vivid".
 - [Code](components/code-inline.md) `@nexub/react`: Inline code span for technical terms and short code snippets.
 - [Kbd](components/kbd.md) `@nexub/react`: Keyboard key display — renders a styled <kbd> element.
 - [Link](components/link.md) `@nexub/react`: Styled anchor link with variant and external support.

package/dist/skill/references/tokens.md

@@ -1,6 +1,6 @@
 # Tokens
 
-Nexub DS v4.1.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
+Nexub DS v4.3.0. Every token is a CSS custom property from `@nexub/tokens/css` (loaded by `@nexub/themes/base`).
 The Tailwind preset (`@nexub/tokens/tailwind`) maps them to utilities. Never hardcode a hex, px spacing or shadow that a token covers.
 
 ## Color roles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/mcp",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "description": "MCP server for Nexub Design System: gives Claude, Cursor and any MCP client the components, patterns, tokens and design rules of the installed release.",
   "type": "module",
   "license": "MIT",