@xenition/ui 0.1.0

package/dist/marketing/NewsletterSignup.js

@@ -0,0 +1,77 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewsletterSignup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const Button_1 = require("../primitives/Button");
+const Input_1 = require("../primitives/Input");
+const cn_1 = require("../primitives/cn");
+/** Basic, permissive email shape check (no network, no dependency). */
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+/**
+ * Email-capture block: heading, subtext, validated email input, submit button,
+ * and success/error states. The endpoint lives entirely in the caller's async
+ * `onSubmit(email)` handler — never hardcoded here.
+ */
+exports.NewsletterSignup = React.forwardRef(function NewsletterSignup({ heading = 'Stay in the loop', subtext, onSubmit, placeholder = 'you@example.com', buttonLabel = 'Subscribe', successMessage = "Thanks — you're subscribed.", invalidMessage = 'Enter a valid email address.', errorMessage = 'Something went wrong. Please try again.', className, ...rest }, ref) {
+    const [email, setEmail] = React.useState('');
+    const [status, setStatus] = React.useState('idle');
+    const [message, setMessage] = React.useState(null);
+    const messageId = React.useId();
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        if (!EMAIL_RE.test(email.trim())) {
+            setStatus('error');
+            setMessage(invalidMessage);
+            return;
+        }
+        setStatus('submitting');
+        setMessage(null);
+        try {
+            await onSubmit(email.trim());
+            setStatus('success');
+            setMessage(successMessage);
+            setEmail('');
+        }
+        catch (error) {
+            setStatus('error');
+            setMessage(error instanceof Error && error.message ? error.message : errorMessage);
+        }
+    };
+    const invalid = status === 'error';
+    return ((0, jsx_runtime_1.jsxs)("form", { ref: ref, "data-xen-newsletter": "", "data-status": status, onSubmit: handleSubmit, noValidate: true, className: (0, cn_1.cn)('flex flex-col gap-[var(--xen-space-sm)] rounded-[var(--xen-radius-lg)] border border-border bg-surface text-on-surface', 'p-[var(--xen-space-lg)]', className), ...rest, children: [heading !== undefined ? ((0, jsx_runtime_1.jsx)("h3", { className: "font-heading text-lg font-semibold", children: heading })) : null, subtext !== undefined ? (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: subtext }) : null, (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-[var(--xen-space-sm)] sm:flex-row", children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { type: "email", name: "email", value: email, onChange: (e) => setEmail(e.target.value), placeholder: placeholder, "aria-label": "Email address", invalid: invalid, "aria-describedby": message ? messageId : undefined, disabled: status === 'submitting' }), (0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", disabled: status === 'submitting', className: "shrink-0", children: buttonLabel })] }), message ? ((0, jsx_runtime_1.jsx)("p", { id: messageId, role: status === 'error' ? 'alert' : 'status', "aria-live": "polite", className: (0, cn_1.cn)('text-sm', status === 'success' ? 'text-success' : 'text-danger'), children: message })) : null] }));
+});
+//# sourceMappingURL=NewsletterSignup.js.map

package/dist/marketing/NewsletterSignup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewsletterSignup.js","sourceRoot":"","sources":["../../src/marketing/NewsletterSignup.tsx"],"names":[],"mappings":"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"}

package/dist/marketing/OrnamentRule.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+export type OrnamentShape = 'diamond' | 'dot' | 'line' | 'none';
+export type OrnamentTone = 'accent' | 'primary' | 'border';
+export interface OrnamentRuleProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Centered ornament: rotated diamond, round dot, short bar, or none (plain rule). */
+    ornament?: OrnamentShape;
+    /** Token family tinting the rule and ornament (default `accent` — the "brass" look). */
+    tone?: OrnamentTone;
+}
+/**
+ * Editorial divider generalized from the restaurant template's brass rules: a
+ * fading 1px gradient rule with an optional centered diamond/dot/line
+ * ornament. Purely decorative and static — token-tinted via `tone`, so
+ * "brass" is just whatever the theme's accent ramp says it is.
+ */
+export declare const OrnamentRule: React.ForwardRefExoticComponent<OrnamentRuleProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=OrnamentRule.d.ts.map

package/dist/marketing/OrnamentRule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrnamentRule.d.ts","sourceRoot":"","sources":["../../src/marketing/OrnamentRule.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,MAAM,CAAC;AAChE,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,sFAAsF;IACtF,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,wFAAwF;IACxF,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AA2CD;;;;;GAKG;AACH,eAAO,MAAM,YAAY,0FAoBxB,CAAC"}

