keystone-design-bootstrap 1.0.59 → 1.0.61

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keystone-design-bootstrap",
-  "version": "1.0.59",
+  "version": "1.0.61",
   "description": "Keystone Design Bootstrap - Sections, Elements, and Theme System for customer websites",
   "type": "module",
   "main": "./src/index.ts",

package/src/design_system/portal/LoginForm.tsx

@@ -4,7 +4,7 @@ import React, { useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
 import { countries } from '../../utils/countries';
 import { getNationalMask, formatDigitsToMask } from '../../utils/phone-helpers';
-
+import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
 type Step = 'identifier' | 'returning' | 'new';
 
 interface LoginFormProps {
@@ -13,7 +13,7 @@ interface LoginFormProps {
 }
 
 const inputClass =
-  'block w-full rounded border border-gray-300 bg-primary px-3 py-2.5 text-sm text-primary placeholder-gray-400 focus:border-gray-700 focus:outline-none focus:ring-1 focus:ring-gray-700 transition-colors';
+  'block w-full rounded-input border border-primary bg-primary px-3 py-2.5 text-sm text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors';
 const labelClass = 'block text-sm text-secondary mb-1';
 
 function isValidEmail(value: string): boolean {
@@ -73,9 +73,13 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
       });
       const result = await res.json().catch(() => ({ exists: null }));
       if (result.exists === true) {
+        await setPixelUserData({ email: emailVal, phone: fullPhone });
+        firePixelEvent('Lead');
         setWelcomeName(result.firstName ?? null);
         setStep(result.hasPassword === false ? 'new' : 'returning');
       } else if (result.exists === false) {
+        await setPixelUserData({ email: emailVal, phone: fullPhone });
+        firePixelEvent('Lead');
         setStep('new');
       } else {
         setError('Something went wrong. Please check your connection and try again.');
@@ -185,7 +189,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
       </div>
 
       {error && (
-        <div className="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+        <div className="mb-4 rounded-input border border-error bg-error-primary px-3 py-2 text-sm text-error-primary">
           {error}
         </div>
       )}
@@ -206,17 +210,17 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             />
           </div>
           <div className="flex items-center gap-3">
-            <hr className="flex-1 border-gray-200" />
-            <span className="text-xs text-gray-400">or</span>
-            <hr className="flex-1 border-gray-200" />
+            <hr className="flex-1 border-secondary" />
+            <span className="text-xs text-quaternary">or</span>
+            <hr className="flex-1 border-secondary" />
           </div>
           <div>
             <label className={labelClass}>Phone number</label>
-            <div className="flex rounded border border-gray-300 overflow-hidden focus-within:border-gray-700 focus-within:ring-1 focus-within:ring-gray-700 transition-colors">
+            <div className="flex rounded-input border border-primary overflow-hidden focus-within:border-brand focus-within:ring-1 focus-within:ring-brand transition-colors">
               <select
                 value={selectedCountry}
                 onChange={(e) => { setSelectedCountry(e.target.value); setPhoneValue(''); }}
-                className="border-r border-gray-200 bg-gray-50 px-2 py-2.5 text-sm text-gray-700 focus:outline-none"
+                className="border-r border-secondary bg-secondary px-2 py-2.5 text-sm text-secondary focus:outline-none"
                 aria-label="Country code"
               >
                 {countryOptions.map((opt) => (
@@ -228,7 +232,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
                 value={phoneValue}
                 onChange={handlePhoneChange}
                 placeholder={nationalPlaceholder}
-                className="flex-1 px-3 py-2.5 text-sm text-gray-900 placeholder-gray-400 bg-transparent focus:outline-none"
+                className="flex-1 px-3 py-2.5 text-sm text-primary placeholder-quaternary bg-transparent focus:outline-none"
               />
             </div>
           </div>
@@ -236,7 +240,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             <button
               type="submit"
               disabled={loading}
-              className="w-full rounded border border-secondary bg-primary px-4 py-2.5 text-sm font-medium text-primary hover:bg-secondary transition-colors disabled:opacity-50"
+              className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
             >
               {loading ? 'Looking you up…' : 'Continue'}
             </button>
@@ -264,7 +268,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             <button
               type="submit"
               disabled={loading}
-              className="w-full rounded border border-secondary bg-primary px-4 py-2.5 text-sm font-medium text-primary hover:bg-secondary transition-colors disabled:opacity-50"
+              className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
             >
               {loading ? 'Signing in…' : 'Sign in'}
             </button>
@@ -339,7 +343,7 @@ export function LoginForm({ onSuccess, onClose }: LoginFormProps) {
             <button
               type="submit"
               disabled={loading}
-              className="w-full rounded border border-secondary bg-primary px-4 py-2.5 text-sm font-medium text-primary hover:bg-secondary transition-colors disabled:opacity-50"
+              className="w-full rounded-interactive bg-brand-solid px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-solid_hover transition-colors disabled:opacity-50"
             >
               {loading ? 'Creating account…' : 'Create account'}
             </button>

package/src/design_system/portal/MessageComposer.tsx

@@ -67,12 +67,12 @@ export function MessageComposer({ contactId }: { contactId: number }) {
           placeholder="Type a message… (Enter to send)"
           rows={1}
           disabled={isPending}
-          className="flex-1 resize-none rounded-xl border border-gray-300 bg-primary px-3 py-2 text-sm text-primary placeholder-gray-400 focus:border-gray-700 focus:outline-none focus:ring-1 focus:ring-gray-700 transition-colors disabled:opacity-50"
+          className="flex-1 resize-none rounded-input border border-primary bg-primary px-3 py-2 text-sm text-primary placeholder-quaternary focus:border-brand focus:outline-none focus:ring-1 focus:ring-brand transition-colors disabled:opacity-50"
         />
         <button
           type="submit"
           disabled={!body.trim() || isPending}
-          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gray-900 text-white transition-colors hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed"
+          className="flex h-9 w-9 shrink-0 items-center justify-center rounded-interactive bg-brand-solid text-white transition-colors hover:bg-brand-solid_hover disabled:opacity-40 disabled:cursor-not-allowed"
           aria-label="Send message"
         >
           {isPending ? (

package/src/design_system/portal/PortalPage.tsx

@@ -165,7 +165,7 @@ function LoginWall({ message, cta = 'Sign in' }: { message: string; cta?: string
       <p className="text-sm font-medium text-primary">{message}</p>
       <button
         data-open-login-modal
-        className="mt-4 cursor-pointer rounded-lg bg-gray-900 px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-700"
+        className="mt-4 cursor-pointer rounded-interactive bg-brand-solid px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-brand-solid_hover"
       >
         {cta}
       </button>
@@ -175,7 +175,7 @@ function LoginWall({ message, cta = 'Sign in' }: { message: string; cta?: string
 
 function EmptyState({ message }: { message: string }) {
   return (
-    <div className="rounded-xl border border-secondary bg-secondary py-16 text-center">
+    <div className="rounded-component border border-secondary bg-secondary py-16 text-center">
       <p className="text-sm text-tertiary">{message}</p>
     </div>
   );
@@ -214,7 +214,7 @@ function ServiceItemRow({
                   <Link
                     key={offer.id}
                     href={specialsHref}
-                    className="inline-flex items-center rounded-full bg-brand-50 border border-brand-200 px-2 py-0.5 text-xs font-medium text-brand-700 hover:bg-brand-100 transition-colors"
+                    className="inline-flex items-center rounded-badge bg-secondary border border-brand px-2 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors"
                   >
                     Special: {offer.name}
                   </Link>
@@ -223,7 +223,7 @@ function ServiceItemRow({
                     key={offer.id}
                     data-open-login-modal
                     data-login-redirect={specialsHref}
-                    className="inline-flex items-center rounded-full bg-brand-50 border border-brand-200 px-2 py-0.5 text-xs font-medium text-brand-700 hover:bg-brand-100 transition-colors cursor-pointer"
+                    className="inline-flex items-center rounded-badge bg-secondary border border-brand px-2 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors cursor-pointer"
                   >
                     Special: {offer.name}
                   </button>
@@ -267,7 +267,7 @@ function ServicesPanel({
   return (
     <>
       <PortalTabTracker event="ViewContent" params={{ contentName: 'Services', contentCategory: 'Services' }} />
-      <div className="divide-y divide-tertiary rounded-xl border border-secondary bg-primary overflow-hidden">
+      <div className="divide-y divide-tertiary rounded-component border border-secondary bg-primary overflow-hidden">
         {activeServices.map((service) => (
           <details key={service.id} className="group">
             <summary className="flex cursor-pointer list-none items-center justify-between px-5 py-4 hover:bg-secondary transition-colors">
@@ -325,7 +325,7 @@ function PackagesPanel({
         {packages.map((pkg) => {
           const activeOffers = (pkg.offers ?? []).filter((o) => o.active !== false && !o.expired);
           return (
-            <div key={pkg.id} className="group rounded-xl border border-secondary bg-primary p-4 flex flex-col gap-3">
+            <div key={pkg.id} className="group rounded-component border border-secondary bg-primary p-4 flex flex-col gap-3">
             <div className="flex items-start gap-3">
               <RowThumbnail
                 photoAttachments={pkg.photo_attachments}
@@ -371,7 +371,7 @@ function PackagesPanel({
                     <Link
                       key={offer.id}
                       href={specialsHref}
-                      className="inline-flex items-center rounded-full bg-brand-50 border border-brand-200 px-2.5 py-0.5 text-xs font-medium text-brand-700 hover:bg-brand-100 transition-colors"
+                      className="inline-flex items-center rounded-badge bg-secondary border border-brand px-2.5 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors"
                     >
                       Special: {offer.name}
                     </Link>
@@ -380,7 +380,7 @@ function PackagesPanel({
                       key={offer.id}
                       data-open-login-modal
                       data-login-redirect={specialsHref}
-                      className="inline-flex items-center rounded-full bg-brand-50 border border-brand-200 px-2.5 py-0.5 text-xs font-medium text-brand-700 hover:bg-brand-100 transition-colors cursor-pointer"
+                      className="inline-flex items-center rounded-badge bg-secondary border border-brand px-2.5 py-0.5 text-xs font-medium text-brand-secondary hover:bg-secondary_hover transition-colors cursor-pointer"
                     >
                       Special: {offer.name}
                     </button>
@@ -408,7 +408,7 @@ function SpecialsPanel({ specials }: { specials: SpecialItem[] }) {
       <PortalTabTracker event="ViewContent" params={{ contentName: 'Specials', contentCategory: 'Specials' }} />
       <div className="space-y-3">
         {specials.map((special) => (
-          <div key={special.id} className="group flex items-start gap-3 rounded-xl border border-secondary bg-primary px-4 py-4">
+          <div key={special.id} className="group flex items-start gap-3 rounded-component border border-secondary bg-primary px-4 py-4">
             <RowThumbnail
               photoAttachments={special.photoAttachments}
               seed={`special-${special.id}`}
@@ -454,10 +454,10 @@ function MessagesPanel({
     businessName;
 
   return (
-    <div className="flex flex-col rounded-xl border border-secondary bg-primary overflow-hidden">
+    <div className="flex flex-col rounded-component border border-secondary bg-primary overflow-hidden">
       {/* Thread header */}
       <div className="flex items-center gap-2.5 border-b border-secondary px-4 py-3 shrink-0">
-        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-gray-900 text-xs font-semibold text-white shrink-0">
+        <div className="flex h-7 w-7 items-center justify-center rounded-full bg-brand-solid text-xs font-semibold text-white shrink-0">
           {getInitials(threadBusiness)}
         </div>
         <span className="text-sm font-semibold text-primary">{threadBusiness}</span>
@@ -480,8 +480,8 @@ function MessagesPanel({
             const isOutbound = m.direction === 'outbound';
             return (
               <div key={m.id} className={`flex ${isOutbound ? 'justify-start' : 'justify-end'}`}>
-                <div className={`max-w-[80%] rounded-2xl px-4 py-2.5 text-sm ${
-                  isOutbound ? 'bg-secondary text-primary rounded-tl-sm' : 'bg-gray-900 text-white rounded-tr-sm'
+                <div className={`max-w-[80%] rounded-component px-4 py-2.5 text-sm ${
+                  isOutbound ? 'bg-secondary text-primary' : 'bg-brand-solid text-white'
                 }`}>
                   {m.sender_display_name && (
                     <p className="mb-0.5 text-xs font-medium opacity-60">{m.sender_display_name}</p>
@@ -522,7 +522,7 @@ function BookPanel({
     return (
       <>
         <PortalTabTracker event="InitiateCheckout" />
-        <div className="rounded-xl border border-secondary overflow-hidden" style={{ height: '70vh' }}>
+        <div className="rounded-component border border-secondary overflow-hidden" style={{ height: '70vh' }}>
           <iframe
             src={bookingHref}
             className="w-full h-full"
@@ -549,7 +549,7 @@ function BookPanel({
           href={bookingHref}
           target="_blank"
           rel="noopener noreferrer"
-          className="mt-5 inline-flex items-center gap-2 rounded-lg bg-gray-900 px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-gray-700"
+          className="mt-5 inline-flex items-center gap-2 rounded-interactive bg-brand-solid px-6 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-brand-solid_hover"
         >
           {bookingLabel}
           <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
@@ -659,7 +659,7 @@ export async function PortalPage({
                 <div className="flex items-center gap-3">
                   {consumerDisplayName && (
                     <div className="hidden sm:flex items-center gap-2 rounded-full border border-secondary bg-secondary px-3 py-1.5">
-                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-gray-900 text-[9px] font-bold text-white shrink-0">
+                      <div className="flex h-5 w-5 items-center justify-center rounded-full bg-brand-solid text-[9px] font-bold text-white shrink-0">
                         {getInitials(consumerDisplayName)}
                       </div>
                       <span className="text-xs font-medium text-secondary max-w-[120px] truncate">
@@ -672,7 +672,7 @@ export async function PortalPage({
               ) : (
                 <button
                   data-open-login-modal
-                  className="cursor-pointer rounded-lg border border-secondary px-3 py-1.5 text-xs font-medium text-secondary hover:bg-secondary transition-colors"
+                  className="cursor-pointer rounded-interactive border border-secondary px-3 py-1.5 text-xs font-medium text-secondary hover:bg-secondary transition-colors"
                 >
                   Sign in
                 </button>
@@ -691,8 +691,8 @@ export async function PortalPage({
               const isActive = tab === t.id;
               const isGated = !isLoggedIn && (t.id === 'specials' || t.id === 'messages' || t.id === 'book');
               const href = `${portalHref}?tab=${t.id}`;
-              const className = `shrink-0 rounded-lg px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap ${
-                isActive ? 'bg-gray-900 text-white' : 'text-secondary hover:bg-secondary hover:text-primary'
+              const className = `shrink-0 rounded-interactive px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap ${
+                isActive ? 'bg-brand-solid text-white' : 'text-secondary hover:bg-secondary hover:text-primary'
               }`;
               if (isGated) {
                 return (

package/src/design_system/portal/RowThumbnail.tsx

@@ -26,7 +26,7 @@ export function RowThumbnail({
 
   if (list.length === 0) {
     return (
-      <div className={`${sizeClassName} shrink-0 rounded-lg bg-secondary border border-tertiary flex items-center justify-center`}>
+      <div className={`${sizeClassName} shrink-0 rounded-component bg-secondary border border-tertiary flex items-center justify-center`}>
         <svg className="size-5 text-quaternary" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
         </svg>
@@ -36,7 +36,7 @@ export function RowThumbnail({
 
   if (list.length === 1) {
     return (
-      <div className={`${sizeClassName} shrink-0 rounded-lg overflow-hidden`}>
+      <div className={`${sizeClassName} shrink-0 rounded-component overflow-hidden`}>
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img
           src={list[0]!.url}
@@ -48,7 +48,7 @@ export function RowThumbnail({
   }
 
   return (
-    <div className={`${sizeClassName} shrink-0 rounded-lg overflow-hidden relative`}>
+      <div className={`${sizeClassName} shrink-0 rounded-component overflow-hidden relative`}>
       <div
         className={`absolute inset-0 ${transitioning ? 'transition-opacity ease-in-out' : 'transition-none'}`}
         style={{ opacity: transitioning ? 0 : 1, ...(transitioning ? CROSSFADE_STYLE : {}) }}

package/src/design_system/sections/contact-section-form.aman.tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
-import { firePixelEvent } from '../../tracking/firePixelEvent';
+import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -61,6 +61,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
+                await setPixelUserData({ email: data.email, phone: data.phone });
                 firePixelEvent('Lead');
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {

package/src/design_system/sections/contact-section-form.balance.tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
-import { firePixelEvent } from '../../tracking/firePixelEvent';
+import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -61,6 +61,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
+                await setPixelUserData({ email: data.email, phone: data.phone });
                 firePixelEvent('Lead');
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {

package/src/design_system/sections/contact-section-form.barelux.tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
-import { firePixelEvent } from '../../tracking/firePixelEvent';
+import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -61,6 +61,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
+                await setPixelUserData({ email: data.email, phone: data.phone });
                 firePixelEvent('Lead');
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {

package/src/design_system/sections/contact-section-form.tsx

@@ -3,7 +3,7 @@
 import React, { useRef, useState } from 'react';
 import { Form, Button } from '../elements';
 import { DynamicFormFields } from '../components/DynamicFormFields';
-import { firePixelEvent } from '../../tracking/firePixelEvent';
+import { firePixelEvent, setPixelUserData } from '../../tracking/firePixelEvent';
 import type { FormDefinition } from '../../types/api/form';
 import { useFormDefinitions } from '../../next/contexts/form-definitions';
 
@@ -69,6 +69,7 @@ export const ContactSectionForm = ({
                 setStatusMessage(result.message || successMessage);
                 formRef.current?.reset();
                 onSuccess?.();
+                await setPixelUserData({ email: data.email, phone: data.phone });
                 firePixelEvent('Lead');
                 setTimeout(() => setSubmitStatus('idle'), 5000);
             } else {

package/src/next/routes/chat.ts

@@ -21,6 +21,8 @@
 // for route handlers. Instead, export a factory so the consuming app can pass in its
 // own `NextResponse` (from its own `next/server`) while we keep the core logic shared.
 
+import { clientContextHeaders } from './proxy-headers';
+
 const API_URL = process.env.API_URL || 'http://localhost:3000/api/v1';
 const API_KEY = process.env.API_KEY || '';
 
@@ -48,7 +50,11 @@ export function createChatRouteHandlers(deps?: { NextResponse?: { json: JsonResp
 
         const response = await fetch(`${API_URL}/public/messages`, {
           method: 'POST',
-          headers: { 'Content-Type': 'application/json', 'X-API-Key': API_KEY },
+          headers: {
+            'Content-Type': 'application/json',
+            'X-API-Key': API_KEY,
+            ...clientContextHeaders(request),
+          },
           body: JSON.stringify({ identifier, contact_id, body: messageBody, display_name, page_url }),
         });
 

package/src/next/routes/consumer-auth.ts

@@ -15,6 +15,7 @@
  */
 
 import { CONSUMER_TOKEN_COOKIE } from '../../lib/consumer-session';
+import { clientContextHeaders } from './proxy-headers';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type NextResponseLike = { json: (body: unknown, init?: ResponseInit) => any };
@@ -29,11 +30,12 @@ function getApiKey(): string {
   return process.env.API_KEY || '';
 }
 
-function apiHeaders(): Record<string, string> {
+function apiHeaders(request?: Request): Record<string, string> {
   const key = getApiKey();
   return {
     'Content-Type': 'application/json',
     ...(key ? { 'X-API-Key': key } : {}),
+    ...(request ? clientContextHeaders(request) : {}),
   };
 }
 
@@ -51,7 +53,7 @@ async function handleInitiate(request: Request, NR: NextResponseLike): Promise<R
   try {
     const res = await fetch(`${getApiUrl()}/consumer/auth/initiate`, {
       method: 'POST',
-      headers: apiHeaders(),
+      headers: apiHeaders(request),
       body: JSON.stringify({ email: email || undefined, phone: phone || undefined }),
     });
 
@@ -82,7 +84,7 @@ async function handleLogin(request: Request, NR: NextResponseLike): Promise<Resp
 
   const res = await fetch(`${getApiUrl()}/consumer/auth/login`, {
     method: 'POST',
-    headers: apiHeaders(),
+    headers: apiHeaders(request),
     body: JSON.stringify({ email: email || undefined, phone: phone || undefined, password }),
   });
 
@@ -119,7 +121,7 @@ async function handleSignup(request: Request, NR: NextResponseLike): Promise<Res
 
   const res = await fetch(`${getApiUrl()}/consumer/auth/signup`, {
     method: 'POST',
-    headers: apiHeaders(),
+    headers: apiHeaders(request),
     body: JSON.stringify({
       email: email || undefined,
       phone: phone || undefined,

package/src/next/routes/form.ts

@@ -15,6 +15,8 @@
 // Export a factory so the consuming app can pass its own `NextResponse` (from its own
 // `next/server`) to avoid type identity conflicts when used as a local file dependency.
 
+import { clientContextHeaders } from './proxy-headers';
+
 const API_URL = process.env.API_URL || 'http://localhost:3000/api/v1';
 const API_KEY = process.env.API_KEY || '';
 
@@ -38,6 +40,7 @@ export function createFormRouteHandlers(deps?: { NextResponse?: { json: JsonResp
           headers: {
             'Content-Type': 'application/json',
             'X-API-Key': API_KEY,
+            ...clientContextHeaders(request),
           },
           body: JSON.stringify(body),
         });

package/src/next/routes/proxy-headers.ts

@@ -0,0 +1,22 @@
+/**
+ * Extracts the real client IP and user-agent from an incoming Next.js route
+ * request and returns them as headers to forward to the upstream Rails API.
+ *
+ * Cloudflare and other load-balancers set x-real-ip (or x-forwarded-for) on
+ * inbound requests before they reach the Next.js function. Without this, the
+ * Rails API sees the Next.js server IP instead of the real browser IP, which
+ * produces inaccurate server-side CAPI signals.
+ *
+ * Convention: forwarded as X-Real-Client-IP / X-Real-Client-UA so that Rails
+ * can read them explicitly without conflicting with its own proxy middleware.
+ */
+export function clientContextHeaders(request: Request): Record<string, string> {
+  const ip =
+    request.headers.get('x-real-ip') ||
+    request.headers.get('x-forwarded-for')?.split(',')[0]?.trim();
+  const ua = request.headers.get('user-agent');
+  const headers: Record<string, string> = {};
+  if (ip) headers['X-Real-Client-IP'] = ip;
+  if (ua) headers['X-Real-Client-UA'] = ua;
+  return headers;
+}

package/src/styles/style-overrides.aman.css

@@ -40,6 +40,12 @@
   /* Border colors */
   --color-border-primary: #E5E2D9;
   --color-border-secondary: #D5D2C9;
+
+  /* Radius — minimal/sharp aesthetic */
+  --radius-component: 0.25rem;
+  --radius-interactive: 0.25rem;
+  --radius-input: 0.25rem;
+  --radius-badge: 0.25rem;
 }
 
 /* Body text uses Inter */

package/src/styles/style-overrides.barelux.css

@@ -40,6 +40,12 @@
   /* Border colors */
   --color-border-primary: #EEEAE7;
   --color-border-secondary: #E5E1DE;
+
+  /* Radius — soft/rounded aesthetic */
+  --radius-component: 0.75rem;
+  --radius-interactive: 0.5rem;
+  --radius-input: 0.5rem;
+  --radius-badge: 9999px;
 }
 
 /* Body text uses Poppins */

package/src/styles/theme.css

@@ -54,6 +54,12 @@
     --radius-3xl: 1.5rem;
     --radius-full: 9999px;
 
+    /* Semantic radius tokens — override per theme to get consistent rounding everywhere */
+    --radius-component: 0.5rem;    /* cards, panels, containers */
+    --radius-interactive: 0.375rem; /* buttons, tabs */
+    --radius-input: 0.375rem;       /* form inputs */
+    --radius-badge: 9999px;         /* pill badges / tags */
+
     /* ==================== SHADOWS ==================== */
     --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
     --shadow-sm: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);

package/src/tracking/MetaPixel.tsx

@@ -14,6 +14,10 @@ const PIXEL_SCRIPT = (pixelId: string) => `
   s.parentNode.insertBefore(t,s)}(window, document,'script','${FBEVENTS_URL}');
   fbq('init', '${pixelId.replace(/'/g, "\\'")}');
   fbq('track', 'PageView');
+  window.__ks_pixel_ids = window.__ks_pixel_ids || [];
+  if (window.__ks_pixel_ids.indexOf('${pixelId.replace(/'/g, "\\'")}') === -1) {
+    window.__ks_pixel_ids.push('${pixelId.replace(/'/g, "\\'")}');
+  }
 `;
 
 export type MetaPixelProps = {

package/src/tracking/firePixelEvent.ts

@@ -1,4 +1,4 @@
-type FbqFn = (method: string, eventName: string, params?: Record<string, string>) => void;
+type FbqFn = (method: string, ...args: unknown[]) => void;
 
 export type PixelEvent = 'PageView' | 'ViewContent' | 'InitiateCheckout' | 'Lead';
 
@@ -7,20 +7,97 @@ export interface PixelEventParams {
   contentCategory?: string;
 }
 
+/** Raw (unhashed) user identifiers for advanced matching. */
+export interface PixelUserData {
+  email?: string | null;
+  phone?: string | null;
+}
+
+// Hashed user data stored in sessionStorage for the duration of the browsing session.
+// Keyed by a short namespace to avoid collisions.
+const STORAGE_KEY = 'ks_pud';
+
+async function sha256Hex(str: string): Promise<string> {
+  const buffer = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(str));
+  return Array.from(new Uint8Array(buffer))
+    .map((b) => b.toString(16).padStart(2, '0'))
+    .join('');
+}
+
+function getFbq(): FbqFn | undefined {
+  if (typeof window === 'undefined') return undefined;
+  return (window as Window & { fbq?: FbqFn }).fbq;
+}
+
+/** Read the pixel IDs registered by MetaPixel via the inline init script. */
+function getRegisteredPixelIds(): string[] {
+  return (window as Window & { __ks_pixel_ids?: string[] }).__ks_pixel_ids ?? [];
+}
+
+/** Apply stored hashed user data to every configured Meta Pixel. */
+function applyStoredUserData(fbq: FbqFn): void {
+  try {
+    const raw = sessionStorage.getItem(STORAGE_KEY);
+    if (!raw) return;
+    const hashed = JSON.parse(raw) as Record<string, string>;
+    if (Object.keys(hashed).length === 0) return;
+    getRegisteredPixelIds().forEach((id) => fbq('init', id, hashed));
+  } catch {
+    // sessionStorage unavailable or JSON malformed — safe to ignore
+  }
+}
+
+/**
+ * Hash and store user identifiers so they are automatically included in all
+ * subsequent pixel events for this browser session. Call this as soon as
+ * identity is known (e.g. contact form submission, portal login step 1).
+ */
+export async function setPixelUserData(userData: PixelUserData): Promise<void> {
+  const hashed: Record<string, string> = {};
+
+  if (userData.email) {
+    hashed.em = await sha256Hex(userData.email.trim().toLowerCase());
+  }
+  if (userData.phone) {
+    const digits = userData.phone.replace(/\D/g, '');
+    if (digits) hashed.ph = await sha256Hex(digits);
+  }
+
+  if (Object.keys(hashed).length === 0) return;
+
+  try {
+    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(hashed));
+  } catch {
+    // sessionStorage unavailable — still apply to fbq for this page load
+  }
+
+  const fbq = getFbq();
+  if (fbq) {
+    getRegisteredPixelIds().forEach((id) => fbq('init', id, hashed));
+  }
+}
+
 /**
  * Single entry point for all client-side Meta Pixel event fires.
+ * Automatically applies any stored user identity before firing so that Meta
+ * can match events to known users across the entire session.
  * Silently no-ops if fbq is not loaded (pixel not configured for this site).
  */
 export function firePixelEvent(event: PixelEvent, params?: PixelEventParams): void {
-  if (typeof window === 'undefined') return;
-  const fbq = (window as Window & { fbq?: FbqFn }).fbq;
+  const fbq = getFbq();
   if (!fbq) {
     console.debug('[MetaPixel] skipped — fbq not loaded', { event });
     return;
   }
+
+  // Re-apply stored identity before every event so user data is included
+  // even on events that fire after a client-side navigation (PageView, ViewContent, etc.)
+  applyStoredUserData(fbq);
+
   const normalized: Record<string, string> = {};
   if (params?.contentName) normalized.content_name = params.contentName;
   if (params?.contentCategory) normalized.content_category = params.contentCategory;
+
   console.debug('[MetaPixel]', event, normalized);
   fbq('track', event, Object.keys(normalized).length > 0 ? normalized : undefined);
 }