package/dist/marketing/OrnamentRule.js

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrnamentRule = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const inject_1 = require("../motion/internal/inject");
+const cn_1 = require("../primitives/cn");
+const TONES = ['accent', 'primary', 'border'];
+/** Ramp step used for each tone's rule gradient / ornament fill. */
+const TONE_VAR = {
+    accent: 'var(--xen-accent-400)',
+    primary: 'var(--xen-primary-400)',
+    border: 'var(--xen-border)',
+};
+const ORNAMENT_CSS = `
+[data-xen-ornament-rule] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+[data-xen-ornament-rule]::before,
+[data-xen-ornament-rule]::after {
+  content: '';
+  flex: 1 1 auto;
+  height: 1px;
+}
+[data-xen-ornament-rule] [data-xen-ornament] {
+  flex: none;
+  margin: 0 1rem;
+}
+[data-xen-ornament-rule="none"] [data-xen-ornament] { display: none; }
+[data-xen-ornament-rule] [data-xen-ornament="diamond"] { width: 7px; height: 7px; transform: rotate(45deg); }
+[data-xen-ornament-rule] [data-xen-ornament="dot"] { width: 6px; height: 6px; border-radius: 9999px; }
+[data-xen-ornament-rule] [data-xen-ornament="line"] { width: 24px; height: 1px; }
+${TONES.map((tone) => `
+[data-xen-ornament-rule][data-tone="${tone}"]::before {
+  background-image: linear-gradient(90deg, transparent, color-mix(in srgb, ${TONE_VAR[tone]} 65%, transparent));
+}
+[data-xen-ornament-rule][data-tone="${tone}"]::after {
+  background-image: linear-gradient(270deg, transparent, color-mix(in srgb, ${TONE_VAR[tone]} 65%, transparent));
+}
+[data-xen-ornament-rule][data-tone="${tone}"] [data-xen-ornament] { background-color: ${TONE_VAR[tone]}; }`).join('\n')}
+`;
+/**
+ * Editorial divider generalized from the restaurant template's brass rules: a
+ * fading 1px gradient rule with an optional centered diamond/dot/line
+ * ornament. Purely decorative and static — token-tinted via `tone`, so
+ * "brass" is just whatever the theme's accent ramp says it is.
+ */
+exports.OrnamentRule = React.forwardRef(function OrnamentRule({ ornament = 'diamond', tone = 'accent', className, ...rest }, ref) {
+    (0, inject_1.injectStyleOnce)('xen-ornament-rule-styles', ORNAMENT_CSS);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, role: "separator", "aria-orientation": "horizontal", "data-xen-ornament-rule": ornament, "data-tone": tone, className: (0, cn_1.cn)(className), ...rest, children: (0, jsx_runtime_1.jsx)("span", { "data-xen-ornament": ornament, "aria-hidden": "true" }) }));
+});
+//# sourceMappingURL=OrnamentRule.js.map

package/dist/marketing/OrnamentRule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrnamentRule.js","sourceRoot":"","sources":["../../src/marketing/OrnamentRule.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+B;AAC/B,sDAA4D;AAC5D,yCAAsC;AAYtC,MAAM,KAAK,GAA4B,CAAC,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC;AAEvE,oEAAoE;AACpE,MAAM,QAAQ,GAAiC;IAC7C,MAAM,EAAE,uBAAuB;IAC/B,OAAO,EAAE,wBAAwB;IACjC,MAAM,EAAE,mBAAmB;CAC5B,CAAC;AAEF,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;EAoBnB,KAAK,CAAC,GAAG,CACT,CAAC,IAAI,EAAE,EAAE,CAAC;sCAC0B,IAAI;6EACmC,QAAQ,CAAC,IAAI,CAAC;;sCAErD,IAAI;8EACoC,QAAQ,CAAC,IAAI,CAAC;;sCAEtD,IAAI,8CAA8C,QAAQ,CAAC,IAAI,CAAC,KAAK,CAC1G,CAAC,IAAI,CAAC,IAAI,CAAC;CACX,CAAC;AAEF;;;;;GAKG;AACU,QAAA,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,SAAS,YAAY,CACnB,EAAE,QAAQ,GAAG,SAAS,EAAE,IAAI,GAAG,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAC7D,GAAG;IAEH,IAAA,wBAAe,EAAC,0BAA0B,EAAE,YAAY,CAAC,CAAC;IAC1D,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,WAAW,sBACC,YAAY,4BACL,QAAQ,eACrB,IAAI,EACf,SAAS,EAAE,IAAA,OAAE,EAAC,SAAS,CAAC,KACpB,IAAI,YAER,sDAAyB,QAAQ,iBAAc,MAAM,GAAG,GACpD,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/marketing/ParticleField.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+export type ParticleMood = 'ember' | 'snow' | 'fireflies' | 'sparks';
+export interface ParticleFieldProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Particle character: rising embers, falling snow, blinking fireflies, or fast sparks. */
+    mood?: ParticleMood;
+    /** Particle count (clamped 0–80; default 18). */
+    density?: number;
+    /** Layout seed — same seed, same sky on server, client, and e2e runs. */
+    seed?: number;
+}
+/** Everything one particle needs; all values deterministic from (mood, index, seed). */
+export interface ParticleSpec {
+    /** Horizontal position, percent string. */
+    x: string;
+    /** Vertical anchor, percent string (fireflies' `top`). */
+    y: string;
+    /** Unitless 0–1 vertical factor (drives the reduced-motion rest pose). */
+    yFactor: number;
+    size: string;
+    duration: string;
+    delay: string;
+    /** Horizontal drift over one cycle, px string. */
+    drift: string;
+    /** Peak opacity. */
+    opacity: number;
+}
+/**
+ * Pure, deterministic particle layout — golden-ratio low-discrepancy spread,
+ * no `Math.random`, so server/client/e2e all see the same sky. Exported so
+ * tests (and curious templates) can assert determinism directly.
+ */
+export declare function computeParticles(mood: ParticleMood, density: number, seed: number): ParticleSpec[];
+/**
+ * Ambient particle field generalized from the restaurant template's ember
+ * sky: four moods (`ember` | `snow` | `fireflies` | `sparks`), pure CSS
+ * animation, deterministic golden-ratio layout (`seed`), token-only colors.
+ * Decorative (`aria-hidden`, `pointer-events: none`) — position it inside a
+ * `relative overflow-hidden` section; it renders `absolute inset-0`. Under
+ * `prefers-reduced-motion` the particles freeze into a faint static scatter.
+ */
+export declare const ParticleField: React.ForwardRefExoticComponent<ParticleFieldProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ParticleField.d.ts.map

package/dist/marketing/ParticleField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticleField.d.ts","sourceRoot":"","sources":["../../src/marketing/ParticleField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAErE,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,2FAA2F;IAC3F,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wFAAwF;AACxF,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,CAAC,EAAE,MAAM,CAAC;IACV,0DAA0D;IAC1D,CAAC,EAAE,MAAM,CAAC;IACV,0EAA0E;IAC1E,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB;AAsBD;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,YAAY,EAClB,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,MAAM,GACX,YAAY,EAAE,CAiBhB;AAoFD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,2FAwCzB,CAAC"}

package/dist/marketing/ParticleField.js

@@ -0,0 +1,176 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParticleField = void 0;
+exports.computeParticles = computeParticles;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const inject_1 = require("../motion/internal/inject");
+const cn_1 = require("../primitives/cn");
+const GOLDEN = 0.618033988749895;
+const TUNING = {
+    ember: { sizeMin: 3, sizeMax: 8, durMin: 9, durMax: 18, driftMax: 120 },
+    sparks: { sizeMin: 2, sizeMax: 4.5, durMin: 4, durMax: 9, driftMax: 60 },
+    snow: { sizeMin: 2.5, sizeMax: 6.5, durMin: 12, durMax: 24, driftMax: 90 },
+    fireflies: { sizeMin: 3, sizeMax: 5.5, durMin: 4, durMax: 9, driftMax: 24 },
+};
+const clampDensity = (density) => Math.max(0, Math.min(80, Math.round(density)));
+/**
+ * Pure, deterministic particle layout — golden-ratio low-discrepancy spread,
+ * no `Math.random`, so server/client/e2e all see the same sky. Exported so
+ * tests (and curious templates) can assert determinism directly.
+ */
+function computeParticles(mood, density, seed) {
+    const tune = TUNING[mood];
+    return Array.from({ length: clampDensity(density) }, (_, i) => {
+        const t = ((i + seed) * GOLDEN) % 1;
+        const u = ((i + seed + 7) * GOLDEN) % 1;
+        const v = ((i + seed + 13) * GOLDEN) % 1;
+        return {
+            x: `${(t * 100).toFixed(1)}%`,
+            y: `${(8 + v * 76).toFixed(1)}%`,
+            yFactor: Number(v.toFixed(3)),
+            size: `${(tune.sizeMin + u * (tune.sizeMax - tune.sizeMin)).toFixed(1)}px`,
+            duration: `${(tune.durMin + t * (tune.durMax - tune.durMin)).toFixed(1)}s`,
+            delay: `${(-u * (tune.durMin + tune.durMax)).toFixed(1)}s`,
+            drift: `${((u - 0.5) * 2 * tune.driftMax).toFixed(0)}px`,
+            opacity: Number((0.35 + t * 0.45).toFixed(2)),
+        };
+    });
+}
+/**
+ * One sheet covers all moods: geometry/timing arrive per particle as inline
+ * custom properties; every color is a `--xen-*` ramp gradient. Reduced motion
+ * freezes each particle at a deterministic rest pose instead of animating.
+ */
+const PARTICLE_CSS = `
+@keyframes xen-particle-rise {
+  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
+  6% { opacity: var(--xen-particle-o); }
+  30% { transform: translate3d(calc(var(--xen-particle-drift) * 0.35), -26vh, 0) scale(0.9); opacity: calc(var(--xen-particle-o) * 0.85); }
+  60% { transform: translate3d(calc(var(--xen-particle-drift) * 0.7), -52vh, 0) scale(0.6); opacity: calc(var(--xen-particle-o) * 0.5); }
+  100% { transform: translate3d(var(--xen-particle-drift), -88vh, 0) scale(0.2); opacity: 0; }
+}
+@keyframes xen-particle-fall {
+  0% { transform: translate3d(0, 0, 0); opacity: 0; }
+  8% { opacity: var(--xen-particle-o); }
+  50% { transform: translate3d(var(--xen-particle-drift), 55vh, 0); opacity: var(--xen-particle-o); }
+  100% { transform: translate3d(calc(var(--xen-particle-drift) * 0.4), 110vh, 0); opacity: 0; }
+}
+@keyframes xen-particle-blink {
+  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0; }
+  35% { opacity: var(--xen-particle-o); }
+  50% { transform: translate3d(var(--xen-particle-drift), calc(var(--xen-particle-drift) * -0.4), 0); opacity: calc(var(--xen-particle-o) * 0.6); }
+  70% { opacity: var(--xen-particle-o); }
+}
+[data-xen-particles] {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+[data-xen-particle] {
+  position: absolute;
+  left: var(--xen-particle-x);
+  width: var(--xen-particle-s);
+  height: var(--xen-particle-s);
+  border-radius: 9999px;
+  opacity: 0;
+  filter: blur(0.4px);
+  will-change: transform, opacity;
+  animation-duration: var(--xen-particle-dur);
+  animation-delay: var(--xen-particle-delay);
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+[data-xen-particles="ember"] [data-xen-particle] {
+  bottom: -2vh;
+  background-image: radial-gradient(circle, var(--xen-accent-100) 0%, var(--xen-primary-400) 45%, transparent 72%);
+  animation-name: xen-particle-rise;
+}
+[data-xen-particles="sparks"] [data-xen-particle] {
+  bottom: -2vh;
+  background-image: radial-gradient(circle, var(--xen-accent-200) 0%, var(--xen-accent-500) 50%, transparent 72%);
+  animation-name: xen-particle-rise;
+}
+[data-xen-particles="snow"] [data-xen-particle] {
+  top: -4vh;
+  background-image: radial-gradient(circle, var(--xen-neutral-50) 0%, var(--xen-neutral-200) 55%, transparent 78%);
+  animation-name: xen-particle-fall;
+  animation-timing-function: ease-in-out;
+}
+[data-xen-particles="fireflies"] [data-xen-particle] {
+  top: var(--xen-particle-y);
+  background-image: radial-gradient(circle, var(--xen-accent-200) 0%, var(--xen-accent-400) 40%, transparent 70%);
+  animation-name: xen-particle-blink;
+  animation-timing-function: ease-in-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-xen-particle] {
+    animation: none !important;
+    opacity: calc(var(--xen-particle-o) * 0.35);
+  }
+  [data-xen-particles="ember"] [data-xen-particle],
+  [data-xen-particles="sparks"] [data-xen-particle] {
+    transform: translate3d(calc(var(--xen-particle-drift) * 0.5), calc(var(--xen-particle-yn) * -70vh), 0);
+  }
+  [data-xen-particles="snow"] [data-xen-particle] {
+    transform: translate3d(calc(var(--xen-particle-drift) * 0.3), calc(var(--xen-particle-yn) * 70vh), 0);
+  }
+}
+`;
+/**
+ * Ambient particle field generalized from the restaurant template's ember
+ * sky: four moods (`ember` | `snow` | `fireflies` | `sparks`), pure CSS
+ * animation, deterministic golden-ratio layout (`seed`), token-only colors.
+ * Decorative (`aria-hidden`, `pointer-events: none`) — position it inside a
+ * `relative overflow-hidden` section; it renders `absolute inset-0`. Under
+ * `prefers-reduced-motion` the particles freeze into a faint static scatter.
+ */
+exports.ParticleField = React.forwardRef(function ParticleField({ mood = 'ember', density = 18, seed = 1, className, ...rest }, ref) {
+    (0, inject_1.injectStyleOnce)('xen-particle-styles', PARTICLE_CSS);
+    const particles = React.useMemo(() => computeParticles(mood, density, seed), [mood, density, seed]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "aria-hidden": "true", "data-xen-particles": mood, className: (0, cn_1.cn)(className), ...rest, children: particles.map((particle, index) => ((0, jsx_runtime_1.jsx)("span", { "data-xen-particle": "", style: {
+                '--xen-particle-x': particle.x,
+                '--xen-particle-y': particle.y,
+                '--xen-particle-yn': particle.yFactor,
+                '--xen-particle-s': particle.size,
+                '--xen-particle-dur': particle.duration,
+                '--xen-particle-delay': particle.delay,
+                '--xen-particle-drift': particle.drift,
+                '--xen-particle-o': particle.opacity,
+            } }, index))) }));
+});
+//# sourceMappingURL=ParticleField.js.map

package/dist/marketing/ParticleField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticleField.js","sourceRoot":"","sources":["../../src/marketing/ParticleField.tsx"],"names":[],"mappings":"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"}

package/dist/marketing/PointerHalo.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export type PointerHaloMode = 'idle' | 'link' | 'grow';
+export interface PointerHaloProps {
+    /** Halo diameter at rest, px (default 22). */
+    size?: number;
+    /** Diameter when hovering interactive elements — a "tighten" (default 12). */
+    linkSize?: number;
+    /** Diameter over `[data-halo="grow"]` targets (default 72). */
+    growSize?: number;
+    /** Caption shown inside the grown halo (default none). */
+    label?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Optional custom-cursor affordance generalized from the portfolio template:
+ * a small accent halo trailing the pointer that tightens over interactive
+ * elements and swells into a labelled disc over `[data-halo="grow"]` targets
+ * (project covers, oversized CTAs).
+ *
+ * Safety rails: renders nothing on the server, under
+ * `prefers-reduced-motion`, and on coarse/touch pointers (runtime
+ * `(pointer: fine)` check + CSS fallback); non-mouse pointer events are
+ * ignored; the native cursor is never suppressed. The trailing ease is a
+ * rAF lerp written straight to the element style — no re-render per move,
+ * no animation library.
+ */
+export declare function PointerHalo({ size, linkSize, growSize, label, className, }: PointerHaloProps): React.ReactElement | null;
+//# sourceMappingURL=PointerHalo.d.ts.map

package/dist/marketing/PointerHalo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointerHalo.d.ts","sourceRoot":"","sources":["../../src/marketing/PointerHalo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0CD;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAS,EACT,QAAa,EACb,QAAa,EACb,KAAK,EACL,SAAS,GACV,EAAE,gBAAgB,GAAG,KAAK,CAAC,YAAY,GAAG,IAAI,CA0E9C"}

package/dist/marketing/PointerHalo.js

@@ -0,0 +1,153 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PointerHalo = PointerHalo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const inject_1 = require("../motion/internal/inject");
+const reduced_motion_1 = require("../motion/internal/reduced-motion");
+/**
+ * Colors are `color-mix` over the semantic accent slot; a `(pointer: coarse)`
+ * media rule hides the halo outright on touch devices as a second line of
+ * defense behind the runtime fine-pointer check.
+ */
+const HALO_CSS = `
+[data-xen-pointer-halo] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2147483000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  pointer-events: none;
+  background-color: color-mix(in srgb, var(--xen-accent) 20%, transparent);
+  border: 1px solid color-mix(in srgb, var(--xen-accent) 80%, transparent);
+  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1), height 320ms cubic-bezier(0.22, 1, 0.36, 1), background-color 320ms ease;
+}
+[data-xen-pointer-halo][data-mode="grow"] {
+  background-color: color-mix(in srgb, var(--xen-accent) 92%, transparent);
+  border-color: transparent;
+}
+[data-xen-pointer-halo] [data-xen-pointer-halo-label] {
+  color: var(--xen-on-accent);
+  font-family: var(--xen-font-body);
+  font-size: 0.625rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+@media (pointer: coarse) {
+  [data-xen-pointer-halo] { display: none; }
+}
+`;
+const INTERACTIVE = 'a, button, input, textarea, select, label, [role="button"]';
+/**
+ * Optional custom-cursor affordance generalized from the portfolio template:
+ * a small accent halo trailing the pointer that tightens over interactive
+ * elements and swells into a labelled disc over `[data-halo="grow"]` targets
+ * (project covers, oversized CTAs).
+ *
+ * Safety rails: renders nothing on the server, under
+ * `prefers-reduced-motion`, and on coarse/touch pointers (runtime
+ * `(pointer: fine)` check + CSS fallback); non-mouse pointer events are
+ * ignored; the native cursor is never suppressed. The trailing ease is a
+ * rAF lerp written straight to the element style — no re-render per move,
+ * no animation library.
+ */
+function PointerHalo({ size = 22, linkSize = 12, growSize = 72, label, className, }) {
+    const reduced = (0, reduced_motion_1.usePrefersReducedMotion)();
+    const [finePointer, setFinePointer] = React.useState(false);
+    const [mode, setMode] = React.useState('idle');
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (typeof window === 'undefined' || typeof window.matchMedia !== 'function')
+            return;
+        setFinePointer(window.matchMedia('(pointer: fine)').matches);
+    }, []);
+    const active = finePointer && !reduced;
+    React.useEffect(() => {
+        if (!active || typeof window === 'undefined')
+            return undefined;
+        const target = { x: -200, y: -200 };
+        const current = { x: -200, y: -200 };
+        let frame = 0;
+        const step = () => {
+            frame = 0;
+            current.x += (target.x - current.x) * 0.22;
+            current.y += (target.y - current.y) * 0.22;
+            const el = ref.current;
+            if (el !== null) {
+                el.style.transform = `translate3d(${current.x.toFixed(1)}px, ${current.y.toFixed(1)}px, 0) translate(-50%, -50%)`;
+            }
+            if (Math.abs(target.x - current.x) + Math.abs(target.y - current.y) > 0.5) {
+                frame = window.requestAnimationFrame(step);
+            }
+        };
+        const onMove = (event) => {
+            if (event.pointerType !== 'mouse')
+                return;
+            target.x = event.clientX;
+            target.y = event.clientY;
+            const el = event.target instanceof Element ? event.target : null;
+            if (el?.closest('[data-halo="grow"]') != null)
+                setMode('grow');
+            else if (el?.closest(INTERACTIVE) != null)
+                setMode('link');
+            else
+                setMode('idle');
+            if (frame === 0)
+                frame = window.requestAnimationFrame(step);
+        };
+        window.addEventListener('pointermove', onMove, { passive: true });
+        return () => {
+            window.removeEventListener('pointermove', onMove);
+            if (frame !== 0)
+                window.cancelAnimationFrame(frame);
+        };
+    }, [active]);
+    if (!active)
+        return null;
+    (0, inject_1.injectStyleOnce)('xen-pointer-halo-styles', HALO_CSS);
+    const diameter = mode === 'grow' ? growSize : mode === 'link' ? linkSize : size;
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, "aria-hidden": "true", "data-xen-pointer-halo": "", "data-mode": mode, className: className, style: {
+            width: diameter,
+            height: diameter,
+            transform: 'translate3d(-200px, -200px, 0) translate(-50%, -50%)',
+        }, children: mode === 'grow' && label != null ? ((0, jsx_runtime_1.jsx)("span", { "data-xen-pointer-halo-label": "", children: label })) : null }));
+}
+//# sourceMappingURL=PointerHalo.js.map

package/dist/marketing/PointerHalo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PointerHalo.js","sourceRoot":"","sources":["../../src/marketing/PointerHalo.tsx"],"names":[],"mappings":"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"}